GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

复用编辑器缩放浮层菜单

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

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

更新 TRACKING 记录组件统一进展
This commit is contained in:
kdletters
2026-06-14 01:12:26 +08:00
parent 304d6806f0
commit f0cb7ac685
5 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/PlatformFloatingMenu.test.tsx
View File

@@ -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: '重命名' }));

13
src/components/common/PlatformFloatingMenu.tsx
View File

@@ -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>

40
src/components/image-editor/ImageCanvasEditorView.tsx
View File

@@ -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>

39
src/index.css
View File

@@ -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%;