freedak/TaoTao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0089e9007d708108da19b3479651ce01eaa95f78
TaoTao/2-task-CEC.md
T
freedakgmail 0089e9007d Initial commit: TaoTao
2026-06-16 00:38:58 +08:00

10 KiB
Raw Blame History

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 · 脚手架

  • T0.1 项目骨架与移动端画框

    • 目标：建立单一 index.html，含 iPhone 竖屏画框容器与全局样式变量（CapCut 风格设计令牌：色板/圆角/间距/字体）。
    • 对应：R6 / 非功能性
    • 验收：浏览器直接打开即渲染竖屏画框（宽 375–430、高 812–932 CSS px），无横向滚动；无外部资源请求。
    • 依赖：无

  • T0.2 统一数据层 APP_DATA

    • 目标：定义唯一全局 APP_DATA，含 intents / templates / tools / aiSteps / costs / creditBalance / metrics / comparison 等模拟数据。
    • 对应：R8(技术)/R1–R9 数据来源
    • 验收：所有后续渲染均从 APP_DATA 读取；无硬编码重复副本；缺字段时有降级占位。
    • 依赖：T0.1

  • T0.3 基础组件库

    • 目标：实现 Bottom_Navigation、Bottom_Sheet（上滑/外点关闭/下滑关闭）、Toast（2–4s 自动消失）、模态对话框（确认/取消）、Cost_Label 徽标、AI 标记徽标。
    • 对应：R3 / R6 / R8
    • 验收：各组件可独立调用；触控目标 ≥44×44 CSS px；交互动效正常。
    • 依赖：T0.1

  • T0.4 视图路由与主线状态机

    • 目标：实现轻量视图切换（意图→工作区→编排→计费→预检→完成）与跨环节共享状态（编辑内容/选择/credit）。
    • 对应：R7
    • 验收：环节按固定顺序前进；可返回上一环节并恢复数据；状态在环节间传递不丢失。
    • 依赖：T0.2, T0.3

阶段 1 · MVP（必交付）

  • T1.1 意图选择器（R1）

    • 目标：进入即呈现「口播/卡点/Vlog/带货」四项（固定顺序）+ 说明文字（≤60 字）+「跳过」入口；选「带货」进主线工作区。
    • 对应：R1 / 场景 A / PRD §5.1
    • 验收：1 秒内呈现四项；选择后进入预载工作区；预载中显示加载态、失败可重试；跳过入口可用。
    • 依赖：T0.4

  • T1.2 AI 魔法按钮编排（R2 + R8）

    • 目标：主界面常驻魔法按钮；输入 1–500 字需求 → 3 秒内拆解 1–10 个有序 AI_Step；逐步执行带进度；每步含名称/计费标签/AI 标记；结果可编辑、可撤销（撤销前确认）。
    • 对应：R2 / R8 / 场景 B / PRD §5.1
    • 验收：空/超长输入被拦截并提示；步骤失败暂停后续并可重试；编辑后标记转「已由创作者编辑」；撤销恢复执行前态；credit 不足步骤被阻止。
    • 依赖：T1.1

  • T1.3 计费透明化（R3）

    • 目标：功能/模板/AI 步骤入口前置 Cost_Label（免费/Pro/N credits）；Pro 或计费项提供标注「免费」的替代；点 Pro 项用 Bottom_Sheet 说明价值+替代而不打断；替代与编辑不兼容时先确认。
    • 对应：R3 / 场景 C / PRD §5.2
    • 验收：选择前标签即可见无需额外交互；选免费替代保留已完成编辑；抽屉关闭后回到原界面保持编辑态。
    • 依赖：T1.2

  • T1.4 导出预检（R4）

    • 目标：发起导出先出预检清单（清晰度/水印/Pro 项/credit 消耗/预计时长）；每个 Pro 项可一键换免费方案并同步更新清单；credit 不足禁用「确认导出」并给降本方案；确认后 Toast 反馈且结果与清单一致；可取消返回。
    • 对应：R4 / 场景 D / PRD §5.2
    • 验收：未用 Pro 项时展示空状态+无水印；替换后清单各项同步且移除该项；不足时导出按钮禁用直至降本；取消保留编辑。
    • 依赖：T1.3

  • T1.5 主线闭环串联与完成态（R7）

    • 目标：把 T1.1–T1.4 按「意图→AI 编排→透明计费→导出预检」固定顺序串成端到端闭环；进度指示+当前/已完成环节标记；完成态汇总清晰度与水印、显示「已就绪」+导出/发布入口。
    • 对应：R7 / PRD §5.1
    • 验收：可从启动一路走到完成态；未完成当前环节无法进入下一环节并提示；返回可恢复；完成态要素齐全。
    • 依赖：T1.4

  • T1.6 MVP 自测走查

    • 目标：按场景 A→D 完整走查一遍，修复阻断性问题。
    • 对应：R1–R8
    • 验收：主线无死路、无控制台报错；移动端竖屏交互（抽屉/Toast/对话框）均正常。
    • 依赖：T1.5

阶段 2 · 增强

  • T2.1 Before/After 对比页（R5）

    • 目标：竖屏内上下/左右并列 Before vs After（完成同一主线目标），展示步数/决策点/被拦截次数的绝对差值+降幅%+方向标记；按序列出关键节点并标记决策点/拦截点；Before=0 时降幅显示「不适用」。
    • 对应：R5 / 场景 E / PRD §3.2
    • 验收：三项指标差值与降幅计算正确；节点顺序与标记清晰；数据来自 APP_DATA.comparison。
    • 依赖：T1.6

  • 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 错误）。
Reference in New Issue View Git Blame Copy Permalink