Develop #9
@@ -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": {}
|
||||||
|
}
|
||||||
+2
-2
@@ -3,7 +3,7 @@
|
|||||||
"name": "selection-status-drawer-compact-layout",
|
"name": "selection-status-drawer-compact-layout",
|
||||||
"title": "收紧选股执行状态交互与页面布局",
|
"title": "收紧选股执行状态交互与页面布局",
|
||||||
"description": "",
|
"description": "",
|
||||||
"status": "in_progress",
|
"status": "completed",
|
||||||
"dev_type": null,
|
"dev_type": null,
|
||||||
"scope": null,
|
"scope": null,
|
||||||
"package": null,
|
"package": null,
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
"creator": "yuxuanhui",
|
"creator": "yuxuanhui",
|
||||||
"assignee": "yuxuanhui",
|
"assignee": "yuxuanhui",
|
||||||
"createdAt": "2026-08-10",
|
"createdAt": "2026-08-10",
|
||||||
"completedAt": null,
|
"completedAt": "2026-08-10",
|
||||||
"branch": null,
|
"branch": null,
|
||||||
"base_branch": "main",
|
"base_branch": "main",
|
||||||
"worktree_path": null,
|
"worktree_path": null,
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
<!-- @@@auto:current-status -->
|
<!-- @@@auto:current-status -->
|
||||||
- **Active File**: `journal-1.md`
|
- **Active File**: `journal-1.md`
|
||||||
- **Total Sessions**: 6
|
- **Total Sessions**: 7
|
||||||
- **Last Active**: 2026-08-10
|
- **Last Active**: 2026-08-10
|
||||||
<!-- @@@/auto:current-status -->
|
<!-- @@@/auto:current-status -->
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
<!-- @@@auto:active-documents -->
|
<!-- @@@auto:active-documents -->
|
||||||
| File | Lines | Status |
|
| File | Lines | Status |
|
||||||
|------|-------|--------|
|
|------|-------|--------|
|
||||||
| `journal-1.md` | ~164 | Active |
|
| `journal-1.md` | ~185 | Active |
|
||||||
<!-- @@@/auto:active-documents -->
|
<!-- @@@/auto:active-documents -->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -29,6 +29,7 @@
|
|||||||
<!-- @@@auto:session-history -->
|
<!-- @@@auto:session-history -->
|
||||||
| # | Date | Title | Commits | Branch |
|
| # | Date | Title | Commits | Branch |
|
||||||
|---|------|-------|---------|--------|
|
|---|------|-------|---------|--------|
|
||||||
|
| 7 | 2026-08-10 | 完成选股执行状态抽屉与紧凑布局 | `17237e0` | `develop` |
|
||||||
| 6 | 2026-08-10 | 按原型完善选股结果分页接口 | `ed7bdda`, `3af97bf` | `develop` |
|
| 6 | 2026-08-10 | 按原型完善选股结果分页接口 | `ed7bdda`, `3af97bf` | `develop` |
|
||||||
| 5 | 2026-08-09 | 完成响应式前端交互原型设计 | `0511669` | `develop` |
|
| 5 | 2026-08-09 | 完成响应式前端交互原型设计 | `0511669` | `develop` |
|
||||||
| 4 | 2026-08-09 | 完成知行 B1 策略迁移 | `e9d06df` | `develop` |
|
| 4 | 2026-08-09 | 完成知行 B1 策略迁移 | `e9d06df` | `develop` |
|
||||||
|
|||||||
@@ -162,3 +162,24 @@
|
|||||||
### Status
|
### Status
|
||||||
|
|
||||||
[OK] **Completed**
|
[OK] **Completed**
|
||||||
|
|
||||||
|
|
||||||
|
## Session 7: 完成选股执行状态抽屉与紧凑布局
|
||||||
|
|
||||||
|
**Date**: 2026-08-10
|
||||||
|
**Task**: 完成选股执行状态抽屉与紧凑布局
|
||||||
|
**Branch**: `develop`
|
||||||
|
|
||||||
|
### Summary
|
||||||
|
|
||||||
|
将未完成评估迁移至600px右侧执行状态抽屉，新增语义表格与空状态，收紧选股页面间距并修复工作台高度链；lint、typecheck、22项测试、build及浏览器mock验证通过。
|
||||||
|
|
||||||
|
### Git Commits
|
||||||
|
|
||||||
|
| Hash | Message |
|
||||||
|
|------|---------|
|
||||||
|
| `17237e0` | (see git log) |
|
||||||
|
|
||||||
|
### Status
|
||||||
|
|
||||||
|
[OK] **Completed**
|
||||||
|
|||||||
@@ -22,8 +22,10 @@
|
|||||||
"@tanstack/react-router": "^1.170.18",
|
"@tanstack/react-router": "^1.170.18",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"date-fns": "^4.4.0",
|
||||||
"lucide-react": "^1.28.0",
|
"lucide-react": "^1.28.0",
|
||||||
"react": "^19.2.8",
|
"react": "^19.2.8",
|
||||||
|
"react-day-picker": "^10.0.1",
|
||||||
"react-dom": "^19.2.8",
|
"react-dom": "^19.2.8",
|
||||||
"tailwind-merge": "^3.6.0",
|
"tailwind-merge": "^3.6.0",
|
||||||
"zustand": "^5.0.14"
|
"zustand": "^5.0.14"
|
||||||
|
|||||||
Generated
+38
-2
@@ -10,7 +10,7 @@ importers:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@base-ui/react':
|
'@base-ui/react':
|
||||||
specifier: ^1.7.0
|
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':
|
'@tanstack/react-query':
|
||||||
specifier: ^5.101.4
|
specifier: ^5.101.4
|
||||||
version: 5.101.4(react@19.2.8)
|
version: 5.101.4(react@19.2.8)
|
||||||
@@ -23,12 +23,18 @@ importers:
|
|||||||
clsx:
|
clsx:
|
||||||
specifier: ^2.1.1
|
specifier: ^2.1.1
|
||||||
version: 2.1.1
|
version: 2.1.1
|
||||||
|
date-fns:
|
||||||
|
specifier: ^4.4.0
|
||||||
|
version: 4.4.0
|
||||||
lucide-react:
|
lucide-react:
|
||||||
specifier: ^1.28.0
|
specifier: ^1.28.0
|
||||||
version: 1.28.0(react@19.2.8)
|
version: 1.28.0(react@19.2.8)
|
||||||
react:
|
react:
|
||||||
specifier: ^19.2.8
|
specifier: ^19.2.8
|
||||||
version: 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:
|
react-dom:
|
||||||
specifier: ^19.2.8
|
specifier: ^19.2.8
|
||||||
version: 19.2.8(react@19.2.8)
|
version: 19.2.8(react@19.2.8)
|
||||||
@@ -231,6 +237,9 @@ packages:
|
|||||||
resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
|
resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
|
||||||
engines: {node: '>=18'}
|
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':
|
'@emnapi/core@2.0.0-alpha.3':
|
||||||
resolution: {integrity: sha512-AZypUeJ/yByuxyS7BlSNRDOMLMlROYtjYdIAuBmJssVz1UJDSeYxLrdizhXCFYhedC5bqd/ASy8EuNXbVVXp9g==}
|
resolution: {integrity: sha512-AZypUeJ/yByuxyS7BlSNRDOMLMlROYtjYdIAuBmJssVz1UJDSeYxLrdizhXCFYhedC5bqd/ASy8EuNXbVVXp9g==}
|
||||||
|
|
||||||
@@ -816,6 +825,9 @@ packages:
|
|||||||
resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
|
resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
|
||||||
engines: {node: '>=18'}
|
engines: {node: '>=18'}
|
||||||
|
|
||||||
|
date-fns@4.4.0:
|
||||||
|
resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
|
||||||
|
|
||||||
debug@4.4.3:
|
debug@4.4.3:
|
||||||
resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
|
resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
|
||||||
engines: {node: '>=6.0'}
|
engines: {node: '>=6.0'}
|
||||||
@@ -1332,6 +1344,16 @@ packages:
|
|||||||
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
||||||
engines: {node: '>=6'}
|
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:
|
react-dom@19.2.8:
|
||||||
resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
|
resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@@ -1784,7 +1806,7 @@ snapshots:
|
|||||||
'@babel/helper-string-parser': 7.29.7
|
'@babel/helper-string-parser': 7.29.7
|
||||||
'@babel/helper-validator-identifier': 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:
|
dependencies:
|
||||||
'@babel/runtime': 7.29.7
|
'@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)
|
'@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)
|
react-dom: 19.2.8(react@19.2.8)
|
||||||
use-sync-external-store: 1.6.0(react@19.2.8)
|
use-sync-external-store: 1.6.0(react@19.2.8)
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
|
'@date-fns/tz': 1.5.0
|
||||||
'@types/react': 19.2.18
|
'@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)':
|
'@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:
|
dependencies:
|
||||||
@@ -1827,6 +1851,8 @@ snapshots:
|
|||||||
|
|
||||||
'@csstools/css-tokenizer@3.0.4': {}
|
'@csstools/css-tokenizer@3.0.4': {}
|
||||||
|
|
||||||
|
'@date-fns/tz@1.5.0': {}
|
||||||
|
|
||||||
'@emnapi/core@2.0.0-alpha.3':
|
'@emnapi/core@2.0.0-alpha.3':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@emnapi/wasi-threads': 2.0.1
|
'@emnapi/wasi-threads': 2.0.1
|
||||||
@@ -2370,6 +2396,8 @@ snapshots:
|
|||||||
whatwg-mimetype: 4.0.0
|
whatwg-mimetype: 4.0.0
|
||||||
whatwg-url: 14.2.0
|
whatwg-url: 14.2.0
|
||||||
|
|
||||||
|
date-fns@4.4.0: {}
|
||||||
|
|
||||||
debug@4.4.3:
|
debug@4.4.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
ms: 2.1.3
|
ms: 2.1.3
|
||||||
@@ -2810,6 +2838,14 @@ snapshots:
|
|||||||
|
|
||||||
punycode@2.3.1: {}
|
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):
|
react-dom@19.2.8(react@19.2.8):
|
||||||
dependencies:
|
dependencies:
|
||||||
react: 19.2.8
|
react: 19.2.8
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
import { XIcon } from "lucide-react"
|
import { XIcon } from "lucide-react"
|
||||||
import type { RefObject } from "react"
|
import type { RefObject } from "react"
|
||||||
|
|
||||||
import type { SelectionResults } from "../api/selection.types"
|
import { Badge } from "@/shared/ui/badge"
|
||||||
import { IncompleteEvaluationTable } from "./incomplete-evaluation-table"
|
import { Button } from "@/shared/ui/button"
|
||||||
import { getSelectionRunStatusPresentation } from "./selection-presentation"
|
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogClose,
|
DialogClose,
|
||||||
@@ -13,7 +12,10 @@ import {
|
|||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/shared/ui/dialog"
|
} 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 {
|
interface ExecutionStatusDrawerProps {
|
||||||
finalFocus: RefObject<HTMLElement | null>
|
finalFocus: RefObject<HTMLElement | null>
|
||||||
@@ -50,6 +52,37 @@ export function ExecutionStatusDrawer({
|
|||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<div className="min-h-0 flex-1 overflow-y-auto py-4">
|
<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} />
|
<IncompleteEvaluationTable failures={result.failures} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -73,3 +106,20 @@ export function ExecutionStatusDrawer({
|
|||||||
</Dialog>
|
</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 { useNavigate, useSearch } from "@tanstack/react-router"
|
||||||
|
|
||||||
import { Input } from "@/shared/ui/input"
|
import { Input } from "@/shared/ui/input"
|
||||||
import { Pagination } from "@/shared/ui/pagination"
|
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 type { SelectionResults, SelectionSignal } from "../api/selection.types"
|
||||||
|
import { ExecutionStatusTrigger } from "./execution-status-trigger"
|
||||||
import { SignalDetailPanel } from "./signal-detail-panel"
|
import { SignalDetailPanel } from "./signal-detail-panel"
|
||||||
import { SignalRecordList } from "./signal-record-list"
|
import { SignalRecordList } from "./signal-record-list"
|
||||||
import {
|
import {
|
||||||
@@ -18,11 +27,17 @@ import { SignalTable } from "./signal-table"
|
|||||||
const PAGE_SIZE_OPTIONS = [5, 10, 15] as const
|
const PAGE_SIZE_OPTIONS = [5, 10, 15] as const
|
||||||
|
|
||||||
interface SelectionResultsWorkbenchProps {
|
interface SelectionResultsWorkbenchProps {
|
||||||
|
drawerOpen: boolean
|
||||||
|
onOpenExecutionStatus: () => void
|
||||||
result: SelectionResults
|
result: SelectionResults
|
||||||
|
triggerRef: RefObject<HTMLButtonElement | null>
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SelectionResultsWorkbench({
|
export function SelectionResultsWorkbench({
|
||||||
|
drawerOpen,
|
||||||
|
onOpenExecutionStatus,
|
||||||
result,
|
result,
|
||||||
|
triggerRef,
|
||||||
}: SelectionResultsWorkbenchProps) {
|
}: SelectionResultsWorkbenchProps) {
|
||||||
const search = useSearch({ from: "/_workspace/selection" })
|
const search = useSearch({ from: "/_workspace/selection" })
|
||||||
const navigate = useNavigate({ from: "/selection" })
|
const navigate = useNavigate({ from: "/selection" })
|
||||||
@@ -53,7 +68,6 @@ export function SelectionResultsWorkbench({
|
|||||||
const selectedSignal =
|
const selectedSignal =
|
||||||
currentSignals.find((signal) => getSignalKey(signal) === selectedKey) ??
|
currentSignals.find((signal) => getSignalKey(signal) === selectedKey) ??
|
||||||
currentSignals[0]
|
currentSignals[0]
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (page > pageCount) {
|
if (page > pageCount) {
|
||||||
void navigate({
|
void navigate({
|
||||||
@@ -92,32 +106,49 @@ export function SelectionResultsWorkbench({
|
|||||||
return (
|
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)]">
|
<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">
|
<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
|
<Input
|
||||||
aria-label="搜索命中信号"
|
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)}
|
onChange={(event) => handleQueryChange(event.target.value)}
|
||||||
placeholder="搜索股票名称或代码"
|
placeholder="搜索股票名称或代码"
|
||||||
type="search"
|
type="search"
|
||||||
value={query}
|
value={query}
|
||||||
/>
|
/>
|
||||||
<select
|
<Select
|
||||||
aria-label="筛选信号分类"
|
items={signalCategoryOptions}
|
||||||
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"
|
onValueChange={(value) => {
|
||||||
onChange={(event) =>
|
if (typeof value === "string") {
|
||||||
handleCategoryChange(event.target.value as SignalCategoryFilter)
|
handleCategoryChange(value as SignalCategoryFilter)
|
||||||
}
|
}
|
||||||
|
}}
|
||||||
value={category}
|
value={category}
|
||||||
>
|
>
|
||||||
{signalCategoryOptions.map((option) => (
|
<SelectTrigger
|
||||||
<option key={option.value} value={option.value}>
|
aria-label="筛选信号分类"
|
||||||
{option.label}
|
className="h-11 w-full bg-background text-sm sm:w-auto sm:min-w-36 md:h-8"
|
||||||
</option>
|
>
|
||||||
))}
|
<SelectValue placeholder="筛选信号分类" />
|
||||||
</select>
|
</SelectTrigger>
|
||||||
<span className="text-xs tabular-nums text-muted-foreground sm:justify-self-end">
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
{signalCategoryOptions.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<span className="text-xs tabular-nums text-muted-foreground sm:ml-auto">
|
||||||
筛选结果 {signalsTotal} 条
|
筛选结果 {signalsTotal} 条
|
||||||
</span>
|
</span>
|
||||||
|
<ExecutionStatusTrigger
|
||||||
|
drawerOpen={drawerOpen}
|
||||||
|
onOpen={onOpenExecutionStatus}
|
||||||
|
result={result}
|
||||||
|
triggerRef={triggerRef}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex min-h-0 min-w-0 flex-col md:flex-1 md:overflow-hidden">
|
<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 />)
|
render(<SelectionResultsPage />)
|
||||||
|
|
||||||
expect(screen.getByText("执行完成")).toBeInTheDocument()
|
expect(screen.getByText("执行完成")).toBeInTheDocument()
|
||||||
|
expect(screen.queryByText("目标股票数")).not.toBeInTheDocument()
|
||||||
const table = screen.getByRole("table")
|
const table = screen.getByRole("table")
|
||||||
expect(table).toBeInTheDocument()
|
expect(table).toBeInTheDocument()
|
||||||
expect(within(table).getByText("原始 B1")).toBeInTheDocument()
|
expect(within(table).getByText("原始 B1")).toBeInTheDocument()
|
||||||
@@ -130,11 +131,25 @@ describe("SelectionResultsPage", () => {
|
|||||||
const trigger = screen.getByRole("button", {
|
const trigger = screen.getByRole("button", {
|
||||||
name: "查看执行状态：部分成功，未完成评估 1 条",
|
name: "查看执行状态：部分成功，未完成评估 1 条",
|
||||||
})
|
})
|
||||||
|
expect(trigger).toHaveAttribute(
|
||||||
|
"aria-controls",
|
||||||
|
"selection-execution-status-drawer",
|
||||||
|
)
|
||||||
|
expect(trigger).toHaveAttribute("aria-expanded", "false")
|
||||||
fireEvent.click(trigger)
|
fireEvent.click(trigger)
|
||||||
|
expect(trigger).toHaveAttribute("aria-expanded", "true")
|
||||||
|
|
||||||
const dialog = await screen.findByRole("dialog", {
|
const dialog = await screen.findByRole("dialog", {
|
||||||
name: "知行 B1 执行状态",
|
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")
|
const table = within(dialog).getByRole("table")
|
||||||
expect(
|
expect(
|
||||||
within(table).getByRole("columnheader", { name: "股票名称" }),
|
within(table).getByRole("columnheader", { name: "股票名称" }),
|
||||||
@@ -153,6 +168,7 @@ describe("SelectionResultsPage", () => {
|
|||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
|
expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
|
||||||
})
|
})
|
||||||
|
expect(trigger).toHaveAttribute("aria-expanded", "false")
|
||||||
expect(document.activeElement).toBe(trigger)
|
expect(document.activeElement).toBe(trigger)
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -175,6 +191,111 @@ describe("SelectionResultsPage", () => {
|
|||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
|
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", () => {
|
it("filters signals, updates the detail panel, and expands mobile details", () => {
|
||||||
@@ -298,14 +419,14 @@ describe("SelectionResultsPage", () => {
|
|||||||
).toBeInTheDocument()
|
).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({
|
useSelectionResults.mockReturnValue({
|
||||||
data: {
|
data: {
|
||||||
...selectedResult,
|
...selectedResult,
|
||||||
run_id: null,
|
run_id: null,
|
||||||
signals: [],
|
signals: [],
|
||||||
status: "no_data",
|
status: "no_data",
|
||||||
target_trade_date: null,
|
target_trade_date: "2026-08-08",
|
||||||
},
|
},
|
||||||
isError: false,
|
isError: false,
|
||||||
isPending: false,
|
isPending: false,
|
||||||
@@ -314,9 +435,12 @@ describe("SelectionResultsPage", () => {
|
|||||||
render(<SelectionResultsPage />)
|
render(<SelectionResultsPage />)
|
||||||
|
|
||||||
expect(screen.getByText("暂无策略结果")).toBeInTheDocument()
|
expect(screen.getByText("暂无策略结果")).toBeInTheDocument()
|
||||||
fireEvent.change(screen.getByLabelText("目标交易日"), {
|
fireEvent.click(screen.getByRole("button", { name: "目标交易日" }))
|
||||||
target: { value: "2026-08-08" },
|
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: "执行策略" }))
|
fireEvent.click(screen.getByRole("button", { name: "执行策略" }))
|
||||||
|
|
||||||
expect(mutate).toHaveBeenCalledWith(
|
expect(mutate).toHaveBeenCalledWith(
|
||||||
@@ -324,13 +448,28 @@ describe("SelectionResultsPage", () => {
|
|||||||
request: {
|
request: {
|
||||||
rerun: false,
|
rerun: false,
|
||||||
strategy: "zhixing_b1",
|
strategy: "zhixing_b1",
|
||||||
target_trade_date: "2026-08-08",
|
target_trade_date: "2026-08-09",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
expect.any(Object),
|
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", () => {
|
it("continues polling a persisted running run after page reload", () => {
|
||||||
useSelectionResults.mockReturnValue({
|
useSelectionResults.mockReturnValue({
|
||||||
data: { ...selectedResult, signals: [], status: "running" },
|
data: { ...selectedResult, signals: [], status: "running" },
|
||||||
|
|||||||
@@ -1,10 +1,4 @@
|
|||||||
import {
|
import { AlertTriangle, Play, RefreshCw, Search } from "lucide-react"
|
||||||
AlertTriangle,
|
|
||||||
CheckCircle2,
|
|
||||||
Play,
|
|
||||||
RefreshCw,
|
|
||||||
Search,
|
|
||||||
} from "lucide-react"
|
|
||||||
import { useSearch } from "@tanstack/react-router"
|
import { useSearch } from "@tanstack/react-router"
|
||||||
import { useRef, useState, type RefObject } from "react"
|
import { useRef, useState, type RefObject } from "react"
|
||||||
|
|
||||||
@@ -18,7 +12,6 @@ import type {
|
|||||||
SelectionResults,
|
SelectionResults,
|
||||||
SelectionResultsQuery,
|
SelectionResultsQuery,
|
||||||
} from "@/features/selection/api/selection.types"
|
} from "@/features/selection/api/selection.types"
|
||||||
import { Badge } from "@/shared/ui/badge"
|
|
||||||
import { Button } from "@/shared/ui/button"
|
import { Button } from "@/shared/ui/button"
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
@@ -35,17 +28,28 @@ import {
|
|||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/shared/ui/dialog"
|
} 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 { Skeleton } from "@/shared/ui/skeleton"
|
||||||
|
|
||||||
import { ExecutionStatusDrawer } from "../components/execution-status-drawer"
|
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"
|
import { SelectionResultsWorkbench } from "../components/selection-results-workbench"
|
||||||
|
|
||||||
const STRATEGY = "zhixing_b1" as const
|
const STRATEGY = "zhixing_b1" as const
|
||||||
|
|
||||||
export function SelectionResultsPage() {
|
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 [activeRunId, setActiveRunId] = useState<string | null>(null)
|
||||||
const [executionStatusDrawerOpen, setExecutionStatusDrawerOpen] =
|
const [executionStatusDrawerOpen, setExecutionStatusDrawerOpen] =
|
||||||
useState(false)
|
useState(false)
|
||||||
@@ -71,7 +75,9 @@ export function SelectionResultsPage() {
|
|||||||
const trigger = useTriggerSelectionRun()
|
const trigger = useTriggerSelectionRun()
|
||||||
|
|
||||||
const selectedTargetTradeDate =
|
const selectedTargetTradeDate =
|
||||||
targetTradeDate ?? results.data?.target_trade_date ?? ""
|
targetTradeDate === undefined
|
||||||
|
? (results.data?.target_trade_date ?? "")
|
||||||
|
: (targetTradeDate ?? "")
|
||||||
|
|
||||||
const selectedDateResult =
|
const selectedDateResult =
|
||||||
targetTradeDate &&
|
targetTradeDate &&
|
||||||
@@ -116,25 +122,13 @@ export function SelectionResultsPage() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleDateChange(value: string) {
|
function handleDateChange(value: Date | undefined) {
|
||||||
setTargetTradeDate(value)
|
setTargetTradeDate(value ? formatLocalTradeDate(value) : null)
|
||||||
setExecutionStatusDrawerOpen(false)
|
setExecutionStatusDrawerOpen(false)
|
||||||
setActiveRunId(null)
|
setActiveRunId(null)
|
||||||
trigger.reset()
|
trigger.reset()
|
||||||
}
|
}
|
||||||
|
|
||||||
const resultMetrics =
|
|
||||||
displayedResult &&
|
|
||||||
displayedResult.status !== "no_data" &&
|
|
||||||
displayedResult.status !== "running" ? (
|
|
||||||
<ResultMetrics
|
|
||||||
drawerOpen={executionStatusDrawerOpen}
|
|
||||||
onOpenExecutionStatus={() => setExecutionStatusDrawerOpen(true)}
|
|
||||||
result={displayedResult}
|
|
||||||
triggerRef={executionStatusTriggerRef}
|
|
||||||
/>
|
|
||||||
) : null
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PageLayout
|
<PageLayout
|
||||||
@@ -149,7 +143,6 @@ export function SelectionResultsPage() {
|
|||||||
triggerError={trigger.isError}
|
triggerError={trigger.isError}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
metrics={resultMetrics}
|
|
||||||
mode="bounded-workspace"
|
mode="bounded-workspace"
|
||||||
>
|
>
|
||||||
<div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-visible md:overflow-hidden">
|
<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 &&
|
{!isRunning &&
|
||||||
!hasQueryError &&
|
!hasQueryError &&
|
||||||
displayedResult?.status === "failed" ? (
|
displayedResult?.status === "failed" ? (
|
||||||
<FailureState result={displayedResult} />
|
<FailureState
|
||||||
|
drawerOpen={executionStatusDrawerOpen}
|
||||||
|
onOpenExecutionStatus={() => setExecutionStatusDrawerOpen(true)}
|
||||||
|
result={displayedResult}
|
||||||
|
triggerRef={executionStatusTriggerRef}
|
||||||
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
{!isRunning &&
|
{!isRunning &&
|
||||||
!hasQueryError &&
|
!hasQueryError &&
|
||||||
displayedResult &&
|
displayedResult &&
|
||||||
displayedResult.status !== "no_data" &&
|
displayedResult.status !== "no_data" &&
|
||||||
displayedResult.status !== "failed" ? (
|
displayedResult.status !== "failed" ? (
|
||||||
<ResultState result={displayedResult} />
|
<ResultState
|
||||||
|
drawerOpen={executionStatusDrawerOpen}
|
||||||
|
onOpenExecutionStatus={() => setExecutionStatusDrawerOpen(true)}
|
||||||
|
result={displayedResult}
|
||||||
|
triggerRef={executionStatusTriggerRef}
|
||||||
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -227,7 +230,7 @@ interface ExecutionToolbarProps {
|
|||||||
hasExistingResult: boolean
|
hasExistingResult: boolean
|
||||||
isFailedResult: boolean
|
isFailedResult: boolean
|
||||||
isRunning: boolean
|
isRunning: boolean
|
||||||
onDateChange: (value: string) => void
|
onDateChange: (value: Date | undefined) => void
|
||||||
onExecute: () => void
|
onExecute: () => void
|
||||||
selectedTargetTradeDate: string
|
selectedTargetTradeDate: string
|
||||||
triggerError: boolean
|
triggerError: boolean
|
||||||
@@ -245,33 +248,35 @@ function ExecutionToolbar({
|
|||||||
return (
|
return (
|
||||||
<div className="w-full space-y-1.5">
|
<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">
|
<div className="grid gap-1.5 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] sm:items-end">
|
||||||
<label
|
<div className="space-y-1 text-xs font-medium">
|
||||||
className="space-y-1 text-xs font-medium"
|
<span className="block">目标交易日</span>
|
||||||
htmlFor="target-trade-date"
|
<DatePicker
|
||||||
>
|
aria-label="目标交易日"
|
||||||
目标交易日
|
className="mt-1 h-11 w-full bg-background md:h-8"
|
||||||
<Input
|
onChange={onDateChange}
|
||||||
className="mt-1 h-11 bg-background md:h-8"
|
value={parseLocalTradeDate(selectedTargetTradeDate)}
|
||||||
id="target-trade-date"
|
|
||||||
onChange={(event) => onDateChange(event.target.value)}
|
|
||||||
type="date"
|
|
||||||
value={selectedTargetTradeDate}
|
|
||||||
/>
|
/>
|
||||||
</label>
|
</div>
|
||||||
<label
|
<div className="space-y-1 text-xs font-medium">
|
||||||
className="space-y-1 text-xs font-medium"
|
<span className="block">策略</span>
|
||||||
htmlFor="strategy-name"
|
<Select
|
||||||
>
|
|
||||||
策略
|
|
||||||
<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"
|
|
||||||
disabled
|
disabled
|
||||||
id="strategy-name"
|
items={[{ label: "知行 B1", value: STRATEGY }]}
|
||||||
value={STRATEGY}
|
value={STRATEGY}
|
||||||
>
|
>
|
||||||
<option value={STRATEGY}>知行 B1</option>
|
<SelectTrigger
|
||||||
</select>
|
aria-label="策略"
|
||||||
</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
|
<Button
|
||||||
className="h-11 w-full sm:w-auto md:h-8"
|
className="h-11 w-full sm:w-auto md:h-8"
|
||||||
disabled={!selectedTargetTradeDate || isRunning}
|
disabled={!selectedTargetTradeDate || isRunning}
|
||||||
@@ -302,56 +307,36 @@ function ExecutionToolbar({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function ResultMetrics({
|
interface ResultStateProps {
|
||||||
drawerOpen,
|
|
||||||
onOpenExecutionStatus,
|
|
||||||
result,
|
|
||||||
triggerRef,
|
|
||||||
}: {
|
|
||||||
drawerOpen: boolean
|
drawerOpen: boolean
|
||||||
onOpenExecutionStatus: () => void
|
onOpenExecutionStatus: () => void
|
||||||
result: SelectionResults
|
result: SelectionResults
|
||||||
triggerRef: RefObject<HTMLButtonElement | null>
|
triggerRef: RefObject<HTMLButtonElement | null>
|
||||||
}) {
|
}
|
||||||
const presentation = getSelectionRunStatusPresentation(result.status)
|
|
||||||
|
|
||||||
return (
|
function parseLocalTradeDate(value: string): Date | undefined {
|
||||||
<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]">
|
const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
|
||||||
<Metric label="目标股票数" value={result.target_count} />
|
if (!match) return undefined
|
||||||
<Metric label="实际参与数" value={result.eligible_count} />
|
|
||||||
<Metric label="命中股票数" value={result.selected_stock_count} />
|
const year = Number(match[1])
|
||||||
<Metric label="信号条数" value={result.signal_count} />
|
const month = Number(match[2])
|
||||||
<Metric
|
const day = Number(match[3])
|
||||||
label="数据覆盖率"
|
const date = new Date(year, month - 1, day)
|
||||||
value={`${(result.coverage * 100).toFixed(2)}%`}
|
|
||||||
/>
|
if (
|
||||||
{presentation ? (
|
date.getFullYear() !== year ||
|
||||||
<div className="space-y-1">
|
date.getMonth() !== month - 1 ||
|
||||||
<p className="text-[11px] text-muted-foreground">执行状态</p>
|
date.getDate() !== day
|
||||||
<Button
|
) {
|
||||||
aria-controls="selection-execution-status-drawer"
|
return undefined
|
||||||
aria-expanded={drawerOpen}
|
}
|
||||||
aria-haspopup="dialog"
|
return date
|
||||||
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}
|
function formatLocalTradeDate(value: Date): string {
|
||||||
ref={triggerRef}
|
const month = String(value.getMonth() + 1).padStart(2, "0")
|
||||||
variant="outline"
|
const day = String(value.getDate()).padStart(2, "0")
|
||||||
>
|
return `${value.getFullYear()}-${month}-${day}`
|
||||||
<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 LoadingState() {
|
function LoadingState() {
|
||||||
@@ -423,7 +408,12 @@ function NoDataState() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function FailureState({ result }: { result: SelectionResults }) {
|
function FailureState({
|
||||||
|
drawerOpen,
|
||||||
|
onOpenExecutionStatus,
|
||||||
|
result,
|
||||||
|
triggerRef,
|
||||||
|
}: ResultStateProps) {
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="gap-1.5 p-4">
|
<CardHeader className="gap-1.5 p-4">
|
||||||
@@ -440,49 +430,76 @@ function FailureState({ result }: { result: SelectionResults }) {
|
|||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="p-4 pt-0">
|
<CardContent className="p-4 pt-0">
|
||||||
<p className="text-sm text-muted-foreground">
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
目标交易日：
|
<p className="text-sm text-muted-foreground">
|
||||||
<span className="font-medium text-foreground">
|
目标交易日：
|
||||||
{result.target_trade_date}
|
<span className="font-medium text-foreground">
|
||||||
</span>
|
{result.target_trade_date}
|
||||||
，失败股票：
|
</span>
|
||||||
<span className="font-medium text-foreground">
|
，失败股票：
|
||||||
{result.failed_count}
|
<span className="font-medium text-foreground">
|
||||||
</span>
|
{result.failed_count}
|
||||||
</p>
|
</span>
|
||||||
|
</p>
|
||||||
|
<ExecutionStatusTrigger
|
||||||
|
drawerOpen={drawerOpen}
|
||||||
|
onOpen={onOpenExecutionStatus}
|
||||||
|
result={result}
|
||||||
|
triggerRef={triggerRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function ResultState({ result }: { result: SelectionResults }) {
|
function ResultState({
|
||||||
|
drawerOpen,
|
||||||
|
onOpenExecutionStatus,
|
||||||
|
result,
|
||||||
|
triggerRef,
|
||||||
|
}: ResultStateProps) {
|
||||||
return result.signal_count === 0 ? (
|
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 (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="gap-1.5 p-4">
|
<CardHeader className="gap-1.5 p-4">
|
||||||
<CardTitle className="text-xl">本次没有命中信号</CardTitle>
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||||
<CardDescription>
|
<div className="space-y-1.5">
|
||||||
目标交易日数据完整，但没有符合公式条件的股票。
|
<CardTitle className="text-xl">本次没有命中信号</CardTitle>
|
||||||
</CardDescription>
|
<CardDescription>
|
||||||
|
目标交易日数据完整，但没有符合公式条件的股票。
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
<ExecutionStatusTrigger
|
||||||
|
drawerOpen={drawerOpen}
|
||||||
|
onOpen={onOpenExecutionStatus}
|
||||||
|
result={result}
|
||||||
|
triggerRef={triggerRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</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,
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user