@spzxg/cli-ui 0.4.0 → 0.6.1

package/src/board/FileViewer.tsx

@@ -1,12 +1,24 @@
 // 文件预览：Markdown / 代码 / 文本 / CSV / 图片 / PDF / HTML（沙箱）/ Word，其余给下载。
 // 看板和对话里的弹窗共用。文件经 center 转发读取（浏览器不直连执行节点）。
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import type { BoardBackend } from "../core/client.js";
+//
+// 远端、实时、超大文件：
+//   · 图片 / PDF / HTML / 下载一律用浏览器能直接打开的地址（同源代理时就是文件接口；没有代理注入令牌时用中枢发的短期链接），
+//     流式加载、支持断点，不把文件读进浏览器内存。中枢太旧发不了短期链接时才先 fetch 成 blob，这时超大的文件不预览、只给下载。
+//   · 文本只读开头 512 KB（Range），超过的可以切到「看末尾」（日志）；GBK 导出的文件按 GB18030 解。
+//   · 文件在变（任务还在写）：看板递增 version 时重读；读的时候保留滚动位置，原本在最底下的继续贴着底（像 tail -f）。
+import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
+import { fileUrlFromBase, type BoardBackend } from "../core/client.js";
 import { Icon } from "../ui/icons.js";
 import { Markdown } from "../ui/Markdown.js";
 import { FileLinkContext, FileOpenContext } from "../ui/fileLinks.js";
-import { codeLang, fmtSize, parseCsv, previewKind, resolveRelative, type PreviewKind } from "./fileKind.js";
+import { codeLang, fmtSize, parseCsv, previewKind, resolveRelative, splitMarkdown, type PreviewKind } from "./fileKind.js";
+import { loadText, refreshText, type LoadedText } from "./textLoad.js";
+import { decodeText } from "../core/textDecode.js";
 import { relTime } from "../ui/format.js";
+import { downloadFile, mimeOf } from "./fileOps.js";
+import { bridgeDoc, frameToken, type FrameSelMessage } from "./frameQuote.js";
+
+export { downloadFile };
 
 /** 看板 / 预览里给文件加的自定义操作（例如「在对话里引用」「发到工作协同」）。 */
 export interface FileAction {
@@ -17,56 +29,83 @@ export interface FileAction {
   onClick: (file: { path: string; name: string; url: string; downloadUrl: string }, jobId: string) => void;
 }
 
-const TEXT_MAX = 512 * 1024;
-const HIGHLIGHT_MAX = 120 * 1024;
+// 预览能看多大（实测 Chromium：32 MB 纯文本排版约 3 秒，60 MB 的 HTML 报告约 12 秒显示出来）：
+/** 文本（代码、日志、Markdown、CSV、HTML 源文件）一次最多读这么多；更大的看开头 / 末尾。 */
+export const TEXT_MAX = 32 * 1024 * 1024;
+/** HTML 预览（能选中引用）最多读这么多进来；更大的直接按地址打开（能看，不能选中引用）。 */
+export const HTML_QUOTE_MAX = 100 * 1024 * 1024;
+/** 代码高亮到这么大（约 1 MB/秒）；更大的按纯文本显示（照样能选中引用）。 */
+const HIGHLIGHT_MAX = 512 * 1024;
+/** 大 Markdown 分段渲染，每段这么多字（渲染耗时随长度超线性增长：300 KB 约 0.7 秒，3 MB 一次渲染要 30 秒）。 */
+const MARKDOWN_SECTION = 128 * 1024;
+/** 只能先 fetch 成 blob 时（中枢太旧）：超过这么大的图片 / PDF 不预览、不在浏览器里拼下载。 */
+const BLOB_PREVIEW_MAX = 100 * 1024 * 1024;
+/** Word 在浏览器里转换，太大的只给下载。 */
+const DOCX_PREVIEW_MAX = 50 * 1024 * 1024;
+/** 短期链接 30 分钟有效：每 5 分钟问一次（客户端缓存着，快到期才真的换），长时间开着的预览不会失效。 */
+const LINK_RECHECK_MS = 5 * 60_000;
+
+/**
+ * 浏览器能直接打开的文件地址。directLinks（同源代理）时马上有；否则等中枢发的短期链接（pending = 还在换）；
+ * 中枢发不了（太旧）时 url 为 null、blob = true，调用方退回先 fetch 再显示。
+ */
+function useFileLinks(backend: BoardBackend, jobId: string): { url: ((path: string, download?: boolean) => string) | null; pending: boolean; blob: boolean } {
+  const [linkBase, setLinkBase] = useState<string | null | undefined>(undefined);
+  useEffect(() => {
+    if (backend.directLinks || !backend.fileLinkBase) return;
+    let alive = true;
+    const check = () => backend.fileLinkBase!(jobId).then((b) => { if (alive) setLinkBase(b); }, () => { if (alive) setLinkBase((old) => old ?? null); });
+    void check();
+    const timer = setInterval(check, LINK_RECHECK_MS);
+    return () => { alive = false; clearInterval(timer); };
+  }, [backend, jobId]);
+  return useMemo(() => {
+    if (backend.directLinks) return { url: (path: string, download?: boolean) => backend.fileUrl(jobId, path, { download }), pending: false, blob: false };
+    if (!backend.fileLinkBase || linkBase === null) return { url: null, pending: false, blob: true };
+    if (linkBase === undefined) return { url: null, pending: true, blob: false };
+    return { url: (path: string, download?: boolean) => fileUrlFromBase(linkBase, path, download), pending: false, blob: false };
+  }, [backend, jobId, linkBase]);
+}
 
-const MIME: Record<string, string> = {
-  png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", svg: "image/svg+xml",
-  bmp: "image/bmp", ico: "image/x-icon", avif: "image/avif", pdf: "application/pdf", html: "text/html", htm: "text/html",
+const withVersion = (url: string, version: number, attempt = 0) => {
+  const q = [version ? `v=${version}` : "", attempt ? `r=${attempt}` : ""].filter(Boolean).join("&");
+  return q ? `${url}${url.includes("?") ? "&" : "?"}${q}` : url;
 };
+/** 读了这么久还没好：提示「网络较慢」，不让人以为卡死了。 */
+const SLOW_HINT_MS = 8_000;
+function useSlow(loading: boolean) {
+  const [slow, setSlow] = useState(false);
+  useEffect(() => {
+    setSlow(false);
+    if (!loading) return;
+    const t = setTimeout(() => setSlow(true), SLOW_HINT_MS);
+    return () => clearTimeout(t);
+  }, [loading]);
+  return slow;
+}
 
-/** 能直接用的地址；需要请求头时先 fetch 成 blob 地址（离开时释放）。 */
-function useFileSrc(backend: BoardBackend, jobId: string, path: string, enabled: boolean, version: number) {
+/** 图片 / PDF / HTML 的地址：能直接用就用；只能 fetch 时先读成 blob（离开时释放），太大的不读。 */
+function useFileSrc(backend: BoardBackend, jobId: string, path: string, enabled: boolean, version: number, size: number | undefined, links: ReturnType<typeof useFileLinks>, attempt = 0) {
   const [state, setState] = useState<{ url: string | null; error: string | null }>({ url: null, error: null });
+  const direct = enabled && links.url ? withVersion(links.url(path), version, attempt) : null;
   useEffect(() => {
-    if (!enabled) return;
-    if (backend.directLinks) {
-      const url = backend.fileUrl(jobId, path);
-      setState({ url: version ? `${url}${url.includes("?") ? "&" : "?"}v=${version}` : url, error: null });
-      return;
-    }
+    if (!enabled || !links.blob) return;
+    setState({ url: null, error: null });
+    if (size !== undefined && size > BLOB_PREVIEW_MAX) { setState({ url: null, error: `文件较大（${fmtSize(size)}），请下载后查看` }); return; }
     let alive = true;
     let objectUrl: string | null = null;
     backend.readBuffer(jobId, path).then((buffer) => {
       if (!alive) return;
-      const ext = path.split(".").pop()?.toLowerCase() ?? "";
-      objectUrl = URL.createObjectURL(new Blob([buffer], { type: MIME[ext] ?? "application/octet-stream" }));
+      objectUrl = URL.createObjectURL(new Blob([buffer], { type: mimeOf(path) }));
       setState({ url: objectUrl, error: null });
     }, (error: unknown) => { if (alive) setState({ url: null, error: error instanceof Error ? error.message : String(error) }); });
     return () => { alive = false; if (objectUrl) URL.revokeObjectURL(objectUrl); };
-  }, [backend, jobId, path, enabled, version]);
-  return state;
-}
-
-/** 下载：能直接用地址就用（不占内存），否则 fetch 成 blob 再存。 */
-export async function downloadFile(backend: BoardBackend, jobId: string, path: string) {
-  const name = path.split("/").pop() || "file";
-  const a = document.createElement("a");
-  a.download = name;
-  let objectUrl: string | null = null;
-  if (backend.directLinks) a.href = backend.fileUrl(jobId, path, { download: true });
-  else {
-    objectUrl = URL.createObjectURL(new Blob([await backend.readBuffer(jobId, path)]));
-    a.href = objectUrl;
-  }
-  document.body.appendChild(a);
-  a.click();
-  a.remove();
-  if (objectUrl) setTimeout(() => URL.revokeObjectURL(objectUrl!), 30_000);
+  }, [backend, jobId, path, enabled, version, links.blob, size, attempt]);
+  return direct ? { url: direct, error: null } : state;
 }
 
 type Loaded =
-  | { kind: "text"; text: string; truncated: boolean; size: number }
+  | ({ kind: "text" } & LoadedText)
   | { kind: "docx"; html: string }
   | { kind: "none" };
 
@@ -87,9 +126,14 @@ export interface FileViewerProps {
   actions?: FileAction[];
   /** 隐藏头部（宿主自己做）。 */
   bare?: boolean;
+  /** 给了就支持「选中文字 → 引用到对话」：在预览里选中一段文字时浮出按钮（Markdown / 代码 / 文本 / 表格 / HTML / Word，及各自的源文件）。 */
+  onQuoteText?: (text: string) => void;
 }
 
-export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onOpenPath, onClose, lead, actions = [], bare }: FileViewerProps) {
+/** 选中的文字超过这么多只带开头（引用是给智能体指位置的，不是搬运全文）。 */
+const QUOTE_SELECTION_MAX = 3_000;
+
+export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onOpenPath, onClose, lead, actions = [], bare, onQuoteText }: FileViewerProps) {
   const name = path.split("/").pop() || path;
   const kind: PreviewKind = previewKind(path);
   const [loaded, setLoaded] = useState<Loaded | null>(null);
@@ -97,15 +141,138 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
   const [copied, setCopied] = useState(false);
   const [busy, setBusy] = useState(false);
   const [mode, setMode] = useState<"preview" | "source">("preview");
+  // 超大文本：看开头还是看末尾（日志看末尾）。
+  const [tail, setTail] = useState(false);
+  // 放大：盖住页面看（看板窄的时候看报告、表格、图片）。Esc 还原。
+  const [big, setBig] = useState(false);
+  // 点「重试」：重新读（图片 / PDF 换一个地址参数，绕开浏览器缓存的失败）。
+  const [attempt, setAttempt] = useState(0);
+  const retry = () => { setError(null); setLoaded(null); setAttempt((n) => n + 1); };
+  useEffect(() => {
+    if (!big) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setBig(false); };
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKey);
+    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
+  }, [big]);
   const needsSrc = kind === "image" || kind === "pdf" || kind === "html";
-  const src = useFileSrc(backend, jobId, path, needsSrc, version);
+  // 这个预览的口令：iframe 里的选区桥报上来的消息只认它（见 frameQuote.ts）。
+  const token = useMemo(frameToken, []);
+  const links = useFileLinks(backend, jobId);
+  const knownSize = size ?? (loaded?.kind === "text" ? loaded.size : undefined);
+  // 读大文件时的进度（已收到的字节数）。
+  const [progress, setProgress] = useState(0);
+  // HTML 要能选中引用：整个读进来（最多 HTML_QUOTE_MAX）、插上选区桥，用 srcdoc 显示（见 frameQuote.ts）。
+  // 更大的、读失败的退回原来的 src 方式（能看，不能选中引用）。相对资源按文件地址解析；中枢太旧拿不到地址时相对资源显示不了（和以前一样）。
+  // 文件地址在读到的那一刻定下来：短期链接定时换新时不重载页面。
+  const linksRef = useRef(links);
+  linksRef.current = links;
+  const htmlTooBig = size !== undefined && size > HTML_QUOTE_MAX;
+  const htmlBridge = !!onQuoteText && kind === "html" && mode === "preview" && !links.pending && !htmlTooBig;
+  const [htmlDoc, setHtmlDoc] = useState<{ srcDoc: string } | "fallback" | "toobig" | null>(null);
+  // 走 srcdoc 时不用再按地址取（中枢太旧时那是又整个读一遍）。
+  const bridged = htmlBridge && htmlDoc !== "fallback" && htmlDoc !== "toobig";
+  const src = useFileSrc(backend, jobId, path, needsSrc && !bridged, version, knownSize, links, attempt);
+  useEffect(() => {
+    if (!htmlBridge) return;
+    const ctl = new AbortController();
+    let over = false;
+    setHtmlDoc(null);
+    setProgress(0);
+    backend.readBuffer(jobId, path, {
+      signal: ctl.signal,
+      // 大小事先不知道（从对话里打开的）：读着读着超过上限就停下，改成直接打开。
+      onBytes: (n) => { setProgress(n); if (n > HTML_QUOTE_MAX && !over) { over = true; ctl.abort(); } },
+    }).then((buffer) => {
+      if (ctl.signal.aborted) return;
+      const url = linksRef.current.url?.(path);
+      const base = url ? withVersion(new URL(url, window.location.href).href, version) : undefined;
+      setHtmlDoc({ srcDoc: bridgeDoc(decodeText(new Uint8Array(buffer)).text, { token, base }) });
+    }, () => { if (over) setHtmlDoc("toobig"); else if (!ctl.signal.aborted) setHtmlDoc("fallback"); });
+    return () => { if (!over) ctl.abort(); };
+  }, [htmlBridge, backend, jobId, path, version, attempt, token]);
 
+  // 重读时保留滚动位置；原本贴着底（或在看末尾）的继续贴着底——任务在往文件里写时像 tail -f。
+  const bodyRef = useRef<HTMLDivElement | null>(null);
+  const loadedRef = useRef(loaded);
+  loadedRef.current = loaded;
+  const textKey = useRef("");
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const stick = useRef(false);
+  // 选中文字 → 浮出「引用到对话」。按钮放在选区上方；滚动、点别处、选区清空时收起。
+  // frame = 选区在 HTML / Word 预览的 iframe 里（由插进去的小脚本报上来，见 frameQuote.ts）。
+  const [sel, setSel] = useState<{ text: string; x: number; y: number; frame?: boolean } | null>(null);
+  const frameRef = useRef<HTMLIFrameElement | null>(null);
+  useEffect(() => {
+    if (!onQuoteText) return;
+    const onMessage = (e: MessageEvent) => {
+      const frame = frameRef.current;
+      const root = rootRef.current;
+      const data = e.data as FrameSelMessage | null;
+      if (!frame || !root || e.source !== frame.contentWindow || !data || data.cliUiSel !== token) return;
+      const text = data.scroll ? "" : (data.text ?? "").trim();
+      if (!text) { setSel((cur) => (cur?.frame ? null : cur)); return; }
+      const box = root.getBoundingClientRect();
+      const fr = frame.getBoundingClientRect();
+      const r = data.rect ?? { left: fr.width / 2, top: 48, width: 0 };
+      setSel({ text, frame: true, x: Math.min(Math.max(8, fr.left - box.left + r.left + r.width / 2), box.width - 8), y: Math.max(40, fr.top - box.top + r.top) });
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [onQuoteText, token]);
+  useEffect(() => {
+    if (!onQuoteText) return;
+    const read = () => {
+      const s = window.getSelection();
+      const body = bodyRef.current;
+      const root = rootRef.current;
+      // 宿主页面上没有选区：iframe 里的选区（另一个文档）不在这里，交给上面的消息处理，不清掉。
+      if (!s || s.isCollapsed || !s.rangeCount) { setSel((cur) => (cur?.frame ? cur : null)); return; }
+      if (!body || !root || !body.contains(s.anchorNode) || !body.contains(s.focusNode)) { setSel(null); return; }
+      const text = s.toString().trim();
+      if (!text) { setSel(null); return; }
+      const box = root.getBoundingClientRect();
+      // 取不到选区位置的环境（老浏览器、测试环境）：按钮放在预览顶部中间。
+      const range = s.getRangeAt(0);
+      const r = typeof range.getBoundingClientRect === "function" ? range.getBoundingClientRect() : { left: box.left + box.width / 2, width: 0, top: box.top + 48 };
+      setSel({ text, x: Math.min(Math.max(8, r.left - box.left + r.width / 2), box.width - 8), y: Math.max(40, r.top - box.top) });
+    };
+    const onUp = () => setTimeout(read, 0);
+    const onChange = () => { const s = window.getSelection(); if (!s || s.isCollapsed) setSel((cur) => (cur?.frame ? cur : null)); };
+    const body = bodyRef.current;
+    document.addEventListener("mouseup", onUp);
+    document.addEventListener("keyup", onUp);
+    document.addEventListener("selectionchange", onChange);
+    const onScroll = () => setSel(null);
+    // 选区在 iframe 里时，点宿主页面别处（不是这个按钮）就收起。
+    const onDown = (e: MouseEvent) => { if (!(e.target instanceof Element && e.target.closest(".cli-fv-selq"))) setSel((cur) => (cur?.frame ? null : cur)); };
+    body?.addEventListener("scroll", onScroll, { passive: true });
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("mouseup", onUp);
+      document.removeEventListener("keyup", onUp);
+      document.removeEventListener("selectionchange", onChange);
+      body?.removeEventListener("scroll", onScroll);
+    };
+  }, [onQuoteText, loaded]);
+  const quoteSelection = () => {
+    if (!sel || !onQuoteText) return;
+    const text = sel.text.length > QUOTE_SELECTION_MAX ? `${sel.text.slice(0, QUOTE_SELECTION_MAX)}…` : sel.text;
+    onQuoteText(text);
+    if (sel.frame) frameRef.current?.contentWindow?.postMessage({ cliUiClear: token }, "*");
+    else window.getSelection()?.removeAllRanges();
+    setSel(null);
+  };
   useEffect(() => {
     let alive = true;
     setError(null);
     if (needsSrc || kind === "binary") { setLoaded({ kind: "none" }); return; }
     if (kind === "docx") {
-      backend.readBuffer(jobId, path).then(async (buffer) => {
+      if (size !== undefined && size > DOCX_PREVIEW_MAX) { setError(`文件较大（${fmtSize(size)}），请下载后查看`); return; }
+      setProgress(0);
+      backend.readBuffer(jobId, path, { onBytes: (n) => { if (alive) setProgress(n); } }).then(async (buffer) => {
         const mammoth = await import("mammoth");
         const convert = (mammoth as unknown as { convertToHtml: typeof import("mammoth").convertToHtml }).convertToHtml
           ?? (mammoth as unknown as { default: typeof import("mammoth") }).default.convertToHtml;
@@ -116,39 +283,67 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
         if (alive) setLoaded({ kind: "docx", html: out.value });
       }).catch((e: unknown) => { if (alive) setError(e instanceof Error ? e.message : String(e)); });
     } else {
-      backend.readText(jobId, path, TEXT_MAX).then(
-        (r) => { if (alive) setLoaded({ kind: "text", text: r.text, truncated: r.truncated, size: r.size }); },
+      // 只是文件变了（同一个文件、同样看开头 / 末尾）：能接上就只取新增的部分（见 textLoad.ts），接不上再整个重读。
+      const key = `${path}|${tail}|${attempt}`;
+      const prev = loadedRef.current?.kind === "text" && textKey.current === key ? loadedRef.current : null;
+      textKey.current = key;
+      if (!prev) setProgress(0);
+      const full = () => loadText(backend, jobId, path, { max: TEXT_MAX, tail, onBytes: (n) => { if (alive && !prev) setProgress(n); } });
+      (prev ? refreshText(backend, jobId, path, prev, TEXT_MAX).then((r) => r ?? full(), full) : full()).then(
+        (r) => {
+          if (!alive) return;
+          const box = bodyRef.current;
+          stick.current = tail || (!!box && box.scrollHeight > box.clientHeight && box.scrollHeight - box.scrollTop - box.clientHeight < 40);
+          setLoaded({ kind: "text", ...r });
+        },
         (e: unknown) => { if (alive) setError(e instanceof Error ? e.message : String(e)); },
       );
     }
     return () => { alive = false; };
-  }, [backend, jobId, path, kind, needsSrc, version]);
+  }, [backend, jobId, path, kind, needsSrc, version, tail, attempt]); // eslint-disable-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => {
+    const box = bodyRef.current;
+    if (box && stick.current && loaded?.kind === "text") box.scrollTop = box.scrollHeight;
+  }, [loaded]);
 
   const fileInfo = useCallback(() => ({
-    path, name, url: backend.fileUrl(jobId, path), downloadUrl: backend.fileUrl(jobId, path, { download: true }),
-  }), [backend, jobId, path, name]);
+    path, name, url: links.url?.(path) ?? backend.fileUrl(jobId, path), downloadUrl: links.url?.(path, true) ?? backend.fileUrl(jobId, path, { download: true }),
+  }), [backend, jobId, path, name, links]);
 
   const download = async () => {
     setBusy(true);
-    try { await downloadFile(backend, jobId, path); } catch (e) { setError(e instanceof Error ? e.message : String(e)); } finally { setBusy(false); }
-  };
-  const openNew = () => {
-    if (backend.directLinks) window.open(backend.fileUrl(jobId, path), "_blank", "noopener");
-    else if (src.url) window.open(src.url, "_blank", "noopener");
+    try { await downloadFile(backend, jobId, path, knownSize); } catch (e) { setError(e instanceof Error ? e.message : String(e)); } finally { setBusy(false); }
   };
+  const openUrl = links.url ? links.url(path) : src.url;
+  const openNew = () => { if (openUrl) window.open(openUrl, "_blank", "noopener"); };
   const copyPath = () => {
     void navigator.clipboard?.writeText(path).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1200); }, () => undefined);
   };
 
   // Markdown 里的相对链接 / 图片：相对这个文件所在目录。
-  const mdResolve = useMemo(() => (href: string) => (backend.directLinks ? backend.fileUrl(jobId, resolveRelative(path, href)) : null), [backend, jobId, path]);
+  const mdResolve = useMemo(() => (href: string) => links.url?.(resolveRelative(path, href)) ?? null, [links, path]);
   const mdOpen = useMemo(() => (onOpenPath ? (href: string) => { onOpenPath(resolveRelative(path, href)); return true; } : null), [onOpenPath, path]);
 
   const canSource = kind === "markdown" || kind === "html" || kind === "csv";
-  const shownSize = size ?? (loaded?.kind === "text" ? loaded.size : undefined);
+  const shownSize = knownSize;
+  const text = loaded?.kind === "text" ? loaded : null;
+  const loading = !error && !src.error && (needsSrc ? (bridged ? htmlDoc === null : !src.url) : !loaded);
+  const slow = useSlow(loading);
+  // 大文件显示读到哪了；很久没读完提示网络慢。
+  const progressText = progress > 0 ? `已读取 ${fmtSize(progress)}${shownSize ? ` / ${fmtSize(shownSize)}` : ""}` : "";
+  const slowNote = progressText || slow
+    ? <div className="cli-fv-slow">{slow ? `网络较慢或执行节点忙，仍在读取${progressText ? `（${progressText}）` : shownSize ? `（${fmtSize(shownSize)}）` : ""}…` : progressText}</div>
+    : null;
 
   return (
-    <div className="cli-fv">
+    <>
+    {big && <div className="cli-ui cli-fv-backdrop" onClick={() => setBig(false)} />}
+    <div className={`cli-fv ${big ? "cli-fv-big" : ""}`} ref={rootRef}>
+      {sel && (
+        <button className="cli-fv-selq" style={{ left: sel.x, top: sel.y }} onMouseDown={(e) => e.preventDefault()} onClick={quoteSelection} title="把选中的这段带进下一条消息">
+          {Icon.board()} 引用到对话{sel.text.length > 1 ? `（${sel.text.length > QUOTE_SELECTION_MAX ? `前 ${QUOTE_SELECTION_MAX}` : sel.text.length} 字）` : ""}
+        </button>
+      )}
       {!bare && (
         <div className="cli-fv-h">
           {lead}
@@ -157,6 +352,7 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
           <span className="cli-fv-meta">
             {shownSize !== undefined && fmtSize(shownSize)}
             {mtime && mtime > 0 ? ` · ${relTime(mtime)}更新` : ""}
+            {text?.encoding && text.encoding !== "utf-8" ? ` · ${text.encoding.toUpperCase()}` : ""}
           </span>
           <span className="cli-fv-sp" />
           {canSource && (
@@ -168,14 +364,16 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
             <button key={a.label} className="cli-fv-btn" title={a.title} onClick={() => a.onClick(fileInfo(), jobId)}>{a.label}</button>
           ))}
           <button className="cli-fv-icon" onClick={copyPath} title={copied ? "已复制" : "复制路径"}>{copied ? Icon.check() : Icon.copy()}</button>
-          <button className="cli-fv-icon" onClick={openNew} title="在新窗口打开" disabled={!backend.directLinks && !src.url}>{Icon.external()}</button>
+          <button className="cli-fv-icon cli-fv-zoom" onClick={() => setBig((b) => !b)} title={big ? "还原（Esc）" : "放大查看"} aria-pressed={big}>{big ? "⤡" : "⤢"}</button>
+          <button className="cli-fv-icon" onClick={openNew} title="在新窗口打开" disabled={!openUrl}>{Icon.external()}</button>
           <button className="cli-fv-icon" onClick={() => void download()} title="下载" disabled={busy}>{Icon.download()}</button>
           {onClose && <button className="cli-fv-icon" onClick={onClose} title="关闭">{Icon.x()}</button>}
         </div>
       )}
-      <div className={`cli-fv-b k-${kind}`}>
+      <div className={`cli-fv-b k-${kind}`} ref={bodyRef}>
         {error || src.error ? (
           <div className="cli-fv-note err">读取失败：{error ?? src.error}
+            <button className="btn btn-line btn-sm" style={{ marginLeft: 8 }} onClick={retry}>重试</button>
             <button className="btn btn-line btn-sm" style={{ marginLeft: 8 }} onClick={() => void download()}>{Icon.download()} 下载</button>
           </div>
         ) : kind === "binary" ? (
@@ -183,51 +381,162 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
             <button className="btn btn-accent btn-sm" style={{ marginLeft: 8 }} onClick={() => void download()} disabled={busy}>{Icon.download()} 下载</button>
           </div>
         ) : needsSrc ? (
-          !src.url ? <div className="cli-fv-note">加载中…</div>
-            : kind === "image" ? <div className="cli-fv-img"><img src={src.url} alt={name} /></div>
+          bridged && htmlDoc === null ? <div className="cli-fv-note">加载中…{slowNote}</div>
+          // 可以选中引用：srcdoc + 选区桥。沙箱同样不给同源，页面自己的脚本被插入的 CSP 挡住，只有桥脚本能跑。
+          : bridged && htmlDoc ? <iframe ref={frameRef} className="cli-fv-frame" srcDoc={htmlDoc.srcDoc} title={name} sandbox="allow-scripts allow-popups allow-forms allow-modals" />
+          : !src.url ? <div className="cli-fv-note">加载中…{slowNote}</div>
+            : kind === "image" ? <ImageView key={src.url} src={src.url} name={name} onRetry={retry} />
               : kind === "pdf" ? <iframe className="cli-fv-frame" src={src.url} title={name} />
                 : mode === "source" ? <SourceView backend={backend} jobId={jobId} path={path} version={version} />
                   // HTML：节点按沙箱 CSP 返回；这里再加 iframe 沙箱（不给同源），页面脚本碰不到宿主。
-                  : <iframe className="cli-fv-frame" src={src.url} title={name} sandbox="allow-scripts allow-popups allow-forms allow-modals" />
+                  : <>
+                        {onQuoteText && (htmlTooBig || htmlDoc === "toobig") && <div className="cli-fv-trunc">文件超过 {fmtSize(HTML_QUOTE_MAX)}，直接打开显示，不能选中文字引用（可以用「引用到对话」引用整个文件）。</div>}
+                        <iframe className="cli-fv-frame" src={src.url} title={name} sandbox="allow-scripts allow-popups allow-forms allow-modals" />
+                      </>
         ) : !loaded ? (
-          <div className="cli-fv-note">加载中…</div>
+          <div className="cli-fv-note">加载中…{slowNote}</div>
         ) : loaded.kind === "docx" ? (
-          <iframe className="cli-fv-frame doc" title={name} sandbox="" srcDoc={docxPage(loaded.html)} />
-        ) : loaded.kind === "text" ? (
+          // Word：转出来的 HTML 放进沙箱。能选中引用时插上选区桥（只放行桥脚本，文档里不会有别的脚本能跑）。
+          onQuoteText
+            ? <iframe ref={frameRef} className="cli-fv-frame doc" title={name} sandbox="allow-scripts" srcDoc={bridgeDoc(docxPage(loaded.html), { token })} />
+            : <iframe className="cli-fv-frame doc" title={name} sandbox="" srcDoc={docxPage(loaded.html)} />
+        ) : text ? (
           <>
-            {loaded.truncated && <div className="cli-fv-trunc">文件较大，只显示前 {fmtSize(TEXT_MAX)}；完整内容请下载。</div>}
+            {(text.truncated || tail) && (
+              <div className="cli-fv-trunc">
+                {tail && !text.tail ? "执行节点不支持只读末尾，下面仍是开头；" : ""}
+                文件较大（{fmtSize(text.size)}），只显示{text.tail ? "最后" : "前"} {fmtSize(TEXT_MAX)}；完整内容请下载。
+                <button className="cli-fv-btn" onClick={() => setTail(!tail)}>{tail ? "看开头" : "看末尾"}</button>
+              </div>
+            )}
             {kind === "markdown" && mode === "preview" ? (
               <FileLinkContext.Provider value={mdResolve}>
                 <FileOpenContext.Provider value={mdOpen}>
-                  <div className="cli-fv-md"><Markdown>{loaded.text}</Markdown></div>
+                  <div className="cli-fv-md"><MarkdownSections text={text.text} scrollRef={bodyRef} /></div>
                 </FileOpenContext.Provider>
               </FileLinkContext.Provider>
             ) : kind === "csv" && mode === "preview" ? (
-              <CsvTable text={loaded.text} />
-            ) : kind === "code" && loaded.text.length <= HIGHLIGHT_MAX ? (
-              <div className="cli-fv-code"><Markdown>{fenced(loaded.text, codeLang(path))}</Markdown></div>
+              <CsvTable text={text.text} />
+            ) : kind === "code" && text.text.length <= HIGHLIGHT_MAX ? (
+              <div className="cli-fv-code"><Markdown>{fenced(text.text, codeLang(path))}</Markdown></div>
             ) : (
-              <pre className="cli-fv-pre">{loaded.text}</pre>
+              // 追加的内容各是一个文字节点：文件往后长的时候前面的不用重新排版。
+              <pre className="cli-fv-pre">{text.parts.map((p, i) => <Fragment key={i}>{p}</Fragment>)}</pre>
             )}
           </>
         ) : null}
       </div>
     </div>
+    </>
+  );
+}
+
+/** 图片：缺省适应宽度；可以放大缩小、看原始大小，Ctrl / ⌘ + 滚轮也能缩放。 */
+function ImageView({ src, name, onRetry }: { src: string; name: string; onRetry?: () => void }) {
+  const [scale, setScale] = useState<number | null>(null); // null = 适应
+  const [natural, setNatural] = useState<{ w: number; h: number } | null>(null);
+  // 加载失败（网络断了、链接过期、文件坏了 / 不是浏览器认识的图片）：说清楚，给重试。
+  const [failed, setFailed] = useState(false);
+  const loadingImg = !natural && !failed;
+  const slow = useSlow(loadingImg);
+  const boxRef = useRef<HTMLDivElement | null>(null);
+  const fitScale = () => {
+    const box = boxRef.current;
+    if (!box || !natural) return 1;
+    return Math.min(1, (box.clientWidth - 32) / natural.w);
+  };
+  const zoom = (factor: number) => setScale((s) => Math.min(8, Math.max(0.1, (s ?? fitScale()) * factor)));
+  useEffect(() => {
+    const box = boxRef.current;
+    if (!box) return;
+    const onWheel = (e: WheelEvent) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      zoom(e.deltaY < 0 ? 1.1 : 1 / 1.1);
+    };
+    box.addEventListener("wheel", onWheel, { passive: false });
+    return () => box.removeEventListener("wheel", onWheel);
+  }); // eslint-disable-line react-hooks/exhaustive-deps
+  const style = scale === null || !natural ? undefined : { width: Math.round(natural.w * scale), maxWidth: "none" };
+  return (
+    <div className="cli-fv-imgwrap">
+      <div className="cli-fv-imgbar">
+        <button className="cli-fv-btn" onClick={() => zoom(1 / 1.25)} title="缩小">−</button>
+        <span className="cli-fv-imgpct">{scale === null ? "适应" : `${Math.round(scale * 100)}%`}</span>
+        <button className="cli-fv-btn" onClick={() => zoom(1.25)} title="放大">＋</button>
+        <button className="cli-fv-btn" onClick={() => setScale(null)} disabled={scale === null}>适应</button>
+        <button className="cli-fv-btn" onClick={() => setScale(1)} disabled={scale === 1}>原始大小</button>
+        {natural && <span className="cli-fv-imgpct">{natural.w} × {natural.h}</span>}
+      </div>
+      <div className={`cli-fv-img ${scale === null ? "" : "zoomed"}`} ref={boxRef}>
+        {failed ? (
+          <div className="cli-fv-img-err">图片没有加载出来（网络中断、链接过期，或文件损坏 / 格式不支持）。
+            {onRetry && <button className="btn btn-line btn-sm" onClick={onRetry}>重试</button>}
+          </div>
+        ) : (
+          <>
+            <img src={src} alt={name} style={style} onLoad={(e) => setNatural({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight })} onError={() => setFailed(true)} />
+            {slow && <div className="cli-fv-slow">图片较大或网络较慢，仍在加载…</div>}
+          </>
+        )}
+      </div>
+    </div>
   );
 }
 
 function SourceView({ backend, jobId, path, version }: { backend: BoardBackend; jobId: string; path: string; version: number }) {
-  const [text, setText] = useState<string | null>(null);
+  const [state, setState] = useState<{ text: string; size?: number; truncated?: boolean } | null>(null);
   useEffect(() => {
     let alive = true;
-    backend.readText(jobId, path, TEXT_MAX).then((r) => { if (alive) setText(r.text); }, (e: unknown) => { if (alive) setText(`读取失败：${e instanceof Error ? e.message : String(e)}`); });
+    backend.readText(jobId, path, TEXT_MAX).then((r) => { if (alive) setState({ text: r.text, size: r.size, truncated: r.truncated }); }, (e: unknown) => { if (alive) setState({ text: `读取失败：${e instanceof Error ? e.message : String(e)}` }); });
     return () => { alive = false; };
   }, [backend, jobId, path, version]);
-  return text === null ? <div className="cli-fv-note">加载中…</div> : <pre className="cli-fv-pre">{text}</pre>;
+  if (!state) return <div className="cli-fv-note">加载中…</div>;
+  return (
+    <>
+      {state.truncated && <div className="cli-fv-trunc">文件较大（{fmtSize(state.size ?? 0)}），源文件只显示前 {fmtSize(TEXT_MAX)}；完整内容请下载。</div>}
+      <pre className="cli-fv-pre">{state.text}</pre>
+    </>
+  );
+}
+
+/** 一段 Markdown：内容没变就不重新渲染（文件追加时只有最后一段在变）。 */
+const MarkdownSection = memo(function MarkdownSection({ text }: { text: string }) {
+  return <Markdown>{text}</Markdown>;
+});
+
+/**
+ * 大 Markdown 分段渲染：先渲染前几段，滚到快看完的地方再接着渲染后面的（每段约 MARKDOWN_SECTION 字）。
+ * 小文件就是一段，和整篇渲染一样。没有 IntersectionObserver 的环境（老浏览器、服务端）一次全部渲染。
+ */
+function MarkdownSections({ text, scrollRef }: { text: string; scrollRef: RefObject<HTMLDivElement | null> }) {
+  const sections = useMemo(() => splitMarkdown(text, MARKDOWN_SECTION), [text]);
+  const lazy = typeof IntersectionObserver !== "undefined";
+  const [shown, setShown] = useState(2);
+  const sentinel = useRef<HTMLDivElement | null>(null);
+  const more = shown < sections.length && lazy;
+  useEffect(() => {
+    const el = sentinel.current;
+    if (!more || !el) return;
+    const io = new IntersectionObserver((entries) => { if (entries.some((e) => e.isIntersecting)) setShown((n) => n + 2); }, { root: scrollRef.current, rootMargin: "0px 0px 2000px 0px" });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [more, shown, scrollRef]);
+  const visible = lazy ? sections.slice(0, shown) : sections;
+  return (
+    <>
+      {visible.map((s, i) => <MarkdownSection key={i} text={s} />)}
+      {more && <div ref={sentinel} className="cli-fv-slow">还有 {sections.length - shown} 段，继续往下滚动显示…</div>}
+    </>
+  );
 }
 
+/** 表格先显示这么多行，「再显示」每次多这么多（几十万行一次画出来页面会卡住）。 */
+const CSV_PAGE = 2_000;
+
 function CsvTable({ text }: { text: string }) {
-  const { rows, more } = useMemo(() => parseCsv(text), [text]);
+  const [limit, setLimit] = useState(CSV_PAGE);
+  const { rows, more } = useMemo(() => parseCsv(text, limit + 1), [text, limit]);
   if (!rows.length) return <div className="cli-fv-note">空文件。</div>;
   const [head, ...body] = rows;
   return (
@@ -236,7 +545,12 @@ function CsvTable({ text }: { text: string }) {
         <thead><tr>{head.map((c, i) => <th key={i}>{c}</th>)}</tr></thead>
         <tbody>{body.map((r, i) => <tr key={i}>{r.map((c, j) => <td key={j}>{c}</td>)}</tr>)}</tbody>
       </table>
-      {more && <div className="cli-fv-trunc">只显示前 500 行；完整内容请下载。</div>}
+      {more && (
+        <div className="cli-fv-trunc">已显示前 {body.length.toLocaleString()} 行。
+          <button className="cli-fv-btn" onClick={() => setLimit((n) => n + CSV_PAGE * 5)}>再显示 {(CSV_PAGE * 5).toLocaleString()} 行</button>
+          （也可以切到「源文件」看全部文字）
+        </div>
+      )}
     </div>
   );
 }