复用图标按钮收口背景色入口
编辑器左下面板 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 组件复用修正:新增 `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 组件复用修正:`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 组件复用修正:编辑器顶部缩放百分比触发器改为复用 `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: '画布面板入口' });
|
const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
|
||||||
|
|
||||||
expect(screen.getByRole('button', { name: '画布小地图' })).toBeTruthy();
|
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();
|
expect(within(panelToolbar).getByRole('button', { name: '切换小地图' })).toBeTruthy();
|
||||||
|
|
||||||
fireEvent.click(within(panelToolbar).getByRole('button', { name: '画布背景色' }));
|
fireEvent.click(within(panelToolbar).getByRole('button', { name: '画布背景色' }));
|
||||||
|
|||||||
@@ -2657,18 +2657,18 @@ export function ImageCanvasEditorView() {
|
|||||||
onPointerDown={(event) => event.stopPropagation()}
|
onPointerDown={(event) => event.stopPropagation()}
|
||||||
>
|
>
|
||||||
<div className="image-canvas-editor__background-control">
|
<div className="image-canvas-editor__background-control">
|
||||||
<button
|
<PlatformIconButton
|
||||||
type="button"
|
label="画布背景色"
|
||||||
aria-label="画布背景色"
|
|
||||||
title="画布背景色"
|
title="画布背景色"
|
||||||
aria-expanded={isBackgroundMenuOpen}
|
aria-expanded={isBackgroundMenuOpen}
|
||||||
onClick={() => setIsBackgroundMenuOpen((open) => !open)}
|
onClick={() => setIsBackgroundMenuOpen((open) => !open)}
|
||||||
>
|
icon={
|
||||||
<span
|
<span
|
||||||
className="image-canvas-editor__background-swatch-current"
|
className="image-canvas-editor__background-swatch-current"
|
||||||
style={{ backgroundColor: canvasBackgroundColor }}
|
style={{ backgroundColor: canvasBackgroundColor }}
|
||||||
/>
|
/>
|
||||||
</button>
|
}
|
||||||
|
/>
|
||||||
{isBackgroundMenuOpen ? (
|
{isBackgroundMenuOpen ? (
|
||||||
<PlatformFloatingMenu
|
<PlatformFloatingMenu
|
||||||
className="image-canvas-editor__background-menu"
|
className="image-canvas-editor__background-menu"
|
||||||
|
|||||||
Reference in New Issue
Block a user