抽取平台批量操作工具栏

新增 PlatformBatchActionToolbar 和组件测试

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

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

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>
   );