diff --git a/frontend/web/.stylelintrc.cjs b/frontend/web/.stylelintrc.cjs
index 222b3619..c387dad7 100644
--- a/frontend/web/.stylelintrc.cjs
+++ b/frontend/web/.stylelintrc.cjs
@@ -21,6 +21,13 @@ module.exports = {
       files: ["**/*.{css,scss}"],
       customSyntax: "postcss-scss",
     },
+    // Markdown 预览样式由多段合并，存在有意重复的限定选择器
+    {
+      files: ["**/src/styles/core/md.scss"],
+      rules: {
+        "no-duplicate-selectors": null,
+      },
+    },
   ],
   // 自定义规则
   rules: {
@@ -30,7 +37,8 @@ module.exports = {
     "scss/at-rule-no-unknown": [
       true,
       {
-        ignoreAtRules: ["reference"],
+        // Tailwind CSS v4：@custom-variant、@theme、@utility、@layer 等
+        ignoreAtRules: ["reference", "custom-variant", "theme", "utility", "layer"],
       },
     ],
     "import-notation": "string", // 指定导入CSS文件的方式("string"|"url")
@@ -40,6 +48,8 @@ module.exports = {
     "no-descending-specificity": null, // 允许无降序特异性
     "no-empty-source": null, // 允许空样式
     "property-no-vendor-prefix": null, // 允许属性前缀
+    // SCSS @if/@else 链与 Prettier 易冲突，关闭「at-rule 前空行」检查
+    "at-rule-empty-line-before": null,
     // 允许 global 、export 、deep伪类
     "selector-pseudo-class-no-unknown": [
       true,
@@ -47,6 +57,13 @@ module.exports = {
         ignorePseudoClasses: ["global", "export", "deep"],
       },
     ],
+    // 允许 Vue 3 的 ::deep 伪元素选择器
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        ignorePseudoElements: ["deep"],
+      },
+    ],
     // 允许未知属性
     "property-no-unknown": [
       true,
diff --git a/frontend/web/CHANGELOG.md b/frontend/web/CHANGELOG.md
index fe19e031..f30194c3 100644
--- a/frontend/web/CHANGELOG.md
+++ b/frontend/web/CHANGELOG.md
@@ -371,7 +371,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Removed
 
-- Removed CountTo plugin, replaced with ArtCountTo component
+- Removed CountTo plugin, replaced with FaCountTo component
 
 #### Fixed
 
@@ -431,7 +431,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Fixed
 
-- Fixed login page drag component ArtDragVerify width and color abnormal bug
+- Fixed login page drag component FaDragVerify width and color abnormal bug
 - Fixed iframe page mixed mode and double column mode abnormal bug
 - Optimized lock screen page being penetrated by el-loading bug
 
@@ -441,7 +441,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Refactored
 
-- Refactored form-related components in components/forms folder, improved maintainability and consistency
+- Refactored form-related components in components/core/forms folder, improved maintainability and consistency
 - Refactored ArtBreadcrumb breadcrumb navigation component, optimized logic structure and styles
 - Refactored ArtFireworksEffect fireworks effect component, significantly improved rendering performance and animation smoothness
 
@@ -468,8 +468,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Refactored
 
-- ArtMenuRight component refactored
-- Components under components/cards refactored, code optimized
+- FaMenuRight component refactored
+- Components under components/core/cards refactored, code optimized
 
 #### Optimized
 
@@ -481,14 +481,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Refactored
 
-- ArtResultPage component refactored
+- FaResultPage component refactored
 
 #### Optimized
 
 - ArtTextScroll component code optimization
-- ArtException component added type hints
-- ArtCutterImg component style optimization, added type definitions
-- ArtVideoPlayer component added type definitions
+- FaException component added type hints
+- FaCutterImg component style optimization, added type definitions
+- FaVideoPlayer component added type definitions
 
 ---
 
diff --git a/frontend/web/CHANGELOG.zh-CN.md b/frontend/web/CHANGELOG.zh-CN.md
index 90613c5b..1bc5aa90 100644
--- a/frontend/web/CHANGELOG.zh-CN.md
+++ b/frontend/web/CHANGELOG.zh-CN.md
@@ -371,7 +371,7 @@
 
 #### 移除
 
-- 移除 CountTo 插件，替换为 ArtCountTo 组件
+- 移除 CountTo 插件，替换为 FaCountTo 组件
 
 #### 修复
 
@@ -431,7 +431,7 @@
 
 #### 修复
 
-- 修复登录页面拖拽组件 ArtDragVerify 宽度、颜色异常bug
+- 修复登录页面拖拽组件 FaDragVerify 宽度、颜色异常bug
 - 修复 iframe 页面混合模式、双列模式异常bug
 - 优化锁屏页面被 el-loading 穿透bug
 
@@ -441,7 +441,7 @@
 
 #### 重构
 
-- 重构 components/forms 文件夹下的表单相关组件，提升可维护性与一致性
+- 重构 components/core/forms 文件夹下的表单相关组件，提升可维护性与一致性
 - 重构 ArtBreadcrumb 面包屑导航组件，优化逻辑结构与样式
 - 重构 ArtFireworksEffect 烟花效果组件，显著提升渲染性能与动画流畅度
 
@@ -468,8 +468,8 @@
 
 #### 重构
 
-- ArtMenuRight 组件重构
-- components/cards 下面的组件重构，代码优化
+- FaMenuRight 组件重构
+- components/core/cards 下面的组件重构，代码优化
 
 #### 优化
 
@@ -481,14 +481,14 @@
 
 #### 重构
 
-- ArtResultPage 组件重构
+- FaResultPage 组件重构
 
 #### 优化
 
 - ArtTextScroll 组件代码优化
-- ArtException 组件增加类型提示
-- ArtCutterImg 组件样式优化、增加类型定义
-- ArtVideoPlayer 组件增加类型定义
+- FaException 组件增加类型提示
+- FaCutterImg 组件样式优化、增加类型定义
+- FaVideoPlayer 组件增加类型定义
 
 ---
 
diff --git a/frontend/web/eslint.config.mjs b/frontend/web/eslint.config.mjs
index ce0be97e..87c36094 100644
--- a/frontend/web/eslint.config.mjs
+++ b/frontend/web/eslint.config.mjs
@@ -130,7 +130,6 @@ export default [
         CommonType: 'readonly',
         updatorType: 'readonly',
         creatorType: 'readonly',
-        TagView: 'readonly',
         AppSettings: 'readonly',
         __APP_INFO__: 'readonly',
         UploadFilePath: 'readonly',
@@ -183,11 +182,24 @@ export default [
     },
   },
 
+  // Pin TypeScript project root so @typescript-eslint/parser resolves tsconfig consistently.
+  {
+    files: ['**/*.{ts,tsx,mts,cts}'],
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
+
   // Vue 文件特定配置
   {
     files: ['**/*.vue'],
     languageOptions: {
-      parserOptions: { parser: tseslint.parser },
+      parserOptions: {
+        parser: tseslint.parser,
+        tsconfigRootDir: __dirname,
+      },
     },
   },
 
diff --git a/frontend/web/scripts/clean-dev.ts b/frontend/web/scripts/clean-dev.ts
index c7df7ee6..8ef02eb7 100644
--- a/frontend/web/scripts/clean-dev.ts
+++ b/frontend/web/scripts/clean-dev.ts
@@ -165,7 +165,7 @@ const targets = [
   "src/assets/images/cover",
   "src/assets/images/safeguard",
   "src/assets/images/3d",
-  "src/components/charts/fa-map-chart",
+  "src/components/charts/art-map-chart",
   "src/components/business/comment-widget",
 ];
 
diff --git a/frontend/web/src/App.vue b/frontend/web/src/App.vue
index 856fbfa9..16ad192b 100755
--- a/frontend/web/src/App.vue
+++ b/frontend/web/src/App.vue
@@ -16,7 +16,7 @@
       <RouterView></RouterView>
 
       <!-- AI 助手 -->
-      <FaAiAssistant v-if="enableAiAssistant" />
+      <AiAssistant v-if="enableAiAssistant" />
     </ElWatermark>
   </ElConfigProvider>
 </template>
@@ -27,7 +27,7 @@ import { useAppStore, useUserStore } from "./store";
 import { useSettingsStore } from "./store/modules/setting.store";
 import { defaultSettings } from "./config/setting";
 import { ComponentSize } from "./enums/settings/layout.enum";
-import FaAiAssistant from "./components/others/fa-ai-assistant/index.vue";
+import AiAssistant from "./components/others/fa-ai-assistant/index.vue";
 import { hexToRgba, toggleTransition } from "./utils/ui";
 import { checkStorageCompatibility } from "./utils/storage";
 import { initializeTheme } from "./hooks/core/useTheme";
diff --git a/frontend/web/src/assets/svg/loading.ts b/frontend/web/src/assets/svg/loading.ts
index fdfb0780..f30e3947 100644
--- a/frontend/web/src/assets/svg/loading.ts
+++ b/frontend/web/src/assets/svg/loading.ts
@@ -29,4 +29,4 @@ export const fourDotsSpinnerSvg = `
       <circle class="dot" cx="8" cy="20" r="4"/>
     </g>
   </svg>
-`
+`;
diff --git a/frontend/web/src/components/forms/fa-wang-editor/style.scss b/frontend/web/src/components/forms/fa-wang-editor/style.scss
index 7f22e98b..0b1599df 100644
--- a/frontend/web/src/components/forms/fa-wang-editor/style.scss
+++ b/frontend/web/src/components/forms/fa-wang-editor/style.scss
@@ -9,7 +9,7 @@ $box-radius: calc(var(--custom-radius) / 3 + 2px);
 .editor-wrapper {
   width: 100%;
   height: 100%;
-  border: 1px solid var(--art-gray-300);
+  border: 1px solid var(--fa-gray-300);
   border-radius: $box-radius !important;
 
   .w-e-bar {
@@ -53,12 +53,12 @@ $box-radius: calc(var(--custom-radius) / 3 + 2px);
 
   /* 下拉选择框 hover 样式调整 */
   .w-e-select-list ul li:hover {
-    background-color: var(--art-gray-200);
+    background-color: var(--fa-gray-200);
   }
 
   :root {
     /* 激活颜色 */
-    --w-e-toolbar-active-bg-color: var(--art-gray-200);
+    --w-e-toolbar-active-bg-color: var(--fa-gray-200);
 
     /* toolbar 图标和文字颜色 */
     --w-e-toolbar-color: #000;
@@ -67,22 +67,22 @@ $box-radius: calc(var(--custom-radius) / 3 + 2px);
     --w-e-textarea-selected-border-color: #ddd;
 
     /* 表格头背景颜色 */
-    --w-e-textarea-slight-bg-color: var(--art-gray-200);
+    --w-e-textarea-slight-bg-color: var(--fa-gray-200);
   }
 
   /* 工具栏按钮样式 */
   .w-e-bar-item svg {
-    fill: var(--art-gray-800);
+    fill: var(--fa-gray-800);
   }
 
   .w-e-bar-item button {
-    color: var(--art-gray-800);
+    color: var(--fa-gray-800);
     border-radius: $box-radius;
   }
 
   /* 工具栏 hover 按钮背景颜色 */
   .w-e-bar-item button:hover {
-    background-color: var(--art-gray-200);
+    background-color: var(--fa-gray-200);
   }
 
   /* 工具栏分割线 */
@@ -110,7 +110,7 @@ $box-radius: calc(var(--custom-radius) / 3 + 2px);
   /* 代码块 */
   .w-e-text-container [data-slate-editor] pre > code {
     padding: 0.6rem 1rem;
-    background-color: var(--art-gray-50);
+    background-color: var(--fa-gray-50);
     border-radius: $box-radius;
   }
 
@@ -210,8 +210,8 @@ $box-radius: calc(var(--custom-radius) / 3 + 2px);
 
   /* 引用 */
   .w-e-text-container [data-slate-editor] blockquote {
-    background-color: var(--art-gray-200);
-    border-left: 4px solid var(--art-gray-300);
+    background-color: var(--fa-gray-200);
+    border-left: 4px solid var(--fa-gray-300);
   }
 
   /* 输入区域弹出 bar  */
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 482907f1..876c514d 100644
--- a/frontend/web/src/components/layouts/fa-global-search/index.vue
+++ b/frontend/web/src/components/layouts/fa-global-search/index.vue
@@ -367,27 +367,27 @@ const highlightOnHoverHistory = (index: number) => {
 </script>
 <style lang="scss" scoped>
 .layout-search {
-  :deep(.search-modal) {
+  ::deep(.search-modal) {
     background-color: rgb(0 0 0 / 20%);
   }
 
-  :deep(.el-dialog__body) {
+  ::deep(.el-dialog__body) {
     padding: 5px 0 0 !important;
   }
 
-  :deep(.el-dialog__header) {
+  ::deep(.el-dialog__header) {
     padding: 0;
   }
 
   .el-input {
-    :deep(.el-input__wrapper) {
+    ::deep(.el-input__wrapper) {
       background-color: var(--fa-gray-200);
       border: 1px solid var(--default-border-dashed);
       border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
       box-shadow: none;
     }
 
-    :deep(.el-input__inner) {
+    ::deep(.el-input__inner) {
       color: var(--fa-gray-800) !important;
     }
   }
@@ -395,18 +395,18 @@ const highlightOnHoverHistory = (index: number) => {
 
 .dark .layout-search {
   .el-input {
-    :deep(.el-input__wrapper) {
+    ::deep(.el-input__wrapper) {
       background-color: #333;
       border: 1px solid #4c4d50;
     }
   }
 
-  :deep(.search-modal) {
+  ::deep(.search-modal) {
     background-color: rgb(23 23 26 / 60%);
     backdrop-filter: none;
   }
 
-  :deep(.el-dialog) {
+  ::deep(.el-dialog) {
     background-color: #252526;
   }
 }
diff --git a/frontend/web/src/components/layouts/fa-header-bar/index.vue b/frontend/web/src/components/layouts/fa-header-bar/index.vue
index f272d90a..82179246 100755
--- a/frontend/web/src/components/layouts/fa-header-bar/index.vue
+++ b/frontend/web/src/components/layouts/fa-header-bar/index.vue
@@ -463,35 +463,35 @@ const openChat = (): void => {
 }
 
 /* Hover animation classes */
-.refresh-btn:hover :deep(.fa-svg-icon) {
+.refresh-btn:hover ::deep(.fa-svg-icon) {
   animation: rotate180 0.5s;
 }
 
-.language-btn:hover :deep(.fa-svg-icon) {
+.language-btn:hover ::deep(.fa-svg-icon) {
   animation: moveUp 0.4s;
 }
 
-.setting-btn:hover :deep(.fa-svg-icon) {
+.setting-btn:hover ::deep(.fa-svg-icon) {
   animation: rotate180 0.5s;
 }
 
-.full-screen-btn:hover :deep(.fa-svg-icon) {
+.full-screen-btn:hover ::deep(.fa-svg-icon) {
   animation: expand 0.6s forwards;
 }
 
-:deep(.size-select-btn:hover .fa-svg-icon) {
+::deep(.size-select-btn:hover .fa-svg-icon) {
   animation: expand 0.6s forwards;
 }
 
-.exit-full-screen-btn:hover :deep(.fa-svg-icon) {
+.exit-full-screen-btn:hover ::deep(.fa-svg-icon) {
   animation: shrink 0.6s forwards;
 }
 
-.notice-button:hover :deep(.fa-svg-icon) {
+.notice-button:hover ::deep(.fa-svg-icon) {
   animation: shake 0.5s ease-in-out;
 }
 
-.chat-button:hover :deep(.fa-svg-icon) {
+.chat-button:hover ::deep(.fa-svg-icon) {
   animation: shake 0.5s ease-in-out;
 }
 
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 d80adcc4..198c51ed 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
@@ -247,7 +247,7 @@ function closeUserMenu(): void {
 }
 
 /* ElPopover 基于 Tooltip：触发层默认 inline-block，与顶栏 flex 图标中线对齐 */
-.fa-user-menu :deep(.el-tooltip__trigger) {
+.fa-user-menu ::deep(.el-tooltip__trigger) {
   display: inline-flex !important;
   align-items: center;
   line-height: 1;
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..0df8f3dc 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
@@ -92,18 +92,18 @@ const filterMenuItems = (items: AppRouteRecord[]): AppRouteRecord[] => {
 
 <style scoped>
 /* Remove el-menu bottom border */
-:deep(.el-menu) {
+::deep(.el-menu) {
   border-bottom: none !important;
 }
 
 /* Remove default styles for first-level menu items */
-:deep(.el-menu-item[tabindex="0"]) {
+::deep(.el-menu-item[tabindex="0"]) {
   background-color: transparent !important;
   border: none !important;
 }
 
 /* Remove bottom border from submenu titles */
-:deep(.el-menu--horizontal .el-sub-menu__title) {
+::deep(.el-menu--horizontal .el-sub-menu__title) {
   padding: 0 30px 0 10px !important;
   border: 0 !important;
 }
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/HorizontalSubmenu.vue
index 5abbdff8..25a70669 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/HorizontalSubmenu.vue
@@ -49,6 +49,7 @@ 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";
 
 const props = defineProps({
   item: {
@@ -105,7 +106,7 @@ const closeMenu = () => {
 </script>
 
 <style scoped>
-:deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
+::deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
   right: 10px !important;
 }
 </style>
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 43982a00..9092a096 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
@@ -59,6 +59,7 @@ import { useThrottleFn } from "@vueuse/core";
 import { formatMenuTitle } from "@utils/navigation";
 import { handleMenuJump } from "@utils/navigation";
 import type { AppRouteRecord } from "@/types/router";
+import FaMenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
 
 defineOptions({ name: "FaMixedMenu" });
 
@@ -247,13 +248,13 @@ onMounted(initScrollState);
 </style>
 
 <style scoped>
-:deep(.el-scrollbar__bar.is-horizontal) {
+::deep(.el-scrollbar__bar.is-horizontal) {
   bottom: 5px;
   display: none;
   height: 2px;
 }
 
-:deep(.scrollbar-wrapper) {
+::deep(.scrollbar-wrapper) {
   flex: 1;
   min-width: 0;
   margin: 0 50px 0 30px;
@@ -272,7 +273,7 @@ onMounted(initScrollState);
 }
 
 @media (width <= 1440px) {
-  :deep(.scrollbar-wrapper) {
+  ::deep(.scrollbar-wrapper) {
     margin: 0 45px;
   }
 }
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss
index 08dec787..b7c8319e 100755
--- a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss
+++ b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss
@@ -3,18 +3,18 @@
   height: 100vh;
   user-select: none;
   scrollbar-width: none;
-  border-right: 1px solid var(--art-card-border);
+  border-right: 1px solid var(--fa-card-border);
 
   &.no-border {
     border-right: none !important;
   }
 
   // 自定义滚动条宽度
-  :deep(.el-scrollbar__bar.is-vertical) {
+  ::deep(.el-scrollbar__bar.is-vertical) {
     width: 4px;
   }
 
-  :deep(.el-scrollbar__thumb) {
+  ::deep(.el-scrollbar__thumb) {
     right: -2px;
     background-color: #ccc;
     border-radius: 2px;
@@ -24,7 +24,7 @@
     position: relative;
     width: 80px;
     height: 100%;
-    border-right: 1px solid var(--art-card-border) !important;
+    border-right: 1px solid var(--fa-card-border) !important;
     transition: width 0.25s;
 
     .logo {
@@ -114,7 +114,7 @@
       height: 50px;
       cursor: pointer;
       background-color: var(--default-box-color);
-      border: 1px solid var(--art-card-border);
+      border: 1px solid var(--fa-card-border);
       border-radius: 0 15px 15px 0;
       opacity: 0;
       transform: translateY(-50%);
@@ -122,7 +122,7 @@
 
       &:hover {
         .art-svg-icon {
-          color: var(--art-gray-800) !important;
+          color: var(--fa-gray-800) !important;
         }
       }
 
@@ -240,7 +240,7 @@
   .layout-sidebar {
     border-right: 1px solid rgb(255 255 255 / 13%);
 
-    :deep(.el-scrollbar__thumb) {
+    ::deep(.el-scrollbar__thumb) {
       background-color: #777;
     }
 
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/theme.scss b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/theme.scss
index a6ccae5c..fb442580 100644
--- a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/theme.scss
+++ b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/theme.scss
@@ -4,7 +4,7 @@
 $menu-height: 42px;
 $menu-icon-size: 20px;
 $menu-font-size: 14px;
-$hover-bg-color: var(--art-gray-200);
+$hover-bg-color: var(--fa-gray-200);
 $popup-menu-height: 40px;
 $popup-menu-padding: 8px;
 $popup-menu-margin: 5px;
@@ -158,7 +158,7 @@ $popup-menu-radius: 6px;
     @include menu-hover($hover-bg-color);
 
     .el-sub-menu__icon-arrow {
-      color: var(--art-gray-600);
+      color: var(--fa-gray-600);
     }
   }
 
@@ -169,7 +169,7 @@ $popup-menu-radius: 6px;
     @include menu-hover(#0f1015);
 
     .el-sub-menu__icon-arrow {
-      color: var(--art-gray-400);
+      color: var(--fa-gray-400);
     }
   }
 
@@ -203,7 +203,7 @@ $popup-menu-radius: 6px;
     @include menu-hover($hover-bg-color);
 
     .el-sub-menu__icon-arrow {
-      color: var(--art-gray-600);
+      color: var(--fa-gray-600);
     }
   }
 }
@@ -225,21 +225,21 @@ $popup-menu-radius: 6px;
 // 菜单折叠 hover 弹窗样式（浅色主题）
 .el-menu--vertical,
 .el-menu--popup-container {
-  @include popup-menu-base(var(--art-gray-200), var(--art-gray-900), var(--art-gray-200));
+  @include popup-menu-base(var(--fa-gray-200), var(--fa-gray-900), var(--fa-gray-200));
 }
 
 // 暗黑模式菜单样式
 .dark {
   .el-menu--vertical,
   .el-menu--popup-container {
-    @include popup-menu-base(var(--art-gray-200), var(--art-gray-900), #292a2e);
+    @include popup-menu-base(var(--fa-gray-200), var(--fa-gray-900), #292a2e);
   }
 
   .layout-sidebar {
     // 图标颜色、文字颜色
     .menu-icon .art-svg-icon,
     .menu-name {
-      color: var(--art-gray-800) !important;
+      color: var(--fa-gray-800) !important;
     }
 
     // 选中的文字颜色跟图标颜色
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 a1d6ac3a..04f0e698 100644
--- a/frontend/web/src/components/layouts/fa-page-content/index.vue
+++ b/frontend/web/src/components/layouts/fa-page-content/index.vue
@@ -15,20 +15,26 @@
     </div>
 
     <RouterView v-if="isRefresh" v-slot="{ Component, route: router }" :style="contentStyle">
-      <Transition :name="actualTransition" mode="out-in" appear>
-        <div class="route-view-shell flex min-h-0 min-w-0 w-full flex-1 flex-col">
-          <KeepAlive :max="10" :exclude="keepAliveExclude">
+      <Transition :name="actualTransition" mode="out-in">
+        <div v-if="Component" class="route-view-shell flex min-h-0 min-w-0 w-full flex-1 flex-col">
+          <!-- 是否缓存以后端菜单 keep_alive → meta.keepAlive 为准；此处 !== false 即包 KeepAlive（与 MenuProcessor 一致） -->
+          <KeepAlive
+            v-if="wrapPageWithKeepAlive"
+            :max="10"
+            :include="keepAliveInclude"
+            :exclude="keepAliveExclude"
+          >
             <component
               class="fa-page-view min-h-0 min-w-0 w-full flex-1"
               :is="Component"
-              :key="router.fullPath"
+              :key="routeLeafCacheKey(router)"
             />
           </KeepAlive>
           <component
             v-else
             class="fa-page-view min-h-0 min-w-0 w-full flex-1"
             :is="Component"
-            :key="router.fullPath"
+            :key="routeLeafCacheKey(router)"
           />
         </div>
       </Transition>
@@ -47,6 +53,12 @@
   </div>
 </template>
 <script setup lang="ts">
+/**
+ * 布局滚动容器 + 业务路由出口；与 settings.refresh 联动可整体重建 RouterView。
+ *
+ * 缓存开关数据源：后端菜单 `keep_alive` → MenuProcessor 写入 `meta.keepAlive`；工作栏 tab 随路由写入同一 meta。
+ * include / wrapPageWithKeepAlive 均用 `!== false`，与静态路由里显式 `keepAlive: false`、后端布尔字段对齐。
+ */
 import type { CSSProperties } from "vue";
 import { useMediaQuery } from "@vueuse/core";
 import { useRoute, type RouteLocationNormalizedLoaded } from "vue-router";
@@ -56,18 +68,47 @@ import { useWorktabStore } from "@stores/modules/worktab.store";
 
 defineOptions({ name: "FaPageContent" });
 
+/**
+ * KeepAlive / RouterView 子节点缓存键。
+ * - `meta.remountOnFullPath === true`：整 URL 参与键（依赖 query 初值或须随 query 重建的页）。
+ * - 有 `name`：`name` + `params`，同一路由仅 query 变化不换实例。
+ * - 无 `name`：`path`（勿用 fullPath，否则仅 query 变化也会反复挂载）。
+ */
+function routeLeafCacheKey(r: RouteLocationNormalizedLoaded): string {
+  if (r.meta.remountOnFullPath === true) {
+    return r.fullPath;
+  }
+  if (r.name != null) {
+    return `${String(r.name)}:${JSON.stringify(r.params ?? {})}`;
+  }
+  return r.path;
+}
+
 const route = useRoute();
+/** 动态菜单 meta.keepAlive（后端 keep_alive）；仅显式 false 时不包 KeepAlive */
+const wrapPageWithKeepAlive = computed(() => route.meta.keepAlive !== false);
+
 const isNarrowViewport = useMediaQuery("(max-width: 800px)");
 const backtopScrollTarget = computed(() => (isNarrowViewport.value ? "" : "#app-scroll-main"));
 const backtopTargetKey = computed(() => (isNarrowViewport.value ? "win" : "main"));
 
-const { pageTransition, containerWidth, refresh } = storeToRefs(useSettingsStore());
-const { keepAliveExclude } = storeToRefs(useWorktabStore());
+const { pageTransition, containerWidth, refresh, showWorkTab } = storeToRefs(useSettingsStore());
+const { keepAliveExclude, opened } = storeToRefs(useWorktabStore());
+
+/** 多标签开启时：仅已打开且允许缓存的标签组件名进入 include；关闭多标签时不传 include，避免 opened 过窄误伤缓存。 */
+const keepAliveInclude = computed(() => {
+  if (!showWorkTab.value) return undefined;
+  const names = new Set<string>();
+  for (const t of opened.value) {
+    if (t.name && t.keepAlive !== false) names.add(String(t.name));
+  }
+  return names.size ? Array.from(names) : undefined;
+});
 
 const isRefresh = shallowRef(true);
 const isOpenRouteInfo = import.meta.env.VITE_OPEN_ROUTE_INFO;
 
-// 标记是否是首次加载（浏览器刷新）
+/** 浏览器首次进入：关闭路由过渡动画，避免首屏闪动 */
 const isFirstLoad = ref(true);
 
 const actualTransition = computed(() => {
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 8490968a..81fca2c9 100644
--- a/frontend/web/src/components/layouts/fa-screen-lock/index.vue
+++ b/frontend/web/src/components/layouts/fa-screen-lock/index.vue
@@ -54,7 +54,7 @@
     </div>
 
     <!-- 解锁全屏（旧版 LockPage 样式） -->
-    <div v-else class="lockpage">
+    <div v-else class="lockpage" :style="lockPageBgStyle">
       <div v-show="showClock" class="unlock-container" @click="showUnlockForm">
         <ElIcon><Lock /></ElIcon>
         <span>{{ t("lock.unlock") }}</span>
@@ -148,8 +148,11 @@ 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 bgDark from "@imgs/lock/bg_dark.webp";
+import bgLight from "@imgs/lock/bg_light.webp";
 
 const { t } = useI18n();
 const route = useRoute();
@@ -158,7 +161,20 @@ const router = useRouter();
 const ENCRYPT_KEY = import.meta.env.VITE_LOCK_ENCRYPT_KEY;
 
 const userStore = useUserStore();
+const settingsStore = useSettingsStore();
 const { info: userInfo, lockPassword, isLock } = storeToRefs(userStore);
+const { isDark } = storeToRefs(settingsStore);
+
+/** 锁屏全屏背景：随明暗主题切换壁纸，叠加半透明罩层保证时钟/文案可读 */
+const lockPageBgStyle = computed(() => {
+  const url = isDark.value ? bgDark : bgLight;
+  return {
+    backgroundImage: `linear-gradient(rgb(0 0 0 / 46%), rgb(0 0 0 / 46%)), url(${url})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+  };
+});
 
 const { hour, month, minute, meridiem, year, day, week } = useNow(true);
 
@@ -187,7 +203,7 @@ const unlockLoading = ref(false);
 
 const formRef = ref<FormInstance>();
 
-const formData = ref({
+const formData = reactive({
   password: "",
 });
 
@@ -525,8 +541,6 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   color: var(--el-color-white);
-  background-color: rgb(0 0 0 / 90%);
-  backdrop-filter: blur(8px);
 
   .unlock-container {
     position: absolute;
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/style.scss b/frontend/web/src/components/layouts/fa-settings-panel/style.scss
index 0e01a3fe..25f559b4 100755
--- a/frontend/web/src/components/layouts/fa-settings-panel/style.scss
+++ b/frontend/web/src/components/layouts/fa-settings-panel/style.scss
@@ -80,7 +80,7 @@
 }
 
 // 去除火狐浏览器滚动条
-:deep(.el-drawer__body) {
+::deep(.el-drawer__body) {
   scrollbar-width: none;
 }
 
diff --git a/frontend/web/src/components/layouts/fa-work-tab/index.vue b/frontend/web/src/components/layouts/fa-work-tab/index.vue
index daff70e1..8230bfae 100755
--- a/frontend/web/src/components/layouts/fa-work-tab/index.vue
+++ b/frontend/web/src/components/layouts/fa-work-tab/index.vue
@@ -1,4 +1,4 @@
-<!-- 三种模式与 fa-design-pro 一致：tab-default / tab-card / tab-google（参考 fa-design-pro/src/components/layouts/fa-work-tab） -->
+<!-- 三种模式与 art-design-pro 一致：tab-default / tab-card / tab-google（参考 art-design-pro/src/components/core/layouts/art-work-tab） -->
 <template>
   <div
     v-if="showWorkTab"
@@ -542,7 +542,15 @@ const useTabOperations = (adjustPositionAfterClose: () => void) => {
     const shouldNavigate = navigationRules[key as keyof typeof navigationRules];
 
     if (shouldNavigate) {
-      router.push(clickedPath.value);
+      const dest = list.value.find((tab) => tab.path === clickedPath.value);
+      if (dest) {
+        router.push({
+          path: dest.path,
+          query: dest.query as LocationQueryRaw,
+        });
+      } else {
+        router.push(clickedPath.value);
+      }
     }
 
     closeWorktab(key as TabCloseType, clickedPath.value);
@@ -563,7 +571,7 @@ const { setupEventListeners, cleanupEventListeners, adjustPositionAfterClose } =
 const { clickTab, closeWorktab, showMenu, handleSelect } =
   useTabOperations(adjustPositionAfterClose);
 
-/** 与旧版 TagsView 一致的横向滚动步长 */
+/** 标签横向滚动步长（px） */
 const SCROLL_STEP = 200;
 
 /**
diff --git a/frontend/web/src/components/layouts/style.scss b/frontend/web/src/components/layouts/style.scss
index b5c1ec20..8ace858b 100644
--- a/frontend/web/src/components/layouts/style.scss
+++ b/frontend/web/src/components/layouts/style.scss
@@ -33,7 +33,7 @@
       padding: 20px;
       overflow: auto;
 
-      :deep(.layout-content) {
+      ::deep(.layout-content) {
         box-sizing: border-box;
         width: 100%;
         min-width: 0;
@@ -80,7 +80,7 @@
       overflow: visible;
 
       #app-content {
-        :deep(.layout-content) {
+        ::deep(.layout-content) {
           width: calc(100% - 40px);
         }
       }
@@ -92,7 +92,7 @@
   .app-layout {
     #app-main {
       #app-content {
-        :deep(.layout-content) {
+        ::deep(.layout-content) {
           width: calc(100% - 30px);
         }
       }
diff --git a/frontend/web/src/components/media/fa-cutter-img/index.vue b/frontend/web/src/components/media/fa-cutter-img/index.vue
index b682a7c6..99478ae6 100644
--- a/frontend/web/src/components/media/fa-cutter-img/index.vue
+++ b/frontend/web/src/components/media/fa-cutter-img/index.vue
@@ -283,11 +283,11 @@ function downloadImg() {
     }
   }
 
-  :deep(.toolBoxControl) {
+  ::deep(.toolBoxControl) {
     z-index: 100;
   }
 
-  :deep(.dockMain) {
+  ::deep(.dockMain) {
     right: 0;
     bottom: -40px;
     left: 0;
@@ -297,15 +297,15 @@ function downloadImg() {
     opacity: 1;
   }
 
-  :deep(.copyright) {
+  ::deep(.copyright) {
     display: none !important;
   }
 
-  :deep(.i-dialog-footer) {
+  ::deep(.i-dialog-footer) {
     margin-top: 60px !important;
   }
 
-  :deep(.dockBtn) {
+  ::deep(.dockBtn) {
     height: 26px;
     padding: 0 10px;
     font-size: 12px;
@@ -315,31 +315,31 @@ function downloadImg() {
     border: 1px solid var(--el-color-primary-light-4) !important;
   }
 
-  :deep(.dockBtnScrollBar) {
+  ::deep(.dockBtnScrollBar) {
     margin: 0 10px 0 6px;
     background-color: var(--el-color-primary-light-1);
   }
 
-  :deep(.scrollBarControl) {
+  ::deep(.scrollBarControl) {
     border-color: var(--el-color-primary);
   }
 
-  :deep(.closeIcon) {
+  ::deep(.closeIcon) {
     line-height: 15px !important;
   }
 }
 
 .dark {
   .cutter-container {
-    :deep(.toolBox) {
+    ::deep(.toolBox) {
       border: transparent;
     }
 
-    :deep(.dialogMain) {
+    ::deep(.dialogMain) {
       background-color: transparent !important;
     }
 
-    :deep(.i-dialog-footer) {
+    ::deep(.i-dialog-footer) {
       .btn {
         background-color: var(--el-color-primary) !important;
         border: transparent;
diff --git a/frontend/web/src/components/modal/fa-dialog/index.vue b/frontend/web/src/components/modal/fa-dialog/index.vue
index ed1e3907..3a12952f 100644
--- a/frontend/web/src/components/modal/fa-dialog/index.vue
+++ b/frontend/web/src/components/modal/fa-dialog/index.vue
@@ -119,7 +119,7 @@ const dialogAttrs = computed(() => {
   align-items: center;
   margin-left: auto;
 
-  :deep(.core-overlay-icon-btn.el-button) {
+  ::deep(.core-overlay-icon-btn.el-button) {
     min-width: 32px;
     padding: 6px;
     border-radius: var(--el-border-radius-base);
diff --git a/frontend/web/src/components/modal/fa-drawer/index.vue b/frontend/web/src/components/modal/fa-drawer/index.vue
index 42325f18..3953b9c4 100644
--- a/frontend/web/src/components/modal/fa-drawer/index.vue
+++ b/frontend/web/src/components/modal/fa-drawer/index.vue
@@ -99,7 +99,7 @@ const drawerAttrs = computed(() => {
   align-items: center;
   margin-left: auto;
 
-  :deep(.core-overlay-icon-btn.el-button) {
+  ::deep(.core-overlay-icon-btn.el-button) {
     min-width: 32px;
     padding: 6px;
     border-radius: var(--el-border-radius-base);
diff --git a/frontend/web/src/components/others/fa-calendar/index.vue b/frontend/web/src/components/others/fa-calendar/index.vue
index 5474555b..be6f70f7 100644
--- a/frontend/web/src/components/others/fa-calendar/index.vue
+++ b/frontend/web/src/components/others/fa-calendar/index.vue
@@ -75,6 +75,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from "vue";
 import { dayjs } from "element-plus";
 
 defineOptions({ name: "FaCalendar" });
@@ -204,45 +205,45 @@ const handleDeleteEvent = () => {
   min-width: 0;
 }
 
-:deep(.el-calendar__header) {
+::deep(.el-calendar__header) {
   padding: 6px 4px;
   border-bottom: none;
 }
 
-:deep(.el-calendar__title) {
+::deep(.el-calendar__title) {
   font-size: 14px;
   font-weight: 600;
 }
 
-:deep(.el-calendar__header .el-button) {
+::deep(.el-calendar__header .el-button) {
   padding: 4px 8px;
 }
 
-:deep(.el-calendar__body) {
+::deep(.el-calendar__body) {
   padding: 2px 0 4px;
 }
 
-:deep(.el-calendar-table thead th) {
+::deep(.el-calendar-table thead th) {
   padding: 4px 0;
   font-size: 11px;
   font-weight: 500;
 }
 
-:deep(.is-selected) {
+::deep(.is-selected) {
   background-color: var(--el-color-warning-light-9) !important;
 }
 
-:deep(.el-calendar-day) {
+::deep(.el-calendar-day) {
   height: auto;
   min-height: 3rem;
   padding: 0;
 }
 
-:deep(.el-calendar-day:hover) {
+::deep(.el-calendar-day:hover) {
   background-color: transparent !important;
 }
 
-:deep(.el-dialog__body) {
+::deep(.el-dialog__body) {
   padding-top: 20px;
 }
 </style>
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 a27f94dd..8ab9aea0 100644
--- a/frontend/web/src/components/others/fa-icon-select/index.vue
+++ b/frontend/web/src/components/others/fa-icon-select/index.vue
@@ -181,8 +181,8 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.reference :deep(.el-input__wrapper),
-.reference :deep(.el-input__inner) {
+.reference ::deep(.el-input__wrapper),
+.reference ::deep(.el-input__inner) {
   cursor: pointer;
 }
 
diff --git a/frontend/web/src/components/others/fa-markdown-renderer/index.vue b/frontend/web/src/components/others/fa-markdown-renderer/index.vue
index 27298252..48294ab5 100644
--- a/frontend/web/src/components/others/fa-markdown-renderer/index.vue
+++ b/frontend/web/src/components/others/fa-markdown-renderer/index.vue
@@ -70,7 +70,7 @@ const renderedContent = computed(() => {
   color: var(--el-text-color-primary);
   word-wrap: break-word;
 
-  :deep(pre) {
+  ::deep(pre) {
     padding: 12px;
     margin: 12px 0;
     overflow-x: auto;
@@ -83,7 +83,7 @@ const renderedContent = computed(() => {
     }
   }
 
-  :deep(code) {
+  ::deep(code) {
     padding: 2px 6px;
     font-family: "Courier New", Courier, monospace;
     font-size: 13px;
@@ -91,21 +91,21 @@ const renderedContent = computed(() => {
     border-radius: 3px;
   }
 
-  :deep(p) {
+  ::deep(p) {
     margin: 8px 0;
   }
 
-  :deep(ul),
-  :deep(ol) {
+  ::deep(ul),
+  ::deep(ol) {
     padding-left: 24px;
     margin: 8px 0;
   }
 
-  :deep(li) {
+  ::deep(li) {
     margin: 4px 0;
   }
 
-  :deep(a) {
+  ::deep(a) {
     color: var(--el-color-primary);
     text-decoration: none;
 
@@ -114,14 +114,14 @@ const renderedContent = computed(() => {
     }
   }
 
-  :deep(blockquote) {
+  ::deep(blockquote) {
     padding: 8px 16px;
     margin: 12px 0;
     background: var(--el-fill-color-light);
     border-left: 4px solid var(--el-color-primary);
   }
 
-  :deep(table) {
+  ::deep(table) {
     width: 100%;
     margin: 12px 0;
     border-collapse: collapse;
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 3c1cbdfa..458b2e65 100644
--- a/frontend/web/src/components/others/fa-menu-right/index.vue
+++ b/frontend/web/src/components/others/fa-menu-right/index.vue
@@ -84,7 +84,9 @@
 </template>
 
 <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" });
 
@@ -382,7 +384,7 @@ defineExpose({
 }
 
 .menu-item.is-disabled i:not(.submenu-arrow),
-.menu-item.is-disabled :deep(.fa-svg-icon) {
+.menu-item.is-disabled ::deep(.fa-svg-icon) {
   color: var(--el-text-color-disabled) !important;
 }
 
diff --git a/frontend/web/src/components/others/fa-pagination/index.vue b/frontend/web/src/components/others/fa-pagination/index.vue
index 7a3249d8..dee8f4da 100644
--- a/frontend/web/src/components/others/fa-pagination/index.vue
+++ b/frontend/web/src/components/others/fa-pagination/index.vue
@@ -100,5 +100,4 @@ function handleCurrentChange(val: number) {
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
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 a38782e9..af008326 100644
--- a/frontend/web/src/components/others/fa-table-select/index.vue
+++ b/frontend/web/src/components/others/fa-table-select/index.vue
@@ -352,8 +352,8 @@ const popoverContentRef = ref();
 </script>
 
 <style scoped lang="scss">
-.reference :deep(.el-input__wrapper),
-.reference :deep(.el-input__inner) {
+.reference ::deep(.el-input__wrapper),
+.reference ::deep(.el-input__inner) {
   cursor: pointer;
 }
 
@@ -363,7 +363,7 @@ const popoverContentRef = ref();
   margin-top: 6px;
 }
 // 隐藏全选按钮
-.radio :deep(.el-table__header th.el-table__cell:nth-child(1) .el-checkbox) {
+.radio ::deep(.el-table__header th.el-table__cell:nth-child(1) .el-checkbox) {
   visibility: hidden;
 }
 </style>
diff --git a/frontend/web/src/components/others/fa-upload/index.vue b/frontend/web/src/components/others/fa-upload/index.vue
index 85648b88..108ddcf7 100644
--- a/frontend/web/src/components/others/fa-upload/index.vue
+++ b/frontend/web/src/components/others/fa-upload/index.vue
@@ -464,7 +464,7 @@ const onError = (error: any) => {
   }
 }
 
-:deep(.el-upload--picture-card) {
+::deep(.el-upload--picture-card) {
   position: relative;
   width: v-bind("props.style.width ?? '150px'");
   height: v-bind("props.style.height ?? '150px'");
diff --git a/frontend/web/src/components/tables/fa-table/index.vue b/frontend/web/src/components/tables/fa-table/index.vue
index b18b6a16..a6c4e513 100644
--- a/frontend/web/src/components/tables/fa-table/index.vue
+++ b/frontend/web/src/components/tables/fa-table/index.vue
@@ -16,59 +16,51 @@
       >
         <ElTable ref="elTableRef" v-loading="!!loading" v-bind="mergedTableProps">
           <template v-for="col in columns" :key="col.prop || col.type">
-            <!-- 渲染全局序号列 -->
             <ElTableColumn v-if="col.type === 'globalIndex'" v-bind="{ ...col }">
               <template #default="{ $index }">
                 <span>{{ getGlobalIndex($index) }}</span>
               </template>
             </ElTableColumn>
-
-          <!-- 渲染展开行 -->
-          <ElTableColumn v-else-if="col.type === 'expand'" v-bind="cleanColumnProps(col)">
-            <template #default="{ row: expandRow }">
-              <component :is="col.formatter ? col.formatter(expandRow) : null" />
-            </template>
-          </ElTableColumn>
-
-          <!-- 渲染普通列：default 插槽须紧凑书写，避免空白文本抢占 formatter（见 renderColumnFormatter 注释） -->
-          <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>
-            <!-- 整段单行：插槽内兄弟节点之间的空白文本会让 EP 误判单元格内容 -->
-            <!-- eslint-disable-next-line vue/max-attributes-per-line, prettier/prettier -->
-            <template #default="slotScope">
-              <slot
-                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,
-                }"
-              />
-              <TableFormatterOutlet
-                v-else-if="col.formatter && !col.useSlot && shouldRenderSlotScope(slotScope)"
-                :column="col"
-                :record="slotScope.row"
-              />
-            </template>
-          </ElTableColumn>
-        </template>
-
-        <template v-if="$slots.default" #default><slot /></template>
-
-        <template #empty>
-          <div v-if="loading"></div>
-          <ElEmpty v-else :description="emptyText" :image-size="120" />
-        </template>
-      </ElTable>
-    </VueDraggable>
+            <ElTableColumn v-else-if="col.type === 'expand'" v-bind="cleanColumnProps(col)">
+              <template #default="{ row: expandRow }">
+                <component :is="col.formatter ? col.formatter(expandRow) : null" />
+              </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>
+              <template #default="slotScope">
+                <slot
+                  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,
+                  }"
+                />
+                <TableFormatterOutlet
+                  v-else-if="col.formatter && !col.useSlot && shouldRenderSlotScope(slotScope)"
+                  :column="col"
+                  :record="slotScope.row"
+                />
+              </template>
+            </ElTableColumn>
+          </template>
+          <template v-if="$slots.default" #default><slot /></template>
+          <template #empty>
+            <div v-if="loading"></div>
+            <ElEmpty v-else :description="emptyText" :image-size="120" />
+          </template>
+        </ElTable>
+      </VueDraggable>
+    </div>
 
     <div
       class="pagination custom-pagination"
@@ -112,13 +104,11 @@ import { storeToRefs } from "pinia";
 import { ColumnOption } from "@/types";
 import { useTableStore } from "@stores/modules/table.store";
 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";
 
-/** 空状态插画高度（列表页统一常量） */
-const ART_TABLE_EMPTY_IMAGE_SIZE = 120;
-
 defineOptions({ name: "FaTable" });
 
 const { width } = useWindowSize();
@@ -281,7 +271,7 @@ useResizeObserver(tableHeaderRef, (entries) => {
 const PAGINATION_SPACING = computed(() => (props.showTableHeader ? 6 : 15));
 
 // 使用表格高度计算 Hook
-const { containerHeight } = useTableHeight({
+useTableHeight({
   showTableHeader: computed(() => props.showTableHeader),
   paginationHeight,
   tableHeaderHeight,
@@ -449,7 +439,7 @@ const findTableHeader = () => {
     return;
   }
 
-  const tableHeader = document.getElementById("art-table-header");
+  const tableHeader = document.getElementById("fa-table-header");
   if (tableHeader) {
     tableHeaderRef.value = tableHeader;
   } else {
diff --git a/frontend/web/src/components/tables/fa-table/style.scss b/frontend/web/src/components/tables/fa-table/style.scss
index 67459e8d..00b6daff 100644
--- a/frontend/web/src/components/tables/fa-table/style.scss
+++ b/frontend/web/src/components/tables/fa-table/style.scss
@@ -1,4 +1,4 @@
-.art-table {
+.fa-table {
   position: relative;
   height: 100%;
 
@@ -7,7 +7,7 @@
     margin-top: 10px;
   }
 
-  :deep(.el-loading-mask) {
+  ::deep(.el-loading-mask) {
     z-index: 100;
     background-color: var(--default-box-color) !important;
   }
@@ -23,7 +23,7 @@
 
   // 空状态垂直居中
   &.is-empty {
-    :deep(.el-scrollbar__wrap) {
+    ::deep(.el-scrollbar__wrap) {
       display: flex;
     }
   }
@@ -32,7 +32,7 @@
     display: flex;
     margin-top: 13px;
 
-    :deep(.el-select) {
+    ::deep(.el-select) {
       width: 102px !important;
     }
 
@@ -51,11 +51,11 @@
 
     // 自定义分页组件样式
     &.custom-pagination {
-      :deep(.el-pagination) {
+      ::deep(.el-pagination) {
         .btn-prev,
         .btn-next {
           background-color: transparent;
-          border: 1px solid var(--art-gray-300);
+          border: 1px solid var(--fa-gray-300);
           transition: border-color 0.15s;
 
           &:hover:not(.is-disabled) {
@@ -68,7 +68,7 @@
           box-sizing: border-box;
           font-weight: 400 !important;
           background-color: transparent;
-          border: 1px solid var(--art-gray-300);
+          border: 1px solid var(--fa-gray-300);
           transition: border-color 0.15s;
 
           &.is-active {
@@ -89,7 +89,7 @@
 
 // 移动端分页
 @media (width <= 640px) {
-  :deep(.el-pagination) {
+  ::deep(.el-pagination) {
     display: flex;
     flex-wrap: wrap;
     gap: 15px 0;
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 bc0acdb2..7351c0f5 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
@@ -19,6 +19,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
 import { useSettingsStore } from "@stores/modules/setting.store";
 import { useCeremony } from "@/hooks/core/useCeremony";
 import { WEB_LINKS } from "@utils/constants";
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 2ed7de31..0586cbd1 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
@@ -43,6 +43,8 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { storeToRefs } from "pinia";
 import {
   useElementSize,
   useRafFn,
@@ -51,6 +53,7 @@ import {
   useTimeoutFn,
 } from "@vueuse/core";
 import { useSettingsStore } from "@stores/modules/setting.store";
+import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
 
 type ThemeType =
   | "theme"
diff --git a/frontend/web/src/components/theme/fa-theme-svg/index.vue b/frontend/web/src/components/theme/fa-theme-svg/index.vue
index 7c176c22..8561eafe 100644
--- a/frontend/web/src/components/theme/fa-theme-svg/index.vue
+++ b/frontend/web/src/components/theme/fa-theme-svg/index.vue
@@ -88,7 +88,7 @@ watchEffect(() => {
     width: 100%;
     height: 100%;
 
-    :deep(svg) {
+    ::deep(svg) {
       width: 100%;
       height: 100%;
     }
diff --git a/frontend/web/src/components/views/fa-login/AuthTopBar.vue b/frontend/web/src/components/views/fa-login/AuthTopBar.vue
index b0aa7b52..9ff3445f 100644
--- a/frontend/web/src/components/views/fa-login/AuthTopBar.vue
+++ b/frontend/web/src/components/views/fa-login/AuthTopBar.vue
@@ -108,7 +108,11 @@
 </template>
 
 <script setup lang="ts">
+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 { useHeaderBar } from "@/hooks/core/useHeaderBar";
@@ -252,7 +256,7 @@ const changeThemeColor = (color: string) => {
   transform: translateY(-2px);
 }
 
-.auth-top-bar__action:hover :deep(.fa-svg-icon) {
+.auth-top-bar__action:hover ::deep(.fa-svg-icon) {
   color: var(--el-color-primary);
 }
 
@@ -310,15 +314,15 @@ const changeThemeColor = (color: string) => {
 }
 
 /* 调色盘：图标颜色与当前主题主色一致（含单独悬浮、整块调色区悬浮） */
-.palette-btn :deep(.fa-svg-icon) {
+.palette-btn ::deep(.fa-svg-icon) {
   color: v-bind("themeColorForCss");
 }
 
-.auth-top-bar__action.palette-btn:hover :deep(.fa-svg-icon) {
+.auth-top-bar__action.palette-btn:hover ::deep(.fa-svg-icon) {
   color: v-bind("themeColorForCss");
 }
 
-.color-picker-expandable:hover .palette-btn :deep(.fa-svg-icon) {
+.color-picker-expandable:hover .palette-btn ::deep(.fa-svg-icon) {
   color: v-bind("themeColorForCss");
 }
 </style>
diff --git a/frontend/web/src/components/views/fa-login/LoginLeftView.vue b/frontend/web/src/components/views/fa-login/LoginLeftView.vue
index 5b8bbafd..ed947899 100644
--- a/frontend/web/src/components/views/fa-login/LoginLeftView.vue
+++ b/frontend/web/src/components/views/fa-login/LoginLeftView.vue
@@ -78,10 +78,12 @@
 </template>
 
 <script setup lang="ts">
+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";
 
 defineProps<{
@@ -233,17 +235,11 @@ $bg-mix-light-7: color-mix(in srgb, $primary-light-7 80%, $main-bg);
 
         @if $direction == "up" {
           transform: translateY(30px) rotate($rotation);
-        }
-
- @else if $direction == "down" {
+        } @else if $direction == "down" {
           transform: translateY(-30px) rotate($rotation);
-        }
-
- @else if $direction == "left" {
+        } @else if $direction == "left" {
           transform: translateX(-30px) rotate($rotation);
-        }
-
- @else if $direction == "right" {
+        } @else if $direction == "right" {
           transform: translateX(30px) rotate($rotation);
         }
       }
@@ -253,9 +249,7 @@ $bg-mix-light-7: color-mix(in srgb, $primary-light-7 80%, $main-bg);
 
         @if $direction == "up" or $direction == "down" {
           transform: translateY(0) rotate($rotation);
-        }
-
- @else {
+        } @else {
           transform: translateX(0) rotate($rotation);
         }
       }
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 5cdf8bd1..24f3a340 100644
--- a/frontend/web/src/components/views/fa-result-page/index.vue
+++ b/frontend/web/src/components/views/fa-result-page/index.vue
@@ -21,6 +21,8 @@
 </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 34a12495..843b4700 100644
--- a/frontend/web/src/components/widget/fa-icon-button/index.vue
+++ b/frontend/web/src/components/widget/fa-icon-button/index.vue
@@ -10,6 +10,8 @@
 </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/component.ts b/frontend/web/src/config/modules/component.ts
index 2d462cf0..eb1f89d2 100644
--- a/frontend/web/src/config/modules/component.ts
+++ b/frontend/web/src/config/modules/component.ts
@@ -24,13 +24,17 @@ export const globalComponentsConfig: GlobalComponentConfig[] = [
   {
     name: "设置面板",
     key: "settings-panel",
-    component: defineAsyncComponent(() => import("@/components/layouts/fa-settings-panel/index.vue")),
+    component: defineAsyncComponent(
+      () => import("@/components/layouts/fa-settings-panel/index.vue")
+    ),
     enabled: true,
   },
   {
     name: "全局搜索",
     key: "global-search",
-    component: defineAsyncComponent(() => import("@/components/layouts/fa-global-search/index.vue")),
+    component: defineAsyncComponent(
+      () => import("@/components/layouts/fa-global-search/index.vue")
+    ),
     enabled: true,
   },
   {
@@ -48,7 +52,9 @@ export const globalComponentsConfig: GlobalComponentConfig[] = [
   {
     name: "礼花效果",
     key: "fireworks-effect",
-    component: defineAsyncComponent(() => import("@/components/layouts/fa-fireworks-effect/index.vue")),
+    component: defineAsyncComponent(
+      () => import("@/components/layouts/fa-fireworks-effect/index.vue")
+    ),
     enabled: true,
   },
   {
diff --git a/frontend/web/src/config/modules/fastEnter.ts b/frontend/web/src/config/modules/fastEnter.ts
index acfca132..4de12f3f 100644
--- a/frontend/web/src/config/modules/fastEnter.ts
+++ b/frontend/web/src/config/modules/fastEnter.ts
@@ -13,7 +13,7 @@ const fastEnterConfig: FastEnterConfig = {
     {
       name: "工作台",
       description: "系统概览与数据统计",
-      icon: "ri:pie-chfa-line",
+      icon: "ri:pie-chart-line",
       iconColor: "#377dff",
       enabled: true,
       order: 1,
diff --git a/frontend/web/src/config/modules/festival.ts b/frontend/web/src/config/modules/festival.ts
index 6daf3303..afb21bf5 100644
--- a/frontend/web/src/config/modules/festival.ts
+++ b/frontend/web/src/config/modules/festival.ts
@@ -22,7 +22,7 @@
  * - `image` 为红包碎屑 hb、雪花 sd、礼花筒 yd 等时，须在下方 import，勿手写路径字符串。
  * - 全局快捷键：**Ctrl + Shift + P**（Windows / Linux）或 **⌘ + Shift + P**（macOS）立即触发一发礼花；
  *   若当天命中某条「带礼花」的节日配置则使用该配置的 `image`，否则为几何礼花。
- * - 实现：`src/layouts/fa-fireworks-effect/index.vue`（键盘）、`src/hooks/core/useCeremony.ts`（自动连发）。
+ * - 实现：`src/layouts/art-fireworks-effect/index.vue`（键盘）、`src/hooks/core/useCeremony.ts`（自动连发）。
  *
  * ## 自动公历节日
  *
@@ -47,9 +47,6 @@
  */
 
 import { FestivalConfig } from "@/types/config";
-import hb from "@imgs/ceremony/hb.png";
-import sd from "@imgs/ceremony/sd.png";
-import yd from "@imgs/ceremony/yd.png";
 
 export const festivalConfigList: FestivalConfig[] = [
   /**
@@ -67,46 +64,6 @@ export const festivalConfigList: FestivalConfig[] = [
       '🎉 {{version}}版本正式上线！能力全面提升，配套完整交付方案，助力高效开发与商业落地。 <a href="{{introduceUrl}}" target="_blank" rel="noopener noreferrer">👉 立即体验演示</a>',
   },
 
-  /**
-   * 春节示例：红包碎屑图 + 略快节奏（上线前请改为真实农历档期的 start/end）
-   */
-  {
-    name: "春节祝福",
-    date: "2026-02-15",
-    endDate: "2026-02-23",
-    image: hb,
-    count: 6,
-    fireworkInterval: 850,
-    scrollText:
-      "🧧 新春快乐！FastAPI Admin 祝您阖家安康、迭代顺利，新的一年代码零告警、上线零事故。",
-  },
-
-  /**
-   * 初夏示例（含 5 月）：礼花筒图案，标准间隔
-   */
-  {
-    name: "初夏有礼",
-    date: "2026-05-01",
-    endDate: "2026-05-31",
-    image: yd,
-    count: 4,
-    fireworkInterval: 1000,
-    scrollText: "🎆 五月愉快！感谢使用本系统，记得关注备份与安全策略，遇到问题先查文档或联系运维。",
-  },
-
-  /**
-   * 冬日示例：雪花图 + 更短间隔，视觉上更接近连续飘落
-   */
-  {
-    name: "冬日暖心",
-    date: "2026-12-20",
-    endDate: "2026-12-26",
-    image: sd,
-    count: 8,
-    fireworkInterval: 700,
-    scrollText: "❄️ 岁末将至，敬颂冬绥。感谢一路相伴，祝交付顺利、心情像雪花一样轻盈～",
-  },
-
   /**
    * 以下为历史示例片段（默认注释），需要时可取消注释并酌情调整日期 / import：
    *
diff --git a/frontend/web/src/config/setting.ts b/frontend/web/src/config/setting.ts
index 4617f147..408de82b 100644
--- a/frontend/web/src/config/setting.ts
+++ b/frontend/web/src/config/setting.ts
@@ -14,7 +14,7 @@
  * ## 注意事项
  *
  * 1. 修改此文件的配置项时，需要同步更新以下文件：
- *    - src/layouts/fa-settings-panel/widget/SettingActions.vue（复制配置和重置配置逻辑）
+ *    - src/layouts/art-settings-panel/widget/SettingActions.vue（复制配置和重置配置逻辑）
  *    - src/store/modules/setting.ts（Store 状态定义）
  * 2. 可以通过设置面板的"复制配置"按钮快速生成配置代码
  * 3. 枚举类型的值需要与 src/enums/appEnum.ts 中的定义保持一致
diff --git a/frontend/web/src/hooks/core/useAuth.ts b/frontend/web/src/hooks/core/useAuth.ts
index 6b933c31..9909d3de 100644
--- a/frontend/web/src/hooks/core/useAuth.ts
+++ b/frontend/web/src/hooks/core/useAuth.ts
@@ -54,7 +54,7 @@ export const useAuth = () => {
     : [];
 
   /**
-   * 检查是否拥有某权限标识（与 v-hasPerm / 表格内 FaButtonMore 全码一致）
+   * 检查是否拥有某权限标识（与 v-hasPerm / 表格内 ArtButtonMore 全码一致）
    * @param auth 权限标识（多为后端菜单 permission 全码，如 module_system:role:update）
    */
   const hasAuth = (auth: string): boolean => {
diff --git a/frontend/web/src/hooks/core/useCeremony.ts b/frontend/web/src/hooks/core/useCeremony.ts
index 84e0f61c..67228641 100644
--- a/frontend/web/src/hooks/core/useCeremony.ts
+++ b/frontend/web/src/hooks/core/useCeremony.ts
@@ -14,7 +14,7 @@
  *
  * ## 手动礼花快捷键
  *
- * 全局 **Ctrl+Shift+P** / **⌘+Shift+P** 由 `fa-fireworks-effect` 监听；礼花图与当天节日配置一致，
+ * 全局 **Ctrl+Shift+P** / **⌘+Shift+P** 由 `art-fireworks-effect` 监听；礼花图与当天节日配置一致，
  * 详见 `src/config/modules/festival.ts` 文件头说明。
  *
  * ## 使用示例
diff --git a/frontend/web/src/hooks/core/useCommon.ts b/frontend/web/src/hooks/core/useCommon.ts
index 291359b5..d106d63e 100644
--- a/frontend/web/src/hooks/core/useCommon.ts
+++ b/frontend/web/src/hooks/core/useCommon.ts
@@ -1,18 +1,5 @@
 /**
- * useCommon - 通用功能集合
- *
- * 提供常用的页面操作功能，包括页面刷新、滚动控制、路径获取等。
- * 这些功能在多个页面和组件中都会用到，统一封装便于复用。
- *
- * ## 主要功能
- *
- * 1. 首页路径 - 获取系统配置的首页路径
- * 2. 页面刷新 - 刷新当前页面内容
- * 3. 滚动控制 - 提供多种滚动到顶部和指定位置的方法
- * 4. 平滑滚动 - 支持平滑滚动动画效果
- *
- * @module useCommon
- * @author FastapiAdmin Team
+ * 通用页面能力：首页路径、触发整页刷新（settings）、主滚动容器滚动。
  */
 
 import { computed } from "vue";
@@ -23,13 +10,9 @@ export function useCommon() {
   const menuStore = useMenuStore();
   const settingStore = useSettingsStore();
 
-  /**
-   * 首页路径
-   * 从菜单 store 中获取配置的首页路径
-   */
   const homePath = computed(() => menuStore.getHomePath());
 
-  /** 触发 `FaPageContent` 级重建（与布局 settings 联动） */
+  /** 触发 `ArtPageContent` 级重建（与布局 settings 联动） */
   const refresh = () => {
     settingStore.reload();
   };
@@ -38,10 +21,6 @@ export function useCommon() {
   const getMainScrollEl = (): HTMLElement | null =>
     document.getElementById("app-scroll-main") ?? document.getElementById("app-main");
 
-  /**
-   * 滚动到页面顶部
-   * 查找主内容区域并将其滚动位置重置为顶部
-   */
   const scrollToTop = () => {
     const scrollContainer = getMainScrollEl();
     if (scrollContainer) {
@@ -49,10 +28,6 @@ export function useCommon() {
     }
   };
 
-  /**
-   * 平滑滚动到页面顶部
-   * 使用 smooth 行为实现平滑滚动效果
-   */
   const smoothScrollToTop = () => {
     const scrollContainer = getMainScrollEl();
     if (scrollContainer) {
@@ -63,11 +38,6 @@ export function useCommon() {
     }
   };
 
-  /**
-   * 滚动到指定位置
-   * @param top 目标滚动位置（像素）
-   * @param smooth 是否使用平滑滚动
-   */
   const scrollTo = (top: number, smooth: boolean = false) => {
     const scrollContainer = getMainScrollEl();
     if (scrollContainer) {
diff --git a/frontend/web/src/hooks/core/useHeaderBar.ts b/frontend/web/src/hooks/core/useHeaderBar.ts
index 382b1b03..521ce3e1 100644
--- a/frontend/web/src/hooks/core/useHeaderBar.ts
+++ b/frontend/web/src/hooks/core/useHeaderBar.ts
@@ -82,7 +82,7 @@ export function useHeaderBar() {
     return isFeatureEnabled("breadcrumb") && showCrumbs.value;
   });
 
-  // 全局搜索：新版 FaGlobalSearch 体验更好，显示条件 = 配置开启 ∧ 旧版「菜单搜索」开关
+  // 全局搜索：新版 ArtGlobalSearch 体验更好，显示条件 = 配置开启 ∧ 旧版「菜单搜索」开关
   const shouldShowGlobalSearch = computed(() => {
     return isFeatureEnabled("globalSearch") && showMenuSearch.value;
   });
diff --git a/frontend/web/src/hooks/core/useTable.ts b/frontend/web/src/hooks/core/useTable.ts
index c9506f4f..42a393b6 100644
--- a/frontend/web/src/hooks/core/useTable.ts
+++ b/frontend/web/src/hooks/core/useTable.ts
@@ -1,23 +1,28 @@
 /**
- * useTable - 企业级表格数据管理方案
+ * 表格列表数据组合式函数。
  *
- * 功能完整的表格数据管理解决方案，专为后台管理系统设计。
- * 封装了表格开发中的所有常见需求，让你专注于业务逻辑。
+ * 请求路径：业务均通过内部 `fetchData` → `apiFn`，可选 TableCache；对外暴露的 `getData` / `fetchData` 经
+ * `fetchDataQuiet` 吞掉 reject，避免页面重复 try/catch。
  *
- * ## 主要功能
+ * 去重：
+ * - 同实例：`inFlightDedupePromise` + `inFlightDedupeKey`
+ * - 跨实例（同参）：模块级 `globalListNetworkInflight`（布局短时多挂载时合并为一条 HTTP）
  *
- * 1. 数据管理 - 自动处理 API 请求、响应转换、加载状态和错误处理
- * 2. 分页控制 - 自动同步分页状态、移动端适配、智能页码边界处理
- * 3. 搜索功能 - 防抖搜索优化、参数管理、一键重置、参数过滤
- * 4. 缓存系统 - 智能请求缓存、多种清理策略、自动过期管理、统计信息
- * 5. 刷新策略 - 提供 5 种刷新方法适配不同业务场景（新增/更新/删除/手动/定时）
- * 6. 列配置管理 - 动态显示/隐藏列、列排序、配置持久化、批量操作（可选）
- *
- * @module useTable
- * @author FastapiAdmin Team
+ * KeepAlive：`onDeactivated` 会取消请求并置 `tableViewActive`，失活期间 `fetchData` 直接返回当前快照不发 HTTP。
  */
 
-import { ref, reactive, computed, onMounted, onUnmounted, nextTick, readonly } from "vue";
+import {
+  ref,
+  reactive,
+  computed,
+  onMounted,
+  onUnmounted,
+  onActivated,
+  onDeactivated,
+  nextTick,
+  readonly,
+  toRaw,
+} from "vue";
 import { useWindowSize } from "@vueuse/core";
 import type { AxiosResponse } from "axios";
 import { useTableColumns } from "./useTableColumns";
@@ -37,7 +42,10 @@ import {
 } from "@utils/table";
 import { tableConfig } from "@utils/table";
 
-// 类型推导工具类型
+/** 跨组件实例：同一 dedupeKey 仅一条进行中的网络请求 */
+const globalListNetworkInflight = new Map<string, Promise<TableApiResponse<unknown>>>();
+
+// --- 类型推导（由 apiFn / 响应类型反推记录类型） ---
 type InferApiParams<T> = T extends (params: infer P) => any ? P : never;
 type UnwrapAxiosResponse<T> = T extends AxiosResponse<infer D> ? D : T;
 type InferApiResponse<T> = T extends (params: any) => Promise<infer R>
@@ -60,7 +68,7 @@ type PaginationState = {
   total: number;
 };
 
-// 优化的配置接口 - 支持自动类型推导
+/** 表格 Hook 配置（泛型由 apiFn 推导） */
 export interface UseTableConfig<
   TApiFn extends (params: any) => Promise<any> = (params: any) => Promise<any>,
   TRecord = InferRecordType<InferApiResponse<TApiFn>>,
@@ -131,23 +139,13 @@ export interface UseTableConfig<
   };
 }
 
+/** 对外入口（实现为内部 `useTableImpl`） */
 export function useTable<TApiFn extends (params: any) => Promise<any>>(
   config: UseTableConfig<TApiFn>
 ) {
   return useTableImpl(config);
 }
 
-/**
- * useTable 的核心实现 - 强大的表格数据管理 Hook
- *
- * 提供完整的表格解决方案，包括：
- * - 数据获取与缓存
- * - 分页控制
- * - 搜索功能
- * - 智能刷新策略
- * - 错误处理
- * - 列配置管理
- */
 function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   config: UseTableConfig<TApiFn>
 ) {
@@ -216,6 +214,31 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   // 请求取消控制器
   let abortController: AbortController | null = null;
 
+  /** 同参且尚未结束的请求共用一个 Promise，避免并发重复打接口 */
+  let inFlightDedupeKey: string | null = null;
+  let inFlightDedupePromise: Promise<TableApiResponse<TRecord>> | null = null;
+
+  /** KeepAlive 失活时不再发请求（组件侧 cancelRequest 会 abort） */
+  let tableViewActive = true;
+
+  /** 稳定序列化请求参，供 in-flight 去重用 */
+  function stableDedupeKeyFromParams(params: TParams): string {
+    const normalize = (input: unknown): unknown => {
+      if (input === null || typeof input !== "object") return input;
+      if (Array.isArray(input)) return input.map(normalize);
+      const raw = input as Record<string, unknown>;
+      const keys = Object.keys(raw).sort();
+      const out: Record<string, unknown> = {};
+      for (const k of keys) {
+        const v = raw[k];
+        if (v === undefined) continue;
+        out[k] = normalize(v);
+      }
+      return out;
+    };
+    return JSON.stringify(normalize(toRaw(params) as unknown));
+  }
+
   // 缓存清理定时器
   let cacheCleanupTimer: NodeJS.Timeout | null = null;
 
@@ -294,52 +317,122 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     cacheUpdateTrigger.value++;
   };
 
-  // 获取数据的核心方法
+  /**
+   * 将标准化响应写入本实例的 `data` / `pagination`，并可选写入缓存。
+   * 全局去重时每个参与合并的实例都会各自调用一次。
+   */
+  function commitNetworkSuccess(
+    standardResponse: TableApiResponse<TRecord>,
+    paramsForCache: TParams,
+    useCacheFlag: boolean
+  ): void {
+    let tableData = extractTableData(standardResponse);
+    if (dataTransformer) {
+      tableData = dataTransformer(tableData);
+    }
+    data.value = tableData;
+    updatePaginationFromResponse(pagination, standardResponse);
+
+    const paramsRecord = searchParams as Record<string, unknown>;
+    if (paramsRecord[pageKey] !== pagination.current) {
+      paramsRecord[pageKey] = pagination.current;
+    }
+    if (paramsRecord[sizeKey] !== pagination.size) {
+      paramsRecord[sizeKey] = pagination.size;
+    }
+
+    if (useCacheFlag && cache) {
+      cache.set(paramsForCache, tableData, standardResponse);
+      cacheUpdateTrigger.value++;
+      logger.log(`数据已缓存`);
+    }
+
+    loadingState.value = "success";
+
+    if (onSuccess) {
+      onSuccess(tableData, standardResponse);
+    }
+  }
+
+  /**
+   * 列表请求唯一入口：合并参数 → 读缓存或发起 `apiFn`。
+   * 先进单实例去重，再进全局 Map；若已有同键进行中的 Promise，则等待并复用结果。
+   */
   const fetchData = async (
     params?: Partial<TParams>,
     useCache = enableCache
   ): Promise<TableApiResponse<TRecord>> => {
-    // 取消上一个请求
+    let requestParams = Object.assign(
+      {},
+      searchParams,
+      {
+        [pageKey]: pagination.current,
+        [sizeKey]: pagination.size,
+      },
+      params || {}
+    ) as TParams;
+
+    if (excludeParams.length > 0) {
+      const filteredParams = { ...requestParams };
+      excludeParams.forEach((key) => {
+        delete (filteredParams as Record<string, unknown>)[key];
+      });
+      requestParams = filteredParams as TParams;
+    }
+
+    const dedupeKey = stableDedupeKeyFromParams(requestParams);
+
+    if (inFlightDedupePromise !== null && inFlightDedupeKey === dedupeKey) {
+      logger.log("合并同参进行中的列表请求");
+      return inFlightDedupePromise;
+    }
+
+    const sharedGlobal = globalListNetworkInflight.get(dedupeKey);
+    if (sharedGlobal) {
+      loadingState.value = "loading";
+      error.value = null;
+      try {
+        const standardResponse = (await sharedGlobal) as TableApiResponse<TRecord>;
+        commitNetworkSuccess(standardResponse, requestParams, useCache);
+        return standardResponse;
+      } catch (err) {
+        if (err instanceof Error && err.message === "请求已取消") {
+          loadingState.value = "idle";
+          return { records: [], total: 0, current: 1, size: 10 };
+        }
+        loadingState.value = "error";
+        data.value = [];
+        const tableError = handleError(err, "获取表格数据失败");
+        throw tableError;
+      }
+    }
+
+    if (!tableViewActive) {
+      return {
+        records: [...data.value],
+        total: pagination.total,
+        current: pagination.current,
+        size: pagination.size,
+      } as TableApiResponse<TRecord>;
+    }
+
     if (abortController) {
       abortController.abort();
     }
 
-    // 创建新的取消控制器
     const currentController = new AbortController();
     abortController = currentController;
 
-    // 状态机：进入 loading 状态
     loadingState.value = "loading";
     error.value = null;
 
     try {
-      let requestParams = Object.assign(
-        {},
-        searchParams,
-        {
-          [pageKey]: pagination.current,
-          [sizeKey]: pagination.size,
-        },
-        params || {}
-      ) as TParams;
-
-      // 剔除不需要的参数
-      if (excludeParams.length > 0) {
-        const filteredParams = { ...requestParams };
-        excludeParams.forEach((key) => {
-          delete (filteredParams as Record<string, unknown>)[key];
-        });
-        requestParams = filteredParams as TParams;
-      }
-
-      // 检查缓存
       if (useCache && cache) {
         const cachedItem = cache.get(requestParams);
         if (cachedItem) {
           data.value = cachedItem.data;
           updatePaginationFromResponse(pagination, cachedItem.response);
 
-          // 修复：避免重复设置相同的值，防止响应式循环更新
           const paramsRecord = searchParams as Record<string, unknown>;
           if (paramsRecord[pageKey] !== pagination.current) {
             paramsRecord[pageKey] = pagination.current;
@@ -348,10 +441,8 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
             paramsRecord[sizeKey] = pagination.size;
           }
 
-          // 状态机：缓存命中，进入 success 状态
           loadingState.value = "success";
 
-          // 缓存命中时触发专门的回调，而不是 onSuccess
           if (onCacheHit) {
             onCacheHit(cachedItem.data, cachedItem.response);
           }
@@ -361,100 +452,87 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
         }
       }
 
-      const response = await apiFn(requestParams);
+      inFlightDedupeKey = dedupeKey;
 
-      // 检查请求是否被取消
-      if (currentController.signal.aborted) {
-        throw new Error("请求已取消");
+      const networkPromise = (async (): Promise<TableApiResponse<TRecord>> => {
+        try {
+          logger.log("HTTP 请求", dedupeKey);
+          const response = await apiFn(requestParams);
+
+          if (currentController.signal.aborted) {
+            throw new Error("请求已取消");
+          }
+
+          return responseAdapter(response);
+        } finally {
+          if (inFlightDedupeKey === dedupeKey) {
+            inFlightDedupeKey = null;
+            inFlightDedupePromise = null;
+          }
+          if (abortController === currentController) {
+            abortController = null;
+          }
+        }
+      })();
+
+      globalListNetworkInflight.set(
+        dedupeKey,
+        networkPromise as Promise<TableApiResponse<unknown>>
+      );
+      networkPromise.finally(() => {
+        globalListNetworkInflight.delete(dedupeKey);
+      });
+
+      inFlightDedupePromise = networkPromise;
+
+      try {
+        const standardResponse = await networkPromise;
+        commitNetworkSuccess(standardResponse, requestParams, useCache);
+        return standardResponse;
+      } catch (err) {
+        if (err instanceof Error && err.message === "请求已取消") {
+          loadingState.value = "idle";
+          return { records: [], total: 0, current: 1, size: 10 };
+        }
+        loadingState.value = "error";
+        data.value = [];
+        const tableError = handleError(err, "获取表格数据失败");
+        throw tableError;
       }
-
-      // 使用响应适配器转换为标准格式
-      const standardResponse = responseAdapter(response);
-
-      // 处理响应数据
-      let tableData = extractTableData(standardResponse);
-
-      // 应用数据转换函数
-      if (dataTransformer) {
-        tableData = dataTransformer(tableData);
-      }
-
-      // 更新状态
-      data.value = tableData;
-      updatePaginationFromResponse(pagination, standardResponse);
-
-      // 修复：避免重复设置相同的值，防止响应式循环更新
-      const paramsRecord = searchParams as Record<string, unknown>;
-      if (paramsRecord[pageKey] !== pagination.current) {
-        paramsRecord[pageKey] = pagination.current;
-      }
-      if (paramsRecord[sizeKey] !== pagination.size) {
-        paramsRecord[sizeKey] = pagination.size;
-      }
-
-      // 缓存数据
-      if (useCache && cache) {
-        cache.set(requestParams, tableData, standardResponse);
-        // 手动触发缓存状态更新
-        cacheUpdateTrigger.value++;
-        logger.log(`数据已缓存`);
-      }
-
-      // 状态机：请求成功，进入 success 状态
-      loadingState.value = "success";
-
-      // 成功回调
-      if (onSuccess) {
-        onSuccess(tableData, standardResponse);
-      }
-
-      return standardResponse;
-    } catch (err) {
-      if (err instanceof Error && err.message === "请求已取消") {
-        // 请求被取消，回到 idle 状态
-        loadingState.value = "idle";
-        return { records: [], total: 0, current: 1, size: 10 };
-      }
-
-      // 状态机：请求失败，进入 error 状态
-      loadingState.value = "error";
-      data.value = [];
-      const tableError = handleError(err, "获取表格数据失败");
-      throw tableError;
     } finally {
-      // 只有当前控制器是活跃的才清空
       if (abortController === currentController) {
         abortController = null;
       }
     }
   };
 
-  // 获取数据 (保持当前页)
-  const getData = async (params?: Partial<TParams>): Promise<TableApiResponse<TRecord> | void> => {
+  /**
+   * 包装一层：reject 转为 `undefined`，错误展示已在 fetchData / handleError 内完成。
+   */
+  async function fetchDataQuiet(
+    params?: Partial<TParams>,
+    useCache = enableCache
+  ): Promise<TableApiResponse<TRecord> | void> {
     try {
-      return await fetchData(params);
+      return await fetchData(params, useCache);
     } catch {
-      // 错误已在 fetchData 中处理
-      return Promise.resolve();
+      return undefined;
     }
-  };
+  }
 
-  // 分页获取数据 (重置到第一页) - 专门用于搜索场景
+  /** 按当前分页拉取（默认走缓存策略 enableCache） */
+  const getData = (params?: Partial<TParams>) => fetchDataQuiet(params);
+
+  /** 搜索场景：回到第一页、清当前条件缓存，再拉取（禁用缓存） */
   const getDataByPage = async (
     params?: Partial<TParams>
   ): Promise<TableApiResponse<TRecord> | void> => {
     pagination.current = 1;
     (searchParams as Record<string, unknown>)[pageKey] = 1;
 
-    // 搜索时清空当前搜索条件的缓存，确保获取最新数据
     clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "搜索数据");
 
-    try {
-      return await fetchData(params, false); // 搜索时不使用缓存
-    } catch {
-      // 错误已在 fetchData 中处理
-      return Promise.resolve();
-    }
+    return fetchDataQuiet(params, false);
   };
 
   // 智能防抖搜索函数
@@ -524,10 +602,9 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     pagination.size = currentSize;
   };
 
-  // 防重复调用的标志
+  /** 防止分页页码变更回调重入（EP 或联动可能短时触发多次） */
   let isCurrentChanging = false;
 
-  // 处理分页大小变化
   const handleSizeChange = async (newSize: number): Promise<void> => {
     if (newSize <= 0) return;
 
@@ -544,16 +621,13 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     await getData();
   };
 
-  // 处理当前页变化
   const handleCurrentChange = async (newCurrent: number): Promise<void> => {
     if (newCurrent <= 0) return;
 
-    // 修复：防止重复调用
     if (isCurrentChanging) {
       return;
     }
 
-    // 修复：如果当前页没有变化，不需要重新请求
     if (pagination.current === newCurrent) {
       logger.log("分页页码未变化，跳过请求");
       return;
@@ -562,10 +636,8 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     try {
       isCurrentChanging = true;
 
-      // 修复：只更新必要的状态
       const paramsRecord = searchParams as Record<string, unknown>;
       pagination.current = newCurrent;
-      // 只有当 searchParams 的分页字段与新值不同时才更新
       if (paramsRecord[pageKey] !== newCurrent) {
         paramsRecord[pageKey] = newCurrent;
       }
@@ -576,9 +648,8 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     }
   };
 
-  // 针对不同业务场景的刷新方法
+  // --- 刷新策略（命名表达业务语义，便于页面按钮选用） ---
 
-  // 新增后刷新：回到第一页并清空分页缓存（适用于新增数据后）
   const refreshCreate = async (): Promise<void> => {
     debouncedGetDataByPage.cancel();
     pagination.current = 1;
@@ -587,13 +658,11 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     await getData();
   };
 
-  // 更新后刷新：保持当前页，仅清空当前搜索缓存（适用于更新数据后）
   const refreshUpdate = async (): Promise<void> => {
     clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "编辑数据");
     await getData();
   };
 
-  // 删除后刷新：智能处理页码，避免空页面（适用于删除数据后）
   const refreshRemove = async (): Promise<void> => {
     const { current } = pagination;
 
@@ -601,7 +670,6 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "删除数据");
     await getData();
 
-    // 如果当前页为空且不是第一页，回到上一页
     if (data.value.length === 0 && current > 1) {
       pagination.current = current - 1;
       (searchParams as Record<string, unknown>)[pageKey] = current - 1;
@@ -609,14 +677,12 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     }
   };
 
-  // 全量刷新：清空所有缓存，重新获取数据（适用于手动刷新按钮）
   const refreshData = async (): Promise<void> => {
     debouncedGetDataByPage.cancel();
     clearCache(CacheInvalidationStrategy.CLEAR_ALL, "手动刷新");
     await getData();
   };
 
-  // 轻量刷新：仅清空当前搜索条件的缓存，保持分页状态（适用于定时刷新）
   const refreshSoft = async (): Promise<void> => {
     clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "软刷新");
     await getData();
@@ -630,6 +696,15 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     debouncedGetDataByPage.cancel();
   };
 
+  onActivated(() => {
+    tableViewActive = true;
+  });
+
+  onDeactivated(() => {
+    tableViewActive = false;
+    cancelRequest();
+  });
+
   // 清空数据
   const clearData = (): void => {
     data.value = [];
@@ -660,14 +735,12 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     }, cacheTime / 2); // 每半个缓存周期清理一次
   }
 
-  // 挂载时自动加载数据
   if (immediate) {
     onMounted(async () => {
       await getData();
     });
   }
 
-  // 组件卸载时彻底清理
   onUnmounted(() => {
     cancelRequest();
     if (cache) {
@@ -678,9 +751,8 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     }
   });
 
-  // 优化的返回值结构
   return {
-    // 数据相关
+    // --- 数据 ---
     /** 表格数据 */
     data,
     /** 数据加载状态 */
@@ -692,7 +764,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     /** 是否有数据 */
     hasData,
 
-    // 分页相关
+    // --- 分页 ---
     /** 分页状态信息 */
     pagination: readonly(pagination),
     /** 移动端分页配置 */
@@ -702,7 +774,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     /** 当前页变化处理 */
     handleCurrentChange,
 
-    // 搜索相关 - 统一前缀
+    // --- 查询条件 ---
     /** 搜索参数 */
     searchParams,
     /** 替换搜索参数（适用于表单查询，避免旧字段残留） */
@@ -710,17 +782,16 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     /** 重置搜索参数 */
     resetSearchParams,
 
-    // 数据操作 - 更明确的操作意图
-    /** 加载数据 */
+    /** 当前页加载（错误已内部处理） */
     fetchData: getData,
-    /** 获取数据 */
+    /** 回到第一页并查询（搜索 / 重置页码场景） */
     getData: getDataByPage,
     /** 获取数据（防抖） */
     getDataDebounced: debouncedGetDataByPage,
     /** 清空数据 */
     clearData,
 
-    // 刷新策略
+    // --- 刷新 ---
     /** 全量刷新：清空所有缓存，重新获取数据（适用于手动刷新按钮） */
     refreshData,
     /** 轻量刷新：仅清空当前搜索条件的缓存，保持分页状态（适用于定时刷新） */
@@ -732,24 +803,17 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
     /** 删除后刷新：智能处理页码，避免空页面（适用于删除数据后） */
     refreshRemove,
 
-    // 缓存控制
-    /** 缓存统计信息 */
+    // --- 缓存（策略见 CacheInvalidationStrategy） ---
     cacheInfo,
-    /** 清除缓存，根据不同的业务场景选择性地清理缓存： */
     clearCache,
-    // 支持4种清理策略
-    // clearCache(CacheInvalidationStrategy.CLEAR_ALL, '手动刷新')     // 清空所有缓存
-    // clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, '搜索数据') // 只清空当前搜索条件的缓存
-    // clearCache(CacheInvalidationStrategy.CLEAR_PAGINATION, '新增数据') // 清空分页相关缓存
-    // clearCache(CacheInvalidationStrategy.KEEP_ALL, '保持缓存')      // 不清理任何缓存
     /** 清理已过期的缓存条目，释放内存空间 */
     clearExpiredCache,
 
-    // 请求控制
+    // --- 请求 ---
     /** 取消当前请求 */
     cancelRequest,
 
-    // 列配置 (如果提供了 columnsFactory)
+    // --- 列配置（仅传入 columnsFactory 时展开） ---
     ...(columnConfig && {
       /** 表格列配置 */
       columns,
@@ -777,7 +841,6 @@ 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";
diff --git a/frontend/web/src/hooks/core/useTableColumns.ts b/frontend/web/src/hooks/core/useTableColumns.ts
index b2c34526..0b456cf6 100644
--- a/frontend/web/src/hooks/core/useTableColumns.ts
+++ b/frontend/web/src/hooks/core/useTableColumns.ts
@@ -1,72 +1,30 @@
 /**
- * useTableColumns - 表格列配置管理
- *
- * 提供动态的表格列配置管理能力，支持运行时灵活控制列的显示、隐藏、排序等操作。
- * 通常与 useTable 配合使用，为表格提供完整的列管理功能。
- *
- * ## 主要功能
- *
- * 1. 列显示控制 - 动态显示/隐藏列，支持批量操作
- * 2. 列排序 - 拖拽或编程方式重新排列列顺序
- * 3. 列配置管理 - 新增、删除、更新列配置
- * 4. 特殊列支持 - 自动处理 selection、expand、index 等特殊列
- * 5. 状态持久化 - 保持列的显示状态，支持重置到初始状态
- *
- * ## 使用示例
- *
- * ```typescript
- * const { columns, columnChecks, toggleColumn, reorderColumns } = useTableColumns(() => [
- *   { prop: 'name', label: '姓名', visible: true },
- *   { prop: 'email', label: '邮箱', visible: true },
- *   { prop: 'status', label: '状态', visible: false }
- * ])
- *
- * // 切换列显示
- * toggleColumn('email', false)
- *
- * // 重新排序
- * reorderColumns(0, 2)
- * ```
- *
- * @module useTableColumns
- * @author FastapiAdmin Team
+ * 表格列配置：显隐、拖拽排序、增删改；与 `useTable` 的 `columnsFactory` 配合。
+ * 导出 `getColumnVisibility` / `getColumnChecks` 供表头等处复用同一套 visible/checked 规则。
  */
 
 import { ref, computed, watch } from "vue";
 import { $t } from "@/locales";
 import type { ColumnOption } from "@/types/component";
 
-/**
- * 特殊列类型
- */
+/** selection / expand / index 等占位 prop，避免与业务列冲突 */
 const SPECIAL_COLUMNS: Record<string, { prop: string; label: string }> = {
   selection: { prop: "__selection__", label: $t("table.column.selection") },
   expand: { prop: "__expand__", label: $t("table.column.expand") },
   index: { prop: "__index__", label: $t("table.column.index") },
 };
 
-/**
- * 获取列的唯一标识
- */
 export const getColumnKey = <T>(col: ColumnOption<T>) =>
   SPECIAL_COLUMNS[col.type as keyof typeof SPECIAL_COLUMNS]?.prop ?? (col.prop as string);
 
-/**
- * 获取列的显示状态
- * 优先使用 visible 字段，如果不存在则使用 checked 字段
- */
+/** `visible` 优先；否则回退 `checked`，默认展示 */
 export const getColumnVisibility = <T>(col: ColumnOption<T>): boolean => {
-  // visible 优先级高于 checked
   if (col.visible !== undefined) {
     return col.visible;
   }
-  // 如果 visible 未定义，使用 checked，默认为 true
   return col.checked ?? true;
 };
 
-/**
- * 获取列的检查状态
- */
 export const getColumnChecks = <T>(columns: ColumnOption<T>[]) =>
   columns.map((col) => {
     const special = col.type && SPECIAL_COLUMNS[col.type];
diff --git a/frontend/web/src/layouts/index.vue b/frontend/web/src/layouts/index.vue
new file mode 120000
index 00000000..8f0b0adc
--- /dev/null
+++ b/frontend/web/src/layouts/index.vue
@@ -0,0 +1 @@
+../components/layouts/index.vue
\ No newline at end of file
diff --git a/frontend/web/src/locales/langs/en.json b/frontend/web/src/locales/langs/en.json
index 5d9b8b77..f2e2bcfc 100644
--- a/frontend/web/src/locales/langs/en.json
+++ b/frontend/web/src/locales/langs/en.json
@@ -14,6 +14,14 @@
     "requestFailed": "Request failed",
     "requestConfigError": "Request configuration error"
   },
+  "manualPage": {
+    "title": "User manual",
+    "intro": "Watch the walkthrough video and browse the built-in checklist mapped to implemented UI and permission codes (coverage / completeness, not a quality score). Replace the demo video URL with your own CDN in production.",
+    "videoTab": "Video",
+    "manualTab": "Acceptance checklist",
+    "videoHint": "Pause, change speed, or go fullscreen anytime.",
+    "manualHint": "Use the TOC, filter, and anchors. “Functional completeness” items mirror implemented search bars, toolbars, row actions, and dialogs for gap checking."
+  },
   "topBar": {
     "search": {
       "title": "Search"
@@ -542,7 +550,7 @@
       "ecommerce": "Ecommerce",
       "map": "Map",
       "pricing": "Pricing",
-      "tutorial": "Tutorial"
+      "tutorial": "User manual"
     },
     "article": {
       "title": "Article",
diff --git a/frontend/web/src/locales/langs/zh.json b/frontend/web/src/locales/langs/zh.json
index b8ccee61..53a79284 100644
--- a/frontend/web/src/locales/langs/zh.json
+++ b/frontend/web/src/locales/langs/zh.json
@@ -14,6 +14,14 @@
     "requestFailed": "请求失败",
     "requestConfigError": "请求配置错误"
   },
+  "manualPage": {
+    "title": "操作手册",
+    "intro": "视频演示常用操作流程；「功能验收」正文按模块列出已实现界面与权限，用于核对功能是否覆盖完整（非评价好坏）。正式环境可将演示视频替换为自有 CDN / 静态资源地址。",
+    "videoTab": "视频演示",
+    "manualTab": "功能验收",
+    "videoHint": "可随时暂停、调速与全屏观看。",
+    "manualHint": "支持目录锚点与筛选；正文「功能完整性验收」与代码已实现的检索、工具栏、行操作、弹层等逐项对应，便于漏项检查。"
+  },
   "topBar": {
     "search": {
       "title": "搜索"
@@ -542,7 +550,7 @@
       "ecommerce": "电子商务",
       "map": "地图",
       "pricing": "定价",
-      "tutorial": "操作教程"
+      "tutorial": "操作手册"
     },
     "article": {
       "title": "文章管理",
diff --git a/frontend/web/src/main.ts b/frontend/web/src/main.ts
index 472b152f..78e93e3c 100755
--- a/frontend/web/src/main.ts
+++ b/frontend/web/src/main.ts
@@ -4,13 +4,14 @@ import "@styles/core/tailwind.css";
 import "@styles/index.scss";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import "animate.css";
-
+import { printConsoleBanner } from "@utils/sys";
 import { initPlugins } from "@/plugins";
 import { useConfigStore } from "./store/modules/config.store";
 
 document.addEventListener("touchstart", function () {}, { passive: false });
 
 const app = createApp(App);
+printConsoleBanner();
 initPlugins(app);
 app.mount("#app");
 
@@ -18,7 +19,7 @@ app.mount("#app");
 const setTitleAndFavicon = async () => {
   try {
     const configStore = useConfigStore();
-    await configStore.getConfig(true);
+    await configStore.getConfig();
 
     const webTitle = configStore.configData.sys_web_title?.config_value;
     const webFavicon = configStore.configData.sys_web_favicon?.config_value;
diff --git a/frontend/web/src/mock/temp/articleList.ts b/frontend/web/src/mock/temp/articleList.ts
index 50ea41ff..7d1abb41 100644
--- a/frontend/web/src/mock/temp/articleList.ts
+++ b/frontend/web/src/mock/temp/articleList.ts
@@ -150,7 +150,7 @@ export const ArticleList = [
     create_time: "2023-04-01T00:00:00.000Z",
     home_img: cover8,
     brief:
-      "原理是改变 css 变量 + window.matchMedia 来监听系统主题变，从而实现点击改变主题和监听系统主题变化1、首先定义 css 全局变量创建 variables.scss 文件light color（浅色模式）定义浅色模式下 css 主题变量dark color（深色模式）定义深色模式下 css 主题变量// css全局变量\n:root {\n  // 文字大小\n  --fa-fo",
+      "原理是改变 css 变量 + window.matchMedia 来监听系统主题变，从而实现点击改变主题和监听系统主题变化1、首先定义 css 全局变量创建 variables.scss 文件light color（浅色模式）定义浅色模式下 css 主题变量dark color（深色模式）定义深色模式下 css 主题变量// css全局变量\n:root {\n  // 文字大小\n  --art-fo",
     type_name: "CSS",
     html_content: "",
   },
diff --git a/frontend/web/src/mock/upgrade/changeLog.ts b/frontend/web/src/mock/upgrade/changeLog.ts
index c76614db..39a39176 100644
--- a/frontend/web/src/mock/upgrade/changeLog.ts
+++ b/frontend/web/src/mock/upgrade/changeLog.ts
@@ -65,7 +65,7 @@ export const upgradeLogList = ref<UpgradeLog[]>([
       "性能提升：优化核心代码逻辑，提升系统运行效率",
       "设计系统：重构颜色体系，统一 UI 视觉规范，提升界面一致性",
       "菜单优化：细化菜单样式，优化交互体验与视觉呈现",
-      "组件重构：重构 FaTextScroll 组件，提升性能与可维护性",
+      "组件重构：重构 ArtTextScroll 组件，提升性能与可维护性",
       "问题修复：修复 FaForm、FaSearchBar 自定义组件渲染异常",
       "功能增强：FaForm、FaSearchBar 新增 render 属性，支持自定义组件渲染",
       "功能增强：useTable hooks 新增 visible 属性，用于控制列默认是否显示",
@@ -164,7 +164,7 @@ export const upgradeLogList = ref<UpgradeLog[]>([
       "优化 FaTable 顶部按钮换行无法自适应问题（示例：功能示例 / 左右布局表格）",
       "FaTable 分页组件选中样式优化",
       "FaTable 空状态高度默认撑满",
-      "FaButtonMore 组件新增图标、颜色配置",
+      "ArtButtonMore 组件新增图标、颜色配置",
       "FaTableHeader 新增搜索按钮，用于控制顶部搜索栏的显示与隐藏",
       "FaSearchBar label 为空时不占空间",
       "表格操作栏拖拽禁止固定列拖拽",
@@ -195,7 +195,7 @@ export const upgradeLogList = ref<UpgradeLog[]>([
       "修复多个富文本编辑器图标不统一问题",
       "优化颜色选择器圆角",
       "el-radio、el-checkbox 统一大小",
-      "fa-stats-card 新增小数位、分隔符配置",
+      "art-stats-card 新增小数位、分隔符配置",
       "路由配置示例优化",
       "高级表格新增自定义获取数据示例（等待其他请求完成后执行 useTable 数据获取）",
       "useTable 新增 excludeParams，用于排除某些参数不参与请求",
@@ -203,7 +203,7 @@ export const upgradeLogList = ref<UpgradeLog[]>([
       "本地开发跨域配置优化",
       "修复 useTable 删除最后一整页数据没有返回上一页的问题",
       "修复 echarts 图表数据初始化、更新数据浏览器报错",
-      "删除 fa-chfa-empty 组件",
+      "删除 art-chart-empty 组件",
       "新增 FaSearchBar 组件示例",
       "网络请求支持 http 状态码为 401 时退出登录",
       "优化网络请求退出登录多次提示问题",
@@ -286,7 +286,7 @@ export const upgradeLogList = ref<UpgradeLog[]>([
     date: "2025-07-06",
     remark: "建议升级，带来更高效、更智能的表格开发体验",
     detail: [
-      "重构 FaTable、FaTableHeader、FaNotification 组件",
+      "重构 FaTable、FaTableHeader、ArtNotification 组件",
       "新增 useTable hooks 表格封装，支持数据获取、转换、响应适配、智能缓存（基于 LRU 算法）、错误处理、列配置与插槽、分页控制、刷新策略等核心功能，全面提升开发效率与用户体验",
       "修复菜单管理搜索直接修改 pinia 数据的问题",
       "移除 CountTo 插件，替换为 FaCountTo 组件",
@@ -337,10 +337,10 @@ export const upgradeLogList = ref<UpgradeLog[]>([
     title: "组件重构与性能优化",
     date: "2025-06-23",
     detail: [
-      "重构 components/forms 文件夹下的表单相关组件，提升可维护性与一致性",
-      "重构 FaBreadcrumb 面包屑导航组件，优化逻辑结构与样式",
-      "优化 FaChatWindow 与 FaFastEnter 组件代码，提升可读性与性能",
-      "重构 FaFireworksEffect 烟花效果组件，显著提升渲染性能与动画流畅度",
+      "重构 components/core/forms 文件夹下的表单相关组件，提升可维护性与一致性",
+      "重构 ArtBreadcrumb 面包屑导航组件，优化逻辑结构与样式",
+      "优化 ArtChatWindow 与 ArtFastEnter 组件代码，提升可读性与性能",
+      "重构 ArtFireworksEffect 烟花效果组件，显著提升渲染性能与动画流畅度",
       "README 文档新增官方网站链接，便于用户查看项目文档",
     ],
   },
@@ -359,8 +359,8 @@ export const upgradeLogList = ref<UpgradeLog[]>([
     date: "2025-06-18",
     detail: [
       "FaMenuRight 组件重构",
-      "FaWatermark 增加类型注释",
-      "components/cards 下面的组件重构，代码优化",
+      "ArtWatermark 增加类型注释",
+      "components/core/cards 下面的组件重构，代码优化",
     ],
   },
   {
@@ -369,7 +369,7 @@ export const upgradeLogList = ref<UpgradeLog[]>([
     date: "2025-06-18",
     detail: [
       "FaResultPage 组件重构",
-      "FaTextScroll 组件代码优化",
+      "ArtTextScroll 组件代码优化",
       "FaException 组件增加类型提示",
       "FaCutterImg 组件样式优化、增加类型定义",
       "FaVideoPlayer 组件增加类型定义",
diff --git a/frontend/web/src/plugins/index.ts b/frontend/web/src/plugins/index.ts
index 23aafd70..34a6e640 100644
--- a/frontend/web/src/plugins/index.ts
+++ b/frontend/web/src/plugins/index.ts
@@ -19,11 +19,8 @@ import { initCodeMirror } from "./codemirror";
 import { initElementPlus } from "./element-plus";
 import { initElIcons } from "./icons";
 import { initTerminal } from "./terminal";
-import { printConsoleBanner } from "@utils/sys";
 
 export function initPlugins(app: App<Element>): void {
-  // 打印欢迎使用信息
-  printConsoleBanner();
   initElIcons(app);
   initStore(app);
   initRouter(app);
diff --git a/frontend/web/src/router/MenuProcessor.ts b/frontend/web/src/router/MenuProcessor.ts
index 3ba4f06c..d5021ed8 100644
--- a/frontend/web/src/router/MenuProcessor.ts
+++ b/frontend/web/src/router/MenuProcessor.ts
@@ -1,14 +1,9 @@
-/**
- * 菜单处理器（含后端菜单 → AppRouteRecord 转换）
- *
- * @module router/MenuProcessor
- */
 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 { useAppMode } from "@/hooks/core/useAppMode";
-import MenuAPI from "@/api/module_system/menu";
+
 import {
   mergeAppRouteRecords,
   ROUTE_COMPONENT_LAYOUT,
@@ -17,6 +12,11 @@ import {
 import { formatMenuTitle } from "@utils";
 import { MenuTypeEnum } from "@/enums/system/menu.enum";
 
+/**
+ * 菜单 → `AppRouteRecord`：后端 `MenuTable`、前端内置路由、混合模式合并；供守卫注册动态路由。
+ * `getMenuList` 依 `useAppMode` 分支；meta 对齐后端 keep_alive、目录占位组件。
+ */
+
 /** 前端模式并入菜单的内置路由（扩展点，默认空） */
 export const builtinFrontendRoutes: AppRouteRecord[] = [];
 
@@ -122,6 +122,7 @@ function mapMenuNode(item: MenuTable, depth = 0): AppRouteRecord {
     title: item.title ?? "",
     icon: item.icon || undefined,
     hidden: !!item.hidden,
+    /** 与菜单 API `keep_alive` 一致；缺省 true 仅在后端未下发该字段时兜底 */
     keepAlive: item.keep_alive ?? true,
     affix: !!item.affix,
     fixedTab: !!item.affix,
@@ -148,9 +149,6 @@ function backendMenusToAppRoutes(menus: MenuTable[]): AppRouteRecord[] {
 }
 
 export class MenuProcessor {
-  /**
-   * 获取菜单数据
-   */
   async getMenuList(): Promise<AppRouteRecord[]> {
     const { isFrontendMode, isMixedMenuMode } = useAppMode();
 
@@ -212,11 +210,15 @@ export class MenuProcessor {
     return this.filterEmptyMenus(merged);
   }
 
+  /** 优先用用户信息里附带的 `menus`，与守卫拉用户信息顺序一致，避免重复打菜单树接口 */
   private async processBackendMenu(): Promise<AppRouteRecord[]> {
-    const response = await MenuAPI.listMenu({ menu_client: "pc" });
-    const list = response.data.data || [];
-    const routes = backendMenusToAppRoutes(list);
-    return this.filterEmptyMenus(routes);
+    const userStore = useUserStore();
+    const fromUser = userStore.routeList;
+    if (Array.isArray(fromUser) && fromUser.length > 0) {
+      const routes = backendMenusToAppRoutes(fromUser);
+      return this.filterEmptyMenus(routes);
+    }
+    return [];
   }
 
   private filterMenuByRoles(menu: AppRouteRecord[], roleCodes: string[]): AppRouteRecord[] {
diff --git a/frontend/web/src/router/afterEach.ts b/frontend/web/src/router/afterEach.ts
index f4fc3aee..8ef71665 100644
--- a/frontend/web/src/router/afterEach.ts
+++ b/frontend/web/src/router/afterEach.ts
@@ -1,3 +1,6 @@
+/**
+ * 路由后置守卫：滚动置顶、结束 NProgress、关闭 beforeEach 开启的全局 loading。
+ */
 import { nextTick } from "vue";
 import { useSettingsStore } from "@stores/modules/setting.store";
 import { Router } from "vue-router";
@@ -6,24 +9,31 @@ import { useCommon } from "@/hooks/core/useCommon";
 import { loadingService } from "@utils/ui";
 import { getPendingLoading, resetPendingLoading } from "./beforeEach";
 
-/** 路由全局后置守卫 */
+/** 防止重复注册 afterEach（与 beforeEach 同理） */
+let afterEachGuardRegistered = false;
+
 export function setupAfterEachGuard(router: Router) {
+  if (afterEachGuardRegistered) {
+    if (import.meta.env.DEV) {
+      console.warn("[Router] setupAfterEachGuard 已注册，跳过重复调用");
+    }
+    return;
+  }
+  afterEachGuardRegistered = true;
+
   const { scrollToTop } = useCommon();
 
   router.afterEach(() => {
     scrollToTop();
 
-    // 关闭进度条
     const settingStore = useSettingsStore();
     if (settingStore.showNprogress) {
       NProgress.done();
-      // 确保进度条完全移除，避免残影
       setTimeout(() => {
         NProgress.remove();
       }, 600);
     }
 
-    // 关闭 loading 效果
     if (getPendingLoading()) {
       nextTick(() => {
         loadingService.hideLoading();
diff --git a/frontend/web/src/router/beforeEach.ts b/frontend/web/src/router/beforeEach.ts
index 93143f05..d817d14a 100644
--- a/frontend/web/src/router/beforeEach.ts
+++ b/frontend/web/src/router/beforeEach.ts
@@ -1,39 +1,6 @@
 /**
- * 路由全局前置守卫模块
- *
- * 提供完整的路由导航守卫功能
- *
- * ## 主要功能
- *
- * - 登录状态验证和重定向
- * - 动态路由注册和权限控制
- * - 菜单数据获取和处理（前端/后端模式）
- * - 用户信息获取和缓存
- * - 页面标题设置
- * - 工作标签页管理
- * - 进度条和加载动画控制
- * - 静态路由识别和处理
- * - 错误处理和异常跳转
- *
- * ## 使用场景
- *
- * - 路由跳转前的权限验证
- * - 动态菜单加载和路由注册
- * - 用户登录状态管理
- * - 页面访问控制
- * - 路由级别的加载状态管理
- *
- * ## 工作流程
- *
- * 1. 检查登录状态，未登录跳转到登录页
- * 2. 首次访问时获取用户信息和菜单数据
- * 3. 根据权限动态注册路由
- * 4. 设置页面标题和工作标签页
- * 5. 处理根路径重定向到首页
- * 6. 未匹配路由跳转到 404 页面
- *
- * @module router/beforeEach
- * @author FastapiAdmin Team
+ * 路由前置守卫：登录态、动态路由注册（菜单）、根路径重定向、进度条、标签页与标题。
+ * 入口 `setupBeforeEachGuard`；核心流程见 `handleRouteGuard`。
  */
 import type { AppRouteRecord } from "@/types/router";
 import type { Router, RouteLocationNormalized, NavigationGuardNext } from "vue-router";
@@ -53,56 +20,50 @@ import { ApiStatus, isHttpError } from "@utils/http";
 import { RouteRegistry } from "./dynamicRoutes";
 import { MenuProcessor } from "./MenuProcessor";
 
-// 路由注册器实例
-let routeRegistry: RouteRegistry | null = null;
+// --- 模块级单例与守卫状态 ---
 
-// 菜单处理器实例
+let routeRegistry: RouteRegistry | null = null;
 const menuProcessor = new MenuProcessor();
 
-// 跟踪是否需要关闭 loading
+/** 供 afterEach 关闭全局 loading */
 let pendingLoading = false;
 
-// 路由初始化失败标记，防止死循环
-// 一旦设置为 true，只有刷新页面或重新登录才能重置
+/** 动态路由拉取失败后为 true，避免反复请求造成死循环 */
 let routeInitFailed = false;
 
-// 路由初始化进行中标记，防止并发请求
+/** 并发导航时只允许一路执行动态路由初始化 */
 let routeInitInProgress = false;
 
-/**
- * 获取 pendingLoading 状态
- */
 export function getPendingLoading(): boolean {
   return pendingLoading;
 }
 
-/**
- * 重置 pendingLoading 状态
- */
 export function resetPendingLoading(): void {
   pendingLoading = false;
 }
 
-/**
- * 获取路由初始化失败状态
- */
 export function getRouteInitFailed(): boolean {
   return routeInitFailed;
 }
 
-/**
- * 重置路由初始化状态（用于重新登录场景）
- */
+/** 重新登录等场景重置初始化标记 */
 export function resetRouteInitState(): void {
   routeInitFailed = false;
   routeInitInProgress = false;
 }
 
-/**
- * 设置路由全局前置守卫
- */
+/** 防止 dev/HMR 或异常重复 init 导致多个 beforeEach 叠加（导航副作用与请求会成倍增长） */
+let beforeEachGuardRegistered = false;
+
 export function setupBeforeEachGuard(router: Router): void {
-  // 初始化路由注册器
+  if (beforeEachGuardRegistered) {
+    if (import.meta.env.DEV) {
+      console.warn("[Router] setupBeforeEachGuard 已注册，跳过重复调用");
+    }
+    return;
+  }
+  beforeEachGuardRegistered = true;
+
   routeRegistry = new RouteRegistry(router);
 
   router.beforeEach(
@@ -122,9 +83,6 @@ export function setupBeforeEachGuard(router: Router): void {
   );
 }
 
-/**
- * 关闭 loading 效果
- */
 function closeLoading(): void {
   if (pendingLoading) {
     nextTick(() => {
@@ -147,50 +105,40 @@ function applySafeTitleFromQuery(to: RouteLocationNormalized): void {
   }
 }
 
-/**
- * 处理路由守卫逻辑
- */
 async function handleRouteGuard(
   to: RouteLocationNormalized,
   from: RouteLocationNormalized,
   next: NavigationGuardNext,
   router: Router
 ): Promise<void> {
+  // 顺序：登录 → 动态路由初始化失败兜底 → 动态路由注册 → 根路径 → 已匹配页 → 404
   const settingStore = useSettingsStore();
   const userStore = useUserStore();
 
-  // 启动进度条
   if (settingStore.showNprogress) {
     NProgress.start();
   }
 
-  // 1. 检查登录状态
   if (!handleLoginStatus(to, userStore, next)) {
     return;
   }
 
-  // 2. 检查路由初始化是否已失败（防止死循环）
   if (routeInitFailed) {
-    // 已经失败过，直接放行到错误页面，不再重试
     if (to.matched.length > 0) {
       next();
     } else {
-      // 未匹配到路由，跳转到 500 页面
       next({ name: "500", replace: true });
     }
     return;
   }
 
-  // 3. 处理动态路由注册
   const menuStore = useMenuStore();
   /** 未注册动态路由，或菜单已被清空（登出延迟 reset 与再登录竞态下可能出现「已注册但 menuList 为空」） */
   const shouldInitRoutes =
     userStore.isLogin && (!routeRegistry?.isRegistered() || menuStore.menuList.length === 0);
 
   if (shouldInitRoutes) {
-    // 防止并发请求（快速连续导航场景）
     if (routeInitInProgress) {
-      // 正在初始化中，等待完成后重新导航
       next(false);
       return;
     }
@@ -198,12 +146,10 @@ async function handleRouteGuard(
     return;
   }
 
-  // 4. 处理根路径重定向
   if (handleRootPathRedirect(to, next)) {
     return;
   }
 
-  // 5. 处理已匹配的路由
   if (to.matched.length > 0) {
     applySafeTitleFromQuery(to);
     setWorktab(to);
@@ -212,27 +158,20 @@ async function handleRouteGuard(
     return;
   }
 
-  // 6. 未匹配到路由，跳转到 404
   next({ name: "404" });
 }
 
-/**
- * 处理登录状态
- * @returns true 表示可以继续，false 表示已处理跳转
- */
+/** @returns 是否继续守卫；false 表示已 `next` 跳转 */
 function handleLoginStatus(
   to: RouteLocationNormalized,
   userStore: ReturnType<typeof useUserStore>,
   next: NavigationGuardNext
 ): boolean {
-  // 已登录 / 登录相关路由 / 明确配置的匿名白名单，放行。
-  // 注意：不能使用「整条 staticRoutes 都算静态」——否则 `/`、`/` 重定向到的业务页也会被当成免登录，
-  // 未登录用户会先被放过再跳首页（见 issue：打开站点先进首页而非登录页）。
+  // 勿把「整条 staticRoutes」当匿名：否则 `/` 重定向到的业务页会被误放行（未登录先进首页）。
   if (userStore.isLogin || isLoginRoute(to) || isAnonymousPublicPath(to.path)) {
     return true;
   }
 
-  // 未登录且访问需要权限的页面，跳转到登录页并携带 redirect 参数
   userStore.resetAllState();
   next({
     name: "Login",
diff --git a/frontend/web/src/router/dynamicRoutes.ts b/frontend/web/src/router/dynamicRoutes.ts
index 779e0f65..e01df927 100644
--- a/frontend/web/src/router/dynamicRoutes.ts
+++ b/frontend/web/src/router/dynamicRoutes.ts
@@ -1,6 +1,6 @@
 /**
- * 动态路由一站式：菜单 → 组件解析 → 挂到 RootLayout 下注册。
- *（老 web 里分散在 permission / transform 的职责，这里收进一个文件，少跳类、少找文件。）
+ * 动态路由：`AppRouteRecord` → `RouteTransformer`（字符串路径 → import.glob）→ `router.addRoute(RootLayout)`。
+ * 含校验（RouteValidator）、组件加载（ComponentLoader）、注册表（RouteRegistry）。
  */
 import { defineComponent, h, onMounted, ref } from "vue";
 import type { RouteRecordRaw, Router } from "vue-router";
@@ -20,6 +20,7 @@ export interface ValidationResult {
   warnings: string[];
 }
 
+/** 菜单注册前校验：重名、缺少 component、深层误用 layout 占位等 */
 export class RouteValidator {
   private warnedRoutes = new Set<string>();
 
@@ -150,7 +151,7 @@ export class RouteValidator {
   }
 }
 
-// ----------------------------------------------------------------------------- ComponentLoader
+// --- ComponentLoader：菜单字符串路径 → views 懒加载 ---
 export class ComponentLoader {
   private modules: Record<string, () => Promise<any>>;
 
@@ -186,7 +187,7 @@ export class ComponentLoader {
   }
 
   loadLayout(): () => Promise<any> {
-    return () => import("@/components/layouts/index.vue");
+    return () => import("@/layouts/index.vue");
   }
 
   loadIframe(): () => Promise<any> {
@@ -249,7 +250,7 @@ export class ComponentLoader {
   }
 }
 
-// ----------------------------------------------------------------------------- RouteTransformer
+// --- RouteTransformer：菜单树 → vue-router 记录 ---
 interface ConvertedRoute extends Omit<RouteRecordRaw, "children"> {
   id?: number;
   children?: ConvertedRoute[];
@@ -370,8 +371,8 @@ export class RouteTransformer {
   }
 }
 
-// ----------------------------------------------------------------------------- RouteRegistry
-/** 与静态壳层冲突的一级 path 段，后端动态挂载时跳过以免覆盖首页/仪表盘等 */
+// --- RouteRegistry：校验通过后批量 addRoute ---
+/** 与静态壳层冲突的一级 path 段，动态注册时跳过以免覆盖首页 / 仪表盘等 */
 const RESERVED_SHELL_SEGMENTS = new Set(["home", "profile", "changelog", "dashboard"]);
 
 function pathFirstSegment(path: string): string {
diff --git a/frontend/web/src/router/index.ts b/frontend/web/src/router/index.ts
index 7b9f3ab5..6295003f 100755
--- a/frontend/web/src/router/index.ts
+++ b/frontend/web/src/router/index.ts
@@ -6,29 +6,27 @@ import { setupAfterEachGuard } from "./afterEach";
 import "@utils/ui";
 
 /**
- * 路由分层：`staticRoutes` 一次性注册（登录页、首页、仪表盘、异常页等）；
- * 业务菜单来自后端或壳层合并后再由守卫动态 `addRoute`。
+ * 路由入口：`staticRoutes` 首屏注册；业务路由由 `beforeEach` 内 `RouteRegistry` 动态挂载。
+ * `initRouter` 注册前置/后置守卫并 `app.use(router)`。
  */
 export const router = createRouter({
   history: createWebHashHistory(),
   routes: staticRoutes,
-  // 刷新时，滚动条位置还原
   scrollBehavior: () => ({ left: 0, top: 0 }),
 });
 
-// 初始化路由
 export function initRouter(app: App<Element>): void {
-  setupBeforeEachGuard(router); // 路由前置守卫
-  setupAfterEachGuard(router); // 路由后置守卫
+  setupBeforeEachGuard(router);
+  setupAfterEachGuard(router);
   app.use(router);
 }
 
-// 主页路径；须与 `staticRoutes` 中首页子路由一致（当前为 `/home`）
+/** 须与 `staticRoutes` 首页子路由 path 一致 */
 export const HOME_PAGE_PATH = "/home";
 
 export { HOME_ROUTE_NAME, ROOT_LAYOUT_ROUTE_NAME };
 
-/** 供 `@/router` 一处导入的运行时模块 */
+/** 动态路由注册与菜单转换（一般从 `@/router` 按需导入） */
 export { RouteRegistry, ComponentLoader, RouteTransformer, RouteValidator } from "./dynamicRoutes";
 export type { ValidationResult } from "./dynamicRoutes";
 export { IframeRouteManager } from "./staticRoutes";
diff --git a/frontend/web/src/router/staticRoutes.ts b/frontend/web/src/router/staticRoutes.ts
index 771bd9ab..6d5e36fa 100644
--- a/frontend/web/src/router/staticRoutes.ts
+++ b/frontend/web/src/router/staticRoutes.ts
@@ -13,7 +13,7 @@ export const HOME_MENU_META: RouteMeta = {
 
 export const DASHBOARD_PARENT_META: RouteMeta = {
   title: "menus.dashboard.title",
-  icon: "ri:pie-chfa-line",
+  icon: "ri:pie-chart-line",
   alwaysShow: true,
 };
 
@@ -92,7 +92,7 @@ export const ROUTE_COMPONENT_NESTED_PARENT = "/nested/router-view-parent";
 export const ROUTE_PATH_LOGIN_ALT = "/auth/login";
 
 /**
- * 主框架布局：新版 art 体系（`src/layouts/index.vue` + `src/layouts/fa-*` 组件）。
+ * 主框架布局：新版 art 体系（`src/layouts/index.vue` + `src/layouts/art-*` 组件）。
  * 旧版 Left/Top/Mix 壳子仍在 `@/layouts/index.vue`，路由不再默认使用。
  */
 export const Layout = () => import("@/components/layouts/index.vue");
@@ -172,7 +172,7 @@ export const dashboardLayoutChildren: AppRouteRecordRaw[] = [
     component: () => import("@views/dashboard/ecommerce/index.vue"),
     meta: {
       title: "menus.dashboard.ecommerce",
-      icon: "ri:bar-chfa-box-line",
+      icon: "ri:bar-chart-box-line",
       keepAlive: false,
     },
   },
@@ -229,7 +229,7 @@ export const dashboardLayoutChildren: AppRouteRecordRaw[] = [
     component: () => import("@views/dashboard/tutorial/index.vue"),
     meta: {
       title: "menus.dashboard.tutorial",
-      icon: "ri:movie-2-line",
+      icon: "ri:book-2-line",
       keepAlive: true,
     },
   },
@@ -386,7 +386,7 @@ export const staticRoutes: AppRouteRecordRaw[] = [
   {
     path: "/login",
     name: "Login",
-    meta: { hidden: true, title: "menus.login.title" },
+    meta: { hidden: true, isHideTab: true, title: "menus.login.title" },
     component: () => import("@views/module_system/auth/login/index.vue"),
   },
   /** 无 Layout 全屏异常页；守卫与白名单跳转使用（勿再在 RootLayout 下重复挂载同组件） */
@@ -458,7 +458,7 @@ export const staticRoutes: AppRouteRecordRaw[] = [
   },
   {
     path: "/outside",
-    component: () => import("@/components/layouts/index.vue"),
+    component: () => import("@/layouts/index.vue"),
     name: "Outside",
     meta: { title: "menus.outside.title" },
     children: [
diff --git a/frontend/web/src/store/index.ts b/frontend/web/src/store/index.ts
index c9c41ae2..61d0befc 100755
--- a/frontend/web/src/store/index.ts
+++ b/frontend/web/src/store/index.ts
@@ -7,7 +7,7 @@ import { useUserStore } from "./modules/user.store";
 import { useDictStore } from "./modules/dict.store";
 import { useNoticeStore } from "./modules/notice.store";
 import { useConfigStore } from "./modules/config.store";
-import { useTagsViewStore } from "./modules/tags-view.store";
+import { useWorktabStore } from "./modules/worktab.store";
 
 const store = createPinia();
 
@@ -20,17 +20,15 @@ export function initStore(app: App<Element>) {
 export * from "./modules/app.store";
 export * from "./modules/config.store";
 export * from "./modules/dict.store";
-export * from "./modules/lock.store";
 export * from "./modules/menu.store";
 export * from "./modules/notice.store";
 export * from "./modules/setting.store";
 export * from "./modules/table.store";
-export * from "./modules/tags-view.store";
 export * from "./modules/user.store";
 export * from "./modules/worktab.store";
 
 export { store };
-export { useUserStore, useDictStore, useNoticeStore, useConfigStore, useTagsViewStore };
+export { useUserStore, useDictStore, useNoticeStore, useConfigStore, useWorktabStore };
 
 export interface RefreshCacheOptions {
   dictTypes?: string[];
@@ -57,7 +55,6 @@ export async function refreshAppCaches(opts: RefreshCacheOptions = {}) {
   const dictStore = useDictStore(store);
   const noticeStore = useNoticeStore(store);
   const configStore = useConfigStore(store);
-  const tagsViewStore = useTagsViewStore(store);
 
   const tasks: Promise<any>[] = [];
 
@@ -87,6 +84,6 @@ export async function refreshAppCaches(opts: RefreshCacheOptions = {}) {
   }
 
   if (clearTags) {
-    await tagsViewStore.delAllViews();
+    useWorktabStore(store).clearAll();
   }
 }
diff --git a/frontend/web/src/store/modules/lock.store.ts b/frontend/web/src/store/modules/lock.store.ts
deleted file mode 100644
index cfc660e3..00000000
--- a/frontend/web/src/store/modules/lock.store.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * 锁屏状态管理模块
- *
- * 提供锁屏功能的状态管理
- *
- * ## 主要功能
- *
- * - 锁屏状态管理
- * - 锁屏密码验证
- * - 锁屏信息存储
- * - 解锁功能
- *
- * ## 使用场景
- *
- * - 用户离开时锁定屏幕
- * - 保护敏感操作
- * - 临时离开保护
- *
- * ## 持久化
- *
- * - 使用 localStorage 存储
- * - 锁屏状态跨页面保持
- *
- * @module store/modules/lock.store
- * @author FastapiAdmin Team
- */
-import { defineStore } from "pinia";
-import { ref } from "vue";
-
-export const useLockStore = defineStore(
-  "lockStore",
-  () => {
-    // 是否锁定屏幕
-    const isLock = ref(false);
-    // 锁屏密码
-    const password = ref("");
-
-    /**
-     * 获取锁屏信息
-     */
-    const getLockInfo = () => ({
-      isLock: isLock.value,
-      password: password.value,
-    });
-
-    /**
-     * 设置锁屏信息
-     * @param lockInfo 锁屏信息对象
-     */
-    const setLockInfo = (lockInfo: { isLock?: boolean; password?: string }) => {
-      if (lockInfo.isLock !== undefined) {
-        isLock.value = lockInfo.isLock;
-      }
-      if (lockInfo.password !== undefined) {
-        password.value = lockInfo.password;
-      }
-    };
-
-    /**
-     * 重置锁屏信息
-     */
-    const resetLockInfo = () => {
-      isLock.value = false;
-      password.value = "";
-    };
-
-    /**
-     * 解锁屏幕
-     * @param inputPassword 输入的解锁密码
-     * @returns 是否解锁成功
-     */
-    const unLock = (inputPassword: string) => {
-      if (password.value === inputPassword) {
-        resetLockInfo();
-        return true;
-      } else {
-        return false;
-      }
-    };
-
-    return {
-      isLock,
-      password,
-      getLockInfo,
-      setLockInfo,
-      resetLockInfo,
-      unLock,
-    };
-  },
-  {
-    persist: true,
-  }
-);
diff --git a/frontend/web/src/store/modules/setting.store.ts b/frontend/web/src/store/modules/setting.store.ts
index 95818128..d49462a4 100644
--- a/frontend/web/src/store/modules/setting.store.ts
+++ b/frontend/web/src/store/modules/setting.store.ts
@@ -1,6 +1,6 @@
 /**
  * 全局界面设置：布局、主题、页签、水印、工具栏显隐等；部分字段持久化（useStorage / persist）。
- * `reload` 翻转 `refresh` 布尔值，触发 `FaPageContent` 重建 RouterView（与 useCommon.refresh 一致）。
+ * `reload` 翻转 `refresh` 布尔值，触发 `ArtPageContent` 重建 RouterView（与 useCommon.refresh 一致）。
  */
 import { defineStore } from "pinia";
 import { ref, computed, watch } from "vue";
@@ -50,6 +50,7 @@ export const useSettingsStore = defineStore(
     const autoClose = ref(SETTING_DEFAULT_CONFIG.autoClose);
     const uniqueOpened = ref(SETTING_DEFAULT_CONFIG.uniqueOpened);
     const colorWeak = ref(SETTING_DEFAULT_CONFIG.colorWeak);
+    /** 供布局监听：`reload()` 取反以触发主内容区整页刷新 */
     const refresh = ref(SETTING_DEFAULT_CONFIG.refresh);
     const holidayFireworksLoaded = ref(SETTING_DEFAULT_CONFIG.holidayFireworksLoaded);
 
@@ -288,7 +289,7 @@ export const useSettingsStore = defineStore(
       menuOpen.value = open;
     };
 
-    /** 切换 `refresh`，驱动 `layouts/fa-page-content` 内 `v-if="isRefresh"` 重建视图 */
+    /** 切换 `refresh`，驱动 `layouts/art-page-content` 内 `v-if="isRefresh"` 重建视图 */
     const reload = () => {
       refresh.value = !refresh.value;
     };
diff --git a/frontend/web/src/store/modules/table.store.ts b/frontend/web/src/store/modules/table.store.ts
index baddd369..8f02db1e 100644
--- a/frontend/web/src/store/modules/table.store.ts
+++ b/frontend/web/src/store/modules/table.store.ts
@@ -6,54 +6,25 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 import { TableSizeEnum } from "@/enums/formEnum";
 
-// 表格
 export const useTableStore = defineStore(
   "tableStore",
   () => {
-    // 表格大小
+    // --- 表格样式 ---
     const tableSize = ref(TableSizeEnum.DEFAULT);
-    // 斑马纹
     const isZebra = ref(false);
-    // 边框
     const isBorder = ref(false);
-    // 表头背景
     const isHeaderBackground = ref(false);
 
-    // 是否全屏
+    // --- 交互 ---
     const isFullScreen = ref(false);
-    // 是否开启表格行拖拽排序（工具栏开关，与 ArtTable + VueDraggable 配合）
+    /** 工具栏「行拖拽」；仅当表格数据为可变数组时有效 */
     const isRowDrag = ref(false);
 
-    /**
-     * 设置表格大小
-     * @param size 表格大小枚举值
-     */
     const setTableSize = (size: TableSizeEnum) => (tableSize.value = size);
-
-    /**
-     * 设置斑马纹显示状态
-     * @param value 是否显示斑马纹
-     */
     const setIsZebra = (value: boolean) => (isZebra.value = value);
-
-    /**
-     * 设置表格边框显示状态
-     * @param value 是否显示边框
-     */
     const setIsBorder = (value: boolean) => (isBorder.value = value);
-
-    /**
-     * 设置表头背景显示状态
-     * @param value 是否显示表头背景
-     */
     const setIsHeaderBackground = (value: boolean) => (isHeaderBackground.value = value);
-
-    /**
-     * 设置是否全屏
-     * @param value 是否全屏
-     */
     const setIsFullScreen = (value: boolean) => (isFullScreen.value = value);
-
     const setIsRowDrag = (value: boolean) => (isRowDrag.value = value);
 
     return {
diff --git a/frontend/web/src/store/modules/tags-view.store.ts b/frontend/web/src/store/modules/tags-view.store.ts
deleted file mode 100644
index 71dc32ba..00000000
--- a/frontend/web/src/store/modules/tags-view.store.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-/**
- * 标签页状态管理模块
- *
- * 提供标签页的状态管理和缓存机制
- *
- * ## 主要功能
- *
- * - 已访问视图列表管理
- * - 缓存视图列表管理
- * - 添加、删除、更新标签页
- * - 关闭当前标签页并跳转
- * - 关闭其他标签页/关闭左侧/关闭右侧
- * - 固定标签页支持
- *
- * ## 使用场景
- *
- * - 多标签页导航
- * - 页面缓存管理
- * - 标签页右键菜单操作
- * - 路由切换时的标签状态同步
- *
- * ## 核心特性
- *
- * - 支持固定标签（affix）
- * - 支持keepAlive缓存
- * - 关闭标签时自动跳转上一个标签
- * - 区分已访问视图和缓存视图
- *
- * @module store/modules/tags-view.store
- * @author FastapiAdmin Team
- */
-import { defineStore } from "pinia";
-import { ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { store } from "@stores";
-
-export const useTagsViewStore = defineStore(
-  "tagsViewStore",
-  () => {
-    const visitedViews = ref<TagView[]>([]);
-    const cachedViews = ref<string[]>([]);
-    const router = useRouter();
-    const route = useRoute();
-
-    /**
-     * 添加已访问视图到已访问视图列表中
-     */
-    function addVisitedView(view: TagView) {
-      // 如果已经存在于已访问的视图列表中或者是重定向地址，则不再添加
-      if (view.path.startsWith("/redirect")) {
-        return;
-      }
-      if (visitedViews.value.some((v) => v.name === view.name)) {
-        return;
-      }
-      // 如果视图是固定的（affix），则在已访问的视图列表的开头添加
-      if (view.affix) {
-        visitedViews.value.unshift(view);
-      } else {
-        // 如果视图不是固定的，则在已访问的视图列表的末尾添加
-        visitedViews.value.push(view);
-      }
-    }
-
-    /**
-     * 添加缓存视图到缓存视图列表中
-     */
-    function addCachedView(view: TagView) {
-      const viewName = view.name;
-      // 如果缓存视图名称已经存在于缓存视图列表中，则不再添加
-      if (cachedViews.value.includes(viewName)) {
-        return;
-      }
-
-      // 如果视图需要缓存（keepAlive），则将其路由名称添加到缓存视图列表中
-      if (view.keepAlive) {
-        cachedViews.value.push(viewName);
-      }
-    }
-
-    /**
-     * 从已访问视图列表中删除指定的视图
-     */
-    function delVisitedView(view: TagView) {
-      return new Promise((resolve) => {
-        for (const [i, v] of visitedViews.value.entries()) {
-          // 找到与指定视图路径匹配的视图，在已访问视图列表中删除该视图
-          if (v.path === view.path) {
-            visitedViews.value.splice(i, 1);
-            break;
-          }
-        }
-        resolve([...visitedViews.value]);
-      });
-    }
-
-    function delCachedView(view: TagView) {
-      const viewName = view.name;
-      return new Promise((resolve) => {
-        const index = cachedViews.value.indexOf(viewName);
-        if (index > -1) {
-          cachedViews.value.splice(index, 1);
-        }
-        resolve([...cachedViews.value]);
-      });
-    }
-    function delOtherVisitedViews(view: TagView) {
-      return new Promise((resolve) => {
-        visitedViews.value = visitedViews.value.filter((v) => {
-          return v?.affix || v.path === view.path;
-        });
-        resolve([...visitedViews.value]);
-      });
-    }
-
-    function delOtherCachedViews(view: TagView) {
-      const viewName = view.name as string;
-      return new Promise((resolve) => {
-        const index = cachedViews.value.indexOf(viewName);
-        if (index > -1) {
-          cachedViews.value = cachedViews.value.slice(index, index + 1);
-        } else {
-          // if index = -1, there is no cached tags
-          cachedViews.value = [];
-        }
-        resolve([...cachedViews.value]);
-      });
-    }
-
-    function updateVisitedView(view: TagView) {
-      for (let v of visitedViews.value) {
-        if (v.path === view.path) {
-          v = Object.assign(v, view);
-          break;
-        }
-      }
-    }
-
-    function addView(view: TagView) {
-      addVisitedView(view);
-      addCachedView(view);
-    }
-
-    function delView(view: TagView) {
-      return new Promise((resolve) => {
-        delVisitedView(view);
-        delCachedView(view);
-        resolve({
-          visitedViews: [...visitedViews.value],
-          cachedViews: [...cachedViews.value],
-        });
-      });
-    }
-
-    function delOtherViews(view: TagView) {
-      return new Promise((resolve) => {
-        delOtherVisitedViews(view);
-        delOtherCachedViews(view);
-        resolve({
-          visitedViews: [...visitedViews.value],
-          cachedViews: [...cachedViews.value],
-        });
-      });
-    }
-
-    function delLeftViews(view: TagView) {
-      return new Promise((resolve) => {
-        const currIndex = visitedViews.value.findIndex((v) => v.path === view.path);
-        if (currIndex === -1) {
-          return;
-        }
-        visitedViews.value = visitedViews.value.filter((item, index) => {
-          if (index >= currIndex || item?.affix) {
-            return true;
-          }
-
-          const cacheIndex = cachedViews.value.indexOf(item.name);
-          if (cacheIndex > -1) {
-            cachedViews.value.splice(cacheIndex, 1);
-          }
-          return false;
-        });
-        resolve({
-          visitedViews: [...visitedViews.value],
-        });
-      });
-    }
-
-    function delRightViews(view: TagView) {
-      return new Promise((resolve) => {
-        const currIndex = visitedViews.value.findIndex((v) => v.path === view.path);
-        if (currIndex === -1) {
-          return;
-        }
-        visitedViews.value = visitedViews.value.filter((item, index) => {
-          if (index <= currIndex || item?.affix) {
-            return true;
-          }
-        });
-        resolve({
-          visitedViews: [...visitedViews.value],
-        });
-      });
-    }
-
-    function delAllViews() {
-      return new Promise((resolve) => {
-        const affixTags = visitedViews.value.filter((tag) => tag?.affix);
-        visitedViews.value = affixTags;
-        cachedViews.value = [];
-        resolve({
-          visitedViews: [...visitedViews.value],
-          cachedViews: [...cachedViews.value],
-        });
-      });
-    }
-
-    function delAllVisitedViews() {
-      return new Promise((resolve) => {
-        const affixTags = visitedViews.value.filter((tag) => tag?.affix);
-        visitedViews.value = affixTags;
-        resolve([...visitedViews.value]);
-      });
-    }
-
-    function delAllCachedViews() {
-      return new Promise((resolve) => {
-        cachedViews.value = [];
-        resolve([...cachedViews.value]);
-      });
-    }
-
-    /**
-     * 关闭当前tagView
-     */
-    function closeCurrentView() {
-      const tags: TagView = {
-        name: route.name as string,
-        title: route.meta.title as string,
-        path: route.path,
-        fullPath: route.fullPath,
-        affix: route.meta?.affix,
-        keepAlive: route.meta?.keepAlive,
-        query: route.query,
-      };
-      delView(tags).then((res: any) => {
-        if (isActive(tags)) {
-          toLastView(res.visitedViews, tags);
-        }
-      });
-    }
-
-    function isActive(tag: TagView) {
-      return tag.path === route.path;
-    }
-
-    function toLastView(visitedViews: TagView[], view?: TagView) {
-      const latestView = visitedViews.slice(-1)[0];
-      if (latestView && latestView.fullPath) {
-        router.push(latestView.fullPath);
-      } else {
-        // now the default is to redirect to the home page if there is no tags-view,
-        // you can adjust it according to your needs.
-        const vn = view?.name != null ? String(view.name) : "";
-        if (
-          vn === "Home" ||
-          vn === "Workplace" ||
-          vn === "Dashboard" ||
-          vn.startsWith("Dashboard")
-        ) {
-          // to reload home page
-          if (view?.fullPath) {
-            router.replace("/redirect" + view.fullPath);
-          } else {
-            router.push("/");
-          }
-        } else {
-          router.push("/");
-        }
-      }
-    }
-
-    return {
-      visitedViews,
-      cachedViews,
-      addVisitedView,
-      addCachedView,
-      delVisitedView,
-      delCachedView,
-      delOtherVisitedViews,
-      delOtherCachedViews,
-      updateVisitedView,
-      addView,
-      delView,
-      delOtherViews,
-      delLeftViews,
-      delRightViews,
-      delAllViews,
-      delAllVisitedViews,
-      delAllCachedViews,
-      closeCurrentView,
-      isActive,
-      toLastView,
-    };
-  },
-  {
-    persist: true,
-  }
-);
-
-export function useTagsViewStoreHook() {
-  return useTagsViewStore(store);
-}
diff --git a/frontend/web/src/store/modules/user.store.ts b/frontend/web/src/store/modules/user.store.ts
index b0c92f08..5228be80 100755
--- a/frontend/web/src/store/modules/user.store.ts
+++ b/frontend/web/src/store/modules/user.store.ts
@@ -16,7 +16,7 @@ import type { MenuTable } from "@/api/module_system/menu";
 import { Auth } from "@utils/auth";
 import { ResultEnum } from "@/enums/api/result.enum";
 import { ElNotification } from "element-plus";
-import { store, useTagsViewStore, useDictStore } from "@stores";
+import { store, useDictStore } from "@stores";
 import type { UserInfo } from "@/api/module_system/user";
 
 /** {@link useUserStore} 的 `logout` 可选参数 */
@@ -154,11 +154,9 @@ export const useUserStore = defineStore(
         return;
       }
 
-      // 不同用户登录，清空工作台标签页
-      if (String(currentUserId) !== lastUserId) {
-        const worktabStore = useWorktabStore();
-        worktabStore.opened = [];
-        worktabStore.keepAliveExclude = [];
+      // 不同用户登录：清空工作台标签（含 current，避免与路由脱节；并与持久化一致）
+      if (String(currentUserId) !== String(lastUserId)) {
+        useWorktabStore().clearAll();
       }
 
       // 清除临时存储
@@ -311,6 +309,8 @@ export const useUserStore = defineStore(
       accessToken.value = "";
       refreshToken.value = "";
       prems.value = [];
+      /** 登出 / 认证失效：会话结束，工作栏与 KeepAlive exclude 一并清空（pinia 持久化随之写入） */
+      useWorktabStore().clearAll();
     }
 
     /**
@@ -355,8 +355,7 @@ export const useUserStore = defineStore(
       Auth.clearAuth();
       // 重置用户信息
       clearUserInfo();
-      // 清除标签视图
-      useTagsViewStore().delAllViews();
+      useWorktabStore().clearAll();
       // 重置字典
       useDictStore(store).clearDictData();
 
diff --git a/frontend/web/src/store/modules/worktab.store.ts b/frontend/web/src/store/modules/worktab.store.ts
index 10130f05..8038ada4 100755
--- a/frontend/web/src/store/modules/worktab.store.ts
+++ b/frontend/web/src/store/modules/worktab.store.ts
@@ -23,7 +23,7 @@
  *
  * ## 核心特性
  *
- * - 智能标签页复用（同路由名称复用）
+ * - 标签以 path 标识；同一路由组件可对不同 path 多开
  * - 固定标签页保护（不可关闭）
  * - KeepAlive 缓存排除管理
  * - 路由有效性验证
@@ -43,6 +43,7 @@ import { router } from "@/router";
 import { LocationQueryRaw, Router } from "vue-router";
 import { WorkTab } from "@/types";
 import { useCommon } from "@/hooks/core/useCommon";
+import { ROUTE_PATH_LOGIN_ALT } from "@/router/staticRoutes";
 
 interface WorktabState {
   current: Partial<WorkTab>;
@@ -108,6 +109,19 @@ export const useWorktabStore = defineStore(
       }
     };
 
+    /**
+     * 批量关标签后：若当前 URL 已不在 opened 中，则跳到 `current` 对应标签（避免路由与工作栏脱节）。
+     */
+    const ensureRouterMatchesOpenedTab = (): void => {
+      if (!opened.value.length) return;
+      const locPath = router.currentRoute.value.path;
+      if (opened.value.some((t) => t.path === locPath)) return;
+      const tab = current.value as Partial<WorkTab>;
+      if (tab.path) {
+        safeRouterPush(tab as WorkTab);
+      }
+    };
+
     /**
      * 打开或激活一个选项卡
      */
@@ -122,14 +136,8 @@ export const useWorktabStore = defineStore(
         removeKeepAliveExclude(tab.name);
       }
 
-      // 先根据路由名称查找（应对动态路由参数导致的多开问题），找不到再根据路径查找
-      let existingIndex = -1;
-      if (tab.name) {
-        existingIndex = opened.value.findIndex((t) => t.name === tab.name);
-      }
-      if (existingIndex === -1) {
-        existingIndex = findTabIndex(tab.path);
-      }
+      // 仅以 path 识别标签：同一 route_name（同一组件）可对不同 path 同时保留多条标签
+      const existingIndex = findTabIndex(tab.path);
 
       if (existingIndex === -1) {
         // 新增标签页
@@ -255,6 +263,7 @@ export const useWorktabStore = defineStore(
       if (targetTab) {
         current.value = targetTab;
       }
+      ensureRouterMatchesOpenedTab();
     };
 
     /**
@@ -290,6 +299,7 @@ export const useWorktabStore = defineStore(
       if (targetTab) {
         current.value = targetTab;
       }
+      ensureRouterMatchesOpenedTab();
     };
 
     /**
@@ -320,6 +330,7 @@ export const useWorktabStore = defineStore(
 
       // 确保当前标签是激活状态
       current.value = targetTab;
+      ensureRouterMatchesOpenedTab();
     };
 
     /**
@@ -365,14 +376,28 @@ export const useWorktabStore = defineStore(
     };
 
     /**
-     * 将指定选项卡添加到 keepAlive 排除列表中
+     * KeepAlive 的 exclude 按「组件名」匹配，会一次性清掉所有同名实例。
+     * 仅当 remaining 中已无任何同名标签时，才把该组件名加入 exclude（支持同 route_name 多 path 并存）。
+     */
+    const pushExcludeIfLastSiblingOfName = (
+      name: string | undefined,
+      remaining: WorkTab[],
+      tab: Pick<WorkTab, "keepAlive">
+    ): void => {
+      if (!name || tab.keepAlive === false) return;
+      if (remaining.some((t) => t.name === name)) return;
+      if (!keepAliveExclude.value.includes(name)) {
+        keepAliveExclude.value.push(name);
+      }
+    };
+
+    /**
+     * 将指定选项卡添加到 keepAlive 排除列表中。
+     * 须与布局「keepAlive !== false 即缓存」一致：仅用 `=== false` 跳过（undefined/true 均应排除），
+     * 否则关标签时无法剔除原先 meta 未显式写 keepAlive 的页的缓存。
      */
     const addKeepAliveExclude = (tab: WorkTab): void => {
-      if (!tab.keepAlive || !tab.name) return;
-
-      if (!keepAliveExclude.value.includes(tab.name)) {
-        keepAliveExclude.value.push(tab.name);
-      }
+      pushExcludeIfLastSiblingOfName(tab.name, opened.value, tab);
     };
 
     /**
@@ -388,11 +413,13 @@ export const useWorktabStore = defineStore(
      * 将传入的一组选项卡的组件名称标记为排除缓存
      */
     const markTabsToRemove = (tabs: WorkTab[]): void => {
-      tabs.forEach((tab) => {
+      const removedPaths = new Set(tabs.map((t) => t.path));
+      const futureOpened = opened.value.filter((t) => !removedPaths.has(t.path));
+      for (const tab of tabs) {
         if (tab.name) {
-          addKeepAliveExclude(tab);
+          pushExcludeIfLastSiblingOfName(tab.name, futureOpened, tab);
         }
-      });
+      }
     };
 
     /**
@@ -454,16 +481,30 @@ export const useWorktabStore = defineStore(
           }
         };
 
+        /** 登录页不应出现在工作台标签（历史持久化可能残留） */
+        const isLoginWorktab = (tab: Partial<WorkTab>): boolean =>
+          tab.name === "Login" || tab.path === "/login" || tab.path === ROUTE_PATH_LOGIN_ALT;
+
         // 过滤出有效的标签页
-        const validTabs = opened.value.filter((tab) => isTabRouteValid(tab));
+        const validTabs = opened.value.filter(
+          (tab) => isTabRouteValid(tab) && !isLoginWorktab(tab)
+        );
 
         if (validTabs.length !== opened.value.length) {
           console.warn("发现无效的标签页路由，已自动清理");
+          const validPaths = new Set(validTabs.map((t) => t.path));
+          // 未走 removeTab 批量剔除的标签：须同步 exclude；同名多标签时仅最后一条删尽才 exclude
+          for (const tab of opened.value) {
+            if (!validPaths.has(tab.path) && tab.name && tab.keepAlive !== false) {
+              pushExcludeIfLastSiblingOfName(tab.name, validTabs, tab);
+            }
+          }
           opened.value = validTabs;
         }
 
-        // 验证当前激活标签的有效性
-        const isCurrentValid = current.value && isTabRouteValid(current.value);
+        // 验证当前激活标签的有效性（登录页不应作为当前工作台标签）
+        const isCurrentValid =
+          current.value && isTabRouteValid(current.value) && !isLoginWorktab(current.value);
 
         if (!isCurrentValid && validTabs.length > 0) {
           console.warn("当前激活标签无效，已自动切换");
@@ -524,6 +565,30 @@ export const useWorktabStore = defineStore(
       }
     };
 
+    /**
+     * 关闭「多标签栏」时：visited 不写入 `opened`（与 KeepAlive include 策略一致），
+     * 但路由每次完成导航后应更新 `current`，避免持久化/内部状态与 `router` 真值脱节。
+     */
+    const syncCurrentFromRoute = (tab: {
+      path: string;
+      name: string;
+      title: string;
+      icon?: string;
+      keepAlive: boolean;
+      params?: object;
+      query?: LocationQueryRaw;
+    }): void => {
+      current.value = {
+        path: tab.path,
+        name: tab.name,
+        title: tab.title,
+        icon: tab.icon,
+        keepAlive: tab.keepAlive,
+        params: tab.params,
+        query: tab.query,
+      };
+    };
+
     return {
       // 状态
       current,
@@ -557,6 +622,7 @@ export const useWorktabStore = defineStore(
       getTabTitle,
       updateTabTitle,
       resetTabTitle,
+      syncCurrentFromRoute,
     };
   },
   {
diff --git a/frontend/web/src/styles/core/app.scss b/frontend/web/src/styles/core/app.scss
index 352f3374..c2c4d686 100755
--- a/frontend/web/src/styles/core/app.scss
+++ b/frontend/web/src/styles/core/app.scss
@@ -17,7 +17,7 @@
 }
 
 // 处理移动端组件兼容性
-@media screen and (max-width: 640px) {
+@media screen and (width <= 640px) {
   * {
     cursor: default !important;
   }
@@ -40,8 +40,8 @@
 
 // 色弱模式
 .color-weak {
-  filter: invert(80%);
   -webkit-filter: invert(80%);
+  filter: invert(80%);
 }
 
 #noop {
@@ -52,14 +52,14 @@
 .langDropDownStyle {
   // 选中项背景颜色
   .is-selected {
-    background-color: var(--art-el-active-color) !important;
+    background-color: var(--fa-el-active-color) !important;
   }
 
   // 语言切换按钮菜单样式优化
   .lang-btn-item {
     .el-dropdown-menu__item {
-      padding-left: 13px !important;
       padding-right: 6px !important;
+      padding-left: 13px !important;
       margin-bottom: 3px !important;
     }
 
@@ -70,23 +70,23 @@
     }
 
     .menu-txt {
-      min-width: 60px;
       display: block;
+      min-width: 60px;
     }
 
     i {
-      font-size: 10px;
       margin-left: 10px;
+      font-size: 10px;
     }
   }
 }
 
 // 盒子默认边框
 .page-content {
-  border: 1px solid var(--art-card-border) !important;
+  border: 1px solid var(--fa-card-border) !important;
 }
 
-@mixin art-card-base($border-color, $shadow: none, $radius-diff: 4px) {
+@mixin fa-card-base($border-color, $shadow: none, $radius-diff: 4px) {
   background: var(--default-box-color);
   border: 1px solid #{$border-color} !important;
   border-radius: calc(var(--custom-radius) + #{$radius-diff}) !important;
@@ -95,63 +95,63 @@
   --el-card-border-color: var(--default-border) !important;
 }
 
-.art-card,
-.art-card-sm,
-.art-card-xs {
-  border: 1px solid var(--art-card-border);
+.fa-card,
+.fa-card-sm,
+.fa-card-xs {
+  border: 1px solid var(--fa-card-border);
 }
 
 // 盒子边框
-[data-box-mode='border-mode'] {
+[data-box-mode="border-mode"] {
   .page-content,
-  .art-table-card {
-    border: 1px solid var(--art-card-border) !important;
+  .fa-table-card {
+    border: 1px solid var(--fa-card-border) !important;
   }
 
-  .art-card {
-    @include art-card-base(var(--art-card-border), none, 4px);
+  .fa-card {
+    @include fa-card-base(var(--fa-card-border), none, 4px);
   }
 
-  .art-card-sm {
-    @include art-card-base(var(--art-card-border), none, 0px);
+  .fa-card-sm {
+    @include fa-card-base(var(--fa-card-border), none, 0);
   }
 
-  .art-card-xs {
-    @include art-card-base(var(--art-card-border), none, -4px);
+  .fa-card-xs {
+    @include fa-card-base(var(--fa-card-border), none, -4px);
   }
 }
 
 // 盒子阴影
-[data-box-mode='shadow-mode'] {
+[data-box-mode="shadow-mode"] {
   .page-content,
-  .art-table-card {
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04) !important;
-    border: 1px solid var(--art-gray-200) !important;
+  .fa-table-card {
+    border: 1px solid var(--fa-gray-200) !important;
+    box-shadow: 0 0 4px 0 rgb(0 0 0 / 4%) !important;
   }
 
   .layout-sidebar {
-    border-right: 1px solid var(--art-card-border) !important;
+    border-right: 1px solid var(--fa-card-border) !important;
   }
 
-  .art-card {
-    @include art-card-base(
-      var(--art-gray-200),
+  .fa-card {
+    @include fa-card-base(
+      var(--fa-gray-200),
       (0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.08)),
       4px
     );
   }
 
-  .art-card-sm {
-    @include art-card-base(
-      var(--art-gray-200),
+  .fa-card-sm {
+    @include fa-card-base(
+      var(--fa-gray-200),
       (0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px -1px rgba(0, 0, 0, 0.08)),
       2px
     );
   }
 
-  .art-card-xs {
-    @include art-card-base(
-      var(--art-gray-200),
+  .fa-card-xs {
+    @include fa-card-base(
+      var(--fa-gray-200),
       (0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 1px -1px rgba(0, 0, 0, 0.08)),
       -4px
     );
@@ -162,58 +162,62 @@
 .el-full-screen {
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
-  width: 100vw !important;
-  height: 100% !important;
+  left: 0;
   z-index: 2300;
-  margin-top: 0;
-  padding: 15px;
   box-sizing: border-box;
-  background-color: var(--default-box-color);
   display: flex;
   flex-direction: column;
+  width: 100vw !important;
+  height: 100% !important;
+  padding: 15px;
+  margin-top: 0;
+  background-color: var(--default-box-color);
 }
 
 // 表格卡片：与 FaTableHeader + FaTable 组成纵向 flex，表格区 flex 填满、分页在表格正下方
-.art-table-card {
-  flex: 1;
+.fa-table-card {
   display: flex;
+  flex: 1;
   flex-direction: column;
   min-width: 0;
+  min-height: 0;
   margin-top: 12px;
   border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
 
   .el-card__body {
-    height: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
     overflow: hidden;
 
     /** 工具栏区不参与压缩，表格区 FaTable 使用 flex:1 占满剩余高度 */
-    #art-table-header {
+    #fa-table-header {
       flex-shrink: 0;
     }
   }
 }
 
 // 容器全高：沿布局 flex 链填满 `#app-scroll-main` 内剩余高度，底部自然对齐 #app-content 的 padding（勿再用 100vh 估算）
-.art-full-height {
+.fa-full-height {
   box-sizing: border-box;
   display: flex;
   flex: 1;
   flex-direction: column;
-  min-height: 0;
-  min-width: 0;
   width: 100%;
+  min-width: 0;
+  min-height: 0;
 
-  @media (max-width: 640px) {
+  @media (width <= 640px) {
     flex: 0 1 auto;
-    min-height: 0;
     height: auto;
+    min-height: 0;
   }
 }
 
 // 徽章样式
-.art-badge {
+.fa-badge {
   position: absolute;
   top: 0;
   right: 20px;
@@ -225,33 +229,33 @@
   border-radius: 50%;
   animation: breathe 1.5s ease-in-out infinite;
 
-  &.art-badge-horizontal {
+  &.fa-badge-horizontal {
     right: 0;
   }
 
-  &.art-badge-mixed {
+  &.fa-badge-mixed {
     right: 0;
   }
 
-  &.art-badge-dual {
-    right: 5px;
+  &.fa-badge-dual {
     top: 5px;
+    right: 5px;
     bottom: auto;
   }
 }
 
 // 文字徽章样式
-.art-text-badge {
+.fa-text-badge {
   position: absolute;
   top: 0;
   right: 12px;
   bottom: 0;
   min-width: 20px;
   height: 18px;
-  line-height: 17px;
   padding: 0 5px;
   margin: auto;
   font-size: 10px;
+  line-height: 17px;
   color: #fff;
   text-align: center;
   background: #fd4e4e;
@@ -276,20 +280,17 @@
 }
 
 // 修复老机型 loading 定位问题
-.art-loading-fix {
+.fa-loading-fix {
   position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  width: 100vw !important;
-  height: 100vh !important;
+  inset: 0 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
+  width: 100vw !important;
+  height: 100vh !important;
 }
 
-.art-loading-fix .el-loading-spinner {
+.fa-loading-fix .el-loading-spinner {
   position: static !important;
   top: auto !important;
   left: auto !important;
@@ -297,7 +298,7 @@
 }
 
 // 去除移动端点击背景色
-@media screen and (max-width: 1180px) {
+@media screen and (width <= 1180px) {
   * {
     -webkit-tap-highlight-color: transparent;
   }
diff --git a/frontend/web/src/styles/core/dark.scss b/frontend/web/src/styles/core/dark.scss
index c52abc3f..da955a09 100755
--- a/frontend/web/src/styles/core/dark.scss
+++ b/frontend/web/src/styles/core/dark.scss
@@ -3,7 +3,7 @@
 * 单页面移除深色主题 document.getElementsByTagName("html")[0].removeAttribute('class')
 */
 
-$font-color: rgba(#ffffff, 0.85);
+$font-color: rgba(#fff, 0.85);
 
 /* 覆盖element-plus默认深色背景色 */
 html.dark {
@@ -17,7 +17,7 @@ html.dark {
   // 输入区域背景颜色
   --w-e-textarea-bg-color: #090909;
   // 工具栏文字颜色
-  --w-e-toolbar-color: var(--art-gray-600);
+  --w-e-toolbar-color: var(--fa-gray-600);
   // 选中菜单颜色
   --w-e-toolbar-active-bg-color: #25262b;
   // 弹窗边框颜色
@@ -31,7 +31,7 @@ html.dark {
   // 按钮背景颜色
   --w-e-modal-button-bg-color: #090909;
   // hover toolbar 背景颜色
-  --w-e-toolbar-active-color: var(--art-gray-800);
+  --w-e-toolbar-active-color: var(--fa-gray-800);
 }
 
 .dark {
@@ -44,10 +44,18 @@ html.dark {
     *:not(pre code *) {
       color: inherit !important;
     }
+
+    .w-e-text-container [data-slate-editor] .table-container th:last-of-type {
+      border-right: 1px solid var(--default-border-dashed) !important;
+    }
+
+    .w-e-modal {
+      background-color: var(--fa-color);
+    }
   }
   // 分隔线
   .w-e-bar-divider {
-    background-color: var(--art-gray-300) !important;
+    background-color: var(--fa-gray-300) !important;
   }
 
   .w-e-select-list,
@@ -71,23 +79,13 @@ html.dark {
 
   /* 代码块 */
   .w-e-text-container [data-slate-editor] pre > code {
-    background-color: #25262b !important;
     text-shadow: none !important;
+    background-color: #25262b !important;
   }
 
   /* 引用 */
   .w-e-text-container [data-slate-editor] blockquote {
+    background-color: var(--fa-color);
     border-left: 4px solid var(--default-border-dashed) !important;
-    background-color: var(--art-color);
-  }
-
-  .editor-wrapper {
-    .w-e-text-container [data-slate-editor] .table-container th:last-of-type {
-      border-right: 1px solid var(--default-border-dashed) !important;
-    }
-
-    .w-e-modal {
-      background-color: var(--art-color);
-    }
   }
 }
diff --git a/frontend/web/src/styles/core/el-dark.scss b/frontend/web/src/styles/core/el-dark.scss
index 8f81cdfd..56439dd3 100644
--- a/frontend/web/src/styles/core/el-dark.scss
+++ b/frontend/web/src/styles/core/el-dark.scss
@@ -1,2 +1,2 @@
 // 导入暗黑主题
-@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
diff --git a/frontend/web/src/styles/core/el-light.scss b/frontend/web/src/styles/core/el-light.scss
index ddf2bc54..47f6248f 100644
--- a/frontend/web/src/styles/core/el-light.scss
+++ b/frontend/web/src/styles/core/el-light.scss
@@ -1,34 +1,34 @@
 // https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
 // 自定义Element 亮色主题
 
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+@forward "element-plus/theme-chalk/src/common/var.scss" with (
   $colors: (
-    'white': #ffffff,
-    'black': #000000,
-    'success': (
-      'base': #13deb9
+    "white": #ffffff,
+    "black": #000000,
+    "success": (
+      "base": #13deb9,
     ),
-    'warning': (
-      'base': #ffae1f
+    "warning": (
+      "base": #ffae1f,
     ),
-    'danger': (
-      'base': #ff4d4f
+    "danger": (
+      "base": #ff4d4f,
+    ),
+    "error": (
+      "base": #fa896b,
     ),
-    'error': (
-      'base': #fa896b
-    )
   ),
   $button: (
-    'hover-bg-color': var(--el-color-primary-light-9),
-    'hover-border-color': var(--el-color-primary),
-    'border-color': var(--el-color-primary),
-    'text-color': var(--el-color-primary)
+    "hover-bg-color": var(--el-color-primary-light-9),
+    "hover-border-color": var(--el-color-primary),
+    "border-color": var(--el-color-primary),
+    "text-color": var(--el-color-primary),
   ),
   $messagebox: (
-    'border-radius': '12px'
+    "border-radius": "12px",
   ),
   $popover: (
-    'padding': '14px',
-    'border-radius': '10px'
+    "padding": "14px",
+    "border-radius": "10px",
   )
 );
diff --git a/frontend/web/src/styles/core/el-ui.scss b/frontend/web/src/styles/core/el-ui.scss
index 44429a1f..c992fe24 100644
--- a/frontend/web/src/styles/core/el-ui.scss
+++ b/frontend/web/src/styles/core/el-ui.scss
@@ -9,14 +9,11 @@
   // --el-border-color: #E4E4E7 !important; // DCDFE6
   // 按钮粗度
   --el-font-weight-primary: 400 !important;
-
   --el-component-custom-height: 36px !important;
-
   --el-component-size: var(--el-component-custom-height) !important;
 
   // 边框、按钮圆角...
   --el-border-radius-base: calc(var(--custom-radius) / 3 + 2px) !important;
-
   --el-border-radius-small: calc(var(--custom-radius) / 3 + 4px) !important;
   --el-messagebox-border-radius: calc(var(--custom-radius) / 3 + 4px) !important;
   --el-popover-border-radius: calc(var(--custom-radius) / 3 + 4px) !important;
@@ -34,7 +31,7 @@
 
 // 日期选择器
 .el-date-range-picker {
-  --el-datepicker-inrange-bg-color: var(--art-gray-200) !important;
+  --el-datepicker-inrange-bg-color: var(--fa-gray-200) !important;
 }
 
 // el-card 背景色跟系统背景色保持一致
@@ -44,15 +41,11 @@ html.dark .el-card {
 
 // 修改 el-pagination 大小
 .el-pagination--default {
-  & {
-    --el-pagination-button-width: 32px !important;
-    --el-pagination-button-height: var(--el-pagination-button-width) !important;
-  }
+  --el-pagination-button-width: 32px !important;
+  --el-pagination-button-height: var(--el-pagination-button-width) !important;
 
-  @media (max-width: 1180px) {
-    & {
-      --el-pagination-button-width: 28px !important;
-    }
+  @media (width <= 1180px) {
+    --el-pagination-button-width: 28px !important;
   }
 
   .el-select--default .el-select__wrapper {
@@ -118,9 +111,9 @@ html.dark .el-card {
 }
 
 .el-dialog {
+  overflow: hidden;
   border-radius: 100px !important;
   border-radius: calc(var(--custom-radius) / 1.2 + 2px) !important;
-  overflow: hidden;
 }
 
 .el-dialog__header {
@@ -130,8 +123,8 @@ html.dark .el-card {
 }
 
 .el-dialog__body {
-  padding: 25px 0 !important;
   position: relative; // 为了兼容 el-pagination 样式，需要设置 relative，不然会影响 el-pagination 的样式，比如 el-pagination__jump--small 会被影响，导致 el-pagination__jump--small 按钮无法点击，详见 URL_ADDRESS.com/element-plus/element-plus/issues/5684#issuecomment-1176299275;
+  padding: 25px 0 !important;
 }
 
 .el-dialog.el-dialog-border {
@@ -140,12 +133,12 @@ html.dark .el-card {
     &::before,
     // 下边框
     &::after {
-      content: '';
       position: absolute;
       left: -16px;
       width: calc(100% + 32px);
       height: 1px;
-      background-color: var(--art-gray-300);
+      content: "";
+      background-color: var(--fa-gray-300);
     }
 
     &::before {
@@ -163,9 +156,9 @@ html.dark .el-card {
   background-color: var(--default-box-color) !important;
   border: 0 !important;
   box-shadow:
-    0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
+    0 6px 16px 0 rgb(0 0 0 / 8%),
+    0 3px 6px -4px rgb(0 0 0 / 12%),
+    0 9px 28px 8px rgb(0 0 0 / 5%) !important;
 
   p {
     font-size: 13px;
@@ -175,21 +168,21 @@ html.dark .el-card {
 // 修改 el-dropdown 样式
 .el-dropdown-menu {
   padding: 6px !important;
-  border-radius: 10px !important;
   border: none !important;
+  border-radius: 10px !important;
 
   .el-dropdown-menu__item {
     padding: 6px 16px !important;
     border-radius: 6px !important;
 
     &:hover:not(.is-disabled) {
-      color: var(--art-gray-900) !important;
-      background-color: var(--art-el-active-color) !important;
+      color: var(--fa-gray-900) !important;
+      background-color: var(--fa-el-active-color) !important;
     }
 
     &:focus:not(.is-disabled) {
-      color: var(--art-gray-900) !important;
-      background-color: var(--art-gray-200) !important;
+      color: var(--fa-gray-900) !important;
+      background-color: var(--fa-gray-200) !important;
     }
   }
 }
@@ -209,23 +202,23 @@ html.dark .el-card {
 }
 
 // 处理移动端组件兼容性
-@media screen and (max-width: 640px) {
+@media screen and (width <= 640px) {
   .el-message-box,
   .el-dialog {
     width: calc(100% - 24px) !important;
   }
 
   .el-date-picker.has-sidebar.has-time {
-    width: calc(100% - 24px);
     left: 12px !important;
+    width: calc(100% - 24px);
   }
 
-  .el-picker-panel *[slot='sidebar'],
+  .el-picker-panel *[slot="sidebar"],
   .el-picker-panel__sidebar {
     display: none;
   }
 
-  .el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
+  .el-picker-panel *[slot="sidebar"] + .el-picker-panel__body,
   .el-picker-panel__sidebar + .el-picker-panel__body {
     margin-left: 0;
   }
@@ -234,8 +227,8 @@ html.dark .el-card {
 // 修改el-button样式
 .el-button {
   &.el-button--text {
-    background-color: transparent !important;
     padding: 0 !important;
+    background-color: transparent !important;
 
     span {
       margin-left: 0 !important;
@@ -292,9 +285,9 @@ html.dark .el-card {
     border-radius: 4px !important;
 
     &::before {
-      content: '';
-      height: 4px !important;
       top: 5px !important;
+      height: 4px !important;
+      content: "";
       background-color: #fff !important;
       transform: scale(0.6) !important;
     }
@@ -307,8 +300,8 @@ html.dark .el-card {
         height: 8px;
         margin: auto;
         border: 2px solid var(--el-checkbox-checked-icon-color);
-        border-left: 0;
         border-top: 0;
+        border-left: 0;
         transform: translate(-45%, -60%) rotate(45deg) scale(0.86) !important;
         transform-origin: center;
       }
@@ -331,8 +324,8 @@ html.dark .el-card {
   transition: all 0.3s;
 
   &:hover {
-    background-color: var(--art-hover-color) !important;
-    color: var(--art-gray-900) !important;
+    color: var(--fa-gray-900) !important;
+    background-color: var(--fa-hover-color) !important;
   }
 }
 
@@ -345,8 +338,8 @@ html.dark .el-card {
 }
 
 .el-table__column-filter-trigger i {
-  color: var(--theme-color) !important;
   margin: -3px 0 0 2px;
+  color: var(--theme-color) !important;
 }
 
 // 去除 el-dropdown 鼠标放上去出现的边框
@@ -355,7 +348,7 @@ html.dark .el-card {
 }
 
 // ipad 表单右侧按钮优化
-@media screen and (max-width: 1180px) {
+@media screen and (width <= 1180px) {
   .el-table-fixed-column--right {
     padding-right: 0 !important;
   }
@@ -432,14 +425,14 @@ html.dark .el-card {
       border-radius: 6px !important;
 
       &.is-selected {
-        color: var(--art-gray-900) !important;
-        font-weight: 400 !important;
-        background-color: var(--art-el-active-color) !important;
         margin-bottom: 4px !important;
+        font-weight: 400 !important;
+        color: var(--fa-gray-900) !important;
+        background-color: var(--fa-el-active-color) !important;
       }
 
       &:hover {
-        background-color: var(--art-hover-color) !important;
+        background-color: var(--fa-hover-color) !important;
       }
     }
 
@@ -461,7 +454,7 @@ html.dark .el-card {
         border-radius: 6px !important;
 
         &:hover {
-          background-color: var(--art-gray-200) !important;
+          background-color: var(--fa-gray-200) !important;
         }
       }
     }
@@ -488,26 +481,26 @@ html.dark .el-card {
 
 // 优化树型菜单样式
 .el-tree-node__content {
-  border-radius: 4px;
-  margin-bottom: 4px;
   padding: 1px 0;
+  margin-bottom: 4px;
+  border-radius: 4px;
 
   &:hover {
-    background-color: var(--art-hover-color) !important;
+    background-color: var(--fa-hover-color) !important;
   }
 }
 
 .dark {
   .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-    background-color: var(--art-gray-300) !important;
+    background-color: var(--fa-gray-300) !important;
   }
 }
 
 // 隐藏折叠菜单弹窗 hover 出现的边框
 .menu-left-popper:focus-within,
 .horizontal-menu-popper:focus-within {
-  box-shadow: none !important;
   outline: none !important;
+  box-shadow: none !important;
 }
 
 // 数字输入组件右侧按钮高度跟随自定义组件高度
diff --git a/frontend/web/src/styles/core/md.scss b/frontend/web/src/styles/core/md.scss
index b22fdc25..8296e217 100644
--- a/frontend/web/src/styles/core/md.scss
+++ b/frontend/web/src/styles/core/md.scss
@@ -1,4 +1,5 @@
-/* 文章标题设置（h1-h6）*/
+/* 文章标题设置（h1-h6） */
+
 /* ------------------------------------------------ */
 $font-color: #24292e;
 
@@ -8,16 +9,16 @@ $font-color: #24292e;
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
-  color: var(--art-gray-800) !important;
-  margin: 30px 0 10px 0;
+  margin: 30px 0 10px;
   font-weight: 600;
+  color: var(--fa-gray-800) !important;
 }
 
 .markdown-body h1 {
   font-size: 30px;
 }
 
-@media only screen and (max-width: 550px) {
+@media only screen and (width <= 550px) {
   .markdown-body h1 {
     font-size: 26px;
   }
@@ -32,96 +33,98 @@ $font-color: #24292e;
 }
 
 /* 块引用 */
+
 /* ------------------------------------------------ */
 .markdown-body blockquote {
-  color: rgba(60, 60, 67, 0.7);
-  font-size: 15px !important;
-  border-left: 0.18em solid #e7e7e8;
-  background: #f8f8f8;
   padding: 15px 1em;
+  font-size: 15px !important;
   font-weight: 400 !important;
+  color: rgb(60 60 67 / 70%);
+  background: #f8f8f8;
+  border-left: 0.18em solid #e7e7e8;
 }
 
 /* 详情页文章字体颜色 */
+
 /* ------------------------------------------------ */
 .markdown-body p {
-  line-height: 28px;
   margin-bottom: 10px;
+  line-height: 28px;
 }
 
 .markdown-body li,
 .markdown-body p {
-  color: var(--art-gray-800) !important;
   font-size: 16px !important;
+  color: var(--fa-gray-800) !important;
 }
 
 .dark .markdown-body li span {
-  color: var(--art-gray-800) !important;
+  color: var(--fa-gray-800) !important;
   background-color: transparent !important;
 }
 
 .dark .markdown-body p span {
-  color: var(--art-gray-800) !important;
+  color: var(--fa-gray-800) !important;
   background-color: transparent !important;
 }
 
 .line-numbers-mode {
-  background-color: var(--art-code-bg);
-  border-radius: 8px;
   position: relative;
-  padding-left: 32px;
   box-sizing: border-box;
+  padding-left: 32px;
+  background-color: var(--fa-code-bg);
+  border-radius: 8px;
 }
 
 .line-numbers-mode pre {
   flex: 1;
+  background-color: var(--fa-code-bg);
   border-radius: 0 8px 8px 0;
-  background-color: var(--art-code-bg);
 }
 
 .line-numbers-mode .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
   width: 32px;
   height: 100%;
-  text-align: center;
   padding: 16px 0;
-  box-sizing: border-box;
-  border-right: 1px solid #000000;
-  position: absolute;
-  left: 0;
-  top: 0;
+  text-align: center;
+  border-right: 1px solid #000;
 }
 
 .line-numbers-mode .line-numbers-wrapper span {
-  height: 23.6px;
-  line-height: 23.6px;
-  display: block;
-  color: #72747b;
-  font-size: 13px;
   box-sizing: border-box;
+  display: block;
+  height: 23.6px;
+  font-size: 13px;
+  line-height: 23.6px;
+  color: #72747b;
 }
 
 .line-numbers-mode .copy-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
   display: inline-block;
   display: flex;
-  position: absolute;
-  right: 10px;
-  top: 10px;
+  color: rgb(255 255 255 / 60%);
+  text-align: center;
   cursor: pointer;
-  opacity: 0;
   background-color: #000;
   border-radius: 5px;
-  text-align: center;
-  color: rgba(255, 255, 255, 0.6);
+  opacity: 0;
   transition: opacity 0.3s;
 }
 
 .line-numbers-mode .copy-btn div {
   width: 34px;
   height: 34px;
-  line-height: 34px;
-  cursor: pointer;
-  text-align: center;
   font-size: 20px;
+  line-height: 34px;
+  text-align: center;
+  cursor: pointer;
 }
 
 .line-numbers-mode:hover .copy-btn {
@@ -129,16 +132,16 @@ $font-color: #24292e;
 }
 
 .line-numbers-mode .copy-btn span {
-  height: 34px;
-  line-height: 34px;
-  font-size: 13px;
-  padding-left: 10px;
   display: none;
+  height: 34px;
+  padding-left: 10px;
+  font-size: 13px;
+  line-height: 34px;
 }
 
 .line-numbers-mode .copy-btn .show-copy {
-  opacity: 1;
   display: block;
+  opacity: 1;
 }
 
 .line-numbers-mode ::-webkit-scrollbar-track {
@@ -147,9 +150,9 @@ $font-color: #24292e;
 
 .markdown-body .anchor {
   float: left;
-  line-height: 1;
-  margin-left: -20px;
   padding-right: 4px;
+  margin-left: -20px;
+  line-height: 1;
 }
 
 .markdown-body .anchor:focus {
@@ -162,9 +165,9 @@ $font-color: #24292e;
 .markdown-body h4 .octicon-link,
 .markdown-body h5 .octicon-link,
 .markdown-body h6 .octicon-link {
-  color: #1b1f23;
-  vertical-align: middle;
   visibility: hidden;
+  vertical-align: middle;
+  color: #1b1f23;
 }
 
 .markdown-body h1:hover .anchor,
@@ -185,26 +188,25 @@ $font-color: #24292e;
   visibility: visible;
 }
 
-.markdown-body h1:hover .anchor .octicon-link:before,
-.markdown-body h2:hover .anchor .octicon-link:before,
-.markdown-body h3:hover .anchor .octicon-link:before,
-.markdown-body h4:hover .anchor .octicon-link:before,
-.markdown-body h5:hover .anchor .octicon-link:before,
-.markdown-body h6:hover .anchor .octicon-link:before {
+.markdown-body h1:hover .anchor .octicon-link::before,
+.markdown-body h2:hover .anchor .octicon-link::before,
+.markdown-body h3:hover .anchor .octicon-link::before,
+.markdown-body h4:hover .anchor .octicon-link::before,
+.markdown-body h5:hover .anchor .octicon-link::before,
+.markdown-body h6:hover .anchor .octicon-link::before {
+  display: inline-block;
   width: 16px;
   height: 16px;
-  content: ' ';
-  display: inline-block;
+  content: " ";
 }
 
 .markdown-body {
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  line-height: 1.5;
-  color: $font-color;
   font-size: 16px;
   line-height: 1.5;
+  color: $font-color;
   word-wrap: break-word;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 
 .markdown-body details {
@@ -245,15 +247,15 @@ $font-color: #24292e;
 }
 
 .markdown-body input {
-  font: inherit;
   margin: 0;
+  font: inherit;
 }
 
 .markdown-body input {
   overflow: visible;
 }
 
-.markdown-body [type='checkbox'] {
+.markdown-body [type="checkbox"] {
   box-sizing: border-box;
   padding: 0;
 }
@@ -289,13 +291,13 @@ $font-color: #24292e;
   border-bottom: 1px solid #dfe2e5;
 }
 
-.markdown-body hr:after,
-.markdown-body hr:before {
+.markdown-body hr::after,
+.markdown-body hr::before {
   display: table;
-  content: '';
+  content: "";
 }
 
-.markdown-body hr:after {
+.markdown-body hr::after {
   clear: both;
 }
 
@@ -319,12 +321,12 @@ $font-color: #24292e;
   font:
     11px SFMono-Regular,
     Consolas,
-    Liberation Mono,
+    "Liberation Mono",
     Menlo,
     monospace;
   line-height: 10px;
-  color: #444d56;
   vertical-align: middle;
+  color: #444d56;
   background-color: #fafbfc;
   border: 1px solid #d1d5da;
   border-radius: 3px;
@@ -362,8 +364,8 @@ $font-color: #24292e;
 .markdown-body pre,
 .markdown-body .line-number {
   font-size: 14px !important;
-  border-radius: 8px;
   background-color: #282c34;
+  border-radius: 8px;
 }
 
 .dark {
@@ -540,8 +542,8 @@ $font-color: #24292e;
   background-color: #d73a49;
 }
 
-.markdown-body .pl-c2:before {
-  content: '^M';
+.markdown-body .pl-c2::before {
+  content: "^M";
 }
 
 .markdown-body .pl-sr .pl-cce {
@@ -604,8 +606,8 @@ $font-color: #24292e;
 }
 
 .markdown-body .pl-corl {
-  text-decoration: underline;
   color: #032f62;
+  text-decoration: underline;
 }
 
 .markdown-body .mb-0 {
@@ -692,25 +694,25 @@ $font-color: #24292e;
   font:
     11px SFMono-Regular,
     Consolas,
-    Liberation Mono,
+    "Liberation Mono",
     Menlo,
     monospace;
   line-height: 10px;
-  color: #444d56;
   vertical-align: middle;
+  color: #444d56;
   background-color: #fafbfc;
   border: 1px solid #d1d5da;
   border-radius: 3px;
   box-shadow: inset 0 -1px 0 #d1d5da;
 }
 
-.markdown-body:after,
-.markdown-body:before {
+.markdown-body::after,
+.markdown-body::before {
   display: table;
-  content: '';
+  content: "";
 }
 
-.markdown-body:after {
+.markdown-body::after {
   clear: both;
 }
 
@@ -768,11 +770,11 @@ $font-color: #24292e;
 }
 
 .markdown-body li {
-  line-height: 28px;
+  margin-left: 10px;
   font-size: 14px;
+  line-height: 28px;
   word-wrap: break-all;
   list-style: disc;
-  margin-left: 10px;
 }
 
 .markdown-body li > p {
@@ -826,19 +828,19 @@ $font-color: #24292e;
 }
 
 .markdown-body img {
-  max-width: 100%;
   box-sizing: initial;
+  max-width: 100%;
+  cursor: zoom-in;
   background-color: #fff;
   border: 1px solid #eee;
-  border: 1px solid var(--art-c-border-2);
-  cursor: zoom-in;
+  border: 1px solid var(--fa-c-border-2);
 }
 
-.markdown-body img[align='right'] {
+.markdown-body img[align="right"] {
   padding-left: 20px;
 }
 
-.markdown-body img[align='left'] {
+.markdown-body img[align="left"] {
   padding-right: 20px;
 }
 
@@ -846,7 +848,7 @@ $font-color: #24292e;
   padding: 0.2em 0.4em;
   margin: 0;
   font-size: 85%;
-  background-color: rgba(27, 31, 35, 0.05);
+  background-color: rgb(27 31 35 / 5%);
   border-radius: 3px;
 }
 
@@ -905,8 +907,7 @@ $font-color: #24292e;
 }
 
 .markdown-body .blob-wrapper {
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
 }
 
 .markdown-body .blob-wrapper-embedded {
@@ -921,10 +922,10 @@ $font-color: #24292e;
   padding-left: 10px;
   font-size: 12px;
   line-height: 20px;
-  color: rgba(27, 31, 35, 0.3);
+  vertical-align: top;
+  color: rgb(27 31 35 / 30%);
   text-align: right;
   white-space: nowrap;
-  vertical-align: top;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -933,10 +934,10 @@ $font-color: #24292e;
 }
 
 .markdown-body .blob-num:hover {
-  color: rgba(27, 31, 35, 0.6);
+  color: rgb(27 31 35 / 60%);
 }
 
-.markdown-body .blob-num:before {
+.markdown-body .blob-num::before {
   content: attr(data-line-number);
 }
 
@@ -962,62 +963,62 @@ $font-color: #24292e;
   background: #ffea7f;
 }
 
-.markdown-body .tab-size[data-tab-size='1'] {
+.markdown-body .tab-size[data-tab-size="1"] {
   -moz-tab-size: 1;
   tab-size: 1;
 }
 
-.markdown-body .tab-size[data-tab-size='2'] {
+.markdown-body .tab-size[data-tab-size="2"] {
   -moz-tab-size: 2;
   tab-size: 2;
 }
 
-.markdown-body .tab-size[data-tab-size='3'] {
+.markdown-body .tab-size[data-tab-size="3"] {
   -moz-tab-size: 3;
   tab-size: 3;
 }
 
-.markdown-body .tab-size[data-tab-size='4'] {
+.markdown-body .tab-size[data-tab-size="4"] {
   -moz-tab-size: 4;
   tab-size: 4;
 }
 
-.markdown-body .tab-size[data-tab-size='5'] {
+.markdown-body .tab-size[data-tab-size="5"] {
   -moz-tab-size: 5;
   tab-size: 5;
 }
 
-.markdown-body .tab-size[data-tab-size='6'] {
+.markdown-body .tab-size[data-tab-size="6"] {
   -moz-tab-size: 6;
   tab-size: 6;
 }
 
-.markdown-body .tab-size[data-tab-size='7'] {
+.markdown-body .tab-size[data-tab-size="7"] {
   -moz-tab-size: 7;
   tab-size: 7;
 }
 
-.markdown-body .tab-size[data-tab-size='8'] {
+.markdown-body .tab-size[data-tab-size="8"] {
   -moz-tab-size: 8;
   tab-size: 8;
 }
 
-.markdown-body .tab-size[data-tab-size='9'] {
+.markdown-body .tab-size[data-tab-size="9"] {
   -moz-tab-size: 9;
   tab-size: 9;
 }
 
-.markdown-body .tab-size[data-tab-size='10'] {
+.markdown-body .tab-size[data-tab-size="10"] {
   -moz-tab-size: 10;
   tab-size: 10;
 }
 
-.markdown-body .tab-size[data-tab-size='11'] {
+.markdown-body .tab-size[data-tab-size="11"] {
   -moz-tab-size: 11;
   tab-size: 11;
 }
 
-.markdown-body .tab-size[data-tab-size='12'] {
+.markdown-body .tab-size[data-tab-size="12"] {
   -moz-tab-size: 12;
   tab-size: 12;
 }
diff --git a/frontend/web/src/styles/core/mixin.scss b/frontend/web/src/styles/core/mixin.scss
index db36888a..ad01e9b5 100755
--- a/frontend/web/src/styles/core/mixin.scss
+++ b/frontend/web/src/styles/core/mixin.scss
@@ -5,15 +5,15 @@
 * @param {Number} 行数
 */
 @mixin ellipsis($rowCount: 1) {
-  @if $rowCount <=1 {
+  @if $rowCount <= 1 {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   } @else {
+    display: -webkit-box;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: -webkit-box;
     -webkit-line-clamp: $rowCount;
     -webkit-box-orient: vertical;
   }
@@ -24,19 +24,16 @@
 * @param {String} 类型
 */
 @mixin userSelect($value: none) {
-  user-select: $value;
   -moz-user-select: $value;
   -ms-user-select: $value;
   -webkit-user-select: $value;
+  user-select: $value;
 }
 
 // 绝对定位居中
 @mixin absoluteCenter() {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
   margin: auto;
 }
 
@@ -46,10 +43,10 @@
 */
 @mixin animation(
   $from: (
-    width: 0px
+    width: 0,
   ),
   $to: (
-    width: 100px
+    width: 100px,
   ),
   $name: mymove,
   $animate: mymove 2s 1 linear infinite
@@ -58,6 +55,7 @@
   -o-animation: $animate;
   animation: $animate;
 
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid */
   @keyframes #{$name} {
     from {
       @each $key, $value in $from {
@@ -71,46 +69,34 @@
       }
     }
   }
-
-  @-webkit-keyframes #{$name} {
-    from {
-      @each $key, $value in $from {
-        $key: $value;
-      }
-    }
-
-    to {
-      @each $key, $value in $to {
-        $key: $value;
-      }
-    }
-  }
 }
 
 // 圆形盒子
 @mixin circle($size: 11px, $bg: #fff) {
-  border-radius: 50%;
   width: $size;
   height: $size;
   line-height: $size;
   text-align: center;
   background: $bg;
+  border-radius: 50%;
 }
 
 // placeholder
 @mixin placeholder($color: #bbb) {
   // Firefox
-  &::-moz-placeholder {
+  &::placeholder {
     color: $color;
     opacity: 1;
   }
 
-  // Internet Explorer 10+
+  // Internet Explorer 10–11
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &:-ms-input-placeholder {
     color: $color;
   }
 
-  // Safari and Chrome
+  // Safari and Chrome (legacy)
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &::-webkit-input-placeholder {
     color: $color;
   }
@@ -124,17 +110,18 @@
 @mixin betterTransparentize($color, $alpha) {
   $c: rgba($color, $alpha);
   $ie_c: ie_hex_str($c);
+
+  zoom: 1;
   background: rgba($color, 1);
   background: $c;
   background: transparent \9;
-  zoom: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})";
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c});
-  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})';
 }
 
 //添加浏览器前缀
 @mixin browserPrefix($propertyName, $value) {
-  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
     #{$prefix}#{$propertyName}: $value;
   }
 }
@@ -147,6 +134,7 @@
 // 背景滤镜
 @mixin backdropBlur() {
   --tw-backdrop-blur: blur(30px);
+
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
     var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
     var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
diff --git a/frontend/web/src/styles/core/reset.scss b/frontend/web/src/styles/core/reset.scss
index 17a3bcf9..0f71b6a0 100755
--- a/frontend/web/src/styles/core/reset.scss
+++ b/frontend/web/src/styles/core/reset.scss
@@ -1,33 +1,34 @@
 @charset "UTF-8";
 
-/*滚动条*/
-/*滚动条整体部分,必须要设置*/
+/* 滚动条 */
+
+/* 滚动条整体部分,必须要设置 */
 ::-webkit-scrollbar {
   width: 8px !important;
   height: 0 !important;
 }
 
-/*滚动条的轨道*/
+/* 滚动条的轨道 */
 ::-webkit-scrollbar-track {
-  background-color: var(--art-gray-200);
+  background-color: var(--fa-gray-200);
 }
 
-/*滚动条的滑块按钮*/
+/* 滚动条的滑块按钮 */
 ::-webkit-scrollbar-thumb {
+  background-color: #ccc !important;
   border-radius: 5px;
-  background-color: #cccccc !important;
-  transition: all 0.2s;
   -webkit-transition: all 0.2s;
+  transition: all 0.2s;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: #b0abab !important;
 }
 
-/*滚动条的上下两端的按钮*/
+/* 滚动条的上下两端的按钮 */
 ::-webkit-scrollbar-button {
-  height: 0px;
   width: 0;
+  height: 0;
 }
 
 .dark {
@@ -36,6 +37,6 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: var(--art-gray-300) !important;
+    background-color: var(--fa-gray-300) !important;
   }
 }
diff --git a/frontend/web/src/styles/core/router-transition.scss b/frontend/web/src/styles/core/router-transition.scss
index f47c7411..adcfbe78 100644
--- a/frontend/web/src/styles/core/router-transition.scss
+++ b/frontend/web/src/styles/core/router-transition.scss
@@ -1,4 +1,4 @@
-@use 'sass:map';
+@use "sass:map";
 
 // === 变量区域 ===
 $transition: (
@@ -18,10 +18,10 @@ $transition: (
 }
 
 // 变量简写
-$duration: transition-config('duration');
-$distance: transition-config('distance');
-$easing: transition-config('easing');
-$fade-easing: transition-config('fade-easing');
+$duration: transition-config("duration");
+$distance: transition-config("distance");
+$easing: transition-config("easing");
+$fade-easing: transition-config("fade-easing");
 
 // === 动画类 ===
 
@@ -49,13 +49,13 @@ $fade-easing: transition-config('fade-easing');
   $distance-x: 0;
   $distance-y: 0;
 
-  @if $direction == 'left' {
+  @if $direction == "left" {
     $distance-x: -$distance;
-  } @else if $direction == 'right' {
+  } @else if $direction == "right" {
     $distance-x: $distance;
-  } @else if $direction == 'top' {
+  } @else if $direction == "top" {
     $distance-y: -$distance;
-  } @else if $direction == 'bottom' {
+  } @else if $direction == "bottom" {
     $distance-y: $distance;
   }
 
@@ -91,14 +91,17 @@ $fade-easing: transition-config('fade-easing');
 
 // 滑动动画方向类
 .slide-left {
-  @include slide-transition('left');
+  @include slide-transition("left");
 }
+
 .slide-right {
-  @include slide-transition('right');
+  @include slide-transition("right");
 }
+
 .slide-top {
-  @include slide-transition('top');
+  @include slide-transition("top");
 }
+
 .slide-bottom {
-  @include slide-transition('bottom');
+  @include slide-transition("bottom");
 }
diff --git a/frontend/web/src/styles/core/tailwind.css b/frontend/web/src/styles/core/tailwind.css
index 1a9e22cb..01dfcccc 100644
--- a/frontend/web/src/styles/core/tailwind.css
+++ b/frontend/web/src/styles/core/tailwind.css
@@ -1,72 +1,71 @@
-@import 'tailwindcss';
+@import "tailwindcss";
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 /* ==================== Light Mode Variables ==================== */
 :root {
   /* Base Colors */
-  --art-color: #ffffff;
+  --fa-color: #fff;
   --theme-color: var(--main-color);
 
   /* Theme Colors - OKLCH Format */
-  --art-primary: oklch(0.7 0.23 260);
-  --art-secondary: oklch(0.72 0.19 231.6);
-  --art-error: oklch(0.73 0.15 25.3);
-  --art-info: oklch(0.58 0.03 254.1);
-  --art-success: oklch(0.78 0.17 166.1);
-  --art-warning: oklch(0.78 0.14 75.5);
-  --art-danger: oklch(0.68 0.22 25.3);
+  --fa-primary: oklch(70% 0.23 260deg);
+  --fa-secondary: oklch(72% 0.19 231.6deg);
+  --fa-error: oklch(73% 0.15 25.3deg);
+  --fa-info: oklch(58% 0.03 254.1deg);
+  --fa-success: oklch(78% 0.17 166.1deg);
+  --fa-warning: oklch(78% 0.14 75.5deg);
+  --fa-danger: oklch(68% 0.22 25.3deg);
 
   /* Gray Scale - Light Mode */
-  --art-gray-100: #f9fafb;
-  --art-gray-200: #f2f4f5;
-  --art-gray-300: #e6eaeb;
-  --art-gray-400: #dbdfe1;
-  --art-gray-500: #949eb7;
-  --art-gray-600: #7987a1;
-  --art-gray-700: #4d5875;
-  --art-gray-800: #383853;
-  --art-gray-900: #323251;
+  --fa-gray-100: #f9fafb;
+  --fa-gray-200: #f2f4f5;
+  --fa-gray-300: #e6eaeb;
+  --fa-gray-400: #dbdfe1;
+  --fa-gray-500: #949eb7;
+  --fa-gray-600: #7987a1;
+  --fa-gray-700: #4d5875;
+  --fa-gray-800: #383853;
+  --fa-gray-900: #323251;
 
   /* Border Colors */
-  --art-card-border: rgba(0, 0, 0, 0.08);
-
+  --fa-card-border: rgb(0 0 0 / 8%);
   --default-border: #e2e8ee;
   --default-border-dashed: #dbdfe9;
 
   /* Background Colors */
   --default-bg-color: #fafbfc;
-  --default-box-color: #ffffff;
+  --default-box-color: #fff;
 
   /* Hover Color */
-  --art-hover-color: #edeff0;
+  --fa-hover-color: #edeff0;
 
   /* Active Color */
-  --art-active-color: #f2f4f5;
+  --fa-active-color: #f2f4f5;
 
   /* Element Component Active Color */
-  --art-el-active-color: #f2f4f5;
+  --fa-el-active-color: #f2f4f5;
 }
 
 /* ==================== Dark Mode Variables ==================== */
 .dark {
   /* Base Colors */
-  --art-color: #000000;
+  --fa-color: #000;
 
   /* Gray Scale - Dark Mode */
-  --art-gray-100: #110f0f;
-  --art-gray-200: #17171c;
-  --art-gray-300: #393946;
-  --art-gray-400: #505062;
-  --art-gray-500: #73738c;
-  --art-gray-600: #8f8fa3;
-  --art-gray-700: #ababba;
-  --art-gray-800: #c7c7d1;
-  --art-gray-900: #e3e3e8;
+  --fa-gray-100: #110f0f;
+  --fa-gray-200: #17171c;
+  --fa-gray-300: #393946;
+  --fa-gray-400: #505062;
+  --fa-gray-500: #73738c;
+  --fa-gray-600: #8f8fa3;
+  --fa-gray-700: #ababba;
+  --fa-gray-800: #c7c7d1;
+  --fa-gray-900: #e3e3e8;
 
   /* Border Colors */
-  --art-card-border: rgba(255, 255, 255, 0.08);
-
-  --default-border: rgba(255, 255, 255, 0.1);
+  --fa-card-border: rgb(255 255 255 / 8%);
+  --default-border: rgb(255 255 255 / 10%);
   --default-border-dashed: #363843;
 
   /* Background Colors */
@@ -74,13 +73,13 @@
   --default-box-color: #161618;
 
   /* Hover Color */
-  --art-hover-color: #252530;
+  --fa-hover-color: #252530;
 
   /* Active Color */
-  --art-active-color: #202226;
+  --fa-active-color: #202226;
 
   /* Element Component Active Color */
-  --art-el-active-color: #2e2e38;
+  --fa-el-active-color: #2e2e38;
 }
 
 /* ==================== Tailwind Theme Configuration ==================== */
@@ -92,33 +91,33 @@
   --color-theme: var(--theme-color);
 
   /* Hover Color */
-  --color-hover-color: var(--art-hover-color);
+  --color-hover-color: var(--fa-hover-color);
 
   /* Active Color */
-  --color-active-color: var(--art-active-color);
+  --color-active-color: var(--fa-active-color);
 
   /* Active Color */
-  --color-el-active-color: var(--art-active-color);
+  --color-el-active-color: var(--fa-active-color);
 
   /* ElementPlus Theme Colors */
-  --color-primary: var(--art-primary);
-  --color-secondary: var(--art-secondary);
-  --color-error: var(--art-error);
-  --color-info: var(--art-info);
-  --color-success: var(--art-success);
-  --color-warning: var(--art-warning);
-  --color-danger: var(--art-danger);
+  --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(--art-gray-100);
-  --color-g-200: var(--art-gray-200);
-  --color-g-300: var(--art-gray-300);
-  --color-g-400: var(--art-gray-400);
-  --color-g-500: var(--art-gray-500);
-  --color-g-600: var(--art-gray-600);
-  --color-g-700: var(--art-gray-700);
-  --color-g-800: var(--art-gray-800);
-  --color-g-900: var(--art-gray-900);
+  --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 ==================== */
@@ -187,8 +186,8 @@
 
 /* ==================== Custom Component Classes ==================== */
 @layer components {
-  /* Art Card Header Component */
-  .art-card-header {
+  /* Fa Card Header Component */
+  .fa-card-header {
     @apply flex justify-between pr-6 pb-1;
 
     .title {
diff --git a/frontend/web/src/styles/core/theme-animation.scss b/frontend/web/src/styles/core/theme-animation.scss
index 377b9455..47524bf2 100644
--- a/frontend/web/src/styles/core/theme-animation.scss
+++ b/frontend/web/src/styles/core/theme-animation.scss
@@ -6,10 +6,6 @@ $bg-animation-duration: 0.5s;
 html {
   --bg-animation-color: $bg-animation-color-light;
 
-  &.dark {
-    --bg-animation-color: $bg-animation-color-dark;
-  }
-
   // View transition styles
   &::view-transition-old(*) {
     animation: none;
@@ -28,6 +24,8 @@ html {
   }
 
   &.dark {
+    --bg-animation-color: $bg-animation-color-dark;
+
     &::view-transition-old(*) {
       animation: clip $bg-animation-duration ease-in reverse both;
     }
diff --git a/frontend/web/src/styles/custom/one-dark-pro.scss b/frontend/web/src/styles/custom/one-dark-pro.scss
index 36bdf63a..73f29aa5 100644
--- a/frontend/web/src/styles/custom/one-dark-pro.scss
+++ b/frontend/web/src/styles/custom/one-dark-pro.scss
@@ -1,8 +1,7 @@
 .hljs {
   display: block;
-  overflow-x: auto;
   padding: 0.5em;
-
+  overflow-x: auto;
   color: #a6accd;
 }
 
diff --git a/frontend/web/src/styles/index.scss b/frontend/web/src/styles/index.scss
index cdc2ddc7..1dac69b3 100644
--- a/frontend/web/src/styles/index.scss
+++ b/frontend/web/src/styles/index.scss
@@ -1,23 +1,23 @@
 // 重置默认样式
-@use './core/reset.scss';
+@use "./core/reset";
 
 // 应用全局样式
-@use './core/app.scss';
+@use "./core/app";
 
 // Element Plus 样式优化
-@use './core/el-ui.scss';
+@use "./core/el-ui";
 
 // Element Plus 暗黑主题
-@use './core/el-dark.scss';
+@use "./core/el-dark";
 
 // 暗黑主题样式优化
-@use './core/dark.scss';
+@use "./core/dark";
 
 // 路由切换动画
-@use './core/router-transition';
+@use "./core/router-transition";
 
 // 主题切换过渡优化
-@use './core/theme-change.scss';
+@use "./core/theme-change";
 
 // 主题切换圆形扩散动画
-@use './core/theme-animation.scss';
+@use "./core/theme-animation";
diff --git a/frontend/web/src/types/global.d.ts b/frontend/web/src/types/global.d.ts
index 6c62f981..c2f37f45 100644
--- a/frontend/web/src/types/global.d.ts
+++ b/frontend/web/src/types/global.d.ts
@@ -1,26 +1,4 @@
 declare global {
-  /**
-   * 页签对象
-   */
-  interface TagView {
-    /** 页签名称 */
-    name: string;
-    /** 页签标题 */
-    title: string;
-    /** 页签路由路径 */
-    path: string;
-    /** 页签路由完整路径 */
-    fullPath: string;
-    /** 页签图标 */
-    icon?: string;
-    /** 是否固定页签 */
-    affix?: boolean;
-    /** 是否开启缓存 */
-    keepAlive?: boolean;
-    /** 路由查询参数 */
-    query?: any;
-  }
-
   /**
    * 系统设置
    */
@@ -133,7 +111,8 @@ declare global {
   }
 
   /**
-   * 分页响应对象
+   * 分页响应对象（列表接口 `data` 统一为该结构）
+   * 前端 `useTable` 仅通过 `@utils/table` 的 `defaultResponseAdapter` 解析该形状（及 ApiResponse 包装）
    */
   interface PageResult<T = any> {
     items: T[];
diff --git a/frontend/web/src/types/router/index.ts b/frontend/web/src/types/router/index.ts
index 2be83fd9..5f0882e8 100644
--- a/frontend/web/src/types/router/index.ts
+++ b/frontend/web/src/types/router/index.ts
@@ -67,6 +67,12 @@ declare module "vue-router" {
      */
     keepAlive?: boolean;
 
+    /**
+     * 为 true 时 KeepAlive 子组件 `:key` 使用 `fullPath`（query/hash 变化会整页重挂载）。
+     * 默认用 `name + params`，减轻 query 微调导致的重复 onMounted / useTable immediate。
+     */
+    remountOnFullPath?: boolean;
+
     /**
      * 静态壳层路由（路由已在 router 注册，菜单项仅用于跳转，无 component 字段）
      */
@@ -125,6 +131,8 @@ export interface RouteMeta extends Record<string | number | symbol, unknown> {
   parentPath?: string;
   /** 静态壳层菜单（侧边栏可点，组件由静态路由提供） */
   shellRoute?: boolean;
+  /** @see RouteMeta（vue-router 模块扩展） */
+  remountOnFullPath?: boolean;
 }
 
 /**
diff --git a/frontend/web/src/utils/common/index.ts b/frontend/web/src/utils/common/index.ts
index 00d66cfb..a361d6e9 100644
--- a/frontend/web/src/utils/common/index.ts
+++ b/frontend/web/src/utils/common/index.ts
@@ -549,7 +549,7 @@ export interface QuickLink {
  */
 class QuickStartManager {
   /** 本地存储键名 */
-  private storageKey = "quick-stfa-links";
+  private storageKey = "quick-start-links";
 
   /** 监听器列表 */
   private listeners: Array<(links: QuickLink[]) => void> = [];
diff --git a/frontend/web/src/utils/http/client.ts b/frontend/web/src/utils/http/client.ts
deleted file mode 100644
index ffc3ec98..00000000
--- a/frontend/web/src/utils/http/client.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * Axios 实例与请求 / 响应拦截器
- */
-
-import axios, {
-  type AxiosInstance,
-  type AxiosResponse,
-  type AxiosError,
-  type InternalAxiosRequestConfig,
-} from "axios";
-import { ElMessage } from "element-plus";
-import { Auth, redirectToLogin } from "@utils/auth";
-import { ResultEnum } from "@/enums/api/result.enum";
-import { $t } from "@/locales";
-import { defaultConfig, NO_AUTH_FLAG } from "./config";
-import { ApiStatus, HttpError } from "./error";
-
-const handleRequest = (config: InternalAxiosRequestConfig) => {
-  const accessToken = Auth.getAccessToken();
-  const auth = config.headers.Authorization;
-
-  if (auth === NO_AUTH_FLAG) {
-    delete config.headers.Authorization;
-    return config;
-  }
-
-  if (!auth && accessToken) {
-    config.headers.Authorization = `Bearer ${accessToken}`;
-  }
-
-  return config;
-};
-
-const handleRequestError = (error: unknown) => {
-  const msg = error instanceof Error ? error.message : String(error);
-  ElMessage.error(msg);
-  return Promise.reject(error);
-};
-
-const handleResponse = (response: AxiosResponse<ApiResponse>) => {
-  if (response.config.responseType === "blob") {
-    return response;
-  }
-
-  const data = response.data;
-  if (data.code !== ResultEnum.SUCCESS) {
-    ElMessage.error(data.msg);
-    return Promise.reject(response);
-  }
-
-  if (
-    response.config.method?.toUpperCase() !== "GET" &&
-    !response.config.url?.includes("login") &&
-    !response.config.url?.includes("logout")
-  ) {
-    ElMessage.success(data.msg);
-  }
-
-  return response;
-};
-
-const handleResponseError = async (error: AxiosError<ApiResponse>) => {
-  if (!error.response) {
-    let errorMessage = $t("httpMsg.networkError");
-    if (error.message?.includes("ECONNREFUSED")) {
-      errorMessage = "服务器连接失败，请检查后端服务是否正常运行";
-    } else if (error.message?.includes("timeout")) {
-      errorMessage = "请求超时，请稍后重试";
-    } else if (error.message?.includes("Network Error")) {
-      errorMessage = "网络连接错误，请检查您的网络设置";
-    }
-    console.error("网络请求失败:", error);
-    ElMessage.error(errorMessage);
-    return Promise.reject(new Error(errorMessage));
-  }
-
-  const data = error.response?.data;
-
-  if (error.response?.config.responseType === "blob" && error.response.data instanceof Blob) {
-    try {
-      const text = await new Response(error.response.data).text();
-      const jsonData: ApiResponse = JSON.parse(text);
-
-      if (jsonData.code === ResultEnum.ERROR) {
-        ElMessage.error(jsonData.msg || "请求错误");
-        return Promise.reject(new Error(jsonData.msg || "请求错误"));
-      }
-      if (jsonData.code === ResultEnum.EXCEPTION) {
-        ElMessage.error(jsonData.msg || "服务异常");
-        return Promise.reject(new Error(jsonData.msg || "服务异常"));
-      }
-    } catch (e) {
-      console.error("请求异常:", e);
-      ElMessage.error("数据解析失败");
-      return Promise.reject(new Error("数据解析失败"));
-    }
-  }
-
-  const status = error.response.status;
-
-  const hasApiCode =
-    data !== undefined &&
-    data !== null &&
-    typeof data === "object" &&
-    "code" in data &&
-    typeof (data as ApiResponse).code === "number";
-
-  if (status === 401 && !hasApiCode) {
-    await redirectToLogin("登录已失效，请重新登录");
-    return Promise.reject(new HttpError("Unauthorized", ApiStatus.unauthorized));
-  }
-
-  if (data?.code === ResultEnum.TOKEN_EXPIRED) {
-    await redirectToLogin("登录已过期，请重新登录");
-    const msg = data.msg || "登录已过期，请重新登录";
-    return Promise.reject(new HttpError(msg, ApiStatus.unauthorized));
-  }
-  if (data?.code === ResultEnum.ERROR) {
-    ElMessage.error(data.msg || "请求错误");
-    return Promise.reject(new Error(data.msg || "请求错误"));
-  }
-  if (data?.code === ResultEnum.UNAUTHORIZED) {
-    ElMessage.error(data.msg || "暂无权限");
-    return Promise.reject(new Error(data.msg || "请求错误"));
-  }
-  if (data?.code === ResultEnum.EXCEPTION) {
-    ElMessage.error(data.msg || "服务异常");
-    return Promise.reject(new Error(data.msg || "服务异常"));
-  }
-
-  ElMessage.error("请求处理失败，请稍后重试");
-  return Promise.reject(new Error("请求处理失败"));
-};
-
-const httpRequest: AxiosInstance = axios.create(defaultConfig);
-
-httpRequest.interceptors.request.use(handleRequest, handleRequestError);
-httpRequest.interceptors.response.use(handleResponse, handleResponseError);
-
-export default httpRequest;
diff --git a/frontend/web/src/utils/http/config.ts b/frontend/web/src/utils/http/config.ts
deleted file mode 100644
index dbf89828..00000000
--- a/frontend/web/src/utils/http/config.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Axios 默认配置与请求相关类型
- */
-
-import type { AxiosRequestConfig } from "axios";
-import * as qs from "qs";
-
-export const defaultConfig: AxiosRequestConfig = {
-  baseURL: import.meta.env.VITE_APP_BASE_API,
-  timeout: Number(import.meta.env.VITE_TIMEOUT) || 15000,
-  headers: { "Content-Type": "application/json;charset=utf-8" },
-  paramsSerializer: (params) => qs.stringify(params, { indices: false }),
-};
-
-/** 跳过鉴权：与单接口 `headers.Authorization` 约定一致 */
-export const NO_AUTH_FLAG = "no-auth";
-
-export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS";
-
-export interface ExtendedRequestConfig extends AxiosRequestConfig {
-  skipAuth?: boolean;
-  showSuccessMessage?: boolean;
-  showErrorMessage?: boolean;
-}
diff --git a/frontend/web/src/utils/http/error.ts b/frontend/web/src/utils/http/error.ts
deleted file mode 100644
index 6510031c..00000000
--- a/frontend/web/src/utils/http/error.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * HTTP 语义状态码、HttpError 与错误辅助函数
- */
-
-import type { AxiosError } from "axios";
-import { $t } from "@/locales";
-
-export enum ApiStatus {
-  success = 200,
-  error = 400,
-  unauthorized = 401,
-  forbidden = 403,
-  notFound = 404,
-  methodNotAllowed = 405,
-  requestTimeout = 408,
-  internalServerError = 500,
-  notImplemented = 501,
-  badGateway = 502,
-  serviceUnavailable = 503,
-  gatewayTimeout = 504,
-  httpVersionNotSupported = 505,
-}
-
-export interface ErrorLogData {
-  code: number;
-  message: string;
-  data?: unknown;
-  timestamp: string;
-  url?: string;
-  method?: string;
-  stack?: string;
-}
-
-export class HttpError extends Error {
-  public readonly code: number;
-  public readonly data?: unknown;
-  public readonly timestamp: string;
-  public readonly url?: string;
-  public readonly method?: string;
-
-  constructor(
-    message: string,
-    code: number,
-    options?: {
-      data?: unknown;
-      url?: string;
-      method?: string;
-    }
-  ) {
-    super(message);
-    this.name = "HttpError";
-    this.code = code;
-    this.data = options?.data;
-    this.timestamp = new Date().toISOString();
-    this.url = options?.url;
-    this.method = options?.method;
-  }
-
-  public toLogData(): ErrorLogData {
-    return {
-      code: this.code,
-      message: this.message,
-      data: this.data,
-      timestamp: this.timestamp,
-      url: this.url,
-      method: this.method,
-      stack: this.stack,
-    };
-  }
-}
-
-const getErrorMessage = (status: number): string => {
-  const errorMap: Record<number, string> = {
-    [ApiStatus.unauthorized]: "httpMsg.unauthorized",
-    [ApiStatus.forbidden]: "httpMsg.forbidden",
-    [ApiStatus.notFound]: "httpMsg.notFound",
-    [ApiStatus.methodNotAllowed]: "httpMsg.methodNotAllowed",
-    [ApiStatus.requestTimeout]: "httpMsg.requestTimeout",
-    [ApiStatus.internalServerError]: "httpMsg.internalServerError",
-    [ApiStatus.badGateway]: "httpMsg.badGateway",
-    [ApiStatus.serviceUnavailable]: "httpMsg.serviceUnavailable",
-    [ApiStatus.gatewayTimeout]: "httpMsg.gatewayTimeout",
-  };
-
-  return $t(errorMap[status] || "httpMsg.internalServerError");
-};
-
-export function handleError(error: AxiosError<ApiResponse>): never {
-  if (error.code === "ERR_CANCELED") {
-    console.warn("Request cancelled:", error.message);
-    throw new HttpError($t("httpMsg.requestCancelled"), ApiStatus.error);
-  }
-
-  const statusCode = error.response?.status;
-  const errorMessage = error.response?.data?.msg || error.message;
-  const requestConfig = error.config;
-
-  if (!error.response) {
-    throw new HttpError($t("httpMsg.networkError"), ApiStatus.error, {
-      url: requestConfig?.url,
-      method: requestConfig?.method?.toUpperCase(),
-    });
-  }
-
-  const message = statusCode
-    ? getErrorMessage(statusCode)
-    : errorMessage || $t("httpMsg.requestFailed");
-  throw new HttpError(message, statusCode || ApiStatus.error, {
-    data: error.response.data,
-    url: requestConfig?.url,
-    method: requestConfig?.method?.toUpperCase(),
-  });
-}
-
-export function showError(error: HttpError, showMessage: boolean = true): void {
-  import("element-plus").then(({ ElMessage: EM }) => {
-    if (showMessage) {
-      EM.error(error.message);
-    }
-  });
-  console.error("[HTTP Error]", error.toLogData());
-}
-
-export function showSuccess(message: string, showMessage: boolean = true): void {
-  import("element-plus").then(({ ElMessage: EM }) => {
-    if (showMessage) {
-      EM.success(message);
-    }
-  });
-}
-
-export const isHttpError = (error: unknown): error is HttpError => {
-  return error instanceof HttpError;
-};
diff --git a/frontend/web/src/utils/http/index.ts b/frontend/web/src/utils/http/index.ts
index 2e379055..119d06b3 100644
--- a/frontend/web/src/utils/http/index.ts
+++ b/frontend/web/src/utils/http/index.ts
@@ -1,10 +1,285 @@
 /**
- * HTTP 客户端（配置 / 错误类型 / Axios 实例）
- *
- * @module utils/http
+ * HTTP：Axios 实例、约定常量、错误类型与拦截器（单文件聚合）
  */
 
-export * from "./config";
-export * from "./error";
-export { default } from "./client";
+import axios, {
+  type AxiosError,
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+  type InternalAxiosRequestConfig,
+} from "axios";
+import qs from "qs";
+import { ElMessage } from "element-plus";
+import { ResultEnum } from "@/enums/api/result.enum";
+import { Auth } from "@/utils/auth";
+import { redirectToLogin } from "@/utils/auth";
+import { $t } from "@/locales";
+
+// --- 配置常量 -----------------------------------------------------------------
+
+/** 跳过鉴权：与单接口 `headers.Authorization` 约定一致 */
+export const NO_AUTH_FLAG = "no-auth";
+
+export interface ExtendedRequestConfig extends AxiosRequestConfig {
+  skipAuth?: boolean;
+  showSuccessMessage?: boolean;
+  showErrorMessage?: boolean;
+}
+
+// --- 语义状态码与 HttpError ----------------------------------------------------
+
+export enum ApiStatus {
+  success = 200,
+  error = 400,
+  unauthorized = 401,
+  forbidden = 403,
+  notFound = 404,
+  methodNotAllowed = 405,
+  requestTimeout = 408,
+  internalServerError = 500,
+  notImplemented = 501,
+  badGateway = 502,
+  serviceUnavailable = 503,
+  gatewayTimeout = 504,
+  httpVersionNotSupported = 505,
+}
+
+export interface ErrorLogData {
+  code: number;
+  message: string;
+  data?: unknown;
+  timestamp: string;
+  url?: string;
+  method?: string;
+  stack?: string;
+}
+
+export class HttpError extends Error {
+  public readonly code: number;
+  public readonly data?: unknown;
+  public readonly timestamp: string;
+  public readonly url?: string;
+  public readonly method?: string;
+
+  constructor(
+    message: string,
+    code: number,
+    options?: {
+      data?: unknown;
+      url?: string;
+      method?: string;
+    }
+  ) {
+    super(message);
+    this.name = "HttpError";
+    this.code = code;
+    this.data = options?.data;
+    this.timestamp = new Date().toISOString();
+    this.url = options?.url;
+    this.method = options?.method;
+  }
+
+  public toLogData(): ErrorLogData {
+    return {
+      code: this.code,
+      message: this.message,
+      data: this.data,
+      timestamp: this.timestamp,
+      url: this.url,
+      method: this.method,
+      stack: this.stack,
+    };
+  }
+}
+
+const getErrorMessage = (status: number): string => {
+  const errorMap: Record<number, string> = {
+    [ApiStatus.unauthorized]: "httpMsg.unauthorized",
+    [ApiStatus.forbidden]: "httpMsg.forbidden",
+    [ApiStatus.notFound]: "httpMsg.notFound",
+    [ApiStatus.methodNotAllowed]: "httpMsg.methodNotAllowed",
+    [ApiStatus.requestTimeout]: "httpMsg.requestTimeout",
+    [ApiStatus.internalServerError]: "httpMsg.internalServerError",
+    [ApiStatus.badGateway]: "httpMsg.badGateway",
+    [ApiStatus.serviceUnavailable]: "httpMsg.serviceUnavailable",
+    [ApiStatus.gatewayTimeout]: "httpMsg.gatewayTimeout",
+  };
+
+  return $t(errorMap[status] || "httpMsg.internalServerError");
+};
+
+export function handleError(error: AxiosError<ApiResponse>): never {
+  if (error.code === "ERR_CANCELED") {
+    console.warn("Request cancelled:", error.message);
+    throw new HttpError($t("httpMsg.requestCancelled"), ApiStatus.error);
+  }
+
+  const statusCode = error.response?.status;
+  const errorMessage = error.response?.data?.msg || error.message;
+  const requestConfig = error.config;
+
+  if (!error.response) {
+    throw new HttpError($t("httpMsg.networkError"), ApiStatus.error, {
+      url: requestConfig?.url,
+      method: requestConfig?.method?.toUpperCase(),
+    });
+  }
+
+  const message = statusCode
+    ? getErrorMessage(statusCode)
+    : errorMessage || $t("httpMsg.requestFailed");
+  throw new HttpError(message, statusCode || ApiStatus.error, {
+    data: error.response.data,
+    url: requestConfig?.url,
+    method: requestConfig?.method?.toUpperCase(),
+  });
+}
+
+export function showError(error: HttpError, showMessage: boolean = true): void {
+  if (showMessage) {
+    ElMessage.error(error.message);
+  }
+  console.error("[HTTP Error]", error.toLogData());
+}
+
+export function showSuccess(message: string, showMessage: boolean = true): void {
+  if (showMessage) {
+    ElMessage.success(message);
+  }
+}
+
+export const isHttpError = (error: unknown): error is HttpError => {
+  return error instanceof HttpError;
+};
+
+// --- Axios 实例 ---------------------------------------------------------------
+
+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" },
+  paramsSerializer: (params) => qs.stringify(params, { indices: false }),
+});
+
+request.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const accessToken = Auth.getAccessToken();
+    const auth = config.headers.Authorization;
+
+    if (auth === NO_AUTH_FLAG) {
+      delete config.headers.Authorization;
+      return config;
+    }
+
+    if (!auth && accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    return config;
+  },
+  (error) => {
+    const msg = error instanceof Error ? error.message : String(error);
+    ElMessage.error(msg);
+    return Promise.reject(error);
+  }
+);
+
+request.interceptors.response.use(
+  (response: AxiosResponse<ApiResponse>) => {
+    if (response.config.responseType === "blob") {
+      return response;
+    }
+
+    const data = response.data;
+
+    if (data.code !== ResultEnum.SUCCESS) {
+      ElMessage.error(data.msg);
+      return Promise.reject(response);
+    }
+
+    if (
+      response.config.method?.toUpperCase() !== "GET" &&
+      !response.config.url?.includes("login") &&
+      !response.config.url?.includes("logout")
+    ) {
+      ElMessage.success(data.msg);
+    }
+
+    return response;
+  },
+  async (error: AxiosError<ApiResponse>) => {
+    if (!error.response) {
+      let errorMessage = "网络连接异常";
+
+      if (error.message?.includes("ECONNREFUSED")) {
+        errorMessage = "服务器连接失败，请检查后端服务是否正常运行";
+      } else if (error.message?.includes("timeout")) {
+        errorMessage = "请求超时，请稍后重试";
+      } else if (error.message?.includes("Network Error")) {
+        errorMessage = "网络连接错误，请检查您的网络设置";
+      }
+
+      console.error("网络请求失败:", error);
+      ElMessage.error(errorMessage);
+      return Promise.reject(new Error(errorMessage));
+    }
+
+    const data = error.response?.data;
+
+    if (error.response?.config.responseType === "blob" && error.response.data instanceof Blob) {
+      try {
+        const text = await new Response(error.response.data).text();
+        const jsonData: ApiResponse = JSON.parse(text);
+
+        if (jsonData.code === ResultEnum.ERROR) {
+          ElMessage.error(jsonData.msg || "请求错误");
+          return Promise.reject(new Error(jsonData.msg || "请求错误"));
+        } else if (jsonData.code === ResultEnum.EXCEPTION) {
+          ElMessage.error(jsonData.msg || "服务异常");
+          return Promise.reject(new Error(jsonData.msg || "服务异常"));
+        }
+      } catch (e) {
+        console.error("请求异常:", e);
+        ElMessage.error("数据解析失败");
+        return Promise.reject(new Error("数据解析失败"));
+      }
+    }
+
+    const status = error.response.status;
+
+    const hasApiCode =
+      data !== undefined &&
+      data !== null &&
+      typeof data === "object" &&
+      "code" in data &&
+      typeof (data as ApiResponse).code === "number";
+
+    if (status === 401 && !hasApiCode) {
+      await redirectToLogin("登录已失效，请重新登录");
+      return Promise.reject(new HttpError("Unauthorized", ApiStatus.unauthorized));
+    }
+
+    if (data?.code === ResultEnum.TOKEN_EXPIRED) {
+      await redirectToLogin("登录已过期，请重新登录");
+      const msg = data.msg || "登录已过期，请重新登录";
+      return Promise.reject(new HttpError(msg, ApiStatus.unauthorized));
+    } else if (data?.code === ResultEnum.ERROR) {
+      ElMessage.error(data.msg || "请求错误");
+      return Promise.reject(new Error(data.msg || "请求错误"));
+    } else if (data?.code === ResultEnum.UNAUTHORIZED) {
+      ElMessage.error(data.msg || "暂无权限");
+      return Promise.reject(new Error(data.msg || "请求错误"));
+    } else if (data?.code === ResultEnum.EXCEPTION) {
+      ElMessage.error(data.msg || "服务异常");
+      return Promise.reject(new Error(data.msg || "服务异常"));
+    } else {
+      ElMessage.error("请求处理失败，请稍后重试");
+      return Promise.reject(new Error("请求处理失败"));
+    }
+  }
+);
+
+export default request;
+
 export type { AxiosInstance } from "axios";
diff --git a/frontend/web/src/utils/menuIcon/index.ts b/frontend/web/src/utils/menuIcon/index.ts
index 26913137..5d6472ab 100644
--- a/frontend/web/src/utils/menuIcon/index.ts
+++ b/frontend/web/src/utils/menuIcon/index.ts
@@ -13,7 +13,7 @@ export function isElementPlusStoredIcon(icon?: string | null): boolean {
   return !!s && s.startsWith("el-icon");
 }
 
-/** 与历史 `MenuSearch` 中 `resolveEpMenuIcon` 一致：`pie-chart` → `PieChart` */
+/** `el-icon-*` 主体转 PascalCase，与侧栏 / 搜索里 Element Plus 图标解析一致：`pie-chart` → `PieChart` */
 function kebabSnakeBodyToPascalKey(body: string): string {
   return body
     .split(/[-_]/)
@@ -25,7 +25,7 @@ function kebabSnakeBodyToPascalKey(body: string): string {
 /**
  * 解析为 Element Plus 图标组件；否则 null（再走 Iconify / Remix 映射）。
  * 对齐旧版 `layouts/old/components/Menu/components/MenuItemContent.vue`（el-icon / 自定义文件名）
- * 及 `MenuSearch` 里对 `el-icon-*` 主体的 Pascal 推导。
+ * 及对 `el-icon-*` 主体的 Pascal 推导。
  */
 export function resolveElementPlusIconComponent(icon?: string | null): Component | null {
   const ic = icon?.trim();
@@ -171,7 +171,7 @@ const REMIX_BY_NAME: Record<string, string> = {
   upload_folder: "ri:folder-upload-line",
   "upload-folder": "ri:folder-upload-line",
   user: "ri:user-line",
-  visitor: "ri:user-hefa-line",
+  visitor: "ri:user-heart-line",
   vite: "ri:rocket-line",
   vue: "ri:vuejs-line",
   wechat: "ri:wechat-fill",
@@ -179,7 +179,7 @@ const REMIX_BY_NAME: Record<string, string> = {
   people: "ri:team-line",
 
   "menu-about": "ri:information-line",
-  "menu-analyse": "ri:line-chfa-line",
+  "menu-analyse": "ri:line-chart-line",
   "menu-crud": "ri:database-2-line",
   "menu-detail": "ri:file-list-line",
   "menu-document": "ri:file-text-line",
@@ -191,7 +191,7 @@ const REMIX_BY_NAME: Record<string, string> = {
   "menu-home": "ri:home-4-line",
   "menu-layout": "ri:layout-line",
   "menu-multi": "ri:layout-grid-line",
-  "menu-result": "ri:bar-chfa-box-line",
+  "menu-result": "ri:bar-chart-box-line",
   "menu-system": "ri:settings-3-line",
   "menu-table": "ri:table-line",
   "menu-test": "ri:test-tube-line",
diff --git a/frontend/web/src/utils/navigation/index.ts b/frontend/web/src/utils/navigation/index.ts
index f71cc6e6..f6e00357 100644
--- a/frontend/web/src/utils/navigation/index.ts
+++ b/frontend/web/src/utils/navigation/index.ts
@@ -1,5 +1,3 @@
-/** Navigation helpers (flattened). */
-
 import type { RouteLocationNormalized, RouteRecordRaw } from "vue-router";
 import { router } from "@/router";
 import type { AppRouteRecord, AppRouteRecord as AppRouteRecordFromTypes } from "@/types";
@@ -10,8 +8,12 @@ import { useSettingsStore } from "@stores/modules/setting.store";
 import { IframeRouteManager } from "@/router";
 import { useCommon } from "@/hooks/core/useCommon";
 
+/**
+ * 导航辅助：菜单标题、外链与路由跳转、工作标签（`setWorktab`）、文档标题（`setPageTitle`）。
+ */
 export type AppRouteRecordRaw = RouteRecordRaw & { hidden?: boolean };
 
+/** 浏览器标题：meta.title 经 i18n 键或原文 + 站点名 */
 export const setPageTitle = (to: RouteLocationNormalized): void => {
   const { title } = to.meta;
   if (!title) return;
@@ -83,11 +85,18 @@ export const handleMenuJump = (item: AppRouteRecord, jumpToFirst: boolean = fals
   return router.push(firstChild.path);
 };
 
+/**
+ * 与路由同步工作栏：受 `meta.isHideTab`、`settings.showWorkTab`、首页路径影响。
+ * - 开多标签或停留在首页：写入 `opened`（openTab）。
+ * - 关多标签且非首页：仅 `syncCurrentFromRoute`，不把每一页压入 `opened`，但保证 `current` 与本次导航一致。
+ */
 export const setWorktab = (to: RouteLocationNormalized): void => {
   const worktabStore = useWorktabStore();
   const { meta, path, name, params, query } = to;
   if (meta.isHideTab) return;
 
+  const routeNameStr = name != null ? String(name) : "";
+
   if (isIframe(path)) {
     const iframeRoute = IframeRouteManager.getInstance().findByPath(to.path);
     if (!iframeRoute?.meta) return;
@@ -96,8 +105,8 @@ export const setWorktab = (to: RouteLocationNormalized): void => {
       title: iframeRoute.meta.title,
       icon: meta.icon as string,
       path,
-      name: name as string,
-      keepAlive: meta.keepAlive as boolean,
+      name: routeNameStr,
+      keepAlive: meta.keepAlive !== false,
       params,
       query,
     });
@@ -105,16 +114,28 @@ export const setWorktab = (to: RouteLocationNormalized): void => {
     return;
   }
 
+  const tabPayload = {
+    title: (meta.title as string) || "",
+    icon: meta.icon as string,
+    path,
+    name: routeNameStr,
+    keepAlive: meta.keepAlive !== false,
+    params,
+    query,
+    fixedTab: meta.fixedTab as boolean,
+  };
+
   if (useSettingsStore().showWorkTab || path === useCommon().homePath.value) {
-    worktabStore.openTab({
-      title: meta.title as string,
-      icon: meta.icon as string,
-      path,
-      name: name as string,
-      keepAlive: meta.keepAlive as boolean,
-      params,
-      query,
-      fixedTab: meta.fixedTab as boolean,
+    worktabStore.openTab(tabPayload);
+  } else {
+    worktabStore.syncCurrentFromRoute({
+      path: tabPayload.path,
+      name: tabPayload.name,
+      title: tabPayload.title,
+      icon: tabPayload.icon,
+      keepAlive: tabPayload.keepAlive,
+      params: tabPayload.params,
+      query: tabPayload.query,
     });
   }
 };
diff --git a/frontend/web/src/utils/table/index.ts b/frontend/web/src/utils/table/index.ts
index 0d11219b..bb685ffb 100644
--- a/frontend/web/src/utils/table/index.ts
+++ b/frontend/web/src/utils/table/index.ts
@@ -1,31 +1,90 @@
-/** Table helpers (flattened). */
+/**
+ * 表格列表工具：`useTable`、缓存与分页响应适配。
+ *
+ * - 接口约定：分页列表返回体须符合全局 `PageResult`（或包在标准 `data` 内），见 `defaultResponseAdapter`。
+ * - 缓存：`TableCache` 按参数 hash + 标签失效；策略枚举供 `useTable.clearCache` 使用。
+ */
 
 import { h } from "vue";
 import type { VNode } from "vue";
 import { ElTooltip } from "element-plus";
 import { hash } from "ohash";
-import FaButtonMore from "@/components/forms/fa-button-more/index.vue";
+import ArtButtonMore from "@/components/forms/fa-button-more/index.vue";
 import type { ButtonMoreItem } from "@/components/forms/fa-button-more/index.vue";
-import FaButtonTable from "@/components/forms/fa-button-table/index.vue";
+import ArtButtonTable from "@/components/forms/fa-button-table/index.vue";
 
-// -----------------------------
-// Config
-// -----------------------------
+// --- 全局分页字段名（与 PageQuery 对齐） ---
 
+/** 仅保留与全局 `PageQuery` / `PageResult` 对齐的分页参数字段名（供 useTable 合并请求参数） */
 export const tableConfig = {
-  recordFields: ["list", "data", "records", "items", "result", "rows"],
-  totalFields: ["total", "count"],
-  currentFields: ["current", "page", "pageNum", "page_no"],
-  sizeFields: ["size", "pageSize", "limit", "page_size"],
   paginationKey: {
-    current: "current",
-    size: "size",
+    current: "page_no",
+    size: "page_size",
   },
-};
+} as const;
 
-// -----------------------------
-// Cache
-// -----------------------------
+/** 与 `global.d.ts` 中 `PageResult` 字段一致；分页列表接口必须返回该结构（或包在 ApiResponse.data 内） */
+function isPageResultPayload(o: unknown): o is PageResult<unknown> {
+  if (!o || typeof o !== "object" || Array.isArray(o)) return false;
+  const r = o as Record<string, unknown>;
+  return (
+    Array.isArray(r.items) &&
+    typeof r.total === "number" &&
+    typeof r.page_no === "number" &&
+    typeof r.page_size === "number" &&
+    typeof r.has_next === "boolean"
+  );
+}
+
+/** 将常见分页形状（含 MyBatis-Plus / 旧字段名）规范为全局 `PageResult` */
+function normalizePageResultLike(raw: unknown): PageResult<unknown> | null {
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return null;
+  const o = raw as Record<string, unknown>;
+
+  const items =
+    (Array.isArray(o.items) && o.items) ||
+    (Array.isArray(o.records) && o.records) ||
+    (Array.isArray(o.list) && o.list) ||
+    (Array.isArray(o.rows) && o.rows) ||
+    null;
+  if (!items) return null;
+
+  const totalRaw = o.total;
+  const total =
+    typeof totalRaw === "number" ? totalRaw : typeof totalRaw === "string" ? Number(totalRaw) : NaN;
+  if (!Number.isFinite(total)) return null;
+
+  const pageNoRaw = o.page_no ?? o.current ?? o.page;
+  const page_no =
+    typeof pageNoRaw === "number"
+      ? pageNoRaw
+      : typeof pageNoRaw === "string"
+        ? Number(pageNoRaw)
+        : NaN;
+  if (!Number.isFinite(page_no)) return null;
+
+  const pageSizeRaw = o.page_size ?? o.size ?? o.limit ?? o.pageSize;
+  const page_size =
+    typeof pageSizeRaw === "number"
+      ? pageSizeRaw
+      : typeof pageSizeRaw === "string"
+        ? Number(pageSizeRaw)
+        : NaN;
+  if (!Number.isFinite(page_size)) return null;
+
+  let has_next: boolean;
+  if (typeof o.has_next === "boolean") {
+    has_next = o.has_next;
+  } else if (typeof o.hasNext === "boolean") {
+    has_next = o.hasNext;
+  } else {
+    has_next = page_no * page_size < total;
+  }
+
+  return { items, total, page_no, page_size, has_next };
+}
+
+// --- 缓存 ---
 
 export enum CacheInvalidationStrategy {
   CLEAR_ALL = "clear_all",
@@ -34,12 +93,13 @@ export enum CacheInvalidationStrategy {
   KEEP_ALL = "keep_all",
 }
 
+/** useTable 内部使用的规范化分页响应（由 PageResult 映射而来） */
 export interface ApiResponse<T = unknown> {
-  records?: T[];
-  data?: T[];
-  total?: number;
+  records: T[];
+  total: number;
   current?: number;
   size?: number;
+  has_next?: boolean;
   [key: string]: unknown;
 }
 
@@ -78,7 +138,7 @@ export class TableCache<T> {
 
     const searchKeys = Object.keys(params).filter(
       (key) =>
-        !["current", "size", "total"].includes(key) &&
+        !["current", "size", "total", "page_no", "page_size"].includes(key) &&
         params[key] !== undefined &&
         params[key] !== "" &&
         params[key] !== null
@@ -91,7 +151,9 @@ export class TableCache<T> {
       tags.add("search:default");
     }
 
-    tags.add(`pagination:${params.size || 10}`);
+    const ps = params as Record<string, unknown>;
+    const pageSizeVal = ps.page_size ?? ps.size;
+    tags.add(`pagination:${typeof pageSizeVal === "number" ? pageSizeVal : 10}`);
     tags.add("pagination");
     return tags;
   }
@@ -215,9 +277,7 @@ export class TableCache<T> {
   }
 }
 
-// -----------------------------
-// Utils
-// -----------------------------
+// --- 响应解析与防抖 ---
 
 function unwrapAxiosResponseBody(response: unknown): unknown {
   if (response === null || typeof response !== "object") return response;
@@ -236,6 +296,41 @@ function unwrapAxiosResponseBody(response: unknown): unknown {
   return response;
 }
 
+/**
+ * 从 axios 原始响应或已解包 body 中取出唯一合法的 `PageResult`。
+ * 支持：① 严格 `PageResult`；② `ApiResponse.data` 嵌套；③ `records/current/size` 等常见变体。
+ */
+function extractPageResultPayload(response: unknown): PageResult<unknown> | null {
+  const candidates: unknown[] = [];
+
+  const push = (x: unknown) => {
+    if (x !== undefined && x !== null) candidates.push(x);
+  };
+
+  push(response);
+  push(unwrapAxiosResponseBody(response));
+
+  for (let i = 0; i < candidates.length; i++) {
+    const x = candidates[i];
+    if (isPageResultPayload(x)) {
+      return x;
+    }
+    const normalized = normalizePageResultLike(x);
+    if (normalized) {
+      return normalized;
+    }
+    if (x && typeof x === "object" && !Array.isArray(x) && "data" in x) {
+      const inner = (x as Record<string, unknown>).data;
+      push(inner);
+      if (inner && typeof inner === "object" && !Array.isArray(inner) && "data" in inner) {
+        push((inner as Record<string, unknown>).data);
+      }
+    }
+  }
+
+  return null;
+}
+
 export interface BaseRequestParams extends PageQuery {
   [key: string]: unknown;
 }
@@ -246,104 +341,28 @@ export interface TableError {
   details?: unknown;
 }
 
-function extractRecords<T>(obj: Record<string, unknown>, fields: string[]): T[] {
-  for (const field of fields) {
-    if (field in obj && Array.isArray(obj[field])) return obj[field] as T[];
-  }
-  return [];
-}
-
-function extractTotal(obj: Record<string, unknown>, records: unknown[], fields: string[]): number {
-  for (const field of fields) {
-    if (field in obj && typeof obj[field] === "number") return obj[field] as number;
-  }
-  return records.length;
-}
-
-function extractPagination(
-  obj: Record<string, unknown>,
-  data?: Record<string, unknown>
-): Pick<ApiResponse<unknown>, "current" | "size"> | undefined {
-  const result: Partial<Pick<ApiResponse<unknown>, "current" | "size">> = {};
-  const sources = [obj, data ?? {}];
-
-  for (const src of sources) {
-    for (const field of tableConfig.currentFields) {
-      if (field in src && typeof src[field] === "number") {
-        result.current = src[field] as number;
-        break;
-      }
-    }
-    if (result.current !== undefined) break;
-  }
-
-  for (const src of sources) {
-    for (const field of tableConfig.sizeFields) {
-      if (field in src && typeof src[field] === "number") {
-        result.size = src[field] as number;
-        break;
-      }
-    }
-    if (result.size !== undefined) break;
-  }
-
-  if (result.current === undefined && result.size === undefined) return undefined;
-  return result;
-}
-
 export const defaultResponseAdapter = <T>(response: unknown): ApiResponse<T> => {
-  const recordFields = tableConfig.recordFields;
-
-  response = unwrapAxiosResponseBody(response);
-
-  if (!response) return { records: [], total: 0 };
-  if (Array.isArray(response)) return { records: response, total: response.length };
-
-  if (typeof response !== "object") {
-    console.warn(
-      "[tableUtils] 无法识别的响应格式，支持的格式包括: 数组、包含" +
-        recordFields.join("/") +
-        "字段的对象、嵌套data对象。当前格式:",
+  const pr = extractPageResultPayload(response);
+  if (!pr) {
+    console.error(
+      "[tableUtils] 分页列表响应必须符合全局 PageResult<T>（items、total、page_no、page_size、has_next）；或为 ApiResponse 且 data 为该结构。收到:",
       response
     );
-    return { records: [], total: 0 };
+    return { records: [], total: 0, current: 1, size: 10 };
   }
 
-  const res = response as Record<string, unknown>;
-  let records: T[] = [];
-  let total = 0;
-  let pagination: Pick<ApiResponse<unknown>, "current" | "size"> | undefined;
-
-  records = extractRecords(res, recordFields);
-  total = extractTotal(res, records, tableConfig.totalFields);
-  pagination = extractPagination(res);
-
-  if (records.length === 0 && "data" in res && typeof res.data === "object") {
-    const data = res.data as Record<string, unknown>;
-    records = extractRecords(data, ["list", "records", "items"]);
-    total = extractTotal(data, records, tableConfig.totalFields);
-    pagination = extractPagination(res, data);
-
-    if (Array.isArray(res.data)) {
-      records = res.data as T[];
-      total = records.length;
-    }
-  }
-
-  if (!recordFields.some((field) => field in res) && records.length === 0) {
-    console.warn("[tableUtils] 无法识别的响应格式");
-    console.warn("支持的字段包括: " + recordFields.join("、"), response);
-    console.warn("扩展字段请到 utils/table/tableConfig 文件配置");
-  }
-
-  const result: ApiResponse<T> = { records, total };
-  if (pagination) Object.assign(result, pagination);
-  return result;
+  return {
+    records: pr.items as T[],
+    total: pr.total,
+    current: pr.page_no,
+    size: pr.page_size,
+    has_next: pr.has_next,
+  };
 };
 
 export const extractTableData = <T>(response: ApiResponse<T>): T[] => {
-  const data = response.records || response.data || [];
-  return Array.isArray(data) ? data : [];
+  const rows = response.records;
+  return Array.isArray(rows) ? rows : [];
 };
 
 export const updatePaginationFromResponse = <T>(
@@ -438,9 +457,7 @@ export const createErrorHandler = (
   };
 };
 
-// -----------------------------
-// Operation cell renderer
-// -----------------------------
+// --- 操作列渲染（表格单元格内按钮 + 溢出「更多」） ---
 
 export const DEFAULT_MAX_INLINE_TABLE_OPERATIONS = 3;
 
@@ -512,7 +529,7 @@ export function renderTableOperationCell(
         "span",
         { class: a.disabled ? "inline-flex opacity-40 pointer-events-none" : "inline-flex" },
         [
-          h(FaButtonTable, {
+          h(ArtButtonTable, {
             type: a.artType,
             icon: iconForOperation(a),
             iconColor: iconColorForOperation(a),
@@ -525,7 +542,7 @@ export function renderTableOperationCell(
 
   if (overflow.length === 0) return h("div", { class: wrapperClass }, inlineNodes);
 
-  const moreDropdown = h(FaButtonMore, {
+  const moreDropdown = h(ArtButtonMore, {
     list: overflow.map((a) => ({
       key: a.key,
       label: a.label,
diff --git a/frontend/web/src/views/changelog/index.vue b/frontend/web/src/views/changelog/index.vue
index 7e9cf9f2..732b7c75 100644
--- a/frontend/web/src/views/changelog/index.vue
+++ b/frontend/web/src/views/changelog/index.vue
@@ -7,7 +7,7 @@
       <div
         v-for="item in upgradeLogList"
         :key="item.version"
-        class="art-card-sm rounded-lg p-6 transition-shadow max-md:p-4"
+        class="fa-card-sm rounded-lg p-6 transition-shadow max-md:p-4"
       >
         <div class="flex-cb gap-3 mb-4 flex-wrap">
           <span class="px-3 py-1 bg-theme/10 text-theme text-sm font-medium rounded-full">
diff --git a/frontend/web/src/views/current/profile.vue b/frontend/web/src/views/current/profile.vue
index d073a7b5..45093b9b 100644
--- a/frontend/web/src/views/current/profile.vue
+++ b/frontend/web/src/views/current/profile.vue
@@ -4,7 +4,7 @@
     <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="art-card-sm relative p-9 pb-6 overflow-hidden text-center">
+        <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"
             src="@imgs/user/bg.webp"
@@ -58,19 +58,19 @@
 
           <div class="relative z-10 w-75 mx-auto mt-7.5 text-left">
             <div class="mt-2.5 flex items-start">
-              <ArtSvgIcon icon="ri:mail-line" class="text-g-700 shrink-0 mt-0.5" />
+              <FaSvgIcon icon="ri:mail-line" class="text-g-700 shrink-0 mt-0.5" />
               <span class="ml-2 text-sm break-all">{{ infoFormState.email || "—" }}</span>
             </div>
             <div class="mt-2.5 flex items-start">
-              <ArtSvgIcon icon="ri:user-3-line" class="text-g-700 shrink-0 mt-0.5" />
+              <FaSvgIcon icon="ri:user-3-line" class="text-g-700 shrink-0 mt-0.5" />
               <span class="ml-2 text-sm">{{ infoFormState.username || "—" }}</span>
             </div>
             <div class="mt-2.5 flex items-start">
-              <ArtSvgIcon icon="ri:map-pin-line" class="text-g-700 shrink-0 mt-0.5" />
+              <FaSvgIcon icon="ri:map-pin-line" class="text-g-700 shrink-0 mt-0.5" />
               <span class="ml-2 text-sm">{{ infoFormState.dept?.name || "—" }}</span>
             </div>
             <div class="mt-2.5 flex items-start">
-              <ArtSvgIcon icon="ri:briefcase-line" class="text-g-700 shrink-0 mt-0.5" />
+              <FaSvgIcon icon="ri:briefcase-line" class="text-g-700 shrink-0 mt-0.5" />
               <span class="ml-2 text-sm">
                 {{ infoFormState.positions?.map((p) => p.name).join("、") || "—" }}
               </span>
@@ -100,7 +100,7 @@
         destroy-on-close
         @closed="onAvatarCropDialogClosed"
       >
-        <ArtCutterImg
+        <FaCutterImg
           v-if="avatarCropVisible && avatarCropSrc"
           :key="avatarCropSrc"
           :img-url="avatarCropSrc"
@@ -122,7 +122,7 @@
 
       <!-- 右侧表单 -->
       <div class="flex-1 overflow-hidden max-md:w-full max-md:mt-3.5">
-        <div class="art-card-sm">
+        <div class="fa-card-sm">
           <h1 class="p-4 text-xl font-normal border-b border-g-300">基本设置</h1>
 
           <ElForm
@@ -198,7 +198,7 @@
           </ElForm>
         </div>
 
-        <div class="art-card-sm my-5">
+        <div class="fa-card-sm my-5">
           <h1 class="p-4 text-xl font-normal border-b border-g-300">更改密码</h1>
 
           <ElForm
@@ -263,8 +263,8 @@ import { Camera } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
 import { redirectToLogin } from "@utils/auth";
-import ArtSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import ArtCutterImg from "@/components/media/fa-cutter-img/index.vue";
+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";
 
 defineOptions({ name: "UserProfile" });
@@ -609,7 +609,7 @@ onMounted(async () => {
   bottom: 0;
   z-index: 2;
 
-  :deep(.el-upload) {
+  ::deep(.el-upload) {
     display: inline-flex;
   }
 
diff --git a/frontend/web/src/views/dashboard/analysis/index.vue b/frontend/web/src/views/dashboard/analysis/index.vue
index f7d67493..28eb6900 100644
--- a/frontend/web/src/views/dashboard/analysis/index.vue
+++ b/frontend/web/src/views/dashboard/analysis/index.vue
@@ -40,11 +40,11 @@
         <h2 class="page-title">图表</h2>
         <ElRow :gutter="20">
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">柱状图（单数据）</span>
               </div>
-              <ArtBarChart
+              <FaBarChart
                 :data="singleBarData"
                 :xAxisData="xAxisData"
                 :showLegend="true"
@@ -53,11 +53,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">柱状图（多组数据）</span>
               </div>
-              <ArtBarChart
+              <FaBarChart
                 :data="multiBarData"
                 :xAxisData="xAxisData"
                 :showLegend="true"
@@ -66,11 +66,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">柱状图（堆叠）</span>
               </div>
-              <ArtBarChart
+              <FaBarChart
                 :data="stackBarData"
                 :xAxisData="stackXAxisData"
                 :showLegend="true"
@@ -80,11 +80,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">折线图</span>
               </div>
-              <ArtLineChart
+              <FaLineChart
                 :data="[58, 15, 82, 35, 120, 62, 45]"
                 :xAxisData="['一月', '二月', '三月', '四月', '五月', '六月', '七月']"
                 symbol="none"
@@ -93,11 +93,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">折线图（渐变背景）</span>
               </div>
-              <ArtLineChart
+              <FaLineChart
                 :data="[28, 45, 82, 35, 100, 32, 55]"
                 :xAxisData="['一月', '二月', '三月', '四月', '五月', '六月', '七月']"
                 :showAreaColor="true"
@@ -105,11 +105,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">折线图（多组数据）</span>
               </div>
-              <ArtLineChart
+              <FaLineChart
                 :data="multiLineData"
                 :xAxisData="['1月', '2月', '3月', '4月', '5月', '6月']"
                 :showLegend="true"
@@ -118,23 +118,23 @@
           </ElCol>
 
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">柱状图（水平）</span>
               </div>
-              <ArtHBarChart
+              <FaHBarChart
                 :data="[50, 80, 120, 90, 60]"
                 :xAxisData="['产品A', '产品B', '产品C', '产品D', '产品E']"
               />
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">柱状图（水平）</span>
               </div>
 
-              <ArtHBarChart
+              <FaHBarChart
                 :data="[
                   { name: '系列1', data: [10, 20, 30] },
                   { name: '系列2', data: [15, 25, 35] },
@@ -146,11 +146,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">柱状图（水平堆叠）</span>
               </div>
-              <ArtHBarChart
+              <FaHBarChart
                 :data="[
                   { name: '系列1', data: [10, 20, 30] },
                   { name: '系列2', data: [15, 25, 35] },
@@ -164,11 +164,11 @@
           </ElCol>
 
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">环形图</span>
               </div>
-              <ArtRingChart
+              <FaRingChart
                 :data="[
                   { value: 35, name: '分类A' },
                   { value: 28, name: '分类B' },
@@ -181,11 +181,11 @@
           </ElCol>
 
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">环形图</span>
               </div>
-              <ArtRingChart
+              <FaRingChart
                 :data="[
                   { value: 35, name: '分类A' },
                   { value: 28, name: '分类B' },
@@ -203,11 +203,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">饼图</span>
               </div>
-              <ArtRingChart
+              <FaRingChart
                 :data="[
                   { value: 30, name: '分类A' },
                   { value: 25, name: '分类B' },
@@ -220,11 +220,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">散点图</span>
               </div>
-              <ArtScatterChart
+              <FaScatterChart
                 :data="[
                   { value: [1, 3] },
                   { value: [2, 4] },
@@ -244,11 +244,11 @@
           </ElCol>
 
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">雷达图</span>
               </div>
-              <ArtRadarChart
+              <FaRadarChart
                 :indicator="[
                   { name: '销售', max: 100 },
                   { name: '管理', max: 100 },
@@ -270,11 +270,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">k线图</span>
               </div>
-              <ArtKLineChart
+              <FaKLineChart
                 :data="[
                   { time: '2024-01-01', open: 20, close: 23, high: 25, low: 18 },
                   { time: '2024-01-02', open: 23, close: 21, high: 24, low: 20 },
@@ -287,11 +287,11 @@
             </div>
           </ElCol>
           <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
-            <div class="art-card">
+            <div class="fa-card">
               <div class="pb-3.5">
                 <span class="text-base font-medium">双向堆叠柱状图</span>
               </div>
-              <ArtDualBarCompareChart
+              <FaDualBarCompareChart
                 :positiveData="[50, 28, 80, 65, 68, 70, 60, 55]"
                 :negativeData="[50, 28, 40, 45, 38, 50, 42, 48]"
                 :xAxisData="[
@@ -373,7 +373,7 @@ const stackXAxisData = ref(["产品A", "产品B", "产品C", "产品D", "产品E
   @apply my-5 text-xl font-medium first:mt-0;
 }
 
-.art-card {
+.fa-card {
   @apply p-5;
 }
 </style>
diff --git a/frontend/web/src/views/dashboard/analysis/modules/customer-satisfaction.vue b/frontend/web/src/views/dashboard/analysis/modules/customer-satisfaction.vue
index 7cc1d460..b860be36 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/customer-satisfaction.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/customer-satisfaction.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="art-card h-100 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-100 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>客户满意度</h4>
       </div>
     </div>
-    <ArtLineChart
+    <FaLineChart
       height="calc(100% - 30px)"
       :data="chartData"
       :xAxisData="xAxisData"
diff --git a/frontend/web/src/views/dashboard/analysis/modules/sales-mapping-by-country.vue b/frontend/web/src/views/dashboard/analysis/modules/sales-mapping-by-country.vue
index 77c1f3ab..9583cd73 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/sales-mapping-by-country.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/sales-mapping-by-country.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="art-card h-82 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-82 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>全国销售分布</h4>
       </div>
     </div>
 
-    <ArtRingChart
+    <FaRingChart
       :data="[
         { value: 30, name: '北京' },
         { value: 25, name: '上海' },
diff --git a/frontend/web/src/views/dashboard/analysis/modules/target-vs-reality.vue b/frontend/web/src/views/dashboard/analysis/modules/target-vs-reality.vue
index 09479294..e3e5cced 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/target-vs-reality.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/target-vs-reality.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="art-card h-100 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-100 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>目标与实际</h4>
       </div>
     </div>
 
-    <ArtBarChart
+    <FaBarChart
       class="p-5"
       height="12rem"
       :data="revenueData"
@@ -19,7 +19,7 @@
       <div v-for="item in totalItems" :key="item.label" class="flex-c mb-5 last:mb-0">
         <div class="flex-c justify-start w-3/5 text-sm">
           <div class="w-10 h-10 mr-3 text-lg rounded-md flex-cc" :class="item.iconClass">
-            <ArtSvgIcon :icon="item.icon" />
+            <FaSvgIcon :icon="item.icon" />
           </div>
 
           <div class="flex flex-col items-start">
diff --git a/frontend/web/src/views/dashboard/analysis/modules/today-sales.vue b/frontend/web/src/views/dashboard/analysis/modules/today-sales.vue
index 397c4d94..99ed068e 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/today-sales.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/today-sales.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="art-card h-82 p-5 mb-5 overflow-hidden max-lg:h-auto max-sm:mb-4">
-    <div class="art-card-header pr-0">
+  <div class="fa-card h-82 p-5 mb-5 overflow-hidden max-lg:h-auto max-sm:mb-4">
+    <div class="fa-card-header pr-0">
       <div class="title">
         <h4>今日销售</h4>
         <p>销售总结</p>
       </div>
       <div class="flex-cc h-7.5 min-w-17 border border-g-300 rounded-lg text-g-500 c-p">
-        <ArtSvgIcon icon="ri:arrow-up-line" class="text-base mr-1.5" />
+        <FaSvgIcon icon="ri:arrow-up-line" class="text-base mr-1.5" />
         <span class="text-xs">导出</span>
       </div>
     </div>
@@ -18,11 +18,11 @@
             class="flex px-5 flex-col justify-center h-55 border border-g-300/85 rounded-xl max-lg:mb-4 max-sm:flex-row max-sm:justify-between max-sm:items-center max-sm:h-40"
           >
             <div class="size-12 rounded-lg flex-cc bg-theme/10">
-              <ArtSvgIcon :icon="item.icon" class="text-xl text-theme" />
+              <FaSvgIcon :icon="item.icon" class="text-xl text-theme" />
             </div>
 
             <div class="max-sm:ml-4 mt-3.5 max-sm:mt-0 max-sm:text-end">
-              <ArtCountTo class="text-2xl font-medium" :target="item.value" :duration="1500" />
+              <FaCountTo class="text-2xl font-medium" :target="item.value" :duration="1500" />
               <p class="mt-2 text-base text-g-600 max-sm:mt-1">{{ item.label }}</p>
               <small class="text-g-500 mt-1 max-sm:mt-0.5">
                 较昨天
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 151b308f..f04f81bf 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/top-products.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/top-products.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="art-card h-82 p-5 mb-5 overflow-hidden max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-82 p-5 mb-5 overflow-hidden max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>热门产品</h4>
       </div>
diff --git a/frontend/web/src/views/dashboard/analysis/modules/total-revenue.vue b/frontend/web/src/views/dashboard/analysis/modules/total-revenue.vue
index ccaa0ef3..70953858 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/total-revenue.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/total-revenue.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="art-card h-100 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-100 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>总收入</h4>
       </div>
     </div>
-    <ArtBarChart
+    <FaBarChart
       height="calc(100% - 30px)"
       :data="revenueData"
       :xAxisData="weekDays"
diff --git a/frontend/web/src/views/dashboard/analysis/modules/visitor-insights.vue b/frontend/web/src/views/dashboard/analysis/modules/visitor-insights.vue
index 04ed5941..41c4e4b6 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/visitor-insights.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/visitor-insights.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="art-card h-82 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-82 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>访客洞察</h4>
       </div>
     </div>
-    <ArtLineChart
+    <FaLineChart
       height="calc(100% - 30px)"
       :data="chartData"
       :xAxisData="xAxisData"
diff --git a/frontend/web/src/views/dashboard/analysis/modules/volume-service-level.vue b/frontend/web/src/views/dashboard/analysis/modules/volume-service-level.vue
index 0bced7d2..9c162688 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/volume-service-level.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/volume-service-level.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="art-card h-82 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-82 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>业务量与服务水平</h4>
       </div>
     </div>
 
-    <ArtBarChart
+    <FaBarChart
       class="mt-6"
       height="14.3rem"
       :data="volumeServiceData"
diff --git a/frontend/web/src/views/dashboard/article/components/ArticleCommentWallDrawer.vue b/frontend/web/src/views/dashboard/article/components/ArticleCommentWallDrawer.vue
index d4f1fb63..89d1c218 100644
--- a/frontend/web/src/views/dashboard/article/components/ArticleCommentWallDrawer.vue
+++ b/frontend/web/src/views/dashboard/article/components/ArticleCommentWallDrawer.vue
@@ -9,9 +9,7 @@
     destroy-on-close
     class="article-comment-wall-drawer"
   >
-    <p class="mt-0 mb-8 text-g-600">
-      每一份留言都记录了您的想法，也为我们提供了珍贵的回忆
-    </p>
+    <p class="mt-0 mb-8 text-g-600">每一份留言都记录了您的想法，也为我们提供了珍贵的回忆</p>
 
     <ul
       class="grid grid-cols-5 gap-5 max-2xl:grid-cols-4 max-xl:grid-cols-3 max-lg:grid-cols-2 max-sm:grid-cols-1 mb-5 list-none p-0 m-0"
@@ -28,11 +26,11 @@
         <div class="absolute bottom-4 left-0 px-4 flex-cb w-full">
           <div class="flex-c">
             <div class="flex-c mr-5 text-xs text-g-600">
-              <ArtSvgIcon icon="ri:heart-line" class="mr-1 text-base" />
+              <FaSvgIcon icon="ri:heart-line" class="mr-1 text-base" />
               <span>{{ item.collection }}</span>
             </div>
             <div class="flex-c mr-5 text-xs text-g-600">
-              <ArtSvgIcon icon="ri:message-3-line" class="mr-1 text-base" />
+              <FaSvgIcon icon="ri:message-3-line" class="mr-1 text-base" />
               <span>{{ item.comment }}</span>
             </div>
           </div>
@@ -55,17 +53,20 @@
       </template>
       <template #default>
         <div class="drawer-default">
-          <div class="relative p-4 aspect-16/12 rounded-md" :style="{ background: clickItem.color }">
+          <div
+            class="relative p-4 aspect-16/12 rounded-md"
+            :style="{ background: clickItem.color }"
+          >
             <p class="text-g-500 text-sm">{{ clickItem.date }}</p>
             <p class="mt-4 text-sm text-gray-800">{{ clickItem.content }}</p>
             <div class="absolute bottom-4 left-0 px-4 flex-cb w-full">
               <div class="flex-c">
                 <div class="flex-c mr-5 text-xs text-g-600">
-                  <ArtSvgIcon icon="ri:heart-line" class="mr-1 text-base" />
+                  <FaSvgIcon icon="ri:heart-line" class="mr-1 text-base" />
                   <span>{{ clickItem.collection }}</span>
                 </div>
                 <div class="flex-c mr-5 text-xs text-g-600">
-                  <ArtSvgIcon icon="ri:message-3-line" class="mr-1 text-base" />
+                  <FaSvgIcon icon="ri:message-3-line" class="mr-1 text-base" />
                   <span>{{ clickItem.comment }}</span>
                 </div>
               </div>
diff --git a/frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue b/frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue
index 54232587..af423121 100644
--- a/frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue
+++ b/frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue
@@ -21,7 +21,7 @@
     <template #footer>
       <div class="flex flex-wrap justify-end gap-2">
         <ElButton v-if="articleId != null" @click="emitOpenCommentWall">
-          <ArtSvgIcon icon="ri:message-3-line" class="mr-1" />
+          <FaSvgIcon icon="ri:message-3-line" class="mr-1" />
           留言讨论
         </ElButton>
         <ElButton @click="visible = false">关闭</ElButton>
@@ -127,12 +127,12 @@ watch(
 .article-detail-markdown {
   margin-top: 8px;
 
-  :deep(img) {
+  ::deep(img) {
     width: 100%;
-    border: 1px solid var(--art-gray-200);
+    border: 1px solid var(--fa-gray-200);
   }
 
-  :deep(pre) {
+  ::deep(pre) {
     position: relative;
 
     &:hover {
@@ -152,11 +152,11 @@ watch(
     }
   }
 
-  :deep(.code-wrapper) {
+  ::deep(.code-wrapper) {
     overflow-x: auto;
   }
 
-  :deep(.line-number) {
+  ::deep(.line-number) {
     position: sticky;
     left: 0;
     z-index: 2;
@@ -169,7 +169,7 @@ watch(
     text-align: center;
   }
 
-  :deep(.copy-button) {
+  ::deep(.copy-button) {
     position: absolute;
     top: 6px;
     right: 6px;
diff --git a/frontend/web/src/views/dashboard/article/components/ArticlePublishDrawer.vue b/frontend/web/src/views/dashboard/article/components/ArticlePublishDrawer.vue
index 46276cf7..cc4db85e 100644
--- a/frontend/web/src/views/dashboard/article/components/ArticlePublishDrawer.vue
+++ b/frontend/web/src/views/dashboard/article/components/ArticlePublishDrawer.vue
@@ -32,9 +32,9 @@
             </ElCol>
           </ElRow>
 
-          <ArtWangEditor class="mt-2.5" v-model="editorHtml" />
+          <FaWangEditor class="mt-2.5" v-model="editorHtml" />
 
-          <div class="p-5 mt-5 art-card-xs">
+          <div class="p-5 mt-5 fa-card-xs">
             <h2 class="mb-5 text-xl font-medium">发布设置</h2>
             <ElForm>
               <ElFormItem label="封面">
@@ -73,7 +73,7 @@
         </div>
       </template>
 
-      <ArtResultPage
+      <FaResultPage
         v-else-if="resultPhase === 'success'"
         type="success"
         :title="successTitle"
@@ -91,9 +91,9 @@
             新建一篇
           </ElButton>
         </template>
-      </ArtResultPage>
+      </FaResultPage>
 
-      <ArtResultPage
+      <FaResultPage
         v-else
         type="fail"
         :title="failTitle"
@@ -103,11 +103,11 @@
         <template #content>
           <p>本次提交未成功，可能原因如下：</p>
           <p>
-            <ArtSvgIcon icon="ri:close-circle-line" class="text-red-500 mr-1" />
+            <FaSvgIcon icon="ri:close-circle-line" class="text-red-500 mr-1" />
             <span>网络或服务暂时不可用，请稍后重试</span>
           </p>
           <p>
-            <ArtSvgIcon icon="ri:close-circle-line" class="text-red-500 mr-1" />
+            <FaSvgIcon icon="ri:close-circle-line" class="text-red-500 mr-1" />
             <span>请确认必填项与封面已正确填写</span>
           </p>
         </template>
@@ -115,7 +115,7 @@
           <ElButton type="primary" v-ripple @click="backToForm">返回修改</ElButton>
           <ElButton v-ripple @click="finishAndClose">关闭并返回列表</ElButton>
         </template>
-      </ArtResultPage>
+      </FaResultPage>
     </div>
   </ElDrawer>
 </template>
diff --git a/frontend/web/src/views/dashboard/article/list/index.vue b/frontend/web/src/views/dashboard/article/list/index.vue
index 50836117..fe51313f 100644
--- a/frontend/web/src/views/dashboard/article/list/index.vue
+++ b/frontend/web/src/views/dashboard/article/list/index.vue
@@ -21,10 +21,10 @@
         :md="6"
         :sm="10"
         :xs="6"
-        style="display: flex; justify-content: end; align-items: center; gap: 8px; flex-wrap: wrap"
+        style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: end"
       >
         <ElButton @click="commentWallOpen = true">
-          <ArtSvgIcon icon="ri:message-3-line" class="mr-1" />
+          <FaSvgIcon icon="ri:message-3-line" class="mr-1" />
           留言墙
         </ElButton>
         <ElButton type="primary" @click="toAddArticle" v-auth="'add'">新增文章</ElButton>
@@ -57,10 +57,10 @@
             <h2 class="text-base text-g-800 font-medium">{{ item.title }}</h2>
             <div class="flex-b w-full h-6 mt-1">
               <div class="flex-c text-g-500">
-                <ArtSvgIcon icon="ri:time-line" class="mr-1 text-sm" />
+                <FaSvgIcon icon="ri:time-line" class="mr-1 text-sm" />
                 <span class="text-sm">{{ useDateFormat(item.create_time, "YYYY-MM-DD") }}</span>
                 <div class="w-px h-3 bg-g-400 mx-3.5"></div>
-                <ArtSvgIcon icon="ri:eye-line" class="mr-1 text-sm" />
+                <FaSvgIcon icon="ri:eye-line" class="mr-1 text-sm" />
                 <span class="text-sm">{{ item.count }}</span>
               </div>
               <ElButton
diff --git a/frontend/web/src/views/dashboard/console/index.vue b/frontend/web/src/views/dashboard/console/index.vue
index edc26d13..793263e2 100755
--- a/frontend/web/src/views/dashboard/console/index.vue
+++ b/frontend/web/src/views/dashboard/console/index.vue
@@ -39,7 +39,7 @@
             :md="6"
             class="mb-5"
           >
-            <ArtStatsCard
+            <FaStatsCard
               :icon="card.icon"
               :iconStyle="card.iconStyle"
               :title="card.title"
@@ -59,7 +59,7 @@
             :md="6"
             class="mb-5"
           >
-            <ArtStatsCard
+            <FaStatsCard
               :icon="card.icon"
               :iconStyle="card.iconStyle"
               :count="card.count"
@@ -81,7 +81,7 @@
             :md="6"
             class="mb-5"
           >
-            <ArtStatsCard
+            <FaStatsCard
               :icon="card.icon"
               :iconStyle="card.customIconStyle"
               :boxStyle="card.boxStyle"
@@ -103,11 +103,7 @@
             :md="6"
             class="mb-5"
           >
-            <ArtProgressCard
-              :percentage="card.percentage"
-              :title="card.title"
-              :color="card.color"
-            />
+            <FaProgressCard :percentage="card.percentage" :title="card.title" :color="card.color" />
           </ElCol>
         </ElRow>
 
@@ -121,7 +117,7 @@
             :md="6"
             class="mb-5"
           >
-            <ArtProgressCard
+            <FaProgressCard
               :percentage="card.percentage"
               :title="card.title"
               :color="card.color"
@@ -134,7 +130,7 @@
         <h2 class="page-title">图表卡片（小图表）</h2>
         <ElRow :gutter="20">
           <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtLineChartCard
+            <FaLineChartCard
               :isMiniChart="true"
               :value="2545"
               label="新用户"
@@ -145,7 +141,7 @@
             />
           </ElCol>
           <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtBarChartCard
+            <FaBarChartCard
               :isMiniChart="true"
               :value="15480"
               label="浏览量"
@@ -157,7 +153,7 @@
             />
           </ElCol>
           <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtLineChartCard
+            <FaLineChartCard
               :isMiniChart="true"
               :value="2545"
               label="粉丝数"
@@ -169,7 +165,7 @@
             />
           </ElCol>
           <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtDonutChartCard
+            <FaDonutChartCard
               :value="36358"
               title="粉丝量"
               :percentage="18"
@@ -186,7 +182,7 @@
         <h2 class="page-title">图表卡片（大图表）</h2>
         <ElRow :gutter="20">
           <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtLineChartCard
+            <FaLineChartCard
               :value="2545"
               label="新用户"
               :percentage="1.2"
@@ -195,7 +191,7 @@
             />
           </ElCol>
           <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtBarChartCard
+            <FaBarChartCard
               :value="15480"
               label="浏览量"
               :percentage="-4.15"
@@ -204,7 +200,7 @@
             />
           </ElCol>
           <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtLineChartCard
+            <FaLineChartCard
               :value="2545"
               label="粉丝数"
               :percentage="1.2"
@@ -214,7 +210,7 @@
             />
           </ElCol>
           <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtDonutChartCard
+            <FaDonutChartCard
               :value="36358"
               title="粉丝量"
               :percentage="-18"
@@ -230,10 +226,10 @@
         <h2 class="page-title">数据列表卡片</h2>
         <ElRow :gutter="20">
           <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
-            <ArtDataListCard :list="dataList" title="待办事项" subtitle="今日待处理任务" />
+            <FaDataListCard :list="dataList" title="待办事项" subtitle="今日待处理任务" />
           </ElCol>
           <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
-            <ArtDataListCard
+            <FaDataListCard
               :maxCount="4"
               :list="dataList"
               title="最近活动"
@@ -243,14 +239,14 @@
             />
           </ElCol>
           <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
-            <ArtTimelineListCard :list="timelineData" title="最近交易" subtitle="2024年12月20日" />
+            <FaTimelineListCard :list="timelineData" title="最近交易" subtitle="2024年12月20日" />
           </ElCol>
         </ElRow>
 
         <h2 class="page-title">图片卡片</h2>
         <ElRow :gutter="20">
           <ElCol v-for="card in imageCards" :key="card.id" :xs="24" :sm="12" :md="6" class="mb-5">
-            <ArtImageCard
+            <FaImageCard
               :imageUrl="card.imageUrl"
               :title="card.title"
               :category="card.category"
@@ -305,7 +301,7 @@ const statsCards = [
     boxStyle: "!bg-warning/10",
     customIconStyle: "!text-warning !text-3xl",
     iconStyle: "bg-warning",
-    textColor: "var(--art-warning)",
+    textColor: "var(--fa-warning)",
     showArrow: false,
   },
   {
@@ -317,7 +313,7 @@ const statsCards = [
     boxStyle: "!bg-secondary/10",
     customIconStyle: "!text-secondary !text-3xl",
     iconStyle: "bg-secondary",
-    textColor: "var(--art-secondary)",
+    textColor: "var(--fa-secondary)",
     showArrow: false,
   },
   {
@@ -329,7 +325,7 @@ const statsCards = [
     boxStyle: "!bg-error/10",
     customIconStyle: "!text-error !text-3xl",
     iconStyle: "bg-error",
-    textColor: "var(--art-error)",
+    textColor: "var(--fa-error)",
     showArrow: false,
   },
 ];
@@ -339,7 +335,7 @@ const progressCards = [
     id: 1,
     title: "完成进度",
     percentage: 75,
-    color: "var(--art-success)",
+    color: "var(--fa-success)",
     icon: "ri:arrow-up-circle-line",
     iconStyle: "bg-success/12 text-success",
   },
@@ -355,7 +351,7 @@ const progressCards = [
     id: 3,
     title: "学习进度",
     percentage: 45,
-    color: "var(--art-error)",
+    color: "var(--fa-error)",
     icon: "ri:game-line",
     iconStyle: "!bg-error/12 text-error",
   },
@@ -363,7 +359,7 @@ const progressCards = [
     id: 4,
     title: "任务进度",
     percentage: 90,
-    color: "var(--art-secondary)",
+    color: "var(--fa-secondary)",
     icon: "ri:flag-2-line",
     iconStyle: "bg-secondary/12 text-secondary",
   },
diff --git a/frontend/web/src/views/dashboard/console/modules/about-project.vue b/frontend/web/src/views/dashboard/console/modules/about-project.vue
index b89d6913..3f349963 100644
--- a/frontend/web/src/views/dashboard/console/modules/about-project.vue
+++ b/frontend/web/src/views/dashboard/console/modules/about-project.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="art-card p-5 flex-b mb-5 max-sm:mb-4">
+  <div class="fa-card p-5 flex-b mb-5 max-sm:mb-4">
     <div>
       <h2 class="text-2xl font-medium">关于项目</h2>
       <p class="text-g-700 mt-1">{{ systemName }} 是一款兼具设计美学与高效开发的后台系统</p>
@@ -13,7 +13,7 @@
           @click="goPage(link.url)"
         >
           <span class="text-g-700">{{ link.label }}</span>
-          <ArtSvgIcon icon="ri:arrow-right-s-line" class="text-lg text-g-600" />
+          <FaSvgIcon icon="ri:arrow-right-s-line" class="text-lg text-g-600" />
         </div>
       </div>
     </div>
diff --git a/frontend/web/src/views/dashboard/console/modules/active-user.vue b/frontend/web/src/views/dashboard/console/modules/active-user.vue
index feeda30b..c8a39fbf 100755
--- a/frontend/web/src/views/dashboard/console/modules/active-user.vue
+++ b/frontend/web/src/views/dashboard/console/modules/active-user.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="art-card h-105 p-4 box-border mb-5 max-sm:mb-4">
-    <ArtBarChart
+  <div class="fa-card h-105 p-4 box-border mb-5 max-sm:mb-4">
+    <FaBarChart
       class="box-border p-2"
       barWidth="50%"
       height="13.7rem"
diff --git a/frontend/web/src/views/dashboard/console/modules/card-list.vue b/frontend/web/src/views/dashboard/console/modules/card-list.vue
index a16921f7..6172340e 100755
--- a/frontend/web/src/views/dashboard/console/modules/card-list.vue
+++ b/frontend/web/src/views/dashboard/console/modules/card-list.vue
@@ -1,9 +1,9 @@
 <template>
   <ElRow :gutter="20" class="flex">
     <ElCol v-for="(item, index) in dataList" :key="index" :sm="12" :md="6" :lg="6">
-      <div class="art-card relative flex flex-col justify-center h-35 px-5 mb-5 max-sm:mb-4">
+      <div class="fa-card relative flex flex-col justify-center h-35 px-5 mb-5 max-sm:mb-4">
         <span class="text-g-700 text-sm">{{ item.des }}</span>
-        <ArtCountTo class="text-[26px] font-medium mt-2" :target="item.num" :duration="1300" />
+        <FaCountTo class="text-[26px] font-medium mt-2" :target="item.num" :duration="1300" />
         <div class="flex-c mt-1">
           <span class="text-xs text-g-600">较上周</span>
           <span
@@ -16,7 +16,7 @@
         <div
           class="absolute top-0 bottom-0 right-5 m-auto size-12.5 rounded-xl flex-cc bg-theme/10"
         >
-          <ArtSvgIcon :icon="item.icon" class="text-xl text-theme" />
+          <FaSvgIcon :icon="item.icon" class="text-xl text-theme" />
         </div>
       </div>
     </ElCol>
diff --git a/frontend/web/src/views/dashboard/console/modules/dynamic-stats.vue b/frontend/web/src/views/dashboard/console/modules/dynamic-stats.vue
index 8aa77788..b13e91f3 100755
--- a/frontend/web/src/views/dashboard/console/modules/dynamic-stats.vue
+++ b/frontend/web/src/views/dashboard/console/modules/dynamic-stats.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="art-card h-128 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-128 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>动态</h4>
         <p>
diff --git a/frontend/web/src/views/dashboard/console/modules/new-user.vue b/frontend/web/src/views/dashboard/console/modules/new-user.vue
index a771e86e..48c8e736 100755
--- a/frontend/web/src/views/dashboard/console/modules/new-user.vue
+++ b/frontend/web/src/views/dashboard/console/modules/new-user.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="art-card p-5 h-128 overflow-hidden mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card p-5 h-128 overflow-hidden mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>新用户</h4>
         <p>
@@ -90,7 +90,7 @@ const tableData = reactive<UserTableItem[]>([
     age: 22,
     percentage: 60,
     pro: 0,
-    color: "var(--art-primary)",
+    color: "var(--fa-primary)",
     avatar: avatar1,
   },
   {
@@ -100,7 +100,7 @@ const tableData = reactive<UserTableItem[]>([
     age: 21,
     percentage: 20,
     pro: 0,
-    color: "var(--art-secondary)",
+    color: "var(--fa-secondary)",
     avatar: avatar2,
   },
   {
@@ -110,7 +110,7 @@ const tableData = reactive<UserTableItem[]>([
     age: 23,
     percentage: 60,
     pro: 0,
-    color: "var(--art-warning)",
+    color: "var(--fa-warning)",
     avatar: avatar3,
   },
   {
@@ -120,7 +120,7 @@ const tableData = reactive<UserTableItem[]>([
     age: 28,
     percentage: 50,
     pro: 0,
-    color: "var(--art-info)",
+    color: "var(--fa-info)",
     avatar: avatar4,
   },
   {
@@ -130,7 +130,7 @@ const tableData = reactive<UserTableItem[]>([
     age: 26,
     percentage: 70,
     pro: 0,
-    color: "var(--art-error)",
+    color: "var(--fa-error)",
     avatar: avatar5,
   },
   {
@@ -140,7 +140,7 @@ const tableData = reactive<UserTableItem[]>([
     age: 25,
     percentage: 90,
     pro: 0,
-    color: "var(--art-success)",
+    color: "var(--fa-success)",
     avatar: avatar6,
   },
 ]);
@@ -163,8 +163,8 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.art-card {
-  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+.fa-card {
+  ::deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
     color: var(--el-color-primary) !important;
     background: transparent !important;
   }
diff --git a/frontend/web/src/views/dashboard/console/modules/sales-overview.vue b/frontend/web/src/views/dashboard/console/modules/sales-overview.vue
index 99a3bd3c..7acbf4ca 100755
--- a/frontend/web/src/views/dashboard/console/modules/sales-overview.vue
+++ b/frontend/web/src/views/dashboard/console/modules/sales-overview.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="art-card h-105 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-105 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>访问量</h4>
         <p>
@@ -9,7 +9,7 @@
         </p>
       </div>
     </div>
-    <ArtLineChart
+    <FaLineChart
       height="calc(100% - 56px)"
       :data="data"
       :xAxisData="xAxisData"
diff --git a/frontend/web/src/views/dashboard/console/modules/todo-list.vue b/frontend/web/src/views/dashboard/console/modules/todo-list.vue
index fe07396b..153fb3a0 100755
--- a/frontend/web/src/views/dashboard/console/modules/todo-list.vue
+++ b/frontend/web/src/views/dashboard/console/modules/todo-list.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="art-card h-128 p-5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-128 p-5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>代办事项</h4>
         <p>
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/annual-sales.vue b/frontend/web/src/views/dashboard/ecommerce/modules/annual-sales.vue
index e5bae004..aa5e222e 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/annual-sales.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/annual-sales.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="art-card p-5 h-[28.2rem] mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card p-5 h-[28.2rem] mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>年度销售额</h4>
         <p>按季度统计</p>
       </div>
     </div>
 
-    <ArtBarChart
+    <FaBarChart
       :showAxisLabel="false"
       :showAxisLine="false"
       :showSplitLine="false"
@@ -18,7 +18,7 @@
     <div class="flex justify-around mt-10">
       <div class="flex-c">
         <div class="flex-cc size-10.5 mr-2.5 text-theme bg-theme/10 rounded-lg">
-          <ArtSvgIcon icon="ri:money-cny-circle-line" class="text-xl" />
+          <FaSvgIcon icon="ri:money-cny-circle-line" class="text-xl" />
         </div>
         <div>
           <p class="text-lg">¥200,858</p>
@@ -27,7 +27,7 @@
       </div>
       <div class="flex-c">
         <div class="flex-cc size-10.5 mr-2.5 text-theme bg-theme/10 rounded-lg">
-          <ArtSvgIcon icon="ri:heart-3-line" class="text-xl" />
+          <FaSvgIcon icon="ri:heart-3-line" class="text-xl" />
         </div>
         <div>
           <p class="text-lg">¥102,927</p>
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/banner.vue b/frontend/web/src/views/dashboard/ecommerce/modules/banner.vue
index fc65b129..a702cfaf 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/banner.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/banner.vue
@@ -1,9 +1,9 @@
 <template>
-  <ArtBasicBanner
+  <FaBasicBanner
     class="justify-center !h-53 mb-5 max-sm:!pt-8 max-sm:!h-48 max-sm:mb-4"
     :title="`欢迎回来 ${userInfo?.name}`"
     boxStyle="!bg-theme/10"
-    titleColor="var(--art-gray-900)"
+    titleColor="var(--fa-gray-900)"
     :decoration="false"
     :meteorConfig="{
       enabled: true,
@@ -23,26 +23,26 @@
     <div class="flex mt-6">
       <div class="mr-8 pr-8 border-r border-g-400 dark:border-g-300/60">
         <p class="text-3xl">
-          <ArtCountTo
+          <FaCountTo
             class="number box-title"
             :target="2340"
             :duration="1500"
             prefix="¥"
             separator=","
           />
-          <ArtSvgIcon icon="ri:arrow-right-up-line" class="text-xl text-success relative -top-2" />
+          <FaSvgIcon icon="ri:arrow-right-up-line" class="text-xl text-success relative -top-2" />
         </p>
         <p class="mt-1 text-sm text-g-700">今日销售额</p>
       </div>
       <div class="mr-8">
         <p class="text-3xl">
-          <ArtCountTo class="number box-title" :target="35" :duration="1500" suffix="%" />
-          <ArtSvgIcon icon="ri:arrow-right-up-line" class="text-xl text-success relative -top-2" />
+          <FaCountTo class="number box-title" :target="35" :duration="1500" suffix="%" />
+          <FaSvgIcon icon="ri:arrow-right-up-line" class="text-xl text-success relative -top-2" />
         </p>
         <p class="mt-1 text-sm text-g-700">较昨日</p>
       </div>
     </div>
-  </ArtBasicBanner>
+  </FaBasicBanner>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/cart-conversion-rate.vue b/frontend/web/src/views/dashboard/ecommerce/modules/cart-conversion-rate.vue
index 5d40fcef..632dfb39 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/cart-conversion-rate.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/cart-conversion-rate.vue
@@ -1,5 +1,5 @@
 <template>
-  <ArtLineChartCard
+  <FaLineChartCard
     class="mb-5 max-sm:mb-4"
     :value="2545"
     label="购物车转化率"
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/hot-commodity.vue b/frontend/web/src/views/dashboard/ecommerce/modules/hot-commodity.vue
index a1fd22f0..eaf36081 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/hot-commodity.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/hot-commodity.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="art-card p-5 h-[28.2rem] mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card p-5 h-[28.2rem] mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>热销商品</h4>
         <p>本周销售排行</p>
       </div>
     </div>
-    <ArtLineChart
+    <FaLineChart
       :showAxisLabel="false"
       :showAxisLine="false"
       :showSplitLine="false"
@@ -17,7 +17,7 @@
     <div class="mt-10 space-y-5">
       <div v-for="item in weeklyList" :key="item.title" class="flex-c">
         <div class="size-10.5 flex-cc rounded-lg" :class="item.iconBgClass">
-          <ArtSvgIcon :icon="item.icon" class="text-xl" />
+          <FaSvgIcon :icon="item.icon" class="text-xl" />
         </div>
         <div class="ml-2.5">
           <p class="text-sm font-medium text-g-800">{{ item.title }}</p>
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/hot-products-list.vue b/frontend/web/src/views/dashboard/ecommerce/modules/hot-products-list.vue
index 27d6e487..da74078e 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/hot-products-list.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/hot-products-list.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="art-card p-5 h-[27.8rem] mb-5 overflow-hidden max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card p-5 h-[27.8rem] mb-5 overflow-hidden max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>热销产品</h4>
         <p>本月销售情况</p>
@@ -93,7 +93,7 @@ const tableData = reactive<ProductItem[]>([
     sales: 423,
     percentage: 75,
     pro: 0,
-    color: "var(--art-primary)",
+    color: "var(--fa-primary)",
     image: product1,
   },
   {
@@ -104,7 +104,7 @@ const tableData = reactive<ProductItem[]>([
     sales: 652,
     percentage: 85,
     pro: 0,
-    color: "var(--art-success)",
+    color: "var(--fa-success)",
     image: product2,
   },
   {
@@ -115,7 +115,7 @@ const tableData = reactive<ProductItem[]>([
     sales: 238,
     percentage: 45,
     pro: 0,
-    color: "var(--art-warning)",
+    color: "var(--fa-warning)",
     image: product3,
   },
   {
@@ -126,7 +126,7 @@ const tableData = reactive<ProductItem[]>([
     sales: 126,
     percentage: 30,
     pro: 0,
-    color: "var(--art-error)",
+    color: "var(--fa-error)",
     image: product4,
   },
   {
@@ -137,7 +137,7 @@ const tableData = reactive<ProductItem[]>([
     sales: 321,
     percentage: 60,
     pro: 0,
-    color: "var(--art-info)",
+    color: "var(--fa-info)",
     image: product5,
   },
   {
@@ -148,7 +148,7 @@ const tableData = reactive<ProductItem[]>([
     sales: 489,
     percentage: 70,
     pro: 0,
-    color: "var(--art-secondary)",
+    color: "var(--fa-secondary)",
     image: product6,
   },
 ]);
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/product-sales.vue b/frontend/web/src/views/dashboard/ecommerce/modules/product-sales.vue
index a7a282d7..80985c1d 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/product-sales.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/product-sales.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="art-card p-5 pt-3.5 mb-5 h-46 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card p-5 pt-3.5 mb-5 h-46 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4 class="text-2xl">
           <span>14.5k</span>
-          <ArtSvgIcon icon="ri:arrow-right-up-line" class="text-success text-lg ml-1" />
+          <FaSvgIcon icon="ri:arrow-right-up-line" class="text-success text-lg ml-1" />
         </h4>
         <p>销售量</p>
       </div>
     </div>
 
-    <ArtBarChart
+    <FaBarChart
       :showAxisLabel="false"
       :showAxisLine="false"
       :showSplitLine="false"
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/recent-transaction.vue b/frontend/web/src/views/dashboard/ecommerce/modules/recent-transaction.vue
index 030e9435..f31109be 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/recent-transaction.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/recent-transaction.vue
@@ -1,5 +1,5 @@
 <template>
-  <ArtTimelineListCard
+  <FaTimelineListCard
     :list="timelineData"
     title="最近交易"
     subtitle="今日订单动态"
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/sales-classification.vue b/frontend/web/src/views/dashboard/ecommerce/modules/sales-classification.vue
index 223b75a1..d26ca977 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/sales-classification.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/sales-classification.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="art-card p-5 mb-5 h-105 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card p-5 mb-5 h-105 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>销售分类</h4>
         <p>按产品类别</p>
       </div>
     </div>
 
-    <ArtRingChart
+    <FaRingChart
       :data="[
         { value: 30, name: '电子产品' },
         { value: 55, name: '服装鞋包' },
@@ -23,7 +23,7 @@
     <div class="flex justify-around">
       <div class="flex-c">
         <div class="flex-cc size-10.5 mr-2.5 text-theme bg-theme/10 rounded-lg">
-          <ArtSvgIcon icon="ri:money-cny-circle-line" class="text-xl" />
+          <FaSvgIcon icon="ri:money-cny-circle-line" class="text-xl" />
         </div>
         <div>
           <p class="text-lg">¥500,458</p>
@@ -32,7 +32,7 @@
       </div>
       <div class="flex-c">
         <div class="flex-cc size-10.5 mr-2.5 text-theme bg-theme/10 rounded-lg">
-          <ArtSvgIcon icon="ri:heart-3-line" class="text-xl" />
+          <FaSvgIcon icon="ri:heart-3-line" class="text-xl" />
         </div>
         <div>
           <p class="text-lg">¥130,580</p>
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/sales-growth.vue b/frontend/web/src/views/dashboard/ecommerce/modules/sales-growth.vue
index 9d734337..1fb56e01 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/sales-growth.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/sales-growth.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="art-card p-5 pt-3.5 mb-5 h-46 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card p-5 pt-3.5 mb-5 h-46 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4 class="text-2xl">
           <span>12%</span>
-          <ArtSvgIcon icon="ri:arrow-right-up-line" class="text-success text-lg ml-1" />
+          <FaSvgIcon icon="ri:arrow-right-up-line" class="text-success text-lg ml-1" />
         </h4>
         <p>增长</p>
       </div>
     </div>
 
-    <ArtLineChart
+    <FaLineChart
       :showAreaColor="true"
       :showAxisLabel="false"
       :showAxisLine="false"
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/sales-trend.vue b/frontend/web/src/views/dashboard/ecommerce/modules/sales-trend.vue
index b5adc44c..750128e0 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/sales-trend.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/sales-trend.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="art-card p-5 mb-5 h-105 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card p-5 mb-5 h-105 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4>销售趋势</h4>
         <p>月度销售对比</p>
       </div>
     </div>
 
-    <ArtDualBarCompareChart
+    <FaDualBarCompareChart
       :positiveData="[50, 80, 120, 90, 60]"
       :negativeData="[30, 60, 90, 70, 40]"
       :xAxisData="['一月', '二月', '三月', '四月', '五月']"
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/total-order-volume.vue b/frontend/web/src/views/dashboard/ecommerce/modules/total-order-volume.vue
index 8c2764d4..e2c192bb 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/total-order-volume.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/total-order-volume.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="art-card h-53 p-5 pt-3.5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-53 p-5 pt-3.5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4 class="text-2xl font-medium">205,216</h4>
         <p>这个月增长</p>
       </div>
     </div>
 
-    <ArtRingChart
+    <FaRingChart
       :data="[
         { value: 30, name: '已完成' },
         { value: 25, name: '处理中' },
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/total-products.vue b/frontend/web/src/views/dashboard/ecommerce/modules/total-products.vue
index f452d6f3..6e52798e 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/total-products.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/total-products.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="art-card h-53 p-5 pt-3.5 mb-5 max-sm:mb-4">
-    <div class="art-card-header">
+  <div class="fa-card h-53 p-5 pt-3.5 mb-5 max-sm:mb-4">
+    <div class="fa-card-header">
       <div class="title">
         <h4 class="text-2xl font-medium">55,231</h4>
         <p>商品总数</p>
       </div>
     </div>
 
-    <ArtBarChart
+    <FaBarChart
       :showAxisLabel="false"
       :showAxisLine="false"
       :showSplitLine="false"
diff --git a/frontend/web/src/views/dashboard/ecommerce/modules/transaction-list.vue b/frontend/web/src/views/dashboard/ecommerce/modules/transaction-list.vue
index fe87febd..e46a6fe5 100644
--- a/frontend/web/src/views/dashboard/ecommerce/modules/transaction-list.vue
+++ b/frontend/web/src/views/dashboard/ecommerce/modules/transaction-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <ArtDataListCard
+  <FaDataListCard
     class="mb-5 max-sm:mb-4"
     :maxCount="4"
     :list="dataList"
diff --git a/frontend/web/src/views/dashboard/index.vue b/frontend/web/src/views/dashboard/index.vue
index 35dcde9a..6db021f8 100644
--- a/frontend/web/src/views/dashboard/index.vue
+++ b/frontend/web/src/views/dashboard/index.vue
@@ -149,7 +149,7 @@
                       class="workplace-quick-row__icon"
                       :style="{ color: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
                     >
-                      <FaMenuRouteIcon :icon="item.icon || 'menu'" />
+                      <MenuRouteIcon :icon="item.icon || 'menu'" />
                     </div>
                     <div class="workplace-quick-row__text">
                       <span class="workplace-quick-row__title">{{ item.title }}</span>
@@ -190,13 +190,13 @@
       <h2 class="workplace-banners-showcase__title">基础 & 自定义按钮+背景色</h2>
       <ElRow :gutter="20">
         <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <ArtBasicBanner
+          <FaBasicBanner
             title="数据中心运行状态"
             subtitle="系统访问量同比增长 23%，所有服务运行稳定，数据监控正常。"
           />
         </ElCol>
         <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <ArtBasicBanner
+          <FaBasicBanner
             title="欢迎使用 Art Design Pro"
             subtitle="基于 Vue 3 + TypeScript + Element Plus 构建的现代化管理系统。"
             titleColor="#333"
@@ -205,7 +205,7 @@
             :buttonConfig="{
               show: true,
               text: '开始探索',
-              color: 'var(--art-success)',
+              color: 'var(--fa-success)',
               textColor: '#fff',
               radius: '6px',
             }"
@@ -218,7 +218,7 @@
 
       <ElRow :gutter="20">
         <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <ArtBasicBanner
+          <FaBasicBanner
             title="探索星空计划"
             subtitle="加入我们的天文观测活动，发现宇宙的奥秘"
             boxStyle="!bg-[#FF8AAB]"
@@ -234,7 +234,7 @@
           />
         </ElCol>
         <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <ArtBasicBanner
+          <FaBasicBanner
             boxStyle="!bg-[#70B1FF]"
             :imageConfig="{
               src: bannerIcon5,
@@ -257,56 +257,56 @@
                 <ElButton type="primary" color="#04A1FF">查看文档</ElButton>
               </div>
             </template>
-          </ArtBasicBanner>
+          </FaBasicBanner>
         </ElCol>
       </ElRow>
 
       <h2 class="workplace-banners-showcase__title">抽象配置方案（Preset 模式）</h2>
       <ElRow :gutter="20">
         <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <ArtBasicBanner v-bind="presetBanners.marketing" />
+          <FaBasicBanner v-bind="presetBanners.marketing" />
         </ElCol>
         <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <ArtBasicBanner v-bind="presetBanners.info" />
+          <FaBasicBanner v-bind="presetBanners.info" />
         </ElCol>
       </ElRow>
 
       <h2 class="workplace-banners-showcase__title">卡片横幅</h2>
       <ElRow :gutter="20">
         <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
-          <ArtCardBanner
+          <FaCardBanner
             title="系统运行正常"
             description="所有核心服务运行稳定，响应时间在正常范围内。"
           />
         </ElCol>
         <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
-          <ArtCardBanner
+          <FaCardBanner
             :image="bannerIcon2"
             title="重要消息通知"
             description="您有 3 条待处理的重要消息，请及时查看。"
             :button="{
               show: true,
               text: '查看详情',
-              color: 'var(--art-warning)',
+              color: 'var(--fa-warning)',
               textColor: '#fff',
             }"
           />
         </ElCol>
         <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
-          <ArtCardBanner
+          <FaCardBanner
             :image="bannerIcon3"
             title="数据分析报告"
             description="本周业务数据分析报告已完成，请查看关键指标。"
             :button="{
               show: true,
               text: '下载报告',
-              color: 'var(--art-error)',
+              color: 'var(--fa-error)',
               textColor: '#fff',
             }"
           />
         </ElCol>
         <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
-          <ArtCardBanner
+          <FaCardBanner
             :image="bannerIcon4"
             title="版本更新提醒"
             description="Art Design Pro v2.1.0 已发布，包含性能优化和新功能。"
@@ -348,7 +348,7 @@
               </div>
             </template>
             <div class="workplace-ops-card__body workplace-ops-card__body--calendar">
-              <FaCalendar />
+              <Calendar />
             </div>
           </ElCard>
         </ElCol>
@@ -364,8 +364,8 @@ defineOptions({
 });
 
 import { useUserStore } from "@stores/index";
-import FaMenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
-import FaCalendar from "@/components/others/fa-calendar/index.vue";
+import MenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
+import Calendar from "@/components/others/fa-calendar/index.vue";
 import { greetings } from "@utils/common";
 import type { MenuTable } from "@/api/module_system/menu";
 import { ref, onMounted, onUnmounted, computed } from "vue";
@@ -528,28 +528,28 @@ const presetBanners = {
   marketing: {
     title: "限时优惠活动",
     subtitle: "精选商品 48 小时闪购，最高享受 7 折优惠，数量有限！",
-    titleColor: "var(--art-gray-900)",
-    subtitleColor: "var(--art-gray-900)",
+    titleColor: "var(--fa-gray-900)",
+    subtitleColor: "var(--fa-gray-900)",
     boxStyle: "!bg-success/15",
     meteorConfig: { enabled: true, count: 15 },
     buttonConfig: {
       show: true,
       text: "立即抢购",
-      color: "var(--art-success)",
+      color: "var(--fa-success)",
       textColor: "#fff",
     },
   },
   info: {
     title: "服务到期提醒",
     subtitle: "您的高级服务将在 7 天后到期，请及时续费以继续享受完整功能。",
-    titleColor: "var(--art-gray-900)",
-    subtitleColor: "var(--art-gray-900)",
+    titleColor: "var(--fa-gray-900)",
+    subtitleColor: "var(--fa-gray-900)",
     boxStyle: "!bg-theme/15",
     meteorConfig: { enabled: true, count: 15 },
     buttonConfig: {
       show: true,
       text: "立即续费",
-      color: "var(--art-secondary)",
+      color: "var(--fa-secondary)",
       textColor: "#fff",
     },
   },
@@ -727,13 +727,13 @@ const currentUser = {
   border: 1px solid var(--el-border-color-lighter);
   border-radius: var(--workplace-radius);
 
-  :deep(.el-card__header) {
+  ::deep(.el-card__header) {
     border-bottom-color: var(--el-border-color-extra-light);
   }
 }
 
 .workplace-calendar-card {
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     padding: 8px 10px 10px;
   }
 }
@@ -756,7 +756,7 @@ const currentUser = {
 
 /* —— 顶栏 —— */
 .workplace-hero-card {
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     padding: 20px 22px;
   }
 }
@@ -841,7 +841,7 @@ const currentUser = {
 }
 
 .workplace-modules-card {
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -857,7 +857,7 @@ const currentUser = {
 }
 
 .workplace-bookmarks-card {
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -937,7 +937,7 @@ const currentUser = {
 }
 
 .workplace-section-card {
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     padding: 12px 18px 18px;
   }
 }
@@ -976,7 +976,7 @@ const currentUser = {
   width: 100%;
   min-width: 0;
 
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
diff --git a/frontend/web/src/views/dashboard/map/index.vue b/frontend/web/src/views/dashboard/map/index.vue
index 09327d10..e794e9c5 100644
--- a/frontend/web/src/views/dashboard/map/index.vue
+++ b/frontend/web/src/views/dashboard/map/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-content mb-5" element-loading-text="加载中...">
-    <ArtMapChart />
+    <FaMapChart />
   </div>
 </template>
 
@@ -13,7 +13,5 @@ defineOptions({ name: "DashboardMap" });
  * 异步加载地图组件
  * 减少初始加载体积
  */
-const ArtMapChart = defineAsyncComponent(
-  () => import("@/components/charts/fa-map-chart/index.vue")
-);
+const FaMapChart = defineAsyncComponent(() => import("@/components/charts/fa-map-chart/index.vue"));
 </script>
diff --git a/frontend/web/src/views/dashboard/pricing/index.vue b/frontend/web/src/views/dashboard/pricing/index.vue
index 2136c7ef..65e06aa4 100644
--- a/frontend/web/src/views/dashboard/pricing/index.vue
+++ b/frontend/web/src/views/dashboard/pricing/index.vue
@@ -5,7 +5,7 @@
         class="mb-2 text-4xl font-medium max-sm:text-3xl flex flex-wrap justify-center items-baseline gap-x-2 gap-y-1"
       >
         <span>超过</span>
-        <ArtCountTo
+        <FaCountTo
           class="text-4xl font-medium max-sm:text-3xl"
           :target="53476"
           :duration="2000"
@@ -34,7 +34,7 @@
                 {{ plan.description }}
               </p>
               <div class="mt-7.5 flex flex-wrap items-baseline gap-x-1">
-                <ArtCountTo
+                <FaCountTo
                   class="text-3xl font-medium"
                   :target="plan.price"
                   :duration="1400"
diff --git a/frontend/web/src/views/dashboard/tutorial/index.vue b/frontend/web/src/views/dashboard/tutorial/index.vue
index c1836d7d..934b0ee9 100644
--- a/frontend/web/src/views/dashboard/tutorial/index.vue
+++ b/frontend/web/src/views/dashboard/tutorial/index.vue
@@ -1,22 +1,25 @@
-<!-- 操作教程：内置视频演示（可改为自有 CDN / 资源地址） -->
+<!-- 操作手册：视频演示 + 全功能验收正文 -->
 <template>
-  <div class="page-content tutorial-page">
-    <div class="max-w-200 mx-auto">
-      <h1 class="text-2xl font-medium text-g-900 dark:text-g-50 mb-2">操作教程</h1>
-      <p class="text-sm text-g-600 mb-6">
-        以下为系统常用操作演示视频，可随时暂停、调速与全屏观看。正式环境请将视频地址替换为自有素材。
+  <div class="page-content manual-page">
+    <div class="manual-page__inner mx-auto max-w-[1200px] px-4 pb-8">
+      <!-- 标题 -->
+      <h1 class="mb-2 text-2xl font-medium text-g-900 dark:text-g-50">
+        {{ t("manualPage.title") }}
+      </h1>
+      <p class="mb-6 text-sm text-g-600 dark:text-g-400">
+        {{ t("manualPage.intro") }}
       </p>
 
       <!-- Tab 切换：视频 / 手册 -->
       <ElTabs v-model="activeTab" class="manual-page__tabs">
         <!-- 视频演示 Tab -->
         <ElTabPane :label="t('manualPage.videoTab')" name="video">
-          <div class="art-card-sm mt-2 p-5">
+          <div class="fa-card-sm mt-2 p-5">
             <p class="mb-4 text-sm text-g-600 dark:text-g-400">
               {{ t("manualPage.videoHint") }}
             </p>
             <div class="manual-page__player max-w-full">
-              <ArtVideoPlayer
+              <FaVideoPlayer
                 :player-id="PLAYER_ID"
                 :video-url="videoUrl"
                 :poster-url="posterUrl"
@@ -82,7 +85,7 @@
               <!-- 右侧内容区（滚动） -->
               <ElScrollbar
                 ref="scrollbarRef"
-                class="manual-feature-body__scrollbar art-card-sm rounded-custom-sm"
+                class="manual-feature-body__scrollbar fa-card-sm rounded-custom-sm"
                 max-height="min(78vh, 880px)"
               >
                 <!-- 功能验收手册正文内容 -->
@@ -539,7 +542,7 @@
                             </li>
                             <li>
                               <strong>导入弹窗</strong>
-                              — ArtImportDialog, 模板 user_import_template.xlsx
+                              — FaImportDialog, 模板 user_import_template.xlsx
                             </li>
                             <li>
                               <strong>导出弹窗</strong>
@@ -777,20 +780,276 @@
 </template>
 
 <script setup lang="ts">
+import { Search } from "@element-plus/icons-vue";
+import { computed, ref } from "vue";
 import lockImg from "@imgs/lock/bg_dark.webp";
+import { MANUAL_MODULES_AFTER_SYSTEM, MANUAL_SYSTEM_TAIL_PAGES } from "./manualSections";
+import { manualModuleMatchesQuery, manualPageMatchesQuery } from "./manualTocSearch";
 
 defineOptions({ name: "DashboardTutorial" });
 
-/** 演示用在线 MP4，上线后建议改为自有 OSS / 静态资源地址 */
-const DEFAULT_VIDEO =
-  "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4";
+const { t } = useI18n();
 
-const videoUrl = ref(DEFAULT_VIDEO);
+const manualSystemTailPages = MANUAL_SYSTEM_TAIL_PAGES;
+const manualModulesAfterSystem = MANUAL_MODULES_AFTER_SYSTEM;
+
+// ============ 类型定义 ============
+type ManualPageLink = {
+  anchor: string;
+  title: string;
+};
+
+type ManualModule = {
+  anchor: string;
+  title: string;
+  pages: ManualPageLink[];
+};
+
+// ============ 配置常量 ============
+
+/** 手册目录结构 */
+const MANUAL_TOC: ManualModule[] = [
+  {
+    anchor: "mod-system",
+    title: "一、系统管理",
+    pages: [
+      { anchor: "page-user", title: "用户管理" },
+      { anchor: "page-role", title: "角色管理" },
+      { anchor: "page-menu", title: "菜单管理" },
+      { anchor: "page-dept", title: "部门管理" },
+      { anchor: "page-position", title: "岗位管理" },
+      { anchor: "page-dict", title: "字典管理" },
+      { anchor: "page-param", title: "参数配置" },
+      { anchor: "page-notice", title: "通知公告" },
+      { anchor: "page-tenant", title: "租户管理" },
+      { anchor: "page-log", title: "操作日志" },
+      { anchor: "page-login", title: "登录页" },
+    ],
+  },
+  {
+    anchor: "mod-monitor",
+    title: "二、监控管理",
+    pages: [
+      { anchor: "page-online", title: "在线用户" },
+      { anchor: "page-cache", title: "缓存管理" },
+      { anchor: "page-resource", title: "文件管理" },
+      { anchor: "page-server", title: "服务监控" },
+    ],
+  },
+  {
+    anchor: "mod-task",
+    title: "三、任务管理",
+    pages: [
+      { anchor: "page-cronjob", title: "调度器监控" },
+      { anchor: "page-cronnode", title: "节点管理" },
+      { anchor: "page-workflow", title: "流程编排" },
+      { anchor: "page-nodetype", title: "编排节点类型" },
+    ],
+  },
+  {
+    anchor: "mod-ai",
+    title: "四、AI 模块",
+    pages: [
+      { anchor: "page-ai-chat", title: "AI智能助手" },
+      { anchor: "page-ai-fachat", title: "会话聊天" },
+      { anchor: "page-ai-memory", title: "会话记忆" },
+    ],
+  },
+  {
+    anchor: "mod-generator",
+    title: "五、代码生成器",
+    pages: [{ anchor: "page-gencode", title: "代码生成" }],
+  },
+  {
+    anchor: "mod-app",
+    title: "六、应用管理",
+    pages: [{ anchor: "page-portal", title: "插件市场" }],
+  },
+  {
+    anchor: "mod-example",
+    title: "七、示例模块",
+    pages: [
+      { anchor: "page-demo", title: "示例管理" },
+      { anchor: "page-demo01", title: "三级菜单" },
+    ],
+  },
+  {
+    anchor: "mod-dashboard",
+    title: "八、仪表盘",
+    pages: [
+      { anchor: "page-home", title: "首页" },
+      { anchor: "page-profile", title: "个人中心" },
+      { anchor: "page-changelog", title: "更新日志" },
+      { anchor: "page-db-workplace", title: "工作台" },
+      { anchor: "page-db-console", title: "控制台" },
+      { anchor: "page-db-analysis", title: "分析页" },
+      { anchor: "page-db-ecommerce", title: "电子商务" },
+      { anchor: "page-db-map", title: "地图" },
+      { anchor: "page-db-pricing", title: "定价" },
+      { anchor: "page-db-article", title: "文章管理" },
+      { anchor: "page-db-tutorial", title: "教程" },
+    ],
+  },
+  {
+    anchor: "mod-layout",
+    title: "九、布局与通用功能",
+    pages: [
+      { anchor: "layout-main", title: "主布局" },
+      { anchor: "layout-sidebar", title: "侧栏菜单" },
+      { anchor: "layout-header", title: "顶栏" },
+      { anchor: "layout-worktab", title: "标签页" },
+      { anchor: "layout-settings", title: "设置面板" },
+      { anchor: "layout-notification", title: "通知" },
+      { anchor: "layout-search", title: "全局搜索" },
+      { anchor: "layout-lock", title: "锁屏" },
+      { anchor: "layout-user", title: "用户菜单" },
+      { anchor: "layout-theme", title: "主题切换" },
+      { anchor: "layout-lang", title: "语言切换" },
+    ],
+  },
+  {
+    anchor: "mod-exception",
+    title: "十、异常页",
+    pages: [
+      { anchor: "page-401", title: "401" },
+      { anchor: "page-403", title: "403" },
+      { anchor: "page-404", title: "404" },
+      { anchor: "page-500", title: "500" },
+    ],
+  },
+  {
+    anchor: "mod-swagger",
+    title: "十一、接口文档（API）",
+    pages: [
+      { anchor: "page-swagger", title: "Swagger文档" },
+      { anchor: "page-redoc", title: "Redoc文档" },
+      { anchor: "page-ljdoc", title: "LangJin文档" },
+    ],
+  },
+];
+
+/** 视频资源配置 */
+const VIDEO_CONFIG = {
+  /** 默认视频地址（建议上线后改为自有 OSS / 静态资源） */
+  DEFAULT_URL:
+    "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
+  /** 播放器 ID */
+  PLAYER_ID: "dashboard-tutorial-player",
+} as const;
+
+const { DEFAULT_URL, PLAYER_ID } = VIDEO_CONFIG;
+
+// ============ 状态管理 ============
+
+const activeTab = ref<"video" | "manual">("video");
+const videoUrl = ref(DEFAULT_URL);
 const posterUrl = ref(lockImg);
+const scrollbarRef = ref<{ $el?: HTMLElement } | null>(null);
+const tocFilter = ref("");
+
+// ============ 计算属性 ============
+
+/** 过滤后的目录（标题 + manualTocSearch 别名，兼容改版前后检索词） */
+const filteredToc = computed((): ManualModule[] => {
+  const q = tocFilter.value.trim();
+  if (!q) return MANUAL_TOC;
+
+  return MANUAL_TOC.filter((mod) => {
+    if (manualModuleMatchesQuery(mod.title, mod.anchor, q)) return true;
+    return mod.pages.some((p) => manualPageMatchesQuery(p.title, p.anchor, q));
+  }).map((mod) => {
+    if (manualModuleMatchesQuery(mod.title, mod.anchor, q)) return mod;
+    return {
+      ...mod,
+      pages: mod.pages.filter((p) => manualPageMatchesQuery(p.title, p.anchor, q)),
+    };
+  });
+});
+
+// ============ 方法 ============
+
+/** 获取滚动容器元素 */
+function getScrollWrap(): HTMLElement | null {
+  const root = scrollbarRef.value?.$el;
+  if (!root) return null;
+  return root.querySelector<HTMLElement>(".el-scrollbar__wrap");
+}
+
+/** 滚动到指定锚点 */
+function scrollToAnchor(anchorId: string) {
+  const el = document.getElementById(anchorId);
+  const wrap = getScrollWrap();
+  if (!el) return;
+
+  if (!wrap) {
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+    return;
+  }
+
+  const wrapRect = wrap.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+  const nextTop = elRect.top - wrapRect.top + wrap.scrollTop - 12;
+  wrap.scrollTo({ top: Math.max(0, nextTop), behavior: "smooth" });
+}
+
+/** 处理文档内锚点点击 */
+function handleAnchorClick(ev: MouseEvent) {
+  const a = (ev.target as HTMLElement | null)?.closest("a");
+  const href = a?.getAttribute("href");
+  if (!href?.startsWith("#")) return;
+  ev.preventDefault();
+  scrollToAnchor(href.slice(1));
+}
 </script>
 
 <style scoped lang="scss">
-.tutorial-page__player {
+.manual-page {
+  &__player {
+    width: 100%;
+  }
+
+  /* Tab 内容区占满宽度，避免内部双栏网格被压窄 */
+  &__tabs {
+    width: 100%;
+
+    ::deep(.el-tab-pane) {
+      box-sizing: border-box;
+    }
+  }
+}
+
+.manual-feature-body {
+  &__toolbar {
+    margin-bottom: 12px;
+  }
+
+  &__filter {
+    max-width: 320px;
+  }
+
+  &__layout {
+    display: grid;
+    grid-template-columns: 220px minmax(0, 1fr);
+    gap: 16px;
+    align-items: start;
+    width: 100%;
+  }
+
+  /* 左侧栏固定宽度；勿设 min-width:0，否则在 Tabs/网格内易被压成细条 */
+  &__aside {
+    width: 220px;
+    min-width: 220px;
+    max-width: 220px;
+  }
+
+  &__scrollbar {
+    min-width: 0;
+  }
+}
+
+// 侧边导航样式
+.manual-nav {
+  box-sizing: border-box;
   width: 100%;
   max-height: min(78vh, 880px);
   padding: 10px 12px;
@@ -903,8 +1162,7 @@ const posterUrl = ref(lockImg);
   .toc-l2 {
     margin-top: 0.4rem;
     line-height: 1.85;
-    word-break: break-all;
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
   }
 
   .module {
diff --git a/frontend/web/src/views/dashboard/tutorial/manualSections.ts b/frontend/web/src/views/dashboard/tutorial/manualSections.ts
index f4e09acd..7bc087c7 100644
--- a/frontend/web/src/views/dashboard/tutorial/manualSections.ts
+++ b/frontend/web/src/views/dashboard/tutorial/manualSections.ts
@@ -88,7 +88,7 @@ export const MANUAL_SYSTEM_TAIL_PAGES: CompactManualPage[] = [
     notes: [
       "检索：FaSearchBar（含创建人 UserTableSelect）。",
       "工具栏：新增、导出、批量删除、批量更多(patch)、刷新、列配置。",
-      "弹层：详情；新增/编辑 Dialog；正文为富文本 `ArtWangEditor`；HTML 预览。",
+      "弹层：详情；新增/编辑 Dialog；正文为富文本 `FaWangEditor`；HTML 预览。",
       "权限：`module_system:notice:create|export|delete|patch` + 行级操作。",
     ],
   },
@@ -433,43 +433,43 @@ export const MANUAL_MODULES_AFTER_SYSTEM: ManualModuleSection[] = [
       {
         anchor: "layout-sidebar",
         title: "侧栏菜单",
-        path: "../layouts/fa-menus/**",
+        path: "../layouts/art-menus/**",
         notes: ["菜单折叠、搜索、递归子菜单；与路由 meta.icon/title 绑定。"],
       },
       {
         anchor: "layout-header",
         title: "顶栏",
-        path: "../layouts/fa-header-bar/**",
+        path: "../layouts/art-header-bar/**",
         notes: ["面包屑、快速入口、全屏、通知铃铛区域。"],
       },
       {
         anchor: "layout-worktab",
         title: "标签页",
-        path: "../layouts/fa-work-tab/**",
+        path: "../layouts/art-work-tab/**",
         notes: ["多标签打开、固定钉住、关闭其他；与 keep-alive 协同。"],
       },
       {
         anchor: "layout-settings",
         title: "设置面板",
-        path: "../layouts/fa-settings-panel/**",
+        path: "../layouts/art-settings-panel/**",
         notes: ["主题、色弱、标签栏、菜单布局等本地偏好持久化。"],
       },
       {
         anchor: "layout-notification",
         title: "通知",
-        path: "../layouts/fa-notification/**",
+        path: "../layouts/art-notification/**",
         notes: ["通知下拉列表；已读状态；路由跳转。"],
       },
       {
         anchor: "layout-search",
         title: "全局搜索",
-        path: "../layouts/fa-global-search/**",
+        path: "../layouts/art-global-search/**",
         notes: ["Ctrl/⌘+K 打开全局搜索（`art-global-search` 监听 keydown）。"],
       },
       {
         anchor: "layout-lock",
         title: "锁屏",
-        path: "../layouts/fa-screen-lock/index.vue",
+        path: "../layouts/art-screen-lock/index.vue",
         notes: [
           "锁屏全屏页；背景随明暗主题切换（`@imgs/lock` → `src/assets/images/lock`）；顶栏用户菜单进入。",
         ],
@@ -477,13 +477,13 @@ export const MANUAL_MODULES_AFTER_SYSTEM: ManualModuleSection[] = [
       {
         anchor: "layout-user",
         title: "用户菜单",
-        path: "../layouts/fa-header-bar/**",
+        path: "../layouts/art-header-bar/**",
         notes: ["头像下拉：文档、教程、锁屏、退出等。"],
       },
       {
         anchor: "layout-theme",
         title: "主题切换",
-        path: "../layouts/fa-settings-panel/**",
+        path: "../layouts/art-settings-panel/**",
         notes: ["明暗色、主题色；CSS 变量与 Element Plus 深色。"],
       },
       {
diff --git a/frontend/web/src/views/dashboard/workplace/index.vue b/frontend/web/src/views/dashboard/workplace/index.vue
index f2700bda..a7924adf 100644
--- a/frontend/web/src/views/dashboard/workplace/index.vue
+++ b/frontend/web/src/views/dashboard/workplace/index.vue
@@ -40,7 +40,7 @@
                   href="https://blog.csdn.net/weixin_46768253/article/details/149569141?spm=1001.2014.3001.5502"
                   target="_blank"
                 >
-                  <ArtSvgIcon :icon="resolveIconForFaSvgIcon('csdn')" class="text-lg" />
+                  <FaSvgIcon :icon="resolveIconForFaSvgIcon('csdn')" class="text-lg" />
                 </ElLink>
               </div>
             </div>
@@ -54,21 +54,21 @@
               </div>
               <div class="mt-3 whitespace-nowrap">
                 <ElLink href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank">
-                  <ArtSvgIcon
+                  <FaSvgIcon
                     :icon="resolveIconForFaSvgIcon('gitee')"
                     class="text-lg text-[#F76560]"
                   />
                 </ElLink>
                 <ElDivider direction="vertical" />
                 <ElLink href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank">
-                  <ArtSvgIcon
+                  <FaSvgIcon
                     :icon="resolveIconForFaSvgIcon('github')"
                     class="text-lg text-[#4080FF]"
                   />
                 </ElLink>
                 <ElDivider direction="vertical" />
                 <ElLink href="https://gitcode.com/qq_36002987/FastapiAdmin" target="_blank">
-                  <ArtSvgIcon
+                  <FaSvgIcon
                     :icon="resolveIconForFaSvgIcon('gitcode')"
                     class="text-lg text-[#FF9A2E]"
                   />
@@ -83,18 +83,15 @@
           <div class="flex justify-end space-x-4 overflow-x-auto">
             <!-- 仓库图标 -->
             <ElLink href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank">
-              <ArtSvgIcon :icon="resolveIconForFaSvgIcon('gitee')" class="text-lg text-[#F76560]" />
+              <FaSvgIcon :icon="resolveIconForFaSvgIcon('gitee')" class="text-lg text-[#F76560]" />
             </ElLink>
             <ElDivider direction="vertical" />
             <ElLink href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank">
-              <ArtSvgIcon
-                :icon="resolveIconForFaSvgIcon('github')"
-                class="text-lg text-[#4080FF]"
-              />
+              <FaSvgIcon :icon="resolveIconForFaSvgIcon('github')" class="text-lg text-[#4080FF]" />
             </ElLink>
             <ElDivider direction="vertical" />
             <ElLink href="https://gitcode.com/qq_36002987/FastapiAdmin" target="_blank">
-              <ArtSvgIcon
+              <FaSvgIcon
                 :icon="resolveIconForFaSvgIcon('gitcode')"
                 class="text-lg text-[#FF9A2E]"
               />
@@ -132,7 +129,7 @@
                 未连接
               </span>
             </div>
-            <ArtSvgIcon
+            <FaSvgIcon
               :icon="resolveIconForFaSvgIcon('people')"
               class="size-8 animate-[pulse_2s_infinite]"
             />
@@ -193,7 +190,7 @@
                     {{ formatGrowthRate(visitStatsData.uvGrowthRate) }}
                   </span>
                 </div>
-                <ArtSvgIcon :icon="resolveIconForFaSvgIcon('visitor')" class="size-8" />
+                <FaSvgIcon :icon="resolveIconForFaSvgIcon('visitor')" class="size-8" />
               </div>
 
               <div class="flex items-center justify-between mt-2 text-sm text-g-600">
@@ -253,7 +250,7 @@
                     {{ formatGrowthRate(visitStatsData.pvGrowthRate) }}
                   </span>
                 </div>
-                <ArtSvgIcon :icon="resolveIconForFaSvgIcon('browser')" class="size-8" />
+                <FaSvgIcon :icon="resolveIconForFaSvgIcon('browser')" class="size-8" />
               </div>
 
               <div class="flex items-center justify-between mt-2 text-sm text-g-600">
@@ -366,7 +363,7 @@ import {
   TopRight,
   UserFilled,
 } from "@element-plus/icons-vue";
-import ArtSvgIcon from "@/components/base/fa-svg-icon/index.vue";
+import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
 import { greetings } from "@utils/common";
 import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
 
diff --git a/frontend/web/src/views/exception/401/index.vue b/frontend/web/src/views/exception/401/index.vue
index a7912308..d834b6e5 100755
--- a/frontend/web/src/views/exception/401/index.vue
+++ b/frontend/web/src/views/exception/401/index.vue
@@ -1,6 +1,6 @@
 <!-- 401页面 -->
 <template>
-  <ArtException
+  <FaException
     :data="{
       title: '401',
       desc: $t('exceptionPage.401'),
diff --git a/frontend/web/src/views/exception/403/index.vue b/frontend/web/src/views/exception/403/index.vue
index 439d17a9..ed623faa 100755
--- a/frontend/web/src/views/exception/403/index.vue
+++ b/frontend/web/src/views/exception/403/index.vue
@@ -1,6 +1,6 @@
 <!-- 403页面 -->
 <template>
-  <ArtException
+  <FaException
     :data="{
       title: '403',
       desc: $t('exceptionPage.403'),
diff --git a/frontend/web/src/views/exception/404/index.vue b/frontend/web/src/views/exception/404/index.vue
index b194909c..d3da6a51 100755
--- a/frontend/web/src/views/exception/404/index.vue
+++ b/frontend/web/src/views/exception/404/index.vue
@@ -1,6 +1,6 @@
 <!-- 404页面 -->
 <template>
-  <ArtException
+  <FaException
     :data="{
       title: '404',
       desc: $t('exceptionPage.404'),
diff --git a/frontend/web/src/views/exception/500/index.vue b/frontend/web/src/views/exception/500/index.vue
index f91f81d4..b63f0017 100755
--- a/frontend/web/src/views/exception/500/index.vue
+++ b/frontend/web/src/views/exception/500/index.vue
@@ -1,6 +1,6 @@
 <!-- 500页面 -->
 <template>
-  <ArtException
+  <FaException
     :data="{
       title: '500',
       desc: $t('exceptionPage.500'),
diff --git a/frontend/web/src/views/module_ai/chat/components/ChatInput.vue b/frontend/web/src/views/module_ai/chat/components/ChatInput.vue
index af3d533f..05dc8899 100644
--- a/frontend/web/src/views/module_ai/chat/components/ChatInput.vue
+++ b/frontend/web/src/views/module_ai/chat/components/ChatInput.vue
@@ -225,7 +225,7 @@ defineExpose({
         flex: 1;
         min-width: 0;
 
-        :deep(.el-textarea__inner) {
+        ::deep(.el-textarea__inner) {
           padding: 0;
           line-height: 1.6;
           color: var(--el-text-color-primary);
@@ -235,7 +235,7 @@ defineExpose({
           box-shadow: none;
         }
 
-        :deep(.el-textarea) {
+        ::deep(.el-textarea) {
           padding: 0;
         }
       }
diff --git a/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue b/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
index 323724a9..2a78c2de 100644
--- a/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
+++ b/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
@@ -2,12 +2,12 @@
   <div class="chat-navbar">
     <div class="navbar-left">
       <button class="collapse-btn" @click="toggleSidebar">
-        <ArtSvgIcon
+        <FaSvgIcon
           v-if="!props.isSidebarCollapsed"
           :icon="resolveIconForFaSvgIcon('layout_leftbar_close_line')"
           class="size-6"
         />
-        <ArtSvgIcon
+        <FaSvgIcon
           v-else
           :icon="resolveIconForFaSvgIcon('layout_leftbar_open_line')"
           class="size-6"
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import ArtSvgIcon from "@/components/base/fa-svg-icon/index.vue";
+import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
 import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
 import { computed } from "vue";
 import { Connection, Loading, Warning, Delete, Setting } from "@element-plus/icons-vue";
@@ -145,7 +145,7 @@ const toggleSidebar = () => {
     align-items: center;
 
     /* EP 相邻按钮自带 margin-left，叠在 flex gap 上会导致间距忽大忽小 */
-    :deep(.el-button) {
+    ::deep(.el-button) {
       margin: 0;
     }
 
@@ -159,7 +159,7 @@ const toggleSidebar = () => {
       font-size: 14px;
       line-height: 1;
 
-      :deep(.el-tag__content) {
+      ::deep(.el-tag__content) {
         display: inline-flex;
         gap: 6px;
         align-items: center;
diff --git a/frontend/web/src/views/module_ai/chat/components/MessageItem.vue b/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
index 22fafaaa..a83beb43 100644
--- a/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
+++ b/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
@@ -371,7 +371,7 @@ const formatFileSize = (bytes: number): string => {
           }
         }
 
-        :deep(pre) {
+        ::deep(pre) {
           padding: 12px;
           margin: 12px 0;
           overflow-x: auto;
@@ -384,7 +384,7 @@ const formatFileSize = (bytes: number): string => {
           }
         }
 
-        :deep(code) {
+        ::deep(code) {
           padding: 2px 6px;
           font-family: "Courier New", Courier, monospace;
           font-size: 13px;
@@ -392,21 +392,21 @@ const formatFileSize = (bytes: number): string => {
           border-radius: 3px;
         }
 
-        :deep(p) {
+        ::deep(p) {
           margin: 8px 0;
         }
 
-        :deep(ul),
-        :deep(ol) {
+        ::deep(ul),
+        ::deep(ol) {
           padding-left: 24px;
           margin: 8px 0;
         }
 
-        :deep(li) {
+        ::deep(li) {
           margin: 4px 0;
         }
 
-        :deep(a) {
+        ::deep(a) {
           color: var(--el-color-primary);
           text-decoration: none;
 
@@ -415,14 +415,14 @@ const formatFileSize = (bytes: number): string => {
           }
         }
 
-        :deep(blockquote) {
+        ::deep(blockquote) {
           padding: 8px 16px;
           margin: 12px 0;
           background: var(--el-fill-color-light);
           border-left: 4px solid var(--el-color-primary);
         }
 
-        :deep(table) {
+        ::deep(table) {
           width: 100%;
           margin: 12px 0;
           border-collapse: collapse;
@@ -501,11 +501,11 @@ const formatFileSize = (bytes: number): string => {
           background: linear-gradient(transparent, var(--el-color-primary-light-9));
         }
 
-        :deep(pre) {
+        ::deep(pre) {
           border: 1px solid var(--el-border-color-lighter);
         }
 
-        :deep(code:not(pre code)) {
+        ::deep(code:not(pre code)) {
           border: 1px solid var(--el-border-color-lighter);
         }
       }
diff --git a/frontend/web/src/views/module_ai/chat/components/Sidebar.vue b/frontend/web/src/views/module_ai/chat/components/Sidebar.vue
index 9e7ebf75..fe1011b5 100644
--- a/frontend/web/src/views/module_ai/chat/components/Sidebar.vue
+++ b/frontend/web/src/views/module_ai/chat/components/Sidebar.vue
@@ -400,7 +400,7 @@ defineExpose({
       .search-section {
         margin-bottom: 16px;
 
-        :deep(.el-input__wrapper) {
+        ::deep(.el-input__wrapper) {
           border-radius: 20px;
           box-shadow: 0 0 0 1px var(--el-border-color) inset;
           transition: all 0.2s ease;
@@ -414,7 +414,7 @@ defineExpose({
           }
         }
 
-        :deep(.el-input__inner) {
+        ::deep(.el-input__inner) {
           font-size: 13px;
         }
       }
diff --git a/frontend/web/src/views/module_ai/chat/index.vue b/frontend/web/src/views/module_ai/chat/index.vue
index ae6b0631..3814af93 100644
--- a/frontend/web/src/views/module_ai/chat/index.vue
+++ b/frontend/web/src/views/module_ai/chat/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <ElContainer class="main-chat">
       <ElAside class="sidebar-container" :class="{ collapsed: isSidebarCollapsed }">
         <Sidebar
diff --git a/frontend/web/src/views/module_ai/fachat/index.vue b/frontend/web/src/views/module_ai/fachat/index.vue
index 503c0352..1eb1a19c 100644
--- a/frontend/web/src/views/module_ai/fachat/index.vue
+++ b/frontend/web/src/views/module_ai/fachat/index.vue
@@ -83,9 +83,9 @@
           </div>
         </div>
         <div class="flex-c gap-2">
-          <ArtIconButton icon="ri:phone-line" circle class="size-11 text-g-600" />
-          <ArtIconButton icon="ri:video-on-line" circle class="size-11 text-g-600" />
-          <ArtIconButton icon="ri:more-2-fill" circle class="size-11 text-g-600" />
+          <FaIconButton icon="ri:phone-line" circle class="size-11 text-g-600" />
+          <FaIconButton icon="ri:video-on-line" circle class="size-11 text-g-600" />
+          <FaIconButton icon="ri:more-2-fill" circle class="size-11 text-g-600" />
         </div>
       </div>
       <div class="flex flex-col h-[calc(100%-85px)]">
@@ -144,8 +144,8 @@
           </ElInput>
           <div class="flex-cb mt-3">
             <div class="flex-c">
-              <ArtSvgIcon icon="ri:image-line" class="mr-5 c-p text-g-600 text-lg" />
-              <ArtSvgIcon icon="ri:emotion-happy-line" class="mr-5 c-p text-g-600 text-lg" />
+              <FaSvgIcon icon="ri:image-line" class="mr-5 c-p text-g-600 text-lg" />
+              <FaSvgIcon icon="ri:emotion-happy-line" class="mr-5 c-p text-g-600 text-lg" />
             </div>
             <ElButton type="primary" @click="sendMessage" v-ripple class="min-w-20">发送</ElButton>
           </div>
diff --git a/frontend/web/src/views/module_ai/memory/index.vue b/frontend/web/src/views/module_ai/memory/index.vue
index 5557c057..a61db6b6 100644
--- a/frontend/web/src/views/module_ai/memory/index.vue
+++ b/frontend/web/src/views/module_ai/memory/index.vue
@@ -1,6 +1,6 @@
 <!-- AI 会话记录：Art + useTable -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -37,12 +37,12 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         row-key="id"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -275,7 +275,7 @@ const titleInputRef = ref();
 const editingRowId = ref<string | null>(null);
 const editingTitle = ref("");
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<ChatSession[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is string => Boolean(id))
@@ -295,7 +295,7 @@ function deleteSessionRow(id: string) {
     .then(async () => {
       await AiChatAPI.deleteSession([id]);
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -422,7 +422,7 @@ const {
   },
 });
 
-const formData = ref({
+const formData = reactive({
   id: undefined as string | undefined,
   title: "",
 });
@@ -625,17 +625,17 @@ pre {
   border-radius: 4px;
 }
 
-:deep(.session-detail-dialog .el-dialog__body) {
+::deep(.session-detail-dialog .el-dialog__body) {
   max-height: 60vh;
   padding: 20px;
   overflow-y: auto;
 }
 
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_application/portal/index.vue b/frontend/web/src/views/module_application/portal/index.vue
index 5590ab68..21d04103 100644
--- a/frontend/web/src/views/module_application/portal/index.vue
+++ b/frontend/web/src/views/module_application/portal/index.vue
@@ -1,6 +1,6 @@
 <!-- 我的应用管理：Art + useTable（卡片网格） -->
 <template>
-  <div class="art-full-height portal-application-page flex flex-col min-h-0">
+  <div class="fa-full-height portal-application-page flex flex-col min-h-0">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -35,7 +35,7 @@
     </FaSearchBar>
 
     <ElCard
-      class="flex flex-1 min-h-0 flex-col art-table-card"
+      class="flex flex-1 min-h-0 flex-col fa-table-card"
       :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
     >
       <FaTableHeader
@@ -124,9 +124,9 @@
       <div class="portal-pagination flex shrink-0 justify-end border-g-200 pt-3 mt-auto border-t">
         <ElPagination
           background
-          :current-page="paginationBind.current"
-          :page-size="paginationBind.size"
-          :total="paginationBind.total"
+          :current-page="pagination.current"
+          :page-size="pagination.size"
+          :total="pagination.total"
           :page-sizes="[12, 24, 48]"
           layout="total, sizes, prev, pager, next"
           @size-change="handleSizeChange"
@@ -343,7 +343,7 @@ const {
   },
 });
 
-const formData = ref<ApplicationForm>({
+const formData = reactive<ApplicationForm>({
   name: "",
   access_url: "",
   icon_url: "",
@@ -532,12 +532,12 @@ async function handleSubmit() {
     opacity: 0.55;
   }
 
-  :deep(.el-card__header) {
+  ::deep(.el-card__header) {
     padding: 14px 14px 12px;
     border-bottom: none;
   }
 
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -546,7 +546,7 @@ async function handleSubmit() {
     padding: 12px 14px;
   }
 
-  :deep(.el-card__footer) {
+  ::deep(.el-card__footer) {
     padding: 10px 14px 14px;
     margin-top: auto;
   }
@@ -634,11 +634,11 @@ async function handleSubmit() {
   }
 }
 
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_example/demo/index.vue b/frontend/web/src/views/module_example/demo/index.vue
index c1fd4c99..f8c7a0c1 100644
--- a/frontend/web/src/views/module_example/demo/index.vue
+++ b/frontend/web/src/views/module_example/demo/index.vue
@@ -1,6 +1,6 @@
 <!-- 示例 CRUD：与角色页同一套 Art 布局；弹窗与 Crud 一致（FaDialog + crud-embed-dialog） -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBarWithAudit
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -43,11 +43,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -250,7 +250,7 @@
       </template>
     </FaDialog>
 
-    <ArtImportDialog
+    <FaImportDialog
       v-model="importModalVisible"
       :content-config="demoImportContentConfig"
       default-template-file-name="demo_import_template.xlsx"
@@ -273,13 +273,13 @@ import { useAuth } from "@/hooks/core/useAuth";
 import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
 import { useTable } from "@/hooks/core/useTable";
 import FaTableHeaderLeft from "@/components/tables/fa-table-header-left/index.vue";
-import ArtImportDialog from "@/components/modal/fa-import-dialog/index.vue";
+import FaImportDialog from "@/components/modal/fa-import-dialog/index.vue";
 import FaExportDialog from "@/components/modal/fa-export-dialog/index.vue";
 import type { IContentConfig, IObject } from "@/components/modal/types";
 import FaSearchBarWithAudit from "@/components/forms/fa-search-bar/FaSearchBarWithAudit.vue";
 import type { AuditSearchFormParams } from "@/components/forms/fa-search-bar/auditSearchFormItems";
 import FaDialog from "@/components/modal/fa-dialog/index.vue";
-import JsonPretty from "@/components/JsonPretty/index.vue";
+import JsonPretty from "@/components/others/fa-json-pretty/index.vue";
 import type { ColumnOption } from "@/types/component";
 import DemoAPI, {
   type DemoForm,
@@ -346,7 +346,7 @@ const demoBusinessSearchItems = computed(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<DemoTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -464,6 +464,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   return normalizeDemoQuery(sp);
 });
 
@@ -487,21 +489,6 @@ const demoExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const dialogVisible = reactive({
   title: "",
   visible: false,
@@ -510,7 +497,7 @@ const dialogVisible = reactive({
 
 const detailFormData = ref<DemoTable>({});
 
-const formData = ref<DemoForm>({
+const formData = reactive<DemoForm>({
   id: undefined,
   name: "",
   status: "0",
@@ -708,7 +695,7 @@ const deleteDemoRow = (row: DemoTable) => {
     .then(async () => {
       await DemoAPI.deleteDemo([row.id!]);
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {
@@ -729,7 +716,7 @@ function handleBatchDelete() {
         batchDeleting.value = true;
         await DemoAPI.deleteDemo(ids);
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -754,7 +741,7 @@ function runBatchStatus(status: string) {
     .then(async () => {
       await DemoAPI.batchDemo({ ids, status });
       ElMessage.success("操作成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshData();
     })
     .catch(() => {});
diff --git a/frontend/web/src/views/module_example/demo01/index.vue b/frontend/web/src/views/module_example/demo01/index.vue
index c866ba8b..35939f7e 100644
--- a/frontend/web/src/views/module_example/demo01/index.vue
+++ b/frontend/web/src/views/module_example/demo01/index.vue
@@ -1,6 +1,6 @@
 <!-- 示例01 CRUD：与 demo 同一套 Art 布局；权限与接口为 module_example:demo01 / Demo01API -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBarWithAudit
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -43,11 +43,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -132,7 +132,7 @@
       </template>
     </FaDialog>
 
-    <ArtImportDialog
+    <FaImportDialog
       v-model="importModalVisible"
       :content-config="demo01ImportContentConfig"
       default-template-file-name="demo01_import_template.xlsx"
@@ -155,7 +155,7 @@ import { useAuth } from "@/hooks/core/useAuth";
 import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
 import { useTable } from "@/hooks/core/useTable";
 import FaTableHeaderLeft from "@/components/tables/fa-table-header-left/index.vue";
-import ArtImportDialog from "@/components/modal/fa-import-dialog/index.vue";
+import FaImportDialog from "@/components/modal/fa-import-dialog/index.vue";
 import FaExportDialog from "@/components/modal/fa-export-dialog/index.vue";
 import type { IContentConfig, IObject } from "@/components/modal/types";
 import FaSearchBarWithAudit from "@/components/forms/fa-search-bar/FaSearchBarWithAudit.vue";
@@ -242,7 +242,7 @@ const demo01BusinessSearchItems = computed(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<Demo01Table[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -335,6 +335,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   return normalizeDemo01Query(sp);
 });
 
@@ -358,21 +360,6 @@ const demo01ExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const dialogVisible = reactive({
   title: "",
   visible: false,
@@ -381,7 +368,7 @@ const dialogVisible = reactive({
 
 const detailFormData = ref<Demo01Table>({});
 
-const formData = ref<Demo01Form>({
+const formData = reactive<Demo01Form>({
   id: undefined,
   name: "",
   status: "0",
@@ -564,7 +551,7 @@ const deleteDemo01Row = (row: Demo01Table) => {
     .then(async () => {
       await Demo01API.deleteDemo01([row.id!]);
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {
@@ -585,7 +572,7 @@ function handleBatchDelete() {
         batchDeleting.value = true;
         await Demo01API.deleteDemo01(ids);
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -610,7 +597,7 @@ function runBatchStatus(status: string) {
     .then(async () => {
       await Demo01API.batchDemo01({ ids, status });
       ElMessage.success("操作成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshData();
     })
     .catch(() => {});
@@ -640,11 +627,11 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue b/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
index 07550b94..0f6afff4 100644
--- a/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
@@ -426,7 +426,7 @@ function handleCancel() {
   position: relative;
 }
 
-.visual-pane :deep(.el-textarea__inner) {
+.visual-pane ::deep(.el-textarea__inner) {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
@@ -437,20 +437,20 @@ function handleCancel() {
 /* 表结构：描述列表表格化，标签列对齐、内容区可伸缩 */
 .visual-structure {
   .visual-desc {
-    :deep(.el-descriptions__label) {
+    ::deep(.el-descriptions__label) {
       width: 108px;
       vertical-align: middle;
     }
 
-    :deep(.el-descriptions__cell) {
+    ::deep(.el-descriptions__cell) {
       vertical-align: middle;
     }
 
-    :deep(.el-descriptions__content) {
+    ::deep(.el-descriptions__content) {
       min-width: 0;
     }
 
-    :deep(.el-descriptions__title) {
+    ::deep(.el-descriptions__title) {
       margin-bottom: 8px;
     }
   }
diff --git a/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue b/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
index 00e7be44..8b9af147 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
@@ -352,15 +352,15 @@ onUnmounted(() => {
   min-width: 0;
 }
 
-.gen-basic-step :deep(.el-col) {
+.gen-basic-step ::deep(.el-col) {
   min-width: 0;
 }
 
-.gen-basic-step :deep(.el-form-item__content) {
+.gen-basic-step ::deep(.el-form-item__content) {
   min-width: 0;
 }
 
-.gen-basic-step :deep(.el-input-group) {
+.gen-basic-step ::deep(.el-input-group) {
   width: 100%;
   min-width: 0;
   max-width: 100%;
@@ -383,11 +383,11 @@ onUnmounted(() => {
   border: 1px solid var(--el-border-color-lighter);
 }
 
-.master-sub-card :deep(.el-card__header) {
+.master-sub-card ::deep(.el-card__header) {
   padding: 8px 10px;
 }
 
-.master-sub-card :deep(.el-card__body) {
+.master-sub-card ::deep(.el-card__body) {
   padding: 10px;
 }
 
@@ -396,7 +396,7 @@ onUnmounted(() => {
   border: 1px solid var(--el-border-color-lighter);
 }
 
-.gen-form-card :deep(.el-card__body) {
+.gen-form-card ::deep(.el-card__body) {
   overflow-x: hidden;
 }
 
@@ -425,7 +425,7 @@ onUnmounted(() => {
   border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
-.gen-echo-card :deep(.el-card__body) {
+.gen-echo-card ::deep(.el-card__body) {
   padding: 6px 8px;
 }
 
diff --git a/frontend/web/src/views/module_generator/gencode/components/GenPreviewStep.vue b/frontend/web/src/views/module_generator/gencode/components/GenPreviewStep.vue
index 78f6f8c5..5a497cae 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenPreviewStep.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/GenPreviewStep.vue
@@ -44,7 +44,7 @@
                 alt=""
                 aria-hidden="true"
               />
-              <ArtSvgIcon
+              <FaSvgIcon
                 v-else
                 :icon="resolveIconForFaSvgIcon(getFileTreeNodeIcon(data.label))"
                 class="inline shrink-0 text-base"
@@ -91,7 +91,7 @@ import { computed, inject, onUnmounted, ref, watch } from "vue";
 import Codemirror from "codemirror-editor-vue3";
 import type { EditorConfiguration } from "codemirror";
 import type { CmComponentRef } from "codemirror-editor-vue3";
-import ArtSvgIcon from "@/components/base/fa-svg-icon/index.vue";
+import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
 import { resolveLocalIconUrl } from "@utils/icons";
 import { resolveIconForFaSvgIcon } from "@utils/menuIcon/index";
 import { CopyDocument } from "@element-plus/icons-vue";
diff --git a/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue b/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
index 88aae17f..92054f87 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
@@ -66,18 +66,18 @@ const rows = [
   border-radius: var(--el-border-radius-base);
 }
 
-.gencode-help-collapse :deep(.el-collapse-item__header) {
+.gencode-help-collapse ::deep(.el-collapse-item__header) {
   padding: 8px 12px;
   font-size: 13px;
   font-weight: 500;
   background: var(--el-fill-color-light);
 }
 
-.gencode-help-collapse :deep(.el-collapse-item__wrap) {
+.gencode-help-collapse ::deep(.el-collapse-item__wrap) {
   border-top: 1px solid var(--el-border-color-lighter);
 }
 
-.gencode-help-collapse :deep(.el-collapse-item__content) {
+.gencode-help-collapse ::deep(.el-collapse-item__content) {
   padding: 10px 12px 12px;
 }
 
@@ -91,7 +91,7 @@ const rows = [
   flex-shrink: 0;
 }
 
-.gencode-rules-table :deep(.el-table__cell) {
+.gencode-rules-table ::deep(.el-table__cell) {
   font-size: 12px;
 }
 
diff --git a/frontend/web/src/views/module_generator/gencode/index.vue b/frontend/web/src/views/module_generator/gencode/index.vue
index 7dd6d4df..48b097f0 100644
--- a/frontend/web/src/views/module_generator/gencode/index.vue
+++ b/frontend/web/src/views/module_generator/gencode/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -16,7 +16,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -68,12 +68,12 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         row-key="id"
         :loading="tableLoading"
         :data="tableListData"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="handleTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -182,7 +182,7 @@ const cmRef = ref<CmComponentRef>();
 const basicInfo = ref<FormInstance>();
 const importDbDialogRef = ref<InstanceType<typeof ImportDbTableDialog>>();
 /** FaTable：勾选清空（删除后） */
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 
 /** useTable 初始化前的占位，供同步/删除/导入等在文件中靠前定义的函数调用 */
 const listRefresh = {
@@ -750,7 +750,7 @@ async function handleDelete(row?: GenTableSchema): Promise<void> {
     });
 
     await GencodeAPI.deleteTable(tableIds);
-    FaTableRef.value?.elTableRef?.clearSelection();
+    faTableRef.value?.elTableRef?.clearSelection();
     await listRefresh.refreshRemove();
   } catch (error) {
     if (error !== "cancel") {
@@ -900,21 +900,6 @@ listRefresh.refreshData = refreshData;
 listRefresh.refreshCreate = refreshCreate;
 listRefresh.refreshRemove = refreshRemove;
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 10,
-    total: p.total ?? 0,
-  };
-});
-
 async function handleSearchBarSearch(params: GencodeSearchForm) {
   await searchBarRef.value?.validate?.();
   replaceSearchParams({
diff --git a/frontend/web/src/views/module_monitor/cache/index.vue b/frontend/web/src/views/module_monitor/cache/index.vue
index 84f27266..46deaa81 100644
--- a/frontend/web/src/views/module_monitor/cache/index.vue
+++ b/frontend/web/src/views/module_monitor/cache/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <el-tabs>
       <!-- 监控信息 Tab -->
       <ElTabPane label="监控信息">
@@ -72,7 +72,7 @@
           <!-- 监控图表：单独一行并占满剩余高度 -->
           <ElRow :gutter="16" class="monitor-charts-row">
             <ElCol :span="12" class="cache-chart-col">
-              <ElCard shadow="hover" class="cache-chart-card">
+              <ElCard shadow="hover" class="cache-chfa-card">
                 <template #header>
                   <div class="flex items-center gap-2">
                     <ElIcon>
@@ -91,7 +91,7 @@
             </ElCol>
 
             <ElCol :span="12" class="cache-chart-col">
-              <ElCard shadow="hover" class="cache-chart-card">
+              <ElCard shadow="hover" class="cache-chfa-card">
                 <template #header>
                   <div class="flex items-center gap-2">
                     <ElIcon>
@@ -311,6 +311,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ElMessageBox } from "element-plus";
 import CacheAPI, {
   type CacheInfo,
   type CacheForm,
@@ -442,7 +443,7 @@ const handleClearCacheAll = async () => {
     .then(() => {
       getCacheNameList();
     })
-    .catch((error) => {
+    .catch((error: unknown) => {
       if (error !== "cancel") {
         console.error("清理全部缓存失败:", error);
       }
@@ -560,13 +561,13 @@ onUnmounted(() => {
   min-height: 0;
 }
 
-.cache-chart-card {
+.cache-chfa-card {
   display: flex;
   flex: 1;
   flex-direction: column;
   min-height: 0;
 
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -606,7 +607,7 @@ onUnmounted(() => {
   flex-direction: column;
   min-height: 0;
 
-  :deep(.el-card__body) {
+  ::deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
diff --git a/frontend/web/src/views/module_monitor/online/index.vue b/frontend/web/src/views/module_monitor/online/index.vue
index 52ee7c1f..4bcc797e 100644
--- a/frontend/web/src/views/module_monitor/online/index.vue
+++ b/frontend/web/src/views/module_monitor/online/index.vue
@@ -1,6 +1,6 @@
 <!-- 在线用户：Art + useTable -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -42,7 +42,7 @@
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
       />
@@ -63,7 +63,7 @@ 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 ArtButtonTable from "@/components/forms/fa-button-table/index.vue";
-import CopyButton from "@/components/CopyButton/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";
@@ -243,21 +243,6 @@ const {
   },
 });
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 async function handleSearchBarSearch(params: OnlineSearchForm) {
   await searchBarRef.value?.validate?.();
   replaceSearchParams(buildOnlineReplaceParams(params));
diff --git a/frontend/web/src/views/module_monitor/resource/index.vue b/frontend/web/src/views/module_monitor/resource/index.vue
index ffb32ab3..46e80f9a 100644
--- a/frontend/web/src/views/module_monitor/resource/index.vue
+++ b/frontend/web/src/views/module_monitor/resource/index.vue
@@ -1,6 +1,6 @@
 <!-- 资源管理：Art + useTable -->
 <template>
-  <div class="art-full-height resource-monitor-page">
+  <div class="fa-full-height resource-monitor-page">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -18,7 +18,7 @@
     />
 
     <ElCard
-      class="resource-monitor-card flex flex-col flex-1 min-h-0 art-table-card"
+      class="resource-monitor-card flex flex-col flex-1 min-h-0 fa-table-card"
       :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
     >
       <div
@@ -99,7 +99,7 @@
           :loading="loading"
           :data="data"
           :columns="columns"
-          :pagination="paginationBind"
+          :pagination="pagination"
           @selection-change="onTableSelectionChange"
           @pagination:size-change="handleSizeChange"
           @pagination:current-change="handleCurrentChange"
@@ -353,8 +353,8 @@ const {
   core: {
     apiFn: fetchResourceTableList,
     apiParams: {
-      current: 1,
-      size: 20,
+      page_no: 1,
+      page_size: 20,
     },
     columnsFactory: (): ColumnOption<ResourceItem>[] => [
       { type: "selection", width: 48, fixed: "left" },
@@ -461,21 +461,6 @@ function handleFileNameClick(row: ResourceItem) {
   }
 }
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 async function handleSearchBarSearch(params: ResourceSearchForm) {
   await searchBarRef.value?.validate?.();
   replaceSearchParams(buildResourceReplaceParams(params));
@@ -648,14 +633,14 @@ async function handleBatchDelete() {
 </script>
 
 <style lang="scss" scoped>
-.resource-monitor-page :deep(.resource-monitor-card.el-card > .el-card__body) {
+.resource-monitor-page ::deep(.resource-monitor-card.el-card > .el-card__body) {
   display: flex;
   flex: 1;
   flex-direction: column;
   min-height: 0;
 }
 
-:deep(.el-breadcrumb__item) {
+::deep(.el-breadcrumb__item) {
   &.is-link {
     color: var(--el-color-primary);
     cursor: pointer;
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginAccountForm.vue b/frontend/web/src/views/module_system/auth/login/components/LoginAccountForm.vue
index b31213d3..c3d2fe07 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginAccountForm.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginAccountForm.vue
@@ -70,7 +70,7 @@
             @keyup.enter="$emit('submit')"
           >
             <template #prefix>
-              <ArtSvgIcon
+              <FaSvgIcon
                 icon="mdi:shield-lock-outline"
                 class="size-[18px] text-[var(--el-text-color-secondary)]"
               />
@@ -104,7 +104,7 @@
             class="relative z-[2] overflow-hidden select-none rounded-lg border border-transparent tad-300"
             :class="{ '!border-[#FF4E4F]': !isPassing && isClickPass }"
           >
-            <ArtDragVerify
+            <FaDragVerify
               ref="dragVerifyRef"
               v-model:value="isPassing"
               :text="$t('login.sliderText')"
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue b/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
index 7f62db82..babf2e87 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
@@ -22,8 +22,8 @@ defineEmits<{ link: [] }>();
 
 <style scoped lang="scss">
 .login-auth-link-row {
-  :deep(.el-link),
-  :deep(.el-link__inner) {
+  ::deep(.el-link),
+  ::deep(.el-link__inner) {
     line-height: inherit;
   }
 }
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue b/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
index 67c47ce4..177d4190 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
@@ -246,11 +246,11 @@ html.dark {
 
 /* EP 全局规则：相邻 .el-button { margin-left: 12px }，纵向叠放时仍会命中，导致第二颗按钮横向错位 */
 .login-mobile-actions {
-  :deep(.el-button + .el-button) {
+  ::deep(.el-button + .el-button) {
     margin-left: 0 !important;
   }
 
-  :deep(.el-button) {
+  ::deep(.el-button) {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue b/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
index 3ce18f06..702dc496 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
@@ -78,7 +78,7 @@ const qrPayload = computed(() => {
 
 /* EP：相邻按钮横向间距；单列返回按钮无需处理 */
 .login-mobile-actions {
-  :deep(.el-button) {
+  ::deep(.el-button) {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue b/frontend/web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue
index b1ebc9e8..68c9bc78 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue
@@ -19,7 +19,7 @@
           :aria-label="item.tip"
           @click="$emit('oauth', item.provider)"
         >
-          <ArtSvgIcon :icon="item.icon" :class="item.iconClass" />
+          <FaSvgIcon :icon="item.icon" :class="item.iconClass" />
         </button>
       </ElTooltip>
     </div>
diff --git a/frontend/web/src/views/module_system/auth/login/index.vue b/frontend/web/src/views/module_system/auth/login/index.vue
index 65ea3e45..1f1111d2 100755
--- a/frontend/web/src/views/module_system/auth/login/index.vue
+++ b/frontend/web/src/views/module_system/auth/login/index.vue
@@ -293,7 +293,6 @@ async function tryConsumeOAuthCallback() {
       Auth.setTokens(access, refresh, true);
       userStore.setToken(access, refresh);
       userStore.setLoginStatus(true);
-      await userStore.getUserInfo();
       ElNotification({
         title: t("login.oauthNoticeTitle"),
         message: t("login.oauthLoginSuccess"),
@@ -312,7 +311,7 @@ async function tryConsumeOAuthCallback() {
 }
 
 const dragVerifyTextColor = computed(() =>
-  isDark.value ? "rgba(255, 255, 255, 0.45)" : "var(--art-gray-700)"
+  isDark.value ? "rgba(255, 255, 255, 0.45)" : "var(--fa-gray-700)"
 );
 const formKey = ref(0);
 
@@ -549,7 +548,7 @@ const showVoteNotification = () => {
 
 onMounted(async () => {
   setupAccount("super");
-  await configStore.getConfig(true);
+  await configStore.getConfig();
   await tryConsumeOAuthCallback();
   getCaptcha();
   setTimeout(showVoteNotification, 500);
@@ -662,68 +661,68 @@ async function submitForget() {
 
 <style lang="scss" scoped>
 .login-page-panel {
-  :deep(.btn) {
+  ::deep(.btn) {
     border-radius: 8px;
   }
 }
 
 html.dark .login-page-panel {
-  :deep(.text-g-800) {
+  ::deep(.text-g-800) {
     color: rgb(255 255 255 / 78%) !important;
   }
 }
 
 /* 副标题与表单块间距（login-page-form 在子组件内，须 :deep） */
-:deep(.login-page-form) {
+::deep(.login-page-form) {
   margin-top: 1rem;
 }
 
-:deep(.login-page-form .el-form-item) {
+::deep(.login-page-form .el-form-item) {
   margin-bottom: 1.1rem;
 }
 
-:deep(.el-select__wrapper) {
+::deep(.el-select__wrapper) {
   min-height: 42px !important;
 }
 
 /* 仅账号登录底部「手机号 / 扫码」双列按钮需要 42px；手机号登录页的返回钮与主按钮同为 h-11，勿全局压高度 */
-:deep(.login-secondary-actions .login-secondary-btn) {
+::deep(.login-secondary-actions .login-secondary-btn) {
   height: 42px;
   border-radius: 8px;
 }
 
 html.dark {
-  :deep(.login-page-form .el-input__wrapper) {
+  ::deep(.login-page-form .el-input__wrapper) {
     background-color: rgb(255 255 255 / 6%) !important;
     box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset !important;
   }
 
-  :deep(.login-page-form .el-input__inner) {
+  ::deep(.login-page-form .el-input__inner) {
     color: rgb(255 255 255 / 92%);
   }
 
-  :deep(.login-page-form .el-input__inner::placeholder) {
+  ::deep(.login-page-form .el-input__inner::placeholder) {
     color: rgb(255 255 255 / 35%);
   }
 
-  :deep(.login-page-form .el-select .el-select__wrapper) {
+  ::deep(.login-page-form .el-select .el-select__wrapper) {
     background-color: rgb(255 255 255 / 6%) !important;
     box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset !important;
   }
 
-  :deep(.login-page-form .el-select__placeholder) {
+  ::deep(.login-page-form .el-select__placeholder) {
     color: rgb(255 255 255 / 40%);
   }
 
-  :deep(.login-page-form .el-select__selected-item) {
+  ::deep(.login-page-form .el-select__selected-item) {
     color: rgb(255 255 255 / 92%);
   }
 
-  :deep(.login-remember .el-checkbox__label) {
+  ::deep(.login-remember .el-checkbox__label) {
     color: rgb(255 255 255 / 65%);
   }
 
-  :deep(.login-secondary-btn) {
+  ::deep(.login-secondary-btn) {
     color: rgb(255 255 255 / 85%) !important;
     background: transparent !important;
     border-color: rgb(255 255 255 / 22%) !important;
@@ -736,7 +735,7 @@ html.dark {
     }
   }
 
-  :deep(.login-secondary-actions .login-secondary-btn) {
+  ::deep(.login-secondary-actions .login-secondary-btn) {
     height: 42px;
   }
 }
diff --git a/frontend/web/src/views/module_system/changelog/index.vue b/frontend/web/src/views/module_system/changelog/index.vue
index 203f393d..ea80e4ad 100644
--- a/frontend/web/src/views/module_system/changelog/index.vue
+++ b/frontend/web/src/views/module_system/changelog/index.vue
@@ -7,7 +7,7 @@
       <div
         v-for="item in upgradeLogList"
         :key="item.version"
-        class="art-card-sm rounded-lg p-6 transition-shadow max-md:p-4"
+        class="fa-card-sm rounded-lg p-6 transition-shadow max-md:p-4"
       >
         <div class="flex-cb gap-3 mb-4 flex-wrap">
           <span class="px-3 py-1 bg-theme/10 text-theme text-sm font-medium rounded-full">
diff --git a/frontend/web/src/views/module_system/dept/index.vue b/frontend/web/src/views/module_system/dept/index.vue
index 2dc7f85f..95c80438 100644
--- a/frontend/web/src/views/module_system/dept/index.vue
+++ b/frontend/web/src/views/module_system/dept/index.vue
@@ -1,6 +1,6 @@
 <!-- 部门配置：Art + 树形表格（对齐 system/menu 模版） -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -362,7 +362,7 @@ const { columnChecks, columns } = useTableColumns<DeptTable>(() => [
 
 const detailFormData = ref<DeptTable>({ code: "" });
 
-const formData = ref<DeptForm>({
+const formData = reactive<DeptForm>({
   id: undefined,
   name: undefined,
   code: "",
@@ -515,10 +515,10 @@ async function handleOpenDialog(
     }
   } else {
     dialogVisible.title = "新增部门";
-    Object.assign(formData.value, initialFormData);
-    formData.value.id = undefined;
+    Object.assign(formData, initialFormData);
+    formData.id = undefined;
     if (parentId) {
-      formData.value.parent_id = parentId;
+      formData.parent_id = parentId;
     }
   }
   deptFormRenderKey.value += 1;
@@ -528,12 +528,12 @@ async function handleOpenDialog(
 async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
-    const id = formData.value.id;
+    const id = formData.id;
     try {
       if (id) {
-        await DeptAPI.updateDept(id, { id, ...formData.value });
+        await DeptAPI.updateDept(id, { id, ...formData });
       } else {
-        await DeptAPI.createDept(formData.value);
+        await DeptAPI.createDept(formData);
       }
       dialogVisible.visible = false;
       await resetForm();
@@ -614,19 +614,15 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.art-table-card {
-  flex: 1;
-}
-
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-:deep(.dept-table-actions .inline-flex) {
+::deep(.dept-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
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 2b0949c7..01d9a91d 100644
--- a/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
+++ b/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
@@ -24,7 +24,7 @@
       />
 
       <ElCard
-        class="art-table-card drawer-table-card"
+        class="fa-table-card drawer-table-card"
         :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
       >
         <FaTableHeader
@@ -50,11 +50,11 @@
         </FaTableHeader>
 
         <FaTable
-          ref="FaTableRef"
+          ref="faTableRef"
           :loading="loading"
           :data="data"
           :columns="columns"
-          :pagination="paginationBind"
+          :pagination="pagination"
           @selection-change="onTableSelectionChange"
           @pagination:size-change="handleSizeChange"
           @pagination:current-change="handleCurrentChange"
@@ -408,7 +408,7 @@ const dictDataSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<DictDataTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -439,8 +439,8 @@ const {
   core: {
     apiFn: fetchDictDataListMerged,
     apiParams: {
-      current: 1,
-      size: 20,
+      page_no: 1,
+      page_size: 20,
       dict_type: props.dictType,
       dict_type_id: props.dictTypeId,
     },
@@ -509,6 +509,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   return normalizeDictDataQuery({
     ...sp,
     dict_type: props.dictType,
@@ -531,21 +533,6 @@ const dictDataExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const dialogVisible = reactive({
   title: "",
   visible: false,
@@ -554,7 +541,7 @@ const dialogVisible = reactive({
 
 const detailFormData = ref<DictDataTable>({});
 
-const formData = ref<DictDataForm>({
+const formData = reactive<DictDataForm>({
   id: undefined,
   dict_sort: 1,
   dict_label: "",
@@ -728,11 +715,11 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增字典数据";
-    Object.assign(formData.value, initialFormData);
-    formData.value.dict_type = props.dictType;
-    formData.value.dict_type_id = props.dictTypeId;
-    formData.value.status = "0";
-    formData.value.id = undefined;
+    Object.assign(formData, initialFormData);
+    formData.dict_type = props.dictType;
+    formData.dict_type_id = props.dictTypeId;
+    formData.status = "0";
+    formData.id = undefined;
   }
   dictDataFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -741,20 +728,20 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
 async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
-    const id = formData.value.id;
+    const id = formData.id;
     try {
       if (id) {
         await DictAPI.updateDictData(id, { id, ...formData });
         await refreshUpdate();
       } else {
-        await DictAPI.createDictData(formData.value);
+        await DictAPI.createDictData(formData);
         await refreshCreate();
       }
       dialogVisible.visible = false;
       await resetForm();
       dictStore.clearDictData();
-      if (formData.value.dict_type) {
-        await dictStore.getDict([formData.value.dict_type]);
+      if (formData.dict_type) {
+        await dictStore.getDict([formData.dict_type]);
       }
     } catch (error: unknown) {
       console.error(error);
@@ -812,7 +799,7 @@ function deleteDictDataRow(id: number) {
         await dictStore.getDict([props.dictType]);
       }
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -835,7 +822,7 @@ function handleBatchDelete() {
           await dictStore.getDict([props.dictType]);
         }
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -903,11 +890,11 @@ function openExportModal() {
   border-color: var(--el-border-color-lighter);
 }
 
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/dict/index.vue b/frontend/web/src/views/module_system/dict/index.vue
index 268b6c77..4fc38dde 100644
--- a/frontend/web/src/views/module_system/dict/index.vue
+++ b/frontend/web/src/views/module_system/dict/index.vue
@@ -1,6 +1,6 @@
 <!-- 字典类型：Art 布局；操作列最多 3 个外露 +「更多」 -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -41,11 +41,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -247,7 +247,7 @@ const dictTypeSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<DictTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -333,6 +333,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   return normalizeDictTypeQuery(sp);
 });
 
@@ -349,21 +351,6 @@ const dictTypeExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const dialogVisible = reactive({
   title: "",
   visible: false,
@@ -372,7 +359,7 @@ const dialogVisible = reactive({
 
 const detailFormData = ref<DictTable>({});
 
-const formData = ref<DictForm>({
+const formData = reactive<DictForm>({
   id: undefined,
   dict_name: "",
   dict_type: "",
@@ -542,8 +529,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增字典";
-    Object.assign(formData.value, initialFormData);
-    formData.value.id = undefined;
+    Object.assign(formData, initialFormData);
+    formData.id = undefined;
   }
   dictFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -552,20 +539,20 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
 async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
-    const id = formData.value.id;
+    const id = formData.id;
     try {
       if (id) {
-        await DictAPI.updateDictType(id, { id, ...formData.value });
+        await DictAPI.updateDictType(id, { id, ...formData });
         await refreshUpdate();
       } else {
-        await DictAPI.createDictType(formData.value);
+        await DictAPI.createDictType(formData);
         await refreshCreate();
       }
       dialogVisible.visible = false;
       await resetForm();
       dictStore.clearDictData();
-      if (formData.value.dict_type) {
-        await dictStore.getDict([formData.value.dict_type]);
+      if (formData.dict_type) {
+        await dictStore.getDict([formData.dict_type]);
       }
     } catch (error: unknown) {
       console.error(error);
@@ -587,7 +574,7 @@ function deleteDictTypeRow(id: number) {
         await dictStore.getDict(dictTypes);
       }
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -611,7 +598,7 @@ function handleBatchDelete() {
           await dictStore.getDict(dictTypes);
         }
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -649,15 +636,11 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.art-table-card {
-  flex: 1;
-}
-
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/log/index.vue b/frontend/web/src/views/module_system/log/index.vue
index d00cb276..531a1a6c 100644
--- a/frontend/web/src/views/module_system/log/index.vue
+++ b/frontend/web/src/views/module_system/log/index.vue
@@ -1,6 +1,6 @@
 <!-- 日志管理：Art 布局 + useTable，与 dict 页一致 -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -26,7 +26,7 @@
       </template>
     </FaSearchBar>
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -46,11 +46,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -153,8 +153,8 @@ import type { IObject } from "@/components/modal/types";
 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 JsonPretty from "@/components/JsonPretty/index.vue";
-import CopyButton from "@/components/CopyButton/index.vue";
+import JsonPretty from "@/components/others/fa-json-pretty/index.vue";
+import CopyButton from "@/components/others/fa-copy-button/index.vue";
 import type { ColumnOption } from "@/types/component";
 import LogAPI, { type LogPageQuery, type LogTable } from "@/api/module_system/log";
 import { ElMessage, ElMessageBox, ElTag } from "element-plus";
@@ -255,7 +255,7 @@ const logSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<LogTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -375,6 +375,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   return normalizeLogQuery(sp);
 });
 
@@ -391,21 +393,6 @@ const logExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const formData = ref<LogTable>({});
 
 const dialogVisible = ref({
@@ -483,7 +470,7 @@ function deleteLogRow(id: number) {
     .then(async () => {
       await LogAPI.deleteLog([id]);
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -533,7 +520,7 @@ function handleBatchDelete() {
         batchDeleting.value = true;
         await LogAPI.deleteLog(ids);
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -546,9 +533,3 @@ function openExportModal() {
   exportModalVisible.value = true;
 }
 </script>
-
-<style scoped lang="scss">
-.art-table-card {
-  flex: 1;
-}
-</style>
diff --git a/frontend/web/src/views/module_system/menu/index.vue b/frontend/web/src/views/module_system/menu/index.vue
index f3a42112..2531d9a7 100644
--- a/frontend/web/src/views/module_system/menu/index.vue
+++ b/frontend/web/src/views/module_system/menu/index.vue
@@ -1,6 +1,6 @@
 <!-- 菜单管理：Art + 树形表格；操作列最多 3 个外露，其余「更多」 -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -26,7 +26,7 @@
       <ElTabPane label="APP 移动端菜单管理" name="app" />
     </ElTabs>
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -520,7 +520,7 @@ import MenuAPI, {
 } from "@/api/module_system/menu";
 import { MenuClientEnum, MenuTypeEnum } from "@/enums/system/menu.enum";
 import { formatTree } from "@utils/common";
-import MenuRouteIcon from "@/components/MenuRouteIcon/index.vue";
+import MenuRouteIcon from "@/components/others/fa-menu-routeIcon/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";
@@ -692,7 +692,7 @@ const createParentLocked = ref(false);
 
 const detailFormData = ref<MenuTable>({});
 
-const formData = ref<MenuForm>({
+const formData = reactive<MenuForm>({
   id: undefined,
   name: undefined,
   type: MenuTypeEnum.CATALOG,
@@ -1153,11 +1153,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.art-table-card {
-  flex: 1;
-}
-
-:deep(.menu-table-actions .inline-flex) {
+::deep(.menu-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/notice/index.vue b/frontend/web/src/views/module_system/notice/index.vue
index 504b5429..4730dd15 100644
--- a/frontend/web/src/views/module_system/notice/index.vue
+++ b/frontend/web/src/views/module_system/notice/index.vue
@@ -1,6 +1,6 @@
 <!-- 公告通知：Art 布局 + useTable，与 dict 页一致 -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -26,7 +26,7 @@
       </template>
     </FaSearchBar>
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -50,11 +50,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -136,7 +136,7 @@
               </ElRadioGroup>
             </template>
             <template #notice_content>
-              <ArtWangEditor
+              <FaWangEditor
                 :model-value="formData.notice_content ?? ''"
                 height="min(38vh, 280px)"
                 placeholder="请输入公告内容，支持完整排版与插入..."
@@ -196,7 +196,7 @@ 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 ArtWangEditor from "@/components/forms/fa-wang-editor/index.vue";
+import FaWangEditor from "@/components/forms/fa-wang-editor/index.vue";
 import FaForm from "@/components/forms/fa-form/index.vue";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
 
@@ -309,7 +309,7 @@ const noticeSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<NoticeTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -411,6 +411,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   return normalizeNoticeQuery(sp);
 });
 
@@ -427,21 +429,6 @@ const noticeExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const detailFormData = ref<NoticeTable>({});
 
 /** 详情富文本 HTML（用于预览） */
@@ -463,7 +450,7 @@ const detailHasRenderableContent = computed(() => {
   return plain.length > 0;
 });
 
-const formData = ref<NoticeForm>({
+const formData = reactive<NoticeForm>({
   id: undefined,
   notice_title: "",
   notice_type: "",
@@ -660,7 +647,7 @@ function deleteNoticeRow(id: number) {
       await NoticeAPI.deleteNotice([id]);
       await noticeStore.getNotice();
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -721,7 +708,7 @@ function handleBatchDelete() {
         await NoticeAPI.deleteNotice(ids);
         await noticeStore.getNotice();
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -760,15 +747,15 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 /* FaForm 底部预留的操作栏列在弹窗内不需要占位 */
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-/* 富文本预览区域阅读样式（与 ArtWangEditor 输出 HTML 展示一致） */
+/* 富文本预览区域阅读样式（与 FaWangEditor 输出 HTML 展示一致） */
 .notice-html-preview {
   box-sizing: border-box;
   min-height: 120px;
@@ -786,27 +773,27 @@ onMounted(async () => {
   color: var(--el-text-color-placeholder);
 }
 
-.notice-html-preview :deep(h1),
-.notice-html-preview :deep(h2),
-.notice-html-preview :deep(h3) {
+.notice-html-preview ::deep(h1),
+.notice-html-preview ::deep(h2),
+.notice-html-preview ::deep(h3) {
   margin: 12px 0 8px;
 }
 
-.notice-html-preview :deep(p) {
+.notice-html-preview ::deep(p) {
   margin: 8px 0;
   line-height: 1.6;
 }
 
-.notice-html-preview :deep(table) {
+.notice-html-preview ::deep(table) {
   margin: 12px 0;
 }
 
-.notice-html-preview :deep(table th),
-.notice-html-preview :deep(table td) {
+.notice-html-preview ::deep(table th),
+.notice-html-preview ::deep(table td) {
   padding: 8px 12px;
 }
 
-.notice-html-preview :deep(pre) {
+.notice-html-preview ::deep(pre) {
   padding: 12px;
   margin: 12px 0;
   overflow-x: auto;
@@ -814,14 +801,14 @@ onMounted(async () => {
   border-radius: 4px;
 }
 
-.notice-html-preview :deep(blockquote) {
+.notice-html-preview ::deep(blockquote) {
   padding-left: 16px;
   margin: 12px 0;
   color: var(--el-text-color-regular);
   border-left: 4px solid var(--el-color-primary);
 }
 
-.notice-html-preview :deep(img) {
+.notice-html-preview ::deep(img) {
   max-width: 100%;
   height: auto;
 }
diff --git a/frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue b/frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue
index 4cbd0e72..64c2b672 100644
--- a/frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue
+++ b/frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue
@@ -291,7 +291,7 @@ import { 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/Upload/SingleImageUpload.vue";
+import SingleImageUpload from "@/components/others/fa-upload/index.vue";
 import { useAppStore } from "@stores/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 
diff --git a/frontend/web/src/views/module_system/param/index.vue b/frontend/web/src/views/module_system/param/index.vue
index 8f92cde5..95958955 100644
--- a/frontend/web/src/views/module_system/param/index.vue
+++ b/frontend/web/src/views/module_system/param/index.vue
@@ -1,6 +1,6 @@
 <!-- 系统配置：Art 布局 + useTable，与 notice 页一致 -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -39,11 +39,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -258,7 +258,7 @@ const paramSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<ConfigTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -337,6 +337,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   return normalizeParamQuery(sp);
 });
 
@@ -353,24 +355,9 @@ const paramExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const detailFormData = ref<ConfigTable>({} as ConfigTable);
 
-const formData = ref<ConfigForm>({
+const formData = reactive<ConfigForm>({
   id: undefined,
   config_name: "",
   config_key: "",
@@ -534,7 +521,7 @@ function deleteParamRow(id: number) {
       configStore.isConfigLoaded = false;
       await configStore.getConfig();
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -596,7 +583,7 @@ function handleBatchDelete() {
         configStore.isConfigLoaded = false;
         await configStore.getConfig();
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -611,15 +598,11 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.art-table-card {
-  flex: 1;
-}
-
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/position/index.vue b/frontend/web/src/views/module_system/position/index.vue
index c97e1335..2dc1ad75 100644
--- a/frontend/web/src/views/module_system/position/index.vue
+++ b/frontend/web/src/views/module_system/position/index.vue
@@ -1,6 +1,6 @@
 <!-- 岗位管理：Art + useTable；操作列前 3 个为 ArtButtonTable，其余收入「更多」下拉 -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -26,7 +26,7 @@
       </template>
     </FaSearchBar>
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -50,11 +50,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -392,7 +392,7 @@ const positionSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<PositionTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -413,7 +413,7 @@ function deletePositionRow(id: number) {
       await PositionAPI.deletePosition([id]);
       await userStore.getUserInfo();
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -504,6 +504,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   return normalizePositionQuery(sp) as unknown as Record<string, unknown>;
 });
 
@@ -520,24 +522,9 @@ const positionExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const detailFormData = ref<PositionTable>({});
 
-const formData = ref<PositionForm>({
+const formData = reactive<PositionForm>({
   id: undefined,
   name: undefined,
   order: 1,
@@ -707,7 +694,7 @@ function handleBatchDelete() {
         await PositionAPI.deletePosition(ids);
         await userStore.getUserInfo();
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -741,19 +728,15 @@ function handleMoreClick(status: string) {
 </script>
 
 <style scoped lang="scss">
-.art-table-card {
-  flex: 1;
-}
-
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-:deep(.position-table-actions .inline-flex) {
+::deep(.position-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/role/index.vue b/frontend/web/src/views/module_system/role/index.vue
index 0964f217..4638524f 100644
--- a/frontend/web/src/views/module_system/role/index.vue
+++ b/frontend/web/src/views/module_system/role/index.vue
@@ -1,6 +1,6 @@
 <!-- 角色管理：Art + useTable；操作列最多 3 个外露 +「更多」 -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -41,11 +41,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -390,7 +390,7 @@ const roleSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<RoleTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -420,7 +420,7 @@ function deleteRoleRow(id: number) {
       const userStore = useUserStore();
       await userStore.getUserInfo();
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -513,6 +513,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   const q = normalizeRoleQuery(sp);
   if (typeof q.status === "string") {
     const s = q.status;
@@ -543,24 +545,9 @@ const roleExportContentConfig = computed(() => ({
   },
 }));
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const detailFormData = ref<RoleTable>({} as RoleTable);
 
-const formData = ref<RoleForm>({
+const formData = reactive<RoleForm>({
   id: undefined,
   name: undefined,
   order: 1,
@@ -744,7 +731,7 @@ function handleBatchDelete() {
         const userStore = useUserStore();
         await userStore.getUserInfo();
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -779,19 +766,15 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.art-table-card {
-  flex: 1;
-}
-
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-:deep(.role-table-actions .inline-flex) {
+::deep(.role-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/tenant/index.vue b/frontend/web/src/views/module_system/tenant/index.vue
index 6b471544..579cc65c 100644
--- a/frontend/web/src/views/module_system/tenant/index.vue
+++ b/frontend/web/src/views/module_system/tenant/index.vue
@@ -1,6 +1,6 @@
 <!-- 租户管理：Art + useTable；操作列前 3 个为 ArtButtonTable，其余收入「更多」下拉 -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -37,11 +37,11 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -353,7 +353,7 @@ const tenantSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<TenantTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -373,7 +373,7 @@ function deleteTenantRow(id: number) {
     .then(async () => {
       await TenantAPI.deleteTenant([id]);
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -436,26 +436,11 @@ const {
   },
 });
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 20,
-    total: p.total ?? 0,
-  };
-});
-
 const detailFormData = ref<TenantTable>({ code: "", name: "", status: "0" });
 
 const currentEditId = ref<number | null>(null);
 
-const formData = ref<TenantForm>({
+const formData = reactive<TenantForm>({
   name: "",
   code: "",
   status: "0",
@@ -672,7 +657,7 @@ function handleBatchDelete() {
         batchDeleting.value = true;
         await TenantAPI.deleteTenant(ids);
         ElMessage.success("删除成功");
-        FaTableRef.value?.elTableRef?.clearSelection();
+        faTableRef.value?.elTableRef?.clearSelection();
         await refreshRemove();
       } finally {
         batchDeleting.value = false;
@@ -683,19 +668,15 @@ function handleBatchDelete() {
 </script>
 
 <style scoped lang="scss">
-.art-table-card {
-  flex: 1;
-}
-
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-:deep(.tenant-table-actions .inline-flex) {
+::deep(.tenant-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/user/index.vue b/frontend/web/src/views/module_system/user/index.vue
index 597b0de5..08414c05 100644
--- a/frontend/web/src/views/module_system/user/index.vue
+++ b/frontend/web/src/views/module_system/user/index.vue
@@ -1,13 +1,13 @@
 <!-- 用户管理：左部门树 + 右 Art 表格 -->
 <template>
-  <div class="art-full-height user-manage-page">
+  <div class="fa-full-height user-manage-page">
     <div
       class="user-manage-body box-border flex gap-4 h-full max-md:block max-md:gap-0 max-md:h-auto"
     >
       <div
         class="user-dept-panel flex-shrink-0 w-58 h-full max-md:w-full max-md:h-auto max-md:mb-5"
       >
-        <ElCard class="tree-card art-card-xs flex flex-col h-full mt-0" shadow="hover">
+        <ElCard class="tree-card fa-card-xs flex flex-col h-full mt-0" shadow="hover">
           <template #header>
             <b>部门</b>
           </template>
@@ -47,7 +47,7 @@
           </template>
         </FaSearchBar>
 
-        <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+        <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
           <FaTableHeader
             v-model:columns="columnChecks"
             v-model:showSearchBar="showSearchBar"
@@ -74,12 +74,12 @@
           </FaTableHeader>
 
           <FaTable
-            ref="FaTableRef"
+            ref="faTableRef"
             row-key="id"
             :loading="loading"
             :data="data"
             :columns="columns"
-            :pagination="paginationBind"
+            :pagination="pagination"
             @selection-change="onTableSelectionChange"
             @pagination:size-change="handleSizeChange"
             @pagination:current-change="handleCurrentChange"
@@ -293,7 +293,7 @@
       </template>
     </FaDrawer>
 
-    <ArtImportDialog
+    <FaImportDialog
       v-model="importModalVisible"
       :content-config="userImportContentConfig"
       default-template-file-name="user_import_template.xlsx"
@@ -329,7 +329,7 @@ import FaTableHeaderLeft from "@/components/tables/fa-table-header-left/index.vu
 import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
 import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
 import FaDrawer from "@/components/modal/fa-drawer/index.vue";
-import ArtImportDialog from "@/components/modal/fa-import-dialog/index.vue";
+import FaImportDialog from "@/components/modal/fa-import-dialog/index.vue";
 import FaExportDialog from "@/components/modal/fa-export-dialog/index.vue";
 import type { IContentConfig, IObject } from "@/components/modal/types";
 import UserAPI, {
@@ -535,7 +535,7 @@ const userSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<UserInfo[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => id != null && !Number.isNaN(id))
@@ -576,7 +576,7 @@ function deleteUserRow(id: number) {
       } else {
         ElMessage.success("删除成功");
       }
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -609,8 +609,8 @@ const {
   core: {
     apiFn: fetchUserTableList,
     apiParams: {
-      current: 1,
-      size: 20,
+      page_no: 1,
+      page_size: 20,
     },
     columnsFactory: (): import("@/types/component").ColumnOption<UserInfo>[] => [
       { type: "selection", width: 48, fixed: "left" },
@@ -686,6 +686,8 @@ const exportQueryParams = computed(() => {
   const sp = { ...(searchParams as object) } as Record<string, unknown>;
   delete sp.current;
   delete sp.size;
+  delete sp.page_no;
+  delete sp.page_size;
   if (
     deptFilterId.value !== undefined &&
     deptFilterId.value !== null &&
@@ -729,7 +731,7 @@ const userExportContentConfig = computed(() => ({
   },
 }));
 
-const formData = ref<UserForm>({
+const formData = reactive<UserForm>({
   id: undefined,
   username: undefined,
   name: undefined,
@@ -799,13 +801,13 @@ const initialFormData: UserForm = {
 async function handleSearchBarSearch(params: UserSearchForm) {
   await searchBarRef.value?.validate?.();
   replaceSearchParams(buildUserReplaceParams(params));
-  getData();
+  await getData();
 }
 
 async function applyUserSearchFromForm() {
   await searchBarRef.value?.validate?.();
   replaceSearchParams(buildUserReplaceParams(searchForm.value));
-  getData();
+  await getData();
 }
 
 async function afterUserSelectSearch() {
@@ -825,8 +827,8 @@ function onResetSearch() {
   void resetSearchParams();
 }
 
-function handleDeptNodeClick() {
-  getData();
+async function handleDeptNodeClick() {
+  await getData();
 }
 
 function openImportModal() {
@@ -1000,7 +1002,7 @@ function handleMoreClick(status: string) {
 
 <style lang="scss" scoped>
 /* 左侧部门树内容区：card body 纵向 flex + 滚动条占满剩余高度（布局在 index，内边距在 DeptTree） */
-.tree-card :deep(.el-card__body) {
+.tree-card ::deep(.el-card__body) {
   display: flex;
   flex: 1;
   flex-direction: column;
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 af61691d..75c452ef 100644
--- a/frontend/web/src/views/module_task/cronjob/job/index.vue
+++ b/frontend/web/src/views/module_task/cronjob/job/index.vue
@@ -1,6 +1,6 @@
-<!-- 调度任务：Art + useTable（主列表卡片；抽屉内表格） -->
+<!-- 调度任务：主区调度器状态 + 任务卡片列表（getSchedulerJobs 全量、前端筛选）；抽屉内执行日志表用 useTable 分页 -->
 <template>
-  <div class="art-full-height job-page flex flex-col min-h-0">
+  <div class="fa-full-height job-page flex flex-col min-h-0">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -18,7 +18,7 @@
     />
 
     <ElCard
-      class="flex flex-1 min-h-0 flex-col art-table-card"
+      class="flex flex-1 min-h-0 flex-col fa-table-card"
       :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
     >
       <FaTableHeader
@@ -281,7 +281,7 @@
           @search="handleLogSearchBarSearch"
           @reset="onLogResetSearch"
         />
-        <ElCard class="art-table-card log-table-card mt-3 flex flex-1 min-h-0 flex-col">
+        <ElCard class="fa-table-card log-table-card mt-3 flex flex-1 min-h-0 flex-col">
           <FaTableHeader
             v-model:columns="logColumnChecks"
             layout="search,refresh"
@@ -298,7 +298,7 @@
             </template>
           </FaTableHeader>
           <FaTable
-            ref="logFaTableRef"
+            ref="logfaTableRef"
             row-key="id"
             :loading="logLoading"
             :data="logTableData"
@@ -359,12 +359,12 @@ 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/JsonPretty/index.vue";
+import JsonPretty 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";
 import { ElMessage, ElMessageBox, ElTag } from "element-plus";
-import { computed, h, nextTick, ref } from "vue";
+import { computed, h, nextTick, onMounted, ref } from "vue";
 import { Terminal, TerminalApi } from "vue-web-terminal";
 
 const schedulerStatus = ref<SchedulerStatus>({
@@ -378,13 +378,6 @@ type JobSearchForm = {
   status?: string;
 };
 
-function buildJobReplaceParams(u: JobSearchForm): Record<string, unknown> {
-  return {
-    name: u.name,
-    status: u.status,
-  };
-}
-
 const searchForm = ref<JobSearchForm>({
   name: undefined,
   status: undefined,
@@ -474,8 +467,7 @@ const refreshJobList = fetchSchedulerJobs;
 
 async function handleJobSearchBarSearch() {
   await searchBarRef.value?.validate?.();
-  replaceJobSearchParams(buildJobReplaceParams(params));
-  getJobList();
+  await fetchSchedulerJobs();
 }
 
 async function onJobResetSearch() {
@@ -483,9 +475,13 @@ async function onJobResetSearch() {
     name: undefined,
     status: undefined,
   };
-  await resetJobSearchParams();
+  await fetchSchedulerJobs();
 }
 
+onMounted(() => {
+  void fetchSchedulerJobs();
+});
+
 type LogSearchForm = {
   status?: string;
   trigger_type?: string;
@@ -544,7 +540,7 @@ const logSearchItems = computed<SearchFormItem[]>(() => [
 ]);
 
 const currentLogJobId = ref<string | undefined>(undefined);
-const logFaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const logfaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const logSelectedRows = ref<JobLogTable[]>([]);
 const logSelectedIds = computed(() =>
   logSelectedRows.value.map((r) => r.id).filter((id): id is number => typeof id === "number")
@@ -670,7 +666,7 @@ function deleteLogRow(id: number | undefined) {
     .then(async () => {
       await JobAPI.deleteJobLog([id]);
       ElMessage.success("删除成功");
-      logFaTableRef.value?.elTableRef?.clearSelection();
+      logfaTableRef.value?.elTableRef?.clearSelection();
       await refreshLogRemove();
     })
     .catch(() => {});
@@ -1043,7 +1039,7 @@ function handleViewJobState(row: JobLogTable) {
 </script>
 
 <style scoped>
-.job-page :deep(.data-table) {
+.job-page ::deep(.data-table) {
   height: 100%;
 }
 
@@ -1155,7 +1151,7 @@ function handleViewJobState(row: JobLogTable) {
   min-height: 0;
 }
 
-.execution-log-drawer :deep(.el-card.data-table) {
+.execution-log-drawer ::deep(.el-card.data-table) {
   flex: 1;
   min-height: 0;
 }
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 d8ad9043..3cac082f 100644
--- a/frontend/web/src/views/module_task/cronjob/node/index.vue
+++ b/frontend/web/src/views/module_task/cronjob/node/index.vue
@@ -1,6 +1,6 @@
 <!-- 定时任务节点：Art + useTable -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -37,12 +37,12 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         row-key="id"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -289,7 +289,7 @@ 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/IntervalTab/index.vue";
+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";
@@ -343,7 +343,7 @@ const nodeSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<NodeTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => typeof id === "number")
@@ -364,7 +364,7 @@ function deleteNodeRow(id: number | undefined) {
     .then(async () => {
       await NodeAPI.deleteNode([id]);
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -499,21 +499,6 @@ const {
   },
 });
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 10,
-    total: p.total ?? 0,
-  };
-});
-
 async function handleSearchBarSearch(params: NodeSearchForm) {
   await searchBarRef.value?.validate?.();
   replaceSearchParams(buildNodeReplaceParams(params));
@@ -598,7 +583,7 @@ const defaultCodeBlock = `def handler(*args, **kwargs):
     }
 `;
 
-const formData = ref<NodeForm>({
+const formData = reactive<NodeForm>({
   id: undefined,
   name: "",
   code: undefined,
@@ -1001,17 +986,17 @@ onMounted(async () => {
   margin-top: 16px;
 }
 
-.node-splitter-art-form :deep(.el-row > .el-col:last-child),
-.execute-debug-art-form :deep(.el-row > .el-col:last-child) {
+.node-splitter-art-form ::deep(.el-row > .el-col:last-child),
+.execute-debug-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.node-splitter-art-form :deep(.el-form-item__content),
-.execute-debug-art-form :deep(.el-form-item__content) {
+.node-splitter-art-form ::deep(.el-form-item__content),
+.execute-debug-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-.node-splitter-art-form :deep(section) {
+.node-splitter-art-form ::deep(section) {
   padding-right: 10px;
   padding-left: 10px;
 }
diff --git a/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue b/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
index 99567607..d08b28ae 100644
--- a/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
+++ b/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
@@ -193,15 +193,15 @@ function handleDelete() {
   flex: 1;
 }
 
-.panel-art-form :deep(.el-row > .el-col:last-child) {
+.panel-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.panel-art-form :deep(.el-form-item__content) {
+.panel-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-.panel-art-form :deep(section) {
+.panel-art-form ::deep(section) {
   padding: 0;
 }
 </style>
diff --git a/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue b/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue
index 51e3a836..82fce6bd 100644
--- a/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue
+++ b/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue
@@ -250,15 +250,15 @@ onMounted(() => {
   flex: 1;
 }
 
-.panel-art-form :deep(.el-row > .el-col:last-child) {
+.panel-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.panel-art-form :deep(.el-form-item__content) {
+.panel-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-.panel-art-form :deep(section) {
+.panel-art-form ::deep(section) {
   padding: 0;
 }
 </style>
diff --git a/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue b/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
index 3b72335e..20f73269 100644
--- a/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
+++ b/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
@@ -230,7 +230,7 @@ const emit = defineEmits(["update:visible", "refresh"]);
 const formRef = ref<InstanceType<typeof FaForm> | null>(null);
 const workflowId = ref<number>();
 
-const formData = ref<Partial<WorkflowForm>>({
+const formData = reactive<Partial<WorkflowForm>>({
   code: "",
   name: "",
   description: "",
@@ -904,7 +904,7 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
 
 <style scoped lang="scss">
 .workflow-drawer {
-  :deep(.el-drawer__body) {
+  ::deep(.el-drawer__body) {
     display: flex;
     flex-direction: column;
   }
@@ -916,11 +916,11 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
   height: 100%;
 }
 
-:deep(.el-splitter) {
+::deep(.el-splitter) {
   flex: 1;
 }
 
-:deep(.el-splitter-panel) {
+::deep(.el-splitter-panel) {
   overflow: hidden;
 }
 
@@ -961,12 +961,12 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
   overflow: hidden;
 }
 
-:deep(.vue-flow__controls) {
+::deep(.vue-flow__controls) {
   display: flex;
   flex-direction: column;
 }
 
-:deep(.vue-flow__controls-button) {
+::deep(.vue-flow__controls-button) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -978,7 +978,7 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
   border: none;
 }
 
-:deep(.el-dropdown) {
+::deep(.el-dropdown) {
   display: flex;
 }
 
@@ -996,15 +996,15 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
   justify-content: flex-end;
 }
 
-.workflow-base-art-form :deep(.el-row > .el-col:last-child) {
+.workflow-base-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.workflow-base-art-form :deep(.el-form-item__content) {
+.workflow-base-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-.workflow-base-art-form :deep(section) {
+.workflow-base-art-form ::deep(section) {
   padding: 0;
 }
 </style>
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 9f79cd95..807a3bb6 100644
--- a/frontend/web/src/views/module_task/workflow/definition/index.vue
+++ b/frontend/web/src/views/module_task/workflow/definition/index.vue
@@ -1,6 +1,6 @@
 <!-- 工作流定义：Art + useTable -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -37,12 +37,12 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         row-key="id"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -187,7 +187,7 @@ const workflowSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<WorkflowTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => typeof id === "number")
@@ -208,7 +208,7 @@ function deleteWorkflowRow(id: number | undefined) {
     .then(async () => {
       await WorkflowDefinitionAPI.deleteWorkflow([id]);
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -331,21 +331,6 @@ const {
   },
 });
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 10,
-    total: p.total ?? 0,
-  };
-});
-
 async function handleSearchBarSearch(params: WorkflowSearchForm) {
   await searchBarRef.value?.validate?.();
   replaceSearchParams(buildWorkflowReplaceParams(params));
diff --git a/frontend/web/src/views/module_task/workflow/node-type/index.vue b/frontend/web/src/views/module_task/workflow/node-type/index.vue
index cea96304..a3b1d6e9 100644
--- a/frontend/web/src/views/module_task/workflow/node-type/index.vue
+++ b/frontend/web/src/views/module_task/workflow/node-type/index.vue
@@ -1,6 +1,6 @@
 <!-- 工作流节点类型：Art + useTable -->
 <template>
-  <div class="art-full-height">
+  <div class="fa-full-height">
     <FaSearchBar
       v-show="showSearchBar"
       ref="searchBarRef"
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="art-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -37,12 +37,12 @@
       </FaTableHeader>
 
       <FaTable
-        ref="FaTableRef"
+        ref="faTableRef"
         row-key="id"
         :loading="loading"
         :data="data"
         :columns="columns"
-        :pagination="paginationBind"
+        :pagination="pagination"
         @selection-change="onTableSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
@@ -188,7 +188,7 @@ const nodeTypeSearchItems = computed<SearchFormItem[]>(() => [
   },
 ]);
 
-const FaTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
+const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 const selectedRows = ref<WorkflowNodeTypeTable[]>([]);
 const selectedIds = computed(() =>
   selectedRows.value.map((r) => r.id).filter((id): id is number => typeof id === "number")
@@ -219,7 +219,7 @@ function deleteNodeTypeRow(id: number | undefined) {
     .then(async () => {
       await WorkflowNodeTypeAPI.deleteWorkflowNodeType([id]);
       ElMessage.success("删除成功");
-      FaTableRef.value?.elTableRef?.clearSelection();
+      faTableRef.value?.elTableRef?.clearSelection();
       await refreshRemove();
     })
     .catch(() => {});
@@ -331,21 +331,6 @@ const {
   },
 });
 
-const paginationBind = computed(() => {
-  const p = pagination as unknown as {
-    current?: number;
-    size?: number;
-    total?: number;
-    page_no?: number;
-    page_size?: number;
-  };
-  return {
-    current: p.current ?? p.page_no ?? 1,
-    size: p.size ?? p.page_size ?? 10,
-    total: p.total ?? 0,
-  };
-});
-
 async function handleSearchBarSearch(params: NodeTypeSearchForm) {
   await searchBarRef.value?.validate?.();
   replaceSearchParams(buildNodeTypeReplaceParams(params));
@@ -533,11 +518,11 @@ async function submitForm() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form :deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form :deep(.el-form-item__content) {
+.crud-dialog-art-form ::deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/vite.config.ts b/frontend/web/vite.config.ts
index 1e26e20a..e16817b4 100755
--- a/frontend/web/vite.config.ts
+++ b/frontend/web/vite.config.ts
@@ -1,3 +1,4 @@
+import fs from "node:fs";
 import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
@@ -16,6 +17,93 @@ const __APP_INFO__ = {
   buildTimestamp: Date.now(),
 };
 
+/**
+ * 扫描 node_modules 下 Element Plus 全部组件的样式入口（与 unplugin 按需样式一致）。
+ * 漏扫会在首次用到该组件时触发 dependency optimization 更新 → dev 整页刷新。
+ */
+function elementPlusComponentStyleIncludes(rootDir: string): string[] {
+  const componentsDir = path.join(rootDir, "node_modules", "element-plus", "es", "components");
+  try {
+    return 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`);
+  } 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);
@@ -136,7 +224,7 @@ export default ({ mode }: { mode: string }) => {
         dts: "src/types/import/components.d.ts",
         resolvers: [ElementPlusResolver({ importStyle: "sass" })],
         /** art-* 布局组件以 src/layouts 为唯一源码目录（与 src/layouts/index.vue 一致），避免与旧路径重复 */
-        dirs: ["src/layouts", "src/components", "src/**/components"],
+        dirs: ["src/components", "src/**/components"],
       }),
       ElementPlus({
         useSource: true,
@@ -149,117 +237,11 @@ export default ({ mode }: { mode: string }) => {
         threshold: 10240,
         deleteOriginFile: false,
       }),
-      vueDevTools(),
+      /** 仅开发启用：避免生产包体积膨胀与运行期 DevTools 开销 */
+      ...(isProduction ? [] : [vueDevTools()]),
     ],
     optimizeDeps: {
-      include: [
-        "vue",
-        "vue-router",
-        "element-plus",
-        "pinia",
-        "axios",
-        "@vueuse/core",
-        "@wangeditor-next/editor-for-vue",
-        "codemirror-editor-vue3",
-        "exceljs",
-        "path-to-regexp",
-        "echarts/core",
-        "echarts/renderers",
-        "echarts/charts",
-        "echarts/components",
-        "vue-i18n",
-        "nprogress",
-        "qs",
-        "path-browserify",
-        "@element-plus/icons-vue",
-        "element-plus/es",
-        "element-plus/es/locale/lang/en",
-        "element-plus/es/locale/lang/zh-cn",
-        "element-plus/es/components/alert/style/index",
-        "element-plus/es/components/avatar/style/index",
-        "element-plus/es/components/backtop/style/index",
-        "element-plus/es/components/badge/style/index",
-        "element-plus/es/components/base/style/index",
-        "element-plus/es/components/breadcrumb-item/style/index",
-        "element-plus/es/components/breadcrumb/style/index",
-        "element-plus/es/components/button/style/index",
-        "element-plus/es/components/card/style/index",
-        "element-plus/es/components/cascader/style/index",
-        "element-plus/es/components/checkbox-group/style/index",
-        "element-plus/es/components/checkbox/style/index",
-        "element-plus/es/components/col/style/index",
-        "element-plus/es/components/color-picker/style/index",
-        "element-plus/es/components/config-provider/style/index",
-        "element-plus/es/components/date-picker/style/index",
-        "element-plus/es/components/descriptions-item/style/index",
-        "element-plus/es/components/descriptions/style/index",
-        "element-plus/es/components/dialog/style/index",
-        "element-plus/es/components/divider/style/index",
-        "element-plus/es/components/drawer/style/index",
-        "element-plus/es/components/dropdown-item/style/index",
-        "element-plus/es/components/dropdown-menu/style/index",
-        "element-plus/es/components/dropdown/style/index",
-        "element-plus/es/components/empty/style/index",
-        "element-plus/es/components/form-item/style/index",
-        "element-plus/es/components/form/style/index",
-        "element-plus/es/components/icon/style/index",
-        "element-plus/es/components/image-viewer/style/index",
-        "element-plus/es/components/image/style/index",
-        "element-plus/es/components/input-number/style/index",
-        "element-plus/es/components/input-tag/style/index",
-        "element-plus/es/components/input/style/index",
-        "element-plus/es/components/link/style/index",
-        "element-plus/es/components/loading/style/index",
-        "element-plus/es/components/menu-item/style/index",
-        "element-plus/es/components/menu/style/index",
-        "element-plus/es/components/message-box/style/index",
-        "element-plus/es/components/message/style/index",
-        "element-plus/es/components/notification/style/index",
-        "element-plus/es/components/option/style/index",
-        "element-plus/es/components/pagination/style/index",
-        "element-plus/es/components/popover/style/index",
-        "element-plus/es/components/progress/style/index",
-        "element-plus/es/components/radio-button/style/index",
-        "element-plus/es/components/radio-group/style/index",
-        "element-plus/es/components/radio/style/index",
-        "element-plus/es/components/row/style/index",
-        "element-plus/es/components/scrollbar/style/index",
-        "element-plus/es/components/select/style/index",
-        "element-plus/es/components/skeleton-item/style/index",
-        "element-plus/es/components/skeleton/style/index",
-        "element-plus/es/components/step/style/index",
-        "element-plus/es/components/steps/style/index",
-        "element-plus/es/components/sub-menu/style/index",
-        "element-plus/es/components/switch/style/index",
-        "element-plus/es/components/tab-pane/style/index",
-        "element-plus/es/components/table-column/style/index",
-        "element-plus/es/components/table/style/index",
-        "element-plus/es/components/tabs/style/index",
-        "element-plus/es/components/tag/style/index",
-        "element-plus/es/components/text/style/index",
-        "element-plus/es/components/time-picker/style/index",
-        "element-plus/es/components/time-select/style/index",
-        "element-plus/es/components/timeline-item/style/index",
-        "element-plus/es/components/timeline/style/index",
-        "element-plus/es/components/tooltip/style/index",
-        "element-plus/es/components/tree-select/style/index",
-        "element-plus/es/components/tree/style/index",
-        "element-plus/es/components/upload/style/index",
-        "element-plus/es/components/watermark/style/index",
-        "element-plus/es/components/tour/style/index",
-        "element-plus/es/components/tour-step/style/index",
-        "element-plus/es/components/popconfirm/style/index",
-        "element-plus/es/components/container/style/index",
-        "element-plus/es/components/main/style/index",
-        "element-plus/es/components/aside/style/index",
-        "element-plus/es/components/footer/style/index",
-        "element-plus/es/components/header/style/index",
-        "element-plus/es/components/slider/style/index",
-        "element-plus/es/components/button-group/style/index",
-        "element-plus/es/components/result/style/index",
-        "element-plus/es/components/checkbox-button/style/index",
-        "element-plus/es/components/space/style/index",
-      ],
+      include: buildOptimizeDepsInclude(root),
     },
     css: {
       preprocessorOptions: {