41 lines
5.9 KiB
Markdown
41 lines
5.9 KiB
Markdown
# 服务连线画板
|
||
|
||
「拖拽连线」使用可自由摆放节点的画板，解决固定两列视图无法整理复杂连接关系的问题。网关服务使用蓝色，目标服务使用绿色，同时显示服务类型文字；颜色随明暗主题调整。
|
||
|
||
## 操作
|
||
|
||
- 拖动卡片顶部移动服务；聚焦顶部后可以用方向键移动，Shift + 方向键加大步长。连线端点随实际账号按钮和节点位置移动。
|
||
- 拖动空白处或滚动滚轮平移。Ctrl / Command + 滚轮围绕指针缩放，也可使用放大、缩小按钮，范围为 20%–160%。
|
||
- 「适应画板」根据全部节点边界调整视角；超大布局受最小缩放限制，可以继续平移查看。「重置布局」恢复网关和目标的默认两列排列。
|
||
- 「全屏画板」展开整个画板，保留移动、缩放、连线及服务操作；点击「退出全屏」或按 Esc 返回。浏览器不提供全屏接口或拒绝请求时，使用窗口内铺满显示。全屏时隐藏画板下方重复的关联明细，为节点留出空间。
|
||
- 页面顶部统一筛选区把「项目」「环境」与「连接协议」放在一起；协议支持全部协议以及 TCP、MySQL、MongoDB、SSH、SFTP、HTTP、HTTPS、SQL Server、Redis、RabbitMQ、PostgreSQL 全部 11 种目标类型。筛选会同时隐藏不匹配的网关、目标、账号和连线；切换筛选不会修改绑定或布局，切回「全部协议」即可恢复完整视图。
|
||
- 修改绑定时，只能拖动或点击网关账号行，再选择目标账号行。目标账号显示可选账号备注和用户名；备注为空时回退到用户名或“未填写备注”。网关服务卡片和目标服务卡片都只用于展示，不能绕过账号端点直接关联。Redis、MongoDB 的空账号列表显示「无认证账号」，TCP 显示「空账号」；这些 UI 端点的账号 ID 都是空字符串，保存时沿用既有无账号格式，不创建虚构账号。移动卡片顶部只改变布局。运行中保存连线后监听保持运行，该网关的现有客户端连接会断开，客户端重连后使用新目标；保存失败则保留连接。原有协议、账号、权限校验以及测试、启动、停止、断开和维护目标操作继续生效。
|
||
|
||
节点位置和视角按当前项目、环境范围存入本浏览器的 localStorage，刷新或切回该范围后恢复；只保存资源 ID 和坐标，不保存服务配置或凭据。不可用或损坏的浏览器存储会回退到默认布局。清除浏览器数据会清除布局。
|
||
|
||
## 实现范围与兼容性
|
||
|
||
`web/src/Connections.vue` 负责卡片、真实端点测量、SVG 连线和全屏；`composables/useConnectionCanvas.ts` 管理交互及本地偏好；`domain/connectionCanvas.ts` 提供布局和坐标计算；`App.vue` 传入项目/环境范围。界面把可操作入口收窄为账号端点，但未修改后端接口、数据库结构及已有服务数据，无迁移步骤。
|
||
|
||
## 验证（2026-09-28）
|
||
|
||
- `vue-tsc --noEmit -p web/tsconfig.json` 通过。
|
||
- `node web/tests/connection-canvas.test.mjs` 的 8 项测试通过，覆盖 11 种协议筛选与排序、布局、缩放锚点、小屏适配、存储清洗、范围隔离、首次测量/视口自适应和拖动清理；使用内存节点与事件 fixture，不连接真实服务。
|
||
- Playwright 从 `web` 配置成功发现 60 个文件中的 138 项测试；`connection-canvas.spec.ts` 逐项检查全部协议下拉选项，并覆盖 MySQL、RabbitMQ、全部协议三种可见状态及账号连线。当前环境禁止创建 esbuild 子进程（`spawn EPERM`），`npm.cmd --prefix web run build` 在 Vite 阶段失败，无法生成新的嵌入式二进制并执行浏览器回归；配置夹具不代表真实服务验证。
|
||
|
||
## 协议筛选（2026-09-28）
|
||
|
||
原因：拖拽连线页面在项目中同时存在多种协议时，节点和连线过多，难以快速定位同协议的网关与目标。
|
||
|
||
结果与范围：新增包含全部协议及 11 种目标类型的下拉筛选。项目和环境继续使用 `App.vue` 的共享工作区筛选；筛选后的网关和目标按统一协议顺序排列，同协议再按名称和 ID 排列。协议筛选只改变当前页面的节点、账号和 SVG 连线可见性，选择、拖拽、断开、测试、启动、停止和目标维护仍使用原有配置与接口；筛选状态不写入后端，已有拖拽位置、布局存储键和服务数据不变，无迁移要求。新增控件文案通过中文、英文、日文字典提供。
|
||
|
||
验证：`connection-canvas.test.mjs` 的 8 项测试通过，覆盖 11 种筛选值及协议排序；Playwright 配置成功发现相关用例，夹具逐项检查下拉选项，并覆盖 MySQL、RabbitMQ 和全部协议三种可见状态。因上述 Vite `spawn EPERM` 限制未实际执行浏览器用例。测试只使用隔离配置夹具，不连接真实目标服务。
|
||
|
||
## 网关账号到目标账号的一对一关联（2026-09-28）
|
||
|
||
原因：网关或目标服务整卡关联会隐式选择一端或两端的账号，多账号场景可能覆盖其他账号映射；无认证目标和无账号 TCP 又没有可拖放端点，导致不同协议的操作语义不一致。
|
||
|
||
结果与范围：网关和目标服务卡片均为展示节点，点击或拖放必须从一个网关账号端点落到一个目标账号端点，每次只更新所选网关账号。Redis、MongoDB 的空账号列表生成 UI 专用「无认证账号」端点，TCP 生成「空账号」端点；两端均提交空账号 ID，后端继续使用既有顶层字段保存无账号映射。真实账号、账号禁用校验、协议匹配和映射冲突校验保持不变。没有数据库或配置迁移。
|
||
|
||
验证：补充画布 Playwright 配置夹具，逐一切换 11 种协议确认网关编辑器没有服务级关联入口，并覆盖真实账号逐条映射、MongoDB/Redis 无认证端点、TCP 空账号端点、两侧整卡不可关联以及空账号 ID 持久化；测试使用隔离配置，不连接真实服务。
|