@teamix-evo/ui 0.1.1

package/src/components/descriptions/descriptions.meta.md

@@ -0,0 +1,78 @@
+---
+id: descriptions
+name: Descriptions
+type: component
+category: layout
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Descriptions
+
+描述列表 — antd 独有补足。**键值对详情**(资源详情 / 用户信息 / 配置预览),声明式 `items` 数组驱动,自动布局到等分列。
+
+## When to use
+
+- 资源 / 用户 / 订单详情页的元信息块
+- 弹窗 / 抽屉里的当前状态展示
+- 静态配置预览(以读为主,无编辑)
+
+## When NOT to use
+
+- 可编辑表单 → `Form`
+- 表格(行 = 同质对象)→ `Table`
+- 富文本 → `Prose`
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `title` | `React.ReactNode` | – | – | 顶部标题。 |
+| `items` | `DescriptionsItem[]` | – | ✓ | 字段列表。 |
+| `column` | `1 \| 2 \| 3 \| 4` | `3` | – | 列数(antd `column` 并集) — 等分。响应式可在容器侧加 className 处理。 |
+| `layout` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 布局方向。`horizontal`(默认):label 在左,value 在右;`vertical`:label 在上,value 在下。 |
+| `bordered` | `boolean` | `false` | – | 带边框(每项独立单元格)。 |
+| `size` | `'sm' \| 'default'` | `"default"` | – | 尺寸。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add descriptions` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+_无 — 本组件不依赖任何 npm 包。_
+<!-- auto:deps:end -->
+
+> `DescriptionsItem`:`{ label; value; span?: number }`(`span > 1` 让该项跨多列)。
+
+## AI 生成纪律
+
+- **`column` 与窗口宽度匹配**:窄屏 1~2 列,宽屏 3~4 列
+- **关键字段加 span**:重要内容跨 2 列让它更醒目
+- **`bordered={true}` 用于详情页 / Card 内**:有边框更清晰;`bordered={false}` 适合 Sheet / Drawer
+- **value 用 Text 子组件**:状态用 `<Badge>`,链接用 `<Link>`,**不要**纯字符串硬塞颜色
+- **不要超过 12 项**:多了认知负担;> 12 项考虑分组(多个 `Descriptions` 配 Title)
+
+## Examples
+
+```tsx
+import { Descriptions } from '@/components/ui/descriptions';
+import { Badge } from '@/components/ui/badge';
+
+<Descriptions
+  title="项目信息"
+  bordered
+  items={[
+    { label: '项目名', value: '运营后台' },
+    { label: '状态', value: <Badge variant="success">运行中</Badge> },
+    { label: '所有者', value: 'lyca' },
+    { label: '创建时间', value: '2024-12-01' },
+    { label: '描述', value: '中后台运营管理系统', span: 3 },
+  ]}
+/>
+```

package/src/components/descriptions/descriptions.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Descriptions } from './descriptions';
+import { Badge } from '@/components/badge/badge';
+
+const meta: Meta<typeof Descriptions> = {
+  title: '布局与容器 · Layout/Descriptions',
+  component: Descriptions,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '描述列表 — 键值对详情(资源详情 / 用户信息 / 配置预览)。声明式 items 数组驱动,自动布局,支持横/纵布局、bordered、span 跨列。OpenTrek tokens 适配,等价 antd Descriptions。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Descriptions>;
+
+const items = [
+  { label: '项目名', value: '运营后台' },
+  { label: '状态', value: <Badge variant="success">运行中</Badge> },
+  { label: '所有者', value: 'lyca' },
+  { label: '创建时间', value: '2024-12-01' },
+  { label: '更新时间', value: '2026-05-15' },
+  { label: '描述', value: '中后台运营管理系统,服务于内部产品团队', span: 3 },
+];
+
+export const Bordered: Story = {
+  render: () => (
+    <div className="w-[720px]">
+      <Descriptions title="项目信息" items={items} bordered />
+    </div>
+  ),
+};
+
+export const Plain: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-[720px]">
+      <Descriptions title="项目信息" items={items} />
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-[720px]">
+      <Descriptions
+        title="项目信息(垂直布局)"
+        items={items}
+        layout="vertical"
+        bordered
+      />
+    </div>
+  ),
+};

package/src/components/descriptions/descriptions.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+
+export interface DescriptionsItem {
+  /** 字段标签。 */
+  label: React.ReactNode;
+  /** 字段值。 */
+  value: React.ReactNode;
+  /** 跨列数(默认 1)。 */
+  span?: number;
+}
+
+export interface DescriptionsProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** 顶部标题。 */
+  title?: React.ReactNode;
+  /** 字段列表。 */
+  items: DescriptionsItem[];
+  /**
+   * 列数(antd `column` 并集) — 等分。响应式可在容器侧加 className 处理。
+   * @default 3
+   */
+  column?: 1 | 2 | 3 | 4;
+  /**
+   * 布局方向。`horizontal`(默认):label 在左,value 在右;`vertical`:label 在上,value 在下。
+   * @default "horizontal"
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * 带边框(每项独立单元格)。
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 尺寸。
+   * @default "default"
+   */
+  size?: 'sm' | 'default';
+}
+
+const Descriptions = React.forwardRef<HTMLDivElement, DescriptionsProps>(
+  (
+    {
+      title,
+      items,
+      column = 3,
+      layout = 'horizontal',
+      bordered = false,
+      size = 'default',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const isSm = size === 'sm';
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          bordered && 'overflow-hidden rounded-md border',
+          className,
+        )}
+        {...props}
+      >
+        {title ? (
+          <div
+            className={cn(
+              'font-semibold',
+              bordered ? 'border-b bg-muted/50 px-4 py-2 text-sm' : 'mb-3 text-base',
+            )}
+          >
+            {title}
+          </div>
+        ) : null}
+        <div
+          className={cn(
+            'grid',
+            { 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4' }[column],
+            bordered ? 'divide-x divide-y divide-border' : 'gap-x-6 gap-y-3 p-0',
+          )}
+        >
+          {items.map((it, i) => (
+            <div
+              key={i}
+              style={{
+                gridColumn: it.span && it.span > 1 ? `span ${it.span}` : undefined,
+              }}
+              className={cn(
+                bordered
+                  ? layout === 'horizontal'
+                    ? 'flex divide-x divide-border'
+                    : 'flex flex-col'
+                  : layout === 'horizontal'
+                    ? 'flex gap-3'
+                    : 'flex flex-col gap-1',
+              )}
+            >
+              <div
+                className={cn(
+                  'shrink-0 text-muted-foreground',
+                  isSm ? 'text-xs' : 'text-sm',
+                  bordered &&
+                    (layout === 'horizontal'
+                      ? 'w-32 bg-muted/30 px-3 py-2'
+                      : 'border-b bg-muted/30 px-3 py-2'),
+                  !bordered && layout === 'horizontal' && 'min-w-24',
+                )}
+              >
+                {it.label}
+              </div>
+              <div
+                className={cn(
+                  isSm ? 'text-xs' : 'text-sm',
+                  bordered ? 'flex-1 px-3 py-2' : 'flex-1',
+                )}
+              >
+                {it.value}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+Descriptions.displayName = 'Descriptions';
+
+export { Descriptions };

package/src/components/dialog/dialog.meta.md

@@ -0,0 +1,105 @@
+---
+id: dialog
+name: Dialog
+type: component
+category: feedback
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Dialog
+
+模态对话框 — Radix Dialog + antd Modal 并集。**组合式 API**(shadcn 风格,非 antd 的 props 配置式),通过 `DialogHeader` / `DialogFooter` / `DialogTitle` / `DialogDescription` 子组件灵活组装内容。
+
+> antd 用户对照:`title` → `<DialogTitle>`,`children` → `<DialogContent>`,`footer` → `<DialogFooter>`,`onOk/onCancel` → 自行接 `<DialogClose>` 与回调。
+
+## When to use
+
+- 需要用户确认或输入的阻断式交互(表单提交、详情展示)
+- 多步骤向导(Step / 表单分步)
+- 复杂内容(无法用 Popover 装下)
+
+## When NOT to use
+
+- 危险确认 → `AlertDialog`(语义更强,无关闭按钮)
+- 侧边滑出 → `Sheet`
+- 移动端底部弹出 → `Drawer`
+- 短暂提示 → `Sonner`(toast)
+- 行内编辑 → `Popover`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `DialogContent` 的 props;`Dialog`(Root)透传 Radix `open / defaultOpen / onOpenChange / modal`。
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `showClose` | `boolean` | `true` | – | 是否在右上角显示默认关闭按钮(antd Modal 默认行为)。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add dialog` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-dialog@^1.1.0 lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+> 子组件:`Dialog`(Root)/ `DialogTrigger` / `DialogContent` / `DialogHeader` / `DialogFooter` / `DialogTitle` / `DialogDescription` / `DialogClose` / `DialogOverlay` / `DialogPortal`。
+
+## AI 生成纪律
+
+- **`DialogTitle` 必有**:无障碍要求(屏幕阅读器朗读),即使视觉上不显示也要 `<VisuallyHidden>` 包一层
+- **`DialogDescription` 推荐有**:不强制但能显著改善可达性
+- **不嵌套 Dialog**:嵌套对话框是反模式 — 一次只展示一个,用步骤导航替代
+- **`onOpenChange` 关闭后清表单**:用户可能 ESC 关闭,需要清理状态
+- **Footer 主操作右对齐**:遵循 design `principles.md` P3 Predictability(主操作位置一致)
+- **危险动作单独走 `AlertDialog`**:Dialog 不强制二次确认,destructive 场景必须切换组件
+
+## Examples
+
+```tsx
+import {
+  Dialog, DialogTrigger, DialogContent, DialogHeader,
+  DialogFooter, DialogTitle, DialogDescription, DialogClose,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+// 基础确认
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">编辑</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-md">
+    <DialogHeader>
+      <DialogTitle>编辑资料</DialogTitle>
+      <DialogDescription>保存后立即生效。</DialogDescription>
+    </DialogHeader>
+    {/* form fields */}
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">取消</Button>
+      </DialogClose>
+      <Button>保存</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+
+// 受控
+const [open, setOpen] = React.useState(false);
+<Dialog open={open} onOpenChange={setOpen}>...</Dialog>
+```

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from './dialog';
+import { Button } from '@/components/button/button';
+import { Input } from '@/components/input/input';
+import { Label } from '@/components/label/label';
+
+const meta: Meta<typeof DialogContent> = {
+  title: '反馈与浮层 · Feedback/Dialog',
+  component: DialogContent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '模态对话框 — 用于承载需要用户聚焦完成的任务(表单 / 确认 / 查看详情)。基于 Radix Dialog(焦点管理、ESC 关闭、`aria-modal` 自动) + antd Modal 范式(`DialogHeader` / `DialogFooter` / `DialogTitle` / `DialogDescription` 子组件组合)。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    showClose: { control: 'boolean' },
+  },
+  args: { showClose: true },
+};
+
+export default meta;
+type Story = StoryObj<typeof DialogContent>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">打开对话框</Button>
+      </DialogTrigger>
+      <DialogContent {...args} className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>编辑资料</DialogTitle>
+          <DialogDescription>保存后立即对所有页面生效。</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-3 py-2">
+          <div className="grid grid-cols-4 items-center gap-3">
+            <Label htmlFor="name" className="text-right">
+              名称
+            </Label>
+            <Input id="name" defaultValue="lyca" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-3">
+            <Label htmlFor="bio" className="text-right">
+              简介
+            </Label>
+            <Input id="bio" defaultValue="Frontend" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">取消</Button>
+          </DialogClose>
+          <Button>保存</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const NoCloseButton: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">隐藏右上角关闭</Button>
+      </DialogTrigger>
+      <DialogContent showClose={false}>
+        <DialogHeader>
+          <DialogTitle>必须选择操作</DialogTitle>
+          <DialogDescription>必须点击下方按钮才能关闭。</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button>明白</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /**
+   * 是否在右上角显示默认关闭按钮(antd Modal 默认行为)。
+   * @default true
+   */
+  showClose?: boolean;
+}
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, showClose = true, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] 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,
+      )}
+      {...props}
+    >
+      {children}
+      {showClose ? (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none">
+          <X className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      ) : null}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/components/drawer/drawer.meta.md

@@ -0,0 +1,96 @@
+---
+id: drawer
+name: Drawer
+type: component
+category: feedback
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Drawer
+
+底部可拖拽抽屉 — 基于 [`vaul`](https://github.com/emilkowalski/vaul),iOS 风格,**移动端体验最佳**。
+**与 Sheet 区别**:Sheet 模态阻断 + 边缘滑入(桌面端);Drawer 底部 + 可向下拖拽 dismiss(移动端 / 触屏)。
+
+## When to use
+
+- 移动端(< sm 断点)的设置 / 详情面板
+- 触屏可拖拽 dismiss 的临时面板
+- 需要 iOS / 现代移动 OS 视觉一致性的场景
+
+## When NOT to use
+
+- 桌面端 → `Sheet`(更紧凑 + 多方向支持)
+- 阻断式确认 → `AlertDialog`
+- 普通模态 → `Dialog`
+
+> 实际项目通常**响应式切换**:`md` 以下用 Drawer,`md` 以上用 Sheet/Dialog。
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `DrawerContent` 的 props;`Drawer`(Root)透传 vaul `open / defaultOpen / onOpenChange / shouldScaleBackground / dismissible / snapPoints / onClose`。
+
+<!-- auto:props:begin -->
+_(no props)_
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add drawer` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add vaul@^1.0.0
+```
+<!-- auto:deps:end -->
+
+> 子组件:`Drawer` / `DrawerTrigger` / `DrawerContent` / `DrawerHeader` / `DrawerFooter` / `DrawerTitle` / `DrawerDescription` / `DrawerClose`。
+
+## AI 生成纪律
+
+- **`shouldScaleBackground={true}` 默认**:背景元素轻微缩小 + 圆角,iOS 视觉一致;桌面端可关闭
+- **`dismissible={false}` 用于"必选"场景**:阻止下拉关闭,用户必须点 Action / Cancel
+- **抽屉顶部把手已自动渲染**:不要再手动加,vaul 自带视觉
+- **`snapPoints`**:支持半屏 / 全屏阶段(如 `['148px', '300px', 1]`),vaul 原生
+- **不要在 Drawer 内放 Drawer**:嵌套抽屉是反模式
+
+## Examples
+
+```tsx
+import {
+  Drawer, DrawerTrigger, DrawerContent, DrawerHeader,
+  DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose,
+} from '@/components/ui/drawer';
+import { Button } from '@/components/ui/button';
+
+<Drawer>
+  <DrawerTrigger asChild>
+    <Button variant="outline">打开抽屉</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>发起讨论</DrawerTitle>
+      <DrawerDescription>讨论将通知到该项目所有成员。</DrawerDescription>
+    </DrawerHeader>
+    <div className="px-4 pb-4">{/* form */}</div>
+    <DrawerFooter>
+      <Button>提交</Button>
+      <DrawerClose asChild>
+        <Button variant="outline">取消</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>
+```