From 0acbcbbaa4f007c940654cbdbfc881872bae0dd5 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Sun, 14 Jun 2026 15:53:49 +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=E8=83=8C=E6=99=AF=E8=89=B2=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

编辑器左下面板 dock 的画布背景色入口改为复用 PlatformIconButton。

背景色入口继续用色块作为 icon 展示当前画布底色，保持原菜单交互不变。

补充编辑器测试断言共享图标按钮原语，并更新 TRACKING。
---
 TRACKING.md                                    |  1 +
 .../ImageCanvasEditorView.test.tsx             |  4 +++-
 .../image-editor/ImageCanvasEditorView.tsx     | 18 +++++++++---------
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index 28701d3e..7249eff6 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -103,3 +103,4 @@
 - 2026-06-14 组件复用修正：新增 `PlatformInlineOptionButton`，编辑器生成输入框里的比例和模型选择 pill 改为复用平台内联选项按钮原语，删除两个局部按钮重复维护基础 inline chrome 的做法；验证命令：`npm run test -- src/components/common/PlatformInlineOptionButton.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`。
 - 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`。
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index bd4973df..049937fa 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -628,7 +628,9 @@ describe('ImageCanvasEditorView', () => {
     const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
 
     expect(screen.getByRole('button', { name: '画布小地图' })).toBeTruthy();
-    expect(within(panelToolbar).getByRole('button', { name: '画布背景色' })).toBeTruthy();
+    expect(
+      within(panelToolbar).getByRole('button', { name: '画布背景色' }).className,
+    ).toContain('platform-icon-button');
     expect(within(panelToolbar).getByRole('button', { name: '切换小地图' })).toBeTruthy();
 
     fireEvent.click(within(panelToolbar).getByRole('button', { name: '画布背景色' }));
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 9b49f730..d60b8d3e 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -2657,18 +2657,18 @@ export function ImageCanvasEditorView() {
             onPointerDown={(event) => event.stopPropagation()}
           >
             <div className="image-canvas-editor__background-control">
-              <button
-                type="button"
-                aria-label="画布背景色"
+              <PlatformIconButton
+                label="画布背景色"
                 title="画布背景色"
                 aria-expanded={isBackgroundMenuOpen}
                 onClick={() => setIsBackgroundMenuOpen((open) => !open)}
-              >
-                <span
-                  className="image-canvas-editor__background-swatch-current"
-                  style={{ backgroundColor: canvasBackgroundColor }}
-                />
-              </button>
+                icon={
+                  <span
+                    className="image-canvas-editor__background-swatch-current"
+                    style={{ backgroundColor: canvasBackgroundColor }}
+                  />
+                }
+              />
               {isBackgroundMenuOpen ? (
                 <PlatformFloatingMenu
                   className="image-canvas-editor__background-menu"