From b39d93214d2830ddd7b92a7d0eccd381c96e97f4 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Sun, 14 Jun 2026 03:10:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E6=B5=AE=E5=B1=82=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

编辑器画布背景色菜单改为复用 PlatformFloatingMenu

背景色选项改为复用 PlatformFloatingMenuItem

删除背景色菜单局部容器样式并更新 TRACKING
---
 TRACKING.md                                       |  1 +
 .../image-editor/ImageCanvasEditorView.tsx        | 15 +++++++--------
 src/index.css                                     | 13 ++++---------
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index 9c389ac1..a6463e7c 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -82,3 +82,4 @@
 - 2026-06-14 组件复用修正：新增 `PlatformBatchActionToolbar`，项目页选择模式底部批量操作栏改为复用平台批量工具栏原语；验证命令：`npm run test -- src/components/common/PlatformBatchActionToolbar.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 2026-06-14 组件复用修正：项目页读取失败提示改为复用 `PlatformStatusMessage`，页面局部错误样式只保留布局间距；验证命令：`npm run test -- src/components/project/ProjectGalleryView.test.tsx src/components/common/PlatformStatusMessage.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 2026-06-14 组件复用修正：编辑器生成 / 修改流程中的生成中与失败提示改为复用 `PlatformStatusMessage`，删除局部状态条颜色和错误变体样式；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformStatusMessage.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+- 2026-06-14 组件复用修正：编辑器画布背景色菜单改为复用 `PlatformFloatingMenu` 和 `PlatformFloatingMenuItem`，删除局部菜单容器定位 / 边框 / 阴影样式；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformFloatingMenu.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 871b9b6f..df211794 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1913,16 +1913,15 @@ export function ImageCanvasEditorView() {
                 />
               </button>
               {isBackgroundMenuOpen ? (
-                <div
+                <PlatformFloatingMenu
                   className="image-canvas-editor__background-menu"
-                  role="menu"
-                  aria-label="画布背景色菜单"
+                  label="画布背景色菜单"
+                  placement="top-start"
                 >
                   {CANVAS_BACKGROUND_OPTIONS.map((option) => (
-                    <button
+                    <PlatformFloatingMenuItem
                       key={option.value}
-                      type="button"
-                      role="menuitem"
+                      className="image-canvas-editor__background-menu-item"
                       aria-label={`切换画布背景色为${option.label}`}
                       aria-pressed={canvasBackgroundColor === option.value}
                       onClick={() => {
@@ -1934,9 +1933,9 @@ export function ImageCanvasEditorView() {
                         className="image-canvas-editor__background-swatch"
                         style={{ backgroundColor: option.value }}
                       />
-                    </button>
+                    </PlatformFloatingMenuItem>
                   ))}
-                </div>
+                </PlatformFloatingMenu>
               ) : null}
             </div>
             <EditorIconButton
diff --git a/src/index.css b/src/index.css
index a11e88ed..eadb622b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3941,25 +3941,20 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__background-menu {
-  position: absolute;
-  bottom: calc(100% + 0.45rem);
-  left: 0;
   display: inline-flex;
   gap: 0.25rem;
-  border: 1px solid #d9dee8;
-  border-radius: 0.5rem;
-  background: #ffffff;
   padding: 0.32rem;
-  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
 }
 
-.image-canvas-editor__background-menu button {
+.image-canvas-editor__background-menu-item {
   width: 1.75rem;
   height: 1.75rem;
   border-radius: 0.4rem;
+  justify-content: center;
+  padding: 0;
 }
 
-.image-canvas-editor__background-menu button[aria-pressed='true'] {
+.image-canvas-editor__background-menu-item[aria-pressed='true'] {
   border-color: #38bdf8;
   background: #e0f2fe;
 }