From 028a648d9c30f57721d19e985f05f1e56574a1eb Mon Sep 17 00:00:00 2001 From: kdletters Date: Sun, 14 Jun 2026 17:54:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E5=9B=BE=E6=A0=87=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E6=94=B6=E5=8F=A3=E7=94=9F=E6=88=90=E5=85=B3=E9=97=AD?= =?UTF-8?q?=E5=8A=A8=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 生成跟随框关闭按钮改为复用 PlatformIconButton 的 surfaceFloating 变体，统一浮动图标动作 chrome。 编辑器薄包装 EditorIconButton 透传 variant，避免局部再写一套关闭按钮基础样式。 补充测试与 TRACKING，删除本地关闭按钮重复 CSS。 --- TRACKING.md | 1 + src/components/common/PlatformIconButton.tsx | 7 ++++++- .../ImageCanvasEditorPrimitives.test.tsx | 17 +++++++++++++++++ .../ImageCanvasEditorPrimitives.tsx | 8 +++++++- .../image-editor/ImageCanvasEditorView.tsx | 1 + src/index.css | 7 ------- 6 files changed, 32 insertions(+), 9 deletions(-) diff --git a/TRACKING.md b/TRACKING.md index f908d28c..1f352b27 100644 --- a/TRACKING.md +++ b/TRACKING.md @@ -107,3 +107,4 @@ - 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`。 - 2026-06-14 组件复用修正：编辑器侧栏素材和图层缩略图通过 `SidebarMediaItem` 改为复用 `PlatformMediaFrame`，删除缩略图内部图片填充的重复 CSS，统一媒体预览框和 fallback 结构；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformMediaFrame.test.tsx`、`npm run typecheck`。 - 2026-06-14 组件复用修正：画布图片 hover 尺寸标签改为复用 `PlatformPillBadge tone="lightOverlay"`，局部 CSS 只保留定位和深色覆盖，不再重复维护 badge 的圆角、字号和基础排版；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformPillBadge.test.tsx`、`npm run typecheck`。 +- 2026-06-14 组件复用修正：生成跟随框的关闭按钮改为复用 `PlatformIconButton variant="surfaceFloating"`，编辑器薄包装 `EditorIconButton` 增加 variant 透传，删除局部关闭按钮基础 chrome；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx`、`npm run typecheck`。 diff --git a/src/components/common/PlatformIconButton.tsx b/src/components/common/PlatformIconButton.tsx index 409f69c3..2f567136 100644 --- a/src/components/common/PlatformIconButton.tsx +++ b/src/components/common/PlatformIconButton.tsx @@ -10,9 +10,14 @@ type PlatformIconButtonBaseProps = { label: string; icon: ReactNode; children?: ReactNode; - variant?: 'platformIcon' | 'surfaceFloating' | 'darkMini'; + variant?: PlatformIconButtonVariant; }; +export type PlatformIconButtonVariant = + | 'platformIcon' + | 'surfaceFloating' + | 'darkMini'; + type PlatformIconButtonButtonProps = Omit< ButtonHTMLAttributes, 'aria-label' | 'children' diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx index e6860b09..ffe7d1bc 100644 --- a/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx @@ -30,6 +30,23 @@ test('editor icon button delegates accessible icon chrome to the platform primit expect(button.getAttribute('aria-expanded')).toBe('true'); }); +test('editor icon button forwards shared icon button variants', () => { + render( + , + ); + + const button = screen.getByRole('button', { name: '关闭生成图片' }); + + expect(button.className).toContain('bg-white/94'); + expect(button.className).toContain('image-canvas-editor__generation-close'); +}); + test('sidebar media item delegates thumbnail chrome to the platform media frame', () => { const onPrimaryClick = vi.fn(); render( diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx index 77fe6644..86a7edb6 100644 --- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx +++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx @@ -5,7 +5,10 @@ import type { ReactNode, } from 'react'; -import { PlatformIconButton } from '../common/PlatformIconButton'; +import { + PlatformIconButton, + type PlatformIconButtonVariant, +} from '../common/PlatformIconButton'; import { PlatformMediaFrame } from '../common/PlatformMediaFrame'; type IconComponent = ComponentType<{ className?: string }>; @@ -19,6 +22,7 @@ export type EditorIconButtonProps = { disabled?: boolean; pressed?: boolean; expanded?: boolean; + variant?: PlatformIconButtonVariant; onClick?: () => void; }; @@ -31,10 +35,12 @@ export function EditorIconButton({ disabled, pressed, expanded, + variant, onClick, }: EditorIconButtonProps) { return ( { setGenerateDialog(null); diff --git a/src/index.css b/src/index.css index e9ca6cd0..ff8cd9e0 100644 --- a/src/index.css +++ b/src/index.css @@ -4136,13 +4136,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { top: 0.55rem; width: 2rem; height: 2rem; - border-radius: 999px; - color: #94a3b8; -} - -.image-canvas-editor__generation-close:hover { - background: #f1f5f9; - color: #334155; } .image-canvas-editor__generation-composer .image-canvas-editor__generate-status {