6.8 KiB
6.8 KiB
Area
- 初始添加时，默认宽300px，高250px。位置相对父容器水平居中，垂直居中。
- 最大化时，填充满父容器。
- 还原时，恢复到最大化前的位置和大小。
- 关闭时，从父容器中移除。同时将内容区的Panel移除。
- 拖拽时，允许在父容器内移动，不允许超出父容器边界。
- 允许拖动边框，改变Area的大小。
- 当内容区只包含一个Panel时，显示Area的标题栏。
- 当内容区只包含一个Panel时，拖动Panel标题栏就相当于拖动Area。
- 当内容区只包含一个Panel时，拖动TabPage的页标签就相当于拖动Area的标题栏，从而改变Area的位置。（已实现）
- 当内容区只包含一个Panel时，单击Panel的最大化按钮，就相当于单击Area的最大化按钮同时最大化Panel。
- 当内容区只包含一个Panel时，最大化Area时，Panel也会最大化。
TabPage
- 初始添加时，默认宽300px，高250px。位置相对父容器水平居中，垂直居中。
- 背景颜色为#5D6B99
- 当TabPage的页标签被选中时，背景颜色为#F5CC84，文字颜色为#000000。
- 当TabPage的页标签未被选中时，背景颜色与Area的背景颜色相同，文字颜色为#FFFFFF。
- 当TabPage的页标签被选中时，激活的页标签不显示关闭按钮。
- 当TabPage的页标签被选中时，鼠标显示为移动，否则显示为手型。
- TabPage的页标签可以定义在上、右、下、左四个边缘显示，通过对外提供的属性设置。
Panel
- 填充满父容器。
- 最大化时，最大化图标变成还原图标。
添加浮动面板
- 首先添加一个Area。使用Area的初始设置。
- 再向Area添加一个TabPage。TabPage的初始设置为填充满父容器。
- 再向TabPage添加一个Panel。Panel的初始设置为填充满父容器。
激活组件规则
停靠规则
- 当一个Panel被拖动时，显示停靠指示器。
- 当拖动Panel到指示器时，显示停靠区。
- 当主区域内没有其他Area时，隐藏外部边缘指示器、中心区域容器，只显示中心指示器。
- 当将源Area拖动到中心指示器时 4.1. Area的merge行为只接受一个Area参数. 4.1. 如果目标Area内容区为空，则将源Area内容区的子组件添加到目标Area内容区。这个源Area保存到DockLayout的的隐藏列表中。 4.2. 如果目标Area内容区已经包含一个TabPage，则将源Area的TabPage组件的每个标签页添加到目标Area的TabPage中。这个源Area和源Area的TabPage组件保存到DockLayout的的隐藏列表中。
- 当将源Area拖动到外部边缘指示器时 ✅ 已完成
核心功能实现：
- ✅ 外部边缘停靠检测和执行逻辑
- ✅ 并排布局创建（createSideBySideLayout函数）
- ✅ ResizeBar集成和事件处理
5.1. 如果主区域内只有一个Area(目标区域)，则压缩目标Area的空间，源区域和目标区域并排放置在主区域内。
- ✅ 实现压缩目标Area空间的逻辑（已完成）
- ✅ 设置源Area和目标Area的并排布局（已完成）
- ✅ 在并排的Area之间添加ResizeBar组件以支持拖动调整大小
- ✅ ResizeBar的方向根据停靠方向动态设置：
- 左右停靠：使用水平ResizeBar（垂直分割线）
- 上下停靠：使用垂直ResizeBar（水平分割线）
- ✅ 确保ResizeBar支持最小/最大尺寸限制
5.2. 如果主区域内没有Area，则从隐藏列表中取出Area，如果隐藏列表中没有Area，则创建一个Area，将主区域内的组件添加到Area中作为目标Area。 压缩目标Area的空间，源区域和目标区域并排放置在主区域内。
- ✅ 检查隐藏列表是否有可用Area
- ✅ 如果没有隐藏Area，创建新的Area
- ✅ 将主区域内的组件移动到新创建的Area中作为目标Area
- ✅ 自动迁移tabPages和receivedContent
- ✅ 清空主区域内容为并排布局做准备
- ✅ 创建默认tabPage当主区域为空时
- ✅ 执行并排放置逻辑（复用5.1的实现）
- ✅ 添加ResizeBar支持拖动调整
技术特性： 5.3. 并排停靠后的ResizeBar集成
- ✅ 在并排的Area之间动态插入ResizeBar组件
- ✅ ResizeBar的事件处理：
- resize事件：实时调整并排Area的尺寸比例
- resizeStart/resizeEnd事件：处理调整开始/结束状态
- ✅ 保持Area的最小尺寸限制（避免调整过小无法使用）
- ✅ 调整后更新Area的ratio属性以保持布局持久化
- ✅ 支持双向调整：拖动ResizeBar可以同时影响两个Area的大小
5.4. ResizeBar的样式和交互优化
- ✅ ResizeBar的显示条件：仅在并排布局中存在时显示
- ✅ 鼠标悬停效果：高亮显示ResizeBar指示器
- ✅ 拖动时的视觉反馈：实时显示调整效果
- ✅ 确保ResizeBar不会影响Area的拖拽和停靠功能
ResizeBar集成技术要求
-
ResizeBar组件依赖
- 确保ResizeBar.vue组件已正确导入和使用
- ResizeBar支持水平和垂直两种方向
- 提供resize、resizeStart、resizeEnd事件接口
-
布局管理
- 并排布局时，自动在两个Area之间插入ResizeBar
- ResizeBar的位置计算：居中放置在两个Area的分界线上
- ResizeBar的层级管理：确保在Area之上但在停靠指示器之下
-
事件处理
- ResizeBar的resize事件触发时，重新计算并排Area的尺寸比例
- 保持源Area和目标Area的比例总和为1
- 调整过程中实时更新Area的width、height或ratio属性
-
用户体验优化
- ResizeBar的视觉反馈：悬停时高亮，拖动时变色
- 键盘支持：方向键微调尺寸（可选功能）
- 触摸设备支持：移动端拖动调整（可选功能）
测试验证点
-
基本并排功能
- 拖动源Area到边缘指示器时，目标Area被正确压缩
- 两个Area能够并排显示在主区域内
- 比例分配符合预期（默认50%:50%）
-
ResizeBar功能
- 并排布局时正确显示ResizeBar
- 拖动ResizeBar能够调整两个Area的尺寸
- 调整后比例保持正确，无重叠或间隙
- 拖动过程中有适当的视觉反馈
-
边界情况处理
- 调整到最小尺寸时的处理
- 快速连续拖动的稳定性
- 窗口大小变化时的布局保持
-
与现有功能的兼容性
- 不影响现有的拖拽停靠功能
- 不影响Panel的最大化/还原功能
- 不影响TabPage的切换和关闭功能
浮动面板关闭逻辑
1、从floatingAreas数组中根据areaId找到目标Area 2、遍历Area的 children 数组，查找类型为 'TabPage' 的子组件 3、从TabPage的children.items中获取Panel数组 4、如果目标Area只包含一个TabPage,TabPage只有一个Panel，则关闭Area.