fix(ux): #1894 删除标题库入口 + 文案名称改标题 + AI改写UX + 清理旧定价硬编码 (#1965)

Co-authored-by: xiaoxia <dev@xiaoxiajianji.com>
Co-committed-by: xiaoxia <dev@xiaoxiajianji.com>

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

@@ -1,19 +1,17 @@
 /**
- * 文案库页面 — Issue #1811（v2 完整版） + #1893 AI 能力
+ * 文案库页面 — Issue #1811（#1894 方向修正后）
  * 功能：
  * - 列表页：卡片列表，搜索（标题/正文）、分类标签筛选、分页
- *   每条卡片展示：title、content 前 100 字摘要、title_text、分类 Tag、tags、使用次数、时间
+ *   每条卡片展示：title（标题）、content 前 100 字摘要、分类 Tag、tags、使用次数、时间
  *   操作：编辑 / 删除 / 复制 / 使用（跳创作页预填）
- * - 新建/编辑弹窗：title、content 多行、segments（按空行自动拆分+手动编辑）、title_text、title_category、
- *   title_config（字体/颜色/位置/字号）、tags
- * - #1893 AI 能力：
+ * - 新建/编辑弹窗：标题（原"名称"）、正文（含 AI 改写）、分类、标签
+ * - #1893/#1894 AI 能力：
  *   - 顶部「🎬 从抖音提取」按钮 → 输入抖音链接 → ASR 提取文案 → 自动填充到新建弹窗
- *   - 新建/编辑弹窗中 content 下方「✨ AI 改写」按钮（带风格选择） → 对比弹窗让用户确认
- *   - title 旁「✨ AI 生成标题」按钮 → 候选列表一键填入
+ *   - 正文下方「✨ AI 改写」按钮 → 点击直接执行（美化 loading spinner + "正在改写..."），
+ *     成功自动替换正文并 toast「改写成功」1s 自动关闭；失败 toast 错误
+ *   - 标题旁「✨ AI 生成标题」按钮 → 候选列表一键填入
  * - 删除确认（Popconfirm）
  * - 对接 api/scripts CRUD（mock 阶段 SCRIPTS_API_MOCK=true，AI 接口始终走真实 API）
- *
- * 风格对齐标题库（.xx-scripts-* 命名，沿用 CSS 变量）
  */
 import React, { useCallback, useEffect, useState } from "react"
 import {
@@ -22,8 +20,6 @@ import {
   Empty,
   Form,
   Input,
-  InputNumber,
-  List,
   Modal,
   Pagination,
   Popconfirm,
@@ -59,13 +55,7 @@ import {
   aiGenerateTitles,
   REWRITE_STYLE_OPTIONS,
 } from "@/api/scripts"
-import type {
-  ScriptItem,
-  ScriptCategory,
-  ScriptUpsertRequest,
-  RewriteStyle,
-  AiRewriteResponse,
-} from "@/api/scripts"
+import type { ScriptItem, ScriptCategory, ScriptUpsertRequest, RewriteStyle } from "@/api/scripts"
 import { SCRIPT_CATEGORY_LABEL } from "@/api/scripts"
 import "./scripts.css"
 
@@ -81,19 +71,6 @@ const CATEGORY_OPTIONS: { value: ScriptCategory | "all"; label: string }[] = [
   })),
 ]
 
-const FONT_OPTIONS = [
-  { value: "default", label: "默认" },
-  { value: "bold", label: "粗体" },
-  { value: "handwritten", label: "手写" },
-  { value: "serif", label: "衬线" },
-]
-
-const POSITION_OPTIONS = [
-  { value: "top", label: "顶部" },
-  { value: "center", label: "居中" },
-  { value: "bottom", label: "底部" },
-] as const
-
 /** 提取后端返回的错误 detail（全局拦截器可能已弹 toast，但这里再兜一层） */
 function extractErrMsg(err: unknown, fallback: string): string {
   const e = err as {
@@ -132,11 +109,9 @@ const ScriptLibrary: React.FC = () => {
   const [douyinUrl, setDouyinUrl] = useState("")
   const [douyinLoading, setDouyinLoading] = useState(false)
 
-  // AI 改写
-  const [rewriteModalOpen, setRewriteModalOpen] = useState(false)
+  // AI 改写（#1894: 点击直接执行，美化 loading + 1s 自动关闭 toast，不弹确认弹窗）
   const [rewriteStyle, setRewriteStyle] = useState<RewriteStyle>("口语化")
   const [rewriteLoading, setRewriteLoading] = useState(false)
-  const [rewriteResult, setRewriteResult] = useState<AiRewriteResponse | null>(null)
 
   // AI 生成标题
   const [titleGenLoading, setTitleGenLoading] = useState(false)
@@ -176,19 +151,8 @@ const ScriptLibrary: React.FC = () => {
       content: "",
       segments: [],
       tags: [],
-      title_text: "",
       title_category: "other",
-      title_config: {
-        font: "default",
-        color: "#ffffff",
-        stroke: "#000000",
-        position: "center",
-        size: 48,
-        bold: true,
-        italic: false,
-      },
     })
-    setRewriteResult(null)
     setTitleCandidates([])
   }
 
@@ -205,17 +169,8 @@ const ScriptLibrary: React.FC = () => {
       content: item.content,
       segments: item.segments ?? item.content.split(/\n\n+/).filter(Boolean),
       tags: item.tags ?? [],
-      title_text: item.title_text ?? "",
       title_category: item.title_category ?? "other",
-      title_config: item.title_config ?? {
-        font: "default",
-        color: "#ffffff",
-        stroke: "#000000",
-        position: "center",
-        size: 48,
-      },
     })
-    setRewriteResult(null)
     setTitleCandidates([])
     setModalOpen(true)
   }
@@ -223,7 +178,6 @@ const ScriptLibrary: React.FC = () => {
   const closeModal = () => {
     setModalOpen(false)
     setEditing(null)
-    setRewriteResult(null)
     setTitleCandidates([])
   }
 
@@ -237,9 +191,8 @@ const ScriptLibrary: React.FC = () => {
         content: values.content,
         segments: values.segments?.filter(Boolean) ?? values.content.split(/\n\n+/).filter(Boolean),
         tags: values.tags ?? [],
-        title_text: values.title_text?.trim() || undefined,
         title_category: values.title_category,
-        title_config: values.title_config,
+        // #1894: 配套标题 / 标题样式配置字段已从 UI 移除，后端即将删除，不再传
       }
       if (editing) {
         await updateScript(editing.id, payload)
@@ -343,17 +296,7 @@ const ScriptLibrary: React.FC = () => {
         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) {
@@ -363,18 +306,18 @@ const ScriptLibrary: React.FC = () => {
     }
   }
 
-  /** 执行 AI 改写，结果写入 rewriteResult 让用户对比确认 */
-  const handleAiRewrite = async () => {
+  /** #1894: 执行 AI 改写，完成后自动替换正文并 toast 1 秒关闭 */
+  const handleAiRewrite = async (style: RewriteStyle) => {
     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)
+      const res = await aiRewriteScript({ content, style })
+      form.setFieldsValue({ content: res.rewritten })
+      message.success({ content: "改写成功", duration: 1 })
     } catch (err) {
       message.error(extractErrMsg(err, "AI 改写失败"))
     } finally {
@@ -382,15 +325,6 @@ const ScriptLibrary: React.FC = () => {
     }
   }
 
-  /** 应用改写结果：替换 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
@@ -527,13 +461,6 @@ const ScriptLibrary: React.FC = () => {
 
                   <div className="xx-script-preview">{preview(s.content)}</div>
 
-                  {s.title_text && (
-                    <div className="xx-script-title-text">
-                      <span className="xx-script-label">配套标题：</span>
-                      {s.title_text}
-                    </div>
-                  )}
-
                   {s.tags && s.tags.length > 0 && (
                     <div className="xx-script-tags">
                       <TagsOutlined
@@ -590,21 +517,13 @@ const ScriptLibrary: React.FC = () => {
           layout="vertical"
           initialValues={{
             title_category: "other",
-            title_config: {
-              font: "default",
-              color: "#ffffff",
-              stroke: "#000000",
-              position: "center",
-              size: 48,
-              bold: true,
-            },
           }}
         >
           <Form.Item
             name="title"
             label={
               <span>
-                名称
+                标题
                 {/* #1893 UX: disabled 时原生 title 在 antd Button 上不触发，
                     用 Tooltip + span 包裹保证提示可见 */}
                 <Tooltip
@@ -626,9 +545,9 @@ const ScriptLibrary: React.FC = () => {
                 </Tooltip>
               </span>
             }
-            rules={[{ required: true, message: "请填写文案名称" }, { max: 200 }]}
+            rules={[{ required: true, message: "请填写视频标题" }, { max: 200 }]}
           >
-            <Input placeholder="给这段文案起个名字" maxLength={200} />
+            <Input placeholder="输入视频标题" maxLength={200} />
           </Form.Item>
 
           {/* AI 生成标题候选列表 */}
@@ -661,9 +580,9 @@ const ScriptLibrary: React.FC = () => {
             <TextArea placeholder="在这里输入文案正文…" rows={6} maxLength={10000} />
           </Form.Item>
 
-          {/* AI 改写工具条 */}
+          {/* AI 改写工具条（#1894 UX：点击直接执行，自定义渐变圆环 loading） */}
           <div className="xx-ai-rewrite-bar">
-            <Space size={8} wrap>
+            <Space size={8} wrap align="center">
               <Select
                 value={rewriteStyle}
                 onChange={setRewriteStyle}
@@ -672,30 +591,19 @@ const ScriptLibrary: React.FC = () => {
                 size="small"
                 disabled={rewriteLoading}
               />
-              {/* #1893 UX: content 为空时禁用改写按钮并给提示，避免用户点了才弹 warning */}
-              <Tooltip title={contentEmpty ? "请先填写文案正文再改写" : ""}>
-                <span style={{ display: "inline-flex" }}>
-                  <Button
-                    size="small"
-                    icon={<RobotOutlined />}
-                    loading={rewriteLoading}
-                    disabled={contentEmpty}
-                    onClick={() => {
-                      // 每次打开重置上一次结果，避免误看旧对比
-                      if (!rewriteLoading) {
-                        setRewriteResult(null)
-                        setRewriteModalOpen(true)
-                      }
-                    }}
-                  >
-                    ✨ AI 改写
-                  </Button>
+              <Button
+                size="small"
+                icon={<RobotOutlined />}
+                disabled={contentEmpty || rewriteLoading}
+                onClick={() => handleAiRewrite(rewriteStyle)}
+              >
+                ✨ AI 改写
+              </Button>
+              {rewriteLoading && (
+                <span className="xx-ai-rewrite-loading">
+                  <span className="xx-ai-rewrite-spinner" />
+                  <span className="xx-ai-rewrite-loading-text">正在改写...</span>
                 </span>
-              </Tooltip>
-              {rewriteResult && !contentEmpty && (
-                <Button size="small" type="link" onClick={() => setRewriteModalOpen(true)}>
-                  查看上一次改写结果
-                </Button>
               )}
             </Space>
           </div>
@@ -704,57 +612,6 @@ const ScriptLibrary: React.FC = () => {
             <Input />
           </Form.Item>
 
-          <Form.Item name="title_text" label="配套标题（选填）" rules={[{ max: 200 }]}>
-            <Input placeholder="使用此文案时自动带入的标题文本" maxLength={200} />
-          </Form.Item>
-
-          <Space size={16} style={{ display: "flex" }}>
-            <Form.Item name="title_category" label="分类" style={{ flex: 1, marginBottom: 0 }}>
-              <Select options={CATEGORY_OPTIONS.filter((o) => o.value !== "all")} />
-            </Form.Item>
-            <Form.Item
-              name={["title_config", "position"]}
-              label="标题位置"
-              style={{ flex: 1, marginBottom: 0 }}
-            >
-              <Select options={POSITION_OPTIONS as unknown as { value: string; label: string }[]} />
-            </Form.Item>
-          </Space>
-
-          <Space size={16} style={{ display: "flex", marginTop: 12 }}>
-            <Form.Item
-              name={["title_config", "font"]}
-              label="字体"
-              style={{ flex: 1, marginBottom: 0 }}
-            >
-              <Select options={FONT_OPTIONS} />
-            </Form.Item>
-            <Form.Item
-              name={["title_config", "size"]}
-              label="字号"
-              style={{ flex: 1, marginBottom: 0 }}
-            >
-              <InputNumber min={20} max={120} style={{ width: "100%" }} addonAfter="px" />
-            </Form.Item>
-          </Space>
-
-          <Space size={16} style={{ display: "flex", marginTop: 12 }}>
-            <Form.Item
-              name={["title_config", "color"]}
-              label="文字颜色"
-              style={{ flex: 1, marginBottom: 0 }}
-            >
-              <Input type="color" style={{ width: "100%", height: 32, padding: 4 }} />
-            </Form.Item>
-            <Form.Item
-              name={["title_config", "stroke"]}
-              label="描边色"
-              style={{ flex: 1, marginBottom: 0 }}
-            >
-              <Input type="color" style={{ width: "100%", height: 32, padding: 4 }} />
-            </Form.Item>
-          </Space>
-
           <Form.Item name="tags" label="标签" style={{ marginTop: 12 }}>
             <Select
               mode="tags"
@@ -798,81 +655,6 @@ const ScriptLibrary: React.FC = () => {
           </div>
         )}
       </Modal>
-
-      {/* AI 改写对比弹窗 */}
-      <Modal
-        title={`✨ AI 改写（${rewriteStyle}风格）`}
-        open={rewriteModalOpen}
-        onCancel={() => !rewriteLoading && setRewriteModalOpen(false)}
-        maskClosable={!rewriteLoading}
-        closable={!rewriteLoading}
-        footer={
-          rewriteResult ? (
-            <Space>
-              <Button onClick={() => setRewriteModalOpen(false)}>保留原文</Button>
-              <Button type="primary" onClick={applyRewrite}>
-                应用改写
-              </Button>
-            </Space>
-          ) : (
-            <Button disabled={rewriteLoading} 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>
   )
 }