Nano Banana2 表单

概览

src/components/workbench/nano-banana/ 暴露了 TextGenerationForm 与 ImageEditForm 两个受控组件，主工作台通过 props 注入状态、文案与回调来驱动 UI。下文整理它们的主要输入与交互，以便 Story/Docs 复用与后续重构。

共享约定

copy 源自 LocalizedContent，必须保证 en/zh 均已填充；表单不直接读取 messages/*.json。
所有输入均为受控组件，父级负责字符长度、数量选项等业务校验。
localeKey 仅用于生成 Select 的 key，避免在切换语言时 React 重用旧节点。
isSubmitting 会禁用按钮并展示 Loader2，任何提交逻辑都应幂等。

Prop	Type	说明
`copy`	`LocalizedContent['textTab']`	label、占位符、信用点提示等全部来自此对象。
`localeKey`	`LocaleKey`	切换语言时强制重建比例下拉。
`prompt`	`string`	提示词文本域的受控值。
`promptLength`	`number`	供提示词计数模板 `{count}` 使用。
`maxPromptCharacters`	`number`	传给 `Textarea.maxLength`，用于 UI 级别限制。
`onPromptChange`	`(event) => void`	更新提示词状态，父层可同时刷新 `promptLength`。
`format`	`string`	当前成品格式值。
`onFormatChange`	`(value: string) => void`	选择框回调，值来自 `copy.formatOptions`。
`ratio`	`string`	当前画幅值。
`onRatioChange`	`(value: string) => void`	更新画幅；`Select` key 结合 `localeKey`。
`selectedRatio`	`RatioOption`	用于展示当前画幅名称、描述与形状。
`quantity`	`number`	生成数量按钮的受控状态。
`onQuantityChange`	`(value: number) => void`	点击数量按钮时触发。
`quantityOptions`	`number[]`	渲染 4 列按钮的候选值。
`model`	`string`	当前选择的模型值，来源 `copy.modelOptions`。
`onModelChange`	`(value: string) => void`	模型选择回调。
`isSubmitting`	`boolean`	控制按钮 loading/disabled。
`onSubmit`	`() => void`	点击主按钮触发，需处理信用点扣减。
`submitError`	`string \| null`	若存在，将以红字展示在按钮下方。

Prop	Type	说明
`copy`	`LocalizedContent['imageTab']`	包含参考图、上传提示等文案。
`localeKey`	`LocaleKey`	同 Text 表单，用于比率 `Select`。
`prompt` / `promptLength` / `maxPromptCharacters` / `onPromptChange`	同 Text 表单	复用同一受控逻辑。
`format` / `onFormatChange`	同 Text 表单
`ratio` / `onRatioChange` / `selectedRatio`	同 Text 表单
`quantity` / `onQuantityChange` / `quantityOptions`	同 Text 表单
`model` / `onModelChange`	同 Text 表单
`isSubmitting` / `onSubmit` / `submitError`	同 Text 表单
`referenceImagesLength`	`number`	当前已上传参考图总数。
`visibleReferenceImages`	`ReferenceImage[]`	轮播窗口中可见的图片列表。
`visibleReferenceStart`	`number`	可见窗口在全集中的起始索引，用于页码显示。
`maxReferenceImages`	`number`	用于“n / limit”提示与禁用上传。
`canScrollReferencePrev` / `canScrollReferenceNext`	`boolean`	控制左右箭头的 disabled 状态。
`onScrollReferencePrev` / `onScrollReferenceNext`	`() => void`	切换参考图窗口。
`onSelectReferenceImage`	`(id: string) => void`	选中缩略图并高亮。
`onOpenReferencePreview`	`(image: ReferenceImage) => void`	打开放大预览/对话框。
`onRemoveReferenceImage`	`(id: string) => void`	删除单张参考图。
`onClearReferenceImages`	`() => void`	清空所有参考图。
`activeReferenceImageId`	`string \| null`	当前激活缩略图，用于描边状态。
`referenceImageCountLabel`	`string`	文案形式的计数（含 `{count}/{max}`），方便国际化。

概览

共享约定

TextGenerationForm

Props

交互流程

可达性

ImageEditForm

Props

交互流程

错误与 Loading

目录