feat(scripts): #1893 文案库对接三个AI能力（抖音提取/AI改写/AI生成标题） (#1935)

feat(scripts): #1893 AI能力对接（抖音提取/AI改写/AI生成标题）

apps/web/src/pages/scripts/ScriptLibrary.tsx

@@ -1,13 +1,17 @@
 /**
- * 文案库页面 — Issue #1811（v2 完整版）
+ * 文案库页面 — Issue #1811（v2 完整版） + #1893 AI 能力
  * 功能：
  * - 列表页：卡片列表，搜索（标题/正文）、分类标签筛选、分页
  *   每条卡片展示：title、content 前 100 字摘要、title_text、分类 Tag、tags、使用次数、时间
  *   操作：编辑 / 删除 / 复制 / 使用（跳创作页预填）
  * - 新建/编辑弹窗：title、content 多行、segments（按空行自动拆分+手动编辑）、title_text、title_category、
  *   title_config（字体/颜色/位置/字号）、tags
+ * - #1893 AI 能力：
+ *   - 顶部「🎬 从抖音提取」按钮 → 输入抖音链接 → ASR 提取文案 → 自动填充到新建弹窗
+ *   - 新建/编辑弹窗中 content 下方「✨ AI 改写」按钮（带风格选择） → 对比弹窗让用户确认
+ *   - title 旁「✨ AI 生成标题」按钮 → 候选列表一键填入
  * - 删除确认（Popconfirm）
- * - 对接 api/scripts CRUD（mock 阶段 SCRIPTS_API_MOCK=true）
+ * - 对接 api/scripts CRUD（mock 阶段 SCRIPTS_API_MOCK=true，AI 接口始终走真实 API）
  *
  * 风格对齐标题库（.xx-scripts-* 命名，沿用 CSS 变量）
  */
@@ -19,12 +23,15 @@ import {
   Form,
   Input,
   InputNumber,
+  List,
   Modal,
   Pagination,
   Popconfirm,
   Select,
   Space,
+  Spin,
   Tag,
+  Typography,
   message,
 } from "antd"
 import {
@@ -35,6 +42,9 @@ import {
   PlayCircleOutlined,
   SearchOutlined,
   TagsOutlined,
+  VideoCameraOutlined,
+  RobotOutlined,
+  BulbOutlined,
 } from "@ant-design/icons"
 import { useNavigate } from "react-router-dom"
 import {
@@ -43,12 +53,23 @@ import {
   updateScript,
   deleteScript,
   duplicateScript,
+  extractScriptFromDouyin,
+  aiRewriteScript,
+  aiGenerateTitles,
+  REWRITE_STYLE_OPTIONS,
+} from "@/api/scripts"
+import type {
+  ScriptItem,
+  ScriptCategory,
+  ScriptUpsertRequest,
+  RewriteStyle,
+  AiRewriteResponse,
 } from "@/api/scripts"
-import type { ScriptItem, ScriptCategory, ScriptUpsertRequest } from "@/api/scripts"
 import { SCRIPT_CATEGORY_LABEL } from "@/api/scripts"
 import "./scripts.css"
 
 const { TextArea } = Input
+const { Paragraph, Text } = Typography
 
 const PAGE_SIZE = 12
 const CATEGORY_OPTIONS: { value: ScriptCategory | "all"; label: string }[] = [
@@ -72,6 +93,22 @@ const POSITION_OPTIONS = [
   { value: "bottom", label: "底部" },
 ] as const
 
+/** 提取后端返回的错误 detail（全局拦截器可能已弹 toast，但这里再兜一层） */
+function extractErrMsg(err: unknown, fallback: string): string {
+  const e = err as {
+    response?: { data?: { detail?: string | { message?: string }; message?: string } }
+    message?: string
+  }
+  const data = e?.response?.data
+  if (data?.detail) {
+    if (typeof data.detail === "string") return data.detail
+    if (typeof data.detail.message === "string") return data.detail.message
+  }
+  if (data?.message && typeof data.message === "string") return data.message
+  if (e?.message) return e.message
+  return fallback
+}
+
 const ScriptLibrary: React.FC = () => {
   const navigate = useNavigate()
 
@@ -82,12 +119,28 @@ const ScriptLibrary: React.FC = () => {
   const [keyword, setKeyword] = useState("")
   const [category, setCategory] = useState<ScriptCategory | "all">("all")
 
-  // 弹窗状态
+  // 主弹窗状态
   const [modalOpen, setModalOpen] = useState(false)
   const [editing, setEditing] = useState<ScriptItem | null>(null)
   const [submitting, setSubmitting] = useState(false)
   const [form] = Form.useForm<ScriptUpsertRequest & { tags_text?: string }>()
 
+  // ── #1893 AI 能力状态 ──
+  // 抖音提取
+  const [douyinModalOpen, setDouyinModalOpen] = useState(false)
+  const [douyinUrl, setDouyinUrl] = useState("")
+  const [douyinLoading, setDouyinLoading] = useState(false)
+
+  // AI 改写
+  const [rewriteModalOpen, setRewriteModalOpen] = useState(false)
+  const [rewriteStyle, setRewriteStyle] = useState<RewriteStyle>("口语化")
+  const [rewriteLoading, setRewriteLoading] = useState(false)
+  const [rewriteResult, setRewriteResult] = useState<AiRewriteResponse | null>(null)
+
+  // AI 生成标题
+  const [titleGenLoading, setTitleGenLoading] = useState(false)
+  const [titleCandidates, setTitleCandidates] = useState<string[]>([])
+
   const load = useCallback(async () => {
     setLoading(true)
     try {
@@ -97,7 +150,6 @@ const ScriptLibrary: React.FC = () => {
         keyword: keyword.trim() || undefined,
         category,
       })
-      // 兼容老接口返回数组的兜底
       if (Array.isArray(res)) {
         setItems(res)
         setTotal(res.length)
@@ -106,8 +158,7 @@ const ScriptLibrary: React.FC = () => {
         setTotal(res.total ?? 0)
       }
     } catch (err) {
-      const e = err as { message?: string }
-      message.error(e?.message ?? "加载文案列表失败")
+      message.error(extractErrMsg(err, "加载文案列表失败"))
     } finally {
       setLoading(false)
     }
@@ -117,8 +168,7 @@ const ScriptLibrary: React.FC = () => {
     load()
   }, [load])
 
-  const openCreate = () => {
-    setEditing(null)
+  const resetCreateForm = () => {
     form.resetFields()
     form.setFieldsValue({
       title: "",
@@ -137,6 +187,13 @@ const ScriptLibrary: React.FC = () => {
         italic: false,
       },
     })
+    setRewriteResult(null)
+    setTitleCandidates([])
+  }
+
+  const openCreate = () => {
+    setEditing(null)
+    resetCreateForm()
     setModalOpen(true)
   }
 
@@ -157,12 +214,16 @@ const ScriptLibrary: React.FC = () => {
         size: 48,
       },
     })
+    setRewriteResult(null)
+    setTitleCandidates([])
     setModalOpen(true)
   }
 
   const closeModal = () => {
     setModalOpen(false)
     setEditing(null)
+    setRewriteResult(null)
+    setTitleCandidates([])
   }
 
   /** 提交新建/编辑 */
@@ -189,10 +250,8 @@ const ScriptLibrary: React.FC = () => {
       closeModal()
       await load()
     } catch (err) {
-      // form 校验失败不弹 message
       if ((err as { errorFields?: unknown })?.errorFields) return
-      const e = err as { message?: string }
-      message.error(e?.message ?? "保存失败")
+      message.error(extractErrMsg(err, "保存失败"))
     } finally {
       setSubmitting(false)
     }
@@ -202,15 +261,13 @@ const ScriptLibrary: React.FC = () => {
     try {
       await deleteScript(id)
       message.success("文案已删除")
-      // 删除后若当前页空了，回退一页
       if (items.length === 1 && page > 1) {
         setPage(page - 1)
       } else {
         await load()
       }
     } catch (err) {
-      const e = err as { message?: string }
-      message.error(e?.message ?? "删除失败")
+      message.error(extractErrMsg(err, "删除失败"))
     }
   }
 
@@ -221,8 +278,7 @@ const ScriptLibrary: React.FC = () => {
       setPage(1)
       await load()
     } catch (err) {
-      const e = err as { message?: string }
-      message.error(e?.message ?? "复制失败")
+      message.error(extractErrMsg(err, "复制失败"))
     }
   }
 
@@ -254,6 +310,118 @@ const ScriptLibrary: React.FC = () => {
     other: "default",
   }
 
+  // ── #1893 AI 操作 ──
+
+  /** 打开抖音提取弹窗 */
+  const openDouyinModal = () => {
+    setDouyinUrl("")
+    setDouyinModalOpen(true)
+  }
+
+  /** 执行抖音提取，成功后打开新建弹窗并预填 content */
+  const handleDouyinExtract = async () => {
+    const url = douyinUrl.trim()
+    if (!url) {
+      message.warning("请粘贴抖音视频链接")
+      return
+    }
+    if (!/^https?:\/\//i.test(url)) {
+      message.warning("请输入以 http(s):// 开头的完整链接")
+      return
+    }
+    setDouyinLoading(true)
+    try {
+      const res = await extractScriptFromDouyin({ url })
+      message.success(`提取成功${res.duration_seconds ? `（时长 ${res.duration_seconds}s）` : ""}`)
+      setDouyinModalOpen(false)
+      setDouyinUrl("")
+      // 关闭抖音弹窗，打开新建弹窗预填 content
+      setEditing(null)
+      resetCreateForm()
+      form.setFieldsValue({
+        title: "",
+        content: res.text,
+        tags: [],
+        title_text: "",
+        title_category: "other",
+        title_config: {
+          font: "default",
+          color: "#ffffff",
+          stroke: "#000000",
+          position: "center",
+          size: 48,
+          bold: true,
+          italic: false,
+        },
+      })
+      setModalOpen(true)
+    } catch (err) {
+      message.error(extractErrMsg(err, "抖音文案提取失败"))
+    } finally {
+      setDouyinLoading(false)
+    }
+  }
+
+  /** 执行 AI 改写，结果写入 rewriteResult 让用户对比确认 */
+  const handleAiRewrite = async () => {
+    const content = form.getFieldValue("content") as string | undefined
+    if (!content || !content.trim()) {
+      message.warning("请先填写文案正文再改写")
+      return
+    }
+    setRewriteLoading(true)
+    setRewriteResult(null)
+    try {
+      const res = await aiRewriteScript({ content, style: rewriteStyle })
+      setRewriteResult(res)
+    } catch (err) {
+      message.error(extractErrMsg(err, "AI 改写失败"))
+    } finally {
+      setRewriteLoading(false)
+    }
+  }
+
+  /** 应用改写结果：替换 content 字段，关闭改写弹窗 */
+  const applyRewrite = () => {
+    if (!rewriteResult) return
+    form.setFieldsValue({ content: rewriteResult.rewritten })
+    setRewriteResult(null)
+    setRewriteModalOpen(false)
+    message.success("已应用改写结果")
+  }
+
+  /** 执行 AI 生成标题，生成候选 */
+  const handleGenerateTitles = async () => {
+    const content = form.getFieldValue("content") as string | undefined
+    if (!content || !content.trim()) {
+      message.warning("请先填写文案内容")
+      return
+    }
+    setTitleGenLoading(true)
+    setTitleCandidates([])
+    try {
+      const res = await aiGenerateTitles({ content, count: 3 })
+      if (!res.titles || res.titles.length === 0) {
+        message.info("AI 未返回可用标题，请稍后再试")
+        return
+      }
+      setTitleCandidates(res.titles)
+    } catch (err) {
+      message.error(extractErrMsg(err, "AI 生成标题失败"))
+    } finally {
+      setTitleGenLoading(false)
+    }
+  }
+
+  /** 点击候选标题直接填入 title 字段 */
+  const pickTitle = (t: string) => {
+    form.setFieldsValue({ title: t })
+  }
+
+  // 监听 content 字段，用于禁用生成标题按钮（content 为空时）
+  const watchedContent = Form.useWatch("content", form)
+  const contentEmpty = !watchedContent || !String(watchedContent).trim()
+
   return (
     <div className="xx-scripts-page">
       <div className="xx-scripts-layout">
@@ -282,6 +450,9 @@ const ScriptLibrary: React.FC = () => {
             />
           </Space>
           <div className="xx-scripts-filters-right">
+            <Button icon={<VideoCameraOutlined />} onClick={openDouyinModal}>
+              🎬 从抖音提取
+            </Button>
             <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
               新建文案
             </Button>
@@ -296,7 +467,7 @@ const ScriptLibrary: React.FC = () => {
             description={
               keyword || category !== "all"
                 ? "没有匹配的文案"
-                : "暂无文案，点击右上角「新建文案」开始创作"
+                : "暂无文案，点击右上角「新建文案」或「🎬 从抖音提取」开始创作"
             }
           />
         ) : (
@@ -430,12 +601,49 @@ const ScriptLibrary: React.FC = () => {
         >
           <Form.Item
             name="title"
-            label="名称"
+            label={
+              <span>
+                名称
+                <Button
+                  type="link"
+                  size="small"
+                  icon={<BulbOutlined />}
+                  loading={titleGenLoading}
+                  disabled={contentEmpty}
+                  onClick={handleGenerateTitles}
+                  title={contentEmpty ? "请先填写文案内容" : "基于正文 AI 生成 3 个候选标题"}
+                  style={{ padding: "0 4px", marginLeft: 4, height: 22 }}
+                >
+                  ✨ AI 生成标题
+                </Button>
+              </span>
+            }
             rules={[{ required: true, message: "请填写文案名称" }, { max: 200 }]}
           >
             <Input placeholder="给这段文案起个名字" maxLength={200} />
           </Form.Item>
 
+          {/* AI 生成标题候选列表 */}
+          {titleCandidates.length > 0 && (
+            <div className="xx-ai-title-candidates">
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                点击候选直接填入：
+              </Text>
+              <div className="xx-ai-title-list">
+                {titleCandidates.map((t, i) => (
+                  <Tag
+                    key={`${t}-${i}`}
+                    color="purple"
+                    className="xx-ai-title-tag"
+                    onClick={() => pickTitle(t)}
+                  >
+                    {t}
+                  </Tag>
+                ))}
+              </div>
+            </div>
+          )}
+
           <Form.Item
             name="content"
             label="正文"
@@ -445,6 +653,32 @@ const ScriptLibrary: React.FC = () => {
             <TextArea placeholder="在这里输入文案正文…" rows={6} maxLength={10000} />
           </Form.Item>
 
+          {/* AI 改写工具条 */}
+          <div className="xx-ai-rewrite-bar">
+            <Space size={8} wrap>
+              <Select
+                value={rewriteStyle}
+                onChange={setRewriteStyle}
+                options={REWRITE_STYLE_OPTIONS}
+                style={{ width: 110 }}
+                size="small"
+              />
+              <Button
+                size="small"
+                icon={<RobotOutlined />}
+                loading={rewriteLoading}
+                onClick={() => setRewriteModalOpen(true)}
+              >
+                ✨ AI 改写
+              </Button>
+              {rewriteResult && (
+                <Button size="small" type="link" onClick={() => setRewriteModalOpen(true)}>
+                  查看上一次改写结果
+                </Button>
+              )}
+            </Space>
+          </div>
+
           <Form.Item name="segments" hidden>
             <Input />
           </Form.Item>
@@ -510,6 +744,110 @@ const ScriptLibrary: React.FC = () => {
           </Form.Item>
         </Form>
       </Modal>
+
+      {/* 抖音提取弹窗 */}
+      <Modal
+        title="🎬 从抖音视频提取文案"
+        open={douyinModalOpen}
+        onCancel={() => !douyinLoading && setDouyinModalOpen(false)}
+        onOk={handleDouyinExtract}
+        confirmLoading={douyinLoading}
+        okText="开始提取"
+        cancelText="取消"
+        maskClosable={!douyinLoading}
+        closable={!douyinLoading}
+        destroyOnClose
+      >
+        <Paragraph type="secondary" style={{ marginBottom: 12, fontSize: 13 }}>
+          粘贴抖音分享链接（支持 v.douyin.com 短链和 www.douyin.com/video/ 长链）， AI
+          将自动下载音频并识别文案。首次识别可能需要 5-15 秒。
+        </Paragraph>
+        <Input.TextArea
+          placeholder="例如：https://v.douyin.com/xxxxx/ 或 https://www.douyin.com/video/xxxxx"
+          value={douyinUrl}
+          onChange={(e) => setDouyinUrl(e.target.value)}
+          rows={2}
+          autoSize={{ minRows: 2, maxRows: 4 }}
+          disabled={douyinLoading}
+        />
+        {douyinLoading && (
+          <div className="xx-ai-loading-hint">
+            <Spin size="small" style={{ marginRight: 8 }} />
+            正在下载视频并识别文案，可能需要数秒，请稍候…
+          </div>
+        )}
+      </Modal>
+
+      {/* AI 改写对比弹窗 */}
+      <Modal
+        title={`✨ AI 改写（${rewriteStyle}风格）`}
+        open={rewriteModalOpen}
+        onCancel={() => setRewriteModalOpen(false)}
+        footer={
+          rewriteResult ? (
+            <Space>
+              <Button onClick={() => setRewriteModalOpen(false)}>保留原文</Button>
+              <Button type="primary" onClick={applyRewrite}>
+                应用改写
+              </Button>
+            </Space>
+          ) : (
+            <Button onClick={() => setRewriteModalOpen(false)}>关闭</Button>
+          )
+        }
+        width={640}
+        destroyOnClose={false}
+      >
+        {!rewriteResult && !rewriteLoading && (
+          <Paragraph type="secondary" style={{ marginBottom: 16 }}>
+            将以「{rewriteStyle}」风格改写正文，生成后可对比确认是否应用。
+          </Paragraph>
+        )}
+        {rewriteLoading && (
+          <div className="xx-ai-loading-hint" style={{ padding: "32px 0" }}>
+            <Spin tip="AI 改写中…" />
+          </div>
+        )}
+        {rewriteResult && (
+          <List
+            dataSource={[
+              { label: "原文", text: rewriteResult.original, type: "original" },
+              {
+                label: `改写（${rewriteResult.style}）`,
+                text: rewriteResult.rewritten,
+                type: "rewrite",
+              },
+            ]}
+            renderItem={(item) => (
+              <List.Item className="xx-ai-rewrite-item">
+                <div className="xx-ai-rewrite-block">
+                  <div className="xx-ai-rewrite-label">
+                    <Tag color={item.type === "original" ? "default" : "purple"}>{item.label}</Tag>
+                  </div>
+                  <Paragraph
+                    className="xx-ai-rewrite-text"
+                    style={{ whiteSpace: "pre-wrap", marginBottom: 0 }}
+                  >
+                    {item.text}
+                  </Paragraph>
+                </div>
+              </List.Item>
+            )}
+          />
+        )}
+        {!rewriteResult && !rewriteLoading && (
+          <div style={{ textAlign: "center" }}>
+            <Button
+              type="primary"
+              icon={<RobotOutlined />}
+              loading={rewriteLoading}
+              onClick={handleAiRewrite}
+            >
+              开始改写
+            </Button>
+          </div>
+        )}
+      </Modal>
     </div>
   )
 }