@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/dialog/dialog.tsx

@@ -1,13 +1,36 @@
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
 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 DialogTrigger = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Trigger
+    ref={ref}
+    className={cn('cursor-pointer', className)}
+    {...props}
+  />
+));
+DialogTrigger.displayName = DialogPrimitive.Trigger.displayName;
+
+const DialogClose = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Close
+    ref={ref}
+    className={cn('cursor-pointer', className)}
+    {...props}
+  />
+));
+DialogClose.displayName = DialogPrimitive.Close.displayName;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -24,32 +47,62 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+/**
+ * Dialog content 变体。
+ * - 圆角统一绑定 `--radius-dialog`(16px,OpenTrek)
+ * - 移除 border,纯白 + shadow 作为视觉分界
+ * - size 绑定 `--layout-dialog-{sm|md|lg|xl}` tokens
+ */
+const dialogContentVariants = 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: 'md' },
+  },
+);
+
+export type DialogSize = NonNullable<
+  VariantProps<typeof dialogContentVariants>['size']
+>;
+
 export interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof dialogContentVariants> {
   /**
-   * 是否在右上角显示默认关闭按钮(antd Modal 默认行为)。
+   * 是否在标题区右侧显示默认关闭按钮(antd Modal 默认行为)。
    * @default true
    */
   showClose?: boolean;
+  /**
+   * 对话框尺寸 — 绑定 design tokens `--layout-dialog-{sm|md|lg|xl}`。
+   * OpenTrek 基准:sm=400 / md=600 / lg=800 / xl=1200。
+   * @default "md"
+   */
+  size?: DialogSize;
 }
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, showClose = true, ...props }, ref) => (
+>(({ className, children, showClose = true, size = 'md', ...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,
-      )}
+      data-slot="dialog-content"
+      className={cn(dialogContentVariants({ size }), 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">
+        <DialogPrimitive.Close className="absolute right-4 top-4 inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-muted-foreground opacity-70 ring-offset-background transition-opacity hover:bg-accent 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>
@@ -64,10 +117,7 @@ const DialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
-      className,
-    )}
+    className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)}
     {...props}
   />
 );
@@ -93,6 +143,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
+    data-slot="dialog-title"
     className={cn(
       'text-lg font-semibold leading-none tracking-tight',
       className,
@@ -108,7 +159,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-xs text-muted-foreground', className)}
     {...props}
   />
 ));
@@ -125,4 +176,5 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
+  dialogContentVariants,
 };

package/src/components/dialog/imperative.tsx

@@ -0,0 +1,252 @@
+/**
+ * Dialog 命令式 API — 对齐 antd `Modal.confirm` / `Modal.alert` 的函数式调用范式。
+ *
+ * 使用方式:
+ * ```tsx
+ * import { confirm, alert } from '@/components/ui/dialog/imperative';
+ *
+ * // confirm — 双按钮(取消 + 确认),返回 Promise<boolean>
+ * const ok = await confirm({ title: '确认删除?', content: '不可撤销' });
+ *
+ * // alert — 单按钮(知道了),返回 Promise<void>
+ * await alert({ title: '操作完成', content: '已保存成功。' });
+ *
+ * // tone — 等价 cd `Dialog.confirm({ type: 'error' / 'warning' / 'success' })`
+ * await confirm({ tone: 'warning', title: '即将停止服务?', content: '...' });
+ * ```
+ *
+ * 底层通过 `createRoot` 挂载临时 React 节点,关闭后自动卸载 + 清理 DOM。
+ */
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  Info,
+  XCircle,
+} from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/components/button/button';
+
+// ─── Types ─────────────────────────────────────────────────────────────────
+
+/**
+ * 弹窗语气(对齐 cd `Dialog.confirm/alert` 的 `type` preset):
+ * - `'info'` — 蓝色 Info icon(默认无 icon 时的"中性提示")
+ * - `'success'` — 绿色 CheckCircle2 icon
+ * - `'warning'` — 黄色 AlertTriangle icon
+ * - `'error'` — 红色 XCircle icon
+ *
+ * 不传时无 icon,仅纯文字(简化模式)。
+ */
+export type DialogTone = 'info' | 'success' | 'warning' | 'error';
+
+export interface ConfirmOptions {
+  /** 标题(必填)。 */
+  title: React.ReactNode;
+  /** 描述内容。 */
+  content?: React.ReactNode;
+  /** 确认按钮文案。@default "确认" */
+  okText?: string;
+  /** 取消按钮文案。@default "取消" */
+  cancelText?: string;
+  /** 确认按钮样式变体。@default "default" */
+  variant?: 'default' | 'destructive';
+  /**
+   * 语气 — 控制左侧 icon + icon 色(`tone='error'` 同时把 `variant` 默认为 `destructive`)。
+   * 等价 cd `Dialog.confirm({ type: 'error' })`。
+   * @default 无(简化模式,无 icon)
+   */
+  tone?: DialogTone;
+}
+
+export interface AlertOptions {
+  /** 标题(必填)。 */
+  title: React.ReactNode;
+  /** 描述内容。 */
+  content?: React.ReactNode;
+  /** 按钮文案。@default "知道了" */
+  okText?: string;
+  /**
+   * 语气 — 控制左侧 icon + icon 色。等价 cd `Dialog.alert({ type: 'success' })`。
+   * @default 无(简化模式,无 icon)
+   */
+  tone?: DialogTone;
+}
+
+// ─── 内部渲染组件 ──────────────────────────────────────────────────────────
+
+// 不引入 AlertDialog 组件(避免循环依赖 + 减少打包体积),
+// 直接使用相同的视觉类名构建最小化 modal。
+
+const overlayClass = 'fixed inset-0 z-50 bg-black/80 animate-in fade-in-0';
+const contentClass =
+  '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 animate-in fade-in-0 zoom-in-95';
+/** maxWidth / borderRadius 使用 CSS 变量,不能写 arbitrary value(ADR 0008)。 */
+const contentStyle: React.CSSProperties = {
+  maxWidth: 'var(--layout-dialog-sm)',
+  borderRadius: 'var(--radius-dialog)',
+};
+
+// tone → icon + 颜色 token 映射
+const TONE_META: Record<
+  DialogTone,
+  { Icon: React.ComponentType<{ className?: string }>; colorClass: string }
+> = {
+  info: { Icon: Info, colorClass: 'text-primary' },
+  success: { Icon: CheckCircle2, colorClass: 'text-success' },
+  warning: { Icon: AlertTriangle, colorClass: 'text-warning' },
+  error: { Icon: XCircle, colorClass: 'text-destructive' },
+};
+
+function ToneIcon({ tone }: { tone?: DialogTone }) {
+  if (!tone) return null;
+  const meta = TONE_META[tone] ?? { Icon: AlertCircle, colorClass: '' };
+  const { Icon, colorClass } = meta;
+  return (
+    <Icon className={cn('mt-0.5 size-5 shrink-0', colorClass)} aria-hidden />
+  );
+}
+
+function ConfirmDialog({
+  title,
+  content,
+  okText = '确认',
+  cancelText = '取消',
+  variant,
+  tone,
+  onResult,
+}: ConfirmOptions & { onResult: (ok: boolean) => void }) {
+  // tone='error' 时默认确认按钮也是 destructive(危险动作语义)
+  const effectiveVariant: 'default' | 'destructive' =
+    variant ?? (tone === 'error' ? 'destructive' : 'default');
+  return (
+    <div role="alertdialog" aria-modal="true" aria-labelledby="__imp_title">
+      <div className={overlayClass} onClick={() => onResult(false)} />
+      <div className={contentClass} style={contentStyle}>
+        <div className="flex gap-3">
+          <ToneIcon tone={tone} />
+          <div className="flex flex-1 flex-col gap-2 text-left">
+            <h2 id="__imp_title" className="text-lg font-semibold">
+              {title}
+            </h2>
+            {content && (
+              <p className="text-xs text-muted-foreground">{content}</p>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2">
+          <button
+            type="button"
+            className={cn(
+              buttonVariants({ variant: 'outline' }),
+              'mt-2 sm:mt-0',
+            )}
+            onClick={() => onResult(false)}
+          >
+            {cancelText}
+          </button>
+          <button
+            type="button"
+            className={cn(buttonVariants({ variant: effectiveVariant }))}
+            onClick={() => onResult(true)}
+          >
+            {okText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AlertDialog({
+  title,
+  content,
+  okText = '知道了',
+  tone,
+  onResult,
+}: AlertOptions & { onResult: () => void }) {
+  return (
+    <div role="alertdialog" aria-modal="true" aria-labelledby="__imp_title">
+      <div className={overlayClass} />
+      <div className={contentClass} style={contentStyle}>
+        <div className="flex gap-3">
+          <ToneIcon tone={tone} />
+          <div className="flex flex-1 flex-col gap-2 text-left">
+            <h2 id="__imp_title" className="text-lg font-semibold">
+              {title}
+            </h2>
+            {content && (
+              <p className="text-xs text-muted-foreground">{content}</p>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2">
+          <button
+            type="button"
+            className={cn(buttonVariants())}
+            onClick={() => onResult()}
+          >
+            {okText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 挂载 / 卸载工具 ───────────────────────────────────────────────────────
+
+function mount(element: React.ReactElement): () => void {
+  const container = document.createElement('div');
+  container.setAttribute('data-dialog-imperative', '');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  root.render(element);
+  return () => {
+    // 延迟卸载,确保 state 回调完成后再清理
+    setTimeout(() => {
+      root.unmount();
+      container.remove();
+    }, 0);
+  };
+}
+
+// ─── 公开 API ───────────────────────────────────────────────────────────────
+
+/**
+ * 命令式确认弹窗 — 返回 `Promise<boolean>`:
+ * - 用户点击确认 → `true`
+ * - 用户点击取消 / 点击遮罩 → `false`
+ *
+ * 等价 cd `Dialog.confirm({ ... })` / antd `Modal.confirm({ ... })`。
+ */
+export function confirm(options: ConfirmOptions): Promise<boolean> {
+  return new Promise<boolean>((resolve) => {
+    let cleanup: (() => void) | undefined;
+    const handleResult = (ok: boolean) => {
+      cleanup?.();
+      resolve(ok);
+    };
+    cleanup = mount(<ConfirmDialog {...options} onResult={handleResult} />);
+  });
+}
+
+/**
+ * 命令式 alert 弹窗 — 返回 `Promise<void>`:
+ * 用户点击确认按钮后 resolve。
+ *
+ * 等价 cd `Dialog.alert({ ... })` / antd `Modal.info|success|warning|error({ ... })`。
+ */
+export function alert(options: AlertOptions): Promise<void> {
+  return new Promise<void>((resolve) => {
+    let cleanup: (() => void) | undefined;
+    const handleResult = () => {
+      cleanup?.();
+      resolve();
+    };
+    cleanup = mount(<AlertDialog {...options} onResult={handleResult} />);
+  });
+}

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

@@ -1,37 +1,35 @@
 ---
 id: drawer
 name: Drawer
+displayName: 抽屉（Sheet 别名）
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+alias: sheet
 ---
 
-# Drawer
+# Drawer 抽屉（Sheet 别名）
 
-底部可拖拽抽屉 — 基于 [`vaul`](https://github.com/emilkowalski/vaul),iOS 风格,**移动端体验最佳**。
-**与 Sheet 区别**:Sheet 模态阻断 + 边缘滑入(桌面端);Drawer 底部 + 可向下拖拽 dismiss(移动端 / 触屏)。
+Drawer 现在是 Sheet 的 re-export 别名。所有能力(side / size / header / body / footer / 圆角)与 Sheet 完全一致。
+保留本 entry 仅为向后兼容 — 已有的 `import { Drawer, DrawerContent } from '...'` 不会断裂。
+
+> **新代码推荐直接使用 Sheet。**
 
 ## When to use
 
-- 移动端(< sm 断点)的设置 / 详情面板
-- 触屏可拖拽 dismiss 的临时面板
-- 需要 iOS / 现代移动 OS 视觉一致性的场景
+与 Sheet 相同 — 参见 [Sheet](../sheet/sheet.meta.md)。
 
 ## When NOT to use
 
-- 桌面端 → `Sheet`(更紧凑 + 多方向支持)
-- 阻断式确认 → `AlertDialog`
-- 普通模态 → `Dialog`
-
-> 实际项目通常**响应式切换**:`md` 以下用 Drawer,`md` 以上用 Sheet/Dialog。
+与 Sheet 相同 — 参见 [Sheet](../sheet/sheet.meta.md)。
 
 ## Props
 
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `DrawerContent` 的 props;`Drawer`(Root)透传 vaul `open / defaultOpen / onOpenChange / shouldScaleBackground / dismissible / snapPoints / onClose`。
+> DrawerContent 的 props 与 SheetContent 完全一致(类型别名)。
 
 <!-- auto:props:begin -->
-_(no props)_
+_(组件无 `<Name>Props` interface — props 详见 [`drawer.tsx`](./drawer.tsx))_
 <!-- auto:props:end -->
 
 ## 依赖
@@ -45,52 +43,53 @@ _(no props)_
 
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
+| `sheet` | component | 侧边面板 — Radix Dialog + side(left/right/top/bottom) + size(sm/md/lg/xl) + --radius-dialog 圆角,对齐 antd Drawer 全能力集 |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add vaul@^1.0.0
-```
+_无 — 本组件不依赖任何 npm 包。_
 <!-- auto:deps:end -->
 
-> 子组件:`Drawer` / `DrawerTrigger` / `DrawerContent` / `DrawerHeader` / `DrawerFooter` / `DrawerTitle` / `DrawerDescription` / `DrawerClose`。
+> 导出映射:`Drawer=Sheet` / `DrawerContent=SheetContent` / `DrawerHeader=SheetHeader` / `DrawerBody=SheetBody` / `DrawerFooter=SheetFooter` / `DrawerTitle=SheetTitle` / `DrawerDescription=SheetDescription` / `DrawerClose=SheetClose`。
 
 ## AI 生成纪律
 
-- **`shouldScaleBackground={true}` 默认**:背景元素轻微缩小 + 圆角,iOS 视觉一致;桌面端可关闭
-- **`dismissible={false}` 用于"必选"场景**:阻止下拉关闭,用户必须点 Action / Cancel
-- **抽屉顶部把手已自动渲染**:不要再手动加,vaul 自带视觉
-- **`snapPoints`**:支持半屏 / 全屏阶段(如 `['148px', '300px', 1]`),vaul 原生
-- **不要在 Drawer 内放 Drawer**:嵌套抽屉是反模式
+- **新代码不要使用 Drawer**:统一用 Sheet,Drawer 仅保持已有代码兼容
+- **Drawer 与 Sheet 能力完全等价**:side / size / header / body / footer 行为一致
+- 其余纪律参见 [Sheet meta](../sheet/sheet.meta.md)
 
 ## Examples
 
 ```tsx
+// 向后兼容写法(不推荐新代码使用)
 import {
-  Drawer, DrawerTrigger, DrawerContent, DrawerHeader,
-  DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose,
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerTitle,
+  DrawerFooter,
+  DrawerClose,
 } from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
 
 <Drawer>
   <DrawerTrigger asChild>
-    <Button variant="outline">打开抽屉</Button>
+    <Button variant="outline">打开</Button>
   </DrawerTrigger>
-  <DrawerContent>
+  <DrawerContent side="right" size="md">
     <DrawerHeader>
-      <DrawerTitle>发起讨论</DrawerTitle>
-      <DrawerDescription>讨论将通知到该项目所有成员。</DrawerDescription>
+      <DrawerTitle>编辑</DrawerTitle>
     </DrawerHeader>
-    <div className="px-4 pb-4">{/* form */}</div>
+    <DrawerBody>{/* content */}</DrawerBody>
     <DrawerFooter>
-      <Button>提交</Button>
       <DrawerClose asChild>
         <Button variant="outline">取消</Button>
       </DrawerClose>
+      <Button>确定</Button>
     </DrawerFooter>
   </DrawerContent>
-</Drawer>
+</Drawer>;
 ```

package/src/components/drawer/drawer.stories.tsx

@@ -1,9 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Drawer,
   DrawerTrigger,
   DrawerContent,
   DrawerHeader,
+  DrawerBody,
   DrawerTitle,
   DrawerDescription,
   DrawerFooter,
@@ -12,41 +13,57 @@ import {
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof DrawerContent> = {
-  title: '反馈与浮层 · Feedback/Drawer',
+  title: '反馈 · Feedback/Drawer (alias)',
   component: DrawerContent,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '抽屉(移动优先) — 从屏幕边缘滑入的浮层容器，常用于移动端表单 / 详情 / 导航等中等复杂度的二级界面。基于 [Vaul](https://vaul.emilkowal.ski/) 实现，提供原生手势 + 拖拽关闭 + 顶部把手；桌面端可视为 `Sheet` 的移动友好版本(能力对齐 antd Drawer)。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '抽屉（Sheet 别名） —— Drawer 现为 Sheet 的 re-export 别名,保持向后兼容。所有能力(`side`/`size`/header/body/footer/圆角)与 Sheet 完全一致,新代码推荐直接使用 Sheet。Radix Dialog 内核 + cva side/size 双变体,对齐 antd `Drawer`:`side`、`size`、`showClose`。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
+  argTypes: {
+    side: {
+      control: 'inline-radio',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+    size: {
+      control: 'inline-radio',
+      options: ['sm', 'md', 'lg', 'xl'],
+    },
+    showClose: {
+      control: 'boolean',
+    },
+  },
+  args: { side: 'right', size: 'md', showClose: true },
 };
 
 export default meta;
 type Story = StoryObj<typeof DrawerContent>;
 
 export const Playground: Story = {
-  render: () => (
+  render: (args) => (
     <Drawer>
       <DrawerTrigger asChild>
-        <Button variant="outline">打开 Drawer</Button>
+        <Button variant="outline">打开 Drawer (alias)</Button>
       </DrawerTrigger>
-      <DrawerContent>
+      <DrawerContent {...args}>
         <DrawerHeader>
-          <DrawerTitle>发起讨论</DrawerTitle>
-          <DrawerDescription>讨论将通知到该项目所有成员。</DrawerDescription>
+          <DrawerTitle>编辑资料</DrawerTitle>
         </DrawerHeader>
-        <div className="px-4 pb-4 text-sm text-muted-foreground">
-          表单字段放在这里... 试试向下拖拽抽屉关闭。
-        </div>
+        <DrawerBody>
+          <DrawerDescription>Drawer 现在等同于 Sheet。</DrawerDescription>
+          <div className="py-4 text-sm text-muted-foreground">
+            内容区域...
+          </div>
+        </DrawerBody>
         <DrawerFooter>
-          <Button>提交</Button>
           <DrawerClose asChild>
             <Button variant="outline">取消</Button>
           </DrawerClose>
+          <Button>确定</Button>
         </DrawerFooter>
       </DrawerContent>
     </Drawer>