@allbluecn/web-app 0.5.0 → 0.5.1

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>
+  );
+}

package/src/components/story/relations/file-preview.tsx

@@ -0,0 +1,173 @@
+// 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 { useTheme } from "next-themes";
+import { FileViewer } from "@open-file-viewer/react";
+import { imagePlugin, textPlugin, pdfPlugin, officePlugin, archivePlugin, audioPlugin, videoPlugin, epubPlugin } from "@open-file-viewer/core";
+import type { PreviewToolbarCustomAction } from "@open-file-viewer/core";
+import "@open-file-viewer/core/style.css";
+import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";
+
+export const fileViewerPlugins = [
+  imagePlugin(),
+  textPlugin(),
+  pdfPlugin({ workerSrc: pdfWorkerSrc }),
+  officePlugin(),
+  archivePlugin(),
+  audioPlugin(),
+  videoPlugin(),
+  epubPlugin(),
+];
+
+// 全屏工具栏图标（16×16 viewBox）
+const FULLSCREEN_TOOLBAR_ICON =
+  '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 2.9H4.2A1.3 1.3 0 0 0 2.9 4.2V6"/><path d="M10 2.9h1.8a1.3 1.3 0 0 1 1.3 1.3V6"/><path d="M6 13.1H4.2a1.3 1.3 0 0 1-1.3-1.3V10"/><path d="M10 13.1h1.8a1.3 1.3 0 0 0 1.3-1.3V10"/></svg>';
+const EXIT_FULLSCREEN_TOOLBAR_ICON =
+  '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M2.9 6h1.8A1.3 1.3 0 0 0 6 4.7V2.9"/><path d="M13.1 6h-1.8A1.3 1.3 0 0 1 10 4.7V2.9"/><path d="M2.9 10h1.8A1.3 1.3 0 0 1 6 11.3v1.8"/><path d="M13.1 10h-1.8a1.3 1.3 0 0 0-1.3 1.3v1.8"/></svg>';
+
+// 仅指 text/code 预览顶部的标题栏（文件名 · 类型 · 行数 + Wrap/Copy/Download），
+// 音频等类型的标题不属于遮挡，不隐藏
+const TITLE_SELECTORS = ".ofv-code-header";
+
+export interface FilePreviewProps {
+  file: File;
+  fileName: string;
+  /** 工具栏按钮文案 */
+  fullscreenLabel?: string;
+  exitFullscreenLabel?: string;
+  /** 显示标题栏切换按钮 */
+  showTitleToggle?: boolean;
+  titleToggleLabel?: string;
+  titleToggleHideLabel?: string;
+  /** 全屏回调 */
+  onFullscreen?: () => void;
+  onExitFullscreen?: () => void;
+  /** 预览容器高度 */
+  height?: string;
+  className?: string;
+}
+
+export function FilePreview({
+  file,
+  fileName,
+  fullscreenLabel = "全屏预览",
+  exitFullscreenLabel = "退出全屏",
+  showTitleToggle = false,
+  titleToggleLabel = "显示标题",
+  titleToggleHideLabel = "隐藏标题",
+  onFullscreen,
+  onExitFullscreen,
+  height = "var(--attachment-preview-h, 16rem)",
+  className,
+}: FilePreviewProps) {
+  const { resolvedTheme } = useTheme();
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [showTitle, setShowTitle] = React.useState(false);
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+
+  // 锁定传给 FileViewer 的 theme：wrapper 的重建依赖含 options.theme，
+  // 若随 resolvedTheme 变化会导致整个 viewer 销毁重建（预览重新加载）
+  const themePropRef = React.useRef<"light" | "dark" | null>(null);
+  if (themePropRef.current === null && (resolvedTheme === "light" || resolvedTheme === "dark")) {
+    themePropRef.current = resolvedTheme;
+  }
+  const themeProp = themePropRef.current ?? "light";
+
+  // 主题切换后仅同步 ofv-root 的 theme class（core 的 applyTheme 本质就是切 class），
+  // 不触发 viewer 重建；file/toolbar 变化导致 viewer 重建后也会重跑本 effect 修正主题
+  React.useEffect(() => {
+    if (resolvedTheme !== "light" && resolvedTheme !== "dark") return;
+    const root = containerRef.current?.querySelector(".ofv-root");
+    if (!root) return;
+    const expected = `ofv-theme-${resolvedTheme}`;
+    if (!root.classList.contains(expected)) {
+      root.classList.remove("ofv-theme-light", "ofv-theme-dark");
+      root.classList.add(expected);
+    }
+  });
+
+  const toolbarActions = React.useMemo<PreviewToolbarCustomAction[]>(() => {
+    const actions: PreviewToolbarCustomAction[] = [];
+    if (isFullscreen) {
+      actions.push({
+        id: "exit-fullscreen",
+        label: exitFullscreenLabel,
+        title: exitFullscreenLabel,
+        icon: EXIT_FULLSCREEN_TOOLBAR_ICON,
+        className: "ofv-toolbar-icon-button",
+        onClick: () => {
+          setIsFullscreen(false);
+          onExitFullscreen?.();
+        },
+      });
+    } else {
+      actions.push({
+        id: "fullscreen",
+        label: fullscreenLabel,
+        title: fullscreenLabel,
+        icon: FULLSCREEN_TOOLBAR_ICON,
+        className: "ofv-toolbar-icon-button",
+        onClick: () => {
+          setIsFullscreen(true);
+          onFullscreen?.();
+        },
+      });
+    }
+    if (showTitleToggle) {
+      actions.push({
+        id: "toggle-title",
+        label: showTitle ? titleToggleHideLabel : titleToggleLabel,
+        title: showTitle ? titleToggleHideLabel : titleToggleLabel,
+        icon: '<svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1 3h14v2H1V3zm0 4h14v2H1V7zm0 4h14v2H1v-2z"/></svg>',
+        className: "ofv-toolbar-icon-button",
+        // 标题栏存在时才显示按钮：open-file-viewer 在插件渲染完成（setCommandSupport）
+        // 与翻页/缩放时会重新求值 hidden 函数
+        hidden: (ctx) => !ctx.viewport.querySelector(TITLE_SELECTORS),
+        onClick: () => setShowTitle((v) => !v),
+      });
+    }
+    return actions;
+  }, [isFullscreen, showTitle, showTitleToggle, fullscreenLabel, exitFullscreenLabel, titleToggleLabel, titleToggleHideLabel, onFullscreen, onExitFullscreen]);
+
+  // rotate 恒为 true：插件不支持时按钮保持 disabled 态，由 CSS（.ofv-preview-scope）隐藏
+  const toolbar = React.useMemo(() => {
+    const order = ["zoom-out", "zoom-in", "rotate-left", "rotate-right"];
+    order.push(isFullscreen ? "exit-fullscreen" : "fullscreen");
+    if (showTitleToggle) order.push("toggle-title");
+    return { zoom: true, rotate: true, order, actions: toolbarActions };
+  }, [toolbarActions, isFullscreen, showTitleToggle]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`ofv-preview-scope relative w-full overflow-hidden bg-background ${showTitleToggle && !showTitle ? "ofv-preview-title-hidden" : ""} ${className ?? ""}`}
+      style={{ height }}
+    >
+      <FileViewer
+        file={file}
+        fileName={fileName}
+        width="100%"
+        height="100%"
+        fit="contain"
+        toolbar={toolbar}
+        theme={themeProp}
+        plugins={fileViewerPlugins}
+      />
+    </div>
+  );
+}