feat(selection): 重构选股结果筛选与状态入口

2026-08-10 14:50:56 +08:00
parent 78be0f53d4
commit 8d4f80f2f1
17 changed files with 1123 additions and 156 deletions
@@ -0,0 +1,5 @@
+{"file":".trellis/spec/frontend/index.md","reason":"检查前端改动是否仍遵守 feature/shared 边界、路由和同源 API 约束。"}
+{"file":".trellis/spec/frontend/component-guidelines.md","reason":"检查 Select、DatePicker、抽屉入口、语义控件和 Tailwind 组件组合。"}
+{"file":".trellis/spec/frontend/state-management.md","reason":"检查日期、URL search、抽屉局部状态与服务器结果的所有权。"}
+{"file":".trellis/spec/frontend/type-safety.md","reason":"检查 Base UI/DayPicker props、日期转换和 SelectionResults 类型边界。"}
+{"file":".trellis/spec/frontend/quality-guidelines.md","reason":"执行最终格式、lint、类型、测试、构建和审查门禁。"}
@@ -0,0 +1,93 @@
+# 选股结果页筛选与状态入口技术设计
+
+## 1. Boundaries
+
+本任务只修改 `zhixing-web` 前端：
+
+- `shared/ui` 提供基于 `@base-ui/react` 的通用 `Select`、`Popover`、`Calendar`、`DatePicker` 组件。
+- `features/selection` 负责选项、URL search 更新、目标日期字符串转换、结果状态和抽屉入口布局。
+- `SelectionResultsPage` 继续拥有服务器查询、执行/重执行状态和抽屉开关；`SelectionResultsWorkbench` 负责信号列表顶部的入口和筛选区。
+- `ExecutionStatusDrawer` 负责执行摘要和未完成评估的按需展示，不请求数据、不修改 URL。
+
+不改变后端 API、React Query query key、路由路径、`SelectionResults` 类型契约和策略执行流程。
+
+## 2. Component Shape
+
+```text
+SelectionResultsPage
+├─ PageLayout
+│  ├─ actions: ExecutionToolbar
+│  │  ├─ DatePicker
+│  │  ├─ Select (strategy)
+│  │  └─ Button (execute / rerun)
+│  └─ children: result states
+│     └─ SelectionResultsWorkbench
+│        ├─ signal-list header
+│        │  ├─ Input (search)
+│        │  ├─ Select (category)
+│        │  └─ Button (execution status)
+│        ├─ SignalTable / SignalRecordList
+│        └─ Pagination
+└─ ExecutionStatusDrawer
+   ├─ execution summary metrics
+   └─ IncompleteEvaluationTable
+```
+
+移除页面级 `ResultMetrics`，避免 `PageLayout.metrics` 形成中间常驻区域。执行状态按钮移动到 `SelectionResultsWorkbench` 的列表 header，页面通过 props 传入 `onOpenExecutionStatus`、`drawerOpen` 和 `triggerRef`，不把开关状态放入 Zustand。
+
+## 3. Shared UI Design
+
+### Select
+
+`shared/ui/select.tsx` 对 `@base-ui/react/select` 的 Root、Trigger、Value、Portal、Positioner、Popup、List、Item、ItemIndicator 和滚动箭头做样式封装。对外保留 Base UI props、`className` 和 `data-slot`，提供可组合的 `SelectGroup`、`SelectLabel`、`SelectSeparator` 等导出。Popup 使用 portal 和 positioner，确保列表不受页面 bounded workspace 的 `overflow` 影响；`data-highlighted`、`data-selected`、`data-disabled` 和 open/closed 状态提供明确反馈。
+
+### Popover / Calendar / DatePicker
+
+`DatePicker` 按官方 shadcn/ui Base UI Date Picker 的组合方式实现：`Popover` 负责定位和关闭行为，`Calendar` 负责单日选择。`Calendar` 基于 `react-day-picker`，使用项目 `Button`、`cn` 和现有主题 token；`DatePicker` 对外以通用 `Date | undefined` 传值，业务 feature 在边界处把它转换为 `YYYY-MM-DD`，避免 shared 层理解交易日概念。
+
+补充 `date-fns` 与 `react-day-picker` 为显式前端依赖。日期转换使用本地年月日构造/格式化，避免直接解析 ISO 日期造成时区前移或后移。
+
+## 4. Data Flow and State
+
+```text
+DatePicker<Date>
+  └─ SelectionResultsPage: Date ↔ YYYY-MM-DD
+       ├─ useSelectionResults(strategy, targetTradeDate, resultQuery)
+       └─ useTriggerSelectionRun({ target_trade_date })
+
+SelectionResultsPage
+  ├─ resultQuery ← route search (page/pageSize/search/category)
+  ├─ SelectionResultsWorkbench
+  │    ├─ Select(category) → navigate(search: { category, page: 1 })
+  │    └─ status button → setExecutionStatusDrawerOpen(true)
+  └─ ExecutionStatusDrawer(result)
+       ├─ result summary metrics
+       └─ result.failures
+```
+
+目标日期继续是页面局部状态；搜索、分类和分页继续是 TanStack Router search 状态。Select 不直接操作 URL，feature handler 负责转换和分页重置。抽屉只接收当前 `displayedResult`，切换日期或开始执行时关闭并清理已有局部执行状态。
+
+## 5. Layout and Accessibility
+
+- `PageLayout.metrics` 置空后，`PageLayout` 的 bounded workspace 只承载执行控件和结果区；结果列表继续沿用现有高度链和内部滚动边界。
+- Workbench header 在桌面端把搜索、分类和结果数量/执行状态按钮放在同一行，在移动端自然换行；所有主要按钮保留至少 `44px` 的移动触控高度。
+- 执行状态按钮使用真实 `Button`，提供 `aria-controls`、`aria-expanded`、`aria-haspopup="dialog"` 和包含状态/失败数的可访问名称。抽屉继续由 Dialog 管理焦点、Escape 和遮罩。
+- Select Trigger 使用真实 button；DatePicker Trigger 使用 Button，并提供 label/placeholder 和 `aria-label`。日历日期按钮使用 `react-day-picker` 的语义和键盘导航。
+
+## 6. Compatibility and Rollback
+
+- API 和路由协议不变，旧结果数据可直接驱动新布局；若新 shared primitive 样式有问题，可只回退控件接线而保留抽屉数据流。
+- 日期依赖只影响前端依赖和 bundle；若日期选择器有兼容问题，保留 `DatePicker` 对外接口并回退其内部实现，不改变页面与 API 的字符串边界。
+- 抽屉摘要与入口位置的回滚点分别位于 `execution-status-drawer.tsx` 和 `selection-results-workbench.tsx`，不会影响 query 或策略执行。
+
+## 7. Verification Strategy
+
+- 页面测试：无常驻 metrics、DatePicker 选择日期、strategy/category Select 更新、状态入口出现、抽屉摘要/失败表格/空状态、关闭焦点恢复。
+- shared UI 测试或页面行为测试：Select 的可见选项和键盘语义、DatePicker 的按钮和选中日期可见性。
+- 质量门禁：`pnpm format:check`、`pnpm lint`、`pnpm typecheck`、`pnpm test`、`pnpm build`。
+- 浏览器 mock：检查 1440×900、390×844 下筛选区域、信号列表、DatePicker/Select popup 和右侧抽屉不产生页面级水平溢出。
+
+## 8. References
+
+- shadcn/ui Base Select: https://ui.shadcn.com/docs/components/base/select
+- shadcn/ui Base Date Picker: https://ui.shadcn.com/docs/components/base/date-picker
@@ -0,0 +1,5 @@
+{"file":".trellis/spec/frontend/index.md","reason":"前端 feature/shared 边界、现有质量入口和 API/路由约束。"}
+{"file":".trellis/spec/frontend/component-guidelines.md","reason":"Select、DatePicker、Drawer、组合组件、Tailwind token 和可访问性交互规范。"}
+{"file":".trellis/spec/frontend/state-management.md","reason":"保留 URL search、页面局部日期/抽屉状态和 TanStack Query 的状态边界。"}
+{"file":".trellis/spec/frontend/type-safety.md","reason":"shared primitive props、日期值转换和现有 SelectionResults 类型的严格 TypeScript 约束。"}
+{"file":".trellis/spec/frontend/quality-guidelines.md","reason":"页面行为测试、可访问性审查和格式/lint/typecheck/test/build 质量门禁。"}
@@ -0,0 +1,75 @@
+# 选股结果页筛选与状态入口执行计划
+
+## Scope
+
+只修改 `zhixing-web` 前端和本任务规划/验证产物；不修改后端接口、数据库、策略计算或现有路由协议。
+
+## Ordered Checklist
+
+### 1. 开发前上下文
+
+- [x] 运行 `task.py start` 将任务切换为 `in_progress`。
+- [x] 读取 `prd.md`、`design.md`、前端规格及 shared 复用指南。
+- [x] 确认工作区没有用户现有改动，记录本任务实际改动文件。
+
+### 2. Shared UI 组件
+
+- [x] 新增 `shared/ui/select.tsx`，封装 Base UI Select 的触发器、列表、选项、滚动和状态样式。
+- [x] 新增 `shared/ui/popover.tsx`，封装 Base UI Popover 的 trigger、portal、positioner、popup 和关闭语义。
+- [x] 新增 `shared/ui/calendar.tsx`，基于 `react-day-picker` 和现有 Button/cn/token 提供单日选择基础能力。
+- [x] 新增 `shared/ui/date-picker.tsx`，组合 Popover + Calendar，支持受控 `Date | undefined`、禁用态、placeholder、label 语义和窄屏布局。
+- [x] 按实际依赖更新 `package.json` / `pnpm-lock.yaml`，只加入 Date Picker 所需的 `date-fns` / `react-day-picker`。
+
+### 3. 选股页面接线
+
+- [x] 将 `ExecutionToolbar` 的目标日期 Input 替换为 DatePicker，保持 `YYYY-MM-DD` 字符串边界和现有执行状态清理逻辑。
+- [x] 将策略原生 select 替换为 shared Select；将 `SelectionResultsWorkbench` 的分类原生 select 替换为 shared Select，保留 URL 更新和分页归一化。
+- [x] 从 `PageLayout` 移除 `metrics={resultMetrics}` 和页面级常驻 `ResultMetrics`。
+- [x] 将执行摘要指标放入 `ExecutionStatusDrawer`，并把执行状态按钮接到 `SelectionResultsWorkbench` 信号列表顶部；失败和无信号结果保留按需入口。
+- [x] 保留既有失败表格、空状态、主从信号选择、移动展开、分页、重执行确认和查询状态分支。
+
+### 4. 测试与验证
+
+- [x] 更新页面测试，覆盖 DatePicker 选中/清空日期、两个 Select 的可见值/回调、无常驻指标区、顶部状态按钮、抽屉摘要和焦点恢复。
+- [x] 通过页面行为覆盖 shared UI 的关键交互（Select 键盘/选择、DatePicker 弹层/选择），避免复制 shared primitive 实现逻辑新增重复测试。
+- [ ] 运行 `pnpm format:check`、`pnpm lint`、`pnpm typecheck`、`pnpm test`、`pnpm build`；其中完整格式检查仍被未改动的既有 `DESIGN.md` 阻断，其余门禁通过。
+- [x] 使用浏览器 mock 验证桌面/移动视口、Select/DatePicker popup、抽屉、Escape/焦点恢复和页面级水平溢出。
+- [x] 执行 `trellis-check`，修复质量门禁或规格偏差后重新验证。
+
+## Validation Commands
+
+在 `zhixing-web/` 下运行：
+
+```bash
+pnpm format:check
+pnpm lint
+pnpm typecheck
+pnpm test
+pnpm build
+```
+
+## Verification Record
+
+- `pnpm lint`：通过。
+- `pnpm typecheck`：通过。
+- `pnpm test`：通过，4 个测试文件、26 项测试。
+- `pnpm build`：通过；Vite 仅提示现有单 chunk 超过 500 kB。
+- 变更文件 `prettier --check`：通过；完整 `pnpm format:check` 仅因未改动的 `zhixing-web/DESIGN.md` 失败。
+- `git diff --check`：通过。
+- 浏览器 mock：桌面与 390×844 移动视口均验证；Select 点击/键盘选择、DatePicker 弹层与中文无障碍 labels、抽屉 Escape/焦点恢复、页面级水平溢出均通过。
+- `trellis-check`：通过，并修复 DatePicker 清空后日期被服务器结果回填的边界问题。
+
+## Risky Files and Rollback Points
+
+- `src/shared/ui/select.tsx`、`popover.tsx`、`calendar.tsx`、`date-picker.tsx`：新 shared primitive 和 Base UI/DayPicker API 兼容点；可独立回退并保留页面旧控件。
+- `package.json`、`pnpm-lock.yaml`：日期依赖变更；若安装/构建不兼容，回退依赖和四个 shared primitive。
+- `src/features/selection/pages/selection-results-page.tsx`：移除 metrics、接入日期选择器和抽屉状态；回退点不影响 API。
+- `src/features/selection/components/selection-results-workbench.tsx`：顶部筛选/状态入口和 Select 接线；回退时保留结果表、分页和详情面板。
+- `src/features/selection/components/execution-status-drawer.tsx`：执行摘要迁移；失败表格和 Dialog 生命周期应保持可回滚。
+
+## Review Gates Before Start
+
+- [ ] `prd.md` 已通过需求收敛：目标、范围、验收标准明确且无阻塞问题。
+- [ ] `design.md` 已确认 shared/feature 边界、日期字符串转换、抽屉数据流和回滚点。
+- [ ] `implement.jsonl` 与 `check.jsonl` 已填入真实前端规格上下文。
+- [ ] 已向用户展示最终规划摘要，并获得对该摘要的明确实施批准。
@@ -0,0 +1,56 @@
+# 迭代选股结果页筛选与状态入口
+
+## Goal
+
+让选股结果页把空间集中给筛选和信号结果：移除常驻的执行状态总览，将执行摘要改为信号列表顶部的按需入口，并通过右侧抽屉查看完整信息。同时把选股页使用的原生 `select` 和日期输入升级为项目 `shared/ui` 中基于 shadcn/ui Base UI 组合的可访问组件。
+
+## Confirmed Facts
+
+- [SelectionResultsPage](zhixing-web/src/features/selection/pages/selection-results-page.tsx) 当前通过 `PageLayout.metrics` 渲染常驻的 `ResultMetrics`，展示目标股票数、实际参与数、命中股票数、信号条数、数据覆盖率和执行状态（约第 126–136、305–355 行）。
+- 当前目标交易日控件仍是 `Input type="date"`，策略控件和信号分类筛选仍是原生 `<select>`（约第 247–274 行，以及 [SelectionResultsWorkbench](zhixing-web/src/features/selection/components/selection-results-workbench.tsx) 约第 95–120 行）。
+- 项目已有基于 `@base-ui/react` 的本地 `Button`、`Dialog`、`Input` 等封装，但尚无可复用的 `Select`、`Popover`、`Calendar` 或 `DatePicker` shared primitive。
+- `SelectionResultsWorkbench` 已经拥有 URL 驱动的搜索词、分类、分页状态；`SelectionResults` 已包含执行摘要和 `failures`，本轮不需要改变 API、query key 或后端契约。
+- 上一轮已经实现右侧 `ExecutionStatusDrawer`，当前抽屉仍由页面状态控制并使用执行状态入口作为焦点恢复目标；本轮沿用这条数据流，只调整入口位置并补充摘要呈现。
+
+## Requirements
+
+### R1. 筛选与执行控件
+
+- 目标交易日使用 `shared/ui/date-picker`，以单日选择器呈现；业务层继续以 `YYYY-MM-DD` 字符串调用现有查询和执行接口。
+- 策略选择和信号分类筛选使用 `shared/ui/select`，不再在选股页面直接渲染原生 `<select>`。
+- `Select`、`DatePicker` 必须支持键盘操作、焦点可见、Escape/外部点击关闭、禁用态和窄屏不溢出；控件的业务选项和路由更新仍由 `selection` feature 持有。
+- 保留现有目标交易日、策略、执行/重执行、搜索词、分类筛选和分页行为；不引入全局 UI 状态。
+
+### R2. 移除常驻执行状态总览
+
+- 选股结果页不再通过 `PageLayout.metrics` 渲染常驻执行状态总览，主内容区域不再为这组指标预留高度。
+- 当存在可展示结果时，信号列表顶部提供一个明确的“执行状态”按钮，展示当前状态和未完成评估数量，并作为右侧抽屉的触发器。
+- 抽屉继续支持关闭按钮、遮罩、Escape 和关闭后焦点返回；移动端不能产生页面级水平溢出。
+- 执行摘要（目标股票数、实际参与数、命中股票数、信号条数、数据覆盖率、状态）和未完成评估表格迁移到抽屉内；无失败记录时保留可读空状态。
+
+### R3. Shared UI 沉淀
+
+- 在 `zhixing-web/src/shared/ui/` 新增可复用的 `Select`、`Popover`、`Calendar` 和 `DatePicker` 组合组件，底层复用现有 `@base-ui/react`、`Button`、`cn` 以及日期选择依赖。
+- shared UI 只负责通用交互、语义、样式和原生属性扩展，不读取 `selection` API、路由或业务类型。
+- 新组件遵循项目现有的具名导出、小写文件名、Tailwind token、`cn` 合并和严格 TypeScript 约束。
+
+## Out of Scope
+
+- 不修改后端接口、数据库、策略计算、`SelectionResults` 字段含义或 query key。
+- 不改变 `/selection` URL 结构和现有搜索词、分类、分页参数的语义；目标交易日仍保持当前页面局部状态边界。
+- 不建设独立 npm/package 级 UI 库，不把 selection 业务组件迁移到 `shared/ui`，也不在本轮扩展全局表单校验或日期范围选择。
+- 不重做已有结果表、移动端信号卡片、详情面板和执行抽屉的业务数据逻辑。
+
+## Acceptance Criteria
+
+- [x] `SelectionResultsPage` 不再给 `PageLayout.metrics` 传入常驻执行状态总览；桌面和移动页面均能把剩余空间用于结果内容。
+- [x] 目标交易日使用可访问的 `DatePicker`；选中日期后仍以 `YYYY-MM-DD` 触发当前结果查询/执行逻辑，清空和禁用行为不破坏既有状态机。
+- [x] 策略和信号分类使用 shared `Select`；键盘打开、上下选择、Enter 确认和 Escape 关闭均可用，分类改变仍更新既有 URL search 并重置分页到第 1 页。
+- [x] 有结果时，信号列表顶部可见执行状态按钮；点击后右侧抽屉展示摘要指标和未完成评估表格，关闭后焦点回到该按钮；失败和无信号结果也保留按需入口。
+- [x] 无失败记录时抽屉仍可打开并显示“暂无未完成评估”；主页面不再出现独立的常驻指标区或内联失败明细卡片。
+- [x] shared UI 组件不依赖 `features/selection`，没有直接业务分支；组件和页面测试覆盖关键可见交互。
+- [ ] `pnpm format:check`、`pnpm lint`、`pnpm typecheck`、`pnpm test` 和 `pnpm build` 通过；lint/typecheck/test/build 与变更文件格式检查通过，完整格式检查仍被未改动的 `DESIGN.md` 阻断；浏览器验证已覆盖桌面/移动视口、Select、DatePicker、抽屉和页面级水平溢出。
+
+## Open Questions
+
+无。按用户要求将原总览信息整体移入右侧抽屉，保留现有后端数据流和 URL 筛选边界。
@@ -0,0 +1,26 @@
+{
+  "id": "selection-results-filter-state-ui",
+  "name": "selection-results-filter-state-ui",
+  "title": "迭代选股结果页筛选与状态入口",
+  "description": "",
+  "status": "in_progress",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "yuxuanhui",
+  "assignee": "yuxuanhui",
+  "createdAt": "2026-08-10",
+  "completedAt": null,
+  "branch": null,
+  "base_branch": "main",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
@@ -22,8 +22,10 @@
    "@tanstack/react-router": "^1.170.18",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
    "lucide-react": "^1.28.0",
    "react": "^19.2.8",
+    "react-day-picker": "^10.0.1",
    "react-dom": "^19.2.8",
    "tailwind-merge": "^3.6.0",
    "zustand": "^5.0.14"
@@ -10,7 +10,7 @@ importers:
    dependencies:
      '@base-ui/react':
        specifier: ^1.7.0
-        version: 1.7.0(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 1.7.0(@date-fns/tz@1.5.0)(@types/react@19.2.18)(date-fns@4.4.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@tanstack/react-query':
        specifier: ^5.101.4
        version: 5.101.4(react@19.2.8)
@@ -23,12 +23,18 @@ importers:
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
+      date-fns:
+        specifier: ^4.4.0
+        version: 4.4.0
      lucide-react:
        specifier: ^1.28.0
        version: 1.28.0(react@19.2.8)
      react:
        specifier: ^19.2.8
        version: 19.2.8
+      react-day-picker:
+        specifier: ^10.0.1
+        version: 10.0.1(@types/react@19.2.18)(react@19.2.8)
      react-dom:
        specifier: ^19.2.8
        version: 19.2.8(react@19.2.8)
@@ -231,6 +237,9 @@ packages:
    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
    engines: {node: '>=18'}

+  '@date-fns/tz@1.5.0':
+    resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
+
  '@emnapi/core@2.0.0-alpha.3':
    resolution: {integrity: sha512-AZypUeJ/yByuxyS7BlSNRDOMLMlROYtjYdIAuBmJssVz1UJDSeYxLrdizhXCFYhedC5bqd/ASy8EuNXbVVXp9g==}

@@ -816,6 +825,9 @@ packages:
    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
    engines: {node: '>=18'}

+  date-fns@4.4.0:
+    resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
+
  debug@4.4.3:
    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
    engines: {node: '>=6.0'}
@@ -1332,6 +1344,16 @@ packages:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}

+  react-day-picker@10.0.1:
+    resolution: {integrity: sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': '>=16.8.0'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  react-dom@19.2.8:
    resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
    peerDependencies:
@@ -1784,7 +1806,7 @@ snapshots:
      '@babel/helper-string-parser': 7.29.7
      '@babel/helper-validator-identifier': 7.29.7

-  '@base-ui/react@1.7.0(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@base-ui/react@1.7.0(@date-fns/tz@1.5.0)(@types/react@19.2.18)(date-fns@4.4.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
    dependencies:
      '@babel/runtime': 7.29.7
      '@base-ui/utils': 0.3.2(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -1794,7 +1816,9 @@ snapshots:
      react-dom: 19.2.8(react@19.2.8)
      use-sync-external-store: 1.6.0(react@19.2.8)
    optionalDependencies:
+      '@date-fns/tz': 1.5.0
      '@types/react': 19.2.18
+      date-fns: 4.4.0

  '@base-ui/utils@0.3.2(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
    dependencies:
@@ -1827,6 +1851,8 @@ snapshots:

  '@csstools/css-tokenizer@3.0.4': {}

+  '@date-fns/tz@1.5.0': {}
+
  '@emnapi/core@2.0.0-alpha.3':
    dependencies:
      '@emnapi/wasi-threads': 2.0.1
@@ -2370,6 +2396,8 @@ snapshots:
      whatwg-mimetype: 4.0.0
      whatwg-url: 14.2.0

+  date-fns@4.4.0: {}
+
  debug@4.4.3:
    dependencies:
      ms: 2.1.3
@@ -2810,6 +2838,14 @@ snapshots:

  punycode@2.3.1: {}

+  react-day-picker@10.0.1(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      '@date-fns/tz': 1.5.0
+      date-fns: 4.4.0
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
  react-dom@19.2.8(react@19.2.8):
    dependencies:
      react: 19.2.8
@@ -1,9 +1,8 @@
 import { XIcon } from "lucide-react"
 import type { RefObject } from "react"

-import type { SelectionResults } from "../api/selection.types"
-import { IncompleteEvaluationTable } from "./incomplete-evaluation-table"
-import { getSelectionRunStatusPresentation } from "./selection-presentation"
+import { Badge } from "@/shared/ui/badge"
+import { Button } from "@/shared/ui/button"
 import {
  Dialog,
  DialogClose,
@@ -13,7 +12,10 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/shared/ui/dialog"
-import { Button } from "@/shared/ui/button"
+
+import type { SelectionResults } from "../api/selection.types"
+import { IncompleteEvaluationTable } from "./incomplete-evaluation-table"
+import { getSelectionRunStatusPresentation } from "./selection-presentation"

 interface ExecutionStatusDrawerProps {
  finalFocus: RefObject<HTMLElement | null>
@@ -50,6 +52,37 @@ export function ExecutionStatusDrawer({
        </DialogHeader>

        <div className="min-h-0 flex-1 overflow-y-auto py-4">
+          <section
+            aria-label="执行摘要"
+            className="mb-4 rounded-lg border border-border/70 bg-muted/20 p-3"
+          >
+            <h2 className="sr-only">执行摘要</h2>
+            <dl className="grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-3">
+              <SummaryMetric label="目标股票数" value={result.target_count} />
+              <SummaryMetric label="实际参与数" value={result.eligible_count} />
+              <SummaryMetric
+                label="命中股票数"
+                value={result.selected_stock_count}
+              />
+              <SummaryMetric label="信号条数" value={result.signal_count} />
+              <SummaryMetric
+                label="数据覆盖率"
+                value={`${(result.coverage * 100).toFixed(2)}%`}
+              />
+              <div className="space-y-1">
+                <dt className="text-[11px] text-muted-foreground">执行状态</dt>
+                <dd>
+                  {statusPresentation ? (
+                    <Badge variant={statusPresentation.variant}>
+                      {statusLabel}
+                    </Badge>
+                  ) : (
+                    <span className="text-sm font-semibold">{statusLabel}</span>
+                  )}
+                </dd>
+              </div>
+            </dl>
+          </section>
          <IncompleteEvaluationTable failures={result.failures} />
        </div>

@@ -73,3 +106,20 @@ export function ExecutionStatusDrawer({
    </Dialog>
  )
 }
+
+function SummaryMetric({
+  label,
+  value,
+}: {
+  label: string
+  value: number | string
+}) {
+  return (
+    <div className="space-y-1">
+      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+      <dd className="text-base font-semibold tracking-tight tabular-nums">
+        {value}
+      </dd>
+    </div>
+  )
+}
@@ -0,0 +1,49 @@
+import { CheckCircle2 } from "lucide-react"
+import type { RefObject } from "react"
+
+import { Badge } from "@/shared/ui/badge"
+import { Button } from "@/shared/ui/button"
+
+import type { SelectionResults } from "../api/selection.types"
+import { getSelectionRunStatusPresentation } from "./selection-presentation"
+
+interface ExecutionStatusTriggerProps {
+  drawerOpen: boolean
+  onOpen: () => void
+  result: SelectionResults
+  triggerRef: RefObject<HTMLButtonElement | null>
+}
+
+export function ExecutionStatusTrigger({
+  drawerOpen,
+  onOpen,
+  result,
+  triggerRef,
+}: ExecutionStatusTriggerProps) {
+  const statusPresentation = getSelectionRunStatusPresentation(result.status)
+
+  if (!statusPresentation) return null
+
+  return (
+    <Button
+      aria-controls="selection-execution-status-drawer"
+      aria-expanded={drawerOpen}
+      aria-haspopup="dialog"
+      aria-label={`查看执行状态：${statusPresentation.label}，未完成评估 ${result.failures.length} 条`}
+      className="h-auto min-h-11 shrink-0 justify-start gap-1.5 px-2 md:min-h-8"
+      onClick={onOpen}
+      ref={triggerRef}
+      variant="outline"
+    >
+      <Badge className="gap-1" variant={statusPresentation.variant}>
+        {result.status === "success" ? (
+          <CheckCircle2 aria-hidden="true" />
+        ) : null}
+        {statusPresentation.label}
+      </Badge>
+      <span className="text-[11px] text-muted-foreground">
+        {result.failures.length} 条未完成
+      </span>
+    </Button>
+  )
+}
@@ -1,10 +1,19 @@
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState, type RefObject } from "react"
 import { useNavigate, useSearch } from "@tanstack/react-router"

 import { Input } from "@/shared/ui/input"
 import { Pagination } from "@/shared/ui/pagination"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select"

 import type { SelectionResults, SelectionSignal } from "../api/selection.types"
+import { ExecutionStatusTrigger } from "./execution-status-trigger"
 import { SignalDetailPanel } from "./signal-detail-panel"
 import { SignalRecordList } from "./signal-record-list"
 import {
@@ -18,11 +27,17 @@ import { SignalTable } from "./signal-table"
 const PAGE_SIZE_OPTIONS = [5, 10, 15] as const

 interface SelectionResultsWorkbenchProps {
+  drawerOpen: boolean
+  onOpenExecutionStatus: () => void
  result: SelectionResults
+  triggerRef: RefObject<HTMLButtonElement | null>
 }

 export function SelectionResultsWorkbench({
+  drawerOpen,
+  onOpenExecutionStatus,
  result,
+  triggerRef,
 }: SelectionResultsWorkbenchProps) {
  const search = useSearch({ from: "/_workspace/selection" })
  const navigate = useNavigate({ from: "/selection" })
@@ -53,7 +68,6 @@ export function SelectionResultsWorkbench({
  const selectedSignal =
    currentSignals.find((signal) => getSignalKey(signal) === selectedKey) ??
    currentSignals[0]
-
  useEffect(() => {
    if (page > pageCount) {
      void navigate({
@@ -92,32 +106,49 @@ export function SelectionResultsWorkbench({
  return (
    <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-visible md:grid md:grid-cols-[minmax(0,1fr)_260px] md:overflow-hidden lg:grid-cols-[minmax(0,1.55fr)_minmax(280px,0.72fr)]">
      <section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-visible rounded-lg border border-border/80 bg-card md:overflow-hidden">
-        <div className="grid shrink-0 gap-1.5 border-b border-border/60 p-2.5 sm:grid-cols-[minmax(0,260px)_auto_1fr] sm:items-center">
+        <div className="flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border/60 p-2.5">
          <Input
            aria-label="搜索命中信号"
-            className="h-11 bg-background text-sm md:h-8"
+            className="h-11 min-w-0 flex-1 bg-background text-sm sm:max-w-[260px] md:h-8"
            onChange={(event) => handleQueryChange(event.target.value)}
            placeholder="搜索股票名称或代码"
            type="search"
            value={query}
          />
-          <select
-            aria-label="筛选信号分类"
-            className="h-11 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:h-8"
-            onChange={(event) =>
-              handleCategoryChange(event.target.value as SignalCategoryFilter)
+          <Select
+            items={signalCategoryOptions}
+            onValueChange={(value) => {
+              if (typeof value === "string") {
+                handleCategoryChange(value as SignalCategoryFilter)
              }
+            }}
            value={category}
          >
+            <SelectTrigger
+              aria-label="筛选信号分类"
+              className="h-11 w-full bg-background text-sm sm:w-auto sm:min-w-36 md:h-8"
+            >
+              <SelectValue placeholder="筛选信号分类" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
                {signalCategoryOptions.map((option) => (
-              <option key={option.value} value={option.value}>
+                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
-              </option>
+                  </SelectItem>
                ))}
-          </select>
-          <span className="text-xs tabular-nums text-muted-foreground sm:justify-self-end">
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <span className="text-xs tabular-nums text-muted-foreground sm:ml-auto">
            筛选结果 {signalsTotal} 条
          </span>
+          <ExecutionStatusTrigger
+            drawerOpen={drawerOpen}
+            onOpen={onOpenExecutionStatus}
+            result={result}
+            triggerRef={triggerRef}
+          />
        </div>

        <div className="flex min-h-0 min-w-0 flex-col md:flex-1 md:overflow-hidden">
@@ -99,6 +99,7 @@ describe("SelectionResultsPage", () => {
    render(<SelectionResultsPage />)

    expect(screen.getByText("执行完成")).toBeInTheDocument()
+    expect(screen.queryByText("目标股票数")).not.toBeInTheDocument()
    const table = screen.getByRole("table")
    expect(table).toBeInTheDocument()
    expect(within(table).getByText("原始 B1")).toBeInTheDocument()
@@ -130,11 +131,25 @@ describe("SelectionResultsPage", () => {
    const trigger = screen.getByRole("button", {
      name: "查看执行状态：部分成功，未完成评估 1 条",
    })
+    expect(trigger).toHaveAttribute(
+      "aria-controls",
+      "selection-execution-status-drawer",
+    )
+    expect(trigger).toHaveAttribute("aria-expanded", "false")
    fireEvent.click(trigger)
+    expect(trigger).toHaveAttribute("aria-expanded", "true")

    const dialog = await screen.findByRole("dialog", {
      name: "知行 B1 执行状态",
    })
+    const summary = within(dialog).getByRole("region", { name: "执行摘要" })
+    expect(within(summary).getByText("目标股票数")).toBeInTheDocument()
+    expect(within(summary).getByText("实际参与数")).toBeInTheDocument()
+    expect(within(summary).getByText("命中股票数")).toBeInTheDocument()
+    expect(within(summary).getByText("信号条数")).toBeInTheDocument()
+    expect(within(summary).getByText("数据覆盖率")).toBeInTheDocument()
+    expect(within(summary).getByText("100.00%")).toBeInTheDocument()
+    expect(within(summary).getByText("部分成功")).toBeInTheDocument()
    const table = within(dialog).getByRole("table")
    expect(
      within(table).getByRole("columnheader", { name: "股票名称" }),
@@ -153,6 +168,7 @@ describe("SelectionResultsPage", () => {
    await waitFor(() => {
      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
    })
+    expect(trigger).toHaveAttribute("aria-expanded", "false")
    expect(document.activeElement).toBe(trigger)
  })

@@ -175,6 +191,111 @@ describe("SelectionResultsPage", () => {
    await waitFor(() => {
      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
    })
+    expect(
+      screen.getByRole("button", {
+        name: "查看执行状态：执行完成，未完成评估 0 条",
+      }),
+    ).toHaveFocus()
+  })
+
+  it("keeps execution status accessible when no signals are hit", async () => {
+    useSelectionResults.mockReturnValue({
+      data: {
+        ...selectedResult,
+        signal_count: 0,
+        signals: [],
+        signals_total: 0,
+      },
+      isError: false,
+      isPending: false,
+    })
+
+    render(<SelectionResultsPage />)
+
+    const trigger = screen.getByRole("button", {
+      name: "查看执行状态：执行完成，未完成评估 0 条",
+    })
+    fireEvent.click(trigger)
+
+    const dialog = await screen.findByRole("dialog", {
+      name: "知行 B1 执行状态",
+    })
+    expect(within(dialog).getByText("信号条数")).toBeInTheDocument()
+  })
+
+  it("keeps execution status accessible for a failed result", async () => {
+    useSelectionResults.mockReturnValue({
+      data: {
+        ...selectedResult,
+        failed_count: 2,
+        failures: [
+          {
+            name: "招商银行",
+            reason: "目标日数据读取失败",
+            status: "data_error",
+            ts_code: "600036.SZ",
+          },
+          {
+            name: "宁德时代",
+            reason: "指标计算失败",
+            status: "calculation_error",
+            ts_code: "300750.SZ",
+          },
+        ],
+        signal_count: 0,
+        signals: [],
+        status: "failed",
+      },
+      isError: false,
+      isPending: false,
+    })
+
+    render(<SelectionResultsPage />)
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "查看执行状态：执行失败，未完成评估 2 条",
+      }),
+    )
+    const dialog = await screen.findByRole("dialog", {
+      name: "知行 B1 执行状态",
+    })
+    expect(within(dialog).getByText("执行失败")).toBeInTheDocument()
+  })
+
+  it("uses shared selects and resets pagination when the category changes", async () => {
+    render(<SelectionResultsPage />)
+
+    expect(screen.getByRole("combobox", { name: "策略" })).toHaveTextContent(
+      "知行 B1",
+    )
+    const categoryTrigger = screen.getByRole("combobox", {
+      name: "筛选信号分类",
+    })
+    expect(categoryTrigger).toHaveTextContent("全部信号")
+
+    fireEvent.click(categoryTrigger)
+    const oversoldOption = await screen.findByRole("option", { name: "超卖类" })
+    fireEvent.pointerDown(oversoldOption, { pointerType: "mouse" })
+    fireEvent.click(oversoldOption)
+
+    expect(routerNavigate).toHaveBeenCalled()
+    const lastCall =
+      routerNavigate.mock.calls[routerNavigate.mock.calls.length - 1]
+    const searchUpdate = lastCall[0].search as (previous: {
+      category: string
+      page: number
+      pageSize: number
+      search: string
+    }) => Record<string, unknown>
+    expect(
+      searchUpdate({ category: "all", page: 4, pageSize: 5, search: "" }),
+    ).toEqual({
+      category: "oversold",
+      page: 1,
+      pageSize: 5,
+      search: "",
+    })
  })

  it("filters signals, updates the detail panel, and expands mobile details", () => {
@@ -298,14 +419,14 @@ describe("SelectionResultsPage", () => {
    ).toBeInTheDocument()
  })

-  it("renders a no-data state and triggers an initial run after date selection", () => {
+  it("renders a no-data state and triggers an initial run after date selection", async () => {
    useSelectionResults.mockReturnValue({
      data: {
        ...selectedResult,
        run_id: null,
        signals: [],
        status: "no_data",
-        target_trade_date: null,
+        target_trade_date: "2026-08-08",
      },
      isError: false,
      isPending: false,
@@ -314,9 +435,12 @@ describe("SelectionResultsPage", () => {
    render(<SelectionResultsPage />)

    expect(screen.getByText("暂无策略结果")).toBeInTheDocument()
-    fireEvent.change(screen.getByLabelText("目标交易日"), {
-      target: { value: "2026-08-08" },
+    fireEvent.click(screen.getByRole("button", { name: "目标交易日" }))
+    const calendar = await screen.findByRole("grid")
+    const dateButton = within(calendar).getByRole("button", {
+      name: "2026年8月9日 星期日",
    })
+    fireEvent.click(dateButton)
    fireEvent.click(screen.getByRole("button", { name: "执行策略" }))

    expect(mutate).toHaveBeenCalledWith(
@@ -324,13 +448,28 @@ describe("SelectionResultsPage", () => {
        request: {
          rerun: false,
          strategy: "zhixing_b1",
-          target_trade_date: "2026-08-08",
+          target_trade_date: "2026-08-09",
        },
      },
      expect.any(Object),
    )
  })

+  it("keeps the target trade date empty after clearing the date picker", async () => {
+    render(<SelectionResultsPage />)
+
+    const dateTrigger = screen.getByRole("button", { name: "目标交易日" })
+    fireEvent.click(dateTrigger)
+    const calendar = await screen.findByRole("grid")
+    fireEvent.click(
+      within(calendar).getByRole("button", {
+        name: "2026年8月8日 星期六，已选择",
+      }),
+    )
+
+    expect(dateTrigger).toHaveTextContent("选择日期")
+  })
+
  it("continues polling a persisted running run after page reload", () => {
    useSelectionResults.mockReturnValue({
      data: { ...selectedResult, signals: [], status: "running" },
@@ -1,10 +1,4 @@
-import {
-  AlertTriangle,
-  CheckCircle2,
-  Play,
-  RefreshCw,
-  Search,
-} from "lucide-react"
+import { AlertTriangle, Play, RefreshCw, Search } from "lucide-react"
 import { useSearch } from "@tanstack/react-router"
 import { useRef, useState, type RefObject } from "react"

@@ -18,7 +12,6 @@ import type {
  SelectionResults,
  SelectionResultsQuery,
 } from "@/features/selection/api/selection.types"
-import { Badge } from "@/shared/ui/badge"
 import { Button } from "@/shared/ui/button"
 import {
  Card,
@@ -35,17 +28,28 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/shared/ui/dialog"
-import { Input } from "@/shared/ui/input"
+import { DatePicker } from "@/shared/ui/date-picker"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select"
 import { Skeleton } from "@/shared/ui/skeleton"

 import { ExecutionStatusDrawer } from "../components/execution-status-drawer"
-import { getSelectionRunStatusPresentation } from "../components/selection-presentation"
+import { ExecutionStatusTrigger } from "../components/execution-status-trigger"
 import { SelectionResultsWorkbench } from "../components/selection-results-workbench"

 const STRATEGY = "zhixing_b1" as const

 export function SelectionResultsPage() {
-  const [targetTradeDate, setTargetTradeDate] = useState<string | null>(null)
+  // undefined follows the persisted result; null means the user cleared the picker.
+  const [targetTradeDate, setTargetTradeDate] = useState<
+    string | null | undefined
+  >(undefined)
  const [activeRunId, setActiveRunId] = useState<string | null>(null)
  const [executionStatusDrawerOpen, setExecutionStatusDrawerOpen] =
    useState(false)
@@ -71,7 +75,9 @@ export function SelectionResultsPage() {
  const trigger = useTriggerSelectionRun()

  const selectedTargetTradeDate =
-    targetTradeDate ?? results.data?.target_trade_date ?? ""
+    targetTradeDate === undefined
+      ? (results.data?.target_trade_date ?? "")
+      : (targetTradeDate ?? "")

  const selectedDateResult =
    targetTradeDate &&
@@ -116,25 +122,13 @@ export function SelectionResultsPage() {
    )
  }

-  function handleDateChange(value: string) {
-    setTargetTradeDate(value)
+  function handleDateChange(value: Date | undefined) {
+    setTargetTradeDate(value ? formatLocalTradeDate(value) : null)
    setExecutionStatusDrawerOpen(false)
    setActiveRunId(null)
    trigger.reset()
  }

-  const resultMetrics =
-    displayedResult &&
-    displayedResult.status !== "no_data" &&
-    displayedResult.status !== "running" ? (
-      <ResultMetrics
-        drawerOpen={executionStatusDrawerOpen}
-        onOpenExecutionStatus={() => setExecutionStatusDrawerOpen(true)}
-        result={displayedResult}
-        triggerRef={executionStatusTriggerRef}
-      />
-    ) : null
-
  return (
    <>
      <PageLayout
@@ -149,7 +143,6 @@ export function SelectionResultsPage() {
            triggerError={trigger.isError}
          />
        }
-        metrics={resultMetrics}
        mode="bounded-workspace"
      >
        <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-visible md:overflow-hidden">
@@ -169,14 +162,24 @@ export function SelectionResultsPage() {
          {!isRunning &&
          !hasQueryError &&
          displayedResult?.status === "failed" ? (
-            <FailureState result={displayedResult} />
+            <FailureState
+              drawerOpen={executionStatusDrawerOpen}
+              onOpenExecutionStatus={() => setExecutionStatusDrawerOpen(true)}
+              result={displayedResult}
+              triggerRef={executionStatusTriggerRef}
+            />
          ) : null}
          {!isRunning &&
          !hasQueryError &&
          displayedResult &&
          displayedResult.status !== "no_data" &&
          displayedResult.status !== "failed" ? (
-            <ResultState result={displayedResult} />
+            <ResultState
+              drawerOpen={executionStatusDrawerOpen}
+              onOpenExecutionStatus={() => setExecutionStatusDrawerOpen(true)}
+              result={displayedResult}
+              triggerRef={executionStatusTriggerRef}
+            />
          ) : null}
        </div>

@@ -227,7 +230,7 @@ interface ExecutionToolbarProps {
  hasExistingResult: boolean
  isFailedResult: boolean
  isRunning: boolean
-  onDateChange: (value: string) => void
+  onDateChange: (value: Date | undefined) => void
  onExecute: () => void
  selectedTargetTradeDate: string
  triggerError: boolean
@@ -245,33 +248,35 @@ function ExecutionToolbar({
  return (
    <div className="w-full space-y-1.5">
      <div className="grid gap-1.5 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] sm:items-end">
-        <label
-          className="space-y-1 text-xs font-medium"
-          htmlFor="target-trade-date"
-        >
-          目标交易日
-          <Input
-            className="mt-1 h-11 bg-background md:h-8"
-            id="target-trade-date"
-            onChange={(event) => onDateChange(event.target.value)}
-            type="date"
-            value={selectedTargetTradeDate}
+        <div className="space-y-1 text-xs font-medium">
+          <span className="block">目标交易日</span>
+          <DatePicker
+            aria-label="目标交易日"
+            className="mt-1 h-11 w-full bg-background md:h-8"
+            onChange={onDateChange}
+            value={parseLocalTradeDate(selectedTargetTradeDate)}
          />
-        </label>
-        <label
-          className="space-y-1 text-xs font-medium"
-          htmlFor="strategy-name"
-        >
-          策略
-          <select
-            className="mt-1 h-11 w-full rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 md:h-8"
+        </div>
+        <div className="space-y-1 text-xs font-medium">
+          <span className="block">策略</span>
+          <Select
            disabled
-            id="strategy-name"
+            items={[{ label: "知行 B1", value: STRATEGY }]}
            value={STRATEGY}
          >
-            <option value={STRATEGY}>知行 B1</option>
-          </select>
-        </label>
+            <SelectTrigger
+              aria-label="策略"
+              className="mt-1 h-11 w-full bg-background md:h-8"
+            >
+              <SelectValue placeholder="选择策略" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value={STRATEGY}>知行 B1</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
        <Button
          className="h-11 w-full sm:w-auto md:h-8"
          disabled={!selectedTargetTradeDate || isRunning}
@@ -302,56 +307,36 @@ function ExecutionToolbar({
  )
 }

-function ResultMetrics({
-  drawerOpen,
-  onOpenExecutionStatus,
-  result,
-  triggerRef,
-}: {
+interface ResultStateProps {
  drawerOpen: boolean
  onOpenExecutionStatus: () => void
  result: SelectionResults
  triggerRef: RefObject<HTMLButtonElement | null>
-}) {
-  const presentation = getSelectionRunStatusPresentation(result.status)
+}

-  return (
-    <div className="grid w-full grid-cols-2 gap-x-4 gap-y-1.5 sm:grid-cols-3 lg:grid-cols-[repeat(5,minmax(0,1fr))_auto]">
-      <Metric label="目标股票数" value={result.target_count} />
-      <Metric label="实际参与数" value={result.eligible_count} />
-      <Metric label="命中股票数" value={result.selected_stock_count} />
-      <Metric label="信号条数" value={result.signal_count} />
-      <Metric
-        label="数据覆盖率"
-        value={`${(result.coverage * 100).toFixed(2)}%`}
-      />
-      {presentation ? (
-        <div className="space-y-1">
-          <p className="text-[11px] text-muted-foreground">执行状态</p>
-          <Button
-            aria-controls="selection-execution-status-drawer"
-            aria-expanded={drawerOpen}
-            aria-haspopup="dialog"
-            aria-label={`查看执行状态：${presentation.label}，未完成评估 ${result.failures.length} 条`}
-            className="h-auto min-h-11 justify-start gap-1.5 px-2 md:min-h-8"
-            onClick={onOpenExecutionStatus}
-            ref={triggerRef}
-            variant="outline"
-          >
-            <Badge className="gap-1" variant={presentation.variant}>
-              {result.status === "success" ? (
-                <CheckCircle2 aria-hidden="true" />
-              ) : null}
-              {presentation.label}
-            </Badge>
-            <span className="text-[11px] text-muted-foreground">
-              {result.failures.length} 条未完成
-            </span>
-          </Button>
-        </div>
-      ) : null}
-    </div>
-  )
+function parseLocalTradeDate(value: string): Date | undefined {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+  if (!match) return undefined
+
+  const year = Number(match[1])
+  const month = Number(match[2])
+  const day = Number(match[3])
+  const date = new Date(year, month - 1, day)
+
+  if (
+    date.getFullYear() !== year ||
+    date.getMonth() !== month - 1 ||
+    date.getDate() !== day
+  ) {
+    return undefined
+  }
+  return date
+}
+
+function formatLocalTradeDate(value: Date): string {
+  const month = String(value.getMonth() + 1).padStart(2, "0")
+  const day = String(value.getDate()).padStart(2, "0")
+  return `${value.getFullYear()}-${month}-${day}`
 }

 function LoadingState() {
@@ -423,7 +408,12 @@ function NoDataState() {
  )
 }

-function FailureState({ result }: { result: SelectionResults }) {
+function FailureState({
+  drawerOpen,
+  onOpenExecutionStatus,
+  result,
+  triggerRef,
+}: ResultStateProps) {
  return (
    <Card>
      <CardHeader className="gap-1.5 p-4">
@@ -440,6 +430,7 @@ function FailureState({ result }: { result: SelectionResults }) {
        </CardDescription>
      </CardHeader>
      <CardContent className="p-4 pt-0">
+        <div className="flex flex-wrap items-center gap-3">
          <p className="text-sm text-muted-foreground">
            目标交易日：
            <span className="font-medium text-foreground">
@@ -450,39 +441,65 @@ function FailureState({ result }: { result: SelectionResults }) {
              {result.failed_count}
            </span>
          </p>
+          <ExecutionStatusTrigger
+            drawerOpen={drawerOpen}
+            onOpen={onOpenExecutionStatus}
+            result={result}
+            triggerRef={triggerRef}
+          />
+        </div>
      </CardContent>
    </Card>
  )
 }

-function ResultState({ result }: { result: SelectionResults }) {
+function ResultState({
+  drawerOpen,
+  onOpenExecutionStatus,
+  result,
+  triggerRef,
+}: ResultStateProps) {
  return result.signal_count === 0 ? (
-    <NoSignalState />
+    <NoSignalState
+      drawerOpen={drawerOpen}
+      onOpenExecutionStatus={onOpenExecutionStatus}
+      result={result}
+      triggerRef={triggerRef}
+    />
  ) : (
-    <SelectionResultsWorkbench result={result} />
+    <SelectionResultsWorkbench
+      drawerOpen={drawerOpen}
+      onOpenExecutionStatus={onOpenExecutionStatus}
+      result={result}
+      triggerRef={triggerRef}
+    />
  )
 }

-function NoSignalState() {
+function NoSignalState({
+  drawerOpen,
+  onOpenExecutionStatus,
+  result,
+  triggerRef,
+}: ResultStateProps) {
  return (
    <Card>
      <CardHeader className="gap-1.5 p-4">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="space-y-1.5">
            <CardTitle className="text-xl">本次没有命中信号</CardTitle>
            <CardDescription>
              目标交易日数据完整，但没有符合公式条件的股票。
            </CardDescription>
+          </div>
+          <ExecutionStatusTrigger
+            drawerOpen={drawerOpen}
+            onOpen={onOpenExecutionStatus}
+            result={result}
+            triggerRef={triggerRef}
+          />
+        </div>
      </CardHeader>
    </Card>
  )
 }
-
-function Metric({ label, value }: { label: string; value: number | string }) {
-  return (
-    <div className="space-y-0.5">
-      <p className="text-[11px] text-muted-foreground">{label}</p>
-      <p className="text-base font-semibold tracking-tight tabular-nums">
-        {value}
-      </p>
-    </div>
-  )
-}
@@ -0,0 +1,71 @@
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react"
+import { DayPicker, type DayPickerProps } from "react-day-picker"
+import { zhCN } from "react-day-picker/locale"
+
+import { cn } from "@/shared/ui/utils"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: DayPickerProps) {
+  return (
+    <DayPicker
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col gap-4 sm:flex-row",
+        month: "flex w-full flex-col gap-4",
+        month_caption: "flex items-center justify-center pt-1",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        button_previous:
+          "absolute left-1 inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+        button_next:
+          "absolute right-1 inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday:
+          "w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground",
+        week: "mt-2 flex w-full",
+        day: "relative size-9 p-0 text-center text-sm [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-muted/50 [&:has([aria-selected])]:bg-muted first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day_button:
+          "inline-flex size-9 items-center justify-center rounded-md p-0 font-normal outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 aria-selected:bg-primary aria-selected:text-primary-foreground",
+        range_start: "day-range-start rounded-l-md bg-muted",
+        range_middle: "rounded-none bg-muted",
+        range_end: "day-range-end rounded-r-md bg-muted",
+        selected: "rounded-md bg-primary text-primary-foreground",
+        today: "bg-muted text-foreground",
+        outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-muted/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className: chevronClassName, orientation, style }) => {
+          const Icon =
+            orientation === "left"
+              ? ChevronLeft
+              : orientation === "right"
+                ? ChevronRight
+                : orientation === "up"
+                  ? ChevronUp
+                  : ChevronDown
+          return (
+            <Icon
+              aria-hidden="true"
+              className={cn("size-4", chevronClassName)}
+              style={style}
+            />
+          )
+        },
+      }}
+      locale={zhCN}
+      showOutsideDays={showOutsideDays}
+      {...props}
+    />
+  )
+}
+
+export { Calendar }
@@ -0,0 +1,62 @@
+import { format } from "date-fns"
+import { CalendarDays } from "lucide-react"
+import { useState } from "react"
+import type { ComponentProps } from "react"
+
+import { Button } from "@/shared/ui/button"
+import { Calendar } from "@/shared/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover"
+
+export interface DatePickerProps extends Omit<
+  ComponentProps<typeof Button>,
+  "children" | "onChange" | "value"
+> {
+  value?: Date
+  onChange?: (value: Date | undefined) => void
+  placeholder?: string
+}
+
+export function DatePicker({
+  className,
+  disabled,
+  onChange,
+  placeholder = "选择日期",
+  value,
+  ...props
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false)
+
+  function handleSelect(nextValue: Date | undefined) {
+    onChange?.(nextValue)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        disabled={disabled}
+        render={
+          <Button
+            data-empty={!value}
+            data-slot="date-picker-trigger"
+            disabled={disabled}
+            variant="outline"
+            className={className}
+            {...props}
+          />
+        }
+      >
+        <CalendarDays aria-hidden="true" data-icon="inline-start" />
+        {value ? format(value, "yyyy-MM-dd") : <span>{placeholder}</span>}
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto p-0">
+        <Calendar
+          defaultMonth={value}
+          mode="single"
+          onSelect={handleSelect}
+          selected={value}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
@@ -0,0 +1,50 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "@/shared/ui/utils"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  align = "center",
+  className,
+  children,
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props & {
+  align?: PopoverPrimitive.Positioner.Props["align"]
+  sideOffset?: number
+}) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        data-slot="popover-positioner"
+        align={align}
+        sideOffset={sideOffset}
+        className="z-50 outline-none"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 w-72 origin-(--transform-origin) rounded-lg border border-border bg-card p-4 text-card-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />
+}
+
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger }
@@ -0,0 +1,200 @@
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/shared/ui/utils"
+
+function Select<Value, Multiple extends boolean | undefined = false>(
+  props: SelectPrimitive.Root.Props<Value, Multiple>,
+) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  children,
+  size = "default",
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-full items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 text-sm whitespace-nowrap outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 [&>span]:line-clamp-1 [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        data-slot="select-icon"
+        className="text-muted-foreground"
+      >
+        <ChevronDown aria-hidden="true" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("line-clamp-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  sideOffset = 4,
+  ...props
+}: SelectPrimitive.Popup.Props & {
+  sideOffset?: number
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        data-slot="select-positioner"
+        sideOffset={sideOffset}
+        className="z-50 outline-none"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          className={cn(
+            "relative z-50 max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List
+            data-slot="select-list"
+            className="max-h-72 overflow-y-auto p-1"
+          >
+            {children}
+          </SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex min-h-8 w-full cursor-default items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[highlighted]:bg-muted data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator data-slot="select-item-indicator">
+          <Check aria-hidden="true" className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText data-slot="select-item-text">
+        {children}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: SelectPrimitive.ScrollUpArrow.Props) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex h-6 items-center justify-center bg-card text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUp aria-hidden="true" className="size-4" />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: SelectPrimitive.ScrollDownArrow.Props) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex h-6 items-center justify-center bg-card text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDown aria-hidden="true" className="size-4" />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}