场景输入框统一改用 AutoGrowTextArea

自定义画风与画面内容统一使用可自增长多行输入
移除不再需要的 PlatformTextField 依赖
补充输入类型与自动增长样式回归测试
This commit is contained in:
2026-08-05 14:55:02 +08:00
parent a6a82569ad
commit 3b7f64f118
2 changed files with 29 additions and 5 deletions
@@ -14,7 +14,6 @@ import {
PlatformFloatingMenuItem,
} from '../common/PlatformFloatingMenu';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import { PlatformTextField } from '../common/PlatformTextField';
import type {
CharacterReferenceImage,
GenerateDialogState,
@@ -270,13 +269,11 @@ export function ImageCanvasBasicGenerationComposerView({
/>
{dialog.mode === 'scene' &&
dialog.sceneStylePreset === CUSTOM_EDITOR_SCENE_STYLE_PRESET ? (
<PlatformTextField
<AutoGrowTextArea
aria-label="自定义画风"
value={dialog.sceneCustomStyle ?? ''}
disabled={dialog.status === 'generating'}
placeholder="填写自定义画风,例如:90 年代复古像素风"
size="sm"
density="compact"
className="image-canvas-editor__scene-custom-style"
onChange={(event) =>
setGenerateDialog((currentDialog) =>
@@ -176,7 +176,11 @@ describe('ImageCanvasGenerationComposerView', () => {
});
const panel = screen.getByRole('dialog', { name: '游戏场景生成器' });
expect(within(panel).getByRole('textbox', { name: '画面内容' })).toBeTruthy();
const sceneContent = within(panel).getByRole('textbox', {
name: '画面内容',
});
expect(sceneContent.className).toContain('auto-grow-text-area');
expect(sceneContent.className).not.toContain('platform-text-field');
expect(
within(panel).getByRole('button', { name: '画风预设 日系动画' }),
).toBeTruthy();
@@ -186,6 +190,29 @@ describe('ImageCanvasGenerationComposerView', () => {
expect(within(panel).queryByText('像素艺术')).toBeNull();
});
it('让场景自定义画风使用可自增长的多行字段', () => {
renderComposer({
mode: 'scene',
prompt: '',
status: 'idle',
composerOpen: true,
generationReferences: [],
sceneStylePreset: 'custom',
sceneCustomStyle: '',
imageModel: 'gemini-3.1-flash-image-preview',
aspectRatio: '16:9',
imageSize: '1K',
});
const panel = screen.getByRole('dialog', { name: '游戏场景生成器' });
const customStyle = within(panel).getByRole('textbox', {
name: '自定义画风',
});
expect(customStyle.tagName).toBe('TEXTAREA');
expect(customStyle.className).toContain('auto-grow-text-area');
expect(customStyle.className).not.toContain('platform-text-field');
});
it('让生成UI设计图面板复用普通图片生成面板的纵向结构', () => {
const setGenerateDialog = vi.fn();
renderComposer({