@zhangfengshun/dsh-remote-ssh 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 本文件的版本号与 `package.json` 的 `version` 保持一致。每个版本对应一个 Cordis Package 快照（`pkg-N`）。
 
+## [1.4.0] — 远程文件单开一栏预览
+### 新增
+- 点击「远程文件」文件树中的文件，改为在 better-sidebar 中**单开一栏（独立页签）预览/编辑**，与内置「文件」页签一致，不再在文件树下方内嵌预览。新增隐藏页签类型 `remssh:editor`，同一远程文件按 (profileId, path) 去重复用。
+
+## [1.3.1] — 修复远程文件树滚动
+### 修复
+- 「远程文件」页签改为 flex 布局：文件树在文件很多时占据剩余高度并内部滚动（`flex:1; overflow-y:auto`），不再因父容器 `overflow:hidden` 而无法往下拉。
+
 ## [1.3.0] — 外观跟随主题
 ### 新增
 - 远程连接相关界面（设置小节、远程文件 / 终端页签、添加工作区弹窗）的颜色全部改用 DSH 主题 token（`--dsw-alias-*`），自动跟随 DSH 明暗主题（`body[data-ds-dark-theme]`）切换，不再硬编码深色配色。

package/lib/client.js

@@ -96,6 +96,7 @@ window.__ModuleLoader__.load({
       "files.errRead": "读取失败",
       "files.errSave": "保存失败",
       "files.errSaveDefaultDir": "保存默认目录失败",
+      "files.binary": "二进制文件，无法预览",
       "term.title": "终端 {id}",
       "term.exited": " (已退出)",
       "term.connecting": "正在连接…",
@@ -160,6 +161,7 @@ window.__ModuleLoader__.load({
       "files.errRead": "Failed to read",
       "files.errSave": "Failed to save",
       "files.errSaveDefaultDir": "Failed to save default directory",
+      "files.binary": "Binary file — preview not available",
       "term.title": "Terminal {id}",
       "term.exited": " (exited)",
       "term.connecting": "Connecting…",
@@ -255,6 +257,7 @@ window.__ModuleLoader__.load({
     function FilesTab(props) {
       var t = useT();
       var sessionId = props.sessionId;
+      var betterSidebar = props.betterSidebar;
       var [workspaces, setWorkspaces] = React.useState([]);
       var profiles = useProfiles();
       var [wsId, setWsId] = useSessionMemory(sessionId, "wsId", sel.workspaceId);
@@ -263,7 +266,6 @@ window.__ModuleLoader__.load({
       var [entries, setEntries] = useSessionMemory(sessionId, "entries", []);
       var [err, setErr] = React.useState(null);
       var [loading, setLoading] = React.useState(false);
-      var [openFile, setOpenFile] = useSessionMemory(sessionId, "openFile", null);
       var [defaultDir, setDefaultDir] = useSessionMemory(sessionId, "defaultDir", "");
 
       React.useEffect(function () {
@@ -316,11 +318,16 @@ window.__ModuleLoader__.load({
           setPath(base);
           load(profileId, base);
         } else {
-          setOpenFile({ path: base, content: "", loading: true });
-          api("readFile", { profileId: profileId, path: base }).then(function (r) {
-            if (r && r.ok) setOpenFile({ path: base, content: r.content, binary: r.binary, dirty: false, loading: false });
-            else setOpenFile({ path: base, content: "", error: (r && r.error) || t("files.errRead"), loading: false });
-          });
+          // 用独立页签预览远程文件（与内置「文件」页签一致），而非在文件树下方预览。
+          if (betterSidebar && betterSidebar.openTab) {
+            betterSidebar.openTab({
+              type: "remssh:editor",
+              id: "remssh:editor:" + profileId + ":" + base,
+              title: e.name,
+              path: base,
+              meta: { profileId: profileId, remotePath: base }
+            }, { sessionId: sessionId });
+          }
         }
       }
 
@@ -333,62 +340,94 @@ window.__ModuleLoader__.load({
         load(profileId, up);
       }
 
-      function saveFile() {
-        if (!openFile) return;
-        api("writeFile", { profileId: profileId, path: openFile.path, content: openFile.content }).then(function (r) {
-          if (r && r.ok) setOpenFile(Object.assign({}, openFile, { dirty: false }));
-          else setErr((r && r.error) || t("files.errSave"));
-        });
-      }
-
-      return h("div", null,
-        h("div", { className: "rssh-row" },
-          h("span", { className: "rssh-label" }, t("files.workspace")),
-          h("select", { className: "rssh-select", value: wsId || "", onChange: function (e) { setWsId(e.target.value); setProfileId(""); } },
-            h("option", { value: "" }, t("files.selectWorkspace")),
-            workspaces.map(function (w) { return h("option", { key: w.id, value: w.id }, w.title); })
-          )
-        ),
-        h("div", { className: "rssh-row" },
-          h("span", { className: "rssh-label" }, t("files.orProfile")),
-          h("select", { className: "rssh-select", value: profileId, onChange: function (e) { setProfileId(e.target.value); setWsId(""); } },
-            h("option", { value: "" }, t("common.selectProfile")),
-            profiles.map(function (p) { return h("option", { key: p.id, value: p.id }, p.name); })
-          )
-        ),
-        wsId ? h("div", { className: "rssh-row" },
-          h("span", { className: "rssh-label" }, t("files.defaultDir")),
+      return h("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, overflow: "hidden" } },
+        h("div", { style: { flex: "none" } },
+          h("div", { className: "rssh-row" },
+            h("span", { className: "rssh-label" }, t("files.workspace")),
+            h("select", { className: "rssh-select", value: wsId || "", onChange: function (e) { setWsId(e.target.value); setProfileId(""); } },
+              h("option", { value: "" }, t("files.selectWorkspace")),
+              workspaces.map(function (w) { return h("option", { key: w.id, value: w.id }, w.title); })
+            )
+          ),
+          h("div", { className: "rssh-row" },
+            h("span", { className: "rssh-label" }, t("files.orProfile")),
+            h("select", { className: "rssh-select", value: profileId, onChange: function (e) { setProfileId(e.target.value); setWsId(""); } },
+              h("option", { value: "" }, t("common.selectProfile")),
+              profiles.map(function (p) { return h("option", { key: p.id, value: p.id }, p.name); })
+            )
+          ),
+          wsId ? h("div", { className: "rssh-row" },
+            h("span", { className: "rssh-label" }, t("files.defaultDir")),
+            h("div", { className: "rssh-pathbar" },
+              h("input", { className: "rssh-input", value: defaultDir, onChange: function (e) { setDefaultDir(e.target.value); }, placeholder: "/home/user/project" }),
+              h("button", { className: "rssh-btn", onClick: saveDefaultDir }, t("common.save"))
+            )
+          ) : null,
           h("div", { className: "rssh-pathbar" },
-            h("input", { className: "rssh-input", value: defaultDir, onChange: function (e) { setDefaultDir(e.target.value); }, placeholder: "/home/user/project" }),
-            h("button", { className: "rssh-btn", onClick: saveDefaultDir }, t("common.save"))
-          )
-        ) : null,
-        h("div", { className: "rssh-pathbar" },
-          h("input", { className: "rssh-input", value: path, onChange: function (e) { setPath(e.target.value); }, placeholder: "/home/user" }),
-          h("button", { className: "rssh-btn", onClick: function () { load(profileId, path); } }, t("common.open")),
-          h("button", { className: "rssh-btn", onClick: goUp }, t("common.up"))
+            h("input", { className: "rssh-input", value: path, onChange: function (e) { setPath(e.target.value); }, placeholder: "/home/user" }),
+            h("button", { className: "rssh-btn", onClick: function () { load(profileId, path); } }, t("common.open")),
+            h("button", { className: "rssh-btn", onClick: goUp }, t("common.up"))
+          ),
+          loading ? h("div", { className: "rssh-muted" }, t("common.loading")) : null,
+          err ? h("div", { className: "rssh-err", style: { whiteSpace: "pre-wrap" } }, err) : null
         ),
-        loading ? h("div", { className: "rssh-muted" }, t("common.loading")) : null,
-        err ? h("div", { className: "rssh-err", style: { whiteSpace: "pre-wrap" } }, err) : null,
-        h("div", { style: { marginTop: 6 } },
+        h("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", marginTop: 6 } },
           entries.map(function (e) {
             return h("div", { key: e.name, className: "rssh-tree-item", onClick: function () { openEntry(e); } },
               h("span", { className: e.type === "directory" ? "rssh-tree-dir" : "rssh-tree-file" }, e.type === "directory" ? "📁 " + e.name : "📄 " + e.name),
               e.type === "file" ? h("span", { className: "rssh-tree-size" }, String(e.size)) : null
             );
           })
+        )
+      );
+    }
+
+    // ======================================================================
+    // 远程文件编辑器页签：点击文件树中的文件后单开一栏预览/编辑（与内置「文件」页签一致）
+    // ======================================================================
+    function RemoteEditor(props) {
+      var t = useT();
+      var tab = props.tab || {};
+      var ctx = props.ctx;
+      var meta = tab.meta || {};
+      var profileId = meta.profileId || "";
+      var remotePath = tab.path || meta.remotePath || "";
+      var [data, setData] = React.useState({ loading: true, content: "", binary: false, dirty: false, error: null });
+
+      React.useEffect(function () {
+        var alive = true;
+        setData({ loading: true, content: "", binary: false, dirty: false, error: null });
+        api("readFile", { profileId: profileId, path: remotePath }).then(function (r) {
+          if (!alive) return;
+          if (r && r.ok) setData({ loading: false, content: r.content || "", binary: !!r.binary, dirty: false, error: null });
+          else setData({ loading: false, content: "", binary: false, dirty: false, error: (r && r.error) || t("files.errRead") });
+        });
+        return function () { alive = false; };
+      }, [profileId, remotePath]);
+
+      function save() {
+        api("writeFile", { profileId: profileId, path: remotePath, content: data.content }).then(function (r) {
+          if (r && r.ok) setData(Object.assign({}, data, { dirty: false, error: null }));
+          else setData(Object.assign({}, data, { error: (r && r.error) || t("files.errSave") }));
+        });
+      }
+
+      function close() {
+        if (ctx && ctx.betterSidebar && tab.id) ctx.betterSidebar.closeTab(tab.id);
+      }
+
+      if (data.loading) return h("div", { className: "rssh-muted", style: { padding: 8 } }, t("files.reading"));
+      if (data.error) return h("div", { className: "rssh-err", style: { padding: 8, whiteSpace: "pre-wrap" } }, data.error);
+      if (data.binary) return h("div", { className: "rssh-muted", style: { padding: 8 } }, t("files.binary"));
+
+      return h("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, padding: 8, overflow: "hidden" } },
+        h("div", { className: "rssh-pathbar", style: { flex: "none" } },
+          h("span", { className: "rssh-title", style: { flex: 1, wordBreak: "break-all" } }, remotePath),
+          h("button", { className: "rssh-btn", onClick: save }, t("common.save")),
+          h("button", { className: "rssh-btn", onClick: close }, t("common.close"))
         ),
-        openFile ? h("div", null,
-          h("div", { className: "rssh-pathbar", style: { marginTop: 8 } },
-            h("span", { className: "rssh-title", style: { flex: 1, wordBreak: "break-all" } }, openFile.path),
-            h("button", { className: "rssh-btn", onClick: saveFile }, t("common.save")),
-            h("button", { className: "rssh-btn", onClick: function () { setOpenFile(null); } }, t("common.close"))
-          ),
-          openFile.loading ? h("div", { className: "rssh-muted" }, t("files.reading")) :
-          openFile.error ? h("div", { className: "rssh-err" }, openFile.error) :
-          h("textarea", { className: "rssh-content", style: { width: "100%", boxSizing: "border-box", minHeight: 200, background: "var(--dsw-alias-markdown-code-block)", color: "var(--dsw-alias-label-primary)", border: "1px solid var(--dsw-alias-border-l2)" },
-            value: openFile.content, onChange: function (e) { setOpenFile(Object.assign({}, openFile, { content: e.target.value, dirty: true })); } })
-        ) : null
+        h("textarea", { className: "rssh-content", style: { flex: 1, minHeight: 0, maxHeight: "none", width: "100%", boxSizing: "border-box", background: "var(--dsw-alias-markdown-code-block)", color: "var(--dsw-alias-label-primary)", border: "1px solid var(--dsw-alias-border-l2)" },
+          value: data.content, onChange: function (e) { setData(Object.assign({}, data, { content: e.target.value, dirty: true })); } })
       );
     }
 
@@ -726,7 +765,20 @@ window.__ModuleLoader__.load({
             icon: function () { return h("span", null, "🗂️"); },
             component: function (props) {
               var sid = props && props.scope ? props.scope.sessionId : null;
-              return h(FilesTab, { key: "files:" + (sid || "global"), sessionId: sid });
+              return h(FilesTab, { key: "files:" + (sid || "global"), sessionId: sid, betterSidebar: props && props.ctx ? props.ctx.betterSidebar : null });
+            }
+          });
+        });
+        // 远程文件编辑器页签（隐藏页签，仅由文件树点击打开，每个远程文件单开一栏）。
+        ctx.effect(function () {
+          return betterSidebar.registerTab({
+            id: "remssh:editor",
+            title: function () { return i18n.t("tabs.files"); },
+            hidden: true,
+            dedupeKey: function (tab) { return (tab && tab.meta && tab.meta.profileId || "") + "\u0000" + (tab && tab.path || ""); },
+            icon: function () { return h("span", null, "📄"); },
+            component: function (props) {
+              return h(RemoteEditor, { tab: props && props.tab, ctx: props && props.ctx, scope: props && props.scope });
             }
           });
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangfengshun/dsh-remote-ssh",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "DSH web plugin: VSCode Remote-SSH-like remote development (SSH to supercomputers/servers, remote workspace, file explorer, integrated terminal), integrated with dsh-better-sidebar and DSH settings.",
   "keywords": [
     "dsh",