Behavior model
三种选择方式，共享一个焦点
- 独立单选 / 表头全选
每一行互不干涉；表头复选框控制当前页面的全部数据。 - 选到这里
仅在未选中的目标行上显示，从智能起点预览范围，点击后一次选中。 - Shift 连选
以上一次仍选中的行作为起点，补齐两行之间的完整区间。
Table interaction / 01
选择，从一行
延伸到这里。
一个可直接操作的表格选择器。用最少的动作完成独立勾选、Shift 连选和智能范围选择，并在提交前看见即将发生的变化。下方同时提供完整的交互规则、起点算法和事件隔离说明。
Interactive prototype
项目数据
0 行已选
| 项目名称 | 负责人 | 更新时间 | 状态 |
|---|
悬浮或聚焦未选中的行，可用 选到这里 预览范围Shift + 点击复选框，可快速连选
Interaction specification
详细交互文档
这份文档把页面上的每一个动作拆成可执行规则，既用于产品确认，也方便后续接入真实数据表格时作为实现依据。
基础勾选与计数
- 独立单选：点击任意行复选框，只切换当前行，不影响其他行。
- 表头全选：点击表头复选框，选中或取消当前页面全部数据行。
- 半选状态：只选中部分行时，表头复选框显示 indeterminate 状态。
- 实时计数：右上角“行已选”数量随每一次变化立即更新。
“选到这里”智能范围
鼠标悬浮未选中的目标行时，复选框右侧出现按钮。已选中的行不会显示“选到这里”。悬浮按钮本身时，页面实时高亮起点和目标行之间的完整区间。
点击按钮 = 将 [min(起点, 目标), max(起点, 目标)] 全部加入选中集合移出按钮或完成点击后，高亮预览清除；已完成的选中结果保留。
起点行确定算法
- 焦点优先：优先使用上一次勾选且仍处于选中状态的行。
- 最近已选：若焦点行已取消，按目标行距离计算，使用最近的已选行。
- 默认兜底：当前完全没有选中行时，固定使用第 1 行。
Shift 快捷键连选
用户先勾选一行，再按住 Shift 点击另一行的复选框，系统将两行之间的所有数据加入选中集合。
| 操作 | 结果 |
|---|---|
| 先选第 3 行 | 起点记录为第 3 行 |
| Shift + 点击第 8 行 | 第 3 至第 8 行全部选中 |
事件隔离、视觉对齐与验收标准
- 事件穿透防护：“选到这里”默认使用
pointer-events: none，不可见时不拦截复选框；按钮出现并可交互时才开启pointer-events: auto。 - 物理安全间距：按钮采用绝对逻辑上的复选框右侧布局，与复选框保持独立点击区域。
- 表头对齐：表头复选框与数据行复选框共享同一个
.check-wrap对齐结构，保证纵向重合。 - 键盘可用：所有复选框和按钮均可通过 Tab 聚焦，并提供可读的 aria-label。
- 验收标准：每次选择后计数正确；已选行悬浮时不显示“选到这里”；预览范围连续；清除预览不清除已选结果；移动端表格可横向滚动。