diff --git a/TRACKING.md b/TRACKING.md index 9605e14a..e0c337b2 100644 --- a/TRACKING.md +++ b/TRACKING.md @@ -79,3 +79,4 @@ - 2026-06-14 组件复用修正:`PlatformFloatingMenu` 增加菜单标签和四向定位,编辑器顶部缩放菜单改为复用同一浮层菜单原语;验证命令:`npm run test -- src/components/common/PlatformFloatingMenu.test.tsx src/components/project/ProjectGalleryView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。 - 2026-06-14 组件复用修正:编辑器生成图元数据弹窗改为复用 `UnifiedModal`,不再手写元数据弹窗遮罩、dialog role 和关闭按钮;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。 - 2026-06-14 组件复用修正:编辑器“修改图片”弹窗改为复用 `UnifiedModal`,删除编辑器局部 modal backdrop、dialog role、header 和关闭按钮样式;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。 +- 2026-06-14 组件复用修正:新增 `PlatformBatchActionToolbar`,项目页选择模式底部批量操作栏改为复用平台批量工具栏原语;验证命令:`npm run test -- src/components/common/PlatformBatchActionToolbar.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。 diff --git a/src/components/common/PlatformBatchActionToolbar.test.tsx b/src/components/common/PlatformBatchActionToolbar.test.tsx new file mode 100644 index 00000000..d2eb5f20 --- /dev/null +++ b/src/components/common/PlatformBatchActionToolbar.test.tsx @@ -0,0 +1,22 @@ +/* @vitest-environment jsdom */ + +import { render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import { PlatformBatchActionToolbar } from './PlatformBatchActionToolbar'; + +describe('PlatformBatchActionToolbar', () => { + it('renders a labelled toolbar around batch actions', () => { + render( + + + , + ); + + const toolbar = screen.getByRole('toolbar', { name: '素材批量操作' }); + + expect(toolbar).toBeTruthy(); + expect(toolbar.className).toContain('platform-batch-action-toolbar'); + expect(screen.getByRole('button', { name: '删除' })).toBeTruthy(); + }); +}); diff --git a/src/components/common/PlatformBatchActionToolbar.tsx b/src/components/common/PlatformBatchActionToolbar.tsx new file mode 100644 index 00000000..e7c7b6c2 --- /dev/null +++ b/src/components/common/PlatformBatchActionToolbar.tsx @@ -0,0 +1,33 @@ +import type { HTMLAttributes, ReactNode } from 'react'; + +type PlatformBatchActionToolbarProps = Omit< + HTMLAttributes, + 'children' +> & { + children: ReactNode; + label?: string; +}; + +/** + * 平台批量操作浮动工具栏。 + * 只统一容器 chrome 与 toolbar 语义,具体选择逻辑和动作按钮由业务组件传入。 + */ +export function PlatformBatchActionToolbar({ + children, + label = '批量操作', + className, + ...divProps +}: PlatformBatchActionToolbarProps) { + return ( +
+ {children} +
+ ); +} diff --git a/src/components/project/ProjectGalleryView.tsx b/src/components/project/ProjectGalleryView.tsx index f1ef18b2..b4403de2 100644 --- a/src/components/project/ProjectGalleryView.tsx +++ b/src/components/project/ProjectGalleryView.tsx @@ -17,6 +17,7 @@ import { type EditorProjectSnapshot, } from '../../services/image-editor/editorProjectClient'; import { PlatformActionButton } from '../common/PlatformActionButton'; +import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar'; import { PlatformEmptyState } from '../common/PlatformEmptyState'; import { PlatformFloatingMenu, @@ -374,7 +375,7 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) { {isSelectionMode ? ( -
+ 取消 -
+ ) : null} ); diff --git a/src/index.css b/src/index.css index da64cd41..1b82677c 100644 --- a/src/index.css +++ b/src/index.css @@ -3188,7 +3188,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { color: #238a82; } -.project-gallery__batch-toolbar { +.platform-batch-action-toolbar { position: absolute; left: 50%; bottom: 1.1rem;