butubb
4ea777a55a
fix(抓取): 元素框跟着图片走（ResizeObserver）+ 界面放大 + 右侧层级/属性/颜色三页签
用户报的准确现象：**点某些元素会让画面变大，但框没跟着变大 → 错位**。
根因：预览图是 `max-width:100%` —— 窗口够宽时恒为原始尺寸（我这儿复现不出），
但窗口窄时图片被压小；此时任何**布局微动**都会改变预览列宽度 → 图片重新缩放，
而框是上一次算好的**像素坐标**，不会跟着变。触发布局微动的正是"点元素"：
`.el-picker-item.active` 用 `border-left:3px`（占宽度）→ 列表变宽 → 预览变窄 →
图片变小 ✗。实测（视口压到 900）：图片从 720 → 363，框仍停在 720 的位置。
修法：
1. **ResizeObserver 盯着图片**：显示尺寸一变就重算所有框 —— 窗口缩放、面板宽度
变化、滚动条出现…都会自动跟上，这是"完全不错位"的兜底保证。
2. 高亮一律改用 **outline / box-shadow**（不占布局）→ 选中元素不再引发任何重排。
3. 弹窗放大到 **98vw × 88vh**（用户要"整个界面大一点"），图片在宽窗口下 1:1。
4. 右侧改成和 uiauto.dev 一样的**三页签**：
- **层级**：元素树（原列表，缩进 + 搜索）
- **属性**：选中元素的全部属性（建议选择器/class/resource-id/text/desc/package/
clickable/bounds/深度）
- **颜色**：鼠标在图上移动实时取**像素色**；选中元素显示**元素中心色**
5. 交互对齐云检查器：**点层级条目 = 选中**（看属性/颜色/高亮，不关窗），
回填改由每行的「✓ 填入」按钮触发。
实测（视口 900 窄窗口）：图片 720→363、框同步变 363 ✓；点元素不再错位 ✓；
三页签可用、属性/取色正确（选中元素中心 #f7f7f7）✓；无 JS 报错 ✓。
2026-09-13 21:30:41 +08:00
..
2026-09-13 13:03:37 +08:00
2026-09-13 21:30:41 +08:00
2026-09-13 13:03:37 +08:00