From 20826e2e60ae79e688804cfcceb7749d9ff26180 Mon Sep 17 00:00:00 2001 From: kdletters Date: Sun, 14 Jun 2026 14:48:20 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E5=B9=B3=E5=8F=B0=E6=96=87?= =?UTF-8?q?=E6=9C=AC=E5=9F=9F=E6=94=B6=E5=8F=A3=E7=94=9F=E6=88=90=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E8=AF=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 编辑器画布内生成输入框和修改图片弹窗提示词改为复用 PlatformTextField。 删除编辑器按 textarea 标签选择器维护基础输入 chrome 的做法，仅保留局部尺寸与样式覆盖。 补充测试覆盖生成提示词共享文本域样式，并更新 TRACKING。 --- TRACKING.md | 1 + .../image-editor/ImageCanvasEditorView.test.tsx | 10 +++++++++- .../image-editor/ImageCanvasEditorView.tsx | 13 +++++++++++-- src/index.css | 8 ++++---- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/TRACKING.md b/TRACKING.md index 05e2854f..f11e3191 100644 --- a/TRACKING.md +++ b/TRACKING.md @@ -99,3 +99,4 @@ - 2026-06-14 组件复用修正：编辑器生成输入框的提交按钮改为复用 `PlatformActionButton`，仅保留生成器局部尺寸和 Lovart 式浅灰覆盖，不再直接维护原生 submit 按钮基础 chrome；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformActionButton.test.tsx`、`npm run typecheck`。 - 2026-06-14 组件复用修正：编辑器生成输入框的“参考图”按钮改为复用 `PlatformIconButton variant="surfaceFloating"`，用 children 承载短标签，仅保留生成器局部尺寸和浅灰覆盖；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx`、`npm run typecheck`。 - 2026-06-14 组件复用修正：编辑器生成图右上角元数据角标改为复用 `PlatformIconButton asChild="spanButton"`，保留嵌套在图层按钮内的合法 DOM 结构，同时把 Enter / Space 键盘触发和 `darkMini` chrome 收口到共享组件；验证命令：`npm run test -- src/components/common/PlatformIconButton.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`。 +- 2026-06-14 组件复用修正：编辑器画布内生成输入框和“修改图片”弹窗提示词改为复用 `PlatformTextField variant="textarea"`，删除编辑器里按标签选择器手写 textarea 基础输入 chrome 的做法，仅保留生成器局部尺寸和 Lovart 式覆盖；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformTextField.test.tsx`、`npm run typecheck`。 diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx index 7238b5ef..8fb6e515 100644 --- a/src/components/image-editor/ImageCanvasEditorView.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx @@ -737,6 +737,11 @@ describe('ImageCanvasEditorView', () => { expect( within(generateDialog).getByRole('button', { name: '添加参考图' }).className, ).toContain('image-canvas-editor__generation-ref'); + const generatePrompt = screen.getByLabelText('生成提示词'); + expect(generatePrompt.className).toContain('platform-text-field'); + expect(generatePrompt.className).toContain( + 'image-canvas-editor__generation-prompt', + ); expect(within(generateDialog).getByRole('button', { name: '生成比例 1:1 2k 1张' })).toBeTruthy(); expect(within(generateDialog).getByRole('button', { name: '生成模型 GPT Image' })).toBeTruthy(); expect(within(generateDialog).getByRole('button', { name: '生成' }).className).toContain( @@ -1077,7 +1082,10 @@ describe('ImageCanvasEditorView', () => { fireEvent.click(screen.getByRole('button', { name: '修改图片' })); const editDialog = screen.getByRole('dialog', { name: '修改图片' }); expect(editDialog).toBeTruthy(); - fireEvent.change(screen.getByLabelText('生成提示词'), { + const editPrompt = screen.getByLabelText('生成提示词'); + expect(editPrompt.className).toContain('platform-text-field'); + expect(editPrompt.className).toContain('image-canvas-editor__generate-prompt'); + fireEvent.change(editPrompt, { target: { value: '把画面改成黄昏光线' }, }); fireEvent.click(screen.getByRole('button', { name: '修改' })); diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx index ced09770..829af070 100644 --- a/src/components/image-editor/ImageCanvasEditorView.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.tsx @@ -71,6 +71,7 @@ import { } from '../common/PlatformFloatingMenu'; import { PlatformIconButton } from '../common/PlatformIconButton'; import { PlatformStatusMessage } from '../common/PlatformStatusMessage'; +import { PlatformTextField } from '../common/PlatformTextField'; import { UnifiedModal } from '../common/UnifiedModal'; type EditorAsset = { @@ -2786,11 +2787,15 @@ export function ImageCanvasEditorView() { > 参考图 -