@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   AlertDialog,
   AlertDialogTrigger,
@@ -13,23 +13,60 @@ import {
 import { Button, buttonVariants } from '@/components/button/button';
 
 const meta: Meta<typeof AlertDialogContent> = {
-  title: '反馈与浮层 · Feedback/AlertDialog',
+  title: '反馈 · Feedback/AlertDialog',
   component: AlertDialogContent,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '确认对话框 — 用于高风险操作(删除、不可恢复变更)的二次确认。基于 Radix AlertDialog,自动陷阱焦点 + ESC 关闭；Cancel + Action 双按钮范式对齐 antd Modal.confirm。',
+          '确认对话框 —— 对高风险、不可逆的操作做二次拦截,强制用户在「确认 / 取消」之间做出选择。基于 Radix AlertDialog 内核(焦点陷阱 + ESC 行为受控 + `role="alertdialog"`)+ 对齐 antd `Modal.confirm` / `Modal.alert` 的双按钮范式(`AlertDialogAction` / `AlertDialogCancel`);视觉上与 `Dialog` 同源(`--radius-dialog` 16px、无 border、纯白 + shadow 分界),`size` 四档绑定 `--layout-dialog-{sm|md|lg|xl}`,默认 `sm`(确认场景信息密度低)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description:
+        '宽度档位,绑定 `--layout-dialog-{sm|md|lg|xl}`(OpenTrek 400/600/800/1200px)',
+    },
+  },
+  args: { size: 'sm' },
 };
 
 export default meta;
 type Story = StoryObj<typeof AlertDialogContent>;
 
+export const Playground: Story = {
+  render: (args) => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">删除项目</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent {...args}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认删除项目?</AlertDialogTitle>
+          <AlertDialogDescription>
+            将永久删除 <b>"运营后台"</b> 项目及其下 142 个资源。此操作不可撤销。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction
+            className={buttonVariants({ variant: 'destructive' })}
+          >
+            删除
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
 export const Destructive: Story = {
+  name: '高危删除(destructive)',
+  parameters: { controls: { disable: true } },
   render: () => (
     <AlertDialog>
       <AlertDialogTrigger asChild>
@@ -58,6 +95,7 @@ export const Destructive: Story = {
 };
 
 export const NormalConfirm: Story = {
+  name: '业务确认(primary action)',
   parameters: { controls: { disable: true } },
   render: () => (
     <AlertDialog>
@@ -79,3 +117,107 @@ export const NormalConfirm: Story = {
     </AlertDialog>
   ),
 };
+
+export const AlertOnly: Story = {
+  name: 'Alert(单一确认,模拟 Modal.alert)',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '只展示单个 Action 按钮 — 模拟 antd `Modal.alert` 的单确认形态。适用于"已完成"、"权限不足"等仅需告知的场景。',
+      },
+    },
+  },
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">查看通知</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>升级完成</AlertDialogTitle>
+          <AlertDialogDescription>
+            已切换到企业版,新功能将在下次刷新页面后生效。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction>知道了</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
+export const SizeMatrix: Story = {
+  name: 'Size 档位 · sm / md / lg / xl',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '依次触发四档尺寸 — 确认对话框默认 `sm` 即可,只有当需要列出资源清单 / 影响图谱时才升档。',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
+        <AlertDialog key={size}>
+          <AlertDialogTrigger asChild>
+            <Button variant="outline">size = {size}</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent size={size}>
+            <AlertDialogHeader>
+              <AlertDialogTitle>确认操作?({size})</AlertDialogTitle>
+              <AlertDialogDescription>
+                宽度绑定 `--layout-dialog-{size}`,实际像素由当前主题变体的
+                tokens 决定。
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>取消</AlertDialogCancel>
+              <AlertDialogAction>确认</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ))}
+    </div>
+  ),
+};
+
+export const BorderlessShowcase: Story = {
+  name: '无 border border-border · 16px 圆角',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '与 `Dialog` 同源 — `AlertDialogContent` 已 `border-0`,16px 圆角(`--radius-dialog`)由 tokens 提供。请不要在 `className` 里加 `border *` 或覆盖 `rounded-*`。',
+      },
+    },
+  },
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">释放实例</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认释放实例?</AlertDialogTitle>
+          <AlertDialogDescription>
+            释放后实例及挂载数据将无法恢复。请确认已完成数据备份。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction
+            className={buttonVariants({ variant: 'destructive' })}
+          >
+            确认释放
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};

package/src/components/alert-dialog/alert-dialog.tsx

@@ -1,13 +1,25 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/utils/cn';
 import { buttonVariants } from '@/components/button/button';
 
 const AlertDialog = AlertDialogPrimitive.Root;
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
+const AlertDialogTrigger = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Trigger
+    ref={ref}
+    className={cn('cursor-pointer', className)}
+    {...props}
+  />
+));
+AlertDialogTrigger.displayName = AlertDialogPrimitive.Trigger.displayName;
+
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
@@ -23,21 +35,53 @@ const AlertDialogOverlay = React.forwardRef<
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
+/**
+ * AlertDialog content 变体 — 与 Dialog 保持同源视觉。
+ * - 圆角 `--radius-dialog`(16px)
+ * - 无 border,纯白 + shadow 作为视觉分界
+ * - size 绑定 `--layout-dialog-{sm|md|lg|xl}` tokens(确认类默认 `sm`,更紧凑)
+ */
+const alertDialogContentVariants = cva(
+  'fixed left-1/2 top-1/2 z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border-0 bg-background p-6 shadow-lg duration-200 rounded-[var(--radius-dialog)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+  {
+    variants: {
+      size: {
+        sm: 'max-w-[var(--layout-dialog-sm)]',
+        md: 'max-w-[var(--layout-dialog-md)]',
+        lg: 'max-w-[var(--layout-dialog-lg)]',
+        xl: 'max-w-[var(--layout-dialog-xl)]',
+      },
+    },
+    defaultVariants: { size: 'sm' },
+  },
+);
+
+export type AlertDialogSize = NonNullable<
+  VariantProps<typeof alertDialogContentVariants>['size']
+>;
+
 export interface AlertDialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {}
+  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,
+    VariantProps<typeof alertDialogContentVariants> {
+  /**
+   * 确认对话框尺寸 — 绑定 design tokens `--layout-dialog-{sm|md|lg|xl}`。
+   * OpenTrek 基准:sm=400 / md=600 / lg=800 / xl=1200。
+   * 确认场景文案短、信息少,默认 `sm`。
+   * @default "sm"
+   */
+  size?: AlertDialogSize;
+}
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   AlertDialogContentProps
->(({ className, ...props }, ref) => (
+>(({ className, size = 'sm', ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
-      className={cn(
-        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
-        className,
-      )}
+      data-slot="dialog-content"
+      className={cn(alertDialogContentVariants({ size }), className)}
       {...props}
     />
   </AlertDialogPortal>
@@ -49,10 +93,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className,
-    )}
+    className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
     {...props}
   />
 );
@@ -78,6 +119,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
+    data-slot="dialog-title"
     className={cn('text-lg font-semibold', className)}
     {...props}
   />
@@ -90,7 +132,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-xs text-muted-foreground', className)}
     {...props}
   />
 ));
@@ -115,7 +157,11 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className,
+    )}
     {...props}
   />
 ));
@@ -133,4 +179,5 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  alertDialogContentVariants,
 };

package/src/components/anchor/anchor.meta.md

@@ -3,7 +3,7 @@ id: anchor
 name: Anchor
 displayName: 锚点
 type: component
-category: navigation
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -27,32 +27,28 @@ package: '@teamix-evo/ui'
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称             | 类型                    | 默认值     | 必填 | 说明                                                                    |
-| ---------------- | ----------------------- | ---------- | ---- | ----------------------------------------------------------------------- |
-| `items`          | `AnchorItem[]`          | –          | ✓    | 锚点项树(antd `items` 并集)。                                           |
-| `offsetTop`      | `number`                | `0`        | –    | 当目标元素距视口顶部小于此值时高亮(IntersectionObserver `rootMargin`)。 |
-| `scrollBehavior` | `'smooth' \| 'auto'`    | `"smooth"` | –    | 点击锚点平滑滚动行为。                                                  |
-| `onChange`       | `(key: string) => void` | –          | –    | 当前高亮变化回调。                                                      |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `items` | `AnchorItem[]` | – | ✓ | 锚点项树(antd `items` 并集)。 |
+| `offsetTop` | `number` | `0` | – | 当目标元素距视口顶部小于此值时高亮(IntersectionObserver `rootMargin`)。 |
+| `scrollBehavior` | `'smooth' \| 'auto'` | `"smooth"` | – | 点击锚点平滑滚动行为。 |
+| `onChange` | `(key: string) => void` | – | – | 当前高亮变化回调。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add anchor` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
 _无 — 本组件不依赖任何 npm 包。_
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/anchor/anchor.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Anchor } from './anchor';
 
 const meta: Meta<typeof Anchor> = {
-  title: '导航 · Navigation/Anchor',
+  title: '废弃 · Deprecated/Anchor',
   component: Anchor,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '锚点导航 — 长文档 / 详情页侧边目录,点击滚动到 id 节点,滚动时 IntersectionObserver 自动高亮。等价 antd `Anchor`。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n锚点导航 — 长文档 / 详情页侧边目录,点击滚动到 id 节点,滚动时 IntersectionObserver 自动高亮。等价 antd `Anchor`。',
       },
     },
   },

package/src/components/anchor/anchor.tsx

@@ -98,7 +98,7 @@ const Anchor = React.forwardRef<HTMLElement, AnchorProps>(
           href={`#${it.key}`}
           onClick={(e) => handleClick(e, it.key)}
           className={cn(
-            'block border-l-2 py-1 pr-2 text-sm transition-colors',
+            'block border-l-2 py-1 pr-2 text-xs transition-colors',
             depth === 0 ? 'pl-3' : depth === 1 ? 'pl-6' : 'pl-9',
             active === it.key
               ? 'border-primary text-primary'
@@ -117,7 +117,7 @@ const Anchor = React.forwardRef<HTMLElement, AnchorProps>(
       <nav
         ref={ref}
         aria-label="目录"
-        className={cn('text-sm', className)}
+        className={cn('text-xs', className)}
         {...props}
       >
         <ul>{items.map((it) => renderItem(it, 0))}</ul>

package/src/components/app/app.meta.md

@@ -2,7 +2,7 @@
 id: app
 name: App
 type: component
-category: shell
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 displayName: 应用容器
@@ -27,32 +27,28 @@ displayName: 应用容器
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称           | 类型             | 默认值  | 必填 | 说明                                                                                           |
-| -------------- | ---------------- | ------- | ---- | ---------------------------------------------------------------------------------------------- |
-| `withToaster`  | `boolean`        | `true`  | –    | 是否挂载 `<Toaster />`(antd `App` 内部托管 message / notification 静态实例) — 全应用根挂一次。 |
-| `toasterProps` | `ToasterProps`   | –       | –    | 传递给 Toaster 的配置(位置 / 主题 / 自动关闭等) — 仅 `withToaster=true` 时生效。               |
-| `dir`          | `'ltr' \| 'rtl'` | `"ltr"` | –    | 文字方向 — 设到根容器的 `dir` 属性,Radix 等组件会自动适配。                                    |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `withToaster` | `boolean` | `true` | – | 是否挂载 `<Toaster />`(antd `App` 内部托管 message / notification 静态实例) — 全应用根挂一次。 |
+| `toasterProps` | `ToasterProps` | – | – | 传递给 Toaster 的配置(位置 / 主题 / 自动关闭等) — 仅 `withToaster=true` 时生效。 |
+| `dir` | `'ltr' \| 'rtl'` | `"ltr"` | – | 文字方向 — 设到根容器的 `dir` 属性,Radix 等组件会自动适配。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add app` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry    | 类型      | 描述                                                                                              |
-| -------- | --------- | ------------------------------------------------------------------------------------------------- |
-| `cn`     | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                                |
-| `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器,面性 5 状态图标 + 无边框) |
 
 ### npm 依赖
 
 _无 — 本组件不依赖任何 npm 包。_
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/app/app.stories.tsx

@@ -1,18 +1,18 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { App } from './app';
 import { Button } from '@/components/button/button';
 import { toast } from '@/components/sonner/sonner';
 import { notification } from '@/components/notification/notification';
 
 const meta: Meta<typeof App> = {
-  title: '应用壳 · Shell/App',
+  title: '废弃 · Deprecated/App',
   component: App,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '应用根容器 — 挂全局 Toaster + 设置 dir / lang + 承载根级 className。对标 antd `App`，但不接管主题（主题靠 design tokens / CSS vars），也不收敛 useApp() hook。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n应用根容器 — 挂全局 Toaster + 设置 dir / lang + 承载根级 className。对标 antd `App`，但不接管主题（主题靠 design tokens / CSS vars），也不收敛 useApp() hook。',
       },
     },
   },
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof App>;
 
 export const Playground: Story = {
   render: (args) => (
-    <App {...args} className="rounded-md border p-6">
+    <App {...args} className="rounded-md border border-border p-6">
       <div className="flex flex-col gap-3">
         <span className="text-sm text-muted-foreground">
           App 内挂载了 Toaster,可直接触发:
@@ -38,7 +38,7 @@ export const Playground: Story = {
           <Button
             variant="outline"
             onClick={() =>
-              notification.info({
+              notification.primary({
                 title: 'App 容器在生效',
                 description: '右上角 Toaster 是 App 默认挂载的',
               })
@@ -55,7 +55,7 @@ export const Playground: Story = {
 export const RTL: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <App dir="rtl" className="rounded-md border p-6">
+    <App dir="rtl" className="rounded-md border border-border p-6">
       <div className="text-sm">
         当前方向: <strong>rtl</strong> — 你会看到自然的右到左流向
       </div>

package/src/components/aspect-ratio/aspect-ratio.meta.md

@@ -3,7 +3,7 @@ id: aspect-ratio
 name: AspectRatio
 displayName: 宽高比
 type: component
-category: foundation
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -29,11 +29,9 @@ shadcn-only,antd 无对标。
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-
-| 名称    | 类型     | 默认值 | 必填 | 说明                                                                 |
-| ------- | -------- | ------ | ---- | -------------------------------------------------------------------- |
-| `ratio` | `number` | `1`    | –    | 宽高比 = 宽 / 高(必传)。常见值:`16 / 9` / `4 / 3` / `1` / `9 / 16`。 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `ratio` | `number` | `1` | – | 宽高比 = 宽 / 高(必传)。常见值:`16 / 9` / `4 / 3` / `1` / `9 / 16`。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -41,7 +39,6 @@ shadcn-only,antd 无对标。
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 _无 — 本组件不依赖其他 ui entry。_
@@ -53,7 +50,6 @@ _无 — 本组件不依赖其他 ui entry。_
 ```bash
 pnpm add @radix-ui/react-aspect-ratio@^1.1.0
 ```
-
 <!-- auto:deps:end -->
 
 > 透传所有 `<div>` 原生属性。`ratio: number` 是最关键的 prop(必传),如 `16 / 9` / `4 / 3` / `1`。

package/src/components/aspect-ratio/aspect-ratio.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { AspectRatio } from './aspect-ratio';
 
 const meta: Meta<typeof AspectRatio> = {
-  title: '基础原语 · Foundation/AspectRatio',
+  title: '废弃 · Deprecated/AspectRatio',
   component: AspectRatio,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '宽高比容器 — 强制子元素按指定比例渲染，常用于图片 / 视频 / iframe 等响应式封面容器。基于 Radix AspectRatio，通过 `ratio` prop 传入任意宽高比。shadcn 专有，填补了 antd 未提供的纯布局能力。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n宽高比容器 — 强制子元素按指定比例渲染，常用于图片 / 视频 / iframe 等响应式封面容器。基于 Radix AspectRatio，通过 `ratio` prop 传入任意宽高比。shadcn 专有，填补了 antd 未提供的纯布局能力。',
       },
     },
   },

package/src/components/auto-complete/auto-complete.meta.md

@@ -2,7 +2,7 @@
 id: auto-complete
 name: AutoComplete
 type: component
-category: form
+category: data-entry
 since: 0.1.0
 package: '@teamix-evo/ui'
 displayName: 自动补全
@@ -27,38 +27,37 @@ displayName: 自动补全
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称           | 类型                                                  | 默认值       | 必填 | 说明                                                                                            |
-| -------------- | ----------------------------------------------------- | ------------ | ---- | ----------------------------------------------------------------------------------------------- |
-| `options`      | `AutoCompleteOption[]`                                | –            | ✓    | 候选项(antd `options` 并集) — 通常由 onSearch 回调刷新。                                        |
-| `value`        | `string`                                              | –            | –    | 受控值。                                                                                        |
-| `defaultValue` | `string`                                              | –            | –    | uncontrolled 初值。                                                                             |
-| `onChange`     | `(value: string) => void`                             | –            | –    | 值变化回调 — 用户键入 / 选中候选时触发。                                                        |
-| `onSearch`     | `(query: string) => void`                             | –            | –    | 用户输入时回调,用于刷新 `options`(异步建议)。                                                   |
-| `onSelect`     | `(value: string, option: AutoCompleteOption) => void` | –            | –    | 选中候选时回调。                                                                                |
-| `openOnFocus`  | `boolean`                                             | `false`      | –    | 是否在输入框聚焦但 query 为空时显示完整 `options`(antd `defaultActiveFirstOption` 行为的近似)。 |
-| `emptyText`    | `string`                                              | `"无匹配项"` | –    | 无匹配时的提示文本。                                                                            |
-| `size`         | `'sm' \| 'default' \| 'lg'`                           | `"default"`  | –    | 容器尺寸 — 透传 Input.size。                                                                    |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `options` | `AutoCompleteOption[]` | – | ✓ | 候选项(antd `options` 并集) — 通常由 onSearch 回调刷新。 |
+| `value` | `string` | – | – | 受控值。 |
+| `defaultValue` | `string` | – | – | uncontrolled 初值。 |
+| `onChange` | `(value: string) => void` | – | – | 值变化回调 — 用户键入 / 选中候选时触发。 |
+| `onSearch` | `(query: string) => void` | – | – | 用户输入时回调,用于刷新 `options`(异步建议)。 提供该回调后,内部不再对 `options` 做本地过滤(由外部按 query 自行刷新)。 |
+| `onSelect` | `(value: string, option: AutoCompleteOption) => void` | – | – | 选中候选时回调。 |
+| `openOnFocus` | `boolean` | `false` | – | 是否在输入框聚焦但 query 为空时显示完整 `options`(antd `defaultActiveFirstOption` 行为的近似)。 |
+| `emptyText` | `string` | `"无匹配项"` | – | 无匹配时的提示文本。 |
+| `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"md"` | – | 容器尺寸 — 透传 Input.size。 |
+| `error` | `boolean` | `false` | – | 错误态视觉(校验失败) — 透传给内部 Input,红色 border + ring,自动写 `aria-invalid="true"`。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add auto-complete` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry   | 类型      | 描述                                                                                            |
-| ------- | --------- | ----------------------------------------------------------------------------------------------- |
-| `cn`    | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                              |
-| `input` | component | 文本输入 — shadcn 简洁基底 + antd prefix/suffix/clearable/showCount/addonBefore/addonAfter/size |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `input` | component | 单行文本输入 — clearable / showCount / size(sm 24 / md 32 / lg 36,与 Button 同档)/ error 四档内建能力。前缀/后缀/addon 等复合形态已拆出独立 InputGroup;多行已拆出独立 Textarea |
+| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集,使用 showArrow 控制尖角(与 Tooltip / HoverCard 命名统一) |
+| `command` | component | 命令面板 / 下拉底座 — cmdk(Linear / Raycast 风格)提供过滤 / 键盘导航 / a11y;同时为 Combobox / Select / AutoComplete 提供同源下拉内核 |
 
 ### npm 依赖
 
 _无 — 本组件不依赖任何 npm 包。_
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律