Initial commit: restore project after Git corruption

web/src/apps/muse/base/table/DragSelectionExample.tsx

@@ -0,0 +1,115 @@
+// 使用拖拽多选功能的示例
+
+import React, { useState } from 'react';
+import { Table } from './Table';
+import { Mark } from '../mock/collection';
+import { TableColumn, RowSelection } from './types';
+
+const ExampleTable: React.FC = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  // 示例数据
+  const data: Mark[] = [
+    { 
+      id: '1', 
+      title: '示例标记 1', 
+      description: '这是第一个标记的描述',
+      data: { content: '这是第一个标记' },
+      createdAt: new Date(),
+      updatedAt: new Date()
+    },
+    { 
+      id: '2', 
+      title: '示例标记 2', 
+      description: '这是第二个标记的描述',
+      data: { content: '这是第二个标记' },
+      createdAt: new Date(),
+      updatedAt: new Date()
+    },
+    { 
+      id: '3', 
+      title: '示例标记 3', 
+      description: '这是第三个标记的描述',
+      data: { content: '这是第三个标记' },
+      createdAt: new Date(),
+      updatedAt: new Date()
+    },
+    // ... 更多数据
+  ];
+
+  // 表格列配置
+  const columns: TableColumn<Mark>[] = [
+    {
+      key: 'title',
+      title: '标题',
+      dataIndex: 'title',
+      width: 200,
+      sortable: true,
+    },
+    {
+      key: 'description',
+      title: '描述',
+      dataIndex: 'description',
+      width: 300,
+    },
+    {
+      key: 'createdAt',
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      width: 180,
+      render: (value: Date) => value.toLocaleString(),
+    },
+  ];
+
+  // 行选择配置，启用拖拽多选
+  const rowSelection: RowSelection<Mark> = {
+    type: 'checkbox',
+    selectedRowKeys,
+    onChange: (selectedRowKeys: React.Key[], selectedRows: Mark[]) => {
+      console.log('选中的行键:', selectedRowKeys);
+      console.log('选中的行数据:', selectedRows);
+      setSelectedRowKeys(selectedRowKeys);
+    },
+    dragSelection: {
+      enabled: true, // 启用拖拽多选
+      multi: true,   // 支持多选
+      onDragStart: (startRowIndex: number) => {
+        console.log('开始拖拽选择，起始行索引:', startRowIndex);
+      },
+      onDragEnd: (selectedRows: Mark[]) => {
+        console.log('拖拽选择结束，选中的行:', selectedRows);
+      },
+    },
+  };
+
+  return (
+    <div style={{ height: '600px', padding: '20px' }}>
+      <h2>表格拖拽多选示例</h2>
+      <p>
+        <strong>使用说明：</strong>
+        <br />
+        • 单击复选框进行单个选择
+        <br />
+        • 在表格行上拖拽可以选择多行（避开复选框和操作按钮）
+        <br />
+        • 按住 Ctrl/Cmd 键 + 拖拽可以追加选择
+        <br />
+        • 按住 Shift 键 + 点击复选框可以进行范围选择
+        <br />
+        • 按 Ctrl/Cmd + A 可以全选
+        <br />
+        • 按 Escape 键可以取消选择或取消拖拽操作
+      </p>
+      
+      <Table
+        data={data}
+        columns={columns}
+        rowSelection={rowSelection}
+        virtualScroll={{ rowHeight: 48 }}
+        loading={false}
+      />
+    </div>
+  );
+};
+
+export default ExampleTable;