@teamix-evo/ui 0.1.1 → 0.3.0

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

@@ -1,13 +1,14 @@
 ---
 id: descriptions
 name: Descriptions
+displayName: 描述列表
 type: component
-category: layout
+category: data-display
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Descriptions
+# Descriptions 描述列表
 
 描述列表 — antd 独有补足。**键值对详情**(资源详情 / 用户信息 / 配置预览),声明式 `items` 数组驱动,自动布局到等分列。
 
@@ -23,6 +24,8 @@ package: "@teamix-evo/ui"
 - 表格(行 = 同质对象)→ `Table`
 - 富文本 → `Prose`
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
@@ -31,9 +34,11 @@ package: "@teamix-evo/ui"
 | `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"` | – | 尺寸。 |
+| `size` | `'sm' \| 'md' \| 'default'` | `"default"` | – | 尺寸。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 
@@ -74,5 +79,5 @@ import { Badge } from '@/components/ui/badge';
     { label: '创建时间', value: '2024-12-01' },
     { label: '描述', value: '中后台运营管理系统', span: 3 },
   ]}
-/>
+/>;
 ```

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

@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Descriptions } from './descriptions';
 import { Badge } from '@/components/badge/badge';
 
 const meta: Meta<typeof Descriptions> = {
-  title: '布局与容器 · Layout/Descriptions',
+  title: '数据展示 · Data Display/Descriptions',
   component: Descriptions,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '描述列表 — 键值对详情(资源详情 / 用户信息 / 配置预览)。声明式 items 数组驱动,自动布局,支持横/纵布局、bordered、span 跨列。OpenTrek tokens 适配,等价 antd Descriptions。',
+          '描述列表 — 键值对详情（资源详情 / 用户信息 / 配置预览）。声明式 items 数组驱动，自动布局，支持横/纵布局、bordered、span 跨列。等价 antd Descriptions。',
       },
     },
   },

package/src/components/descriptions/descriptions.tsx

@@ -36,7 +36,7 @@ export interface DescriptionsProps
    * 尺寸。
    * @default "default"
    */
-  size?: 'sm' | 'default';
+  size?: 'sm' | 'md' | 'default';
 }
 
 const Descriptions = React.forwardRef<HTMLDivElement, DescriptionsProps>(
@@ -47,18 +47,17 @@ const Descriptions = React.forwardRef<HTMLDivElement, DescriptionsProps>(
       column = 3,
       layout = 'horizontal',
       bordered = false,
-      size = 'default',
+      size = 'md',
       className,
       ...props
     },
     ref,
   ) => {
-    const isSm = size === 'sm';
     return (
       <div
         ref={ref}
         className={cn(
-          bordered && 'overflow-hidden rounded-md border',
+          bordered && 'overflow-hidden rounded-md border border-border',
           className,
         )}
         {...props}
@@ -67,7 +66,9 @@ const Descriptions = React.forwardRef<HTMLDivElement, DescriptionsProps>(
           <div
             className={cn(
               'font-semibold',
-              bordered ? 'border-b bg-muted/50 px-4 py-2 text-sm' : 'mb-3 text-base',
+              bordered
+                ? 'border-b border-b-border bg-muted/50 px-4 py-2 text-xs'
+                : 'mb-3 text-base',
             )}
           >
             {title}
@@ -76,15 +77,23 @@ const Descriptions = React.forwardRef<HTMLDivElement, DescriptionsProps>(
         <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',
+            {
+              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,
+                gridColumn:
+                  it.span && it.span > 1 ? `span ${it.span}` : undefined,
               }}
               className={cn(
                 bordered
@@ -92,18 +101,17 @@ const Descriptions = React.forwardRef<HTMLDivElement, DescriptionsProps>(
                     ? 'flex divide-x divide-border'
                     : 'flex flex-col'
                   : layout === 'horizontal'
-                    ? 'flex gap-3'
-                    : 'flex flex-col gap-1',
+                  ? 'flex gap-3'
+                  : 'flex flex-col gap-1',
               )}
             >
               <div
                 className={cn(
-                  'shrink-0 text-muted-foreground',
-                  isSm ? 'text-xs' : 'text-sm',
+                  'shrink-0 text-xs text-muted-foreground',
                   bordered &&
                     (layout === 'horizontal'
                       ? 'w-32 bg-muted/30 px-3 py-2'
-                      : 'border-b bg-muted/30 px-3 py-2'),
+                      : 'border-b border-b-border bg-muted/30 px-3 py-2'),
                   !bordered && layout === 'horizontal' && 'min-w-24',
                 )}
               >
@@ -111,7 +119,7 @@ const Descriptions = React.forwardRef<HTMLDivElement, DescriptionsProps>(
               </div>
               <div
                 className={cn(
-                  isSm ? 'text-xs' : 'text-sm',
+                  'text-xs',
                   bordered ? 'flex-1 px-3 py-2' : 'flex-1',
                 )}
               >

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

@@ -1,17 +1,18 @@
 ---
 id: dialog
 name: Dialog
+displayName: 对话框
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Dialog
+# Dialog 对话框
 
-模态对话框 — Radix Dialog + antd Modal 并集。**组合式 API**(shadcn 风格,非 antd 的 props 配置式),通过 `DialogHeader` / `DialogFooter` / `DialogTitle` / `DialogDescription` 子组件灵活组装内容。
+模态对话框 — Radix Dialog + antd Modal 并集。**组合式 API**(shadcn 风格,非 antd 的 props 配置式),通过 `DialogHeader` / `DialogFooter` / `DialogTitle` / `DialogDescription` 子组件灵活组装内容。视觉上**圆角 16px**(`--radius-dialog`)、**无 border**(纯白 + shadow 分界)、内置 X 关闭按钮在标题区右侧、`size` 四档绑定 `--layout-dialog-{sm|md|lg|xl}`。
 
-> antd 用户对照:`title` → `<DialogTitle>`,`children` → `<DialogContent>`,`footer` → `<DialogFooter>`,`onOk/onCancel` → 自行接 `<DialogClose>` 与回调。
+> antd 用户对照:`title` → `<DialogTitle>`,`children` → `<DialogContent>`,`footer` → `<DialogFooter>`,`onOk/onCancel` → 自行接 `<DialogClose>` 与回调;`width` → `size` 或 `className` 自定义 `max-w-[...]`。
 
 ## When to use
 
@@ -27,6 +28,17 @@ package: "@teamix-evo/ui"
 - 短暂提示 → `Sonner`(toast)
 - 行内编辑 → `Popover`
 
+## Size 档位(token 绑定)
+
+| size | token                | OpenTrek 基准 | 典型场景                             |
+| ---- | -------------------- | ------------- | ------------------------------------ |
+| `sm` | `--layout-dialog-sm` | 400px         | 确认 / 单字段输入 / 简短表单         |
+| `md` | `--layout-dialog-md` | 600px         | **默认**,常规编辑表单 / 简单详情     |
+| `lg` | `--layout-dialog-lg` | 800px         | 复杂表单 / 多 tab / 富文本编辑       |
+| `xl` | `--layout-dialog-xl` | 1200px        | 数据预览 / 表格嵌入 / 设计画布等大图 |
+
+> 数值是 OpenTrek variant 的基准;其他 variant(如 uni-manager)按自己的 tokens 给值,组件不变。
+
 ## Props
 
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `DialogContent` 的 props;`Dialog`(Root)透传 Radix `open / defaultOpen / onOpenChange / modal`。
@@ -34,7 +46,8 @@ package: "@teamix-evo/ui"
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
-| `showClose` | `boolean` | `true` | – | 是否在右上角显示默认关闭按钮(antd Modal 默认行为)。 |
+| `showClose` | `boolean` | `true` | – | 是否在标题区右侧显示默认关闭按钮(antd Modal 默认行为)。 |
+| `size` | `DialogSize` | `"md"` | – | 对话框尺寸 — 绑定 design tokens `--layout-dialog-{sm\|md\|lg\|xl}`。 OpenTrek 基准:sm=400 / md=600 / lg=800 / xl=1200。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -49,13 +62,14 @@ package: "@teamix-evo/ui"
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
 
 ### npm 依赖
 
 > 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
 
 ```bash
-pnpm add @radix-ui/react-dialog@^1.1.0 lucide-react@^0.460.0
+pnpm add @radix-ui/react-dialog@^1.1.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0 react-dom@>=18
 ```
 <!-- auto:deps:end -->
 
@@ -69,22 +83,31 @@ pnpm add @radix-ui/react-dialog@^1.1.0 lucide-react@^0.460.0
 - **`onOpenChange` 关闭后清表单**:用户可能 ESC 关闭,需要清理状态
 - **Footer 主操作右对齐**:遵循 design `principles.md` P3 Predictability(主操作位置一致)
 - **危险动作单独走 `AlertDialog`**:Dialog 不强制二次确认,destructive 场景必须切换组件
+- **`size` 选择**:不要为了"显得大气"一律 `lg`/`xl` — 信息密度匹配档位,过宽内容反而难读;表单场景默认 `md` 即可
+- **不要硬编码圆角 / 宽度**:圆角已绑定 `--radius-dialog`,不要在 `className` 里覆盖 `rounded-*`;宽度优先用 `size`,只有需要锁绝对像素时才用 `className="max-w-[var(--xxx)]"` 形式继续走 tokens
+- **不要画外边框**:`DialogContent` 已 `border-0`,设计上靠 shadow 与背景对比分界,加 `border` 会破坏 OpenTrek 视觉(P3 一致性)
 
 ## Examples
 
 ```tsx
 import {
-  Dialog, DialogTrigger, DialogContent, DialogHeader,
-  DialogFooter, DialogTitle, DialogDescription, DialogClose,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 
-// 基础确认
+// 基础(默认 md = 600px)
 <Dialog>
   <DialogTrigger asChild>
     <Button variant="outline">编辑</Button>
   </DialogTrigger>
-  <DialogContent className="sm:max-w-md">
+  <DialogContent>
     <DialogHeader>
       <DialogTitle>编辑资料</DialogTitle>
       <DialogDescription>保存后立即生效。</DialogDescription>
@@ -97,9 +120,49 @@ import { Button } from '@/components/ui/button';
       <Button>保存</Button>
     </DialogFooter>
   </DialogContent>
-</Dialog>
+</Dialog>;
 
-// 受控
+// 大尺寸 + 受控
 const [open, setOpen] = React.useState(false);
-<Dialog open={open} onOpenChange={setOpen}>...</Dialog>
+<Dialog open={open} onOpenChange={setOpen}>
+  <DialogContent size="xl">{/* ... */}</DialogContent>
+</Dialog>;
+
+// 隐藏 X 关闭(强制用户走 Footer 按钮)
+<DialogContent showClose={false}>...</DialogContent>;
 ```
+
+---
+
+## Dialog 形态 — 旧库 API → 新映射
+
+> 旧库 `Dialog`(hybridcloud,含 Dialog.show / Dialog.confirm / Dialog.alert) → 新库 `Dialog`(声明式组合) + `AlertDialog`(确认弹窗)。
+> 新库基于 Radix Dialog Primitive,组合式子组件架构(非配置式 prop)。
+
+### 命名 & 结构映射
+
+| 旧库                                  | 新库                                 | 说明                         |
+| ------------------------------------- | ------------------------------------ | ---------------------------- |
+| `Dialog`                              | `Dialog` + 子组件                    | 组合式(非 props 配置式)      |
+| `Dialog.confirm()` / `Dialog.alert()` | `AlertDialog`                        | 声明式替代命令式             |
+| `Dialog.show()`                       | _(未来 P1: useConfirm hook)_         | MVP 用声明式 + useState 控制 |
+| `visible`                             | `open`                               | 受控状态                     |
+| `onClose`                             | `onOpenChange`                       | 开关回调                     |
+| `title` (prop)                        | `<DialogTitle>`                      | 子组件组合                   |
+| `footer` (prop)                       | `<DialogFooter>`                     | 子组件组合                   |
+| `size: mini/small/medium/large`       | `size: 'sm' \| 'md' \| 'lg' \| 'xl'` | token 驱动宽度               |
+| `closeable / closeMode`               | `showClose` + Radix 内建 Esc/点击外  | 简化                         |
+| 快捷类型 error/success/warning        | _(未来 P2: ConfirmDialog preset)_    | MVP 自行组合 icon + 文案     |
+| `cache` (保留 DOM)                    | Radix `forceMount`                   | 已支持                       |
+| `hasMask`                             | 不复刻                               | 始终有 overlay(无障碍)       |
+| `locale`                              | 不复刻                               | 开发者直接写按钮文案         |
+| `v2/align/minMargin/isFullScreen`     | 不复刻                               | 旧 v1 遗留                   |
+
+### 迁移 FAQ
+
+| 问题                            | 回答                                                                                        |
+| ------------------------------- | ------------------------------------------------------------------------------------------- |
+| 命令式 Dialog.confirm 怎么替代? | 用 `<AlertDialog>` 声明式 + `open` 受控;或等 P1 useConfirm hook                             |
+| footer 怎么写?                  | `<DialogFooter><Button variant="outline">取消</Button><Button>确定</Button></DialogFooter>` |
+| 怎么阻止点击外部关闭?           | 用 `<AlertDialog>` 而非 `<Dialog>`;或设 `onInteractOutside={(e) => e.preventDefault()}`     |
+| size 对应宽度?                  | sm=400px, md=600px, lg=800px, xl=1000px(token 变量控制)                                     |

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Dialog,
   DialogTrigger,
@@ -14,50 +14,143 @@ import { Input } from '@/components/input/input';
 import { Label } from '@/components/label/label';
 
 const meta: Meta<typeof DialogContent> = {
-  title: '反馈与浮层 · Feedback/Dialog',
+  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。',
+          '对话框 —— 在不离开当前页的前提下,承载需要用户聚焦完成的任务(表单 / 确认 / 详情查看)。基于 Radix Dialog 内核(自动焦点陷阱、ESC 关闭、`aria-modal`) + 对齐 antd `Modal` 的组合式范式(`DialogHeader` / `DialogFooter` / `DialogTitle` / `DialogDescription`):提供四档 `size`(sm/md/lg/xl)绑定 OpenTrek `--layout-dialog-*` tokens、统一 16px 圆角(`--radius-dialog`)、无 border border-border 设计(纯白 + shadow 分界),以及标题区右侧 X 关闭按钮(`showClose`)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
   argTypes: {
-    showClose: { control: 'boolean' },
+    size: {
+      control: 'inline-radio',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description:
+        '对话框宽度档位,绑定 `--layout-dialog-{sm|md|lg|xl}`(OpenTrek 基准 400/600/800/1200px)',
+    },
+    showClose: {
+      control: 'boolean',
+      description: '是否在标题区右侧显示默认 X 关闭按钮',
+    },
   },
-  args: { showClose: true },
+  args: { size: 'md', showClose: true },
 };
 
 export default meta;
 type Story = StoryObj<typeof DialogContent>;
 
+const SampleForm = () => (
+  <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>
+);
+
 export const Playground: Story = {
   render: (args) => (
     <Dialog>
       <DialogTrigger asChild>
         <Button variant="outline">打开对话框</Button>
       </DialogTrigger>
-      <DialogContent {...args} className="sm:max-w-md">
+      <DialogContent {...args}>
         <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>
+        <SampleForm />
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">取消</Button>
+          </DialogClose>
+          <Button>保存</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const SizeSmall: Story = {
+  name: 'Size · sm (400px)',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">sm — 400px</Button>
+      </DialogTrigger>
+      <DialogContent size="sm">
+        <DialogHeader>
+          <DialogTitle>添加标签</DialogTitle>
+          <DialogDescription>简短确认 / 单字段输入场景。</DialogDescription>
+        </DialogHeader>
+        <Input placeholder="输入标签名" />
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">取消</Button>
+          </DialogClose>
+          <Button>添加</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const SizeMedium: Story = {
+  name: 'Size · md (600px,默认)',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">md — 600px</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>编辑资料</DialogTitle>
+          <DialogDescription>常规编辑表单 / 简单详情。</DialogDescription>
+        </DialogHeader>
+        <SampleForm />
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">取消</Button>
+          </DialogClose>
+          <Button>保存</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const SizeLarge: Story = {
+  name: 'Size · lg (800px)',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">lg — 800px</Button>
+      </DialogTrigger>
+      <DialogContent size="lg">
+        <DialogHeader>
+          <DialogTitle>批量编辑</DialogTitle>
+          <DialogDescription>
+            复杂表单 / 多 tab / 富文本编辑;800px 提供更舒展的列布局。
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid grid-cols-2 gap-4 py-2">
+          <SampleForm />
+          <SampleForm />
         </div>
         <DialogFooter>
           <DialogClose asChild>
@@ -70,7 +163,37 @@ export const Playground: Story = {
   ),
 };
 
+export const SizeXLarge: Story = {
+  name: 'Size · xl (1200px)',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">xl — 1200px</Button>
+      </DialogTrigger>
+      <DialogContent size="xl">
+        <DialogHeader>
+          <DialogTitle>数据预览</DialogTitle>
+          <DialogDescription>
+            数据预览 / 表格嵌入 / 设计画布等需大画幅的场景。
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid h-64 place-items-center rounded-md bg-muted text-sm text-muted-foreground">
+          1200px 宽 · 业务画布占位
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">关闭</Button>
+          </DialogClose>
+          <Button>导出</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
 export const NoCloseButton: Story = {
+  name: '隐藏 X 关闭(showClose=false)',
   parameters: { controls: { disable: true } },
   render: () => (
     <Dialog>
@@ -80,7 +203,9 @@ export const NoCloseButton: Story = {
       <DialogContent showClose={false}>
         <DialogHeader>
           <DialogTitle>必须选择操作</DialogTitle>
-          <DialogDescription>必须点击下方按钮才能关闭。</DialogDescription>
+          <DialogDescription>
+            隐藏 X 后,用户只能通过 Footer 按钮关闭(避免误关重要决策)。
+          </DialogDescription>
         </DialogHeader>
         <DialogFooter>
           <DialogClose asChild>
@@ -91,3 +216,40 @@ export const NoCloseButton: Story = {
     </Dialog>
   ),
 };
+
+export const BorderlessShowcase: Story = {
+  name: '无 border border-border · 纯白 + shadow 分界',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '`DialogContent` 已 `border-0`,视觉分界完全依赖 shadow 与 overlay 的明度对比;16px 圆角(`--radius-dialog`)给整体一个柔和的"卡片漂浮"感。请不要在 `className` 里加 `border *` 或覆盖 `rounded-*`。',
+      },
+    },
+  },
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>打开示例</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>无 border / 16px 圆角</DialogTitle>
+          <DialogDescription>
+            纯白背景 + shadow 形成视觉分界,16px 圆角统一全站 dialog 类容器观感。
+          </DialogDescription>
+        </DialogHeader>
+        <p className="text-sm text-muted-foreground">
+          切换 Storybook toolbar 上的主题变体,可以看到不同 variant 下 token
+          实际值(uni-manager 与 opentrek 圆角一致 16px,但宽度档位可能不同)。
+        </p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">关闭</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};