# doc/html Figma 对齐交接记录

日期：2026-05-25

## 项目范围

- 前端项目：`doc/html`
- Figma 文件：`https://www.figma.com/design/sRNoRpGZrFlmC2Du8SOIXw/AI%E6%BC%AB%E5%89%A7%E5%B9%B3%E5%8F%B0`
- 主要目标：把 `doc/html` 的 AI 漫剧工作流页面尽量对齐 Figma 设计稿。
- 本地后端接口可用时，前端 `.env.local` 指向 `http://localhost:8080`。

## Figma 覆盖的主要页面

Figma MCP 已确认主工作流 section 内包含：

- `首页`
- `剧本1`、`剧本2`、`剧本3`、`剧本4`
- `角色库`
- `新增角色`
- `场景库`
- `场景库-空`
- `道具库`
- `分镜1`、`分镜2`、`分镜3`、`分镜4`、`分镜5`
- `视频`
- `余量统计`

本地导入参考图位于：

- `doc/html/src/imports/1项目入口.png`
- `doc/html/src/imports/2选择风格.png`
- `doc/html/src/imports/3生成大纲.png`
- `doc/html/src/imports/3生成大纲2.png`
- `doc/html/src/imports/4生成分集.png`
- `doc/html/src/imports/5生成角色.png`
- `doc/html/src/imports/6生成场景.png`
- `doc/html/src/imports/7生成道具.png`
- `doc/html/src/imports/8生成每集分镜.png`
- `doc/html/src/imports/10生成视频.png`

## 已完成或已接近 Figma 的页面

### Layout

文件：`doc/html/src/app/components/Layout.tsx`

- 顶部品牌改为 `Dramix.ai`。
- 项目页工作流导航已改成 Figma 风格：`剧本 / 设定 / 分镜 / 视频`。
- 右侧加入类似 Figma 的优化建议和余额区域。

### 项目入口 / 新建项目

文件：`doc/html/src/app/pages/NewProject.tsx`

- 已接近 Figma 的项目入口方向。
- 上传剧本区域、创建中遮罩、模式切换已有较完整结构。

### 剧本展示页

文件：`doc/html/src/app/pages/ProjectDetail.tsx`

- `/project/:projectId` 已改成接近 `3生成大纲.png` 和 `4生成分集.png` 的阅读式页面。
- 结构包括：封面、标题信息、标签、大纲、人物小传、分集剧情按钮网格、底部黑色 CTA。
- 分集按钮可切换显示当前集内容。

### 分镜工作台

文件：`doc/html/src/app/pages/StoryboardWorkspace.tsx`

- 已按 Figma `分镜1-5` 做过主结构改造。
- 已修复视频预览区第一条分镜 `001` 横向滚动看不到的问题。
- 已取消无数据时的“垫图/假分镜”：
  - 没有分集时显示“暂无分集”
  - 没有分镜时显示“暂无分镜数据”
  - 视频生成区没有真实分镜时显示空状态
  - 视频预览没有真实视频时显示空状态
  - 缩略图只在真实 `storyboards` 存在时显示

### 角色编辑弹窗

文件：`doc/html/src/app/pages/CharacterGeneration.tsx`

- 角色图片已从正面/侧面/背面三个上传框改成单张角色图。
- 编辑弹窗新增 `角色图片提示词`。
- 提示词支持中文显示和一键生成中文提示词。
- 保存仍写回后端 `imagePrompt` 字段。
- 上传单张图时仍走现有 `front` 兼容接口，后端会同步主图字段。

## 还没优化到位的页面

### 选择风格页

文件：`doc/html/src/app/pages/StyleSelection.tsx`

- 对应 `2选择风格.png`。
- 当前仍是旧的大卡片网格 + 紫色渐变按钮。
- 需要对齐 Figma 的工作流页头和轻量选择布局。

### 大纲生成过程页

文件：`doc/html/src/app/pages/OutlineGeneration.tsx`

- 对应 Figma `剧本1 / 剧本2` 的生成过程。
- 当前是功能型处理页，有大 loading 卡、进度卡、手动编辑区。
- 视觉还未完全贴 Figma。

### 分集独立页

文件：`doc/html/src/app/pages/EpisodeGeneration.tsx`

- 对应 `剧本4 / 生成分集`。
- `/project/:projectId` 已经做了 Figma 风格分集展示，但这个独立路由仍是旧列表页。

### 角色库列表页

文件：`doc/html/src/app/pages/CharacterGeneration.tsx`

- 只优化了编辑弹窗。
- 角色列表本体仍有旧统计条、旧卡片和旧 tab。
- 需要对齐 Figma `角色库` 与 `新增角色`。

### 场景库页

文件：`doc/html/src/app/pages/SceneGeneration.tsx`

- 对应 Figma 多个 `场景库 / 场景库-空` 节点。
- 当前仍是旧的“项目设定 + 统计条 + 三列卡片”结构。
- 这是下一轮建议最高优先级页面。

### 道具库页

文件：`doc/html/src/app/pages/PropsGeneration.tsx`

- 对应 `道具库`。
- 当前仍是旧资产库风格，并且接的是 global assets。
- 需要按 Figma 道具库重新组织布局。

### 视频页

文件：`doc/html/src/app/pages/VideoGeneration.tsx`

- 对应 `10生成视频.png` / Figma `视频`。
- 当前还是旧的左选集 + 播放器 + 分镜列表结构。
- 需要整体对齐 Figma 视频管理/预览页。

## 推荐下一步顺序

1. 优先优化 `SceneGeneration.tsx`
2. 优化 `CharacterGeneration.tsx` 的角色列表主体
3. 优化 `VideoGeneration.tsx`
4. 优化 `StyleSelection.tsx` 和 `OutlineGeneration.tsx`
5. 优化 `PropsGeneration.tsx`
6. 最后处理 `EpisodeGeneration.tsx`，或考虑让它跳转/复用 `ProjectDetail.tsx` 的分集区域

## 注意事项

- 不要回滚这些已有改动：
  - `doc/html/src/app/components/Layout.tsx`
  - `doc/html/src/app/pages/ProjectDetail.tsx`
  - `doc/html/src/app/pages/StoryboardWorkspace.tsx`
  - `doc/html/src/app/pages/CharacterGeneration.tsx`
  - `doc/html/src/app/pages/NewProject.tsx`
  - `doc/html/src/app/pages/Dashboard.tsx`
  - `doc/html/src/styles/theme.css`
- 当前工作区里有用户已有修改，继续开发前应先看 `git status --short`。
- 验证命令：在 `doc/html` 下执行 `npm run build`。
- 不要把账号密码写进仓库文件。需要登录时由用户重新提供，或使用当前会话上下文。
