抽取平台批量操作工具栏

新增 PlatformBatchActionToolbar 和组件测试

项目页选择模式底部工具栏复用平台批量工具栏

更新 TRACKING 记录批量操作组件收口

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`。

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(
+      <PlatformBatchActionToolbar label="素材批量操作">
+        <button type="button">删除</button>
+      </PlatformBatchActionToolbar>,
+    );
+
+    const toolbar = screen.getByRole('toolbar', { name: '素材批量操作' });
+
+    expect(toolbar).toBeTruthy();
+    expect(toolbar.className).toContain('platform-batch-action-toolbar');
+    expect(screen.getByRole('button', { name: '删除' })).toBeTruthy();
+  });
+});

src/components/common/PlatformBatchActionToolbar.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type PlatformBatchActionToolbarProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  children: ReactNode;
+  label?: string;
+};
+
+/**
+ * 平台批量操作浮动工具栏。
+ * 只统一容器 chrome 与 toolbar 语义，具体选择逻辑和动作按钮由业务组件传入。
+ */
+export function PlatformBatchActionToolbar({
+  children,
+  label = '批量操作',
+  className,
+  ...divProps
+}: PlatformBatchActionToolbarProps) {
+  return (
+    <div
+      {...divProps}
+      className={['platform-batch-action-toolbar', className]
+        .filter(Boolean)
+        .join(' ')}
+      role="toolbar"
+      aria-label={label}
+    >
+      {children}
+    </div>
+  );
+}

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) {
       </UnifiedModal>
 
       {isSelectionMode ? (
-        <div className="project-gallery__batch-toolbar" role="toolbar" aria-label="批量操作">
+        <PlatformBatchActionToolbar>
           <PlatformActionButton
             tone="secondary"
             size="sm"
@@ -407,7 +408,7 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
           <PlatformActionButton tone="secondary" size="sm" onClick={closeSelectionMode}>
             取消
           </PlatformActionButton>
-        </div>
+        </PlatformBatchActionToolbar>
       ) : null}
     </main>
   );

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;