# 拖拽手柄浮动定位修复

## 问题描述

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`

## 测试建议

1. 验证左右侧边栏拖拽功能正常
2. 检查中间区域宽度计算是否正确
3. 确认hover效果显示正常
4. 测试不同屏幕尺寸下的表现