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,3 @@
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "前端质量门禁与测试规范"}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "组件可访问性与列表交互规范"}
+{"file": ".trellis/tasks/09-01-optimize-stock-list-radar/prd.md", "reason": "用户需求与验收标准"}
@@ -0,0 +1,19 @@
+# 技术设计
+
+## 边界与组件结构
+
+选股模块保留 `SelectionResultsWorkbench` 的筛选、分页、选中状态和详情面板结构，将当前桌面 `SignalTable` 与移动 `SignalRecordList` 的双实现收敛为一套响应式紧凑卡片列表。列表继续位于左侧结果区内部滚动；条目用语义化 `article` 和真实按钮承载选择、展开交互，不改变路由搜索参数或 API 类型。
+
+资金雷达继续使用语义化表格与现有无限滚动容器，只删除展示层中的资金覆盖率和质量表头/单元格，并同步空状态 `colSpan`。通过缩小表头和数据行的垂直 padding、减少板块名称与代码间距来提高密度，不改动返回数据类型或质量计算。
+
+## 数据流与兼容性
+
+两处改动均消费现有响应字段，不改变 query、路由和后端契约。选股卡片仍用 `getStockKey`、`getStockJValue`、`PatternScoreSummary`、`SignalDetails` 和现有 category 样式函数，确保内容与详情行为保持一致。资金雷达保留 `quality` 和 `moneyflow_coverage` 在 TypeScript 响应类型中，仅不展示，以避免形成不必要的接口破坏。
+
+## 取舍
+
+选股列表采用单一响应式组件，消除桌面/移动两套 DOM 和测试分叉；卡片通过横向信息区和较小间距兼顾密度与窄屏换行。资金雷达保留 table，因为用户仅要求缩减列和行高，表格仍最适合对齐排名数据。
+
+## 回滚
+
+改动局限于选股展示组件、工作台装配、资金雷达页面及对应测试；如出现视觉或交互回归，可逐文件回退，不涉及数据迁移。
@@ -0,0 +1,3 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "前端开发入口与检查清单"}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "组件、样式与可访问性规范"}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "测试与质量门禁，约束卡片列表与雷达表格的断言方式"}
@@ -0,0 +1,10 @@
+# 实施计划
+
+1. 将选股结果收敛为单一紧凑卡片列表，保留选中、键盘、展开详情、空状态与内部滚动。
+2. 更新工作台装配，移除 table 展示路径和重复组件引用，并按需要删除不再使用的文件。
+3. 更新选股页面测试，改为断言卡片列表结构、核心字段和交互，不再依赖 table 表头。
+4. 从资金雷达表格移除资金覆盖率与质量两列，修正 `colSpan` 并缩小表头、数据行间距。
+5. 更新资金雷达测试，明确断言精简列不存在而保留百分位和样本；保留无限滚动与排名变化回归覆盖。
+6. 在 `zhixing-web/` 运行目标 Vitest，然后运行 `pnpm format:check`、`pnpm lint`、`pnpm typecheck`、`pnpm test`；必要时运行 `pnpm build` 验证产物。
+
+风险点是选股卡片按钮嵌套和键盘行为、断点下滚动高度链，以及资金雷达 rank-change 模式的动态列数。实现时以语义结构和现有页面布局约束为准，出现回归时优先回滚对应组件的局部改动。
@@ -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。
@@ -0,0 +1,26 @@
+{
+  "id": "optimize-stock-list-radar",
+  "name": "optimize-stock-list-radar",
+  "title": "优化选股列表与资金雷达看板布局",
+  "description": "",
+  "status": "in_progress",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "codex",
+  "assignee": "codex",
+  "createdAt": "2026-09-01",
+  "completedAt": null,
+  "branch": null,
+  "base_branch": "main",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}