复用编辑器缩放浮层菜单

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

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

更新 TRACKING 记录组件统一进展

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
-                className="image-canvas-editor__zoom-menu"
-                role="menu"
-                aria-label="缩放菜单"
-              >
-                <button
-                  type="button"
-                  role="menuitem"
+              <PlatformFloatingMenu label="缩放菜单" placement="bottom-end">
+                <PlatformFloatingMenuItem
+                  className="image-canvas-editor__zoom-menu-item"
                   onClick={() => {
                     updateScaleFromCenter(viewport.scale * 1.16);
                     setIsZoomMenuOpen(false);
                   }}
                 >
                   放大
-                </button>
-                <button
-                  type="button"
-                  role="menuitem"
+                </PlatformFloatingMenuItem>
+                <PlatformFloatingMenuItem
+                  className="image-canvas-editor__zoom-menu-item"
                   onClick={() => {
                     updateScaleFromCenter(viewport.scale * 0.86);
                     setIsZoomMenuOpen(false);
                   }}
                 >
                   缩小
-                </button>
-                <button
-                  type="button"
-                  role="menuitem"
+                </PlatformFloatingMenuItem>
+                <PlatformFloatingMenuItem
+                  className="image-canvas-editor__zoom-menu-item"
                   onClick={() => {
                     fitLayers();
                     setIsZoomMenuOpen(false);
                   }}
                 >
                   显示画布所有元素
-                </button>
+                </PlatformFloatingMenuItem>
                 {[0.5, 1, 2].map((scale) => (
-                  <button
+                  <PlatformFloatingMenuItem
                     key={scale}
-                    type="button"
-                    role="menuitem"
+                    className="image-canvas-editor__zoom-menu-item"
                     onClick={() => {
                       updateScaleFromCenter(scale);
                       setIsZoomMenuOpen(false);
                     }}
                   >
                     缩放至{Math.round(scale * 100)}%
-                  </button>
+                  </PlatformFloatingMenuItem>
                 ))}
-              </div>
+              </PlatformFloatingMenu>
             ) : null}
           </div>
         </div>