@teamix-evo/ui 0.4.0 → 0.5.0

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

@@ -1,255 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-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`):提供四档 `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: {
-    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: { 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}>
-        <DialogHeader>
-          <DialogTitle>编辑资料</DialogTitle>
-          <DialogDescription>保存后立即对所有页面生效。</DialogDescription>
-        </DialogHeader>
-        <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>
-            <Button variant="outline">取消</Button>
-          </DialogClose>
-          <Button>保存</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};
-
-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>
-      <DialogTrigger asChild>
-        <Button variant="outline">隐藏右上角关闭</Button>
-      </DialogTrigger>
-      <DialogContent showClose={false}>
-        <DialogHeader>
-          <DialogTitle>必须选择操作</DialogTitle>
-          <DialogDescription>
-            隐藏 X 后,用户只能通过 Footer 按钮关闭(避免误关重要决策)。
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button>明白</Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </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>
-  ),
-};

package/src/components/dialog/dialog.tsx

@@ -1,180 +0,0 @@
-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 DialogPortal = DialogPrimitive.Portal;
-
-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>,
-  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;
-
-/**
- * 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 px-[var(--dialog-body-padding-x)] py-[var(--dialog-body-padding-y)] 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>,
-    VariantProps<typeof dialogContentVariants> {
-  /**
-   * 是否在标题区右侧显示默认关闭按钮(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, size = 'md', ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      data-slot="dialog-content"
-      className={cn(dialogContentVariants({ size }), className)}
-      {...props}
-    >
-      {children}
-      {showClose ? (
-        <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>
-      ) : null}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col gap-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}
-    data-slot="dialog-title"
-    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-xs text-muted-foreground', className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  dialogContentVariants,
-};

package/src/components/dialog/imperative.tsx

@@ -1,252 +0,0 @@
-/**
- * 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} />);
-  });
-}