复用编辑器背景色浮层菜单

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

背景色选项改为复用 PlatformFloatingMenuItem

删除背景色菜单局部容器样式并更新 TRACKING

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

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"
+                  label="画布背景色菜单"
-                  aria-label="画布背景色菜单"
+                  placement="top-start"
                 >
                   {CANVAS_BACKGROUND_OPTIONS.map((option) => (
-                    <button
+                    <PlatformFloatingMenuItem
                       key={option.value}
-                      type="button"
+                      className="image-canvas-editor__background-menu-item"
-                      role="menuitem"
                       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

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;
 }