Update Match3D/image-generation docs & code
Adds/updates documentation, assets and implementation for Match3D and puzzle image generation workflows. Key changes: decision logs and pitfalls updated to prefer VectorEngine Gemini for Match3D material sheets and to require edits (multipart) for 1:1 container reference images; guidance added for when to use APIMart vs VectorEngine. .env.example clarified APIMart/Responses config. Many new public assets and PPT visuals added. Code changes across frontend and backend: updated shared contracts, server-rs match3d/puzzle/image-generation handlers, VectorEngine/OpenAI image generation clients, and multiple React components/tests to handle UI/background/container image signing, edits workflow, and puzzle UI background resolution. Added src/services/puzzle-runtime/puzzleUiBackgroundSource.ts and related test updates. Includes notes about multipart HTTP/1.1 requirement and test/verification commands in docs.
This commit is contained in:
@@ -1,28 +1,29 @@
|
||||
# 移动端创作页作品列表统一卡片设计 2026-04-29
|
||||
# 移动端草稿页作品列表统一卡片设计 2026-04-29
|
||||
|
||||
## 背景
|
||||
|
||||
创作页的作品模块需要同时承载 RPG、拼图和大鱼吃小鱼等玩法。不同玩法卡片不能各自展示阶段、素材、主题等细节标签,否则作品列表会在移动端显得拥挤,并且草稿作品会暴露过多编辑态信息。
|
||||
草稿页的作品模块需要同时承载 RPG、拼图和大鱼吃小鱼等玩法。不同玩法卡片不能各自展示阶段、素材、主题等细节标签,否则作品列表会在移动端显得拥挤,并且草稿作品会暴露过多编辑态信息。
|
||||
|
||||
本次将作品列表卡片收口成统一信息结构:草稿只用于快速识别和继续创作,已发布作品才展示公开数据与分享入口。
|
||||
本次将作品列表卡片收口成统一信息结构:草稿只用于快速识别和继续创作,已发布作品才展示公开数据;删除与分享等低频操作收进左滑操作层,避免列表常态被按钮挤占。
|
||||
|
||||
## 落地范围
|
||||
|
||||
- 列表容器:`src/components/custom-world-home/CustomWorldCreationHub.tsx`
|
||||
- 作品卡片:`src/components/custom-world-home/CustomWorldWorkCard.tsx`
|
||||
- 不改动作品数据聚合、筛选、打开和体验逻辑。
|
||||
- 已发布作品右上角动作从删除改为分享;草稿仍保留删除入口。
|
||||
- 已发布作品保留分享能力;可删除作品保留删除能力,但常态不显示为右侧按钮。
|
||||
|
||||
## 卡片结构规则
|
||||
|
||||
1. 标题上方只显示两个标签:作品状态与游戏类型。
|
||||
1. 卡片整体对齐发现 / 分类页的横向作品列表结构:左侧为标题、状态、类型、摘要与必要数据,右侧为带透明度的封面图。
|
||||
2. 不再显示阶段、主题、素材完成度、作者、作品号等额外标签。
|
||||
3. 标签下方依次显示作品名称与作品描述。
|
||||
4. 草稿卡片到作品描述为止,不显示其他统计、作品号或体验按钮。
|
||||
3. 标题区域保留作品状态与游戏类型;生成中的草稿状态显示为“生成中”。
|
||||
4. 草稿卡片到作品描述为止,不显示右侧“继续创作”等固定动作、统计、作品号或公开指标。
|
||||
5. 已发布卡片在描述下方显示三项公开指标:游玩数、改造数、点赞数。
|
||||
6. 已发布卡片右上角显示分享 icon,点击后复制作品分享文案,不触发卡片打开。
|
||||
7. 草稿卡片右上角继续显示删除 icon,点击删除不触发卡片打开。
|
||||
6. 已发布卡片的分享入口收进左滑操作层,点击后复制作品分享文案,不触发卡片打开。
|
||||
7. 可删除卡片的删除入口收进左滑操作层,常态不显示删除按钮;左滑露出后点击删除不触发卡片打开。
|
||||
8. 卡片不显示最后修改时间;`updatedAt` 只用于作品列表排序。
|
||||
9. 生成中的卡片在整卡上叠加半透明蒙版、旋转等待符号和“生成中...”标识;蒙版不能移除标题、状态、类型、摘要、右侧封面等原有信息。
|
||||
|
||||
## 公开指标重点展示补充
|
||||
|
||||
@@ -31,16 +32,24 @@
|
||||
3. 用户每次进入创作页时,前端读取上一次进入该页面缓存的公开指标快照;当已发布作品卡片滑动进入视口后,数字从缓存值增长到本次接口返回的最新值。
|
||||
4. 若最新值高于缓存值,动画完成后在对应指标右下角展示红色向上箭头和本次上涨的具体数值,字号低于主数字,避免抢占主信息层级。
|
||||
5. 若没有缓存值、缓存值不低于最新值或作品仍是草稿,则直接显示最新值,不展示上涨标记。
|
||||
6. 每张作品卡片继续使用作品封面作为整卡背景,封面保持主视觉可见;遮罩只用于保证标题、描述和指标可读,不能把封面洗成普通面板底色。
|
||||
6. 每张作品卡片继续使用作品封面作为右侧方形半透明主视觉;封面不能因为列表收缩被拉伸变形。
|
||||
7. 作品列表按 `updatedAt` 倒序排列;前端排序需要兼容 ISO 时间和 Rust 后端常用的 `seconds.microsZ` 时间文本。
|
||||
8. 若玩法摘要缺少 `coverImageSrc`,允许从同一作品的正式关卡图、背景图或素材图里取第一张可用图片作为卡片背景兜底。
|
||||
9. 若作品真实图片为空、私有资源换签失败或浏览器图片加载失败,卡片必须切到对应玩法的 `public/creation-type-references/` 参考图;最终兜底底色使用平台浅粉暖白色系,不允许退回黑色普通面板。
|
||||
|
||||
## 移动端布局规则
|
||||
|
||||
1. 作品列表默认仍使用 2 列网格,保证草稿可以快速扫视。
|
||||
2. 已发布作品卡片在移动端固定 `col-span-2`,即占据一整行,避免公开指标和分享入口互相挤压。
|
||||
3. `sm` 及以上视口恢复普通网格跨度,由卡片自然进入多列布局。
|
||||
1. 作品列表默认使用单列纵向列表,视觉上与发现页分类列表保持一致。
|
||||
2. 移动端每张卡片使用固定右列方形半透明封面,右列建议 `5.1rem` 左右;草稿卡即使复用分类页基础类名,也必须用自身选择器覆盖分类页的 `4.3rem + 正文 + action` 三列规则,避免正文被压进窄列。
|
||||
3. 已发布作品的公开指标在卡片正文内保留,但需要压缩字号和间距,不能让右侧封面列错位。
|
||||
4. 小屏卡片降低高度、内边距、标题字号和徽标尺寸,避免长标题或中文描述撑破容器。
|
||||
5. 右侧封面容器本身必须带玩法参考图 CSS 背景兜底;`img` 的真实封面或 `ResolvedAssetImage` fallback 加载失败时,也不能出现空白或黑卡。
|
||||
|
||||
## 网页端布局规则
|
||||
|
||||
1. 网页端作品架不能继续拉成整行超宽列表;从 `768px` 起使用多列卡片式网格,默认两列,宽屏提升到三列。
|
||||
2. 网页端卡片保留移动端同一信息结构,但卡片高度增加,正文区可显示更多摘要与公开指标,右侧封面改为更高的半透明视觉区。
|
||||
3. 删除与分享仍然只在左滑或键盘揭示态显示;默认态不得透出红色删除底层或分享底层。
|
||||
|
||||
## 文案约束
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 平台创作 Tab 模板入口设计
|
||||
|
||||
更新时间:`2026-05-07`
|
||||
更新时间:`2026-05-14`
|
||||
|
||||
## 1. 目标
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
```text
|
||||
标题:10分钟创作一个精品互动玩法
|
||||
模板 Tab:拼图 / 抓大鹅 / 视觉小说(敬请期待)/ AIRP
|
||||
模板 Tab:拼图 / 抓大鹅 / AIRP
|
||||
默认内容:拼图创作表单
|
||||
```
|
||||
|
||||
@@ -34,16 +34,17 @@
|
||||
1. 打开“创作”一级 Tab 时默认停留在拼图 Tab,不主动创建拼图 session。
|
||||
2. 点击拼图表单“生成草稿”后,才创建拼图 session 并执行 `compile_puzzle_draft`。
|
||||
3. 拼图表单内的模板按钮使用 `tablist / tab` 语义,点击后只填充画面描述。
|
||||
4. 点击非拼图且已开放的模板 Tab 时,进入该玩法既有工作台;视觉小说与 AIRP 当前保持敬请期待禁用态。
|
||||
5. `creative-agent` 不出现在模板 Tab 和选择弹层中,不再作为创作 Tab 首屏入口。
|
||||
6. 方洞挑战暂时从创作页完全隐藏,不出现在模板 Tab、旧选择弹层和创作 Hub 卡片中;既有作品链路继续保留。
|
||||
4. 点击非拼图且已开放的模板 Tab 时,进入该玩法既有工作台;AIRP 当前保持敬请期待禁用态。
|
||||
5. `visual-novel` 暂时从创作页完全隐藏,不出现在模板 Tab、旧选择弹层和创作 Hub 卡片中;既有作品、详情、运行链路继续保留。
|
||||
6. `creative-agent` 不出现在模板 Tab 和选择弹层中,不再作为创作 Tab 首屏入口。
|
||||
7. 方洞挑战暂时从创作页完全隐藏,不出现在模板 Tab、旧选择弹层和创作 Hub 卡片中;既有作品链路继续保留。
|
||||
|
||||
## 4. 验收
|
||||
|
||||
1. 点击“创作”后首屏出现“10分钟创作一个精品互动玩法”。
|
||||
2. 顶部选择模板入口为 Tab,拼图 Tab 默认 `aria-selected=true`。
|
||||
3. 创作 Tab 默认显示拼图创作表单内容,且不显示旧“Hi, 朋友”、输入框或智能创作快捷按钮。
|
||||
4. 隐藏的智能创作类型与方洞挑战不出现在模板 Tab、旧选择弹层和创作 Hub 卡片中。
|
||||
4. 隐藏的智能创作类型、视觉小说与方洞挑战不出现在模板 Tab、旧选择弹层和创作 Hub 卡片中。
|
||||
5. 草稿页返回创作页后仍回到同一模板入口,并可保留拼图表单草稿内容。
|
||||
|
||||
## 5. 嵌入式表单 UI 细节
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
- 入口、删除、分享、领取拼图激励等行为全部复用现有 `CustomWorldCreationHub` 的作品卡逻辑。
|
||||
- 一级底部 Tab 文案为“草稿”,内部仍可按草稿与已发布筛选。
|
||||
- 作品列表必须按最后修改时间倒序排列;排序使用后端 `updatedAt`,前端需要兼容 ISO 字符串和 `seconds.microsZ` 两种时间文本。
|
||||
- 每张作品卡以作品封面图铺满整卡背景,并叠加遮罩保证标题和描述可读;遮罩不能把封面洗成普通面板底色。缺 `coverImageSrc` 但同一作品已有正式关卡图、背景图或素材图时,优先用这些真实作品图兜底,再使用现有兜底底图。
|
||||
- 每张作品卡以作品封面图铺满整卡背景,并叠加遮罩保证标题和描述可读;遮罩不能把封面洗成普通面板底色。缺 `coverImageSrc` 但同一作品已有正式关卡图、背景图或素材图时,优先用这些真实作品图兜底;若封面签名失败或作品还没有可用图片,再按玩法使用 `public/creation-type-references/` 的参考图兜底,最终无图底色也必须保持百梦浅粉暖色调,不能回退为黑色卡片。
|
||||
- 草稿页卡片不展示“最后修改时间”“更新于”或原始 `updatedAt` 文本,时间只参与排序。
|
||||
|
||||
## 6. 我的页玩过列表
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
- 平台层正文、按钮、说明、功能标签统一使用非像素字体
|
||||
- 左上角 `陶泥儿 / GENARRATIVE` 品牌字标允许单独做成像素化 logo
|
||||
- `GENARRATIVE` 与 `陶泥儿` 都优先直接使用游戏内同款 `Fusion Pixel`
|
||||
- 品牌中文主标固定显示为 `陶泥` + 半字号 `儿`,`儿` 必须继承主标同一字体和字号后再视觉缩放到 50%,并与 `陶泥` 底部对齐,随移动端和场景覆盖等比例缩放
|
||||
- 品牌字标默认保持正常像素字观感,禁止再叠双层粗阴影或手动加粗到影响识别
|
||||
- 品牌字标直接使用字体文件内原字形,不额外做运行时描字、轮廓拼字或伪粗体处理
|
||||
- 主标题保留明显层级,但不再做像素描边效果
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
@@ -0,0 +1,5 @@
|
||||
生成一张适合商业路演 PPT 使用的横版高清主视觉配图,主题是“陶泥:将 Harness Engineering 理论、专家知识、多 Agent 调度融入 AI 创作工具与 AI 原生游戏框架”。
|
||||
画面构图:深色但清爽的现代科技工作室/游戏创作中枢,中心是一个温润陶泥质感的抽象核心装置,核心装置连接两条清晰的知识管线。左侧表现 AI 创作工具:多 Agent 协作节点、策划 SOP、美术 SOP、模板框架、剧本/数值/系统/角色/场景/CG 等垂类任务以图标化模块呈现。右侧表现 AI 原生游戏框架:实时剧情生成、数值与剧情对齐、画面与剧情对齐、实时任务与物品生成,以游戏世界投影、角色剪影、场景画面和规则约束网格呈现。
|
||||
底部远景加入克制的学术评审氛围:讲台、投影、评审席、优秀课程设计的荣誉感,但不要出现真实学校校徽、真实教授肖像或任何可识别真实人物。
|
||||
视觉风格:高端产品发布会 Key Visual,精致 3D 插画结合轻量界面光效,专业、可信、面向 AI 游戏与创作者工具,色彩使用陶土暖色、青绿色、冷白光和少量金色点缀,信息结构清楚,主体居中偏左,右上和左上保留干净留白用于 PPT 叠加标题。
|
||||
要求:无文字、无字母、无水印、无 UI 按钮、无品牌 logo、无真实校徽、无真实人物肖像、避免杂乱、避免过暗、避免卡通幼稚、避免纯抽象背景。
|
||||
Reference in New Issue
Block a user