TrueGrowth/docs/MULTI_IMAGE_GENERATION_UI_LESSONS.md

多图生成 UI 优化经验

背景

多图生成第 1 步会先生成公共提示词和逐页提示词。结构化 JSON 提示词内容较长，旧预览用三行截断，用户无法确认完整内容；第 2 步生成工具条里“串行/并行”分段按钮又占用横向空间，容易和图片参数下拉重叠。

经验

1. 提示词预览要完整，JSON 要像代码一样读

• 预览区不要用 line-clamp 截断长提示词，尤其是生成后用户需要确认内容再进入下一步。
• 外层容器控制最大高度并滚动，单条内容保持完整换行，避免把大字符串展开到撑爆窗口。
• JSON 字符串先尝试 JSON.parse，成功后 JSON.stringify(value, null, 2) 美化；解析失败则按普通文本展示。
• 普通文本使用 pre-wrap 和 overflow-wrap: anywhere，结构化 JSON 使用等宽字体和横向滚动，避免破坏缩进。

2. 工具条优先节省横向空间

• 二选一且默认值明确的控制，不一定要用分段按钮；“并行”可以用 checkbox 表达，未勾选即串行。
• checkbox 的 hover 提示要根据状态变化：并行强调速度，串行强调稳定和节省并发。
• 主操作按钮文案要短，生成工具条里“生成”比“生成选中”更不容易挤压相邻控件；已选页数已经在左侧展示。
• 移动端和窄窗口要继续让工具条换行，单个控件宽度撑满，避免参数下拉、模式开关和主按钮互相遮挡。

后续检查

• 改提示词预览时，先确认 JSON 和普通文本两种输入都可读。
• 改生成工具条时，至少检查：模型下拉、图片参数、并行开关、每页数量、生成按钮是否在常见窗口宽度下不重叠。
• 优先跑局部测试和包级类型检查；无必要不跑全量构建。