first commit

Co-Authored-By: Codex <noreply@openai.com>

web/src/app/(user)/assets/page.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import { Copy, Download, PencilLine, Search, Trash2, Upload } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { App, Button, Card, Drawer, Empty, Form, Image, Input, Modal, Pagination, Select, Space, Tag, Typography } from "antd";
+
+import { formatBytes, readFileAsDataUrl } from "@/lib/image-utils";
+import { uploadImage } from "@/services/image-storage";
+import { cn } from "@/lib/utils";
+import { useAssetStore, type Asset, type AssetKind, type ImageAsset } from "@/stores/use-asset-store";
+
+type AssetFormValues = {
+  kind: AssetKind;
+  title: string;
+  coverUrl: string;
+  tags: string[];
+  source?: string;
+  note?: string;
+  content?: string;
+};
+
+type ImageDraft = ImageAsset["data"] | null;
+
+const kindOptions = [
+  { label: "全部", value: "all" },
+  { label: "文本", value: "text" },
+  { label: "图片", value: "image" },
+];
+
+export default function AssetsPage() {
+  const { message } = App.useApp();
+  const [form] = Form.useForm<AssetFormValues>();
+  const coverInputRef = useRef<HTMLInputElement>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
+  const assets = useAssetStore((state) => state.assets);
+  const addAsset = useAssetStore((state) => state.addAsset);
+  const updateAsset = useAssetStore((state) => state.updateAsset);
+  const removeAsset = useAssetStore((state) => state.removeAsset);
+  const [keyword, setKeyword] = useState("");
+  const [kindFilter, setKindFilter] = useState<AssetKind | "all">("all");
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [editingAsset, setEditingAsset] = useState<Asset | null>(null);
+  const [isAssetOpen, setIsAssetOpen] = useState(false);
+  const [previewAsset, setPreviewAsset] = useState<Asset | null>(null);
+  const [deletingAsset, setDeletingAsset] = useState<Asset | null>(null);
+  const [formKind, setFormKind] = useState<AssetKind>("text");
+  const [imageDraft, setImageDraft] = useState<ImageDraft>(null);
+  const coverUrl = Form.useWatch("coverUrl", form) || "";
+  const title = Form.useWatch("title", form) || "";
+  const tags = Form.useWatch("tags", form) || [];
+  const content = Form.useWatch("content", form) || "";
+  const validAssets = useMemo(() => assets.filter((asset) => asset.kind === "text" || asset.kind === "image"), [assets]);
+
+  const filteredAssets = useMemo(() => {
+    const query = keyword.trim().toLowerCase();
+    return validAssets.filter((asset) => {
+      if (kindFilter !== "all" && asset.kind !== kindFilter) return false;
+      if (!query) return true;
+      return assetSearchText(asset).includes(query);
+    });
+  }, [validAssets, keyword, kindFilter]);
+
+  const visibleAssets = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return filteredAssets.slice(start, start + pageSize);
+  }, [filteredAssets, page, pageSize]);
+
+  useEffect(() => {
+    const maxPage = Math.max(1, Math.ceil(filteredAssets.length / pageSize));
+    setPage((value) => Math.min(value, maxPage));
+  }, [filteredAssets.length, pageSize]);
+
+  const openCreate = () => {
+    setEditingAsset(null);
+    setImageDraft(null);
+    setFormKind("text");
+    form.setFieldsValue({ kind: "text", title: "", coverUrl: "", tags: [], source: "手动添加", note: "", content: "" });
+    setIsAssetOpen(true);
+  };
+
+  const openEdit = (asset: Asset) => {
+    setEditingAsset(asset);
+    setFormKind(asset.kind);
+    setImageDraft(asset.kind === "image" ? asset.data : null);
+    form.setFieldsValue({
+      kind: asset.kind,
+      title: asset.title,
+      coverUrl: asset.coverUrl,
+      tags: asset.tags || [],
+      source: asset.source,
+      note: asset.note,
+      content: asset.kind === "text" ? asset.data.content : "",
+    });
+    setIsAssetOpen(true);
+  };
+
+  const saveAsset = async () => {
+    const values = await form.validateFields();
+    const base = {
+      title: values.title.trim(),
+      coverUrl: values.coverUrl?.trim() || (values.kind === "image" && imageDraft ? imageDraft.dataUrl : ""),
+      tags: values.tags || [],
+      source: values.source?.trim(),
+      note: values.note?.trim(),
+      metadata: editingAsset?.metadata || { source: "manual" },
+    };
+
+    if (values.kind === "text") {
+      const asset = { ...base, kind: "text" as const, data: { content: (values.content || "").trim() } };
+      editingAsset ? updateAsset(editingAsset.id, asset) : addAsset(asset);
+    } else {
+      if (!imageDraft) {
+        message.error("请选择图片文件");
+        return;
+      }
+      const asset = { ...base, kind: "image" as const, data: imageDraft };
+      editingAsset ? updateAsset(editingAsset.id, asset) : addAsset(asset);
+    }
+
+    message.success(editingAsset ? "素材已更新" : "素材已保存");
+    setIsAssetOpen(false);
+  };
+
+  const readCoverFile = async (file?: File) => {
+    if (!file) return;
+    const dataUrl = await readFileAsDataUrl(file);
+    form.setFieldValue("coverUrl", dataUrl);
+  };
+
+  const readImageFile = async (file?: File) => {
+    if (!file || !file.type.startsWith("image/")) return;
+    const image = await uploadImage(file);
+    const draft = { dataUrl: image.url, storageKey: image.storageKey, width: image.width, height: image.height, bytes: image.bytes, mimeType: image.mimeType };
+    setImageDraft(draft);
+    if (!form.getFieldValue("coverUrl")) form.setFieldValue("coverUrl", draft.dataUrl);
+    if (!form.getFieldValue("title")) form.setFieldValue("title", file.name);
+  };
+
+  const copyText = async (asset: Asset) => {
+    if (asset.kind !== "text") return;
+    await navigator.clipboard.writeText(asset.data.content);
+    message.success("文本已复制");
+  };
+
+  const downloadImage = (asset: Asset) => {
+    if (asset.kind !== "image") return;
+    const link = document.createElement("a");
+    link.href = asset.data.dataUrl;
+    link.download = `${asset.title || "asset"}.${asset.data.mimeType.split("/")[1] || "png"}`;
+    link.click();
+  };
+
+  const confirmDelete = () => {
+    if (!deletingAsset) return;
+    removeAsset(deletingAsset.id);
+    message.success("素材已删除");
+    setDeletingAsset(null);
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden bg-background text-stone-900 dark:text-stone-100">
+      <main className="min-h-0 flex-1 overflow-y-auto bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] px-6 py-8 [background-size:16px_16px] dark:bg-[radial-gradient(rgba(245,245,244,.14)_1px,transparent_1px)]">
+        <div className="pb-8">
+          <div className="mx-auto max-w-5xl text-center">
+            <h1 className="text-4xl font-semibold tracking-tight text-stone-950 dark:text-stone-100">我的素材</h1>
+            <p className="mt-3 text-sm text-stone-500 dark:text-stone-400">收藏常用文本和图片，按类型、标题和标签快速查找。</p>
+          </div>
+
+          <div className="mx-auto mt-8 w-full max-w-2xl">
+            <Input.Search className="w-full" size="large" allowClear prefix={<Search className="size-4 text-stone-400" />} value={keyword} placeholder="搜索标题、内容、标签或来源" onChange={(event) => { setPage(1); setKeyword(event.target.value); }} onSearch={(value) => { setPage(1); setKeyword(value); }} />
+          </div>
+
+          <div className="mx-auto mt-6 grid max-w-6xl gap-3 text-left">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div className="grid gap-2 sm:grid-cols-[56px_minmax(0,1fr)] sm:items-center">
+                <div className="text-xs font-medium text-stone-500 dark:text-stone-400">类型</div>
+                <div className="flex flex-wrap gap-2">
+                  {kindOptions.map((option) => (
+                    <Tag.CheckableTag key={option.value} checked={kindFilter === option.value} className={cn("prompt-filter-tag", kindFilter === option.value && "is-active")} onChange={() => { setPage(1); setKindFilter(option.value as AssetKind | "all"); }}>
+                      {option.label}
+                    </Tag.CheckableTag>
+                  ))}
+                </div>
+              </div>
+              <button type="button" className="cursor-pointer self-start text-sm font-medium text-stone-700 underline-offset-4 hover:underline focus-visible:outline-none focus-visible:underline sm:self-center dark:text-stone-300" onClick={openCreate}>
+                新增素材
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-auto flex max-w-7xl flex-col gap-5">
+          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {visibleAssets.map((asset) => (
+              <AssetCard
+                key={asset.id}
+                asset={asset}
+                onOpen={() => setPreviewAsset(asset)}
+                onEdit={() => openEdit(asset)}
+                onCopy={copyText}
+                onDownload={downloadImage}
+                onDelete={() => setDeletingAsset(asset)}
+              />
+            ))}
+          </div>
+
+          {!visibleAssets.length ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有找到素材" className="py-20" /> : null}
+
+          <div className="flex justify-center">
+            <Pagination
+              current={page}
+              pageSize={pageSize}
+              total={filteredAssets.length}
+              showSizeChanger
+              pageSizeOptions={[10, 20, 50, 100]}
+              onChange={(nextPage, nextPageSize) => {
+                setPage(nextPage);
+                setPageSize(nextPageSize);
+              }}
+            />
+          </div>
+        </div>
+      </main>
+
+      <Modal title={editingAsset ? "编辑素材" : "新增素材"} open={isAssetOpen} width={980} onCancel={() => setIsAssetOpen(false)} onOk={() => void saveAsset()} okText="保存" cancelText="取消" destroyOnHidden>
+        <div className="grid gap-6 pt-1 lg:grid-cols-[minmax(0,1fr)_320px]">
+          <Form form={form} layout="vertical" requiredMark={false} initialValues={{ kind: "text", tags: [] }}>
+            <Form.Item name="kind" label="类型">
+              <Select options={[{ label: "文本", value: "text" }, { label: "图片", value: "image" }]} onChange={(value) => setFormKind(value)} />
+            </Form.Item>
+            <Form.Item name="title" label="标题" rules={[{ required: true, message: "请输入标题" }]}>
+              <Input size="large" placeholder="给素材起一个容易检索的名字" />
+            </Form.Item>
+            <Form.Item name="coverUrl" label="封面 URL">
+              <Space.Compact className="w-full">
+                <Input placeholder="可粘贴图片 URL，也可以上传本地封面" />
+                <Button icon={<Upload className="size-3.5" />} onClick={() => coverInputRef.current?.click()}>上传</Button>
+              </Space.Compact>
+            </Form.Item>
+            <Form.Item name="tags" label="标签">
+              <Select mode="tags" tokenSeparators={[",", "，"]} placeholder="输入标签后回车" />
+            </Form.Item>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Form.Item name="source" label="来源">
+                <Input placeholder="手动添加 / 画布 / 提示词库" />
+              </Form.Item>
+              <Form.Item name="note" label="备注">
+                <Input placeholder="可选" />
+              </Form.Item>
+            </div>
+            {formKind === "text" ? (
+              <Form.Item name="content" label="文本内容" rules={[{ required: true, message: "请输入文本内容" }]}>
+                <Input.TextArea rows={8} placeholder="保存提示词、说明文案、参考描述等文本素材" />
+              </Form.Item>
+            ) : (
+              <Form.Item label="图片内容" required>
+                <div className="rounded-lg border border-dashed border-stone-300 p-4 dark:border-stone-700">
+                  <Button icon={<Upload className="size-4" />} onClick={() => imageInputRef.current?.click()}>选择图片文件</Button>
+                  {imageDraft ? <Typography.Text type="secondary" className="ml-3 text-xs">{imageDraft.width}x{imageDraft.height} · {formatBytes(imageDraft.bytes)}</Typography.Text> : <Typography.Text type="secondary" className="ml-3 text-xs">未选择图片</Typography.Text>}
+                </div>
+              </Form.Item>
+            )}
+          </Form>
+          <div className="rounded-xl border border-stone-200 bg-stone-50 p-4 dark:border-stone-800 dark:bg-stone-950">
+            <Typography.Text strong>预览</Typography.Text>
+            <div className="mt-3 overflow-hidden rounded-lg border border-stone-200 bg-background dark:border-stone-800">
+              {coverUrl || imageDraft?.dataUrl ? <img src={coverUrl || imageDraft?.dataUrl} alt="" className="aspect-[4/3] w-full object-cover" /> : <div className="flex aspect-[4/3] items-center justify-center bg-stone-100 p-5 text-center text-sm text-stone-500 dark:bg-stone-900">{content || "暂无封面"}</div>}
+              <div className="p-4">
+                <Typography.Text strong ellipsis className="block">{title || "未命名素材"}</Typography.Text>
+                <div className="mt-2 flex flex-wrap gap-1.5">
+                  {tags.length ? tags.map((tag) => <Tag key={tag} className="m-0">{tag}</Tag>) : <Tag className="m-0">未打标签</Tag>}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <input ref={coverInputRef} type="file" accept="image/*" className="hidden" onChange={(event) => {
+          void readCoverFile(event.target.files?.[0]);
+          event.target.value = "";
+        }} />
+        <input ref={imageInputRef} type="file" accept="image/*" className="hidden" onChange={(event) => {
+          void readImageFile(event.target.files?.[0]);
+          event.target.value = "";
+        }} />
+      </Modal>
+
+      <AssetDrawer asset={previewAsset} onClose={() => setPreviewAsset(null)} onCopy={copyText} onDownload={downloadImage} />
+
+      <Modal title="删除素材" open={Boolean(deletingAsset)} onCancel={() => setDeletingAsset(null)} onOk={confirmDelete} okText="删除" okButtonProps={{ danger: true }} cancelText="取消">
+        确定删除「{deletingAsset?.title}」吗？删除后会从我的素材中移除。
+      </Modal>
+    </div>
+  );
+}
+
+function AssetCard({ asset, onOpen, onEdit, onCopy, onDownload, onDelete }: { asset: Asset; onOpen: () => void; onEdit: () => void; onCopy: (asset: Asset) => void; onDownload: (asset: Asset) => void; onDelete: () => void }) {
+  const cover = asset.coverUrl || (asset.kind === "image" ? asset.data.dataUrl : "");
+  const summary = assetSummary(asset);
+  return (
+    <Card
+      hoverable
+      className="overflow-hidden"
+      styles={{ body: { padding: 0 } }}
+      cover={
+        <button type="button" className="block w-full text-left" onClick={onOpen}>
+          {cover ? <img src={cover} alt={asset.title} className="aspect-[4/3] w-full object-cover" /> : <div className="flex aspect-[4/3] items-center justify-center bg-stone-100 p-5 text-center text-sm leading-6 text-stone-600 dark:bg-stone-900 dark:text-stone-300">{asset.kind === "text" ? asset.data.content : "暂无封面"}</div>}
+        </button>
+      }
+    >
+      <button type="button" className="block w-full text-left" onClick={onOpen}>
+        <div className="p-4">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <h2 className="line-clamp-1 text-sm font-semibold text-stone-950 dark:text-stone-100">{asset.title}</h2>
+              <Typography.Text type="secondary" className="mt-1 block text-xs">{asset.source || "未标注来源"}</Typography.Text>
+            </div>
+            <Tag className="m-0 shrink-0 text-[11px]">{asset.kind === "image" ? "图片" : "文本"}</Tag>
+          </div>
+          <Typography.Paragraph type="secondary" ellipsis={{ rows: 3 }} className="!mb-0 !mt-2 !text-xs !leading-5">
+            {summary}
+          </Typography.Paragraph>
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {(asset.tags || []).slice(0, 3).map((tag) => <Tag key={tag} className="m-0 text-[11px]">{tag}</Tag>)}
+            {!asset.tags?.length ? <Tag className="m-0 text-[11px]">无标签</Tag> : null}
+          </div>
+        </div>
+      </button>
+      <div className="flex items-center gap-2 px-4 pb-4">
+        <Button size="small" onClick={onOpen}>查看</Button>
+        <Button size="small" icon={<PencilLine className="size-3.5" />} onClick={onEdit}>编辑</Button>
+        {asset.kind === "text" ? <Button size="small" icon={<Copy className="size-3.5" />} onClick={() => void onCopy(asset)}>复制</Button> : null}
+        {asset.kind === "image" ? <Button size="small" icon={<Download className="size-3.5" />} onClick={() => onDownload(asset)}>下载</Button> : null}
+        <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={onDelete}>删除</Button>
+      </div>
+    </Card>
+  );
+}
+
+function AssetDrawer({ asset, onClose, onCopy, onDownload }: { asset: Asset | null; onClose: () => void; onCopy: (asset: Asset) => void; onDownload: (asset: Asset) => void }) {
+  const cover = asset ? asset.coverUrl || (asset.kind === "image" ? asset.data.dataUrl : "") : "";
+  return (
+    <Drawer title="素材详情" open={Boolean(asset)} size="large" onClose={onClose}>
+      {asset ? (
+        <div className="space-y-5">
+          {cover ? <Image src={cover} alt={asset.title} className="rounded-lg" /> : <div className="rounded-lg border border-stone-200 bg-stone-50 p-5 text-sm leading-6 text-stone-600 dark:border-stone-800 dark:bg-stone-900 dark:text-stone-300">{asset.kind === "text" ? asset.data.content : "暂无封面"}</div>}
+          <div>
+            <Typography.Title level={4} className="!mb-2">{asset.title}</Typography.Title>
+            <Space size={[4, 4]} wrap>
+              <Tag>{asset.kind === "image" ? "图片" : "文本"}</Tag>
+              {(asset.tags || []).map((tag) => <Tag key={tag}>{tag}</Tag>)}
+            </Space>
+          </div>
+          <div className="rounded-lg border border-stone-200 p-4 dark:border-stone-800">
+            <Typography.Text type="secondary" className="block text-xs">内容</Typography.Text>
+            {asset.kind === "text" ? <Typography.Paragraph className="mt-2 whitespace-pre-wrap">{asset.data.content}</Typography.Paragraph> : <Typography.Text className="mt-2 block">{asset.data.width}x{asset.data.height} · {formatBytes(asset.data.bytes)} · {asset.data.mimeType}</Typography.Text>}
+          </div>
+          {asset.note ? <div><Typography.Text type="secondary">备注</Typography.Text><Typography.Paragraph className="mt-1">{asset.note}</Typography.Paragraph></div> : null}
+          <Space>
+            {asset.kind === "text" ? <Button type="primary" icon={<Copy className="size-4" />} onClick={() => onCopy(asset)}>复制文本</Button> : null}
+            {asset.kind === "image" ? <Button type="primary" icon={<Download className="size-4" />} onClick={() => onDownload(asset)}>下载图片</Button> : null}
+          </Space>
+        </div>
+      ) : null}
+    </Drawer>
+  );
+}
+
+function assetSummary(asset: Asset) {
+  if (asset.kind === "text") return asset.data.content;
+  return `${asset.data.width}x${asset.data.height} · ${formatBytes(asset.data.bytes)} · ${asset.data.mimeType}`;
+}
+
+function assetSearchText(asset: Asset) {
+  return [
+    asset.title,
+    asset.source || "",
+    asset.note || "",
+    (asset.tags || []).join(" "),
+    asset.kind === "text" ? asset.data.content : asset.data.mimeType,
+  ].join(" ").toLowerCase();
+}