feat(shared-ui): 对齐官方控件并增加组件预览

.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

.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
 

.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