复用编辑器缩放浮层菜单

扩展 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>