@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/alert/alert.meta.md

@@ -1,16 +1,17 @@
 ---
 id: alert
 name: Alert
+displayName: 警告提示
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Alert
+# Alert 警告提示
 
-静态提示条 — shadcn 简约视觉 + antd 的 `type / showIcon / closable / banner` 并集。
-**inline 形态**,与对话框 / Toast 不同,常驻在页面上方或表单上方。
+静态提示条 — shadcn 简约视觉 + antd 的 `showIcon / closable / banner` 并集。在 [ADR 0021](../../../../docs/adr/0021-semantic-color-api-unification.md) 六档语义色基础上,为内联信息提示专门補上 `neutral`(中性灰,纯文本提示),合计六档 `color`:`primary | info | success | warning | destructive | neutral`。
+**inline 形态**,与对话框 / Toast 不同,常驻在页面上方或表单上方。视觉走 OpenTrek tokens —— **无边框、靠 `*-subtle` 浅底块与卡片底色对比分界、面性(filled) 状态图标**。
 
 ## When to use
 
@@ -31,7 +32,7 @@ package: "@teamix-evo/ui"
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
-| `type` | `'info' \| 'success' \| 'warning' \| 'error'` | `"info"` | – | 类型(antd `type` 并集)— 控制语义色与默认图标。 |
+| `color` | `'primary' \| 'info' \| 'success' \| 'warning' \| 'destructive' \| 'neutral'` | `"primary"` | – | 语义色 — 控制配色与默认图标。 - `primary` 主色(默认,中性提示) - `info` 信息蓝(强调"知会"语义) - `success` 成功 - `warning` 警告 - `destructive` 错误(对齐 ADR 0021,禁用 `error` / `danger` 别名) - `neutral` 中性灰(纯文本提示,不带语义压力) |
 | `showIcon` | `boolean` | `true` | – | 是否显示图标(antd `showIcon` 并集)。 |
 | `closable` | `boolean` | `false` | – | 是否可关闭,显示右侧 X 按钮(antd `closable` 并集)。 |
 | `onClose` | `() => void` | – | – | 关闭按钮点击回调。 |
@@ -64,11 +65,14 @@ pnpm add class-variance-authority@^0.7.0 lucide-react@^0.460.0
 
 ## AI 生成纪律
 
-- **`type` 反映业务语义**:`error` 仅用于真正错误,**不要**滥用红色制造紧张感
-- **`title` + `description` 一对**:无 title 直接 description 是反模式;一个 Alert 至少要有 title 让用户判断重要性
+- **`color` 反映业务语义**:`destructive` 仅用于真正错误,**不要**滥用红色制造紧张感;一般提示用 `primary` / `info`,纯文本提示用 `neutral`(不带语义压力)
+- **`info` vs `primary`**:`info` 强调"知会"(蓝色信息脚本),`primary` 强调"引导"(主色/品牌色);遵循 OpenTrek tokens 语义,不要随意互换
+- **`title` + `description` 一对**:无 title 直接 description 是反模式(仅 `description` 可用于表单内提示);一个 Alert 至少要有 title 让用户判断重要性
 - **`closable` 配 `onClose` 持久化**:用户关闭后下次刷新别再出现 — 用 localStorage 记忆
 - **`banner` 模式只放页面顶部**:不要在卡片内 banner
 - **不嵌套 button 链接**:Alert 内放交互链接用 `<a className="underline">`,不要塞 Button — 视觉过重
+- **不要手动加边框**:`border-0` 是刚性规范,透过 `className` 加 `border` 会与克制美学冲突;需要分隔请换用 `Card` 或依赖页面间距
+- **面性图标不可覆盖**:组件已统一处理 lucide `CircleCheck` / `TriangleAlert` / `CircleX` / `Info` 的 `fill-* + text-*-foreground` 组合,顺着语义色自动切换;不要在 `children` 里手写 svg 覆盖
 
 ## Examples
 
@@ -76,26 +80,53 @@ pnpm add class-variance-authority@^0.7.0 lucide-react@^0.460.0
 import { Alert } from '@/components/ui/alert';
 
 // 基本
-<Alert type="info" title="提示" description="数据将在 10 分钟后刷新。" />
+<Alert color="primary" title="提示" description="数据将在 10 分钟后刷新。" />
+
+// 信息蓝(新 —— 强调知会语义)
+<Alert color="info" title="新功能上线" description="试试新版本的智能搜索。" />
 
 // 成功
-<Alert type="success" title="保存成功" />
+<Alert color="success" title="保存成功" />
 
 // 警告 + 可关闭
-<Alert type="warning" title="账号即将过期" description="请在 7 天内续费。" closable />
+<Alert color="warning" title="账号即将过期" description="请在 7 天内续费。" closable />
 
 // 错误
-<Alert type="error" title="提交失败" description="请检查网络连接后重试。" />
+<Alert color="destructive" title="提交失败" description="请检查网络连接后重试。" />
+
+// 中性(新 —— 纯文本提示,不带语义压力)
+<Alert color="neutral" title="说明" description="该功能仅对管理员开放。" />
+
+// 仅描述(无标题)
+<Alert color="info" description="操作完成后请刷新页面。" />
 
 // 无图标
-<Alert type="info" showIcon={false} description="纯文本提示" />
+<Alert color="primary" showIcon={false} description="纯文本提示" />
 
 // Banner 全局公告
 <Alert
-  type="warning"
+  color="warning"
   banner
   title="系统维护"
   description="本站将于 02:00 起暂停服务 30 分钟。"
   closable
 />
 ```
+
+---
+
+## Alert 形态 — 旧库 Message(inline) → 新映射
+
+> 旧库 `Message shape='inline'` → 新库 `Alert`(独立组件)。
+> 旧库命令式 toast 部分请看 `sonner` 组件的形态映射。
+
+### 命名映射
+
+| 旧库                                    | 新库                            | 说明                |
+| --------------------------------------- | ------------------------------- | ------------------- |
+| `Message shape='inline' type='success'` | `<Alert color="success" />`     | type → color        |
+| `Message shape='inline' type='error'`   | `<Alert color="destructive" />` | error → destructive |
+| `Message shape='inline' type='warning'` | `<Alert color="warning" />`     | 直接映射            |
+| `Message shape='inline' type='notice'`  | `<Alert color="info" />`        | notice → info       |
+| `closeable`                             | `closable`                      | 拼写修正            |
+| `title + children`                      | `title + description`           | prop 更名           |

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

@@ -1,22 +1,29 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Alert } from './alert';
 
 const meta: Meta<typeof Alert> = {
-  title: '反馈与浮层 · Feedback/Alert',
+  title: '反馈 · Feedback/Alert',
   component: Alert,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '警告提示 — 在不打断用户操作的前提下展示重要信息。四种语义状态(`info` / `success` / `warning` / `error`)对齐 design 语义色；支持 `showIcon` 状态图标、`closable` 一键关闭、`banner` 顶部业务通告梨式。能力对齐 antd Alert，视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '警告提示 —— 在不打断用户操作的前提下,inline 形态展示重要信息(提示 / 公告 / 错误)。能力对齐 antd `Alert` 并集(`showIcon` / `closable` / `banner`),六档语义色 `primary | info | success | warning | destructive | neutral` 对齐 ADR 0021 与 OpenTrek tokens,**无边框**,依靠 `*-subtle` 浅底块与卡片底色对比,搭配面性(filled)状态图标。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
   argTypes: {
-    type: {
+    color: {
       control: 'select',
-      options: ['info', 'success', 'warning', 'error'],
+      options: [
+        'primary',
+        'info',
+        'success',
+        'warning',
+        'destructive',
+        'neutral',
+      ],
     },
     showIcon: { control: 'boolean' },
     closable: { control: 'boolean' },
@@ -25,7 +32,7 @@ const meta: Meta<typeof Alert> = {
     description: { control: 'text' },
   },
   args: {
-    type: 'info',
+    color: 'primary',
     showIcon: true,
     closable: false,
     banner: false,
@@ -46,37 +53,82 @@ type Story = StoryObj<typeof Alert>;
 
 export const Playground: Story = {};
 
-export const Types: Story = {
+/**
+ * 六档语义色 —— 对齐 ADR 0021 + Alert 专有 `neutral`(纯文本提示)。
+ * 全部使用面性图标,卡片无边框、靠浅底块分界。
+ */
+export const Colors: Story = {
   parameters: { controls: { disable: true } },
   decorators: [(Story) => <div className="w-96">{Story()}</div>],
   render: () => (
     <div className="flex flex-col gap-3">
-      <Alert type="info" title="信息" description="一般性提示。" />
-      <Alert type="success" title="成功" description="操作已完成。" />
-      <Alert type="warning" title="警告" description="请注意可能的影响。" />
-      <Alert type="error" title="错误" description="操作失败,请重试。" />
+      <Alert color="primary" title="主色提示" description="数据将在 10 分钟后刷新。" />
+      <Alert color="info" title="信息" description="新功能已上线,试试看。" />
+      <Alert color="success" title="成功" description="所有更改已生效。" />
+      <Alert color="warning" title="警告" description="账号 7 天后过期。" />
+      <Alert
+        color="destructive"
+        title="错误"
+        description="提交失败,请检查网络后重试。"
+      />
+      <Alert color="neutral" title="说明" description="该功能仅对管理员开放。" />
     </div>
   ),
 };
 
+/**
+ * 仅描述(无标题) —— 极简形态,常用于表单内提示。
+ */
+export const DescriptionOnly: Story = {
+  parameters: { controls: { disable: true } },
+  decorators: [(Story) => <div className="w-96">{Story()}</div>],
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Alert color="info" description="操作完成后请刷新页面以查看最新结果。" />
+      <Alert color="neutral" description="提示:Cmd+S 可以快速保存。" />
+    </div>
+  ),
+};
+
+/**
+ * 无图标 —— 纯文本提示形态。
+ */
+export const NoIcon: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Alert
+      color="primary"
+      showIcon={false}
+      title="纯文本提示"
+      description="不显示状态图标,文字密度更高。"
+    />
+  ),
+};
+
+/**
+ * 可关闭 —— 右上角 X 按钮,关闭时触发 `onClose`。
+ */
 export const Closable: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <Alert
-      type="warning"
+      color="warning"
       title="账号即将过期"
-      description="请在 7 天内续费。"
+      description="请在 7 天内续费,以免影响服务。"
       closable
     />
   ),
 };
 
+/**
+ * Banner 模式 —— 横向铺满、无圆角,常用于页面顶部全局公告。
+ */
 export const Banner: Story = {
   parameters: { controls: { disable: true } },
   decorators: [(Story) => <div className="w-[600px]">{Story()}</div>],
   render: () => (
     <Alert
-      type="warning"
+      color="warning"
       banner
       title="系统维护"
       description="本站将于 02:00 起暂停服务 30 分钟。"
@@ -84,10 +136,3 @@ export const Banner: Story = {
     />
   ),
 };
-
-export const NoIcon: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Alert type="info" showIcon={false} description="纯文本提示,无图标。" />
-  ),
-};

package/src/components/alert/alert.tsx

@@ -1,52 +1,91 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  AlertCircle,
-  AlertTriangle,
-  CheckCircle2,
-  Info,
-  X,
-} from 'lucide-react';
+import { CircleCheck, CircleX, Info, TriangleAlert, X } from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
+/**
+ * Alert 卡片 —— 无边框、纯色块底分界。
+ *
+ * 视觉决策:
+ *   - **去边框**(`border-0`):依靠 `*-subtle` 浅色背景与卡片底色对比,减少线条切割
+ *   - **`p-4`** 内间距:对齐 OpenTrek 间距档(4px 倍数),比旧版 `px-4 py-3` 上下更对称
+ *   - **面性 icon**:`fill-* + text-*-foreground`,实心圆/三角,与 Sonner 同源
+ */
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:size-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7',
+  'relative w-full rounded-md border-0 p-4 text-xs [&>svg]:size-5 [&>svg+div]:translate-y-[-2px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8',
   {
     variants: {
-      type: {
-        info: 'border-blue-200 bg-blue-50 text-blue-900 [&>svg]:text-blue-500 dark:border-blue-900/30 dark:bg-blue-950/40 dark:text-blue-100',
-        success:
-          'border-emerald-200 bg-emerald-50 text-emerald-900 [&>svg]:text-emerald-500 dark:border-emerald-900/30 dark:bg-emerald-950/40 dark:text-emerald-100',
-        warning:
-          'border-amber-200 bg-amber-50 text-amber-900 [&>svg]:text-amber-500 dark:border-amber-900/30 dark:bg-amber-950/40 dark:text-amber-100',
-        error:
-          'border-destructive/30 bg-destructive/10 text-destructive [&>svg]:text-destructive',
+      color: {
+        primary: 'bg-primary/10 text-primary',
+        info: 'bg-info-subtle text-info',
+        success: 'bg-success-subtle text-success',
+        warning: 'bg-warning-subtle text-warning',
+        destructive: 'bg-destructive/10 text-destructive',
+        neutral: 'bg-muted text-foreground',
       },
       banner: {
-        true: 'rounded-none border-x-0',
+        true: 'rounded-none',
         false: '',
       },
     },
-    defaultVariants: { type: 'info', banner: false },
+    defaultVariants: { color: 'primary', banner: false },
   },
 );
 
-const typeIcon = {
-  info: Info,
-  success: CheckCircle2,
-  warning: AlertTriangle,
-  error: AlertCircle,
-} as const;
+type AlertColor =
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'destructive'
+  | 'neutral';
+
+/**
+ * 面性图标映射 —— 通过 `fill-*` 填充语义色, `text-*-foreground` 设置 currentColor 作为
+ * 描边对比色, 形成 "色块底 + 高对比记号" 的实心视觉。`neutral` / `primary` 用线性
+ * Info(中性提示不需要强烈的色块感)。
+ */
+const colorIcon: Record<AlertColor, { Icon: typeof Info; className: string }> =
+  {
+    primary: { Icon: Info, className: 'text-primary' },
+    info: { Icon: Info, className: 'fill-info text-info-foreground' },
+    success: {
+      Icon: CircleCheck,
+      className: 'fill-success text-success-foreground',
+    },
+    warning: {
+      Icon: TriangleAlert,
+      className: 'fill-warning text-warning-foreground',
+    },
+    destructive: {
+      Icon: CircleX,
+      className: 'fill-destructive text-destructive-foreground',
+    },
+    neutral: { Icon: Info, className: 'text-muted-foreground' },
+  };
 
 export interface AlertProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color'>,
     VariantProps<typeof alertVariants> {
   /**
-   * 类型(antd `type` 并集)— 控制语义色与默认图标。
-   * @default "info"
+   * 语义色 — 控制配色与默认图标。
+   *
+   * - `primary` 主色(默认,中性提示)
+   * - `info` 信息蓝(强调"知会"语义)
+   * - `success` 成功
+   * - `warning` 警告
+   * - `destructive` 错误(对齐 ADR 0021,禁用 `error` / `danger` 别名)
+   * - `neutral` 中性灰(纯文本提示,不带语义压力)
+   * @default "primary"
    */
-  type?: 'info' | 'success' | 'warning' | 'error';
+  color?:
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'destructive'
+    | 'neutral';
   /**
    * 是否显示图标(antd `showIcon` 并集)。
    * @default true
@@ -76,7 +115,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
   (
     {
       className,
-      type = 'info',
+      color = 'primary',
       showIcon = true,
       closable = false,
       onClose,
@@ -90,15 +129,21 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
   ) => {
     const [open, setOpen] = React.useState(true);
     if (!open) return null;
-    const Icon = typeIcon[type];
+    const { Icon, className: iconClassName } = colorIcon[color];
     return (
       <div
         ref={ref}
         role="alert"
-        className={cn(alertVariants({ type, banner }), className)}
+        className={cn(
+          alertVariants({ color, banner }),
+          closable ? 'pr-10' : '',
+          className,
+        )}
         {...props}
       >
-        {showIcon ? <Icon aria-hidden="true" /> : null}
+        {showIcon ? (
+          <Icon aria-hidden="true" className={iconClassName} />
+        ) : null}
         <div className={cn(showIcon ? '' : 'pl-0')}>
           {title ? (
             <h5 className="mb-1 font-medium leading-none tracking-tight">
@@ -106,7 +151,9 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
             </h5>
           ) : null}
           {description ? (
-            <div className="text-sm [&_p]:leading-relaxed">{description}</div>
+            <div className="text-xs opacity-90 [&_p]:leading-relaxed">
+              {description}
+            </div>
           ) : null}
           {children}
         </div>
@@ -118,7 +165,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
               onClose?.();
             }}
             aria-label="Close"
-            className="absolute right-3 top-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="absolute right-3 top-3 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           >
             <X className="size-4" />
           </button>

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

@@ -1,40 +1,58 @@
 ---
 id: alert-dialog
 name: AlertDialog
+displayName: 确认对话框
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# AlertDialog
+# AlertDialog 确认对话框
+
+阻断式确认对话框 — Radix AlertDialog + antd `Modal.confirm` 并集。视觉上与 [Dialog](../dialog/dialog.meta.md) **同源**(圆角 `--radius-dialog`、无 border、纯白 + shadow 分界),`size` 四档同样绑定 `--layout-dialog-{sm|md|lg|xl}`,仅默认尺寸为 `sm`(确认场景文案短、信息少)。
 
-阻断式确认对话框 — Radix AlertDialog + antd `Modal.confirm` 并集。
 **与 Dialog 关键差异**:
+
 - 不可点击外部 / ESC 关闭(强制选择 Action / Cancel)
 - 自带 Action / Cancel 子组件,默认走 Button 视觉
-- 无右上角关闭按钮(避免误关)
+- 无右上角 X 关闭按钮(避免误关 → P4 Safety)
+- 默认 `size="sm"`(Dialog 默认 `md`)
 
-设计依据:design `principles.md` P4 Safety + `ai-rules/checklist.md` §8 安全 — 危险操作必须二次确认。
+设计依据:`teamix-evo-design-opentrek` skill `philosophy.md` P4 Safety + `checklist.md` §8 安全 — 危险操作必须二次确认。
 
 ## When to use
 
 - 删除 / 释放 / 强制重启等**不可逆**操作
 - 离开未保存表单的拦截
 - 高危 SaaS 操作(关闭账号、清空数据)
+- 替代 antd `Modal.confirm` / `Modal.alert` 等命令式 API 的声明式确认场景
 
 ## When NOT to use
 
-- 普通编辑确认 → `Dialog`(可关闭、可取消)
+- 普通编辑确认 → `Dialog`(可关闭、可取消、size 默认更大)
 - 一次性提示 → `Sonner`
 - 非阻断的状态提示 → `Alert`
 
+## Size 档位(token 绑定)
+
+| size | token              | OpenTrek 基准 | 典型场景                             |
+| ---- | ------------------ | ------------- | ------------------------------------ |
+| `sm` | `--layout-dialog-sm` | 400px         | **默认**,确认 / 警告 / 简短提示      |
+| `md` | `--layout-dialog-md` | 600px         | 含影响范围列表 / 多段描述的确认      |
+| `lg` | `--layout-dialog-lg` | 800px         | 需展示资源清单 / 影响图谱的高危确认  |
+| `xl` | `--layout-dialog-xl` | 1200px        | 罕见;大表预览 + 批量确认            |
+
+> 确认对话框定位是"短、快、清",不要无脑放大 — 高危场景反而需要用户聚焦关键信息。
+
 ## Props
 
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `AlertDialogContent` 的 props;`AlertDialog`(Root)透传 Radix `open / defaultOpen / onOpenChange`。
 
 <!-- auto:props:begin -->
-_(no props)_
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `size` | `AlertDialogSize` | `"sm"` | – | 确认对话框尺寸 — 绑定 design tokens `--layout-dialog-{sm\|md\|lg\|xl}`。 OpenTrek 基准:sm=400 / md=600 / lg=800 / xl=1200。 确认场景文案短、信息少,默认 `sm`。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -49,14 +67,14 @@ _(no props)_
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| `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-alert-dialog@^1.1.0
+pnpm add @radix-ui/react-alert-dialog@^1.1.0 class-variance-authority@^0.7.0
 ```
 <!-- auto:deps:end -->
 
@@ -69,18 +87,27 @@ pnpm add @radix-ui/react-alert-dialog@^1.1.0
 - **高危操作要求输入名称校验**(超出 AlertDialog 单次使用范围,但提醒在 Description 引导用户)
 - **Cancel 永远在左,Action 永远在右**:遵循 design P3 Predictability;**不要**为了"突出取消"反置
 - **Title ≤ 1 行**:简短指令式("确认删除?"),Description 才放细节
+- **`size` 沿用默认 `sm` 优先**:确认场景信息少、需聚焦,不要为了"显得正式"放大到 `md`/`lg`;只有需要列出资源清单或影响图谱时再升档
+- **不要硬编码圆角 / 宽度**:与 Dialog 同源,`--radius-dialog` 与 `--layout-dialog-*` 已绑定,禁止在 `className` 覆盖
+- **不要补 X 关闭按钮**:`AlertDialog` 故意不给 X(P4 Safety,避免误关),如果你觉得"应该能直接关",请改用 [Dialog](../dialog/dialog.meta.md)
 
 ## Examples
 
 ```tsx
 import {
-  AlertDialog, AlertDialogTrigger, AlertDialogContent,
-  AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
-  AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
 } from '@/components/ui/alert-dialog';
-import { Button } from '@/components/ui/button';
-import { buttonVariants } from '@/components/ui/button';
+import { Button, buttonVariants } from '@/components/ui/button';
 
+// 高危删除(destructive action)
 <AlertDialog>
   <AlertDialogTrigger asChild>
     <Button variant="destructive">删除项目</Button>
@@ -89,7 +116,8 @@ import { buttonVariants } from '@/components/ui/button';
     <AlertDialogHeader>
       <AlertDialogTitle>确认删除项目?</AlertDialogTitle>
       <AlertDialogDescription>
-        将永久删除 <b>"运营后台"</b> 项目及其下 142 个资源。<br />
+        将永久删除 <b>"运营后台"</b> 项目及其下 142 个资源。
+        <br />
         此操作不可撤销。
       </AlertDialogDescription>
     </AlertDialogHeader>
@@ -103,5 +131,22 @@ import { buttonVariants } from '@/components/ui/button';
       </AlertDialogAction>
     </AlertDialogFooter>
   </AlertDialogContent>
-</AlertDialog>
+</AlertDialog>;
+
+// 含影响清单的大尺寸确认
+<AlertDialogContent size="md">
+  {/* ... 列出资源标识 / 关联依赖 / 备份提醒 ... */}
+</AlertDialogContent>;
+
+// 普通业务确认(Action 用默认 primary)
+<AlertDialogContent>
+  <AlertDialogHeader>
+    <AlertDialogTitle>确认提交?</AlertDialogTitle>
+    <AlertDialogDescription>提交后 5 分钟内可取消。</AlertDialogDescription>
+  </AlertDialogHeader>
+  <AlertDialogFooter>
+    <AlertDialogCancel>取消</AlertDialogCancel>
+    <AlertDialogAction>确认</AlertDialogAction>
+  </AlertDialogFooter>
+</AlertDialogContent>;
 ```