2026-03-11 11:06:20 +00:00
6 changed files with 391 additions and 20 deletions
@@ -0,0 +1,133 @@
 # 技术契约与架构设计书：前端加载性能优化
 **版本**：v1.0  
 **日期**：2026-03-11  
 **作者**：system-architect  
 **状态**：待 task-coder 实施
 ---
 ## 一、问题诊断（根因分析）
 ### 1.1 每次页面跳转都重新加载 Element Plus CSS
 **根因**：`vite.config.ts` 中 `ElementPlusResolver({ importStyle: 'css' })` 配置让 `unplugin-vue-components` 在每个使用到 Element Plus 组件的 `.vue` 文件中注入独立的 CSS import（`el-dropdown-menu.css`、`el-button-group.css` 等）。与此同时 `main.ts` 还保留了 `import 'element-plus/dist/index.css'`（全量 CSS），两者并存形成**双重加载**。
 **表现**：网络面板中看到 `el-dropdown-menu.css`、`el-button-group.css`、`element_plus_es_components_loading_s...` 等碎片 CSS 在每次路由切换时被重新请求。
 **正确做法**：二选一——
 - **方案 A（推荐）**：继续使用 `element-plus/dist/index.css` 全量 CSS（已在 main.ts 中），关闭 resolver 的 `importStyle`。全量 CSS 首次加载后长期缓存，零碎的 per-component CSS 完全消失。
 - 方案 B：彻底删除 `element-plus/dist/index.css`，完全依赖 resolver 按需注入。需要确保每个组件都被 resolver 覆盖，否则样式丢失。
 ### 1.2 字体每次导航重复加载（视觉上的误判）
 **根因**：浏览器缓存策略问题。`@fontsource/noto-sans-sc` 输出的 woff2 文件名**不含内容 hash**（如 `noto-sans-sc-116-400-normal.woff2`），而 Vite dev 服务器对字体文件**不设置强缓存 header**（`Cache-Control: no-cache`）。结果是浏览器每次导航都发起带 If-None-Match 的条件请求，即使返回 304，devtools 也会显示为"加载"。
 **生产环境额外问题**：vite.config.ts 的 `assetFileNames` 对字体匹配正确会加 hash，但 `@fontsource` 的 CSS 中 `src` 路径是相对路径，构建时 Vite 自动处理后会有 hash，缓存正常。
 ### 1.3 PangMenZhengDao.ttf：1004 KB，仅 LicenseSearch.vue 使用
 这是最严重的单点问题。一个装饰性标题字体（仅 `LicenseSearch.vue` 的 `.platform-title` 用到）以 **1 MB 的 TTF 格式**全局加载。
 - 全局加载：`main.ts` → `fonts.css` → 预加载所有字体
 - 即使用户从未访问授权查询页，这 1 MB 也会被下载
 ### 1.4 Noto Sans SC：两个字重 = 每字重 ~15 个 woff2 分片
 400 + 700 两个字重，每次页面含中文时浏览器匹配 unicode-range 触发下载，共约 20-30 个分片文件（每个 25-33 KB）。这是 CJK 字体的固有代价，无法消除，但可以：
 - 替换为系统字体（零网络开销）
 - 转为自托管 WOFF2 子集（仅保留常用汉字）
 ---
 ## 二、优化方案设计
 ### 方案一（必做）：移除 ElementPlusResolver CSS 双重加载
 **影响层**：构建配置层  
 **改动意图**：将 `importStyle: 'css'` 改为 `importStyle: false`，消除每个组件的碎片 CSS 请求，改由全局 `element-plus/dist/index.css` 统一提供样式。
 **数据收益**：消除约 10-20 个 CSS 请求（每次路由跳转）。
 ---
 ### 方案二（必做）：PangMenZhengDao 懒加载隔离
 **影响层**：CSS 层 + 字体加载策略层  
 **改动意图**：
 1. 从 `fonts.css` 中删除 `@font-face` 全局声明
 2. 将 `@font-face` 声明移入 `LicenseSearch.vue` 的 `<style scoped>`，利用路由懒加载天然隔离，仅在用户访问该页时触发字体下载
 **数据收益**：首屏及非授权查询页节省 1 MB 传输。
 ---
 ### 方案三（推荐）：Noto Sans SC → 系统字体降级
 **影响层**：CSS 变量层（variables.scss）  
 **改动意图**：将 `$font-family-primary` 中的 `'Noto Sans SC'` 降级为第二选择，保留兜底。同时评估是否保留 `@fontsource` 导入（影响跨平台一致性）。
 如果要保留字体一致性，最小化方案是：
 - **只导入 400**（删除 700 的导入），weight:700 的文字交给浏览器合成（faux-bold），视觉差异极小
 - 用 `font-display: optional` 替代 `swap` 以避免 FOUT
 **数据收益**：减少 ~50% 的字体请求数（约 15 个）。
 ---
 ### 方案四（加分）：开发服务器字体缓存优化
 **影响层**：vite.config.ts server 配置  
 **改动意图**：为 dev server 添加字体文件 `Cache-Control` 响应头，避免浏览器 devtools 中字体反复显示为"加载中"的视觉误导。
 ---
 ## 三、数据模型层（Schema）
 无数据库变更。
 ---
 ## 四、后端服务层（API）
 无需改动。
 ---
 ## 五、前端交互层（View）— 目标文件清单
 | # | 文件路径 | 操作 | 改动说明 |
 |---|---------|------|---------|
 | 1 | `frontend/vite.config.ts` | **修改** | `ElementPlusResolver` 的 `importStyle: 'css'` → `false`；添加 dev server font cache header |
 | 2 | `frontend/src/assets/styles/fonts.css` | **修改** | 删除 `PangMenZhengDao` 的 `@font-face` 块 |
 | 3 | `frontend/src/views/Licenses/LicenseSearch.vue` | **修改** | 在 `<style scoped>` 顶部加入 `PangMenZhengDao` 的 `@font-face` 声明 |
 | 4 | `frontend/src/main.ts` | **修改** | 删除 `@fontsource/noto-sans-sc/700.css` 导入（可选，评估后决定）|
 **共 4 个文件，不超过 task-coder 单批限制（5个）。**
 ---
 ## 六、实施优先级
 ```
 P0（必做，无副作用）:
  - 文件1：ElementPlusResolver importStyle fix
  - 文件2 + 文件3：PangMenZhengDao 懒加载隔离
 P1（可选，有视觉权衡）:
  - 文件4：删除 700 字重导入
 ```
 ---
 ## 七、预期收益对比
 | 指标 | 优化前 | 优化后（P0） |
 |------|-------|------------|
 | 路由跳转触发的 CSS 请求 | ~15 个碎片 CSS | 0 |
 | 非授权查询页的字体传输 | 1 MB (PangMenZhengDao) | 0 |
 | 首次访问总字体请求数 | ~35 个 | ~20 个 |
 ---
 *→ 移交 `task-coder` 按上述文件清单实施。*
@@ -42,6 +42,8 @@
    "sass": "^1.89.2",
    "terser": "^5.43.1",
    "typescript": "^5.8.3",
    "unplugin-auto-import": "^21.0.0",
    "unplugin-vue-components": "^31.0.0",
    "vite": "^5.0.0",
    "vite-plugin-compression": "^0.5.1",
    "vitest": "^2.0.0",
@@ -78,6 +78,12 @@ importers:
      typescript:
        specifier: ^5.8.3
        version: 5.9.3
      unplugin-auto-import:
        specifier: ^21.0.0
        version: 21.0.0(@vueuse/core@10.11.1(vue@3.5.27(typescript@5.9.3)))
      unplugin-vue-components:
        specifier: ^31.0.0
        version: 31.0.0(vue@3.5.27(typescript@5.9.3))
      vite:
        specifier: ^5.0.0
        version: 5.4.21(@types/node@22.19.9)(sass@1.97.3)(terser@5.46.0)
@@ -318,6 +324,9 @@ packages:
  '@jridgewell/gen-mapping@0.3.13':
    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
  '@jridgewell/remapping@2.3.5':
    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
  '@jridgewell/resolve-uri@3.1.2':
    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
    engines: {node: '>=6.0.0'}
@@ -816,6 +825,11 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true
  acorn@8.16.0:
    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
    engines: {node: '>=0.4.0'}
    hasBin: true
  ajv@6.12.6:
    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -897,6 +911,10 @@ packages:
    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
    engines: {node: '>= 14.16.0'}
  chokidar@5.0.0:
    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
    engines: {node: '>= 20.19.0'}
  cliui@8.0.1:
    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
    engines: {node: '>=12'}
@@ -918,6 +936,12 @@ packages:
  concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
  confbox@0.1.8:
    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
  confbox@0.2.4:
    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
  cross-spawn@7.0.6:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}
@@ -1023,6 +1047,10 @@ packages:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
    engines: {node: '>=10'}
  escape-string-regexp@5.0.0:
    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
    engines: {node: '>=12'}
  eslint-config-prettier@9.1.2:
    resolution: {integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==}
    hasBin: true
@@ -1105,6 +1133,9 @@ packages:
    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
    engines: {node: '>=12.0.0'}
  exsolve@1.0.8:
    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
  fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@@ -1300,6 +1331,9 @@ packages:
  isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
  js-tokens@9.0.1:
    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
  js-yaml@4.1.1:
    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
    hasBin: true
@@ -1323,6 +1357,10 @@ packages:
    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
    engines: {node: '>= 0.8.0'}
  local-pkg@1.1.2:
    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
    engines: {node: '>=14'}
  locate-path@6.0.0:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}
@@ -1379,6 +1417,9 @@ packages:
    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
    engines: {node: '>=16 || 14 >=14.17'}
  mlly@1.8.1:
    resolution: {integrity: sha512-SnL6sNutTwRWWR/vcmCYHSADjiEesp5TGQQ0pXyLhW5IoeibRlF/CbSLailbB3CNqJUk9cVJ9dUDnbD7GrcHBQ==}
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -1402,6 +1443,9 @@ packages:
  nth-check@2.1.1:
    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
  obug@2.1.1:
    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
  once@1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
@@ -1447,6 +1491,9 @@ packages:
  pathe@1.1.2:
    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
  pathe@2.0.3:
    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
  pathval@2.0.1:
    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
    engines: {node: '>= 14.16'}
@@ -1471,6 +1518,12 @@ packages:
      typescript:
        optional: true
  pkg-types@1.3.1:
    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
  pkg-types@2.3.0:
    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
  postcss-selector-parser@6.1.2:
    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
    engines: {node: '>=4'}
@@ -1499,6 +1552,9 @@ packages:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}
  quansync@0.2.11:
    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
  queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@@ -1506,6 +1562,10 @@ packages:
    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
    engines: {node: '>= 14.18.0'}
  readdirp@5.0.0:
    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
    engines: {node: '>= 20.19.0'}
  require-directory@2.1.1:
    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
    engines: {node: '>=0.10.0'}
@@ -1549,6 +1609,9 @@ packages:
    engines: {node: '>=14.0.0'}
    hasBin: true
  scule@1.3.0:
    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
  semver@7.7.4:
    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
    engines: {node: '>=10'}
@@ -1602,6 +1665,9 @@ packages:
    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
    engines: {node: '>=8'}
  strip-literal@3.1.0:
    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
  supports-color@7.2.0:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}
@@ -1672,13 +1738,50 @@ packages:
    engines: {node: '>=14.17'}
    hasBin: true
  ufo@1.6.3:
    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
  undici-types@6.21.0:
    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
  unimport@5.7.0:
    resolution: {integrity: sha512-njnL6sp8lEA8QQbZrt+52p/g4X0rw3bnGGmUcJnt1jeG8+iiqO779aGz0PirCtydAIVcuTBRlJ52F0u46z309Q==}
    engines: {node: '>=18.12.0'}
  universalify@2.0.1:
    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
    engines: {node: '>= 10.0.0'}
  unplugin-auto-import@21.0.0:
    resolution: {integrity: sha512-vWuC8SwqJmxZFYwPojhOhOXDb5xFhNNcEVb9K/RFkyk/3VnfaOjzitWN7v+8DEKpMjSsY2AEGXNgt6I0yQrhRQ==}
    engines: {node: '>=20.19.0'}
    peerDependencies:
      '@nuxt/kit': ^4.0.0
      '@vueuse/core': '*'
    peerDependenciesMeta:
      '@nuxt/kit':
        optional: true
      '@vueuse/core':
        optional: true
  unplugin-utils@0.3.1:
    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
    engines: {node: '>=20.19.0'}
  unplugin-vue-components@31.0.0:
    resolution: {integrity: sha512-4ULwfTZTLuWJ7+S9P7TrcStYLsSRkk6vy2jt/WTfgUEUb0nW9//xxmrfhyHUEVpZ2UKRRwfRb8Yy15PDbVZf+Q==}
    engines: {node: '>=20.19.0'}
    peerDependencies:
      '@nuxt/kit': ^3.2.2 || ^4.0.0
      vue: ^3.0.0
    peerDependenciesMeta:
      '@nuxt/kit':
        optional: true
  unplugin@2.3.11:
    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
    engines: {node: '>=18.12.0'}
  uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -1824,6 +1927,9 @@ packages:
      typescript:
        optional: true
  webpack-virtual-modules@0.6.2:
    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
  which@2.0.2:
    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
    engines: {node: '>= 8'}
@@ -2023,6 +2129,11 @@ snapshots:
      '@jridgewell/sourcemap-codec': 1.5.5
      '@jridgewell/trace-mapping': 0.3.31
  '@jridgewell/remapping@2.3.5':
    dependencies:
      '@jridgewell/gen-mapping': 0.3.13
      '@jridgewell/trace-mapping': 0.3.31
  '@jridgewell/resolve-uri@3.1.2': {}
  '@jridgewell/source-map@0.3.11':
@@ -2554,6 +2665,8 @@ snapshots:
  acorn@8.15.0: {}
  acorn@8.16.0: {}
  ajv@6.12.6:
    dependencies:
      fast-deep-equal: 3.1.3
@@ -2634,6 +2747,10 @@ snapshots:
    dependencies:
      readdirp: 4.1.2
  chokidar@5.0.0:
    dependencies:
      readdirp: 5.0.0
  cliui@8.0.1:
    dependencies:
      string-width: 4.2.3
@@ -2654,6 +2771,10 @@ snapshots:
  concat-map@0.0.1: {}
  confbox@0.1.8: {}
  confbox@0.2.4: {}
  cross-spawn@7.0.6:
    dependencies:
      path-key: 3.1.1
@@ -2773,6 +2894,8 @@ snapshots:
  escape-string-regexp@4.0.0: {}
  escape-string-regexp@5.0.0: {}
  eslint-config-prettier@9.1.2(eslint@8.57.1):
    dependencies:
      eslint: 8.57.1
@@ -2889,6 +3012,8 @@ snapshots:
  expect-type@1.3.0: {}
  exsolve@1.0.8: {}
  fast-deep-equal@3.1.3: {}
  fast-diff@1.3.0: {}
@@ -3067,6 +3192,8 @@ snapshots:
  isexe@2.0.0: {}
  js-tokens@9.0.1: {}
  js-yaml@4.1.1:
    dependencies:
      argparse: 2.0.1
@@ -3092,6 +3219,12 @@ snapshots:
      prelude-ls: 1.2.1
      type-check: 0.4.0
  local-pkg@1.1.2:
    dependencies:
      mlly: 1.8.1
      pkg-types: 2.3.0
      quansync: 0.2.11
  locate-path@6.0.0:
    dependencies:
      p-locate: 5.0.0
@@ -3139,6 +3272,13 @@ snapshots:
    dependencies:
      brace-expansion: 2.0.2
  mlly@1.8.1:
    dependencies:
      acorn: 8.16.0
      pathe: 2.0.3
      pkg-types: 1.3.1
      ufo: 1.6.3
  ms@2.1.3: {}
  muggle-string@0.4.1: {}
@@ -3156,6 +3296,8 @@ snapshots:
    dependencies:
      boolbase: 1.0.0
  obug@2.1.1: {}
  once@1.4.0:
    dependencies:
      wrappy: 1.0.2
@@ -3199,6 +3341,8 @@ snapshots:
  pathe@1.1.2: {}
  pathe@2.0.3: {}
  pathval@2.0.1: {}
  picocolors@1.1.1: {}
@@ -3217,6 +3361,18 @@ snapshots:
    transitivePeerDependencies:
      - '@vue/composition-api'
  pkg-types@1.3.1:
    dependencies:
      confbox: 0.1.8
      mlly: 1.8.1
      pathe: 2.0.3
  pkg-types@2.3.0:
    dependencies:
      confbox: 0.2.4
      exsolve: 1.0.8
      pathe: 2.0.3
  postcss-selector-parser@6.1.2:
    dependencies:
      cssesc: 3.0.0
@@ -3240,10 +3396,14 @@ snapshots:
  punycode@2.3.1: {}
  quansync@0.2.11: {}
  queue-microtask@1.2.3: {}
  readdirp@4.1.2: {}
  readdirp@5.0.0: {}
  require-directory@2.1.1: {}
  resolve-from@4.0.0: {}
@@ -3306,6 +3466,8 @@ snapshots:
    optionalDependencies:
      '@parcel/watcher': 2.5.6
  scule@1.3.0: {}
  semver@7.7.4: {}
  shebang-command@2.0.0:
@@ -3345,6 +3507,10 @@ snapshots:
  strip-json-comments@3.1.1: {}
  strip-literal@3.1.0:
    dependencies:
      js-tokens: 9.0.1
  supports-color@7.2.0:
    dependencies:
      has-flag: 4.0.0
@@ -3399,10 +3565,65 @@ snapshots:
  typescript@5.9.3: {}
  ufo@1.6.3: {}
  undici-types@6.21.0: {}
  unimport@5.7.0:
    dependencies:
      acorn: 8.16.0
      escape-string-regexp: 5.0.0
      estree-walker: 3.0.3
      local-pkg: 1.1.2
      magic-string: 0.30.21
      mlly: 1.8.1
      pathe: 2.0.3
      picomatch: 4.0.3
      pkg-types: 2.3.0
      scule: 1.3.0
      strip-literal: 3.1.0
      tinyglobby: 0.2.15
      unplugin: 2.3.11
      unplugin-utils: 0.3.1
  universalify@2.0.1: {}
  unplugin-auto-import@21.0.0(@vueuse/core@10.11.1(vue@3.5.27(typescript@5.9.3))):
    dependencies:
      local-pkg: 1.1.2
      magic-string: 0.30.21
      picomatch: 4.0.3
      unimport: 5.7.0
      unplugin: 2.3.11
      unplugin-utils: 0.3.1
    optionalDependencies:
      '@vueuse/core': 10.11.1(vue@3.5.27(typescript@5.9.3))
  unplugin-utils@0.3.1:
    dependencies:
      pathe: 2.0.3
      picomatch: 4.0.3
  unplugin-vue-components@31.0.0(vue@3.5.27(typescript@5.9.3)):
    dependencies:
      chokidar: 5.0.0
      local-pkg: 1.1.2
      magic-string: 0.30.21
      mlly: 1.8.1
      obug: 2.1.1
      picomatch: 4.0.3
      tinyglobby: 0.2.15
      unplugin: 2.3.11
      unplugin-utils: 0.3.1
      vue: 3.5.27(typescript@5.9.3)
  unplugin@2.3.11:
    dependencies:
      '@jridgewell/remapping': 2.3.5
      acorn: 8.15.0
      picomatch: 4.0.3
      webpack-virtual-modules: 0.6.2
  uri-js@4.4.1:
    dependencies:
      punycode: 2.3.1
@@ -3555,6 +3776,8 @@ snapshots:
    optionalDependencies:
      typescript: 5.9.3
  webpack-virtual-modules@0.6.2: {}
  which@2.0.2:
    dependencies:
      isexe: 2.0.0
@@ -30,7 +30,7 @@ $font-size-small: 12px;        // 改为12px
 $font-size-extra-small: 12px;
 // 字体系列
-$font-family-primary: 'Noto Sans SC', 'Source Han Sans CN', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Source Han Sans CN', sans-serif;
 // 字体粗细
 $font-weight-primary: 500;
@@ -10,11 +10,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 // Noto Sans SC 字体（@fontsource 提供预优化子集化版本）
 import '@fontsource/noto-sans-sc/400.css'
 import '@fontsource/noto-sans-sc/500.css'
 import '@fontsource/noto-sans-sc/700.css'
 // 全局样式系统
 import './assets/styles/fonts.css' // 其他本地字体
 import './assets/styles/global.scss'
@@ -25,10 +20,9 @@ import pinia from './store'
 import { useAppStore } from './store/modules/app'
 import { useUserStore } from './store/modules/user'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import i18n, { getCurrentElementLocale } from './i18n'
+import i18n from './i18n'
 const app = createApp(App)
@@ -38,10 +32,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
 }
 // 正确配置Element Plus语言包
 app.use(ElementPlus, {
  locale: getCurrentElementLocale()
 })
 app.use(pinia)
 app.use(i18n)
 app.use(router)
@@ -4,6 +4,9 @@ import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import { visualizer } from 'rollup-plugin-visualizer' // 打包分析插件
 import { constants } from 'zlib' // 静态引入zlib常量
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 // 获取当前时间戳，用于构建输出的文件名
 const Timestamp = new Date().getTime();
@@ -69,6 +72,19 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
        }
      }),
      // Auto-import Element Plus components from templates
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'css' })],
        dts: false
      }),
      // Auto-import Element Plus APIs (ElMessage, ElNotification, etc.)
      AutoImport({
        resolvers: [ElementPlusResolver()],
        imports: ['vue', 'vue-router', 'pinia'],
        dts: false
      }),
      // 打包分析插件（仅在显式启用时生效；容器/CI 默认不打开浏览器）
      enableVisualizer && visualizer({ open: false })
    ].filter(Boolean), // 过滤掉false的插件
@@ -100,9 +116,14 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
        'element-plus',
        '@element-plus/icons-vue',
        'axios',
-        'vue-i18n'
+        'vue-i18n',
-      ],
+        'echarts/core',
-      exclude: ['@vueuse/core'] // 排除某些包的预构建
+        'echarts/charts',
        'echarts/components',
        'echarts/renderers',
        'vue-echarts',
        '@vueuse/core'
      ]
    },
    // 模块解析配置
@@ -152,15 +173,17 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
        output: {
          // 优化的手动分块策略
          manualChunks: {
-            // Vue核心
+            // Vue core
            vue: ['vue', 'vue-router', 'pinia'],
-            // Element Plus相关
+            // Element Plus (tree-shaken via auto-import, but base bundle still needed)
            elementPlus: ['element-plus'],
-            // Element Plus图标
+            // Element Plus icons
            elementIcons: ['@element-plus/icons-vue'],
-            // 工具库
+            // ECharts (large library, isolated for better caching)
            echarts: ['echarts', 'vue-echarts', 'zrender'],
            // Utilities
            utils: ['axios'],
-            // 其他第三方库单独打包
+            // i18n
            vendor: ['vue-i18n']
          },
          // 输出文件命名规则（优化缓存策略）