展开本页目录
开始前准备什么
- 下载独立练习包，保留 starter、reference 和原始输入。
- 现代桌面浏览器；已附构建产物，修改源码需Node/npm。
- 使用Cursor原生功能需相应账号和可用额度；本题作者参考可在本地独立运行。
- 读10000条固定数据与目标ID
- 让Cursor保留稳定选择身份
- 启动固定行高虚拟列表
- 筛选、倒序再定位选中项
- 核对真实DOM挂载数量
- 测试空结果和对象移除
- 重开工程验证身份不漂移
starter、任务提示、具体输入、作者人工可运行参考与独立验证；不含账号/密钥/运行时数据库。
按本文环境运行，再对照原始输入和正反例。
1. 读10000条固定数据与目标ID
inputs/expected-ids.json 固定 10000 条记录与 item-08731，原始输入在 starter/items.json，reference/items.json 是参考副本。先查看目标的名称与 ID，再打开初始列表。
2. 让Cursor保留稳定选择身份
让 Cursor 按 TASK.md 使用稳定 ID 管理选择，Virtualizer 只负责可见范围；不要用当前数组下标保存勾选，也不要先挂载 10000 行再隐藏。
交给目标 AI 工具的任务提示
读取 starter/items.json，用 TanStack Virtual 实现固定行高虚拟列表。选择状态用 id 而非数组下标；支持关键词、排序、定位选中项。输出 DOM 行计数面板及浏览器测试，不能把 10000 行全渲染后仅 CSS 隐藏。3. 启动固定行高虚拟列表
直接启动 reference 静态目录；源码在 src/app.tsx，需修改时先 npm ci，再 npm run build。固定行高 48px，滚动容器高 600px。
4. 筛选、倒序再定位选中项
筛选 item-08731，勾选该条并切换倒序；选中摘要仍应是同一 ID。清空筛选后点“定位选中项”，实际目标应滚入视口且仍勾选。
5. 核对真实DOM挂载数量
用浏览器统计 [data-row-id] 的真实节点数，应远小于 10000；滚动后 DOM 变成附近条目，不能把面板里的计数写成固定数字。
6. 测试空结果和对象移除
输入“不存在的物资”，结果应为空而选中对象身份仍保留。点移除选中样本后，应提示原对象已移除，不自动选中同下标其他记录。
7. 重开工程验证身份不漂移
从材料包重新运行，复核空结果、排序、定位和移除；固定窗口的 DOM 数只证明这次虚拟挂载，不能泛称所有设备绝不卡顿。
怎样确认已经完成
- 固定 600px 容器下 DOM 记录节点远少于 10000，且随滚动移动到目标 ID。
- 排序/筛选前后选中 ID 不变；定位按钮把真实目标行带入视口。
- 选中项不在结果内和空数据有可读状态，不能悄悄选中其他记录。
常见问题
Cursor 怎么做一万条数据的列表页面？
直接启动 reference 静态目录；源码在 src/app.tsx，需修改时先 npm ci，再 npm run build。固定行高 48px，滚动容器高 600px。
列表筛选后选中的行变了，怎么让 AI 修？
筛选 item-08731，勾选该条并切换倒序；选中摘要仍应是同一 ID。清空筛选后点“定位选中项”，实际目标应滚入视口且仍勾选。
哪些结果已执行，哪些仍需原生账号验证？
本地真实React/TanStack Virtual已验10000条数据的挂载、稳定ID选择、筛选倒序定位、空结果和移除状态；Cursor原生会话未执行。