From 1598da861acd5d6bb90ae1b8f69871f33a0dc46e Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Sun, 26 Jul 2026 16:17:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(voice-materials):=20=E6=B7=B1=E5=8C=96?=
 =?UTF-8?q?=E6=8B=86=E5=88=86=20UI=20=E7=BB=84=E4=BB=B6=EF=BC=88603?=
 =?UTF-8?q?=E2=86=92338=E8=A1=8C,=20-44%=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 4: 继续拆 5 个 UI 组件
- Toolbar — 搜索 + 性别筛选 + 视图切换
- TagFilterBar — 标签筛选药丸条
- BatchBar — 批量操作栏（全选/打标签/删除）
- EmptyState — 加载/空状态
- TtsModal — AI 配音 TTS 合成弹窗

更新 smoke test 新增模块 import
---
 .../voice-materials/VoiceMaterialLibrary.tsx  | 388 +++---------------
 .../voice-materials/components/BatchBar.tsx   |  94 +++++
 .../voice-materials/components/EmptyState.tsx |  52 +++
 .../components/TagFilterBar.tsx               |  45 ++
 .../voice-materials/components/Toolbar.tsx    |  76 ++++
 .../voice-materials/components/TtsModal.tsx   | 171 ++++++++
 .../test/pages/voice-materials/smoke.test.tsx |   5 +
 7 files changed, 502 insertions(+), 329 deletions(-)
 mode change 100755 => 100644 apps/web/src/pages/voice-materials/VoiceMaterialLibrary.tsx
 create mode 100644 apps/web/src/pages/voice-materials/components/BatchBar.tsx
 create mode 100644 apps/web/src/pages/voice-materials/components/EmptyState.tsx
 create mode 100644 apps/web/src/pages/voice-materials/components/TagFilterBar.tsx
 create mode 100644 apps/web/src/pages/voice-materials/components/Toolbar.tsx
 create mode 100644 apps/web/src/pages/voice-materials/components/TtsModal.tsx

diff --git a/apps/web/src/pages/voice-materials/VoiceMaterialLibrary.tsx b/apps/web/src/pages/voice-materials/VoiceMaterialLibrary.tsx
old mode 100755
new mode 100644
index 8d481899f..2e0416579
--- a/apps/web/src/pages/voice-materials/VoiceMaterialLibrary.tsx
+++ b/apps/web/src/pages/voice-materials/VoiceMaterialLibrary.tsx
@@ -9,21 +9,8 @@
  * - 删除素材
  */
 import React from "react"
-import {
-  AudioOutlined,
-  SearchOutlined,
-  PlusOutlined,
-  DeleteOutlined,
-  UploadOutlined,
-  UnorderedListOutlined,
-  AppstoreOutlined,
-  CheckOutlined,
-  TagsOutlined,
-  RobotOutlined,
-  LoadingOutlined,
-} from "@ant-design/icons"
-import { Button, Input, Select, Modal } from "@/components/ui"
-import { Popover, Popconfirm } from "antd"
+import { AudioOutlined, PlusOutlined, RobotOutlined } from "@ant-design/icons"
+import { Button, Modal } from "@/components/ui"
 import PageHead from "@/components/layout/PageHead"
 import { useVoiceMaterials } from "./hooks/useVoiceMaterials"
 import { useAudioPlayer } from "./hooks/useAudioPlayer"
@@ -32,6 +19,11 @@ import { useTtsSynthesize } from "./hooks/useTtsSynthesize"
 import MaterialForm from "./components/MaterialForm"
 import VoiceMaterialCard from "./components/VoiceMaterialCard"
 import VoiceMaterialRow from "./components/VoiceMaterialRow"
+import Toolbar from "./components/Toolbar"
+import TagFilterBar from "./components/TagFilterBar"
+import BatchBar from "./components/BatchBar"
+import EmptyState from "./components/EmptyState"
+import TtsModal from "./components/TtsModal"
 import "./voice-materials.css"
 
 /* ============================================================
@@ -137,7 +129,7 @@ const VoiceMaterialLibrary: React.FC = () => {
     })
   }
 
-  /* ── 渲染 ─────────────────────────────────────────────── */
+  const hasFilter = !!searchText || filterGender !== "all" || filterTagId !== "all"
 
   const pageActions = (
     <div className="vmat-page-actions">
@@ -164,155 +156,47 @@ const VoiceMaterialLibrary: React.FC = () => {
       />
 
       {/* 工具栏：搜索 + 筛选 + 视图切换 */}
-      <div className="vmat-toolbar">
-        <div className="vmat-toolbar-left">
-          <Input
-            placeholder="搜索配音素材..."
-            prefix={<SearchOutlined />}
-            value={searchText}
-            onChange={(e) => setSearchText(e.target.value)}
-            allowClear
-            style={{ width: 240 }}
-          />
-          <Select
-            value={filterGender}
-            onChange={setFilterGender}
-            style={{ width: 120 }}
-            options={[
-              { value: "all", label: "全部性别" },
-              { value: "male", label: "男声" },
-              { value: "female", label: "女声" },
-              { value: "child", label: "童声" },
-              { value: "neutral", label: "中性" },
-            ]}
-          />
-        </div>
-        <div className="vmat-toolbar-right">
-          <span className="vmat-result-count">共 {filtered.length} 个素材</span>
-          <div className="vmat-view-toggle">
-            <button
-              type="button"
-              className={`vmat-view-btn${viewMode === "card" ? " active" : ""}`}
-              onClick={() => setViewMode("card")}
-              title="卡片视图"
-            >
-              <AppstoreOutlined />
-            </button>
-            <button
-              type="button"
-              className={`vmat-view-btn${viewMode === "list" ? " active" : ""}`}
-              onClick={() => setViewMode("list")}
-              title="列表视图"
-            >
-              <UnorderedListOutlined />
-            </button>
-          </div>
-        </div>
-      </div>
+      <Toolbar
+        searchText={searchText}
+        filterGender={filterGender}
+        viewMode={viewMode}
+        resultCount={filtered.length}
+        onSearchChange={setSearchText}
+        onGenderChange={setFilterGender}
+        onViewModeChange={setViewMode}
+      />
 
-      {/* ── 标签筛选药丸条 ─────────────────────────────────── */}
-      {tags.length > 0 && (
-        <div className="vmat-tag-filter-bar">
-          <button
-            type="button"
-            className={`vmat-filter-pill${filterTagId === "all" ? " active" : ""}`}
-            onClick={() => setFilterTagId("all")}
-            tabIndex={0}
-          >
-            全部
-          </button>
-          {tags.map((tag) => (
-            <button
-              key={tag.id}
-              type="button"
-              className={`vmat-filter-pill${filterTagId === tag.id ? " active" : ""}`}
-              onClick={() => setFilterTagId(tag.id)}
-              tabIndex={0}
-            >
-              {tag.name}
-              <span className="vmat-filter-pill-count">{tagCountMap[tag.id] || 0}</span>
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* 加载中 */}
-      {isLoading && (
-        <div className="vmat-empty">
-          <div className="vmat-empty-icon">
-            <AudioOutlined />
-          </div>
-          <h3>加载中...</h3>
-        </div>
-      )}
+      {/* 标签筛选药丸条 */}
+      <TagFilterBar
+        tags={tags}
+        filterTagId={filterTagId}
+        tagCountMap={tagCountMap}
+        onTagSelect={setFilterTagId}
+      />
 
       {/* 批量操作栏 */}
       {batchMode && (
-        <div className="vmat-batch-bar">
-          <div className="vmat-batch-bar-left">
-            <div
-              className={`vmat-checkbox${allSelected ? " checked" : ""}`}
-              onClick={handleSelectAll}
-            >
-              {allSelected && <CheckOutlined />}
-            </div>
-            <span className="vmat-select-all" onClick={handleSelectAll}>
-              {allSelected ? "取消全选" : "全选"}
-            </span>
-            <span className="vmat-batch-count">已选择 {selectedIds.size} 项</span>
-          </div>
-          <div className="vmat-batch-bar-right">
-            <Popover
-              content={
-                <div className="vmat-tag-popover">
-                  <div className="vmat-tag-pop-input-row">
-                    <Input
-                      placeholder="输入自定义标签后回车"
-                      value={batchCustomTag}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                        setBatchCustomTag(e.target.value)
-                      }
-                      onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                        if (e.key === "Enter" && batchCustomTag.trim()) {
-                          handleBatchCustomTag(batchCustomTag.trim())
-                          setBatchCustomTag("")
-                        }
-                      }}
-                    />
-                  </div>
-                  {tags.map((tag) => (
-                    <button
-                      key={tag.id}
-                      type="button"
-                      className="vmat-tag-pop-btn"
-                      onClick={() => handleBatchTag(tag.id)}
-                    >
-                      {tag.name}
-                    </button>
-                  ))}
-                </div>
-              }
-              title="批量打标签"
-              trigger="click"
-            >
-              <Button buttonType="ghost" buttonSize="sm" icon={<TagsOutlined />}>
-                批量打标签
-              </Button>
-            </Popover>
-            <Popconfirm
-              title={`确定删除选中的 ${selectedIds.size} 个素材？`}
-              onConfirm={handleBatchDelete}
-              okText="删除"
-              cancelText="取消"
-            >
-              <Button buttonType="danger" buttonSize="sm" icon={<DeleteOutlined />}>
-                批量删除
-              </Button>
-            </Popconfirm>
-          </div>
-        </div>
+        <BatchBar
+          selectedCount={selectedIds.size}
+          allSelected={allSelected}
+          batchCustomTag={batchCustomTag}
+          tags={tags}
+          onSelectAll={handleSelectAll}
+          onBatchCustomTagChange={setBatchCustomTag}
+          onBatchCustomTagSubmit={handleBatchCustomTag}
+          onBatchTag={handleBatchTag}
+          onBatchDelete={handleBatchDelete}
+        />
       )}
 
+      {/* 加载/空状态 */}
+      <EmptyState
+        isLoading={isLoading}
+        isEmpty={filtered.length === 0}
+        hasFilter={hasFilter}
+        onUploadClick={() => setUploadOpen(true)}
+      />
+
       {/* 内容区 — 卡片视图 */}
       {!isLoading && filtered.length > 0 && viewMode === "card" && (
         <div className="vmat-grid">
@@ -374,31 +258,6 @@ const VoiceMaterialLibrary: React.FC = () => {
         </div>
       )}
 
-      {/* 空状态 */}
-      {!isLoading && filtered.length === 0 && (
-        <div className="vmat-empty">
-          <div className="vmat-empty-icon">
-            <AudioOutlined />
-          </div>
-          <h3>暂无配音素材</h3>
-          <p>
-            {searchText || filterGender !== "all" || filterTagId !== "all"
-              ? "未找到匹配的素材，试试调整筛选条件"
-              : "上传音频文件，开始管理配音素材"}
-          </p>
-          {!searchText && filterGender === "all" && filterTagId === "all" && (
-            <Button
-              buttonType="primary"
-              buttonSize="md"
-              icon={<UploadOutlined />}
-              onClick={() => setUploadOpen(true)}
-            >
-              上传配音
-            </Button>
-          )}
-        </div>
-      )}
-
       {/* 上传弹窗 */}
       <Modal
         title="上传配音素材"
@@ -450,151 +309,22 @@ const VoiceMaterialLibrary: React.FC = () => {
         width={560}
         destroyOnClose
       >
-        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-          {/* 文本输入 */}
-          <div>
-            <label
-              style={{
-                fontSize: 13,
-                fontWeight: 500,
-                marginBottom: 6,
-                display: "block",
-              }}
-            >
-              输入文本
-            </label>
-            <textarea
-              rows={4}
-              placeholder="请输入需要转换为语音的文本内容…"
-              value={ttsText}
-              onChange={(e) => setTtsText(e.target.value)}
-              maxLength={2000}
-              style={{
-                width: "100%",
-                padding: "8px 12px",
-                border: "1px solid var(--border-color, #d9d9d9)",
-                borderRadius: 6,
-                fontSize: 13,
-                resize: "vertical",
-                fontFamily: "inherit",
-              }}
-            />
-            <div
-              style={{
-                fontSize: 11,
-                color: "var(--text-tertiary, #999)",
-                marginTop: 4,
-                textAlign: "right",
-              }}
-            >
-              {ttsText.length}/2000
-            </div>
-          </div>
-
-          {/* 音色选择 */}
-          <div>
-            <label
-              style={{
-                fontSize: 13,
-                fontWeight: 500,
-                marginBottom: 6,
-                display: "block",
-              }}
-            >
-              选择音色
-            </label>
-            <select
-              value={ttsVoiceId}
-              onChange={(e) => setTtsVoiceId(e.target.value)}
-              style={{
-                width: "100%",
-                height: 36,
-                padding: "0 10px",
-                border: "1px solid var(--border-color, #d9d9d9)",
-                borderRadius: 6,
-                fontSize: 13,
-                background: "var(--bg-primary, #fff)",
-              }}
-            >
-              <option value="">默认音色</option>
-              {presetVoices.map((v) => (
-                <option key={v.voice_id} value={v.voice_id}>
-                  {v.name}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {/* 语速调节 */}
-          <div>
-            <label
-              style={{
-                fontSize: 13,
-                fontWeight: 500,
-                marginBottom: 6,
-                display: "block",
-              }}
-            >
-              语速：{ttsSpeed.toFixed(1)}x
-            </label>
-            <input
-              type="range"
-              min={0.5}
-              max={2.0}
-              step={0.1}
-              value={ttsSpeed}
-              onChange={(e) => setTtsSpeed(parseFloat(e.target.value))}
-              style={{ width: "100%" }}
-            />
-          </div>
-
-          {/* 合成按钮 */}
-          <Button
-            buttonType="primary"
-            buttonSize="md"
-            icon={ttsStatus === "synthesizing" ? <LoadingOutlined /> : <RobotOutlined />}
-            onClick={handleTtsSynthesize}
-            disabled={ttsStatus === "synthesizing" || !ttsText.trim()}
-          >
-            {ttsStatus === "synthesizing" ? "合成中…" : "开始合成"}
-          </Button>
-
-          {/* 错误提示 */}
-          {ttsStatus === "error" && ttsError && (
-            <div
-              style={{
-                padding: "8px 12px",
-                background: "#fff2f0",
-                borderRadius: 6,
-                color: "#ff4d4f",
-                fontSize: 13,
-              }}
-            >
-              {ttsError}
-            </div>
-          )}
-
-          {/* 合成结果 */}
-          {ttsStatus === "done" && ttsAudioUrl && (
-            <div
-              style={{
-                padding: 12,
-                background: "var(--bg-surface, #f5f5f5)",
-                borderRadius: 8,
-              }}
-            >
-              <audio controls src={ttsAudioUrl} style={{ width: "100%", marginBottom: 12 }} />
-              <Button
-                buttonType="primary"
-                buttonSize="sm"
-                icon={<PlusOutlined />}
-                onClick={handleTtsSave}
-              >
-                保存到配音库
-              </Button>
-            </div>
-          )}
-        </div>
+        <TtsModal
+          open={ttsOpen}
+          text={ttsText}
+          voiceId={ttsVoiceId}
+          speed={ttsSpeed}
+          status={ttsStatus}
+          audioUrl={ttsAudioUrl}
+          error={ttsError}
+          presetVoices={presetVoices}
+          onClose={handleTtsClose}
+          onTextChange={setTtsText}
+          onVoiceChange={setTtsVoiceId}
+          onSpeedChange={setTtsSpeed}
+          onSynthesize={handleTtsSynthesize}
+          onSave={handleTtsSave}
+        />
       </Modal>
     </div>
   )
diff --git a/apps/web/src/pages/voice-materials/components/BatchBar.tsx b/apps/web/src/pages/voice-materials/components/BatchBar.tsx
new file mode 100644
index 000000000..d6a251cc6
--- /dev/null
+++ b/apps/web/src/pages/voice-materials/components/BatchBar.tsx
@@ -0,0 +1,94 @@
+import React from "react"
+import { CheckOutlined, TagsOutlined, DeleteOutlined } from "@ant-design/icons"
+import { Button, Input } from "@/components/ui"
+import { Popover, Popconfirm } from "antd"
+import type { TagItem } from "@/api/tags"
+
+interface BatchBarProps {
+  selectedCount: number
+  allSelected: boolean
+  batchCustomTag: string
+  tags: TagItem[]
+  onSelectAll: () => void
+  onBatchCustomTagChange: (value: string) => void
+  onBatchCustomTagSubmit: (tag: string) => void
+  onBatchTag: (tagId: string) => void
+  onBatchDelete: () => void
+}
+
+const BatchBar: React.FC<BatchBarProps> = ({
+  selectedCount,
+  allSelected,
+  batchCustomTag,
+  tags,
+  onSelectAll,
+  onBatchCustomTagChange,
+  onBatchCustomTagSubmit,
+  onBatchTag,
+  onBatchDelete,
+}) => {
+  return (
+    <div className="vmat-batch-bar">
+      <div className="vmat-batch-bar-left">
+        <div className={`vmat-checkbox${allSelected ? " checked" : ""}`} onClick={onSelectAll}>
+          {allSelected && <CheckOutlined />}
+        </div>
+        <span className="vmat-select-all" onClick={onSelectAll}>
+          {allSelected ? "取消全选" : "全选"}
+        </span>
+        <span className="vmat-batch-count">已选择 {selectedCount} 项</span>
+      </div>
+      <div className="vmat-batch-bar-right">
+        <Popover
+          content={
+            <div className="vmat-tag-popover">
+              <div className="vmat-tag-pop-input-row">
+                <Input
+                  placeholder="输入自定义标签后回车"
+                  value={batchCustomTag}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    onBatchCustomTagChange(e.target.value)
+                  }
+                  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                    if (e.key === "Enter" && batchCustomTag.trim()) {
+                      onBatchCustomTagSubmit(batchCustomTag.trim())
+                      onBatchCustomTagChange("")
+                    }
+                  }}
+                />
+              </div>
+              {tags.map((tag) => (
+                <button
+                  key={tag.id}
+                  type="button"
+                  className="vmat-tag-pop-btn"
+                  onClick={() => onBatchTag(tag.id)}
+                >
+                  {tag.name}
+                </button>
+              ))}
+            </div>
+          }
+          title="批量打标签"
+          trigger="click"
+        >
+          <Button buttonType="ghost" buttonSize="sm" icon={<TagsOutlined />}>
+            批量打标签
+          </Button>
+        </Popover>
+        <Popconfirm
+          title={`确定删除选中的 ${selectedCount} 个素材？`}
+          onConfirm={onBatchDelete}
+          okText="删除"
+          cancelText="取消"
+        >
+          <Button buttonType="danger" buttonSize="sm" icon={<DeleteOutlined />}>
+            批量删除
+          </Button>
+        </Popconfirm>
+      </div>
+    </div>
+  )
+}
+
+export default BatchBar
diff --git a/apps/web/src/pages/voice-materials/components/EmptyState.tsx b/apps/web/src/pages/voice-materials/components/EmptyState.tsx
new file mode 100644
index 000000000..fda0a6569
--- /dev/null
+++ b/apps/web/src/pages/voice-materials/components/EmptyState.tsx
@@ -0,0 +1,52 @@
+import React from "react"
+import { AudioOutlined, UploadOutlined } from "@ant-design/icons"
+import { Button } from "@/components/ui"
+
+interface EmptyStateProps {
+  isLoading: boolean
+  isEmpty: boolean
+  hasFilter: boolean
+  onUploadClick: () => void
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+  isLoading,
+  isEmpty,
+  hasFilter,
+  onUploadClick,
+}) => {
+  if (isLoading) {
+    return (
+      <div className="vmat-empty">
+        <div className="vmat-empty-icon">
+          <AudioOutlined />
+        </div>
+        <h3>加载中...</h3>
+      </div>
+    )
+  }
+
+  if (!isEmpty) return null
+
+  return (
+    <div className="vmat-empty">
+      <div className="vmat-empty-icon">
+        <AudioOutlined />
+      </div>
+      <h3>暂无配音素材</h3>
+      <p>{hasFilter ? "未找到匹配的素材，试试调整筛选条件" : "上传音频文件，开始管理配音素材"}</p>
+      {!hasFilter && (
+        <Button
+          buttonType="primary"
+          buttonSize="md"
+          icon={<UploadOutlined />}
+          onClick={onUploadClick}
+        >
+          上传配音
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default EmptyState
diff --git a/apps/web/src/pages/voice-materials/components/TagFilterBar.tsx b/apps/web/src/pages/voice-materials/components/TagFilterBar.tsx
new file mode 100644
index 000000000..dbeb51ab9
--- /dev/null
+++ b/apps/web/src/pages/voice-materials/components/TagFilterBar.tsx
@@ -0,0 +1,45 @@
+import React from "react"
+import type { TagItem } from "@/api/tags"
+
+interface TagFilterBarProps {
+  tags: TagItem[]
+  filterTagId: string
+  tagCountMap: Record<string, number>
+  onTagSelect: (tagId: string) => void
+}
+
+const TagFilterBar: React.FC<TagFilterBarProps> = ({
+  tags,
+  filterTagId,
+  tagCountMap,
+  onTagSelect,
+}) => {
+  if (tags.length === 0) return null
+
+  return (
+    <div className="vmat-tag-filter-bar">
+      <button
+        type="button"
+        className={`vmat-filter-pill${filterTagId === "all" ? " active" : ""}`}
+        onClick={() => onTagSelect("all")}
+        tabIndex={0}
+      >
+        全部
+      </button>
+      {tags.map((tag) => (
+        <button
+          key={tag.id}
+          type="button"
+          className={`vmat-filter-pill${filterTagId === tag.id ? " active" : ""}`}
+          onClick={() => onTagSelect(tag.id)}
+          tabIndex={0}
+        >
+          {tag.name}
+          <span className="vmat-filter-pill-count">{tagCountMap[tag.id] || 0}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default TagFilterBar
diff --git a/apps/web/src/pages/voice-materials/components/Toolbar.tsx b/apps/web/src/pages/voice-materials/components/Toolbar.tsx
new file mode 100644
index 000000000..616468d2e
--- /dev/null
+++ b/apps/web/src/pages/voice-materials/components/Toolbar.tsx
@@ -0,0 +1,76 @@
+import React from "react"
+import { SearchOutlined, AppstoreOutlined, UnorderedListOutlined } from "@ant-design/icons"
+import { Input, Select } from "@/components/ui"
+import type { ViewMode } from "../types"
+
+interface ToolbarProps {
+  searchText: string
+  filterGender: string
+  viewMode: ViewMode
+  resultCount: number
+  onSearchChange: (value: string) => void
+  onGenderChange: (value: string) => void
+  onViewModeChange: (mode: ViewMode) => void
+}
+
+const GENDER_OPTIONS = [
+  { value: "all", label: "全部性别" },
+  { value: "male", label: "男声" },
+  { value: "female", label: "女声" },
+  { value: "child", label: "童声" },
+  { value: "neutral", label: "中性" },
+]
+
+const Toolbar: React.FC<ToolbarProps> = ({
+  searchText,
+  filterGender,
+  viewMode,
+  resultCount,
+  onSearchChange,
+  onGenderChange,
+  onViewModeChange,
+}) => {
+  return (
+    <div className="vmat-toolbar">
+      <div className="vmat-toolbar-left">
+        <Input
+          placeholder="搜索配音素材..."
+          prefix={<SearchOutlined />}
+          value={searchText}
+          onChange={(e) => onSearchChange(e.target.value)}
+          allowClear
+          style={{ width: 240 }}
+        />
+        <Select
+          value={filterGender}
+          onChange={onGenderChange}
+          style={{ width: 120 }}
+          options={GENDER_OPTIONS}
+        />
+      </div>
+      <div className="vmat-toolbar-right">
+        <span className="vmat-result-count">共 {resultCount} 个素材</span>
+        <div className="vmat-view-toggle">
+          <button
+            type="button"
+            className={`vmat-view-btn${viewMode === "card" ? " active" : ""}`}
+            onClick={() => onViewModeChange("card")}
+            title="卡片视图"
+          >
+            <AppstoreOutlined />
+          </button>
+          <button
+            type="button"
+            className={`vmat-view-btn${viewMode === "list" ? " active" : ""}`}
+            onClick={() => onViewModeChange("list")}
+            title="列表视图"
+          >
+            <UnorderedListOutlined />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Toolbar
diff --git a/apps/web/src/pages/voice-materials/components/TtsModal.tsx b/apps/web/src/pages/voice-materials/components/TtsModal.tsx
new file mode 100644
index 000000000..338c33bfb
--- /dev/null
+++ b/apps/web/src/pages/voice-materials/components/TtsModal.tsx
@@ -0,0 +1,171 @@
+import React from "react"
+import { RobotOutlined, LoadingOutlined, PlusOutlined } from "@ant-design/icons"
+import { Button } from "@/components/ui"
+
+export type TtsStatus = "idle" | "synthesizing" | "done" | "error"
+
+export interface TtsPresetVoice {
+  voice_id: string
+  name: string
+}
+
+interface TtsModalProps {
+  open: boolean
+  text: string
+  voiceId: string
+  speed: number
+  status: TtsStatus
+  audioUrl: string
+  error: string
+  presetVoices: TtsPresetVoice[]
+  onClose: () => void
+  onTextChange: (value: string) => void
+  onVoiceChange: (voiceId: string) => void
+  onSpeedChange: (speed: number) => void
+  onSynthesize: () => void
+  onSave: () => void
+}
+
+const TtsModal: React.FC<TtsModalProps> = ({
+  open,
+  text,
+  voiceId,
+  speed,
+  status,
+  audioUrl,
+  error,
+  presetVoices,
+  onClose,
+  onTextChange,
+  onVoiceChange,
+  onSpeedChange,
+  onSynthesize,
+  onSave,
+}) => {
+  if (!open) return null
+
+  const labelStyle: React.CSSProperties = {
+    fontSize: 13,
+    fontWeight: 500,
+    marginBottom: 6,
+    display: "block",
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {/* 文本输入 */}
+      <div>
+        <label style={labelStyle}>输入文本</label>
+        <textarea
+          rows={4}
+          placeholder="请输入需要转换为语音的文本内容…"
+          value={text}
+          onChange={(e) => onTextChange(e.target.value)}
+          maxLength={2000}
+          style={{
+            width: "100%",
+            padding: "8px 12px",
+            border: "1px solid var(--border-color, #d9d9d9)",
+            borderRadius: 6,
+            fontSize: 13,
+            resize: "vertical",
+            fontFamily: "inherit",
+          }}
+        />
+        <div
+          style={{
+            fontSize: 11,
+            color: "var(--text-tertiary, #999)",
+            marginTop: 4,
+            textAlign: "right",
+          }}
+        >
+          {text.length}/2000
+        </div>
+      </div>
+
+      {/* 音色选择 */}
+      <div>
+        <label style={labelStyle}>选择音色</label>
+        <select
+          value={voiceId}
+          onChange={(e) => onVoiceChange(e.target.value)}
+          style={{
+            width: "100%",
+            height: 36,
+            padding: "0 10px",
+            border: "1px solid var(--border-color, #d9d9d9)",
+            borderRadius: 6,
+            fontSize: 13,
+            background: "var(--bg-primary, #fff)",
+          }}
+        >
+          <option value="">默认音色</option>
+          {presetVoices.map((v) => (
+            <option key={v.voice_id} value={v.voice_id}>
+              {v.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* 语速调节 */}
+      <div>
+        <label style={labelStyle}>语速：{speed.toFixed(1)}x</label>
+        <input
+          type="range"
+          min={0.5}
+          max={2.0}
+          step={0.1}
+          value={speed}
+          onChange={(e) => onSpeedChange(parseFloat(e.target.value))}
+          style={{ width: "100%" }}
+        />
+      </div>
+
+      {/* 合成按钮 */}
+      <Button
+        buttonType="primary"
+        buttonSize="md"
+        icon={status === "synthesizing" ? <LoadingOutlined /> : <RobotOutlined />}
+        onClick={onSynthesize}
+        disabled={status === "synthesizing" || !text.trim()}
+      >
+        {status === "synthesizing" ? "合成中…" : "开始合成"}
+      </Button>
+
+      {/* 错误提示 */}
+      {status === "error" && error && (
+        <div
+          style={{
+            padding: "8px 12px",
+            background: "#fff2f0",
+            borderRadius: 6,
+            color: "#ff4d4f",
+            fontSize: 13,
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* 合成结果 */}
+      {status === "done" && audioUrl && (
+        <div
+          style={{
+            padding: 12,
+            background: "var(--bg-surface, #f5f5f5)",
+            borderRadius: 8,
+          }}
+        >
+          <audio controls src={audioUrl} style={{ width: "100%", marginBottom: 12 }} />
+          <Button buttonType="primary" buttonSize="sm" icon={<PlusOutlined />} onClick={onSave}>
+            保存到配音库
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TtsModal
diff --git a/apps/web/src/test/pages/voice-materials/smoke.test.tsx b/apps/web/src/test/pages/voice-materials/smoke.test.tsx
index 8dd1eaf4c..c43a86f65 100644
--- a/apps/web/src/test/pages/voice-materials/smoke.test.tsx
+++ b/apps/web/src/test/pages/voice-materials/smoke.test.tsx
@@ -13,6 +13,11 @@ import "@/pages/voice-materials/components/TagSelector"
 import "@/pages/voice-materials/components/MaterialForm"
 import "@/pages/voice-materials/components/VoiceMaterialCard"
 import "@/pages/voice-materials/components/VoiceMaterialRow"
+import "@/pages/voice-materials/components/Toolbar"
+import "@/pages/voice-materials/components/TagFilterBar"
+import "@/pages/voice-materials/components/BatchBar"
+import "@/pages/voice-materials/components/EmptyState"
+import "@/pages/voice-materials/components/TtsModal"
 
 // 工具函数
 import "@/pages/voice-materials/utils/format"
-- 
2.54.0