← 全部文章

前端窗口

吸附连接：面板分组 —— 一次拖动就在标签页里搭出迷你仪表盘

15 5月 2026 · 作者 JustZix Team

四种窗口类型（CSS pane、JS pane、JS Console、Output Console）+ 动作栏 + 悬浮按钮 —— 这是 JustZix 能在一个标签页里渲染的六种不同东西。每个都独立，每个都可移动，每个都有自己持久化的状态。没有吸附连接（自 v2.13.42），你得在每次 F5 和每次窗口缩放后手动摆放每个元素。吸附连接把它们变成一个整体的组。

什么是吸附连接？

吸附 = 「磁性吸引」。当你把一个面板/栏/按钮拖到另一个旁边（阈值约 20px）时，JustZix 会把它边对边贴到另一个上，两边都登记为一个「组」。之后拖动组里任意一个元素 → 把整个组当作一个来移动。

全部 6 种元素类型都活在一个共享的 ID 空间里：

ID 空间是统一的 —— saveGroupPositions(groupIds) 按前缀对每个 ID 分类，并选择合适的存储（动作栏和 pane 用 chrome.storage.local，悬浮按钮用 chrome.storage.sync）。

锚点定位 —— 为什么重要

动作栏使用绝对坐标：从左上角算起 x=200, y=400。把窗口从 1920px 缩到 1280px，动作栏可能跑出视口。pane（CSS/JS/JS Console/Output Console）使用锚点定位：

{ x: 100, y: 50, anchor: 'TR' }
//                       ^^ 右上角
// 元素渲染为：right: 100px; top: 50px;

4 种可能的锚点：TL（左上）、TR（右上）、BL（左下）、BR（右下）。每次拖动结束后，absToAnchorPosition 选择给出最短偏移的锚点 —— 元素吸附到最近的视口角落。窗口缩放 → 元素留在「它的」角落附近，不会飞出屏幕。

第一个迷你仪表盘：30 秒

假设你在给自己搭一个 QA 工具栏。你想在右上角放：

1. 一个带 3 个按钮的动作栏（「Reset cart」/「Skip cookie」/「Fill demo data」）
2. 一个用于「🔥 破坏性流程」的 JS pane
3. 一个用于监控日志的 Output Console

流程：

1. 加载页面。动作栏出现在某处（默认或上次位置）。
2. 把栏拖到右上角，离边缘约 20px。锚点被检测为 TR。
3. 把 JS pane 拖到栏下面 —— 离栏的下边缘约 20px 以内。吸附。pane + 栏 = 一组。
4. 把 Output Console 拖到 JS pane 下面 —— 又一次吸附。三元素的组。
5. F5 → 一切一起渲染，同样的布局；吸附连接保持。锚点 TR → 即便窗口缩放后，布局仍贴在右上角。

这就是你的个人 QA 工具栏。它只对作用域匹配的域名生效。其他网站 —— 另一套工具栏（或没有）。

吸附检测究竟做了什么

拖动结束时的算法（简化版）：

// 1. 获取被拖元素的边界（left, top, w, h）
// 2. 对 DOM 中每个其他可拖动元素（.jz-pane-*、.jz-actions-bar、#justzix-floating-btn）：
//    a. 获取另一个的边界
//    b. 计算距离：(top-bottom, bottom-top, left-right, right-left) 的最小值
//    c. 如果距离 < 20px → 吸附（把被拖元素边对边对齐到另一个）
// 3. 吸附后，保存整组的所有位置（辅助函数 saveGroupPositions(groupIds)）
// 4. 组成员 = 拖动开始时起始位置靠近被拖元素的一切

20px 的阈值是有意的 —— 足够「宽」让吸附无需精确瞄准就能发生，但又没大到会误把不相干的东西连起来。在触控板 / 触摸上感觉很直觉。

带隐藏 pane 的拖动 —— v2.13.54 修复

一名用户在 v2.13.53 之后报告的 bug：把悬浮按钮拖进一个含隐藏 CSS pane 的组 → 栏正确跟随悬浮按钮，但 CSS pane（也是隐藏的）留在旧位置。

根本原因：隐藏的 pane 没有 DOM 元素，但仍然在组里。v2.13.53 在「获取起始位置」辅助函数里跳过了它们。修复（v2.13.54）：一个新的 cssPanesCache（同步访问每个 pane 的位置+尺寸，与其他数据一起填充）+ 辅助函数 paneAnchorToAbs(pane)，无需 DOM 就能从锚点 + 视口算出绝对边界。现在隐藏的 pane 即便不可见也是组的完整成员。

使用场景 1 —— 移动端风格的「底部 dock」

把一条带 8 个按钮 + 2 个 SLIDER 的宽动作栏贴到下边缘（锚点 BL）。把 JS Console + Output Console 当作 2 个 pane 叠在栏上方 —— 把每个拖到另一个下面，吸附。刷新后你就有了一个像移动端那样的「底部 dock」。把窗口从 1920 缩到 1280 → 整个组留在下边缘附近（锚点 BL 保持）。

使用场景 2 —— 角落里的迷你 IDE

CSS pane + JS pane + Output Console 在右上角垂直吸附。CSS pane 在顶部，你实时编辑 → 看到效果。JS pane 在下面，点击 ▶ → 启动一段自定义脚本。Output Console 在底部，你监控页面的 console.log 和你的 JUSTZIX.log。三个「窗口」在一个垂直流里 —— 这字面意义上就是一个迷你 IDE。

使用场景 3 —— 把悬浮按钮当作组的锚点

悬浮按钮通常是右下角（BR）的启动器菜单。把一条动作栏 + 一个 Output Console 贴到它上面 —— 把它们拖向悬浮按钮 → 吸附。现在 3 个都成组了。把悬浮按钮拖到任何地方 → 栏 + Output Console 都跟着它。悬浮按钮成了整个组的「锚点把手」。

坑

• 吸附不跨网站 / 域名。每个域名有自己的布局。吸附组按元素保存在 chrome.storage.local 里，但只在作用域匹配当前域名时才渲染。从 shop.com → google.com = 不同的布局（如果可见的话）。
• 吸附时视觉反馈极少。松开鼠标后元素会平滑「咔」到边缘 —— 没有像 Figma 那样的「吸附指示器」叠层。头 2-3 次可能让人困惑。
• 组没有明确的「离开组」UX。要断开连接，把元素拖到离组 >20px 处。你得明确地把它拖远；小幅位置修正不会打断吸附。
• 窗口缩放会触发锚点重算。视口大幅改变后（例如 F11 全屏）锚点可能选另一个角落。最佳实践：在你惯常的工作区尺寸下摆放东西，而不是在 F11 下。
• 4 种 pane 类型 = 4 个各自的 ID 前缀。吸附是按 ID做的，不是按类型。你可以让 3 个 JS pane 全都吸附到一个 CSS pane 上 —— 没问题。

接下来做什么

吸附连接把 JustZix 从「一些独立的工具」变成「一个可配置的仪表盘」。它是标签页里迷你 IDE 拼图的最后一块：CSS pane + JS Console + JS pane + Output Console + 动作（TOGGLE3、SLIDER）—— 按你想要的方式摆放，一次拖动搞定。

安装 JustZix，搭建你的第一个迷你仪表盘 —— 30 秒，零配置代码。