diff --git a/.trellis/tasks/08-10-selection-results-filter-state-ui/design.md b/.trellis/tasks/08-10-selection-results-filter-state-ui/design.md index e4abb82..aa1a55d 100644 --- a/.trellis/tasks/08-10-selection-results-filter-state-ui/design.md +++ b/.trellis/tasks/08-10-selection-results-filter-state-ui/design.md @@ -41,10 +41,14 @@ SelectionResultsPage `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 状态提供明确反馈。 +SelectContent 对齐官方 Base UI 的默认交互：Positioner 使用 `side="bottom"`、`align="center"` 和 `alignItemWithTrigger`，Popup 使用 `w-(--anchor-width)` 跟随触发器宽度，并保留 `align`、`side`、offset 等覆盖参数。这样鼠标打开时选中项会与触发器当前值对齐，键盘打开时仍能保持常规焦点顺序。 + ### 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 层理解交易日概念。 +触发器采用官方示例的文本值、右侧下拉指示和 `justify-between` 布局，弹层使用 `w-auto` 并从触发器起始边缘对齐。Calendar 使用 `react-day-picker` 的默认 class map、`--cell-size` 和自定义 DayButton，保持日期网格、月份导航、选中态和键盘焦点与官方 Base UI 示例接近，只替换为项目主题 token。 + 补充 `date-fns` 与 `react-day-picker` 为显式前端依赖。日期转换使用本地年月日构造/格式化，避免直接解析 ISO 日期造成时区前移或后移。 ## 4. Data Flow and State @@ -60,11 +64,27 @@ SelectionResultsPage ├─ SelectionResultsWorkbench │ ├─ Select(category) → navigate(search: { category, page: 1 }) │ └─ status button → setExecutionStatusDrawerOpen(true) - └─ ExecutionStatusDrawer(result) - ├─ result summary metrics - └─ result.failures +└─ ExecutionStatusDrawer(result) + ├─ result summary metrics + └─ result.failures ``` +### Components preview route + +```text +AppLayout +├─ primaryNavigation → /components +├─ mobilePrimaryNavigation → /components +└─ ComponentsPreviewPage + ├─ Button / Badge + ├─ Input / Select + ├─ DatePicker / Calendar + ├─ Popover + └─ Separator / Skeleton +``` + +预览页只持有演示状态，不触碰业务 query 或 URL search；它作为 shared/ui 的人工回归入口，也作为官方示例布局对照页。 + 目标日期继续是页面局部状态；搜索、分类和分页继续是 TanStack Router search 状态。Select 不直接操作 URL，feature handler 负责转换和分页重置。抽屉只接收当前 `displayedResult`，切换日期或开始执行时关闭并清理已有局部执行状态。 ## 5. Layout and Accessibility diff --git a/.trellis/tasks/08-10-selection-results-filter-state-ui/implement.md b/.trellis/tasks/08-10-selection-results-filter-state-ui/implement.md index 602b859..af37650 100644 --- a/.trellis/tasks/08-10-selection-results-filter-state-ui/implement.md +++ b/.trellis/tasks/08-10-selection-results-filter-state-ui/implement.md @@ -28,6 +28,13 @@ - [x] 将执行摘要指标放入 `ExecutionStatusDrawer`，并把执行状态按钮接到 `SelectionResultsWorkbench` 信号列表顶部；失败和无信号结果保留按需入口。 - [x] 保留既有失败表格、空状态、主从信号选择、移动展开、分页、重执行确认和查询状态分支。 +### 3.1 Shared UI 预览入口 + +- [x] 新增 `/components` 组件预览路由和主导航入口，桌面侧边栏与移动底部导航均可访问。 +- [x] 预览 Button、Badge、Input、Select、DatePicker、Calendar、Popover、Separator 和 Skeleton，并覆盖选择、弹层、禁用和加载状态。 +- [x] 将 DatePicker/Calendar 的触发器、固定宽度和日历网格调整到接近官方 Base UI 示例的布局与交互。 +- [x] 将 SelectContent 的锚点宽度、Positioner 对齐和选中项对齐行为调整到接近官方 Base UI 示例。 + ### 4. 测试与验证 - [x] 更新页面测试，覆盖 DatePicker 选中/清空日期、两个 Select 的可见值/回调、无常驻指标区、顶部状态按钮、抽屉摘要和焦点恢复。 @@ -52,12 +59,14 @@ pnpm build - `pnpm lint`：通过。 - `pnpm typecheck`：通过。 -- `pnpm test`：通过，4 个测试文件、26 项测试。 +- `pnpm test`：通过，5 个测试文件、30 项测试。 - `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 清空后日期被服务器结果回填的边界问题。 +- 本轮浏览器验证：组件预览页桌面/移动截图通过；DatePicker 桌面触发器宽 212px、弹层 `w-auto` 且无页面级水平溢出；选股页桌面目标日期和策略控件均为 212px，移动端控件随容器铺满且无水平溢出。 +- 本轮 Select 对齐检查：补齐 `alignItemWithTrigger`、`w-(--anchor-width)`、可用高度滚动和 offset 类型；桌面端弹层宽度跟随触发器，移动端弹层未产生水平溢出。 ## Risky Files and Rollback Points diff --git a/.trellis/tasks/08-10-selection-results-filter-state-ui/prd.md b/.trellis/tasks/08-10-selection-results-filter-state-ui/prd.md index 3ae4753..44a08cb 100644 --- a/.trellis/tasks/08-10-selection-results-filter-state-ui/prd.md +++ b/.trellis/tasks/08-10-selection-results-filter-state-ui/prd.md @@ -33,6 +33,14 @@ - 在 `zhixing-web/src/shared/ui/` 新增可复用的 `Select`、`Popover`、`Calendar` 和 `DatePicker` 组合组件，底层复用现有 `@base-ui/react`、`Button`、`cn` 以及日期选择依赖。 - shared UI 只负责通用交互、语义、样式和原生属性扩展，不读取 `selection` API、路由或业务类型。 - 新组件遵循项目现有的具名导出、小写文件名、Tailwind token、`cn` 合并和严格 TypeScript 约束。 +- DatePicker 的触发器、弹层宽度、日历网格密度和焦点交互应尽量贴近 shadcn/ui Base UI 官方示例；保留项目当前主题色和中文日期语义。 +- Select 的弹层应遵循官方 Base UI 的锚点宽度和选中项对齐行为，避免菜单以内容最小宽度或普通居中下拉方式偏离触发器。 + +### R4. Shared UI 预览入口 + +- 增加一个可从主导航进入的“组件预览”页面，展示当前 shared/ui 的主要组件和关键状态。 +- 预览页至少覆盖 Button、Badge、Input、Select、DatePicker、Calendar、Popover、Separator 和 Skeleton，并提供真实的选择、打开/关闭、禁用和加载状态交互。 +- 组件预览页不依赖业务 API，不改变现有业务页面的数据流；桌面和移动端均可通过菜单访问。 ## Out of Scope @@ -49,6 +57,7 @@ - [x] 有结果时，信号列表顶部可见执行状态按钮；点击后右侧抽屉展示摘要指标和未完成评估表格，关闭后焦点回到该按钮；失败和无信号结果也保留按需入口。 - [x] 无失败记录时抽屉仍可打开并显示“暂无未完成评估”；主页面不再出现独立的常驻指标区或内联失败明细卡片。 - [x] shared UI 组件不依赖 `features/selection`，没有直接业务分支；组件和页面测试覆盖关键可见交互。 +- [x] 主导航新增“组件预览”入口，页面集中展示 shared/ui 组件和关键交互状态，桌面与移动端均可访问。 - [ ] `pnpm format:check`、`pnpm lint`、`pnpm typecheck`、`pnpm test` 和 `pnpm build` 通过；lint/typecheck/test/build 与变更文件格式检查通过，完整格式检查仍被未改动的 `DESIGN.md` 阻断；浏览器验证已覆盖桌面/移动视口、Select、DatePicker、抽屉和页面级水平溢出。 ## Open Questions diff --git a/zhixing-web/src/app/layout/app-layout.tsx b/zhixing-web/src/app/layout/app-layout.tsx index e4b6fbc..a2b88fe 100644 --- a/zhixing-web/src/app/layout/app-layout.tsx +++ b/zhixing-web/src/app/layout/app-layout.tsx @@ -24,6 +24,7 @@ import { function useActiveRoutePath() { const matchRoute = useMatchRoute() if (matchRoute({ to: "/selection", fuzzy: true })) return "/selection" + if (matchRoute({ to: "/components", fuzzy: true })) return "/components" if (matchRoute({ to: "/", fuzzy: false })) return "/" return "/" } diff --git a/zhixing-web/src/app/layout/navigation.ts b/zhixing-web/src/app/layout/navigation.ts index c6e4e0a..8528827 100644 --- a/zhixing-web/src/app/layout/navigation.ts +++ b/zhixing-web/src/app/layout/navigation.ts @@ -2,6 +2,7 @@ import { BarChart3, BrainCircuit, ClipboardCheck, + Component, LayoutDashboard, type LucideIcon, } from "lucide-react" @@ -45,9 +46,16 @@ export const primaryNavigation: readonly NavigationItem[] = [ icon: BrainCircuit, availability: "available", }, + { + id: "components", + label: "组件预览", + to: "/components", + icon: Component, + availability: "available", + }, ] as const -export const mobileNavigationMaxItems = 4 +export const mobileNavigationMaxItems = 5 export const mobilePrimaryNavigation: readonly NavigationItem[] = primaryNavigation.slice(0, mobileNavigationMaxItems) @@ -71,4 +79,9 @@ export const routePresentation: Record = { breadcrumb: "研究工作台", title: "知行 B1 执行结果", }, + "/components": { + id: "components", + breadcrumb: "研究工作台", + title: "组件预览", + }, } diff --git a/zhixing-web/src/features/components/pages/components-preview-page.test.tsx b/zhixing-web/src/features/components/pages/components-preview-page.test.tsx new file mode 100644 index 0000000..4ecf808 --- /dev/null +++ b/zhixing-web/src/features/components/pages/components-preview-page.test.tsx @@ -0,0 +1,72 @@ +import { fireEvent, render, screen, within } from "@testing-library/react" +import { describe, expect, it } from "vitest" + +import { ComponentsPreviewPage } from "./components-preview-page" + +describe("ComponentsPreviewPage", () => { + it("previews and updates the shared select", async () => { + render() + + const select = screen.getByRole("combobox", { name: "信号分类" }) + expect(select).toHaveTextContent("全部信号") + + fireEvent.click(select) + const option = await screen.findByRole("option", { name: "超卖类" }) + fireEvent.pointerDown(option, { pointerType: "mouse" }) + fireEvent.click(option) + + expect(select).toHaveTextContent("超卖类") + expect(screen.getByRole("status", { name: "当前选择" })).toHaveTextContent( + "当前选择：超卖类", + ) + }) + + it("previews date picker selection and clearing", async () => { + render() + + const selectedDatePicker = screen.getByRole("button", { + name: "已选择日期", + }) + expect(selectedDatePicker).toHaveTextContent("2026-08-07") + + fireEvent.click(selectedDatePicker) + const popover = document.querySelector( + '[data-slot="popover-content"]', + ) as HTMLElement + expect(popover).toBeInTheDocument() + const calendar = within(popover).getByRole("grid", { name: /2026年8月/ }) + const day = within(calendar).getByRole("button", { name: /2026年8月8日/ }) + fireEvent.click(day) + + expect(selectedDatePicker).toHaveTextContent("2026-08-08") + fireEvent.click(screen.getByRole("button", { name: "清空已选择日期" })) + expect(selectedDatePicker).toHaveTextContent("选择日期") + }) + + it("previews popover open and close behavior", async () => { + render() + + const trigger = screen.getByRole("button", { name: "打开交互说明" }) + expect(trigger).toHaveAttribute("aria-expanded", "false") + + fireEvent.click(trigger) + const popup = await screen.findByText("弹层已打开") + expect(popup).toBeInTheDocument() + expect(trigger).toHaveAttribute("aria-expanded", "true") + + fireEvent.click(screen.getByRole("button", { name: "关闭弹层" })) + expect(screen.queryByText("弹层已打开")).not.toBeInTheDocument() + expect(trigger).toHaveAttribute("aria-expanded", "false") + }) + + it("shows disabled and loading states", () => { + render() + + expect(screen.getByRole("button", { name: "禁用状态" })).toBeDisabled() + expect(screen.getByRole("button", { name: "禁用日期" })).toBeDisabled() + expect( + screen.getByRole("button", { name: "清空已选择日期" }), + ).not.toBeDisabled() + expect(document.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(2) + }) +}) diff --git a/zhixing-web/src/features/components/pages/components-preview-page.tsx b/zhixing-web/src/features/components/pages/components-preview-page.tsx new file mode 100644 index 0000000..2a943e4 --- /dev/null +++ b/zhixing-web/src/features/components/pages/components-preview-page.tsx @@ -0,0 +1,286 @@ +import { format } from "date-fns" +import { useState, type ReactNode } from "react" + +import { PageLayout } from "@/app/layout/page-layout" +import { Badge } from "@/shared/ui/badge" +import { Button } from "@/shared/ui/button" +import { Calendar } from "@/shared/ui/calendar" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/shared/ui/card" +import { DatePicker } from "@/shared/ui/date-picker" +import { Input } from "@/shared/ui/input" +import { + Popover, + PopoverClose, + PopoverContent, + PopoverTrigger, +} from "@/shared/ui/popover" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/shared/ui/select" +import { Separator } from "@/shared/ui/separator" +import { Skeleton } from "@/shared/ui/skeleton" + +const signalTypeOptions = [ + { label: "全部信号", value: "all" }, + { label: "原始 B1", value: "original" }, + { label: "超卖类", value: "oversold" }, +] as const + +export function ComponentsPreviewPage() { + const [signalType, setSignalType] = useState("all") + const [selectedDate, setSelectedDate] = useState( + () => new Date(2026, 7, 7), + ) + const [calendarDate, setCalendarDate] = useState( + () => new Date(2026, 7, 7), + ) + const [popoverOpen, setPopoverOpen] = useState(false) + const signalTypeLabel = + signalTypeOptions.find((option) => option.value === signalType)?.label ?? + "全部信号" + + return ( + +
+
+

+ Shared UI +

+

组件预览

+

+ 集中查看项目 shared/ui 的视觉 + token、尺寸和交互状态。这里的示例都是真实组件，后续新增组件可以直接在本页补充验证。 +

+
+ +
+ +
+ + + + + +
+ +
+ 已完成 + 待确认 + 失败 +
+ + + +
+
+ + +
+
+ + +
+
+

+ 当前选择： + + {signalTypeLabel} + +

+ + + +
+
+
+
+ + +

+ {selectedDate + ? `值：${format(selectedDate, "yyyy-MM-dd")}` + : "尚未选择日期"} +

+
+
+ + 空值与禁用态 + + + + +
+
+
+ 交互提示：打开日期弹层后，可以使用方向键移动、Enter + 选择、Escape 关闭；月份切换按钮与日期按钮都保留可见焦点。 +
+
+
+ +
+
+ + + + + + } + > + 打开交互说明 + + +
+
+

弹层已打开

+

+ 这里可以承载筛选提示、轻量编辑或上下文信息。 +

+
+ }> + 关闭弹层 + +
+ + +

+ 当前状态：{popoverOpen ? "已打开" : "已关闭"} +

+ + + +
+
+ 数据同步状态 + 正常 +
+ + + +
+ +
+
+ + ) +} + +function PreviewCard({ + children, + className, + description, + title, +}: { + children: ReactNode + className?: string + description: string + title: string +}) { + return ( + + + {title} + {description} + + {children} + + ) +} diff --git a/zhixing-web/src/features/selection/pages/selection-results-page.tsx b/zhixing-web/src/features/selection/pages/selection-results-page.tsx index 4004515..36ea777 100644 --- a/zhixing-web/src/features/selection/pages/selection-results-page.tsx +++ b/zhixing-web/src/features/selection/pages/selection-results-page.tsx @@ -247,7 +247,7 @@ function ExecutionToolbar({ }: ExecutionToolbarProps) { return (
-
+
目标交易日 workspaceRoute, + path: "/components", + component: ComponentsPreviewPage, +}) + export const routeTree = rootRoute.addChildren([ - workspaceRoute.addChildren([indexRoute, selectionRoute]), + workspaceRoute.addChildren([indexRoute, selectionRoute, componentsRoute]), ]) diff --git a/zhixing-web/src/shared/ui/calendar.tsx b/zhixing-web/src/shared/ui/calendar.tsx index f8a775e..2f2b907 100644 --- a/zhixing-web/src/shared/ui/calendar.tsx +++ b/zhixing-web/src/shared/ui/calendar.tsx @@ -1,7 +1,14 @@ +import * as React from "react" import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react" -import { DayPicker, type DayPickerProps } from "react-day-picker" +import { + DayPicker, + getDefaultClassNames, + type DayButtonProps, + type DayPickerProps, +} from "react-day-picker" import { zhCN } from "react-day-picker/locale" +import { Button } from "@/shared/ui/button" import { cn } from "@/shared/ui/utils" function Calendar({ @@ -10,36 +17,94 @@ function Calendar({ showOutsideDays = true, ...props }: DayPickerProps) { + const defaultClassNames = getDefaultClassNames() + return ( span]:text-xs [&>span]:opacity-70", + defaultClassNames.day_button, + ), + range_start: cn( + "day-range-start rounded-(--cell-radius) bg-muted", + defaultClassNames.range_start, + ), + range_middle: cn( + "rounded-none bg-muted", + defaultClassNames.range_middle, + ), + range_end: cn( + "day-range-end rounded-(--cell-radius) bg-muted", + defaultClassNames.range_end, + ), + selected: cn( + "rounded-(--cell-radius) bg-muted", + defaultClassNames.selected, + ), + today: cn( + "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", + defaultClassNames.today, + ), + outside: cn( + "text-muted-foreground opacity-50 data-[selected=true]:text-muted-foreground data-[selected=true]:opacity-30", + defaultClassNames.outside, + ), + disabled: cn( + "text-muted-foreground opacity-50", + defaultClassNames.disabled, + ), + hidden: cn("invisible", defaultClassNames.hidden), ...classNames, }} components={{ @@ -60,6 +125,7 @@ function Calendar({ /> ) }, + DayButton: CalendarDayButton, }} locale={zhCN} showOutsideDays={showOutsideDays} @@ -68,4 +134,44 @@ function Calendar({ ) } +function CalendarDayButton({ + className, + day, + modifiers, + ...props +}: DayButtonProps) { + const ref = React.useRef(null) + const defaultClassNames = getDefaultClassNames() + + React.useEffect(() => { + if (modifiers.focused) { + ref.current?.focus() + } + }, [modifiers.focused]) + + return ( +