From 96f0f69ac38abdc0494eb67bad54438c7a8d8987 Mon Sep 17 00:00:00 2001
From: fei550 <1420031550@qq.com>
Date: Tue, 28 Jul 2026 21:38:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=95=B4=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |    4 +
 next/.env.example                             |    2 +
 next/ARCHITECTURE.md                          |   27 +
 next/README.md                                |  217 +--
 next/package-lock.json                        | 1263 +++++++++++++++++
 next/package.json                             |    9 +-
 next/playwright.config.ts                     |   11 +
 next/src/App.vue                              |   86 +-
 next/src/api/dashboardApi.ts                  |   21 +
 next/src/api/endpoints.ts                     |   14 +
 .../{services/http.ts => api/httpClient.ts}   |    4 +-
 next/src/api/projectApi.ts                    |    6 +
 next/src/{ => assets}/styles/next.css         |   78 +
 next/src/components/{ => base}/EChart.vue     |    0
 .../{ => features/drilldown}/DrillModal.vue   |  195 ++-
 .../monitoring}/IndicatorAnalysis.vue         |    2 +-
 .../features/monitoring/KpiCard.test.ts       |   12 +
 .../{ => features/monitoring}/KpiCard.vue     |    0
 .../{ => features/monitoring}/MetricStrip.vue |    2 +-
 .../project/ProjectMetricSnapshotModal.vue    |   92 ++
 .../composables/useDrilldownActions.test.ts   |   63 +
 next/src/composables/useDrilldownActions.ts   |   47 +
 next/src/composables/useMonitoringPage.ts     |   25 +
 next/src/composables/useProjectPage.ts        |   25 +
 next/src/layouts/DashboardLayout.vue          |   64 +
 next/src/main.ts                              |    6 +-
 .../EnterprisePage.vue}                       |  133 +-
 .../GroupView.vue => pages/GroupPage.vue}     |  144 +-
 next/src/pages/ProjectPage.vue                |   73 +
 next/src/router/index.ts                      |   13 +-
 next/src/stores/dashboardStore.ts             |  172 ---
 next/src/stores/drilldownStore.test.ts        |   52 +
 next/src/stores/drilldownStore.ts             |   90 ++
 next/src/stores/filterStore.test.ts           |   12 +
 next/src/stores/filterStore.ts                |   30 +
 next/src/stores/monitoringStore.test.ts       |   29 +
 next/src/stores/monitoringStore.ts            |   52 +
 next/src/stores/projectStore.test.ts          |   29 +
 next/src/stores/projectStore.ts               |   40 +
 next/src/types/api.ts                         |   15 +
 .../types/{dashboardTypes.ts => dashboard.ts} |   19 +-
 next/src/types/drilldown.ts                   |   29 +
 next/src/types/project.ts                     |   47 +
 .../utils/adapters/drilldownAdapter.test.ts   |   21 +
 next/src/utils/adapters/drilldownAdapter.ts   |   38 +
 .../adapters/monitoringAdapter.test.ts}       |    2 +-
 .../adapters/monitoringAdapter.ts}            |    2 +-
 .../src/utils/adapters/projectAdapter.test.ts |   21 +
 next/src/utils/adapters/projectAdapter.ts     |   67 +
 next/src/utils/charts/drilldownCharts.ts      |   15 +
 next/src/utils/charts/monitoringCharts.ts     |   51 +
 next/src/{config => utils}/dashboardConfig.ts |   24 +-
 next/src/views/ProjectView.vue                |  154 --
 next/src/vite-env.d.ts                        |    9 +
 next/tsconfig.json                            |    2 +
 next/vite.config.ts                           |    4 +
 next/vitest.config.ts                         |   14 +
 57 files changed, 2802 insertions(+), 876 deletions(-)
 create mode 100644 next/.env.example
 create mode 100644 next/ARCHITECTURE.md
 create mode 100644 next/playwright.config.ts
 create mode 100644 next/src/api/dashboardApi.ts
 create mode 100644 next/src/api/endpoints.ts
 rename next/src/{services/http.ts => api/httpClient.ts} (95%)
 create mode 100644 next/src/api/projectApi.ts
 rename next/src/{ => assets}/styles/next.css (70%)
 rename next/src/components/{ => base}/EChart.vue (100%)
 rename next/src/components/{ => features/drilldown}/DrillModal.vue (71%)
 rename next/src/components/{ => features/monitoring}/IndicatorAnalysis.vue (97%)
 create mode 100644 next/src/components/features/monitoring/KpiCard.test.ts
 rename next/src/components/{ => features/monitoring}/KpiCard.vue (100%)
 rename next/src/components/{ => features/monitoring}/MetricStrip.vue (93%)
 create mode 100644 next/src/components/features/project/ProjectMetricSnapshotModal.vue
 create mode 100644 next/src/composables/useDrilldownActions.test.ts
 create mode 100644 next/src/composables/useDrilldownActions.ts
 create mode 100644 next/src/composables/useMonitoringPage.ts
 create mode 100644 next/src/composables/useProjectPage.ts
 create mode 100644 next/src/layouts/DashboardLayout.vue
 rename next/src/{views/EnterpriseView.vue => pages/EnterprisePage.vue} (58%)
 rename next/src/{views/GroupView.vue => pages/GroupPage.vue} (58%)
 create mode 100644 next/src/pages/ProjectPage.vue
 delete mode 100644 next/src/stores/dashboardStore.ts
 create mode 100644 next/src/stores/drilldownStore.test.ts
 create mode 100644 next/src/stores/drilldownStore.ts
 create mode 100644 next/src/stores/filterStore.test.ts
 create mode 100644 next/src/stores/filterStore.ts
 create mode 100644 next/src/stores/monitoringStore.test.ts
 create mode 100644 next/src/stores/monitoringStore.ts
 create mode 100644 next/src/stores/projectStore.test.ts
 create mode 100644 next/src/stores/projectStore.ts
 create mode 100644 next/src/types/api.ts
 rename next/src/types/{dashboardTypes.ts => dashboard.ts} (89%)
 create mode 100644 next/src/types/drilldown.ts
 create mode 100644 next/src/types/project.ts
 create mode 100644 next/src/utils/adapters/drilldownAdapter.test.ts
 create mode 100644 next/src/utils/adapters/drilldownAdapter.ts
 rename next/src/{adapters/dashboardAdapter.test.ts => utils/adapters/monitoringAdapter.test.ts} (97%)
 rename next/src/{adapters/dashboardAdapter.ts => utils/adapters/monitoringAdapter.ts} (99%)
 create mode 100644 next/src/utils/adapters/projectAdapter.test.ts
 create mode 100644 next/src/utils/adapters/projectAdapter.ts
 create mode 100644 next/src/utils/charts/drilldownCharts.ts
 create mode 100644 next/src/utils/charts/monitoringCharts.ts
 rename next/src/{config => utils}/dashboardConfig.ts (75%)
 delete mode 100644 next/src/views/ProjectView.vue
 create mode 100644 next/src/vite-env.d.ts
 create mode 100644 next/vitest.config.ts

diff --git a/.gitignore b/.gitignore
index 0c5d8c8..73958c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,9 @@
 next/node_modules/
 next/dist/
+next/e2e/
+next/graphify-out/
+next/output/
+next/test-results/
 next/.env
 next/.env.local
 next/.env.*.local
diff --git a/next/.env.example b/next/.env.example
new file mode 100644
index 0000000..cf7dc45
--- /dev/null
+++ b/next/.env.example
@@ -0,0 +1,2 @@
+# 浏览器端接口 token。构建环境必须提供该变量。
+VITE_QHSE_API_TOKEN=replace-with-qhse-api-token
diff --git a/next/ARCHITECTURE.md b/next/ARCHITECTURE.md
new file mode 100644
index 0000000..afe82f5
--- /dev/null
+++ b/next/ARCHITECTURE.md
@@ -0,0 +1,27 @@
+# Vue3 看板架构
+
+## 目录职责
+
+项目采用固定顶层目录的 Feature-First 结构：
+
+- `src/api`：HTTP 客户端、接口端点和监控/项目 API。
+- `src/assets`：全局样式及静态资源；`next.css` 放置 Vue3 增量样式。
+- `src/components/base`：与业务无关的通用组件，目前为 ECharts 生命周期封装。
+- `src/components/features`：按 monitoring、drilldown 分组的业务展示组件。
+- `src/composables`：路由页面生命周期和跨 Store 协调动作。
+- `src/layouts`：应用壳层、大屏缩放、全局筛选和弹窗挂载。
+- `src/pages`：集团、企业、项目三级路由页面。
+- `src/router`：Vue Router 哈希路由及页面懒加载。
+- `src/stores`：筛选、监控、项目详情和穿透四个 Setup Store。
+- `src/types`：API 查询类型和页面 ViewModel 类型。
+- `src/utils`：Adapter、图表 option 纯函数和业务配置。
+
+## 数据流
+
+页面 composable 监听路由参数和筛选状态，调用职责对应的 Store；Store 通过 API 客户端读取接口，再由 `utils/adapters` 转换为 ViewModel。页面与弹窗只读取 ViewModel，不直接兼容后端字段别名。`useDrilldownActions` 负责筛选变更、指标穿透、报告和弹窗关闭等跨 Store 操作。
+
+每类异步数据请求均有独立的 `AbortController` 与请求序号。筛选、路由或弹窗关闭导致的旧请求不会覆盖最新状态。
+
+## 环境变量
+
+复制 `.env.example` 为本地环境文件并设置 `VITE_QHSE_API_TOKEN`。该 token 按既有内网模式由浏览器请求头携带，因此构建产物仍会包含该值；不要将真实生产 token 提交到版本库。
diff --git a/next/README.md b/next/README.md
index d684880..d0a333b 100644
--- a/next/README.md
+++ b/next/README.md
@@ -1,118 +1,145 @@
 # 数据治理看板 Vue3 版
 
-本目录是原版数据治理看板的 Vue3 升级版本。原版 `indexV2.html`、`res/` 和 `server.js` 保持不变，Vue3 版可独立开发和构建，并保持既有接口参数、业务口径、外部页签参数和 1920×1080 大屏布局。
+本目录是原数据治理看板的 Vue3 重构版本，可独立开发、测试和构建。项目保持原有接口协议、业务口径、外部页签参数和 1920×1080 大屏布局；上级目录中的 `indexV2.html`、`res/` 与旧版脚本不受影响。
 
 ## 技术栈
 
-- Vue 3 + TypeScript + Vite：组件化开发、类型检查和静态构建。
-- Pinia：集中管理筛选条件、监控数据、项目详情和穿透弹窗状态。
-- Vue Router：集团、公司、项目三级哈希路由。
-- ECharts：柱状图和折线图按需加载，Canvas 渲染。
-- Vitest：数据适配和业务口径单元测试。
+| 分类 | 技术 | 当前版本 | 用途 |
+|------|------|----------|------|
+| 视图 | Vue | 3.5.39 | Composition API、`<script setup>` 与响应式渲染 |
+| 状态 | Pinia | 3.0.4 | 筛选、监控、项目详情和穿透状态 |
+| 路由 | Vue Router | 5.1.0 | 集团、企业、项目三级哈希路由 |
+| 构建 | Vite | 8.1.4 | 开发服务、代理与生产构建 |
+| 类型 | TypeScript | 5.9.3 | 严格类型检查与 ViewModel 约束 |
+| 图表 | ECharts | 6.1.0 | 柱状图、折线图和 Canvas 渲染 |
+| 单元测试 | Vitest | 4.1.10 | Adapter、Store 和纯函数测试 |
+| 组件测试 | Vue Test Utils | 2.4.6 | Vue 组件渲染与事件测试 |
+| 端到端测试 | Playwright | 1.55.1 | 路由、筛选、接口拦截与大屏截图验证 |
 
-## 项目架构
+## 架构概览
 
-### 分层关系
+项目采用 feature-first 目录，将业务能力、共享基础设施和应用装配分开。页面只读取稳定 ViewModel，不直接兼容接口的 PascalCase/camelCase 字段。
 
 ```mermaid
 flowchart LR
-  A[App 应用壳层] --> B[Router 路由页面]
-  B --> C[Pinia Dashboard Store]
-  C --> D[HTTP Service]
-  D --> E[同源网关 /qhse_webapi]
-  E --> F[数据治理接口]
-  C --> G[Adapter 数据适配]
-  G --> H[稳定 ViewModel]
-  H --> B
-  B --> I[业务组件]
-  I --> J[ECharts 生命周期组件]
+  A[App.vue 与 Router] --> B[页面与布局]
+  B --> C[页面 composable]
+  C --> D[特性 Setup Store]
+  D --> E[特性 API]
+  E --> F[共享 HTTP Client]
+  F --> G[同源网关 /qhse_webapi]
+  G --> H[数据治理接口]
+  D --> I[Adapter]
+  I --> J[稳定 ViewModel]
+  J --> B
+  B --> K[共享 UI 与图表组件]
 ```
 
-数据读取遵循单向链路：页面触发 Store Action，Service 请求接口，Adapter 将原始响应转换为 ViewModel，Store 更新状态后由 Vue 响应式刷新页面。页面组件不直接兼容后端字段别名，也不直接持有认证令牌。
-
-### 目录职责
+### 目录结构
 
 ```text
 next/
 ├─ src/
-│  ├─ adapters/       接口原始数据到 ViewModel 的转换及口径测试
-│  ├─ components/     KPI、指标列表、ECharts 和全局穿透弹窗
-│  ├─ config/         接口路径、外链、系统枚举和报告文件映射
-│  ├─ router/         集团、公司、项目三级路由
-│  ├─ services/       请求参数、超时、取消、请求 ID 和错误处理
-│  ├─ stores/         筛选、监控数据、项目数据和弹窗状态
-│  ├─ styles/         Vue3 版增量样式
-│  ├─ types/          API、ViewModel、筛选和弹窗类型
-│  ├─ views/          集团级、公司级、项目级页面
-│  ├─ App.vue         大屏壳层、筛选、面包屑和缩放
-│  └─ main.ts         Vue、Pinia、Router 和样式入口
-├─ vite.config.ts     开发服务器和接口代理
-├─ tsconfig.json      TypeScript 配置
-└─ package.json       依赖和工程命令
+│  ├─ api/                             HTTP 客户端、端点定义和特性 API
+│  ├─ assets/styles/next.css           Vue3 版本增量样式
+│  ├─ components/
+│  │  ├─ base/EChart.vue               通用 ECharts 生命周期组件
+│  │  └─ features/                     监控和穿透业务展示组件
+│  ├─ composables/                     页面生命周期和跨 Store 操作
+│  ├─ layouts/DashboardLayout.vue      应用壳层、大屏缩放、筛选和导航
+│  ├─ pages/                           集团、企业、项目路由页面
+│  ├─ router/index.ts                  三级哈希路由与页面懒加载
+│  ├─ stores/                          筛选、监控、项目、穿透四个 Setup Store
+│  ├─ types/                           API、ViewModel 和业务类型
+│  ├─ utils/
+│  │  ├─ adapters/                     原始接口到 ViewModel 的转换
+│  │  ├─ charts/                       各特性的纯图表 option 构造函数
+│  │  └─ dashboardConfig.ts            系统、外链和报告文件配置
+│  ├─ App.vue                          根组件
+│  ├─ main.ts                          Vue、Pinia、Router 和样式入口
+│  └─ vite-env.d.ts                    Vite 环境变量类型声明
+├─ e2e/                               Playwright 主流程测试
+├─ .env.example                       环境变量模板
+├─ playwright.config.ts               E2E 配置
+├─ vitest.config.ts                   单元和组件测试配置
+├─ vite.config.ts                     开发服务器与接口代理
+└─ package.json                       依赖和工程命令
 ```
 
-`main.ts` 会引入上级 `res/css/` 中的原版模块化样式作为视觉基线，Vite 构建时会将这些 CSS 合并进 `dist/assets/`。Vue3 专属修正放在 `src/styles/next.css`，禁止修改或重新聚合原版 CSS 文件。
+### 状态边界
 
-### 页面与路由
+| Store | 职责 |
+|-------|------|
+| `useFilterStore` | `system`、`dimension`、`allowedSystems` 及接口 `type/range` 映射 |
+| `useMonitoringStore` | 集团/企业监控数据、当前单位、加载和错误状态 |
+| `useProjectStore` | 项目详情 ViewModel、加载和错误状态 |
+| `useDrilldownStore` | 弹窗、指标穿透、动不动报告及各自请求状态 |
 
-| 层级 | 路由 | 页面职责 |
+`useMonitoringPage` 和 `useProjectPage` 监听路由参数及筛选状态。参数变化或组件销毁时会取消旧请求；各 Store 同时使用请求序号，避免失效响应覆盖最新状态。
+
+### Adapter 与 ViewModel
+
+- `monitoringAdapter.ts`：集团/企业汇总、单位、项目、指标、趋势和动不动报告。
+- `projectAdapter.ts`：项目信息与项目指标历史值。
+- `drilldownAdapter.ts`：集团单位分析和企业项目指标穿透。
+- 页面模板禁止读取 `MetricProjectInfo`、`ProjectMetrics` 等原始接口字段。
+- 图表 option 由 `utils/charts` 下的纯函数生成，`components/base/EChart.vue` 只管理实例生命周期、更新、尺寸监听和销毁。
+
+## 页面与参数
+
+| 层级 | 路由 | 主要内容 |
 |------|------|----------|
-| 集团级 | `#/` | 集团 KPI、重点指标、三率趋势、企业分析、报告入口、指标穿透 |
-| 公司级 | `#/enterprise/:unitId` | 公司 KPI、三率趋势、项目分析、公司指标穿透 |
-| 项目级 | `#/project/:unitId/:projectId` | 项目信息、指标历史值、异常状态 |
+| 集团 | `#/` | KPI、重点指标、三率趋势、企业分析、报告与集团指标穿透 |
+| 企业 | `#/enterprise/:unitId` | 企业 KPI、趋势、项目分析和企业指标穿透 |
+| 项目 | `#/project/:unitId/:projectId` | 项目信息、指标历史值和异常状态 |
 
-外部系统的页签参数位于哈希前，例如 `?type=1,2#/`。参数映射保持原规则：`1` 为安全、`2` 为质量、`3` 为应急；未传或传入非法值时展示全部系统。
+外部页签参数必须位于哈希前，例如 `?type=1,2#/`：
 
-### 状态管理
+- `type=1`：安全。
+- `type=2`：质量。
+- `type=3`：应急。
+- `type=1,2`：安全和质量。
+- 未传或值无效：显示全部系统。
 
-`stores/dashboardStore.ts` 是唯一业务状态入口，主要状态分为：
+本版本严格保留当前界面的 70% 未达标阈值和现有文案；如调整为其他业务口径，需要同步 Adapter、页面文案和测试。
 
-- 筛选状态：`system`、`dimension`、`allowedSystems`。
-- 监控状态：集团或当前公司的 `monitoring`、`loading`、`error`。
-- 项目状态：`projectData`、`projectLoading`、`projectError`。
-- 穿透状态：`dialog`、`selectedMetric`、`metricAnalysis`、`metricLoading`。
-- 指标列表弹窗：集团和企业复用 `allMetrics`，使用率低于 70% 的指标显示红色告警卡片。
-- 动不动报告状态：`moveReport`、`moveReportLoading`、`moveReportError`。
+## 接口约定
 
-集团和公司监控共用 `loadMonitoring`。新请求开始时会取消旧请求，并通过递增请求序号阻止旧响应覆盖最新筛选结果。项目详情和指标穿透分别使用独立 Action，避免页面组件自行维护请求状态。
+接口前缀为 `/qhse_webapi/api/DataGovernance`：
 
-### 接口与数据适配
+| 接口 | 用途 |
+|------|------|
+| `GetMetricMonitoringSituation` | 集团监控 |
+| `GetUnitMetricMonitoringSituation` | 企业监控 |
+| `GetGroupMetricAnalysis` | 集团指标穿透 |
+| `GetUnitMetricAnalysis` | 企业指标穿透 |
+| `GetProjectMonitoringSituation` | 项目详情 |
+| `GetGroupMoveReportMetricData` | 动不动报告动态指标列 |
+| `GetGroupMetricAnalysisMoveReport` | 动不动报告企业数据 |
 
-所有接口使用同源前缀 `/qhse_webapi/api/DataGovernance`：
+集团监控请求即使没有单位也必须保留 `unitId=`。指标穿透参数继续使用后端既有拼写 `filed`，不要自行更名。
 
-- `GetMetricMonitoringSituation`：集团监控。
-- `GetUnitMetricMonitoringSituation`：公司监控。
-- `GetGroupMetricAnalysis`：集团指标穿透。
-- `GetGroupMoveReportMetricData`：动不动报告动态指标列，`type=0/1` 分别对应安全/质量。
-- `GetGroupMetricAnalysisMoveReport`：动不动报告企业行，`range=0/1` 分别对应所有项目/新开工项目。
-- `GetUnitMetricAnalysis`：公司指标穿透。
-- `GetProjectMonitoringSituation`：项目详情。
-
-集团监控接口要求查询字符串始终包含 `unitId=`，即使值为空也不能省略。`services/http.ts` 因此只过滤 `undefined`，显式空字符串会被保留。
-
-`adapters/dashboardAdapter.ts` 负责兼容 PascalCase/camelCase 字段、非法数字、布尔字符串和空数组，并集中维护上线率口径：
+上线率兜底计算口径为：
 
 ```text
 (已关联项目数 + 预立项项目数) / (主数据项目数 + 预立项项目数 - 申请不用项目数)
 ```
 
-组件只能读取适配后的 ViewModel。新增或调整接口字段时，应先修改 `types/` 和 `adapters/`，不要在 Vue 模板中增加字段兼容分支。
+## 环境变量
 
-动不动报告由两个接口共同组成：指标定义接口决定动态列顺序和中文名称，企业行接口通过 `MetricAnalysis[].Field` 绑定每列使用率。若指标定义接口临时返回空字段，适配层会使用当前监控接口的指标名称兜底，并对重复 `Field` 去重，避免生成空表头或重复列。
+安装依赖后创建本地配置：
 
-### 图表与大屏布局
+```powershell
+Copy-Item .env.example .env.local
+```
 
-`components/EChart.vue` 统一负责 ECharts 初始化、响应式更新、`ResizeObserver` 监听和 `dispose`。当前只注册柱状图、折线图、网格、图例、提示框和 Canvas 渲染器。
+设置浏览器端接口 token：
 
-页面按照 1920×1080 设计尺寸渲染，由 `App.vue` 等比缩放到实际窗口。趋势图宽度跟随面板；项目和企业数量较多的柱状图使用动态最小宽度和横向滚动，避免柱体被强制压缩。
+```dotenv
+VITE_QHSE_API_TOKEN=实际令牌
+```
 
-### 安全与部署边界
-
-- 浏览器只访问同源 `/qhse_webapi/`，由开发服务器或生产网关转发到正式接口。
-- 接口 token 固定在 `config/dashboardConfig.ts`，由 `services/http.ts` 写入每个请求的 `token` 请求头。
-- token 会进入浏览器构建产物，只适用于当前受控内网部署环境。
-- 生产环境仍需将 `/qhse_webapi/` 反向代理到 `https://qhse.cncecoa.com/qhse_webapi`，但无需在网关重复注入 token。
-- 网关应配置上游超时、请求 ID 透传、访问日志和 5xx 告警。
+该变量由 Vite 在构建期注入，最终会进入浏览器构建产物，仅适用于当前受控内网部署模式。不要提交真实生产 token。
 
 ## 本地开发
 
@@ -121,33 +148,37 @@ npm install
 npm run dev
 ```
 
-访问 `http://127.0.0.1:18081/`。外部页签参数仍支持 `?type=1`、`?type=2`、`?type=3` 和 `?type=1,2`。
+默认地址：<http://127.0.0.1:18081/>。
 
-## 测试
+开发服务会把 `/qhse_webapi` 转发到 `https://qhse.cncecoa.com`。生产环境也必须配置相同的同源反向代理；应用使用哈希路由，不需要 SPA history fallback。
+
+## 测试与构建
 
 ```powershell
+# Adapter、Store 和组件测试
 npm run test
+
+# TypeScript 与 Vue 模板检查
 npm run typecheck
-```
 
-当前单元测试重点覆盖接口字段归一化、上线率口径、空数据、非法数字和布尔字符串。页面结构或交互调整后，还需要在浏览器验证集团、公司、项目三级路由以及统计和指标穿透弹窗。
-
-## 构建与部署
-
-```powershell
+# 生产构建
 npm run build
+
+# 集团、企业、项目路由和外部页签主流程
+npm run test:e2e
 ```
 
-产物位于 `dist/`，可部署到静态 Web 服务。生产环境需要由同源网关代理 `/qhse_webapi/`；token 已由前端请求头携带。
+本地 Playwright 默认使用系统 Edge 通道，CI 使用标准 Chromium。E2E 通过接口拦截运行，不访问正式数据，并在 1920×1080 视口生成集团页面截图。
 
-建议网关同时配置 12 秒上游超时、请求 ID 透传、访问日志和 5xx 告警。应用采用哈希路由，无需 Web 服务器配置 SPA history fallback。
+构建产物位于 `dist/`。当前 ECharts 独立懒加载块约 535 kB，Vite 会提示大块告警，但不影响构建和运行。
 
 ## 开发约定
 
-- 新接口先在 `config/dashboardConfig.ts` 注册，再通过 `services/http.ts` 请求。
-- 后端响应必须先经过 `adapters/`，页面不得直接依赖原始字段命名。
-- 跨页面状态进入 Pinia；仅组件内部使用的展示状态保留在组件中。
-- 通用展示提取到 `components/`，集团、公司、项目编排保留在 `views/`。
-- 图表必须复用 `EChart.vue`，不要在页面中直接创建实例。
-- 样式优先复用原版 CSS 类；Vue3 增量样式只添加到 `styles/next.css`。
-- 修改后至少执行 `npm run test` 和 `npm run build`。
+- 新页面放入 `pages`，页面专属展示组件放入 `components/features/<name>`，跨页面基础能力放入 `components/base`、`utils` 或 `api`。
+- Store 使用 Setup Store；异步 action 必须维护 loading、error、取消和竞态保护。
+- 接口响应先转换为 ViewModel，页面和共享 UI 不得直接依赖原始字段。
+- 页面 composable 负责连接路由、筛选和 Store，并在作用域销毁时清理副作用。
+- 通用组件使用 props/emits，不读取业务 Store；弹窗等业务组件留在所属特性。
+- 图表统一复用 `components/base/EChart.vue`，页面不得直接创建或销毁 ECharts 实例。
+- 原版模块化 CSS 继续作为视觉基线，Vue3 增量样式只写入 `src/assets/styles/next.css`。
+- 修改后至少执行 `npm run test`、`npm run typecheck` 和 `npm run build`；涉及路由或交互时还需执行 `npm run test:e2e`。
diff --git a/next/package-lock.json b/next/package-lock.json
index 89ddbcc..73f6f4f 100644
--- a/next/package-lock.json
+++ b/next/package-lock.json
@@ -14,14 +14,32 @@
         "vue-router": "^5.1.0"
       },
       "devDependencies": {
+        "@pinia/testing": "^1.0.3",
+        "@playwright/test": "^1.55.1",
         "@types/node": "latest",
         "@vitejs/plugin-vue": "latest",
+        "@vue/test-utils": "^2.4.6",
+        "jsdom": "^26.1.0",
         "typescript": "^5.9.3",
         "vite": "^8.1.4",
         "vitest": "latest",
         "vue-tsc": "latest"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
     "node_modules/@babel/generator": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-8.0.0.tgz",
@@ -131,6 +149,121 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.11.1",
       "resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.11.1.tgz",
@@ -189,6 +322,24 @@
       "license": "0BSD",
       "optional": true
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmmirror.com/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -253,6 +404,13 @@
         "@emnapi/runtime": "^1.7.1"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@oxc-project/types": {
       "version": "0.139.0",
       "resolved": "https://registry.npmmirror.com/@oxc-project/types/-/types-0.139.0.tgz",
@@ -263,6 +421,46 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@pinia/testing": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@pinia/testing/-/testing-1.0.3.tgz",
+      "integrity": "sha512-g+qR49GNdI1Z8rZxKrQC3GN+LfnGTNf5Kk8Nz5Cz6mIGva5WRS+ffPXQfzhA0nu6TveWzPNYTjGl4nJqd3Cu9Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": ">=3.0.4"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmmirror.com/@playwright/test/-/test-1.55.1.tgz",
+      "integrity": "sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.55.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.1.5",
       "resolved": "https://registry.npmmirror.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz",
@@ -939,6 +1137,27 @@
       "integrity": "sha512-l1rrBtBfTnmxvtsvdQDXltUUy8S1Y+ZaqdfUzmAnJkTd8Z8rv5v/ytW+TKiqEOWyHPoqtPlNFSs0lhRmYVSHVA==",
       "license": "MIT"
     },
+    "node_modules/@vue/test-utils": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmmirror.com/@vue/test-utils/-/test-utils-2.4.6.tgz",
+      "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^2.0.0"
+      }
+    },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.17.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.17.0.tgz",
@@ -951,6 +1170,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/alien-signals": {
       "version": "3.2.1",
       "resolved": "https://registry.npmmirror.com/alien-signals/-/alien-signals-3.2.1.tgz",
@@ -958,6 +1187,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -1001,6 +1256,13 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/birpc": {
       "version": "2.9.0",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
@@ -1010,6 +1272,16 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.1.2.tgz",
+      "integrity": "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmmirror.com/chai/-/chai-6.2.2.tgz",
@@ -1035,12 +1307,53 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/confbox": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.2.4.tgz",
       "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
       "license": "MIT"
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmmirror.com/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1063,12 +1376,80 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1079,6 +1460,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/echarts": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.1.0.tgz",
@@ -1089,6 +1477,32 @@
         "zrender": "6.1.0"
       }
     },
+    "node_modules/editorconfig": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/editorconfig/-/editorconfig-1.0.7.tgz",
+      "integrity": "sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "^9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",
@@ -1147,6 +1561,23 @@
         }
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -1162,12 +1593,111 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmmirror.com/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-what": {
       "version": "5.5.0",
       "resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
@@ -1180,6 +1710,98 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmmirror.com/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/js-beautify": {
+      "version": "1.15.4",
+      "resolved": "https://registry.npmmirror.com/js-beautify/-/js-beautify-1.15.4.tgz",
+      "integrity": "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.4",
+        "glob": "^10.4.2",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.1"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
@@ -1482,6 +2104,13 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -1506,6 +2135,32 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
@@ -1541,6 +2196,13 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/muggle-string": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz",
@@ -1565,6 +2227,29 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmmirror.com/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.24",
+      "resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.24.tgz",
+      "integrity": "sha512-7YRhZ3jS45LwmSCT4b2sVFHt/WuovaktDU07QrtOBY2PXskss5a9jfmR9jptyumwXST+rFjrmppMY1KT/yn35A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/obug": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/obug/-/obug-2.1.3.tgz",
@@ -1579,6 +2264,39 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -1586,6 +2304,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmmirror.com/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz",
@@ -1648,6 +2393,53 @@
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmmirror.com/playwright/-/playwright-1.55.1.tgz",
+      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.55.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmmirror.com/playwright-core/-/playwright-core-1.55.1.tgz",
+      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.17",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.17.tgz",
@@ -1676,6 +2468,23 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
@@ -1745,12 +2554,75 @@
         "@rolldown/binding-win32-x64-msvc": "1.1.5"
       }
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
       "license": "MIT"
     },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/siginfo/-/siginfo-2.0.0.tgz",
@@ -1758,6 +2630,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1790,6 +2675,110 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/superjson": {
       "version": "2.2.6",
       "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.6.tgz",
@@ -1802,6 +2791,13 @@
         "node": ">=16"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmmirror.com/tinybench/-/tinybench-2.9.0.tgz",
@@ -1845,6 +2841,52 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmmirror.com/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmmirror.com/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
@@ -2144,6 +3186,13 @@
         }
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-2.2.12.tgz",
+      "integrity": "sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-router": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-5.1.0.tgz",
@@ -2243,12 +3292,89 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "license": "MIT"
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
@@ -2266,6 +3392,143 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.21.1",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.21.1.tgz",
+      "integrity": "sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yaml": {
       "version": "2.9.0",
       "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.9.0.tgz",
diff --git a/next/package.json b/next/package.json
index 858e794..3f61113 100644
--- a/next/package.json
+++ b/next/package.json
@@ -8,7 +8,8 @@
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview --host 127.0.0.1",
     "typecheck": "vue-tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run --config vitest.config.ts",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "echarts": "^6.1.0",
@@ -17,8 +18,14 @@
     "vue-router": "^5.1.0"
   },
   "devDependencies": {
+    "@pinia/testing": "^1.0.3",
+    "@playwright/test": "^1.55.1",
+    "@pinia/testing": "^1.0.3",
+    "@playwright/test": "^1.55.1",
     "@types/node": "latest",
     "@vitejs/plugin-vue": "latest",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^26.1.0",
     "typescript": "^5.9.3",
     "vite": "^8.1.4",
     "vitest": "latest",
diff --git a/next/playwright.config.ts b/next/playwright.config.ts
new file mode 100644
index 0000000..461377a
--- /dev/null
+++ b/next/playwright.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  use: {
+    baseURL: "http://127.0.0.1:4174",
+    viewport: { width: 1920, height: 1080 },
+    channel: process.env.CI ? undefined : "msedge",
+  },
+  webServer: { command: "npm run dev -- --port 4174", url: "http://127.0.0.1:4174", reuseExistingServer: !process.env.CI },
+});
diff --git a/next/src/App.vue b/next/src/App.vue
index 4507b23..890b31a 100644
--- a/next/src/App.vue
+++ b/next/src/App.vue
@@ -1,89 +1,7 @@
 <script setup lang="ts">
-/**
- * 应用壳层：负责大屏缩放、全局筛选、面包屑和路由出口。
- * 集团/公司/项目业务数据由路由页面和 Pinia 仓库负责，壳层不直接处理接口响应。
- */
-import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { EXTERNAL_LINKS, SYSTEMS, type DimensionKey, type SystemKey } from "./config/dashboardConfig";
-import { useDashboardStore } from "./stores/dashboardStore";
-
-const DrillModal = defineAsyncComponent(() => import("./components/DrillModal.vue"));
-
-const store = useDashboardStore();
-const route = useRoute();
-const router = useRouter();
-const screen = ref<HTMLElement>();
-let frame = 0;
-
-const visibleSystems = computed(() => SYSTEMS.filter((item) => store.allowedSystems.includes(item.key)));
-const pageName = computed(() => route.name === "project" ? "项目明细" : route.name === "enterprise" ? store.currentUnitName || "企业看板" : "集团总览");
-
-function scaleScreen() {
-  // 以 1920×1080 设计稿等比缩放，requestAnimationFrame 避免 resize 高频触发布局计算。
-  cancelAnimationFrame(frame);
-  frame = requestAnimationFrame(() => {
-    if (!screen.value) return;
-    const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
-    const left = Math.max((window.innerWidth - 1920 * scale) / 2, 0);
-    const top = Math.max((window.innerHeight - 1080 * scale) / 2, 0);
-    screen.value.style.transform = `translate(${left}px, ${top}px) scale(${scale})`;
-  });
-}
-
-async function changeFilter(nextSystem: SystemKey, nextDimension: DimensionKey) {
-  // 项目页切换筛选时刷新项目接口，其余页面刷新当前集团或公司接口。
-  store.setFilters(nextSystem, nextDimension);
-  if (route.name === "project") {
-    await store.loadProject(String(route.params.unitId), String(route.params.projectId));
-  } else {
-    await store.loadMonitoring(route.name === "enterprise" ? String(route.params.unitId) : "", store.currentUnitName);
-  }
-}
-
-onMounted(async () => {
-  await nextTick();
-  scaleScreen();
-  window.addEventListener("resize", scaleScreen);
-});
-onBeforeUnmount(() => {
-  cancelAnimationFrame(frame);
-  window.removeEventListener("resize", scaleScreen);
-});
+import DashboardLayout from "@/layouts/DashboardLayout.vue";
 </script>
 
 <template>
-  <div ref="screen" class="screen">
-    <header class="topbar">
-      <div class="title-zone">
-        <div class="brand-mark" aria-hidden="true"></div>
-        <div class="title-text"><div class="eyebrow">DATA GOVERNANCE COMMAND CENTER</div><h1>集团数据治理项目监控大屏</h1></div>
-      </div>
-      <div class="header-actions">
-        <div class="top-meta-row">
-          <a class="source-download" :href="EXTERNAL_LINKS.source" target="_blank" rel="noopener noreferrer">数据溯源表</a>
-          <div class="time-card"><span>数据时间 <strong>{{ store.monitoring.summary.dataDate || '--' }}</strong></span></div>
-        </div>
-        <div class="toggle-row">
-          <div class="dimension-toggle" aria-label="数据维度切换">
-            <button type="button" :class="{ active: store.dimension === 'all' }" @click="changeFilter(store.system, 'all')">所有项目</button>
-            <button type="button" :class="{ active: store.dimension === 'new' }" @click="changeFilter(store.system, 'new')">新开工项目</button>
-          </div>
-          <div class="system-toggle" aria-label="系统切换">
-            <button v-for="item in visibleSystems" :key="item.key" type="button" :class="{ active: store.system === item.key }" @click="changeFilter(item.key, store.dimension)">{{ item.label }}</button>
-          </div>
-        </div>
-      </div>
-    </header>
-    <div class="crumb-row">
-      <div class="breadcrumbs">
-        <span class="crumb clickable" @click="router.push('/')">集团总览</span><span v-if="route.name !== 'group'">›</span><span v-if="route.name !== 'group'" class="crumb">{{ pageName }}</span>
-        <span class="crumb">当前维度：{{ store.dimension === 'all' ? '所有项目' : '新开工项目' }}</span>
-        <span class="crumb">当前系统：{{ SYSTEMS.find(item => item.key === store.system)?.label }}</span>
-      </div>
-      <button type="button" class="ghost-btn" @click="router.push('/')">返回集团总览</button>
-    </div>
-    <main id="app-main"><RouterView /></main>
-  </div>
-  <DrillModal />
+  <DashboardLayout />
 </template>
diff --git a/next/src/api/dashboardApi.ts b/next/src/api/dashboardApi.ts
new file mode 100644
index 0000000..aac9adf
--- /dev/null
+++ b/next/src/api/dashboardApi.ts
@@ -0,0 +1,21 @@
+import { API_ENDPOINTS } from "@/api/endpoints";
+import { getJson } from "@/api/httpClient";
+
+export function getMonitoring(type: number, range: number, unitId: string, signal: AbortSignal) {
+  return getJson<unknown>(unitId ? API_ENDPOINTS.unitMonitoring : API_ENDPOINTS.monitoring, { type, range, unitId }, { signal });
+}
+
+export function getGroupMetric(type: number, range: number, filed: string, signal: AbortSignal) {
+  return getJson<unknown>(API_ENDPOINTS.groupMetric, { type, range, filed }, { signal });
+}
+
+export function getUnitMetric(type: number, range: number, filed: string, unitId: string, signal: AbortSignal) {
+  return getJson<unknown>(API_ENDPOINTS.unitMetric, { type, range, filed, unitId }, { signal });
+}
+
+export function getMoveReport(type: number, range: number, signal: AbortSignal) {
+  return Promise.all([
+    getJson<unknown>(API_ENDPOINTS.groupMoveReportMetrics, { type }, { signal }),
+    getJson<unknown>(API_ENDPOINTS.groupMoveReport, { type, range }, { signal }),
+  ]);
+}
diff --git a/next/src/api/endpoints.ts b/next/src/api/endpoints.ts
new file mode 100644
index 0000000..ec2739f
--- /dev/null
+++ b/next/src/api/endpoints.ts
@@ -0,0 +1,14 @@
+export const API_BASE = "/qhse_webapi/api/DataGovernance";
+
+/** 数据治理接口令牌由 Vite 在构建期注入。 */
+export const API_TOKEN = import.meta.env.VITE_QHSE_API_TOKEN || "";
+
+export const API_ENDPOINTS = {
+  monitoring: `${API_BASE}/GetMetricMonitoringSituation`,
+  unitMonitoring: `${API_BASE}/GetUnitMetricMonitoringSituation`,
+  groupMetric: `${API_BASE}/GetGroupMetricAnalysis`,
+  groupMoveReportMetrics: `${API_BASE}/GetGroupMoveReportMetricData`,
+  groupMoveReport: `${API_BASE}/GetGroupMetricAnalysisMoveReport`,
+  unitMetric: `${API_BASE}/GetUnitMetricAnalysis`,
+  projectMonitoring: `${API_BASE}/GetProjectMonitoringSituation`,
+} as const;
diff --git a/next/src/services/http.ts b/next/src/api/httpClient.ts
similarity index 95%
rename from next/src/services/http.ts
rename to next/src/api/httpClient.ts
index 3495120..9e1ac55 100644
--- a/next/src/services/http.ts
+++ b/next/src/api/httpClient.ts
@@ -2,8 +2,8 @@
  * 同源 GET 请求封装。
  * 负责查询参数编码、请求 ID、超时/取消和业务错误归一化，不承载具体业务字段转换。
  */
-import type { ApiEnvelope } from "../types/dashboardTypes";
-import { API_TOKEN } from "../config/dashboardConfig";
+import type { ApiEnvelope } from "@/types/api";
+import { API_TOKEN } from "@/api/endpoints";
 
 export class ApiError extends Error {
   constructor(
diff --git a/next/src/api/projectApi.ts b/next/src/api/projectApi.ts
new file mode 100644
index 0000000..542e338
--- /dev/null
+++ b/next/src/api/projectApi.ts
@@ -0,0 +1,6 @@
+import { API_ENDPOINTS } from "@/api/endpoints";
+import { getJson } from "@/api/httpClient";
+
+export function getProject(type: number, unitId: string, projectId: string, signal: AbortSignal) {
+  return getJson<unknown>(API_ENDPOINTS.projectMonitoring, { type, unitId, projectId }, { signal });
+}
diff --git a/next/src/styles/next.css b/next/src/assets/styles/next.css
similarity index 70%
rename from next/src/styles/next.css
rename to next/src/assets/styles/next.css
index 7b72700..9db9381 100644
--- a/next/src/styles/next.css
+++ b/next/src/assets/styles/next.css
@@ -35,6 +35,84 @@
 .green-row { background: rgba(50, 175, 112, .16); }
 .table-link { color: var(--cyan); }
 .chart-click { cursor: pointer; }
+.comparison-column-emphasis { color: #ffffff; font-weight: 900; }
+
+/* 项目指标快照弹窗按日期切换卡片，异常指标使用与集团指标弹窗一致的红色状态语义。 */
+.project-snapshot-panel { width: min(1320px, calc(100vw - 68px)); }
+.project-snapshot-body { display: grid; grid-template-rows: auto 1fr; gap: 18px; min-height: 0; }
+.snapshot-period-tabs {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 8px;
+  padding: 4px;
+  border: 1px solid rgba(91, 180, 255, 0.24);
+  border-radius: 6px;
+  background: rgba(0, 18, 37, 0.48);
+}
+.snapshot-period-tabs button {
+  min-width: 0;
+  min-height: 38px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #b8d6e8;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+}
+.snapshot-period-tabs button:hover { color: #ffffff; background: rgba(28, 153, 217, 0.2); }
+.snapshot-period-tabs button.active {
+  border-color: rgba(91, 214, 255, 0.56);
+  color: #ffffff;
+  background: #08639a;
+}
+.project-snapshot-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  gap: 12px;
+  align-content: start;
+}
+.project-snapshot-card {
+  min-width: 0;
+  min-height: 126px;
+  padding: 15px;
+  border: 1px solid rgba(91, 180, 255, 0.38);
+  border-radius: 6px;
+  background: #08375d;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+.project-snapshot-card.abnormal { 
+  background: #0B4974;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 16px rgba(255, 75, 91, 0.16);
+}
+.project-snapshot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.project-snapshot-head h3 {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: #ffffff;
+  font-size: 15px;
+  line-height: 1.45;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.project-snapshot-card > strong {
+  display: block;
+  margin-top: 22px;
+  overflow: hidden;
+  color: #ffffff;
+  font-family: var(--num);
+  font-size: 26px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.snapshot-empty { min-height: 320px; }
+
+@media (max-width: 900px) {
+  .snapshot-period-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
 
 /* “动不动”报告按接口指标数量横向扩展，固定列和动态列保持稳定宽度。 */
 .move-report-panel .table-wrap { max-height: 610px; }
diff --git a/next/src/components/EChart.vue b/next/src/components/base/EChart.vue
similarity index 100%
rename from next/src/components/EChart.vue
rename to next/src/components/base/EChart.vue
diff --git a/next/src/components/DrillModal.vue b/next/src/components/features/drilldown/DrillModal.vue
similarity index 71%
rename from next/src/components/DrillModal.vue
rename to next/src/components/features/drilldown/DrillModal.vue
index 6d88e85..bd34110 100644
--- a/next/src/components/DrillModal.vue
+++ b/next/src/components/features/drilldown/DrillModal.vue
@@ -4,69 +4,35 @@
  * 根据 store.dialog 渲染上线统计、指标卡片、报告或指标穿透，避免每个页面维护独立弹窗状态。
  */
 import { computed } from "vue";
-import type { EChartsOption } from "echarts";
-import { useDashboardStore } from "../stores/dashboardStore";
-import EChart from "./EChart.vue";
-import { normalizeMetric, numberValue } from "../adapters/dashboardAdapter";
-import { EXTERNAL_LINKS, UNIT_REPORT_FILES } from "../config/dashboardConfig";
-import type { MasterRecordVM } from "../types/dashboardTypes";
+import EChart from "@/components/base/EChart.vue";
+import { useDrilldownActions } from "@/composables/useDrilldownActions";
+import { useDrilldownStore } from "@/stores/drilldownStore";
+import { useMonitoringStore } from "@/stores/monitoringStore";
+import { createUnitMetricOption } from "@/utils/charts/drilldownCharts";
+import { EXTERNAL_LINKS, UNIT_REPORT_FILES } from "@/utils/dashboardConfig";
+import { numberValue } from "@/utils/adapters/monitoringAdapter";
+import type { MasterRecordVM } from "@/types/dashboard";
 
-const store = useDashboardStore();
-const raw = computed(() => store.metricAnalysis || {});
-const metric = computed(() => {
-  const source = raw.value.MetricData;
-  return source && typeof source === "object"
-    ? normalizeMetric(source as Record<string, unknown>)
-    : store.selectedMetricVM;
+const monitoring = useMonitoringStore();
+const drilldown = useDrilldownStore();
+const actions = useDrilldownActions();
+const metric = computed(() => drilldown.metricAnalysis?.metric || actions.selectedMetricVM.value);
+const unitRows = computed(() => drilldown.metricAnalysis?.units || []);
+const projectRows = computed(() => drilldown.metricAnalysis?.projects || []);
+const emphasizedPeriod = computed(() => {
+  if (drilldown.dialog !== "unitMetric") return "";
+  return ({
+    1: "threeDaysAgo",
+    7: "weekAgo",
+    30: "monthAgo",
+    90: "threeMonthsAgo",
+  } as Record<number, string>)[metric.value?.frequency || 0] || "";
 });
-const unitRows = computed(() =>
-  Array.isArray(raw.value.UnitAnalysises)
-    ? (raw.value.UnitAnalysises as Record<string, unknown>[])
-    : [],
-);
-const projectRows = computed(() =>
-  Array.isArray(raw.value.ProjectMetrics)
-    ? (raw.value.ProjectMetrics as Record<string, unknown>[])
-    : [],
-);
-const unitChart = computed<EChartsOption>(() => ({
-  tooltip: { trigger: "axis" },
-  legend: { textStyle: { color: "#bfeaff" } },
-  grid: { left: 54, right: 24, top: 48, bottom: 70 },
-  xAxis: {
-    type: "category",
-    data: unitRows.value.map((item) => String(item.Name || item.name || "")),
-    axisLabel: { color: "#a8c7db", rotate: 28 },
-  },
-  yAxis: {
-    type: "value",
-    max: 100,
-    axisLabel: { color: "#a8c7db", formatter: "{value}%" },
-    splitLine: { lineStyle: { color: "rgba(93,191,255,.14)" } },
-  },
-  series: [
-    {
-      name: "使用率",
-      type: "bar",
-      data: unitRows.value.map((item) =>
-        numberValue(item.UsageRate ?? item.usageRate),
-      ),
-      itemStyle: { color: "#5ee1b5" },
-    },
-    {
-      name: "准确率",
-      type: "bar",
-      data: unitRows.value.map((item) =>
-        numberValue(item.AccuracyRate ?? item.accuracyRate),
-      ),
-      itemStyle: { color: "#ffc857" },
-    },
-  ],
-}));
+const unitChart = computed(() => createUnitMetricOption(unitRows.value));
 const title = computed(() => {
-  if (store.dialog === "indicatorAnalysis") {
-    return store.currentUnitId
-      ? `${store.currentUnitName || "企业"} · 指标分析`
+  if (drilldown.dialog === "indicatorAnalysis") {
+    return monitoring.currentUnitId
+      ? `${monitoring.currentUnitName || "企业"} · 指标分析`
       : "集团指标分析";
   }
   const labels = {
@@ -77,31 +43,31 @@ const title = computed(() => {
     groupMetric: "指标穿透分析",
     unitMetric: "企业指标穿透分析",
   };
-  return store.dialog ? labels[store.dialog] : "";
+  return drilldown.dialog ? labels[drilldown.dialog] : "";
 });
 
 const dialogLoading = computed(() =>
-  store.dialog === "moveReport" ? store.moveReportLoading : store.metricLoading,
+  drilldown.dialog === "moveReport" ? drilldown.moveReportLoading : drilldown.metricLoading,
 );
 const dialogError = computed(() =>
-  store.dialog === "moveReport" ? store.moveReportError : store.metricError,
+  drilldown.dialog === "moveReport" ? drilldown.moveReportError : drilldown.metricError,
 );
 const loadingText = computed(() =>
-  store.dialog === "moveReport" ? "正在获取动不动分析数据..." : "正在获取指标穿透数据...",
+  drilldown.dialog === "moveReport" ? "正在获取动不动分析数据..." : "正在获取指标穿透数据...",
 );
 const onlineRateTotal = computed(() => {
   const total = sum("total");
   return total ? sum("onlineAutoTotal") / total * 100 : 0;
 });
 const moveTableMinWidth = computed(() =>
-  Math.max(980, 420 + store.moveReport.metrics.length * 138),
+  Math.max(980, 420 + drilldown.moveReport.metrics.length * 138),
 );
 const lowUsageMetricCount = computed(() =>
-  store.allMetrics.filter((item) => item.usageRate < 70).length,
+  monitoring.allMetrics.filter((item) => item.usageRate < 60).length,
 );
 
 const sum = (field: keyof MasterRecordVM) =>
-  store.monitoring.records.reduce(
+  monitoring.monitoring.records.reduce(
     (total, row) => total + numberValue(row[field]),
     0,
   );
@@ -142,7 +108,7 @@ function previewUnitReport(unit: string) {
 </script>
 
 <template>
-  <div v-if="store.dialog" class="drill-modal">
+  <div v-if="drilldown.dialog" class="drill-modal">
     <div class="drill-modal-panel">
       <div class="drill-modal-head">
         <div class="drill-modal-title">{{ title }}</div>
@@ -150,7 +116,7 @@ function previewUnitReport(unit: string) {
           type="button"
           class="modal-close"
           aria-label="关闭"
-          @click="store.closeDialog()"
+          @click="actions.closeDialog()"
         >
           ×
         </button>
@@ -164,7 +130,7 @@ function previewUnitReport(unit: string) {
         </div>
 
         <section
-          v-else-if="store.dialog === 'online'"
+          v-else-if="drilldown.dialog === 'online'"
           class="panel drill-panel"
         >
           <div class="table-wrap">
@@ -196,7 +162,7 @@ function previewUnitReport(unit: string) {
               </thead>
               <tbody>
                 <tr
-                  v-for="row in store.monitoring.records"
+                  v-for="row in monitoring.monitoring.records"
                   :key="row.unitId"
                   :class="{
                     'green-row':
@@ -253,10 +219,10 @@ function previewUnitReport(unit: string) {
         </section>
 
         <section
-          v-else-if="store.dialog === 'moveReport'"
+          v-else-if="drilldown.dialog === 'moveReport'"
           class="panel drill-panel move-report-panel"
         >
-          <div v-if="!store.moveReport.rows.length" class="empty-state">
+          <div v-if="!drilldown.moveReport.rows.length" class="empty-state">
             当前暂无动不动分析数据。
           </div>
           <div v-else class="table-wrap">
@@ -270,9 +236,9 @@ function previewUnitReport(unit: string) {
                   <th colspan="2">上线项目数</th>
                   <th rowspan="2">使用率</th>
                   <th
-                    v-if="store.moveReport.metrics.length"
+                    v-if="drilldown.moveReport.metrics.length"
                     class="move-metric-group"
-                    :colspan="store.moveReport.metrics.length"
+                    :colspan="drilldown.moveReport.metrics.length"
                   >
                     <span>核心指标使用率</span>
                   </th>
@@ -281,7 +247,7 @@ function previewUnitReport(unit: string) {
                   <th>达标项目数</th>
                   <th>未达标项目</th>
                   <th
-                    v-for="metricItem in store.moveReport.metrics"
+                    v-for="metricItem in drilldown.moveReport.metrics"
                     :key="metricItem.field"
                     :title="metricItem.field"
                   >
@@ -291,7 +257,7 @@ function previewUnitReport(unit: string) {
               </thead>
               <tbody>
                 <tr
-                  v-for="row in store.moveReport.rows"
+                  v-for="row in drilldown.moveReport.rows"
                   :key="row.unitName"
                 >
                   <td>{{ row.unitName }}</td>
@@ -299,7 +265,7 @@ function previewUnitReport(unit: string) {
                   <td class="num">{{ row.notPassProjectNum }}</td>
                   <td class="num">{{ row.usageRate }}</td>
                   <td
-                    v-for="metricItem in store.moveReport.metrics"
+                    v-for="metricItem in drilldown.moveReport.metrics"
                     :key="metricItem.field"
                     class="num"
                   >
@@ -312,11 +278,11 @@ function previewUnitReport(unit: string) {
         </section>
 
         <section
-          v-else-if="store.dialog === 'belowStandard'"
+          v-else-if="drilldown.dialog === 'belowStandard'"
           class="panel drill-panel"
         >
-          <div v-if="!store.monitoring.failProjects.length" class="empty-state">
-            当前暂无指标使用率低于 70% 的项目。
+          <div v-if="!monitoring.monitoring.failProjects.length" class="empty-state">
+            当前暂无指标使用率低于 60% 的项目。
           </div>
           <div v-else class="table-wrap">
             <table>
@@ -330,7 +296,7 @@ function previewUnitReport(unit: string) {
               </thead>
               <tbody>
                 <tr
-                  v-for="row in store.monitoring.failProjects"
+                  v-for="row in monitoring.monitoring.failProjects"
                   :key="row.projectId"
                 >
                   <td>{{ row.abbreviation || row.unitName }}</td>
@@ -344,11 +310,11 @@ function previewUnitReport(unit: string) {
         </section>
 
         <section
-          v-else-if="store.dialog === 'unitUsage'"
+          v-else-if="drilldown.dialog === 'unitUsage'"
           class="panel drill-panel"
         >
           <div
-            v-if="!store.monitoring.unitMetricUsages.length"
+            v-if="!monitoring.monitoring.unitMetricUsages.length"
             class="empty-state"
           >
             当前暂无单位项目指标使用数据。
@@ -366,7 +332,7 @@ function previewUnitReport(unit: string) {
               </thead>
               <tbody>
                 <tr
-                  v-for="row in store.monitoring.unitMetricUsages"
+                  v-for="row in monitoring.monitoring.unitMetricUsages"
                   :key="row.unitId"
                 >
                   <td>{{ row.abbreviation || row.unitName }}</td>
@@ -381,29 +347,29 @@ function previewUnitReport(unit: string) {
         </section>
 
         <section
-          v-else-if="store.dialog === 'indicatorAnalysis'"
+          v-else-if="drilldown.dialog === 'indicatorAnalysis'"
           class="indicator-card-panel"
         >
           <div class="indicator-card-summary">
-            <span>指标总数：{{ store.allMetrics.length }}</span>
-            <span>使用率低于70%：{{ lowUsageMetricCount }}</span>
+            <span>指标总数：{{ monitoring.allMetrics.length }}</span>
+            <span>使用率低于60%：{{ lowUsageMetricCount }}</span>
           </div>
-          <div v-if="!store.allMetrics.length" class="empty-state">
+          <div v-if="!monitoring.allMetrics.length" class="empty-state">
             当前暂无指标分析数据。
           </div>
           <div v-else class="indicator-card-grid">
             <button
-              v-for="metricItem in store.allMetrics"
+              v-for="metricItem in monitoring.allMetrics"
               :key="metricItem.field || metricItem.name"
               type="button"
               class="indicator-summary-card"
-              :class="{ 'low-usage': metricItem.usageRate < 70 }"
-              @click="store.openMetric(metricItem.name)"
+              :class="{ 'low-usage': metricItem.usageRate < 60 }"
+              @click="actions.openMetric(metricItem.name)"
             >
               <div class="indicator-summary-head">
                 <h3 :title="metricItem.name">{{ metricItem.name }}</h3>
                 <span class="indicator-usage-state">
-                  {{ metricItem.usageRate < 70 ? "低于70%" : "正常" }}
+                  {{ metricItem.usageRate < 60 ? "低于60%" : "正常" }}
                 </span>
               </div>
               <div class="indicator-summary-stats">
@@ -424,11 +390,14 @@ function previewUnitReport(unit: string) {
           </div>
         </section>
 
-        <template v-else-if="metric">
-          <section class="drill-hero">
-            <article class="drill-title-card">
-              <h2>{{ metric.name }}</h2>
-            </article>
+          <template v-else-if="metric">
+            <section class="drill-hero">
+              <article class="drill-title-card">
+                <h2>{{ metric.name }}</h2>
+                <p v-if="drilldown.dialog === 'unitMetric' && drilldown.metricAnalysis?.compareStr" class="metric-compare-note">
+                  {{ drilldown.metricAnalysis.compareStr }}
+                </p>
+              </article>
             <article class="drill-card">
               <div class="drill-card-label">使用项目/项目总数</div>
               <div class="drill-card-value">
@@ -449,7 +418,7 @@ function previewUnitReport(unit: string) {
             </article>
           </section>
           <section
-            v-if="store.dialog === 'groupMetric'"
+            v-if="drilldown.dialog === 'groupMetric'"
             class="panel drill-panel"
           >
             <EChart :option="unitChart" :height="520" />
@@ -469,30 +438,30 @@ function previewUnitReport(unit: string) {
                     <th>是否异常</th>
                     <th>今日</th>
                     <th>昨日</th>
-                    <th>三天前</th>
-                    <th>一周前</th>
-                    <th>一个月前</th>
-                    <th>三个月前</th>
+                    <th :class="{ 'comparison-column-emphasis': emphasizedPeriod === 'threeDaysAgo' }">三天前</th>
+                    <th :class="{ 'comparison-column-emphasis': emphasizedPeriod === 'weekAgo' }">一周前</th>
+                    <th :class="{ 'comparison-column-emphasis': emphasizedPeriod === 'monthAgo' }">一个月前</th>
+                    <th :class="{ 'comparison-column-emphasis': emphasizedPeriod === 'threeMonthsAgo' }">三个月前</th>
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="(row, index) in projectRows" :key="index">
-                    <td>{{ row.ProjectName || row.projectName }}</td>
+                  <tr v-for="row in projectRows" :key="row.id">
+                    <td>{{ row.projectName }}</td>
                     <td>
                       <span
                         class="status-pill"
-                        :class="row.IsAbnormal || row.isAbnormal ? 'bad' : 'ok'"
+                        :class="row.isAbnormal ? 'bad' : 'ok'"
                         >{{
-                          row.IsAbnormal || row.isAbnormal ? "异常" : "正常"
+                          row.isAbnormal ? "异常" : "正常"
                         }}</span
                       >
                     </td>
-                    <td>{{ row.NowData ?? "-" }}</td>
-                    <td>{{ row.YesterdayData ?? "-" }}</td>
-                    <td>{{ row.ThreeDaysAgoData ?? "-" }}</td>
-                    <td>{{ row.WeekAgoData ?? "-" }}</td>
-                    <td>{{ row.MonthAgoData ?? "-" }}</td>
-                    <td>{{ row.ThreeMonthsAgoData ?? "-" }}</td>
+                    <td>{{ row.now || "-" }}</td>
+                    <td>{{ row.yesterday || "-" }}</td>
+                    <td :class="{ 'comparison-column-emphasis': emphasizedPeriod === 'threeDaysAgo' }">{{ row.threeDaysAgo || "-" }}</td>
+                    <td :class="{ 'comparison-column-emphasis': emphasizedPeriod === 'weekAgo' }">{{ row.weekAgo || "-" }}</td>
+                    <td :class="{ 'comparison-column-emphasis': emphasizedPeriod === 'monthAgo' }">{{ row.monthAgo || "-" }}</td>
+                    <td :class="{ 'comparison-column-emphasis': emphasizedPeriod === 'threeMonthsAgo' }">{{ row.threeMonthsAgo || "-" }}</td>
                   </tr>
                 </tbody>
               </table>
diff --git a/next/src/components/IndicatorAnalysis.vue b/next/src/components/features/monitoring/IndicatorAnalysis.vue
similarity index 97%
rename from next/src/components/IndicatorAnalysis.vue
rename to next/src/components/features/monitoring/IndicatorAnalysis.vue
index 7de7d9b..9dba55a 100644
--- a/next/src/components/IndicatorAnalysis.vue
+++ b/next/src/components/features/monitoring/IndicatorAnalysis.vue
@@ -4,7 +4,7 @@
  * 每行固定展示项目覆盖量、使用率和准确率三条进度，用于集团页与公司页复用。
  */
 import { computed } from "vue";
-import type { MetricVM } from "../types/dashboardTypes";
+import type { MetricVM } from "@/types/dashboard";
 
 const props = withDefaults(
   defineProps<{ metrics: MetricVM[]; limit?: number }>(),
diff --git a/next/src/components/features/monitoring/KpiCard.test.ts b/next/src/components/features/monitoring/KpiCard.test.ts
new file mode 100644
index 0000000..f0eb517
--- /dev/null
+++ b/next/src/components/features/monitoring/KpiCard.test.ts
@@ -0,0 +1,12 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import KpiCard from "./KpiCard.vue";
+
+describe("KpiCard", () => {
+  it("仅在可点击时发出选择事件", async () => {
+    const wrapper = mount(KpiCard, { props: { label: "项目数", value: 12, clickable: true } });
+    await wrapper.trigger("click");
+    expect(wrapper.emitted("select")).toHaveLength(1);
+  });
+});
diff --git a/next/src/components/KpiCard.vue b/next/src/components/features/monitoring/KpiCard.vue
similarity index 100%
rename from next/src/components/KpiCard.vue
rename to next/src/components/features/monitoring/KpiCard.vue
diff --git a/next/src/components/MetricStrip.vue b/next/src/components/features/monitoring/MetricStrip.vue
similarity index 93%
rename from next/src/components/MetricStrip.vue
rename to next/src/components/features/monitoring/MetricStrip.vue
index c91f70c..9456b2c 100644
--- a/next/src/components/MetricStrip.vue
+++ b/next/src/components/features/monitoring/MetricStrip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** 顶部重点指标条，点击指标后由父页面发起集团或公司级穿透。 */
-import type { MetricVM } from "../types/dashboardTypes";
+import type { MetricVM } from "@/types/dashboard";
 defineProps<{ metrics: MetricVM[] }>();
 defineEmits<{ select: [name: string] }>();
 </script>
diff --git a/next/src/components/features/project/ProjectMetricSnapshotModal.vue b/next/src/components/features/project/ProjectMetricSnapshotModal.vue
new file mode 100644
index 0000000..4bd2ede
--- /dev/null
+++ b/next/src/components/features/project/ProjectMetricSnapshotModal.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from "vue";
+import type {
+  ProjectMetricSnapshotPeriod,
+  ProjectMetricSnapshotVM,
+} from "@/types/project";
+
+const props = defineProps<{
+  open: boolean;
+  snapshots: Record<ProjectMetricSnapshotPeriod, ProjectMetricSnapshotVM[]>;
+}>();
+const emit = defineEmits<{ close: [] }>();
+
+const periods: Array<{ key: ProjectMetricSnapshotPeriod; label: string }> = [
+  { key: "now", label: "今日" },
+  { key: "yesterday", label: "昨日" },
+  { key: "weekAgo", label: "一周前" },
+  { key: "weeksAgo", label: "两周前" },
+  { key: "monthAgo", label: "一个月前" },
+  { key: "threeMonthsAgo", label: "三个月前" },
+];
+const selectedPeriod = ref<ProjectMetricSnapshotPeriod>("now");
+const periodTabs = useTemplateRef<HTMLDivElement>("periodTabs");
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape" && props.open) emit("close");
+}
+
+watch(
+  () => props.open,
+  async (open) => {
+    if (!open) return;
+    selectedPeriod.value = "now";
+    await nextTick();
+    periodTabs.value?.querySelector("button")?.focus();
+  },
+);
+
+window.addEventListener("keydown", onKeydown);
+onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="drill-modal project-snapshot-modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="project-snapshot-title"
+      @click.self="emit('close')"
+    >
+      <div class="drill-modal-panel project-snapshot-panel">
+        <div class="drill-modal-head">
+          <div id="project-snapshot-title" class="drill-modal-title">项目指标分析</div>
+          <button type="button" class="modal-close" aria-label="关闭" @click="emit('close')">×</button>
+        </div>
+        <div class="drill-modal-body project-snapshot-body">
+          <div ref="periodTabs" class="snapshot-period-tabs" aria-label="指标数据日期">
+            <button
+              v-for="period in periods"
+              :key="period.key"
+              type="button"
+              :class="{ active: selectedPeriod === period.key }"
+              @click="selectedPeriod = period.key"
+            >
+              {{ period.label }}
+            </button>
+          </div>
+
+          <div v-if="!snapshots[selectedPeriod].length" class="empty-state snapshot-empty">
+            当前日期暂无指标数据。
+          </div>
+          <div v-else class="project-snapshot-grid">
+            <article
+              v-for="metric in snapshots[selectedPeriod]"
+              :key="metric.id"
+              class="project-snapshot-card"
+              :class="{ abnormal: metric.isAbnormal }"
+            >
+              <div class="project-snapshot-head">
+                <h3 :title="metric.name">{{ metric.name }}</h3>
+                <span v-if="metric.isAbnormal" class="status-pill bad">异常</span>
+              </div>
+              <strong :title="metric.value || '-'">{{ metric.value || "-" }}</strong>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/next/src/composables/useDrilldownActions.test.ts b/next/src/composables/useDrilldownActions.test.ts
new file mode 100644
index 0000000..4d85ce8
--- /dev/null
+++ b/next/src/composables/useDrilldownActions.test.ts
@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useDrilldownActions } from "./useDrilldownActions";
+
+const mocks = vi.hoisted(() => ({
+  filters: {
+    apiType: 1,
+    apiRange: 0,
+    setFilters: vi.fn(),
+  },
+  monitoring: {
+    currentUnitId: "unit-1",
+    allMetrics: [{
+      name: "隐患排查",
+      field: "Danger",
+      projects: 10,
+      projectUsageNum: 8,
+      usageRate: 80,
+      accuracyRate: 90,
+      frequency: 0,
+      sortIndex: 1,
+    }],
+  },
+  drilldown: {
+    selectedMetric: "",
+    selectedMetricVM: null,
+    openMetric: vi.fn(),
+    openMoveReport: vi.fn(),
+    openIndicatorAnalysis: vi.fn(),
+    openDialog: vi.fn(),
+    closeDialog: vi.fn(),
+  },
+}));
+
+vi.mock("@/stores/filterStore", () => ({ useFilterStore: () => mocks.filters }));
+vi.mock("@/stores/monitoringStore", () => ({ useMonitoringStore: () => mocks.monitoring }));
+vi.mock("@/stores/drilldownStore", () => ({ useDrilldownStore: () => mocks.drilldown }));
+
+describe("useDrilldownActions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.drilldown.selectedMetric = "";
+  });
+
+  it("使用当前筛选和单位打开指标穿透", async () => {
+    const actions = useDrilldownActions();
+    await actions.openMetric("隐患排查");
+
+    expect(mocks.drilldown.openMetric).toHaveBeenCalledWith(
+      mocks.monitoring.allMetrics[0],
+      "unit-1",
+      1,
+      0,
+    );
+  });
+
+  it("筛选变化时先关闭弹窗再更新筛选", () => {
+    const actions = useDrilldownActions();
+    actions.changeFilters("quality", "new");
+
+    expect(mocks.drilldown.closeDialog).toHaveBeenCalledBefore(mocks.filters.setFilters);
+    expect(mocks.filters.setFilters).toHaveBeenCalledWith("quality", "new");
+  });
+});
diff --git a/next/src/composables/useDrilldownActions.ts b/next/src/composables/useDrilldownActions.ts
new file mode 100644
index 0000000..e262f6d
--- /dev/null
+++ b/next/src/composables/useDrilldownActions.ts
@@ -0,0 +1,47 @@
+import { computed } from "vue";
+import { useDrilldownStore, type DialogKind } from "@/stores/drilldownStore";
+import { useFilterStore } from "@/stores/filterStore";
+import { useMonitoringStore } from "@/stores/monitoringStore";
+import type { DimensionKey, SystemKey } from "@/types/dashboard";
+
+/** 协调筛选、监控与穿透 Store，不额外保存业务状态。 */
+export function useDrilldownActions() {
+  const filters = useFilterStore();
+  const monitoring = useMonitoringStore();
+  const drilldown = useDrilldownStore();
+
+  const selectedMetricVM = computed(() =>
+    drilldown.selectedMetricVM
+      || monitoring.allMetrics.find((item) => item.name === drilldown.selectedMetric)
+      || monitoring.allMetrics[0],
+  );
+
+  async function openMetric(name: string) {
+    const metric = monitoring.allMetrics.find((item) => item.name === name);
+    if (!metric?.field) return;
+    await drilldown.openMetric(metric, monitoring.currentUnitId, filters.apiType, filters.apiRange);
+  }
+
+  async function openMoveReport() {
+    await drilldown.openMoveReport(filters.apiType, filters.apiRange, monitoring.allMetrics);
+  }
+
+  function openDialog(kind: Exclude<DialogKind, "moveReport" | "groupMetric" | "unitMetric" | "indicatorAnalysis">) {
+    drilldown.openDialog(kind);
+  }
+
+  function changeFilters(system: SystemKey, dimension: DimensionKey) {
+    drilldown.closeDialog();
+    filters.setFilters(system, dimension);
+  }
+
+  return {
+    selectedMetricVM,
+    openMetric,
+    openMoveReport,
+    openIndicatorAnalysis: drilldown.openIndicatorAnalysis,
+    openDialog,
+    closeDialog: drilldown.closeDialog,
+    changeFilters,
+  };
+}
diff --git a/next/src/composables/useMonitoringPage.ts b/next/src/composables/useMonitoringPage.ts
new file mode 100644
index 0000000..62a6c9f
--- /dev/null
+++ b/next/src/composables/useMonitoringPage.ts
@@ -0,0 +1,25 @@
+import { onScopeDispose, watch, type MaybeRefOrGetter, toValue } from "vue";
+import { useFilterStore } from "@/stores/filterStore";
+import { useMonitoringStore } from "@/stores/monitoringStore";
+
+/** 将路由范围与筛选条件连接到监控请求，并在页面卸载时取消未完成请求。 */
+export function useMonitoringPage(unitId: MaybeRefOrGetter<string>, unitName: MaybeRefOrGetter<string> = "") {
+  const filters = useFilterStore();
+  const monitoring = useMonitoringStore();
+
+  function reload() {
+    return monitoring.load(filters.apiType, filters.apiRange, toValue(unitId), toValue(unitName));
+  }
+
+  watch(
+    [() => filters.apiType, () => filters.apiRange, () => toValue(unitId), () => toValue(unitName)],
+    ([type, range, nextUnitId, nextUnitName], _, onCleanup) => {
+      monitoring.load(type, range, nextUnitId, nextUnitName);
+      onCleanup(() => monitoring.cancel());
+    },
+    { immediate: true },
+  );
+
+  onScopeDispose(() => monitoring.cancel());
+  return { monitoring, reload };
+}
diff --git a/next/src/composables/useProjectPage.ts b/next/src/composables/useProjectPage.ts
new file mode 100644
index 0000000..5a30d6c
--- /dev/null
+++ b/next/src/composables/useProjectPage.ts
@@ -0,0 +1,25 @@
+import { onScopeDispose, watch, type MaybeRefOrGetter, toValue } from "vue";
+import { useFilterStore } from "@/stores/filterStore";
+import { useProjectStore } from "@/stores/projectStore";
+
+/** 项目路由参数或系统筛选改变时刷新详情，并取消失效请求。 */
+export function useProjectPage(unitId: MaybeRefOrGetter<string>, projectId: MaybeRefOrGetter<string>) {
+  const filters = useFilterStore();
+  const project = useProjectStore();
+
+  function reload() {
+    return project.load(filters.apiType, toValue(unitId), toValue(projectId));
+  }
+
+  watch(
+    [() => filters.apiType, () => toValue(unitId), () => toValue(projectId)],
+    ([type, nextUnitId, nextProjectId], _, onCleanup) => {
+      project.load(type, nextUnitId, nextProjectId);
+      onCleanup(() => project.cancel());
+    },
+    { immediate: true },
+  );
+
+  onScopeDispose(() => project.cancel());
+  return { project, reload };
+}
diff --git a/next/src/layouts/DashboardLayout.vue b/next/src/layouts/DashboardLayout.vue
new file mode 100644
index 0000000..6fe32cd
--- /dev/null
+++ b/next/src/layouts/DashboardLayout.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/** 应用布局：只管理大屏框架、全局筛选、导航和全局弹窗。 */
+import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useDrilldownActions } from "@/composables/useDrilldownActions";
+import { useFilterStore } from "@/stores/filterStore";
+import { useMonitoringStore } from "@/stores/monitoringStore";
+import { EXTERNAL_LINKS, SYSTEMS } from "@/utils/dashboardConfig";
+import type { DimensionKey, SystemKey } from "@/types/dashboard";
+
+const DrillModal = defineAsyncComponent(() => import("@/components/features/drilldown/DrillModal.vue"));
+const filters = useFilterStore();
+const monitoring = useMonitoringStore();
+const actions = useDrilldownActions();
+const route = useRoute();
+const router = useRouter();
+const screen = ref<HTMLElement>();
+let frame = 0;
+const visibleSystems = computed(() => SYSTEMS.filter((item) => filters.allowedSystems.includes(item.key)));
+const pageName = computed(() => route.name === "project" ? "项目明细" : route.name === "enterprise" ? monitoring.currentUnitName || "企业看板" : "集团总览");
+
+function scaleScreen() {
+  cancelAnimationFrame(frame);
+  frame = requestAnimationFrame(() => {
+    if (!screen.value) return;
+    const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
+    const left = Math.max((window.innerWidth - 1920 * scale) / 2, 0);
+    const top = Math.max((window.innerHeight - 1080 * scale) / 2, 0);
+    screen.value.style.transform = `translate(${left}px, ${top}px) scale(${scale})`;
+  });
+}
+
+function changeFilter(nextSystem: SystemKey, nextDimension: DimensionKey) {
+  actions.changeFilters(nextSystem, nextDimension);
+}
+
+onMounted(async () => {
+  await nextTick();
+  scaleScreen();
+  window.addEventListener("resize", scaleScreen);
+});
+onBeforeUnmount(() => {
+  cancelAnimationFrame(frame);
+  window.removeEventListener("resize", scaleScreen);
+});
+</script>
+
+<template>
+  <div ref="screen" class="screen">
+    <header class="topbar">
+      <div class="title-zone"><div class="brand-mark" aria-hidden="true"></div><div class="title-text"><div class="eyebrow">DATA GOVERNANCE COMMAND CENTER</div><h1>集团数据治理项目监控大屏</h1></div></div>
+      <div class="header-actions">
+          <div class="top-meta-row"><a class="source-download" :href="EXTERNAL_LINKS.source" target="_blank" rel="noopener noreferrer">数据溯源表</a><div class="time-card"><span>数据时间 <strong>{{ monitoring.monitoring.summary.dataDate || "--" }}</strong></span></div></div>
+        <div class="toggle-row">
+          <div class="dimension-toggle" aria-label="数据维度切换"><button type="button" :class="{ active: filters.dimension === 'all' }" @click="changeFilter(filters.system, 'all')">所有项目</button><button type="button" :class="{ active: filters.dimension === 'new' }" @click="changeFilter(filters.system, 'new')">新开工项目</button></div>
+          <div class="system-toggle" aria-label="系统切换"><button v-for="item in visibleSystems" :key="item.key" type="button" :class="{ active: filters.system === item.key }" @click="changeFilter(item.key, filters.dimension)">{{ item.label }}</button></div>
+        </div>
+      </div>
+    </header>
+    <div class="crumb-row"><div class="breadcrumbs"><span class="crumb clickable" @click="router.push('/')">集团总览</span><span v-if="route.name !== 'group'">›</span><span v-if="route.name !== 'group'" class="crumb">{{ pageName }}</span><span class="crumb">当前维度：{{ filters.dimension === "all" ? "所有项目" : "新开工项目" }}</span><span class="crumb">当前系统：{{ SYSTEMS.find((item) => item.key === filters.system)?.label }}</span></div><button type="button" class="ghost-btn" @click="router.push('/')">返回集团总览</button></div>
+    <main id="app-main"><RouterView /></main>
+  </div>
+  <DrillModal />
+</template>
diff --git a/next/src/main.ts b/next/src/main.ts
index acf0c19..0c36ae4 100644
--- a/next/src/main.ts
+++ b/next/src/main.ts
@@ -4,14 +4,14 @@
  */
 import { createApp } from "vue";
 import { createPinia } from "pinia";
-import App from "./App.vue";
-import router from "./router";
+import App from "@/App.vue";
+import router from "@/router";
 import "../../res/css/indexV2.base.css";
 import "../../res/css/indexV2.cards.css";
 import "../../res/css/indexV2.panels.css";
 import "../../res/css/indexV2.modal-table.css";
 import "../../res/css/indexV2.detail.css";
 import "../../res/css/indexV2.responsive.css";
-import "./styles/next.css";
+import "@/assets/styles/next.css";
 
 createApp(App).use(createPinia()).use(router).mount("#app");
diff --git a/next/src/views/EnterpriseView.vue b/next/src/pages/EnterprisePage.vue
similarity index 58%
rename from next/src/views/EnterpriseView.vue
rename to next/src/pages/EnterprisePage.vue
index dad3b7f..aee4035 100644
--- a/next/src/views/EnterpriseView.vue
+++ b/next/src/pages/EnterprisePage.vue
@@ -1,93 +1,32 @@
 <script setup lang="ts">
 /** 公司级页面：按当前单位加载趋势、项目分析和指标分析，并支持继续下钻项目。 */
-import { computed, onMounted } from "vue";
+import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import type { EChartsOption } from "echarts";
-import { useDashboardStore } from "../stores/dashboardStore";
-import EChart from "../components/EChart.vue";
-import IndicatorAnalysis from "../components/IndicatorAnalysis.vue";
-import KpiCard from "../components/KpiCard.vue";
-import MetricStrip from "../components/MetricStrip.vue";
+import EChart from "@/components/base/EChart.vue";
+import IndicatorAnalysis from "@/components/features/monitoring/IndicatorAnalysis.vue";
+import KpiCard from "@/components/features/monitoring/KpiCard.vue";
+import MetricStrip from "@/components/features/monitoring/MetricStrip.vue";
+import { useDrilldownActions } from "@/composables/useDrilldownActions";
+import { useMonitoringPage } from "@/composables/useMonitoringPage";
+import { useMonitoringStore } from "@/stores/monitoringStore";
+import { createProjectOption, createTrendOption } from "@/utils/charts/monitoringCharts";
 
-const store = useDashboardStore();
+const monitoringStore = useMonitoringStore();
+const actions = useDrilldownActions();
 const route = useRoute();
 const router = useRouter();
 const unitId = computed(() => String(route.params.unitId));
 const unitName = computed(() =>
-  String(route.query.name || store.currentUnitName || "企业"),
+  String(route.query.name || monitoringStore.currentUnitName || "企业"),
 );
-const summary = computed(() => store.monitoring.summary);
-const trendOption = computed<EChartsOption>(() => ({
-  tooltip: { trigger: "axis" },
-  grid: { left: 48, right: 24, top: 8, bottom: 24 },
-  xAxis: {
-    type: "category",
-    data: store.monitoring.trend.dates,
-    axisLabel: { color: "#a8c7db" },
-  },
-  yAxis: {
-    type: "value",
-    max: 100,
-    axisLabel: { color: "#a8c7db", formatter: "{value}%" },
-    splitLine: { lineStyle: { color: "rgba(93,191,255,.14)" } },
-  },
-  series: [
-    {
-      name: "上线率",
-      type: "line",
-      smooth: true,
-      data: store.monitoring.trend.online,
-      color: "#5d93ff",
-    },
-    {
-      name: "使用率",
-      type: "line",
-      smooth: true,
-      data: store.monitoring.trend.usage,
-      color: "#5ee1b5",
-    },
-    {
-      name: "准确率",
-      type: "line",
-      smooth: true,
-      data: store.monitoring.trend.accuracy,
-      color: "#ffc857",
-    },
-  ],
-}));
-const projectOption = computed<EChartsOption>(() => ({
-  tooltip: { trigger: "axis" },
-  grid: { left: 48, right: 20, top: 8, bottom: 54 },
-  xAxis: {
-    type: "category",
-    data: store.monitoring.projects.map((item) => item.name),
-    axisLabel: { color: "#a8c7db", rotate: 24 },
-  },
-  yAxis: {
-    type: "value",
-    max: 100,
-    axisLabel: { color: "#a8c7db", formatter: "{value}%" },
-    splitLine: { lineStyle: { color: "rgba(93,191,255,.14)" } },
-  },
-  series: [
-    {
-      name: "使用率",
-      type: "bar",
-      data: store.monitoring.projects.map((item) => item.usageRate),
-      itemStyle: { color: "#5ee1b5" },
-    },
-    {
-      name: "准确率",
-      type: "bar",
-      data: store.monitoring.projects.map((item) => item.accuracyRate),
-      itemStyle: { color: "#ffc857" },
-    },
-  ],
-}));
+const summary = computed(() => monitoringStore.monitoring.summary);
+const { reload } = useMonitoringPage(unitId, unitName);
+const trendOption = computed(() => createTrendOption(monitoringStore.monitoring.trend));
+const projectOption = computed(() => createProjectOption(monitoringStore.monitoring.projects));
 
 function enterProject(index: number) {
   // 项目图表使用数据索引定位 projectId，单位名称放入 query 供项目面包屑和详情兜底。
-  const project = store.monitoring.projects[index];
+  const project = monitoringStore.monitoring.projects[index];
   if (!project) return;
   router.push({
     name: "project",
@@ -99,17 +38,13 @@ function enterProject(index: number) {
   });
 }
 
-onMounted(() => {
-  store.currentUnitName = unitName.value;
-  store.loadMonitoring(unitId.value, unitName.value);
-});
 </script>
 
 <template>
-  <div v-if="store.loading" class="empty-state">正在获取企业监控数据...</div>
-  <div v-else-if="store.error" class="panel error-panel">
-    <div class="empty-state">{{ store.error }}</div>
-    <button class="ghost-btn" @click="store.loadMonitoring(unitId, unitName)">
+  <div v-if="monitoringStore.loading" class="empty-state">正在获取企业监控数据...</div>
+  <div v-else-if="monitoringStore.error" class="panel error-panel">
+    <div class="empty-state">{{ monitoringStore.error }}</div>
+    <button class="ghost-btn" @click="reload()">
       重新加载
     </button>
   </div>
@@ -122,7 +57,7 @@ onMounted(() => {
         description="上线项目/申请关闭/应使用项目/项目总数"
         :progress="summary.onlineRate"
         clickable
-        @select="store.dialog = 'online'"
+        @select="actions.openDialog('online')"
       />
       <KpiCard
         label="待关联项目数"
@@ -130,7 +65,7 @@ onMounted(() => {
         unit="个"
         :progress="summary.preProjectTotal / 2"
         clickable
-        @select="store.dialog = 'online'"
+        @select="actions.openDialog('online')"
       />
       <KpiCard
         label="待上线项目数"
@@ -138,16 +73,16 @@ onMounted(() => {
         unit="个"
         :progress="summary.pendingTotal"
         clickable
-        @select="store.dialog = 'online'"
+        @select="actions.openDialog('online')"
       />
       <KpiCard
         label="未达标项目数"
         :value="summary.failProjectNum"
         unit="个"
-        description="指标使用率低于 70% 的项目"
+        description="指标使用率低于 60% 的项目"
         :progress="100 - summary.failProjectNum"
         clickable
-        @select="store.dialog = 'belowStandard'"
+        @select="actions.openDialog('belowStandard')"
       />
       <KpiCard
         label="项目指标使用率"
@@ -161,8 +96,8 @@ onMounted(() => {
       />
     </section>
     <MetricStrip
-      :metrics="store.monitoring.keyMetrics"
-      @select="store.openMetric"
+      :metrics="monitoringStore.monitoring.keyMetrics"
+      @select="actions.openMetric"
     />
     <article class="panel trend-panel enterprise-trend-panel">
       <div class="panel-header">
@@ -184,7 +119,7 @@ onMounted(() => {
       </div>
       <div class="chart-box">
         <EChart
-          v-if="store.monitoring.trend.dates.length"
+          v-if="monitoringStore.monitoring.trend.dates.length"
           :option="trendOption"
           :height="112"
         />
@@ -210,11 +145,11 @@ onMounted(() => {
         </div>
         <div class="chart-box">
           <EChart
-            v-if="store.monitoring.projects.length"
+            v-if="monitoringStore.monitoring.projects.length"
             :option="projectOption"
             :height="210"
             :min-width="
-              Math.max(1100, store.monitoring.projects.length * 126 + 120)
+              Math.max(1100, monitoringStore.monitoring.projects.length * 126 + 120)
             "
             @select="enterProject"
           />
@@ -235,14 +170,14 @@ onMounted(() => {
           <button
             type="button"
             class="more-btn"
-            @click="store.openIndicatorAnalysis()"
+            @click="actions.openIndicatorAnalysis()"
           >
             更多
           </button>
         </div>
         <IndicatorAnalysis
-          :metrics="store.allMetrics"
-          @select="store.openMetric"
+          :metrics="monitoringStore.allMetrics"
+          @select="actions.openMetric"
         />
       </article>
     </section>
diff --git a/next/src/views/GroupView.vue b/next/src/pages/GroupPage.vue
similarity index 58%
rename from next/src/views/GroupView.vue
rename to next/src/pages/GroupPage.vue
index dcbe820..c4e11f5 100644
--- a/next/src/views/GroupView.vue
+++ b/next/src/pages/GroupPage.vue
@@ -1,96 +1,29 @@
 <script setup lang="ts">
 /** 集团级页面：展示集团汇总、重点指标、趋势、企业分析、报告入口和集团指标穿透。 */
-import { computed, onMounted } from "vue";
+import { computed } from "vue";
 import { useRouter } from "vue-router";
-import type { EChartsOption } from "echarts";
-import { useDashboardStore } from "../stores/dashboardStore";
-import EChart from "../components/EChart.vue";
-import IndicatorAnalysis from "../components/IndicatorAnalysis.vue";
-import KpiCard from "../components/KpiCard.vue";
-import MetricStrip from "../components/MetricStrip.vue";
+import EChart from "@/components/base/EChart.vue";
+import IndicatorAnalysis from "@/components/features/monitoring/IndicatorAnalysis.vue";
+import KpiCard from "@/components/features/monitoring/KpiCard.vue";
+import MetricStrip from "@/components/features/monitoring/MetricStrip.vue";
+import { useDrilldownActions } from "@/composables/useDrilldownActions";
+import { useMonitoringPage } from "@/composables/useMonitoringPage";
+import { useFilterStore } from "@/stores/filterStore";
+import { createEnterpriseOption, createTrendOption } from "@/utils/charts/monitoringCharts";
 
-const store = useDashboardStore();
+const filters = useFilterStore();
+const actions = useDrilldownActions();
+const { monitoring: monitoringStore, reload } = useMonitoringPage("");
 const router = useRouter();
-const summary = computed(() => store.monitoring.summary);
-const trendOption = computed<EChartsOption>(() => ({
-  tooltip: { trigger: "axis" },
-  grid: { left: 48, right: 24, top: 8, bottom: 24 },
-  xAxis: {
-    type: "category",
-    data: store.monitoring.trend.dates,
-    axisLabel: { color: "#a8c7db" },
-  },
-  yAxis: {
-    type: "value",
-    max: 100,
-    axisLabel: { color: "#a8c7db", formatter: "{value}%" },
-    splitLine: { lineStyle: { color: "rgba(93,191,255,.14)" } },
-  },
-  series: [
-    {
-      name: "上线率",
-      type: "line",
-      smooth: true,
-      data: store.monitoring.trend.online,
-      color: "#5d93ff",
-    },
-    {
-      name: "使用率",
-      type: "line",
-      smooth: true,
-      data: store.monitoring.trend.usage,
-      color: "#5ee1b5",
-    },
-    {
-      name: "准确率",
-      type: "line",
-      smooth: true,
-      data: store.monitoring.trend.accuracy,
-      color: "#ffc857",
-    },
-  ],
-}));
-const enterpriseOption = computed<EChartsOption>(() => ({
-  tooltip: { trigger: "axis" },
-  grid: { left: 48, right: 20, top: 8, bottom: 54 },
-  xAxis: {
-    type: "category",
-    data: store.monitoring.units.map((item) => item.name),
-    axisLabel: { color: "#a8c7db", rotate: 28 },
-  },
-  yAxis: {
-    type: "value",
-    max: 100,
-    axisLabel: { color: "#a8c7db", formatter: "{value}%" },
-    splitLine: { lineStyle: { color: "rgba(93,191,255,.14)" } },
-  },
-  series: [
-    {
-      name: "上线率",
-      type: "bar",
-      data: store.monitoring.units.map((item) => item.onlineRate),
-      itemStyle: { color: "#5d93ff" },
-    },
-    {
-      name: "使用率",
-      type: "bar",
-      data: store.monitoring.units.map((item) => item.usageRate),
-      itemStyle: { color: "#5ee1b5" },
-    },
-    {
-      name: "准确率",
-      type: "bar",
-      data: store.monitoring.units.map((item) => item.accuracyRate),
-      itemStyle: { color: "#ffc857" },
-    },
-  ],
-}));
+const summary = computed(() => monitoringStore.monitoring.summary);
+const trendOption = computed(() => createTrendOption(monitoringStore.monitoring.trend));
+const enterpriseOption = computed(() => createEnterpriseOption(monitoringStore.monitoring.units));
 
 function enterEnterprise(index: number) {
   // ECharts 点击事件返回 dataIndex，以同序单位模型构造公司路由。
-  const unit = store.monitoring.units[index];
+  const unit = monitoringStore.monitoring.units[index];
   if (!unit) return;
-  store.currentUnitName = unit.name;
+  monitoringStore.currentUnitName = unit.name;
   router.push({
     name: "enterprise",
     params: { unitId: unit.unitId },
@@ -98,14 +31,13 @@ function enterEnterprise(index: number) {
   });
 }
 
-onMounted(() => store.loadMonitoring());
 </script>
 
 <template>
-  <div v-if="store.loading" class="empty-state">正在获取集团监控数据...</div>
-  <div v-else-if="store.error" class="panel error-panel">
-    <div class="empty-state">{{ store.error }}</div>
-    <button class="ghost-btn" @click="store.loadMonitoring()">重新加载</button>
+  <div v-if="monitoringStore.loading" class="empty-state">正在获取集团监控数据...</div>
+  <div v-else-if="monitoringStore.error" class="panel error-panel">
+    <div class="empty-state">{{ monitoringStore.error }}</div>
+    <button class="ghost-btn" @click="reload()">重新加载</button>
   </div>
   <template v-else>
     <section class="kpi-grid">
@@ -116,7 +48,7 @@ onMounted(() => store.loadMonitoring());
         description="上线项目/申请关闭/应使用项目/项目总数"
         :progress="summary.onlineRate"
         clickable
-        @select="store.dialog = 'online'"
+        @select="actions.openDialog('online')"
       />
       <KpiCard
         label="待关联项目数"
@@ -125,7 +57,7 @@ onMounted(() => store.loadMonitoring());
         description="点击查看集团项目上线统计"
         :progress="summary.preProjectTotal / 2"
         clickable
-        @select="store.dialog = 'online'"
+        @select="actions.openDialog('online')"
       />
       <KpiCard
         label="待上线项目数"
@@ -134,16 +66,16 @@ onMounted(() => store.loadMonitoring());
         description="点击查看集团项目上线统计"
         :progress="summary.pendingTotal"
         clickable
-        @select="store.dialog = 'online'"
+        @select="actions.openDialog('online')"
       />
       <KpiCard
         label="未达标项目数"
         :value="summary.failProjectNum"
         unit="个"
-        description="指标使用率低于 70% 的项目"
+        description="指标使用率低于 60% 的项目"
         :progress="100 - summary.failProjectNum"
         clickable
-        @select="store.dialog = 'belowStandard'"
+        @select="actions.openDialog('belowStandard')"
       />
       <KpiCard
         label="项目指标使用率"
@@ -151,7 +83,7 @@ onMounted(() => store.loadMonitoring());
         description="点击查看单位项目指标使用情况"
         :progress="summary.usageRate"
         clickable
-        @select="store.dialog = 'unitUsage'"
+        @select="actions.openDialog('unitUsage')"
       />
       <KpiCard
         label="项目指标准确率"
@@ -160,8 +92,8 @@ onMounted(() => store.loadMonitoring());
       />
     </section>
     <MetricStrip
-      :metrics="store.monitoring.keyMetrics"
-      @select="store.openMetric"
+      :metrics="monitoringStore.monitoring.keyMetrics"
+      @select="actions.openMetric"
     />
     <article class="panel trend-panel group-trend-panel">
       <div class="panel-header">
@@ -181,7 +113,7 @@ onMounted(() => store.loadMonitoring());
       </div>
       <div class="chart-box">
         <EChart
-          v-if="store.monitoring.trend.dates.length"
+          v-if="monitoringStore.monitoring.trend.dates.length"
           :option="trendOption"
           :height="112"
         />
@@ -208,11 +140,11 @@ onMounted(() => store.loadMonitoring());
           </div>
           <div class="chart-box">
             <EChart
-              v-if="store.monitoring.units.length"
+              v-if="monitoringStore.monitoring.units.length"
               :option="enterpriseOption"
               :height="132"
               :min-width="
-                Math.max(1180, store.monitoring.units.length * 88 + 120)
+                Math.max(1180, monitoringStore.monitoring.units.length * 88 + 120)
               "
               @select="enterEnterprise"
             />
@@ -222,7 +154,7 @@ onMounted(() => store.loadMonitoring());
         <button
           type="button"
           class="panel usage-report-panel report-entry-panel chart-click"
-          @click="store.dialog = 'online'"
+          @click="actions.openDialog('online')"
         >
           <div class="panel-header">
             <h2 class="panel-title">数据治理“用不用”分析报告</h2>
@@ -230,10 +162,10 @@ onMounted(() => store.loadMonitoring());
           </div>
         </button>
         <button
-          v-if="store.system !== 'emergency'"
+          v-if="filters.system !== 'emergency'"
           type="button"
           class="panel usage-report-panel report-entry-panel chart-click"
-          @click="store.openMoveReport()"
+          @click="actions.openMoveReport()"
         >
           <div class="panel-header">
             <h2 class="panel-title">数据治理“动不动”分析报告</h2>
@@ -247,15 +179,15 @@ onMounted(() => store.loadMonitoring());
           <button
             type="button"
             class="more-btn"
-            @click="store.openIndicatorAnalysis()"
+            @click="actions.openIndicatorAnalysis()"
           >
             更多
           </button>
         </div>
         <IndicatorAnalysis
-          :metrics="store.allMetrics"
+          :metrics="monitoringStore.allMetrics"
           :limit="0"
-          @select="store.openMetric"
+          @select="actions.openMetric"
         />
       </article>
     </section>
diff --git a/next/src/pages/ProjectPage.vue b/next/src/pages/ProjectPage.vue
new file mode 100644
index 0000000..3b5e28f
--- /dev/null
+++ b/next/src/pages/ProjectPage.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/** 项目级容器：只消费项目详情 ViewModel，不兼容接口字段别名。 */
+import { computed, ref } from "vue";
+import { useRoute } from "vue-router";
+import ProjectMetricSnapshotModal from "@/components/features/project/ProjectMetricSnapshotModal.vue";
+import { useProjectPage } from "@/composables/useProjectPage";
+const route = useRoute();
+const unitId = computed(() => String(route.params.unitId));
+const projectId = computed(() => String(route.params.projectId));
+const { project: projectStore, reload } = useProjectPage(unitId, projectId);
+
+const data = computed(() => projectStore.data);
+const project = computed(() => data.value?.info);
+const rows = computed(() => data.value?.metrics || []);
+const snapshots = computed(() => data.value?.metricSnapshots);
+const snapshotModalOpen = ref(false);
+const display = (value: unknown) => value == null || value === "" ? "-" : String(value);
+const date = (value: unknown) => value ? String(value).split("T")[0] : "-";
+</script>
+
+<template>
+  <div v-if="projectStore.loading" class="empty-state">正在获取项目监控数据...</div>
+  <div v-else-if="projectStore.error" class="panel error-panel">
+    <div class="empty-state">{{ projectStore.error }}</div>
+    <button class="ghost-btn" @click="reload()">重新加载</button>
+  </div>
+  <template v-else>
+    <section class="metric-cards project-metric-cards">
+      <article class="mini-panel"><div class="mini-label">达标状态</div><div class="mini-value">{{ display(data?.usageState) }}</div></article>
+      <article class="mini-panel"><div class="mini-label">指标使用数量</div><div class="mini-value">{{ display(data?.metricUsageInfo) }}</div></article>
+      <article class="mini-panel"><div class="mini-label">准确数量</div><div class="mini-value">{{ display(data?.metricAccuracyInfo) }}</div></article>
+      <article class="mini-panel"><div class="mini-label">预警指标</div><div class="mini-value">{{ data?.abnormalNum || 0 }}<span class="kpi-unit">项</span></div></article>
+    </section>
+    <section class="project-layout">
+      <article class="panel">
+        <div class="panel-header"><h2 class="panel-title">项目信息</h2></div>
+        <div class="field-list">
+          <div class="field-row"><div class="field-name">所属企业</div><div class="field-value">{{ display(project?.unitName || route.query.unitName) }}</div></div>
+          <div class="field-row"><div class="field-name">项目名称</div><div class="field-value">{{ display(project?.name || project?.shortName) }}</div></div>
+          <div class="field-row"><div class="field-name">项目编号</div><div class="field-value">{{ display(project?.code) }}</div></div>
+          <div class="field-row"><div class="field-name">项目地址</div><div class="field-value">{{ display(project?.address) }}</div></div>
+          <div class="field-row"><div class="field-name">项目状态</div><div class="field-value">{{ display(project?.state || data?.onlineState) }}</div></div>
+          <div class="field-row"><div class="field-name">开工日期</div><div class="field-value">{{ date(project?.startDate) }}</div></div>
+          <div class="field-row"><div class="field-name">数据日期</div><div class="field-value">{{ date(data?.dataDate) }}</div></div>
+        </div>
+      </article>
+      <article class="panel">
+        <div class="panel-header">
+          <h2 class="panel-title">指标分析</h2>
+          <button type="button" class="more-btn" @click="snapshotModalOpen = true">更多</button>
+        </div>
+        <div v-if="!rows.length" class="empty-state">暂无项目指标数据。</div>
+        <div v-else class="table-wrap">
+          <table>
+            <thead><tr><th>指标名称</th><th>是否异常</th><th>对比</th><th>今日</th><th>昨日</th><th>一周前</th><th>两周前</th><th>一个月前</th><th>三个月前</th></tr></thead>
+            <tbody>
+              <tr v-for="row in rows" :key="row.id">
+                <td>{{ row.name }}</td><td><span class="status-pill" :class="row.isAbnormal ? 'bad' : 'ok'">{{ row.isAbnormal ? "异常" : "正常" }}</span></td>
+                <td>{{ row.compare || "-" }}</td><td>{{ row.now || "-" }}</td><td>{{ row.yesterday || "-" }}</td><td>{{ row.weekAgo || "-" }}</td><td>{{ row.weeksAgo || "-" }}</td><td>{{ row.monthAgo || "-" }}</td><td>{{ row.threeMonthsAgo || "-" }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </article>
+    </section>
+    <ProjectMetricSnapshotModal
+      v-if="snapshots"
+      :open="snapshotModalOpen"
+      :snapshots="snapshots"
+      @close="snapshotModalOpen = false"
+    />
+  </template>
+</template>
diff --git a/next/src/router/index.ts b/next/src/router/index.ts
index 6c4f1e4..e4a00bd 100644
--- a/next/src/router/index.ts
+++ b/next/src/router/index.ts
@@ -1,14 +1,11 @@
-/**
- * 页面路由。
- * 使用哈希路由保证 dist 可直接部署到静态服务器，无需配置 history fallback；页面组件按路由懒加载。
- */
 import { createRouter, createWebHashHistory } from "vue-router";
 
+/** 哈希路由保持静态部署兼容；业务视图按路由懒加载。 */
 export default createRouter({
   history: createWebHashHistory(),
   routes: [
-    { path: "/", name: "group", component: () => import("../views/GroupView.vue") },
-    { path: "/enterprise/:unitId", name: "enterprise", component: () => import("../views/EnterpriseView.vue") },
-    { path: "/project/:unitId/:projectId", name: "project", component: () => import("../views/ProjectView.vue") }
-  ]
+    { path: "/", name: "group", component: () => import("@/pages/GroupPage.vue") },
+    { path: "/enterprise/:unitId", name: "enterprise", component: () => import("@/pages/EnterprisePage.vue") },
+    { path: "/project/:unitId/:projectId", name: "project", component: () => import("@/pages/ProjectPage.vue") },
+  ],
 });
diff --git a/next/src/stores/dashboardStore.ts b/next/src/stores/dashboardStore.ts
deleted file mode 100644
index 95bc244..0000000
--- a/next/src/stores/dashboardStore.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * 看板核心状态仓库。
- * 统一管理筛选条件、集团/公司监控数据、项目详情、弹窗和指标穿透，页面只负责展示与触发 action。
- */
-import { computed, ref } from "vue";
-import { defineStore } from "pinia";
-import { API_ENDPOINTS, SYSTEMS, type DimensionKey, type SystemKey } from "../config/dashboardConfig";
-import { normalizeMonitoring, normalizeMoveReport } from "../adapters/dashboardAdapter";
-import { getJson } from "../services/http";
-import type { DialogKind, MasterRecordVM, MonitoringVM, MoveReportVM } from "../types/dashboardTypes";
-
-const emptyMonitoring = (): MonitoringVM => normalizeMonitoring({});
-const emptyMoveReport = (): MoveReportVM => ({ metrics: [], rows: [] });
-
-function allowedSystemsFromUrl(): SystemKey[] {
-  // 兼容外部系统沿用的 ?type=1,2 参数；非法值回退为全部系统。
-  const raw = new URLSearchParams(window.location.search).get("type");
-  if (!raw) return SYSTEMS.map((item) => item.key);
-  const result = raw.split(/[,，\s]+/).map((part) => SYSTEMS.find((item) => item.externalType === part)?.key).filter(Boolean) as SystemKey[];
-  return result.length ? [...new Set(result)] : SYSTEMS.map((item) => item.key);
-}
-
-export const useDashboardStore = defineStore("dashboard", () => {
-  const allowedSystems = ref<SystemKey[]>(allowedSystemsFromUrl());
-  const system = ref<SystemKey>(allowedSystems.value[0] || "safety");
-  const dimension = ref<DimensionKey>("all");
-  const loading = ref(false);
-  const error = ref("");
-  const monitoring = ref<MonitoringVM>(emptyMonitoring());
-  const currentUnitId = ref("");
-  const currentUnitName = ref("");
-  const projectData = ref<Record<string, unknown> | null>(null);
-  const projectLoading = ref(false);
-  const projectError = ref("");
-  const dialog = ref<DialogKind>(null);
-  const selectedMetric = ref("");
-  const metricAnalysis = ref<Record<string, unknown> | null>(null);
-  const metricLoading = ref(false);
-  const metricError = ref("");
-  const moveReport = ref<MoveReportVM>(emptyMoveReport());
-  const moveReportLoading = ref(false);
-  const moveReportError = ref("");
-  let monitoringRequest = 0;
-  let monitoringController: AbortController | null = null;
-  let moveReportRequest = 0;
-  let moveReportController: AbortController | null = null;
-
-  const apiType = computed(() => SYSTEMS.find((item) => item.key === system.value)?.type ?? 0);
-  const apiRange = computed(() => dimension.value === "new" ? 1 : 0);
-  const allMetrics = computed(() => monitoring.value.metrics.length ? monitoring.value.metrics : monitoring.value.keyMetrics);
-  const selectedMetricVM = computed(() => allMetrics.value.find((item) => item.name === selectedMetric.value) || allMetrics.value[0]);
-
-  async function loadMonitoring(unitId = "", unitName = "") {
-    // 新请求开始前取消旧请求，并用递增序号阻止已失效响应覆盖最新筛选结果。
-    const request = ++monitoringRequest;
-    monitoringController?.abort();
-    monitoringController = new AbortController();
-    loading.value = true;
-    error.value = "";
-    currentUnitId.value = unitId;
-    if (unitName) currentUnitName.value = unitName;
-    try {
-      const endpoint = unitId ? API_ENDPOINTS.unitMonitoring : API_ENDPOINTS.monitoring;
-      const result = await getJson<unknown>(endpoint, { type: apiType.value, range: apiRange.value, unitId }, { signal: monitoringController.signal });
-      if (request !== monitoringRequest) return;
-      monitoring.value = normalizeMonitoring(result.data);
-    } catch (reason) {
-      if (request !== monitoringRequest) return;
-      error.value = reason instanceof Error ? reason.message : "数据加载失败";
-      monitoring.value = emptyMonitoring();
-    } finally {
-      if (request === monitoringRequest) loading.value = false;
-    }
-  }
-
-  async function loadProject(unitId: string, projectId: string) {
-    projectLoading.value = true;
-    projectError.value = "";
-    projectData.value = null;
-    try {
-      const result = await getJson<Record<string, unknown>>(API_ENDPOINTS.projectMonitoring, { type: apiType.value, unitId, projectId });
-      projectData.value = result.data;
-    } catch (reason) {
-      projectError.value = reason instanceof Error ? reason.message : "项目数据加载失败";
-    } finally {
-      projectLoading.value = false;
-    }
-  }
-
-  async function openMetric(name: string) {
-    // 是否存在 unitId 决定调用集团指标穿透还是公司指标穿透接口。
-    const metric = allMetrics.value.find((item) => item.name === name);
-    if (!metric?.field) return;
-    selectedMetric.value = name;
-    dialog.value = currentUnitId.value ? "unitMetric" : "groupMetric";
-    metricLoading.value = true;
-    metricError.value = "";
-    metricAnalysis.value = null;
-    try {
-      const endpoint = currentUnitId.value ? API_ENDPOINTS.unitMetric : API_ENDPOINTS.groupMetric;
-      const result = await getJson<Record<string, unknown>>(endpoint, {
-        type: apiType.value, range: apiRange.value, filed: metric.field, unitId: currentUnitId.value || undefined
-      });
-      metricAnalysis.value = result.data;
-    } catch (reason) {
-      metricError.value = reason instanceof Error ? reason.message : "指标穿透加载失败";
-    } finally {
-      metricLoading.value = false;
-    }
-  }
-
-  function openIndicatorAnalysis() {
-    // 集团和企业共用当前监控数据，弹窗不重复请求；点击卡片后再按层级调用指标穿透接口。
-    metricError.value = "";
-    metricAnalysis.value = null;
-    dialog.value = "indicatorAnalysis";
-  }
-
-  async function openMoveReport() {
-    // 动态表头和企业数据必须使用同一组 type/range 快照，防止切换筛选时新旧结果混用。
-    const request = ++moveReportRequest;
-    moveReportController?.abort();
-    moveReportController = new AbortController();
-    dialog.value = "moveReport";
-    moveReportLoading.value = true;
-    moveReportError.value = "";
-    moveReport.value = emptyMoveReport();
-    try {
-      const [definitions, rows] = await Promise.all([
-        getJson<unknown>(API_ENDPOINTS.groupMoveReportMetrics, {
-          type: apiType.value,
-        }, { signal: moveReportController.signal }),
-        getJson<unknown>(API_ENDPOINTS.groupMoveReport, {
-          type: apiType.value,
-          range: apiRange.value,
-        }, { signal: moveReportController.signal }),
-      ]);
-      if (request !== moveReportRequest) return;
-      moveReport.value = normalizeMoveReport(definitions.data, rows.data, allMetrics.value);
-    } catch (reason) {
-      if (request !== moveReportRequest) return;
-      moveReportError.value = reason instanceof Error ? reason.message : "动不动分析报告加载失败";
-    } finally {
-      if (request === moveReportRequest) moveReportLoading.value = false;
-    }
-  }
-
-  function closeDialog() {
-    if (dialog.value === "moveReport") {
-      moveReportRequest += 1;
-      moveReportController?.abort();
-    }
-    dialog.value = null;
-  }
-
-  function setFilters(nextSystem: SystemKey, nextDimension: DimensionKey) {
-    closeDialog();
-    system.value = nextSystem;
-    dimension.value = nextDimension;
-  }
-
-  function findRecord(unitId: string): MasterRecordVM | undefined {
-    return monitoring.value.records.find((item) => item.unitId === unitId);
-  }
-
-  return {
-    allowedSystems, system, dimension, loading, error, monitoring, currentUnitId, currentUnitName,
-    projectData, projectLoading, projectError, dialog, selectedMetric, selectedMetricVM, metricAnalysis,
-    metricLoading, metricError, moveReport, moveReportLoading, moveReportError, allMetrics,
-    loadMonitoring, loadProject, openMetric, openIndicatorAnalysis, openMoveReport, closeDialog, setFilters, findRecord
-  };
-});
diff --git a/next/src/stores/drilldownStore.test.ts b/next/src/stores/drilldownStore.test.ts
new file mode 100644
index 0000000..205028d
--- /dev/null
+++ b/next/src/stores/drilldownStore.test.ts
@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+
+const { getGroupMetric, getUnitMetric } = vi.hoisted(() => ({
+  getGroupMetric: vi.fn(),
+  getUnitMetric: vi.fn(),
+}));
+vi.mock("../api/dashboardApi", () => ({
+  getGroupMetric,
+  getUnitMetric,
+  getMoveReport: vi.fn(),
+}));
+
+import { useDrilldownStore } from "./drilldownStore";
+
+const metric = {
+  name: "隐患排查",
+  field: "Danger",
+  projects: 1,
+  projectUsageNum: 1,
+  usageRate: 100,
+  accuracyRate: 100,
+  frequency: 0,
+  sortIndex: 1,
+};
+
+describe("useDrilldownStore", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    getGroupMetric.mockReset();
+    getUnitMetric.mockReset();
+  });
+
+  it("按单位是否存在选择集团或企业穿透接口", async () => {
+    getGroupMetric.mockResolvedValue({ data: { MetricData: { Name: "隐患排查" } } });
+    getUnitMetric.mockResolvedValue({ data: { MetricData: { Name: "隐患排查" } } });
+    const store = useDrilldownStore();
+    await store.openMetric(metric, "", 0, 0);
+    expect(store.dialog).toBe("groupMetric");
+    expect(getGroupMetric).toHaveBeenCalledWith(0, 0, "Danger", expect.any(AbortSignal));
+    await store.openMetric(metric, "u1", 1, 1);
+    expect(store.dialog).toBe("unitMetric");
+    expect(getUnitMetric).toHaveBeenCalledWith(1, 1, "Danger", "u1", expect.any(AbortSignal));
+  });
+
+  it("关闭弹窗时清理当前请求状态", () => {
+    const store = useDrilldownStore();
+    store.openDialog("online");
+    store.closeDialog();
+    expect(store.dialog).toBeNull();
+  });
+});
diff --git a/next/src/stores/drilldownStore.ts b/next/src/stores/drilldownStore.ts
new file mode 100644
index 0000000..2341a98
--- /dev/null
+++ b/next/src/stores/drilldownStore.ts
@@ -0,0 +1,90 @@
+import { computed, ref } from "vue";
+import { defineStore } from "pinia";
+import { getGroupMetric, getMoveReport, getUnitMetric } from "@/api/dashboardApi";
+import { normalizeMetricAnalysis, normalizeMoveReport } from "@/utils/adapters/drilldownAdapter";
+import type { MetricVM, MoveReportVM } from "@/types/dashboard";
+import type { MetricAnalysisVM } from "@/types/drilldown";
+
+export type DialogKind = "online" | "moveReport" | "belowStandard" | "unitUsage" | "indicatorAnalysis" | "groupMetric" | "unitMetric" | null;
+const emptyMoveReport = (): MoveReportVM => ({ metrics: [], rows: [] });
+
+/** 仅管理跨页面弹窗和穿透请求，关闭弹窗时主动中止未完成请求。 */
+export const useDrilldownStore = defineStore("dashboard-drilldown", () => {
+  const dialog = ref<DialogKind>(null);
+  const selectedMetric = ref("");
+  const metricAnalysis = ref<MetricAnalysisVM | null>(null);
+  const metricLoading = ref(false);
+  const metricError = ref("");
+  const moveReport = ref<MoveReportVM>(emptyMoveReport());
+  const moveReportLoading = ref(false);
+  const moveReportError = ref("");
+  let metricRequestId = 0;
+  let metricController: AbortController | null = null;
+  let reportRequestId = 0;
+  let reportController: AbortController | null = null;
+
+  const selectedMetricVM = computed(() => metricAnalysis.value?.metric || null);
+
+  async function openMetric(metric: MetricVM, unitId: string, type: number, range: number) {
+    const requestId = ++metricRequestId;
+    metricController?.abort();
+    metricController = new AbortController();
+    selectedMetric.value = metric.name;
+    dialog.value = unitId ? "unitMetric" : "groupMetric";
+    metricLoading.value = true;
+    metricError.value = "";
+    metricAnalysis.value = null;
+    try {
+      const response = unitId
+        ? await getUnitMetric(type, range, metric.field, unitId, metricController.signal)
+        : await getGroupMetric(type, range, metric.field, metricController.signal);
+      if (requestId !== metricRequestId) return;
+      metricAnalysis.value = normalizeMetricAnalysis(response.data, metric);
+    } catch (reason) {
+      if (requestId !== metricRequestId) return;
+      metricError.value = reason instanceof Error ? reason.message : "指标穿透加载失败";
+    } finally {
+      if (requestId === metricRequestId) metricLoading.value = false;
+    }
+  }
+
+  async function openMoveReport(type: number, range: number, fallbackMetrics: MetricVM[]) {
+    const requestId = ++reportRequestId;
+    reportController?.abort();
+    reportController = new AbortController();
+    dialog.value = "moveReport";
+    moveReportLoading.value = true;
+    moveReportError.value = "";
+    moveReport.value = emptyMoveReport();
+    try {
+      const [definitions, rows] = await getMoveReport(type, range, reportController.signal);
+      if (requestId !== reportRequestId) return;
+      moveReport.value = normalizeMoveReport(definitions.data, rows.data, fallbackMetrics);
+    } catch (reason) {
+      if (requestId !== reportRequestId) return;
+      moveReportError.value = reason instanceof Error ? reason.message : "动不动分析报告加载失败";
+    } finally {
+      if (requestId === reportRequestId) moveReportLoading.value = false;
+    }
+  }
+
+  function openIndicatorAnalysis() {
+    metricError.value = "";
+    metricAnalysis.value = null;
+    dialog.value = "indicatorAnalysis";
+  }
+
+  function openDialog(kind: Exclude<DialogKind, "moveReport" | "groupMetric" | "unitMetric" | "indicatorAnalysis">) {
+    dialog.value = kind;
+  }
+
+  function closeDialog() {
+    metricRequestId += 1;
+    reportRequestId += 1;
+    metricController?.abort();
+    reportController?.abort();
+    dialog.value = null;
+  }
+
+  return { dialog, selectedMetric, selectedMetricVM, metricAnalysis, metricLoading, metricError, moveReport, moveReportLoading, moveReportError, openMetric, openMoveReport, openIndicatorAnalysis, openDialog, closeDialog };
+});
diff --git a/next/src/stores/filterStore.test.ts b/next/src/stores/filterStore.test.ts
new file mode 100644
index 0000000..452f7d0
--- /dev/null
+++ b/next/src/stores/filterStore.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { parseAllowedSystems } from "./filterStore";
+
+describe("parseAllowedSystems", () => {
+  it("解析多个外部系统页签", () => {
+    expect(parseAllowedSystems("?type=1,2")).toEqual(["safety", "quality"]);
+  });
+
+  it("非法参数回退为全部系统", () => {
+    expect(parseAllowedSystems("?type=invalid")).toEqual(["safety", "quality", "emergency"]);
+  });
+});
diff --git a/next/src/stores/filterStore.ts b/next/src/stores/filterStore.ts
new file mode 100644
index 0000000..4d6b65b
--- /dev/null
+++ b/next/src/stores/filterStore.ts
@@ -0,0 +1,30 @@
+import { computed, ref } from "vue";
+import { defineStore } from "pinia";
+import { SYSTEMS } from "@/utils/dashboardConfig";
+import type { DimensionKey, SystemKey } from "@/types/dashboard";
+
+export function parseAllowedSystems(search = typeof window === "undefined" ? "" : window.location.search): SystemKey[] {
+  const raw = new URLSearchParams(search).get("type");
+  if (!raw) return SYSTEMS.map((item) => item.key);
+  const systems = raw
+    .split(/[,，\s]+/)
+    .map((part) => SYSTEMS.find((item) => item.externalType === part)?.key)
+    .filter(Boolean) as SystemKey[];
+  return systems.length ? [...new Set(systems)] : SYSTEMS.map((item) => item.key);
+}
+
+/** 仅保存跨页面筛选条件，不承载接口状态。 */
+export const useFilterStore = defineStore("dashboard-filters", () => {
+  const allowedSystems = ref<SystemKey[]>(parseAllowedSystems());
+  const system = ref<SystemKey>(allowedSystems.value[0] || "safety");
+  const dimension = ref<DimensionKey>("all");
+  const apiType = computed(() => SYSTEMS.find((item) => item.key === system.value)?.type ?? 0);
+  const apiRange = computed(() => dimension.value === "new" ? 1 : 0);
+
+  function setFilters(nextSystem: SystemKey, nextDimension: DimensionKey) {
+    system.value = nextSystem;
+    dimension.value = nextDimension;
+  }
+
+  return { allowedSystems, system, dimension, apiType, apiRange, setFilters };
+});
diff --git a/next/src/stores/monitoringStore.test.ts b/next/src/stores/monitoringStore.test.ts
new file mode 100644
index 0000000..99cd7fe
--- /dev/null
+++ b/next/src/stores/monitoringStore.test.ts
@@ -0,0 +1,29 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+
+const { getMonitoring } = vi.hoisted(() => ({ getMonitoring: vi.fn() }));
+vi.mock("../api/dashboardApi", () => ({ getMonitoring }));
+
+import { useMonitoringStore } from "./monitoringStore";
+
+describe("useMonitoringStore", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    getMonitoring.mockReset();
+  });
+
+  it("忽略筛选切换前发起的失效响应", async () => {
+    let resolveFirst!: (value: { data: unknown }) => void;
+    let resolveSecond!: (value: { data: unknown }) => void;
+    getMonitoring
+      .mockImplementationOnce(() => new Promise((resolve) => { resolveFirst = resolve; }))
+      .mockImplementationOnce(() => new Promise((resolve) => { resolveSecond = resolve; }));
+    const store = useMonitoringStore();
+    const first = store.load(0, 0, "");
+    const second = store.load(1, 0, "");
+    resolveFirst({ data: { DataDate: "old" } });
+    resolveSecond({ data: { DataDate: "new" } });
+    await Promise.all([first, second]);
+    expect(store.monitoring.summary.dataDate).toBe("new");
+  });
+});
diff --git a/next/src/stores/monitoringStore.ts b/next/src/stores/monitoringStore.ts
new file mode 100644
index 0000000..ffe4191
--- /dev/null
+++ b/next/src/stores/monitoringStore.ts
@@ -0,0 +1,52 @@
+import { computed, ref } from "vue";
+import { defineStore } from "pinia";
+import { getMonitoring } from "@/api/dashboardApi";
+import { normalizeMonitoring } from "@/utils/adapters/monitoringAdapter";
+import type { MasterRecordVM, MonitoringVM } from "@/types/dashboard";
+
+const emptyMonitoring = (): MonitoringVM => normalizeMonitoring({});
+
+/** 集团与企业共用的监控数据状态，负责请求取消和失效响应隔离。 */
+export const useMonitoringStore = defineStore("dashboard-monitoring", () => {
+  const monitoring = ref<MonitoringVM>(emptyMonitoring());
+  const loading = ref(false);
+  const error = ref("");
+  const currentUnitId = ref("");
+  const currentUnitName = ref("");
+  let requestId = 0;
+  let controller: AbortController | null = null;
+
+  const allMetrics = computed(() => monitoring.value.metrics.length ? monitoring.value.metrics : monitoring.value.keyMetrics);
+
+  async function load(type: number, range: number, unitId = "", unitName = "") {
+    const currentRequest = ++requestId;
+    controller?.abort();
+    controller = new AbortController();
+    loading.value = true;
+    error.value = "";
+    currentUnitId.value = unitId;
+    if (unitName) currentUnitName.value = unitName;
+    try {
+      const response = await getMonitoring(type, range, unitId, controller.signal);
+      if (currentRequest !== requestId) return;
+      monitoring.value = normalizeMonitoring(response.data);
+    } catch (reason) {
+      if (currentRequest !== requestId) return;
+      error.value = reason instanceof Error ? reason.message : "数据加载失败";
+      monitoring.value = emptyMonitoring();
+    } finally {
+      if (currentRequest === requestId) loading.value = false;
+    }
+  }
+
+  function cancel() {
+    requestId += 1;
+    controller?.abort();
+  }
+
+  function findRecord(unitId: string): MasterRecordVM | undefined {
+    return monitoring.value.records.find((record) => record.unitId === unitId);
+  }
+
+  return { monitoring, loading, error, currentUnitId, currentUnitName, allMetrics, load, cancel, findRecord };
+});
diff --git a/next/src/stores/projectStore.test.ts b/next/src/stores/projectStore.test.ts
new file mode 100644
index 0000000..f3bfd4e
--- /dev/null
+++ b/next/src/stores/projectStore.test.ts
@@ -0,0 +1,29 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+
+const { getProject } = vi.hoisted(() => ({ getProject: vi.fn() }));
+vi.mock("../api/projectApi", () => ({ getProject }));
+
+import { useProjectStore } from "./projectStore";
+
+describe("useProjectStore", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    getProject.mockReset();
+  });
+
+  it("忽略路由快速切换后的旧项目响应", async () => {
+    let resolveFirst!: (value: { data: unknown }) => void;
+    let resolveSecond!: (value: { data: unknown }) => void;
+    getProject
+      .mockImplementationOnce(() => new Promise((resolve) => { resolveFirst = resolve; }))
+      .mockImplementationOnce(() => new Promise((resolve) => { resolveSecond = resolve; }));
+    const store = useProjectStore();
+    const first = store.load(0, "u1", "p-old");
+    const second = store.load(0, "u1", "p-new");
+    resolveFirst({ data: { MetricProjectInfo: { ProjectName: "旧项目" } } });
+    resolveSecond({ data: { MetricProjectInfo: { ProjectName: "新项目" } } });
+    await Promise.all([first, second]);
+    expect(store.data?.info.name).toBe("新项目");
+  });
+});
diff --git a/next/src/stores/projectStore.ts b/next/src/stores/projectStore.ts
new file mode 100644
index 0000000..d2aad66
--- /dev/null
+++ b/next/src/stores/projectStore.ts
@@ -0,0 +1,40 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { getProject } from "@/api/projectApi";
+import { normalizeProject } from "@/utils/adapters/projectAdapter";
+import type { ProjectVM } from "@/types/project";
+
+/** 项目详情独立维护，避免路由快速切换时旧响应覆盖新项目。 */
+export const useProjectStore = defineStore("dashboard-project", () => {
+  const data = ref<ProjectVM | null>(null);
+  const loading = ref(false);
+  const error = ref("");
+  let requestId = 0;
+  let controller: AbortController | null = null;
+
+  async function load(type: number, unitId: string, projectId: string) {
+    const currentRequest = ++requestId;
+    controller?.abort();
+    controller = new AbortController();
+    loading.value = true;
+    error.value = "";
+    data.value = null;
+    try {
+      const response = await getProject(type, unitId, projectId, controller.signal);
+      if (currentRequest !== requestId) return;
+      data.value = normalizeProject(response.data);
+    } catch (reason) {
+      if (currentRequest !== requestId) return;
+      error.value = reason instanceof Error ? reason.message : "项目数据加载失败";
+    } finally {
+      if (currentRequest === requestId) loading.value = false;
+    }
+  }
+
+  function cancel() {
+    requestId += 1;
+    controller?.abort();
+  }
+
+  return { data, loading, error, load, cancel };
+});
diff --git a/next/src/types/api.ts b/next/src/types/api.ts
new file mode 100644
index 0000000..5be4d3a
--- /dev/null
+++ b/next/src/types/api.ts
@@ -0,0 +1,15 @@
+/** 接口统一响应外壳。 */
+export interface ApiEnvelope<T> {
+  code: number | string;
+  message?: string;
+  data: T;
+}
+
+/** 页面向数据治理接口发送的公共查询参数。 */
+export interface DashboardQuery {
+  type: number;
+  range: number;
+  unitId?: string;
+  projectId?: string;
+  filed?: string;
+}
diff --git a/next/src/types/dashboardTypes.ts b/next/src/types/dashboard.ts
similarity index 89%
rename from next/src/types/dashboardTypes.ts
rename to next/src/types/dashboard.ts
index c8df5af..e2f609f 100644
--- a/next/src/types/dashboardTypes.ts
+++ b/next/src/types/dashboard.ts
@@ -1,20 +1,5 @@
-import type { DimensionKey, SystemKey } from "../config/dashboardConfig";
-
-/** 接口统一响应外壳。 */
-export interface ApiEnvelope<T> {
-  code: number | string;
-  message?: string;
-  data: T;
-}
-
-/** 页面向数据治理接口发送的公共查询参数。 */
-export interface DashboardQuery {
-  type: number;
-  range: number;
-  unitId?: string;
-  projectId?: string;
-  filed?: string;
-}
+export type SystemKey = "safety" | "quality" | "emergency";
+export type DimensionKey = "all" | "new";
 
 /** 指标在页面中的稳定模型，隔离后端 PascalCase/camelCase 字段差异。 */
 export interface MetricVM {
diff --git a/next/src/types/drilldown.ts b/next/src/types/drilldown.ts
new file mode 100644
index 0000000..0dd7c9d
--- /dev/null
+++ b/next/src/types/drilldown.ts
@@ -0,0 +1,29 @@
+import type { MetricVM, MoveReportVM } from "./dashboard";
+
+export interface MetricProjectRowVM {
+  id: string;
+  projectName: string;
+  isAbnormal: boolean;
+  now: string;
+  yesterday: string;
+  threeDaysAgo: string;
+  weekAgo: string;
+  monthAgo: string;
+  threeMonthsAgo: string;
+}
+
+export interface MetricUnitRowVM {
+  id: string;
+  name: string;
+  usageRate: number;
+  accuracyRate: number;
+}
+
+export interface MetricAnalysisVM {
+  metric: MetricVM | null;
+  compareStr: string;
+  units: MetricUnitRowVM[];
+  projects: MetricProjectRowVM[];
+}
+
+export type DrilldownData = MetricAnalysisVM | MoveReportVM | null;
diff --git a/next/src/types/project.ts b/next/src/types/project.ts
new file mode 100644
index 0000000..9facfc9
--- /dev/null
+++ b/next/src/types/project.ts
@@ -0,0 +1,47 @@
+export interface ProjectMetricRowVM {
+  id: string;
+  name: string;
+  isAbnormal: boolean;
+  compare: string;
+  now: string;
+  yesterday: string;
+  weekAgo: string;
+  weeksAgo: string;
+  monthAgo: string;
+  threeMonthsAgo: string;
+}
+
+export type ProjectMetricSnapshotPeriod =
+  | "now"
+  | "yesterday"
+  | "weekAgo"
+  | "weeksAgo"
+  | "monthAgo"
+  | "threeMonthsAgo";
+
+export interface ProjectMetricSnapshotVM {
+  id: string;
+  name: string;
+  value: string;
+  isAbnormal: boolean;
+}
+
+export interface ProjectVM {
+  usageState: string;
+  metricUsageInfo: string;
+  metricAccuracyInfo: string;
+  abnormalNum: number;
+  onlineState: string;
+  dataDate: string;
+  info: {
+    unitName: string;
+    name: string;
+    shortName: string;
+    code: string;
+    address: string;
+    state: string;
+    startDate: string;
+  };
+  metrics: ProjectMetricRowVM[];
+  metricSnapshots: Record<ProjectMetricSnapshotPeriod, ProjectMetricSnapshotVM[]>;
+}
diff --git a/next/src/utils/adapters/drilldownAdapter.test.ts b/next/src/utils/adapters/drilldownAdapter.test.ts
new file mode 100644
index 0000000..5ffcc67
--- /dev/null
+++ b/next/src/utils/adapters/drilldownAdapter.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { normalizeMetricAnalysis } from "./drilldownAdapter";
+
+describe("normalizeMetricAnalysis", () => {
+  it("隔离集团和企业穿透接口的字段命名差异", () => {
+    const result = normalizeMetricAnalysis({
+      MetricData: { Name: "隐患排查", Field: "Danger", UsageRate: "80" },
+      CompareStr: "较上期提升 5%",
+      UnitAnalysises: [{ UnitId: "u1", Name: "测试单位", UsageRate: "75" }],
+      ProjectMetrics: [{ ProjectId: "p1", ProjectName: "测试项目", IsAbnormal: "false", NowData: 9 }],
+    }, {
+      name: "隐患排查", field: "Danger", projects: 10, projectUsageNum: 8,
+      usageRate: 80, accuracyRate: 90, frequency: 7, sortIndex: 1,
+    });
+    expect(result.metric).toMatchObject({ name: "隐患排查", field: "Danger", usageRate: 80 });
+    expect(result.metric?.frequency).toBe(7);
+    expect(result.compareStr).toBe("较上期提升 5%");
+    expect(result.units[0]).toMatchObject({ id: "u1", name: "测试单位", usageRate: 75 });
+    expect(result.projects[0]).toMatchObject({ id: "p1", projectName: "测试项目", isAbnormal: false, now: "9" });
+  });
+});
diff --git a/next/src/utils/adapters/drilldownAdapter.ts b/next/src/utils/adapters/drilldownAdapter.ts
new file mode 100644
index 0000000..8544d74
--- /dev/null
+++ b/next/src/utils/adapters/drilldownAdapter.ts
@@ -0,0 +1,38 @@
+import { normalizeMetric, normalizeMoveReport, numberValue } from "./monitoringAdapter";
+import type { MetricVM, MoveReportVM } from "@/types/dashboard";
+import type { MetricAnalysisVM, MetricProjectRowVM, MetricUnitRowVM } from "@/types/drilldown";
+
+type Raw = Record<string, unknown>;
+const text = (input: unknown) => input == null || input === "" ? "" : String(input);
+const value = (item: Raw, ...keys: string[]) => keys.map((key) => item[key]).find((item) => item != null);
+const bool = (input: unknown) => input === true || input === 1 || String(input).toLowerCase() === "true";
+
+export function normalizeMetricAnalysis(input: unknown, fallback: MetricVM | undefined): MetricAnalysisVM {
+  const data = input && typeof input === "object" ? input as Raw : {};
+  const sourceMetric = value(data, "MetricData", "metricData");
+  const normalizedMetric = sourceMetric && typeof sourceMetric === "object"
+    ? normalizeMetric(sourceMetric as Raw)
+    : null;
+  const metric = normalizedMetric
+    ? { ...normalizedMetric, frequency: normalizedMetric.frequency || fallback?.frequency || 0 }
+    : fallback || null;
+  const sourceUnits = value(data, "UnitAnalysises", "unitAnalysises");
+  const units: MetricUnitRowVM[] = Array.isArray(sourceUnits) ? sourceUnits.map((row, index) => {
+    const item = row && typeof row === "object" ? row as Raw : {};
+    return { id: text(value(item, "UnitId", "unitId", "Id", "id")) || `unit-${index}`, name: text(value(item, "Name", "name")), usageRate: numberValue(value(item, "UsageRate", "usageRate")), accuracyRate: numberValue(value(item, "AccuracyRate", "accuracyRate")) };
+  }).filter((row) => row.name) : [];
+  const sourceProjects = value(data, "ProjectMetrics", "projectMetrics");
+  const projects: MetricProjectRowVM[] = Array.isArray(sourceProjects) ? sourceProjects.map((row, index) => {
+    const item = row && typeof row === "object" ? row as Raw : {};
+    return { id: text(value(item, "ProjectId", "projectId", "Id", "id")) || `project-${index}`, projectName: text(value(item, "ProjectName", "projectName")), isAbnormal: bool(value(item, "IsAbnormal", "isAbnormal")), now: text(value(item, "NowData", "nowData")), yesterday: text(value(item, "YesterdayData", "yesterdayData")), threeDaysAgo: text(value(item, "ThreeDaysAgoData", "threeDaysAgoData")), weekAgo: text(value(item, "WeekAgoData", "weekAgoData")), monthAgo: text(value(item, "MonthAgoData", "monthAgoData")), threeMonthsAgo: text(value(item, "ThreeMonthsAgoData", "threeMonthsAgoData")) };
+  }).filter((row) => row.projectName) : [];
+  return {
+    metric,
+    compareStr: text(value(data, "CompareStr", "compareStr")),
+    units,
+    projects,
+  };
+}
+
+export { normalizeMoveReport };
+export type { MoveReportVM };
diff --git a/next/src/adapters/dashboardAdapter.test.ts b/next/src/utils/adapters/monitoringAdapter.test.ts
similarity index 97%
rename from next/src/adapters/dashboardAdapter.test.ts
rename to next/src/utils/adapters/monitoringAdapter.test.ts
index 7440466..660ddbf 100644
--- a/next/src/adapters/dashboardAdapter.test.ts
+++ b/next/src/utils/adapters/monitoringAdapter.test.ts
@@ -1,6 +1,6 @@
 /** 数据适配层回归测试：锁定接口兼容规则和核心统计口径。 */
 import { describe, expect, it } from "vitest";
-import { normalizeMonitoring, normalizeMoveReport } from "./dashboardAdapter";
+import { normalizeMonitoring, normalizeMoveReport } from "./monitoringAdapter";
 
 describe("normalizeMonitoring", () => {
   it("按业务口径归一化集团汇总、单位和指标数据", () => {
diff --git a/next/src/adapters/dashboardAdapter.ts b/next/src/utils/adapters/monitoringAdapter.ts
similarity index 99%
rename from next/src/adapters/dashboardAdapter.ts
rename to next/src/utils/adapters/monitoringAdapter.ts
index 19c1949..1bc707f 100644
--- a/next/src/adapters/dashboardAdapter.ts
+++ b/next/src/utils/adapters/monitoringAdapter.ts
@@ -12,7 +12,7 @@ import type {
   SummaryVM,
   UnitAnalysisVM,
   UnitMetricUsageVM
-} from "../types/dashboardTypes";
+} from "@/types/dashboard";
 
 type Raw = Record<string, unknown>;
 
diff --git a/next/src/utils/adapters/projectAdapter.test.ts b/next/src/utils/adapters/projectAdapter.test.ts
new file mode 100644
index 0000000..25c88f0
--- /dev/null
+++ b/next/src/utils/adapters/projectAdapter.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { normalizeProject } from "./projectAdapter";
+
+describe("normalizeProject", () => {
+  it("将项目原始响应转换为页面稳定模型", () => {
+    const result = normalizeProject({
+      UsageState: "达标", AbnormalNum: "2", DataDate: "2026-07-23T08:00:00",
+      MetricProjectInfo: { UnitName: "测试单位", ProjectName: "测试项目", ProjectCode: "P-1" },
+      MetricDataAnalysises: [{ Field: "Safe", Name: "安全检查", IsAbnormal: "true", NowData: 3, WeeksAgoData: 6 }],
+      NowMeTrics: [{ Filed: "Safe", Name: "安全检查", IsAbnormal: 1, Value: "12" }],
+      WeekAgoMetrics: [{ Filed: "Quality", Name: "质量检查", IsAbnormal: false, Value: 8 }],
+      WeeksAgoMetrics: [{ Filed: "Safe", Name: "安全检查", IsAbnormal: false, Value: 6 }],
+    });
+    expect(result).toMatchObject({ usageState: "达标", abnormalNum: 2, info: { unitName: "测试单位", code: "P-1" } });
+    expect(result.metrics[0]).toMatchObject({ id: "Safe", name: "安全检查", isAbnormal: true, now: "3", weeksAgo: "6" });
+    expect(result.metricSnapshots.now[0]).toMatchObject({ id: "Safe", name: "安全检查", value: "12", isAbnormal: true });
+    expect(result.metricSnapshots.weekAgo[0]).toMatchObject({ name: "质量检查", value: "8", isAbnormal: false });
+    expect(result.metricSnapshots.weeksAgo[0]).toMatchObject({ name: "安全检查", value: "6", isAbnormal: false });
+    expect(result.metricSnapshots.threeMonthsAgo).toEqual([]);
+  });
+});
diff --git a/next/src/utils/adapters/projectAdapter.ts b/next/src/utils/adapters/projectAdapter.ts
new file mode 100644
index 0000000..1a47f62
--- /dev/null
+++ b/next/src/utils/adapters/projectAdapter.ts
@@ -0,0 +1,67 @@
+import type {
+  ProjectMetricRowVM,
+  ProjectMetricSnapshotPeriod,
+  ProjectMetricSnapshotVM,
+  ProjectVM,
+} from "@/types/project";
+
+type Raw = Record<string, unknown>;
+const value = (item: Raw, ...keys: string[]) => keys.map((key) => item[key]).find((item) => item != null);
+const text = (input: unknown) => input == null || input === "" ? "" : String(input);
+const number = (input: unknown) => Number.isFinite(Number(input)) ? Number(input) : 0;
+const bool = (input: unknown) => input === true || input === 1 || String(input).toLowerCase() === "true";
+
+const snapshotFields: Record<ProjectMetricSnapshotPeriod, [string, string]> = {
+  now: ["NowMeTrics", "nowMeTrics"],
+  yesterday: ["YesterdayMeTrics", "yesterdayMeTrics"],
+  weekAgo: ["WeekAgoMetrics", "weekAgoMetrics"],
+  weeksAgo: ["WeeksAgoMetrics", "weeksAgoMetrics"],
+  monthAgo: ["MonthAgoMetrics", "monthAgoMetrics"],
+  threeMonthsAgo: ["ThreeMonthAgoMetrics", "threeMonthAgoMetrics"],
+};
+
+function normalizeSnapshots(data: Raw): ProjectVM["metricSnapshots"] {
+  return Object.fromEntries(
+    Object.entries(snapshotFields).map(([period, keys]) => {
+      const source = value(data, ...keys);
+      const rows: ProjectMetricSnapshotVM[] = Array.isArray(source)
+        ? source.map((row, index) => {
+            const item = row && typeof row === "object" ? row as Raw : {};
+            return {
+              id: text(value(item, "Filed", "filed", "Field", "field")) || `${period}-${index}`,
+              name: text(value(item, "Name", "name")),
+              value: text(value(item, "Value", "value")),
+              isAbnormal: bool(value(item, "IsAbnormal", "isAbnormal")),
+            };
+          }).filter((row) => row.name)
+        : [];
+      return [period, rows];
+    }),
+  ) as ProjectVM["metricSnapshots"];
+}
+
+export function normalizeProject(input: unknown): ProjectVM {
+  const data = input && typeof input === "object" ? input as Raw : {};
+  const info = value(data, "MetricProjectInfo", "metricProjectInfo");
+  const project = info && typeof info === "object" ? info as Raw : {};
+  const sourceRows = value(data, "MetricDataAnalysises", "metricDataAnalysises");
+  const metrics: ProjectMetricRowVM[] = Array.isArray(sourceRows) ? sourceRows.map((row, index) => {
+    const item = row && typeof row === "object" ? row as Raw : {};
+    return {
+      id: text(value(item, "Id", "id", "Field", "field")) || `metric-${index}`,
+      name: text(value(item, "Name", "name")), isAbnormal: bool(value(item, "IsAbnormal", "isAbnormal")),
+      compare: text(value(item, "Compare", "compare")), now: text(value(item, "NowData", "nowData")),
+      yesterday: text(value(item, "YesterdayData", "yesterdayData")), weekAgo: text(value(item, "WeekAgoData", "weekAgoData")),
+      weeksAgo: text(value(item, "WeeksAgoData", "weeksAgoData")), monthAgo: text(value(item, "MonthAgoData", "monthAgoData")),
+      threeMonthsAgo: text(value(item, "ThreeMonthsAgoData", "threeMonthsAgoData")),
+    };
+  }) : [];
+  return {
+    usageState: text(value(data, "UsageState", "usageState")), metricUsageInfo: text(value(data, "MetricUsageInfo", "metricUsageInfo")),
+    metricAccuracyInfo: text(value(data, "MetricAccuracyInfo", "metricAccuracyInfo")), abnormalNum: number(value(data, "AbnormalNum", "abnormalNum")),
+    onlineState: text(value(data, "OnlineState", "onlineState")), dataDate: text(value(data, "DataDate", "dataDate")),
+    info: { unitName: text(value(project, "UnitName", "unitName")), name: text(value(project, "ProjectName", "projectName")), shortName: text(value(project, "ProjectShortName", "projectShortName")), code: text(value(project, "ProjectCode", "projectCode")), address: text(value(project, "ProjectAddress", "projectAddress")), state: text(value(project, "ProjectState", "projectState")), startDate: text(value(project, "StartDate", "startDate")) },
+    metrics,
+    metricSnapshots: normalizeSnapshots(data),
+  };
+}
diff --git a/next/src/utils/charts/drilldownCharts.ts b/next/src/utils/charts/drilldownCharts.ts
new file mode 100644
index 0000000..4e5157d
--- /dev/null
+++ b/next/src/utils/charts/drilldownCharts.ts
@@ -0,0 +1,15 @@
+import type { EChartsOption } from "echarts";
+import type { MetricUnitRowVM } from "@/types/drilldown";
+
+export function createUnitMetricOption(units: MetricUnitRowVM[]): EChartsOption {
+  return {
+    tooltip: { trigger: "axis" }, legend: { textStyle: { color: "#bfeaff" } },
+    grid: { left: 54, right: 24, top: 48, bottom: 70 },
+    xAxis: { type: "category", data: units.map((item) => item.name), axisLabel: { color: "#a8c7db", rotate: 28 } },
+    yAxis: { type: "value", max: 100, axisLabel: { color: "#a8c7db", formatter: "{value}%" }, splitLine: { lineStyle: { color: "rgba(93,191,255,.14)" } } },
+    series: [
+      { name: "使用率", type: "bar", data: units.map((item) => item.usageRate), itemStyle: { color: "#5ee1b5" } },
+      { name: "准确率", type: "bar", data: units.map((item) => item.accuracyRate), itemStyle: { color: "#ffc857" } },
+    ],
+  };
+}
diff --git a/next/src/utils/charts/monitoringCharts.ts b/next/src/utils/charts/monitoringCharts.ts
new file mode 100644
index 0000000..ed7cfc9
--- /dev/null
+++ b/next/src/utils/charts/monitoringCharts.ts
@@ -0,0 +1,51 @@
+import type { EChartsOption } from "echarts";
+import type { ProjectAnalysisVM, TrendVM, UnitAnalysisVM } from "@/types/dashboard";
+
+const yAxis = {
+  type: "value" as const,
+  max: 100,
+  axisLabel: { color: "#a8c7db", formatter: "{value}%" },
+  splitLine: { lineStyle: { color: "rgba(93,191,255,.14)" } },
+};
+
+const floatingTooltip = {
+  trigger: "axis" as const,
+  appendTo: "body",
+  confine: false,
+  extraCssText: "z-index: 2000;",
+};
+
+export function createTrendOption(trend: TrendVM): EChartsOption {
+  return {
+    tooltip: floatingTooltip, grid: { left: 48, right: 24, top: 8, bottom: 24 },
+    xAxis: { type: "category", data: trend.dates, axisLabel: { color: "#a8c7db" } }, yAxis,
+    series: [
+      { name: "上线率", type: "line", smooth: true, data: trend.online, color: "#5d93ff" },
+      { name: "使用率", type: "line", smooth: true, data: trend.usage, color: "#5ee1b5" },
+      { name: "准确率", type: "line", smooth: true, data: trend.accuracy, color: "#ffc857" },
+    ],
+  };
+}
+
+export function createEnterpriseOption(units: UnitAnalysisVM[]): EChartsOption {
+  return {
+    tooltip: floatingTooltip, grid: { left: 48, right: 20, top: 8, bottom: 54 },
+    xAxis: { type: "category", data: units.map((item) => item.name), axisLabel: { color: "#a8c7db", rotate: 28 } }, yAxis,
+    series: [
+      { name: "上线率", type: "bar", data: units.map((item) => item.onlineRate), itemStyle: { color: "#5d93ff" } },
+      { name: "使用率", type: "bar", data: units.map((item) => item.usageRate), itemStyle: { color: "#5ee1b5" } },
+      { name: "准确率", type: "bar", data: units.map((item) => item.accuracyRate), itemStyle: { color: "#ffc857" } },
+    ],
+  };
+}
+
+export function createProjectOption(projects: ProjectAnalysisVM[]): EChartsOption {
+  return {
+    tooltip: floatingTooltip, grid: { left: 48, right: 20, top: 8, bottom: 54 },
+    xAxis: { type: "category", data: projects.map((item) => item.name), axisLabel: { color: "#a8c7db", rotate: 24 } }, yAxis,
+    series: [
+      { name: "使用率", type: "bar", data: projects.map((item) => item.usageRate), itemStyle: { color: "#5ee1b5" } },
+      { name: "准确率", type: "bar", data: projects.map((item) => item.accuracyRate), itemStyle: { color: "#ffc857" } },
+    ],
+  };
+}
diff --git a/next/src/config/dashboardConfig.ts b/next/src/utils/dashboardConfig.ts
similarity index 75%
rename from next/src/config/dashboardConfig.ts
rename to next/src/utils/dashboardConfig.ts
index 379736d..f5f2249 100644
--- a/next/src/config/dashboardConfig.ts
+++ b/next/src/utils/dashboardConfig.ts
@@ -1,21 +1,8 @@
 /**
- * 看板静态配置。
- * 这里只存放接口相对路径、固定令牌、外部链接和枚举映射，业务模块统一从这里读取运行配置。
+ * 看板业务静态配置。
+ * 这里只存放外链、系统枚举和报告文件映射，接口定义位于 api/endpoints.ts。
  */
-export const API_BASE = "/qhse_webapi/api/DataGovernance";
-
-/** 数据治理接口固定令牌，由统一请求服务写入请求头。 */
-export const API_TOKEN = "AF17168B-87BD-4GLY-1111-F0A0A1158F9B";
-
-export const API_ENDPOINTS = {
-  monitoring: `${API_BASE}/GetMetricMonitoringSituation`,
-  unitMonitoring: `${API_BASE}/GetUnitMetricMonitoringSituation`,
-  groupMetric: `${API_BASE}/GetGroupMetricAnalysis`,
-  groupMoveReportMetrics: `${API_BASE}/GetGroupMoveReportMetricData`,
-  groupMoveReport: `${API_BASE}/GetGroupMetricAnalysisMoveReport`,
-  unitMetric: `${API_BASE}/GetUnitMetricAnalysis`,
-  projectMonitoring: `${API_BASE}/GetProjectMonitoringSituation`
-} as const;
+import type { SystemKey } from "@/types/dashboard";
 
 export const EXTERNAL_LINKS = {
   source: "https://lygcgs.com.cn:8078/HSE/FileUpload/QHSE生产调度应急指挥中心大屏指标.xlsx",
@@ -46,7 +33,4 @@ export const SYSTEMS = [
   { key: "safety", label: "安全", type: 0, externalType: "1" },
   { key: "quality", label: "质量", type: 1, externalType: "2" },
   { key: "emergency", label: "应急", type: 0, externalType: "3" }
-] as const;
-
-export type SystemKey = (typeof SYSTEMS)[number]["key"];
-export type DimensionKey = "all" | "new";
+] as const satisfies readonly { key: SystemKey; label: string; type: number; externalType: string }[];
diff --git a/next/src/views/ProjectView.vue b/next/src/views/ProjectView.vue
deleted file mode 100644
index b3ebb9d..0000000
--- a/next/src/views/ProjectView.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-/** 项目级页面：展示项目基本信息、治理指标历史值和异常状态。 */
-import { computed, onMounted } from "vue";
-import { useRoute } from "vue-router";
-import { useDashboardStore } from "../stores/dashboardStore";
-
-const store = useDashboardStore();
-const route = useRoute();
-const data = computed(() => store.projectData || {});
-const project = computed(
-  () => (data.value.MetricProjectInfo || {}) as Record<string, unknown>,
-);
-const rows = computed(() =>
-  Array.isArray(data.value.MetricDataAnalysises)
-    ? (data.value.MetricDataAnalysises as Record<string, unknown>[])
-    : [],
-);
-const display = (value: unknown) =>
-  value == null || value === "" ? "-" : String(value);
-// 接口日期可能含时间部分，项目详情只展示业务日期。
-const date = (value: unknown) => (value ? String(value).split("T")[0] : "-");
-
-onMounted(() =>
-  store.loadProject(
-    String(route.params.unitId),
-    String(route.params.projectId),
-  ),
-);
-</script>
-
-<template>
-  <div v-if="store.projectLoading" class="empty-state">
-    正在获取项目监控数据...
-  </div>
-  <div v-else-if="store.projectError" class="panel error-panel">
-    <div class="empty-state">{{ store.projectError }}</div>
-    <button
-      class="ghost-btn"
-      @click="
-        store.loadProject(
-          String(route.params.unitId),
-          String(route.params.projectId),
-        )
-      "
-    >
-      重新加载
-    </button>
-  </div>
-  <template v-else>
-    <section class="metric-cards project-metric-cards">
-      <article class="mini-panel">
-        <div class="mini-label">达标状态</div>
-        <div class="mini-value">{{ display(data.UsageState) }}</div>
-      </article>
-      <article class="mini-panel">
-        <div class="mini-label">指标使用数量</div>
-        <div class="mini-value">{{ display(data.MetricUsageInfo) }}</div>
-      </article>
-      <article class="mini-panel">
-        <div class="mini-label">准确数量</div>
-        <div class="mini-value">{{ display(data.MetricAccuracyInfo) }}</div>
-      </article>
-      <article class="mini-panel">
-        <div class="mini-label">预警指标</div>
-        <div class="mini-value">
-          {{ Number(data.AbnormalNum || 0) }}<span class="kpi-unit">项</span>
-        </div>
-      </article>
-    </section>
-    <section class="project-layout">
-      <article class="panel">
-        <div class="panel-header"><h2 class="panel-title">项目信息</h2></div>
-        <div class="field-list">
-          <div class="field-row">
-            <div class="field-name">所属企业</div>
-            <div class="field-value">
-              {{ display(project.UnitName || route.query.unitName) }}
-            </div>
-          </div>
-          <div class="field-row">
-            <div class="field-name">项目名称</div>
-            <div class="field-value">
-              {{ display(project.ProjectName || project.ProjectShortName) }}
-            </div>
-          </div>
-          <div class="field-row">
-            <div class="field-name">项目编号</div>
-            <div class="field-value">{{ display(project.ProjectCode) }}</div>
-          </div>
-          <div class="field-row">
-            <div class="field-name">项目地址</div>
-            <div class="field-value">{{ display(project.ProjectAddress) }}</div>
-          </div>
-          <div class="field-row">
-            <div class="field-name">项目状态</div>
-            <div class="field-value">
-              {{ display(project.ProjectState || data.OnlineState) }}
-            </div>
-          </div>
-          <div class="field-row">
-            <div class="field-name">开工日期</div>
-            <div class="field-value">{{ date(project.StartDate) }}</div>
-          </div>
-          <div class="field-row">
-            <div class="field-name">数据日期</div>
-            <div class="field-value">{{ date(data.DataDate) }}</div>
-          </div>
-        </div>
-      </article>
-      <article class="panel">
-        <div class="panel-header"><h2 class="panel-title">指标分析</h2></div>
-        <div v-if="!rows.length" class="empty-state">暂无项目指标数据。</div>
-        <div v-else class="table-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>指标名称</th>
-                <th>是否异常</th>
-                <th>对比</th>
-                <th>今日</th>
-                <th>昨日</th>
-                <th>三天前</th>
-                <th>一周前</th>
-                <th>一个月前</th>
-                <th>三个月前</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(row, index) in rows" :key="index">
-                <td>{{ row.Name || row.name }}</td>
-                <td>
-                  <span
-                    class="status-pill"
-                    :class="row.IsAbnormal || row.isAbnormal ? 'bad' : 'ok'"
-                    >{{
-                      row.IsAbnormal || row.isAbnormal ? "异常" : "正常"
-                    }}</span
-                  >
-                </td>
-                <td>{{ row.Compare || row.compare || "-" }}</td>
-                <td>{{ row.NowData ?? "-" }}</td>
-                <td>{{ row.YesterdayData ?? "-" }}</td>
-                <td>{{ row.ThreeDaysAgoData ?? "-" }}</td>
-                <td>{{ row.WeekAgoData ?? "-" }}</td>
-                <td>{{ row.MonthAgoData ?? "-" }}</td>
-                <td>{{ row.ThreeMonthsAgoData ?? "-" }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </article>
-    </section>
-  </template>
-</template>
diff --git a/next/src/vite-env.d.ts b/next/src/vite-env.d.ts
new file mode 100644
index 0000000..801f64f
--- /dev/null
+++ b/next/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_QHSE_API_TOKEN?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/next/tsconfig.json b/next/tsconfig.json
index 1a81fdc..9fa19a3 100644
--- a/next/tsconfig.json
+++ b/next/tsconfig.json
@@ -4,6 +4,8 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] },
     "strict": true,
     "jsx": "preserve",
     "resolveJsonModule": true,
diff --git a/next/vite.config.ts b/next/vite.config.ts
index c8eada5..2f55781 100644
--- a/next/vite.config.ts
+++ b/next/vite.config.ts
@@ -4,9 +4,13 @@
  */
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import { fileURLToPath, URL } from "node:url";
 
 export default defineConfig({
     plugins: [vue()],
+    resolve: {
+      alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) }
+    },
     base: "./",
     server: {
       port: 18081,
diff --git a/next/vitest.config.ts b/next/vitest.config.ts
new file mode 100644
index 0000000..229edf2
--- /dev/null
+++ b/next/vitest.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from "vitest/config";
+import vue from "@vitejs/plugin-vue";
+import { fileURLToPath, URL } from "node:url";
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
+  },
+  test: {
+    include: ["src/**/*.test.ts"],
+    environment: "node",
+  },
+});