@teamix-evo/ui 0.3.0 → 0.4.0

package/src/components/page-shell/page-shell.stories.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Bell, Home, Inbox, Settings, Users } from 'lucide-react';
+
+import { PageShell } from './page-shell';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarTrigger,
+} from '@/components/sidebar/sidebar';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof PageShell> = {
+  title: '布局 · Layout/PageShell',
+  component: PageShell,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'PageShell — 页面三明治壳。`header` + `sidebar` + `children` 三 slot 任意组合;`background` prop 走 shadcn 语义槽枚举(`background` / `muted` / `card` / `sidebar` / `accent`),亮暗模式由 token 文件自动管。内部为传入的 ui `<Sidebar>` 注入 scoped CSS 覆盖默认 `position: fixed`,让 sidebar 跟 header 共存而不被撑到 viewport 顶端。',
+      },
+    },
+  },
+  argTypes: {
+    background: {
+      control: 'inline-radio',
+      options: ['background', 'muted', 'card', 'sidebar', 'accent'],
+    },
+    sidebarWidth: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageShell>;
+
+// ─── 共享 demo 内容 ──────────────────────────────────────────────────────
+
+function DemoHeader() {
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-border bg-background px-6">
+      <span className="text-sm font-semibold">TopBar</span>
+      <Button variant="ghost" size="sm">
+        <Bell className="size-4" /> 通知
+      </Button>
+    </header>
+  );
+}
+
+function DemoSidebar() {
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <div className="flex items-center justify-between px-2 py-2">
+          <span className="text-sm font-semibold group-data-[collapsible=icon]:hidden">
+            Logo
+          </span>
+          <SidebarTrigger />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarMenu>
+            {[
+              { id: 'home', title: '首页', icon: Home },
+              { id: 'inbox', title: '收件箱', icon: Inbox },
+              { id: 'team', title: '团队', icon: Users },
+              { id: 'settings', title: '设置', icon: Settings },
+            ].map((it) => (
+              <SidebarMenuItem key={it.id}>
+                <SidebarMenuButton tooltip={it.title}>
+                  <it.icon />
+                  <span>{it.title}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+function DemoMain({ label = '主区内容' }: { label?: string }) {
+  return (
+    <div className="px-6 py-4">
+      <h1 className="text-2xl font-semibold text-foreground">{label}</h1>
+      <p className="mt-2 text-sm text-muted-foreground">
+        PageShell 提供布局壳,具体内容由 PageContainer + 业务组件填充。
+      </p>
+    </div>
+  );
+}
+
+// ─── Stories ─────────────────────────────────────────────────────────────
+
+/**
+ * Fullscreen — 不传 `header` 与 `sidebar`,只渲染 children。适合登录页 / 错误页 / 落地页。
+ */
+export const Fullscreen: Story = {
+  args: { background: 'background' },
+  render: (args) => (
+    <PageShell {...args}>
+      <DemoMain label="全屏单区" />
+    </PageShell>
+  ),
+};
+
+/**
+ * WithHeader — 仅传 `header`,顶部条 + 全宽主区。
+ */
+export const WithHeader: Story = {
+  args: { background: 'background' },
+  render: (args) => (
+    <PageShell {...args} header={<DemoHeader />}>
+      <DemoMain label="顶部 + 全宽主区" />
+    </PageShell>
+  ),
+};
+
+/**
+ * WithSidebar — 仅传 `sidebar`,左导 + 主区。无吊顶布局(opentrek 风格,主区背景常用 `muted`)。
+ */
+export const WithSidebar: Story = {
+  args: { background: 'muted' },
+  render: (args) => (
+    <PageShell {...args} sidebar={<DemoSidebar />}>
+      <DemoMain label="左导 + 主区(muted 背景)" />
+    </PageShell>
+  ),
+};
+
+/**
+ * Complete — header + sidebar + children 完整三明治。切 controls 看不同 `background`。
+ */
+export const Complete: Story = {
+  args: { background: 'background' },
+  render: (args) => (
+    <PageShell {...args} header={<DemoHeader />} sidebar={<DemoSidebar />}>
+      <DemoMain label="吊顶 + 左导 + 主区" />
+    </PageShell>
+  ),
+};

package/src/components/page-shell/page-shell.tsx

@@ -0,0 +1,115 @@
+/**
+ * PageShell — 页面三明治壳(layout-level composed component)
+ *
+ * 用 shadcn Sidebar primitives 组合一个"顶部 header(可选) + 左侧 sidebar(可选) + 主区"
+ * 的页面骨架。三个 slot 都可空,组合出四种页面形态:
+ *
+ *   1. 不传 header & sidebar         → 全屏单区(登录页 / 错误页)
+ *   2. 仅 header                     → 顶部条 + 全宽主区
+ *   3. 仅 sidebar                    → 左导 + 主区(opentrek 那种无吊顶 layout)
+ *   4. header + sidebar              → 吊顶 + 左导 + 主区(uni-manager 那种)
+ *
+ * 主区背景由 `background` prop 切换 — 用 shadcn 语义槽枚举,亮暗由 token 文件自动管。
+ *
+ * 传 `sidebar` 时,PageShell 内部用 `<SidebarProvider embedded>` —— ui Sidebar 的嵌入模式,
+ * sidebar-container 自动走 `position: relative + h-full`(替代默认 `fixed inset-y-0 h-svh`),
+ * 与 header 共存而不被撑到 viewport 顶端。
+ */
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+import { SidebarInset, SidebarProvider } from '@/components/sidebar/sidebar';
+
+export type PageShellBackground =
+  | 'background'
+  | 'muted'
+  | 'card'
+  | 'sidebar'
+  | 'accent';
+
+const BG_CLASS: Record<PageShellBackground, string> = {
+  background: 'bg-background',
+  muted: 'bg-muted',
+  card: 'bg-card',
+  sidebar: 'bg-sidebar',
+  accent: 'bg-accent',
+};
+
+export interface PageShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** 顶部条 slot — 通常是 UmTopbar / 自建 navbar。不传则不渲染顶部。 */
+  header?: React.ReactNode;
+  /** 左侧 slot — 通常是 ui `<Sidebar>` 或基于它组合的整装件(如 OpSidebar)。不传则不渲染 sidebar 与 SidebarProvider。 */
+  sidebar?: React.ReactNode;
+  /** 主区内容。 */
+  children: React.ReactNode;
+  /**
+   * 主区背景 — 走 shadcn 语义槽枚举,亮暗模式由 token 文件自动切换。
+   * @default "background"
+   */
+  background?: PageShellBackground;
+  /**
+   * sidebar 宽度 — 透传给 SidebarProvider 的 `--sidebar-width` CSS 变量。仅在传 `sidebar` 时生效。
+   * @default "14rem"
+   */
+  sidebarWidth?: string;
+}
+
+const PageShell = React.forwardRef<HTMLDivElement, PageShellProps>(
+  function PageShell(
+    {
+      header,
+      sidebar,
+      children,
+      background = 'background',
+      sidebarWidth = '14rem',
+      className,
+      style,
+      ...rest
+    },
+    ref,
+  ) {
+    const bgClass = BG_CLASS[background];
+
+    if (!sidebar) {
+      return (
+        <div
+          ref={ref}
+          className={cn('flex min-h-svh w-full flex-col', className)}
+          style={style}
+          {...rest}
+        >
+          {header}
+          <main className={cn('flex-1 overflow-y-auto', bgClass)}>
+            {children}
+          </main>
+        </div>
+      );
+    }
+
+    return (
+      <SidebarProvider
+        ref={ref}
+        embedded
+        className={cn('!flex-col', className)}
+        style={
+          {
+            '--sidebar-width': sidebarWidth,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...rest}
+      >
+        {header}
+        <div className="flex w-full flex-1 min-h-0">
+          {sidebar}
+          <SidebarInset className={cn('!min-h-0 overflow-y-auto', bgClass)}>
+            {children}
+          </SidebarInset>
+        </div>
+      </SidebarProvider>
+    );
+  },
+);
+PageShell.displayName = 'PageShell';
+
+export { PageShell };

package/src/components/pagination/pagination.tsx

@@ -10,6 +10,8 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/utils/cn';
 import { Button, type ButtonProps } from '@/components/button/button';
+import { Input } from '@/components/input/input';
+import { Select } from '@/components/select/select';
 
 // ─── 尺寸映射 — 对齐 Button/Input 的 h-7 / h-8 / h-9 三档 ──────────────────────
 
@@ -23,17 +25,14 @@ const sizeClass: Record<PaginationSize, string> = {
 };
 
 const minWClass: Record<PaginationSize, string> = {
-  sm: 'min-w-7',
-  md: 'min-w-8',
+  // sm 28px — 对齐 --button-sm-height
+  sm: 'min-w-[var(--button-sm-height)]',
+  // md 32px — 对齐 OpenTrek v4.1 --pagination-button-size
+  md: 'min-w-[var(--pagination-button-size)]',
+  // lg 36px — 仅 lg 档使用，保留 utility（无业务 token 对应）
   lg: 'min-w-9',
 };
 
-const inputHeightClass: Record<PaginationSize, string> = {
-  sm: 'h-7 text-xs px-2',
-  md: 'h-8 text-xs px-2.5',
-  lg: 'h-9 text-sm px-3',
-};
-
 // ─── shadcn-style primitives ──────────────────────────────────────────────────
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
@@ -296,8 +295,9 @@ const SimplePagination = ({
     onChange?.(n, finalPageSize);
   };
 
-  const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const v = Number(e.target.value);
+  const handlePageSizeChange = (value: string | string[]) => {
+    const raw = Array.isArray(value) ? value[0] : value;
+    const v = Number(raw);
     if (Number.isNaN(v)) return;
     if (pageSize === undefined) setInnerPageSize(v);
     if (current === undefined) setInnerCurrent(1);
@@ -504,43 +504,33 @@ const SimplePagination = ({
   // ─── 附加 — pageSize 选择器 / 跳转(仅 normal)─────────────────────────────
   const showAddons = type === 'normal' && (pageSizeSelector || showJump);
 
+  const selectSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md';
+
   const addons = showAddons ? (
     <div className={cn('flex items-center gap-2', sizeClass[size])}>
       {pageSizeSelector ? (
-        <select
+        <Select
           aria-label="每页显示"
-          value={finalPageSize}
+          size={selectSize}
+          value={String(finalPageSize)}
           onChange={handlePageSizeChange}
-          className={cn(
-            'cursor-pointer rounded-lg border border-input bg-background shadow-sm',
-            'transition-colors hover:border-ring focus:outline-none focus:ring-1 focus:ring-ring',
-            'tabular-nums text-foreground',
-            inputHeightClass[size],
-          )}
-        >
-          {pageSizeList.map((opt) => (
-            <option key={opt} value={opt}>
-              {opt} 条/页
-            </option>
-          ))}
-        </select>
+          options={pageSizeList.map((opt) => ({
+            label: `${opt} 条/页`,
+            value: String(opt),
+          }))}
+        />
       ) : null}
       {showJump ? (
         <span className="inline-flex items-center gap-1 text-muted-foreground">
           前往
-          <input
-            type="text"
+          <Input
+            size={selectSize}
             inputMode="numeric"
             value={jumperVal}
             onChange={(e) => setJumperVal(e.target.value)}
             onKeyDown={handleJumpKey}
-            className={cn(
-              'w-12 rounded-lg border border-input bg-background text-center shadow-sm',
-              'transition-colors placeholder:text-muted-foreground',
-              'focus:outline-none focus:ring-1 focus:ring-ring',
-              'tabular-nums text-foreground',
-              inputHeightClass[size],
-            )}
+            className="w-12 text-center tabular-nums"
+            aria-label="跳转到页"
           />
           页
         </span>

package/src/components/segmented/segmented.tsx

@@ -24,7 +24,7 @@ const itemVariants = cva(
   {
     variants: {
       active: {
-        true: 'bg-background text-foreground shadow-sm',
+        true: 'bg-card text-foreground shadow-sm',
         false: 'text-muted-foreground hover:text-foreground',
       },
       disabled: {

package/src/components/select/select.tsx

@@ -354,8 +354,8 @@ const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
             aria-invalid={error || undefined}
             disabled={disabled}
             className={cn(
-              'group flex w-panel-sm cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-background py-1 shadow-sm ring-offset-background transition-colors',
-              'focus:outline-none focus:ring-1 focus:ring-ring',
+              'group flex w-panel-sm cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-card py-1 shadow-sm ring-offset-background transition-colors',
+              'focus:outline-none hover:border-ring focus:border-ring focus:ring-2 focus:ring-ring/10',
               'disabled:cursor-not-allowed disabled:opacity-50',
               triggerSizeCls[size],
               error && 'border-destructive focus:ring-destructive',

package/src/components/sidebar/sidebar.meta.md

@@ -70,6 +70,7 @@ pnpm add @radix-ui/react-slot@^1.1.0 class-variance-authority@^0.7.0 lucide-reac
 ## AI 生成纪律
 
 - **必装 SidebarProvider**:Sidebar 上下层任何子组件都依赖 Context;通常在 Layout 顶层包裹。Provider 内置 `TooltipProvider`,无需额外挂
+- **`embedded` 嵌入模式**:Provider 加 `embedded` prop(默认 `false`),下游 Sidebar 的 sidebar-container 从默认 `fixed inset-y-0 h-svh`(贴 viewport 全屏)切到 `relative h-full`(嵌入外层布局)。常用于 PageShell / 任何需要 sidebar 与 header 共存的 layout。**消费方一般不直接传 `embedded`**,而是用 [`<PageShell>`](../page-shell/page-shell.meta.md) —— PageShell 内部自动开启。embedded 模式下 `collapsible="offcanvas"` 折叠改用宽度收 0,无滑出动画
 - **`SidebarMenuButton` 配 `asChild`**:wrap React Router / Next.js Link
 - **`SidebarMenuButton` 折叠态 tooltip**:`collapsible="icon"` 时务必传 `tooltip="导航名"`,否则折叠后只剩 icon 无法识别
 - **`isActive` 由路由判断**:不要用 useState 自管;`pathname === href`

package/src/components/sidebar/sidebar.tsx

@@ -56,6 +56,13 @@ interface SidebarContextValue {
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  /**
+   * 嵌入模式 — true 时 Sidebar 的 sidebar-container 用 `position: relative; height: 100%`
+   * 替代默认的 `position: fixed; inset-y-0; height: 100svh`,让 sidebar 跟外层 header / 横向 flex
+   * 容器共存(常用于 PageShell 内嵌)。
+   * @default false
+   */
+  embedded: boolean;
 }
 
 const SidebarContext = React.createContext<SidebarContextValue | null>(null);
@@ -75,6 +82,13 @@ export interface SidebarProviderProps
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /**
+   * 嵌入模式 — true 时下游 `<Sidebar>` 的 sidebar-container 走 `position: relative + h-full`,
+   * 让 sidebar 嵌入到外层布局(如 PageShell 的 header 下 + 横向 flex 容器内),而不是默认贴
+   * viewport 全屏。默认 false(保留原版"贴 viewport 边" shadcn 行为)。
+   * @default false
+   */
+  embedded?: boolean;
 }
 
 const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
@@ -83,6 +97,7 @@ const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
       defaultOpen = true,
       open: openProp,
       onOpenChange: setOpenProp,
+      embedded = false,
       className,
       style,
       children,
@@ -139,6 +154,7 @@ const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
         openMobile,
         setOpenMobile,
         toggleSidebar,
+        embedded,
       }),
       [
         state,
@@ -148,6 +164,7 @@ const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
         openMobile,
         setOpenMobile,
         toggleSidebar,
+        embedded,
       ],
     );
 
@@ -199,7 +216,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
     },
     ref,
   ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    const { isMobile, state, openMobile, setOpenMobile, embedded } =
+      useSidebar();
 
     if (collapsible === 'none') {
       return (
@@ -252,25 +270,36 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
         data-side={side}
         data-slot="sidebar"
       >
-        {/* sidebar gap on desktop */}
-        <div
-          data-slot="sidebar-gap"
-          className={cn(
-            'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-            'group-data-[collapsible=offcanvas]:w-0',
-            'group-data-[side=right]:rotate-180',
-            variant === 'floating' || variant === 'inset'
-              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-          )}
-        />
+        {/* sidebar gap on desktop — 仅 fixed 模式需要;embedded 模式下 sidebar-container
+            自身参与横向 flex,无需占位 */}
+        {!embedded && (
+          <div
+            data-slot="sidebar-gap"
+            className={cn(
+              'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+              'group-data-[collapsible=offcanvas]:w-0',
+              'group-data-[side=right]:rotate-180',
+              variant === 'floating' || variant === 'inset'
+                ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+                : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+            )}
+          />
+        )}
         <div
           data-slot="sidebar-container"
           data-side={side}
           className={cn(
-            'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-            'data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]',
-            'data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+            embedded
+              ? [
+                  'relative hidden h-full w-(--sidebar-width) transition-[width] duration-200 ease-linear md:flex',
+                  // embedded 模式无 fixed,offcanvas 折叠改用宽度收 0(fixed 版本是滑走)
+                  'group-data-[collapsible=offcanvas]:w-0 overflow-hidden',
+                ]
+              : [
+                  'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+                  'data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]',
+                  'data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+                ],
             variant === 'floating' || variant === 'inset'
               ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
               : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l border-sidebar-border',
@@ -535,7 +564,7 @@ const SidebarMenu = React.forwardRef<
     ref={ref}
     data-slot="sidebar-menu"
     data-sidebar="menu"
-    className={cn('flex w-full min-w-0 flex-col gap-0', className)}
+    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
     {...props}
   />
 ));

package/src/components/slider/slider.tsx

@@ -168,7 +168,7 @@ const Slider = React.forwardRef<
             return (
               <SliderPrimitive.Thumb
                 key={i}
-                className="group relative z-10 block size-4 rounded-full border-2 border-primary bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                className="group relative z-10 block size-4 rounded-full border-2 border-primary bg-card shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
               >
                 {tooltipVisible ? (
                   <span

package/src/components/table/table.tsx

@@ -73,7 +73,8 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      // OpenTrek v4.1 表格单元格水平 padding 走业务 token --table-cell-padding-x
+      'h-10 px-[var(--table-cell-padding-x)] text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
       className,
     )}
     {...props}
@@ -88,7 +89,8 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'p-3 align-middle [&:has([role=checkbox])]:pr-0',
+      // 水平 padding 走 token，垂直保持 12px（与 cell-padding-x 同值）
+      'px-[var(--table-cell-padding-x)] py-3 align-middle [&:has([role=checkbox])]:pr-0',
       className,
     )}
     {...props}

package/src/components/textarea/textarea.tsx

@@ -110,7 +110,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         aria-invalid={ariaInvalid}
         onChange={handleChange}
         className={cn(
-          'flex w-full rounded-md border border-input bg-background px-3 py-2 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive',
+          'flex w-full rounded-md border border-input bg-card px-3 py-2 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none hover:border-ring focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/10 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/10',
           sizeClass,
           autoSize ? 'resize-none' : 'min-h-textarea',
           className,

package/src/components/time-picker/time-picker.tsx

@@ -545,7 +545,7 @@ const TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(
         <PopoverContent
           align="start"
           sideOffset={6}
-          className="w-auto rounded-lg border-border bg-popover p-0 shadow-md"
+          className="w-auto rounded-md border-border bg-popover p-0 shadow-sm"
           onOpenAutoFocus={(e) => e.preventDefault()}
           onInteractOutside={(e) => {
             const target = e.detail.originalEvent.target as Node | null;
@@ -890,7 +890,7 @@ const TimeRangePicker = React.forwardRef<
         <PopoverContent
           align="start"
           sideOffset={6}
-          className="w-auto rounded-lg border-border bg-popover p-0 shadow-md"
+          className="w-auto rounded-md border-border bg-popover p-0 shadow-sm"
           onOpenAutoFocus={(e) => e.preventDefault()}
           onInteractOutside={(e) => {
             const target = e.detail.originalEvent.target as Node | null;

package/src/utils/trigger-input.ts

@@ -11,8 +11,12 @@ import { cn } from '@/utils/cn';
  * 确保 4 个 picker 的 trigger 视觉完全一致。
  */
 export const triggerWrapperClass = cn(
-  'flex items-center gap-2 rounded-lg border border-input bg-background px-3 shadow-sm transition-colors',
-  'hover:border-foreground/30 focus-within:border-foreground/60 focus-within:outline-none',
+  'flex items-center gap-2 rounded-md border border-input bg-card px-3 shadow-sm transition-colors',
+  // hover / focus 视觉:border 变 ring 色;focus 时再加 2px 10% 半透明 halo
+  //   - opentrek `--color-ring: #2878fa` → hover 蓝边,focus 蓝边 + 2px 10% 蓝 halo(对齐 op 设计规范)
+  //   - uni-manager `--color-ring: transparent` → 全透明,由 uni-manager scoped CSS
+  //     `[class*="border-input"]:focus-within` 接管 border 加深(灰色,antd 风格)
+  'hover:border-ring focus-within:outline-none focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/10',
   '[&:has(input:disabled)]:cursor-not-allowed [&:has(input:disabled)]:opacity-50',
 );
 
@@ -20,12 +24,12 @@ export const triggerWrapperClass = cn(
 export const inputElementClass =
   'min-w-0 grow bg-transparent text-foreground outline-none tabular-nums placeholder:text-muted-foreground disabled:cursor-not-allowed';
 
-/** Trigger 高度尺寸(对齐 Input / Button 三档)。 */
+/** Trigger 高度 + 字号(对齐 Input / Button 三档,ADR 0027 form-element-medium = h-8 + text-xs 12px)。 */
 export const triggerSizeClass = {
   sm: 'h-7 text-xs',
-  default: 'h-8 text-sm',
-  md: 'h-8 text-sm',
-  lg: 'h-9 text-base',
+  default: 'h-8 text-xs',
+  md: 'h-8 text-xs',
+  lg: 'h-9 text-sm',
 } as const;
 
 export type TriggerSize = keyof typeof triggerSizeClass;

package/src/components/button/demo/as-child.tsx

@@ -1,24 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-/**
- * asChild：用 Radix Slot 渲染为子元素（如 `<a>` / 路由 Link）。
- * 此时 `loading` / `icon` prop 会被忽略，因为底层不再是 `<button>`。
- */
-export default function Demo() {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button asChild variant="link">
-        <a href="/ui/components/button">查看文档</a>
-      </Button>
-      <Button asChild>
-        <a
-          href="https://github.com/teamix-evo/teamix-evo"
-          target="_blank"
-          rel="noreferrer"
-        >
-          GitHub 仓库
-        </a>
-      </Button>
-    </div>
-  );
-}

package/src/components/button/demo/basic.tsx

@@ -1,8 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-/**
- * 最简用法：默认 variant + 默认 size。
- */
-export default function Demo() {
-  return <Button>提交</Button>;
-}

package/src/components/button/demo/block.tsx

@@ -1,16 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-/**
- * 块级按钮：撑满父容器宽度。
- * 不要再额外加 `className="w-full"` 重复声明。
- */
-export default function Demo() {
-  return (
-    <div className="flex w-80 flex-col gap-3">
-      <Button block>登录</Button>
-      <Button block variant="outline">
-        注册
-      </Button>
-    </div>
-  );
-}