comate-ui-inspector 0.1.2-alpha.6 → 0.1.3

package/README.md

@@ -42,16 +42,18 @@ ui-inspector install           # 注册 native host + 个人级 hook，并打印
 ```bash
 # 远程机上（和 Comate hook/MCP 同机）：装 hook/MCP 并后台起 bridge
 ui-inspector install --remote            # --port 默认 8917；跳过无浏览器的 native host
-# 本地笔记本：把 bridge 端口 + dev server 端口一起转发到本地 127.0.0.1
-ui-inspector link <remote-ssh-目标> --port <dev端口>
+# 本地笔记本：把远程 bridge 端口转发到本地 127.0.0.1（dev server 端口自行转发）
+ui-inspector link <remote-ssh-目标>                        # 本地/远程 bridge 都用默认 8917
+# 本地与远程 bridge 端口不同时才两个都填：
+ui-inspector link <remote-ssh-目标> --bridge-port <本地> --remote-bridge-port <远程>
 ```
 
-`install --remote` 会打印 MCP 配置（贴进**远程**的 Comate 并 reload），并把 bridge 后台拉起（日志在 `~/.ui-inspector/bridge.log`）。`link` 本质是 `ssh -N -L <本地bridge端口>:127.0.0.1:<远程bridge端口> -L <dev端口>:127.0.0.1:<dev端口> <remote>`，保持前台、Ctrl-C 断开。远程 bridge 端口不必和本地一致：本地用 `--bridge-port`、远程用 `--remote-bridge-port`（默认两者相同）；弹窗里填的是**本地**那个端口。
+`install --remote` 会打印 MCP 配置（贴进**远程**的 Comate 并 reload），并把 bridge 后台拉起（日志在 `~/.ui-inspector/bridge.log`）。`link` 本质是 `ssh -N -L <本地bridge端口>:127.0.0.1:<远程bridge端口> <remote>`，保持前台、Ctrl-C 断开。端口参数只有两个：本地 `--bridge-port`、远程 `--remote-bridge-port`（默认相同，相同时只填 `--bridge-port`、省略即默认 8917）；弹窗里填的是**本地**那个。dev server 端口由你的远程开发工具自行转发，`link` 不再代管。
 
 链路断了（ssh 掉线 / 远程 bridge 或 dev server 停了）时，先在本地自检：
 
 ```bash
-ui-inspector doctor <remote> --port <dev端口>   # 定位断在哪层并打印对应恢复命令
+ui-inspector doctor <remote> --dev-port <dev端口>   # 定位断在哪层并打印对应恢复命令
 ```
 
 恢复顺序：先确保远程 bridge 活（`ui-inspector bridge` / `install --remote`）→ 再接本地隧道（`ui-inspector link`）→ 再看远程 dev server。

package/cli.mjs

@@ -4,8 +4,8 @@
  *   npm i -g comate-ui-inspector
  *   ui-inspector install      # 注册 native host + 写个人级 hook + 打印 MCP 配置与扩展目录
  *   ui-inspector install --remote  # 远程开发机：装 hook/MCP 并后台起 bridge（跳过无浏览器的 native host）
- *   ui-inspector link <remote> --port <devport>  # 本地：SSH 把 bridge 端口 + dev 端口转发到本地 127.0.0.1
- *   ui-inspector doctor <remote> --port <devport> # 本地：自检远程链路断在哪层并打印恢复命令
+ *   ui-inspector link <remote> --bridge-port <本地> [--remote-bridge-port <远程>]  # 本地：SSH 把 bridge 端口转发到本地 127.0.0.1
+ *   ui-inspector doctor <remote> --bridge-port <本地> [--dev-port <dev端口>] # 本地：自检远程链路断在哪层并打印恢复命令
  *   ui-inspector uninstall    # 移除 native host 清单 + 个人级 hook（--purge 连 ~/.ui-inspector 一起删）
  *   ui-inspector status       # 查看安装状态
  *   ui-inspector bridge       # 启动 HTTP bridge（远程开发用，--port 默认 8917）
@@ -133,29 +133,22 @@ function install({remote, port}) {
     out('完成后：按住 Alt 点元素多选 → 回 Comate 写修改意见。');
 }
 
-// 本地笔记本：把远程 bridge 端口 + dev server 端口都转发到本地 127.0.0.1。
-// 远程 bridge 监听端口可与本地不同：-L <本地bridge端口>:127.0.0.1:<远程bridge端口>。
-function link({remote, devPort, bridgePort, remoteBridgePort}) {
+// 本地笔记本：把远程 bridge 端口转发到本地 127.0.0.1。端口参数只有两个：
+//   --bridge-port <本地>（默认 8917）、--remote-bridge-port <远程>（默认与本地相同）。
+//   本地=远程时只填 --bridge-port；不同才两个都填。dev server 端口自行转发。
+function link({remote, bridgePort, remoteBridgePort}) {
     if (!remote) {
-        out(
-            '用法：ui-inspector link <remote-ssh-目标> --port <dev端口> [--bridge-port 8917] [--remote-bridge-port <远程端口>]'
-        );
-        out('例：  ui-inspector link dev-box --port 5173');
+        out('用法：ui-inspector link <remote-ssh-目标> [--bridge-port <本地端口>] [--remote-bridge-port <远程端口>]');
+        out('例：  ui-inspector link dev-box                                    # 本地/远程都用默认 8917');
+        out('      ui-inspector link dev-box --bridge-port 9000                 # 本地=远程=9000');
+        out('      ui-inspector link dev-box --bridge-port 9000 --remote-bridge-port 8917  # 本地 9000 → 远程 8917');
         return;
     }
     const rbp = remoteBridgePort || bridgePort;
-    const args = ['-N', '-L', `${bridgePort}:127.0.0.1:${rbp}`];
-    if (devPort) {
-        args.push('-L', `${devPort}:127.0.0.1:${devPort}`);
-    }
-    args.push(remote);
+    const args = ['-N', '-L', `${bridgePort}:127.0.0.1:${rbp}`, remote];
     out(`转发中（Ctrl-C 断开）：ssh ${args.join(' ')}`);
-    out(
-        `  bridge → 本地 127.0.0.1:${bridgePort} ⇢ 远程 127.0.0.1:${rbp}${devPort ? `；dev → 127.0.0.1:${devPort}` : ''}`
-    );
-    out(
-        `  提示：弹窗里的端口填本地的 ${bridgePort}；远程 bridge 需在 ${rbp} 上监听（ui-inspector bridge --port ${rbp}）。`
-    );
+    out(`  bridge → 本地 127.0.0.1:${bridgePort} ⇢ 远程 127.0.0.1:${rbp}（弹窗里填本地 ${bridgePort}；远程 bridge 需在 ${rbp} 监听）`);
+    out(`  注：dev server 端口请自行转发（远程开发工具通常已转发，或另跑 ssh -L <dev>:127.0.0.1:<dev> ${remote}）`);
     const child = spawn('ssh', args, {stdio: 'inherit'});
     child.on('exit', code => process.exit(code ?? 0));
 }
@@ -226,22 +219,22 @@ function getOpt(name, def) {
 function parseLink() {
     const rest = process.argv.slice(3);
     let remote;
-    let devPort;
     let bridgePort = '8917';
     let remoteBridgePort;
+    let devPort;
     for (let i = 0; i < rest.length; i++) {
         const a = rest[i];
-        if (a === '--port') {
-            devPort = rest[++i];
-        } else if (a === '--bridge-port') {
+        if (a === '--bridge-port') {
             bridgePort = rest[++i];
         } else if (a === '--remote-bridge-port') {
             remoteBridgePort = rest[++i];
+        } else if (a === '--dev-port') {
+            devPort = rest[++i]; // 仅 doctor 用；放这里一并消费，避免其值被当成 remote
         } else if (!a.startsWith('-')) {
             remote = a;
         }
     }
-    return {remote, devPort, bridgePort, remoteBridgePort};
+    return {remote, bridgePort, remoteBridgePort, devPort};
 }
 
 // 探测本地某端口的 http 可达性（2s 超时）。用 node:http 而非 fetch，兼容 node 18+。
@@ -262,9 +255,12 @@ function probe(port, path) {
 
 // 一键自检：定位远程开发链路（本地隧道 → 远程 bridge → 远程 dev server）断在哪层，并打印恢复命令。
 async function doctor() {
-    const {remote, devPort, bridgePort} = parseLink();
+    const {remote, bridgePort, remoteBridgePort, devPort} = parseLink();
     const rm = remote || '<remote>';
-    const dp = devPort || '<dev端口>';
+    const linkCmd =
+        `ui-inspector link ${rm}` +
+        (bridgePort !== '8917' ? ` --bridge-port ${bridgePort}` : '') +
+        (remoteBridgePort && remoteBridgePort !== bridgePort ? ` --remote-bridge-port ${remoteBridgePort}` : '');
     out('ui-inspector doctor（远程开发链路自检）：');
 
     const b = await probe(bridgePort, '/state');
@@ -272,7 +268,7 @@ async function doctor() {
         out(`  [1] bridge ✓ 127.0.0.1:${bridgePort} 可达——本地→隧道→远程 bridge 全通`);
     } else if (b.state === 'refused') {
         out(`  [1] bridge ✗ 本地 127.0.0.1:${bridgePort} 无人监听 → SSH 隧道断了（或没起）`);
-        out(`        恢复：ui-inspector link ${rm} --port ${dp}`);
+        out(`        恢复：${linkCmd}`);
     } else {
         out(`  [1] bridge ✗ 隧道在、但远程 bridge 无响应（${b.state}）`);
         out(`        恢复：登远程机跑 ui-inspector bridge（或 install --remote），看 ~/.ui-inspector/bridge.log`);
@@ -281,27 +277,25 @@ async function doctor() {
     if (devPort) {
         const d = await probe(devPort, '/');
         if (d.state === 'refused') {
-            out(`  [2] dev    ✗ 本地 127.0.0.1:${devPort} 不可达 → 隧道没转发该端口，或远程 dev server 没起`);
-            out(`        恢复：① 远程起 dev server；② 本地 ui-inspector link ${rm} --port ${devPort}`);
+            out(`  [2] dev    ✗ 本地 127.0.0.1:${devPort} 不可达 → 该端口没转发，或远程 dev server 没起`);
         } else if (d.state === 'timeout') {
             out(`  [2] dev    ✗ 127.0.0.1:${devPort} 超时 → 远程 dev server 可能挂了`);
-            out(`        恢复：远程重启 dev server`);
         } else {
             out(`  [2] dev    ✓ 127.0.0.1:${devPort} 可达（HTTP ${d.code}）`);
         }
     } else {
-        out('  [2] dev    - 未传 --port，跳过 dev server 检查');
+        out('  [2] dev    - 未传 --dev-port，跳过 dev server 检查');
     }
 
-    out('\n恢复顺序：先确保远程 bridge 活 → 再接本地隧道（link）→ 再看远程 dev server。');
+    out('\n恢复顺序：先确保远程 bridge 活 → 再接本地隧道（link）→ 再看远程 dev server（自行转发）。');
 }
 
 function help() {
     out('用法：ui-inspector <install|uninstall|status|bridge|link|doctor>');
     out('  install          注册 native host + 个人级 hook，并打印 MCP 配置与扩展目录');
     out('  install --remote 远程开发机：装 hook/MCP 并后台起 bridge（跳过 native host，--port 默认 8917）');
-    out('  link <remote>    本地：SSH 把 bridge 端口 + dev 端口转发到本地（--port <dev端口> [--bridge-port 8917]）');
-    out('  doctor <remote>  本地：自检远程开发链路断在哪层并打印恢复命令（--port <dev端口> [--bridge-port 8917]）');
+    out('  link <remote>    本地：SSH 把 bridge 端口转发到本地（--bridge-port <本地> [--remote-bridge-port <远程>]）');
+    out('  doctor <remote>  本地：自检远程链路断在哪层并打印恢复命令（--bridge-port <本地> [--dev-port <dev端口>]）');
     out('  uninstall        移除上述注册（加 --purge 连 ~/.ui-inspector 数据一起删）');
     out('  status           查看安装状态');
     out('  bridge           启动 HTTP bridge（远程开发用，--port 默认 8917）');

package/extension/inspector-main.js

@@ -126,9 +126,30 @@
         box.style.height = rect.height + 'px';
     }
 
+    // 元素还在页面上渲染吗：被移出 DOM 或 display:none 时 getClientRects() 为空。
+    function isRendered(el) {
+        return el && el.isConnected && el.getClientRects().length > 0;
+    }
+
+    // 每帧跟随元素位置；同时剔除已消失（被删除/隐藏）的选中项，连同高亮框一起移除。
     function repositionBoxes() {
-        for (var i = 0; i < selected.length; i++) {
-            placeBox(selected[i].box, selected[i].el);
+        var removed = 0;
+        for (var i = selected.length - 1; i >= 0; i--) {
+            if (isRendered(selected[i].el)) {
+                placeBox(selected[i].box, selected[i].el);
+            } else {
+                selected[i].box.remove();
+                selected.splice(i, 1);
+                removed++;
+            }
+        }
+        if (removed) {
+            postSelection();
+            showHint(
+                selected.length
+                    ? '有选中元素已消失，已移除（当前 ' + selected.length + ' 个）'
+                    : '选中元素已消失，已全部移除'
+            );
         }
     }
 
@@ -233,6 +254,14 @@
     window.addEventListener('scroll', repositionBoxes, true);
     window.addEventListener('resize', repositionBoxes, true);
 
+    // 每帧跟随并清理：元素被删/隐藏后，repositionBoxes 会移除它的高亮框（scroll/resize 不一定触发）。
+    (function raf() {
+        if (selected.length) {
+            repositionBoxes();
+        }
+        window.requestAnimationFrame(raf);
+    })();
+
     // bridge-content 轮询回发的消息：cleared（撤高亮）/ status（toast 提示）
     window.addEventListener('message', function (event) {
         if (event.source !== window || !event.data) {

package/extension/popup.html

@@ -106,7 +106,7 @@
                 <input
                     id="domain-input"
                     type="text"
-                    placeholder="如 https://local.oreateai.com"
+                    placeholder="如 https://example.com"
                 />
                 <button
                     id="add-domain"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "comate-ui-inspector",
-    "version": "0.1.2-alpha.6",
+    "version": "0.1.3",
     "description": "按住 Alt 点选页面元素，把「元素 + Vue 组件源码路径」交给 Comate 定位源码修改。浏览器扩展 + Native Messaging host + MCP + hook。",
     "type": "module",
     "license": "MIT",