复用编辑器缩放浮层菜单

扩展 PlatformFloatingMenu 支持标签和四向定位

编辑器缩放菜单复用平台浮层菜单原语

更新 TRACKING 记录组件统一进展

TRACKING.md

@@ -76,3 +76,4 @@
 - 2026-06-13 项目页修正：新增 `/project` 作为图片画布工程列表入口；从“我的”页进入项目页，项目卡片进入 `/editor/canvas?projectid=<projectId>`，并补齐项目列表、重命名、删除和批量删除 API。`GET /api/editor/projects` 在重启后的 api-server 上返回未登录 401，不再是旧进程的 405；`/project` 前端路由 smoke 可渲染项目页白底布局。
 - 2026-06-14 组件复用修正：项目页重命名弹窗改为复用 `UnifiedModal`、`PlatformTextField` 和 `PlatformActionButton`，删除项目页局部 modal / input 样式，避免同类弹窗和表单 chrome 重复实现。
 - 2026-06-14 组件复用修正：新增 `PlatformFloatingMenu` / `PlatformFloatingMenuItem`，项目卡片右下角更多菜单改为复用平台浮层菜单原语；验证命令：`npm run test -- src/components/common/PlatformFloatingMenu.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+- 2026-06-14 组件复用修正：`PlatformFloatingMenu` 增加菜单标签和四向定位，编辑器顶部缩放菜单改为复用同一浮层菜单原语；验证命令：`npm run test -- src/components/common/PlatformFloatingMenu.test.tsx src/components/project/ProjectGalleryView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。

src/components/common/PlatformFloatingMenu.test.tsx

@@ -15,14 +15,14 @@ describe('PlatformFloatingMenu', () => {
     const user = userEvent.setup();
 
     render(
-      <PlatformFloatingMenu>
+      <PlatformFloatingMenu label="项目菜单" placement="bottom-end">
         <PlatformFloatingMenuItem onClick={onRename}>
           重命名
         </PlatformFloatingMenuItem>
       </PlatformFloatingMenu>,
     );
 
-    expect(screen.getByRole('menu')).toBeTruthy();
+    expect(screen.getByRole('menu', { name: '项目菜单' })).toBeTruthy();
 
     await user.click(screen.getByRole('menuitem', { name: '重命名' }));
 

src/components/common/PlatformFloatingMenu.tsx

@@ -3,6 +3,8 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
 type PlatformFloatingMenuProps = {
   children: ReactNode;
   className?: string;
+  label?: string;
+  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 };
 
 type PlatformFloatingMenuItemProps = Omit<
@@ -20,11 +22,20 @@ type PlatformFloatingMenuItemProps = Omit<
 export function PlatformFloatingMenu({
   children,
   className,
+  label,
+  placement = 'top-end',
 }: PlatformFloatingMenuProps) {
   return (
     <div
-      className={['platform-floating-menu', className].filter(Boolean).join(' ')}
+      className={[
+        'platform-floating-menu',
+        `platform-floating-menu--${placement}`,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
       role="menu"
+      aria-label={label}
     >
       {children}
     </div>

src/components/image-editor/ImageCanvasEditorView.tsx

@@ -51,6 +51,10 @@ import {
   EditorIconButton,
   SidebarMediaItem,
 } from './ImageCanvasEditorPrimitives';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 
 type EditorAsset = {
   id: string;
@@ -1671,55 +1675,47 @@ export function ImageCanvasEditorView() {
               <span>{formatPercent(viewport.scale)}</span>
             </button>
             {isZoomMenuOpen ? (
-              <div
+              <PlatformFloatingMenu label="缩放菜单" placement="bottom-end">
-                className="image-canvas-editor__zoom-menu"
+                <PlatformFloatingMenuItem
-                role="menu"
+                  className="image-canvas-editor__zoom-menu-item"
-                aria-label="缩放菜单"
-              >
-                <button
-                  type="button"
-                  role="menuitem"
                   onClick={() => {
                     updateScaleFromCenter(viewport.scale * 1.16);
                     setIsZoomMenuOpen(false);
                   }}
                 >
                   放大
-                </button>
+                </PlatformFloatingMenuItem>
-                <button
+                <PlatformFloatingMenuItem
-                  type="button"
+                  className="image-canvas-editor__zoom-menu-item"
-                  role="menuitem"
                   onClick={() => {
                     updateScaleFromCenter(viewport.scale * 0.86);
                     setIsZoomMenuOpen(false);
                   }}
                 >
                   缩小
-                </button>
+                </PlatformFloatingMenuItem>
-                <button
+                <PlatformFloatingMenuItem
-                  type="button"
+                  className="image-canvas-editor__zoom-menu-item"
-                  role="menuitem"
                   onClick={() => {
                     fitLayers();
                     setIsZoomMenuOpen(false);
                   }}
                 >
                   显示画布所有元素
-                </button>
+                </PlatformFloatingMenuItem>
                 {[0.5, 1, 2].map((scale) => (
-                  <button
+                  <PlatformFloatingMenuItem
                     key={scale}
-                    type="button"
+                    className="image-canvas-editor__zoom-menu-item"
-                    role="menuitem"
                     onClick={() => {
                       updateScaleFromCenter(scale);
                       setIsZoomMenuOpen(false);
                     }}
                   >
                     缩放至{Math.round(scale * 100)}%
-                  </button>
+                  </PlatformFloatingMenuItem>
                 ))}
-              </div>
+              </PlatformFloatingMenu>
             ) : null}
           </div>
         </div>

src/index.css

@@ -3128,8 +3128,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .platform-floating-menu {
   position: absolute;
-  right: 0;
-  bottom: 2.4rem;
   display: grid;
   min-width: 7rem;
   overflow: hidden;
@@ -3139,6 +3137,26 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
 }
 
+.platform-floating-menu--top-end {
+  right: 0;
+  bottom: 2.4rem;
+}
+
+.platform-floating-menu--top-start {
+  bottom: 2.4rem;
+  left: 0;
+}
+
+.platform-floating-menu--bottom-end {
+  top: calc(100% + 0.45rem);
+  right: 0;
+}
+
+.platform-floating-menu--bottom-start {
+  top: calc(100% + 0.45rem);
+  left: 0;
+}
+
 .platform-floating-menu__item {
   display: flex;
   align-items: center;
@@ -3328,7 +3346,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__icon-button,
 .image-canvas-editor__zoom-trigger,
-.image-canvas-editor__zoom-menu button,
 .image-canvas-editor__floating-toolbar button,
 .image-canvas-editor__bottom-toolbar button,
 .image-canvas-editor__metadata-header button,
@@ -3348,7 +3365,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__icon-button:hover,
 .image-canvas-editor__zoom-trigger:hover,
-.image-canvas-editor__zoom-menu button:hover,
 .image-canvas-editor__floating-toolbar button:hover,
 .image-canvas-editor__bottom-toolbar button:hover,
 .image-canvas-editor__metadata-header button:hover,
@@ -3677,21 +3693,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   font-weight: 850;
 }
 
-.image-canvas-editor__zoom-menu {
+.image-canvas-editor__zoom-menu-item {
-  position: absolute;
-  top: calc(100% + 0.45rem);
-  right: 0;
-  display: grid;
   min-width: 12rem;
-  gap: 0.2rem;
-  border: 1px solid #d9dee8;
-  border-radius: 0.5rem;
-  background: #ffffff;
-  padding: 0.35rem;
-  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
-}
-
-.image-canvas-editor__zoom-menu button {
   justify-content: flex-start;
   min-height: 2rem;
   width: 100%;