comate-ui-inspector 0.1.5-alpha.5 → 0.1.5

package/enhancements/recorder/recorder-main.js

@@ -1,8 +1,10 @@
 /*
- * MAIN world 录制脚本（增强包）：录制期间抓取并**逐条上报**
- *   - 点击的元素（含 Vue 组件源码链，和选择模式同源）
- *   - console.log/info/warn/error
- *   - 同域名下的 fetch / XMLHttpRequest（方法/URL/状态/发起与完成时间）
+ * MAIN world 录制脚本（增强包）：录制期间抓取并**逐条上报**常见用户事件
+ *   - 点击 click（含 Vue 组件源码链，和选择模式同源）
+ *   - 滚动 scroll（trailing 防抖，记一段滚动的落点）
+ *   - 表单变更 change（密码脱敏）、表单提交 submit、操作键 keydown（仅 Enter/Escape）
+ *   - console.log/info/warn/error（可选）
+ *   - 同域名下的 fetch / XMLHttpRequest（可选，含发起与完成时间）
  * 每个事件即时 postMessage 出去，经 bridge→background→host/bridge 追加进 recording.json。
  * 这样页面刷新/跳转也不丢数据：缓冲在后端，不在页面内存，录制可跨页面连续进行。
  * 本脚本自身无状态缓冲；未开始录制时完全惰性，不打补丁、无开销。
@@ -92,6 +94,79 @@
         });
     }
 
+    // 滚动：高频事件，trailing 防抖 300ms，只记一段滚动结束时的落点。
+    var scrollTimer = null;
+    var lastScroll = null;
+    function onScroll(e) {
+        if (!on) {
+            return;
+        }
+        var t = e.target;
+        var winLevel = t === document || t === window || t === document.documentElement || t === document.body;
+        var x = winLevel ? window.scrollX || window.pageXOffset || 0 : t.scrollLeft;
+        var y = winLevel ? window.scrollY || window.pageYOffset || 0 : t.scrollTop;
+        lastScroll = {
+            selector: winLevel ? '(window)' : cssPath(t),
+            x: Math.round(x),
+            y: Math.round(y),
+            ts: Date.now(),
+        };
+        if (scrollTimer) {
+            clearTimeout(scrollTimer);
+        }
+        scrollTimer = setTimeout(function () {
+            scrollTimer = null;
+            if (on && lastScroll) {
+                emit('scroll', lastScroll);
+                lastScroll = null;
+            }
+        }, 300);
+    }
+
+    // 表单值变更（提交态：blur / 回车 / 选择后触发，天然去抖）；密码脱敏，其余截断。
+    function onChange(e) {
+        if (!on) {
+            return;
+        }
+        var el = e.target;
+        if (!el || el.nodeType !== 1) {
+            return;
+        }
+        var type = (el.getAttribute && (el.getAttribute('type') || '')).toLowerCase();
+        var val;
+        if (type === 'password') {
+            val = '••••••';
+        } else if (type === 'checkbox' || type === 'radio') {
+            val = el.checked ? 'checked' : 'unchecked';
+        } else {
+            val = String(el.value == null ? '' : el.value).slice(0, 100);
+        }
+        emit('change', {
+            selector: cssPath(el),
+            tag: el.nodeName.toLowerCase(),
+            type: type || undefined,
+            value: val,
+            ts: Date.now(),
+        });
+    }
+
+    function onSubmit(e) {
+        if (!on) {
+            return;
+        }
+        var el = e.target;
+        emit('submit', {selector: el && el.nodeType === 1 ? cssPath(el) : '(form)', ts: Date.now()});
+    }
+
+    // 只记有意义的操作键（Enter / Escape），避免逐字记录输入内容（噪声 + 隐私）。
+    function onKeydown(e) {
+        if (!on || (e.key !== 'Enter' && e.key !== 'Escape')) {
+            return;
+        }
+        var el = e.target;
+        emit('keydown', {key: e.key, selector: el && el.nodeType === 1 ? cssPath(el) : '', ts: Date.now()});
+    }
+
     function startConsole() {
         ['log', 'info', 'warn', 'error'].forEach(function (level) {
             saved['c_' + level] = console[level];
@@ -208,6 +283,10 @@
         }
         on = {console: !!opts.console, network: !!opts.network};
         document.addEventListener('click', onClick, true);
+        document.addEventListener('scroll', onScroll, true);
+        document.addEventListener('change', onChange, true);
+        document.addEventListener('submit', onSubmit, true);
+        document.addEventListener('keydown', onKeydown, true);
         if (on.console) {
             startConsole();
         }
@@ -221,6 +300,14 @@
             return;
         }
         document.removeEventListener('click', onClick, true);
+        document.removeEventListener('scroll', onScroll, true);
+        document.removeEventListener('change', onChange, true);
+        document.removeEventListener('submit', onSubmit, true);
+        document.removeEventListener('keydown', onKeydown, true);
+        if (scrollTimer) {
+            clearTimeout(scrollTimer);
+            scrollTimer = null;
+        }
         stopConsole();
         stopNetwork();
         on = null;

package/extension/inspector-main.js

@@ -90,11 +90,14 @@
         panel.style.display = 'block';
         panelCount.textContent = '已选中 ' + selected.length + ' 个';
         panelList.textContent = '';
+        renumber();
         selected.forEach(function (item, i) {
             var info = item.info || {};
-            var files = (info.componentChain || []).map(function (c) {
-                return c && c.file;
-            }).filter(Boolean);
+            var files = (info.componentChain || [])
+                .map(function (c) {
+                    return c && c.file;
+                })
+                .filter(Boolean);
             var row = document.createElement('div');
             row.style.cssText =
                 'display:flex;align-items:flex-start;gap:6px;padding:6px 0;border-top:1px solid #2a2a2a;';
@@ -102,7 +105,8 @@
             meta.style.cssText = 'flex:1;min-width:0;';
             var title = document.createElement('div');
             title.style.cssText = 'font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
-            title.textContent = i + 1 + '. <' + (info.tag || '?') + '>' + (info.text ? ' ' + info.text.slice(0, 20) : '');
+            title.textContent =
+                i + 1 + '. <' + (info.tag || '?') + '>' + (info.text ? ' ' + info.text.slice(0, 20) : '');
             var sub = document.createElement('div');
             sub.style.cssText = 'color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
             sub.textContent = files.length ? files[0].split('/').pop() : info.selector || '';
@@ -307,10 +311,26 @@
         box.style.cssText =
             'position:fixed;z-index:2147483645;pointer-events:none;border:2px solid #16a34a;' +
             'background:rgba(22,163,74,0.10);border-radius:4px;';
+        var badge = document.createElement('div');
+        badge.className = 'oreate-sel-badge';
+        badge.style.cssText =
+            'position:absolute;left:-2px;top:-2px;transform:translateY(-100%);background:#16a34a;color:#fff;' +
+            'font:11px/1.5 sans-serif;padding:0 6px;border-radius:4px 4px 4px 0;white-space:nowrap;';
+        box.appendChild(badge);
         document.body.appendChild(box);
         return box;
     }
 
+    // 按当前选中顺序刷新每个高亮框上的数字角标（删除中间项后序号会重排）。
+    function renumber() {
+        for (var i = 0; i < selected.length; i++) {
+            var b = selected[i].box.querySelector('.oreate-sel-badge');
+            if (b) {
+                b.textContent = String(i + 1);
+            }
+        }
+    }
+
     function placeBox(box, el) {
         var rect = el.getBoundingClientRect();
         box.style.left = rect.left + 'px';

package/hooks/inject-ui-inspector.mjs

@@ -33,16 +33,14 @@ function readJson(file, fallback) {
     }
 }
 
-// 读 append-only 事件流，按类型归并
+// 读 append-only 事件流，返回有序的 {kind, item} 列表（各类用户事件混在一起，按写入顺序）。
 function readEvents() {
-    const clicks = [];
-    const con = [];
-    const network = [];
+    const out = [];
     let text = '';
     try {
         text = readFileSync(eventsFile, 'utf8');
     } catch {
-        return {clicks, console: con, network};
+        return out;
     }
     for (const line of text.split('\n')) {
         if (!line.trim()) {
@@ -54,18 +52,11 @@ function readEvents() {
         } catch {
             continue;
         }
-        if (!ev || !ev.item) {
-            continue;
-        }
-        if (ev.kind === 'click') {
-            clicks.push(ev.item);
-        } else if (ev.kind === 'console') {
-            con.push(ev.item);
-        } else if (ev.kind === 'network') {
-            network.push(ev.item);
+        if (ev && ev.kind && ev.item) {
+            out.push(ev);
         }
     }
-    return {clicks, console: con, network};
+    return out;
 }
 
 const parsed = readJson(storeFile, []);
@@ -74,9 +65,8 @@ const meta = readJson(recordingFile, null);
 // 只注入**已停止**的录制（active === false）。录制进行中（跨刷新/跨页面累积）时不消费、不清空，
 // 以免中途给 Comate 发消息把整段会话吞掉。
 const recDone = meta && meta.active === false;
-const events = recDone ? readEvents() : {clicks: [], console: [], network: []};
-const recording = recDone ? {...meta, ...events} : null;
-const hasRec = recDone && (events.clicks.length || events.console.length || events.network.length);
+const recEvents = recDone ? readEvents() : [];
+const hasRec = recDone && recEvents.length > 0;
 
 if (!list.length && !hasRec) {
     emit({decision: 'allow'});
@@ -95,38 +85,52 @@ function describe(target, index, total) {
         .join('\n');
 }
 
-function describeRecording(r) {
-    const base = r.startedAt || 0;
-    const secs = Math.round(((r.endedAt || 0) - base || 0) / 1000);
+// 把各类用户事件（点击/滚动/输入/提交/按键/控制台/网络）归并成一条按时间排序的时间线。
+function describeRecording(meta, evs) {
+    const base = meta.startedAt || 0;
+    const secs = Math.round(((meta.endedAt || 0) - base || 0) / 1000);
     const rel = t => (typeof t === 'number' ? `+${((t - base) / 1000).toFixed(2)}s` : '+?');
 
-    // 把点击 / 控制台 / 网络归并成一条按时间排序的时间线；网络拆成「发起」「完成」两个事件。
-    const events = [];
-    (r.clicks || []).forEach(c => {
-        const files = (c.componentChain || []).map(x => x && x.file).filter(Boolean);
-        events.push({
-            ts: c.ts,
-            text:
-                `点击 <${c.tag}> ${JSON.stringify((c.text || '').slice(0, 40))} @ ${c.selector}` +
-                (files.length ? ` | 源码 ${files.join(' <- ')}` : ''),
-        });
-    });
-    (r.console || []).forEach(l => {
-        events.push({ts: l.ts, text: `控制台[${l.level}] ${String(l.text).slice(0, 300)}`});
-    });
-    (r.network || []).forEach(n => {
-        events.push({ts: n.startTs, text: `网络→发起 ${n.method} ${n.url}`});
-        events.push({ts: n.endTs, text: `网络←完成 ${n.method} ${n.url} → ${n.status} (${n.ms}ms)`});
-    });
-    // V8 的 sort 稳定：同一时刻保持插入序（发起在完成之前）。
-    events.sort((a, b) => (a.ts || 0) - (b.ts || 0));
+    const lines = [];
+    for (const ev of evs) {
+        const it = ev.item || {};
+        if (ev.kind === 'click') {
+            const files = (it.componentChain || []).map(x => x && x.file).filter(Boolean);
+            lines.push({
+                ts: it.ts,
+                text:
+                    `点击 <${it.tag}> ${JSON.stringify((it.text || '').slice(0, 40))} @ ${it.selector}` +
+                    (files.length ? ` | 源码 ${files.join(' <- ')}` : ''),
+            });
+        } else if (ev.kind === 'scroll') {
+            lines.push({ts: it.ts, text: `滚动 ${it.selector} → (${it.x}, ${it.y})`});
+        } else if (ev.kind === 'change') {
+            lines.push({
+                ts: it.ts,
+                text: `输入/变更 <${it.tag}> @ ${it.selector} = ${JSON.stringify(String(it.value ?? '').slice(0, 60))}`,
+            });
+        } else if (ev.kind === 'submit') {
+            lines.push({ts: it.ts, text: `提交表单 @ ${it.selector}`});
+        } else if (ev.kind === 'keydown') {
+            lines.push({ts: it.ts, text: `按键 ${it.key}${it.selector ? ` @ ${it.selector}` : ''}`});
+        } else if (ev.kind === 'console') {
+            lines.push({ts: it.ts, text: `控制台[${it.level}] ${String(it.text).slice(0, 300)}`});
+        } else if (ev.kind === 'network') {
+            lines.push({ts: it.startTs, text: `网络→发起 ${it.method} ${it.url}`});
+            lines.push({ts: it.endTs, text: `网络←完成 ${it.method} ${it.url} → ${it.status} (${it.ms}ms)`});
+        } else {
+            lines.push({ts: it.ts, text: `${ev.kind} ${JSON.stringify(it).slice(0, 120)}`});
+        }
+    }
+    // V8 的 sort 稳定：同一时刻保持插入序（如网络发起在完成之前）。
+    lines.sort((a, b) => (a.ts || 0) - (b.ts || 0));
 
     const parts = [
-        `【ui-inspector 录制】用户录制了一段操作（页面 ${r.pageUrl || ''}，约 ${secs}s，共 ${events.length} 个事件，时间为相对录制起点的偏移）：`,
+        `【ui-inspector 录制】用户录制了一段操作（页面 ${meta.pageUrl || ''}，约 ${secs}s，共 ${lines.length} 个事件，时间为相对录制起点的偏移）：`,
     ];
-    events.slice(0, 120).forEach(e => parts.push(`  ${rel(e.ts)} ${e.text}`));
-    if (events.length > 120) {
-        parts.push(`  …（其余 ${events.length - 120} 个事件省略）`);
+    lines.slice(0, 160).forEach(e => parts.push(`  ${rel(e.ts)} ${e.text}`));
+    if (lines.length > 160) {
+        parts.push(`  …（其余 ${lines.length - 160} 个事件省略）`);
     }
     return parts.join('\n');
 }
@@ -142,7 +146,7 @@ if (list.length) {
     );
 }
 if (hasRec) {
-    sections.push(describeRecording(recording));
+    sections.push(describeRecording(meta, recEvents));
 }
 sections.push(
     '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。'

package/package.json

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