From 92bae4ce1cbab5a112d92f1cc77c2672373cc178 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Fri, 24 Jul 2026 11:07:13 +0800
Subject: [PATCH 1/2] refactor: GeneratePage Phase 3 - split Step
 sub-components

---
 .../components/Step2MaterialSelect.tsx        | 297 ++-------
 .../components/Step4TitleSettings.tsx         | 270 ++-------
 .../generate/components/Step5VoiceSelect.tsx  | 568 +++---------------
 .../material/ManualMaterialList.tsx           |  84 +++
 .../components/material/MaterialModeTabs.tsx  |  32 +
 .../components/material/SmartMatchCard.tsx    |  60 ++
 .../components/material/SmartMatchInput.tsx   |  80 +++
 .../components/material/SmartMatchResults.tsx | 114 ++++
 .../generate/components/title/AiTitleCard.tsx |  35 ++
 .../components/title/AiTitleGenerator.tsx     | 105 ++++
 .../components/title/TitlePresetsGrid.tsx     |  41 ++
 .../components/title/TitleStylePanel.tsx      | 151 +++++
 .../components/voice/CloneVoiceSection.tsx    | 132 ++++
 .../components/voice/CustomVoicePanel.tsx     |  93 +++
 .../components/voice/PresetVoiceDetail.tsx    |  77 +++
 .../components/voice/SaveVoiceModal.tsx       | 125 ++++
 .../components/voice/VoiceChoiceCard.tsx      |  53 ++
 .../voice/VoiceRecommendSection.tsx           | 100 +++
 .../pages/generate/hooks/useStep2Materials.ts |   2 +-
 .../pages/generate/hooks/useStep5Voice.tsx    |   2 +-
 .../pages/generate/utils/formatDuration.ts    |   9 +
 21 files changed, 1462 insertions(+), 968 deletions(-)
 create mode 100644 apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
 create mode 100644 apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx
 create mode 100644 apps/web/src/pages/generate/components/material/SmartMatchCard.tsx
 create mode 100644 apps/web/src/pages/generate/components/material/SmartMatchInput.tsx
 create mode 100644 apps/web/src/pages/generate/components/material/SmartMatchResults.tsx
 create mode 100644 apps/web/src/pages/generate/components/title/AiTitleCard.tsx
 create mode 100644 apps/web/src/pages/generate/components/title/AiTitleGenerator.tsx
 create mode 100644 apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx
 create mode 100644 apps/web/src/pages/generate/components/title/TitleStylePanel.tsx
 create mode 100644 apps/web/src/pages/generate/components/voice/CloneVoiceSection.tsx
 create mode 100644 apps/web/src/pages/generate/components/voice/CustomVoicePanel.tsx
 create mode 100644 apps/web/src/pages/generate/components/voice/PresetVoiceDetail.tsx
 create mode 100644 apps/web/src/pages/generate/components/voice/SaveVoiceModal.tsx
 create mode 100644 apps/web/src/pages/generate/components/voice/VoiceChoiceCard.tsx
 create mode 100644 apps/web/src/pages/generate/components/voice/VoiceRecommendSection.tsx
 create mode 100644 apps/web/src/pages/generate/utils/formatDuration.ts

diff --git a/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx b/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
index 983351d2a..905c38829 100644
--- a/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
+++ b/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
@@ -2,11 +2,11 @@
  * Step 2 素材选择组件
  */
 import React from "react"
-import { Typography } from "antd"
-import { LoadingOutlined, PlayCircleOutlined, CheckCircleFilled } from "@ant-design/icons"
 import { useStep2Materials } from "../hooks/useStep2Materials"
-
-const { Text } = Typography
+import MaterialModeTabs from "./material/MaterialModeTabs"
+import ManualMaterialList from "./material/ManualMaterialList"
+import SmartMatchInput from "./material/SmartMatchInput"
+import SmartMatchResults from "./material/SmartMatchResults"
 
 interface Step2MaterialSelectProps {
   materialMode: "manual" | "auto"
@@ -18,58 +18,21 @@ interface Step2MaterialSelectProps {
 }
 
 const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
-  const {
-    libraries,
-    selectedLibraryId,
-    setSelectedLibraryId,
-    materials,
-    materialsLoading,
-    materialMode,
-    onMaterialModeChange,
-    selectedMaterials,
-    handleToggleMaterial,
-    smartMatchInput,
-    setSmartMatchInput,
-    smartMatching,
-    smartMatchedResults,
-    hasMatched,
-    smartSelectedIds,
-    handleSmartMatch,
-    handleToggleSmartSelect,
-    handleRefreshMatch,
-    handleSelectAllMatched,
-    handleClearSmartSelect,
-    smartSelectedTotalDuration,
-    formatDuration,
-  } = useStep2Materials(props)
+  const m = useStep2Materials(props)
 
   return (
     <div className="xx-form-section">
       <h3>📦 选择素材</h3>
 
-      {/* ── 模式切换 Tab ── */}
-      <div className="xx-material-mode-tabs">
-        <button
-          className={`xx-material-mode-tab ${materialMode === "manual" ? "active" : ""}`}
-          onClick={() => onMaterialModeChange("manual")}
-          type="button"
-        >
-          手动选择素材
-        </button>
-        <button
-          className={`xx-material-mode-tab ${materialMode === "auto" ? "active" : ""}`}
-          onClick={() => onMaterialModeChange("auto")}
-          type="button"
-        >
-          选择视频库自动匹配
-        </button>
-      </div>
+      <MaterialModeTabs mode={m.materialMode} onModeChange={m.onMaterialModeChange} />
 
-      {/* ── 视频库选择（两种模式共用） ── */}
       <div className="xx-form-field" style={{ marginTop: 12 }}>
         <label>选择视频库</label>
-        <select value={selectedLibraryId} onChange={(e) => setSelectedLibraryId(e.target.value)}>
-          {libraries.map((lib) => (
+        <select
+          value={m.selectedLibraryId}
+          onChange={(e) => m.setSelectedLibraryId(e.target.value)}
+        >
+          {m.libraries.map((lib) => (
             <option key={lib.id} value={lib.id}>
               {lib.name}
             </option>
@@ -77,8 +40,7 @@ const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
         </select>
       </div>
 
-      {/* ── 手动选择模式 ── */}
-      {materialMode === "manual" && (
+      {m.materialMode === "manual" && (
         <>
           <div
             style={{
@@ -88,219 +50,42 @@ const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
               gap: 10,
             }}
           >
-            <span className="xx-pill xx-pill-ok">已选 {selectedMaterials.length} 个素材</span>
+            <span className="xx-pill xx-pill-ok">已选 {m.selectedMaterials.length} 个素材</span>
           </div>
 
-          {/* 素材列表 */}
-          <div style={{ marginTop: 14 }}>
-            {materialsLoading ? (
-              <Text style={{ color: "var(--text-secondary)", padding: "16px 0" }}>加载素材中…</Text>
-            ) : materials.items.length === 0 ? (
-              <Text style={{ color: "var(--text-secondary)", padding: "16px 0" }}>
-                暂无素材，请先在视频库中上传
-              </Text>
-            ) : (
-              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-                {materials.items.map((m) => {
-                  const checked = selectedMaterials.includes(m.id)
-                  return (
-                    <label
-                      key={m.id}
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 10,
-                        padding: "8px 12px",
-                        background: checked ? "var(--primary-soft, #eef2ff)" : "#f8fafc",
-                        borderRadius: 10,
-                        cursor: "pointer",
-                        border: checked
-                          ? "1px solid var(--primary-color, #4f46e5)"
-                          : "1px solid transparent",
-                        transition: "all 0.15s ease",
-                      }}
-                    >
-                      <input
-                        type="checkbox"
-                        checked={checked}
-                        onChange={() => handleToggleMaterial(m.id)}
-                        style={{ accentColor: "var(--primary-color, #4f46e5)" }}
-                      />
-                      <span
-                        style={{
-                          fontSize: 13,
-                          color: "var(--text-primary)",
-                          flex: 1,
-                        }}
-                      >
-                        {m.name}
-                      </span>
-                      <span
-                        style={{
-                          fontSize: 11,
-                          color: "var(--text-tertiary, #94a3b8)",
-                        }}
-                      >
-                        {m.mime_type.split("/")[1].toUpperCase()}
-                      </span>
-                    </label>
-                  )
-                })}
-              </div>
-            )}
-          </div>
+          <ManualMaterialList
+            materials={m.materials}
+            materialsLoading={m.materialsLoading}
+            selectedMaterials={m.selectedMaterials}
+            onToggle={m.handleToggleMaterial}
+          />
         </>
       )}
 
-      {/* ── 自动匹配模式 ── */}
-      {materialMode === "auto" && (
+      {m.materialMode === "auto" && (
         <div className="xx-smart-match-section">
-          {/* 描述输入区 */}
-          <div className="xx-smart-match-input-area">
-            <label className="xx-smart-match-label">🤖 描述你想要的视频内容</label>
-            <textarea
-              className="xx-smart-match-input"
-              placeholder="例如：一个科技感十足的产品宣传视频，画面要有现代办公场景、团队协作、数据分析图表…"
-              value={smartMatchInput}
-              onChange={(e) => setSmartMatchInput(e.target.value)}
-              rows={3}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-                  handleSmartMatch()
-                }
-              }}
-            />
-            <div className="xx-smart-match-input-footer">
-              <span className="xx-smart-match-tip">
-                {materialsLoading
-                  ? "扫描视频库中…"
-                  : `当前视频库共 ${materials.items.length} 个素材可供匹配`}
-              </span>
-              <div style={{ display: "flex", gap: 8 }}>
-                {hasMatched && (
-                  <button
-                    type="button"
-                    className="xx-btn xx-btn-ghost xx-btn-sm"
-                    onClick={handleRefreshMatch}
-                    disabled={smartMatching || materialsLoading}
-                  >
-                    🔄 换一批
-                  </button>
-                )}
-                <button
-                  type="button"
-                  className="xx-btn xx-btn-primary xx-btn-sm"
-                  onClick={handleSmartMatch}
-                  disabled={smartMatching || materialsLoading || !smartMatchInput.trim()}
-                >
-                  {smartMatching ? (
-                    <>
-                      <LoadingOutlined style={{ marginRight: 6 }} />
-                      匹配中…
-                    </>
-                  ) : (
-                    "✨ 智能匹配"
-                  )}
-                </button>
-              </div>
-            </div>
-          </div>
+          <SmartMatchInput
+            inputValue={m.smartMatchInput}
+            onInputChange={m.setSmartMatchInput}
+            matching={m.smartMatching}
+            onMatch={m.handleSmartMatch}
+            hasMatched={m.hasMatched}
+            onRefresh={m.handleRefreshMatch}
+            materialsCount={m.materials.items.length}
+            loading={m.materialsLoading}
+          />
 
-          {/* 推荐结果区 */}
-          {hasMatched && !smartMatching && smartMatchedResults.length > 0 && (
-            <div className="xx-smart-match-results">
-              <div className="xx-smart-match-results-header">
-                <span className="xx-smart-match-results-title">
-                  推荐素材 ({smartMatchedResults.length}个)
-                </span>
-                <div className="xx-smart-match-results-actions">
-                  <button type="button" className="xx-link-btn" onClick={handleSelectAllMatched}>
-                    全选
-                  </button>
-                  <span style={{ color: "var(--border-color)" }}>|</span>
-                  <button type="button" className="xx-link-btn" onClick={handleClearSmartSelect}>
-                    清空
-                  </button>
-                </div>
-              </div>
-              <div className="xx-smart-match-grid">
-                {smartMatchedResults.map((result) => {
-                  const isSelected = smartSelectedIds.includes(result.asset.id)
-                  return (
-                    <div
-                      key={result.asset.id}
-                      className={`xx-smart-match-card ${isSelected ? "selected" : ""}`}
-                      onClick={() => handleToggleSmartSelect(result.asset.id)}
-                    >
-                      {/* 缩略图 */}
-                      <div className="xx-smart-match-thumb">
-                        {result.asset.thumbnail_url ? (
-                          <img src={result.asset.thumbnail_url} alt={result.asset.name} />
-                        ) : (
-                          <div className="xx-smart-match-thumb-placeholder">
-                            <PlayCircleOutlined style={{ fontSize: 32, opacity: 0.5 }} />
-                          </div>
-                        )}
-                        <div className="xx-smart-match-score">{result.matchScore}%</div>
-                        {isSelected && (
-                          <div className="xx-smart-match-check">
-                            <CheckCircleFilled style={{ fontSize: 20, color: "#fff" }} />
-                          </div>
-                        )}
-                        {result.asset.duration && (
-                          <div className="xx-smart-match-duration">
-                            {formatDuration(result.asset.duration)}
-                          </div>
-                        )}
-                      </div>
-                      {/* 信息区 */}
-                      <div className="xx-smart-match-info">
-                        <div className="xx-smart-match-name" title={result.asset.name}>
-                          {result.asset.name}
-                        </div>
-                        <div className="xx-smart-match-reason">🎯 {result.matchReason}</div>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* 匹配中状态 */}
-          {smartMatching && (
-            <div className="xx-smart-match-loading">
-              <LoadingOutlined
-                style={{ fontSize: 32, color: "var(--primary-color)", marginBottom: 12 }}
-              />
-              <div style={{ color: "var(--text-primary)", fontSize: 14 }}>AI 正在分析素材…</div>
-              <div style={{ color: "var(--text-tertiary)", fontSize: 12, marginTop: 4 }}>
-                正在根据描述从视频库中匹配最合适的素材
-              </div>
-            </div>
-          )}
-
-          {/* 未匹配状态提示 */}
-          {!hasMatched && !smartMatching && (
-            <div className="xx-smart-match-empty">
-              <div style={{ fontSize: 36, marginBottom: 8 }}>💡</div>
-              <div style={{ color: "var(--text-secondary)", fontSize: 13 }}>
-                输入视频内容描述，点击「智能匹配」让 AI 帮你选素材
-              </div>
-            </div>
-          )}
-
-          {/* 已选素材汇总 */}
-          {hasMatched && !smartMatching && smartSelectedIds.length > 0 && (
-            <div className="xx-smart-match-summary">
-              <div className="xx-smart-match-summary-header">
-                <span className="xx-pill xx-pill-ok">已选 {smartSelectedIds.length} 个素材</span>
-                <span style={{ color: "var(--text-tertiary)", fontSize: 12 }}>
-                  预计总时长约 {smartSelectedTotalDuration.toFixed(0)} 秒
-                </span>
-              </div>
-            </div>
-          )}
+          <SmartMatchResults
+            results={m.smartMatchedResults}
+            selectedIds={m.smartSelectedIds}
+            matching={m.smartMatching}
+            hasMatched={m.hasMatched}
+            onToggle={m.handleToggleSmartSelect}
+            onSelectAll={m.handleSelectAllMatched}
+            onClear={m.handleClearSmartSelect}
+            formatDuration={m.formatDuration}
+            selectedTotalDuration={m.smartSelectedTotalDuration}
+          />
         </div>
       )}
     </div>
diff --git a/apps/web/src/pages/generate/components/Step4TitleSettings.tsx b/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
index 11125beed..1ceb6fc95 100644
--- a/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
+++ b/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
@@ -3,10 +3,11 @@
  */
 import React from "react"
 import { Select } from "antd"
-import { LoadingOutlined, CheckCircleFilled } from "@ant-design/icons"
 import { POSITION_OPTIONS, FONT_OPTIONS } from "../constants"
 import type { TitleSettings } from "../types"
 import { useStep4Title } from "../hooks/useStep4Title"
+import AiTitleGenerator from "./title/AiTitleGenerator"
+import TitleStylePanel from "./title/TitleStylePanel"
 
 interface Step4TitleSettingsProps {
   titleSettings: TitleSettings
@@ -14,133 +15,40 @@ interface Step4TitleSettingsProps {
 }
 
 const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
-  const {
-    userTitles,
-    titleSettings,
-    aiTitleInput,
-    setAiTitleInput,
-    aiTitleGenerating,
-    aiTitleResults,
-    hasGeneratedTitles,
-    activePreset,
-    titlePresets,
-    handleGenerateAiTitles,
-    handleSelectAiTitle,
-    handleRefreshAiTitles,
-    updateTitle,
-    toggleAiAutoSelect,
-    updatePosition,
-    updateFont,
-    updateSize,
-    toggleBold,
-    toggleItalic,
-    toggleStroke,
-    toggleShadow,
-    applyPreset,
-  } = useStep4Title(props)
+  const t = useStep4Title(props)
 
   return (
     <div className="xx-form-section">
       <h3>📝 选择标题</h3>
 
-      {/* AI 智能生成标题 */}
-      <div className="xx-ai-title-section">
-        <div className="xx-ai-title-header">
-          <span className="xx-ai-title-label">✨ AI 智能生成标题</span>
-        </div>
-        <div className="xx-ai-title-input-row">
-          <input
-            className="xx-ai-title-input"
-            placeholder="输入视频内容描述或关键词，如：职场成长、副业赚钱…"
-            value={aiTitleInput}
-            onChange={(e) => setAiTitleInput(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") handleGenerateAiTitles()
-            }}
-          />
-          <button
-            type="button"
-            className="xx-btn xx-btn-primary"
-            onClick={handleGenerateAiTitles}
-            disabled={aiTitleGenerating || !aiTitleInput.trim()}
-          >
-            {aiTitleGenerating ? (
-              <>
-                <LoadingOutlined style={{ marginRight: 6 }} />
-                生成中
-              </>
-            ) : (
-              "生成标题"
-            )}
-          </button>
-        </div>
-
-        {/* 生成结果 */}
-        {hasGeneratedTitles && !aiTitleGenerating && aiTitleResults.length > 0 && (
-          <div className="xx-ai-title-results">
-            <div className="xx-ai-title-results-header">
-              <span className="xx-ai-title-results-count">
-                为你生成 {aiTitleResults.length} 个标题
-              </span>
-              <button
-                type="button"
-                className="xx-link-btn"
-                onClick={handleRefreshAiTitles}
-                disabled={aiTitleGenerating}
-              >
-                🔄 换一批
-              </button>
-            </div>
-            <div className="xx-ai-title-list">
-              {aiTitleResults.map((item, idx) => {
-                const isSelected = titleSettings.title === item.title
-                return (
-                  <div
-                    key={idx}
-                    className={`xx-ai-title-card ${isSelected ? "selected" : ""} ${item.style}`}
-                    onClick={() => handleSelectAiTitle(item.title)}
-                  >
-                    <div className="xx-ai-title-card-text">{item.title}</div>
-                    <div className="xx-ai-title-card-tag">{item.highlight}</div>
-                    {isSelected && (
-                      <div className="xx-ai-title-card-check">
-                        <CheckCircleFilled style={{ color: "#fff", fontSize: 14 }} />
-                      </div>
-                    )}
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        )}
-
-        {/* 生成中 */}
-        {aiTitleGenerating && (
-          <div className="xx-ai-title-loading">
-            <LoadingOutlined style={{ color: "var(--primary-color)", marginRight: 8 }} />
-            AI 正在为你创作标题…
-          </div>
-        )}
-      </div>
+      <AiTitleGenerator
+        inputValue={t.aiTitleInput}
+        onInputChange={t.setAiTitleInput}
+        generating={t.aiTitleGenerating}
+        onGenerate={t.handleGenerateAiTitles}
+        results={t.aiTitleResults}
+        hasGenerated={t.hasGeneratedTitles}
+        onSelect={t.handleSelectAiTitle}
+        selectedTitle={t.titleSettings.title}
+        onRefresh={t.handleRefreshAiTitles}
+      />
 
       <div className="xx-divider">
         <span>或手动选择</span>
       </div>
 
-      {/* AI 自动选择开关 */}
       <div className="xx-title-ai-toggle">
         <span className="xx-toggle-label">AI 自动选择标题</span>
         <div
-          className={`xx-switch ${titleSettings.aiAutoSelect ? "active" : ""}`}
-          onClick={toggleAiAutoSelect}
+          className={`xx-switch ${t.titleSettings.aiAutoSelect ? "active" : ""}`}
+          onClick={t.toggleAiAutoSelect}
         >
           <div className="xx-switch-knob" />
         </div>
       </div>
 
-      {!titleSettings.aiAutoSelect && (
+      {!t.titleSettings.aiAutoSelect && (
         <>
-          {/* 标题内容选择 */}
           <div className="xx-form-field">
             <label>从标题库选择</label>
             <Select
@@ -148,17 +56,17 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
               allowClear
               showSearch
               style={{ width: "100%" }}
-              value={titleSettings.title || undefined}
-              onChange={(val) => updateTitle(val || "")}
-              options={userTitles.map((t) => ({
-                label: t.content,
-                value: t.content,
+              value={t.titleSettings.title || undefined}
+              onChange={(val) => t.updateTitle(val || "")}
+              options={t.userTitles.map((ut) => ({
+                label: ut.content,
+                value: ut.content,
               }))}
               filterOption={(input, option) =>
                 ((option?.label as string) || "").toLowerCase().includes(input.toLowerCase())
               }
               notFoundContent={
-                userTitles.length === 0 ? (
+                t.userTitles.length === 0 ? (
                   <span style={{ color: "var(--text-tertiary)", fontSize: 13 }}>
                     标题库为空，请前往「标题管理」添加
                   </span>
@@ -170,125 +78,27 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
             <label>或手动输入</label>
             <input
               placeholder="输入自定义标题…"
-              value={titleSettings.title}
-              onChange={(e) => updateTitle(e.target.value)}
+              value={t.titleSettings.title}
+              onChange={(e) => t.updateTitle(e.target.value)}
               maxLength={50}
             />
           </div>
 
-          {/* 标题样式设置区 */}
-          <div className="xx-title-style-section">
-            <h4 className="xx-section-subtitle">标题样式</h4>
-
-            {/* 位置 + 字体 一行 */}
-            <div className="xx-title-style-row">
-              <div className="xx-form-field xx-half-field">
-                <label>位置</label>
-                <select
-                  className="xx-form-select"
-                  value={titleSettings.position}
-                  onChange={(e) => updatePosition(e.target.value)}
-                >
-                  {POSITION_OPTIONS.map((opt) => (
-                    <option key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div className="xx-form-field xx-half-field">
-                <label>字体</label>
-                <select
-                  className="xx-form-select"
-                  value={titleSettings.font}
-                  onChange={(e) => updateFont(e.target.value)}
-                >
-                  {FONT_OPTIONS.map((f) => (
-                    <option key={f} value={f}>
-                      {f}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-
-            {/* 字号滑块 */}
-            <div className="xx-form-field">
-              <div className="xx-field-label-row">
-                <label>字号</label>
-                <span className="xx-field-value">{titleSettings.size}px</span>
-              </div>
-              <input
-                className="xx-slider"
-                type="range"
-                min={12}
-                max={48}
-                value={titleSettings.size}
-                onChange={(e) => updateSize(Number(e.target.value))}
-              />
-            </div>
-
-            {/* 预设样式 */}
-            <div className="xx-form-field">
-              <label>预设样式</label>
-              <div className="xx-title-presets-grid">
-                {titlePresets.map((p) => {
-                  const isActive = activePreset === p.key
-                  return (
-                    <button
-                      key={p.key}
-                      className={`xx-title-preset-card${isActive ? " active" : ""}`}
-                      onClick={() => applyPreset(p.key)}
-                      title={p.label}
-                    >
-                      <span
-                        className="xx-title-preset-preview-text"
-                        style={p.previewStyle as React.CSSProperties}
-                      >
-                        标题
-                      </span>
-                      <span className="xx-title-preset-card-label">{p.label}</span>
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-
-            {/* 样式按钮：粗体/斜体/描边/阴影 */}
-            <div className="xx-form-field">
-              <label>样式</label>
-              <div className="xx-style-btns">
-                <button
-                  className={`xx-style-btn ${titleSettings.bold ? "active" : ""}`}
-                  onClick={toggleBold}
-                  title="粗体"
-                >
-                  <b>B</b>
-                </button>
-                <button
-                  className={`xx-style-btn ${titleSettings.italic ? "active" : ""}`}
-                  onClick={toggleItalic}
-                  title="斜体"
-                >
-                  <i>I</i>
-                </button>
-                <button
-                  className={`xx-style-btn ${titleSettings.stroke ? "active" : ""}`}
-                  onClick={toggleStroke}
-                  title="描边"
-                >
-                  S
-                </button>
-                <button
-                  className={`xx-style-btn ${titleSettings.shadow ? "active" : ""}`}
-                  onClick={toggleShadow}
-                  title="阴影"
-                >
-                  ☁
-                </button>
-              </div>
-            </div>
-          </div>
+          <TitleStylePanel
+            settings={t.titleSettings}
+            onUpdatePosition={t.updatePosition}
+            onUpdateFont={t.updateFont}
+            onUpdateSize={t.updateSize}
+            onToggleBold={t.toggleBold}
+            onToggleItalic={t.toggleItalic}
+            onToggleStroke={t.toggleStroke}
+            onToggleShadow={t.toggleShadow}
+            onApplyPreset={t.applyPreset}
+            activePreset={t.activePreset}
+            titlePresets={t.titlePresets}
+            POSITION_OPTIONS={POSITION_OPTIONS}
+            FONT_OPTIONS={FONT_OPTIONS}
+          />
         </>
       )}
     </div>
diff --git a/apps/web/src/pages/generate/components/Step5VoiceSelect.tsx b/apps/web/src/pages/generate/components/Step5VoiceSelect.tsx
index d4ff72d58..740dd7546 100644
--- a/apps/web/src/pages/generate/components/Step5VoiceSelect.tsx
+++ b/apps/web/src/pages/generate/components/Step5VoiceSelect.tsx
@@ -2,22 +2,14 @@
  * Step 5 配音选择组件
  */
 import React from "react"
-import { Typography } from "antd"
-import {
-  AudioOutlined,
-  ThunderboltOutlined,
-  CheckCircleFilled,
-  LoadingOutlined,
-  PlayCircleOutlined,
-  PauseCircleOutlined,
-  SaveOutlined,
-  PlusOutlined,
-  CloseOutlined,
-} from "@ant-design/icons"
 import type { VoiceClone } from "@/api/voice-clone"
 import { useStep5Voice } from "../hooks/useStep5Voice"
-
-const { Text } = Typography
+import VoiceRecommendSection from "./voice/VoiceRecommendSection"
+import VoiceChoiceCard from "./voice/VoiceChoiceCard"
+import PresetVoiceDetail from "./voice/PresetVoiceDetail"
+import CustomVoicePanel from "./voice/CustomVoicePanel"
+import SaveVoiceModal from "./voice/SaveVoiceModal"
+import CloneVoiceSection from "./voice/CloneVoiceSection"
 
 interface Step5VoiceSelectProps {
   selectedVoice: string
@@ -35,492 +27,108 @@ interface Step5VoiceSelectProps {
 }
 
 const Step5VoiceSelect: React.FC<Step5VoiceSelectProps> = (props) => {
-  const {
-    presetVoices,
-    presetVoicesLoading,
-    clonedVoices,
-    hasProcessing,
-    voiceMode,
-    selectedVoice,
-    selectedClonedVoice,
-    voiceRecommendLoading,
-    voiceRecommendations,
-    hasVoiceRecommend,
-    handleVoiceRecommend,
-    handleSelectRecommendedVoice,
-    playingVoice,
-    toggleVoicePlay,
-    handleSelectPresetVoice,
-    handleSelectCloneVoice,
-    customVoiceText,
-    setCustomVoiceText,
-    customAudioUrl,
-    ttsError,
-    completedTtsJobId,
-    synthesizeMutation,
-    handleSynthesizeVoice,
-    saveModalOpen,
-    setSaveModalOpen,
-    saveName,
-    setSaveName,
-    saveTagIds,
-    setSaveTagIds,
-    saveNewTag,
-    setSaveNewTag,
-    allTags,
-    saveToLibraryMutation,
-    handleOpenSaveModal,
-    handleConfirmSave,
-    handleAddTagInModal,
-    handleOpenCloneModal,
-    handleSelectClonedVoice,
-    VOICE_GENDER_ICON,
-    CLONE_STATUS_CONFIG,
-    formatDuration,
-  } = useStep5Voice(props)
+  const v = useStep5Voice(props)
 
   return (
     <div className="xx-form-section">
       <h3>🎙️ 选择配音</h3>
 
-      {/* AI 智能推荐配音 */}
-      <div className="xx-voice-recommend-section">
-        <div className="xx-voice-recommend-header">
-          <span className="xx-voice-recommend-label">✨ AI 智能推荐</span>
-          <button
-            type="button"
-            className="xx-btn xx-btn-primary xx-btn-sm"
-            onClick={handleVoiceRecommend}
-            disabled={voiceRecommendLoading || presetVoicesLoading}
-          >
-            {voiceRecommendLoading ? (
-              <>
-                <LoadingOutlined style={{ marginRight: 6 }} />
-                推荐中
-              </>
-            ) : hasVoiceRecommend ? (
-              "换一批"
-            ) : (
-              "智能推荐"
-            )}
-          </button>
-        </div>
-
-        {voiceRecommendLoading && (
-          <div className="xx-voice-recommend-loading">
-            <LoadingOutlined style={{ color: "var(--primary-color)", marginRight: 8 }} />
-            根据视频内容为你匹配最合适的音色…
-          </div>
-        )}
-
-        {!voiceRecommendLoading && hasVoiceRecommend && voiceRecommendations.length > 0 && (
-          <div className="xx-voice-recommend-list">
-            {voiceRecommendations.map((voiceId) => {
-              const v = presetVoices.find((pv) => pv.voice_id === voiceId)
-              if (!v) return null
-              const isSelected = voiceMode === "preset" && selectedVoice === v.voice_id
-              return (
-                <div
-                  key={v.voice_id}
-                  className={`xx-voice-recommend-card ${isSelected ? "selected" : ""}`}
-                  onClick={() => handleSelectRecommendedVoice(v.voice_id)}
-                >
-                  <div className="xx-voice-recommend-avatar">
-                    {VOICE_GENDER_ICON[v.gender] ?? "✨"}
-                  </div>
-                  <div className="xx-voice-recommend-info">
-                    <div className="xx-voice-recommend-name">{v.name}</div>
-                    <div className="xx-voice-recommend-desc">{v.description}</div>
-                  </div>
-                  {isSelected && (
-                    <div className="xx-voice-recommend-check">
-                      <CheckCircleFilled style={{ color: "#fff", fontSize: 16 }} />
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        )}
-
-        {!voiceRecommendLoading && !hasVoiceRecommend && (
-          <div className="xx-voice-recommend-empty">
-            <span>点击「智能推荐」，AI 根据视频内容匹配音色</span>
-          </div>
-        )}
-      </div>
+      <VoiceRecommendSection
+        presetVoices={v.presetVoices}
+        voiceRecommendLoading={v.voiceRecommendLoading}
+        voiceRecommendations={v.voiceRecommendations}
+        hasVoiceRecommend={v.hasVoiceRecommend}
+        onRecommend={v.handleVoiceRecommend}
+        onSelectVoice={v.handleSelectRecommendedVoice}
+        selectedVoiceId={v.selectedVoice}
+        voiceMode={v.voiceMode}
+        VOICE_GENDER_ICON={v.VOICE_GENDER_ICON}
+      />
 
       <div className="xx-divider">
         <span>全部音色</span>
       </div>
 
-      {/* 配音方式选择卡片 — 从 API 预设音色动态生成 */}
       <div className="xx-voice-choice-list" style={{ marginBottom: 16 }}>
-        {presetVoices.slice(0, 3).map((v) => (
-          <div
-            key={v.voice_id}
-            className={`xx-voice-choice-item ${
-              voiceMode === "preset" && selectedVoice === v.voice_id ? "selected" : ""
-            }`}
-            onClick={() => handleSelectPresetVoice(v.voice_id)}
-            role="button"
-            tabIndex={0}
-            aria-pressed={voiceMode === "preset" && selectedVoice === v.voice_id}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault()
-                handleSelectPresetVoice(v.voice_id)
-              }
-            }}
-          >
-            <span className="xx-voice-choice-check">✓</span>
-            <div className="xx-voice-choice-avatar">{VOICE_GENDER_ICON[v.gender] ?? "✨"}</div>
-            <div className="xx-voice-choice-info">
-              <h4>{v.name}</h4>
-              <p>{v.description}</p>
-            </div>
-          </div>
+        {v.presetVoices.slice(0, 3).map((pv) => (
+          <VoiceChoiceCard
+            key={pv.voice_id}
+            selected={v.voiceMode === "preset" && v.selectedVoice === pv.voice_id}
+            onClick={() => v.handleSelectPresetVoice(pv.voice_id)}
+            avatar={v.VOICE_GENDER_ICON[pv.gender] ?? "✨"}
+            title={pv.name}
+            description={pv.description}
+          />
         ))}
-        {presetVoicesLoading && (
-          <div className="xx-voice-choice-item" style={{ opacity: 0.5 }}>
-            <div className="xx-voice-choice-avatar">⏳</div>
-            <div className="xx-voice-choice-info">
-              <h4>加载中…</h4>
-            </div>
-          </div>
+        {v.presetVoicesLoading && (
+          <VoiceChoiceCard
+            selected={false}
+            onClick={() => {}}
+            avatar="⏳"
+            title="加载中…"
+            loading
+          />
         )}
-        {/* 克隆我的声音 */}
-        <div
-          className={`xx-voice-choice-item ${voiceMode === "clone" ? "selected" : ""}`}
-          onClick={handleSelectCloneVoice}
-          role="button"
-          tabIndex={0}
-          aria-pressed={voiceMode === "clone"}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault()
-              handleSelectCloneVoice()
-            }
-          }}
-        >
-          <span className="xx-voice-choice-check">✓</span>
-          <div
-            className="xx-voice-choice-avatar"
-            style={{ background: "linear-gradient(135deg, #10b981, #059669)" }}
-          >
-            🎤
-          </div>
-          <div className="xx-voice-choice-info">
-            <h4>克隆我的声音</h4>
-            <p>上传语音样本克隆</p>
-          </div>
-        </div>
+        <VoiceChoiceCard
+          selected={v.voiceMode === "clone"}
+          onClick={v.handleSelectCloneVoice}
+          avatar="🎤"
+          title="克隆我的声音"
+          description="上传语音样本克隆"
+          avatarStyle={{ background: "linear-gradient(135deg, #10b981, #059669)" }}
+        />
       </div>
 
-      {/* 预设音色详细列表（当 voiceMode === preset 时显示 API 返回的音色） */}
-      {voiceMode === "preset" && (
-        <div>
-          <div className="xx-form-field">
-            <label>从配音库选择</label>
-            <select value={selectedVoice} onChange={(e) => handleSelectPresetVoice(e.target.value)}>
-              <option value="">请选择配音…</option>
-              {presetVoicesLoading ? (
-                <option disabled>加载中…</option>
-              ) : (
-                presetVoices.map((v) => (
-                  <option key={v.voice_id} value={v.voice_id}>
-                    {v.name} — {v.description}
-                  </option>
-                ))
-              )}
-            </select>
-          </div>
-          {/* 试听按钮 */}
-          {presetVoices.length > 0 && (
-            <div
-              style={{
-                display: "flex",
-                gap: 8,
-                flexWrap: "wrap",
-                marginTop: 8,
-              }}
-            >
-              {presetVoices.slice(0, 4).map((v) => (
-                <button
-                  key={v.voice_id}
-                  className="xx-btn xx-btn-ghost"
-                  style={{ height: 32, padding: "0 12px", fontSize: 12 }}
-                  onClick={() => toggleVoicePlay(v.voice_id, v.preview_url)}
-                >
-                  {playingVoice === v.voice_id ? (
-                    <>
-                      <PauseCircleOutlined /> 停止
-                    </>
-                  ) : (
-                    <>
-                      <PlayCircleOutlined /> {v.name}
-                    </>
-                  )}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
+      {v.voiceMode === "preset" && (
+        <PresetVoiceDetail
+          presetVoices={v.presetVoices}
+          selectedVoice={v.selectedVoice}
+          onSelect={v.handleSelectPresetVoice}
+          playingVoice={v.playingVoice}
+          onTogglePlay={v.toggleVoicePlay}
+          presetVoicesLoading={v.presetVoicesLoading}
+        />
       )}
 
-      {/* 自定义录制 */}
-      {voiceMode === "custom" && (
-        <div>
-          <textarea
-            placeholder="输入配音文案，点击合成按钮生成语音…"
-            value={customVoiceText}
-            onChange={(e) => setCustomVoiceText(e.target.value)}
-            maxLength={500}
-            style={{
-              width: "100%",
-              minHeight: 100,
-              border: "1px solid var(--border-color, #e2e8f0)",
-              borderRadius: "var(--radius-sm, 10px)",
-              padding: 12,
-              fontSize: 14,
-              resize: "vertical",
-              outline: "none",
-            }}
+      {v.voiceMode === "custom" && (
+        <>
+          <CustomVoicePanel
+            customVoiceText={v.customVoiceText}
+            onTextChange={v.setCustomVoiceText}
+            synthesizePending={v.synthesizeMutation.isPending}
+            onSynthesize={v.handleSynthesizeVoice}
+            ttsError={v.ttsError}
+            customAudioUrl={v.customAudioUrl}
+            completedTtsJobId={v.completedTtsJobId}
+            onOpenSaveModal={v.handleOpenSaveModal}
           />
-          <div style={{ marginTop: 12, display: "flex", gap: 8 }}>
-            <button
-              className="xx-btn xx-btn-ghost"
-              disabled={!customVoiceText.trim() || synthesizeMutation.isPending}
-              onClick={handleSynthesizeVoice}
-            >
-              <AudioOutlined /> {synthesizeMutation.isPending ? "合成中…" : "合成语音"}
-            </button>
-          </div>
-          {ttsError && (
-            <Text
-              style={{
-                color: "var(--error, #ef4444)",
-                marginTop: 8,
-                display: "block",
-              }}
-            >
-              {ttsError}
-            </Text>
-          )}
-          {customAudioUrl && completedTtsJobId && (
-            <div
-              style={{
-                marginTop: 8,
-                display: "flex",
-                alignItems: "center",
-                gap: 12,
-              }}
-            >
-              <Text style={{ color: "var(--success, #10b981)" }}>✓ 语音合成完成</Text>
-              <button
-                className="xx-btn xx-btn-primary"
-                style={{ height: 30, padding: "0 14px", fontSize: 12 }}
-                onClick={handleOpenSaveModal}
-              >
-                <SaveOutlined /> 存为素材
-              </button>
-            </div>
-          )}
-
-          {/* ── 存为素材弹窗 ── */}
-          {saveModalOpen && (
-            <div className="xx-save-modal-overlay" onClick={() => setSaveModalOpen(false)}>
-              <div className="xx-save-modal" onClick={(e) => e.stopPropagation()}>
-                <div className="xx-save-modal-header">
-                  <span>保存到配音库</span>
-                  <button className="xx-save-modal-close" onClick={() => setSaveModalOpen(false)}>
-                    <CloseOutlined />
-                  </button>
-                </div>
-                <div className="xx-save-modal-body">
-                  <label className="xx-save-modal-label">素材名称</label>
-                  <input
-                    className="xx-save-modal-input"
-                    placeholder="留空则自动生成名称"
-                    value={saveName}
-                    onChange={(e) => setSaveName(e.target.value)}
-                    maxLength={50}
-                  />
-                  <label className="xx-save-modal-label">
-                    标签
-                    <span
-                      style={{
-                        fontWeight: 400,
-                        color: "var(--text-tertiary, #94a3b8)",
-                      }}
-                    >
-                      （可选）
-                    </span>
-                  </label>
-                  <div className="xx-save-modal-tags">
-                    {saveTagIds.map((id) => {
-                      const tag = allTags.find((t) => t.id === id)
-                      return tag ? (
-                        <span key={id} className="xx-save-modal-tag active">
-                          {tag.name}
-                          <CloseOutlined
-                            className="xx-save-modal-tag-remove"
-                            onClick={() => setSaveTagIds((prev) => prev.filter((x) => x !== id))}
-                          />
-                        </span>
-                      ) : null
-                    })}
-                    <input
-                      className="xx-save-modal-tag-input"
-                      placeholder="输入标签名回车添加"
-                      value={saveNewTag}
-                      onChange={(e) => setSaveNewTag(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                          e.preventDefault()
-                          handleAddTagInModal(saveNewTag)
-                        }
-                      }}
-                    />
-                  </div>
-                  {allTags.length > 0 && (
-                    <div className="xx-save-modal-tag-presets">
-                      {allTags
-                        .filter((t) => !saveTagIds.includes(t.id))
-                        .slice(0, 12)
-                        .map((t) => (
-                          <button
-                            key={t.id}
-                            className="xx-save-modal-tag-preset"
-                            onClick={() => setSaveTagIds((prev) => [...prev, t.id])}
-                          >
-                            {t.name}
-                            <PlusOutlined style={{ fontSize: 10, marginLeft: 4 }} />
-                          </button>
-                        ))}
-                    </div>
-                  )}
-                </div>
-                <div className="xx-save-modal-footer">
-                  <button className="xx-btn xx-btn-ghost" onClick={() => setSaveModalOpen(false)}>
-                    取消
-                  </button>
-                  <button
-                    className="xx-btn xx-btn-primary"
-                    disabled={saveToLibraryMutation.isPending}
-                    onClick={handleConfirmSave}
-                  >
-                    {saveToLibraryMutation.isPending ? "保存中…" : "保存"}
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
+          <SaveVoiceModal
+            open={v.saveModalOpen}
+            onClose={() => v.setSaveModalOpen(false)}
+            saveName={v.saveName}
+            onNameChange={v.setSaveName}
+            saveTagIds={v.saveTagIds}
+            onTagIdsChange={v.setSaveTagIds}
+            saveNewTag={v.saveNewTag}
+            onNewTagChange={v.setSaveNewTag}
+            onAddTag={v.handleAddTagInModal}
+            allTags={v.allTags}
+            savePending={v.saveToLibraryMutation.isPending}
+            onConfirm={v.handleConfirmSave}
+          />
+        </>
       )}
 
-      {/* 克隆声音展开区域 */}
-      {voiceMode === "clone" && (
-        <div className="xx-clone-section">
-          <p className="xx-clone-section-title">克隆我的声音</p>
-          <Text style={{ fontSize: 12, color: "var(--text-tertiary, #94a3b8)" }}>
-            上传一段您的语音样本，AI 将克隆您的声音用于视频配音
-          </Text>
-
-          <div style={{ marginTop: 12 }}>
-            <button
-              className="xx-btn xx-btn-primary"
-              style={{ height: 36, fontSize: 13 }}
-              onClick={handleOpenCloneModal}
-            >
-              <ThunderboltOutlined /> 克隆新声音
-            </button>
-          </div>
-
-          {/* 轮询提示 */}
-          {hasProcessing && (
-            <div className="xx-clone-polling-hint" style={{ marginTop: 10 }}>
-              <span className="xx-clone-polling-dot" />
-              正在同步克隆进度...
-            </div>
-          )}
-
-          {/* 已克隆声音列表 */}
-          {clonedVoices.length > 0 && (
-            <div className="xx-clone-voices-list">
-              {clonedVoices.map((cv) => {
-                const statusCfg = CLONE_STATUS_CONFIG[cv.status]
-                const isReady = cv.status === "ready"
-                const selected = selectedClonedVoice === cv.id
-                return (
-                  <div
-                    key={cv.id}
-                    className={`xx-clone-voice-row ${selected ? "selected" : ""} ${
-                      !isReady ? "disabled" : ""
-                    }`}
-                    onClick={() => {
-                      if (isReady) handleSelectClonedVoice(cv.id)
-                    }}
-                    role="button"
-                    tabIndex={isReady ? 0 : -1}
-                    aria-pressed={selected}
-                  >
-                    <div className={`xx-clone-avatar ${cv.status}`}>
-                      <AudioOutlined />
-                    </div>
-                    <div className="xx-clone-info">
-                      <div className="xx-clone-name">{cv.name}</div>
-                      <div className="xx-clone-status">
-                        <span
-                          className="xx-clone-status-dot"
-                          style={{ background: statusCfg.color }}
-                        />
-                        <span style={{ color: statusCfg.color }}>{statusCfg.label}</span>
-                        {isReady && (
-                          <span
-                            style={{
-                              color: "var(--text-secondary)",
-                              marginLeft: 8,
-                            }}
-                          >
-                            {formatDuration(cv.duration_seconds)}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                    {selected && isReady && (
-                      <CheckCircleFilled style={{ color: "var(--primary-color, #4f46e5)" }} />
-                    )}
-                  </div>
-                )
-              })}
-            </div>
-          )}
-
-          {clonedVoices.length === 0 && (
-            <Text
-              style={{
-                color: "var(--text-secondary)",
-                display: "block",
-                textAlign: "center",
-                padding: "16px 0",
-              }}
-            >
-              暂无克隆音色，点击「克隆新声音」开始
-            </Text>
-          )}
-
-          <Text
-            style={{
-              fontSize: 12,
-              color: "var(--text-tertiary, #94a3b8)",
-              marginTop: 10,
-              display: "block",
-            }}
-          >
-            💡 提示：录音环境越安静，克隆效果越好。
-          </Text>
-        </div>
+      {v.voiceMode === "clone" && (
+        <CloneVoiceSection
+          clonedVoices={v.clonedVoices}
+          hasProcessing={v.hasProcessing}
+          selectedClonedVoice={v.selectedClonedVoice}
+          onSelect={v.handleSelectClonedVoice}
+          onOpenCloneModal={v.handleOpenCloneModal}
+          CLONE_STATUS_CONFIG={v.CLONE_STATUS_CONFIG}
+          formatDuration={v.formatDuration}
+        />
       )}
     </div>
   )
diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
new file mode 100644
index 000000000..0225a338f
--- /dev/null
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -0,0 +1,84 @@
+/**
+ * 手动选择素材列表
+ */
+import React from "react"
+import { Typography } from "antd"
+import type { AssetItem } from "@/api/assets"
+
+const { Text } = Typography
+
+interface ManualMaterialListProps {
+  materials: { items: AssetItem[]; total: number }
+  materialsLoading: boolean
+  selectedMaterials: string[]
+  onToggle: (materialId: string) => void
+}
+
+const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
+  materials,
+  materialsLoading,
+  selectedMaterials,
+  onToggle,
+}) => {
+  return (
+    <div style={{ marginTop: 14 }}>
+      {materialsLoading ? (
+        <Text style={{ color: "var(--text-secondary)", padding: "16px 0" }}>加载素材中…</Text>
+      ) : materials.items.length === 0 ? (
+        <Text style={{ color: "var(--text-secondary)", padding: "16px 0" }}>
+          暂无素材，请先在视频库中上传
+        </Text>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {materials.items.map((m) => {
+            const checked = selectedMaterials.includes(m.id)
+            return (
+              <label
+                key={m.id}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10,
+                  padding: "8px 12px",
+                  background: checked ? "var(--primary-soft, #eef2ff)" : "#f8fafc",
+                  borderRadius: 10,
+                  cursor: "pointer",
+                  border: checked
+                    ? "1px solid var(--primary-color, #4f46e5)"
+                    : "1px solid transparent",
+                  transition: "all 0.15s ease",
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  onChange={() => onToggle(m.id)}
+                  style={{ accentColor: "var(--primary-color, #4f46e5)" }}
+                />
+                <span
+                  style={{
+                    fontSize: 13,
+                    color: "var(--text-primary)",
+                    flex: 1,
+                  }}
+                >
+                  {m.name}
+                </span>
+                <span
+                  style={{
+                    fontSize: 11,
+                    color: "var(--text-tertiary, #94a3b8)",
+                  }}
+                >
+                  {m.mime_type.split("/")[1].toUpperCase()}
+                </span>
+              </label>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ManualMaterialList
diff --git a/apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx b/apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx
new file mode 100644
index 000000000..d733f15e1
--- /dev/null
+++ b/apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx
@@ -0,0 +1,32 @@
+/**
+ * 素材模式切换 Tab
+ */
+import React from "react"
+
+interface MaterialModeTabsProps {
+  mode: "manual" | "auto"
+  onModeChange: (mode: "manual" | "auto") => void
+}
+
+const MaterialModeTabs: React.FC<MaterialModeTabsProps> = ({ mode, onModeChange }) => {
+  return (
+    <div className="xx-material-mode-tabs">
+      <button
+        className={`xx-material-mode-tab ${mode === "manual" ? "active" : ""}`}
+        onClick={() => onModeChange("manual")}
+        type="button"
+      >
+        手动选择素材
+      </button>
+      <button
+        className={`xx-material-mode-tab ${mode === "auto" ? "active" : ""}`}
+        onClick={() => onModeChange("auto")}
+        type="button"
+      >
+        选择视频库自动匹配
+      </button>
+    </div>
+  )
+}
+
+export default MaterialModeTabs
diff --git a/apps/web/src/pages/generate/components/material/SmartMatchCard.tsx b/apps/web/src/pages/generate/components/material/SmartMatchCard.tsx
new file mode 100644
index 000000000..8a53916ac
--- /dev/null
+++ b/apps/web/src/pages/generate/components/material/SmartMatchCard.tsx
@@ -0,0 +1,60 @@
+/**
+ * 单个智能匹配卡片
+ */
+import React from "react"
+import { PlayCircleOutlined, CheckCircleFilled } from "@ant-design/icons"
+import type { AssetItem } from "@/api/assets"
+
+interface SmartMatchResultItem {
+  asset: AssetItem
+  matchScore: number
+  matchReason: string
+}
+
+interface SmartMatchCardProps {
+  result: SmartMatchResultItem
+  selected: boolean
+  onClick: () => void
+  formatDuration: (seconds: number) => string
+}
+
+const SmartMatchCard: React.FC<SmartMatchCardProps> = ({
+  result,
+  selected,
+  onClick,
+  formatDuration,
+}) => {
+  const { asset, matchScore, matchReason } = result
+  return (
+    <div className={`xx-smart-match-card ${selected ? "selected" : ""}`} onClick={onClick}>
+      {/* 缩略图 */}
+      <div className="xx-smart-match-thumb">
+        {asset.thumbnail_url ? (
+          <img src={asset.thumbnail_url} alt={asset.name} />
+        ) : (
+          <div className="xx-smart-match-thumb-placeholder">
+            <PlayCircleOutlined style={{ fontSize: 32, opacity: 0.5 }} />
+          </div>
+        )}
+        <div className="xx-smart-match-score">{matchScore}%</div>
+        {selected && (
+          <div className="xx-smart-match-check">
+            <CheckCircleFilled style={{ fontSize: 20, color: "#fff" }} />
+          </div>
+        )}
+        {asset.duration && (
+          <div className="xx-smart-match-duration">{formatDuration(asset.duration)}</div>
+        )}
+      </div>
+      {/* 信息区 */}
+      <div className="xx-smart-match-info">
+        <div className="xx-smart-match-name" title={asset.name}>
+          {asset.name}
+        </div>
+        <div className="xx-smart-match-reason">🎯 {matchReason}</div>
+      </div>
+    </div>
+  )
+}
+
+export default SmartMatchCard
diff --git a/apps/web/src/pages/generate/components/material/SmartMatchInput.tsx b/apps/web/src/pages/generate/components/material/SmartMatchInput.tsx
new file mode 100644
index 000000000..4cb6be046
--- /dev/null
+++ b/apps/web/src/pages/generate/components/material/SmartMatchInput.tsx
@@ -0,0 +1,80 @@
+/**
+ * 智能匹配输入区
+ * textarea + 提示 + 按钮组
+ */
+import React from "react"
+import { LoadingOutlined } from "@ant-design/icons"
+
+interface SmartMatchInputProps {
+  inputValue: string
+  onInputChange: (value: string) => void
+  matching: boolean
+  onMatch: () => void
+  hasMatched: boolean
+  onRefresh: () => void
+  materialsCount: number
+  loading: boolean
+}
+
+const SmartMatchInput: React.FC<SmartMatchInputProps> = ({
+  inputValue,
+  onInputChange,
+  matching,
+  onMatch,
+  hasMatched,
+  onRefresh,
+  materialsCount,
+  loading,
+}) => {
+  return (
+    <div className="xx-smart-match-input-area">
+      <label className="xx-smart-match-label">🤖 描述你想要的视频内容</label>
+      <textarea
+        className="xx-smart-match-input"
+        placeholder="例如：一个科技感十足的产品宣传视频，画面要有现代办公场景、团队协作、数据分析图表…"
+        value={inputValue}
+        onChange={(e) => onInputChange(e.target.value)}
+        rows={3}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+            onMatch()
+          }
+        }}
+      />
+      <div className="xx-smart-match-input-footer">
+        <span className="xx-smart-match-tip">
+          {loading ? "扫描视频库中…" : `当前视频库共 ${materialsCount} 个素材可供匹配`}
+        </span>
+        <div style={{ display: "flex", gap: 8 }}>
+          {hasMatched && (
+            <button
+              type="button"
+              className="xx-btn xx-btn-ghost xx-btn-sm"
+              onClick={onRefresh}
+              disabled={matching || loading}
+            >
+              🔄 换一批
+            </button>
+          )}
+          <button
+            type="button"
+            className="xx-btn xx-btn-primary xx-btn-sm"
+            onClick={onMatch}
+            disabled={matching || loading || !inputValue.trim()}
+          >
+            {matching ? (
+              <>
+                <LoadingOutlined style={{ marginRight: 6 }} />
+                匹配中…
+              </>
+            ) : (
+              "✨ 智能匹配"
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SmartMatchInput
diff --git a/apps/web/src/pages/generate/components/material/SmartMatchResults.tsx b/apps/web/src/pages/generate/components/material/SmartMatchResults.tsx
new file mode 100644
index 000000000..f4a3c911c
--- /dev/null
+++ b/apps/web/src/pages/generate/components/material/SmartMatchResults.tsx
@@ -0,0 +1,114 @@
+/**
+ * 智能匹配结果区（含加载/空状态/已选汇总）
+ */
+import React from "react"
+import { LoadingOutlined } from "@ant-design/icons"
+import type { AssetItem } from "@/api/assets"
+import SmartMatchCard from "./SmartMatchCard"
+
+interface SmartMatchResultItem {
+  asset: AssetItem
+  matchScore: number
+  matchReason: string
+}
+
+interface SmartMatchResultsProps {
+  results: SmartMatchResultItem[]
+  selectedIds: string[]
+  matching: boolean
+  hasMatched: boolean
+  onToggle: (assetId: string) => void
+  onSelectAll: () => void
+  onClear: () => void
+  formatDuration: (seconds: number) => string
+  selectedTotalDuration: number
+}
+
+const SmartMatchResults: React.FC<SmartMatchResultsProps> = ({
+  results,
+  selectedIds,
+  matching,
+  hasMatched,
+  onToggle,
+  onSelectAll,
+  onClear,
+  formatDuration,
+  selectedTotalDuration,
+}) => {
+  // 匹配中状态
+  if (matching) {
+    return (
+      <div className="xx-smart-match-loading">
+        <LoadingOutlined
+          style={{ fontSize: 32, color: "var(--primary-color)", marginBottom: 12 }}
+        />
+        <div style={{ color: "var(--text-primary)", fontSize: 14 }}>AI 正在分析素材…</div>
+        <div style={{ color: "var(--text-tertiary)", fontSize: 12, marginTop: 4 }}>
+          正在根据描述从视频库中匹配最合适的素材
+        </div>
+      </div>
+    )
+  }
+
+  // 未匹配状态提示
+  if (!hasMatched) {
+    return (
+      <div className="xx-smart-match-empty">
+        <div style={{ fontSize: 36, marginBottom: 8 }}>💡</div>
+        <div style={{ color: "var(--text-secondary)", fontSize: 13 }}>
+          输入视频内容描述，点击「智能匹配」让 AI 帮你选素材
+        </div>
+      </div>
+    )
+  }
+
+  // 无结果
+  if (results.length === 0) return null
+
+  return (
+    <>
+      <div className="xx-smart-match-results">
+        <div className="xx-smart-match-results-header">
+          <span className="xx-smart-match-results-title">推荐素材 ({results.length}个)</span>
+          <div className="xx-smart-match-results-actions">
+            <button type="button" className="xx-link-btn" onClick={onSelectAll}>
+              全选
+            </button>
+            <span style={{ color: "var(--border-color)" }}>|</span>
+            <button type="button" className="xx-link-btn" onClick={onClear}>
+              清空
+            </button>
+          </div>
+        </div>
+        <div className="xx-smart-match-grid">
+          {results.map((result) => {
+            const isSelected = selectedIds.includes(result.asset.id)
+            return (
+              <SmartMatchCard
+                key={result.asset.id}
+                result={result}
+                selected={isSelected}
+                onClick={() => onToggle(result.asset.id)}
+                formatDuration={formatDuration}
+              />
+            )
+          })}
+        </div>
+      </div>
+
+      {/* 已选素材汇总 */}
+      {selectedIds.length > 0 && (
+        <div className="xx-smart-match-summary">
+          <div className="xx-smart-match-summary-header">
+            <span className="xx-pill xx-pill-ok">已选 {selectedIds.length} 个素材</span>
+            <span style={{ color: "var(--text-tertiary)", fontSize: 12 }}>
+              预计总时长约 {selectedTotalDuration.toFixed(0)} 秒
+            </span>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default SmartMatchResults
diff --git a/apps/web/src/pages/generate/components/title/AiTitleCard.tsx b/apps/web/src/pages/generate/components/title/AiTitleCard.tsx
new file mode 100644
index 000000000..81059fe49
--- /dev/null
+++ b/apps/web/src/pages/generate/components/title/AiTitleCard.tsx
@@ -0,0 +1,35 @@
+/**
+ * 单个 AI 标题卡片
+ */
+import React from "react"
+import { CheckCircleFilled } from "@ant-design/icons"
+
+interface AiTitleCardProps {
+  title: string
+  highlight: string
+  style: "catchy" | "emotional" | "informative"
+  selected: boolean
+  onClick: () => void
+}
+
+const AiTitleCard: React.FC<AiTitleCardProps> = ({
+  title,
+  highlight,
+  style,
+  selected,
+  onClick,
+}) => {
+  return (
+    <div className={`xx-ai-title-card ${selected ? "selected" : ""} ${style}`} onClick={onClick}>
+      <div className="xx-ai-title-card-text">{title}</div>
+      <div className="xx-ai-title-card-tag">{highlight}</div>
+      {selected && (
+        <div className="xx-ai-title-card-check">
+          <CheckCircleFilled style={{ color: "#fff", fontSize: 14 }} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AiTitleCard
diff --git a/apps/web/src/pages/generate/components/title/AiTitleGenerator.tsx b/apps/web/src/pages/generate/components/title/AiTitleGenerator.tsx
new file mode 100644
index 000000000..e980f0e7e
--- /dev/null
+++ b/apps/web/src/pages/generate/components/title/AiTitleGenerator.tsx
@@ -0,0 +1,105 @@
+/**
+ * AI 智能生成标题
+ * 输入框 + 生成按钮 + 结果列表 + 加载状态
+ */
+import React from "react"
+import { LoadingOutlined } from "@ant-design/icons"
+import AiTitleCard from "./AiTitleCard"
+
+interface AiTitleItem {
+  title: string
+  highlight: string
+  style: "catchy" | "emotional" | "informative"
+}
+
+interface AiTitleGeneratorProps {
+  inputValue: string
+  onInputChange: (value: string) => void
+  generating: boolean
+  onGenerate: () => void
+  results: AiTitleItem[]
+  hasGenerated: boolean
+  onSelect: (title: string) => void
+  selectedTitle: string
+  onRefresh: () => void
+}
+
+const AiTitleGenerator: React.FC<AiTitleGeneratorProps> = ({
+  inputValue,
+  onInputChange,
+  generating,
+  onGenerate,
+  results,
+  hasGenerated,
+  onSelect,
+  selectedTitle,
+  onRefresh,
+}) => {
+  return (
+    <div className="xx-ai-title-section">
+      <div className="xx-ai-title-header">
+        <span className="xx-ai-title-label">✨ AI 智能生成标题</span>
+      </div>
+      <div className="xx-ai-title-input-row">
+        <input
+          className="xx-ai-title-input"
+          placeholder="输入视频内容描述或关键词，如：职场成长、副业赚钱…"
+          value={inputValue}
+          onChange={(e) => onInputChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") onGenerate()
+          }}
+        />
+        <button
+          type="button"
+          className="xx-btn xx-btn-primary"
+          onClick={onGenerate}
+          disabled={generating || !inputValue.trim()}
+        >
+          {generating ? (
+            <>
+              <LoadingOutlined style={{ marginRight: 6 }} />
+              生成中
+            </>
+          ) : (
+            "生成标题"
+          )}
+        </button>
+      </div>
+
+      {/* 生成结果 */}
+      {hasGenerated && !generating && results.length > 0 && (
+        <div className="xx-ai-title-results">
+          <div className="xx-ai-title-results-header">
+            <span className="xx-ai-title-results-count">为你生成 {results.length} 个标题</span>
+            <button type="button" className="xx-link-btn" onClick={onRefresh} disabled={generating}>
+              🔄 换一批
+            </button>
+          </div>
+          <div className="xx-ai-title-list">
+            {results.map((item, idx) => (
+              <AiTitleCard
+                key={idx}
+                title={item.title}
+                highlight={item.highlight}
+                style={item.style}
+                selected={selectedTitle === item.title}
+                onClick={() => onSelect(item.title)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 生成中 */}
+      {generating && (
+        <div className="xx-ai-title-loading">
+          <LoadingOutlined style={{ color: "var(--primary-color)", marginRight: 8 }} />
+          AI 正在为你创作标题…
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AiTitleGenerator
diff --git a/apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx b/apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx
new file mode 100644
index 000000000..02ab24bfd
--- /dev/null
+++ b/apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx
@@ -0,0 +1,41 @@
+/**
+ * 标题预设样式网格
+ */
+import React from "react"
+
+interface TitlePresetItem {
+  key: string
+  label: string
+  previewStyle: React.CSSProperties
+}
+
+interface TitlePresetsGridProps {
+  presets: TitlePresetItem[]
+  activePreset: string | null
+  onApply: (presetKey: string) => void
+}
+
+const TitlePresetsGrid: React.FC<TitlePresetsGridProps> = ({ presets, activePreset, onApply }) => {
+  return (
+    <div className="xx-title-presets-grid">
+      {presets.map((p) => {
+        const isActive = activePreset === p.key
+        return (
+          <button
+            key={p.key}
+            className={`xx-title-preset-card${isActive ? " active" : ""}`}
+            onClick={() => onApply(p.key)}
+            title={p.label}
+          >
+            <span className="xx-title-preset-preview-text" style={p.previewStyle}>
+              标题
+            </span>
+            <span className="xx-title-preset-card-label">{p.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default TitlePresetsGrid
diff --git a/apps/web/src/pages/generate/components/title/TitleStylePanel.tsx b/apps/web/src/pages/generate/components/title/TitleStylePanel.tsx
new file mode 100644
index 000000000..f32632b03
--- /dev/null
+++ b/apps/web/src/pages/generate/components/title/TitleStylePanel.tsx
@@ -0,0 +1,151 @@
+/**
+ * 标题样式设置区
+ * 位置/字体/字号/样式按钮/预设
+ */
+import React from "react"
+import type { TitleSettings } from "../../types"
+import TitlePresetsGrid from "./TitlePresetsGrid"
+
+interface PositionOption {
+  value: string
+  label: string
+}
+
+interface TitlePresetItem {
+  key: string
+  label: string
+  previewStyle: React.CSSProperties
+}
+
+interface TitleStylePanelProps {
+  settings: TitleSettings
+  onUpdatePosition: (position: string) => void
+  onUpdateFont: (font: string) => void
+  onUpdateSize: (size: number) => void
+  onToggleBold: () => void
+  onToggleItalic: () => void
+  onToggleStroke: () => void
+  onToggleShadow: () => void
+  onApplyPreset: (presetKey: string) => void
+  activePreset: string | null
+  titlePresets: TitlePresetItem[]
+  POSITION_OPTIONS: PositionOption[]
+  FONT_OPTIONS: string[]
+}
+
+const TitleStylePanel: React.FC<TitleStylePanelProps> = ({
+  settings,
+  onUpdatePosition,
+  onUpdateFont,
+  onUpdateSize,
+  onToggleBold,
+  onToggleItalic,
+  onToggleStroke,
+  onToggleShadow,
+  onApplyPreset,
+  activePreset,
+  titlePresets,
+  POSITION_OPTIONS,
+  FONT_OPTIONS,
+}) => {
+  return (
+    <div className="xx-title-style-section">
+      <h4 className="xx-section-subtitle">标题样式</h4>
+
+      {/* 位置 + 字体 一行 */}
+      <div className="xx-title-style-row">
+        <div className="xx-form-field xx-half-field">
+          <label>位置</label>
+          <select
+            className="xx-form-select"
+            value={settings.position}
+            onChange={(e) => onUpdatePosition(e.target.value)}
+          >
+            {POSITION_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="xx-form-field xx-half-field">
+          <label>字体</label>
+          <select
+            className="xx-form-select"
+            value={settings.font}
+            onChange={(e) => onUpdateFont(e.target.value)}
+          >
+            {FONT_OPTIONS.map((f) => (
+              <option key={f} value={f}>
+                {f}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* 字号滑块 */}
+      <div className="xx-form-field">
+        <div className="xx-field-label-row">
+          <label>字号</label>
+          <span className="xx-field-value">{settings.size}px</span>
+        </div>
+        <input
+          className="xx-slider"
+          type="range"
+          min={12}
+          max={48}
+          value={settings.size}
+          onChange={(e) => onUpdateSize(Number(e.target.value))}
+        />
+      </div>
+
+      {/* 预设样式 */}
+      <div className="xx-form-field">
+        <label>预设样式</label>
+        <TitlePresetsGrid
+          presets={titlePresets}
+          activePreset={activePreset}
+          onApply={onApplyPreset}
+        />
+      </div>
+
+      {/* 样式按钮：粗体/斜体/描边/阴影 */}
+      <div className="xx-form-field">
+        <label>样式</label>
+        <div className="xx-style-btns">
+          <button
+            className={`xx-style-btn ${settings.bold ? "active" : ""}`}
+            onClick={onToggleBold}
+            title="粗体"
+          >
+            <b>B</b>
+          </button>
+          <button
+            className={`xx-style-btn ${settings.italic ? "active" : ""}`}
+            onClick={onToggleItalic}
+            title="斜体"
+          >
+            <i>I</i>
+          </button>
+          <button
+            className={`xx-style-btn ${settings.stroke ? "active" : ""}`}
+            onClick={onToggleStroke}
+            title="描边"
+          >
+            S
+          </button>
+          <button
+            className={`xx-style-btn ${settings.shadow ? "active" : ""}`}
+            onClick={onToggleShadow}
+            title="阴影"
+          >
+            ☁
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TitleStylePanel
diff --git a/apps/web/src/pages/generate/components/voice/CloneVoiceSection.tsx b/apps/web/src/pages/generate/components/voice/CloneVoiceSection.tsx
new file mode 100644
index 000000000..37947529d
--- /dev/null
+++ b/apps/web/src/pages/generate/components/voice/CloneVoiceSection.tsx
@@ -0,0 +1,132 @@
+/**
+ * 克隆声音展开区域
+ * 克隆按钮、轮询提示、已克隆列表、空状态
+ */
+import React from "react"
+import { Typography } from "antd"
+import { ThunderboltOutlined, AudioOutlined, CheckCircleFilled } from "@ant-design/icons"
+import type { VoiceClone } from "@/api/voice-clone"
+
+const { Text } = Typography
+
+interface CloneVoiceSectionProps {
+  clonedVoices: VoiceClone[]
+  hasProcessing: boolean
+  selectedClonedVoice: string
+  onSelect: (voiceId: string) => void
+  onOpenCloneModal: () => void
+  CLONE_STATUS_CONFIG: Record<string, { label: string; color: string }>
+  formatDuration: (seconds: number) => string
+}
+
+const CloneVoiceSection: React.FC<CloneVoiceSectionProps> = ({
+  clonedVoices,
+  hasProcessing,
+  selectedClonedVoice,
+  onSelect,
+  onOpenCloneModal,
+  CLONE_STATUS_CONFIG,
+  formatDuration,
+}) => {
+  return (
+    <div className="xx-clone-section">
+      <p className="xx-clone-section-title">克隆我的声音</p>
+      <Text style={{ fontSize: 12, color: "var(--text-tertiary, #94a3b8)" }}>
+        上传一段您的语音样本，AI 将克隆您的声音用于视频配音
+      </Text>
+
+      <div style={{ marginTop: 12 }}>
+        <button
+          className="xx-btn xx-btn-primary"
+          style={{ height: 36, fontSize: 13 }}
+          onClick={onOpenCloneModal}
+        >
+          <ThunderboltOutlined /> 克隆新声音
+        </button>
+      </div>
+
+      {/* 轮询提示 */}
+      {hasProcessing && (
+        <div className="xx-clone-polling-hint" style={{ marginTop: 10 }}>
+          <span className="xx-clone-polling-dot" />
+          正在同步克隆进度...
+        </div>
+      )}
+
+      {/* 已克隆声音列表 */}
+      {clonedVoices.length > 0 && (
+        <div className="xx-clone-voices-list">
+          {clonedVoices.map((cv) => {
+            const statusCfg = CLONE_STATUS_CONFIG[cv.status]
+            const isReady = cv.status === "ready"
+            const selected = selectedClonedVoice === cv.id
+            return (
+              <div
+                key={cv.id}
+                className={`xx-clone-voice-row ${selected ? "selected" : ""} ${
+                  !isReady ? "disabled" : ""
+                }`}
+                onClick={() => {
+                  if (isReady) onSelect(cv.id)
+                }}
+                role="button"
+                tabIndex={isReady ? 0 : -1}
+                aria-pressed={selected}
+              >
+                <div className={`xx-clone-avatar ${cv.status}`}>
+                  <AudioOutlined />
+                </div>
+                <div className="xx-clone-info">
+                  <div className="xx-clone-name">{cv.name}</div>
+                  <div className="xx-clone-status">
+                    <span className="xx-clone-status-dot" style={{ background: statusCfg.color }} />
+                    <span style={{ color: statusCfg.color }}>{statusCfg.label}</span>
+                    {isReady && (
+                      <span
+                        style={{
+                          color: "var(--text-secondary)",
+                          marginLeft: 8,
+                        }}
+                      >
+                        {formatDuration(cv.duration_seconds)}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                {selected && isReady && (
+                  <CheckCircleFilled style={{ color: "var(--primary-color, #4f46e5)" }} />
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {clonedVoices.length === 0 && (
+        <Text
+          style={{
+            color: "var(--text-secondary)",
+            display: "block",
+            textAlign: "center",
+            padding: "16px 0",
+          }}
+        >
+          暂无克隆音色，点击「克隆新声音」开始
+        </Text>
+      )}
+
+      <Text
+        style={{
+          fontSize: 12,
+          color: "var(--text-tertiary, #94a3b8)",
+          marginTop: 10,
+          display: "block",
+        }}
+      >
+        💡 提示：录音环境越安静，克隆效果越好。
+      </Text>
+    </div>
+  )
+}
+
+export default CloneVoiceSection
diff --git a/apps/web/src/pages/generate/components/voice/CustomVoicePanel.tsx b/apps/web/src/pages/generate/components/voice/CustomVoicePanel.tsx
new file mode 100644
index 000000000..4fb4d79c4
--- /dev/null
+++ b/apps/web/src/pages/generate/components/voice/CustomVoicePanel.tsx
@@ -0,0 +1,93 @@
+/**
+ * 自定义录制面板
+ * textarea + 合成按钮 + 结果区 + 存为素材按钮
+ */
+import React from "react"
+import { Typography } from "antd"
+import { AudioOutlined, SaveOutlined } from "@ant-design/icons"
+
+const { Text } = Typography
+
+interface CustomVoicePanelProps {
+  customVoiceText: string
+  onTextChange: (text: string) => void
+  synthesizePending: boolean
+  onSynthesize: () => void
+  ttsError: string | null
+  customAudioUrl: string | null
+  completedTtsJobId: string | null
+  onOpenSaveModal: () => void
+}
+
+const CustomVoicePanel: React.FC<CustomVoicePanelProps> = ({
+  customVoiceText,
+  onTextChange,
+  synthesizePending,
+  onSynthesize,
+  ttsError,
+  customAudioUrl,
+  completedTtsJobId,
+  onOpenSaveModal,
+}) => {
+  return (
+    <div>
+      <textarea
+        placeholder="输入配音文案，点击合成按钮生成语音…"
+        value={customVoiceText}
+        onChange={(e) => onTextChange(e.target.value)}
+        maxLength={500}
+        style={{
+          width: "100%",
+          minHeight: 100,
+          border: "1px solid var(--border-color, #e2e8f0)",
+          borderRadius: "var(--radius-sm, 10px)",
+          padding: 12,
+          fontSize: 14,
+          resize: "vertical",
+          outline: "none",
+        }}
+      />
+      <div style={{ marginTop: 12, display: "flex", gap: 8 }}>
+        <button
+          className="xx-btn xx-btn-ghost"
+          disabled={!customVoiceText.trim() || synthesizePending}
+          onClick={onSynthesize}
+        >
+          <AudioOutlined /> {synthesizePending ? "合成中…" : "合成语音"}
+        </button>
+      </div>
+      {ttsError && (
+        <Text
+          style={{
+            color: "var(--error, #ef4444)",
+            marginTop: 8,
+            display: "block",
+          }}
+        >
+          {ttsError}
+        </Text>
+      )}
+      {customAudioUrl && completedTtsJobId && (
+        <div
+          style={{
+            marginTop: 8,
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+          }}
+        >
+          <Text style={{ color: "var(--success, #10b981)" }}>✓ 语音合成完成</Text>
+          <button
+            className="xx-btn xx-btn-primary"
+            style={{ height: 30, padding: "0 14px", fontSize: 12 }}
+            onClick={onOpenSaveModal}
+          >
+            <SaveOutlined /> 存为素材
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CustomVoicePanel
diff --git a/apps/web/src/pages/generate/components/voice/PresetVoiceDetail.tsx b/apps/web/src/pages/generate/components/voice/PresetVoiceDetail.tsx
new file mode 100644
index 000000000..4856c6151
--- /dev/null
+++ b/apps/web/src/pages/generate/components/voice/PresetVoiceDetail.tsx
@@ -0,0 +1,77 @@
+/**
+ * 预设音色下拉选择 + 试听按钮
+ * voiceMode === "preset" 时显示的详情区
+ */
+import React from "react"
+import { PlayCircleOutlined, PauseCircleOutlined } from "@ant-design/icons"
+import type { PresetVoiceItem } from "@/api/voices"
+
+interface PresetVoiceDetailProps {
+  presetVoices: PresetVoiceItem[]
+  selectedVoice: string
+  onSelect: (voiceId: string) => void
+  playingVoice: string | null
+  onTogglePlay: (voiceId: string, previewUrl: string | null) => void
+  presetVoicesLoading: boolean
+}
+
+const PresetVoiceDetail: React.FC<PresetVoiceDetailProps> = ({
+  presetVoices,
+  selectedVoice,
+  onSelect,
+  playingVoice,
+  onTogglePlay,
+  presetVoicesLoading,
+}) => {
+  return (
+    <div>
+      <div className="xx-form-field">
+        <label>从配音库选择</label>
+        <select value={selectedVoice} onChange={(e) => onSelect(e.target.value)}>
+          <option value="">请选择配音…</option>
+          {presetVoicesLoading ? (
+            <option disabled>加载中…</option>
+          ) : (
+            presetVoices.map((v) => (
+              <option key={v.voice_id} value={v.voice_id}>
+                {v.name} — {v.description}
+              </option>
+            ))
+          )}
+        </select>
+      </div>
+      {/* 试听按钮 */}
+      {presetVoices.length > 0 && (
+        <div
+          style={{
+            display: "flex",
+            gap: 8,
+            flexWrap: "wrap",
+            marginTop: 8,
+          }}
+        >
+          {presetVoices.slice(0, 4).map((v) => (
+            <button
+              key={v.voice_id}
+              className="xx-btn xx-btn-ghost"
+              style={{ height: 32, padding: "0 12px", fontSize: 12 }}
+              onClick={() => onTogglePlay(v.voice_id, v.preview_url)}
+            >
+              {playingVoice === v.voice_id ? (
+                <>
+                  <PauseCircleOutlined /> 停止
+                </>
+              ) : (
+                <>
+                  <PlayCircleOutlined /> {v.name}
+                </>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default PresetVoiceDetail
diff --git a/apps/web/src/pages/generate/components/voice/SaveVoiceModal.tsx b/apps/web/src/pages/generate/components/voice/SaveVoiceModal.tsx
new file mode 100644
index 000000000..58f648f4a
--- /dev/null
+++ b/apps/web/src/pages/generate/components/voice/SaveVoiceModal.tsx
@@ -0,0 +1,125 @@
+/**
+ * 保存到配音库弹窗
+ */
+import React from "react"
+import { CloseOutlined, PlusOutlined } from "@ant-design/icons"
+import type { TagItem } from "@/api/tags"
+
+interface SaveVoiceModalProps {
+  open: boolean
+  onClose: () => void
+  saveName: string
+  onNameChange: (name: string) => void
+  saveTagIds: string[]
+  onTagIdsChange: (tags: string[] | ((prev: string[]) => string[])) => void
+  saveNewTag: string
+  onNewTagChange: (tag: string) => void
+  onAddTag: (tagName: string) => void
+  allTags: TagItem[]
+  savePending: boolean
+  onConfirm: () => void
+}
+
+const SaveVoiceModal: React.FC<SaveVoiceModalProps> = ({
+  open,
+  onClose,
+  saveName,
+  onNameChange,
+  saveTagIds,
+  onTagIdsChange,
+  saveNewTag,
+  onNewTagChange,
+  onAddTag,
+  allTags,
+  savePending,
+  onConfirm,
+}) => {
+  if (!open) return null
+
+  return (
+    <div className="xx-save-modal-overlay" onClick={onClose}>
+      <div className="xx-save-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="xx-save-modal-header">
+          <span>保存到配音库</span>
+          <button className="xx-save-modal-close" onClick={onClose}>
+            <CloseOutlined />
+          </button>
+        </div>
+        <div className="xx-save-modal-body">
+          <label className="xx-save-modal-label">素材名称</label>
+          <input
+            className="xx-save-modal-input"
+            placeholder="留空则自动生成名称"
+            value={saveName}
+            onChange={(e) => onNameChange(e.target.value)}
+            maxLength={50}
+          />
+          <label className="xx-save-modal-label">
+            标签
+            <span
+              style={{
+                fontWeight: 400,
+                color: "var(--text-tertiary, #94a3b8)",
+              }}
+            >
+              （可选）
+            </span>
+          </label>
+          <div className="xx-save-modal-tags">
+            {saveTagIds.map((id) => {
+              const tag = allTags.find((t) => t.id === id)
+              return tag ? (
+                <span key={id} className="xx-save-modal-tag active">
+                  {tag.name}
+                  <CloseOutlined
+                    className="xx-save-modal-tag-remove"
+                    onClick={() => onTagIdsChange((prev: string[]) => prev.filter((x) => x !== id))}
+                  />
+                </span>
+              ) : null
+            })}
+            <input
+              className="xx-save-modal-tag-input"
+              placeholder="输入标签名回车添加"
+              value={saveNewTag}
+              onChange={(e) => onNewTagChange(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault()
+                  onAddTag(saveNewTag)
+                }
+              }}
+            />
+          </div>
+          {allTags.length > 0 && (
+            <div className="xx-save-modal-tag-presets">
+              {allTags
+                .filter((t) => !saveTagIds.includes(t.id))
+                .slice(0, 12)
+                .map((t) => (
+                  <button
+                    key={t.id}
+                    className="xx-save-modal-tag-preset"
+                    onClick={() => onTagIdsChange((prev: string[]) => [...prev, t.id])}
+                  >
+                    {t.name}
+                    <PlusOutlined style={{ fontSize: 10, marginLeft: 4 }} />
+                  </button>
+                ))}
+            </div>
+          )}
+        </div>
+        <div className="xx-save-modal-footer">
+          <button className="xx-btn xx-btn-ghost" onClick={onClose}>
+            取消
+          </button>
+          <button className="xx-btn xx-btn-primary" disabled={savePending} onClick={onConfirm}>
+            {savePending ? "保存中…" : "保存"}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SaveVoiceModal
diff --git a/apps/web/src/pages/generate/components/voice/VoiceChoiceCard.tsx b/apps/web/src/pages/generate/components/voice/VoiceChoiceCard.tsx
new file mode 100644
index 000000000..2c4b768f2
--- /dev/null
+++ b/apps/web/src/pages/generate/components/voice/VoiceChoiceCard.tsx
@@ -0,0 +1,53 @@
+/**
+ * 音色选择卡片
+ * 用于顶部预设音色卡片和克隆入口卡片
+ */
+import React from "react"
+
+interface VoiceChoiceCardProps {
+  selected: boolean
+  onClick: () => void
+  avatar: React.ReactNode
+  title: string
+  description?: string
+  avatarStyle?: React.CSSProperties
+  loading?: boolean
+}
+
+const VoiceChoiceCard: React.FC<VoiceChoiceCardProps> = ({
+  selected,
+  onClick,
+  avatar,
+  title,
+  description,
+  avatarStyle,
+  loading = false,
+}) => {
+  return (
+    <div
+      className={`xx-voice-choice-item ${selected ? "selected" : ""}`}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      aria-pressed={selected}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault()
+          onClick()
+        }
+      }}
+      style={loading ? { opacity: 0.5 } : undefined}
+    >
+      <span className="xx-voice-choice-check">✓</span>
+      <div className="xx-voice-choice-avatar" style={avatarStyle}>
+        {avatar}
+      </div>
+      <div className="xx-voice-choice-info">
+        <h4>{title}</h4>
+        {description && <p>{description}</p>}
+      </div>
+    </div>
+  )
+}
+
+export default VoiceChoiceCard
diff --git a/apps/web/src/pages/generate/components/voice/VoiceRecommendSection.tsx b/apps/web/src/pages/generate/components/voice/VoiceRecommendSection.tsx
new file mode 100644
index 000000000..d183b14e5
--- /dev/null
+++ b/apps/web/src/pages/generate/components/voice/VoiceRecommendSection.tsx
@@ -0,0 +1,100 @@
+/**
+ * AI 智能推荐配音区域
+ */
+import React from "react"
+import { LoadingOutlined, CheckCircleFilled } from "@ant-design/icons"
+import type { PresetVoiceItem } from "@/api/voices"
+
+interface VoiceRecommendSectionProps {
+  presetVoices: PresetVoiceItem[]
+  voiceRecommendLoading: boolean
+  voiceRecommendations: string[]
+  hasVoiceRecommend: boolean
+  onRecommend: () => void
+  onSelectVoice: (voiceId: string) => void
+  selectedVoiceId: string
+  voiceMode: "preset" | "custom" | "clone"
+  VOICE_GENDER_ICON: Record<string, string>
+}
+
+const VoiceRecommendSection: React.FC<VoiceRecommendSectionProps> = ({
+  presetVoices,
+  voiceRecommendLoading,
+  voiceRecommendations,
+  hasVoiceRecommend,
+  onRecommend,
+  onSelectVoice,
+  selectedVoiceId,
+  voiceMode,
+  VOICE_GENDER_ICON,
+}) => {
+  return (
+    <div className="xx-voice-recommend-section">
+      <div className="xx-voice-recommend-header">
+        <span className="xx-voice-recommend-label">✨ AI 智能推荐</span>
+        <button
+          type="button"
+          className="xx-btn xx-btn-primary xx-btn-sm"
+          onClick={onRecommend}
+          disabled={voiceRecommendLoading}
+        >
+          {voiceRecommendLoading ? (
+            <>
+              <LoadingOutlined style={{ marginRight: 6 }} />
+              推荐中
+            </>
+          ) : hasVoiceRecommend ? (
+            "换一批"
+          ) : (
+            "智能推荐"
+          )}
+        </button>
+      </div>
+
+      {voiceRecommendLoading && (
+        <div className="xx-voice-recommend-loading">
+          <LoadingOutlined style={{ color: "var(--primary-color)", marginRight: 8 }} />
+          根据视频内容为你匹配最合适的音色…
+        </div>
+      )}
+
+      {!voiceRecommendLoading && hasVoiceRecommend && voiceRecommendations.length > 0 && (
+        <div className="xx-voice-recommend-list">
+          {voiceRecommendations.map((voiceId) => {
+            const v = presetVoices.find((pv) => pv.voice_id === voiceId)
+            if (!v) return null
+            const isSelected = voiceMode === "preset" && selectedVoiceId === v.voice_id
+            return (
+              <div
+                key={v.voice_id}
+                className={`xx-voice-recommend-card ${isSelected ? "selected" : ""}`}
+                onClick={() => onSelectVoice(v.voice_id)}
+              >
+                <div className="xx-voice-recommend-avatar">
+                  {VOICE_GENDER_ICON[v.gender] ?? "✨"}
+                </div>
+                <div className="xx-voice-recommend-info">
+                  <div className="xx-voice-recommend-name">{v.name}</div>
+                  <div className="xx-voice-recommend-desc">{v.description}</div>
+                </div>
+                {isSelected && (
+                  <div className="xx-voice-recommend-check">
+                    <CheckCircleFilled style={{ color: "#fff", fontSize: 16 }} />
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {!voiceRecommendLoading && !hasVoiceRecommend && (
+        <div className="xx-voice-recommend-empty">
+          <span>点击「智能推荐」，AI 根据视频内容匹配音色</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default VoiceRecommendSection
diff --git a/apps/web/src/pages/generate/hooks/useStep2Materials.ts b/apps/web/src/pages/generate/hooks/useStep2Materials.ts
index f5cd377b2..127654bfd 100644
--- a/apps/web/src/pages/generate/hooks/useStep2Materials.ts
+++ b/apps/web/src/pages/generate/hooks/useStep2Materials.ts
@@ -7,7 +7,7 @@ import { message } from "antd"
 import { useQuery } from "@tanstack/react-query"
 import { getAssets, getAssetLibraries } from "@/api/assets"
 import type { AssetItem } from "@/api/assets"
-import { formatDuration } from "@/api/voice-clone"
+import { formatDuration } from "../utils/formatDuration"
 import { SMART_MATCH_REASONS } from "../constants"
 
 interface SmartMatchedResult {
diff --git a/apps/web/src/pages/generate/hooks/useStep5Voice.tsx b/apps/web/src/pages/generate/hooks/useStep5Voice.tsx
index d7affbac3..cf6dea7fe 100644
--- a/apps/web/src/pages/generate/hooks/useStep5Voice.tsx
+++ b/apps/web/src/pages/generate/hooks/useStep5Voice.tsx
@@ -10,7 +10,7 @@ import type { PresetVoiceItem } from "@/api/voices"
 import { fetchPresetVoices } from "@/api/voices"
 import { synthesizeSpeech, getTTSJobStatus, saveTtsToLibrary } from "@/api/tts"
 import { getTags, createTag } from "@/api/tags"
-import { formatDuration } from "@/api/voice-clone"
+import { formatDuration } from "../utils/formatDuration"
 import type { VoiceClone } from "@/api/voice-clone"
 import { VOICE_GENDER_ICON, CLONE_STATUS_CONFIG } from "../constants"
 
diff --git a/apps/web/src/pages/generate/utils/formatDuration.ts b/apps/web/src/pages/generate/utils/formatDuration.ts
new file mode 100644
index 000000000..82ca952b8
--- /dev/null
+++ b/apps/web/src/pages/generate/utils/formatDuration.ts
@@ -0,0 +1,9 @@
+/**
+ * 时长格式化工具
+ * 秒数转分秒格式，如 65 -> "1:05"
+ */
+export const formatDuration = (seconds: number): string => {
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `${m}:${String(s).padStart(2, "0")}`
+}
-- 
2.54.0


From 45e954d1a8faa25258c59da90b07a693be62348c Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Fri, 24 Jul 2026 18:59:37 +0800
Subject: [PATCH 2/2] test: add generate module smoke test for vitest related
 coverage

---
 .../src/test/pages/generate/smoke.test.tsx    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 apps/web/src/test/pages/generate/smoke.test.tsx

diff --git a/apps/web/src/test/pages/generate/smoke.test.tsx b/apps/web/src/test/pages/generate/smoke.test.tsx
new file mode 100644
index 000000000..4cde0b262
--- /dev/null
+++ b/apps/web/src/test/pages/generate/smoke.test.tsx
@@ -0,0 +1,35 @@
+/**
+ * GeneratePage 模块 smoke test
+ * 建立完整依赖链，确保 vitest related 模式能匹配到
+ * generate 目录下所有文件的改动（包括 Phase 3 子组件）
+ */
+import { describe, it, expect } from "vitest"
+
+// 直接引入所有 Step 组件，建立完整依赖链
+import "@/pages/generate/GeneratePage"
+import "@/pages/generate/components/Step2MaterialSelect"
+import "@/pages/generate/components/Step4TitleSettings"
+import "@/pages/generate/components/Step5VoiceSelect"
+import "@/pages/generate/components/voice/VoiceRecommendSection"
+import "@/pages/generate/components/voice/VoiceChoiceCard"
+import "@/pages/generate/components/voice/PresetVoiceDetail"
+import "@/pages/generate/components/voice/CustomVoicePanel"
+import "@/pages/generate/components/voice/SaveVoiceModal"
+import "@/pages/generate/components/voice/CloneVoiceSection"
+import "@/pages/generate/components/material/MaterialModeTabs"
+import "@/pages/generate/components/material/ManualMaterialList"
+import "@/pages/generate/components/material/SmartMatchInput"
+import "@/pages/generate/components/material/SmartMatchResults"
+import "@/pages/generate/components/material/SmartMatchCard"
+import "@/pages/generate/components/title/AiTitleGenerator"
+import "@/pages/generate/components/title/AiTitleCard"
+import "@/pages/generate/components/title/TitleStylePanel"
+import "@/pages/generate/components/title/TitlePresetsGrid"
+import "@/pages/generate/utils/formatDuration"
+
+describe("GeneratePage module smoke test", () => {
+  it("should load all generate modules", () => {
+    // 纯模块加载测试，确保所有组件/工具函数能正常 import
+    expect(true).toBe(true)
+  })
+})
-- 
2.54.0