yuxuanhui
70 lines
5.0 KiB
Markdown
70 lines
5.0 KiB
Markdown
# 收紧选股执行状态交互与页面布局
|
||
|
||
## Goal
|
||
|
||
让选股策略页面把“未完成评估”从主工作区移出，改成由执行状态触发的右侧抽屉；抽屉内用紧凑表格查看明细。同时收紧页面各模块的内外间距，让桌面工作台填满可用高度，移动端保持可操作性。
|
||
|
||
本任务只修改前端交互和布局，不新增或修改后端接口。现有 API 返回的 `SelectionResults.failures` 作为抽屉数据源，接口扩展留给后续业务需求迭代。
|
||
|
||
## Confirmed Facts
|
||
|
||
- 当前 [selection-results-page.tsx](zhixing-web/src/features/selection/pages/selection-results-page.tsx) 在 `ResultState` 下方直接渲染 `FailureList`，标题为“未完成评估”，每条记录是独立卡片（约第 458–491 行）。
|
||
- 当前 `ResultMetrics` 已展示“执行状态”，但它只是 Badge，不承担交互（约第 290–315 行）。
|
||
- 当前选股结果工作台使用 `min-h-[420px] shrink-0` 包裹，导致桌面端数据面板不能填满页面剩余高度（约第 430–441 行）。
|
||
- 当前项目已有基于 Base UI Dialog 的可访问弹层 primitive，可复用其焦点管理、Escape 和遮罩行为；尚无 Drawer/Sheet primitive。
|
||
- 当前 `SelectionResults` 已包含 `failures`，字段为股票代码、名称、状态和原因；本任务不需要后端改契约。
|
||
- 当前分页、筛选和主从详情已经存在，本任务保留其行为。
|
||
|
||
## Requirements
|
||
|
||
### R1. 执行状态抽屉
|
||
|
||
- 主页面不再直接渲染“未完成评估”卡片或明细列表。
|
||
- “执行状态”成为可操作入口；点击后从右侧打开执行状态抽屉，并把当前结果的未完成评估列表传入抽屉。
|
||
- 抽屉标题和说明要明确表达当前策略、目标交易日、执行状态及未完成数量。
|
||
- 桌面端抽屉宽度固定为 `600px`；视口小于该宽度时退化为不产生水平溢出的全宽/近全宽布局。
|
||
- 抽屉支持关闭按钮、遮罩点击、Escape 和焦点返回；打开后焦点进入抽屉。
|
||
- 没有未完成评估时仍可查看执行状态，抽屉显示空表状态，不创建无意义的空卡片。
|
||
|
||
### R2. 未完成评估表格
|
||
|
||
- 抽屉中的明细必须使用语义化 `table` 组件，不使用逐条卡片替代。
|
||
- 表格至少展示：股票名称、股票代码、评估状态、失败原因。
|
||
- 表头、单元格和行间距使用紧凑密度；长原因可换行，不撑破抽屉宽度。
|
||
- 表格提供 caption/可访问名称；无数据时显示可读的空状态。
|
||
- 表格属于 `selection` feature，不把策略字段或业务格式化下沉到 `shared/ui`。
|
||
|
||
### R3. 页面紧凑布局
|
||
|
||
- 收紧 `PageLayout` 的页面 gutter、操作区/指标区内边距和纵向间距；页面内容在桌面端尽量使用主区域宽度。
|
||
- 收紧选股页执行工具栏、指标区、筛选栏、详情面板、分页和各状态卡的 padding/margin/gap。
|
||
- 修复 bounded workspace 的连续高度链：操作区、指标区、筛选栏、分页不参与数据滚动，主表格数据区占满剩余高度并独立滚动。
|
||
- 保留移动端至少 `44px` 的主要触控命中区域；移动端改为自然页面滚动，不引入嵌套水平滚动。
|
||
- 不改变现有路由、筛选 URL 状态、分页行为、策略执行/轮询行为和主从选中行为。
|
||
|
||
### R4. 页面状态边界
|
||
|
||
- 请求加载、请求错误、无结果和执行失败等请求级状态仍可在主页面就地表达。
|
||
- 仅将“未完成评估”的结果明细从主页面迁移至抽屉，不把后端接口缺失伪装成前端数据。
|
||
|
||
## Out of Scope
|
||
|
||
- 不新增或修改 FastAPI endpoint、Pydantic response model、数据库表或策略执行逻辑。
|
||
- 不实现行情数据、同步任务、全局搜索、个股研究详情或新的置信度接口。
|
||
- 不改变 `SelectionResults` API 的字段含义，不为“信号置信度”虚构数据。
|
||
- 不重写原型 HTML 的交互状态；原型继续作为视觉基线，正式页面以本任务的紧凑布局为准。
|
||
|
||
## Acceptance Criteria
|
||
|
||
- [x] 有失败结果时，主页面不出现“未完成评估”明细卡片；执行状态入口可见且可操作。
|
||
- [x] 点击执行状态后，右侧打开宽度为 `600px` 的抽屉；抽屉内存在可访问的 `table`，并正确展示所有失败记录。
|
||
- [x] 抽屉可以通过关闭按钮、遮罩、Escape 关闭，关闭后焦点返回执行状态入口。
|
||
- [x] 无失败记录时，执行状态入口仍能打开抽屉，表格显示空状态。
|
||
- [x] 1440×900 桌面视口下，选股工作台的数据面板填满操作区/指标区后的剩余高度，分页固定在面板底部，只有数据行区域滚动。
|
||
- [x] 390×844 与 375×812 移动视口下无页面级水平溢出，底部导航不遮挡可滚动内容，主要控件命中区域不低于 `44px`。
|
||
- [x] 前端格式、lint、类型检查、单元测试和构建通过；浏览器验证覆盖抽屉交互、紧凑布局和桌面/移动视口。
|
||
|
||
## Open Questions
|
||
|
||
无。抽屉触发入口采用现有“执行状态”指标；本次不扩展后端接口。
|