# DramaRemix 交互原型

本原型用于评审 PRD 1.0.0 的两条主任务及必要运营。双击同目录 `index.html` 即可离线打开；无需安装、登录、网络或 API。`viewer.html`、`create.html`、`ops.html` 是进入同一原型的快捷入口。所有状态仅存于浏览器的一个版本化键 `dramaremix.product-review.v1`；不同浏览器或文件/HTTP地址的存储可能分开。

## 线上评审地址

- 生产地址：<https://dramaremix-task1.pages.dev/>

该地址由 Cloudflare Pages 托管，只发布本目录静态文件；具体部署 ID 与验证证据见 [Cloudflare 发布验收](../../harness/Cloudflare发布验收.md)。

页面标记 Demo。小样是静态故事板，播放为本地计时；原剧 90 秒、分支 45 秒，到终点停止。费用、生成、审核、推荐、撤权、探测均为模拟。没有真实媒体、付款、权限、用户研究或线上指标。

## 建议演示顺序

1. 保持默认 `Maya · Demo author`。在原剧 00:42 点击 **View versions**，播放 A，再回版本池播放 B，点击 **Return to original**：仍回到 00:42。
2. 在版本池点击 **Change one thing**，选 Plot 或 Scene、填写一个改动，提交 **Create preview**。约 1.2 秒后显示私有故事板。可离开后从右上 **My tasks** 找回；任务不会重建。
3. 看小样后确认 **20 demo credits** 正片费用。余额从 100 到 80，报价有效 300 秒。约 2.4 秒模拟完成后仍为 Private。点击 **Submit for review** 并确认公开范围，才进入待审。
4. 切换顶部身份为 **审核员**，进入“内容运营”，通过当前修订；再显式切换 **编辑 / 分发运营**，核验媒资，执行“检查并发布”。审核通过本身不会公开，公开不会自动推荐。
5. 在“探索 / 治理撤权”填写本地演示容量，确认受众及叙事复核，执行探索；容量 0 或未知保留等待，没有 200 人保底。
6. 切 **权利运营**，填写撤权原因。依赖来源的原剧、种子及衍生立即在本地阻断，独立授权对照保留。探测另做；未交付的付费任务退款一次，晚到回调不恢复。

“需求评审”展示当前 screen 的 REQ、证据、BR、AC、事件、V5口径和规范 hash。场景注入仅在该区域：空池、慢加载/失败、旧包改版、报价过期、任务保持运行/失败、样本不足、回调重放等。模式切换保留同一状态。真实接口验收需另做。

顶部“重置演示”会弹窗确认，只清除此原型的本地状态，并恢复默认观看入口 `#viewer`。角色切换是模拟业务分工，不是真实认证。作者、审核员、编辑和权利运营的动作也在状态模型中校验，不只靠隐藏按钮。

## 验证与同步

在本目录执行：

```sh
node sync-spec.mjs --check
node --test --test-reporter=tap model.test.cjs > test-results.tap
node validate.mjs
```

需要通过 HTTP 打开时，可在本目录运行 `python3 -m http.server 8765`，再由已有浏览器访问 `http://127.0.0.1:8765/index.html`。不要把此静态原型作为生产服务部署。

`spec-data.js` 由上级 `specification.json` 生成，保存源 JSON 和四份 PRD 的 SHA-256 快照。更新规范后运行 `node sync-spec.mjs`，复核 `pages.json` / `mapping.md`、状态逻辑与测试；生成数据不等于业务实现自动同步。评审面板显示构建时快照，不伪称浏览器已读到磁盘上最新 PRD。

`coverage.json` 逐条列出 63 个 AC 的模型证据与验收范围。当前 39 组 Node 测试全部通过，其中 52 项 prototype AC 有模型断言映射；这不表示 52 项都已逐项完成浏览器验收。`test-results.tap` 是实际执行结果；`static-validation.json` 是语法、规范和入口检查。浏览器证据单独记录于 [原型阶段验收](../../harness/原型阶段验收.md) 、[高保真阶段验收](../../harness/高保真阶段验收.md) 和 [validation_report.md](validation_report.md)，本地检查命令不会自动把浏览器状态写成通过。4 项生产验收未执行，7 项仅规格验收保留原范围。

## 文件职责

| 文件 | 用途 |
| --- | --- |
| index.html / styles.css / visual.css / app.js | 统一入口、基础与高保真样式、可访问对话框、本地调度和存储 |
| model.js | 无 DOM / 网络副作用的状态转换、权限与业务守卫 |
| storyboard-timing.js | 45 / 90 秒故事板本地计时上限；不代表真实播放器 |
| model.test.cjs | 状态不变量与回归测试 |
| assets/ | 原创演示封面、本地英文字体及授权文件、favicon |
| specification.json（上级）→ spec-data.js | 规则/需求/页面/验收注释唯一数据源 |
| pages.json / mapping.md | 页面契约、模块/需求/版本映射 |
| sync-spec.mjs / validate.mjs | 同步与本地完整性检查 |

交互流程验收后已完成高保真视觉接入。用户端采用深灰与橙玫红操作色，运营端为浅底中文；原创封面、Work Sans 与 Libre Baskerville 字体均本地提供，无 CDN 依赖。中文使用系统字体回退。完整 Task 1 材料中的 `设计/index.html` 提供静态预览，[Figma 原生编辑稿](https://www.figma.com/design/cuDSGzQfR0BExEE6NP4YaU) 含 8 页与状态板。实际 Figma 导出为 5 张 PNG；其余本地 SVG / PNG 备份在清单中明确标注来源，不冒充云端导出。原型目录可独立复制和离线打开，不依赖这些外部说明或设计文件。