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 {