复用编辑器缩放浮层菜单

扩展 PlatformFloatingMenu 支持标签和四向定位编辑器缩放菜单复用平台浮层菜单原语更新 TRACKING 记录组件统一进展
2026-06-14 01:12:26 +08:00
parent 304d6806f0
commit f0cb7ac685
5 changed files with 54 additions and 43 deletions
--- a/TRACKING.md
+++ b/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`。
--- a/src/components/common/PlatformFloatingMenu.test.tsx
+++ b/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: '重命名' }));

--- a/src/components/common/PlatformFloatingMenu.tsx
+++ b/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>
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/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>
--- a/src/index.css
+++ b/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 {
-  position: absolute;
-  top: calc(100% + 0.45rem);
-  right: 0;
-  display: grid;
+.image-canvas-editor__zoom-menu-item {
  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%;