From d4a894f166959c4f71fb11f83b4a25e30f6f04ce Mon Sep 17 00:00:00 2001 From: kdletters Date: Sun, 14 Jun 2026 16:13:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E5=B9=B3=E5=8F=B0=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E6=A1=86=E6=94=B6=E5=8F=A3=E7=B4=A0=E6=9D=90=E4=BE=A7?= =?UTF-8?q?=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 编辑器素材侧栏的新建文件夹、文件夹重命名和素材重命名输入框改为复用 PlatformTextField。 输入框局部样式改为明确 class 覆盖，不再按 input 标签选择器维护基础输入 chrome。 补充编辑器测试断言共享输入框原语，并更新 TRACKING。 --- TRACKING.md | 1 + .../image-editor/ImageCanvasEditorView.test.tsx | 15 ++++++++++++++- .../image-editor/ImageCanvasEditorView.tsx | 15 ++++++++++++--- src/index.css | 8 ++++---- 4 files changed, 31 insertions(+), 8 deletions(-) diff --git a/TRACKING.md b/TRACKING.md index 7249eff6..e20b60c1 100644 --- a/TRACKING.md +++ b/TRACKING.md @@ -104,3 +104,4 @@ - 2026-06-14 组件复用修正：`PlatformEmptyState` 增加 `asChild="button"` 形态，项目页空列表“新建项目”卡片改为复用平台空态原语，避免项目页单独维护可点击空态卡片基础 chrome；验证命令：`npm run test -- src/components/common/PlatformEmptyState.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`。 - 2026-06-14 组件复用修正：编辑器顶部缩放百分比触发器改为复用 `PlatformInlineOptionButton`，让缩放菜单入口和生成器比例 / 模型 pill 共用“当前选项触发菜单”的按钮原语；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformInlineOptionButton.test.tsx`、`npm run typecheck`。 - 2026-06-14 组件复用修正：编辑器左下面板 dock 的画布背景色入口改为复用 `PlatformIconButton`，用色块作为 icon 承载当前背景色，和素材 / 图层 / 小地图入口保持同一图标按钮原语；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx`、`npm run typecheck`。 +- 2026-06-14 组件复用修正：编辑器素材侧栏的新建文件夹、文件夹重命名和素材重命名输入框改为复用 `PlatformTextField`，输入框局部样式改为明确 class 覆盖，不再按 `input` 标签选择器重复维护基础输入 chrome；验证命令：`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 049937fa..a77003d2 100644 --- a/src/components/image-editor/ImageCanvasEditorView.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx @@ -204,6 +204,10 @@ describe('ImageCanvasEditorView', () => { await user.click(screen.getByRole('button', { name: '重命名素材拼图素材' })); const renameInput = screen.getByLabelText('重命名素材拼图素材'); + expect(renameInput.className).toContain('platform-text-field'); + expect(renameInput.className).toContain( + 'image-canvas-editor__asset-rename-input', + ); await user.clear(renameInput); await user.type(renameInput, '主视觉素材'); await user.click(screen.getByRole('button', { name: '保存素材拼图素材名称' })); @@ -229,7 +233,12 @@ describe('ImageCanvasEditorView', () => { expect(screen.getByRole('button', { name: '添加拼图素材' })).toBeTruthy(); await user.click(screen.getByRole('button', { name: '新建素材文件夹' })); - await user.type(screen.getByLabelText('素材文件夹名称'), '角色上传'); + const folderNameInput = screen.getByLabelText('素材文件夹名称'); + expect(folderNameInput.className).toContain('platform-text-field'); + expect(folderNameInput.className).toContain( + 'image-canvas-editor__folder-create-input', + ); + await user.type(folderNameInput, '角色上传'); await user.click(screen.getByRole('button', { name: '保存素材文件夹' })); const uploadInput = screen.getByLabelText('上传图片文件'); @@ -276,6 +285,10 @@ describe('ImageCanvasEditorView', () => { await screen.findByRole('region', { name: '角色' }); await user.click(screen.getByRole('button', { name: '重命名文件夹角色' })); const folderRenameInput = screen.getByLabelText('重命名文件夹角色'); + expect(folderRenameInput.className).toContain('platform-text-field'); + expect(folderRenameInput.className).toContain( + 'image-canvas-editor__folder-rename-input', + ); await user.clear(folderRenameInput); await user.type(folderRenameInput, '角色参考'); await user.click(screen.getByRole('button', { name: '保存文件夹角色名称' })); diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx index d60b8d3e..02a90add 100644 --- a/src/components/image-editor/ImageCanvasEditorView.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.tsx @@ -2106,10 +2106,13 @@ export function ImageCanvasEditorView() { void commitNewAssetFolder(); }} > - setNewFolderName(event.target.value)} onKeyDown={(event) => { if (event.key === 'Escape') { @@ -2163,10 +2166,13 @@ export function ImageCanvasEditorView() { /> {renamingFolder?.folderId === folder.id ? ( - setRenamingFolder({ folderId: folder.id, @@ -2236,10 +2242,13 @@ export function ImageCanvasEditorView() { {folder.assets.map((asset) => { const isRenaming = renamingAsset?.assetId === asset.id; const titleNode = isRenaming ? ( - setRenamingAsset({ assetId: asset.id, diff --git a/src/index.css b/src/index.css index 30436365..36196f59 100644 --- a/src/index.css +++ b/src/index.css @@ -3392,12 +3392,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { } .image-canvas-editor__asset-folder-header > span:first-of-type, -.image-canvas-editor__asset-folder-header > input { +.image-canvas-editor__folder-rename-input { min-width: 0; flex: 1; } -.image-canvas-editor__asset-folder-header input { +.image-canvas-editor__folder-rename-input { height: 1.8rem; border: 1px solid #8fb8ff; border-radius: 0.35rem; @@ -3543,7 +3543,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { white-space: nowrap; } -.image-canvas-editor__asset-meta input { +.image-canvas-editor__asset-rename-input { min-width: 0; height: 1.8rem; border: 1px solid #8fb8ff; @@ -3592,7 +3592,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { padding: 0.4rem; } -.image-canvas-editor__folder-create input { +.image-canvas-editor__folder-create-input { min-width: 0; height: 2rem; border: 1px solid #8fb8ff;