收口编辑器图标按钮组件

EditorIconButton 改为委托 PlatformIconButton,保留编辑器本地样式入口。

新增编辑器按钮 primitive 测试,覆盖可访问属性和平台图标按钮 chrome。

更新 TRACKING 记录本次组件复用收口。
This commit is contained in:
2026-06-14 14:32:39 +08:00
parent a6025365f7
commit 3f7b0674c0
3 changed files with 35 additions and 5 deletions

View File

@@ -95,3 +95,4 @@
- 2026-06-14 组件复用修正:编辑器“修改图片”弹窗提交按钮改为复用 `PlatformActionButton`,删除局部提交按钮颜色、边框和禁用态样式;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformActionButton.test.tsx``npm run typecheck``npm run check:encoding``git diff --check` - 2026-06-14 组件复用修正:编辑器“修改图片”弹窗提交按钮改为复用 `PlatformActionButton`,删除局部提交按钮颜色、边框和禁用态样式;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformActionButton.test.tsx``npm run typecheck``npm run check:encoding``git diff --check`
- 2026-06-14 组件复用修正:项目卡片预览改为复用 `PlatformMediaFrame`,删除项目页局部预览框比例、图片填充和背景样式;验证命令:`npm run test -- src/components/project/ProjectGalleryView.test.tsx src/components/common/PlatformMediaFrame.test.tsx``npm run typecheck``npm run check:encoding``git diff --check` - 2026-06-14 组件复用修正:项目卡片预览改为复用 `PlatformMediaFrame`,删除项目页局部预览框比例、图片填充和背景样式;验证命令:`npm run test -- src/components/project/ProjectGalleryView.test.tsx src/components/common/PlatformMediaFrame.test.tsx``npm run typecheck``npm run check:encoding``git diff --check`
- 2026-06-14 素材库与画布持久化修正:新增 `editor_asset_folder` / `editor_asset` 账号级素材库表、SpacetimeDB procedure、spacetime-client facade 和 api-server `/api/editor/assets*` BFF编辑器接入文件夹新建 / 折叠 / 重命名 / 删除、素材重命名 / 删除、多文件上传、拖拽定向上传、拖入画布生成图层、素材框选批量删除、图层打组、小地图拖拽、普通滚轮纵向滚动与 Ctrl/Cmd 滚轮缩放。验证命令:`npm run spacetime:generate -- --rust-only``npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/services/image-editor/editorProjectClient.test.ts``npm run typecheck``npm run check:spacetime-schema``npm run check:encoding``cargo check -p spacetime-client -p api-server --manifest-path server-rs/Cargo.toml``git diff --check` - 2026-06-14 素材库与画布持久化修正:新增 `editor_asset_folder` / `editor_asset` 账号级素材库表、SpacetimeDB procedure、spacetime-client facade 和 api-server `/api/editor/assets*` BFF编辑器接入文件夹新建 / 折叠 / 重命名 / 删除、素材重命名 / 删除、多文件上传、拖拽定向上传、拖入画布生成图层、素材框选批量删除、图层打组、小地图拖拽、普通滚轮纵向滚动与 Ctrl/Cmd 滚轮缩放。验证命令:`npm run spacetime:generate -- --rust-only``npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/services/image-editor/editorProjectClient.test.ts``npm run typecheck``npm run check:spacetime-schema``npm run check:encoding``cargo check -p spacetime-client -p api-server --manifest-path server-rs/Cargo.toml``git diff --check`
- 2026-06-14 组件复用修正:编辑器 `EditorIconButton` 改为委托 `PlatformIconButton` 的薄包装,保留编辑器局部 class 与调用方式,但不再维护重复的原生图标按钮可访问性和基础 chrome验证命令`npm run test -- src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx``npm run typecheck`

View File

@@ -0,0 +1,28 @@
/* @vitest-environment jsdom */
import { render, screen } from '@testing-library/react';
import { Check } from 'lucide-react';
import { expect, test } from 'vitest';
import { EditorIconButton } from './ImageCanvasEditorPrimitives';
test('editor icon button delegates accessible icon chrome to the platform primitive', () => {
render(
<EditorIconButton
label="素材选择模式"
title="选择"
icon={Check}
className="image-canvas-editor__icon-button"
pressed
expanded
/>,
);
const button = screen.getByRole('button', { name: '素材选择模式' });
expect(button.className).toContain('platform-icon-button');
expect(button.className).toContain('image-canvas-editor__icon-button');
expect(button.getAttribute('title')).toBe('选择');
expect(button.getAttribute('aria-pressed')).toBe('true');
expect(button.getAttribute('aria-expanded')).toBe('true');
});

View File

@@ -5,6 +5,8 @@ import type {
ReactNode, ReactNode,
} from 'react'; } from 'react';
import { PlatformIconButton } from '../common/PlatformIconButton';
type IconComponent = ComponentType<{ className?: string }>; type IconComponent = ComponentType<{ className?: string }>;
export type EditorIconButtonProps = { export type EditorIconButtonProps = {
@@ -31,18 +33,17 @@ export function EditorIconButton({
onClick, onClick,
}: EditorIconButtonProps) { }: EditorIconButtonProps) {
return ( return (
<button <PlatformIconButton
type={type} type={type}
className={className} className={className}
aria-label={label} label={label}
title={title} title={title}
disabled={disabled} disabled={disabled}
aria-pressed={pressed} aria-pressed={pressed}
aria-expanded={expanded} aria-expanded={expanded}
onClick={onClick} onClick={onClick}
> icon={<Icon className="h-4 w-4" />}
<Icon className="h-4 w-4" /> />
</button>
); );
} }