# 表格拖拽多选功能

## 功能概述

表格组件现在支持拖拽多选功能，用户可以通过鼠标拖拽来快速选择多行数据，提升批量操作的效率。

## 功能特性

### ✅ 已实现的功能

1. **基础拖拽选择**
   - 在表格行上拖拽可以选择多行
   - 实时显示选择框和选中状态
   - 拖拽结束后更新选中状态

2. **智能交互**
   - 避免在复选框和操作按钮区域启动拖拽
   - 设置最小拖拽距离阈值，避免意外触发
   - 拖拽过程中禁用文本选择

3. **键盘修饰键支持**
   - **Ctrl/Cmd + 拖拽**：追加选择模式（切换选中状态）
   - **Shift + 点击复选框**：范围选择模式
   - **Ctrl/Cmd + A**：全选
   - **Escape**：取消拖拽或清空选择

4. **虚拟滚动兼容**
   - 正确处理虚拟滚动的坐标转换
   - 考虑滚动位置的行索引计算

5. **视觉反馈**
   - 拖拽选择框的实时显示
   - 选中行的高亮效果
   - 拖拽过程中的样式变化
   - 用户操作提示

## 使用方法

### 基本配置

```typescript
import { Table } from './base/table/Table';
import { RowSelection } from './base/table/types';

const rowSelection: RowSelection<Mark> = {
  type: 'checkbox',
  selectedRowKeys,
  onChange: (selectedRowKeys, selectedRows) => {
    // 处理选择变化
    setSelectedRowKeys(selectedRowKeys);
  },
  dragSelection: {
    enabled: true, // 启用拖拽多选
    multi: true,   // 支持多选
    onDragStart: (startRowIndex) => {
      console.log('开始拖拽选择');
    },
    onDragEnd: (selectedRows) => {
      console.log('拖拽选择结束');
    },
  },
};

<Table
  data={data}
  columns={columns}
  rowSelection={rowSelection}
  // ... 其他属性
/>
```

### 配置选项

#### `DragSelectionConfig`

```typescript
interface DragSelectionConfig {
  enabled?: boolean; // 是否启用拖拽选择，默认为 true
  multi?: boolean; // 是否支持多选，默认为 true
  onDragStart?: (startRowIndex: number) => void; // 拖拽开始回调
  onDragEnd?: (selectedRows: Mark[]) => void; // 拖拽结束回调
}
```

### 用户操作指南

1. **基础拖拽选择**
   - 在表格行（非复选框/操作按钮区域）按下鼠标左键
   - 拖拽至目标行
   - 释放鼠标完成选择

2. **追加选择**
   - 按住 `Ctrl`（Windows/Linux）或 `Cmd`（Mac）键
   - 进行拖拽选择
   - 已选中的行会切换状态（选中变未选中，未选中变选中）

3. **范围选择**
   - 先点击一个复选框选中一行
   - 按住 `Shift` 键
   - 点击另一个复选框
   - 两行之间的所有行都会被选中

4. **键盘快捷键**
   - `Ctrl/Cmd + A`：全选所有行
   - `Escape`：取消当前拖拽操作或清空所有选择

## 技术实现

### 核心组件

1. **状态管理**
   - `DragSelectionState`：管理拖拽状态
   - 鼠标位置跟踪
   - 选择范围计算

2. **事件处理**
   - `handleMouseDown`：开始拖拽检测
   - `handleMouseMove`：拖拽过程处理
   - `handleMouseUp`：完成选择操作

3. **坐标转换**
   - 虚拟滚动坐标映射
   - 行索引计算
   - 碰撞检测算法

### 样式类名

- `.row-selected`：选中行样式
- `.row-drag-selected`：拖拽选中行样式
- `.drag-selection-box`：拖拽选择框样式
- `.drag-hint`：操作提示样式

## 性能优化

1. **事件防抖**
   - 设置拖拽距离阈值
   - 避免频繁状态更新

2. **虚拟滚动适配**
   - 只处理可视区域内的行
   - 优化大数据量场景

3. **内存管理**
   - 及时清理事件监听器
   - 合理的状态重置

## 兼容性

- ✅ 支持现有的复选框选择
- ✅ 兼容虚拟滚动
- ✅ 支持排序和筛选
- ✅ 响应式设计
- ✅ 键盘导航友好

## 示例代码

查看 `DragSelectionExample.tsx` 文件获取完整的使用示例。

## 注意事项

1. 拖拽选择不会在复选框和操作按钮区域启动
2. 需要设置合适的行高以确保拖拽体验
3. 大数据量时建议启用虚拟滚动
4. 移动端设备可能需要额外的触摸事件处理

## 未来规划

- [ ] 触摸设备支持
- [ ] 自定义拖拽选择框样式
- [ ] 更多键盘快捷键
- [ ] 拖拽选择动画效果
- [ ] 选择统计和操作面板