From f0cb7ac6859a37879b641d97e8a1137754df7dbb Mon Sep 17 00:00:00 2001 From: kdletters Date: Sun, 14 Jun 2026 01:12:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E6=B5=AE=E5=B1=82=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 扩展 PlatformFloatingMenu 支持标签和四向定位 编辑器缩放菜单复用平台浮层菜单原语 更新 TRACKING 记录组件统一进展 --- TRACKING.md | 1 + .../common/PlatformFloatingMenu.test.tsx | 4 +- .../common/PlatformFloatingMenu.tsx | 13 +++++- .../image-editor/ImageCanvasEditorView.tsx | 40 +++++++++---------- src/index.css | 39 +++++++++--------- 5 files changed, 54 insertions(+), 43 deletions(-) diff --git a/TRACKING.md b/TRACKING.md index 7e89772e..0e1c448e 100644 --- a/TRACKING.md +++ b/TRACKING.md @@ -76,3 +76,4 @@ - 2026-06-13 项目页修正：新增 `/project` 作为图片画布工程列表入口；从“我的”页进入项目页，项目卡片进入 `/editor/canvas?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`。 diff --git a/src/components/common/PlatformFloatingMenu.test.tsx b/src/components/common/PlatformFloatingMenu.test.tsx index 37ca5cca..0901fc3c 100644 --- 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( - + 重命名 , ); - expect(screen.getByRole('menu')).toBeTruthy(); + expect(screen.getByRole('menu', { name: '项目菜单' })).toBeTruthy(); await user.click(screen.getByRole('menuitem', { name: '重命名' })); diff --git a/src/components/common/PlatformFloatingMenu.tsx b/src/components/common/PlatformFloatingMenu.tsx index e8e85b80..b4a7f7c4 100644 --- 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 (
{children}
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx index 9468b9d7..7ca6461b 100644 --- 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() { {formatPercent(viewport.scale)} {isZoomMenuOpen ? ( -
- - - + {[0.5, 1, 2].map((scale) => ( - + ))} -
+ ) : null} diff --git a/src/index.css b/src/index.css index 076df58f..4731fd86 100644 --- 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%;