{"id":2912,"date":"2026-06-16T09:45:48","date_gmt":"2026-06-16T01:45:48","guid":{"rendered":"https:\/\/cocozq.com\/?p=2912"},"modified":"2026-06-16T09:45:48","modified_gmt":"2026-06-16T01:45:48","slug":"%e5%bd%bb%e5%ba%95%e8%a7%a3%e5%86%b3-xterm-js-tauri-%e4%b8%ad-vim-%e5%ba%95%e9%83%a8%e7%a9%ba%e7%99%bd%e9%97%ae%e9%a2%98","status":"publish","type":"post","link":"https:\/\/cocozq.com\/?p=2912","title":{"rendered":"\u5f7b\u5e95\u89e3\u51b3 xterm.js + Tauri \u4e2d vim \u5e95\u90e8\u7a7a\u767d\u95ee\u9898"},"content":{"rendered":"

\u5f7b\u5e95\u89e3\u51b3 xterm.js + Tauri \u4e2d vim \u5e95\u90e8\u7a7a\u767d\u95ee\u9898<\/h1>\n

\n \u53d1\u5e03\u65e5\u671f\uff1a2026-06-16
\n \u6807\u7b7e\uff1aTauri\u3001xterm.js\u3001Rust\u3001SSH\u3001vim\u3001\u7ec8\u7aef\n<\/p><\/blockquote>\n

\n

\u5728\u5f00\u53d1 CocoTerminal\uff08\u4e00\u6b3e\u57fa\u4e8e Tauri 2.x + xterm.js \u7684 SSH \u7ec8\u7aef\u5de5\u5177\uff09\u65f6\uff0c\u6211\u4eec\u9047\u5230\u4e86\u4e00\u4e2a\u8ba9\u4eba\u6293\u72c2\u7684 bug\uff1a<\/p>\n

\u8fde\u63a5 SSH \u540e\u6253\u5f00 vim\uff0c\u5e95\u90e8\u59cb\u7ec8\u6709\u4e00\u6bb5\u7a7a\u767d\uff0cvim \u72b6\u6001\u680f\u6ca1\u6709\u8d34\u5728\u7ec8\u7aef\u5e95\u90e8\u3002\u4f46\u53ea\u8981\u6700\u5927\u5316\u7a97\u53e3\u518d\u8fd8\u539f\uff0c\u7a7a\u767d\u7acb\u523b\u6d88\u5931\u3002<\/strong><\/p>\n

\u8fd9\u4e2a\u95ee\u9898\u6298\u817e\u4e86\u5f88\u4e45\uff0c\u671f\u95f4\u5c1d\u8bd5\u4e86\u591a\u79cd\u65b9\u6848\u5747\u65e0\u6548\uff0c\u672c\u6587\u8bb0\u5f55\u5b8c\u6574\u7684\u6392\u67e5\u548c\u4fee\u590d\u8fc7\u7a0b\u3002<\/p>\n

\n

\u73b0\u8c61<\/h2>\n
    \n
  • \u8fdb\u5165 SSH \u7ec8\u7aef\u540e\u6267\u884c vim<\/code>\u3001htop<\/code>\u3001nano<\/code> \u7b49\u5168\u5c4f TUI \u7a0b\u5e8f<\/li>\n
  • \u7a0b\u5e8f\u5e95\u90e8\u51fa\u73b0\u7a7a\u767d\u533a\u57df\uff0c\u5185\u5bb9\u6ca1\u6709\u586b\u6ee1\u7ec8\u7aef<\/li>\n
  • \u89e6\u53d1\u4e00\u6b21\u7a97\u53e3 resize\uff08\u6700\u5927\u5316\/\u8fd8\u539f\/\u62d6\u52a8\u8fb9\u7f18\uff09\u540e\u7acb\u5373\u6062\u590d\u6b63\u5e38<\/strong><\/li>\n<\/ul>\n

    \u8fd9\u4e2a”resize \u80fd\u4fee\u590d”\u7684\u7279\u5f81\u662f\u7834\u6848\u7684\u5173\u952e\u7ebf\u7d22\u3002<\/p>\n

    \n

    \u6280\u672f\u80cc\u666f<\/h2>\n

    xterm.js \u7684 FitAddon \u5de5\u4f5c\u539f\u7406<\/h3>\n

    xterm.js \u901a\u8fc7 FitAddon.fit()<\/code> \u6765\u81ea\u9002\u5e94\u5bb9\u5668\u5c3a\u5bf8\uff1a<\/p>\n

      \n
    1. \u8bfb\u53d6 DOM \u5bb9\u5668\u7684 clientWidth<\/code> \/ clientHeight<\/code><\/li>\n
    2. \u9664\u4ee5\u5355\u4e2a\u5b57\u7b26\u7684\u50cf\u7d20\u5c3a\u5bf8\uff0c\u5f97\u5230 cols<\/code> \u548c rows<\/code><\/li>\n
    3. \u8c03\u7528 terminal.resize(cols, rows)<\/code><\/li>\n
    4. \u901a\u8fc7 SSH channel \u7684 window_change<\/code> \u901a\u77e5\u540e\u7aef pty<\/li>\n<\/ol>\n

      \u5982\u679c fit()<\/code> \u6267\u884c\u65f6\u5bb9\u5668\u9ad8\u5ea6\u5c1a\u672a\u786e\u5b9a\uff08\u504f\u5c0f\uff09\uff0c\u8ba1\u7b97\u51fa\u7684 rows<\/code> \u5c31\u4f1a\u504f\u5c11\uff0cvim \u5c31\u53ea\u7ed8\u5236\u5bf9\u5e94\u884c\u6570\u7684\u5185\u5bb9\uff0c\u5e95\u90e8\u7559\u767d\u3002<\/p>\n

      \u6211\u4eec\u7684\u5e03\u5c40\u662f\u6df1\u5c42\u5d4c\u5957 Flex<\/h3>\n
      html\/body\/root (height:100%)\n\u2514\u2500\u2500 .app-body (flex)\n    \u2514\u2500\u2500 .app-main (flex-direction:column)\n        \u2514\u2500\u2500 .app-terminal-area (flex:1)\n            \u2514\u2500\u2500 <div style=\"display:block\/none\">   \u2190 \u9762\u677f\u5207\u6362\n                \u2514\u2500\u2500 SplitTerminal\n                    \u2514\u2500\u2500 .terminal-pane-root\n                        \u2514\u2500\u2500 <div class=\"xterm\">\n<\/code><\/pre>\n
      \u6574\u6761\u94fe\u662f 8 \u5c42\u5d4c\u5957 flex \u5e03\u5c40\uff0c\u52a0\u4e0a display:none\/block<\/code> \u9762\u677f\u5207\u6362\uff0c\u5bb9\u5668\u9ad8\u5ea6\u7684\u786e\u5b9a\u5b58\u5728\u5f02\u6b65\u5ef6\u8fdf\u3002<\/p>\n
      \n
      \u5931\u8d25\u7684\u5c1d\u8bd5<\/h2>\n
      \u65b9\u6848\u4e00\uff1a\u56fa\u5b9a\u5ef6\u8fdf\u4e8c\u6b21 fit<\/h3>\n
      setTimeout(() => fit.fit(), 200);\n<\/code><\/pre>\n
      200ms \u662f\u7ecf\u9a8c\u503c\uff0c\u5728\u4e0d\u540c\u786c\u4ef6\/\u8d1f\u8f7d\u4e0b\u4e0d\u53ef\u9760\uff0c\u4ecd\u6709\u7a7a\u767d\u3002<\/p>\n
      \u65b9\u6848\u4e8c\uff1a\u76d1\u542c visible<\/code> prop \u53d8\u5316<\/h3>\n
      useEffect(() => {\n  if (!visible) return;\n  setTimeout(() => fit.fit(), 50);\n}, [visible]);\n<\/code><\/pre>\n
      \u89e3\u51b3\u4e86\u4ece SFTP \u9762\u677f\u5207\u56de\u7ec8\u7aef\u7684\u95ee\u9898\uff0c\u4f46\u4e0d\u80fd\u89e3\u51b3\u521d\u6b21\u6253\u5f00 vim \u5c31\u6709\u7a7a\u767d<\/strong>\u3002<\/p>\n
      \u65b9\u6848\u4e09\uff1a\u6e10\u8fdb\u5f0f fitUntilStable\uff08rAF \u5faa\u73af\uff09<\/h3>\n
      function fitUntilStable(fit, term, sessionId, onResizeFn) {\n  let prevCols = -1, prevRows = -1, stableCount = 0, round = 0;\n  function doFit() {\n    if (round++ >= 15) return;\n    void rootContainer.offsetHeight; \/\/ \u5f3a\u5236 reflow\n    fit.fit();\n    const { cols, rows } = term;\n    if (cols !== prevCols || rows !== prevRows) {\n      prevCols = cols; prevRows = rows; stableCount = 0;\n      onResizeFn(sessionId, cols, rows);\n    } else if (++stableCount >= 3) return;\n    requestAnimationFrame(doFit);\n  }\n  doFit();\n}\n<\/code><\/pre>\n
      \u7ed3\u5408\u5f3a\u5236 reflow \u548c\u6e05\u9664 xterm-viewport<\/code> \u56fa\u5b9a\u9ad8\u5ea6\uff0c\u5927\u5e45\u6539\u5584\u2014\u2014\u4f46\u7528\u6237\u53cd\u9988\u4ecd\u7136\u5076\u53d1\u7a7a\u767d<\/strong>\u3002<\/p>\n
      \n
      \u771f\u6b63\u7684\u6839\u672c\u539f\u56e0<\/h2>\n
      \u5728\u524d\u4e09\u4e2a\u65b9\u6848\u5931\u8d25\u540e\uff0c\u6211\u91cd\u65b0\u5ba1\u89c6\u4e86\u6574\u4e2a\u8c03\u7528\u94fe\uff1a<\/p>\n
      fitUntilStable<\/code> \u5b9e\u9645\u4e0a\u662f\u5728\u6b63\u786e\u5de5\u4f5c\u7684\u3002<\/strong><\/p>\n
      \u5b83\u6700\u7ec8\u786e\u5b9e\u8ba1\u7b97\u51fa\u4e86\u6b63\u786e\u7684 cols\/rows<\/code>\uff0c\u4e5f\u901a\u8fc7 window_change<\/code> \u628a\u6b63\u786e\u5c3a\u5bf8\u53d1\u7ed9\u4e86\u540e\u7aef pty\u3002\u95ee\u9898\u51fa\u5728\u66f4\u540e\u9762\uff1a<\/p>\n
      \u524d\u7aef fit() \u2192 \u6b63\u786e\u7684 rows=35 \u2192 SSH window_change \u2192 \u540e\u7aef pty \u2192 SIGWINCH \u2192 vim\n<\/code><\/pre>\n
      vim \u5728\u6536\u5230\u8fd9\u4e2a SIGWINCH \u65f6\uff0c\u6b63\u5904\u4e8e\u542f\u52a8\u521d\u59cb\u5316\u9636\u6bb5\uff08\u7ea6 100\u2013300ms\uff09\uff0c\u8fd8\u6ca1\u6709\u8fdb\u5165\u7a33\u5b9a\u7684\u4e8b\u4ef6\u7b49\u5f85\u5faa\u73af\u3002<\/strong> \u6b64\u65f6 SIGWINCH \u88ab\u64cd\u4f5c\u7cfb\u7edf\u4f20\u9012\u7ed9\u4e86 vim \u8fdb\u7a0b\uff0cvim \u7684\u4fe1\u53f7\u5904\u7406\u51fd\u6570\u4e5f\u6267\u884c\u4e86\uff0c\u4f46\u7531\u4e8e vim \u5185\u90e8\u72b6\u6001\u5c1a\u672a\u5b8c\u6210\u521d\u59cb\u5316\uff0c\u91cd\u7ed8\u88ab\u8df3\u8fc7\u6216\u63a8\u8fdf\u3002<\/p>\n
      \u8fd9\u5b8c\u7f8e\u89e3\u91ca\u4e86\u6240\u6709\u73b0\u8c61\uff1a<\/p>\n\n\n\n\n\n\n\n\n
      \u73b0\u8c61<\/th>\n\u539f\u56e0<\/th>\n<\/tr>\n<\/thead>\n
      \u521d\u6b21\u6253\u5f00 vim \u6709\u7a7a\u767d<\/td>\nvim \u542f\u52a8\u671f\u95f4\u5ffd\u7565\u4e86\u9996\u6b21 SIGWINCH<\/td>\n<\/tr>\n
      \u6700\u5927\u5316\/\u8fd8\u539f\u540e\u6062\u590d<\/td>\n\u89e6\u53d1\u7b2c\u4e8c\u6b21 SIGWINCH\uff0c\u6b64\u65f6 vim \u5df2\u5c31\u7eea<\/td>\n<\/tr>\n
      \u6309\u4efb\u610f\u952e\u540e\u6062\u590d<\/td>\n\u7528\u6237\u8f93\u5165\u89e6\u53d1 vim \u91cd\u7ed8\uff08\u68c0\u6d4b\u5230\u5c3a\u5bf8\u53d8\u5316\uff09<\/td>\n<\/tr>\n
      resize \u7a97\u53e3\u540e\u6062\u590d<\/td>\n\u540c\u4e0a\uff0c\u7b2c\u4e8c\u6b21 SIGWINCH<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
      \u6700\u7ec8\u4fee\u590d<\/h2>\n
      \u601d\u8def\u5f88\u7b80\u5355\uff1a\u5728 rAF \u5faa\u73af\u7a33\u5b9a\u540e\uff0c\u5ef6\u8fdf 500ms \u8865\u53d1\u4e00\u6b21 resize<\/strong>\u3002<\/p>\n
      \u6b64\u65f6 vim \u5df2\u5b8c\u6210\u542f\u52a8\uff0c\u5904\u4e8e\u6b63\u5e38\u7684\u4e8b\u4ef6\u7b49\u5f85\u72b6\u6001\uff0c\u7b2c\u4e8c\u6b21 SIGWINCH \u4f1a\u88ab\u7acb\u5373\u5904\u7406\u5e76\u89e6\u53d1\u5b8c\u6574\u91cd\u7ed8\u3002<\/p>\n
      function fitUntilStable(fit, term, sessionId, onResizeFn) {\n  const MAX_ROUNDS = 15;\n  let round = 0, prevCols = -1, prevRows = -1, stableCount = 0;\n\n  function doFit() {\n    if (round >= MAX_ROUNDS) { scheduleDelayedResize(); return; }\n\n    \/\/ \u5f3a\u5236 reflow\uff0c\u6e05\u9664 viewport \u56fa\u5b9a\u9ad8\u5ea6\n    void rootContainer?.offsetHeight;\n    const viewport = termElement?.querySelector('.xterm-viewport');\n    if (viewport?.style.height) viewport.style.height = '';\n\n    try { fit.fit(); } catch { return; }\n    const { cols, rows } = term;\n    round++;\n\n    if (cols !== prevCols || rows !== prevRows) {\n      prevCols = cols; prevRows = rows; stableCount = 0;\n      onResizeFn?.(sessionId, cols, rows)?.catch(() => {});\n    } else if (++stableCount >= 3) {\n      scheduleDelayedResize(); \/\/ \u2190 \u5173\u952e\uff1a\u7a33\u5b9a\u540e\u5ef6\u8fdf\u8865\u53d1\n      return;\n    }\n    requestAnimationFrame(doFit);\n  }\n\n  \/\/ vim \u542f\u52a8\u5b8c\u6210\u524d\u53ef\u80fd\u5ffd\u7565\u9996\u6b21 SIGWINCH\uff0c500ms \u540e\u8865\u53d1\u4e00\u6b21\u786e\u4fdd\u91cd\u7ed8\n  function scheduleDelayedResize() {\n    if (!sessionId || !onResizeFn) return;\n    setTimeout(() => {\n      try { fit.fit(); } catch { return; }\n      const { cols, rows } = term;\n      if (cols > 0 && rows > 0) onResizeFn(sessionId, cols, rows)?.catch(() => {});\n    }, 500);\n  }\n\n  doFit();\n}\n<\/code><\/pre>\n
      500ms \u7684\u9009\u53d6\u4f9d\u636e\uff1a
      \n– \u9700\u8981 > vim \u542f\u52a8\u65f6\u95f4\uff08\u672c\u5730\u5feb\u901f\u673a\u5668 ~50ms\uff0c\u901a\u8fc7 SSH \u8fde\u63a5\u7684\u8fdc\u7a0b\u673a\u5668\u53ef\u80fd ~200\u2013400ms\uff09
      \n– \u9700\u8981 < \u7528\u6237\u5bdf\u89c9\u5230”\u95ea\u70c1\u91cd\u7ed8”\u7684\u9608\u503c\uff08~800ms \u4ee5\u4e0a\u624d\u660e\u663e\uff09
      \n– 500ms \u662f\u4e00\u4e2a\u4fdd\u5b88\u4e14\u5408\u7406\u7684\u4e2d\u95f4\u503c<\/p>\n
      \n
      \u603b\u7ed3<\/h2>\n
      \u8fd9\u4e2a bug \u7684\u6392\u67e5\u8fc7\u7a0b\u6709\u4e00\u4e2a\u91cd\u8981\u6559\u8bad\uff1a<\/p>\n
      \n  \u4e0d\u8981\u53ea\u76ef\u7740”\u4fe1\u53f7\u6709\u6ca1\u6709\u53d1\u51fa”\uff0c\u4e5f\u8981\u8003\u8651”\u63a5\u6536\u65b9\u662f\u5426\u5df2\u7ecf\u51c6\u5907\u597d\u63a5\u6536”\u3002<\/strong>\n<\/p><\/blockquote>\n
      \u524d\u7aef\u628a\u6b63\u786e\u7684\u5c3a\u5bf8\u53d1\u51fa\u53bb\u4e86\uff0c\u540e\u7aef\u4e5f\u6b63\u786e\u8f6c\u53d1\u4e86 SIGWINCH\uff0c\u4f46 vim \u7684\u63a5\u6536\u65f6\u673a\u4e0d\u5bf9\u3002\u4fee\u590d\u53ea\u9700\u8981\u5728\u4fe1\u53f7\u63a5\u6536\u65b9\u5c31\u7eea\u540e\u8865\u53d1\u4e00\u6b21\u2014\u20144 \u884c\u4ee3\u7801\uff0c\u89e3\u51b3\u4e86\u4e00\u4e2a\u53cd\u590d\u6298\u817e\u7684\u95ee\u9898\u3002<\/p>\n
      \u7c7b\u4f3c\u7684\u95ee\u9898\u4e5f\u53ef\u80fd\u51fa\u73b0\u5728\u5176\u4ed6 TUI \u7a0b\u5e8f\uff08htop<\/code>\u3001tmux<\/code>\u3001nano<\/code>\uff09\u6216\u5176\u4ed6\u4f7f\u7528 xterm.js \u7684\u7ec8\u7aef\u9879\u76ee\u4e2d\uff0c\u8fd9\u4e2a”\u5ef6\u8fdf\u8865\u53d1 resize”\u7684\u6280\u5de7\u53ef\u4ee5\u4f5c\u4e3a\u901a\u7528\u89e3\u6cd5\u53c2\u8003\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
      \u5f7b\u5e95\u89e3\u51b3 xterm.js + Tauri \u4e2d vim \u5e95\u90e8\u7a7a\u767d\u95ee\u9898 \u53d1\u5e03\u65e5\u671f\uff1a2026-06-16 \u6807\u7b7e\uff1aT … Continue reading “\u5f7b\u5e95\u89e3\u51b3 xterm.js + Tauri \u4e2d vim \u5e95\u90e8\u7a7a\u767d\u95ee\u9898”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2912","post","type-post","status-publish","format-standard","hentry","category-22","hfeed"],"_links":{"self":[{"href":"https:\/\/cocozq.com\/index.php?rest_route=\/wp\/v2\/posts\/2912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cocozq.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cocozq.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cocozq.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cocozq.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2912"}],"version-history":[{"count":1,"href":"https:\/\/cocozq.com\/index.php?rest_route=\/wp\/v2\/posts\/2912\/revisions"}],"predecessor-version":[{"id":2913,"href":"https:\/\/cocozq.com\/index.php?rest_route=\/wp\/v2\/posts\/2912\/revisions\/2913"}],"wp:attachment":[{"href":"https:\/\/cocozq.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cocozq.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cocozq.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}