复用图标按钮收口生成关闭动作

生成跟随框关闭按钮改为复用 PlatformIconButton 的 surfaceFloating 变体，统一浮动图标动作 chrome。

编辑器薄包装 EditorIconButton 透传 variant，避免局部再写一套关闭按钮基础样式。

补充测试与 TRACKING，删除本地关闭按钮重复 CSS。

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`。

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<HTMLButtonElement>,
   'aria-label' | 'children'

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(
+    <EditorIconButton
+      label="关闭生成图片"
+      title="关闭"
+      icon={Check}
+      variant="surfaceFloating"
+      className="image-canvas-editor__generation-close"
+    />,
+  );
+
+  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(

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 (
     <PlatformIconButton
+      variant={variant}
       type={type}
       className={className}
       label={label}

src/components/image-editor/ImageCanvasEditorView.tsx

@@ -2886,6 +2886,7 @@ export function ImageCanvasEditorView() {
                 className="image-canvas-editor__generation-close"
                 label="关闭生成图片"
                 icon={X}
+                variant="surfaceFloating"
                 disabled={generateDialog.status === 'generating'}
                 onClick={() => {
                   setGenerateDialog(null);

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 {