### Area 
 1. 初始添加时，默认宽300px，高250px。位置相对父容器水平居中，垂直居中。 
 2. 最大化时，填充满父容器。 
 3. 还原时，恢复到最大化前的位置和大小。 
 4. 关闭时，从父容器中移除。同时将内容区的Panel移除。 
 5. 拖拽时，允许在父容器内移动，不允许超出父容器边界。 
 6. 允许拖动边框，改变Area的大小。 
 7. 当内容区只包含一个Panel时，显示Area的标题栏。 
 8. 当内容区只包含一个Panel时，拖动Panel标题栏就相当于拖动Area。 
 9. 当内容区只包含一个Panel时，拖动TabPage的页标签就相当于拖动Area的标题栏，从而改变Area的位置。（已实现）
 10. 当内容区只包含一个Panel时，单击Panel的最大化按钮，就相当于单击Area的最大化按钮同时最大化Panel。 
 11. 当内容区只包含一个Panel时，最大化Area时，Panel也会最大化。

### TabPage
1. 初始添加时，默认宽300px，高250px。位置相对父容器水平居中，垂直居中。
2. 背景颜色为#5D6B99
3. 当TabPage的页标签被选中时，背景颜色为#F5CC84，文字颜色为#000000。
4. 当TabPage的页标签未被选中时，背景颜色与Area的背景颜色相同，文字颜色为#FFFFFF。
5. 当TabPage的页标签被选中时，激活的页标签不显示关闭按钮。
6. 当TabPage的页标签被选中时，鼠标显示为移动，否则显示为手型。
7. TabPage的页标签可以定义在上、右、下、左四个边缘显示，通过对外提供的属性设置。

### Panel
1. 填充满父容器。
2. 最大化时，最大化图标变成还原图标。

### 添加浮动面板
1. 首先添加一个Area。使用Area的初始设置。
2. 再向Area添加一个TabPage。TabPage的初始设置为填充满父容器。
3. 再向TabPage添加一个Panel。Panel的初始设置为填充满父容器。

### 激活组件规则

### 停靠规则
1. 当一个Panel被拖动时，显示停靠指示器。
2. 当拖动Panel到指示器时，显示停靠区。
3. 当主区域内没有其他Area时，隐藏外部边缘指示器、中心区域容器，只显示中心指示器。
4. 当将源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的的隐藏列表中。
5. 当将源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集成技术要求
1. ResizeBar组件依赖
   - 确保ResizeBar.vue组件已正确导入和使用
   - ResizeBar支持水平和垂直两种方向
   - 提供resize、resizeStart、resizeEnd事件接口

2. 布局管理
   - 并排布局时，自动在两个Area之间插入ResizeBar
   - ResizeBar的位置计算：居中放置在两个Area的分界线上
   - ResizeBar的层级管理：确保在Area之上但在停靠指示器之下

3. 事件处理
   - ResizeBar的resize事件触发时，重新计算并排Area的尺寸比例
   - 保持源Area和目标Area的比例总和为1
   - 调整过程中实时更新Area的width、height或ratio属性

4. 用户体验优化
   - ResizeBar的视觉反馈：悬停时高亮，拖动时变色
   - 键盘支持：方向键微调尺寸（可选功能）
   - 触摸设备支持：移动端拖动调整（可选功能）

### 测试验证点
1. 基本并排功能
   - 拖动源Area到边缘指示器时，目标Area被正确压缩
   - 两个Area能够并排显示在主区域内
   - 比例分配符合预期（默认50%:50%）

2. ResizeBar功能
   - 并排布局时正确显示ResizeBar
   - 拖动ResizeBar能够调整两个Area的尺寸
   - 调整后比例保持正确，无重叠或间隙
   - 拖动过程中有适当的视觉反馈

3. 边界情况处理
   - 调整到最小尺寸时的处理
   - 快速连续拖动的稳定性
   - 窗口大小变化时的布局保持

4. 与现有功能的兼容性
   - 不影响现有的拖拽停靠功能
   - 不影响Panel的最大化/还原功能
   - 不影响TabPage的切换和关闭功能

### 浮动面板关闭逻辑
1、从floatingAreas数组中根据areaId找到目标Area
2、遍历Area的 children 数组，查找类型为 'TabPage' 的子组件
3、从TabPage的children.items中获取Panel数组
4、如果目标Area只包含一个TabPage,TabPage只有一个Panel，则关闭Area.