From 3f7b0674c068f4cfa777757db798a197fa60bafe Mon Sep 17 00:00:00 2001 From: kdletters Date: Sun, 14 Jun 2026 14:32:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E5=8F=A3=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit EditorIconButton 改为委托 PlatformIconButton，保留编辑器本地样式入口。 新增编辑器按钮 primitive 测试，覆盖可访问属性和平台图标按钮 chrome。 更新 TRACKING 记录本次组件复用收口。 --- TRACKING.md | 1 + .../ImageCanvasEditorPrimitives.test.tsx | 28 +++++++++++++++++++ .../ImageCanvasEditorPrimitives.tsx | 11 ++++---- 3 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx diff --git a/TRACKING.md b/TRACKING.md index 242988f2..8671e24a 100644 --- a/TRACKING.md +++ b/TRACKING.md @@ -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 组件复用修正：项目卡片预览改为复用 `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 组件复用修正：编辑器 `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`。 diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx new file mode 100644 index 00000000..83901eb0 --- /dev/null +++ b/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx @@ -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( + , + ); + + 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'); +}); diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx index 1ec3feb9..a0b6a622 100644 --- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx +++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx @@ -5,6 +5,8 @@ import type { ReactNode, } from 'react'; +import { PlatformIconButton } from '../common/PlatformIconButton'; + type IconComponent = ComponentType<{ className?: string }>; export type EditorIconButtonProps = { @@ -31,18 +33,17 @@ export function EditorIconButton({ onClick, }: EditorIconButtonProps) { return ( - + icon={} + /> ); }