背景
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 本身就是一棵递归的树形结构，容器节点有 direction（row/col）和 children，叶子节点渲染具体组件——这和 Splitpanes 的 Splitpanes + Pane 嵌套模式几乎是一一对应的。
如何集成
集成的思路非常直接：把原来用 flex 布局渲染容器节点的方式，替换为 Splitpanes 组件。
改之前，容器节点的渲染逻辑是这样的：
<!-- 改前：flex 布局，不可拖拽 --> <div v-if="node.children" class="window-split" :class="node.direction === 'col' ? 'split-col' : 'split-row'"> <WindowCanvas v-for="child in node.children" :node="child" /> </div>改之后，用 Splitpanes 替代：
<!-- 改后：Splitpanes，可拖拽 --> <Splitpanes v-if="node.children" :class="node.direction === 'col' ? 'split-col' : 'split-row'" @resized="(panes) => onResized(node.id, panes)"> <Pane v-for="child in node.children" :size="child.size * 100" :min-size="10"> <WindowCanvas :node="child" /> </Pane> </Splitpanes>核心改动就这么几行。@resized事件会在用户拖拽完成后触发，返回所有面板的新尺寸。我们把这个尺寸同步回 Pinia store 中的 WindowNode 树，就实现了布局的持久化和实时更新。
集成后的效果
集成 Splitpanes 之后，Workspace 的自定义布局发生了质的变化：
拖拽调整大小：用户可以在任意两个窗口之间的分割线上拖拽，实时调整比例。想要 K 线图大一些？往右拖一拖就行。
任意嵌套都支持：无论是两分屏、三分屏，还是四宫格，每一层分割线都可以独立拖拽。上层调整影响整体比例，内层调整影响局部比例，互不干扰。
最小尺寸保护：每个面板设置了最小 10% 的限制，防止用户把某个窗口拖到完全消失。
状态持久化：调整后的布局比例会自动保存到页面数据中，下次打开依然是调整后的状态。
零学习成本：用户不需要学习任何新操作，拖拽分割线是直觉性的交互，上手即用。
总结
Splitpanes 的集成解决了 FuturesDesk 自定义布局中长期存在的"不能调大小"的问题。一个轻量级的组件库，几行代码的改动，就让 Workspace 从一个"能用"的布局编辑器变成了"好用"的可视化工作台。
在技术选型上，这次实践再次验证了一个原则：不要重复造轮子。成熟的社区方案经过大量用户验证，稳定性、兼容性和交互细节都比自己实现要好得多。与其花时间手写拖拽逻辑，不如把精力放在更有价值的业务功能上。
接下来，我们计划基于这个可拖拽的布局系统，进一步实现副屏功能——让用户把某个窗口拖拽或弹出到另一个显示器上。这样，FuturesDesk 才能真正成为一个多屏协作的量价分析平台。
