FuturesDesk 集成 Splitpanes：让自定义布局真正可拖拽调整大小

背景FuturesDesk 的自定义页面Workspace允许用户通过右键菜单自由插入窗口和内容组件搭建属于自己的交易工作台。这个功能上线后反馈不错但很快暴露了一个明显的问题窗口之间的大小是固定的。举个例子用户想要一个大的 K 线图搭配小的盘口表但在当前版本中所有窗口平分空间无法调整。用户想要突出某个图表只能重新切分窗口但切分后的比例仍然是均等的。这个问题直接影响了自定义页面的实用性。一个不能调整大小的布局编辑器就像一个不能调节明暗的台灯——能用但用着不够顺手。为什么需要可拖拽的分割面板交易软件的界面布局有一个很明显的特征主次分明。用户通常会把主要精力放在 K 线图或分时图上盘口、订单流、报价列表等辅助信息只需要占用较小的空间。这种主大辅小的布局需求靠均分窗口是无法满足的。要解决这个问题最直观的方式就是让用户能够拖拽分割线来调整窗口大小。就像 VS Code 的资源管理器面板或者 Chrome DevTools 的各个面板一样拖一拖就能调整比例自然、直观、零学习成本。方案调研在决定集成之前我们调研了几个方案方案一自己实现拖拽手写拖拽逻辑听起来简单但实际上需要考虑的细节很多鼠标事件处理、边界限制、最小尺寸、双击还原、触摸支持、嵌套布局兼容等等。自己实现一个健壮的拖拽分割面板工作量不小而且测试成本高。方案二golden-layout这是一个功能非常强大的窗口布局管理器支持拖拽、浮窗、标签页等高级功能。但它的体积较大且对 Vue 3 的支持不够原生集成成本较高。方案三splitpanes最终我们选择了 splitpanes。Splitpanes 是什么Splitpanes 是一个轻量级的 Vue 3 分割面板组件库由开发者 Antoni Andre 维护。它的核心功能非常简单将容器分割成多个可拖拽调整大小的面板。它的特点可以用几句话概括原生支持 Vue 3无需额外的适配层支持水平和垂直分割满足各种布局需求支持嵌套可以把面板继续切分形成复杂的布局树触摸设备友好在触屏上也能拖拽体积小巧没有外部依赖这些特点恰好与 FuturesDesk 的 Workspace 布局系统高度契合。我们的 WindowNode 本身就是一棵递归的树形结构容器节点有 directionrow/col和 children叶子节点渲染具体组件——这和 Splitpanes 的 Splitpanes Pane 嵌套模式几乎是一一对应的。如何集成集成的思路非常直接把原来用 flex 布局渲染容器节点的方式替换为 Splitpanes 组件。改之前容器节点的渲染逻辑是这样的!-- 改前flex 布局不可拖拽 -- div v-ifnode.children classwindow-split :classnode.direction col ? split-col : split-row WindowCanvas v-forchild in node.children :nodechild / /div改之后用 Splitpanes 替代!-- 改后Splitpanes可拖拽 -- Splitpanes v-ifnode.children :classnode.direction col ? split-col : split-row resized(panes) onResized(node.id, panes) Pane v-forchild in node.children :sizechild.size * 100 :min-size10 WindowCanvas :nodechild / /Pane /Splitpanes核心改动就这么几行。resized事件会在用户拖拽完成后触发返回所有面板的新尺寸。我们把这个尺寸同步回 Pinia store 中的 WindowNode 树就实现了布局的持久化和实时更新。集成后的效果集成 Splitpanes 之后Workspace 的自定义布局发生了质的变化拖拽调整大小用户可以在任意两个窗口之间的分割线上拖拽实时调整比例。想要 K 线图大一些往右拖一拖就行。任意嵌套都支持无论是两分屏、三分屏还是四宫格每一层分割线都可以独立拖拽。上层调整影响整体比例内层调整影响局部比例互不干扰。最小尺寸保护每个面板设置了最小 10% 的限制防止用户把某个窗口拖到完全消失。状态持久化调整后的布局比例会自动保存到页面数据中下次打开依然是调整后的状态。零学习成本用户不需要学习任何新操作拖拽分割线是直觉性的交互上手即用。总结Splitpanes 的集成解决了 FuturesDesk 自定义布局中长期存在的不能调大小的问题。一个轻量级的组件库几行代码的改动就让 Workspace 从一个能用的布局编辑器变成了好用的可视化工作台。在技术选型上这次实践再次验证了一个原则不要重复造轮子。成熟的社区方案经过大量用户验证稳定性、兼容性和交互细节都比自己实现要好得多。与其花时间手写拖拽逻辑不如把精力放在更有价值的业务功能上。接下来我们计划基于这个可拖拽的布局系统进一步实现副屏功能——让用户把某个窗口拖拽或弹出到另一个显示器上。这样FuturesDesk 才能真正成为一个多屏协作的量价分析平台。