update

web/src/apps/muse/base/table/DragSelection.md

@@ -0,0 +1,172 @@
+# 表格拖拽多选功能
+
+## 功能概述
+
+表格组件现在支持拖拽多选功能，用户可以通过鼠标拖拽来快速选择多行数据，提升批量操作的效率。
+
+## 功能特性
+
+### ✅ 已实现的功能
+
+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. 移动端设备可能需要额外的触摸事件处理
+
+## 未来规划
+
+- [ ] 触摸设备支持
+- [ ] 自定义拖拽选择框样式
+- [ ] 更多键盘快捷键
+- [ ] 拖拽选择动画效果
+- [ ] 选择统计和操作面板