feat: #1811 新增文案库独立页面 (#1812)

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

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

@@ -0,0 +1,273 @@
+/**
+ * 文案库页面 — Issue #1811
+ * 风格对齐标题库（同类资源管理页面统一风格），单列卡片列表
+ * 功能：列表 / 新建 / 编辑 / 删除 / 按标题搜索 / 空状态
+ * 对接后端 /api/v1/scripts CRUD
+ */
+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 {
+  getScripts,
+  createScript,
+  updateScript,
+  deleteScript,
+  type ScriptItem,
+} from "@/api/scripts"
+import "./scripts.css"
+
+const { TextArea } = Input
+
+const ScriptLibrary: React.FC = () => {
+  const [scripts, setScripts] = useState<ScriptItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [searchText, setSearchText] = useState("")
+
+  // 弹窗状态
+  const [createOpen, setCreateOpen] = useState(false)
+  const [editing, setEditing] = useState<ScriptItem | null>(null)
+  const [formTitle, setFormTitle] = useState("")
+  const [formContent, setFormContent] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const items = await getScripts()
+      setScripts(items)
+    } catch (err) {
+      message.error(err instanceof Error ? err.message : "加载文案列表失败")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  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])
+
+  const openCreate = () => {
+    setFormTitle("")
+    setFormContent("")
+    setCreateOpen(true)
+  }
+
+  const openEdit = (item: ScriptItem) => {
+    setEditing(item)
+    setFormTitle(item.title)
+    setFormContent(item.content)
+  }
+
+  const handleCloseCreate = () => {
+    setCreateOpen(false)
+    setFormTitle("")
+    setFormContent("")
+  }
+
+  const handleCloseEdit = () => {
+    setEditing(null)
+    setFormTitle("")
+    setFormContent("")
+  }
+
+  const handleCreate = async () => {
+    const title = formTitle.trim()
+    const content = formContent.trim()
+    if (!title || !content) {
+      message.warning("请填写标题和正文")
+      return
+    }
+    setSubmitting(true)
+    try {
+      await createScript({ title, content })
+      message.success("文案已创建")
+      handleCloseCreate()
+      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 : "更新文案失败")
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteScript(id)
+      message.success("文案已删除")
+      await load()
+    } catch (err) {
+      message.error(err instanceof Error ? err.message : "删除文案失败")
+    }
+  }
+
+  const preview = (content: string) => {
+    const text = content.replace(/\s+/g, " ").trim()
+    return text.length > 120 ? `${text.slice(0, 120)}…` : text || "（空）"
+  }
+
+  const formatTime = (iso: string) => {
+    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 (
+    <div className="xx-scripts-page">
+      <div className="xx-scripts-layout">
+        {/* 顶部操作栏 */}
+        <div className="xx-scripts-filters">
+          <div className="xx-scripts-filters-left">
+            <Input
+              prefix={<SearchOutlined />}
+              placeholder="按标题搜索"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              allowClear
+              style={{ width: 260 }}
+            />
+          </div>
+          <div className="xx-scripts-filters-right">
+            <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              新建文案
+            </Button>
+          </div>
+        </div>
+
+        {/* 列表 / 空状态 */}
+        {loading ? (
+          <div className="xx-scripts-loading">加载中…</div>
+        ) : filtered.length === 0 ? (
+          <Empty
+            description={searchText ? "没有匹配的文案" : "暂无文案，点击右上角「新建文案」开始创作"}
+          />
+        ) : (
+          <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 />}>
+                        删除
+                      </Button>
+                    </Popconfirm>
+                  </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>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 新建弹窗 */}
+      <Modal
+        title="新建文案"
+        open={createOpen}
+        onCancel={handleCloseCreate}
+        onOk={handleCreate}
+        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>
+      </Modal>
+
+      {/* 编辑弹窗 */}
+      <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>
+      </Modal>
+    </div>
+  )
+}
+
+export default ScriptLibrary