feat(web): 用紧凑卡片替换选股表格并精简资金雷达列

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-01 14:57:27 +08:00
parent 4b8a7bd484
commit c944b219d9
12 changed files with 281 additions and 293 deletions
@@ -0,0 +1,27 @@
+# 优化选股列表与资金雷达看板布局
+
+## Goal
+
+提升选股结果和资金雷达的浏览密度与可读性，让用户在同一屏看到更多条目，并减少不必要的辅助指标占用。
+
+## Background and confirmed facts
+
+当前选股结果在桌面端由 `features/selection/components/signal-table.tsx` 以 `<table>` 展示，移动端另有 `signal-record-list.tsx` 卡片列表；工作台同时挂载两者并通过断点切换。资金雷达页面的 `RadarTable` 表头和行包含“排名百分位、样本、资金覆盖率、质量”等列，行使用较大的垂直 padding。
+
+## Requirements
+
+1. 选股结果在所有屏幕尺寸统一使用可滚动列表，不再渲染 table。每个股票条目以紧凑卡片展示股票名称/代码、信号标签、图形评分、J 值和收盘价，并保留点击选中、键盘可操作和详情展开能力。列表容器应继续支持内部滚动和空结果提示，分页与筛选行为保持不变。
+2. 资金雷达看板保留核心排名、板块、指标值、排名百分位和样本信息，移除“资金覆盖率”和“质量”两列及其单元格内容；表头和数据行改为更紧凑的垂直间距，在不改变滚动加载、错误/空数据状态和排名变化视图的前提下提升可见行数。
+3. 现有筛选、排序、加载更多和选中股票详情的数据契约不变；仅调整展示层结构和样式。
+
+## Acceptance Criteria
+
+- [ ] 选股工作台 DOM 中不再出现 `role="table"`/`<table>`，桌面和移动宽度均可看到滚动卡片列表；每张卡片展示股票名称、代码、至少一个信号标签（有信号时）、评分、J 值和收盘价。
+- [ ] 选股卡片点击或键盘 Enter/Space 可选中股票，详情面板仍显示当前选中项；“查看详情/收起详情”可展开信号细节。
+- [ ] 资金雷达表头不再包含“资金覆盖率”和“质量”，对应行内容也不再渲染；“排名百分位”和“样本”仍可见。
+- [ ] 资金雷达数据行垂直间距小于当前实现，滚动到底部仍能触发一次加载更多，加载中和失败重试提示保持可见。
+- [ ] `pnpm format:check`、`pnpm lint`、`pnpm typecheck`、`pnpm test` 在 `zhixing-web/` 下通过。
+
+## Out of scope
+
+不调整后端接口、指标计算、筛选/排序语义、分页参数、详情面板字段或全局主题 token。