@allbluecn/web-app 0.4.22 → 0.5.1

package/src/components/story/relations/__tests__/link-manage-dialog.test.tsx

@@ -0,0 +1,93 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+
+vi.mock("@tanstack/react-start", () => ({
+  useServerFn: (fn: any) => vi.fn().mockImplementation((args: any) => fn(args)),
+}));
+
+const fns = vi.hoisted(() => ({
+  addLink: vi.fn(),
+  updateLink: vi.fn(),
+  removeLink: vi.fn(),
+}));
+
+vi.mock("@/server/serverFns/story", () => ({
+  addLinkFn: fns.addLink,
+  updateLinkFn: fns.updateLink,
+  removeLinkFn: fns.removeLink,
+}));
+
+vi.mock("sonner", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn() },
+}));
+
+import { LinkManageDialog } from "../link-manage-dialog";
+import type { StoryLinkItem } from "../../types";
+
+const LINKS: StoryLinkItem[] = [
+  { id: "l1", url: "https://a.com", title: "站点A", description: null },
+  { id: "l2", url: "https://b.com", title: null, description: "备注" },
+];
+
+function setup(props?: Partial<Parameters<typeof LinkManageDialog>[0]>) {
+  const onUpdate = vi.fn();
+  render(
+    <LinkManageDialog
+      open
+      onOpenChange={() => {}}
+      storyId="s1"
+      data={LINKS}
+      onUpdate={onUpdate}
+      initialEdit={null}
+      {...props}
+    />,
+  );
+  return { onUpdate };
+}
+
+beforeEach(() => vi.clearAllMocks());
+
+describe("LinkManageDialog", () => {
+  it("不渲染已有链接列表，仅保留添加表单", () => {
+    setup();
+    expect(screen.queryByText("站点A")).not.toBeInTheDocument();
+    expect(screen.getByLabelText(/URL/i)).toBeInTheDocument();
+  });
+
+  it("填写 URL 提交调用 addLinkFn 并回调 onUpdate", async () => {
+    fns.addLink.mockResolvedValue({ id: "l3", url: "https://c.com", title: "C", description: null });
+    const { onUpdate } = setup();
+    fireEvent.change(screen.getByLabelText(/URL/i), { target: { value: "https://c.com" } });
+    fireEvent.click(screen.getByRole("button", { name: "添加" }));
+    await waitFor(() => expect(onUpdate).toHaveBeenCalled());
+    const call = fns.addLink.mock.calls[0][0];
+    expect(call.data.storyId).toBe("s1");
+    expect(call.data.url).toBe("https://c.com");
+  });
+
+  it("initialEdit 进入编辑态，保存调 updateLinkFn", async () => {
+    fns.updateLink.mockResolvedValue({});
+    setup({ initialEdit: LINKS[0] });
+    expect(screen.getByRole("button", { name: "保存" })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "保存" }));
+    await waitFor(() => expect(fns.updateLink).toHaveBeenCalled());
+    expect(fns.updateLink.mock.calls[0][0].data.linkId).toBe("l1");
+  });
+});

package/src/components/story/relations/attachment-manage-dialog.tsx

@@ -0,0 +1,490 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { UploadCloud, X, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { formatFileSize, getFileTypeIcon } from "./format";
+import { FilePreview } from "./file-preview";
+import type { StoryAttachmentItem } from "../types";
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+interface StagedFile {
+  file: File;
+  /** 图片类文件的本地缩略图 Object URL */
+  thumb: string | null;
+  /** SHA-256 十六进制哈希；编辑模式或异步计算时为 null */
+  hash: string | null;
+}
+
+export interface AttachmentManageDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  storyId: string;
+  data: StoryAttachmentItem[];
+  onUpdate: (attachments: StoryAttachmentItem[]) => void;
+  /** 上传附件产生的活动，供时间线即时追加 */
+  onActivity?: (activity: import("../types").ActivityItem) => void;
+  /** 编辑模式：预填充现有附件，隐藏继续上传按钮和上传区 */
+  editItem?: StoryAttachmentItem | null;
+}
+
+async function computeFileHash(file: File): Promise<string> {
+  const buf = await file.arrayBuffer();
+  const hashBuf = await crypto.subtle.digest("SHA-256", buf);
+  return Array.from(new Uint8Array(hashBuf))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+export function AttachmentManageDialog({
+  open,
+  onOpenChange,
+  storyId,
+  data,
+  onUpdate,
+  onActivity,
+  editItem,
+}: AttachmentManageDialogProps) {
+  const { t } = useTranslation("story");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [staged, setStaged] = React.useState<StagedFile[]>([]);
+  const [description, setDescription] = React.useState("");
+  const [uploading, setUploading] = React.useState(false);
+  const [dragOver, setDragOver] = React.useState(false);
+  const [previewIndex, setPreviewIndex] = React.useState(0);
+  // 当前暂存列表中已计算出的哈希集合（用于同批次重复检测）
+  const [computedHashes, setComputedHashes] = React.useState<Set<string>>(new Set());
+
+  const isEdit = !!editItem;
+  const dialogTitle = isEdit ? t("attachmentDialog.editTitle") : t("attachmentDialog.title");
+
+  // 编辑模式：预取现有文件并预填描述，同时计算 hash
+  React.useEffect(() => {
+    if (!open || !editItem) return;
+    let cancelled = false;
+    fetch(editItem.storageUrl)
+      .then((res) => {
+        if (!res.ok) throw new Error("加载失败");
+        return res.blob();
+      })
+      .then((blob) => {
+        if (cancelled) return;
+        const file = new File([blob], editItem.fileName, { type: editItem.mimeType });
+        const thumb = editItem.mimeType.startsWith("image/") ? URL.createObjectURL(file) : null;
+        return computeFileHash(file).then((hash) => ({ file, thumb, hash }));
+      })
+      .then((result) => {
+        if (cancelled || !result) return;
+        setStaged([{ file: result.file, thumb: result.thumb, hash: result.hash }]);
+        setComputedHashes(new Set([result.hash]));
+        setDescription(editItem.description ?? "");
+      })
+      .catch(() => {
+        if (cancelled) return;
+      });
+    return () => { cancelled = true; };
+  }, [open, editItem]);
+
+  const previewFile = staged[previewIndex]?.file ?? null;
+  const previewName = staged[previewIndex]?.file.name ?? "";
+
+  React.useEffect(() => {
+    if (staged.length > 0 && previewIndex >= staged.length) {
+      setPreviewIndex(0);
+    }
+  }, [staged, previewIndex]);
+
+  const addFiles = (files: FileList | File[]) => {
+    if (uploading) return;
+    const next: StagedFile[] = [];
+    for (const file of Array.from(files)) {
+      if (file.size > MAX_FILE_SIZE) {
+        toast.error(t("attachmentDialog.sizeLimit", { name: file.name }));
+        continue;
+      }
+      next.push({
+        file,
+        thumb: file.type.startsWith("image/") ? URL.createObjectURL(file) : null,
+        hash: null,
+      });
+    }
+    if (next.length === 0) return;
+    setStaged((prev) => [...prev, ...next]);
+    setPreviewIndex(Math.max(0, previewIndex));
+
+    // 异步计算新增文件的哈希，并检测与现有已计算哈希的重复
+    const prevLength = staged.length;
+    const newItems = next.map((item, i) => ({
+      index: prevLength + i,
+      file: item.file,
+    }));
+    (async () => {
+      const updates: Array<{ index: number; hash: string | null }> = [];
+      const existingHashes = new Set(computedHashes);
+      // 先用已有暂存项的哈希去重
+      for (const s of staged) {
+        if (s.hash) existingHashes.add(s.hash);
+      }
+      for (const { index, file } of newItems) {
+        try {
+          const hash = await computeFileHash(file);
+          updates.push({ index, hash });
+          existingHashes.add(hash);
+        } catch {
+          updates.push({ index, hash: null });
+        }
+      }
+      setStaged((prev) =>
+        prev.map((item, i) => {
+          const u = updates.find((up) => up.index === i);
+          return u ? { ...item, hash: u.hash } : item;
+        }),
+      );
+      setComputedHashes(existingHashes);
+    })();
+  };
+
+  const removeStaged = (index: number) => {
+    setStaged((prev) => {
+      const item = prev[index];
+      if (item?.thumb) URL.revokeObjectURL(item.thumb);
+      const next = prev.filter((_, i) => i !== index);
+      if (next.length === 0) {
+        setPreviewIndex(0);
+      } else if (index <= previewIndex) {
+        setPreviewIndex(Math.max(0, previewIndex - 1));
+      }
+      return next;
+    });
+  };
+
+  const clearStaged = () => {
+    for (const item of staged) {
+      if (item.thumb) URL.revokeObjectURL(item.thumb);
+    }
+    setStaged([]);
+    setDescription("");
+    setPreviewIndex(0);
+    setComputedHashes(new Set());
+  };
+
+  const handleClose = (next: boolean) => {
+    if (!next) clearStaged();
+    onOpenChange(next);
+  };
+
+  // 判断每个暂存项是否为重复（同批次内 hash 重复，或已存在于当前 story 附件）
+  const duplicateIndexes = React.useMemo(() => {
+    if (isEdit) return new Set<number>();
+    const seen = new Map<string, number>(); // hash → 首次出现 index
+    const dupSet = new Set<number>();
+    for (let i = 0; i < staged.length; i++) {
+      const h = staged[i].hash;
+      if (!h) continue;
+      const first = seen.get(h);
+      if (first !== undefined) {
+        dupSet.add(i);
+        if (first !== undefined) dupSet.add(first);
+      } else {
+        seen.set(h, i);
+      }
+    }
+    // 同时标记与已有附件重复的（已有附件 hash 匹配但未重新上传）
+    for (const att of data) {
+      if (att.fileHash) {
+        const idx = staged.findIndex((s) => s.hash === att.fileHash && s.hash !== null);
+        if (idx !== -1) dupSet.add(idx);
+      }
+    }
+    return dupSet;
+  }, [staged, data, isEdit]);
+
+  const hasDuplicates = duplicateIndexes.size > 0;
+
+  const handleConfirm = async () => {
+    if (staged.length === 0 || uploading) return;
+    setUploading(true);
+    const desc = description.trim();
+    const added: Array<StoryAttachmentItem & { activity?: import("../types").ActivityItem }> = [];
+    for (const item of staged) {
+      // 跳过重复文件
+      if (duplicateIndexes.has(staged.indexOf(item))) continue;
+      try {
+        const formData = new FormData();
+        formData.append("storyId", storyId);
+        formData.append("file", item.file);
+        if (desc) formData.append("description", desc);
+        if (editItem) formData.append("attachmentId", editItem.id);
+        if (item.hash) formData.append("fileHash", item.hash);
+        const res = await fetch("/api/attachments/upload", {
+          method: "POST",
+          body: formData,
+        });
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          throw new Error(err.error || t("attachmentDialog.removeFailed"));
+        }
+        const json = await res.json() as Record<string, unknown>;
+        if ((json.duplicated as boolean | undefined) === true) continue;
+        added.push(json as unknown as StoryAttachmentItem & { activity?: import("../types").ActivityItem });
+      } catch (err) {
+        toast.error((err as Error)?.message || t("attachmentDialog.removeFailed"));
+      }
+    }
+    setUploading(false);
+    if (added.length > 0) {
+      onUpdate([...added, ...data]);
+      for (const item of added) {
+        if (item.activity) onActivity?.(item.activity);
+      }
+      toast.success(t("attachmentDialog.uploaded", { count: added.length }));
+      clearStaged();
+      onOpenChange(false);
+    } else if (!hasDuplicates) {
+      // 所有文件都重复，无新增
+      toast.info(t("attachmentDialog.duplicateHint"));
+      clearStaged();
+      onOpenChange(false);
+    }
+  };
+
+  const hasFiles = staged.length > 0;
+  const isBatch = staged.length > 1;
+
+  // 画廊列表左右按钮：整页滚动，不逐个切换选中文件
+  const listRef = React.useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(false);
+
+  const updateScrollState = React.useCallback(() => {
+    const el = listRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 1);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+
+  React.useEffect(() => {
+    updateScrollState();
+  }, [staged.length, updateScrollState]);
+
+  const scrollList = (dir: -1 | 1) => {
+    const el = listRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * el.clientWidth, behavior: "smooth" });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+              <DialogTitle className="text-xl">{dialogTitle}</DialogTitle>
+        </DialogHeader>
+          <div className="flex flex-col overflow-hidden" style={{ height: "calc(100dvh - 10rem)", maxHeight: "33rem" }}>
+          {/* 内容滚动区 */}
+           <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-1 pb-1">
+            {/* 上传区域 */}
+            {!hasFiles && !isEdit ? (
+              /* 空态：大居中上传按钮 */
+              <div
+                role="button"
+                tabIndex={0}
+                aria-label={t("attachmentDialog.upload")}
+                onClick={() => inputRef.current?.click()}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    inputRef.current?.click();
+                  }
+                }}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  setDragOver(true);
+                }}
+                onDragLeave={() => setDragOver(false)}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  setDragOver(false);
+                  if (e.dataTransfer.files.length > 0) addFiles(e.dataTransfer.files);
+                }}
+                className={`flex cursor-pointer flex-1 flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-4 text-sm text-muted-foreground transition-colors ${
+                  dragOver ? "border-primary bg-primary/5" : "hover:border-muted-foreground/40 hover:bg-muted/50"
+                } min-h-48`}
+              >
+                <UploadCloud className="size-10" />
+                <div className="text-center">
+                  <span className="block text-base font-medium text-foreground">{t("attachmentDialog.upload")}</span>
+                  <span className="mt-1 block text-xs">{t("attachmentDialog.uploadHint")}</span>
+                </div>
+              </div>
+            ) : (
+              /* 有文件：画廊预览模式 */
+              <div className="flex flex-col gap-3">
+                {/* 大预览框 */}
+                <FilePreview
+                  file={previewFile!}
+                  fileName={previewName}
+                  showTitleToggle
+                  titleToggleLabel={t("attachmentDialog.toggleTitle")}
+                  titleToggleHideLabel={t("attachmentDialog.hideTitle")}
+                  fullscreenLabel={t("associatedAttachments.fullscreen")}
+                  exitFullscreenLabel={t("associatedAttachments.exitFullscreen")}
+                 />
+                 {/* 文件列表（水平排列，可滚动） */}
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => scrollList(-1)}
+                    className={`shrink-0 rounded-md mt-3 p-1 transition-colors ${
+                      canScrollLeft ? "hover:bg-muted" : "cursor-not-allowed opacity-50"
+                    }`}
+                    aria-label="上一页"
+                  >
+                    <ChevronLeft className="size-4" />
+                  </button>
+                  <div
+                    ref={listRef}
+                    onScroll={updateScrollState}
+                    className="flex min-w-0 flex-1 gap-4 overflow-x-auto overflow-y-hidden pt-3 pl-4 scrollbar-hide"
+                  >
+                    {staged.map((item, index) => {
+                      const Icon = getFileTypeIcon(item.file.type, item.file.name);
+                      const isActive = index === previewIndex;
+                      const isDup = duplicateIndexes.has(index);
+                       return (
+                          <div
+                            key={`${item.file.name}-${item.file.size}-${index}`}
+                            className={`group relative flex shrink-0 flex-col items-center gap-1.5 rounded-md border p-2 transition-colors ${
+                              isActive ? "border-primary bg-primary/5" : "hover:bg-muted"
+                            } ${isDup ? "border-red-500/60" : ""}`}
+                            style={{ width: "4rem" }}
+                          >
+                            {isDup && (
+                              <span className="absolute top-0 left-1 z-20 -translate-x-1/2 -translate-y-1/2 rounded-full bg-red-500 px-1.5 py-0.5 text-[9px] font-semibold text-white shadow-sm whitespace-nowrap">
+                                {t("attachmentDialog.duplicateBadge")}
+                              </span>
+                            )}
+                            <button
+                              onClick={() => setPreviewIndex(index)}
+                             className="flex w-full flex-col items-center gap-1.5"
+                           >
+                             <div className="flex size-8 items-center justify-center rounded-md border bg-muted/50">
+                               {item.thumb ? (
+                                 <img src={item.thumb} alt="" className="size-6 rounded object-cover" />
+                               ) : (
+                                 <Icon className="size-4 text-muted-foreground" />
+                               )}
+                             </div>
+                              <span className="w-full truncate text-[10px] text-foreground">{item.file.name}</span>
+                            </button>
+                           <Button
+                             variant="ghost"
+                             size="icon"
+                             className="absolute right-0.5 top-0.5 size-4 opacity-0 group-hover:opacity-100 transition-opacity"
+                             aria-label={t("attachmentDialog.removeFile")}
+                             disabled={uploading}
+                             onClick={(e) => {
+                               e.stopPropagation();
+                               removeStaged(index);
+                             }}
+                           >
+                             <X className="size-2.5" />
+                           </Button>
+                         </div>
+                       );
+                    })}
+                  </div>
+                  <button
+                    onClick={() => scrollList(1)}
+                    className={`shrink-0 rounded-md mt-3 p-1 transition-colors ${
+                      canScrollRight ? "hover:bg-muted" : "cursor-not-allowed opacity-50"
+                    }`}
+                    aria-label="下一页"
+                  >
+                    <ChevronRight className="size-4" />
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 底部固定区 */}
+          <div className="shrink-0 space-y-3 pt-3">
+            {/* 描述 */}
+            <div className="space-y-1.5">
+              <label htmlFor="attachment-desc" className="text-xs font-medium text-muted-foreground">
+                {t("attachmentDialog.descOptional")}
+              </label>
+              <Textarea
+                id="attachment-desc"
+                placeholder={t("attachmentDialog.descPlaceholder")}
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                disabled={isBatch}
+                className="min-h-16 resize-none mt-1.5"
+              />
+              {isBatch && <p className="text-xs text-muted-foreground">{t("attachmentDialog.batchDescDisabled")}</p>}
+            </div>
+            {/* 操作按钮行 */}
+            <div className="flex items-center justify-between gap-2">
+               {hasFiles && !isEdit && (
+                <Button variant="outline" size="sm" onClick={() => inputRef.current?.click()}>
+                  <UploadCloud className="size-3.5 mr-1.5" />
+                  {t("attachmentDialog.continueUpload")}
+                </Button>
+              )}
+              <div className="flex items-center gap-2 ml-auto">
+                {hasDuplicates && (
+                  <span className="text-xs mr-2 text-amber-600 dark:text-amber-400">{t("attachmentDialog.duplicateHint")}</span>
+                )}
+                <Button variant="outline" disabled={uploading} onClick={() => handleClose(false)}>
+                  {t("attachmentDialog.cancel")}
+                </Button>
+                <Button
+                  disabled={staged.length === 0 || uploading}
+                  onClick={() => void handleConfirm()}
+                >
+                  {uploading ? t("attachmentDialog.uploading") : t("attachmentDialog.confirmUpload")}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <input
+            ref={inputRef}
+            type="file"
+            multiple
+            className="hidden"
+            onChange={(e) => {
+              if (e.target.files && e.target.files.length > 0) addFiles(e.target.files);
+              e.target.value = "";
+            }}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}