freedakgmail
171 lines
10 KiB
Markdown
171 lines
10 KiB
Markdown
# 2-task-CEC · 开发任务文档
|
||
|
||
> 项目：**CEC（CapCut Create-Export Confidence）**
|
||
> 上游：`0-req-CEC.md`（需求，已确认）、`1-prd-CEC.md`（PRD，已确认）
|
||
> 交付物：单一 `index.html`（纯 HTML/CSS/JS，零构建，离线可用）
|
||
> 进度记录：开发过程中持续勾选与更新本文件。
|
||
|
||
## 设计质量基线（创意项目 · 高保真 · 丝滑）
|
||
|
||
- **风格**：CapCut 风格深色界面（near-black 背景 + 分层 surface），活力渐变强调色（电蓝→青）。
|
||
- **计费色彩语义**：免费=绿、Pro=金、credits=琥珀，全局一致，呼应「投入前心里有数」。
|
||
- **动效**：spring 缓动 `cubic-bezier(.34,1.56,.64,1)` + ease-out `cubic-bezier(.16,1,.3,1)`；按压缩放、抽屉上滑+背景模糊、Toast 滑入、AI 生成微光(shimmer)与逐步进度、环节转场淡入位移。
|
||
- **质感**：大圆角(18–24px)、柔和投影、毛玻璃(backdrop-filter)、内联 SVG 线性图标、iPhone 画框含灵动岛与状态栏。
|
||
- **细节**：触控目标 ≥44px、骨架屏/加载态、空状态、达成态高亮、可访问对比度。
|
||
|
||
---
|
||
|
||
## 阶段总览
|
||
|
||
| 阶段 | 目标 | 任务区间 |
|
||
|------|------|---------|
|
||
| **阶段 0 · 脚手架** | 项目骨架、APP_DATA、组件库、路由 | T0.x |
|
||
| **阶段 1 · MVP（必交付）** | 主线闭环全链路走通（R1/R2/R3/R4/R6/R7/R8） | T1.x |
|
||
| **阶段 2 · 增强** | Before/After 对比页（R5）+ 成功指标页（R9） | T2.x |
|
||
| **阶段 3 · 打磨（可选）** | 微动效、多意图差异化、自查 | T3.x |
|
||
|
||
依赖图（粗）：`T0 → T1.1 → T1.2 → T1.3 → T1.4 → T1.5`；`T2.*` 依赖 `T1.*`；`T3.*` 依赖前序完成。
|
||
|
||
---
|
||
|
||
## 阶段 0 · 脚手架
|
||
|
||
- [x] **T0.1 项目骨架与移动端画框**
|
||
- 目标：建立单一 `index.html`，含 iPhone 竖屏画框容器与全局样式变量（CapCut 风格设计令牌：色板/圆角/间距/字体）。
|
||
- 对应：R6 / 非功能性
|
||
- 验收：浏览器直接打开即渲染竖屏画框（宽 375–430、高 812–932 CSS px），无横向滚动；无外部资源请求。
|
||
- 依赖：无
|
||
|
||
- [x] **T0.2 统一数据层 `APP_DATA`**
|
||
- 目标：定义唯一全局 `APP_DATA`，含 `intents / templates / tools / aiSteps / costs / creditBalance / metrics / comparison` 等模拟数据。
|
||
- 对应：R8(技术)/R1–R9 数据来源
|
||
- 验收：所有后续渲染均从 `APP_DATA` 读取；无硬编码重复副本；缺字段时有降级占位。
|
||
- 依赖：T0.1
|
||
|
||
- [x] **T0.3 基础组件库**
|
||
- 目标：实现 Bottom_Navigation、Bottom_Sheet（上滑/外点关闭/下滑关闭）、Toast（2–4s 自动消失）、模态对话框（确认/取消）、Cost_Label 徽标、AI 标记徽标。
|
||
- 对应：R3 / R6 / R8
|
||
- 验收：各组件可独立调用；触控目标 ≥44×44 CSS px；交互动效正常。
|
||
- 依赖：T0.1
|
||
|
||
- [x] **T0.4 视图路由与主线状态机**
|
||
- 目标：实现轻量视图切换（意图→工作区→编排→计费→预检→完成）与跨环节共享状态（编辑内容/选择/credit）。
|
||
- 对应：R7
|
||
- 验收：环节按固定顺序前进；可返回上一环节并恢复数据；状态在环节间传递不丢失。
|
||
- 依赖：T0.2, T0.3
|
||
|
||
---
|
||
|
||
## 阶段 1 · MVP（必交付）
|
||
|
||
- [x] **T1.1 意图选择器（R1）**
|
||
- 目标：进入即呈现「口播/卡点/Vlog/带货」四项（固定顺序）+ 说明文字（≤60 字）+「跳过」入口；选「带货」进主线工作区。
|
||
- 对应：R1 / 场景 A / PRD §5.1
|
||
- 验收：1 秒内呈现四项；选择后进入预载工作区；预载中显示加载态、失败可重试；跳过入口可用。
|
||
- 依赖：T0.4
|
||
|
||
- [x] **T1.2 AI 魔法按钮编排（R2 + R8）**
|
||
- 目标：主界面常驻魔法按钮；输入 1–500 字需求 → 3 秒内拆解 1–10 个有序 AI_Step；逐步执行带进度；每步含名称/计费标签/AI 标记；结果可编辑、可撤销（撤销前确认）。
|
||
- 对应：R2 / R8 / 场景 B / PRD §5.1
|
||
- 验收：空/超长输入被拦截并提示；步骤失败暂停后续并可重试；编辑后标记转「已由创作者编辑」；撤销恢复执行前态；credit 不足步骤被阻止。
|
||
- 依赖：T1.1
|
||
|
||
- [x] **T1.3 计费透明化（R3）**
|
||
- 目标：功能/模板/AI 步骤入口前置 Cost_Label（免费/Pro/N credits）；Pro 或计费项提供标注「免费」的替代；点 Pro 项用 Bottom_Sheet 说明价值+替代而不打断；替代与编辑不兼容时先确认。
|
||
- 对应：R3 / 场景 C / PRD §5.2
|
||
- 验收：选择前标签即可见无需额外交互；选免费替代保留已完成编辑；抽屉关闭后回到原界面保持编辑态。
|
||
- 依赖：T1.2
|
||
|
||
- [x] **T1.4 导出预检（R4）**
|
||
- 目标：发起导出先出预检清单（清晰度/水印/Pro 项/credit 消耗/预计时长）；每个 Pro 项可一键换免费方案并同步更新清单；credit 不足禁用「确认导出」并给降本方案；确认后 Toast 反馈且结果与清单一致；可取消返回。
|
||
- 对应：R4 / 场景 D / PRD §5.2
|
||
- 验收：未用 Pro 项时展示空状态+无水印；替换后清单各项同步且移除该项；不足时导出按钮禁用直至降本；取消保留编辑。
|
||
- 依赖：T1.3
|
||
|
||
- [x] **T1.5 主线闭环串联与完成态（R7）**
|
||
- 目标：把 T1.1–T1.4 按「意图→AI 编排→透明计费→导出预检」固定顺序串成端到端闭环；进度指示+当前/已完成环节标记；完成态汇总清晰度与水印、显示「已就绪」+导出/发布入口。
|
||
- 对应：R7 / PRD §5.1
|
||
- 验收：可从启动一路走到完成态；未完成当前环节无法进入下一环节并提示；返回可恢复；完成态要素齐全。
|
||
- 依赖：T1.4
|
||
|
||
- [x] **T1.6 MVP 自测走查**
|
||
- 目标：按场景 A→D 完整走查一遍，修复阻断性问题。
|
||
- 对应：R1–R8
|
||
- 验收：主线无死路、无控制台报错；移动端竖屏交互（抽屉/Toast/对话框）均正常。
|
||
- 依赖：T1.5
|
||
|
||
---
|
||
|
||
## 阶段 2 · 增强
|
||
|
||
- [x] **T2.1 Before/After 对比页（R5）**
|
||
- 目标：竖屏内上下/左右并列 Before vs After（完成同一主线目标），展示步数/决策点/被拦截次数的绝对差值+降幅%+方向标记；按序列出关键节点并标记决策点/拦截点；Before=0 时降幅显示「不适用」。
|
||
- 对应：R5 / 场景 E / PRD §3.2
|
||
- 验收：三项指标差值与降幅计算正确；节点顺序与标记清晰；数据来自 `APP_DATA.comparison`。
|
||
- 依赖：T1.6
|
||
|
||
- [x] **T2.2 成功指标页（R9）**
|
||
- 目标：三类指标（效率/信心/产品健康），每项含名称/当前值/单位/基线/目标；达成与未达成有可区分视觉标识；字段缺失显示「数据缺失」。
|
||
- 对应：R9 / PRD §2.2
|
||
- 验收：达成态判定正确（当前值相对基线达到/超过目标）；缺字段降级不影响其余渲染；数据来自 `APP_DATA.metrics`。
|
||
- 依赖：T1.6
|
||
|
||
---
|
||
|
||
## 阶段 3 · 打磨（可选）
|
||
|
||
- [ ] **T3.1 微动效与转场**
|
||
- 目标：环节转场、AI 执行进度、徽标弹跳等动效打磨。
|
||
- 对应：R6(Could)
|
||
- 验收：动效流畅不卡顿，不阻断交互。
|
||
- 依赖：T2.x
|
||
|
||
- [ ] **T3.2 多意图差异化内容**
|
||
- 目标：为口播/卡点/Vlog 补充各自模板与说明（主线仍以带货为完整闭环）。
|
||
- 对应：R1(Could)
|
||
- 验收：切换不同意图进入差异化工作区，数据来自 `APP_DATA`。
|
||
- 依赖：T2.x
|
||
|
||
- [ ] **T3.3 终检与交付**
|
||
- 目标：全量自查（需求 R1–R9 逐条核对）、离线打开验证、清理调试代码、补 README。
|
||
- 对应：全部
|
||
- 验收：断网打开 `index.html` 全功能可用；R1–R9 逐条满足。
|
||
- 依赖：T3.1, T3.2
|
||
|
||
---
|
||
|
||
## 需求覆盖核对表（R → 任务）
|
||
|
||
| 需求 | 任务 |
|
||
|------|------|
|
||
| R1 意图优先起点 | T1.1（T3.2 增补） |
|
||
| R2 AI 魔法按钮 | T1.2 |
|
||
| R3 计费透明化 | T1.3 |
|
||
| R4 导出预检 | T1.4 |
|
||
| R5 Before/After 对比 | T2.1 |
|
||
| R6 移动端形态 | T0.1, T0.3（T3.1 增补） |
|
||
| R7 完整闭环主线 | T0.4, T1.5 |
|
||
| R8 AI 角色与控制权 | T1.2, T0.3 |
|
||
| R9 成功指标可视化 | T2.2 |
|
||
| 技术栈/数据驱动 | T0.1, T0.2 |
|
||
|
||
---
|
||
|
||
## 进度记录
|
||
|
||
> 格式：`日期 — 任务号 — 变更/状态`
|
||
|
||
- 2026-06-14 — T0.1–T0.4 — 完成脚手架：单文件 `prototype/index.html`、iPhone 画框（灵动岛/状态栏）、设计令牌、统一 `APP_DATA`、组件库（Bottom Sheet/Toast/对话框/计费徽标/AI 标记）、视图状态机与环节进度指示。
|
||
- 2026-06-14 — T1.1–T1.6 — 完成 MVP 主线闭环：意图选择（4 项+跳过+预载态）→ AI 魔法按钮编排（输入校验/逐步进度/可编辑可撤销/AI 标记）→ 计费透明化（标签前置/Pro 说明抽屉/免费替代）→ 导出预检（清单/一键换免费/credit 不足禁用导出）→ 完成态（结果与清单一致）。
|
||
- 2026-06-14 — T2.1–T2.2 — 完成增强：Before/After 对比页（步数 14→6、决策点 9→3、拦截 4→0，含降幅与流程节点）+ 成功指标页（效率/信心/产品健康三类，基线/目标/达成态）。
|
||
- 2026-06-14 — 验证 — Playwright 全流程走查通过：意图→编排→编辑→导出（含 credit 不足 13>10 禁用 → 换免费 5≤10 启用）→ 完成态(1080p/无水印/5credits/33s)→ 对比→指标；控制台 0 错误。
|
||
- 待办（可选）：T3.1 微动效深化、T3.2 多意图差异化、T3.3 终检与 README。
|
||
|
||
## 修复记录（用户走查反馈）
|
||
|
||
- 2026-06-14 — 成功页内容溢出、与底部导航/按钮重叠 → 改为可滚动容器 + 底部留白 110px。
|
||
- 2026-06-14 — 指标页「得分数值」与「已达成」状态徽标重叠 → 状态徽标从绝对定位改为跟随指标名左侧。
|
||
- 2026-06-14 — 工作区进入即显示大块空视频（死空间）→ 去掉，改为轻量空状态引导 + 魔法按钮为主角；AI 生成后才出现紧凑成片结果卡。
|
||
- 2026-06-14 — 工作区无法垂直滚动到导出按钮 → 滚动内容底部补 110px 留白，按钮完整露出于导航之上。
|
||
- 2026-06-14 — T3.3（部分）— 完成 README（`prototype/README.md`：快速开始、选题理由、四动作方案、操作指引、设计思路、技术说明、配套文档索引）；并完成布局/溢出/可达性全面复查（各屏无超框、抽屉/对话框/各页滚动可达、控制台 0 错误）。
|