@weniatall/dsh-file-viewer 0.3.7 → 0.3.12

package/lib/client.js

@@ -348,6 +348,10 @@ window.__ModuleLoader__.load({
     const DEFAULT_TREE_WIDTH = 280;
     const MIN_TREE_WIDTH = 160;
     const MAX_TREE_WIDTH = 700;
+    const GIT_CHANGES_HEIGHT_KEY = "dsh-file-viewer.git-changes-height";
+    const DEFAULT_GIT_CHANGES_HEIGHT = 180;
+    const MIN_GIT_CHANGES_HEIGHT = 64;
+    const MAX_GIT_CHANGES_HEIGHT = 800;
     /**
      * Smallest width the drawer may be dragged to.
      *
@@ -544,7 +548,11 @@ window.__ModuleLoader__.load({
       .fv-image-canvas.fv-image-dragging{cursor:grabbing}
       .fv-image-element{max-width:calc(100% - 32px);max-height:calc(100% - 32px);object-fit:contain;transition:transform .05s ease-out;pointer-events:none;box-shadow:var(--dsw-shadow-lv2,0 4px 12px rgba(0,0,0,.08))}
       .fv-frame{width:100%;height:100%;min-height:420px;border:none;background:var(--dsw-alias-bg-layer-1,#fff)}
-      .fv-sheet-tabs{display:flex;flex-wrap:wrap;flex:none;align-items:center;gap:6px;padding:8px 12px;background:var(--dsw-alias-bg-layer-1,var(--dsw-alias-bg-base,#fff));border-bottom:1px solid var(--dsw-alias-border-l1);z-index:2}
+      .fv-sheet-tabs{display:flex;flex-wrap:wrap;flex:none;align-items:center;justify-content:space-between;gap:6px;padding:6px 12px;background:var(--dsw-alias-bg-layer-1,var(--dsw-alias-bg-base,#fff));border-bottom:1px solid var(--dsw-alias-border-l1);z-index:2;min-height:38px}
+      .fv-sheet-tabs-start{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
+      .fv-sheet-tabs-end{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex:none}
+      .fv-sheet-tabs .fv-btn-back{width:26px;height:26px;font-size:16px;line-height:24px;border-radius:6px;margin-right:2px}
+      .fv-main-size{font-size:11px;color:var(--dsw-alias-label-caption);white-space:nowrap}
       .fv-content .fv-sheet-tabs{position:sticky;top:0;margin:-12px -12px 10px;padding:12px 12px 8px}
       .fv-tab{height:28px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:14px;background:none;color:var(--dsw-alias-label-secondary);font-size:12px;cursor:pointer}
       .fv-tab[aria-selected="true"]{border-color:transparent;background:var(--dsw-alias-brand-primary,#4d6bfe);color:var(--dsw-alias-label-primary-foreground,#fff)}
@@ -631,7 +639,19 @@ window.__ModuleLoader__.load({
       .fv-commit-tag{flex:none;padding:1px 6px;border-radius:6px;background:var(--dsw-alias-bg-layer-3,rgba(0,0,0,.05));color:var(--dsw-alias-label-caption);font-family:var(--dsw-font-family);font-size:10px}
       /* Working-tree changes and a commit's patch share the commit-row visuals
          so the two panels read as one surface. */
-      .fv-git-changes{display:flex;flex:none;flex-direction:column;gap:1px;max-height:38%;overflow-y:auto;overscroll-behavior:contain;border-bottom:1px solid var(--dsw-alias-border-l1);padding-bottom:4px}
+      .fv-git-changes{display:flex;flex:none;flex-direction:column;gap:1px;min-height:48px;overflow-y:auto;overscroll-behavior:contain;padding-bottom:2px}
+      .fv-git-panel[data-v-resizing="true"]{cursor:row-resize!important;user-select:none!important}
+      .fv-git-panel[data-v-resizing="true"] *{pointer-events:none!important}
+      .fv-git-panel[data-v-resizing="true"] .fv-git-v-resizer,
+      .fv-git-panel[data-v-resizing="true"] .fv-git-v-resizer *{pointer-events:auto!important}
+      .fv-git-v-resizer{position:relative;flex:none;display:flex;align-items:center;justify-content:center;height:14px;margin:2px 0;cursor:row-resize;user-select:none;touch-action:none;z-index:3}
+      .fv-git-v-resizer-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--dsw-alias-border-l1);transform:translateY(-50%);transition:background-color .15s ease;pointer-events:none}
+      .fv-git-v-resizer-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:13px;padding:0;border:1px solid var(--dsw-alias-border-l2);border-radius:6px;background:var(--dsw-alias-bg-layer-2,var(--dsw-alias-bg-base,#fff));box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:row-resize;pointer-events:auto;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;z-index:2}
+      .fv-git-v-resizer-grip{display:block;width:14px;height:2px;border-radius:1px;background:var(--dsw-alias-label-caption);box-shadow:0 -3px 0 0 var(--dsw-alias-label-caption);pointer-events:none}
+      .fv-git-v-resizer:hover .fv-git-v-resizer-line,.fv-git-v-resizer[data-dragging="true"] .fv-git-v-resizer-line{background:var(--dsw-alias-brand-primary,#4d6bfe)}
+      .fv-git-v-resizer:hover .fv-git-v-resizer-btn,.fv-git-v-resizer[data-dragging="true"] .fv-git-v-resizer-btn,.fv-git-v-resizer-btn:hover{border-color:var(--dsw-alias-brand-primary,#4d6bfe);background:var(--dsw-alias-bg-layer-1,#fff);box-shadow:0 1px 6px color-mix(in srgb,var(--dsw-alias-brand-primary,#4d6bfe) 35%,transparent)}
+      .fv-git-v-resizer:hover .fv-git-v-resizer-grip,.fv-git-v-resizer[data-dragging="true"] .fv-git-v-resizer-grip,.fv-git-v-resizer-btn:hover .fv-git-v-resizer-grip{background:var(--dsw-alias-brand-primary,#4d6bfe);box-shadow:0 -3px 0 0 var(--dsw-alias-brand-primary,#4d6bfe)}
+      .fv-git-v-resizer:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4d6bfe);outline-offset:-1px}
       .fv-git-change-group{display:flex;flex-direction:column;gap:1px}
       .fv-git-refresh{width:22px;height:22px;margin-left:auto}
       .fv-commit-diff{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 6px}
@@ -837,7 +857,8 @@ window.__ModuleLoader__.load({
         .fv-git-more{height:38px!important;font-size:13px!important}
         .fv-commit-file{min-height:42px!important;font-size:13.5px!important}
         .fv-commit-path{font-size:12px!important}
-        .fv-git-changes{max-height:none!important}
+        .fv-git-changes{height:auto!important;max-height:none!important}
+        .fv-git-v-resizer{display:none!important}
         .fv-commit-diff-file .fv-diff-table{font-size:12px!important}
       }
     `;
@@ -1144,6 +1165,27 @@ window.__ModuleLoader__.load({
       } catch { /* storage is unavailable */ }
     }
 
+    function readGitChangesHeight() {
+      try {
+        const raw = globalThis.localStorage?.getItem(GIT_CHANGES_HEIGHT_KEY);
+        const parsed = Number(raw);
+        if (Number.isFinite(parsed) && parsed >= MIN_GIT_CHANGES_HEIGHT && parsed <= MAX_GIT_CHANGES_HEIGHT) {
+          return Math.round(parsed);
+        }
+      } catch { /* storage is unavailable */ }
+      return DEFAULT_GIT_CHANGES_HEIGHT;
+    }
+
+    function writeGitChangesHeight(height) {
+      try {
+        if (typeof height === "number" && Number.isFinite(height)) {
+          globalThis.localStorage?.setItem(GIT_CHANGES_HEIGHT_KEY, String(Math.round(height)));
+        } else {
+          globalThis.localStorage?.removeItem(GIT_CHANGES_HEIGHT_KEY);
+        }
+      } catch { /* storage is unavailable */ }
+    }
+
     /**
      * Read the per-file language overrides.
      *
@@ -2306,10 +2348,72 @@ window.__ModuleLoader__.load({
       const canCheckout = repo !== null && viewingBranch !== "" && viewingBranch !== current
         && checkoutable && state.busy !== true;
 
+      const [changesHeight, setChangesHeight] = react.useState(readGitChangesHeight);
+      const [isResizingChanges, setIsResizingChanges] = react.useState(false);
+      const changesResizeRef = react.useRef(null);
+      const changesHeightRef = react.useRef(changesHeight);
+      changesHeightRef.current = changesHeight;
+
+      const onChangesResizerPointerDown = (event) => {
+        if (event.button !== 0 && event.button !== undefined) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const startY = event.clientY;
+        const startH = changesHeightRef.current;
+        changesResizeRef.current = { startY, startH };
+        setIsResizingChanges(true);
+        try { event.currentTarget.setPointerCapture(event.pointerId); } catch (_) {}
+      };
+
+      const onChangesResizerPointerMove = (event) => {
+        if (!changesResizeRef.current) return;
+        const { startY, startH } = changesResizeRef.current;
+        const deltaY = event.clientY - startY;
+        const panelEl = event.currentTarget.closest(".fv-git-panel");
+        const panelHeight = panelEl ? panelEl.clientHeight : 600;
+        const maxBound = Math.max(MIN_GIT_CHANGES_HEIGHT, panelHeight - 140);
+        const nextH = Math.round(Math.min(Math.min(MAX_GIT_CHANGES_HEIGHT, maxBound), Math.max(MIN_GIT_CHANGES_HEIGHT, startH + deltaY)));
+        setChangesHeight(nextH);
+      };
+
+      const onChangesResizerPointerUp = (event) => {
+        if (!changesResizeRef.current) return;
+        changesResizeRef.current = null;
+        setIsResizingChanges(false);
+        try { event.currentTarget.releasePointerCapture(event.pointerId); } catch (_) {}
+        writeGitChangesHeight(changesHeightRef.current);
+      };
+
+      const onChangesResizerDoubleClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setChangesHeight(DEFAULT_GIT_CHANGES_HEIGHT);
+        writeGitChangesHeight(DEFAULT_GIT_CHANGES_HEIGHT);
+      };
+
+      const onChangesResizerKeyDown = (event) => {
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          const nextH = Math.max(MIN_GIT_CHANGES_HEIGHT, changesHeightRef.current - 16);
+          setChangesHeight(nextH);
+          writeGitChangesHeight(nextH);
+        } else if (event.key === "ArrowDown") {
+          event.preventDefault();
+          const nextH = Math.min(MAX_GIT_CHANGES_HEIGHT, changesHeightRef.current + 16);
+          setChangesHeight(nextH);
+          writeGitChangesHeight(nextH);
+        } else if (event.key === "Home" || event.key === "Enter") {
+          event.preventDefault();
+          setChangesHeight(DEFAULT_GIT_CHANGES_HEIGHT);
+          writeGitChangesHeight(DEFAULT_GIT_CHANGES_HEIGHT);
+        }
+      };
+
       const wrap = (...children) => react.createElement("div", {
         className: "fv-tree fv-git-panel",
         role: "group",
         "aria-label": "Git 面板",
+        "data-v-resizing": isResizingChanges ? "true" : "false",
         style: typeof width === "number" ? { width: width + "px" } : undefined,
       }, header, ...children);
 
@@ -2447,7 +2551,14 @@ window.__ModuleLoader__.load({
             : null);
       }
 
-      const changesSection = react.createElement("div", { className: "fv-git-changes" },
+      const changesSection = react.createElement("div", {
+        className: "fv-git-changes",
+        style: {
+          height: changesHeight + "px",
+          maxHeight: "none",
+          flex: "none",
+        },
+      },
         react.createElement("div", { className: "fv-git-section" },
           react.createElement("span", null, "工作区改动"),
           react.createElement("span", { className: "fv-git-count" },
@@ -2461,6 +2572,37 @@ window.__ModuleLoader__.load({
           }, react.createElement(SvgIconRefresh, { size: 13 }))),
         changesBody);
 
+      const vResizer = react.createElement("div", {
+        className: "fv-git-v-resizer",
+        role: "separator",
+        tabIndex: 0,
+        "aria-orientation": "horizontal",
+        "aria-label": "调整工作区改动与提交记录高度",
+        "aria-valuenow": changesHeight,
+        "aria-valuemin": MIN_GIT_CHANGES_HEIGHT,
+        "aria-valuemax": MAX_GIT_CHANGES_HEIGHT,
+        title: "拖动调整区域高度，双击恢复默认",
+        "data-dragging": isResizingChanges ? "true" : "false",
+        onPointerDown: onChangesResizerPointerDown,
+        onPointerMove: onChangesResizerPointerMove,
+        onPointerUp: onChangesResizerPointerUp,
+        onPointerCancel: onChangesResizerPointerUp,
+        onDoubleClick: onChangesResizerDoubleClick,
+        onKeyDown: onChangesResizerKeyDown,
+      },
+        react.createElement("div", { className: "fv-git-v-resizer-line" }),
+        react.createElement("button", {
+          type: "button",
+          tabIndex: -1,
+          className: "fv-git-v-resizer-btn",
+          "aria-label": "拖动手柄",
+          title: "按住拖动调整高度，双击恢复默认",
+          "data-dragging": isResizingChanges ? "true" : "false",
+        },
+          react.createElement("span", { className: "fv-git-v-resizer-grip" })
+        )
+      );
+
       const commitRows = commits.map((commit) => react.createElement("button", {
         key: commit.sha,
         type: "button",
@@ -2507,6 +2649,7 @@ window.__ModuleLoader__.load({
 
       return wrap(toolbar,
         changesSection,
+        vResizer,
         react.createElement("div", { className: "fv-git-section" },
           react.createElement("span", null, "提交记录"),
           react.createElement("span", { className: "fv-git-count" }, state.total > 0 ? String(state.total) : "")),
@@ -2608,7 +2751,7 @@ window.__ModuleLoader__.load({
      *
      * @param {{state: object, path: string}} props - panel snapshot and the file to diff.
      */
-    function WorkspaceChangeDetail({ state, path: filePath, request, repo }) {
+    function WorkspaceChangeDetail({ state, path: filePath, request, repo, backControl }) {
       const [diff, setDiff] = react.useState({ status: "idle", data: null, error: null });
       // A change can be staged, unstaged, or both. The reader picks which side
       // to look at instead of the pane guessing.
@@ -2660,6 +2803,7 @@ window.__ModuleLoader__.load({
 
       return react.createElement("div", { className: "fv-commit" },
         react.createElement("div", { className: "fv-commit-head" },
+          backControl ? react.createElement("div", { style: { marginBottom: "6px" } }, backControl) : null,
           react.createElement("span", { className: "fv-commit-subject" }, filePath || "工作区改动"),
           react.createElement("span", { className: "fv-commit-meta" },
             row !== null
@@ -2687,7 +2831,7 @@ window.__ModuleLoader__.load({
      * second viewer; a row that lands outside the current root stays visible
      * but disabled rather than silently disappearing.
      */
-    function CommitDetail({ state, selectedPath, onSelectFile, view, onSwitchView, onLoadDiff }) {
+    function CommitDetail({ state, selectedPath, onSelectFile, view, onSwitchView, onLoadDiff, backControl }) {
       if (state.detailStatus === "loading" || state.detailStatus === "idle") {
         return react.createElement("div", { className: "fv-note" }, "正在读取提交详情…");
       }
@@ -2733,27 +2877,29 @@ window.__ModuleLoader__.load({
       // Two views of one commit: which files changed, and what changed inside
       // them. Both come from the same revision pair, so they cannot disagree.
       const tabs = react.createElement("div", { className: "fv-sheet-tabs", role: "tablist" },
-        react.createElement("button", {
-          type: "button", className: "fv-tab", "aria-selected": view !== "diff" ? "true" : "false",
-          onClick: () => onSwitchView("files"),
-        }, "变更文件", react.createElement("span", { className: "fv-git-count" }, String(files.length))),
-        react.createElement("button", {
-          type: "button", className: "fv-tab fv-tab-diff", "aria-selected": view === "diff" ? "true" : "false",
-          onClick: () => {
-            onSwitchView("diff");
-            if (onLoadDiff !== undefined) onLoadDiff();
-          },
-        }, "改动内容",
-          state.commitDiff !== null && state.commitDiff !== undefined && state.commitDiff.summary !== undefined
-            ? react.createElement("span", { className: "fv-diff-stat" },
-              state.commitDiff.summary.added > 0
-                ? react.createElement("span", { className: "fv-diff-add" }, "+" + state.commitDiff.summary.added)
-                : null,
-              state.commitDiff.summary.added > 0 && state.commitDiff.summary.removed > 0 ? " " : "",
-              state.commitDiff.summary.removed > 0
-                ? react.createElement("span", { className: "fv-diff-del" }, "-" + state.commitDiff.summary.removed)
-                : null)
-            : null));
+        react.createElement("div", { className: "fv-sheet-tabs-start" },
+          backControl,
+          react.createElement("button", {
+            type: "button", className: "fv-tab", "aria-selected": view !== "diff" ? "true" : "false",
+            onClick: () => onSwitchView("files"),
+          }, "变更文件", react.createElement("span", { className: "fv-git-count" }, String(files.length))),
+          react.createElement("button", {
+            type: "button", className: "fv-tab fv-tab-diff", "aria-selected": view === "diff" ? "true" : "false",
+            onClick: () => {
+              onSwitchView("diff");
+              if (onLoadDiff !== undefined) onLoadDiff();
+            },
+          }, "改动内容",
+            state.commitDiff !== null && state.commitDiff !== undefined && state.commitDiff.summary !== undefined
+              ? react.createElement("span", { className: "fv-diff-stat" },
+                state.commitDiff.summary.added > 0
+                  ? react.createElement("span", { className: "fv-diff-add" }, "+" + state.commitDiff.summary.added)
+                  : null,
+                state.commitDiff.summary.added > 0 && state.commitDiff.summary.removed > 0 ? " " : "",
+                state.commitDiff.summary.removed > 0
+                  ? react.createElement("span", { className: "fv-diff-del" }, "-" + state.commitDiff.summary.removed)
+                  : null)
+              : null)));
 
       let patchBody;
       if (state.commitDiffStatus === "loading" || state.commitDiffStatus === "idle") {
@@ -3343,7 +3489,20 @@ window.__ModuleLoader__.load({
       return react.createElement(react.Fragment, null,
         react.createElement("div", {
           className: "fv-context-backdrop",
+          onPointerDown: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (Date.now() - mountTimeRef.current < 400) return;
+            onClose();
+          },
+          onMouseDown: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (Date.now() - mountTimeRef.current < 400) return;
+            onClose();
+          },
           onClick: (event) => {
+            event.preventDefault();
             event.stopPropagation();
             if (Date.now() - mountTimeRef.current < 400) return;
             onClose();
@@ -3938,7 +4097,7 @@ window.__ModuleLoader__.load({
 
       /** Line-numbered diff viewer with dual line number gutters. */
       /** Text, Markdown and JSON: one windowed read, three renderings. */
-      function TextView({ meta, root, wrap, lang, commit, repo }) {
+      function TextView({ meta, root, wrap, lang, commit, repo, backControl, sizeControl, langControl }) {
         // Callers mount this with a per-file key, so paging state starts fresh
         // for every file instead of leaking the previous file's window into the
         // first request.
@@ -4218,11 +4377,22 @@ window.__ModuleLoader__.load({
           }, "源码")
           : null;
 
-        const tabs = showTabs
+        const tabButtons = showTabs
+          ? [...(fromCommit && diffTab !== null
+            ? [diffTab, contentTab, sourceTab]
+            : [contentTab, sourceTab, diffTab])].filter((tab) => tab !== null)
+          : [];
+
+        const tabs = showTabs || Boolean(backControl || langControl || sizeControl)
           ? react.createElement("div", { className: "fv-sheet-tabs", role: "tablist" },
-            ...(fromCommit && diffTab !== null
-              ? [diffTab, contentTab, sourceTab]
-              : [contentTab, sourceTab, diffTab]).filter((tab) => tab !== null))
+            react.createElement("div", { className: "fv-sheet-tabs-start" },
+              backControl,
+              ...tabButtons),
+            (sizeControl || langControl)
+              ? react.createElement("div", { className: "fv-sheet-tabs-end" },
+                sizeControl,
+                langControl)
+              : null)
           : null;
 
 
@@ -4289,32 +4459,38 @@ window.__ModuleLoader__.load({
       }
 
       /** Pick the viewer for a file and keep unsupported formats useful. */
-      function FileView({ meta, root, api, wrap, lang, onDownload, commit, repo, loading }) {
+      function FileView({ meta, root, api, wrap, lang, onDownload, commit, repo, loading, backControl, sizeControl, langControl }) {
         if (meta === null) {
           // A tab exists but its metadata is still in flight. Saying "pick a
           // file" there would be a lie, and the reader would click again.
-          return react.createElement("div", { className: "fv-note" },
-            loading === true ? "正在读取文件…" : "从左侧选择一个文件。");
+          return react.createElement("div", { className: "fv-empty-pane" },
+            backControl ? react.createElement("div", { className: "fv-sheet-tabs", role: "toolbar" }, backControl) : null,
+            react.createElement("div", { className: "fv-note" },
+              loading === true ? "正在读取文件…" : "从左侧选择一个文件。"));
         }
         if (meta.tooLarge || meta.kind === "binary") {
-          return react.createElement("div", { className: "fv-note" },
-            react.createElement("strong", null, meta.name),
-            react.createElement("span", null, meta.tooLarge
-              ? `文件大小 ${formatBytes(meta.size)}，超过查看器上限 ${formatBytes(meta.limit)}。`
-              : "这是二进制文件，查看器无法显示其内容。"),
-            react.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", marginTop: "4px" } },
-              api && api.host
-                ? react.createElement("button", {
+          return react.createElement("div", { className: "fv-binary-pane" },
+            backControl ? react.createElement("div", { className: "fv-sheet-tabs", role: "toolbar" },
+              react.createElement("div", { className: "fv-sheet-tabs-start" }, backControl),
+              sizeControl ? react.createElement("div", { className: "fv-sheet-tabs-end" }, sizeControl) : null) : null,
+            react.createElement("div", { className: "fv-note" },
+              react.createElement("strong", null, meta.name),
+              react.createElement("span", null, meta.tooLarge
+                ? `文件大小 ${formatBytes(meta.size)}，超过查看器上限 ${formatBytes(meta.limit)}。`
+                : "这是二进制文件，查看器无法显示其内容。"),
+              react.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", marginTop: "4px" } },
+                api && api.host
+                  ? react.createElement("button", {
+                    type: "button",
+                    className: "fv-button",
+                    onClick: () => api.host.openPath({ path: meta.displayPath }),
+                  }, "用本地程序打开")
+                  : null,
+                react.createElement("button", {
                   type: "button",
-                  className: "fv-button",
-                  onClick: () => api.host.openPath({ path: meta.displayPath }),
-                }, "用本地程序打开")
-                : null,
-              react.createElement("button", {
-                type: "button",
-                className: "fv-button fv-btn-download-note",
-                onClick: () => onDownload && onDownload(meta),
-              }, "下载到本地")));
+                  className: "fv-button fv-btn-download-note",
+                  onClick: () => onDownload && onDownload(meta),
+                }, "下载到本地"))));
         }
         // The key remounts each viewer per file so no per-file state (paging,
         // active sheet, blob URL) survives a switch.
@@ -4329,21 +4505,28 @@ window.__ModuleLoader__.load({
               "以下内容来自提交 " + commit.slice(0, 7) + (meta.change ? "，该文件本次为「" + meta.change + "」" : "")),
             react.createElement("span", { className: "fv-history-hint" }, "这是历史版本，不是工作区当前内容。"))
           : null;
+
+        const headBar = (backControl || sizeControl)
+          ? react.createElement("div", { className: "fv-sheet-tabs", role: "toolbar" },
+            react.createElement("div", { className: "fv-sheet-tabs-start" }, backControl),
+            sizeControl ? react.createElement("div", { className: "fv-sheet-tabs-end" }, sizeControl) : null)
+          : null;
+
         if (fromHistory && meta.kind !== "text" && meta.kind !== "markdown" && meta.kind !== "json") {
-          return react.createElement(react.Fragment, null, banner,
+          return react.createElement(react.Fragment, null, headBar, banner,
             react.createElement("div", { className: "fv-note" },
               "该提交中的文件是 " + meta.kind + " 格式，历史版本暂不支持预览。"));
         }
-        if (meta.kind === "image") return react.createElement(ImageView, { key, meta, root });
-        if (meta.kind === "pdf") return react.createElement(BinaryView, { key, meta, root });
+        if (meta.kind === "image") return react.createElement(react.Fragment, null, headBar, react.createElement(ImageView, { key, meta, root }));
+        if (meta.kind === "pdf") return react.createElement(react.Fragment, null, headBar, react.createElement(BinaryView, { key, meta, root }));
         if (meta.kind === "sheet") {
-          return react.createElement("div", { className: "fv-content" }, react.createElement(SheetView, { key, meta, root }));
+          return react.createElement("div", { className: "fv-content" }, headBar, react.createElement(SheetView, { key, meta, root }));
         }
         if (meta.kind === "doc") {
-          return react.createElement("div", { className: "fv-content" }, react.createElement(DocView, { key, meta, root }));
+          return react.createElement("div", { className: "fv-content" }, headBar, react.createElement(DocView, { key, meta, root }));
         }
         return react.createElement(react.Fragment, null, banner,
-          react.createElement(TextView, { key, meta, root, wrap, lang, commit, repo }));
+          react.createElement(TextView, { key, meta, root, wrap, lang, commit, repo, backControl, sizeControl, langControl }));
       }
 
 
@@ -4421,7 +4604,20 @@ window.__ModuleLoader__.load({
         return react.createElement(react.Fragment, null,
           react.createElement("div", {
             className: "fv-context-backdrop",
+            onPointerDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (Date.now() - mountTimeRef.current < 400) return;
+              onClose();
+            },
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (Date.now() - mountTimeRef.current < 400) return;
+              onClose();
+            },
             onClick: (e) => {
+              e.preventDefault();
               e.stopPropagation();
               if (Date.now() - mountTimeRef.current < 400) return;
               onClose();
@@ -4836,6 +5032,15 @@ window.__ModuleLoader__.load({
         // it. Kept apart from the tree's `contextMenu`: the two menus describe
         // different subjects and must never be confused for one another.
         const [tabMenu, setTabMenu] = react.useState(null);
+        const lastMenuClosedAtRef = react.useRef(0);
+        const closeContextMenu = react.useCallback(() => {
+          lastMenuClosedAtRef.current = Date.now();
+          setContextMenu(null);
+        }, []);
+        const closeTabMenu = react.useCallback(() => {
+          lastMenuClosedAtRef.current = Date.now();
+          setTabMenu(null);
+        }, []);
         const tabsRef = react.useRef(null);
         tabsRef.current = tabs;
         const activeTabIdRef = react.useRef("");
@@ -5747,6 +5952,36 @@ window.__ModuleLoader__.load({
           performDownload(request, root, targetPath, targetName, showToast);
         };
 
+        const originKind = previewOrigin === null || previewOrigin === undefined ? null : previewOrigin.kind;
+        const backTarget = originKind === "commit"
+          ? "返回变更文件列表"
+          : (originKind === "changes" ? "返回工作区改动列表" : "返回文件列表");
+        const canGoBack = isMobile || pane === "content"
+          ? (previewOrigin !== null || meta !== null || showCommit)
+          : false;
+        const backControl = react.createElement("button", {
+          type: "button",
+          className: "fv-icon-button fv-btn-back",
+          "aria-label": backTarget,
+          title: backTarget,
+          disabled: !canGoBack,
+          onClick: goBack,
+        }, react.createElement("span", { "aria-hidden": "true" }, "‹"));
+
+        const sizeControl = meta !== null && !showCommit && typeof meta.size === "number"
+          ? react.createElement("span", { className: "fv-main-size" }, formatBytes(meta.size))
+          : null;
+
+        const langControl = meta !== null && !showCommit && !meta.tooLarge && (meta.kind === "text" || meta.kind === "markdown" || meta.kind === "json")
+          ? react.createElement(LanguagePicker, {
+            choice: localeTagOfActive,
+            catalog: languageCatalog,
+            source: meta.langSource,
+            resolved: meta.lang,
+            onChange: chooseLang,
+          })
+          : null;
+
         return react.createElement("div", {
           className: "fv-scrim",
           role: "dialog",
@@ -5755,6 +5990,8 @@ window.__ModuleLoader__.load({
           onMouseDown: (event) => {
             if (event.target !== event.currentTarget) return;
             if (Date.now() - openedAtRef.current < 400) return;
+            if (contextMenu !== null || tabMenu !== null) return;
+            if (Date.now() - lastMenuClosedAtRef.current < 400) return;
             openStore.set(null);
           },
         },
@@ -5934,51 +6171,6 @@ window.__ModuleLoader__.load({
                   onContextMenu: (menu) => setTabMenu(menu),
                   menuFor: tabMenu === null || tabMenu === undefined ? "" : tabMenu.tabId,
                 }),
-                react.createElement("div", { className: "fv-main-head" },
-                  (() => {
-                    // The control returns one step, so it names that step and
-                    // is disabled when there is nowhere to go — a button that
-                    // silently does nothing reads as broken.
-                    const originKind = previewOrigin === null || previewOrigin === undefined ? null : previewOrigin.kind;
-                    const backTarget = originKind === "commit"
-                      ? "返回变更文件列表"
-                      : (originKind === "changes" ? "返回工作区改动列表" : "返回文件列表");
-                    // On a phone the panes are exclusive, so leaving the content
-                    // pane is always meaningful; on desktop the sidebar is
-                    // already visible and only an origin is worth returning to.
-                    const canGoBack = isMobile || pane === "content"
-                      ? (previewOrigin !== null || meta !== null || showCommit)
-                      : false;
-                    return react.createElement("button", {
-                      type: "button",
-                      className: "fv-icon-button fv-btn-back",
-                      "aria-label": backTarget,
-                      title: backTarget,
-                      disabled: !canGoBack,
-                      onClick: goBack,
-                    }, react.createElement("span", { "aria-hidden": "true" }, "‹"));
-                  })(),
-                  react.createElement("span", { className: "fv-main-name" },
-                    commitHeadline !== ""
-                      ? commitHeadline
-                      : (activeTab === null
-                        ? "未选择文件"
-                        : (meta === null ? activeTab.title : meta.name))),
-                  meta !== null && !showCommit && typeof meta.size === "number"
-                    ? react.createElement("span", null, formatBytes(meta.size))
-                    : null,
-                  // The language picker sits with the file it applies to, and
-                  // is offered only for source views: an image, sheet or
-                  // document has no grammar to choose.
-                  meta !== null && !showCommit && !meta.tooLarge && (meta.kind === "text" || meta.kind === "markdown" || meta.kind === "json")
-                    ? react.createElement(LanguagePicker, {
-                      choice: localeTagOfActive,
-                      catalog: languageCatalog,
-                      source: meta.langSource,
-                      resolved: meta.lang,
-                      onChange: chooseLang,
-                    })
-                    : null),
                 error !== null && meta === null && !showCommit && activeTab === null
                   ? react.createElement("div", { className: "fv-note fv-error" },
                     react.createElement("span", null, messageOf(error)),
@@ -6021,6 +6213,7 @@ window.__ModuleLoader__.load({
                           path: previewChangePath,
                           request,
                           repo: gitState.repoId,
+                          backControl,
                         })
                         : react.createElement(CommitDetail, {
                           state: gitState,
@@ -6036,6 +6229,7 @@ window.__ModuleLoader__.load({
                             const sha = commitSha;
                             if (sha !== "") git.loadCommitDiff(sha);
                           },
+                          backControl,
                         }))
                       : react.createElement(ErrorBoundary, {
                         // One viewer per tab (and per refresh epoch), so no
@@ -6053,6 +6247,9 @@ window.__ModuleLoader__.load({
                           onDownload: handleDownloadItem,
                           commit: "",
                           repo: gitState.repoId,
+                          backControl,
+                          sizeControl,
+                          langControl,
                         })
                         : react.createElement(FileView, {
                           meta,
@@ -6068,12 +6265,15 @@ window.__ModuleLoader__.load({
                           // A tab is created before its metadata arrives, so the
                           // pane has to say "reading" instead of "pick a file".
                           loading: activeTab.status === "loading",
+                          backControl,
+                          sizeControl,
+                          langControl,
                         })))),
             contextMenu !== null
               ? react.createElement(ContextMenu, {
                 menu: contextMenu,
                 rootPath: activeRoot ? (activeRoot.path || activeRoot.id) : root,
-                onClose: () => setContextMenu(null),
+                onClose: closeContextMenu,
                 onMention: mention,
                 onToast: showToast,
                 onDownload: handleDownloadItem,
@@ -6086,7 +6286,7 @@ window.__ModuleLoader__.load({
               ? react.createElement(TabContextMenu, {
                 menu: tabMenu,
                 tabs,
-                onClose: () => setTabMenu(null),
+                onClose: closeTabMenu,
                 onAction: onTabAction,
               })
               : null,
@@ -6400,6 +6600,7 @@ window.__ModuleLoader__.load({
       mediaTypeOf, messageOf, createStore, createRequest, blobOf, ensureStyles,
       ENTRY_POSITION_KEY, DRAG_SLOP, settleEntry, readEntryPosition, writeEntryPosition,
       TREE_WIDTH_KEY, DEFAULT_TREE_WIDTH, MIN_TREE_WIDTH, MAX_TREE_WIDTH, readTreeWidth, writeTreeWidth,
+      GIT_CHANGES_HEIGHT_KEY, DEFAULT_GIT_CHANGES_HEIGHT, MIN_GIT_CHANGES_HEIGHT, MAX_GIT_CHANGES_HEIGHT, readGitChangesHeight, writeGitChangesHeight,
       SHELL_WIDTH_KEY, MIN_SHELL_WIDTH, readShellWidth, writeShellWidth, clampShellWidth,
       LANG_OVERRIDES_KEY, LANG_OVERRIDES_MAX, readLangOverrides, writeLangOverrides, readLangOverride, writeLangOverride,
       langOverrideKey, isKnownLanguageId, setLanguageCatalog, getLanguageCatalog: () => languageCatalog, LanguagePicker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weniatall/dsh-file-viewer",
-  "version": "0.3.7",
+  "version": "0.3.12",
   "description": "Workspace file viewer and Git panel for DeepSeek Harness: file tree, syntax-highlighted code, images, PDF, Excel and Word, plus local/remote branches, paged commit history, commit diffs, working-tree changes and changed-file navigation",
   "type": "module",
   "main": "lib/index.js",