feat(scripts): #1811 文案库独立管理页面 v2 (#1924)

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

apps/web/src/api/scripts/scripts.ts

@@ -1,37 +1,195 @@
 /**
- * 文案库 API
- * 对接后端 /api/v1/scripts（CRUD + 列表解包）
+ * 文案库 API（#1811 v2）
+ * CRUD + 搜索/分类/分页；后端未就绪时使用 mock 数据（SCRIPTS_API_MOCK=true）
  */
 import apiClient from "../client"
 import type {
   ScriptItem,
+  ScriptListParams,
   ScriptListResponse,
-  CreateScriptRequest,
-  UpdateScriptRequest,
+  ScriptUpsertRequest,
+  ScriptCategory,
 } from "./types"
 
-/** 获取文案列表 — 必须解包 items（后端返回 {items,total}）*/
-export const getScripts = async (): Promise<ScriptItem[]> => {
-  const response = await apiClient.get<ScriptListResponse | ScriptItem[]>("/scripts")
-  const data = response.data as unknown
-  if (Array.isArray(data)) return data
-  const items = (data as { items?: ScriptItem[] })?.items
-  return Array.isArray(items) ? items : []
+/** 是否启用 mock（后端合入后改为 false） */
+export const SCRIPTS_API_MOCK = true
+
+// ==================== Mock 数据 ====================
+
+const MOCK_CATEGORIES: ScriptCategory[] = [
+  "promo",
+  "vlog",
+  "knowledge",
+  "story",
+  "emotion",
+  "other",
+]
+
+const SAMPLE_TITLES: Record<ScriptCategory, string[]> = {
+  promo: ["新品上市限时特惠", "618大促开场", "品牌故事宣传片"],
+  vlog: ["周末citywalk记录", "打工人的一天", "探店vlog"],
+  knowledge: ["3分钟学会XX", "冷知识科普", "行业深度解读"],
+  story: ["励志小故事", "情感故事一则", "反转剧情"],
+  emotion: ["深夜emo时刻", "治愈系文案", "朋友圈金句"],
+  other: ["通用开场白", "节日祝福", "万能结尾"],
+}
+
+const SAMPLE_TAGS = ["热门", "新品", "节日", "情感", "干货", "搞笑", "治愈", "励志"]
+
+function genMockScripts(): ScriptItem[] {
+  const items: ScriptItem[] = []
+  const now = Date.now()
+  let idx = 0
+  for (const cat of MOCK_CATEGORIES) {
+    const titles = SAMPLE_TITLES[cat]
+    for (let i = 0; i < titles.length; i++) {
+      idx++
+      const title = titles[i]
+      const content = `这是一条【${cat}】分类下的示例文案，标题为「${title}」。\n\n正文可以包含多段落，每段对应一个片段（segments）。\n\n此为 mock 数据，后端接口就绪后会自动切换为真实数据。`
+      const segments = content.split(/\n\n+/).filter(Boolean)
+      const tagCount = 1 + (idx % 3)
+      const tags: string[] = []
+      for (let t = 0; t < tagCount; t++) {
+        tags.push(SAMPLE_TAGS[(idx + t) % SAMPLE_TAGS.length])
+      }
+      items.push({
+        id: `mock_${idx}`,
+        title,
+        content,
+        segments,
+        tags,
+        title_text: title,
+        title_category: cat,
+        title_config: {
+          font: "default",
+          color: "#ffffff",
+          stroke: "#000000",
+          position: (["top", "center", "bottom"] as const)[idx % 3],
+          size: 48,
+          bold: idx % 2 === 0,
+          italic: false,
+        },
+        char_count: content.length,
+        use_count: Math.floor(Math.random() * 50),
+        created_at: new Date(now - idx * 86400_000 * 2).toISOString(),
+        updated_at: new Date(now - idx * 86400_000).toISOString(),
+      })
+    }
+  }
+  return items
+}
+
+const MOCK_SCRIPTS = genMockScripts()
+
+// ==================== 真实 API ====================
+
+/** 获取文案列表（支持分页/搜索/分类） */
+export async function getScripts(params: ScriptListParams = {}): Promise<ScriptListResponse> {
+  if (SCRIPTS_API_MOCK) {
+    const page = params.page ?? 1
+    const pageSize = params.page_size ?? 20
+    let items = [...MOCK_SCRIPTS]
+    if (params.keyword) {
+      const kw = params.keyword.toLowerCase()
+      items = items.filter(
+        (s) => s.title.toLowerCase().includes(kw) || s.content.toLowerCase().includes(kw),
+      )
+    }
+    if (params.category && params.category !== "all") {
+      items = items.filter((s) => s.title_category === params.category)
+    }
+    if (params.tag) {
+      items = items.filter((s) => s.tags?.includes(params.tag as string))
+    }
+    const total = items.length
+    const start = (page - 1) * pageSize
+    const pageItems = items.slice(start, start + pageSize)
+    return new Promise((r) =>
+      setTimeout(() => r({ items: pageItems, total, page, page_size: pageSize }), 200),
+    )
+  }
+  const res = await apiClient.get<ScriptListResponse>("/scripts", { params })
+  return res.data
+}
+
+/** 获取单条文案详情 */
+export async function getScript(id: string): Promise<ScriptItem> {
+  if (SCRIPTS_API_MOCK) {
+    const item = MOCK_SCRIPTS.find((s) => s.id === id)
+    return new Promise((r) => setTimeout(() => r(item ?? MOCK_SCRIPTS[0]), 120))
+  }
+  const res = await apiClient.get<ScriptItem>(`/scripts/${id}`)
+  return res.data
 }
 
 /** 新建文案 */
-export const createScript = async (data: CreateScriptRequest): Promise<ScriptItem> => {
-  const response = await apiClient.post<ScriptItem>("/scripts", data)
-  return response.data
+export async function createScript(data: ScriptUpsertRequest): Promise<ScriptItem> {
+  if (SCRIPTS_API_MOCK) {
+    const segments =
+      data.segments && data.segments.length > 0
+        ? data.segments
+        : data.content.split(/\n\n+/).filter(Boolean)
+    const item: ScriptItem = {
+      id: `mock_${Date.now()}`,
+      ...data,
+      segments,
+      char_count: data.content.length,
+      use_count: 0,
+      tags: data.tags ?? [],
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    }
+    MOCK_SCRIPTS.unshift(item)
+    return new Promise((r) => setTimeout(() => r(item), 200))
+  }
+  const res = await apiClient.post<ScriptItem>("/scripts", data)
+  return res.data
 }
 
 /** 更新文案 */
-export const updateScript = async (id: string, data: UpdateScriptRequest): Promise<ScriptItem> => {
-  const response = await apiClient.put<ScriptItem>(`/scripts/${id}`, data)
-  return response.data
+export async function updateScript(id: string, data: ScriptUpsertRequest): Promise<ScriptItem> {
+  if (SCRIPTS_API_MOCK) {
+    const idx = MOCK_SCRIPTS.findIndex((s) => s.id === id)
+    const segments =
+      data.segments && data.segments.length > 0
+        ? data.segments
+        : data.content.split(/\n\n+/).filter(Boolean)
+    const updated: ScriptItem = {
+      ...MOCK_SCRIPTS[idx],
+      ...data,
+      segments,
+      char_count: data.content.length,
+      tags: data.tags ?? MOCK_SCRIPTS[idx]?.tags ?? [],
+      updated_at: new Date().toISOString(),
+    }
+    if (idx >= 0) MOCK_SCRIPTS[idx] = updated
+    return new Promise((r) => setTimeout(() => r(updated), 200))
+  }
+  const res = await apiClient.put<ScriptItem>(`/scripts/${id}`, data)
+  return res.data
 }
 
 /** 删除文案 */
-export const deleteScript = async (id: string): Promise<void> => {
+export async function deleteScript(id: string): Promise<void> {
+  if (SCRIPTS_API_MOCK) {
+    const idx = MOCK_SCRIPTS.findIndex((s) => s.id === id)
+    if (idx >= 0) MOCK_SCRIPTS.splice(idx, 1)
+    return new Promise((r) => setTimeout(r, 150))
+  }
   await apiClient.delete(`/scripts/${id}`)
 }
+
+/** 复制文案（返回新副本） */
+export async function duplicateScript(id: string): Promise<ScriptItem> {
+  const orig = await getScript(id)
+  const copy = await createScript({
+    title: `${orig.title}（副本）`,
+    content: orig.content,
+    segments: orig.segments,
+    tags: orig.tags,
+    title_text: orig.title_text,
+    title_category: orig.title_category,
+    title_config: orig.title_config,
+  })
+  return copy
+}

apps/web/src/api/scripts/types.ts

@@ -1,24 +1,97 @@
 /**
- * 文案库 API — 类型定义
- * 对接后端 /api/v1/scripts
+ * 文案库 API — 类型定义（#1811 v2 完整字段版）
+ * 字段对齐后端契约：title / content / segments / tags / title_text / title_category / title_config
+ * 同时保留 char_count / use_count / timestamps 等展示字段
  */
+
+/** 标题配置（字体、颜色、位置、字号） */
+export interface ScriptTitleConfig {
+  /** 字体预设 key，如 "default" / "bold" / "handwritten" */
+  font?: string
+  /** 文字颜色（CSS color） */
+  color?: string
+  /** 描边色 */
+  stroke?: string
+  /** 位置：top / center / bottom */
+  position?: "top" | "center" | "bottom"
+  /** 字号（px） */
+  size?: number
+  /** 是否加粗 */
+  bold?: boolean
+  /** 是否斜体 */
+  italic?: boolean
+}
+
+/** 文案分类（可枚举，也支持自定义） */
+export type ScriptCategory =
+  | "promo" // 营销推广
+  | "vlog" // Vlog/日常
+  | "knowledge" // 知识科普
+  | "story" // 故事剧情
+  | "emotion" // 情感语录
+  | "other" // 其他
+
+export const SCRIPT_CATEGORY_LABEL: Record<ScriptCategory, string> = {
+  promo: "营销推广",
+  vlog: "Vlog 日常",
+  knowledge: "知识科普",
+  story: "故事剧情",
+  emotion: "情感语录",
+  other: "其他",
+}
+
+/** 文案条目 */
 export interface ScriptItem {
   id: string
+  /** 名称（标题） */
   title: string
+  /** 正文 */
   content: string
-  char_count: number
+  /** 分段（按段落切分，供后端/生成步骤逐段使用） */
+  segments?: string[]
+  /** 标签（逗号分隔或数组，列表展示用 Tag） */
+  tags?: string[]
+  /** 配套标题文本（选填，"使用"跳创作页时会预填到标题） */
+  title_text?: string
+  /** 分类 */
+  title_category?: ScriptCategory
+  /** 标题样式配置（字体/颜色/位置/字号） */
+  title_config?: ScriptTitleConfig
+  /** 正文字符数（后端返回，前端用于展示） */
+  char_count?: number
+  /** 使用次数（后端返回） */
+  use_count?: number
   created_at: string
   updated_at?: string
 }
 
+/** 列表查询参数（支持搜索/分类/分页） */
+export interface ScriptListParams {
+  page?: number
+  page_size?: number
+  /** 标题/正文模糊搜索 */
+  keyword?: string
+  /** 分类筛选 */
+  category?: ScriptCategory | "all"
+  /** 标签筛选 */
+  tag?: string
+}
+
+/** 列表响应 */
 export interface ScriptListResponse {
   items: ScriptItem[]
   total: number
+  page: number
+  page_size: number
 }
 
-export interface CreateScriptRequest {
+/** 创建/编辑请求 */
+export interface ScriptUpsertRequest {
   title: string
   content: string
+  segments?: string[]
+  tags?: string[]
+  title_text?: string
+  title_category?: ScriptCategory
+  title_config?: ScriptTitleConfig
 }
-
-export type UpdateScriptRequest = Partial<CreateScriptRequest>

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

@@ -1,117 +1,198 @@
 /**
- * 文案库页面 — Issue #1811
- * 风格对齐标题库（同类资源管理页面统一风格），单列卡片列表
- * 功能：列表 / 新建 / 编辑 / 删除 / 按标题搜索 / 空状态
- * 对接后端 /api/v1/scripts CRUD
+ * 文案库页面 — Issue #1811（v2 完整版）
+ * 功能：
+ * - 列表页：卡片列表，搜索（标题/正文）、分类标签筛选、分页
+ *   每条卡片展示：title、content 前 100 字摘要、title_text、分类 Tag、tags、使用次数、时间
+ *   操作：编辑 / 删除 / 复制 / 使用（跳创作页预填）
+ * - 新建/编辑弹窗：title、content 多行、segments（按空行自动拆分+手动编辑）、title_text、title_category、
+ *   title_config（字体/颜色/位置/字号）、tags
+ * - 删除确认（Popconfirm）
+ * - 对接 api/scripts CRUD（mock 阶段 SCRIPTS_API_MOCK=true）
+ *
+ * 风格对齐标题库（.xx-scripts-* 命名，沿用 CSS 变量）
  */
-import React, { useEffect, useMemo, useState } from "react"
-import { Modal, message, Empty, Button, Input, Popconfirm } from "antd"
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from "@ant-design/icons"
+import React, { useCallback, useEffect, useState } from "react"
+import {
+  Button,
+  Card,
+  Empty,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Pagination,
+  Popconfirm,
+  Select,
+  Space,
+  Tag,
+  message,
+} from "antd"
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  CopyOutlined,
+  PlayCircleOutlined,
+  SearchOutlined,
+  TagsOutlined,
+} from "@ant-design/icons"
+import { useNavigate } from "react-router-dom"
 import {
   getScripts,
   createScript,
   updateScript,
   deleteScript,
-  type ScriptItem,
+  duplicateScript,
 } 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 PAGE_SIZE = 12
+const CATEGORY_OPTIONS: { value: ScriptCategory | "all"; label: string }[] = [
+  { value: "all", label: "全部分类" },
+  ...Object.entries(SCRIPT_CATEGORY_LABEL).map(([value, label]) => ({
+    value: value as ScriptCategory,
+    label,
+  })),
+]
+
+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
+
 const ScriptLibrary: React.FC = () => {
-  const [scripts, setScripts] = useState<ScriptItem[]>([])
+  const navigate = useNavigate()
+
+  const [items, setItems] = useState<ScriptItem[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
   const [loading, setLoading] = useState(false)
-  const [searchText, setSearchText] = useState("")
+  const [keyword, setKeyword] = useState("")
+  const [category, setCategory] = useState<ScriptCategory | "all">("all")
 
   // 弹窗状态
-  const [createOpen, setCreateOpen] = useState(false)
+  const [modalOpen, setModalOpen] = useState(false)
   const [editing, setEditing] = useState<ScriptItem | null>(null)
-  const [formTitle, setFormTitle] = useState("")
-  const [formContent, setFormContent] = useState("")
   const [submitting, setSubmitting] = useState(false)
+  const [form] = Form.useForm<ScriptUpsertRequest & { tags_text?: string }>()
 
-  const load = async () => {
+  const load = useCallback(async () => {
     setLoading(true)
     try {
-      const items = await getScripts()
-      setScripts(items)
+      const res = await getScripts({
+        page,
+        page_size: PAGE_SIZE,
+        keyword: keyword.trim() || undefined,
+        category,
+      })
+      // 兼容老接口返回数组的兜底
+      if (Array.isArray(res)) {
+        setItems(res)
+        setTotal(res.length)
+      } else {
+        setItems(res.items ?? [])
+        setTotal(res.total ?? 0)
+      }
     } catch (err) {
-      message.error(err instanceof Error ? err.message : "加载文案列表失败")
+      const e = err as { message?: string }
+      message.error(e?.message ?? "加载文案列表失败")
     } finally {
       setLoading(false)
     }
-  }
+  }, [page, keyword, category])
 
   useEffect(() => {
     load()
-  }, [])
-
-  const filtered = useMemo(() => {
-    const kw = searchText.trim().toLowerCase()
-    if (!kw) return scripts
-    return scripts.filter((s) => s.title.toLowerCase().includes(kw))
-  }, [scripts, searchText])
+  }, [load])
 
   const openCreate = () => {
-    setFormTitle("")
-    setFormContent("")
-    setCreateOpen(true)
+    setEditing(null)
+    form.resetFields()
+    form.setFieldsValue({
+      title: "",
+      content: "",
+      segments: [],
+      tags: [],
+      title_text: "",
+      title_category: "other",
+      title_config: {
+        font: "default",
+        color: "#ffffff",
+        stroke: "#000000",
+        position: "center",
+        size: 48,
+        bold: true,
+        italic: false,
+      },
+    })
+    setModalOpen(true)
   }
 
   const openEdit = (item: ScriptItem) => {
     setEditing(item)
-    setFormTitle(item.title)
-    setFormContent(item.content)
+    form.setFieldsValue({
+      title: item.title,
+      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,
+      },
+    })
+    setModalOpen(true)
   }
 
-  const handleCloseCreate = () => {
-    setCreateOpen(false)
-    setFormTitle("")
-    setFormContent("")
-  }
-
-  const handleCloseEdit = () => {
+  const closeModal = () => {
+    setModalOpen(false)
     setEditing(null)
-    setFormTitle("")
-    setFormContent("")
   }
 
-  const handleCreate = async () => {
-    const title = formTitle.trim()
-    const content = formContent.trim()
-    if (!title || !content) {
-      message.warning("请填写标题和正文")
-      return
-    }
-    setSubmitting(true)
+  /** 提交新建/编辑 */
+  const handleSubmit = async () => {
     try {
-      await createScript({ title, content })
-      message.success("文案已创建")
-      handleCloseCreate()
+      const values = await form.validateFields()
+      setSubmitting(true)
+      const payload: ScriptUpsertRequest = {
+        title: values.title.trim(),
+        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,
+      }
+      if (editing) {
+        await updateScript(editing.id, payload)
+        message.success("文案已更新")
+      } else {
+        await createScript(payload)
+        message.success("文案已创建")
+      }
+      closeModal()
       await load()
     } catch (err) {
-      message.error(err instanceof Error ? err.message : "创建文案失败")
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  const handleUpdate = async () => {
-    if (!editing) return
-    const title = formTitle.trim()
-    const content = formContent.trim()
-    if (!title || !content) {
-      message.warning("请填写标题和正文")
-      return
-    }
-    setSubmitting(true)
-    try {
-      await updateScript(editing.id, { title, content })
-      message.success("文案已更新")
-      handleCloseEdit()
-      await load()
-    } catch (err) {
-      message.error(err instanceof Error ? err.message : "更新文案失败")
+      // form 校验失败不弹 message
+      if ((err as { errorFields?: unknown })?.errorFields) return
+      const e = err as { message?: string }
+      message.error(e?.message ?? "保存失败")
     } finally {
       setSubmitting(false)
     }
@@ -121,41 +202,85 @@ 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 ?? "删除失败")
+    }
+  }
+
+  const handleDuplicate = async (id: string) => {
+    try {
+      await duplicateScript(id)
+      message.success("已复制")
+      setPage(1)
       await load()
     } catch (err) {
-      message.error(err instanceof Error ? err.message : "删除文案失败")
+      const e = err as { message?: string }
+      message.error(e?.message ?? "复制失败")
     }
   }
 
+  /** 使用：跳创作页，query 带 scriptId 预填 */
+  const handleUse = (item: ScriptItem) => {
+    navigate(`/app/generate?scriptId=${encodeURIComponent(item.id)}`)
+  }
+
   const preview = (content: string) => {
     const text = content.replace(/\s+/g, " ").trim()
-    return text.length > 120 ? `${text.slice(0, 120)}…` : text || "（空）"
+    if (text.length <= 100) return text || "（空）"
+    return `${text.slice(0, 100)}…`
   }
 
-  const formatTime = (iso: string) => {
+  const formatTime = (iso?: string) => {
+    if (!iso) return "-"
     const d = new Date(iso)
     if (Number.isNaN(d.getTime())) return iso
     const pad = (n: number) => String(n).padStart(2, "0")
-    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(
-      d.getHours(),
-    )}:${pad(d.getMinutes())}`
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+  }
+
+  const categoryColor: Record<ScriptCategory, string> = {
+    promo: "red",
+    vlog: "blue",
+    knowledge: "green",
+    story: "purple",
+    emotion: "magenta",
+    other: "default",
   }
 
   return (
     <div className="xx-scripts-page">
       <div className="xx-scripts-layout">
-        {/* 顶部操作栏 */}
+        {/* 顶部筛选栏 */}
         <div className="xx-scripts-filters">
-          <div className="xx-scripts-filters-left">
+          <Space wrap size={12} className="xx-scripts-filters-left">
             <Input
               prefix={<SearchOutlined />}
-              placeholder="按标题搜索"
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
+              placeholder="搜索标题或正文"
+              value={keyword}
+              onChange={(e) => {
+                setKeyword(e.target.value)
+                setPage(1)
+              }}
               allowClear
               style={{ width: 260 }}
             />
-          </div>
+            <Select
+              value={category}
+              onChange={(v) => {
+                setCategory(v)
+                setPage(1)
+              }}
+              style={{ width: 140 }}
+              options={CATEGORY_OPTIONS}
+            />
+          </Space>
           <div className="xx-scripts-filters-right">
             <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
               新建文案
@@ -163,108 +288,227 @@ const ScriptLibrary: React.FC = () => {
           </div>
         </div>
 
-        {/* 列表 / 空状态 */}
+        {/* 列表 */}
         {loading ? (
           <div className="xx-scripts-loading">加载中…</div>
-        ) : filtered.length === 0 ? (
+        ) : items.length === 0 ? (
           <Empty
-            description={searchText ? "没有匹配的文案" : "暂无文案，点击右上角「新建文案」开始创作"}
+            description={
+              keyword || category !== "all"
+                ? "没有匹配的文案"
+                : "暂无文案，点击右上角「新建文案」开始创作"
+            }
           />
         ) : (
-          <div className="xx-scripts-list">
-            {filtered.map((s) => (
-              <div key={s.id} className="xx-script-card">
-                <div className="xx-script-card-header">
-                  <div className="xx-script-title">{s.title}</div>
-                  <div className="xx-script-actions">
-                    <Button
-                      size="small"
-                      type="text"
-                      icon={<EditOutlined />}
-                      onClick={() => openEdit(s)}
-                    >
-                      编辑
-                    </Button>
-                    <Popconfirm
-                      title="确认删除此文案？"
-                      description="删除后不可恢复"
-                      okText="删除"
-                      cancelText="取消"
-                      okButtonProps={{ danger: true }}
-                      onConfirm={() => handleDelete(s.id)}
-                    >
-                      <Button size="small" type="text" danger icon={<DeleteOutlined />}>
-                        删除
+          <>
+            <div className="xx-scripts-list">
+              {items.map((s) => (
+                <Card key={s.id} className="xx-script-card" hoverable size="small">
+                  <div className="xx-script-card-header">
+                    <div className="xx-script-title-row">
+                      <span className="xx-script-title">{s.title}</span>
+                      {s.title_category && (
+                        <Tag color={categoryColor[s.title_category] ?? "default"}>
+                          {SCRIPT_CATEGORY_LABEL[s.title_category]}
+                        </Tag>
+                      )}
+                    </div>
+                    <Space size={4} className="xx-script-actions">
+                      <Button
+                        size="small"
+                        type="text"
+                        icon={<PlayCircleOutlined />}
+                        onClick={() => handleUse(s)}
+                      >
+                        使用
                       </Button>
-                    </Popconfirm>
+                      <Button
+                        size="small"
+                        type="text"
+                        icon={<CopyOutlined />}
+                        onClick={() => handleDuplicate(s.id)}
+                      >
+                        复制
+                      </Button>
+                      <Button
+                        size="small"
+                        type="text"
+                        icon={<EditOutlined />}
+                        onClick={() => openEdit(s)}
+                      >
+                        编辑
+                      </Button>
+                      <Popconfirm
+                        title="确认删除此文案？"
+                        description="删除后不可恢复"
+                        okText="删除"
+                        cancelText="取消"
+                        okButtonProps={{ danger: true }}
+                        onConfirm={() => handleDelete(s.id)}
+                      >
+                        <Button size="small" type="text" danger icon={<DeleteOutlined />}>
+                          删除
+                        </Button>
+                      </Popconfirm>
+                    </Space>
                   </div>
-                </div>
-                <div className="xx-script-preview">{preview(s.content)}</div>
-                <div className="xx-script-meta">
-                  <span>{s.char_count ?? s.content.length} 字</span>
-                  <span>·</span>
-                  <span>{formatTime(s.created_at)}</span>
-                </div>
+
+                  <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
+                        style={{ color: "var(--text-tertiary, #999)", marginRight: 4 }}
+                      />
+                      {s.tags.map((t, i) => (
+                        <Tag key={`${t}-${i}`} color="blue">
+                          {t}
+                        </Tag>
+                      ))}
+                    </div>
+                  )}
+
+                  <div className="xx-script-meta">
+                    <span>{s.char_count ?? s.content.length} 字</span>
+                    <span className="xx-script-meta-sep">·</span>
+                    <span>使用 {s.use_count ?? 0} 次</span>
+                    <span className="xx-script-meta-sep">·</span>
+                    <span>{formatTime(s.updated_at ?? s.created_at)}</span>
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            {total > PAGE_SIZE && (
+              <div className="xx-scripts-pagination">
+                <Pagination
+                  current={page}
+                  pageSize={PAGE_SIZE}
+                  total={total}
+                  onChange={(p) => setPage(p)}
+                  showSizeChanger={false}
+                />
               </div>
-            ))}
-          </div>
+            )}
+          </>
         )}
       </div>
 
-      {/* 新建弹窗 */}
+      {/* 新建/编辑弹窗 */}
       <Modal
-        title="新建文案"
-        open={createOpen}
-        onCancel={handleCloseCreate}
-        onOk={handleCreate}
+        title={editing ? "编辑文案" : "新建文案"}
+        open={modalOpen}
+        onCancel={closeModal}
+        onOk={handleSubmit}
         confirmLoading={submitting}
         destroyOnClose
-        okText="创建"
+        okText={editing ? "保存" : "创建"}
         cancelText="取消"
+        width={680}
       >
-        <div className="xx-script-form">
-          <Input
-            placeholder="标题"
-            value={formTitle}
-            onChange={(e) => setFormTitle(e.target.value)}
-            maxLength={200}
-          />
-          <TextArea
-            placeholder="正文"
-            value={formContent}
-            onChange={(e) => setFormContent(e.target.value)}
-            rows={8}
-            maxLength={5000}
-          />
-        </div>
-      </Modal>
+        <Form
+          form={form}
+          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="名称"
+            rules={[{ required: true, message: "请填写文案名称" }, { max: 200 }]}
+          >
+            <Input placeholder="给这段文案起个名字" maxLength={200} />
+          </Form.Item>
 
-      {/* 编辑弹窗 */}
-      <Modal
-        title="编辑文案"
-        open={!!editing}
-        onCancel={handleCloseEdit}
-        onOk={handleUpdate}
-        confirmLoading={submitting}
-        destroyOnClose
-        okText="保存"
-        cancelText="取消"
-      >
-        <div className="xx-script-form">
-          <Input
-            placeholder="标题"
-            value={formTitle}
-            onChange={(e) => setFormTitle(e.target.value)}
-            maxLength={200}
-          />
-          <TextArea
-            placeholder="正文"
-            value={formContent}
-            onChange={(e) => setFormContent(e.target.value)}
-            rows={8}
-            maxLength={5000}
-          />
-        </div>
+          <Form.Item
+            name="content"
+            label="正文"
+            rules={[{ required: true, message: "请填写正文" }]}
+            extra="段落间用空行分隔，保存时会自动按空行切分为 segments。"
+          >
+            <TextArea placeholder="在这里输入文案正文…" rows={6} maxLength={10000} />
+          </Form.Item>
+
+          <Form.Item name="segments" hidden>
+            <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"
+              placeholder="输入标签后回车添加"
+              tokenSeparators={[",", "，"]}
+              style={{ width: "100%" }}
+            />
+          </Form.Item>
+        </Form>
       </Modal>
     </div>
   )

apps/web/src/pages/scripts/scripts.css

@@ -1,137 +1,168 @@
 /**
- * 文案库页面 - V21 设计系统样式
- * 单列卡片列表，风格对齐标题库（xx-titles-page）
+ * 文案库页面样式（#1811 v2）
+ * 风格对齐标题库，新增卡片 hover 阴影、标签/meta 行、筛选栏样式
  */
-@import "../../styles/global.css";
-
-/* ============================================================
-   页面容器
-   ============================================================ */
 .xx-scripts-page {
-  min-height: 100%;
-  padding: var(--space-xl);
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .xx-scripts-layout {
   display: flex;
   flex-direction: column;
-  gap: var(--space-lg);
-  max-width: 960px;
-  margin: 0 auto;
+  gap: 16px;
 }
 
-/* ============================================================
-   顶部筛选栏
-   ============================================================ */
+/* ── 筛选栏 ── */
 .xx-scripts-filters {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-md);
+  gap: 12px;
   flex-wrap: wrap;
+  padding: 12px 16px;
+  background: var(--bg-card, #fff);
+  border-radius: 12px;
+  border: 1px solid var(--border-color, #f0f0f0);
 }
-
 .xx-scripts-filters-left {
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
+  gap: 12px;
+  flex-wrap: wrap;
 }
-
 .xx-scripts-filters-right {
   display: flex;
-  align-items: center;
-  gap: var(--space-sm);
+  gap: 8px;
 }
 
-/* ============================================================
-   列表
-   ============================================================ */
+/* ── 列表 ── */
 .xx-scripts-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 16px;
 }
 
-.xx-scripts-loading {
-  text-align: center;
-  color: var(--text-secondary);
-  padding: var(--space-xl);
-  font-size: var(--font-size-sm);
-}
-
-/* ============================================================
-   文案卡片（对齐标题卡片风格，单列）
-   ============================================================ */
 .xx-script-card {
-  border: 1px solid var(--border-color);
-  background: var(--bg-primary);
-  border-radius: var(--radius-md);
-  padding: var(--space-md);
-  transition: var(--transition-all);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
 }
-
 .xx-script-card:hover {
-  border-color: var(--primary-color);
-  background: var(--bg-secondary);
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1);
+  transform: translateY(-2px);
+}
+.xx-script-card .ant-card-body {
+  padding: 16px;
 }
 
 .xx-script-card-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--space-md);
+  gap: 8px;
+  margin-bottom: 10px;
 }
-
-.xx-script-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-  line-height: 1.5;
-  word-break: break-word;
-  flex: 1;
-}
-
-.xx-script-actions {
+.xx-script-title-row {
   display: flex;
   align-items: center;
-  gap: var(--space-xxs);
-  flex-shrink: 0;
-  opacity: 0;
-  transition: var(--transition-opacity, opacity 0.2s);
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
 }
-
-.xx-script-card:hover .xx-script-actions {
-  opacity: 1;
+.xx-script-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary, #1f1f1f);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xx-script-actions {
+  flex-shrink: 0;
+}
+.xx-script-actions .ant-btn {
+  padding: 0 6px;
 }
 
 .xx-script-preview {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
+  font-size: 13px;
+  color: var(--text-secondary, #666);
   line-height: 1.6;
-  word-break: break-word;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.xx-script-title-text {
+  font-size: 12px;
+  color: var(--text-tertiary, #999);
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xx-script-label {
+  color: var(--text-tertiary, #999);
+}
+
+.xx-script-tags {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
 }
 
 .xx-script-meta {
   display: flex;
   align-items: center;
-  gap: var(--space-xs);
-  font-size: var(--font-size-xs, 12px);
-  color: var(--text-tertiary);
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-tertiary, #999);
+}
+.xx-script-meta-sep {
+  opacity: 0.5;
 }
 
-/* ============================================================
-   弹窗表单
-   ============================================================ */
-.xx-script-form {
+/* ── 分页 ── */
+.xx-scripts-pagination {
   display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
+  justify-content: center;
+  padding: 16px 0;
 }
 
-.xx-script-form textarea.ant-input {
-  resize: vertical;
+.xx-scripts-loading {
+  padding: 48px;
+  text-align: center;
+  color: var(--text-tertiary, #999);
+}
+
+/* ── 弹窗表单 ── */
+.xx-script-form .ant-form-item {
+  margin-bottom: 12px;
+}
+
+/* ── 响应式 ── */
+@media (max-width: 768px) {
+  .xx-scripts-page {
+    padding: 16px 12px;
+  }
+  .xx-scripts-list {
+    grid-template-columns: 1fr;
+  }
+  .xx-scripts-filters {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .xx-scripts-filters-left {
+    width: 100%;
+  }
+  .xx-scripts-filters-left .ant-input,
+  .xx-scripts-filters-left .ant-select {
+    flex: 1;
+  }
 }