You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.6 KiB
1.6 KiB
拖拽手柄浮动定位修复
问题描述
AppLayout组件中的左右侧边栏拖拽手柄占用了物理布局空间（w-1 flex-shrink-0），导致中间区域的可用宽度被压缩。
修复方案
采用绝对定位覆盖方案，将拖拽手柄改为浮动定位，不占用布局空间。
具体修改
1. 主体区域容器
- 添加
relative定位，为拖拽手柄提供定位基准 - 调整子元素顺序，将拖拽手柄移到最后
2. 左侧拖拽手柄
- 修改前：
w-1 flex-shrink-0占用1个单位宽度 - 修改后：
absolute定位，w-2提供更大交互区域 - 定位：
left: leftSidebarWidth - 4覆盖在侧边栏右边缘
3. 右侧拖拽手柄
- 修改前：
w-1 flex-shrink-0占用1个单位宽度 - 修改后：
absolute定位，w-2提供更大交互区域 - 定位：
right: rightSidebarWidth - 4覆盖在侧边栏左边缘
4. 样式优化
- 修复Tailwind警告：
flex-shrink-0→shrink-0 - 拖拽手柄内部使用
left-1/2 -translate-x-1/2居中对齐 - 保持原有的hover效果和视觉反馈
修复效果
- ✅ 拖拽手柄不再占用布局空间
- ✅ 中间区域获得完整可用宽度
- ✅ 保持原有拖拽调整功能
- ✅ 修复Tailwind类名警告
- ✅ 提供更大的交互区域（2个单位宽度）
文件修改
client/src/components/layout/AppLayout.tsx
测试建议
- 验证左右侧边栏拖拽功能正常
- 检查中间区域宽度计算是否正确
- 确认hover效果显示正常
- 测试不同屏幕尺寸下的表现