# 多图生成 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 和普通文本两种输入都可读。
- 改生成工具条时，至少检查：模型下拉、图片参数、并行开关、每页数量、生成按钮是否在常见窗口宽度下不重叠。
- 优先跑局部测试和包级类型检查；无必要不跑全量构建。