@hyzyn/dsh-tty 0.30.0 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyzyn/dsh-tty",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "DSH Web GUI 的终端面板插件：侧边栏「终端」提供 xterm.js + PTY 全交互终端与 ssh2 原生 SSH 远程连接（连接簿、主机指纹 TOFU、跳板机），支持 tmux 会话持久化、SFTP 文件传输、端口转发与服务器状态条，并向其他插件开放 ttyTerminal / ttyPanel / ttyConnbar 扩展点；Windows 宿主同样可用。",
   "keywords": [
     "dsh",

package/scripts/preview/harness.js

@@ -209,6 +209,63 @@
     await sleep(200)
     return item
   }
+  /**
+   * SSH 连接对话框「头尾固定」的公共断言（0.31.0）：
+   * 标题钉在卡片上缘、底部动作行钉在下缘，**只有中段滚**——此前是整张卡片
+   * `overflow-y: auto`，滚一下就两头都不见了（底部按钮初始根本不在视口里）。
+   * 内容溢出时把中段滚到底再复查一次，否则「没滚动」等于这条断言没验到。
+   */
+  const sshFrameProblem = () => {
+    const card = q('.tt_sshCard')
+    const head = q('.tt_sshHead')
+    const body = q('.tt_sshBody')
+    const foot = q('.tt_sshFoot')
+    if (card === null || head === null || body === null || foot === null) return '连接对话框缺少头 / 身 / 尾三段'
+    if (getComputedStyle(card).overflowY !== 'hidden') return '卡片自己还在滚动（标题与按钮会跟着跑）'
+    if (getComputedStyle(body).overflowY !== 'auto') return '中段不是滚动容器'
+    const cardRect = card.getBoundingClientRect()
+    if (Math.abs(head.getBoundingClientRect().top - cardRect.top) > 1) return '标题没钉在卡片上缘'
+    if (Math.abs(foot.getBoundingClientRect().bottom - cardRect.bottom) > 1) return '底部动作行没钉在卡片下缘'
+    if (body.scrollHeight > body.clientHeight) {
+      body.scrollTop = body.scrollHeight
+      const after = card.getBoundingClientRect()
+      if (Math.abs(head.getBoundingClientRect().top - after.top) > 1) return '把中段滚到底后标题跟着跑了'
+      if (Math.abs(foot.getBoundingClientRect().bottom - after.bottom) > 1) return '把中段滚到底后底部动作行跟着跑了'
+      if (body.scrollTop === 0) return '中段内容溢出却滚不动'
+    }
+    return null
+  }
+  /**
+   * 「高级」折叠区的展开图标：收起 = 右尖括号、展开 = 下尖括号，**路径逐字取自宿主**
+   * `dsh-client-ui-primitives` 的 `IconChevronRightOutlineRegular` / `IconChevronDownOutlineRegular`
+   * （官方 provider 卡片「自定义设置」就是这一对；用户原话「展开图标和 dsh 官方的图标保持一致」）。
+   * 夹具里比一次实时的 DOM，源码那一半在 `test/ssh-dialog-shell.test.ts` 钉着。
+   */
+  const HOST_CHEVRON_RIGHT = 'M6 12L9.29289 8.70711C9.68342 8.31658 9.68342 7.68342 9.29289 7.29289L6 4'
+  const HOST_CHEVRON_DOWN = 'M4 6L7.29289 9.29289C7.68342 9.68342 8.31658 9.68342 8.70711 9.29289L12 6'
+  /** 折叠区钉在图标上的判据：返回 null 表示与宿主一致，否则给出实测路径。 */
+  const advChevronProblem = (expected) => {
+    const path = q('.tt_sshAdvChevron path')
+    if (path === null) return '「高级」折叠区的展开图标缺失'
+    const d = path.getAttribute('d') ?? ''
+    if (d !== expected) return '展开图标与宿主的不是同一只（实测 d="' + d + '"）'
+    return null
+  }
+  /** 从「+」菜单里按条目名点开编辑（对话框只认连接簿里已存在的名字）。 */
+  const openEditFor = async (name) => {
+    await clickAdd()
+    const rows = await waitFor(() => {
+      const r = qa('.tt_addMenuRow')
+      return r.length > 0 ? r : null
+    })
+    const row = rows.find((r) => (r.querySelector('.tt_addMenuMain')?.textContent ?? '') === name)
+    if (row === undefined) throw new Error('「+」菜单里找不到条目 ' + name)
+    const editBtn = [...row.querySelectorAll('.tt_addMenuEdit')].find((b) => attributeSays(b, 'title', '编辑连接', 'Edit connection'))
+    if (editBtn === undefined) throw new Error('条目 ' + name + ' 没有「编辑连接」按钮')
+    editBtn.click()
+    await waitFor(() => q('.tt_sshCard'))
+    await sleep(200)
+  }
   /** SFTP 落点断言：卡片在挂载位里（docked）还是退回了居中对话框（modal）。 */
   const sftpSurfaceAssert = () => ({
     docked: q('.tt_dockPaneBody > .tt_sftpCard') !== null || q('.tt_dockPaneBody > .tt_sftpDualCard') !== null,
@@ -425,18 +482,94 @@
       await waitFor(() => resultEl() && resultEl().textContent !== '' && !says(resultEl(), '测试中', 'Testing'))
       await sleep(250)
     },
+    /* SSH 连接对话框：「保存到连接簿」名称行常显 + 填名字自动勾上（0.31.0） */
+    async 'ssh-save-book'() {
+      await openPanel()
+      await clickAdd()
+      await clickMenuItem('SSH 连接…', 'SSH connection…')
+      await waitFor(() => q('.tt_sshCard'))
+      /*
+       * 用户原话「这个默认展开吧」（贴的是「保存到连接簿 + 连接簿名称」那一块）。这里按**文案**
+       * 找那两个控件，再把四条联动规则逐条敲一遍——它们错掉时界面都看不出来（最典型：取消勾选后
+       * 名字还留在框里 ⇒ 按下去既不保存也没提示）。
+       */
+      window.__previewAssert = async () => {
+        const labelFor = (...names) => qa('.tt_sshCard .tt_cardLabel').find((el) => says(el, ...names))
+        const saveLabel = labelFor('保存到连接簿', 'Save to the host book')
+        const nameLabel = labelFor('连接簿名称', 'Book name')
+        if (saveLabel === undefined || nameLabel === undefined) return '找不到「保存到连接簿 / 连接簿名称」这两个控件'
+        const saveCheck = saveLabel.closest('.tt_cardRow')?.querySelector('input[type="checkbox"]')
+        const nameRow = nameLabel.closest('.tt_sshRow')
+        const nameInput = nameRow?.querySelector('input')
+        if (saveCheck === undefined || saveCheck === null || nameRow === null || nameInput === null) {
+          return '「保存到连接簿」那一组的结构不对'
+        }
+        const hostInput = qa('.tt_sshCard input')[0]
+        // ① 默认：名称行就在眼前（不必先勾勾选框），且勾选框是关的
+        if (nameRow.getBoundingClientRect().height <= 0) return '连接簿名称这一行默认不显示（用户要的是「默认展开」）'
+        if (saveCheck.checked !== false) return '默认就把「保存到连接簿」勾上了（那一项应当是关的）'
+        // ② 填了名字 → 自动勾上
+        nameInput.value = 'staging-db'
+        nameInput.dispatchEvent(new Event('input'))
+        if (saveCheck.checked !== true) return '名称框里填了名字，「保存到连接簿」却没自动勾上'
+        // ③ 清空名字 → 自动取消
+        nameInput.value = ''
+        nameInput.dispatchEvent(new Event('input'))
+        if (saveCheck.checked !== false) return '名字清空了，「保存到连接簿」还勾着（等于静默保存一条无名条目）'
+        // ④ 手动勾上且名称为空 → 用主机名兜底
+        hostInput.value = 'db.internal'
+        saveCheck.checked = true
+        saveCheck.dispatchEvent(new Event('change'))
+        if (nameInput.value !== 'db.internal') return '手动勾上时没有用主机名兜底（实测 "' + nameInput.value + '"）'
+        // ⑤ 手动取消 → 名字一起清掉（不留「名字还在、但不会保存」的悬空态）
+        saveCheck.checked = false
+        saveCheck.dispatchEvent(new Event('change'))
+        if (nameInput.value !== '') return '取消勾选后名字还留在框里（实测 "' + nameInput.value + '"）'
+        // 截图落在「填了名字、勾选框自动跟上」这个态上
+        nameInput.value = 'staging-db'
+        nameInput.dispatchEvent(new Event('input'))
+        return null
+      }
+    },
     /* SSH 连接对话框（编辑连接簿条目，含 env 选择器） */
     async 'ssh-edit'() {
+      await openPanel()
+      await openEditFor('staging-db')
+      window.__previewAssert = async () => {
+        const advBody = q('.tt_sshAdvBody')
+        const advToggle = q('.tt_sshAdvToggle')
+        if (advBody === null || advToggle === null) return '「高级」折叠区缺失'
+        // 这条条目一项「高级」都没配：必须默认收起，否则这轮优化等于没做
+        if (advBody.hidden !== true) return '条目里没配过高级项，折叠区却是展开的'
+        if (advToggle.getAttribute('aria-expanded') !== 'false') return 'aria-expanded 与收起态不一致'
+        return advChevronProblem(HOST_CHEVRON_RIGHT) ?? sshFrameProblem()
+      }
+    },
+    /* SSH 连接对话框：展开「高级」并检验头尾固定（中段溢出时滚到底再复查） */
+    async 'ssh-adv'() {
       await openPanel()
       await clickAdd()
-      const rows = await waitFor(() => {
-        const r = qa('.tt_addMenuRow')
-        return r.length > 0 ? r : null
-      })
-      const editBtn = [...rows[1].querySelectorAll('.tt_addMenuEdit')].find((b) => attributeSays(b, 'title', '编辑连接', 'Edit connection'))
-      editBtn.click()
+      await clickMenuItem('SSH 连接…', 'SSH connection…')
       await waitFor(() => q('.tt_sshCard'))
-      await sleep(200)
+      const advBody = await waitFor(() => q('.tt_sshAdvBody'))
+      if (advBody.hidden !== true) throw new Error('新建连接时「高级」应当默认收起')
+      q('.tt_sshAdvToggle').click()
+      await sleep(150)
+      if (advBody.hidden === true) throw new Error('点「高级」没有展开')
+      window.__previewAssert = async () => advChevronProblem(HOST_CHEVRON_DOWN) ?? sshFrameProblem()
+    },
+    /* SSH 连接对话框：编辑一条**配过高级项**的条目 → 折叠区自动展开并点名已配置的项 */
+    async 'ssh-jump'() {
+      await openPanel()
+      await openEditFor('bastion-jump')
+      window.__previewAssert = async () => {
+        const advBody = q('.tt_sshAdvBody')
+        const meta = q('.tt_sshAdvMeta')
+        if (advBody === null) return '「高级」折叠区缺失'
+        if (advBody.hidden === true) return '条目里配了跳板机 / 代理命令，折叠区却默认收起（配置被藏起来了）'
+        if (meta === null || !says(meta, '跳板机', 'Jump host')) return '折叠区元信息没点名已配置的跳板机'
+        return advChevronProblem(HOST_CHEVRON_DOWN) ?? sshFrameProblem()
+      }
     },
     /* 设置卡片（展开） */
     async settings() {

package/scripts/preview/mock-host.js

@@ -53,6 +53,25 @@
       // 刻意**没有**任何隧道：验证「没配隧道时收进 ⋯ 更多」这条路径
       // （上面两条都有隧道，走的是常驻「隧道 N」按钮）
       { name: 'bare-host', host: 'bare.internal', port: 22, username: 'ops', auth: 'agent', keyPath: '', passphrase: '', password: '', agentForward: false, persist: false },
+      /*
+       * 唯一一条把「高级」三段**都配上**的条目（跳板机 + 代理命令 + 主机密钥别名）：
+       * `ssh-jump` 场景用它验折叠区的默认展开判据——配过却收起来，等于把配置藏了。
+       */
+      {
+        name: 'bastion-jump',
+        host: 'internal.corp',
+        port: 22,
+        username: 'deploy',
+        auth: 'key',
+        keyPath: '~/.ssh/id_ed25519',
+        passphrase: '',
+        password: '',
+        agentForward: false,
+        persist: false,
+        hostKeyAlias: 'corp-internal',
+        proxyCommand: 'ssh -W %h:%p bastion.corp',
+        jump: { host: 'bastion.corp', port: 2222 },
+      },
     ],
     hostKeys: [
       { host: '198.51.100.20', port: 22, fingerprint: 'SHA256:9xQ2mVr7Kp3sTf1cZbLd8uYwAe4nHjR6gPoXkMvQ2Bc' },

package/scripts/preview.mjs

@@ -13,6 +13,7 @@
  *   node scripts/preview.mjs --build            # 顺带重建 client.js（默认不重建，产物落后直接报错）
  *   node scripts/preview.mjs --theme=light      # 浅色主题
  *   node scripts/preview.mjs --width=560        # 压窄视口走查窄容器排版（默认 1680）
+ *   node scripts/preview.mjs --height=560       # 压矮视口走查「内容溢出时头尾还固不固定」（默认 1050）
  *   PREVIEW_CHROME_ARGS=--no-sandbox node scripts/preview.mjs   # 受限沙箱 / CI 里 Chrome 起不来时
  *
  * 需要本机有 Chrome/Chromium（默认找 playwright 缓存的 Chrome for Testing，
@@ -46,6 +47,12 @@ const shotsDir = join(previewDir, outName)
  * `--width=560` 之类显式压窄。
  */
 const viewportWidth = Number((argv.find((a) => a.startsWith('--width=')) || '--width=1680').split('=')[1]) || 1680
+/**
+ * 视口高度（默认 1050）。**与连接对话框的「头尾固定」直接相关**：那张卡片是
+ * `max-height: 86vh`，矮视口下内容才会溢出中段——1050px 高时展开态刚好塞得下，
+ * 「滚到底头尾还在不在」这条断言就永远走不到。走查时用 `--height=560` 压矮。
+ */
+const viewportHeight = Number((argv.find((a) => a.startsWith('--height=')) || '--height=1050').split('=')[1]) || 1050
 /**
  * 额外 Chrome 参数（空格分隔）。受限环境（文件沙箱 / CI 容器）里 Chrome 自己的
  * sandbox 起不来，CDP 会一直卡在 `Page.enable` 直到超时——此时用
@@ -65,6 +72,9 @@ const SCENARIOS = [
   ['ssh', 'SSH 连接对话框'],
   ['ssh-probe', 'SSH 连接对话框（试连结果）'],
   ['ssh-edit', 'SSH 连接对话框（编辑）'],
+  ['ssh-save-book', 'SSH 连接对话框：连接簿名称行常显 + 填名字自动勾上'],
+  ['ssh-adv', 'SSH 连接对话框：「高级」展开 + 中段滚动（头尾固定）'],
+  ['ssh-jump', 'SSH 连接对话框：配过高级项的条目默认展开折叠区'],
   ['settings', '设置卡片'],
   ['settings-assist', '设置卡片：AI 辅助小节（默认关 + 模型路由一个控件）'],
   ['settings-shell', '设置卡片：Shell 路径候选表（浮层，不顶动卡片布局）'],
@@ -547,7 +557,7 @@ async function main() {
   await ensureVendor()
   log('启动 headless Chrome（' + theme + ' 主题）')
   const { child, cdp, userDataDir } = await launchChrome()
-  await cdp.send('Emulation.setDeviceMetricsOverride', { width: viewportWidth, height: 1050, deviceScaleFactor: 2, mobile: false })
+  await cdp.send('Emulation.setDeviceMetricsOverride', { width: viewportWidth, height: viewportHeight, deviceScaleFactor: 2, mobile: false })
   let failed = 0
   try {
     for (const name of wanted) {