功能原型入口¶
文档编号：DOC-U12 / 简称：UAT-PROTO 版本：V1.0 创建日期：2026-08-18 维护人：DT 定位：MkDocs 站点中的功能原型入口页，通过 iframe 嵌入静态 HTML 原型，保留 Ctrl+Hover 标注能力。 关联文档：原型需求映射 UAT-MAP、DIP1-SPEC 需求规格
一、原型简介¶
本原型为「织布鸟 WEAVELY 香港配送+安装互联网平台」的静态 HTML 功能原型，覆盖五端共 50 页：
| 端 | 容器 | 页面数 | 主要功能 |
|---|---|---|---|
| OPR 运营后台 | Next.js Web | 19 | 订单看板、报价计算、主数据、物流跟踪、系统管理 |
| MFR 生产商门户 | Next.js Web | 8 | 产品目录、SKU、订单通知、对账结算 |
| WKR 师傅端 | React Native App | 8 | 今日单、安装 6S 流程、收入、通知 |
| CST 客户端 | React Native App | 8 | 首页、询价、订单跟踪、评价 |
| LGP 物流端 | React Native App | 6 | 待接单、配送中、已完成、运单详情 |
| PORTAL 原型入口 | 静态 HTML | 1 | 5 端统一入口 |
特色功能：所有原型页面已接入 Ctrl+Hover 标注系统——按住 Ctrl（Mac 为 Command）+ 鼠标悬停任意组件，可查看：
- 组件编号（如
OPR-DASH-01.KPI.01） - 组件中文描述
- 关联需求编号（如
F-OPS-001，可点击跳转 SPEC） - 双向映射文档链接
二、原型操作入口¶
方式 1：iframe 内嵌（推荐）¶
直接在当前页面操作原型，无需跳转：
提示：iframe 高度固定为视口高度的 75%。如需全屏操作，请使用方式 2。
方式 2：新窗口打开¶
方式 3：按端直达¶
| 端 | 入口链接 | 测试账号 |
|---|---|---|
| OPR 运营后台 | 登录页 | ol_01 / Test@2026 |
| MFR 生产商门户 | 登录页 | mfr_01 / Test@2026 |
| WKR 师傅端 | 登录页 | wkr_01 / Test@2026 |
| CST 客户端 | 登录页 | cus_01 / Test@2026 |
| LGP 物流端 | 登录页 | lgp_01 / Test@2026 |
完整账号清单见 测试账号清单 UAT-ACCT。
三、Ctrl+Hover 标注使用说明¶
3.1 操作步骤¶
- 在原型任意页面，按住 Ctrl 键（Mac 用户按住 Command 键）
- 鼠标悬停页面任意组件（带虚线轮廓的元素即为可标注组件）
- 浮层 Tooltip 显示：
- 页面编号 + 页面名称
- 组件编号 + 组件描述
- 关联需求 pill 列表（点击可在新窗口打开 SPEC 文档）
- 双向映射文档链接
- 松开 Ctrl 键关闭 Tooltip
3.2 视觉提示¶
| 状态 | 视觉表现 |
|---|---|
| 标注模式关闭 | 无任何轮廓，正常浏览 |
| 标注模式开启 + 未 hover | 所有可标注组件显示虚线轮廓 |
| 标注模式开启 + hover 某组件 | 当前组件显示实线轮廓 + 浅色背景，Tooltip 跟随鼠标 |
3.3 编号体系¶
- 页面编号：
<END>-<SHORTID>，如OPR-DASH-01（OPR 端的 DASH-01 页） - 组件编号：
<pageId>.<AREA>.<NN>，如OPR-DASH-01.KPI.01（OPR-DASH-01 页的第 1 个 KPI 卡） - AREA 枚举：NAV / TAB / KPI / POOL / TREND / REC / TODO / FORM / LIST / DTL / BTN / ACT / FTG / CHART / CARD / STEP / MODAL / MISC
完整编号清单见 原型需求映射 UAT-MAP。
四、常见问题¶
iframe 中原型显示不全或滚动异常
iframe 设置了固定高度（视口 75%）。如需更佳体验，请使用"方式 2"在新窗口打开原型。
按住 Ctrl 无虚线轮廓
可能原因：① 该页面未引入 annotate.js（请联系 DT 修复）；② 浏览器拦截了 Ctrl 键事件（尝试切换浏览器）。
Tooltip 中点击需求 pill 跳转 404
pill 链接目标是 SPEC 文档（/dip1spec/），如在本地 file:// 协议打开原型会找不到。请通过发布站点访问，或直接打开 SPEC 文档 查询需求编号。
iframe 跨域无法访问 SPEC
原型 HTML 与 MkDocs 文档同源，理论上无跨域问题。如出现跨域错误，请直接在新窗口打开原型。
如何查询某需求对应哪些原型组件？
反向查询请打开 原型需求映射 §四 反向映射，按 SPEC 章节分组查找 F-XXX-NNN → 组件 → 页面。
五、原型维护¶
原型源文件位于 docs/业务测试/原型/ 目录，由 DT 维护。修改流程：
- 修改 HTML 文件（添加/调整
data-comp-id/data-comp-desc/data-req-ids属性） - 运行
node scripts/scan-prototype.js更新pageMeta.json/reqIndex.json - 运行
node scripts/gen-prototype-mapping.js重新生成 11-原型需求映射.md - 运行
node scripts/verify-annotate.js校验完整性 - （可选）运行
python scripts/fill-spec-prototype.py同步更新 SPEC "原型位置"列 - 运行
python scripts/build-site.py重新构建站点
版本记录
版本 日期 修订内容 维护人 V1.0 2026-08-18 初始版本，配合 V9.5 协作关系升级发布 DT