复用图标按钮收口背景色入口
编辑器左下面板 dock 的画布背景色入口改为复用 PlatformIconButton。 背景色入口继续用色块作为 icon 展示当前画布底色,保持原菜单交互不变。 补充编辑器测试断言共享图标按钮原语,并更新 TRACKING。
This commit is contained in:
@@ -103,3 +103,4 @@
|
||||
- 2026-06-14 组件复用修正:新增 `PlatformInlineOptionButton`,编辑器生成输入框里的比例和模型选择 pill 改为复用平台内联选项按钮原语,删除两个局部按钮重复维护基础 inline chrome 的做法;验证命令:`npm run test -- src/components/common/PlatformInlineOptionButton.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`。
|
||||
- 2026-06-14 组件复用修正:`PlatformEmptyState` 增加 `asChild="button"` 形态,项目页空列表“新建项目”卡片改为复用平台空态原语,避免项目页单独维护可点击空态卡片基础 chrome;验证命令:`npm run test -- src/components/common/PlatformEmptyState.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`。
|
||||
- 2026-06-14 组件复用修正:编辑器顶部缩放百分比触发器改为复用 `PlatformInlineOptionButton`,让缩放菜单入口和生成器比例 / 模型 pill 共用“当前选项触发菜单”的按钮原语;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformInlineOptionButton.test.tsx`、`npm run typecheck`。
|
||||
- 2026-06-14 组件复用修正:编辑器左下面板 dock 的画布背景色入口改为复用 `PlatformIconButton`,用色块作为 icon 承载当前背景色,和素材 / 图层 / 小地图入口保持同一图标按钮原语;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx`、`npm run typecheck`。
|
||||
|
||||
@@ -628,7 +628,9 @@ describe('ImageCanvasEditorView', () => {
|
||||
const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
|
||||
|
||||
expect(screen.getByRole('button', { name: '画布小地图' })).toBeTruthy();
|
||||
expect(within(panelToolbar).getByRole('button', { name: '画布背景色' })).toBeTruthy();
|
||||
expect(
|
||||
within(panelToolbar).getByRole('button', { name: '画布背景色' }).className,
|
||||
).toContain('platform-icon-button');
|
||||
expect(within(panelToolbar).getByRole('button', { name: '切换小地图' })).toBeTruthy();
|
||||
|
||||
fireEvent.click(within(panelToolbar).getByRole('button', { name: '画布背景色' }));
|
||||
|
||||
@@ -2657,18 +2657,18 @@ export function ImageCanvasEditorView() {
|
||||
onPointerDown={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="image-canvas-editor__background-control">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="画布背景色"
|
||||
<PlatformIconButton
|
||||
label="画布背景色"
|
||||
title="画布背景色"
|
||||
aria-expanded={isBackgroundMenuOpen}
|
||||
onClick={() => setIsBackgroundMenuOpen((open) => !open)}
|
||||
>
|
||||
<span
|
||||
className="image-canvas-editor__background-swatch-current"
|
||||
style={{ backgroundColor: canvasBackgroundColor }}
|
||||
/>
|
||||
</button>
|
||||
icon={
|
||||
<span
|
||||
className="image-canvas-editor__background-swatch-current"
|
||||
style={{ backgroundColor: canvasBackgroundColor }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{isBackgroundMenuOpen ? (
|
||||
<PlatformFloatingMenu
|
||||
className="image-canvas-editor__background-menu"
|
||||
|
||||
Reference in New Issue
Block a user