Merge pull request 'feat(shared-ui): 对齐官方控件并增加组件预览' (#10) from develop into main

Reviewed-on: sakibcc/zhixing-system#10

.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)
+└─ ExecutionStatusDrawer(result)
-       ├─ result summary metrics
+   ├─ result summary metrics
-       └─ result.failures
+   └─ 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

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 "/"
 }

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<string, RoutePresentation> = {
     breadcrumb: "研究工作台",
     title: "知行 B1 执行结果",
   },
+  "/components": {
+    id: "components",
+    breadcrumb: "研究工作台",
+    title: "组件预览",
+  },
 }

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(<ComponentsPreviewPage />)
+
+    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(<ComponentsPreviewPage />)
+
+    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(<ComponentsPreviewPage />)
+
+    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(<ComponentsPreviewPage />)
+
+    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)
+  })
+})

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<Date | undefined>(
+    () => new Date(2026, 7, 7),
+  )
+  const [calendarDate, setCalendarDate] = useState<Date | undefined>(
+    () => new Date(2026, 7, 7),
+  )
+  const [popoverOpen, setPopoverOpen] = useState(false)
+  const signalTypeLabel =
+    signalTypeOptions.find((option) => option.value === signalType)?.label ??
+    "全部信号"
+
+  return (
+    <PageLayout>
+      <div className="mx-auto w-full max-w-6xl space-y-6">
+        <header className="space-y-2">
+          <p className="text-xs font-medium tracking-[0.12em] text-muted-foreground uppercase">
+            Shared UI
+          </p>
+          <h1 className="text-2xl font-semibold tracking-tight">组件预览</h1>
+          <p className="max-w-2xl text-sm text-muted-foreground">
+            集中查看项目 shared/ui 的视觉
+            token、尺寸和交互状态。这里的示例都是真实组件，后续新增组件可以直接在本页补充验证。
+          </p>
+        </header>
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          <PreviewCard
+            description="保留项目主题色，同时提供清晰的 hover、focus 和 disabled 状态。"
+            title="Button & Badge"
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <Button>主要操作</Button>
+              <Button variant="outline">次要操作</Button>
+              <Button variant="secondary">辅助操作</Button>
+              <Button variant="ghost">幽灵按钮</Button>
+              <Button disabled>禁用状态</Button>
+            </div>
+            <Separator className="my-4" />
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge>已完成</Badge>
+              <Badge variant="outline">待确认</Badge>
+              <Badge variant="destructive">失败</Badge>
+            </div>
+          </PreviewCard>
+
+          <PreviewCard
+            description="Select 使用 Base UI 的弹层和键盘语义，字段值由页面状态控制。"
+            title="Select & Input"
+          >
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="preview-search">
+                  搜索输入
+                </label>
+                <Input id="preview-search" placeholder="搜索股票代码或名称" />
+              </div>
+              <div className="space-y-2">
+                <label
+                  className="text-sm font-medium"
+                  id="preview-signal-label"
+                >
+                  信号分类
+                </label>
+                <Select
+                  items={signalTypeOptions}
+                  onValueChange={(value) => setSignalType(value ?? "all")}
+                  value={signalType}
+                >
+                  <SelectTrigger
+                    aria-labelledby="preview-signal-label"
+                    className="w-full"
+                  >
+                    <SelectValue placeholder="选择信号分类" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {signalTypeOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <p
+              aria-label="当前选择"
+              className="mt-4 text-sm text-muted-foreground"
+              role="status"
+            >
+              当前选择：
+              <span className="font-medium text-foreground">
+                {signalTypeLabel}
+              </span>
+            </p>
+          </PreviewCard>
+
+          <PreviewCard
+            className="lg:col-span-2"
+            description="DatePicker 采用官方示例的文本触发器、右侧下拉指示和 w-auto 日历弹层；主题色仍由项目 token 提供。"
+            title="DatePicker & Calendar"
+          >
+            <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_auto]">
+              <div className="space-y-5">
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <label
+                      className="text-sm font-medium"
+                      htmlFor="preview-date"
+                    >
+                      已选择日期
+                    </label>
+                    <DatePicker
+                      aria-label="已选择日期"
+                      className="w-full max-w-[212px]"
+                      id="preview-date"
+                      onChange={setSelectedDate}
+                      value={selectedDate}
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      {selectedDate
+                        ? `值：${format(selectedDate, "yyyy-MM-dd")}`
+                        : "尚未选择日期"}
+                    </p>
+                  </div>
+                  <div className="space-y-2">
+                    <span className="block text-sm font-medium">
+                      空值与禁用态
+                    </span>
+                    <DatePicker
+                      aria-label="空值日期"
+                      className="w-full max-w-[212px]"
+                      placeholder="选择目标日期"
+                    />
+                    <DatePicker
+                      aria-label="禁用日期"
+                      className="w-full max-w-[212px]"
+                      disabled
+                      placeholder="日期不可用"
+                    />
+                    <Button
+                      className="mt-1"
+                      disabled={!selectedDate}
+                      onClick={() => setSelectedDate(undefined)}
+                      size="sm"
+                      variant="outline"
+                    >
+                      清空已选择日期
+                    </Button>
+                  </div>
+                </div>
+                <div className="rounded-lg border border-dashed border-border bg-muted/30 p-3 text-sm text-muted-foreground">
+                  交互提示：打开日期弹层后，可以使用方向键移动、Enter
+                  选择、Escape 关闭；月份切换按钮与日期按钮都保留可见焦点。
+                </div>
+              </div>
+              <div className="rounded-xl border border-border bg-background p-2">
+                <Calendar
+                  aria-label="日历组件示例"
+                  defaultMonth={calendarDate}
+                  mode="single"
+                  onSelect={setCalendarDate}
+                  selected={calendarDate}
+                />
+              </div>
+            </div>
+          </PreviewCard>
+
+          <PreviewCard
+            description="Popover 负责定位、外部点击关闭、Escape 关闭和触发器焦点恢复。"
+            title="Popover"
+          >
+            <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+              <PopoverTrigger
+                render={
+                  <Button aria-expanded={popoverOpen} variant="outline" />
+                }
+              >
+                打开交互说明
+              </PopoverTrigger>
+              <PopoverContent align="start" className="w-80">
+                <div className="space-y-3">
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium">弹层已打开</p>
+                    <p className="text-sm text-muted-foreground">
+                      这里可以承载筛选提示、轻量编辑或上下文信息。
+                    </p>
+                  </div>
+                  <PopoverClose render={<Button size="sm" variant="outline" />}>
+                    关闭弹层
+                  </PopoverClose>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p
+              aria-label="弹层状态"
+              className="mt-4 text-sm text-muted-foreground"
+              role="status"
+            >
+              当前状态：{popoverOpen ? "已打开" : "已关闭"}
+            </p>
+          </PreviewCard>
+
+          <PreviewCard
+            description="基础容器和反馈状态也在同一处展示，便于发现尺寸和间距不一致。"
+            title="Surface & Feedback"
+          >
+            <div className="space-y-3">
+              <div className="flex items-center justify-between rounded-lg border border-border bg-muted/30 px-3 py-2 text-sm">
+                <span>数据同步状态</span>
+                <Badge>正常</Badge>
+              </div>
+              <Separator />
+              <Skeleton className="h-4 w-2/3" />
+              <Skeleton className="h-8 w-full" />
+            </div>
+          </PreviewCard>
+        </div>
+      </div>
+    </PageLayout>
+  )
+}
+
+function PreviewCard({
+  children,
+  className,
+  description,
+  title,
+}: {
+  children: ReactNode
+  className?: string
+  description: string
+  title: string
+}) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-base">{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  )
+}

zhixing-web/src/features/selection/pages/selection-results-page.tsx

@@ -247,7 +247,7 @@ function ExecutionToolbar({
 }: ExecutionToolbarProps) {
   return (
     <div className="w-full space-y-1.5">
-      <div className="grid gap-1.5 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] sm:items-end">
+      <div className="grid gap-1.5 sm:grid-cols-[13.25rem_13.25rem_auto] sm:items-end">
         <div className="space-y-1 text-xs font-medium">
           <span className="block">目标交易日</span>
           <DatePicker

zhixing-web/src/routes/route-tree.tsx

@@ -1,6 +1,7 @@
 import { createRootRoute, createRoute, Outlet } from "@tanstack/react-router"
 
 import { AppLayout } from "@/app/layout/app-layout"
+import { ComponentsPreviewPage } from "@/features/components/pages/components-preview-page"
 import { HomePage } from "@/features/home/pages/home-page"
 import {
   selectionCategoryFilters,
@@ -47,6 +48,12 @@ const selectionRoute = createRoute({
   component: SelectionResultsPage,
 })
 
+const componentsRoute = createRoute({
+  getParentRoute: () => workspaceRoute,
+  path: "/components",
+  component: ComponentsPreviewPage,
+})
+
 export const routeTree = rootRoute.addChildren([
-  workspaceRoute.addChildren([indexRoute, selectionRoute]),
+  workspaceRoute.addChildren([indexRoute, selectionRoute, componentsRoute]),
 ])

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 (
     <DayPicker
-      className={cn("p-3", className)}
+      className={cn(
+        "group/calendar w-fit bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:2.25rem]",
+        className,
+      )}
       classNames={{
-        months: "flex flex-col gap-4 sm:flex-row",
+        root: cn("w-fit", defaultClassNames.root),
-        month: "flex w-full flex-col gap-4",
+        months: cn(
-        month_caption: "flex items-center justify-center pt-1",
+          "relative flex flex-col gap-4 md:flex-row",
-        caption_label: "text-sm font-medium",
+          defaultClassNames.months,
-        nav: "flex items-center gap-1",
+        ),
-        button_previous:
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-          "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",
+        nav: cn(
-        button_next:
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          "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",
+          defaultClassNames.nav,
-        month_grid: "w-full border-collapse",
+        ),
-        weekdays: "flex",
+        button_previous: cn(
-        weekday:
+          "size-(--cell-size) p-0 select-none",
-          "w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground",
+          defaultClassNames.button_previous,
-        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",
+        button_next: cn(
-        day_button:
+          "size-(--cell-size) p-0 select-none",
-          "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",
+          defaultClassNames.button_next,
-        range_start: "day-range-start rounded-l-md bg-muted",
+        ),
-        range_middle: "rounded-none bg-muted",
+        month_caption: cn(
-        range_end: "day-range-end rounded-r-md bg-muted",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-        selected: "rounded-md bg-primary text-primary-foreground",
+          defaultClassNames.month_caption,
-        today: "bg-muted text-foreground",
+        ),
-        outside:
+        caption_label: cn(
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-muted/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+          "select-none text-sm font-medium",
-        disabled: "text-muted-foreground opacity-50",
+          defaultClassNames.caption_label,
-        hidden: "invisible",
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-3 has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none",
+          defaultClassNames.day,
+        ),
+        day_button: cn(
+          "relative z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-(--cell-radius) data-[range-middle=true]:rounded-none data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>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<HTMLButtonElement>(null)
+  const defaultClassNames = getDefaultClassNames()
+
+  React.useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus()
+    }
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-(--cell-radius) data-[range-middle=true]:rounded-none data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day_button,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
 export { Calendar }

zhixing-web/src/shared/ui/date-picker.tsx

@@ -1,11 +1,12 @@
 import { format } from "date-fns"
-import { CalendarDays } from "lucide-react"
+import { ChevronDown } 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"
+import { cn } from "@/shared/ui/utils"
 
 export interface DatePickerProps extends Omit<
   ComponentProps<typeof Button>,
@@ -41,15 +42,18 @@ export function DatePicker({
             data-slot="date-picker-trigger"
             disabled={disabled}
             variant="outline"
-            className={className}
+            className={cn(
+              "justify-between text-left font-normal data-[empty=true]:text-muted-foreground",
+              className,
+            )}
             {...props}
           />
         }
       >
-        <CalendarDays aria-hidden="true" data-icon="inline-start" />
         {value ? format(value, "yyyy-MM-dd") : <span>{placeholder}</span>}
+        <ChevronDown aria-hidden="true" data-icon="inline-end" />
       </PopoverTrigger>
-      <PopoverContent align="start" className="w-auto p-0">
+      <PopoverContent align="start" className="w-auto overflow-hidden p-0">
         <Calendar
           defaultMonth={value}
           mode="single"

zhixing-web/src/shared/ui/popover.tsx

@@ -12,19 +12,25 @@ function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
 
 function PopoverContent({
   align = "center",
+  alignOffset = 0,
   className,
   children,
+  side = "bottom",
   sideOffset = 4,
   ...props
 }: PopoverPrimitive.Popup.Props & {
   align?: PopoverPrimitive.Positioner.Props["align"]
-  sideOffset?: number
+  alignOffset?: PopoverPrimitive.Positioner.Props["alignOffset"]
+  side?: PopoverPrimitive.Positioner.Props["side"]
+  sideOffset?: PopoverPrimitive.Positioner.Props["sideOffset"]
 }) {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
         data-slot="popover-positioner"
         align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
         className="z-50 outline-none"
       >

zhixing-web/src/shared/ui/select.tsx

@@ -75,24 +75,37 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
 }
 
 function SelectContent({
+  align = "center",
+  alignItemWithTrigger = true,
+  alignOffset = 0,
   className,
   children,
+  side = "bottom",
   sideOffset = 4,
   ...props
 }: SelectPrimitive.Popup.Props & {
-  sideOffset?: number
+  align?: SelectPrimitive.Positioner.Props["align"]
+  alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"]
+  alignOffset?: SelectPrimitive.Positioner.Props["alignOffset"]
+  side?: SelectPrimitive.Positioner.Props["side"]
+  sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"]
 }) {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Positioner
         data-slot="select-positioner"
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className="z-50 outline-none"
+        className="isolate z-50"
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
           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",
+            "relative z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto 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 data-[align-trigger=true]:animate-none",
             className,
           )}
           {...props}
@@ -100,7 +113,7 @@ function SelectContent({
           <SelectScrollUpButton />
           <SelectPrimitive.List
             data-slot="select-list"
-            className="max-h-72 overflow-y-auto p-1"
+            className="max-h-(--available-height) overflow-y-auto p-1"
           >
             {children}
           </SelectPrimitive.List>