# 109 dcim 产品级 Demo 重建目标与质量闸门

更新时间：2026-06-20

## 1. 结论先行

本轮把验收口径从“页面能打开”升级为“真实用户链路可演示”。当前已完成工程链路返工：

- 17 个模块全部重新按 Vue/Vite 子目录发布包构建。
- 17 个模块真实入口、模块登录、菜单展开、菜单逐项点击通过。
- 17 个模块至少一个主操作链路通过，并验证已登录深链刷新仍留在模块 Layout。
- 发布包已排除旧静态 `26_高保真Demo页面.html`，避免展示站里混入早期深色 DCIM 静态壳。

但这不是最终产品级完成。下一阶段继续按模块压实：

- PRD 与 Demo 字段级一一对应。
- 每个模块至少 3 条 User Story 演示链。
- 详情页、操作页、配置页、异常页、审批/验收页形成完整业务闭环。
- Mock 数据达到多角色、多状态、多对象、多异常路径。

## 2. 本次质量事故复盘

此前验收口径的问题不是单个页面 bug，而是闸门定义过低：

- 用构建成功替代真实浏览器路径验收。
- 用预置登录状态替代真实登录。
- 用模块首页替代多级菜单和深链刷新。
- 用列表页和总览页替代详情、操作、状态变化和审计记录。
- 旧静态交付材料仍进入发布包，造成“多种风格混在一起”的观感。

新闸门必须区分：

- 工程链路闸门：能否打开、登录、跳转、深链、操作。
- 产品体验闸门：是否像网梯标杆一样统一、顺滑、清晰。
- 业务闭环闸门：是否能讲清楚业务对象、角色、状态、异常和结果。
- PRD 对齐闸门：页面、字段、规则、接口、埋点是否逐项对应。

## 3. 新目标

目标不是做 17 个可打开页面，而是做一个可演示、可验收、可交给研发拆任务的产品级站点：

1. 展示站入口统一：只保留一个模块索引，模块入口全部指向对应 Vue Demo。
2. 前端范式统一：所有模块遵循 `参考网梯的高保真demo标杆` 的 Vue 3 + Element Plus 后台系统范式。
3. 页面层级完整：每个模块至少覆盖总览、列表、详情、操作、流程/审批、配置、报表/审计。
4. 业务故事闭环：每个模块能从发现问题、定位对象、查看证据、发起操作、审批/验收、状态变化、留痕复盘完整演示。
5. PRD 深度对齐：以 `产品需求文档（容量+指标）PRD.pdf` 为最低颗粒度。
6. 发布链路可信：本地 fallback、生产 Nginx、域名路径、模块深链一致。

## 4. 当前已验证证据

### 4.1 构建闸门

命令：

```bash
node deploy/zhihang-missing-modules-static/scripts/build-static-site.mjs
```

结果：

- `moduleCount`: 17
- `demoDistCount`: 17
- `docCount`: 12

说明：

- 构建时统一注入 `VITE_USE_MOCK=true`。
- 构建时统一注入 `VITE_PUBLIC_BASE=/modules/mXX/demo/`。
- 发布包生成后只公开 Vue Demo、PRD、Mock、元素清单和闸门文档。

### 4.2 真实入口/登录/菜单闸门

命令：

```bash
DCIM_PUBLIC_BASE_URL=http://127.0.0.1:19292 node tools/audit_dcim_public_real_flow.mjs
```

结果：

- `real-flow: 17/17`

覆盖项：

- 从 `/modules/mXX/demo/` 进入。
- 点击模块入口。
- 使用 `ops_engineer / 123456` 真实登录。
- 进入模块 Layout。
- 展开左侧菜单。
- 逐个点击菜单叶子节点。
- 检查未回到根目录、未串到其他站、未丢 Layout。

证据：

- `/private/tmp/dcim-real-flow-audit/dcim-real-flow-audit.json`
- `/private/tmp/dcim-real-flow-audit/mXX__final.png`

### 4.3 操作流与深链闸门

命令：

```bash
DCIM_PUBLIC_BASE_URL=http://127.0.0.1:19292 node tools/audit_dcim_operation_flow.mjs
```

结果：

- `operation-flow: 17/17`

覆盖项：

- 登录后进入模块。
- 找到至少一个主操作按钮。
- 点击后出现弹窗、抽屉、路由变化或业务状态反馈。
- 弹窗保存按钮限定在当前可见弹窗内点击。
- 已登录状态下刷新模块深链仍进入 Layout。

证据：

- `/private/tmp/dcim-operation-flow-audit/dcim-operation-flow-audit.json`
- `/private/tmp/dcim-operation-flow-audit/mXX__operation.png`

### 4.4 静态污染闸门

命令：

```bash
find deploy/zhihang-missing-modules-static/site/modules -path '*delivery*' -type f -name '*高保真Demo页面.html' -print
rg -n 'src="/assets|href="/assets|/运维部AI学练|参会趋势|课程启动|<b>智航 DCIM</b>' deploy/zhihang-missing-modules-static/site
rg -n 'function\s+\w+\s*\([^)]*\)\s*\{\s*\}' 商业化模块Demo --glob '*.vue' --glob '*.ts'
```

结果：

- 发布包内旧 `26_高保真Demo页面.html`：0
- 发布包绝对 `/assets` 与串站关键词：0
- Vue/TS 空操作函数：0

## 5. 工程改动清单

- `deploy/zhihang-missing-modules-static/scripts/build-static-site.mjs`
  - 先清空发布目录，再拷贝模块内容。
  - 所有模块构建时注入模块级 `VITE_PUBLIC_BASE`。
  - 拷贝交付包后剔除旧静态高保真 HTML。

- `tools/serve_dcim_static_with_fallback.mjs`
  - 新增本地静态 fallback 服务。
  - 模拟生产 Nginx 的模块深链 fallback。

- `tools/audit_dcim_public_real_flow.mjs`
  - 真实入口、登录、菜单逐项点击审计。

- `tools/audit_dcim_operation_flow.mjs`
  - 主操作、可见弹窗/抽屉、状态反馈、深链刷新审计。

- `tools/fix_dcim_real_flow.mjs`
  - 批量修复模块入口、登录默认账号、router guard、发布 base。

- `tools/fix_empty_demo_operations.mjs`
  - 批量补齐早期空操作函数，形成状态变化、弹窗和操作日志。

## 6. 仍未最终达标的高标准项

当前通过的是工程链路闸门，下一阶段继续验收以下产品级标准：

| 闸门 | 当前状态 | 不通过判定 |
|---|---:|---|
| PRD-Demo 页面映射 | 待逐模块复核 | PRD 写了页面但 Demo 没入口，或 Demo 有页面但 PRD 无规则 |
| 字段级一致性 | 待逐模块复核 | 表格、表单、详情字段无法在 PRD 字段字典中找到 |
| User Story 闭环 | 待深化 | 只能点按钮，不能说明角色、前置条件、操作结果和审计留痕 |
| Mock 数据规模 | 待深化 | 只有少量样例，不能覆盖多角色、多状态、多异常 |
| 详情页深度 | 待深化 | 详情页只有基础信息，缺少证据链、时间线、关联对象、操作记录 |
| 操作页深度 | 待深化 | 新增/编辑/提交/审批/验收只是演示弹窗，没有业务规则 |
| 视觉一致性 | 待截图复核 | 页面出现非网梯浅色后台范式、旧深色壳、营销式卡片堆叠 |
| CLI/MCP/埋点保留 | 待逐模块复核 | 原有 `TRACKING_PLAN`、`CLI_AND_AGENT_SPEC`、指令埋点缺失或未对应页面 |

## 7. 下一阶段执行顺序

1. 建立 `PRD-Demo 字段级矩阵` 自动/半自动审计脚本。
2. 先以 01 资产管理、02 容量管理、09 供应商管理三类复杂模块校准标准。
3. 对 03-08、10-14 的批量模板页逐页加业务语义，不能停留在通用模板。
4. 对 15-17 补齐监控、能效、维修闭环的高频场景和异常路径。
5. 每个模块补齐至少 3 条 User Story：
   - 标准流程
   - 异常流程
   - 审批/验收/回滚流程
6. 每次模块升级后同时更新：
   - `PRD.md`
   - `MOCK_DATA.json`
   - `DEMO_ELEMENT_INVENTORY.json`
   - `DEMO_PRD_ALIGNMENT.md`
   - `TRACKING_PLAN.md`
   - 模块 Vue 页面
7. 全部模块通过工程闸门、产品闸门、PRD 对齐闸门后，才能进入公网发布确认。

## 8. 当前可用本地验收地址

本地展示站：

```text
http://127.0.0.1:19292/
```

说明：

- 该地址运行的是本地 fallback 服务，不是生产。
- 当前用于逐模块验收和截图。
- 公网 `dcim.denghao.wiki` 不应在未确认前覆盖发布。