完成图片编辑器宣发素材生成
新增宣发素材入口、工作流模型、画布生成卡片和参考图选择能力。 接入宣发素材真实生图请求，隐藏 Prompt 摘要和约束预览，并将约束作为内部 Prompt 使用。 支持游戏首图、详情五图、运营海报尺寸，其中详情五图一次生成五张 720x1280 竖图。 后端仅对 publication-material 生图扣 5 泥点，并沿用现有失败退款逻辑。 补充前后端测试和宣发素材设计文档。
This commit is contained in:
Codex
@@ -0,0 +1,70 @@
|
||||
# 宣发素材工具入口设计
|
||||
|
||||
## 目标
|
||||
|
||||
在 Web 图片画布编辑器底部工具栏新增 `宣发素材` 分组入口，用于生成游戏发布物料。点击具体工作流后，不打开说明弹窗，而是在画布内创建一个可拖拽的宣发素材生成卡片；卡片包含游戏名、游戏分类、一句话描述游戏三个输入框、参考图控件、尺寸信息和生成按钮。点击生成后走图片画布现有生图 BFF，自动扣 5 泥点，生成成功后把成品图片放回画布。
|
||||
|
||||
Prompt 输入摘要与 Prompt 约束只作为内部生成契约维护，不在 UI 中默认暴露；真实生图请求会把结构化游戏输入和对应工作流约束合并为内部 Prompt。
|
||||
|
||||
## 入口
|
||||
|
||||
- 页面：`/editor/canvas`
|
||||
- 位置：底部 AI 画布工具栏
|
||||
- 工具：`宣发素材`
|
||||
- 交互：点击工具后弹出独立浮层菜单，菜单项包括 `游戏首图`、`详情五图`、`运营海报`；点击菜单项后在画布中心创建对应工作流的生成占位卡片，卡片可拖拽，设置面板锚定在占位卡片下方。
|
||||
- 标题：画布占位卡片左上角使用英文功能名，例如 `Home Image Generator`、`Detail Gallery Generator`、`Promo Poster Generator`，与其它生成卡片保持一致。
|
||||
|
||||
## 三条独立工作流
|
||||
|
||||
1. `publication-cover-image`
|
||||
- 名称：游戏首图
|
||||
- 输出：单张主视觉
|
||||
- 尺寸：`720 x 540`
|
||||
- 适用：推荐流、作品卡和首屏传播位
|
||||
|
||||
2. `publication-detail-gallery`
|
||||
- 名称：详情五图
|
||||
- 输出：五张详情图
|
||||
- 尺寸：`720 x 1280`，`9:16` 竖版
|
||||
- 适用：作品详情、应用介绍和运营分发图组
|
||||
|
||||
3. `publication-promo-poster`
|
||||
- 名称：运营海报
|
||||
- 输出：单张活动海报
|
||||
- 尺寸：`1280 x 720`，`16:9` 横版
|
||||
- 适用：社群、活动、渠道投放和运营节日位
|
||||
|
||||
## 职责边界
|
||||
|
||||
本功能边界只负责图片编辑器里的宣发素材生成：
|
||||
|
||||
- 可以维护：工作流框架、Prompt 约束、参考图解析约束、图片后处理验收约束。
|
||||
- 已落地：画布内生成占位卡片、游戏名 / 游戏分类 / 一句话描述游戏结构化输入、参考图上传 / 从画布选择、尺寸标识、真实生图、5 泥点扣费、成品回画布。
|
||||
- 详情五图：点击一次生成 5 张 `720 x 1280` 竖版详情图，横向排布到画布；同一次操作只扣 5 泥点。
|
||||
- 不在 UI 暴露：Prompt 输入摘要、Prompt 约束预览、内部提示词拼接过程。
|
||||
- 暂不实现：作品发布状态、审核、分享渠道、远程 Genarrative 接口、作品架或广场能力。
|
||||
- 不修改：SpacetimeDB schema、前端发布页、作品发布系统。
|
||||
|
||||
## 生成与计费
|
||||
|
||||
- 前端生成请求统一通过 `/api/editor/images/generations`。
|
||||
- 宣发素材请求携带 `kind: publication-material`，后端仅对这个 kind 扣 5 泥点。
|
||||
- `publication-detail-gallery` 额外携带 `candidateCount: 5`；后端在同一次扣费操作内顺序生成 5 张图，并通过响应 `images` 列表返回。
|
||||
- 扣费通过现有钱包资产操作封装执行；上游生成失败或未返回图片时按现有补偿逻辑退款。
|
||||
- 生成成功后，成品作为图片画布生成图层加入画布，并保留游戏输入和参考图摘要供图层信息使用。
|
||||
|
||||
## 代码位置
|
||||
|
||||
- 工具入口：`src/components/image-editor/ImageCanvasBottomToolbarView.tsx`
|
||||
- 菜单和生成卡片挂载：`src/components/image-editor/ImageCanvasGenerationComposerView.tsx`
|
||||
- 工作流状态：`src/components/image-editor/useImageCanvasGenerationWorkflow.ts`
|
||||
- 工作流内容模型：`src/components/image-editor/ImageCanvasPublicationMaterialsModel.ts`
|
||||
- 画布内生成卡片设置面板：`src/components/image-editor/ImageCanvasPublicationMaterialsDemoPanelView.tsx`
|
||||
|
||||
## 验证命令
|
||||
|
||||
```bash
|
||||
npm run test -- src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/services/image-editor/editorProjectClient.test.ts
|
||||
cargo check -p api-server --manifest-path server-rs/Cargo.toml
|
||||
npm run check:encoding
|
||||
```
|
||||
Reference in New Issue
Block a user