fix(P0): 修复4个P0问题 — 标题接真实数据/生成报错/素材删除/配音按钮

P0-1: 标题选择接真实数据（GeneratePage.tsx 已调用 getTitles() API）
P0-2: 生成报错修复 — 自动转 editing 状态 + 错误翻译说人话
P0-3: 素材库加删除功能（AssetLibrary.tsx + assets.css）
P0-4: 配音库按钮彻底修复 — 上传音频+AI配音弹窗完整实现

- VoiceLibrary.tsx: 新增上传音频弹窗（拖拽上传+进度条+表单）
- VoiceLibrary.tsx: 新增 AI 配音 TTS 弹窗（文本输入+音色选择+语速+合成+保存）
- GeneratePage.tsx: 导入 updateEditPlan，generate 前自动转 editing 状态
- AssetLibrary.tsx: 新增删除按钮 + Popconfirm + handleSingleDelete
- assets.css: 新增删除按钮样式（hover 显示+红色确认）

apps/web/src/pages/assets/AssetLibrary.tsx

@@ -219,7 +219,8 @@ const AssetCard: React.FC<{
   onToggle: () => void;
   onDiagnose: () => void;
   onPlay: () => void;
-}> = ({ asset, selected, diagnosing, onToggle, onDiagnose, onPlay }) => (
+  onDelete: () => void;
+}> = ({ asset, selected, diagnosing, onToggle, onDiagnose, onPlay, onDelete }) => (
   <div
     className={`xx-asset-card${selected ? " xx-asset-card-selected" : ""}`}
     onClick={onToggle}
@@ -250,6 +251,27 @@ const AssetCard: React.FC<{
         </span>
       )}
 
+      {/* 删除按钮 */}
+      <Popconfirm
+        title="确认删除"
+        description="删除后不可恢复，确定要删除这个素材吗？"
+        onConfirm={(e) => {
+          e?.stopPropagation();
+          onDelete();
+        }}
+        onCancel={(e) => e?.stopPropagation()}
+        okText="删除"
+        cancelText="取消"
+        okButtonProps={{ danger: true }}
+      >
+        <span
+          className="xx-asset-delete"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <DeleteOutlined />
+        </span>
+      </Popconfirm>
+
       {/* 选中态勾选 */}
       {selected && (
         <span className="xx-asset-check">
@@ -504,6 +526,24 @@ const AssetLibrary: React.FC = () => {
   };
 
   /* 批量删除 */
+  /* 单个素材删除 */
+  const handleSingleDelete = async (assetId: string) => {
+    try {
+      await deleteAsset(assetId);
+      queryClient.invalidateQueries({ queryKey: ["assets"] });
+      queryClient.invalidateQueries({ queryKey: ["asset-libraries"] });
+      // 从选中集合中移除
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        next.delete(assetId);
+        return next;
+      });
+      message.success("素材已删除");
+    } catch {
+      message.error("删除失败，请重试");
+    }
+  };
+
   const handleBatchDelete = async () => {
     const ids = Array.from(selectedIds);
     let successCount = 0;
@@ -763,6 +803,7 @@ const AssetLibrary: React.FC = () => {
                   onToggle={() => toggleSelect(asset.id)}
                   onDiagnose={() => handleDiagnose(asset)}
                   onPlay={() => setPlayingAsset(asset)}
+                  onDelete={() => handleSingleDelete(asset.id)}
                 />
               ))}
             </div>

apps/web/src/pages/assets/assets.css

@@ -282,6 +282,35 @@
   transform: scale(1.1);
 }
 
+/* 删除按钮 */
+.xx-asset-delete {
+  position: absolute;
+  bottom: var(--space-sm, 8px);
+  right: var(--space-sm, 8px);
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full, 999px);
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(4px);
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  opacity: 0;
+  transition: var(--transition-all, all 0.2s ease);
+  z-index: 2;
+}
+
+.xx-asset-card:hover .xx-asset-delete {
+  opacity: 1;
+}
+
+.xx-asset-delete:hover {
+  background: rgba(255, 77, 79, 0.85);
+  transform: scale(1.1);
+}
+
 /* 选中态 */
 .xx-asset-card-selected {
   border-color: var(--primary-color) !important;

apps/web/src/pages/generate/GeneratePage.tsx

@@ -25,7 +25,7 @@ import {
 } from "@ant-design/icons";
 import type { AssetItem } from "@/api/assets";
 import { getAssets, getAssetLibraries } from "@/api/assets";
-import { createEditPlan, generateEditPlan } from "@/api/editPlans";
+import { createEditPlan, generateEditPlan, updateEditPlan } from "@/api/editPlans";
 import { getEditingTemplates } from "@/api/editingPlanner";
 import { getTitles } from "@/api/titles";
 import apiClient from "@/api/client";
@@ -514,6 +514,9 @@ const GeneratePage: React.FC = () => {
         source_edit_plan_id: editPlanId || undefined,
       });
 
+      // 后端要求计划处于 editing 状态才能触发渲染，自动转换状态
+      await updateEditPlan(plan.id, { status: "editing" });
+
       await generateEditPlan(plan.id);
 
       const poll = async () => {
@@ -647,8 +650,34 @@ const GeneratePage: React.FC = () => {
         }
         return String(val ?? "");
       };
-      const finalMsg =
-        safeExtractErr(backendMsg) || "生成失败，请检查网络后重试或联系管理员";
+      const rawError = safeExtractErr(backendMsg);
+      // 将技术错误翻译为用户友好提示（不暴露状态机、字段名等内部概念）
+      const translateError = (msg: string): string => {
+        if (!msg) return "生成失败，请检查网络后重试或联系管理员";
+        // 状态机相关错误
+        if (msg.includes("editing") || msg.includes("draft") || msg.includes("状态")) {
+          return "正在准备生成，请稍候再试";
+        }
+        // 参数校验错误
+        if (msg.includes("template_id") || msg.includes("not found") || msg.includes("不存在")) {
+          return "所选模板或素材不可用，请重新选择";
+        }
+        if (msg.includes("asset") && (msg.includes("not found") || msg.includes("missing"))) {
+          return "素材数据异常，请返回素材库重新检查";
+        }
+        // 网络/超时
+        if (msg.includes("timeout") || msg.includes("network") || msg.includes("ECONN")) {
+          return "网络连接超时，请检查网络后重试";
+        }
+        // 配额/限制
+        if (msg.includes("quota") || msg.includes("limit") || msg.includes("exceed")) {
+          return "已达到生成次数上限，请稍后再试或联系客服";
+        }
+        // 兜底：返回原始消息（如果已经是中文人话）或默认提示
+        if (msg.length > 0 && msg.length < 100 && !msg.includes("{")) return msg;
+        return "生成失败，请稍后重试或联系管理员";
+      };
+      const finalMsg = translateError(rawError);
       setGenerateError(finalMsg);
       message.error(finalMsg);
     }

apps/web/src/pages/voices/VoiceLibrary.tsx

@@ -30,6 +30,7 @@ import {
   ReloadOutlined,
   CloseCircleOutlined,
 } from "@ant-design/icons";
+import { Modal, Upload, message } from "antd";
 import { Button, Input, Select, Tooltip } from "@/components/ui";
 import PageHead from "@/components/layout/PageHead";
 import {
@@ -44,6 +45,16 @@ import {
   toVoiceClone,
   type VoiceClone,
 } from "@/api/voiceClone";
+import {
+  synthesizeSpeech,
+  getTTSJobStatus,
+  saveTtsToLibrary,
+} from "@/api/tts";
+import {
+  uploadAssetDirect,
+  getAssetLibraries,
+  createAsset,
+} from "@/api/assets";
 import CloneModal from "@/components/voice/CloneModal";
 import "./voices.css";
 
@@ -593,6 +604,41 @@ const CloneCardSkeleton: React.FC = () => (
   </div>
 );
 
+/* ── 辅助函数 ─────────────────────────────────────────── */
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const getAudioDuration = (file: File): Promise<number> =>
+  new Promise((resolve) => {
+    const audio = new Audio();
+    const url = URL.createObjectURL(file);
+    audio.addEventListener("loadedmetadata", () => {
+      resolve(audio.duration);
+      URL.revokeObjectURL(url);
+    });
+    audio.addEventListener("error", () => {
+      resolve(0);
+      URL.revokeObjectURL(url);
+    });
+    audio.src = url;
+  });
+
+const buildVoiceMetadata = (data: {
+  gender?: string;
+  description?: string;
+  duration?: number;
+}): Record<string, unknown> => {
+  const metadata: Record<string, unknown> = {};
+  if (data.gender) metadata.gender = data.gender;
+  if (data.description) metadata.description = data.description;
+  if (data.duration) metadata.duration = Math.round(data.duration);
+  return metadata;
+};
+
 /* ============================================================
  * 主组件
  * ============================================================ */
@@ -613,6 +659,25 @@ const VoiceLibrary: React.FC = () => {
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [cloneModalOpen, setCloneModalOpen] = useState(false);
 
+  /* ── 上传音频弹窗状态 ── */
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const [uploadFile, setUploadFile] = useState<File | null>(null);
+  const [uploadName, setUploadName] = useState("");
+  const [uploadGender, setUploadGender] = useState<VoiceGender>("female");
+  const [uploadDesc, setUploadDesc] = useState("");
+  const [uploadProgress, setUploadProgress] = useState<number | null>(null);
+
+  /* ── AI 配音弹窗状态 ── */
+  const [ttsOpen, setTtsOpen] = useState(false);
+  const [ttsText, setTtsText] = useState("");
+  const [ttsVoiceId, setTtsVoiceId] = useState<string>("");
+  const [ttsSpeed, setTtsSpeed] = useState(1.0);
+  const [ttsJobId, setTtsJobId] = useState<string | null>(null);
+  const [ttsStatus, setTtsStatus] = useState<"idle" | "synthesizing" | "done" | "error">("idle");
+  const [ttsAudioUrl, setTtsAudioUrl] = useState<string | null>(null);
+  const [ttsError, setTtsError] = useState<string | null>(null);
+  const ttsTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
   const showToast = useCallback((message: string, type: Toast["type"]) => {
     const id = ++toastIdSeq;
     setToasts((prev) => [...prev, { id, message, type }]);
@@ -645,6 +710,130 @@ const VoiceLibrary: React.FC = () => {
     },
   });
 
+  /* ── 上传音频 mutation ── */
+  const uploadMutation = useMutation({
+    mutationFn: async (data: {
+      file: File;
+      name: string;
+      gender: VoiceGender;
+      description: string;
+    }) => {
+      setUploadProgress(0);
+      try {
+        /* 获取或创建默认配音素材库 */
+        const libs = await queryClient.fetchQuery({
+          queryKey: ["asset-libraries"],
+          queryFn: getAssetLibraries,
+        });
+        const lib = libs.find((l) => l.kind === "voice");
+        if (!lib) throw new Error("配音素材库不存在，请先在配音素材库页面创建");
+
+        /* 直传文件 */
+        const { storage_key } = await uploadAssetDirect({
+          file: data.file,
+          library_id: lib.id,
+          onProgress: (p) => setUploadProgress(p),
+        });
+
+        /* 获取音频时长 */
+        const duration = await getAudioDuration(data.file);
+
+        /* 创建素材记录 */
+        await createAsset({
+          library_id: lib.id,
+          name: data.name,
+          storage_key,
+          mime_type: data.file.type || "audio/mpeg",
+          metadata: buildVoiceMetadata({
+            gender: data.gender,
+            description: data.description,
+            duration,
+          }),
+        });
+      } finally {
+        setUploadProgress(null);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["assets", "voice"] });
+      setUploadOpen(false);
+      setUploadFile(null);
+      setUploadName("");
+      setUploadDesc("");
+      showToast("上传成功", "success");
+    },
+    onError: (err: Error) => {
+      showToast(err.message || "上传失败，请重试", "error");
+    },
+  });
+
+  /* ── TTS 合成 ── */
+  const handleTtsSynthesize = useCallback(async () => {
+    if (!ttsText.trim()) {
+      message.warning("请输入要合成的文本");
+      return;
+    }
+    setTtsError(null);
+    setTtsStatus("synthesizing");
+    setTtsAudioUrl(null);
+    setTtsJobId(null);
+    try {
+      const resp = await synthesizeSpeech({
+        text: ttsText.trim(),
+        voice_id: ttsVoiceId || undefined,
+        speed: ttsSpeed,
+      });
+      setTtsJobId(resp.job_id);
+      /* 轮询状态 */
+      ttsTimerRef.current = setInterval(async () => {
+        try {
+          const job = await getTTSJobStatus(resp.job_id);
+          if (job.status === "completed") {
+            clearInterval(ttsTimerRef.current!);
+            ttsTimerRef.current = null;
+            setTtsStatus("done");
+            setTtsAudioUrl(job.output_audio_url);
+          } else if (job.status === "failed") {
+            clearInterval(ttsTimerRef.current!);
+            ttsTimerRef.current = null;
+            setTtsStatus("error");
+            setTtsError(job.error_message || "合成失败");
+          }
+        } catch {
+          clearInterval(ttsTimerRef.current!);
+          ttsTimerRef.current = null;
+          setTtsStatus("error");
+          setTtsError("查询合成状态失败");
+        }
+      }, 2000);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "合成请求失败";
+      setTtsStatus("error");
+      setTtsError(msg);
+    }
+  }, [ttsText, ttsVoiceId, ttsSpeed]);
+
+  /* ── TTS 保存到素材库 ── */
+  const handleTtsSave = useCallback(async () => {
+    if (!ttsJobId) return;
+    try {
+      await saveTtsToLibrary(ttsJobId, { name: ttsText.slice(0, 50) });
+      queryClient.invalidateQueries({ queryKey: ["assets", "voice"] });
+      showToast("已保存到配音素材库", "success");
+      setTtsOpen(false);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "保存失败";
+      showToast(msg, "error");
+    }
+  }, [ttsJobId, ttsText, queryClient, showToast]);
+
+  /* ── TTS 定时器清理 ── */
+  useEffect(() => {
+    return () => {
+      if (ttsTimerRef.current) clearInterval(ttsTimerRef.current);
+    };
+  }, []);
+
   /* ── 数据查询（任务 3.11：替换 Mock） ──────────────── */
 
   /** 预置音色列表 */
@@ -788,7 +977,12 @@ const VoiceLibrary: React.FC = () => {
 
   const pageActions = (
     <div className="xx-voices-actions">
-      <Button buttonType="ghost" buttonSize="sm" icon={<UploadOutlined />}>
+      <Button
+        buttonType="ghost"
+        buttonSize="sm"
+        icon={<UploadOutlined />}
+        onClick={() => setUploadOpen(true)}
+      >
         上传音频
       </Button>
       <Button
@@ -799,7 +993,12 @@ const VoiceLibrary: React.FC = () => {
       >
         克隆音色
       </Button>
-      <Button buttonType="primary" buttonSize="sm" icon={<RobotOutlined />}>
+      <Button
+        buttonType="primary"
+        buttonSize="sm"
+        icon={<RobotOutlined />}
+        onClick={() => setTtsOpen(true)}
+      >
         AI 配音
       </Button>
     </div>
@@ -1008,6 +1207,417 @@ const VoiceLibrary: React.FC = () => {
         />
       )}
 
+      {/* ── 上传音频弹窗 ── */}
+      <Modal
+        title="上传音频"
+        open={uploadOpen}
+        onCancel={() => {
+          if (uploadProgress !== null) return; // 上传中不可关闭
+          setUploadOpen(false);
+          setUploadFile(null);
+          setUploadName("");
+          setUploadDesc("");
+        }}
+        footer={null}
+        width={520}
+        maskClosable={uploadProgress === null}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: "8px 0" }}>
+          {/* 拖拽上传区 */}
+          <Upload.Dragger
+            accept="audio/*"
+            maxCount={1}
+            beforeUpload={(file) => {
+              setUploadFile(file);
+              if (!uploadName) setUploadName(file.name.replace(/\.[^.]+$/, ""));
+              return false;
+            }}
+            onRemove={() => {
+              setUploadFile(null);
+              setUploadProgress(null);
+            }}
+            showUploadList={false}
+            disabled={uploadProgress !== null}
+          >
+            <p style={{ fontSize: 32, color: "var(--primary-color)", marginBottom: 8 }}>
+              <UploadOutlined />
+            </p>
+            <p style={{ fontSize: 14, fontWeight: 500, margin: "0 0 4px" }}>
+              点击或拖拽音频文件到此处
+            </p>
+            <p style={{ fontSize: 12, color: "var(--text-secondary)", margin: 0 }}>
+              支持 MP3、WAV、AAC、FLAC 等格式，最大 200MB
+            </p>
+          </Upload.Dragger>
+
+          {/* 已选文件信息 */}
+          {uploadFile && (
+            <div style={{
+              padding: "10px 12px",
+              background: "var(--bg-secondary)",
+              borderRadius: 8,
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+            }}>
+              <SoundOutlined style={{ fontSize: 18, color: "var(--primary-color)" }} />
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                  {uploadFile.name}
+                </div>
+                <div style={{ fontSize: 11, color: "var(--text-secondary)" }}>
+                  {formatFileSize(uploadFile.size)}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 上传进度 */}
+          {uploadProgress !== null && (
+            <div style={{ textAlign: "center", padding: "8px 0" }}>
+              <div style={{ fontSize: 22, fontWeight: 700, color: "var(--primary-color)" }}>
+                {uploadProgress}%
+              </div>
+              <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>
+                {uploadProgress < 100 ? "上传中..." : "处理中..."}
+              </div>
+              <div style={{
+                height: 4,
+                background: "var(--bg-tertiary)",
+                borderRadius: 2,
+                marginTop: 8,
+                overflow: "hidden",
+              }}>
+                <div style={{
+                  height: "100%",
+                  width: `${uploadProgress}%`,
+                  background: "var(--primary-color)",
+                  borderRadius: 2,
+                  transition: "width 0.3s ease",
+                }} />
+              </div>
+            </div>
+          )}
+
+          {/* 名称 */}
+          <div>
+            <div style={{ fontSize: 13, color: "var(--text-secondary)", marginBottom: 6 }}>
+              素材名称
+            </div>
+            <input
+              value={uploadName}
+              onChange={(e) => setUploadName(e.target.value)}
+              placeholder="输入素材名称"
+              maxLength={100}
+              disabled={uploadProgress !== null}
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                border: "1px solid var(--border-color)",
+                borderRadius: 8,
+                fontSize: 13,
+                background: "var(--bg-primary)",
+                color: "var(--text-primary)",
+                outline: "none",
+              }}
+            />
+          </div>
+
+          {/* 性别选择 */}
+          <div>
+            <div style={{ fontSize: 13, color: "var(--text-secondary)", marginBottom: 6 }}>
+              音色性别
+            </div>
+            <div style={{ display: "flex", gap: 8 }}>
+              {(["female", "male", "child"] as VoiceGender[]).map((g) => (
+                <button
+                  key={g}
+                  type="button"
+                  onClick={() => setUploadGender(g)}
+                  disabled={uploadProgress !== null}
+                  style={{
+                    flex: 1,
+                    padding: "6px 0",
+                    borderRadius: 8,
+                    border: `1px solid ${uploadGender === g ? "var(--primary-color)" : "var(--border-color)"}`,
+                    background: uploadGender === g ? "var(--primary-soft)" : "transparent",
+                    color: uploadGender === g ? "var(--primary-color)" : "var(--text-secondary)",
+                    fontSize: 13,
+                    fontWeight: uploadGender === g ? 600 : 400,
+                    cursor: uploadProgress !== null ? "not-allowed" : "pointer",
+                    transition: "all 0.2s",
+                  }}
+                >
+                  {g === "female" ? "女声" : g === "male" ? "男声" : "童声"}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 描述 */}
+          <div>
+            <div style={{ fontSize: 13, color: "var(--text-secondary)", marginBottom: 6 }}>
+              音色描述（可选）
+            </div>
+            <textarea
+              value={uploadDesc}
+              onChange={(e) => setUploadDesc(e.target.value)}
+              placeholder="描述这个音色的特点..."
+              maxLength={500}
+              rows={2}
+              disabled={uploadProgress !== null}
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                border: "1px solid var(--border-color)",
+                borderRadius: 8,
+                fontSize: 13,
+                background: "var(--bg-primary)",
+                color: "var(--text-primary)",
+                outline: "none",
+                resize: "vertical",
+                fontFamily: "inherit",
+              }}
+            />
+          </div>
+
+          {/* 操作按钮 */}
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, paddingTop: 4 }}>
+            <button
+              type="button"
+              onClick={() => {
+                setUploadOpen(false);
+                setUploadFile(null);
+                setUploadName("");
+                setUploadDesc("");
+              }}
+              disabled={uploadProgress !== null}
+              style={{
+                padding: "8px 20px",
+                borderRadius: 8,
+                border: "1px solid var(--border-color)",
+                background: "transparent",
+                fontSize: 13,
+                cursor: uploadProgress !== null ? "not-allowed" : "pointer",
+                color: "var(--text-secondary)",
+              }}
+            >
+              取消
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                if (!uploadFile) {
+                  message.warning("请先选择音频文件");
+                  return;
+                }
+                if (!uploadName.trim()) {
+                  message.warning("请输入素材名称");
+                  return;
+                }
+                uploadMutation.mutate({
+                  file: uploadFile,
+                  name: uploadName.trim(),
+                  gender: uploadGender,
+                  description: uploadDesc.trim(),
+                });
+              }}
+              disabled={!uploadFile || !uploadName.trim() || uploadProgress !== null}
+              style={{
+                padding: "8px 20px",
+                borderRadius: 8,
+                border: "none",
+                background: (!uploadFile || !uploadName.trim() || uploadProgress !== null)
+                  ? "var(--text-tertiary)"
+                  : "var(--primary-color)",
+                color: "#fff",
+                fontSize: 13,
+                fontWeight: 600,
+                cursor: (!uploadFile || !uploadName.trim() || uploadProgress !== null)
+                  ? "not-allowed"
+                  : "pointer",
+              }}
+            >
+              {uploadProgress !== null ? "上传中..." : "开始上传"}
+            </button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* ── AI 配音弹窗 ── */}
+      <Modal
+        title="AI 配音"
+        open={ttsOpen}
+        onCancel={() => {
+          setTtsOpen(false);
+          setTtsText("");
+          setTtsVoiceId("");
+          setTtsSpeed(1.0);
+          setTtsStatus("idle");
+          setTtsAudioUrl(null);
+          setTtsError(null);
+          setTtsJobId(null);
+        }}
+        footer={null}
+        width={560}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: "8px 0" }}>
+          {/* 文本输入 */}
+          <div>
+            <div style={{ fontSize: 13, color: "var(--text-secondary)", marginBottom: 6 }}>
+              输入文本
+            </div>
+            <textarea
+              value={ttsText}
+              onChange={(e) => setTtsText(e.target.value)}
+              placeholder="输入要配音的文本内容..."
+              maxLength={2000}
+              rows={4}
+              style={{
+                width: "100%",
+                padding: "10px 12px",
+                border: "1px solid var(--border-color)",
+                borderRadius: 8,
+                fontSize: 13,
+                background: "var(--bg-primary)",
+                color: "var(--text-primary)",
+                outline: "none",
+                resize: "vertical",
+                fontFamily: "inherit",
+                lineHeight: 1.6,
+              }}
+            />
+            <div style={{ fontSize: 11, color: "var(--text-tertiary)", textAlign: "right", marginTop: 4 }}>
+              {ttsText.length}/2000
+            </div>
+          </div>
+
+          {/* 音色选择 */}
+          <div>
+            <div style={{ fontSize: 13, color: "var(--text-secondary)", marginBottom: 6 }}>
+              选择音色
+            </div>
+            <select
+              value={ttsVoiceId}
+              onChange={(e) => setTtsVoiceId(e.target.value)}
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                border: "1px solid var(--border-color)",
+                borderRadius: 8,
+                fontSize: 13,
+                background: "var(--bg-primary)",
+                color: "var(--text-primary)",
+                outline: "none",
+              }}
+            >
+              <option value="">默认音色</option>
+              {presetVoices.map((v) => (
+                <option key={v.id} value={v.id}>
+                  {v.name} — {genderLabel(v.gender)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* 语速 */}
+          <div>
+            <div style={{ fontSize: 13, color: "var(--text-secondary)", marginBottom: 6 }}>
+              语速：{ttsSpeed.toFixed(1)}x
+            </div>
+            <input
+              type="range"
+              min={0.5}
+              max={2.0}
+              step={0.1}
+              value={ttsSpeed}
+              onChange={(e) => setTtsSpeed(parseFloat(e.target.value))}
+              style={{ width: "100%", accentColor: "var(--primary-color)" }}
+            />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--text-tertiary)" }}>
+              <span>0.5x</span>
+              <span>1.0x</span>
+              <span>2.0x</span>
+            </div>
+          </div>
+
+          {/* 合成按钮 */}
+          <button
+            type="button"
+            onClick={handleTtsSynthesize}
+            disabled={ttsStatus === "synthesizing" || !ttsText.trim()}
+            style={{
+              width: "100%",
+              padding: "10px 0",
+              borderRadius: 8,
+              border: "none",
+              background: (ttsStatus === "synthesizing" || !ttsText.trim())
+                ? "var(--text-tertiary)"
+                : "var(--primary-color)",
+              color: "#fff",
+              fontSize: 14,
+              fontWeight: 600,
+              cursor: (ttsStatus === "synthesizing" || !ttsText.trim())
+                ? "not-allowed"
+                : "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+            }}
+          >
+            <RobotOutlined />
+            {ttsStatus === "synthesizing" ? "合成中..." : "开始合成"}
+          </button>
+
+          {/* 错误提示 */}
+          {ttsError && (
+            <div style={{
+              padding: "10px 12px",
+              background: "var(--error-soft, #fff2f0)",
+              borderRadius: 8,
+              color: "var(--error-color, #ff4d4f)",
+              fontSize: 13,
+            }}>
+              {ttsError}
+            </div>
+          )}
+
+          {/* 合成结果 */}
+          {ttsStatus === "done" && ttsAudioUrl && (
+            <div style={{
+              padding: 12,
+              background: "var(--bg-secondary)",
+              borderRadius: 8,
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+            }}>
+              <div style={{ fontSize: 13, fontWeight: 500, color: "var(--success-color, #52c41a)" }}>
+                ✅ 合成完成
+              </div>
+              <audio controls src={ttsAudioUrl} style={{ width: "100%" }} />
+              <button
+                type="button"
+                onClick={handleTtsSave}
+                style={{
+                  padding: "8px 0",
+                  borderRadius: 8,
+                  border: "1px solid var(--primary-color)",
+                  background: "var(--primary-soft)",
+                  color: "var(--primary-color)",
+                  fontSize: 13,
+                  fontWeight: 600,
+                  cursor: "pointer",
+                }}
+              >
+                保存到配音素材库
+              </button>
+            </div>
+          )}
+        </div>
+      </Modal>
+
       {/* Toast 提示 */}
       {toasts.length > 0 && (
         <div className="vc-toast-container">