@teamix-evo/ui 0.1.1

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@teamix-evo/ui",
+  "version": "0.1.1",
+  "description": "Source-injected UI components for Teamix Evo (shadcn-based, antd capabilities)",
+  "type": "module",
+  "files": [
+    "manifest.json",
+    "_data.json",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^3",
+    "@radix-ui/react-accordion": "^1",
+    "@radix-ui/react-alert-dialog": "^1",
+    "@radix-ui/react-aspect-ratio": "^1",
+    "@radix-ui/react-avatar": "^1",
+    "@radix-ui/react-checkbox": "^1",
+    "@radix-ui/react-collapsible": "^1",
+    "@radix-ui/react-context-menu": "^2",
+    "@radix-ui/react-dialog": "^1",
+    "@radix-ui/react-dropdown-menu": "^2",
+    "@radix-ui/react-hover-card": "^1",
+    "@radix-ui/react-label": "^2",
+    "@radix-ui/react-menubar": "^1",
+    "@radix-ui/react-navigation-menu": "^1",
+    "@radix-ui/react-popover": "^1",
+    "@radix-ui/react-progress": "^1",
+    "@radix-ui/react-radio-group": "^1",
+    "@radix-ui/react-scroll-area": "^1",
+    "@radix-ui/react-select": "^2",
+    "@radix-ui/react-separator": "^1",
+    "@radix-ui/react-slider": "^1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1",
+    "@radix-ui/react-tabs": "^1",
+    "@radix-ui/react-toggle": "^1",
+    "@radix-ui/react-toggle-group": "^1",
+    "@radix-ui/react-tooltip": "^1",
+    "@storybook/addon-essentials": "^8",
+    "@storybook/react": "^8",
+    "@storybook/react-vite": "^8",
+    "@tailwindcss/vite": "^4",
+    "@tanstack/react-table": "^8",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cmdk": "^1",
+    "date-fns": "^3",
+    "embla-carousel-react": "^8",
+    "eslint": "^9.0.0",
+    "input-otp": "^1",
+    "lucide-react": "^0.460.0",
+    "react": "^18.3.0",
+    "react-day-picker": "^9",
+    "react-dom": "^18.3.0",
+    "react-hook-form": "^7",
+    "react-resizable-panels": "^2",
+    "sonner": "^1",
+    "storybook": "^8",
+    "tailwind-merge": "^2.5.0",
+    "tailwindcss": "^4",
+    "ts-morph": "^22",
+    "tsx": "^4.0.0",
+    "vaul": "^1",
+    "vite": "^5.4.0",
+    "vite-tsconfig-paths": "^6.1.1",
+    "zod": "^3",
+    "@teamix-evo/eslint-config": "0.1.0",
+    "@teamix-evo/registry": "0.2.0",
+    "@teamix-evo/design": "^0.2.0"
+  },
+  "scripts": {
+    "validate": "tsx scripts/validate-entries.ts",
+    "gen:meta": "tsx scripts/generate-meta.ts",
+    "gen:check": "tsx scripts/generate-meta.ts --check",
+    "test": "echo 'validate only' && pnpm validate",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "build": "echo 'pure resource package, no build needed'",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/src/components/accordion/accordion.meta.md

@@ -0,0 +1,87 @@
+---
+id: accordion
+name: Accordion
+type: component
+category: navigation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Accordion
+
+折叠面板 — Radix Accordion + antd Collapse 的 `accordion` 模式(`type="single"` 即单展开)。
+**与 Collapsible 区别**:Accordion 是**多 item 列表**,可单展开 / 多展开;Collapsible 是单个区域的展开收起。
+
+## When to use
+
+- FAQ 列表
+- 表单分组(高级选项 / 联系方式 / 隐私偏好)
+- 长内容分章节折叠
+
+## When NOT to use
+
+- 单区域折叠 → `Collapsible`
+- 平级 tab 切换 → `Tabs`
+- 列表项的展开内容 → `Table` 的 expandable row
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
+
+<!-- auto:props:begin -->
+_(组件无 `<Name>Props` interface — props 详见 [`accordion.tsx`](./accordion.tsx))_
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add accordion` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-accordion@^1.2.0 lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+> 子组件:`Accordion`(Root,需 `type="single"` 或 `"multiple"`)/ `AccordionItem` / `AccordionTrigger` / `AccordionContent`。
+
+## AI 生成纪律
+
+- **`type` 必传**:`"single"`(单展开,可选 `collapsible` 让用户折叠)/ `"multiple"`(多展开)
+- **每项 value 唯一**:用稳定 ID
+- **AccordionTrigger 默认带 ChevronDown**:展开时 180° 翻转,**不要**自行加图标
+- **单展开 + collapsible**:`type="single" collapsible` 才能让"再次点击当前项"折叠;不加只能在 item 间切换
+
+## Examples
+
+```tsx
+import {
+  Accordion, AccordionItem, AccordionTrigger, AccordionContent,
+} from '@/components/ui/accordion';
+
+// 单展开(可折叠)
+<Accordion type="single" collapsible className="w-96">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>什么是 Teamix Evo?</AccordionTrigger>
+    <AccordionContent>面向产品研发的 AI Coding 套件...</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>如何安装?</AccordionTrigger>
+    <AccordionContent>npx teamix-evo design init opentrek</AccordionContent>
+  </AccordionItem>
+</Accordion>
+
+// 多展开
+<Accordion type="multiple" defaultValue={['a', 'b']}>...</Accordion>
+```

package/src/components/accordion/accordion.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './accordion';
+
+const meta: Meta<typeof Accordion> = {
+  title: '导航 · Navigation/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Single: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-96">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>什么是 Teamix Evo?</AccordionTrigger>
+        <AccordionContent>
+          面向产品研发场景的 AI Coding 套件,提供设计体系、技能、组件、文档等可装配资产。
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>如何安装?</AccordionTrigger>
+        <AccordionContent>
+          <code className="rounded bg-muted px-1.5 py-0.5">
+            npx teamix-evo design init opentrek
+          </code>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>可以同时支持多个 IDE 吗?</AccordionTrigger>
+        <AccordionContent>
+          可以,Skills 同时支持 Qoder 和 Claude Code(同源 SKILL.md 格式)。
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Accordion
+      type="multiple"
+      defaultValue={['a', 'b']}
+      className="w-96"
+    >
+      <AccordionItem value="a">
+        <AccordionTrigger>分组 A</AccordionTrigger>
+        <AccordionContent>分组 A 的内容</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>分组 B</AccordionTrigger>
+        <AccordionContent>分组 B 的内容</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="c">
+        <AccordionTrigger>分组 C</AccordionTrigger>
+        <AccordionContent>分组 C 的内容</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+const Accordion = AccordionPrimitive.Root;
+export type AccordionProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Root
+>;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/affix/affix.meta.md

@@ -0,0 +1,80 @@
+---
+id: affix
+name: Affix
+type: component
+category: navigation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Affix
+
+滚动吸顶 / 吸底 — antd 独有补足。**等价 antd `Affix`**。当容器滚出指定偏移时,把 children 切换为 `position: fixed`,保留原占位避免页面跳动。监听 `scroll` 事件 + `getBoundingClientRect()`,无第三方依赖。
+
+## When to use
+
+- 表格操作栏在滚动时吸顶(批量删除 / 导出)
+- 长表单的"提交"按钮在底部时吸顶
+- 文档侧边的目录/锚点导航
+- 落地页 CTA(吸顶 / 吸底"立即注册")
+
+## When NOT to use
+
+- 整页 header → 直接 `position: sticky` 配 Tailwind `sticky top-0` 更轻
+- 弹窗内的吸附 → Drawer / Sheet 已有内置
+- 一页超过 1 个 Affix:容易形成"漂浮屏",有损可读性
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `offsetTop` | `number` | `0` | – | 滚动到此偏移量(相对视口顶部)时开始吸顶,单位 px。 |
+| `offsetBottom` | `number` | – | – | 滚动到此偏移量(相对视口底部)时开始吸底 — 与 `offsetTop` 互斥。 |
+| `onAffixChange` | `(affixed: boolean) => void` | – | – | 吸附状态变化回调(antd `onChange` 并集)。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add affix` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+_无 — 本组件不依赖任何 npm 包。_
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+- **一页 ≤ 1 个 Affix** — 滥用会让页面充满浮动元素,极差体验
+- **`offsetTop` 与 `offsetBottom` 互斥** — 同时传时优先 `offsetBottom`(吸底)
+- **优先用 Tailwind `sticky top-N`** — 大部分"吸附顶部"用 sticky 就够,只有需要"超出容器边界仍跟随视口"才用 Affix
+- **不要让 Affix 包裹复杂动态高度内容** — width / height 是按初次渲染算的,内容剧烈变化会失同步
+- **`zIndex` 默认 10** — 与 Sonner toast(z=9999)、Dialog(z=50)等级别错开;如需更高自行 className 覆盖
+
+## Examples
+
+```tsx
+import { Affix } from '@/components/ui/affix';
+import { Button } from '@/components/ui/button';
+
+// 吸顶
+<Affix offsetTop={64}>
+  <div className="rounded-md border bg-card p-3 shadow-sm">
+    <Button>导出全部</Button>
+    <Button variant="outline">批量删除</Button>
+  </div>
+</Affix>
+
+// 吸底
+<Affix offsetBottom={24}>
+  <Button block>立即提交</Button>
+</Affix>
+
+// 监听状态变化
+<Affix offsetTop={0} onAffixChange={(affixed) => console.log('affixed:', affixed)}>
+  <Toolbar />
+</Affix>
+```

package/src/components/affix/affix.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Affix } from './affix';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof Affix> = {
+  title: '导航 · Navigation/Affix',
+  component: Affix,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '滚动吸顶 / 吸底 — 当容器滚出指定偏移时把 children 切换为 position: fixed,保留原占位。基于 scroll 事件 + getBoundingClientRect。等价 antd `Affix`。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    offsetTop: { control: 'number' },
+  },
+  args: { offsetTop: 0 },
+};
+
+export default meta;
+type Story = StoryObj<typeof Affix>;
+
+export const Playground: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="space-y-3">
+      <div className="rounded-md border p-4 text-sm text-muted-foreground">
+        ↓ 在 Storybook 容器内滚动以触发吸顶
+      </div>
+      <div className="h-64 rounded-md border bg-muted/30 p-4">占位 1</div>
+      <Affix offsetTop={0}>
+        <div className="rounded-md border bg-card p-3 shadow-sm">
+          <Button>吸顶按钮</Button>
+        </div>
+      </Affix>
+      <div className="h-[800px] rounded-md border bg-muted/30 p-4">长占位</div>
+    </div>
+  ),
+};
+
+export const Bottom: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="space-y-3">
+      <div className="h-[600px] rounded-md border bg-muted/30 p-4">向下滚动</div>
+      <Affix offsetBottom={24}>
+        <div className="rounded-md border bg-card p-3 shadow-sm">
+          <Button block>立即提交(吸底)</Button>
+        </div>
+      </Affix>
+      <div className="h-[600px] rounded-md border bg-muted/30 p-4">滚到底</div>
+    </div>
+  ),
+};

package/src/components/affix/affix.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+
+export interface AffixProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 滚动到此偏移量(相对视口顶部)时开始吸顶,单位 px。
+   * @default 0
+   */
+  offsetTop?: number;
+  /**
+   * 滚动到此偏移量(相对视口底部)时开始吸底 — 与 `offsetTop` 互斥。
+   */
+  offsetBottom?: number;
+  /**
+   * 吸附状态变化回调(antd `onChange` 并集)。
+   */
+  onAffixChange?: (affixed: boolean) => void;
+}
+
+/**
+ * 滚动吸顶 / 吸底 — antd 独有补足。**等价 antd `Affix`**。
+ * 当容器滚出指定偏移时,把 children 切换为 `position: fixed`,保留原占位避免页面跳动。
+ *
+ * 实现:监听 `scroll` 事件 + 节点 `getBoundingClientRect()`,无依赖。
+ * **务必慎用** — 滥用 Affix 会让页面充满浮动元素,通常一页 ≤ 1 个。
+ */
+const Affix = React.forwardRef<HTMLDivElement, AffixProps>(
+  (
+    {
+      offsetTop = 0,
+      offsetBottom,
+      onAffixChange,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+    React.useImperativeHandle(ref, () => wrapperRef.current as HTMLDivElement);
+    const [affixed, setAffixed] = React.useState(false);
+    const [size, setSize] = React.useState<{ w: number; h: number }>({ w: 0, h: 0 });
+
+    React.useEffect(() => {
+      const el = wrapperRef.current;
+      if (!el) return;
+
+      const compute = () => {
+        const rect = el.getBoundingClientRect();
+        const useBottom = typeof offsetBottom === 'number';
+        const shouldAffix = useBottom
+          ? window.innerHeight - rect.bottom < (offsetBottom ?? 0)
+          : rect.top < offsetTop;
+        if (shouldAffix !== affixed) {
+          setAffixed(shouldAffix);
+          onAffixChange?.(shouldAffix);
+        }
+        setSize({ w: rect.width, h: rect.height });
+      };
+
+      compute();
+      window.addEventListener('scroll', compute, { passive: true });
+      window.addEventListener('resize', compute);
+      return () => {
+        window.removeEventListener('scroll', compute);
+        window.removeEventListener('resize', compute);
+      };
+    }, [affixed, offsetBottom, offsetTop, onAffixChange]);
+
+    const fixedStyle: React.CSSProperties | undefined = affixed
+      ? {
+          position: 'fixed',
+          top: typeof offsetBottom === 'number' ? undefined : offsetTop,
+          bottom: typeof offsetBottom === 'number' ? offsetBottom : undefined,
+          width: size.w,
+          zIndex: 10,
+        }
+      : undefined;
+
+    return (
+      <div
+        ref={wrapperRef}
+        style={{ ...style, height: affixed ? size.h : undefined }}
+        className={className}
+      >
+        <div style={fixedStyle} className={cn(affixed && 'shadow-sm')} {...props}>
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+Affix.displayName = 'Affix';
+
+export { Affix };

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

@@ -0,0 +1,101 @@
+---
+id: alert
+name: Alert
+type: component
+category: feedback
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Alert
+
+静态提示条 — shadcn 简约视觉 + antd 的 `type / showIcon / closable / banner` 并集。
+**inline 形态**,与对话框 / Toast 不同,常驻在页面上方或表单上方。
+
+## When to use
+
+- 表单提交前的提示(必填项 / 操作不可逆)
+- 页面级公告(banner 模式)
+- 长任务的状态提示(开始 / 进行中 / 失败)
+
+## When NOT to use
+
+- 短暂提示 → 用 `Sonner`(Toast,自动消失)
+- 阻断式确认 → 用 `AlertDialog`
+- 表单字段错误 → 字段下方 `<p className="text-destructive text-sm">...</p>`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `type` | `'info' \| 'success' \| 'warning' \| 'error'` | `"info"` | – | 类型(antd `type` 并集)— 控制语义色与默认图标。 |
+| `showIcon` | `boolean` | `true` | – | 是否显示图标(antd `showIcon` 并集)。 |
+| `closable` | `boolean` | `false` | – | 是否可关闭,显示右侧 X 按钮(antd `closable` 并集)。 |
+| `onClose` | `() => void` | – | – | 关闭按钮点击回调。 |
+| `banner` | `boolean` | `false` | – | Banner 模式 — 去除横向圆角,沿屏幕宽度铺满,常用于全局公告条。 |
+| `title` | `React.ReactNode` | – | – | 标题(粗体行)。 |
+| `description` | `React.ReactNode` | – | – | 描述(标题下方主体内容)。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add alert` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add class-variance-authority@^0.7.0 lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+- **`type` 反映业务语义**:`error` 仅用于真正错误,**不要**滥用红色制造紧张感
+- **`title` + `description` 一对**:无 title 直接 description 是反模式;一个 Alert 至少要有 title 让用户判断重要性
+- **`closable` 配 `onClose` 持久化**:用户关闭后下次刷新别再出现 — 用 localStorage 记忆
+- **`banner` 模式只放页面顶部**:不要在卡片内 banner
+- **不嵌套 button 链接**:Alert 内放交互链接用 `<a className="underline">`,不要塞 Button — 视觉过重
+
+## Examples
+
+```tsx
+import { Alert } from '@/components/ui/alert';
+
+// 基本
+<Alert type="info" title="提示" description="数据将在 10 分钟后刷新。" />
+
+// 成功
+<Alert type="success" title="保存成功" />
+
+// 警告 + 可关闭
+<Alert type="warning" title="账号即将过期" description="请在 7 天内续费。" closable />
+
+// 错误
+<Alert type="error" title="提交失败" description="请检查网络连接后重试。" />
+
+// 无图标
+<Alert type="info" showIcon={false} description="纯文本提示" />
+
+// Banner 全局公告
+<Alert
+  type="warning"
+  banner
+  title="系统维护"
+  description="本站将于 02:00 起暂停服务 30 分钟。"
+  closable
+/>
+```