From a48316c3c3e7881e426e0fa91ca3cafd6a5e0602 Mon Sep 17 00:00:00 2001
From: zhangtao <9480807882@qq.com>
Date: Fri, 15 May 2026 01:09:40 +0800
Subject: [PATCH] =?UTF-8?q?build(deps):=20=E5=8D=87=E7=BA=A7=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E4=BE=9D=E8=B5=96=E5=8F=8A=E9=80=82=E9=85=8DVue3/Vite?=
 =?UTF-8?q?7=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/web/.npmrc                           |    2 +
 frontend/web/package.json                     |   93 +-
 .../banners/fa-basic-banner/index.vue         |    1 +
 .../banners/fa-card-banner/index.vue          |    2 +-
 .../components/cards/fa-image-card/index.vue  |    3 +-
 .../fa-dual-bar-compare-chart/index.vue       |    1 -
 .../charts/fa-k-line-chart/index.vue          |    3 +-
 .../components/charts/fa-map-chart/index.vue  |    2 +-
 .../charts/fa-scatter-chart/index.vue         |    1 -
 .../forms/fa-button-table/index.vue           |    2 +-
 .../forms/fa-excel-export/index.vue           |    4 +-
 .../forms/fa-excel-import/index.vue           |    4 +-
 .../layouts/fa-header-bar/index.vue           |    2 +-
 .../fa-header-bar/widget/FaUserMenu.vue       |   51 -
 .../fa-menus/fa-sidebar-menu/index.vue        |    2 +-
 .../fa-sidebar-menu/widget/SidebarSubmenu.vue |    6 +-
 .../layouts/fa-notification/index.vue         |   10 +-
 .../layouts/fa-page-content/index.vue         |    4 +-
 .../layouts/fa-screen-lock/index.vue          |   12 +-
 .../widget/MenuLayoutSettings.vue             |    2 +-
 .../widget/MenuStyleSettings.vue              |    2 +-
 .../widget/ThemeSettings.vue                  |    2 +-
 .../components/media/fa-cutter-img/index.vue  |    4 +-
 .../modal/fa-export-dialog/index.vue          |    4 +-
 .../modal/fa-import-dialog/index.vue          |    4 +-
 .../components/others/fa-calendar/index.vue   |    4 +-
 .../others/fa-github-corner/index.vue         |    4 +-
 .../src/components/others/fa-guide/index.vue  |    2 +-
 .../others/fa-icon-select/index.vue           |    2 +-
 .../others/fa-interval-tab/index.vue          |    2 +-
 .../others/fa-markdown-renderer/index.vue     |    2 +-
 .../others/fa-table-select/index.vue          |    2 +-
 .../components/others/fa-watermark/index.vue  |    2 +-
 .../views/fa-login/LoginLeftView.vue          |   35 +-
 frontend/web/src/config/modules/fastEnter.ts  |   20 +-
 .../web/src/directives/business/highlight.ts  |    5 +-
 frontend/web/src/hooks/core/useChart.ts       |    1 -
 frontend/web/src/hooks/core/useTable.ts       |    2 +-
 frontend/web/src/locales/langs/en.json        |    1 +
 frontend/web/src/locales/langs/zh.json        |    1 +
 frontend/web/src/router/beforeEach.ts         |  146 +-
 frontend/web/src/router/staticRoutes.ts       |    5 +-
 frontend/web/src/store/modules/user.store.ts  |   11 +-
 frontend/web/src/styles/core/app.scss         |    5 +
 frontend/web/src/styles/core/md.scss          |   10 +-
 .../web/src/styles/core/theme-animation.scss  |    4 +-
 frontend/web/src/utils/http/index.ts          |   12 +-
 frontend/web/src/utils/socket/index.ts        |    4 +-
 .../src/views/dashboard/analysis/index.vue    |  677 +++++--
 .../analysis/modules/top-products.vue         |    2 +-
 .../web/src/views/dashboard/home/index.vue    | 1584 +++--------------
 .../dashboard/home/modules/annual-sales.vue   |    2 +-
 .../views/dashboard/home/modules/banner.vue   |    2 +-
 .../home/modules/cart-conversion-rate.vue     |    2 +-
 .../dashboard/home/modules/hot-commodity.vue  |    2 +-
 .../home/modules/hot-products-list.vue        |   12 +-
 .../dashboard/home/modules/product-sales.vue  |    2 +-
 .../home/modules/recent-transaction.vue       |    2 +-
 .../home/modules/sales-classification.vue     |    2 +-
 .../dashboard/home/modules/sales-growth.vue   |    2 +-
 .../dashboard/home/modules/sales-trend.vue    |    2 +-
 .../home/modules/total-order-volume.vue       |    2 +-
 .../dashboard/home/modules/total-products.vue |    2 +-
 .../home/modules/transaction-list.vue         |   28 +-
 .../src/views/dashboard/workplace/index.vue   |  578 +-----
 .../workplace/modules/about-project.vue       |    4 +-
 .../workplace/modules/active-user.vue         |    2 +-
 .../dashboard/workplace/modules/card-list.vue |  196 +-
 .../workplace/modules/dynamic-stats.vue       |    2 +-
 .../dashboard/workplace/modules/new-user.vue  |   11 +-
 .../workplace/modules/sales-overview.vue      |    2 +-
 .../dashboard/workplace/modules/todo-list.vue |    2 +-
 .../components/ArticlePublishDrawer.vue       |    4 +-
 .../web/src/views/fastlink/article/index.vue  |    6 +-
 .../web/src/views/fastlink/tutorial/index.vue |  134 +-
 .../module_ai/chat/components/MessageItem.vue |    2 +-
 .../web/src/views/module_ai/memory/index.vue  |    6 +-
 .../src/views/module_example/demo/index.vue   |   16 +-
 .../src/views/module_example/demo01/index.vue |    8 +-
 .../gencode/components/CreateTableDialog.vue  |    2 +-
 .../gencode/components/GenBasicStep.vue       |    2 +-
 .../gencode/components/GenColumnsStep.vue     |    4 +-
 .../components/ImportDbTableDialog.vue        |    4 +-
 .../views/module_generator/gencode/index.vue  |   32 +-
 .../src/views/module_monitor/cache/index.vue  |  264 +--
 .../src/views/module_monitor/online/index.vue |    6 +-
 .../src/views/module_monitor/server/index.vue |  344 ++--
 .../login/components/LoginAccountForm.vue     |    2 +-
 .../login/components/LoginAuthLinkRow.vue     |    2 +-
 .../login/components/LoginRegisterPanel.vue   |    2 +-
 .../views/module_system/auth/login/index.vue  |    4 +-
 .../src/views/module_system/dept/index.vue    |    8 +-
 .../dict/components/DataDrawer.vue            |    2 +-
 .../src/views/module_system/dict/index.vue    |    8 +-
 .../web/src/views/module_system/log/index.vue |    8 +-
 .../src/views/module_system/menu/index.vue    |   20 +-
 .../src/views/module_system/notice/index.vue  |    8 +-
 .../param/components/ConfigInfoDrawer.vue     |   30 +-
 .../src/views/module_system/param/index.vue   |    8 +-
 .../views/module_system/position/index.vue    |    8 +-
 .../role/components/PermissonDrawer.vue       |   16 +-
 .../src/views/module_system/role/index.vue    |   12 +-
 .../src/views/module_system/tenant/index.vue  |    8 +-
 .../src/views/module_system/user/index.vue    |   14 +-
 .../views/module_task/cronjob/node/index.vue  |   16 +-
 .../components/WorkflowDesignDrawer.vue       |   47 +-
 .../module_task/workflow/definition/index.vue |    6 +-
 .../module_task/workflow/node-type/index.vue  |    6 +-
 frontend/web/tsconfig.json                    |   29 +-
 frontend/web/vite.config.ts                   |   32 +-
 110 files changed, 1863 insertions(+), 2894 deletions(-)
 create mode 100644 frontend/web/.npmrc

diff --git a/frontend/web/.npmrc b/frontend/web/.npmrc
new file mode 100644
index 00000000..acf8d0ce
--- /dev/null
+++ b/frontend/web/.npmrc
@@ -0,0 +1,2 @@
+# 抑制废弃子依赖警告（fstream、lodash.isequal 等深层依赖已无新版可升级）
+deprecated-warning=false
diff --git a/frontend/web/package.json b/frontend/web/package.json
index 98b26ae8..8ce1fd95 100755
--- a/frontend/web/package.json
+++ b/frontend/web/package.json
@@ -21,7 +21,7 @@
     "ts:check": "pnpm vue-tsc --noEmit --skipLibCheck",
     "npm:check": "pnpx npm-check-updates -u",
     "clean:cache": "pnpx rimraf node_modules/.cache node_modules/.vite",
-    "prepare": "husky install",
+    "prepare": "husky",
     "icon": "esno ./scripts/icon.ts",
     "preview": "vite preview",
     "type-check": "vue-tsc --noEmit",
@@ -73,75 +73,74 @@
     "@iconify-json/line-md": "^1.2.16",
     "@iconify-json/ri": "^1.2.10",
     "@iconify-json/svg-spinners": "^1.2.4",
-    "@iconify/vue": "^5.0.0",
-    "@tailwindcss/vite": "^4.1.14",
+    "@iconify/vue": "^5.0.1",
+    "@tailwindcss/vite": "^4.3.0",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.48.1",
     "@vue-flow/minimap": "^1.5.4",
-    "@vueuse/core": "^13.9.0",
-    "@wangeditor-next/editor": "^5.6.49",
+    "@vueuse/core": "^14.3.0",
+    "@wangeditor-next/editor": "^5.7.0",
     "@wangeditor-next/editor-for-vue": "^5.1.14",
     "animate.css": "^4.1.1",
-    "axios": "^1.12.2",
+    "axios": "^1.16.1",
     "clipboard": "^2.0.11",
-    "codemirror": "^5.65.19",
+    "codemirror": "^5.65.21",
     "codemirror-editor-vue3": "^2.8.0",
     "crypto-js": "^4.2.0",
     "dagre": "^0.8.5",
-    "dayjs": "^1.11.13",
-    "dompurify": "^3.3.1",
+    "dayjs": "^1.11.20",
+    "dompurify": "^3.4.3",
     "echarts": "^6.0.0",
-    "element-plus": "^2.11.2",
+    "element-plus": "^2.14.0",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.11.1",
     "js-beautify": "^1.15.4",
     "markdown-it": "^14.1.0",
-    "markdown-it-highlightjs": "^4.2.0",
+    "markdown-it-highlightjs": "^4.3.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "ohash": "^2.0.11",
     "path-browserify": "^1.0.1",
-    "path-to-regexp": "^8.2.0",
-    "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.4.1",
-    "qrcode.vue": "^3.6.0",
-    "qs": "^6.14.0",
-    "tailwindcss": "^4.1.14",
-    "vue": "^3.5.21",
+    "path-to-regexp": "^8.4.2",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "qrcode.vue": "^3.9.0",
+    "qs": "^6.15.0",
+    "tailwindcss": "^4.3.0",
+    "vue": "^3.5.34",
     "vue-draggable-plus": "^0.6.0",
     "vue-i18n": "^11.1.10",
     "vue-json-pretty": "^2.5.0",
-    "vue-router": "^4.5.1",
+    "vue-router": "^5.0.7",
     "vue-web-terminal": "^3.4.1",
     "vue3-cron-plus": "^0.1.9",
-    "vuedraggable": "^4.1.0",
+    "vuedraggable": "^2.24.3",
     "xgplayer": "^3.0.20",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
-    "@eslint/js": "^9.32.0",
+    "@commitlint/cli": "^21.0.1",
+    "@commitlint/config-conventional": "^21.0.1",
+    "@eslint/js": "^10.0.0",
     "@iconify/utils": "^2.3.0",
-    "@types/codemirror": "^5.60.16",
-    "@types/dagre": "^0.7.53",
-    "@types/dompurify": "^3.2.0",
+    "@types/codemirror": "^5.60.17",
+    "@types/dagre": "^0.7.54",
     "@types/file-saver": "^2.0.7",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.0.5",
     "@types/nprogress": "^0.2.3",
     "@types/path-browserify": "^1.0.3",
     "@types/qs": "^6.14.0",
-    "@typescript-eslint/eslint-plugin": "^8.38.0",
-    "@typescript-eslint/parser": "^8.38.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/compiler-sfc": "^3.5.22",
     "autoprefixer": "^10.4.21",
     "commitizen": "^4.3.1",
-    "cz-git": "^1.12.0",
-    "eslint": "^9.32.0",
+    "cz-git": "^1.13.1",
+    "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.3",
     "eslint-plugin-vue": "^10.4.0",
@@ -155,28 +154,38 @@
     "prettier": "^3.6.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.89.2",
-    "stylelint": "^16.25.0",
+    "stylelint": "^17.0.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recess-order": "^6.1.0",
-    "stylelint-config-recommended": "^15.0.0",
-    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-recess-order": "^7.7.0",
+    "stylelint-config-recommended": "^18.0.0",
+    "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-config-recommended-vue": "^1.6.1",
-    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-order": "^8.0.0",
     "stylelint-prettier": "^5.0.3",
     "terser": "^5.43.1",
     "tsx": "^4.20.3",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.38.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.3",
     "unplugin-auto-import": "^20.2.0",
     "unplugin-element-plus": "^0.10.0",
     "unplugin-vue-components": "^29.1.0",
     "vite": "^7.1.5",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-vue-devtools": "^7.7.6",
+    "vite-plugin-vue-devtools": "^8.1.2",
     "vue-demi": "^0.14.9",
-    "vue-eslint-parser": "^10.2.0",
+    "vue-eslint-parser": "^10.4.0",
     "vue-img-cutter": "^3.0.5",
-    "vue-tsc": "^2.2.12"
+    "vue-tsc": "^3.2.9"
+  },
+  "pnpm": {
+    "overrides": {
+      "glob": "13.0.6",
+      "rimraf": "6.1.3",
+      "uuid": "14.0.0",
+      "fstream": "1.0.12",
+      "lodash.isequal": "4.5.0"
+    }
   },
   "packageManager": "pnpm@9.15.3",
   "engines": {
diff --git a/frontend/web/src/components/banners/fa-basic-banner/index.vue b/frontend/web/src/components/banners/fa-basic-banner/index.vue
index 23990a3c..d1b6d486 100644
--- a/frontend/web/src/components/banners/fa-basic-banner/index.vue
+++ b/frontend/web/src/components/banners/fa-basic-banner/index.vue
@@ -60,6 +60,7 @@
         :src="imageConfig.src"
         :style="{ width: imageConfig.width, bottom: imageConfig.bottom, right: imageConfig.right }"
         alt="背景图片"
+        loading="eager"
       />
     </div>
   </div>
diff --git a/frontend/web/src/components/banners/fa-card-banner/index.vue b/frontend/web/src/components/banners/fa-card-banner/index.vue
index 66c4502e..d90e5deb 100644
--- a/frontend/web/src/components/banners/fa-card-banner/index.vue
+++ b/frontend/web/src/components/banners/fa-card-banner/index.vue
@@ -3,7 +3,7 @@
   <div class="fa-card-sm flex-c flex-col pb-6" :style="{ height: height }">
     <div class="flex-c flex-col gap-4 text-center">
       <div class="w-45">
-        <img :src="image" :alt="title" class="w-full h-full object-contain" />
+        <img :src="image" :alt="title" class="w-full h-full object-contain" loading="eager" />
       </div>
       <div class="box-border px-4">
         <p class="mb-2 text-lg font-semibold text-g-800">{{ title }}</p>
diff --git a/frontend/web/src/components/cards/fa-image-card/index.vue b/frontend/web/src/components/cards/fa-image-card/index.vue
index 569a92a3..94458ea8 100644
--- a/frontend/web/src/components/cards/fa-image-card/index.vue
+++ b/frontend/web/src/components/cards/fa-image-card/index.vue
@@ -2,11 +2,10 @@
 <template>
   <div class="w-full c-p" @click="handleClick">
     <div class="fa-card overflow-hidden">
-      <div class="relative w-full aspect-[16/10] overflow-hidden">
+      <div class="relative w-full aspect-16/10 overflow-hidden">
         <ElImage
           :src="props.imageUrl"
           fit="cover"
-          loading="lazy"
           class="w-full h-full transition-transform duration-300 ease-in-out hover:scale-105"
         >
           <template #placeholder>
diff --git a/frontend/web/src/components/charts/fa-dual-bar-compare-chart/index.vue b/frontend/web/src/components/charts/fa-dual-bar-compare-chart/index.vue
index 33a6f93e..fc358240 100644
--- a/frontend/web/src/components/charts/fa-dual-bar-compare-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-dual-bar-compare-chart/index.vue
@@ -116,7 +116,6 @@ const {
       right: 0,
       left: 0,
       bottom: 0, // 增加底部间距
-      containLabel: true,
     };
 
     const options: EChartsOption = {
diff --git a/frontend/web/src/components/charts/fa-k-line-chart/index.vue b/frontend/web/src/components/charts/fa-k-line-chart/index.vue
index ca0f0cf7..a2951eec 100644
--- a/frontend/web/src/components/charts/fa-k-line-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-k-line-chart/index.vue
@@ -75,7 +75,6 @@ const {
         right: 20,
         bottom: props.showDataZoom ? 80 : 20,
         left: 20,
-        containLabel: true,
       },
       tooltip: getTooltipStyle("axis", {
         axisPointer: {
@@ -85,7 +84,7 @@ const {
           const param = params[0];
           const data = param.data;
           return `
-              <div style="padding: 5px;">
+              <div :style="'padding: 5px;'">
                 <div><strong>时间：</strong>${param.name}</div>
                 <div><strong>开盘：</strong>${data[0]}</div>
                 <div><strong>收盘：</strong>${data[1]}</div>
diff --git a/frontend/web/src/components/charts/fa-map-chart/index.vue b/frontend/web/src/components/charts/fa-map-chart/index.vue
index 01895fb8..09f5e3f4 100644
--- a/frontend/web/src/components/charts/fa-map-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-map-chart/index.vue
@@ -77,7 +77,7 @@ const createChartOption = (mapData: Array<Record<string, unknown>>) => {
       formatter: ({ data }: { data?: Record<string, unknown> }) => {
         const { name, adcode, level } = data || {};
         return `
-            <div style="padding: 8px;">
+            <div :style="'padding: 8px;'">
               <div><strong>名称:</strong> ${name || "未知区域"}</div>
               <div><strong>代码:</strong> ${adcode || "暂无"}</div>
               <div><strong>级别:</strong> ${level || "暂无"}</div>
diff --git a/frontend/web/src/components/charts/fa-scatter-chart/index.vue b/frontend/web/src/components/charts/fa-scatter-chart/index.vue
index c2ba14f3..de96e590 100644
--- a/frontend/web/src/components/charts/fa-scatter-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-scatter-chart/index.vue
@@ -63,7 +63,6 @@ const {
         right: 20,
         bottom: 20,
         left: 20,
-        containLabel: true,
       },
       tooltip: props.showTooltip
         ? getTooltipStyle("item", {
diff --git a/frontend/web/src/components/forms/fa-button-table/index.vue b/frontend/web/src/components/forms/fa-button-table/index.vue
index 57f96b10..6099925e 100644
--- a/frontend/web/src/components/forms/fa-button-table/index.vue
+++ b/frontend/web/src/components/forms/fa-button-table/index.vue
@@ -40,7 +40,7 @@ const defaultButtons = {
   edit: { icon: "ri:pencil-line", class: "bg-secondary/12 text-secondary" },
   delete: { icon: "ri:delete-bin-5-line", class: "bg-error/12 text-error" },
   view: { icon: "ri:eye-line", class: "bg-info/12 text-info" },
-  more: { icon: "ri:more-2-fill", class: "" },
+  more: { icon: "ri:more-2-fill", class: "bg-primary/12 text-primary" },
 } as const;
 
 // 获取图标内容
diff --git a/frontend/web/src/components/forms/fa-excel-export/index.vue b/frontend/web/src/components/forms/fa-excel-export/index.vue
index 114dde83..ce256d2d 100644
--- a/frontend/web/src/components/forms/fa-excel-export/index.vue
+++ b/frontend/web/src/components/forms/fa-excel-export/index.vue
@@ -395,7 +395,7 @@ defineExpose({
     </FaExcelImport>
 
     <FaExcelExport
-      style="margin-left: 10px"
+      :style="'margin-left: 10px'"
       :data="tableData"
       filename="用户数据-1"
       sheetName="用户列表"
@@ -412,7 +412,7 @@ defineExpose({
 
     <ElButton type="danger" @click="handleClear" v-ripple>清除数据</ElButton>
 
-    <FaTable :data="tableData" style="margin-top: 10px">
+    <FaTable :data="tableData" :style="'margin-top: 10px'">
       <ElTableColumn type="index" label="序号" width="60" />
       <ElTableColumn
         v-for="key in Object.keys(headers)"
diff --git a/frontend/web/src/components/forms/fa-excel-import/index.vue b/frontend/web/src/components/forms/fa-excel-import/index.vue
index 47c12ccc..548eaf5b 100644
--- a/frontend/web/src/components/forms/fa-excel-import/index.vue
+++ b/frontend/web/src/components/forms/fa-excel-import/index.vue
@@ -68,7 +68,7 @@ const handleFileChange = async (uploadFile: UploadFile) => {
     </FaExcelImport>
 
     <FaExcelExport
-      style="margin-left: 10px"
+      :style="'margin-left: 10px'"
       :data="tableData"
       filename="用户数据-1"
       sheetName="用户列表"
@@ -85,7 +85,7 @@ const handleFileChange = async (uploadFile: UploadFile) => {
 
     <ElButton type="danger" @click="handleClear" v-ripple>清除数据</ElButton>
 
-    <FaTable :data="tableData" style="margin-top: 10px">
+    <FaTable :data="tableData" :style="'margin-top: 10px'">
       <ElTableColumn type="index" label="序号" width="60" />
       <ElTableColumn
         v-for="key in Object.keys(headers)"
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..510ca02a 100755
--- a/frontend/web/src/components/layouts/fa-header-bar/index.vue
+++ b/frontend/web/src/components/layouts/fa-header-bar/index.vue
@@ -16,7 +16,7 @@
           : '',
       ]"
     >
-      <div class="flex-c flex-1 min-w-0 leading-15" style="display: flex">
+      <div class="flex-c flex-1 min-w-0 leading-15" :style="{ display: 'flex' }">
         <!-- 系统信息：Logo + 标题一并受「显示应用 Logo」控制 -->
         <div class="flex-c c-p" @click="toHome" v-if="isTopMenu && showAppLogo">
           <FaLogo class="pl-4.5" :src="headerLogoSrc" />
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 0e8021ff..022a3a04 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
@@ -60,18 +60,10 @@
               <FaSvgIcon icon="ri:user-3-line" />
               <span>{{ $t("topBar.user.userCenter") }}</span>
             </li>
-            <li class="btn-item" @click="goChangeLog">
-              <FaSvgIcon icon="ri:draft-line" />
-              <span>{{ $t("topBar.user.changeLog") }}</span>
-            </li>
             <li class="btn-item" @click="openParamConfig">
               <FaSvgIcon icon="ri:settings-3-line" />
               <span>{{ $t("topBar.user.paramConfig") }}</span>
             </li>
-            <li class="btn-item" @click="toDocs()">
-              <FaSvgIcon icon="ri:book-2-line" />
-              <span>{{ $t("topBar.user.docs") }}</span>
-            </li>
             <li class="btn-item" @click="toGithub()">
               <FaSvgIcon icon="ri:github-line" />
               <span>{{ $t("topBar.user.github") }}</span>
@@ -80,10 +72,6 @@
               <FaSvgIcon icon="ri:git-branch-line" />
               <span>{{ $t("topBar.user.gitee") }}</span>
             </li>
-            <li class="btn-item" @click="startTour">
-              <FaSvgIcon icon="ri:compass-3-line" />
-              <span>{{ $t("topBar.user.tour") }}</span>
-            </li>
             <li class="btn-item" @click="lockScreen()">
               <FaSvgIcon icon="ri:lock-line" />
               <span>{{ $t("topBar.user.lockScreen") }}</span>
@@ -102,16 +90,12 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { ElMessageBox } from "element-plus";
 import ConfigInfoDrawer from "@views/module_system/param/components/ConfigInfoDrawer.vue";
-import { useAppStore } from "@stores/modules/app.store";
-import { useSettingsStore } from "@stores/modules/setting.store";
 import { useUserStore } from "@stores/modules/user.store";
 import { WEB_LINKS } from "@utils/constants";
-import { DeviceEnum } from "@/enums/settings/device.enum";
 import { mittBus } from "@utils/sys";
 
 defineOptions({ name: "FaUserMenu" });
@@ -119,8 +103,6 @@ defineOptions({ name: "FaUserMenu" });
 const router = useRouter();
 const { t } = useI18n();
 const userStore = useUserStore();
-const appStore = useAppStore();
-const settingStore = useSettingsStore();
 
 const { info: userInfo } = storeToRefs(userStore);
 const userMenuPopover = ref();
@@ -140,12 +122,6 @@ const displayName = computed(
 
 const displayEmail = computed(() => (userInfo.value as { email?: string })?.email || "");
 
-/** 与旧版 NavbarActions 一致：桌面浮动引导，移动端进引导页 */
-const guideVisible = computed({
-  get: () => appStore.guideVisible,
-  set: (v: boolean) => appStore.showGuide(v),
-});
-
 function openParamConfig(): void {
   closeUserMenu();
   paramDrawerVisible.value = true;
@@ -155,15 +131,6 @@ function goPage(path: string): void {
   router.push(path);
 }
 
-function goChangeLog(): void {
-  closeUserMenu();
-  router.push({ name: "ChangeLog" }).catch(() => {});
-}
-
-function toDocs(): void {
-  window.open(WEB_LINKS.DOCS);
-}
-
 function toGithub(): void {
   window.open(WEB_LINKS.GITHUB);
 }
@@ -176,24 +143,6 @@ function lockScreen(): void {
   mittBus.emit("openLockScreen");
 }
 
-function startTour(): void {
-  closeUserMenu();
-  if (appStore.device === DeviceEnum.MOBILE) {
-    router.push({ name: "Guide" });
-  } else {
-    guideVisible.value = true;
-  }
-}
-
-watch(
-  () => guideVisible.value,
-  (val, oldVal) => {
-    if (oldVal && !val) {
-      settingStore.updateSetting("showGuide", false);
-    }
-  }
-);
-
 function handleLogout(): void {
   closeUserMenu();
   setTimeout(async () => {
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/index.vue b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/index.vue
index 50da94b6..27c050fe 100755
--- a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/index.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/index.vue
@@ -13,7 +13,7 @@
     >
       <FaLogo v-if="showAppLogo" class="logo" :src="sidebarLogoSrc" @click="navigateToHome" />
 
-      <ElScrollbar style="height: calc(100% - 135px)">
+      <ElScrollbar :style="{ height: 'calc(100% - 135px)' }">
         <ul>
           <li v-for="menu in firstLevelMenus" :key="menu.path" @click="handleMenuJump(menu, true)">
             <ElTooltip
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/SidebarSubmenu.vue b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/SidebarSubmenu.vue
index acf2e830..438a0590 100755
--- a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/SidebarSubmenu.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/SidebarSubmenu.vue
@@ -12,7 +12,7 @@
         <span class="menu-name">
           {{ formatMenuTitle(item.meta.title) }}
         </span>
-        <div v-if="item.meta.showBadge" class="fa-badge" style="right: 10px" />
+        <div v-if="item.meta.showBadge" class="fa-badge" :style="'right: 10px'" />
       </template>
 
       <SidebarSubmenu
@@ -26,7 +26,7 @@
 
     <ElMenuItem
       v-else
-      :index="isExternalLink(item) ? undefined : item.path || item.meta.title"
+      :index="isExternalLink(item) ? '' : item.path || item.meta.title"
       :level-item="level + 1"
       @click="goPage(item)"
     >
@@ -40,7 +40,7 @@
       <div
         v-show="item.meta.showBadge && level === 0 && !menuOpen"
         class="fa-badge"
-        style="right: 5px"
+        :style="'right: 5px'"
       />
 
       <template #title>
diff --git a/frontend/web/src/components/layouts/fa-notification/index.vue b/frontend/web/src/components/layouts/fa-notification/index.vue
index 9f4776a7..05e4e60a 100755
--- a/frontend/web/src/components/layouts/fa-notification/index.vue
+++ b/frontend/web/src/components/layouts/fa-notification/index.vue
@@ -1,7 +1,7 @@
 <!-- 通知组件 -->
 <template>
   <div
-    class="fa-notification-panel fa-card-sm !shadow-xl"
+    class="fa-notification-panel fa-card-sm shadow-xl!"
     :style="{
       transform: show ? 'scaleY(1)' : 'scaleY(0.9)',
       opacity: show ? 1 : 0,
@@ -41,7 +41,7 @@
               class="size-9 leading-9 text-center rounded-lg flex-cc"
               :class="[getNoticeStyle(item.type).iconClass]"
             >
-              <FaSvgIcon class="text-lg !bg-transparent" :icon="getNoticeStyle(item.type).icon" />
+              <FaSvgIcon class="text-lg bg-transparent!" :icon="getNoticeStyle(item.type).icon" />
             </div>
             <div class="w-[calc(100%-45px)] ml-3.5">
               <h4 class="text-sm font-normal leading-5.5 text-g-900">{{ item.title }}</h4>
@@ -58,7 +58,7 @@
             class="box-border flex-c px-3.5 py-3.5 c-p last:border-b-0 hover:bg-g-200/60"
           >
             <div class="w-9 h-9">
-              <img :src="item.avatar" class="w-full h-full rounded-lg" />
+              <img :src="item.avatar" class="w-full h-full rounded-lg" loading="eager" />
             </div>
             <div class="w-[calc(100%-45px)] ml-3.5">
               <h4 class="text-xs font-normal leading-5.5">{{ item.title }}</h4>
@@ -82,10 +82,10 @@
         <!-- 空状态 -->
         <div
           v-show="currentTabIsEmpty"
-          class="relative top-25 h-full text-g-500 text-center !bg-transparent"
+          class="relative top-25 h-full text-g-500 text-center bg-transparent!"
         >
           <FaSvgIcon icon="system-uicons:inbox" class="text-5xl" />
-          <p class="mt-3.5 text-xs !bg-transparent">
+          <p class="mt-3.5 text-xs bg-transparent!">
             {{ $t("notice.text[0]") }}{{ barList[barActiveIndex].name }}
           </p>
         </div>
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 04f0e698..20b74981 100644
--- a/frontend/web/src/components/layouts/fa-page-content/index.vue
+++ b/frontend/web/src/components/layouts/fa-page-content/index.vue
@@ -46,7 +46,7 @@
       :target="backtopScrollTarget"
       :right="28"
       :bottom="28"
-      class="z-[90]"
+      class="z-90"
     >
       <FaSvgIcon icon="ri:arrow-up-circle-line" class="text-2xl text-g-600" />
     </ElBacktop>
@@ -89,7 +89,7 @@ const route = useRoute();
 const wrapPageWithKeepAlive = computed(() => route.meta.keepAlive !== false);
 
 const isNarrowViewport = useMediaQuery("(max-width: 800px)");
-const backtopScrollTarget = computed(() => (isNarrowViewport.value ? "" : "#app-scroll-main"));
+const backtopScrollTarget = computed(() => (isNarrowViewport.value ? "" : "#app-content"));
 const backtopTargetKey = computed(() => (isNarrowViewport.value ? "win" : "main"));
 
 const { pageTransition, containerWidth, refresh, showWorkTab } = storeToRefs(useSettingsStore());
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 2bd5cef9..e1752a66 100644
--- a/frontend/web/src/components/layouts/fa-screen-lock/index.vue
+++ b/frontend/web/src/components/layouts/fa-screen-lock/index.vue
@@ -4,7 +4,7 @@
     <!-- 开发者工具警告覆盖层 -->
     <div
       v-if="showDevToolsWarning"
-      class="fixed top-0 left-0 z-[999999] flex-cc w-full h-full text-white bg-gradient-to-br from-[#1e1e1e] to-black animate-fade-in"
+      class="fixed top-0 left-0 z-999999 flex-cc w-full h-full text-white bg-linear-to-br from-[#1e1e1e] to-black animate-fade-in"
     >
       <div class="p-5 text-center select-none">
         <div class="mb-7.5 text-5xl">🔒</div>
@@ -29,7 +29,13 @@
         @opened="handleDialogOpen"
       >
         <div class="lock-dialog-content">
-          <img v-if="userAvatar" :src="userAvatar" alt="" class="lock-dialog-avatar object-cover" />
+          <img
+            v-if="userAvatar"
+            :src="userAvatar"
+            alt=""
+            class="lock-dialog-avatar object-cover"
+            loading="eager"
+          />
           <img v-else class="lock-dialog-avatar" src="@imgs/user/avatar.webp" alt="" />
           <span class="lock-dialog-name">{{ displayName }}</span>
         </div>
@@ -534,8 +540,6 @@ onUnmounted(() => {
 .lockpage {
   position: fixed;
   inset: 0;
-  top: 0;
-  left: 0;
   z-index: 3000;
   display: flex;
   flex-direction: column;
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuLayoutSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuLayoutSettings.vue
index 4dd2ede7..e3488b86 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuLayoutSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuLayoutSettings.vue
@@ -9,7 +9,7 @@
         @click="switchMenuLayouts(item.value)"
       >
         <div class="box" :class="{ 'is-active': item.value === menuType, 'mt-16': index > 2 }">
-          <img :src="item.img" />
+          <img :src="item.img" loading="eager" />
         </div>
         <p class="name">{{ $t(`setting.menuType.list[${index}]`) }}</p>
       </div>
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuStyleSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuStyleSettings.vue
index da15d941..c44623c3 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuStyleSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuStyleSettings.vue
@@ -14,7 +14,7 @@
           cursor: disabled ? 'no-drop' : 'pointer',
         }"
       >
-        <img :src="item.img" />
+        <img :src="item.img" loading="eager" />
       </div>
     </div>
   </div>
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/ThemeSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/ThemeSettings.vue
index 20d69cdd..6410d571 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/ThemeSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/ThemeSettings.vue
@@ -8,7 +8,7 @@
       @click="switchThemeStyles(item.theme)"
     >
       <div class="box" :class="{ 'is-active': item.theme === systemThemeMode }">
-        <img :src="item.img" />
+        <img :src="item.img" loading="eager" />
       </div>
       <p class="name">{{ $t(`setting.theme.list[${index}]`) }}</p>
     </div>
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 ab8680a1..d54a3f35 100644
--- a/frontend/web/src/components/media/fa-cutter-img/index.vue
+++ b/frontend/web/src/components/media/fa-cutter-img/index.vue
@@ -20,7 +20,7 @@
           <ElButton type="danger" plain v-ripple>清除</ElButton>
         </template>
         <template #confirm>
-          <!-- <ElButton type="primary" style="margin-left: 10px">确定</ElButton> -->
+          <!-- <ElButton type="primary" :style="'margin-left: 10px'">确定</ElButton> -->
           <div></div>
         </template>
       </ImgCutter>
@@ -35,7 +35,7 @@
           height: `${cutterProps.cutHeight}px`,
         }"
       >
-        <img class="preview-img" :src="temImgPath" alt="预览图" v-if="temImgPath" />
+        <img class="preview-img" :src="temImgPath" alt="预览图" v-if="temImgPath" loading="eager" />
       </div>
       <ElButton class="download-btn" @click="downloadImg" :disabled="!temImgPath" v-ripple>
         下载图片
diff --git a/frontend/web/src/components/modal/fa-export-dialog/index.vue b/frontend/web/src/components/modal/fa-export-dialog/index.vue
index cfff2c32..d408c07e 100644
--- a/frontend/web/src/components/modal/fa-export-dialog/index.vue
+++ b/frontend/web/src/components/modal/fa-export-dialog/index.vue
@@ -14,7 +14,7 @@
         <!-- 表单 -->
         <ElForm
           ref="exportsFormRef"
-          style="padding-right: var(--el-dialog-padding-primary)"
+          :style="'padding-right: var(--el-dialog-padding-primary)'"
           :model="exportsFormData"
           :rules="exportsFormRules"
         >
@@ -54,7 +54,7 @@
       </ElScrollbar>
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
-        <div style="padding-right: var(--el-dialog-padding-primary)">
+        <div :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton type="primary" @click="handleExportsSubmit">确 定</ElButton>
           <ElButton @click="handleCloseExportsModal">取 消</ElButton>
         </div>
diff --git a/frontend/web/src/components/modal/fa-import-dialog/index.vue b/frontend/web/src/components/modal/fa-import-dialog/index.vue
index 7e856afb..74de25d9 100644
--- a/frontend/web/src/components/modal/fa-import-dialog/index.vue
+++ b/frontend/web/src/components/modal/fa-import-dialog/index.vue
@@ -14,7 +14,7 @@
         <!-- 表单 -->
         <ElForm
           ref="importFormRef"
-          style="padding-right: var(--el-dialog-padding-primary)"
+          :style="'padding-right: var(--el-dialog-padding-primary)'"
           :model="importFormData"
           :rules="importFormRules"
         >
@@ -58,7 +58,7 @@
         </ElForm>
       </ElScrollbar>
       <template #footer>
-        <div style="padding-right: var(--el-dialog-padding-primary)">
+        <div :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleClose">{{ props.cancelButtonText || "取 消" }}</ElButton>
           <ElButton
             type="primary"
diff --git a/frontend/web/src/components/others/fa-calendar/index.vue b/frontend/web/src/components/others/fa-calendar/index.vue
index 5b0e4001..6c937ef8 100644
--- a/frontend/web/src/components/others/fa-calendar/index.vue
+++ b/frontend/web/src/components/others/fa-calendar/index.vue
@@ -43,7 +43,7 @@
         <ElFormItem label="开始日期" required>
           <ElDatePicker
             v-model="eventForm.date"
-            style="width: 100%"
+            :style="'width: 100%'"
             type="date"
             placeholder="选择日期"
             format="YYYY-MM-DD"
@@ -53,7 +53,7 @@
         <ElFormItem label="结束日期">
           <ElDatePicker
             v-model="eventForm.endDate"
-            style="width: 100%"
+            :style="'width: 100%'"
             type="date"
             placeholder="选择结束日期"
             format="YYYY-MM-DD"
diff --git a/frontend/web/src/components/others/fa-github-corner/index.vue b/frontend/web/src/components/others/fa-github-corner/index.vue
index 83f69c3c..794a9366 100644
--- a/frontend/web/src/components/others/fa-github-corner/index.vue
+++ b/frontend/web/src/components/others/fa-github-corner/index.vue
@@ -10,14 +10,14 @@
       width="80"
       height="80"
       viewBox="0 0 250 250"
-      style="color: var(--el-color-white); fill: var(--el-color-primary)"
+      :style="'color: var(--el-color-white); fill: var(--el-color-primary)'"
       aria-hidden="true"
     >
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
       <path
         d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
         fill="currentColor"
-        style="transform-origin: 130px 106px"
+        :style="'transform-origin: 130px 106px'"
         class="octo-arm"
       />
       <path
diff --git a/frontend/web/src/components/others/fa-guide/index.vue b/frontend/web/src/components/others/fa-guide/index.vue
index 7bf4dfca..307337e2 100644
--- a/frontend/web/src/components/others/fa-guide/index.vue
+++ b/frontend/web/src/components/others/fa-guide/index.vue
@@ -103,7 +103,7 @@ function firstPresent(selectors: string[]): HTMLElement | null {
 /** 菜单高亮：按菜单类型优先，其次回退到侧栏 / 顶栏菜单 / 主内容区 */
 function resolveMenuEl(): HTMLElement | null {
   const mt = settingStore.menuType as MenuTypeEnum;
-  let order: string[] = [];
+  let order: string[];
   switch (mt) {
     case MenuTypeEnum.TOP:
       order = ["#app-menu-top", "#app-menu-top-left", "#app-sidebar", "#app-main"];
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..dc870d94 100644
--- a/frontend/web/src/components/others/fa-icon-select/index.vue
+++ b/frontend/web/src/components/others/fa-icon-select/index.vue
@@ -17,7 +17,7 @@
                 <!-- 清空按钮 -->
                 <ElIcon
                   v-if="selectedIcon"
-                  style="margin-right: 8px"
+                  :style="{ marginRight: '8px' }"
                   @click.stop="clearSelectedIcon"
                 >
                   <CircleClose />
diff --git a/frontend/web/src/components/others/fa-interval-tab/index.vue b/frontend/web/src/components/others/fa-interval-tab/index.vue
index 468591eb..504d254b 100644
--- a/frontend/web/src/components/others/fa-interval-tab/index.vue
+++ b/frontend/web/src/components/others/fa-interval-tab/index.vue
@@ -2,7 +2,7 @@
   <ElForm
     ref="formRef"
     :model="crontabValueObj"
-    label-width="auto"
+    label-width="100px"
     label-suffix=":"
     :inline="true"
     class="interval-tab-form"
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..49940e53 100644
--- a/frontend/web/src/components/others/fa-markdown-renderer/index.vue
+++ b/frontend/web/src/components/others/fa-markdown-renderer/index.vue
@@ -68,7 +68,7 @@ const renderedContent = computed(() => {
   font-size: 14px;
   line-height: 1.6;
   color: var(--el-text-color-primary);
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 
   :deep(pre) {
     padding: 12px;
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 f3182860..b09e2adb 100644
--- a/frontend/web/src/components/others/fa-table-select/index.vue
+++ b/frontend/web/src/components/others/fa-table-select/index.vue
@@ -12,7 +12,7 @@
           <slot>
             <ElInput
               class="reference"
-              style="width: 100%"
+              :style="'width: 100%'"
               :model-value="text"
               :readonly="true"
               :placeholder="placeholder"
diff --git a/frontend/web/src/components/others/fa-watermark/index.vue b/frontend/web/src/components/others/fa-watermark/index.vue
index b082bacf..bf047b97 100644
--- a/frontend/web/src/components/others/fa-watermark/index.vue
+++ b/frontend/web/src/components/others/fa-watermark/index.vue
@@ -12,7 +12,7 @@
       :gap="[gapX, gapY]"
       :offset="[offsetX, offsetY]"
     >
-      <div style="height: 100vh"></div>
+      <div :style="'height: 100vh'"></div>
     </ElWatermark>
   </div>
 </template>
diff --git a/frontend/web/src/components/views/fa-login/LoginLeftView.vue b/frontend/web/src/components/views/fa-login/LoginLeftView.vue
index ed947899..59672f3c 100644
--- a/frontend/web/src/components/views/fa-login/LoginLeftView.vue
+++ b/frontend/web/src/components/views/fa-login/LoginLeftView.vue
@@ -25,52 +25,61 @@
     <!-- 几何装饰元素 -->
     <div class="geometric-decorations">
       <!-- 基础几何形状 -->
-      <div class="geo-element circle-outline animate-fade-in-up" style="animation-delay: 0s"></div>
+      <div
+        class="geo-element circle-outline animate-fade-in-up"
+        :style="'animation-delay: 0s'"
+      ></div>
       <div
         class="geo-element square-rotated animate-fade-in-left"
-        style="animation-delay: 0s"
+        :style="'animation-delay: 0s'"
+      ></div>
+      <div
+        class="geo-element circle-small animate-fade-in-up"
+        :style="'animation-delay: 0.3s'"
       ></div>
-      <div class="geo-element circle-small animate-fade-in-up" style="animation-delay: 0.3s"></div>
 
       <div
         class="geo-element square-bottom-right animate-fade-in-right"
-        style="animation-delay: 0s"
+        :style="'animation-delay: 0s'"
       ></div>
 
       <!-- 背景泡泡 -->
-      <div class="geo-element bg-bubble animate-scale-in" style="animation-delay: 0.5"></div>
+      <div class="geo-element bg-bubble animate-scale-in" :style="'animation-delay: 0.5'"></div>
 
       <!-- 太阳/月亮 -->
       <div
         class="geo-element circle-top-right animate-fade-in-down"
-        style="animation-delay: 0.5"
+        :style="'animation-delay: 0.5'"
         @click="themeAnimation"
       ></div>
 
       <!-- 装饰点 -->
-      <div class="geo-element dot dot-top-left animate-bounce-in" style="animation-delay: 0s"></div>
+      <div
+        class="geo-element dot dot-top-left animate-bounce-in"
+        :style="'animation-delay: 0s'"
+      ></div>
       <div
         class="geo-element dot dot-top-right animate-bounce-in"
-        style="animation-delay: 0s"
+        :style="'animation-delay: 0s'"
       ></div>
       <div
         class="geo-element dot dot-center-right animate-bounce-in"
-        style="animation-delay: 0s"
+        :style="'animation-delay: 0s'"
       ></div>
 
       <!-- 叠加方块组 -->
       <div class="squares-group">
         <i
           class="geo-element square square-blue animate-fade-in-left-rotated-blue"
-          style="animation-delay: 0.2s"
+          :style="'animation-delay: 0.2s'"
         ></i>
         <i
           class="geo-element square square-pink animate-fade-in-left-rotated-pink"
-          style="animation-delay: 0.4s"
+          :style="'animation-delay: 0.4s'"
         ></i>
         <i
           class="geo-element square square-purple animate-fade-in-left-no-rotation"
-          style="animation-delay: 0.6s"
+          :style="'animation-delay: 0.6s'"
         ></i>
       </div>
     </div>
@@ -223,9 +232,9 @@ $bg-mix-light-7: color-mix(in srgb, $primary-light-7 80%, $main-bg);
     .geo-element {
       position: absolute;
       opacity: 0;
-      animation-fill-mode: forwards;
       animation-duration: 0.8s;
       animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      animation-fill-mode: forwards;
     }
 
     // 动画 mixin
diff --git a/frontend/web/src/config/modules/fastEnter.ts b/frontend/web/src/config/modules/fastEnter.ts
index e10e9389..05237f86 100644
--- a/frontend/web/src/config/modules/fastEnter.ts
+++ b/frontend/web/src/config/modules/fastEnter.ts
@@ -11,22 +11,22 @@ const fastEnterConfig: FastEnterConfig = {
   // 应用列表
   applications: [
     {
-      name: "工作台",
-      description: "系统概览与数据统计",
-      icon: "ri:pie-chart-line",
-      iconColor: "#377dff",
+      name: "功能引导",
+      description: "产品操作指南",
+      icon: "ri:compass-3-line",
+      iconColor: "#009688",
       enabled: true,
       order: 1,
-      routeName: "DashboardWorkplace",
+      routeName: "FastlinkTutorial",
     },
     {
-      name: "分析页",
-      description: "数据分析与可视化",
-      icon: "ri:game-line",
-      iconColor: "#ff3b30",
+      name: "使用文档",
+      description: "使用指南与开发文档",
+      icon: "ri:book-2-line",
+      iconColor: "#377dff",
       enabled: true,
       order: 2,
-      routeName: "DashboardAnalysis",
+      link: WEB_LINKS.DOCS,
     },
     {
       name: "定价",
diff --git a/frontend/web/src/directives/business/highlight.ts b/frontend/web/src/directives/business/highlight.ts
index 49653cfa..5dec2f30 100644
--- a/frontend/web/src/directives/business/highlight.ts
+++ b/frontend/web/src/directives/business/highlight.ts
@@ -89,15 +89,12 @@ function addCopyButton(block: HTMLElement) {
 
   const preElement = block.parentElement;
   if (preElement) {
-    let codeWrapper: HTMLElement;
     // 如果代码块还没有被包裹，则创建包裹容器
     if (!block.parentElement.classList.contains("code-wrapper")) {
-      codeWrapper = document.createElement("div");
+      const codeWrapper = document.createElement("div");
       codeWrapper.className = "code-wrapper";
       preElement.replaceChild(codeWrapper, block);
       codeWrapper.appendChild(block);
-    } else {
-      codeWrapper = block.parentElement;
     }
     // 将复制按钮添加到 pre 元素（而非 codeWrapper 内），这样它不会随滚动条滚动
     preElement.appendChild(copyButton);
diff --git a/frontend/web/src/hooks/core/useChart.ts b/frontend/web/src/hooks/core/useChart.ts
index 5fcd5729..3a91ea2d 100644
--- a/frontend/web/src/hooks/core/useChart.ts
+++ b/frontend/web/src/hooks/core/useChart.ts
@@ -350,7 +350,6 @@ export function useChart(options: UseChartOptions = {}) {
       right: 15,
       bottom: 8,
       left: 0,
-      containLabel: true,
       ...baseGrid,
     };
 
diff --git a/frontend/web/src/hooks/core/useTable.ts b/frontend/web/src/hooks/core/useTable.ts
index 42a393b6..8fd7851a 100644
--- a/frontend/web/src/hooks/core/useTable.ts
+++ b/frontend/web/src/hooks/core/useTable.ts
@@ -290,7 +290,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   const clearCache = (strategy: CacheInvalidationStrategy, context?: string): void => {
     if (!cache) return;
 
-    let clearedCount = 0;
+    let clearedCount: number;
 
     switch (strategy) {
       case CacheInvalidationStrategy.CLEAR_ALL:
diff --git a/frontend/web/src/locales/langs/en.json b/frontend/web/src/locales/langs/en.json
index 4bf9483c..45cfe1ea 100644
--- a/frontend/web/src/locales/langs/en.json
+++ b/frontend/web/src/locales/langs/en.json
@@ -548,6 +548,7 @@
     },
     "dashboard": {
       "title": "Dashboard",
+      "workplace": "Workplace",
       "analysis": "Analysis",
       "visualization": "3D Visualization",
       "pricing": "Pricing",
diff --git a/frontend/web/src/locales/langs/zh.json b/frontend/web/src/locales/langs/zh.json
index 853291eb..6fa78c17 100644
--- a/frontend/web/src/locales/langs/zh.json
+++ b/frontend/web/src/locales/langs/zh.json
@@ -548,6 +548,7 @@
     },
     "dashboard": {
       "title": "仪表盘",
+      "workplace": "工作台",
       "analysis": "分析页",
       "visualization": "三维可视化",
       "pricing": "定价",
diff --git a/frontend/web/src/router/beforeEach.ts b/frontend/web/src/router/beforeEach.ts
index fe2bf121..9b6f92e5 100644
--- a/frontend/web/src/router/beforeEach.ts
+++ b/frontend/web/src/router/beforeEach.ts
@@ -20,7 +20,7 @@
  *        └─ setWorktab / setPageTitle / 404
  */
 import type { AppRouteRecord } from "@/types/router";
-import type { Router, RouteLocationNormalized, NavigationGuardNext } from "vue-router";
+import type { Router, RouteLocationNormalized } from "vue-router";
 import { nextTick } from "vue";
 import { NProgress } from "@utils/ui";
 import { useSettingsStore } from "@stores/modules/setting.store";
@@ -97,21 +97,15 @@ export function setupBeforeEachGuard(router: Router): void {
 
   routeRegistry = new RouteRegistry(router);
 
-  router.beforeEach(
-    async (
-      to: RouteLocationNormalized,
-      from: RouteLocationNormalized,
-      next: NavigationGuardNext
-    ) => {
-      try {
-        await handleRouteGuard(to, from, next, router);
-      } catch (error) {
-        console.error("[RouteGuard] 路由守卫处理失败:", error);
-        closeLoading();
-        next({ name: "500" });
-      }
+  router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized) => {
+    try {
+      return await handleRouteGuard(to, from, router);
+    } catch (error) {
+      console.error("[RouteGuard] 路由守卫处理失败:", error);
+      closeLoading();
+      return { name: "500" };
     }
-  );
+  });
 }
 
 function closeLoading(): void {
@@ -138,10 +132,9 @@ function applySafeTitleFromQuery(to: RouteLocationNormalized): void {
 
 async function handleRouteGuard(
   to: RouteLocationNormalized,
-  from: RouteLocationNormalized,
-  next: NavigationGuardNext,
+  _from: RouteLocationNormalized,
   router: Router
-): Promise<void> {
+) {
   // 顺序：登录 → 动态路由初始化失败兜底 → 动态路由注册 → 根路径 → 已匹配页 → 404
   const settingStore = useSettingsStore();
   const userStore = useUserStore();
@@ -153,73 +146,51 @@ async function handleRouteGuard(
   // 检查存储是否已失效（storage/index.ts 检测到异常时标记）
   if (checkStorageInvalidated()) {
     console.info("[RouteGuard] 检测到存储已失效，执行登出");
-    // 传 { navigate: false } 防止 logout 内部调用 router.push() 造成重复导航，
-    // 导航由本守卫通过 next() 统一控制
     await userStore.logout({ navigate: false });
     resetStorageInvalidated();
-    next({ name: "Login", replace: true });
-    return;
+    return { name: "Login", replace: true };
   }
 
-  if (!handleLoginStatus(to, userStore, next)) {
-    return;
-  }
+  const loginRedirect = handleLoginStatus(to, userStore);
+  if (loginRedirect) return loginRedirect;
 
   if (routeInitFailed) {
-    if (to.matched.length > 0) {
-      next();
-    } else {
-      next({ name: "500", replace: true });
-    }
-    return;
+    return to.matched.length > 0 ? true : { name: "500", replace: true };
   }
 
   const menuStore = useMenuStore();
-  /** 未注册动态路由，或菜单已被清空（登出延迟 reset 与再登录竞态下可能出现「已注册但 menuList 为空」） */
   const shouldInitRoutes =
     userStore.isLogin && (!routeRegistry?.isRegistered() || menuStore.menuList.length === 0);
 
   if (shouldInitRoutes) {
-    if (routeInitInProgress) {
-      next(false);
-      return;
-    }
-    await handleDynamicRoutes(to, next, router);
-    return;
+    if (routeInitInProgress) return false;
+    return await handleDynamicRoutes(to, router);
   }
 
-  if (handleRootPathRedirect(to, next)) {
-    return;
-  }
+  const rootRedirect = handleRootPathRedirect(to);
+  if (rootRedirect) return rootRedirect;
 
   if (to.matched.length > 0) {
     applySafeTitleFromQuery(to);
     setWorktab(to);
     setPageTitle(to);
-    next();
-    return;
-  }
-
-  next({ name: "404" });
-}
-
-/** @returns 是否继续守卫；false 表示已 `next` 跳转 */
-function handleLoginStatus(
-  to: RouteLocationNormalized,
-  userStore: ReturnType<typeof useUserStore>,
-  next: NavigationGuardNext
-): boolean {
-  // 勿把「整条 staticRoutes」当匿名：否则 `/` 重定向到的业务页会被误放行（未登录先进首页）。
-  if (userStore.isLogin || isLoginRoute(to) || isAnonymousPublicPath(to.path)) {
     return true;
   }
 
+  return { name: "404" };
+}
+
+/** @returns undefined 继续守卫，或重定向到登录页的路由 */
+function handleLoginStatus(
+  to: RouteLocationNormalized,
+  userStore: ReturnType<typeof useUserStore>
+): Record<string, unknown> | undefined {
+  if (userStore.isLogin || isLoginRoute(to) || isAnonymousPublicPath(to.path)) {
+    return undefined;
+  }
+
   userStore.resetAllState();
-  next({
-    name: "Login",
-    query: { redirect: to.fullPath },
-  });
-  return false;
+  return { name: "Login", query: { redirect: to.fullPath }, replace: true };
 }
 
 /** 登录页（项目里同时存在 `/login` 与 `/auth/login` 等多套入口） */
@@ -296,11 +267,7 @@ function repairDynamicRoutesIfMenuEmpty(): void {
 /**
  * 处理动态路由注册
  */
-async function handleDynamicRoutes(
-  to: RouteLocationNormalized,
-  next: NavigationGuardNext,
-  router: Router
-): Promise<void> {
+async function handleDynamicRoutes(to: RouteLocationNormalized, router: Router) {
   repairDynamicRoutesIfMenuEmpty();
 
   // 标记初始化进行中
@@ -339,13 +306,12 @@ async function handleDynamicRoutes(
     // 8. 静态路由不依赖菜单权限，初始化后直接恢复目标地址。
     if (isStaticRoute(to.path)) {
       routeInitInProgress = false;
-      next({
+      return {
         path: to.path,
         query: to.query,
         hash: to.hash,
         replace: true,
-      });
-      return;
+      };
     }
 
     // 8. 验证目标路径权限
@@ -361,51 +327,30 @@ async function handleDynamicRoutes(
 
     // 9. 重新导航到目标路由
     if (!hasPermission) {
-      // 无权限访问，跳转到首页
       closeLoading();
-
-      // 输出警告信息
       console.warn(`[RouteGuard] 用户无权限访问路径: ${to.path}，已跳转到首页`);
-
-      // 直接跳转到首页
-      next({
-        path: validatedPath,
-        replace: true,
-      });
-    } else {
-      // 有权限，正常导航
-      next({
-        path: to.path,
-        query: to.query,
-        hash: to.hash,
-        replace: true,
-      });
+      return { path: validatedPath, replace: true };
     }
+
+    return { path: to.path, query: to.query, hash: to.hash, replace: true };
   } catch (error) {
     console.error("[RouteGuard] 动态路由注册失败:", error);
-
-    // 关闭 loading
     closeLoading();
 
     // 401 错误：axios 拦截器已处理退出登录，取消当前导航
     if (isUnauthorizedError(error)) {
-      // 重置状态，允许重新登录后再次初始化
       routeInitInProgress = false;
-      next(false);
-      return;
+      return false;
     }
 
-    // 标记初始化失败，防止死循环
     routeInitFailed = true;
     routeInitInProgress = false;
 
-    // 输出详细错误信息，便于排查
     if (isHttpError(error)) {
       console.error(`[RouteGuard] 错误码: ${error.code}, 消息: ${error.message}`);
     }
 
-    // 跳转到 500 页面，使用 replace 避免产生历史记录
-    next({ name: "500", replace: true });
+    return { name: "500", replace: true };
   }
 }
 
@@ -446,17 +391,14 @@ export function resetRouterState(delay: number): void {
 
 /**
  * 处理根路径重定向到首页
- * @returns true 表示已处理跳转，false 表示无需跳转
+ * @returns 重定向路由或 false
  */
-function handleRootPathRedirect(to: RouteLocationNormalized, next: NavigationGuardNext): boolean {
-  if (to.path !== "/") {
-    return false;
-  }
+function handleRootPathRedirect(to: RouteLocationNormalized): Record<string, unknown> | false {
+  if (to.path !== "/") return false;
 
   const { homePath } = useCommon();
   if (homePath.value && homePath.value !== "/") {
-    next({ path: homePath.value, replace: true });
-    return true;
+    return { path: homePath.value, replace: true };
   }
 
   return false;
diff --git a/frontend/web/src/router/staticRoutes.ts b/frontend/web/src/router/staticRoutes.ts
index d669ce20..58db614b 100644
--- a/frontend/web/src/router/staticRoutes.ts
+++ b/frontend/web/src/router/staticRoutes.ts
@@ -18,6 +18,7 @@ export const HOME_MENU_META: RouteMeta = {
   title: "menus.home.title",
   icon: "ri:home-smile-2-line",
   keepAlive: true,
+  fixedTab: true,
 };
 
 export const DASHBOARD_PARENT_META: RouteMeta = {
@@ -149,7 +150,7 @@ export const dashboardLayoutChildren: AppRouteRecordRaw[] = [
     name: "DashboardWorkplace",
     component: () => import("@views/dashboard/workplace/index.vue"),
     meta: {
-      title: "menus.workplace.title",
+      title: "menus.dashboard.workplace",
       icon: "ri:bar-chart-box-line",
       keepAlive: true,
     },
@@ -428,7 +429,7 @@ export const staticRoutes: AppRouteRecordRaw[] = [
             path: "fachat",
             name: "FastlinkFachat",
             meta: {
-              title: t("menus.fachat"),
+              title: t("menus.fachat.title"),
               icon: "ri:message-3-line",
               hidden: true,
               keepAlive: true,
diff --git a/frontend/web/src/store/modules/user.store.ts b/frontend/web/src/store/modules/user.store.ts
index b7dd3599..5bd1dda7 100755
--- a/frontend/web/src/store/modules/user.store.ts
+++ b/frontend/web/src/store/modules/user.store.ts
@@ -250,10 +250,17 @@ export const useUserStore = defineStore(
         });
       }
       rememberMe.value = loginForm.remember;
+
+      const accessToken = data?.access_token || "";
+      const refreshToken = data?.refresh_token || "";
+      if (!accessToken) {
+        console.error("[Login Debug] ⚠️ 未获取到 access_token！字段名可能与后端不匹配");
+      }
+
       // 清除上次会话里「动态路由初始化失败」标记，避免重新登录后侧栏/菜单不注册
       (await getRouterUtils()).resetRouteInitState();
-      Auth.setTokens(data.access_token, data.refresh_token, rememberMe.value);
-      setToken(data.access_token, data.refresh_token);
+      Auth.setTokens(accessToken, refreshToken, rememberMe.value);
+      setToken(accessToken, refreshToken);
       await getUserInfo();
       setLoginStatus(true);
     }
diff --git a/frontend/web/src/styles/core/app.scss b/frontend/web/src/styles/core/app.scss
index 780306f8..ada20ffa 100755
--- a/frontend/web/src/styles/core/app.scss
+++ b/frontend/web/src/styles/core/app.scss
@@ -95,6 +95,11 @@
   --el-card-border-color: var(--default-border) !important;
 }
 
+// 全局统一 ElCard 卡片圆角，与 dashboard 首页一致
+.el-card {
+  --el-card-border-radius: calc(var(--custom-radius) + 2px);
+}
+
 .fa-card,
 .fa-card-sm,
 .fa-card-xs {
diff --git a/frontend/web/src/styles/core/md.scss b/frontend/web/src/styles/core/md.scss
index 8296e217..3ed5985d 100644
--- a/frontend/web/src/styles/core/md.scss
+++ b/frontend/web/src/styles/core/md.scss
@@ -204,7 +204,7 @@ $font-color: #24292e;
   font-size: 16px;
   line-height: 1.5;
   color: $font-color;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
@@ -773,7 +773,7 @@ $font-color: #24292e;
   margin-left: 10px;
   font-size: 14px;
   line-height: 28px;
-  word-wrap: break-all;
+  overflow-wrap: break-all;
   list-style: disc;
 }
 
@@ -853,7 +853,7 @@ $font-color: #24292e;
 }
 
 .markdown-body pre {
-  word-wrap: normal;
+  overflow-wrap: normal;
 }
 
 .markdown-body pre > code {
@@ -890,7 +890,7 @@ $font-color: #24292e;
   margin: 0;
   overflow: visible;
   line-height: inherit;
-  word-wrap: normal;
+  overflow-wrap: normal;
   background-color: initial;
   border: 0;
 }
@@ -953,7 +953,7 @@ $font-color: #24292e;
   overflow: visible;
   font-size: 12px;
   color: $font-color;
-  word-wrap: normal;
+  overflow-wrap: normal;
   white-space: pre;
 }
 
diff --git a/frontend/web/src/styles/core/theme-animation.scss b/frontend/web/src/styles/core/theme-animation.scss
index 47524bf2..0d4ca5a9 100644
--- a/frontend/web/src/styles/core/theme-animation.scss
+++ b/frontend/web/src/styles/core/theme-animation.scss
@@ -4,7 +4,7 @@ $bg-animation-color-dark: #fff;
 $bg-animation-duration: 0.5s;
 
 html {
-  --bg-animation-color: $bg-animation-color-light;
+  --bg-animation-color: #{$bg-animation-color-light};
 
   // View transition styles
   &::view-transition-old(*) {
@@ -24,7 +24,7 @@ html {
   }
 
   &.dark {
-    --bg-animation-color: $bg-animation-color-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/utils/http/index.ts b/frontend/web/src/utils/http/index.ts
index e36ecc90..0997f237 100644
--- a/frontend/web/src/utils/http/index.ts
+++ b/frontend/web/src/utils/http/index.ts
@@ -305,8 +305,12 @@ request.interceptors.response.use(
     if ((status === 401 && !hasApiCode) || data?.code === ResultEnum.TOKEN_EXPIRED) {
       const config = error.config as InternalAxiosRequestConfig | undefined;
 
-      // 若 refresh 接口自身返回 401，不再递归续期，直接跳转登录
-      if (!config || config.url?.includes("auth/token/refresh")) {
+      // 若 refresh 或 logout 接口自身返回 401，不再递归续期，直接跳转登录
+      if (
+        !config ||
+        config.url?.includes("auth/token/refresh") ||
+        config.url?.includes("auth/logout")
+      ) {
         await redirectToLogin("登录状态异常，请重新登录");
         return Promise.reject(new HttpError("Unauthorized", ApiStatus.unauthorized));
       }
@@ -320,7 +324,9 @@ request.interceptors.response.use(
             refresh_token: Auth.getRefreshToken(),
           });
           const tokenData = refreshResp.data.data;
-          Auth.setTokens(tokenData.access_token, tokenData.refresh_token, Auth.getRememberMe());
+          const newAccessToken = tokenData?.access_token || "";
+          const newRefreshToken = tokenData?.refresh_token || "";
+          Auth.setTokens(newAccessToken, newRefreshToken, Auth.getRememberMe());
           isRefreshing = false;
           const newToken = Auth.getAccessToken();
           // 重放等待队列中的所有请求
diff --git a/frontend/web/src/utils/socket/index.ts b/frontend/web/src/utils/socket/index.ts
index a176eaaf..3283b2f1 100644
--- a/frontend/web/src/utils/socket/index.ts
+++ b/frontend/web/src/utils/socket/index.ts
@@ -277,7 +277,7 @@ export default class WebSocketClient {
     }
 
     try {
-      this.ws.send(data);
+      this.ws.send(data as any);
     } catch (error) {
       console.error("WebSocket发送消息失败:", error);
       // 发送失败时将消息加入队列，等待重连后重试
@@ -294,7 +294,7 @@ export default class WebSocketClient {
         const data = this.messageQueue.shift();
         if (data) {
           try {
-            this.ws?.send(data);
+            this.ws?.send(data as any);
           } catch (error) {
             console.error("发送队列消息失败:", error);
             // 如果发送失败，将消息放回队列头部
diff --git a/frontend/web/src/views/dashboard/analysis/index.vue b/frontend/web/src/views/dashboard/analysis/index.vue
index dd5113cb..140dbf26 100644
--- a/frontend/web/src/views/dashboard/analysis/index.vue
+++ b/frontend/web/src/views/dashboard/analysis/index.vue
@@ -1,45 +1,343 @@
-<!-- 分析页：业务图表模块 + 图表组件演示 -->
 <template>
   <div>
+    <!-- 业务分析模块 -->
     <ElRow :gutter="20">
-      <ElCol :xl="14" :lg="15" :xs="24">
-        <TodaySales />
-      </ElCol>
-      <ElCol :xl="10" :lg="9" :xs="24">
-        <VisitorInsights />
-      </ElCol>
+      <ElCol :xl="14" :lg="15" :xs="24"><TodaySales /></ElCol>
+      <ElCol :xl="10" :lg="9" :xs="24"><VisitorInsights /></ElCol>
     </ElRow>
 
     <ElRow :gutter="20">
-      <ElCol :xl="10" :lg="10" :xs="24">
-        <TotalRevenue />
-      </ElCol>
-      <ElCol :xl="7" :lg="7" :xs="24">
-        <CustomerSatisfaction />
-      </ElCol>
-      <ElCol :xl="7" :lg="7" :xs="24">
-        <TargetVsReality />
-      </ElCol>
+      <ElCol :xl="10" :lg="10" :xs="24"><TotalRevenue /></ElCol>
+      <ElCol :xl="7" :lg="7" :xs="24"><CustomerSatisfaction /></ElCol>
+      <ElCol :xl="7" :lg="7" :xs="24"><TargetVsReality /></ElCol>
     </ElRow>
 
     <ElRow :gutter="20">
-      <ElCol :xl="10" :lg="10" :xs="24">
-        <TopProducts />
-      </ElCol>
-      <ElCol :xl="7" :lg="7" :xs="24">
-        <SalesMappingByCountry />
-      </ElCol>
-      <ElCol :xl="7" :lg="7" :xs="24">
-        <VolumeServiceLevel />
-      </ElCol>
+      <ElCol :xl="10" :lg="10" :xs="24"><TopProducts /></ElCol>
+      <ElCol :xl="7" :lg="7" :xs="24"><SalesMappingByCountry /></ElCol>
+      <ElCol :xl="7" :lg="7" :xs="24"><VolumeServiceLevel /></ElCol>
     </ElRow>
 
+    <!-- 卡片组件演示区 ← workplace -->
+    <div class="console-cards-showcase border-g-200 mt-4">
+      <div class="py-5">
+        <h2 class="page-title">统计卡片（文字）</h2>
+        <ElRow :gutter="20">
+          <ElCol
+            v-for="card in statsCards"
+            :key="`t-${card.id}`"
+            :xs="24"
+            :sm="12"
+            :md="6"
+            class="mb-5"
+          >
+            <FaStatsCard
+              :icon="card.icon"
+              :iconStyle="card.iconStyle"
+              :title="card.title"
+              :description="card.description"
+              :showArrow="card.showArrow"
+            />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">统计卡片（数字滚动）</h2>
+        <ElRow :gutter="20">
+          <ElCol
+            v-for="card in statsCards"
+            :key="`n-${card.id}`"
+            :xs="24"
+            :sm="12"
+            :md="6"
+            class="mb-5"
+          >
+            <FaStatsCard
+              :icon="card.icon"
+              :iconStyle="card.iconStyle"
+              :title="card.title"
+              :description="card.description"
+              :count="card.count"
+              :decimals="0"
+              :showArrow="card.showArrow"
+              separator=","
+            />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">统计卡片（自定义样式）</h2>
+        <ElRow :gutter="20">
+          <ElCol
+            v-for="card in statsCards"
+            :key="`c-${card.id}`"
+            :xs="24"
+            :sm="12"
+            :md="6"
+            class="mb-5"
+          >
+            <FaStatsCard
+              :icon="card.icon"
+              :iconStyle="card.customIconStyle"
+              :boxStyle="card.boxStyle"
+              :title="card.title"
+              :description="card.description"
+              :textColor="card.textColor"
+              :showArrow="card.showArrow"
+            />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">进度卡片</h2>
+        <ElRow :gutter="20">
+          <ElCol
+            v-for="card in progressCards"
+            :key="`p-${card.id}`"
+            :xs="24"
+            :sm="12"
+            :md="6"
+            class="mb-5"
+          >
+            <FaProgressCard :percentage="card.percentage" :title="card.title" :color="card.color" />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">进度卡片（icon）</h2>
+        <ElRow :gutter="20">
+          <ElCol
+            v-for="card in progressCards"
+            :key="`pi-${card.id}`"
+            :xs="24"
+            :sm="12"
+            :md="6"
+            class="mb-5"
+          >
+            <FaProgressCard
+              :percentage="card.percentage"
+              :title="card.title"
+              :color="card.color"
+              :icon="card.icon"
+              :iconStyle="card.iconStyle"
+            />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">图表卡片</h2>
+        <ElRow :gutter="20">
+          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
+            <FaLineChartCard
+              :isMiniChart="true"
+              :value="2545"
+              label="新用户"
+              date="过去7天"
+              :percentage="1.2"
+              :height="9.5"
+              :chartData="[120, 132, 101, 134, 90, 230, 210]"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
+            <FaBarChartCard
+              :isMiniChart="true"
+              :value="15480"
+              label="浏览量"
+              date="过去14天"
+              :percentage="-4.15"
+              :height="9.5"
+              barWidth="45%"
+              :chartData="[120, 100, 150, 140, 90, 120, 130]"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
+            <FaLineChartCard
+              :isMiniChart="true"
+              :value="2545"
+              label="粉丝数"
+              date="过去30天"
+              :percentage="1.2"
+              :height="9.5"
+              :showAreaColor="true"
+              :chartData="[150, 180, 160, 200, 180, 220, 240]"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
+            <FaDonutChartCard
+              :value="36358"
+              title="粉丝量"
+              :percentage="18"
+              percentageLabel="较去年"
+              :data="[50, 40]"
+              :height="9.5"
+              currentValue="2022"
+              previousValue="2021"
+              :radius="['50%', '70%']"
+            />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">图表卡片（大）</h2>
+        <ElRow :gutter="20">
+          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
+            <FaLineChartCard
+              :value="2545"
+              label="新用户"
+              :percentage="1.2"
+              :height="11"
+              :chartData="[120, 132, 101, 134, 90, 230, 210]"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
+            <FaBarChartCard
+              :value="15480"
+              label="浏览量"
+              :percentage="-4.15"
+              :height="11"
+              :chartData="[120, 100, 150, 140, 90, 120, 130, 110]"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
+            <FaLineChartCard
+              :value="2545"
+              label="粉丝数"
+              :percentage="1.2"
+              :height="11"
+              :showAreaColor="true"
+              :chartData="[150, 180, 160, 200, 180, 220, 240]"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
+            <FaDonutChartCard
+              :value="36358"
+              title="粉丝量"
+              :percentage="-18"
+              percentageLabel="较2021年"
+              :data="[70, 30]"
+              :height="11"
+              currentValue="12月"
+              previousValue="11月"
+            />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">数据列表卡片</h2>
+        <ElRow :gutter="20">
+          <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
+            <FaDataListCard :list="dataList" title="待办事项" subtitle="今日待处理任务" />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
+            <FaDataListCard
+              :maxCount="4"
+              :list="dataList"
+              title="最近活动"
+              subtitle="近期活动列表"
+              :showMoreButton="true"
+              @more="handleMore"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
+            <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">
+            <FaImageCard
+              :imageUrl="card.imageUrl"
+              :title="card.title"
+              :category="card.category"
+              :readTime="card.readTime"
+              :views="card.views"
+              :comments="card.comments"
+              :date="card.date"
+              @click="handleImageCardClick(card)"
+            />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">基础 & 自定义按钮+背景色</h2>
+        <ElRow :gutter="20">
+          <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
+            <FaBasicBanner
+              title="数据中心运行状态"
+              subtitle="系统访问量同比增长 23%，所有服务运行稳定，数据监控正常。"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
+            <FaBasicBanner
+              title="欢迎使用 Art Design Pro"
+              subtitle="基于 Vue 3 + TypeScript + Element Plus 构建的现代化管理系统。"
+              titleColor="#333"
+              subtitleColor="#666"
+              boxStyle="!bg-[#D4F1F7]"
+              :buttonConfig="{
+                show: true,
+                text: '开始探索',
+                color: 'var(--fa-success)',
+                textColor: '#fff',
+                radius: '6px',
+              }"
+              @buttonClick="handleBannerDemoClick"
+            />
+          </ElCol>
+        </ElRow>
+
+        <h2 class="page-title">卡片横幅</h2>
+        <ElRow :gutter="20">
+          <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
+            <FaCardBanner
+              title="系统运行正常"
+              description="所有核心服务运行稳定，响应时间在正常范围内。"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
+            <FaCardBanner
+              :image="bannerIcon2"
+              title="重要消息通知"
+              description="您有 3 条待处理的重要消息，请及时查看。"
+              :button="{
+                show: true,
+                text: '查看详情',
+                color: 'var(--fa-warning)',
+                textColor: '#fff',
+              }"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
+            <FaCardBanner
+              :image="bannerIcon3"
+              title="数据分析报告"
+              description="本周业务数据分析报告已完成，请查看关键指标。"
+              :button="{
+                show: true,
+                text: '下载报告',
+                color: 'var(--fa-error)',
+                textColor: '#fff',
+              }"
+            />
+          </ElCol>
+          <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
+            <FaCardBanner
+              :image="bannerIcon4"
+              title="版本更新提醒"
+              description="Art Design Pro v2.1.0 已发布，包含性能优化和新功能。"
+              :button="{
+                show: true,
+                text: '立即更新',
+                color: 'var(--theme-color)',
+                textColor: '#fff',
+              }"
+              :cancelButton="{ show: true, text: '稍后提醒', color: '#eee', textColor: '#333' }"
+              @click="handleBannerDemoConfirm"
+              @cancel="handleBannerDemoCancel"
+            />
+          </ElCol>
+        </ElRow>
+      </div>
+    </div>
+
+    <!-- 图表演示区 -->
     <ElRow :gutter="20">
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">柱状图（单数据）</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">柱状图（单数据）</span></div>
           <FaBarChart
             :data="singleBarData"
             :xAxisData="xAxisData"
@@ -50,9 +348,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">柱状图（多组数据）</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">柱状图（多组数据）</span></div>
           <FaBarChart
             :data="multiBarData"
             :xAxisData="xAxisData"
@@ -63,9 +359,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">柱状图（堆叠）</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">柱状图（堆叠）</span></div>
           <FaBarChart
             :data="stackBarData"
             :xAxisData="stackXAxisData"
@@ -77,9 +371,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">折线图</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">折线图</span></div>
           <FaLineChart
             :data="[58, 15, 82, 35, 120, 62, 45]"
             :xAxisData="['一月', '二月', '三月', '四月', '五月', '六月', '七月']"
@@ -90,9 +382,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">折线图（渐变背景）</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">折线图（渐变）</span></div>
           <FaLineChart
             :data="[28, 45, 82, 35, 100, 32, 55]"
             :xAxisData="['一月', '二月', '三月', '四月', '五月', '六月', '七月']"
@@ -102,9 +392,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">折线图（多组数据）</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">折线图（多组）</span></div>
           <FaLineChart
             :data="multiLineData"
             :xAxisData="['1月', '2月', '3月', '4月', '5月', '6月']"
@@ -112,12 +400,9 @@
           />
         </div>
       </ElCol>
-
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">柱状图（水平）</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">柱状图（水平）</span></div>
           <FaHBarChart
             :data="[50, 80, 120, 90, 60]"
             :xAxisData="['产品A', '产品B', '产品C', '产品D', '产品E']"
@@ -126,10 +411,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">柱状图（水平）</span>
-          </div>
-
+          <div class="pb-3.5"><span class="text-base font-medium">柱状图（水平多组）</span></div>
           <FaHBarChart
             :data="[
               { name: '系列1', data: [10, 20, 30] },
@@ -143,9 +425,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">柱状图（水平堆叠）</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">柱状图（水平堆叠）</span></div>
           <FaHBarChart
             :data="[
               { name: '系列1', data: [10, 20, 30] },
@@ -158,12 +438,9 @@
           />
         </div>
       </ElCol>
-
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">环形图</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">环形图</span></div>
           <FaRingChart
             :data="[
               { value: 35, name: '分类A' },
@@ -175,12 +452,9 @@
           />
         </div>
       </ElCol>
-
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">环形图</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">环形图（中心文字）</span></div>
           <FaRingChart
             :data="[
               { value: 35, name: '分类A' },
@@ -191,7 +465,6 @@
               { value: 37, name: '分类F' },
             ]"
             :radius="['54%', '70%']"
-            :borderRadius="0"
             :showLegend="true"
             legendPosition="bottom"
             centerText="¥300,458"
@@ -200,9 +473,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">饼图</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">饼图</span></div>
           <FaRingChart
             :data="[
               { value: 30, name: '分类A' },
@@ -217,9 +488,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">散点图</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">散点图</span></div>
           <FaScatterChart
             :data="[
               { value: [1, 3] },
@@ -238,12 +507,9 @@
           />
         </div>
       </ElCol>
-
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">雷达图</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">雷达图</span></div>
           <FaRadarChart
             :indicator="[
               { name: '销售', max: 100 },
@@ -253,23 +519,15 @@
               { name: '开发', max: 100 },
             ]"
             :data="[
-              {
-                name: '预算分配',
-                value: [80, 70, 90, 85, 75],
-              },
-              {
-                name: '实际开销',
-                value: [70, 75, 85, 80, 70],
-              },
+              { name: '预算分配', value: [80, 70, 90, 85, 75] },
+              { name: '实际开销', value: [70, 75, 85, 80, 70] },
             ]"
           />
         </div>
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">k线图</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">K线图</span></div>
           <FaKLineChart
             :data="[
               { time: '2024-01-01', open: 20, close: 23, high: 25, low: 18 },
@@ -284,9 +542,7 @@
       </ElCol>
       <ElCol :xs="24" :md="12" :lg="8" class="mb-5">
         <div class="fa-card">
-          <div class="pb-3.5">
-            <span class="text-base font-medium">双向堆叠柱状图</span>
-          </div>
+          <div class="pb-3.5"><span class="text-base font-medium">双向堆叠柱状图</span></div>
           <FaDualBarCompareChart
             :positiveData="[50, 28, 80, 65, 68, 70, 60, 55]"
             :negativeData="[50, 28, 40, 45, 38, 50, 42, 48]"
@@ -307,6 +563,7 @@
       </ElCol>
     </ElRow>
 
+    <!-- 地图 -->
     <div class="page-content" element-loading-text="加载中...">
       <FaMapChart />
     </div>
@@ -315,6 +572,16 @@
 
 <script setup lang="ts">
 import type { LineDataItem } from "@/types/component/chart";
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+import cover1 from "@imgs/cover/img1.webp";
+import cover2 from "@imgs/cover/img2.webp";
+import cover3 from "@imgs/cover/img3.webp";
+import cover4 from "@imgs/cover/img4.webp";
+import bannerIcon2 from "@imgs/3d/icon2.webp";
+import bannerIcon3 from "@imgs/3d/icon3.webp";
+import bannerIcon4 from "@imgs/3d/icon4.webp";
+
 import TodaySales from "./modules/today-sales.vue";
 import VisitorInsights from "./modules/visitor-insights.vue";
 import TotalRevenue from "./modules/total-revenue.vue";
@@ -323,57 +590,238 @@ import TargetVsReality from "./modules/target-vs-reality.vue";
 import TopProducts from "./modules/top-products.vue";
 import SalesMappingByCountry from "./modules/sales-mapping-by-country.vue";
 import VolumeServiceLevel from "./modules/volume-service-level.vue";
-import { defineAsyncComponent } from "vue";
 
 defineOptions({ name: "Analysis" });
 
-/**
- * 异步加载地图组件
- * 减少初始加载体积
- */
 const FaMapChart = defineAsyncComponent(() => import("@/components/charts/fa-map-chart/index.vue"));
 
-/**
- * 多组数据折线图示例数据
- */
+// === 横幅组件演示 ===
+function handleBannerDemoClick() {
+  console.log("banner clicked");
+}
+function handleBannerDemoConfirm() {
+  console.log("confirm clicked");
+}
+function handleBannerDemoCancel() {
+  console.log("cancel clicked");
+}
+
+// === 图表演示数据 ===
 const multiLineData: LineDataItem[] = [
   {
     name: "销售额",
     data: [120, 132, 101, 134, 90, 130],
-    areaStyle: {
-      startOpacity: 0.1,
-      endOpacity: 0,
-    },
-  },
-  {
-    name: "利润",
-    data: [80, 92, 71, 94, 60, 80],
-    areaStyle: {
-      startOpacity: 0.1,
-      endOpacity: 0,
-    },
+    areaStyle: { startOpacity: 0.1, endOpacity: 0 },
   },
+  { name: "利润", data: [80, 92, 71, 94, 60, 80], areaStyle: { startOpacity: 0.1, endOpacity: 0 } },
 ];
-
 const singleBarData = ref([120, 200, 150, 80, 70, 110, 130]);
 const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
-
 const multiBarData = ref([
   { name: "销售额", data: [120, 200, 150, 80, 70, 110, 130] },
   { name: "利润", data: [20, 50, 30, 15, 10, 25, 35] },
 ]);
-
 const stackBarData = ref([
   { name: "Q1", data: [20, 25, 30, 35, 40], stack: "total" },
   { name: "Q2", data: [30, 35, 40, 45, 50], stack: "total" },
 ]);
-
 const stackXAxisData = ref(["产品A", "产品B", "产品C", "产品D", "产品E"]);
+
+// === 卡片演示数据 ← workplace ===
+const statsCards = [
+  {
+    id: 1,
+    title: "销售产品",
+    count: 1235,
+    description: "鞋子、牛仔裤、派对服装、手表",
+    icon: "ri:bar-chart-box-line",
+    boxStyle: "!bg-theme/10",
+    customIconStyle: "!text-theme !text-3xl",
+    iconStyle: "bg-info",
+    textColor: "var(--theme-color)",
+    showArrow: false,
+  },
+  {
+    id: 2,
+    title: "活跃用户",
+    count: 5000,
+    description: "日活跃用户超过5,000+",
+    icon: "ri:account-box-2-line",
+    boxStyle: "!bg-warning/10",
+    customIconStyle: "!text-warning !text-3xl",
+    iconStyle: "bg-warning",
+    textColor: "var(--fa-warning)",
+    showArrow: false,
+  },
+  {
+    id: 3,
+    title: "总收入",
+    count: 35000,
+    description: "月收入超过¥350,000+",
+    icon: "ri:money-cny-box-line",
+    boxStyle: "!bg-secondary/10",
+    customIconStyle: "!text-secondary !text-3xl",
+    iconStyle: "bg-secondary",
+    textColor: "var(--fa-secondary)",
+    showArrow: false,
+  },
+  {
+    id: 4,
+    title: "客户评价",
+    count: 4800,
+    description: "平均评分4.8/5",
+    icon: "ri:message-3-line",
+    boxStyle: "!bg-error/10",
+    customIconStyle: "!text-error !text-3xl",
+    iconStyle: "bg-error",
+    textColor: "var(--fa-error)",
+    showArrow: false,
+  },
+];
+const progressCards = [
+  {
+    id: 1,
+    title: "完成进度",
+    percentage: 75,
+    color: "var(--fa-success)",
+    icon: "ri:arrow-up-circle-line",
+    iconStyle: "bg-success/12 text-success",
+  },
+  {
+    id: 2,
+    title: "项目进度",
+    percentage: 65,
+    color: "var(--theme-color)",
+    icon: "ri:twitch-line",
+    iconStyle: "bg-theme/12 text-theme",
+  },
+  {
+    id: 3,
+    title: "学习进度",
+    percentage: 45,
+    color: "var(--fa-error)",
+    icon: "ri:game-line",
+    iconStyle: "!bg-error/12 text-error",
+  },
+  {
+    id: 4,
+    title: "任务进度",
+    percentage: 90,
+    color: "var(--fa-secondary)",
+    icon: "ri:flag-2-line",
+    iconStyle: "bg-secondary/12 text-secondary",
+  },
+];
+const imageCards = [
+  {
+    id: 1,
+    imageUrl: cover1,
+    title: "AI技术在医疗领域的创新应用与发展前景",
+    category: "社交",
+    readTime: "2分钟",
+    views: 9125,
+    comments: 3,
+    date: "12月19日 周一",
+  },
+  {
+    id: 2,
+    imageUrl: cover2,
+    title: "大数据分析助力企业决策的实践案例",
+    category: "技术",
+    readTime: "3分钟",
+    views: 7234,
+    comments: 5,
+    date: "12月20日 周二",
+  },
+  {
+    id: 3,
+    imageUrl: cover3,
+    title: "区块链技术在供应链管理中的应用",
+    category: "科技",
+    readTime: "4分钟",
+    views: 5678,
+    comments: 8,
+    date: "12月21日 周三",
+  },
+  {
+    id: 4,
+    imageUrl: cover4,
+    title: "云计算技术发展趋势与未来展望",
+    category: "云技术",
+    readTime: "5分钟",
+    views: 4321,
+    comments: 6,
+    date: "12月22日 周四",
+  },
+];
+const dataList = [
+  {
+    title: "新加坡之行",
+    status: "进行中",
+    time: "5分钟",
+    class: "bg-theme/12 text-theme",
+    icon: "ri:camera-4-line",
+  },
+  {
+    title: "归档数据",
+    status: "进行中",
+    time: "10分钟",
+    class: "bg-secondary/12 text-secondary",
+    icon: "ri:bar-chart-box-line",
+  },
+  {
+    title: "客户会议",
+    status: "待处理",
+    time: "15分钟",
+    class: "bg-warning/12 text-warning",
+    icon: "ri:user-3-line",
+  },
+  {
+    title: "筛选任务团队",
+    status: "进行中",
+    time: "20分钟",
+    class: "bg-error/12 text-error",
+    icon: "ri:account-circle-line",
+  },
+  {
+    title: "发送信封给小王",
+    status: "已完成",
+    time: "20分钟",
+    class: "bg-success/12 text-success",
+    icon: "ri:message-3-line",
+  },
+];
+const timelineData = [
+  { time: "上午 09:30", status: "rgb(73, 190, 255)", content: "收到 John Doe 支付的 385.90 美元" },
+  { time: "上午 10:00", status: "rgb(54, 158, 255)", content: "新销售记录", code: "ML-3467" },
+  { time: "上午 12:00", status: "rgb(103, 232, 207)", content: "向 Michael 支付了 64.95 美元" },
+  { time: "下午 14:30", status: "rgb(255, 193, 7)", content: "系统维护通知", code: "MT-2023" },
+  {
+    time: "下午 15:45",
+    status: "rgb(255, 105, 105)",
+    content: "紧急订单取消提醒",
+    code: "OR-9876",
+  },
+  { time: "下午 17:00", status: "rgb(103, 232, 207)", content: "完成每日销售报表" },
+];
+
+function handleMore() {
+  ElMessage.info("查看更多");
+}
+function handleImageCardClick(card: (typeof imageCards)[0]) {
+  console.log("点击卡片:", card);
+}
 </script>
 
 <style scoped>
 @reference "@styles/core/tailwind.css";
 
+:deep(.el-card) {
+  --el-card-border-radius: calc(var(--custom-radius) + 2px);
+
+  border: 1px solid var(--fa-card-border);
+}
+
 .page-title {
   @apply my-5 text-xl font-medium first:mt-0;
 }
@@ -381,4 +829,11 @@ const stackXAxisData = ref(["产品A", "产品B", "产品C", "产品D", "产品E
 .fa-card {
   @apply p-5;
 }
+
+.console-cards-showcase {
+  padding: 16px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--el-border-radius-base);
+}
 </style>
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 10be6382..90c9b40c 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/top-products.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/top-products.vue
@@ -8,7 +8,7 @@
     <div class="overflow-auto h-full">
       <FaTable
         :data="products"
-        style="width: 100%"
+        :style="{ width: '100%' }"
         size="large"
         :border="false"
         :stripe="false"
diff --git a/frontend/web/src/views/dashboard/home/index.vue b/frontend/web/src/views/dashboard/home/index.vue
index 2a85a7cf..c576804f 100644
--- a/frontend/web/src/views/dashboard/home/index.vue
+++ b/frontend/web/src/views/dashboard/home/index.vue
@@ -1,12 +1,10 @@
-<!-- 仪表盘首页：快捷入口 + 收藏夹 + 数据概览卡片 -->
 <template>
   <div class="dashboard-container">
-    <!-- github 角标 -->
     <FaGithubCorner class="github-corner" />
 
+    <!-- 问候 + 外链 -->
     <ElCard shadow="hover">
       <div class="flex flex-wrap items-center gap-y-3">
-        <!-- 左侧问候语区域 -->
         <div class="flex min-w-0 flex-1 items-center">
           <div class="size-20 shrink-0 rounded-full bg-g-100 flex items-center justify-center">
             <ElAvatar
@@ -15,9 +13,7 @@
               :src="userStore.basicInfo.avatar"
               class="workplace-hero__avatar"
             />
-            <ElIcon v-else :size="40" class="text-g-600">
-              <UserFilled />
-            </ElIcon>
+            <ElIcon v-else :size="40" class="text-g-600"><UserFilled /></ElIcon>
           </div>
           <div>
             <div class="workplace-hero__greeting">
@@ -26,16 +22,13 @@
             <ElText class="workplace-hero__meta">
               <p class="text-sm text-g-600">
                 {{ currentUser.username }} · {{ currentUser.dept_name }} ·
-                {{ currentUser.description }} · 今日天气晴朗，气温在15℃至25℃之间，东南风。
+                {{ currentUser.description }}
               </p>
             </ElText>
           </div>
         </div>
-
-        <!-- 右侧图标区域 - PC端 -->
         <div class="hidden shrink-0 sm:block">
           <div class="flex items-center space-x-6">
-            <!-- 文档 -->
             <div class="flex flex-col items-center">
               <div class="flex items-center text-sm font-bold text-[#4080ff]">
                 <ElIcon class="mr-0.5"><Document /></ElIcon>
@@ -43,19 +36,16 @@
               </div>
               <div class="mt-3 whitespace-nowrap">
                 <ElLink
-                  href="https://blog.csdn.net/weixin_46768253/article/details/149569141?spm=1001.2014.3001.5502"
+                  href="https://blog.csdn.net/weixin_46768253/article/details/149569141"
                   target="_blank"
                 >
                   <FaSvgIcon :icon="resolveIconForFaSvgIcon('csdn')" class="text-lg" />
                 </ElLink>
               </div>
             </div>
-            <!-- 仓库 -->
             <div class="flex flex-col items-center">
               <div class="flex items-center text-sm font-bold text-[#ff9a2e]">
-                <ElIcon class="mr-0.5">
-                  <Folder />
-                </ElIcon>
+                <ElIcon class="mr-0.5"><Folder /></ElIcon>
                 仓库
               </div>
               <div class="mt-3 whitespace-nowrap">
@@ -83,11 +73,8 @@
             </div>
           </div>
         </div>
-
-        <!-- 移动端图标区域 -->
         <div class="w-full sm:hidden">
           <div class="flex justify-end space-x-4 overflow-x-auto">
-            <!-- 仓库图标 -->
             <ElLink href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank">
               <FaSvgIcon :icon="resolveIconForFaSvgIcon('gitee')" class="text-lg text-[#F76560]" />
             </ElLink>
@@ -107,246 +94,30 @@
       </div>
     </ElCard>
 
-    <!-- 数据统计 -->
-    <ElRow :gutter="16" class="mt-4">
-      <!-- 在线用户数量 -->
-      <ElCol :span="8" :xs="24" class="mb-3 sm:mb-0">
-        <ElCard shadow="hover" class="h-full flex flex-col">
+    <!-- CardList 概览统计（含在线用户/UV/PV/访问量等） -->
+    <CardList />
+
+    <!-- 日程日历 + 我的收藏 -->
+    <ElRow :gutter="16">
+      <ElCol :xs="24" :span="12" class="flex flex-col">
+        <ElCard shadow="hover" class="workplace-surface workplace-ops-card flex flex-col h-full">
           <template #header>
-            <div class="flex items-center justify-between">
-              <span class="text-g-600">在线用户</span>
-              <ElTag type="danger" size="small">实时</ElTag>
+            <div class="workplace-section-card__head">
+              <div>
+                <span class="workplace-panel-title">日程日历</span>
+                <p class="workplace-section-sub workplace-section-sub--inline">
+                  点击日期添加或编辑（本地演示）
+                </p>
+              </div>
             </div>
           </template>
-
-          <div class="flex items-center justify-between mt-2 flex-1">
-            <div class="flex items-center">
-              <span class="text-lg transition-all duration-300 hover:scale-110">9999</span>
-              <span v-if="true" class="ml-2 text-xs text-success">
-                <ElIcon>
-                  <Connection />
-                </ElIcon>
-                已连接
-              </span>
-              <span v-else class="ml-2 text-xs text-danger">
-                <ElIcon>
-                  <Failed />
-                </ElIcon>
-                未连接
-              </span>
-            </div>
-            <FaSvgIcon
-              :icon="resolveIconForFaSvgIcon('people')"
-              class="size-8 animate-[pulse_2s_infinite]"
-            />
-          </div>
-
-          <div class="flex items-center justify-between mt-2 text-sm text-g-600">
-            <span>更新时间</span>
-            <span>2025-07-12 00:00:00</span>
+          <div class="workplace-ops-card__body">
+            <Calendar />
           </div>
         </ElCard>
       </ElCol>
-
-      <!-- 访客数(UV) -->
-      <ElCol :span="8" :xs="24" class="mb-3 sm:mb-0">
-        <ElSkeleton :loading="visitStatsLoading" :rows="5" animated>
-          <template #template>
-            <ElCard>
-              <template #header>
-                <div>
-                  <ElSkeletonItem variant="h3" style="width: 40%" />
-                  <ElSkeletonItem variant="rect" style="float: right; width: 1em; height: 1em" />
-                </div>
-              </template>
-
-              <div class="flex items-center justify-between">
-                <ElSkeletonItem variant="text" style="width: 30%" />
-                <ElSkeletonItem variant="circle" style="width: 2em; height: 2em" />
-              </div>
-              <div class="mt-5 flex items-center justify-between">
-                <ElSkeletonItem variant="text" style="width: 50%" />
-                <ElSkeletonItem variant="text" style="width: 1em" />
-              </div>
-            </ElCard>
-          </template>
-          <template v-if="!visitStatsLoading">
-            <ElCard shadow="hover" class="h-full flex flex-col">
-              <template #header>
-                <div class="flex items-center justify-between">
-                  <span class="text-g-600">访客数(UV)</span>
-                  <ElTag type="success" size="small">日</ElTag>
-                </div>
-              </template>
-
-              <div class="flex items-center justify-between mt-2 flex-1">
-                <div class="flex items-center">
-                  <span class="text-lg">{{ Math.round(transitionUvCount) }}</span>
-                  <span
-                    :class="[
-                      'text-xs',
-                      'ml-2',
-                      computeGrowthRateClass(visitStatsData.uvGrowthRate),
-                    ]"
-                  >
-                    <ElIcon>
-                      <Top v-if="visitStatsData.uvGrowthRate > 0" />
-                      <Bottom v-else-if="visitStatsData.uvGrowthRate < 0" />
-                    </ElIcon>
-                    {{ formatGrowthRate(visitStatsData.uvGrowthRate) }}
-                  </span>
-                </div>
-                <FaSvgIcon :icon="resolveIconForFaSvgIcon('visitor')" class="size-8" />
-              </div>
-
-              <div class="flex items-center justify-between mt-2 text-sm text-g-600">
-                <span>总访客数</span>
-                <span>{{ Math.round(transitionTotalUvCount) }}</span>
-              </div>
-            </ElCard>
-          </template>
-        </ElSkeleton>
-      </ElCol>
-
-      <!-- 浏览量(PV) -->
-      <ElCol :span="8" :xs="24">
-        <ElSkeleton :loading="visitStatsLoading" :rows="5" animated>
-          <template #template>
-            <ElCard>
-              <template #header>
-                <div>
-                  <ElSkeletonItem variant="h3" style="width: 40%" />
-                  <ElSkeletonItem variant="rect" style="float: right; width: 1em; height: 1em" />
-                </div>
-              </template>
-
-              <div class="flex items-center justify-between">
-                <ElSkeletonItem variant="text" style="width: 30%" />
-                <ElSkeletonItem variant="circle" style="width: 2em; height: 2em" />
-              </div>
-              <div class="mt-5 flex items-center justify-between">
-                <ElSkeletonItem variant="text" style="width: 50%" />
-                <ElSkeletonItem variant="text" style="width: 1em" />
-              </div>
-            </ElCard>
-          </template>
-          <template v-if="!visitStatsLoading">
-            <ElCard shadow="hover" class="h-full flex flex-col">
-              <template #header>
-                <div class="flex items-center justify-between">
-                  <span class="text-g-600">浏览量(PV)</span>
-                  <ElTag type="primary" size="small">日</ElTag>
-                </div>
-              </template>
-
-              <div class="flex items-center justify-between mt-2 flex-1">
-                <div class="flex items-center">
-                  <span class="text-lg">{{ Math.round(transitionPvCount) }}</span>
-                  <span
-                    :class="[
-                      'text-xs',
-                      'ml-2',
-                      computeGrowthRateClass(visitStatsData.pvGrowthRate),
-                    ]"
-                  >
-                    <ElIcon>
-                      <Top v-if="visitStatsData.pvGrowthRate > 0" />
-                      <Bottom v-else-if="visitStatsData.pvGrowthRate < 0" />
-                    </ElIcon>
-                    {{ formatGrowthRate(visitStatsData.pvGrowthRate) }}
-                  </span>
-                </div>
-                <FaSvgIcon :icon="resolveIconForFaSvgIcon('browser')" class="size-8" />
-              </div>
-
-              <div class="flex items-center justify-between mt-2 text-sm text-g-600">
-                <span>总浏览量</span>
-                <span>{{ Math.round(transitionTotalPvCount) }}</span>
-              </div>
-            </ElCard>
-          </template>
-        </ElSkeleton>
-      </ElCol>
-    </ElRow>
-
-    <ElRow :gutter="16" class="mt-4">
-      <!-- 访问趋势统计图 -->
-      <ElCol :xs="24" :span="8">
-        <ElCard>
-          <template #header>
-            <div class="flex items-center justify-between">
-              <span>访问趋势</span>
-              <ElRadioGroup v-model="visitTrendDateRange" size="small">
-                <ElRadioButton :value="7">近7天</ElRadioButton>
-                <ElRadioButton :value="30">近30天</ElRadioButton>
-              </ElRadioGroup>
-            </div>
-          </template>
-          <ECharts :options="visitTrendChartOptions" height="calc(100vh - 550px)" />
-        </ElCard>
-      </ElCol>
-      <!-- 最新动态 -->
-      <ElCol :xs="24" :span="8">
-        <ElCard>
-          <template #header>
-            <div class="flex items-center justify-between">
-              <span class="header-title">最新动态</span>
-              <ElLink
-                type="primary"
-                underline="never"
-                href="https://gitee.com/fastapiadmin/FastapiAdmin/releases"
-                target="_blank"
-              >
-                完整记录
-                <ElIcon class="link-icon">
-                  <TopRight />
-                </ElIcon>
-              </ElLink>
-            </div>
-          </template>
-
-          <ElScrollbar height="calc(100vh - 550px)">
-            <ElTimeline class="p-2">
-              <ElTimelineItem
-                v-for="(item, index) in vesionList"
-                :key="index"
-                :timestamp="item.date"
-                placement="top"
-                :color="index === 0 ? '#67C23A' : '#909399'"
-                :hollow="index !== 0"
-              >
-                <div class="version-item" :class="{ 'latest-item': index === 0 }">
-                  <div class="flex items-center justify-between">
-                    <ElText tag="strong">{{ item.title }}</ElText>
-                    <ElTag v-if="item.tag" :type="index === 0 ? 'success' : 'info'" size="small">
-                      {{ item.tag }}
-                    </ElTag>
-                  </div>
-
-                  <ElText class="version-content">{{ item.content }}</ElText>
-
-                  <div v-if="item.link">
-                    <ElLink
-                      :type="index === 0 ? 'primary' : 'info'"
-                      :href="item.link"
-                      target="_blank"
-                      underline="never"
-                    >
-                      详情
-                      <ElIcon class="link-icon">
-                        <TopRight />
-                      </ElIcon>
-                    </ElLink>
-                  </div>
-                </div>
-              </ElTimelineItem>
-            </ElTimeline>
-          </ElScrollbar>
-        </ElCard>
-      </ElCol>
-
-      <ElCol :xs="24" :span="8">
-        <ElCard>
+      <ElCol :xs="24" :span="12" class="flex flex-col">
+        <ElCard shadow="hover" class="flex flex-col h-full">
           <template #header>
             <div class="workplace-bookmarks-card__header">
               <div>
@@ -381,312 +152,134 @@
               </div>
             </div>
           </template>
-          <div style="height: calc(100vh - 550px)">
-            <template v-if="quickLinks.length > 0">
-              <div>
-                <ElTooltip
-                  v-for="(item, index) in quickLinks"
-                  :key="item.id || `${item.href}-${index}`"
-                  placement="top"
-                  :show-after="400"
-                  :content="item.title"
+          <div v-if="quickLinks.length > 0">
+            <ElTooltip
+              v-for="(item, index) in quickLinks"
+              :key="item.id || `${item.href}-${index}`"
+              placement="top"
+              :show-after="400"
+              :content="item.title"
+            >
+              <div
+                class="workplace-quick-row workplace-quick-row--compact workplace-quick-row--chip"
+                role="button"
+                tabindex="0"
+                @click="handleQuickLinkClick(item)"
+                @keydown.enter.prevent="handleQuickLinkClick(item)"
+                @keydown.space.prevent="handleQuickLinkClick(item)"
+              >
+                <span
+                  class="workplace-quick-row__accent"
+                  :style="{ backgroundColor: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
+                />
+                <div
+                  class="workplace-quick-row__icon"
+                  :style="{ color: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
                 >
-                  <div
-                    class="workplace-quick-row workplace-quick-row--compact workplace-quick-row--chip"
-                    role="button"
-                    tabindex="0"
-                    @click="handleQuickLinkClick(item)"
-                    @keydown.enter.prevent="handleQuickLinkClick(item)"
-                    @keydown.space.prevent="handleQuickLinkClick(item)"
+                  <MenuRouteIcon :icon="item.icon || 'menu'" />
+                </div>
+                <div class="workplace-quick-row__text">
+                  <span class="workplace-quick-row__title">{{ item.title }}</span>
+                </div>
+                <div class="workplace-quick-row__actions">
+                  <button
+                    type="button"
+                    class="workplace-quick-row__remove"
+                    :disabled="!item.id && !item.href"
+                    :title="item.id || item.href ? '移除收藏' : '无法移除（缺少路径）'"
+                    :aria-label="`移除收藏 ${item.title}`"
+                    @click.stop="handleDeleteLink(item)"
                   >
-                    <span
-                      class="workplace-quick-row__accent"
-                      :style="{
-                        backgroundColor: getQuickLinkColor(getQuickLinkStableIndex(item)),
-                      }"
-                    />
-                    <div
-                      class="workplace-quick-row__icon"
-                      :style="{ color: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
-                    >
-                      <MenuRouteIcon :icon="item.icon || 'menu'" />
-                    </div>
-                    <div class="workplace-quick-row__text">
-                      <span class="workplace-quick-row__title">{{ item.title }}</span>
-                    </div>
-                    <div class="workplace-quick-row__actions">
-                      <button
-                        type="button"
-                        class="workplace-quick-row__remove"
-                        :disabled="!item.id && !item.href"
-                        :title="item.id || item.href ? '移除收藏' : '无法移除（缺少路径）'"
-                        :aria-label="`移除收藏 ${item.title}`"
-                        @click.stop="handleDeleteLink(item)"
-                      >
-                        <ElIcon><Close /></ElIcon>
-                      </button>
-                    </div>
-                  </div>
-                </ElTooltip>
+                    <ElIcon><Close /></ElIcon>
+                  </button>
+                </div>
               </div>
-            </template>
-            <ElEmpty v-else :image-size="48">
-              <template #description>
-                <p class="workplace-quick-empty__title">暂无收藏</p>
-                <p class="workplace-quick-empty__hint">
-                  在顶部
-                  <strong>标签栏</strong>
-                  左侧星标点击添加
-                </p>
-              </template>
-            </ElEmpty>
+            </ElTooltip>
           </div>
+          <ElEmpty v-else :image-size="48">
+            <template #description>
+              <p class="workplace-quick-empty__title">暂无收藏</p>
+              <p class="workplace-quick-empty__hint">
+                在顶部
+                <strong>标签栏</strong>
+                左侧星标点击添加
+              </p>
+            </template>
+          </ElEmpty>
         </ElCard>
       </ElCol>
     </ElRow>
-  </div>
 
-  <div class="ecommerce mt-4">
-    <ElRow :gutter="20">
-      <ElCol :sm="24" :md="24" :lg="16">
-        <Banner />
-      </ElCol>
-      <ElCol :sm="12" :md="12" :lg="4">
-        <TotalOrderVolume />
-      </ElCol>
-      <ElCol :sm="12" :md="12" :lg="4">
-        <TotalProducts />
-      </ElCol>
-    </ElRow>
-
-    <ElRow :gutter="20">
-      <ElCol :sm="12" :md="12" :lg="8">
-        <SalesTrend />
-      </ElCol>
-      <ElCol :sm="12" :md="12" :lg="8">
-        <SalesClassification />
-      </ElCol>
-      <ElCol :sm="24" :md="24" :lg="8">
-        <ElRow :gutter="20">
-          <ElCol :sm="24" :md="12" :lg="12">
-            <ProductSales />
-          </ElCol>
-          <ElCol :sm="24" :md="12" :lg="12">
-            <SalesGrowth />
-          </ElCol>
-          <ElCol :span="24" class="no-margin-bottom">
-            <CartConversionRate />
-          </ElCol>
-        </ElRow>
-      </ElCol>
-    </ElRow>
-
-    <ElRow :gutter="20">
-      <ElCol :sm="24" :md="12" :lg="8">
-        <HotCommodity />
-      </ElCol>
-      <ElCol :sm="24" :md="12" :lg="8">
-        <AnnualSales />
-      </ElCol>
-      <ElCol :sm="24" :md="24" :lg="8">
-        <TransactionList />
-      </ElCol>
-    </ElRow>
-
-    <ElRow :gutter="20">
-      <ElCol :md="24" :lg="8">
-        <RecentTransaction />
-      </ElCol>
-      <ElCol :md="24" :lg="16" class="no-margin-bottom">
-        <HotProductsList />
-      </ElCol>
-    </ElRow>
-  </div>
-
-  <div class="workplace-page">
-    <!-- 横幅组件演示（原 widgets/banners，后续可调整） -->
-    <div class="mt-4 workplace-banners-showcase">
-      <h2 class="workplace-banners-showcase__title">基础 & 自定义按钮+背景色</h2>
-      <ElRow :gutter="20">
-        <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <FaBasicBanner
-            title="数据中心运行状态"
-            subtitle="系统访问量同比增长 23%，所有服务运行稳定，数据监控正常。"
-          />
-        </ElCol>
-        <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <FaBasicBanner
-            title="欢迎使用 Art Design Pro"
-            subtitle="基于 Vue 3 + TypeScript + Element Plus 构建的现代化管理系统。"
-            titleColor="#333"
-            subtitleColor="#666"
-            boxStyle="!bg-[#D4F1F7]"
-            :buttonConfig="{
-              show: true,
-              text: '开始探索',
-              color: 'var(--fa-success)',
-              textColor: '#fff',
-              radius: '6px',
-            }"
-            @buttonClick="handleBannerDemoClick"
-          />
-        </ElCol>
-      </ElRow>
-
-      <h2 class="workplace-banners-showcase__title">自定义图片 & 使用 slot 自定义内容</h2>
-
-      <ElRow :gutter="20">
-        <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <FaBasicBanner
-            title="探索星空计划"
-            subtitle="加入我们的天文观测活动，发现宇宙的奥秘"
-            boxStyle="!bg-[#FF8AAB]"
-            :buttonConfig="{
-              show: true,
-              text: '立即参与',
-              color: '#FF5A89',
-              textColor: '#fff',
-            }"
-            :imageConfig="{
-              src: bannerIcon3,
-            }"
-          />
-        </ElCol>
-        <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <FaBasicBanner
-            boxStyle="!bg-[#70B1FF]"
-            :imageConfig="{
-              src: bannerIcon5,
-            }"
-          >
-            <template #title>
-              <h3 class="workplace-banners-showcase__slot-heading">智能组件系统</h3>
-            </template>
-
-            <template #subtitle>
-              <div class="workplace-banners-showcase__slot-sub">
-                <p class="workplace-banners-showcase__slot-sub-p">
-                  灵活配置，强大扩展，支持自定义插槽内容
-                </p>
-              </div>
-            </template>
-
-            <template #button>
-              <div class="workplace-banners-showcase__slot-btn-wrap">
-                <ElButton type="primary" color="#04A1FF">查看文档</ElButton>
-              </div>
-            </template>
-          </FaBasicBanner>
-        </ElCol>
-      </ElRow>
-
-      <h2 class="workplace-banners-showcase__title">抽象配置方案（Preset 模式）</h2>
-      <ElRow :gutter="20">
-        <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <FaBasicBanner v-bind="presetBanners.marketing" />
-        </ElCol>
-        <ElCol :xs="24" :sm="12" :md="12" class="mb-5">
-          <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">
-          <FaCardBanner
-            title="系统运行正常"
-            description="所有核心服务运行稳定，响应时间在正常范围内。"
-          />
-        </ElCol>
-        <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
-          <FaCardBanner
-            :image="bannerIcon2"
-            title="重要消息通知"
-            description="您有 3 条待处理的重要消息，请及时查看。"
-            :button="{
-              show: true,
-              text: '查看详情',
-              color: 'var(--fa-warning)',
-              textColor: '#fff',
-            }"
-          />
-        </ElCol>
-        <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
-          <FaCardBanner
-            :image="bannerIcon3"
-            title="数据分析报告"
-            description="本周业务数据分析报告已完成，请查看关键指标。"
-            :button="{
-              show: true,
-              text: '下载报告',
-              color: 'var(--fa-error)',
-              textColor: '#fff',
-            }"
-          />
-        </ElCol>
-        <ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
-          <FaCardBanner
-            :image="bannerIcon4"
-            title="版本更新提醒"
-            description="Art Design Pro v2.1.0 已发布，包含性能优化和新功能。"
-            :button="{
-              show: true,
-              text: '立即更新',
-              color: 'var(--theme-color)',
-              textColor: '#fff',
-            }"
-            :cancelButton="{
-              show: true,
-              text: '稍后提醒',
-              color: '#eee',
-              textColor: '#333',
-            }"
-            @click="handleBannerDemoConfirm"
-            @cancel="handleBannerDemoCancel"
-          />
-        </ElCol>
-      </ElRow>
-    </div>
-
-    <!-- 日程日历（系统日志 / 消息区后期再调整） -->
-    <div class="mt-4 workplace-ops-stack">
-      <ElRow :gutter="16" class="workplace-ops-row">
-        <ElCol :xs="24" class="workplace-ops-col workplace-ops-col--calendar">
-          <ElCard
-            shadow="hover"
-            class="workplace-calendar-card workplace-surface workplace-ops-card"
-          >
-            <template #header>
-              <div class="workplace-section-card__head">
-                <div>
-                  <span class="workplace-panel-title">日程日历</span>
-                  <p class="workplace-section-sub workplace-section-sub--inline">
-                    点击日期添加或编辑（本地演示）
-                  </p>
-                </div>
-              </div>
-            </template>
-            <div class="workplace-ops-card__body workplace-ops-card__body--calendar">
-              <Calendar />
+    <!-- 最新动态 + 关于项目 -->
+    <ElRow :gutter="16">
+      <ElCol :span="12" class="flex flex-col">
+        <ElCard shadow="hover" class="h-full flex flex-col">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span class="font-medium">最新动态</span>
+              <ElLink
+                type="primary"
+                underline="never"
+                href="https://gitee.com/fastapiadmin/FastapiAdmin/releases"
+                target="_blank"
+              >
+                完整记录
+                <ElIcon class="link-icon"><TopRight /></ElIcon>
+              </ElLink>
             </div>
-          </ElCard>
-        </ElCol>
-      </ElRow>
-    </div>
+          </template>
+          <ElScrollbar height="300px">
+            <ElTimeline class="p-2">
+              <ElTimelineItem
+                v-for="(item, index) in vesionList"
+                :key="index"
+                :timestamp="item.date"
+                placement="top"
+                :color="index === 0 ? '#67C23A' : '#909399'"
+                :hollow="index !== 0"
+              >
+                <div class="version-item" :class="{ 'latest-item': index === 0 }">
+                  <div class="flex items-center justify-between">
+                    <ElText tag="strong">{{ item.title }}</ElText>
+                    <ElTag v-if="item.tag" :type="index === 0 ? 'success' : 'info'" size="small">
+                      {{ item.tag }}
+                    </ElTag>
+                  </div>
+                  <ElText class="version-content">{{ item.content }}</ElText>
+                  <div v-if="item.link">
+                    <ElLink
+                      :type="index === 0 ? 'primary' : 'info'"
+                      :href="item.link"
+                      target="_blank"
+                      underline="never"
+                    >
+                      详情
+                      <ElIcon class="link-icon"><TopRight /></ElIcon>
+                    </ElLink>
+                  </div>
+                </div>
+              </ElTimelineItem>
+            </ElTimeline>
+          </ElScrollbar>
+        </ElCard>
+      </ElCol>
+      <ElCol :span="12" class="flex flex-col">
+        <AboutProject />
+      </ElCol>
+    </ElRow>
   </div>
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "Home",
-  inheritAttrs: false,
-});
+defineOptions({ name: "Home", inheritAttrs: false });
 
 import { useUserStore } from "@stores/index";
 import MenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
 import Calendar from "@/components/others/fa-calendar/index.vue";
+import CardList from "../workplace/modules/card-list.vue";
+import AboutProject from "../workplace/modules/about-project.vue";
 import { greetings } from "@utils/common";
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import {
@@ -695,56 +288,30 @@ import {
   Close,
   Star,
   QuestionFilled,
-  Bottom,
-  Connection,
   Document,
-  Failed,
   Folder,
-  Top,
   TopRight,
 } from "@element-plus/icons-vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { quickStartManager, QUICK_LINK_MAX, type QuickLink } from "@utils/common";
-import bannerIcon2 from "@imgs/3d/icon2.webp";
-import bannerIcon3 from "@imgs/3d/icon3.webp";
-import bannerIcon4 from "@imgs/3d/icon4.webp";
-import bannerIcon5 from "@imgs/3d/icon7.webp";
 import { dayjs } from "element-plus";
-import { formatGrowthRate } from "@utils";
-import { useTransition } from "@vueuse/core";
 import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
 import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
-import Banner from "./modules/banner.vue";
-import TotalOrderVolume from "./modules/total-order-volume.vue";
-import TotalProducts from "./modules/total-products.vue";
-import SalesTrend from "./modules/sales-trend.vue";
-import SalesClassification from "./modules/sales-classification.vue";
-import TransactionList from "./modules/transaction-list.vue";
-import HotCommodity from "./modules/hot-commodity.vue";
-import RecentTransaction from "./modules/recent-transaction.vue";
-import AnnualSales from "./modules/annual-sales.vue";
-import ProductSales from "./modules/product-sales.vue";
-import SalesGrowth from "./modules/sales-growth.vue";
-import CartConversionRate from "./modules/cart-conversion-rate.vue";
-import HotProductsList from "./modules/hot-products-list.vue";
 
 const timefix = greetings();
 const userStore = useUserStore();
 const { t } = useI18n();
 const router = useRouter();
-
 const welcome = "祝你开心每一天！";
 
 interface VersionItem {
   id: string;
-  title: string; // 版本标题（如：v2.4.0）
-  date: string; // 发布时间
-  content: string; // 版本描述
-  link: string; // 详情链接
-  tag?: string; // 版本标签（可选）
+  title: string;
+  date: string;
+  content: string;
+  link: string;
+  tag?: string;
 }
-
-// 当前通知公告列表
 const vesionList = ref<VersionItem[]>([
   {
     id: "1",
@@ -772,300 +339,6 @@ const vesionList = ref<VersionItem[]>([
   },
 ]);
 
-// 访客统计数据加载状态
-const visitStatsLoading = ref(true);
-// 访客统计数据
-const visitStatsData = ref({
-  todayUvCount: 0,
-  uvGrowthRate: 0,
-  totalUvCount: 0,
-  todayPvCount: 0,
-  pvGrowthRate: 0,
-  totalPvCount: 0,
-});
-
-// 数字过渡动画
-const transitionUvCount = useTransition(
-  computed(() => visitStatsData.value.todayUvCount),
-  {
-    duration: 1000,
-    transition: [0.25, 0.1, 0.25, 1.0], // CSS cubic-bezier
-  }
-);
-
-const transitionTotalUvCount = useTransition(
-  computed(() => visitStatsData.value.totalUvCount),
-  {
-    duration: 1200,
-    transition: [0.25, 0.1, 0.25, 1.0],
-  }
-);
-
-const transitionPvCount = useTransition(
-  computed(() => visitStatsData.value.todayPvCount),
-  {
-    duration: 1000,
-    transition: [0.25, 0.1, 0.25, 1.0],
-  }
-);
-
-const transitionTotalPvCount = useTransition(
-  computed(() => visitStatsData.value.totalPvCount),
-  {
-    duration: 1200,
-    transition: [0.25, 0.1, 0.25, 1.0],
-  }
-);
-
-// 访问趋势日期范围（单位：天）
-const visitTrendDateRange = ref(7);
-// 访问趋势图表配置
-const visitTrendChartOptions = ref();
-
-/**
- * 更新访问趋势图表的配置项
- *
- * @param data - 访问趋势数据
- */
-const updateVisitTrendChartOptions = () => {
-  visitTrendChartOptions.value = {
-    tooltip: {
-      trigger: "axis",
-    },
-    legend: {
-      data: ["浏览量(PV)", "访客数(UV)"],
-      bottom: 0,
-    },
-    grid: {
-      left: "1%",
-      right: "5%",
-      bottom: "10%",
-      containLabel: true,
-    },
-    xAxis: {
-      type: "category",
-      data: Array.from({ length: visitTrendDateRange.value }, (_, index) =>
-        dayjs()
-          .subtract(visitTrendDateRange.value - index - 1, "day")
-          .format("YYYY-MM-DD")
-      ),
-    },
-    yAxis: {
-      type: "value",
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: "dashed",
-        },
-      },
-    },
-    series: [
-      {
-        name: "浏览量(PV)",
-        type: "line",
-        data: Array.from(
-          { length: visitTrendDateRange.value },
-          () => Math.floor(Math.random() * 500) + 100
-        ),
-        areaStyle: {
-          color: "rgba(64, 158, 255, 0.1)",
-        },
-        smooth: true,
-        itemStyle: {
-          color: "#4080FF",
-        },
-        lineStyle: {
-          color: "#4080FF",
-        },
-      },
-      {
-        name: "访客数(UV)",
-        type: "line",
-        data: Array.from(
-          { length: visitTrendDateRange.value },
-          () => Math.floor(Math.random() * 200) + 50
-        ),
-        areaStyle: {
-          color: "rgba(103, 194, 58, 0.1)",
-        },
-        smooth: true,
-        itemStyle: {
-          color: "#67C23A",
-        },
-        lineStyle: {
-          color: "#67C23A",
-        },
-      },
-    ],
-  };
-};
-
-/**
- * 根据增长率计算对应的 CSS 类名
- *
- * @param growthRate - 增长率数值
- */
-const computeGrowthRateClass = (growthRate?: number): string => {
-  if (!growthRate) {
-    return "text-[--el-color-info]";
-  }
-  if (growthRate > 0) {
-    return "text-[--el-color-danger]";
-  } else if (growthRate < 0) {
-    return "text-[--el-color-success]";
-  } else {
-    return "text-[--el-color-info]";
-  }
-};
-
-// 监听访问趋势日期范围的变化，重新获取趋势数据
-watch(
-  () => visitTrendDateRange.value,
-  () => {
-    updateVisitTrendChartOptions();
-  },
-  { immediate: true }
-);
-
-// 组件挂载后加载访客统计数据和通知公告数据
-onMounted(() => {
-  visitStatsLoading.value = false;
-  visitStatsData.value = {
-    todayUvCount: Math.floor(Math.random() * 200) + 50,
-    uvGrowthRate: parseFloat((Math.random() * 20 - 10).toFixed(2)),
-    totalUvCount: Math.floor(Math.random() * 5000) + 1000,
-    todayPvCount: Math.floor(Math.random() * 500) + 100,
-    pvGrowthRate: parseFloat((Math.random() * 20 - 10).toFixed(2)),
-    totalPvCount: Math.floor(Math.random() * 20000) + 5000,
-  };
-  updateVisitTrendChartOptions();
-});
-
-/** 横幅演示（原 widgets/banners） */
-function handleBannerDemoClick() {
-  console.log("banner clicked");
-}
-
-function handleBannerDemoConfirm() {
-  console.log("confirm clicked");
-}
-
-function handleBannerDemoCancel() {
-  console.log("cancel clicked");
-}
-
-const presetBanners = {
-  marketing: {
-    title: "限时优惠活动",
-    subtitle: "精选商品 48 小时闪购，最高享受 7 折优惠，数量有限！",
-    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(--fa-success)",
-      textColor: "#fff",
-    },
-  },
-  info: {
-    title: "服务到期提醒",
-    subtitle: "您的高级服务将在 7 天后到期，请及时续费以继续享受完整功能。",
-    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(--fa-secondary)",
-      textColor: "#fff",
-    },
-  },
-} as const;
-
-// 快速链接数据
-const quickLinks = ref<QuickLink[]>(quickStartManager.getQuickLinks());
-
-// 处理快速链接点击
-const handleQuickLinkClick = (item: QuickLink) => {
-  if (item.href) {
-    router.push(item.href).catch(() => {
-      ElMessage.warning(`路由 ${item.href} 不存在，请检查配置`);
-    });
-  } else {
-    ElMessage.info(`${item.title} 功能待开发`);
-  }
-};
-
-/** 与主题协调的固定色板，按索引循环，避免随机色闪烁 */
-const QUICK_LINK_PALETTE = ["#4080ff", "#23c343", "#ff9a2e", "#f76560", "#a9aeb8", "#00b42a"];
-
-function getQuickLinkColor(index: number) {
-  return QUICK_LINK_PALETTE[index % QUICK_LINK_PALETTE.length];
-}
-
-/** 列表中颜色与顺序与「全部收藏」一致，筛选后仍稳定 */
-function getQuickLinkStableIndex(item: QuickLink): number {
-  const list = quickLinks.value;
-  const i = list.findIndex((l) =>
-    l.id != null && l.id !== "" ? l.id === item.id : l.href === item.href
-  );
-  return i >= 0 ? i : 0;
-}
-
-// 处理删除链接
-const handleDeleteLink = async (item: QuickLink) => {
-  try {
-    await ElMessageBox.confirm(`确定要取消收藏"${item.title}"吗？`, "取消收藏确认", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    });
-    if (item.id) {
-      quickStartManager.removeQuickLink(item.id);
-    } else if (item.href) {
-      quickStartManager.removeQuickLinkByHref(item.href);
-    } else {
-      ElMessage.warning("无法移除：缺少标识");
-      return;
-    }
-    ElMessage.success(`已取消收藏：${item.title}`);
-  } catch {
-    // 用户取消
-  }
-};
-
-const clearBookmarks = async () => {
-  try {
-    await ElMessageBox.confirm("确定要清空收藏吗？", "清空收藏确认", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    });
-    quickStartManager.clearQuickLinks();
-    ElMessage.success("已清空收藏");
-  } catch {
-    // 用户取消
-  }
-};
-
-// 监听快速链接变化
-const updateQuickLinks = (links: QuickLink[]) => {
-  quickLinks.value = links;
-};
-
-// 组件挂载时获取数据和添加监听器
-onMounted(() => {
-  quickStartManager.addListener(updateQuickLinks);
-});
-
-// 组件卸载时移除监听器
-onUnmounted(() => {
-  quickStartManager.removeListener(updateQuickLinks);
-});
-
 const currentUser = {
   avatar:
     userStore.basicInfo.avatar ||
@@ -1076,48 +349,125 @@ const currentUser = {
   dept_name: userStore.basicInfo.dept_name || "软件专业部",
   last_login: userStore.basicInfo.last_login || "2023-01-01 00:00:00",
 };
+
+const quickLinks = ref<QuickLink[]>(quickStartManager.getQuickLinks());
+const handleQuickLinkClick = (item: QuickLink) => {
+  if (item.href) {
+    router.push(item.href).catch(() => {
+      ElMessage.warning(`路由 ${item.href} 不存在，请检查配置`);
+    });
+  } else {
+    ElMessage.info(`${item.title} 功能待开发`);
+  }
+};
+const QUICK_LINK_PALETTE = ["#4080ff", "#23c343", "#ff9a2e", "#f76560", "#a9aeb8", "#00b42a"];
+const getQuickLinkColor = (index: number) => QUICK_LINK_PALETTE[index % QUICK_LINK_PALETTE.length];
+const getQuickLinkStableIndex = (item: QuickLink): number => {
+  const i = quickLinks.value.findIndex((l) =>
+    l.id != null && l.id !== "" ? l.id === item.id : l.href === item.href
+  );
+  return i >= 0 ? i : 0;
+};
+const handleDeleteLink = async (item: QuickLink) => {
+  try {
+    await ElMessageBox.confirm(`确定要取消收藏"${item.title}"吗？`, "取消收藏确认", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    if (item.id) quickStartManager.removeQuickLink(item.id);
+    else if (item.href) quickStartManager.removeQuickLinkByHref(item.href);
+    else {
+      ElMessage.warning("无法移除：缺少标识");
+      return;
+    }
+    ElMessage.success(`已取消收藏：${item.title}`);
+  } catch {
+    /* 用户取消 */
+  }
+};
+const clearBookmarks = async () => {
+  try {
+    await ElMessageBox.confirm("确定要清空收藏吗？", "清空收藏确认", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    quickStartManager.clearQuickLinks();
+    ElMessage.success("已清空收藏");
+  } catch {
+    /* 用户取消 */
+  }
+};
+const updateQuickLinks = (links: QuickLink[]) => {
+  quickLinks.value = links;
+};
+onMounted(() => {
+  quickStartManager.addListener(updateQuickLinks);
+});
+onUnmounted(() => {
+  quickStartManager.removeListener(updateQuickLinks);
+});
 </script>
 
 <style scoped lang="scss">
+:deep(.el-card) {
+  --el-card-border-radius: calc(var(--custom-radius) + 2px);
+
+  border: 1px solid var(--fa-card-border);
+}
+
 .dashboard-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
 
-  :deep(.el-card) {
-    --el-card-border-radius: calc(var(--custom-radius) + 2px);
-    border: 1px solid var(--fa-card-border);
+  > * {
+    margin-bottom: 16px;
   }
 
-  .github-corner {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
-    border: 0;
+  > :last-child {
+    margin-bottom: 0;
   }
 
-  .version-item {
-    padding: 10px 12px;
-    background: var(--el-fill-color-lighter);
-    border-radius: 8px;
-    transition: all 0.2s;
+  &::after {
+    display: block;
+    flex-shrink: 0;
+    height: 16px;
+    content: "";
+  }
+}
 
-    &.latest-item {
-      background: var(--el-color-primary-light-9);
-      border: 1px solid var(--el-color-primary-light-5);
-    }
+.github-corner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  border: 0;
+}
 
-    &:hover {
-      transform: translateX(5px);
-    }
+.version-item {
+  padding: 10px 12px;
+  background: var(--el-fill-color-lighter);
+  border-radius: 8px;
+  transition: all 0.2s;
 
-    .version-content {
-      display: block;
-      margin-top: 6px;
-      margin-bottom: 8px;
-      font-size: 13px;
-      line-height: 1.4;
-      color: var(--el-text-color-secondary);
-    }
+  &.latest-item {
+    background: var(--el-color-primary-light-9);
+    border: 1px solid var(--el-color-primary-light-5);
+  }
+
+  &:hover {
+    transform: translateX(5px);
+  }
+
+  .version-content {
+    display: block;
+    margin-top: 6px;
+    margin-bottom: 8px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--el-text-color-secondary);
   }
 }
 
@@ -1133,44 +483,16 @@ const currentUser = {
   margin: 2px 0 0;
 }
 
-.workplace-page {
-  --workplace-radius: 12px;
-  --workplace-radius-sm: 10px;
-
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-/* 与上方模块区隔离，两行 ops 之间固定间距，避免与下方栅格视觉「叠在一起」 */
-.workplace-ops-stack {
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-}
-
 .workplace-surface {
   overflow: hidden;
   border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--workplace-radius);
+  border-radius: 12px;
 
   :deep(.el-card__header) {
     border-bottom-color: var(--el-border-color-extra-light);
   }
 }
 
-.workplace-calendar-card {
-  :deep(.el-card__body) {
-    padding: 8px 10px 10px;
-  }
-}
-
-.workplace-ops-col--calendar {
-  max-width: 100%;
-}
-
 .workplace-ops-card__body--calendar {
   max-height: min(300px, 36vh);
   overflow: auto;
@@ -1183,35 +505,10 @@ const currentUser = {
   letter-spacing: 0.02em;
 }
 
-/* —— 顶栏 —— */
-.workplace-hero-card {
-  :deep(.el-card__body) {
-    padding: 20px 22px;
-  }
-}
-
-.workplace-hero__avatar-wrap {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  margin-right: 18px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 50%;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
-}
-
 .workplace-hero__avatar {
   border: 2px solid var(--el-bg-color);
 }
 
-.workplace-hero__avatar-fallback {
-  opacity: 0.55;
-}
-
 .workplace-hero__greeting {
   margin-bottom: 6px;
   font-size: 20px;
@@ -1226,75 +523,6 @@ const currentUser = {
   color: var(--el-text-color-secondary);
 }
 
-.workplace-hero__login {
-  min-width: 168px;
-  padding: 12px 16px;
-  text-align: right;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--workplace-radius-sm);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
-}
-
-.workplace-hero__login-label {
-  margin-bottom: 4px;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.workplace-hero__login-time {
-  font-size: 17px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--el-text-color-primary);
-}
-
-/* ========== 模块入口 / 收藏：各为独立卡片（同行等高） ========== */
-.workplace-module-row {
-  align-items: stretch;
-}
-
-.workplace-module-row > .el-col {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.workplace-modules-card,
-.workplace-bookmarks-card {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  width: 100%;
-  min-height: 0;
-}
-
-.workplace-modules-card {
-  :deep(.el-card__body) {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-    padding: 16px 18px 18px;
-  }
-}
-
-.workplace-bookmarks-col {
-  @media (width <= 991px) {
-    margin-top: 16px;
-  }
-}
-
-.workplace-bookmarks-card {
-  :deep(.el-card__body) {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-    padding: 12px 16px 16px;
-  }
-}
-
 .workplace-bookmarks-card__header {
   display: flex;
   flex-wrap: wrap;
@@ -1327,251 +555,12 @@ const currentUser = {
   align-items: center;
 }
 
-.workplace-module-bookmarks {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-}
-
 .workplace-module-bookmarks__help {
   flex-shrink: 0;
   color: var(--el-text-color-secondary);
   cursor: help;
 }
 
-.workplace-module-bookmarks__empty {
-  padding: 12px 0;
-}
-
-.workplace-module-grid {
-  display: grid;
-  flex: 1;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-  align-content: start;
-  min-height: 0;
-}
-
-@media (width >= 1400px) {
-  .workplace-modules-card .workplace-module-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (width <= 520px) {
-  .workplace-modules-card .workplace-module-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.workplace-section-card {
-  :deep(.el-card__body) {
-    padding: 12px 18px 18px;
-  }
-}
-
-.workplace-section-card__head {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: flex-start;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.workplace-section-card__actions {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  gap: 4px;
-  align-items: center;
-}
-
-.workplace-ops-row {
-  row-gap: 16px;
-  align-items: stretch;
-  width: 100%;
-}
-
-.workplace-ops-col {
-  display: flex;
-  min-width: 0;
-}
-
-.workplace-ops-card {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 0;
-
-  :deep(.el-card__body) {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-  }
-}
-
-.workplace-ops-card__body {
-  flex: 1;
-  min-height: 0;
-}
-
-.workplace-module-card {
-  position: relative;
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  min-height: 108px;
-  padding: 14px 36px 14px 14px;
-  cursor: pointer;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--workplace-radius-sm);
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s,
-    background 0.2s,
-    transform 0.15s ease;
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
-  }
-
-  &:not(.is-disabled):hover {
-    background: var(--el-bg-color);
-    border-color: var(--el-color-primary-light-5);
-    box-shadow: 0 6px 20px rgb(0 0 0 / 6%);
-    transform: translateY(-1px);
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.72;
-  }
-}
-
-.workplace-module-card__icon {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border-radius: 12px;
-}
-
-.workplace-module-card.is-disabled .workplace-module-card__icon {
-  color: var(--el-text-color-disabled);
-  background: var(--el-fill-color-light);
-}
-
-.workplace-module-card__body {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-}
-
-.workplace-module-card__name {
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--el-text-color-primary);
-}
-
-.workplace-module-card__desc {
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--el-text-color-secondary);
-}
-
-.workplace-module-card__hint {
-  font-size: 11px;
-  line-height: 1.35;
-  color: var(--el-color-primary);
-}
-
-.workplace-module-card__hint--muted {
-  color: var(--el-text-color-placeholder);
-}
-
-.workplace-module-card__arrow {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  color: var(--el-text-color-placeholder);
-  transform: translateY(-50%);
-}
-
-.workplace-module-card:not(.is-disabled):hover .workplace-module-card__arrow {
-  color: var(--el-color-primary);
-}
-
-/* ========== 顶栏问候 ========== */
-.workplace-hero {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.workplace-hero__actions {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  gap: 16px 20px;
-  align-items: flex-start;
-  justify-content: flex-end;
-}
-
-.workplace-quick-empty__title {
-  margin: 0 0 8px;
-  font-size: 14px;
-  color: var(--el-text-color-regular);
-}
-
-.workplace-quick-empty__hint {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--el-text-color-secondary);
-}
-
-.workplace-quick-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* 3 列 × 最多 5 排固定高度（15 格）；窄屏 2 列时 15 个占 8 排 */
-.workplace-quick-list--hub {
-  --hub-row-h: 38px;
-  --hub-gap: 8px;
-
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  grid-auto-rows: var(--hub-row-h);
-  gap: var(--hub-gap);
-  align-content: start;
-
-  /* 正好 5 排所占高度：5 行 + 4 道行间距 */
-  min-height: calc(5 * var(--hub-row-h) + 4 * var(--hub-gap));
-}
-
-@media (width <= 520px) {
-  .workplace-quick-list--hub {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    min-height: calc(8 * var(--hub-row-h) + 7 * var(--hub-gap));
-  }
-}
-
 .workplace-quick-row--compact {
   min-height: 44px;
   padding: 6px 8px 6px 4px;
@@ -1685,80 +674,25 @@ const currentUser = {
   }
 }
 
-.workplace-quick-row--chip {
-  min-width: 0;
-
-  .workplace-quick-row__icon {
-    width: 34px;
-    height: 34px;
-    font-size: 18px;
-  }
-
-  .workplace-quick-row__accent {
-    min-height: 30px;
-  }
-}
-
-/* 与 --hub-row-h 对齐，保证每排高度一致 */
-.workplace-quick-list--hub .workplace-quick-row--compact {
-  box-sizing: border-box;
-  gap: 4px;
-  height: 100%;
-  min-height: 0;
-  padding: 4px 4px 4px 2px;
-}
-
-.workplace-quick-list--hub .workplace-quick-row--chip .workplace-quick-row__icon {
-  width: 26px;
-  height: 26px;
+.workplace-quick-empty__title {
+  margin: 0 0 8px;
   font-size: 14px;
+  color: var(--el-text-color-regular);
 }
 
-.workplace-quick-list--hub .workplace-quick-row--chip .workplace-quick-row__accent {
-  min-height: 24px;
-}
-
-.workplace-quick-list--hub .workplace-quick-row__title {
-  font-size: 12px;
-}
-
-/* 首页横幅组件演示区 */
-.workplace-banners-showcase {
-  padding: 16px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--el-border-radius-base);
-}
-
-.workplace-banners-showcase__title {
-  margin: 20px 0 16px;
-  font-size: 1.25rem;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.workplace-banners-showcase__slot-heading {
+.workplace-quick-empty__hint {
   margin: 0;
-  font-size: 1.6rem;
-  color: #fff !important;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--el-text-color-secondary);
 }
 
-.workplace-banners-showcase__slot-sub {
-  margin-top: 12px;
-}
-
-.workplace-banners-showcase__slot-sub-p {
-  position: relative;
-  z-index: 10;
-  margin: 0;
-  font-style: italic;
-}
-
-.workplace-banners-showcase__slot-btn-wrap {
-  margin-top: 12px;
+.workplace-section-card__head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/dashboard/home/modules/annual-sales.vue b/frontend/web/src/views/dashboard/home/modules/annual-sales.vue
index aa5e222e..bbeac2cc 100644
--- a/frontend/web/src/views/dashboard/home/modules/annual-sales.vue
+++ b/frontend/web/src/views/dashboard/home/modules/annual-sales.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 h-[28.2rem] mb-5 max-sm:mb-4">
+  <div class="fa-card p-5 h-[28.2rem]">
     <div class="fa-card-header">
       <div class="title">
         <h4>年度销售额</h4>
diff --git a/frontend/web/src/views/dashboard/home/modules/banner.vue b/frontend/web/src/views/dashboard/home/modules/banner.vue
index cb1ac582..0831bc78 100644
--- a/frontend/web/src/views/dashboard/home/modules/banner.vue
+++ b/frontend/web/src/views/dashboard/home/modules/banner.vue
@@ -1,6 +1,6 @@
 <template>
   <FaBasicBanner
-    class="justify-center !h-53 mb-5 max-sm:!pt-8 max-sm:!h-48 max-sm:mb-4"
+    class="justify-center !h-53 max-sm:!pt-8 max-sm:!h-48"
     :title="`欢迎回来 ${userInfo?.username}`"
     boxStyle="!bg-theme/10"
     titleColor="var(--fa-gray-900)"
diff --git a/frontend/web/src/views/dashboard/home/modules/cart-conversion-rate.vue b/frontend/web/src/views/dashboard/home/modules/cart-conversion-rate.vue
index 632dfb39..03cb28fe 100644
--- a/frontend/web/src/views/dashboard/home/modules/cart-conversion-rate.vue
+++ b/frontend/web/src/views/dashboard/home/modules/cart-conversion-rate.vue
@@ -1,6 +1,6 @@
 <template>
   <FaLineChartCard
-    class="mb-5 max-sm:mb-4"
+    class=""
     :value="2545"
     label="购物车转化率"
     :percentage="1.2"
diff --git a/frontend/web/src/views/dashboard/home/modules/hot-commodity.vue b/frontend/web/src/views/dashboard/home/modules/hot-commodity.vue
index eaf36081..fad80aa9 100644
--- a/frontend/web/src/views/dashboard/home/modules/hot-commodity.vue
+++ b/frontend/web/src/views/dashboard/home/modules/hot-commodity.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 h-[28.2rem] mb-5 max-sm:mb-4">
+  <div class="fa-card p-5 h-[28.2rem]">
     <div class="fa-card-header">
       <div class="title">
         <h4>热销商品</h4>
diff --git a/frontend/web/src/views/dashboard/home/modules/hot-products-list.vue b/frontend/web/src/views/dashboard/home/modules/hot-products-list.vue
index a3865e65..800d950c 100644
--- a/frontend/web/src/views/dashboard/home/modules/hot-products-list.vue
+++ b/frontend/web/src/views/dashboard/home/modules/hot-products-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 h-[27.8rem] mb-5 overflow-hidden max-sm:mb-4">
+  <div class="fa-card p-5 h-[28.2rem] overflow-hidden">
     <div class="fa-card-header">
       <div class="title">
         <h4>热销产品</h4>
@@ -7,10 +7,10 @@
       </div>
     </div>
 
-    <ElScrollbar style="height: 21.55rem" class="w-full">
+    <ElScrollbar :style="{ height: '21.55rem' }" class="w-full">
       <FaTable
         :data="tableData"
-        style="margin-top: 0 !important"
+        :style="'margin-top: 0 !important'"
         :border="false"
         :stripe="false"
         :header-cell-style="{ background: 'transparent' }"
@@ -20,7 +20,11 @@
           <ElTableColumn label="产品" prop="product" width="220px">
             <template #default="scope">
               <div class="flex-c">
-                <img class="size-12.5 object-cover rounded-md" :src="scope.row.image" />
+                <img
+                  class="size-12.5 object-cover rounded-md"
+                  :src="scope.row.image"
+                  loading="eager"
+                />
                 <div class="flex flex-col ml-3">
                   <div class="font-medium">{{ scope.row.name }}</div>
                   <div class="text-xs text-slate-500">{{ scope.row.category }}</div>
diff --git a/frontend/web/src/views/dashboard/home/modules/product-sales.vue b/frontend/web/src/views/dashboard/home/modules/product-sales.vue
index 80985c1d..f4b27fe2 100644
--- a/frontend/web/src/views/dashboard/home/modules/product-sales.vue
+++ b/frontend/web/src/views/dashboard/home/modules/product-sales.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 pt-3.5 mb-5 h-46 max-sm:mb-4">
+  <div class="fa-card p-5 pt-3.5 h-46">
     <div class="fa-card-header">
       <div class="title">
         <h4 class="text-2xl">
diff --git a/frontend/web/src/views/dashboard/home/modules/recent-transaction.vue b/frontend/web/src/views/dashboard/home/modules/recent-transaction.vue
index f31109be..4a02c1fa 100644
--- a/frontend/web/src/views/dashboard/home/modules/recent-transaction.vue
+++ b/frontend/web/src/views/dashboard/home/modules/recent-transaction.vue
@@ -3,7 +3,7 @@
     :list="timelineData"
     title="最近交易"
     subtitle="今日订单动态"
-    class="h-[27.8rem] mb-5 max-sm:mb-4"
+    class="h-[28.2rem]"
   />
 </template>
 
diff --git a/frontend/web/src/views/dashboard/home/modules/sales-classification.vue b/frontend/web/src/views/dashboard/home/modules/sales-classification.vue
index d26ca977..bab34eca 100644
--- a/frontend/web/src/views/dashboard/home/modules/sales-classification.vue
+++ b/frontend/web/src/views/dashboard/home/modules/sales-classification.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 mb-5 h-105 max-sm:mb-4">
+  <div class="fa-card p-5 h-105">
     <div class="fa-card-header">
       <div class="title">
         <h4>销售分类</h4>
diff --git a/frontend/web/src/views/dashboard/home/modules/sales-growth.vue b/frontend/web/src/views/dashboard/home/modules/sales-growth.vue
index 1fb56e01..9d7e8b2b 100644
--- a/frontend/web/src/views/dashboard/home/modules/sales-growth.vue
+++ b/frontend/web/src/views/dashboard/home/modules/sales-growth.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 pt-3.5 mb-5 h-46 max-sm:mb-4">
+  <div class="fa-card p-5 pt-3.5 h-46">
     <div class="fa-card-header">
       <div class="title">
         <h4 class="text-2xl">
diff --git a/frontend/web/src/views/dashboard/home/modules/sales-trend.vue b/frontend/web/src/views/dashboard/home/modules/sales-trend.vue
index 750128e0..e32509bd 100644
--- a/frontend/web/src/views/dashboard/home/modules/sales-trend.vue
+++ b/frontend/web/src/views/dashboard/home/modules/sales-trend.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 mb-5 h-105 max-sm:mb-4">
+  <div class="fa-card p-5 h-105">
     <div class="fa-card-header">
       <div class="title">
         <h4>销售趋势</h4>
diff --git a/frontend/web/src/views/dashboard/home/modules/total-order-volume.vue b/frontend/web/src/views/dashboard/home/modules/total-order-volume.vue
index e2c192bb..7cba7ea2 100644
--- a/frontend/web/src/views/dashboard/home/modules/total-order-volume.vue
+++ b/frontend/web/src/views/dashboard/home/modules/total-order-volume.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card h-53 p-5 pt-3.5 mb-5 max-sm:mb-4">
+  <div class="fa-card h-53 p-5 pt-3.5">
     <div class="fa-card-header">
       <div class="title">
         <h4 class="text-2xl font-medium">205,216</h4>
diff --git a/frontend/web/src/views/dashboard/home/modules/total-products.vue b/frontend/web/src/views/dashboard/home/modules/total-products.vue
index 6e52798e..57b40263 100644
--- a/frontend/web/src/views/dashboard/home/modules/total-products.vue
+++ b/frontend/web/src/views/dashboard/home/modules/total-products.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card h-53 p-5 pt-3.5 mb-5 max-sm:mb-4">
+  <div class="fa-card h-53 p-5 pt-3.5">
     <div class="fa-card-header">
       <div class="title">
         <h4 class="text-2xl font-medium">55,231</h4>
diff --git a/frontend/web/src/views/dashboard/home/modules/transaction-list.vue b/frontend/web/src/views/dashboard/home/modules/transaction-list.vue
index e46a6fe5..55f5ac38 100644
--- a/frontend/web/src/views/dashboard/home/modules/transaction-list.vue
+++ b/frontend/web/src/views/dashboard/home/modules/transaction-list.vue
@@ -1,13 +1,23 @@
 <template>
-  <FaDataListCard
-    class="mb-5 max-sm:mb-4"
-    :maxCount="4"
-    :list="dataList"
-    title="最近活动"
-    subtitle="订单处理状态"
-    :showMoreButton="true"
-    @more="handleMore"
-  />
+  <div class="fa-card p-5 h-full flex flex-col">
+    <div class="pb-3.5">
+      <p class="text-lg font-medium">最近活动</p>
+      <p class="text-sm text-g-600">订单处理状态</p>
+    </div>
+    <ElScrollbar :style="{ height: '264px' }">
+      <div v-for="(item, index) in dataList" :key="index" class="flex-c py-3">
+        <div v-if="item.icon" class="flex-cc mr-3 size-10 rounded-lg" :class="item.class">
+          <FaSvgIcon :icon="item.icon" class="text-xl" />
+        </div>
+        <div class="flex-1">
+          <div class="mb-1 text-sm">{{ item.title }}</div>
+          <div class="text-xs text-g-500">{{ item.status }}</div>
+        </div>
+        <div class="ml-3 text-xs text-g-500">{{ item.time }}</div>
+      </div>
+    </ElScrollbar>
+    <ElButton class="mt-[17px] w-full text-center" v-ripple @click="handleMore">查看更多</ElButton>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/web/src/views/dashboard/workplace/index.vue b/frontend/web/src/views/dashboard/workplace/index.vue
index 793263e2..5016fe33 100755
--- a/frontend/web/src/views/dashboard/workplace/index.vue
+++ b/frontend/web/src/views/dashboard/workplace/index.vue
@@ -1,511 +1,109 @@
-<!-- 工作台页面 -->
 <template>
-  <div>
-    <CardList></CardList>
+  <div class="workplace-container">
+    <!-- 电商模块 -->
+    <div class="card-group">
+      <ElRow :gutter="20">
+        <ElCol :sm="24" :md="24" :lg="16"><Banner /></ElCol>
+        <ElCol :sm="12" :md="12" :lg="4"><TotalOrderVolume /></ElCol>
+        <ElCol :sm="12" :md="12" :lg="4"><TotalProducts /></ElCol>
+      </ElRow>
+      <ElRow :gutter="20">
+        <ElCol :sm="12" :md="12" :lg="8"><SalesTrend /></ElCol>
+        <ElCol :sm="12" :md="12" :lg="8"><SalesClassification /></ElCol>
+        <ElCol :sm="24" :md="24" :lg="8">
+          <ElRow :gutter="20" class="card-row">
+            <ElCol :sm="24" :md="12" :lg="12"><ProductSales /></ElCol>
+            <ElCol :sm="24" :md="12" :lg="12"><SalesGrowth /></ElCol>
+            <ElCol :span="24"><CartConversionRate /></ElCol>
+          </ElRow>
+        </ElCol>
+      </ElRow>
+    </div>
 
-    <ElRow :gutter="20">
-      <ElCol :sm="24" :md="12" :lg="10">
-        <ActiveUser />
-      </ElCol>
-      <ElCol :sm="24" :md="12" :lg="14">
-        <SalesOverview />
-      </ElCol>
-    </ElRow>
-
-    <ElRow :gutter="20">
-      <ElCol :sm="24" :md="24" :lg="12">
-        <NewUser />
-      </ElCol>
-      <ElCol :sm="24" :md="12" :lg="6">
-        <Dynamic />
-      </ElCol>
-      <ElCol :sm="24" :md="12" :lg="6">
-        <TodoList />
-      </ElCol>
-    </ElRow>
-
-    <AboutProject />
-
-    <!-- —— 卡片组件演示 —— -->
-    <div class="console-cards-showcase border-g-200">
-      <div class="py-5">
-        <h2 class="page-title">统计卡片（文字）</h2>
-        <ElRow :gutter="20">
-          <ElCol
-            v-for="card in statsCards"
-            :key="`t-${card.id}`"
-            :xs="24"
-            :sm="12"
-            :md="6"
-            class="mb-5"
-          >
-            <FaStatsCard
-              :icon="card.icon"
-              :iconStyle="card.iconStyle"
-              :title="card.title"
-              :description="card.description"
-              :showArrow="card.showArrow"
-            />
-          </ElCol>
-        </ElRow>
-
-        <h2 class="page-title">统计卡片（数字滚动）</h2>
-        <ElRow :gutter="20">
-          <ElCol
-            v-for="card in statsCards"
-            :key="`n-${card.id}`"
-            :xs="24"
-            :sm="12"
-            :md="6"
-            class="mb-5"
-          >
-            <FaStatsCard
-              :icon="card.icon"
-              :iconStyle="card.iconStyle"
-              :count="card.count"
-              :description="card.description"
-              :decimals="0"
-              :showArrow="card.showArrow"
-              separator=","
-            />
-          </ElCol>
-        </ElRow>
-
-        <h2 class="page-title">统计卡片（自定义样式）</h2>
-        <ElRow :gutter="20">
-          <ElCol
-            v-for="card in statsCards"
-            :key="`c-${card.id}`"
-            :xs="24"
-            :sm="12"
-            :md="6"
-            class="mb-5"
-          >
-            <FaStatsCard
-              :icon="card.icon"
-              :iconStyle="card.customIconStyle"
-              :boxStyle="card.boxStyle"
-              :title="card.title"
-              :description="card.description"
-              :textColor="card.textColor"
-              :showArrow="card.showArrow"
-            />
-          </ElCol>
-        </ElRow>
-
-        <h2 class="page-title">进度卡片</h2>
-        <ElRow :gutter="20">
-          <ElCol
-            v-for="card in progressCards"
-            :key="`p-${card.id}`"
-            :xs="24"
-            :sm="12"
-            :md="6"
-            class="mb-5"
-          >
-            <FaProgressCard :percentage="card.percentage" :title="card.title" :color="card.color" />
-          </ElCol>
-        </ElRow>
-
-        <h2 class="page-title">进度卡片（icon）</h2>
-        <ElRow :gutter="20">
-          <ElCol
-            v-for="card in progressCards"
-            :key="`pi-${card.id}`"
-            :xs="24"
-            :sm="12"
-            :md="6"
-            class="mb-5"
-          >
-            <FaProgressCard
-              :percentage="card.percentage"
-              :title="card.title"
-              :color="card.color"
-              :icon="card.icon"
-              :iconStyle="card.iconStyle"
-            />
-          </ElCol>
-        </ElRow>
-
-        <h2 class="page-title">图表卡片（小图表）</h2>
-        <ElRow :gutter="20">
-          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <FaLineChartCard
-              :isMiniChart="true"
-              :value="2545"
-              label="新用户"
-              date="过去7天"
-              :percentage="1.2"
-              :height="9.5"
-              :chartData="[120, 132, 101, 134, 90, 230, 210]"
-            />
-          </ElCol>
-          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <FaBarChartCard
-              :isMiniChart="true"
-              :value="15480"
-              label="浏览量"
-              date="过去 14 天"
-              :percentage="-4.15"
-              :height="9.5"
-              :barWidth="'45%'"
-              :chartData="[120, 100, 150, 140, 90, 120, 130]"
-            />
-          </ElCol>
-          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <FaLineChartCard
-              :isMiniChart="true"
-              :value="2545"
-              label="粉丝数"
-              date="过去 30 天"
-              :percentage="1.2"
-              :height="9.5"
-              :showAreaColor="true"
-              :chartData="[150, 180, 160, 200, 180, 220, 240]"
-            />
-          </ElCol>
-          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <FaDonutChartCard
-              :value="36358"
-              title="粉丝量"
-              :percentage="18"
-              percentageLabel="较去年"
-              :data="[50, 40]"
-              :height="9.5"
-              currentValue="2022"
-              previousValue="2021"
-              :radius="['50%', '70%']"
-            />
-          </ElCol>
-        </ElRow>
-
-        <h2 class="page-title">图表卡片（大图表）</h2>
-        <ElRow :gutter="20">
-          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <FaLineChartCard
-              :value="2545"
-              label="新用户"
-              :percentage="1.2"
-              :height="11"
-              :chartData="[120, 132, 101, 134, 90, 230, 210]"
-            />
-          </ElCol>
-          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <FaBarChartCard
-              :value="15480"
-              label="浏览量"
-              :percentage="-4.15"
-              :height="11"
-              :chartData="[120, 100, 150, 140, 90, 120, 130, 110]"
-            />
-          </ElCol>
-          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <FaLineChartCard
-              :value="2545"
-              label="粉丝数"
-              :percentage="1.2"
-              :height="11"
-              :showAreaColor="true"
-              :chartData="[150, 180, 160, 200, 180, 220, 240]"
-            />
-          </ElCol>
-          <ElCol :xs="24" :sm="12" :md="6" class="mb-5">
-            <FaDonutChartCard
-              :value="36358"
-              title="粉丝量"
-              :percentage="-18"
-              percentageLabel="较2021年"
-              :data="[70, 30]"
-              :height="11"
-              currentValue="12月"
-              previousValue="11月"
-            />
-          </ElCol>
-        </ElRow>
-
-        <h2 class="page-title">数据列表卡片</h2>
-        <ElRow :gutter="20">
-          <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
-            <FaDataListCard :list="dataList" title="待办事项" subtitle="今日待处理任务" />
-          </ElCol>
-          <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
-            <FaDataListCard
-              :maxCount="4"
-              :list="dataList"
-              title="最近活动"
-              subtitle="近期活动列表"
-              :showMoreButton="true"
-              @more="handleMore"
-            />
-          </ElCol>
-          <ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
-            <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">
-            <FaImageCard
-              :imageUrl="card.imageUrl"
-              :title="card.title"
-              :category="card.category"
-              :readTime="card.readTime"
-              :views="card.views"
-              :comments="card.comments"
-              :date="card.date"
-              @click="handleImageCardClick(card)"
-            />
-          </ElCol>
-        </ElRow>
-      </div>
+    <!-- 用户分析 -->
+    <div class="card-group">
+      <ElRow :gutter="20">
+        <ElCol :sm="24" :md="12" :lg="10"><ActiveUser /></ElCol>
+        <ElCol :sm="24" :md="12" :lg="14"><SalesOverview /></ElCol>
+      </ElRow>
+      <ElRow :gutter="20">
+        <ElCol :sm="24" :md="24" :lg="12"><NewUser /></ElCol>
+        <ElCol :sm="24" :md="12" :lg="6"><Dynamic /></ElCol>
+        <ElCol :sm="24" :md="12" :lg="6"><TodoList /></ElCol>
+      </ElRow>
+      <ElRow :gutter="20">
+        <ElCol :sm="24" :md="12" :lg="8"><HotCommodity /></ElCol>
+        <ElCol :sm="24" :md="12" :lg="8"><AnnualSales /></ElCol>
+        <ElCol :sm="24" :md="24" :lg="8"><TransactionList /></ElCol>
+      </ElRow>
+      <ElRow :gutter="20">
+        <ElCol :md="24" :lg="8"><RecentTransaction /></ElCol>
+        <ElCol :md="24" :lg="16" class="no-margin-bottom"><HotProductsList /></ElCol>
+      </ElRow>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ElMessage } from "element-plus";
-import cover1 from "@imgs/cover/img1.webp";
-import cover2 from "@imgs/cover/img2.webp";
-import cover3 from "@imgs/cover/img3.webp";
-import cover4 from "@imgs/cover/img4.webp";
-import CardList from "./modules/card-list.vue";
 import ActiveUser from "./modules/active-user.vue";
 import SalesOverview from "./modules/sales-overview.vue";
 import NewUser from "./modules/new-user.vue";
 import Dynamic from "./modules/dynamic-stats.vue";
 import TodoList from "./modules/todo-list.vue";
-import AboutProject from "./modules/about-project.vue";
+
+import Banner from "../home/modules/banner.vue";
+import TotalOrderVolume from "../home/modules/total-order-volume.vue";
+import TotalProducts from "../home/modules/total-products.vue";
+import SalesTrend from "../home/modules/sales-trend.vue";
+import SalesClassification from "../home/modules/sales-classification.vue";
+import TransactionList from "../home/modules/transaction-list.vue";
+import HotCommodity from "../home/modules/hot-commodity.vue";
+import RecentTransaction from "../home/modules/recent-transaction.vue";
+import AnnualSales from "../home/modules/annual-sales.vue";
+import ProductSales from "../home/modules/product-sales.vue";
+import SalesGrowth from "../home/modules/sales-growth.vue";
+import CartConversionRate from "../home/modules/cart-conversion-rate.vue";
+import HotProductsList from "../home/modules/hot-products-list.vue";
 
 defineOptions({ name: "Console" });
-
-const statsCards = [
-  {
-    id: 1,
-    title: "销售产品",
-    count: 1235,
-    description: "鞋子、牛仔裤、派对服装、手表",
-    icon: "ri:bar-chart-box-line",
-    boxStyle: "!bg-theme/10",
-    customIconStyle: "!text-theme !text-3xl",
-    iconStyle: "bg-info",
-    textColor: "var(--theme-color)",
-    showArrow: false,
-  },
-  {
-    id: 2,
-    title: "活跃用户",
-    count: 5000,
-    description: "日活跃用户超过5,000+",
-    icon: "ri:account-box-2-line",
-    boxStyle: "!bg-warning/10",
-    customIconStyle: "!text-warning !text-3xl",
-    iconStyle: "bg-warning",
-    textColor: "var(--fa-warning)",
-    showArrow: false,
-  },
-  {
-    id: 3,
-    title: "总收入",
-    count: 35000,
-    description: "月收入超过¥350,000+",
-    icon: "ri:money-cny-box-line",
-    boxStyle: "!bg-secondary/10",
-    customIconStyle: "!text-secondary !text-3xl",
-    iconStyle: "bg-secondary",
-    textColor: "var(--fa-secondary)",
-    showArrow: false,
-  },
-  {
-    id: 4,
-    title: "客户评价",
-    count: 4800,
-    description: "平均评分4.8/5",
-    icon: "ri:message-3-line",
-    boxStyle: "!bg-error/10",
-    customIconStyle: "!text-error !text-3xl",
-    iconStyle: "bg-error",
-    textColor: "var(--fa-error)",
-    showArrow: false,
-  },
-];
-
-const progressCards = [
-  {
-    id: 1,
-    title: "完成进度",
-    percentage: 75,
-    color: "var(--fa-success)",
-    icon: "ri:arrow-up-circle-line",
-    iconStyle: "bg-success/12 text-success",
-  },
-  {
-    id: 2,
-    title: "项目进度",
-    percentage: 65,
-    color: "var(--theme-color)",
-    icon: "ri:twitch-line",
-    iconStyle: "bg-theme/12 text-theme",
-  },
-  {
-    id: 3,
-    title: "学习进度",
-    percentage: 45,
-    color: "var(--fa-error)",
-    icon: "ri:game-line",
-    iconStyle: "!bg-error/12 text-error",
-  },
-  {
-    id: 4,
-    title: "任务进度",
-    percentage: 90,
-    color: "var(--fa-secondary)",
-    icon: "ri:flag-2-line",
-    iconStyle: "bg-secondary/12 text-secondary",
-  },
-];
-
-const imageCards = [
-  {
-    id: 1,
-    imageUrl: cover1,
-    title: "AI技术在医疗领域的创新应用与发展前景",
-    category: "社交",
-    readTime: "2分钟",
-    views: 9125,
-    comments: 3,
-    date: "12月19日 周一",
-  },
-  {
-    id: 2,
-    imageUrl: cover2,
-    title: "大数据分析助力企业决策的实践案例",
-    category: "技术",
-    readTime: "3分钟",
-    views: 7234,
-    comments: 5,
-    date: "12月20日 周二",
-  },
-  {
-    id: 3,
-    imageUrl: cover3,
-    title: "区块链技术在供应链管理中的应用",
-    category: "科技",
-    readTime: "4分钟",
-    views: 5678,
-    comments: 8,
-    date: "12月21日 周三",
-  },
-  {
-    id: 4,
-    imageUrl: cover4,
-    title: "云计算技术发展趋势与未来展望",
-    category: "云技术",
-    readTime: "5分钟",
-    views: 4321,
-    comments: 6,
-    date: "12月22日 周四",
-  },
-];
-
-const dataList = [
-  {
-    title: "新加坡之行",
-    status: "进行中",
-    time: "5分钟",
-    class: "bg-theme/12 text-theme",
-    icon: "ri:camera-4-line",
-  },
-  {
-    title: "归档数据",
-    status: "进行中",
-    time: "10分钟",
-    class: "bg-secondary/12 text-secondary",
-    icon: "ri:bar-chart-box-line",
-  },
-  {
-    title: "客户会议",
-    status: "待处理",
-    time: "15分钟",
-    class: "bg-warning/12 text-warning",
-    icon: "ri:user-3-line",
-  },
-  {
-    title: "筛选任务团队",
-    status: "进行中",
-    time: "20分钟",
-    class: "bg-error/12 text-error",
-    icon: "ri:account-circle-line",
-  },
-  {
-    title: "发送信封给小王",
-    status: "已完成",
-    time: "20分钟",
-    class: "bg-success/12 text-success",
-    icon: "ri:message-3-line",
-  },
-];
-
-const timelineData = [
-  {
-    time: "上午 09:30",
-    status: "rgb(73, 190, 255)",
-    content: "收到 John Doe 支付的 385.90 美元",
-  },
-  {
-    time: "上午 10:00",
-    status: "rgb(54, 158, 255)",
-    content: "新销售记录",
-    code: "ML-3467",
-  },
-  {
-    time: "上午 12:00",
-    status: "rgb(103, 232, 207)",
-    content: "向 Michael 支付了 64.95 美元",
-  },
-  {
-    time: "下午 14:30",
-    status: "rgb(255, 193, 7)",
-    content: "系统维护通知",
-    code: "MT-2023",
-  },
-  {
-    time: "下午 15:45",
-    status: "rgb(255, 105, 105)",
-    content: "紧急订单取消提醒",
-    code: "OR-9876",
-  },
-  {
-    time: "下午 17:00",
-    status: "rgb(103, 232, 207)",
-    content: "完成每日销售报表",
-  },
-];
-
-function handleMore() {
-  ElMessage.info("查看更多");
-}
-
-interface ImageCard {
-  id: number;
-  imageUrl: string;
-  title: string;
-  category: string;
-  readTime: string;
-  views: number;
-  comments: number;
-  date: string;
-}
-
-function handleImageCardClick(card: ImageCard) {
-  console.log("点击卡片:", card);
-}
 </script>
 
 <style scoped>
 @reference "@styles/core/tailwind.css";
 
-.page-title {
-  @apply my-5 text-xl font-medium first:mt-0;
+:deep(.el-card) {
+  --el-card-border-radius: calc(var(--custom-radius) + 2px);
+
+  border: 1px solid var(--fa-card-border);
+}
+
+.workplace-container {
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin-bottom: 16px;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  &::after {
+    display: block;
+    flex-shrink: 0;
+    height: 16px;
+    content: "";
+  }
+}
+
+.card-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card-row {
+  row-gap: 16px;
 }
 </style>
diff --git a/frontend/web/src/views/dashboard/workplace/modules/about-project.vue b/frontend/web/src/views/dashboard/workplace/modules/about-project.vue
index 3f349963..9fe779f0 100644
--- a/frontend/web/src/views/dashboard/workplace/modules/about-project.vue
+++ b/frontend/web/src/views/dashboard/workplace/modules/about-project.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 flex-b mb-5 max-sm:mb-4">
+  <div class="fa-card p-5 flex-b">
     <div>
       <h2 class="text-2xl font-medium">关于项目</h2>
       <p class="text-g-700 mt-1">{{ systemName }} 是一款兼具设计美学与高效开发的后台系统</p>
@@ -17,7 +17,7 @@
         </div>
       </div>
     </div>
-    <img class="w-75 max-md:!hidden" src="@imgs/draw/draw1.png" alt="draw1" />
+    <img class="w-75 max-md:hidden!" src="@imgs/draw/draw1.png" alt="draw1" loading="eager" />
   </div>
 </template>
 
diff --git a/frontend/web/src/views/dashboard/workplace/modules/active-user.vue b/frontend/web/src/views/dashboard/workplace/modules/active-user.vue
index c8a39fbf..3e194c0b 100755
--- a/frontend/web/src/views/dashboard/workplace/modules/active-user.vue
+++ b/frontend/web/src/views/dashboard/workplace/modules/active-user.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card h-105 p-4 box-border mb-5 max-sm:mb-4">
+  <div class="fa-card h-105 p-4 box-border">
     <FaBarChart
       class="box-border p-2"
       barWidth="50%"
diff --git a/frontend/web/src/views/dashboard/workplace/modules/card-list.vue b/frontend/web/src/views/dashboard/workplace/modules/card-list.vue
index 6172340e..abc57333 100755
--- a/frontend/web/src/views/dashboard/workplace/modules/card-list.vue
+++ b/frontend/web/src/views/dashboard/workplace/modules/card-list.vue
@@ -1,22 +1,59 @@
 <template>
-  <ElRow :gutter="20" class="flex">
-    <ElCol v-for="(item, index) in dataList" :key="index" :sm="12" :md="6" :lg="6">
-      <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>
-        <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
-            class="ml-1 text-xs font-semibold"
-            :class="[item.change.indexOf('+') === -1 ? 'text-danger' : 'text-success']"
-          >
-            {{ item.change }}
-          </span>
+  <ElRow :gutter="16" class="flex card-row">
+    <ElCol v-for="(item, index) in dataList" :key="index" :sm="12" :md="8" :lg="8">
+      <div class="fa-card relative flex flex-col justify-center h-30 px-5">
+        <!-- 顶部标题行 -->
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-g-600">{{ item.des }}</span>
+          <ElTag v-if="item.tag" :type="item.tagType || 'danger'" size="small">
+            {{ item.tag }}
+          </ElTag>
         </div>
-        <div
-          class="absolute top-0 bottom-0 right-5 m-auto size-12.5 rounded-xl flex-cc bg-theme/10"
-        >
-          <FaSvgIcon :icon="item.icon" class="text-xl text-theme" />
+
+        <!-- 数字 + 侧边图标 -->
+        <div class="flex items-center justify-between mt-2">
+          <div class="flex items-center gap-2">
+            <!-- 丰富卡片用 useTransition 模拟动画 -->
+            <span v-if="item.animatedCount" class="text-lg font-medium">
+              {{ item.animatedCount }}
+            </span>
+            <!-- 简单卡片用 FaCountTo -->
+            <FaCountTo v-else class="text-lg font-medium" :target="item.num" :duration="1300" />
+            <span v-if="item.status" class="text-xs" :class="item.statusColor || 'text-success'">
+              <ElIcon v-if="item.statusIcon"><component :is="item.statusIcon" /></ElIcon>
+              {{ item.status }}
+            </span>
+          </div>
+          <div
+            v-if="item.icon"
+            class="size-10 rounded-xl flex-cc"
+            :class="item.iconBg || 'bg-theme/10'"
+          >
+            <FaSvgIcon
+              :icon="item.icon"
+              class="text-xl"
+              :class="[
+                item.iconColor || 'text-theme',
+                item.animateIcon ? 'animate-[pulse_2s_infinite]' : '',
+              ]"
+            />
+          </div>
+        </div>
+
+        <!-- 底部行：变化率 + 更新时间 -->
+        <div class="flex items-center justify-between mt-1 text-xs text-g-600">
+          <span>
+            <template v-if="item.change !== undefined">
+              较上周
+              <span :class="item.change.indexOf('+') === 0 ? 'text-success' : 'text-danger'">
+                {{ item.change }}
+              </span>
+            </template>
+            <template v-else-if="item.totalLabel">
+              {{ item.totalLabel }}：{{ item.totalValue }}
+            </template>
+          </span>
+          <span v-if="item.updateTime">{{ item.updateTime }}</span>
         </div>
       </div>
     </ElCol>
@@ -24,51 +61,132 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, markRaw, type Component } from "vue";
+import { useTransition } from "@vueuse/core";
+import { Connection } from "@element-plus/icons-vue";
+import { computed } from "vue";
+
 interface CardDataItem {
   des: string;
   icon: string;
-  startVal: number;
-  duration: number;
+  iconBg?: string;
+  iconColor?: string;
+  animateIcon?: boolean;
   num: number;
-  change: string;
+  change?: string;
+  rich?: boolean;
+  tag?: string;
+  tagType?: "danger" | "success" | "warning" | "info";
+  status?: string;
+  statusColor?: string;
+  statusIcon?: Component;
+  totalLabel?: string;
+  totalValue?: number | string;
+  updateTime?: string;
+  // 动画计数
+  animatedCount?: number;
 }
 
-/**
- * 卡片统计数据列表
- * 展示总访问次数、在线访客数、点击量和新用户等核心数据指标
- */
-const dataList = reactive<CardDataItem[]>([
+// 模拟访客数据（原来首页统计卡片的数据）
+const visitStats = ref({
+  todayUvCount: Math.floor(Math.random() * 200) + 50,
+  uvGrowthRate: parseFloat((Math.random() * 20 - 10).toFixed(2)),
+  totalUvCount: Math.floor(Math.random() * 5000) + 1000,
+  todayPvCount: Math.floor(Math.random() * 500) + 100,
+  pvGrowthRate: parseFloat((Math.random() * 20 - 10).toFixed(2)),
+  totalPvCount: Math.floor(Math.random() * 20000) + 5000,
+});
+
+const transitionUvCount = useTransition(
+  computed(() => visitStats.value.todayUvCount),
+  {
+    duration: 1000,
+    transition: [0.25, 0.1, 0.25, 1.0],
+  }
+);
+const transitionPvCount = useTransition(
+  computed(() => visitStats.value.todayPvCount),
+  {
+    duration: 1000,
+    transition: [0.25, 0.1, 0.25, 1.0],
+  }
+);
+
+const dataList = ref<CardDataItem[]>([
+  {
+    des: "在线用户",
+    icon: "ri:group-line",
+    iconBg: "bg-danger/10",
+    iconColor: "text-danger",
+    animateIcon: true,
+    num: 9999,
+    rich: true,
+    tag: "实时",
+    tagType: "danger",
+    status: "已连接",
+    statusColor: "text-success",
+    statusIcon: markRaw(Connection),
+    updateTime: "2025-07-12 00:00:00",
+  },
+  {
+    des: "访客数(UV)",
+    icon: "ri:bar-chart-grouped-line",
+    iconBg: "bg-success/10",
+    iconColor: "text-success",
+    num: 0,
+    rich: true,
+    animatedCount: 0,
+    totalLabel: "总访客数",
+    totalValue: 0,
+  },
+  {
+    des: "浏览量(PV)",
+    icon: "ri:eye-line",
+    iconBg: "bg-primary/10",
+    iconColor: "text-primary",
+    num: 0,
+    rich: true,
+    animatedCount: 0,
+    totalLabel: "总浏览量",
+    totalValue: 0,
+  },
   {
     des: "总访问次数",
     icon: "ri:pie-chart-line",
-    startVal: 0,
-    duration: 1000,
     num: 9120,
     change: "+20%",
   },
-  {
-    des: "在线访客数",
-    icon: "ri:group-line",
-    startVal: 0,
-    duration: 1000,
-    num: 182,
-    change: "+10%",
-  },
   {
     des: "点击量",
     icon: "ri:fire-line",
-    startVal: 0,
-    duration: 1000,
     num: 9520,
     change: "-12%",
   },
   {
     des: "新用户",
     icon: "ri:progress-2-line",
-    startVal: 0,
-    duration: 1000,
     num: 156,
     change: "+30%",
   },
 ]);
+
+onMounted(() => {
+  // 更新 UV/PV 动态数据
+  dataList.value[1].animatedCount = Math.round(transitionUvCount.value);
+  dataList.value[1].totalValue = visitStats.value.totalUvCount;
+  dataList.value[2].animatedCount = Math.round(transitionPvCount.value);
+  dataList.value[2].totalValue = visitStats.value.totalPvCount;
+
+  // 生成增长率显示
+  const uvRate = visitStats.value.uvGrowthRate;
+  const pvRate = visitStats.value.pvGrowthRate;
+  dataList.value[1].change = uvRate > 0 ? `+${uvRate}%` : `${uvRate}%`;
+  dataList.value[2].change = pvRate > 0 ? `+${pvRate}%` : `${pvRate}%`;
+});
 </script>
+
+<style scoped>
+.card-row {
+  row-gap: 16px;
+}
+</style>
diff --git a/frontend/web/src/views/dashboard/workplace/modules/dynamic-stats.vue b/frontend/web/src/views/dashboard/workplace/modules/dynamic-stats.vue
index b13e91f3..9874f4f8 100755
--- a/frontend/web/src/views/dashboard/workplace/modules/dynamic-stats.vue
+++ b/frontend/web/src/views/dashboard/workplace/modules/dynamic-stats.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card h-128 p-5 mb-5 max-sm:mb-4">
+  <div class="fa-card h-128 p-5">
     <div class="fa-card-header">
       <div class="title">
         <h4>动态</h4>
diff --git a/frontend/web/src/views/dashboard/workplace/modules/new-user.vue b/frontend/web/src/views/dashboard/workplace/modules/new-user.vue
index 4e84e0cb..87192b0b 100755
--- a/frontend/web/src/views/dashboard/workplace/modules/new-user.vue
+++ b/frontend/web/src/views/dashboard/workplace/modules/new-user.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card p-5 h-128 overflow-hidden mb-5 max-sm:mb-4">
+  <div class="fa-card p-5 h-128 overflow-hidden">
     <div class="fa-card-header">
       <div class="title">
         <h4>新用户</h4>
@@ -17,7 +17,6 @@
     <FaTable
       class="w-full"
       :data="tableData"
-      style="width: 100%"
       size="large"
       :border="false"
       :stripe="false"
@@ -27,8 +26,8 @@
         <ElTableColumn type="index" label="序号" width="60" />
         <ElTableColumn label="头像" prop="avatar" width="150px">
           <template #default="scope">
-            <div style="display: flex; align-items: center">
-              <img class="size-9 rounded-lg" :src="scope.row.avatar" alt="avatar" />
+            <div class="flex items-center">
+              <img class="size-9 rounded-lg" :src="scope.row.avatar" alt="avatar" loading="eager" />
               <span class="ml-2">{{ scope.row.username }}</span>
             </div>
           </template>
@@ -36,8 +35,8 @@
         <ElTableColumn label="地区" prop="province" />
         <ElTableColumn label="性别" prop="avatar">
           <template #default="scope">
-            <div style="display: flex; align-items: center">
-              <span style="margin-left: 10px">{{ scope.row.sex === 1 ? "男" : "女" }}</span>
+            <div class="flex items-center">
+              <span class="ml-2">{{ scope.row.sex === 1 ? "男" : "女" }}</span>
             </div>
           </template>
         </ElTableColumn>
diff --git a/frontend/web/src/views/dashboard/workplace/modules/sales-overview.vue b/frontend/web/src/views/dashboard/workplace/modules/sales-overview.vue
index 7acbf4ca..a208497f 100755
--- a/frontend/web/src/views/dashboard/workplace/modules/sales-overview.vue
+++ b/frontend/web/src/views/dashboard/workplace/modules/sales-overview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card h-105 p-5 mb-5 max-sm:mb-4">
+  <div class="fa-card h-105 p-5">
     <div class="fa-card-header">
       <div class="title">
         <h4>访问量</h4>
diff --git a/frontend/web/src/views/dashboard/workplace/modules/todo-list.vue b/frontend/web/src/views/dashboard/workplace/modules/todo-list.vue
index 153fb3a0..c459914e 100755
--- a/frontend/web/src/views/dashboard/workplace/modules/todo-list.vue
+++ b/frontend/web/src/views/dashboard/workplace/modules/todo-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fa-card h-128 p-5 mb-5 max-sm:mb-4">
+  <div class="fa-card h-128 p-5">
     <div class="fa-card-header">
       <div class="title">
         <h4>代办事项</h4>
diff --git a/frontend/web/src/views/fastlink/article/components/ArticlePublishDrawer.vue b/frontend/web/src/views/fastlink/article/components/ArticlePublishDrawer.vue
index cc4db85e..44b66f17 100644
--- a/frontend/web/src/views/fastlink/article/components/ArticlePublishDrawer.vue
+++ b/frontend/web/src/views/fastlink/article/components/ArticlePublishDrawer.vue
@@ -51,10 +51,10 @@
                       v-if="!cover"
                       class="flex-cc flex-col w-65 h-40 border border-dashed border-[#d9d9d9] rounded-md"
                     >
-                      <ElIcon class="!text-xl !text-g-600"><Plus /></ElIcon>
+                      <ElIcon class="text-xl! text-g-600!"><Plus /></ElIcon>
                       <div class="mt-2 text-sm text-g-600">点击上传封面</div>
                     </div>
-                    <img v-else :src="cover" class="block w-65 h-40 object-cover" />
+                    <img v-else :src="cover" class="block w-65 h-40 object-cover" loading="eager" />
                   </ElUpload>
                   <div class="mt-2 text-xs text-g-700">建议尺寸 16:9，jpg/png 格式</div>
                 </div>
diff --git a/frontend/web/src/views/fastlink/article/index.vue b/frontend/web/src/views/fastlink/article/index.vue
index 98a470d9..3cc478ed 100644
--- a/frontend/web/src/views/fastlink/article/index.vue
+++ b/frontend/web/src/views/fastlink/article/index.vue
@@ -21,7 +21,7 @@
         :md="6"
         :sm="10"
         :xs="6"
-        style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: end"
+        :style="'display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: end'"
       >
         <ElButton @click="commentWallOpen = true">
           <FaSvgIcon icon="ri:message-3-line" class="mr-1" />
@@ -77,11 +77,11 @@
       </div>
     </div>
 
-    <div style="margin-top: 16vh" v-if="showEmpty">
+    <div :style="'margin-top: 16vh'" v-if="showEmpty">
       <ElEmpty :description="`未找到相关数据 ${EmojiText[0]}`" />
     </div>
 
-    <div style="display: flex; justify-content: center; margin-top: 20px">
+    <div :style="'display: flex; justify-content: center; margin-top: 20px'">
       <ElPagination
         size="default"
         background
diff --git a/frontend/web/src/views/fastlink/tutorial/index.vue b/frontend/web/src/views/fastlink/tutorial/index.vue
index 801d50cc..e8e301a2 100644
--- a/frontend/web/src/views/fastlink/tutorial/index.vue
+++ b/frontend/web/src/views/fastlink/tutorial/index.vue
@@ -103,279 +103,277 @@
                       </template>
                       <ul>
                         <li>
-                          <ElLink href="#mod-system" type="primary" :underline="false">
+                          <ElLink href="#mod-system" type="primary" underline="never">
                             一、系统管理
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-user" type="primary" :underline="false">
+                            <ElLink href="#page-user" type="primary" underline="never">
                               用户管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-role" type="primary" :underline="false">
+                            <ElLink href="#page-role" type="primary" underline="never">
                               角色管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-menu" type="primary" :underline="false">
+                            <ElLink href="#page-menu" type="primary" underline="never">
                               菜单管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-dept" type="primary" :underline="false">
+                            <ElLink href="#page-dept" type="primary" underline="never">
                               部门管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-position" type="primary" :underline="false">
+                            <ElLink href="#page-position" type="primary" underline="never">
                               岗位管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-dict" type="primary" :underline="false">
+                            <ElLink href="#page-dict" type="primary" underline="never">
                               字典管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-param" type="primary" :underline="false">
+                            <ElLink href="#page-param" type="primary" underline="never">
                               参数配置
                             </ElLink>
                             ·
-                            <ElLink href="#page-notice" type="primary" :underline="false">
+                            <ElLink href="#page-notice" type="primary" underline="never">
                               通知公告
                             </ElLink>
                             ·
-                            <ElLink href="#page-tenant" type="primary" :underline="false">
+                            <ElLink href="#page-tenant" type="primary" underline="never">
                               租户管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-log" type="primary" :underline="false">
+                            <ElLink href="#page-log" type="primary" underline="never">
                               操作日志
                             </ElLink>
                             ·
-                            <ElLink href="#page-login" type="primary" :underline="false">
+                            <ElLink href="#page-login" type="primary" underline="never">
                               登录页
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-monitor" type="primary" :underline="false">
+                          <ElLink href="#mod-monitor" type="primary" underline="never">
                             二、监控管理
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-online" type="primary" :underline="false">
+                            <ElLink href="#page-online" type="primary" underline="never">
                               在线用户
                             </ElLink>
                             ·
-                            <ElLink href="#page-cache" type="primary" :underline="false">
+                            <ElLink href="#page-cache" type="primary" underline="never">
                               缓存管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-resource" type="primary" :underline="false">
+                            <ElLink href="#page-resource" type="primary" underline="never">
                               文件管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-server" type="primary" :underline="false">
+                            <ElLink href="#page-server" type="primary" underline="never">
                               服务监控
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-task" type="primary" :underline="false">
+                          <ElLink href="#mod-task" type="primary" underline="never">
                             三、任务管理
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-cronjob" type="primary" :underline="false">
+                            <ElLink href="#page-cronjob" type="primary" underline="never">
                               调度器监控
                             </ElLink>
                             ·
-                            <ElLink href="#page-cronnode" type="primary" :underline="false">
+                            <ElLink href="#page-cronnode" type="primary" underline="never">
                               节点管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-workflow" type="primary" :underline="false">
+                            <ElLink href="#page-workflow" type="primary" underline="never">
                               流程编排
                             </ElLink>
                             ·
-                            <ElLink href="#page-nodetype" type="primary" :underline="false">
+                            <ElLink href="#page-nodetype" type="primary" underline="never">
                               编排节点类型
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-ai" type="primary" :underline="false">
+                          <ElLink href="#mod-ai" type="primary" underline="never">
                             四、AI 模块
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-ai-chat" type="primary" :underline="false">
+                            <ElLink href="#page-ai-chat" type="primary" underline="never">
                               AI智能助手
                             </ElLink>
                             ·
-                            <ElLink href="#page-ai-fachat" type="primary" :underline="false">
+                            <ElLink href="#page-ai-fachat" type="primary" underline="never">
                               会话聊天
                             </ElLink>
                             ·
-                            <ElLink href="#page-ai-memory" type="primary" :underline="false">
+                            <ElLink href="#page-ai-memory" type="primary" underline="never">
                               会话记忆
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-generator" type="primary" :underline="false">
+                          <ElLink href="#mod-generator" type="primary" underline="never">
                             五、代码生成器
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-gencode" type="primary" :underline="false">
+                            <ElLink href="#page-gencode" type="primary" underline="never">
                               代码生成
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-app" type="primary" :underline="false">
+                          <ElLink href="#mod-app" type="primary" underline="never">
                             六、应用管理
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-portal" type="primary" :underline="false">
+                            <ElLink href="#page-portal" type="primary" underline="never">
                               插件市场
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-example" type="primary" :underline="false">
+                          <ElLink href="#mod-example" type="primary" underline="never">
                             七、示例模块
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-demo" type="primary" :underline="false">
+                            <ElLink href="#page-demo" type="primary" underline="never">
                               示例管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-demo01" type="primary" :underline="false">
+                            <ElLink href="#page-demo01" type="primary" underline="never">
                               三级菜单
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-dashboard" type="primary" :underline="false">
+                          <ElLink href="#mod-dashboard" type="primary" underline="never">
                             八、仪表盘
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-home" type="primary" :underline="false">
-                              首页
-                            </ElLink>
+                            <ElLink href="#page-home" type="primary" underline="never">首页</ElLink>
                             ·
-                            <ElLink href="#page-profile" type="primary" :underline="false">
+                            <ElLink href="#page-profile" type="primary" underline="never">
                               个人中心
                             </ElLink>
                             ·
-                            <ElLink href="#page-changelog" type="primary" :underline="false">
+                            <ElLink href="#page-changelog" type="primary" underline="never">
                               更新日志
                             </ElLink>
                             ·
-                            <ElLink href="#page-db-workplace" type="primary" :underline="false">
+                            <ElLink href="#page-db-workplace" type="primary" underline="never">
                               工作台
                             </ElLink>
                             ·
-                            <ElLink href="#page-db-console" type="primary" :underline="false">
+                            <ElLink href="#page-db-console" type="primary" underline="never">
                               控制台
                             </ElLink>
                             ·
-                            <ElLink href="#page-db-analysis" type="primary" :underline="false">
+                            <ElLink href="#page-db-analysis" type="primary" underline="never">
                               分析页
                             </ElLink>
                             ·
-                            <ElLink href="#page-db-ecommerce" type="primary" :underline="false">
+                            <ElLink href="#page-db-ecommerce" type="primary" underline="never">
                               电子商务
                             </ElLink>
                             ·
-                            <ElLink href="#page-db-map" type="primary" :underline="false">
+                            <ElLink href="#page-db-map" type="primary" underline="never">
                               地图
                             </ElLink>
                             ·
-                            <ElLink href="#page-db-pricing" type="primary" :underline="false">
+                            <ElLink href="#page-db-pricing" type="primary" underline="never">
                               定价
                             </ElLink>
                             ·
-                            <ElLink href="#page-db-article" type="primary" :underline="false">
+                            <ElLink href="#page-db-article" type="primary" underline="never">
                               文章管理
                             </ElLink>
                             ·
-                            <ElLink href="#page-db-tutorial" type="primary" :underline="false">
+                            <ElLink href="#page-db-tutorial" type="primary" underline="never">
                               教程
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-layout" type="primary" :underline="false">
+                          <ElLink href="#mod-layout" type="primary" underline="never">
                             九、布局与通用功能
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#layout-main" type="primary" :underline="false">
+                            <ElLink href="#layout-main" type="primary" underline="never">
                               主布局
                             </ElLink>
                             ·
-                            <ElLink href="#layout-sidebar" type="primary" :underline="false">
+                            <ElLink href="#layout-sidebar" type="primary" underline="never">
                               侧栏菜单
                             </ElLink>
                             ·
-                            <ElLink href="#layout-header" type="primary" :underline="false">
+                            <ElLink href="#layout-header" type="primary" underline="never">
                               顶栏
                             </ElLink>
                             ·
-                            <ElLink href="#layout-worktab" type="primary" :underline="false">
+                            <ElLink href="#layout-worktab" type="primary" underline="never">
                               标签页
                             </ElLink>
                             ·
-                            <ElLink href="#layout-settings" type="primary" :underline="false">
+                            <ElLink href="#layout-settings" type="primary" underline="never">
                               设置面板
                             </ElLink>
                             ·
-                            <ElLink href="#layout-notification" type="primary" :underline="false">
+                            <ElLink href="#layout-notification" type="primary" underline="never">
                               通知
                             </ElLink>
                             ·
-                            <ElLink href="#layout-search" type="primary" :underline="false">
+                            <ElLink href="#layout-search" type="primary" underline="never">
                               全局搜索
                             </ElLink>
                             ·
-                            <ElLink href="#layout-lock" type="primary" :underline="false">
+                            <ElLink href="#layout-lock" type="primary" underline="never">
                               锁屏
                             </ElLink>
                             ·
-                            <ElLink href="#layout-user" type="primary" :underline="false">
+                            <ElLink href="#layout-user" type="primary" underline="never">
                               用户菜单
                             </ElLink>
                             ·
-                            <ElLink href="#layout-theme" type="primary" :underline="false">
+                            <ElLink href="#layout-theme" type="primary" underline="never">
                               主题切换
                             </ElLink>
                             ·
-                            <ElLink href="#layout-lang" type="primary" :underline="false">
+                            <ElLink href="#layout-lang" type="primary" underline="never">
                               语言切换
                             </ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-exception" type="primary" :underline="false">
+                          <ElLink href="#mod-exception" type="primary" underline="never">
                             十、异常页
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-401" type="primary" :underline="false">401</ElLink>
+                            <ElLink href="#page-401" type="primary" underline="never">401</ElLink>
                             ·
-                            <ElLink href="#page-403" type="primary" :underline="false">403</ElLink>
+                            <ElLink href="#page-403" type="primary" underline="never">403</ElLink>
                             ·
-                            <ElLink href="#page-404" type="primary" :underline="false">404</ElLink>
+                            <ElLink href="#page-404" type="primary" underline="never">404</ElLink>
                             ·
-                            <ElLink href="#page-500" type="primary" :underline="false">500</ElLink>
+                            <ElLink href="#page-500" type="primary" underline="never">500</ElLink>
                           </div>
                         </li>
                         <li>
-                          <ElLink href="#mod-swagger" type="primary" :underline="false">
+                          <ElLink href="#mod-swagger" type="primary" underline="never">
                             十一、接口文档（API）
                           </ElLink>
                           <div class="toc-l2">
-                            <ElLink href="#page-swagger" type="primary" :underline="false">
+                            <ElLink href="#page-swagger" type="primary" underline="never">
                               Swagger文档
                             </ElLink>
                             ·
-                            <ElLink href="#page-redoc" type="primary" :underline="false">
+                            <ElLink href="#page-redoc" type="primary" underline="never">
                               Redoc文档
                             </ElLink>
                             ·
-                            <ElLink href="#page-ljdoc" type="primary" :underline="false">
+                            <ElLink href="#page-ljdoc" type="primary" underline="never">
                               LangJin文档
                             </ElLink>
                           </div>
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..eb61b742 100644
--- a/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
+++ b/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
@@ -347,7 +347,7 @@ const formatFileSize = (bytes: number): string => {
         font-size: 15px;
         line-height: 1.6;
         color: var(--el-text-color-primary);
-        word-wrap: break-word;
+        overflow-wrap: break-word;
         transition:
           max-height 0.25s ease,
           opacity 0.2s ease;
diff --git a/frontend/web/src/views/module_ai/memory/index.vue b/frontend/web/src/views/module_ai/memory/index.vue
index 12ac6abb..93629f5f 100644
--- a/frontend/web/src/views/module_ai/memory/index.vue
+++ b/frontend/web/src/views/module_ai/memory/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
diff --git a/frontend/web/src/views/module_example/demo/index.vue b/frontend/web/src/views/module_example/demo/index.vue
index 624d4934..a7c84109 100644
--- a/frontend/web/src/views/module_example/demo/index.vue
+++ b/frontend/web/src/views/module_example/demo/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -134,7 +138,7 @@
             :model="formData"
             :rules="rules"
             label-suffix=":"
-            label-width="auto"
+            label-width="100px"
             label-position="right"
             inline
           >
@@ -169,7 +173,7 @@
                 v-model="formData.e"
                 type="date"
                 placeholder="请选择日期"
-                style="width: 100%"
+                :style="'width: 100%'"
                 value-format="YYYY-MM-DD"
               />
             </ElFormItem>
@@ -177,7 +181,7 @@
               <ElTimePicker
                 v-model="formData.f"
                 placeholder="请选择时间"
-                style="width: 100%"
+                :style="'width: 100%'"
                 value-format="HH:mm:ss"
               />
             </ElFormItem>
@@ -186,7 +190,7 @@
                 v-model="formData.g"
                 type="datetime"
                 placeholder="请选择日期时间"
-                style="width: 100%"
+                :style="'width: 100%'"
                 value-format="YYYY-MM-DD HH:mm:ss"
               />
             </ElFormItem>
@@ -240,7 +244,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
             确定
diff --git a/frontend/web/src/views/module_example/demo01/index.vue b/frontend/web/src/views/module_example/demo01/index.vue
index 39d69fd0..fd4574c7 100644
--- a/frontend/web/src/views/module_example/demo01/index.vue
+++ b/frontend/web/src/views/module_example/demo01/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -122,7 +126,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
             确定
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..d436356a 100644
--- a/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
@@ -140,7 +140,7 @@
           </ElDescriptions>
 
           <div class="mt-3">
-            <ElLink type="primary" :underline="false" @click="syncVisualToSql">
+            <ElLink type="primary" underline="never" @click="syncVisualToSql">
               需要手写调整？生成 SQL 并切到「写 SQL」
             </ElLink>
           </div>
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 7982cd6e..2d3b80fb 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
@@ -144,7 +144,7 @@
                   default-expand-all
                   :render-after-expand="false"
                   clearable
-                  style="width: 100%"
+                  :style="'width: 100%'"
                 />
               </ElFormItem>
             </ElCol>
diff --git a/frontend/web/src/views/module_generator/gencode/components/GenColumnsStep.vue b/frontend/web/src/views/module_generator/gencode/components/GenColumnsStep.vue
index 614f0c71..45d90f13 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenColumnsStep.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/GenColumnsStep.vue
@@ -232,8 +232,8 @@
                 :label="dict.dict_name"
                 :value="dict.dict_type || ''"
               >
-                <span style="float: left">{{ dict.dict_name }}</span>
-                <span style="float: right; font-size: 13px; color: #8492a6">
+                <span :style="'float: left'">{{ dict.dict_name }}</span>
+                <span :style="'float: right; font-size: 13px; color: #8492a6'">
                   {{ dict.dict_type }}
                 </span>
               </ElOption>
diff --git a/frontend/web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue b/frontend/web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue
index 2630b193..b7522473 100644
--- a/frontend/web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue
@@ -6,7 +6,7 @@
           v-model="query.table_name"
           placeholder="请输入表名称"
           clearable
-          style="width: 180px"
+          :style="'width: 180px'"
           @keyup.enter="emit('query')"
         />
       </ElFormItem>
@@ -15,7 +15,7 @@
           v-model="query.table_comment"
           placeholder="请输入表描述"
           clearable
-          style="width: 180px"
+          :style="'width: 180px'"
           @keyup.enter="emit('query')"
         />
       </ElFormItem>
diff --git a/frontend/web/src/views/module_generator/gencode/index.vue b/frontend/web/src/views/module_generator/gencode/index.vue
index d94f1d1f..cfd6f575 100644
--- a/frontend/web/src/views/module_generator/gencode/index.vue
+++ b/frontend/web/src/views/module_generator/gencode/index.vue
@@ -16,7 +16,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -480,7 +484,7 @@ async function handlePreview(row: GenTableSchema): Promise<void> {
 
 /** 表格行内生成代码操作 */
 async function handleGenTable(targetGenType: string, row?: GenTableSchema): Promise<void> {
-  let tbNames: string | string[] = [];
+  let tbNames: string | string[];
 
   // 判断是单条还是批量操作
   if (row) {
@@ -552,23 +556,23 @@ async function confirmWritePaths(tableId: number) {
   const shown = keys.slice(0, 80);
   const more =
     keys.length > shown.length
-      ? `<div style="margin-top:10px;padding:8px 12px;border-radius:6px;background:var(--el-fill-color-light);font-size:12px;color:var(--el-text-color-secondary);text-align:center">还有 <b style="color:var(--el-text-color-primary)">${keys.length - shown.length}</b> 个文件未列出</div>`
+      ? `<div :style="'margin-top:10px;padding:8px 12px;border-radius:6px;background:var(--el-fill-color-light);font-size:12px;color:var(--el-text-color-secondary);text-align:center'">还有 <b :style="'color:var(--el-text-color-primary)'">${keys.length - shown.length}</b> 个文件未列出</div>`
       : "";
   const listRows = shown
     .map((p, i) => {
       const bg = i % 2 === 0 ? "var(--el-fill-color-blank)" : "var(--el-fill-color-light)";
-      return `<div class="gencode-write-path-row" style="padding:9px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.45;white-space:nowrap;color:var(--el-text-color-primary);background:${bg};border-bottom:1px solid var(--el-border-color-lighter)">${escapeHtml(p)}</div>`;
+      return `<div class="gencode-write-path-row" :style="'padding:9px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.45;white-space:nowrap;color:var(--el-text-color-primary);background:${bg};border-bottom:1px solid var(--el-border-color-lighter)'">${escapeHtml(p)}</div>`;
     })
     .join("");
   const listHtml = shown.length
     ? `<div class="gencode-write-path-list-wrap">${listRows}</div>${more}`
-    : `<div style="padding:16px;border-radius:8px;background:var(--el-fill-color-light);color:var(--el-text-color-secondary);font-size:13px;text-align:center">未获取到预览路径，仍将继续写入。</div>`;
-  const tipHtml = `<div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--el-border-color-lighter);font-size:12px;line-height:1.5;color:var(--el-text-color-secondary)">与「代码预览」同源；路径为相对项目根的落盘位置。</div>`;
+    : `<div :style="'padding:16px;border-radius:8px;background:var(--el-fill-color-light);color:var(--el-text-color-secondary);font-size:13px;text-align:center'">未获取到预览路径，仍将继续写入。</div>`;
+  const tipHtml = `<div :style="'margin-top:12px;padding-top:10px;border-top:1px solid var(--el-border-color-lighter);font-size:12px;line-height:1.5;color:var(--el-text-color-secondary)'">与「代码预览」同源；路径为相对项目根的落盘位置。</div>`;
   await ElMessageBox.confirm(
-    `<div class="gencode-write-confirm-body" style="font-family:var(--el-font-family);line-height:1.5;color:var(--el-text-color-primary)">
-      <div style="margin-bottom:12px">
-        <div style="font-size:15px;font-weight:600;letter-spacing:0.02em">将写入以下文件</div>
-        <div style="margin-top:4px;font-size:12px;color:var(--el-text-color-secondary)">共 ${keys.length} 项 · 相对项目根目录</div>
+    `<div class="gencode-write-confirm-body" :style="'font-family:var(--el-font-family);line-height:1.5;color:var(--el-text-color-primary)'">
+      <div :style="'margin-bottom:12px'">
+        <div :style="'font-size:15px;font-weight:600;letter-spacing:0.02em'">将写入以下文件</div>
+        <div :style="'margin-top:4px;font-size:12px;color:var(--el-text-color-secondary)'">共 ${keys.length} 项 · 相对项目根目录</div>
       </div>
       ${listHtml}
       ${shown.length ? tipHtml : ""}
@@ -605,13 +609,13 @@ async function handleSynchDb(row: GenTableSchema): Promise<void> {
     const s = renderSummary(p);
     const list = (xs: string[]) => (xs?.length ? xs.slice(0, 20).join(", ") : "无");
     return `
-      <div style="line-height:1.6">
-        <div style="font-weight:600;margin-bottom:6px">${title}</div>
+      <div :style="'line-height:1.6'">
+        <div :style="'font-weight:600;margin-bottom:6px'">${title}</div>
         <div>新增：<b>${s.added}</b>；删除：<b>${s.removed}</b>；变更：<b>${s.changed}</b>；未变：${s.unchanged}</div>
-        <div style="margin-top:6px">新增列：${list(p.added || [])}</div>
+        <div :style="'margin-top:6px'">新增列：${list(p.added || [])}</div>
         <div>删除列：${list(p.removed || [])}</div>
         <div>变更列：${list((p.changed || []).map((c: any) => c.column_name))}</div>
-        <div style="margin-top:8px;color:var(--el-text-color-secondary)">提示：同步会尽量保留你已配置的 dict/html/query 等生成项，仅以数据库结构为准更新元信息。</div>
+        <div :style="'margin-top:8px;color:var(--el-text-color-secondary)'">提示：同步会尽量保留你已配置的 dict/html/query 等生成项，仅以数据库结构为准更新元信息。</div>
       </div>
     `;
   };
diff --git a/frontend/web/src/views/module_monitor/cache/index.vue b/frontend/web/src/views/module_monitor/cache/index.vue
index 1319a464..928ab19d 100644
--- a/frontend/web/src/views/module_monitor/cache/index.vue
+++ b/frontend/web/src/views/module_monitor/cache/index.vue
@@ -1,28 +1,19 @@
-<!-- 缓存监控 -->
 <template>
   <div class="fa-full-height">
-    <el-tabs>
+    <ElTabs>
       <!-- 监控信息 Tab -->
       <ElTabPane label="监控信息">
         <div class="monitor-tab">
           <ElRow :gutter="16">
-            <!-- 基本信息 -->
             <ElCol :span="24">
               <ElCard shadow="hover">
                 <template #header>
                   <div class="flex items-center gap-2">
-                    <ElIcon>
-                      <Monitor />
-                    </ElIcon>
-                    <span>Redis监控信息</span>
-                    <ElTooltip content="展示Redis监控信息详情">
-                      <ElIcon>
-                        <QuestionFilled />
-                      </ElIcon>
-                    </ElTooltip>
+                    <FaSvgIcon icon="ri:database-2-line" class="text-lg" />
+                    <span class="font-medium">Redis监控信息</span>
                   </div>
                 </template>
-                <ElDescriptions :column="12" border :direction="'vertical'">
+                <ElDescriptions :column="6" border>
                   <ElDescriptionsItem label="Redis版本">
                     {{ cache.info?.redis_version || "-" }}
                   </ElDescriptionsItem>
@@ -51,59 +42,42 @@
                   <ElDescriptionsItem label="内存配置">
                     {{ cache.info?.maxmemory_human || "-" }}
                   </ElDescriptionsItem>
-                  <ElDescriptionsItem label="AOF是否开启">
-                    {{ cache.info?.aof_enabled === "0" ? "否" : "是" }}
+                  <ElDescriptionsItem label="AOF">
+                    {{ cache.info?.aof_enabled === "0" ? "关闭" : "开启" }}
                   </ElDescriptionsItem>
-                  <ElDescriptionsItem label="RDB是否成功">
+                  <ElDescriptionsItem label="RDB状态">
                     {{ cache.info?.rdb_last_bgsave_status || "-" }}
                   </ElDescriptionsItem>
                   <ElDescriptionsItem label="Key数量">
                     {{ cache.db_size || 0 }}
                   </ElDescriptionsItem>
-                  <ElDescriptionsItem label="网络入口/出口">
-                    {{
-                      `${cache.info?.instantaneous_input_kbps || 0}kps/${cache.info?.instantaneous_output_kbps || 0}kps`
-                    }}
+                  <ElDescriptionsItem label="网络IO">
+                    {{ cache.info?.instantaneous_input_kbps || 0 }}kps/
+                    {{ cache.info?.instantaneous_output_kbps || 0 }}kps
                   </ElDescriptionsItem>
                 </ElDescriptions>
               </ElCard>
             </ElCol>
           </ElRow>
 
-          <!-- 监控图表：单独一行并占满剩余高度 -->
-          <ElRow :gutter="16" class="monitor-charts-row">
-            <ElCol :span="12" class="cache-chart-col">
-              <ElCard shadow="hover" class="cache-chfa-card">
+          <ElRow :gutter="16" class="flex-1 min-h-0">
+            <ElCol :span="12" class="flex flex-col min-h-0">
+              <ElCard shadow="hover" class="flex-1 flex flex-col chart-card">
                 <template #header>
                   <div class="flex items-center gap-2">
-                    <ElIcon>
-                      <Stopwatch />
-                    </ElIcon>
-                    <span class="title">命令统计</span>
-                    <ElTooltip content="展示命令统计详情">
-                      <ElIcon>
-                        <QuestionFilled />
-                      </ElIcon>
-                    </ElTooltip>
+                    <FaSvgIcon icon="ri:bar-chart-2-line" class="text-lg" />
+                    <span class="font-medium">命令统计</span>
                   </div>
                 </template>
                 <div ref="commandstats" class="chart-container" />
               </ElCard>
             </ElCol>
-
-            <ElCol :span="12" class="cache-chart-col">
-              <ElCard shadow="hover" class="cache-chfa-card">
+            <ElCol :span="12" class="flex flex-col min-h-0">
+              <ElCard shadow="hover" class="flex-1 flex flex-col chart-card">
                 <template #header>
                   <div class="flex items-center gap-2">
-                    <ElIcon>
-                      <Stopwatch />
-                    </ElIcon>
-                    <span>内存信息</span>
-                    <ElTooltip content="展示内存信息详情">
-                      <ElIcon>
-                        <QuestionFilled />
-                      </ElIcon>
-                    </ElTooltip>
+                    <FaSvgIcon icon="ri:pie-chart-2-line" class="text-lg" />
+                    <span class="font-medium">内存信息</span>
                   </div>
                 </template>
                 <div ref="usedmemory" class="chart-container" />
@@ -116,32 +90,23 @@
       <!-- 缓存管理 Tab -->
       <ElTabPane label="缓存管理">
         <div class="cache-mgmt-tab">
-          <ElRow :gutter="16" class="cache-mgmt-row">
+          <ElRow :gutter="16" class="flex-1 min-h-0">
             <!-- 缓存列表 -->
             <ElCol :span="8" class="cache-mgmt-col">
               <ElCard :loading="loading" shadow="hover" class="cache-mgmt-card">
                 <template #header>
-                  <div class="flex justify-between items-center">
+                  <div class="flex items-center justify-between">
                     <div class="flex items-center gap-2">
-                      <ElIcon>
-                        <Tickets />
-                      </ElIcon>
-                      <span class="flex items-center gap-2">缓存列表</span>
-                      <ElTooltip content="展示缓存列表详情">
-                        <ElIcon>
-                          <QuestionFilled />
-                        </ElIcon>
-                      </ElTooltip>
-                    </div>
-                    <div>
-                      <ElButton
-                        v-hasPerm="['module_monitor:cache:query']"
-                        type="primary"
-                        link
-                        icon="RefreshRight"
-                        @click="refreshCacheNames"
-                      />
+                      <FaSvgIcon icon="ri:list-unordered" class="text-lg" />
+                      <span class="font-medium">缓存列表</span>
                     </div>
+                    <ElButton
+                      v-hasPerm="['module_monitor:cache:query']"
+                      type="primary"
+                      link
+                      icon="RefreshRight"
+                      @click="refreshCacheNames"
+                    />
                   </div>
                 </template>
                 <div class="cache-table-wrap">
@@ -165,7 +130,6 @@
                     <ElTableColumn label="操作" width="60" align="center">
                       <template #default="{ row }">
                         <ElPopconfirm
-                          class="box-item"
                           :title="`确认删除缓存 ${row.cache_name} 吗？`"
                           placement="top"
                           @confirm="handleClearCacheName(row)"
@@ -191,27 +155,18 @@
             <ElCol :span="8" class="cache-mgmt-col">
               <ElCard :loading="loading" shadow="hover" class="cache-mgmt-card">
                 <template #header>
-                  <div class="flex justify-between items-center">
+                  <div class="flex items-center justify-between">
                     <div class="flex items-center gap-2">
-                      <ElIcon>
-                        <Key />
-                      </ElIcon>
-                      <span class="flex items-center gap-2">键名列表</span>
-                      <ElTooltip content="展示键名列表详情">
-                        <ElIcon>
-                          <QuestionFilled />
-                        </ElIcon>
-                      </ElTooltip>
-                    </div>
-                    <div>
-                      <ElButton
-                        v-hasPerm="['module_monitor:cache:query']"
-                        type="primary"
-                        link
-                        icon="RefreshRight"
-                        @click="refreshCacheKeys"
-                      />
+                      <FaSvgIcon icon="ri:key-2-line" class="text-lg" />
+                      <span class="font-medium">键名列表</span>
                     </div>
+                    <ElButton
+                      v-hasPerm="['module_monitor:cache:query']"
+                      type="primary"
+                      link
+                      icon="RefreshRight"
+                      @click="refreshCacheKeys"
+                    />
                   </div>
                 </template>
                 <div class="cache-table-wrap">
@@ -238,7 +193,6 @@
                     <ElTableColumn label="操作" width="60" align="center">
                       <template #default="{ row }">
                         <ElPopconfirm
-                          class="box-item"
                           :title="`确认删除键 ${row.cacheKey} 吗？`"
                           placement="top"
                           @confirm="handleClearCacheKey(row.cacheKey)"
@@ -264,38 +218,24 @@
             <ElCol :span="8" class="cache-mgmt-col">
               <ElCard :loading="loading" shadow="hover" class="cache-mgmt-card">
                 <template #header>
-                  <div class="flex justify-between items-center">
+                  <div class="flex items-center justify-between">
                     <div class="flex items-center gap-2">
-                      <ElIcon>
-                        <Key />
-                      </ElIcon>
-                      <span class="flex items-center gap-2">缓存内容</span>
-                      <ElTooltip content="展示缓存内容详情">
-                        <ElIcon>
-                          <QuestionFilled />
-                        </ElIcon>
-                      </ElTooltip>
-                    </div>
-                    <div>
-                      <ElButton
-                        v-hasPerm="['module_monitor:cache:delete']"
-                        type="danger"
-                        link
-                        icon="delete"
-                        @click="handleClearCacheAll"
-                      >
-                        清理全部
-                      </ElButton>
+                      <FaSvgIcon icon="ri:file-text-line" class="text-lg" />
+                      <span class="font-medium">缓存内容</span>
                     </div>
+                    <ElButton
+                      v-hasPerm="['module_monitor:cache:delete']"
+                      type="danger"
+                      link
+                      icon="delete"
+                      @click="handleClearCacheAll"
+                    >
+                      清理全部
+                    </ElButton>
                   </div>
                 </template>
                 <div class="cache-form-wrap">
-                  <ElForm
-                    :model="cacheForm"
-                    label-suffix=":"
-                    label-width="auto"
-                    label-position="top"
-                  >
+                  <ElForm :model="cacheForm" label-suffix=":" label-position="top">
                     <ElFormItem label="缓存名称">
                       <ElInput v-model="cacheForm.cache_name" readonly placeholder="缓存名称" />
                     </ElFormItem>
@@ -317,7 +257,7 @@
           </ElRow>
         </div>
       </ElTabPane>
-    </el-tabs>
+    </ElTabs>
   </div>
 </template>
 
@@ -331,7 +271,8 @@ import CacheAPI, {
 } from "@/api/module_monitor/cache";
 import * as echarts from "echarts";
 
-// 响应式状态定义
+defineOptions({ name: "CacheMonitor" });
+
 const cacheNames = ref<CacheInfo[]>([]);
 const cacheKeys = ref<string[]>([]);
 const loading = ref(true);
@@ -355,14 +296,9 @@ let usedmemoryInstance: echarts.ECharts | null = null;
 
 const resetCacheForm = () => {
   cacheKeys.value = [];
-  cacheForm.value = {
-    cache_name: "",
-    cache_key: "",
-    cache_value: "",
-  };
+  cacheForm.value = { cache_name: "", cache_key: "", cache_value: "" };
 };
 
-// 缓存名称相关方法
 const getCacheNameList = async () => {
   try {
     loading.value = true;
@@ -376,12 +312,10 @@ const getCacheNameList = async () => {
   }
 };
 
-// 刷新缓存列表
 const refreshCacheNames = () => {
   getCacheNameList();
 };
 
-// 清理缓存名称
 const handleClearCacheName = async (row: CacheInfo) => {
   try {
     await CacheAPI.deleteCacheName(row.cache_name);
@@ -391,21 +325,15 @@ const handleClearCacheName = async (row: CacheInfo) => {
   }
 };
 
-// 缓存键名相关方法
 const getCacheKeyList = async (row?: CacheInfo) => {
   try {
     const cacheName = row?.cache_name || nowCacheName.value;
     if (!cacheName) return;
-
     subLoading.value = true;
     const response = await CacheAPI.getCacheKeys(cacheName);
     cacheKeys.value = response.data.data;
     nowCacheName.value = cacheName;
-    cacheForm.value = {
-      cache_name: cacheName,
-      cache_key: "",
-      cache_value: "",
-    };
+    cacheForm.value = { cache_name: cacheName, cache_key: "", cache_value: "" };
   } catch (error) {
     console.error("获取缓存键名列表出错:", error);
   } finally {
@@ -413,12 +341,10 @@ const getCacheKeyList = async (row?: CacheInfo) => {
   }
 };
 
-// 刷新键名列表
 const refreshCacheKeys = () => {
   getCacheKeyList();
 };
 
-// 清理缓存键名
 async function handleClearCacheKey(cacheKey: string) {
   try {
     await CacheAPI.deleteCacheKey(cacheKey);
@@ -428,7 +354,6 @@ async function handleClearCacheKey(cacheKey: string) {
   }
 }
 
-// 缓存内容相关方法
 async function handleCacheValue(cacheKey: string) {
   try {
     loading.value = true;
@@ -441,7 +366,6 @@ async function handleCacheValue(cacheKey: string) {
   }
 }
 
-// 清理全部缓存
 const handleClearCacheAll = async () => {
   try {
     await ElMessageBox.confirm("确定要清理全部缓存吗？", "危险！", {
@@ -458,16 +382,11 @@ const handleClearCacheAll = async () => {
   }
 };
 
-// 监控数据获取
 const getInfo = async () => {
   try {
     loading.value = true;
     const response = await CacheAPI.getCacheInfo();
-    cache.value = response.data.data || {
-      info: {},
-      command_stats: [],
-      dbSize: 0,
-    };
+    cache.value = response.data.data || { info: {}, command_stats: [], dbSize: 0 };
     initCharts();
   } catch (error) {
     console.error("获取缓存监控数据失败:", error);
@@ -476,18 +395,14 @@ const getInfo = async () => {
   }
 };
 
-// 图表初始化
 const initCharts = () => {
   if (!commandstats.value || !usedmemory.value) return;
 
   commandstatsInstance = echarts.init(commandstats.value, "macarons");
   usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
 
-  const commandStatsOption = {
-    tooltip: {
-      trigger: "item",
-      formatter: "{a} <br/>{b} : {c} ({d}%)",
-    },
+  commandstatsInstance.setOption({
+    tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" },
     series: [
       {
         name: "命令",
@@ -500,34 +415,22 @@ const initCharts = () => {
         animationDuration: 1000,
       },
     ],
-  };
+  });
 
   const usedMemory = cache.value.info?.used_memory_human || "0";
-  const usedMemoryOption = {
-    tooltip: {
-      formatter: `{b} <br/>{a} : ${usedMemory}`,
-    },
+  usedmemoryInstance.setOption({
+    tooltip: { formatter: `{b} <br/>{a} : ${usedMemory}` },
     series: [
       {
         name: "峰值",
         type: "gauge",
         min: 0,
         max: 1000,
-        detail: {
-          formatter: usedMemory,
-        },
-        data: [
-          {
-            value: parseFloat(usedMemory) || 0,
-            name: "内存消耗",
-          },
-        ],
+        detail: { formatter: usedMemory },
+        data: [{ value: parseFloat(usedMemory) || 0, name: "内存消耗" }],
       },
     ],
-  };
-
-  commandstatsInstance.setOption(commandStatsOption);
-  usedmemoryInstance.setOption(usedMemoryOption);
+  });
 
   void nextTick(() => {
     commandstatsInstance?.resize();
@@ -535,7 +438,6 @@ const initCharts = () => {
   });
 };
 
-// 生命周期钩子
 onMounted(() => {
   getCacheNameList();
   getInfo();
@@ -548,7 +450,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-// 让 el-tabs 填满父容器高度
+// 与 dashboard 首页一致：自定义圆角 + 边框色
+:deep(.el-card) {
+  --el-card-border-radius: calc(var(--custom-radius) + 2px);
+
+  border: 1px solid var(--fa-card-border);
+}
+
 .fa-full-height {
   :deep(.el-tabs) {
     display: flex;
@@ -581,23 +489,7 @@ onUnmounted(() => {
   min-height: 0;
 }
 
-.monitor-charts-row {
-  flex: 1;
-  min-height: 0;
-}
-
-.cache-chart-col {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.cache-chfa-card {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-
+.chart-card {
   :deep(.el-card__body) {
     display: flex;
     flex: 1;
@@ -619,11 +511,6 @@ onUnmounted(() => {
   min-height: 0;
 }
 
-.cache-mgmt-row {
-  flex: 1;
-  min-height: 0;
-}
-
 .cache-mgmt-col {
   display: flex;
   flex-direction: column;
@@ -688,7 +575,6 @@ onUnmounted(() => {
   }
 }
 
-// 缓存内容 textarea 填满剩余空间，但不超过 60%
 .cache-value-item {
   flex: 1;
   min-height: 0;
diff --git a/frontend/web/src/views/module_monitor/online/index.vue b/frontend/web/src/views/module_monitor/online/index.vue
index 1d582ae2..e0a343a0 100644
--- a/frontend/web/src/views/module_monitor/online/index.vue
+++ b/frontend/web/src/views/module_monitor/online/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
diff --git a/frontend/web/src/views/module_monitor/server/index.vue b/frontend/web/src/views/module_monitor/server/index.vue
index 02209b43..b5da185e 100644
--- a/frontend/web/src/views/module_monitor/server/index.vue
+++ b/frontend/web/src/views/module_monitor/server/index.vue
@@ -1,172 +1,104 @@
 <template>
-  <div class="app-container">
-    <ElRow :gutter="16">
-      <ElCol :span="12" class="mb-4">
-        <ElCard :loading="loading" shadow="hover">
+  <div class="server-container">
+    <ElRow :gutter="16" class="server-row">
+      <!-- CPU 使用情况 -->
+      <ElCol :span="12" class="server-col">
+        <ElCard :loading="loading" shadow="hover" class="server-card">
           <template #header>
             <div class="flex items-center gap-2">
-              <ElIcon><Cpu /></ElIcon>
-              <span class="flex items-center gap-2">CPU使用情况</span>
-              <ElTooltip content="展示CPU核心数及使用率">
-                <ElIcon><QuestionFilled /></ElIcon>
-              </ElTooltip>
+              <FaSvgIcon icon="ri:cpu-line" class="text-lg" />
+              <span class="font-medium">CPU使用情况</span>
             </div>
           </template>
-          <ElRow :gutter="16">
-            <!-- CPU核心数卡片 -->
-            <ElCol :span="12">
-              <ElCard shadow="hover">
-                <span>核心数</span>
-                <ElTooltip :content="(server.cpu?.cpu_num || 0).toFixed(1)">
-                  <div class="text-center mb-4">
-                    <ElProgress
-                      type="circle"
-                      :percentage="100"
-                      :format="() => `${server.cpu?.cpu_num || 0}`"
-                    />
-                  </div>
-                </ElTooltip>
-                <ElDescriptions :column="1" border>
-                  <ElDescriptionsItem label="总核心数">
-                    {{ server.cpu?.cpu_num || 0 }}
-                  </ElDescriptionsItem>
-                  <ElDescriptionsItem label="已用核心">
-                    {{ Math.floor(((server.cpu?.used || 0) * server.cpu?.cpu_num) / 100) }}
-                  </ElDescriptionsItem>
-                  <ElDescriptionsItem label="空闲核心">
-                    {{ Math.floor(((server.cpu?.free || 0) * server.cpu?.cpu_num) / 100) }}
-                  </ElDescriptionsItem>
-                </ElDescriptions>
-              </ElCard>
-            </ElCol>
-            <!-- CPU使用率卡片 -->
-            <ElCol :span="12">
-              <ElCard shadow="hover" class="h-full">
-                <span>使用率</span>
-                <ElTooltip :content="(server.cpu?.used || 0).toFixed(1) + '%'">
-                  <div class="text-center mb-4">
-                    <ElProgress
-                      type="circle"
-                      :percentage="server.cpu?.used || 0"
-                      :status="
-                        server.cpu?.used > 80
-                          ? 'exception'
-                          : server.cpu?.used > 60
-                            ? 'warning'
-                            : 'success'
-                      "
-                    />
-                  </div>
-                </ElTooltip>
-                <ElDescriptions :column="1" border>
-                  <ElDescriptionsItem label="用户使用率">
-                    {{ (server.cpu?.used || 0).toFixed(1) + "%" }}
-                  </ElDescriptionsItem>
-                  <ElDescriptionsItem label="系统使用率">
-                    {{ (server.cpu?.sys || 0).toFixed(1) + "%" }}
-                  </ElDescriptionsItem>
-                  <ElDescriptionsItem label="当前空闲率">
-                    {{ (server.cpu?.free || 0).toFixed(1) + "%" }}
-                  </ElDescriptionsItem>
-                </ElDescriptions>
-              </ElCard>
-            </ElCol>
-          </ElRow>
+          <div class="flex-c flex-col gap-4">
+            <div class="flex-c gap-6">
+              <ElProgress
+                type="circle"
+                :percentage="server.cpu?.used || 0"
+                :status="
+                  (server.cpu?.used || 0) > 80
+                    ? 'exception'
+                    : (server.cpu?.used || 0) > 60
+                      ? 'warning'
+                      : 'success'
+                "
+              >
+                <span class="text-sm">{{ (server.cpu?.used || 0).toFixed(1) }}%</span>
+              </ElProgress>
+              <ElDescriptions :column="2" border size="small">
+                <ElDescriptionsItem label="核心数">
+                  {{ server.cpu?.cpu_num || 0 }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="已用核心">
+                  {{ Math.floor(((server.cpu?.used || 0) * (server.cpu?.cpu_num || 0)) / 100) }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="用户使用率">
+                  {{ (server.cpu?.used || 0).toFixed(1) }}%
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="系统使用率">
+                  {{ (server.cpu?.sys || 0).toFixed(1) }}%
+                </ElDescriptionsItem>
+              </ElDescriptions>
+            </div>
+          </div>
         </ElCard>
       </ElCol>
 
-      <ElCol :span="12" class="mb-4">
-        <ElCard :loading="loading" shadow="hover">
+      <!-- 内存使用情况 -->
+      <ElCol :span="12" class="server-col">
+        <ElCard :loading="loading" shadow="hover" class="server-card">
           <template #header>
             <div class="flex items-center gap-2">
-              <ElIcon><Memo /></ElIcon>
-              <span>内存使用情况</span>
-              <ElTooltip content="展示系统内存和Python程序内存使用情况">
-                <ElIcon><QuestionFilled /></ElIcon>
-              </ElTooltip>
+              <FaSvgIcon icon="ri:memory-line" class="text-lg" />
+              <span class="font-medium">内存使用情况</span>
             </div>
           </template>
-          <ElRow :gutter="16">
-            <!-- 系统内存卡片 -->
-            <ElCol :span="12">
-              <ElCard shadow="hover" class="h-full">
-                <span>系统内存</span>
-                <ElTooltip :content="(server.mem?.usage || 0).toFixed(1) + '%'">
-                  <div class="text-center mb-4">
-                    <ElProgress
-                      type="circle"
-                      :percentage="server.mem?.usage || 0"
-                      :status="
-                        server.mem?.usage > 80
-                          ? 'exception'
-                          : server.mem?.usage > 60
-                            ? 'warning'
-                            : 'success'
-                      "
-                    />
-                  </div>
-                </ElTooltip>
-                <ElDescriptions :column="1" border>
-                  <ElDescriptionsItem label="总内存">
-                    {{ server.mem?.total }}
-                  </ElDescriptionsItem>
-                  <ElDescriptionsItem label="已用内存">
-                    {{ server.mem?.used }}
-                  </ElDescriptionsItem>
-                  <ElDescriptionsItem label="空闲内存">
-                    {{ server.mem?.free }}
-                  </ElDescriptionsItem>
-                </ElDescriptions>
-              </ElCard>
-            </ElCol>
-            <!-- Python内存卡片 -->
-            <ElCol :span="12">
-              <ElCard shadow="hover" class="h-full">
-                <span>Python内存</span>
-                <ElTooltip :content="(server.py?.memory_usage || 0).toFixed(1) + '%'">
-                  <div class="text-center mb-4">
-                    <ElProgress
-                      type="circle"
-                      :percentage="server.py?.memory_usage || 0"
-                      :status="
-                        server.py?.memory_usage > 80
-                          ? 'exception'
-                          : server.py?.memory_usage > 60
-                            ? 'warning'
-                            : 'success'
-                      "
-                    />
-                  </div>
-                </ElTooltip>
-                <ElDescriptions :column="1" border>
-                  <ElDescriptionsItem label="总内存">
-                    {{ server.py?.memory_total }}
-                  </ElDescriptionsItem>
-                  <ElDescriptionsItem label="已用内存">
-                    {{ server.py?.memory_used }}
-                  </ElDescriptionsItem>
-                  <ElDescriptionsItem label="空闲内存">
-                    {{ server.py?.memory_free }}
-                  </ElDescriptionsItem>
-                </ElDescriptions>
-              </ElCard>
-            </ElCol>
-          </ElRow>
+          <div class="flex-c flex-col gap-4">
+            <div class="flex-c gap-6">
+              <ElProgress
+                type="circle"
+                :percentage="server.mem?.usage || 0"
+                :status="
+                  (server.mem?.usage || 0) > 80
+                    ? 'exception'
+                    : (server.mem?.usage || 0) > 60
+                      ? 'warning'
+                      : 'success'
+                "
+              >
+                <span class="text-sm">{{ (server.mem?.usage || 0).toFixed(1) }}%</span>
+              </ElProgress>
+              <ElDescriptions :column="2" border size="small">
+                <ElDescriptionsItem label="总内存">
+                  {{ server.mem?.total }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="已用内存">
+                  {{ server.mem?.used }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="空闲内存">
+                  {{ server.mem?.free }}
+                </ElDescriptionsItem>
+                <ElDescriptionsItem label="Python内存">
+                  {{ server.py?.memory_usage ? server.py.memory_usage.toFixed(1) + "%" : "-" }}
+                </ElDescriptionsItem>
+              </ElDescriptions>
+            </div>
+          </div>
         </ElCard>
       </ElCol>
+    </ElRow>
 
-      <ElCol :span="24" class="mb-4">
-        <ElCard :loading="loading">
+    <ElRow :gutter="16" class="server-row">
+      <!-- 服务器基本信息 -->
+      <ElCol :span="12" class="server-col">
+        <ElCard :loading="loading" shadow="hover" class="server-card">
           <template #header>
             <div class="flex items-center gap-2">
-              <ElIcon><Monitor /></ElIcon>
+              <FaSvgIcon icon="ri:server-line" class="text-lg" />
               <span class="font-medium">服务器基本信息</span>
-              <ElTooltip content="展示服务器基本配置信息">
-                <ElIcon><QuestionFilled /></ElIcon>
-              </ElTooltip>
             </div>
           </template>
-          <ElDescriptions :column="2" border>
+          <ElDescriptions :column="2" border size="small">
             <ElDescriptionsItem label="服务器名称">
               {{ server.sys?.computer_name || "-" }}
             </ElDescriptionsItem>
@@ -183,18 +115,16 @@
         </ElCard>
       </ElCol>
 
-      <ElCol :span="24" class="mb-4">
-        <ElCard :loading="loading" class="shadow-sm">
+      <!-- Python运行环境 -->
+      <ElCol :span="12" class="server-col">
+        <ElCard :loading="loading" shadow="hover" class="server-card">
           <template #header>
             <div class="flex items-center gap-2">
-              <ElIcon><Dish /></ElIcon>
+              <FaSvgIcon icon="ri:code-s-slash-line" class="text-lg" />
               <span class="font-medium">Python运行环境</span>
-              <ElTooltip content="展示Python环境配置及运行状态">
-                <ElIcon><QuestionFilled /></ElIcon>
-              </ElTooltip>
             </div>
           </template>
-          <ElDescriptions :column="3" border>
+          <ElDescriptions :column="2" border size="small">
             <ElDescriptionsItem label="Python名称">
               {{ server.py?.name || "-" }}
             </ElDescriptionsItem>
@@ -207,52 +137,47 @@
             <ElDescriptionsItem label="运行时长">
               {{ server.py?.run_time || "-" }}
             </ElDescriptionsItem>
-            <ElDescriptionsItem label="安装路径">
+            <ElDescriptionsItem label="安装路径" :span="2">
               {{ server.py?.home || "-" }}
             </ElDescriptionsItem>
-            <ElDescriptionsItem label="项目路径">
+            <ElDescriptionsItem label="项目路径" :span="2">
               {{ server.sys?.user_dir || "-" }}
             </ElDescriptionsItem>
           </ElDescriptions>
         </ElCard>
       </ElCol>
+    </ElRow>
 
-      <ElCol :span="24">
-        <ElCard :loading="loading">
+    <!-- 磁盘使用情况 -->
+    <ElRow :gutter="16" class="server-row">
+      <ElCol :span="24" class="server-col">
+        <ElCard :loading="loading" shadow="hover" class="server-card">
           <template #header>
             <div class="flex items-center gap-2">
-              <ElIcon>
-                <Files />
-              </ElIcon>
+              <FaSvgIcon icon="ri:hard-drive-2-line" class="text-lg" />
               <span class="font-medium">磁盘使用情况</span>
-              <ElTooltip content="展示磁盘空间使用详情">
-                <ElIcon><QuestionFilled /></ElIcon>
-              </ElTooltip>
             </div>
           </template>
-          <ElTable :data="server.disks">
+          <ElTable :data="server.disks" stripe>
             <template #empty>
               <ElEmpty :image-size="80" description="暂无数据" />
             </template>
-            <ElTableColumn label="盘符路径" prop="dir_name" :show-overflow-tooltip="true" />
+            <ElTableColumn label="盘符路径" prop="dir_name" show-overflow-tooltip />
             <ElTableColumn label="文件系统" prop="sys_type_name" align="center" width="100" />
-            <ElTableColumn label="盘符名称" prop="type_name" />
-            <ElTableColumn prop="usage" label="使用率" align="center">
+            <ElTableColumn label="盘符名称" prop="type_name" show-overflow-tooltip />
+            <ElTableColumn label="使用率" align="center" width="200">
               <template #default="{ row }">
-                <!-- 使用 element-plus 的 Progress 组件 -->
-                <div>
-                  <ElProgress
-                    :percentage="Number(row.usage)"
-                    :status="row.usage > 80 ? 'exception' : row.usage > 60 ? 'warning' : 'success'"
-                    :text-inside="true"
-                    :stroke-width="16"
-                  />
-                </div>
+                <ElProgress
+                  :percentage="Number(row.usage)"
+                  :status="row.usage > 80 ? 'exception' : row.usage > 60 ? 'warning' : 'success'"
+                  :stroke-width="16"
+                  text-inside
+                />
               </template>
             </ElTableColumn>
             <ElTableColumn label="总大小" prop="total" align="center" width="100" />
-            <ElTableColumn label="可用大小" prop="free" align="center" width="100" />
-            <ElTableColumn label="已用大小" prop="used" align="center" width="100" />
+            <ElTableColumn label="已用" prop="used" align="center" width="100" />
+            <ElTableColumn label="可用" prop="free" align="center" width="100" />
           </ElTable>
         </ElCard>
       </ElCol>
@@ -263,27 +188,13 @@
 <script lang="ts" setup>
 import ServerAPI, { type ServerInfo } from "@/api/module_monitor/server";
 
+defineOptions({ name: "ServerMonitor" });
+
 const loading = ref(false);
 const server = ref<ServerInfo>({
-  cpu: {
-    cpu_num: 0,
-    used: 0,
-    sys: 0,
-    free: 0,
-  },
-  mem: {
-    total: "",
-    used: "",
-    free: "",
-    usage: 0,
-  },
-  sys: {
-    computer_name: "",
-    os_name: "",
-    computer_ip: "",
-    os_arch: "",
-    user_dir: "",
-  },
+  cpu: { cpu_num: 0, used: 0, sys: 0, free: 0 },
+  mem: { total: "", used: "", free: "", usage: 0 },
+  sys: { computer_name: "", os_name: "", computer_ip: "", os_arch: "", user_dir: "" },
   py: {
     name: "",
     version: "",
@@ -315,4 +226,35 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped lang="scss">
+// 与 dashboard 首页一致：自定义圆角 + 边框色
+:deep(.el-card) {
+  --el-card-border-radius: calc(var(--custom-radius) + 2px);
+
+  border: 1px solid var(--fa-card-border);
+}
+
+.server-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.server-row {
+  .server-col {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    .server-card {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      :deep(.el-card__body) {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>
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 c3d2fe07..9079a97a 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
@@ -129,7 +129,7 @@
           </ElCheckbox>
           <ElLink
             type="primary"
-            :underline="false"
+            underline="never"
             class="inline-flex items-center text-sm !leading-[inherit]"
             @click="$emit('forget')"
           >
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..7dd438a6 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
@@ -6,7 +6,7 @@
     <span class="inline-flex items-center text-[var(--el-text-color-secondary)]">{{ hint }}</span>
     <ElLink
       type="primary"
-      :underline="false"
+      underline="never"
       class="inline-flex items-center font-medium !leading-[inherit]"
       @click="$emit('link')"
     >
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue b/frontend/web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue
index bf332fc8..62f0da6b 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue
@@ -66,7 +66,7 @@
           </ElCheckbox>
           <ElLink
             type="primary"
-            :underline="false"
+            underline="never"
             class="text-sm font-medium"
             :href="userAgreementHref"
             target="_blank"
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 9cd44f9e..d545ceb9 100755
--- a/frontend/web/src/views/module_system/auth/login/index.vue
+++ b/frontend/web/src/views/module_system/auth/login/index.vue
@@ -537,8 +537,8 @@ const showVoteNotification = () => {
   notificationInstance = ElNotification({
     title: "⭐ FastapiAdmin 完全开源 · 期待您的 Star 支持 🙏",
     message: `项目持续迭代中，若对您有所帮助，欢迎点亮 Star 支持！
-    <br/><a href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank" style="color: var(--el-color-primary); text-decoration: none; font-weight: 500;">Github仓库 →</a>
-    <br/><a href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank" style="color: var(--el-color-warning); text-decoration: none; font-weight: 500;">Gitee仓库 →</a>`,
+    <br/><a href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank" :style="'color: var(--el-color-primary); text-decoration: none; font-weight: 500;'">Github仓库 →</a>
+    <br/><a href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank" :style="'color: var(--el-color-warning); text-decoration: none; font-weight: 500;'">Gitee仓库 →</a>`,
     type: "success",
     position: "bottom-left",
     duration: 0,
diff --git a/frontend/web/src/views/module_system/dept/index.vue b/frontend/web/src/views/module_system/dept/index.vue
index 0072f568..e7ae8a7c 100644
--- a/frontend/web/src/views/module_system/dept/index.vue
+++ b/frontend/web/src/views/module_system/dept/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -121,7 +125,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
             确定
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 6a3fe598..21259073 100644
--- a/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
+++ b/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
@@ -216,7 +216,7 @@
         </template>
 
         <template #footer>
-          <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+          <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
             <ElButton @click="handleCloseDialog">取消</ElButton>
             <ElButton v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
               确定
diff --git a/frontend/web/src/views/module_system/dict/index.vue b/frontend/web/src/views/module_system/dict/index.vue
index 96c3e5a2..7998da63 100644
--- a/frontend/web/src/views/module_system/dict/index.vue
+++ b/frontend/web/src/views/module_system/dict/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -113,7 +117,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
             确定
diff --git a/frontend/web/src/views/module_system/log/index.vue b/frontend/web/src/views/module_system/log/index.vue
index ef967250..af7e2d4c 100644
--- a/frontend/web/src/views/module_system/log/index.vue
+++ b/frontend/web/src/views/module_system/log/index.vue
@@ -26,7 +26,11 @@
       </template>
     </FaSearchBar>
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -125,7 +129,7 @@
       </ElScrollbar>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton type="primary" @click="handleCloseDialog">确定</ElButton>
         </div>
diff --git a/frontend/web/src/views/module_system/menu/index.vue b/frontend/web/src/views/module_system/menu/index.vue
index 3e65d443..65b75892 100644
--- a/frontend/web/src/views/module_system/menu/index.vue
+++ b/frontend/web/src/views/module_system/menu/index.vue
@@ -26,7 +26,11 @@
       <ElTabPane label="APP 移动端菜单管理" name="app" />
     </ElTabs>
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -94,7 +98,7 @@
           <ElDescriptionsItem label="图标" :span="2">
             <template #default>
               <template v-if="detailFormData.icon">
-                <MenuRouteIcon :icon="detailFormData.icon" style="vertical-align: -0.15em" />
+                <MenuRouteIcon :icon="detailFormData.icon" :style="'vertical-align: -0.15em'" />
               </template>
             </template>
           </ElDescriptionsItem>
@@ -175,7 +179,7 @@
           :model="formData"
           :rules="rules"
           label-suffix=":"
-          label-width="auto"
+          label-width="100px"
           label-position="right"
         >
           <ElFormItem
@@ -304,7 +308,7 @@
             <ElInput
               v-model="formData.component_path"
               placeholder="请输入组件路径，如system/user/index"
-              style="width: 95%"
+              :style="'width: 95%'"
             >
               <template v-if="formData.type == MenuTypeEnum.MENU" #prepend>src/views/</template>
               <template v-if="formData.type == MenuTypeEnum.MENU" #append>.vue</template>
@@ -338,23 +342,23 @@
 
             <div v-else>
               <div v-for="(item, index) in formData.params" :key="index">
-                <ElInput v-model="item.key" placeholder="参数名" style="width: 100px" />
+                <ElInput v-model="item.key" placeholder="参数名" :style="'width: 100px'" />
 
                 <span class="mx-1">=</span>
 
-                <ElInput v-model="item.value" placeholder="参数值" style="width: 100px" />
+                <ElInput v-model="item.value" placeholder="参数值" :style="'width: 100px'" />
 
                 <ElIcon
                   v-if="formData.params.indexOf(item) === formData.params.length - 1"
                   class="ml-2 cursor-pointer color-[var(--el-color-success)]"
-                  style="vertical-align: -0.15em"
+                  :style="'vertical-align: -0.15em'"
                   @click="formData.params.push({ key: '', value: '' })"
                 >
                   <CirclePlusFilled />
                 </ElIcon>
                 <ElIcon
                   class="ml-2 cursor-pointer color-[var(--el-color-danger)]"
-                  style="vertical-align: -0.15em"
+                  :style="'vertical-align: -0.15em'"
                   @click="formData.params.splice(formData.params.indexOf(item), 1)"
                 >
                   <DeleteFilled />
diff --git a/frontend/web/src/views/module_system/notice/index.vue b/frontend/web/src/views/module_system/notice/index.vue
index ee873461..9dea7828 100644
--- a/frontend/web/src/views/module_system/notice/index.vue
+++ b/frontend/web/src/views/module_system/notice/index.vue
@@ -26,7 +26,11 @@
       </template>
     </FaSearchBar>
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -149,7 +153,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton
             v-if="dialogVisible.type !== 'detail'"
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 a5afbd3b..03a87a55 100644
--- a/frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue
+++ b/frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue
@@ -10,7 +10,7 @@
     <ElTabs v-model="activeTabRef" type="border-card">
       <!-- 网站配置 -->
       <ElTabPane label="网站配置" name="website">
-        <ElForm :model="configState" label-suffix=":" label-width="auto" label-position="right">
+        <ElForm :model="configState" label-suffix=":" label-width="100px" label-position="right">
           <!-- 系统配置 -->
           <ElDivider>网站配置</ElDivider>
           <div v-for="(item, key) in systemConfigs" :key="key">
@@ -20,7 +20,7 @@
                   v-model="item.config_value"
                   :placeholder="t('common.inputText')"
                   clearable
-                  style="width: 100%"
+                  :style="'width: 100%'"
                   @input="markModified(key)"
                 />
               </span>
@@ -50,7 +50,7 @@
         </ElForm>
       </ElTabPane>
       <ElTabPane label="安全隐私" name="securityPrivacy">
-        <ElForm :model="configState" label-suffix=":" label-width="auto" label-position="right">
+        <ElForm :model="configState" label-suffix=":" label-width="100px" label-position="right">
           <!-- 系统配置 -->
           <ElDivider>安全隐私</ElDivider>
           <div v-for="(item, key) in securityPrivacyConfigs" :key="key">
@@ -60,7 +60,7 @@
                   v-model="item.config_value"
                   :placeholder="t('common.inputText')"
                   clearable
-                  style="width: 100%"
+                  :style="'width: 100%'"
                   @input="markModified(key)"
                 />
               </span>
@@ -70,7 +70,7 @@
       </ElTabPane>
       <ElTabPane label="用户协议" name="userAgreement">
         <!-- 系统配置 -->
-        <ElForm :model="configState" label-suffix=":" label-width="auto" label-position="right">
+        <ElForm :model="configState" label-suffix=":" label-width="100px" label-position="right">
           <ElDivider>用户协议</ElDivider>
           <div v-for="(item, key) in userAgreementConfigs" :key="key">
             <ElFormItem :label="item.config_name">
@@ -79,7 +79,7 @@
                   v-model="item.config_value"
                   :placeholder="t('common.inputText')"
                   clearable
-                  style="width: 100%"
+                  :style="'width: 100%'"
                   @input="markModified(key)"
                 />
               </span>
@@ -88,7 +88,7 @@
         </ElForm>
       </ElTabPane>
       <ElTabPane label="接口白名单" name="apiWhitelist">
-        <ElForm :model="configState" label-suffix=":" label-width="auto" label-position="right">
+        <ElForm :model="configState" label-suffix=":" label-width="100px" label-position="right">
           <!-- 系统配置 -->
           <ElDivider>接口白名单</ElDivider>
           <div v-for="(item, key) in apiWhitelistConfigs" :key="key">
@@ -124,7 +124,7 @@
                   type="primary"
                   icon="plus"
                   size="small"
-                  style="margin-top: 10px"
+                  :style="'margin-top: 10px'"
                   @click="addApiWhitelistItem"
                 >
                   添加接口路径
@@ -138,7 +138,7 @@
         </ElForm>
       </ElTabPane>
       <ElTabPane label="IP黑名单" name="ipBlacklist">
-        <ElForm :model="configState" label-suffix=":" label-width="auto" label-position="right">
+        <ElForm :model="configState" label-suffix=":" label-width="100px" label-position="right">
           <!-- 系统配置 -->
           <ElDivider>IP黑名单</ElDivider>
           <div v-for="(item, key) in ipBlacklistConfigs" :key="key">
@@ -153,7 +153,7 @@
                     v-model="listItem.value"
                     :placeholder="'192.168.1.1'"
                     clearable
-                    style="flex: 1"
+                    :style="'flex: 1'"
                     @input="markModified(key)"
                     @blur="
                       {
@@ -175,7 +175,7 @@
                   type="primary"
                   icon="plus"
                   size="small"
-                  style="margin-top: 10px"
+                  :style="'margin-top: 10px'"
                   @click="addIpBlacklistItem"
                 >
                   添加IP地址
@@ -189,7 +189,7 @@
         </ElForm>
       </ElTabPane>
       <ElTabPane label="演示环境配置" name="demo">
-        <ElForm :model="configState" label-suffix=":" label-width="auto" label-position="right">
+        <ElForm :model="configState" label-suffix=":" label-width="100px" label-position="right">
           <!-- 系统配置 -->
           <ElDivider>演示环境配置</ElDivider>
           <div v-for="(item, key) in demoConfigs" :key="key">
@@ -224,7 +224,7 @@
                       v-model="listItem.value"
                       :placeholder="'192.168.1.1'"
                       clearable
-                      style="flex: 1"
+                      :style="'flex: 1'"
                       @input="markModified(key)"
                       @blur="
                         {
@@ -246,7 +246,7 @@
                     type="primary"
                     icon="plus"
                     size="small"
-                    style="margin-top: 10px"
+                    :style="'margin-top: 10px'"
                     @click="addDemoIpWhitelistItem"
                   >
                     添加IP地址
@@ -262,7 +262,7 @@
                   v-model="item.config_value"
                   :placeholder="t('common.inputText')"
                   clearable
-                  style="width: 100%"
+                  :style="'width: 100%'"
                   @input="markModified(key)"
                 />
               </template>
diff --git a/frontend/web/src/views/module_system/param/index.vue b/frontend/web/src/views/module_system/param/index.vue
index 357c571c..1f51fa12 100644
--- a/frontend/web/src/views/module_system/param/index.vue
+++ b/frontend/web/src/views/module_system/param/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -114,7 +118,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton
             v-if="dialogVisible.type !== 'detail'"
diff --git a/frontend/web/src/views/module_system/position/index.vue b/frontend/web/src/views/module_system/position/index.vue
index bc23acf0..490acd5b 100644
--- a/frontend/web/src/views/module_system/position/index.vue
+++ b/frontend/web/src/views/module_system/position/index.vue
@@ -26,7 +26,11 @@
       </template>
     </FaSearchBar>
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -128,7 +132,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton
             v-if="dialogVisible.type !== 'detail'"
diff --git a/frontend/web/src/views/module_system/role/components/PermissonDrawer.vue b/frontend/web/src/views/module_system/role/components/PermissonDrawer.vue
index 00e36741..575bbc22 100644
--- a/frontend/web/src/views/module_system/role/components/PermissonDrawer.vue
+++ b/frontend/web/src/views/module_system/role/components/PermissonDrawer.vue
@@ -15,10 +15,10 @@
             class="border-r-1 border-r-[var(--el-border-color-lighter)] b-r-solid h-[100%] p-[20px] box-border"
           >
             <div class="flex items-center">
-              <div style="display: flex; gap: 10px">
-                <div style="width: 10px; background-color: var(--el-color-primary)"></div>
+              <div :style="'display: flex; gap: 10px'">
+                <div :style="'width: 10px; background-color: var(--el-color-primary)'"></div>
                 <div>
-                  <span style="font-size: 16px">数据授权</span>
+                  <span :style="'font-size: 16px'">数据授权</span>
                   <ElTooltip placement="right">
                     <template #content>
                       <span>授权用户可操作的数据范围</span>
@@ -57,7 +57,7 @@
                   default-expand-all
                   :highlight-current="true"
                   :check-strictly="!parentChildLinked"
-                  style="height: calc(100% - 60px); margin-top: 10px; overflow-y: auto"
+                  :style="'height: calc(100% - 60px); margin-top: 10px; overflow-y: auto'"
                   @check="deptTreeCheck"
                 >
                   <template #empty>
@@ -71,10 +71,10 @@
 
         <!-- 菜单权限 -->
         <ElMain>
-          <div style="display: flex; gap: 10px">
-            <div style="width: 10px; background-color: var(--el-color-primary)"></div>
+          <div :style="'display: flex; gap: 10px'">
+            <div :style="'width: 10px; background-color: var(--el-color-primary)'"></div>
             <div>
-              <span style="font-size: 16px">菜单授权</span>
+              <span :style="'font-size: 16px'">菜单授权</span>
               <ElTooltip placement="right">
                 <template #content>
                   <span>授权用户可操作的菜单权限</span>
@@ -125,7 +125,7 @@
               default-expand-all
               :highlight-current="true"
               :check-strictly="!parentChildLinked"
-              style="height: calc(100% - 60px); margin-top: 10px; overflow: auto"
+              :style="'height: calc(100% - 60px); margin-top: 10px; overflow: auto'"
               @check="menuTreeCheck"
             >
               <template #empty>
diff --git a/frontend/web/src/views/module_system/role/index.vue b/frontend/web/src/views/module_system/role/index.vue
index 30d48709..1f3264e8 100644
--- a/frontend/web/src/views/module_system/role/index.vue
+++ b/frontend/web/src/views/module_system/role/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -87,12 +91,12 @@
                   v-for="dept in detailFormData.depts"
                   :key="dept.id"
                   type="info"
-                  style="margin-right: 4px; margin-bottom: 4px"
+                  :style="'margin-right: 4px; margin-bottom: 4px'"
                 >
                   {{ dept.name }}
                 </ElTag>
               </template>
-              <span v-else style="color: var(--el-text-color-placeholder)">-</span>
+              <span v-else :style="'color: var(--el-text-color-placeholder)'">-</span>
             </ElDescriptionsItem>
             <ElDescriptionsItem label="状态" :span="2">
               <ElTag :type="detailFormData.status === '0' ? 'success' : 'danger'">
@@ -139,7 +143,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton
             v-if="dialogVisible.type !== 'detail'"
diff --git a/frontend/web/src/views/module_system/tenant/index.vue b/frontend/web/src/views/module_system/tenant/index.vue
index b6f12880..09003b39 100644
--- a/frontend/web/src/views/module_system/tenant/index.vue
+++ b/frontend/web/src/views/module_system/tenant/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -106,7 +110,7 @@
       </template>
 
       <template #footer>
-        <div class="dialog-footer" style="padding-right: var(--el-dialog-padding-primary)">
+        <div class="dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
           <ElButton @click="handleCloseDialog">取消</ElButton>
           <ElButton
             v-if="dialogVisible.type !== 'detail'"
diff --git a/frontend/web/src/views/module_system/user/index.vue b/frontend/web/src/views/module_system/user/index.vue
index 14797f3a..04c5c060 100644
--- a/frontend/web/src/views/module_system/user/index.vue
+++ b/frontend/web/src/views/module_system/user/index.vue
@@ -4,9 +4,7 @@
     <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"
-      >
+      <div class="user-dept-panel shrink-0 w-58 h-full max-md:w-full max-md:h-auto max-md:mb-5">
         <ElCard class="tree-card fa-card-xs flex flex-col h-full mt-0" shadow="hover">
           <template #header>
             <b>部门</b>
@@ -21,7 +19,7 @@
         </ElCard>
       </div>
 
-      <div class="user-main-panel flex flex-col flex-grow min-w-0 min-h-0">
+      <div class="user-main-panel flex flex-col grow min-w-0 min-h-0">
         <FaSearchBar
           v-show="showSearchBar"
           ref="searchBarRef"
@@ -47,7 +45,11 @@
           </template>
         </FaSearchBar>
 
-        <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+        <ElCard
+          shadow="hover"
+          class="fa-table-card"
+          :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+        >
           <FaTableHeader
             v-model:columns="columnChecks"
             v-model:showSearchBar="showSearchBar"
@@ -176,7 +178,7 @@
           :model="formData"
           :rules="rules"
           label-suffix=":"
-          label-width="auto"
+          label-width="100px"
           label-position="right"
         >
           <ElFormItem label="账号" prop="username">
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 07d5b211..1703f798 100644
--- a/frontend/web/src/views/module_task/cronjob/node/index.vue
+++ b/frontend/web/src/views/module_task/cronjob/node/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
@@ -56,9 +60,9 @@
       @close="handleCloseDialog"
       @opened="handleDialogOpened"
     >
-      <ElSplitter direction="horizontal" style="height: 500px">
+      <ElSplitter direction="horizontal" :style="'height: 500px'">
         <ElSplitterPanel size="300px" :min="200" :max="400">
-          <ElScrollbar style="height: 100%">
+          <ElScrollbar :style="'height: 100%'">
             <FaForm
               :key="nodeFormRenderKey"
               ref="dataFormRef"
@@ -66,7 +70,7 @@
               :items="nodeDialogFormItems"
               :rules="rules"
               label-suffix=":"
-              label-width="auto"
+              label-width="85px"
               :span="24"
               :gutter="16"
               :show-reset="false"
@@ -187,7 +191,7 @@
         :items="executeDialogFormItems"
         :rules="executeRules"
         label-suffix=":"
-        label-width="auto"
+        label-width="85px"
         :span="24"
         :gutter="16"
         :show-reset="false"
@@ -251,7 +255,7 @@
               format="YYYY-MM-DD HH:mm:ss"
               value-format="YYYY-MM-DD HH:mm:ss"
               placeholder="请选择执行时间"
-              style="width: 100%"
+              :style="'width: 100%'"
             />
           </template>
         </template>
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 49954717..82f4051d 100644
--- a/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
+++ b/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
@@ -8,9 +8,9 @@
     @close="handleClose"
   >
     <ElContainer class="workflow-create-content">
-      <ElSplitter direction="horizontal" style="height: 100%">
+      <ElSplitter direction="horizontal" :style="'height: 100%'">
         <ElSplitterPanel size="250px" :min="200" :max="400">
-          <ElScrollbar style="height: 100%">
+          <ElScrollbar :style="'height: 100%'">
             <div class="panel-section">
               <div class="section-title">基础信息</div>
               <FaForm
@@ -29,7 +29,7 @@
               />
             </div>
 
-            <ElDivider style="margin: 4px 0" />
+            <ElDivider :style="'margin: 4px 0'" />
 
             <div class="panel-section">
               <div class="section-title">节点</div>
@@ -44,19 +44,19 @@
                   <ElIcon><Search /></ElIcon>
                 </template>
               </ElInput>
-              <ElSpace direction="vertical" :size="8" fill style="width: 100%; margin-top: 8px">
+              <ElSpace direction="vertical" :size="8" fill :style="'width: 100%; margin-top: 8px'">
                 <ElTag
                   v-for="item in filteredNodes"
                   :key="item.id"
                   :type="getCategoryType(item.category) as any"
                   effect="plain"
                   draggable="true"
-                  style="justify-content: center; cursor: move; user-select: none"
+                  :style="'justify-content: center; cursor: move; user-select: none'"
                   @dragstart="onDragStart($event, item)"
                   @dragend="onDragEnd"
                 >
                   {{ item.name }}
-                  <span style="margin-left: 4px; font-size: 10px; opacity: 0.7">
+                  <span :style="'margin-left: 4px; font-size: 10px; opacity: 0.7'">
                     [{{ getCategoryText(item.category) }}]
                   </span>
                 </ElTag>
@@ -287,8 +287,6 @@ const {
   setEdges,
   setNodes,
   screenToFlowCoordinate,
-  onNodesInitialized,
-  updateNode,
   addNodes,
 } = useVueFlow();
 
@@ -540,14 +538,14 @@ onInit((vueFlowInstance) => {
         if (res.data && res.data.data) {
           nodes.value = res.data.data.nodes || [];
           edges.value = res.data.data.edges || [];
-          saveToHistory(nodes.value, edges.value);
+          saveToHistory(nodes.value as Node[], edges.value as Edge[]);
         }
       } catch {
         ElMessage.error("流程加载失败");
       }
     })();
   } else {
-    saveToHistory(nodes.value, edges.value);
+    saveToHistory(nodes.value as Node[], edges.value as Edge[]);
   }
 });
 
@@ -557,7 +555,7 @@ onConnect((connection) => {
     type: edgeStyle.value,
     animated: edgeAnimated.value,
   });
-  saveToHistory(nodes.value, edges.value);
+  saveToHistory(nodes.value as Node[], edges.value as Edge[]);
 });
 
 function handleValidate() {
@@ -593,13 +591,13 @@ function handleValidate() {
 
   if (errors.length > 0) {
     ElMessageBox.alert(
-      `<div style="max-height: 300px; overflow-y: auto;">
+      `<div :style="'max-height: 300px; overflow-y: auto;'">
         <strong>错误 (${errors.length}):</strong>
-        <ul>${errors.map((e) => `<li style="color: #f56c6c;">${e}</li>`).join("")}</ul>
+        <ul>${errors.map((e) => `<li :style="'color: #f56c6c;'">${e}</li>`).join("")}</ul>
         ${
           warnings.length > 0
             ? `<strong>警告 (${warnings.length}):</strong>
-        <ul>${warnings.map((w) => `<li style="color: #e6a23c;">${w}</li>`).join("")}</ul>`
+        <ul>${warnings.map((w) => `<li :style="'color: #e6a23c;'">${w}</li>`).join("")}</ul>`
             : ""
         }
       </div>`,
@@ -612,9 +610,9 @@ function handleValidate() {
     throw new Error("验证失败");
   } else if (warnings.length > 0) {
     ElMessageBox.alert(
-      `<div style="max-height: 300px; overflow-y: auto;">
+      `<div :style="'max-height: 300px; overflow-y: auto;'">
         <strong>流程验证通过，但有警告 (${warnings.length}):</strong>
-        <ul>${warnings.map((w) => `<li style="color: #e6a23c;">${w}</li>`).join("")}</ul>
+        <ul>${warnings.map((w) => `<li :style="'color: #e6a23c;'">${w}</li>`).join("")}</ul>
       </div>`,
       "流程验证结果",
       {
@@ -650,7 +648,7 @@ const onNodeClick = (event: any) => {
 };
 
 function onDrop(event: DragEvent) {
-  handleNodeDrop(event, screenToFlowCoordinate, onNodesInitialized, updateNode, addNodes);
+  handleNodeDrop(event, screenToFlowCoordinate, addNodes);
 }
 
 function handleClosePanel() {
@@ -663,7 +661,7 @@ function handleSaveNode(data: any) {
   if (!selectedNode.value) return;
   const nodeId = selectedNode.value!.id;
   if (nodeId && updateNodeData(nodeId, data, getNodes, setNodes)) {
-    saveToHistory(nodes.value, edges.value);
+    saveToHistory(nodes.value as Node[], edges.value as Edge[]);
   }
 }
 
@@ -682,7 +680,7 @@ function handleDeleteNode() {
       deleteNode(nodeId, getNodes, setNodes, getEdges, setEdges);
       ElMessage.success("节点删除成功");
       handleClosePanel();
-      saveToHistory(nodes.value, edges.value);
+      saveToHistory(nodes.value as Node[], edges.value as Edge[]);
     } catch {
       // 用户取消
     }
@@ -693,7 +691,7 @@ function handleSaveEdge(data: any) {
   if (!selectedEdge.value) return;
   const edgeId = selectedEdge.value!.id;
   if (edgeId && updateEdgeData(edgeId, data, getEdges, setEdges)) {
-    saveToHistory(nodes.value, edges.value);
+    saveToHistory(nodes.value as Node[], edges.value as Edge[]);
   }
 }
 
@@ -712,7 +710,7 @@ function handleDeleteEdge() {
       deleteEdge(edgeId, getEdges, setEdges);
       ElMessage.success("连线删除成功");
       handleClosePanel();
-      saveToHistory(nodes.value, edges.value);
+      saveToHistory(nodes.value as Node[], edges.value as Edge[]);
     } catch {
       // 用户取消
     }
@@ -788,7 +786,9 @@ const handleClose = () => {
 };
 
 // 历史记录管理
-const history = ref<{ nodes: Node[]; edges: Edge[] }[]>([]);
+// 避免 Vue Flow 泛型导致 TypeScript 深度递归，用 object[] 替代
+type HistorySnapshot = { nodes: object[]; edges: object[] };
+const history = ref<HistorySnapshot[]>([]);
 const historyIndex = ref(-1);
 
 function saveToHistory(nodesData: Node[], edgesData: Edge[]) {
@@ -819,8 +819,6 @@ function onDragOver(event: DragEvent) {
 function handleNodeDrop(
   event: DragEvent,
   screenToFlowCoordinate: (position: { x: number; y: number }) => { x: number; y: number },
-  onNodesInitialized: (callback: () => void) => void,
-  updateNode: (id: string, node: Partial<Node>) => void,
   addNodes: (nodes: Node[]) => void
 ) {
   const data = event.dataTransfer?.getData("application/vueflow");
@@ -970,6 +968,7 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
 
 .canvas-container {
   flex: 1;
+  min-height: 400px;
   overflow: hidden;
 }
 
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 da785995..e2c85733 100644
--- a/frontend/web/src/views/module_task/workflow/definition/index.vue
+++ b/frontend/web/src/views/module_task/workflow/definition/index.vue
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
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 c94a211e..959c4b9b 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
@@ -17,7 +17,11 @@
       @reset="onResetSearch"
     />
 
-    <ElCard class="fa-table-card" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
+    <ElCard
+      shadow="hover"
+      class="fa-table-card"
+      :style="{ 'margin-top': showSearchBar ? '12px' : '0' }"
+    >
       <FaTableHeader
         v-model:columns="columnChecks"
         v-model:showSearchBar="showSearchBar"
diff --git a/frontend/web/tsconfig.json b/frontend/web/tsconfig.json
index c112c68b..d1948a39 100755
--- a/frontend/web/tsconfig.json
+++ b/frontend/web/tsconfig.json
@@ -4,22 +4,21 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "lib": ["esnext", "dom"],
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@views": ["src/views"],
-      "@views/*": ["src/views/*"],
-      "@imgs": ["src/assets/images"],
-      "@imgs/*": ["src/assets/images/*"],
-      "@icons": ["src/assets/images/svg"],
-      "@icons/*": ["src/assets/images/svg/*"],
-      "@utils": ["src/utils"],
-      "@utils/*": ["src/utils/*"],
-      "@stores": ["src/store"],
-      "@stores/*": ["src/store/*"],
-      "@styles": ["src/styles"],
-      "@plugins/*": ["src/plugins/*"],
-      "@styles/*": ["src/styles/*"]
+      "@/*": ["./src/*"],
+      "@views": ["./src/views"],
+      "@views/*": ["./src/views/*"],
+      "@imgs": ["./src/assets/images"],
+      "@imgs/*": ["./src/assets/images/*"],
+      "@icons": ["./src/assets/images/svg"],
+      "@icons/*": ["./src/assets/images/svg/*"],
+      "@utils": ["./src/utils"],
+      "@utils/*": ["./src/utils/*"],
+      "@stores": ["./src/store"],
+      "@stores/*": ["./src/store/*"],
+      "@styles": ["./src/styles"],
+      "@plugins/*": ["./src/plugins/*"],
+      "@styles/*": ["./src/styles/*"]
     },
     "strict": true,
     "skipLibCheck": true,
diff --git a/frontend/web/vite.config.ts b/frontend/web/vite.config.ts
index 238be8fd..05406c2d 100755
--- a/frontend/web/vite.config.ts
+++ b/frontend/web/vite.config.ts
@@ -1,5 +1,5 @@
 import fs from "node:fs";
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig, loadEnv, type Plugin } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import { fileURLToPath } from "url";
@@ -187,7 +187,19 @@ export default ({ mode }: { mode: string }) => {
                 .split("node_modules/")
                 .pop()
                 ?.split("/")[0];
-              if (!module || ["birpc", "hookable", "tslib", "copy-anything"].includes(module))
+              // 跳过被 tree-shake 清空的模块，避免生成空 chunk
+              if (
+                !module ||
+                [
+                  "birpc",
+                  "hookable",
+                  "tslib",
+                  "copy-anything",
+                  "danmu.js",
+                  "lodash-unified",
+                  "perfect-debounce",
+                ].includes(module)
+              )
                 return;
               return module;
             }
@@ -210,6 +222,22 @@ export default ({ mode }: { mode: string }) => {
       },
     },
     plugins: [
+      // @vueuse/core 已发布产物中存在位置无效的 /* #__PURE__ */ 注释（单独成行或包裹对象字面量），
+      // 导致 Rollup 无法识别而告警。在构建阶段修复这些注释位置，从根源消除告警。
+      {
+        name: "fix-vueuse-pure-annotations",
+        enforce: "pre",
+        transform(code: string, id: string) {
+          if (id.includes("@vueuse/core") && id.endsWith(".js")) {
+            // 移除单独成行的 /* #__PURE__ */（不在函数调用前，Rollup 无法识别）
+            code = code.replace(/^\s*\/\* #__PURE__ \*\/\s*$/gm, "");
+            // 修复括号内包裹对象字面量的 /* #__PURE__ */，如 const x = (/* #__PURE__ */ { ... })
+            code = code.replace(/\(\/\* #__PURE__ \*\/\s*\{/g, "({");
+            return code;
+          }
+          return null;
+        },
+      } satisfies Plugin,
       vue(),
       tailwindcss(),
       AutoImport({