@teamix-evo/ui 0.1.1

package/src/components/badge/badge.meta.md

@@ -0,0 +1,119 @@
+---
+id: badge
+name: Badge
+type: component
+category: foundation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Badge
+
+徽标 — shadcn 文本标签风格 + antd 数字徽标 / 红点 / 状态点的合集。
+**单组件四种形态**,根据 props 自动切换:
+
+| 形态 | 触发条件 | 示例 |
+| --- | --- | --- |
+| 文本徽标(shadcn) | 无 `count / dot / status`,仅 `children` | `<Badge>New</Badge>` |
+| 包裹徽标(antd) | 有 `children` + `count` 或 `dot` | `<Badge count={5}><Avatar /></Badge>` |
+| 独立数字气泡 | 仅 `count`,无 `children` | `<Badge count={3} />` |
+| 状态点 + 文字 | 有 `status` | `<Badge status="success" text="运行中" />` |
+
+## When to use
+
+- **文本徽标**:版本号 / 标签 / 状态短文(`Beta` / `New` / `Pro`)
+- **数字气泡**:消息未读数、购物车数量等数字提示(浮在 Avatar / 按钮右上角)
+- **红点**:有未读但不需要数字时
+- **状态点**:列表 / 详情页的资源状态(运行中 / 已停止 / 错误等)
+
+## When NOT to use
+
+- 需要可关闭、可定制颜色的标签 → 用 `Tag`(v0.7 提供)
+- 角标(置于 Card 或图片右上角的丝带)→ 用 `Badge.Ribbon`(v0.x 提供)
+- 大段说明文字 → 用 `Alert` 或 `Tooltip`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`badge.tsx`](./badge.tsx) 的 `BadgeProps` interface JSDoc。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning'` | `"default"` | – | 视觉风格;`default / secondary / destructive / outline` 来自 shadcn, `success / warning` 来自 antd 状态色补足。 |
+| `count` | `number` | – | – | 数字徽标内容。配合 `children` 时,数字气泡浮在右上角(包裹模式); 无 `children` 时,渲染为独立小气泡(standalone 模式)。 `0` 默认不显示,需配 `showZero`。 |
+| `overflowCount` | `number` | `99` | – | 数字超过此值时显示 `${overflowCount}+`。仅在有 `count` 时生效。 |
+| `showZero` | `boolean` | `false` | – | `true` 时即使 `count === 0` 也显示气泡。 |
+| `dot` | `boolean` | `false` | – | `true` 时渲染为纯红点(无文字)。配合 `children` 时浮在右上角。 `dot` 与 `count` 同时存在,`dot` 优先。 |
+| `status` | `BadgeStatus` | – | – | 状态点 + 文字(`<dot> <text>` 行内组合),用于"运行中 / 已停止"等状态描述。 必须与 `children` 互斥使用 — 这是 standalone 状态条形态。 |
+| `text` | `React.ReactNode` | – | – | 配合 `status` 使用,渲染在状态点右侧。无 `status` 时忽略。 |
+| `children` | `React.ReactNode` | – | – | 被包裹的元素(包裹模式)或徽标文本内容(standalone 文本模式)。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add badge` 时,以下 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
+```
+<!-- auto:deps:end -->
+
+> 除上述 props 外,Badge 透传所有 `<span>` 原生属性(`onClick` / `aria-*` / `id` / ...)。
+
+## AI 生成纪律
+
+- **形态自动判断**:不要同时传 `count + dot`(`dot` 优先)、`status + children`(语义冲突),组件会按优先级降级,但人写代码时应明确单一形态。
+- **status 颜色不要硬编码**:`success / warning / error` 等颜色已在 design `foundations/color/semantic.md` 锁定;**不要**绕过 `status` prop 直接写 `bg-green-500` 等。
+- **count 必须为非负整数**:负数会渲染但语义错乱;0 默认不显示,需要显示 0 时显式传 `showZero`。
+- **包裹模式的 ring**:气泡有 `ring-2 ring-background` 模拟"挖空"边框,**不要**改这里的 ring 颜色 — 切换 dark mode 时会自动适配。
+- **状态条文案**:`text` 用现在分词或简短状态语(`运行中` / `已停止` / `异常`),不超过 6 个汉字。
+- **不要堆叠**:同一容器内不要并排出现多种 Badge 形态(数字 + 状态条),信息过载;改用一张分组的状态卡片。
+
+## Examples
+
+```tsx
+import { Badge } from '@/components/ui/badge';
+import { Bell } from 'lucide-react';
+
+// 文本徽标(shadcn)
+<Badge>New</Badge>
+<Badge variant="secondary">Beta</Badge>
+<Badge variant="destructive">Critical</Badge>
+<Badge variant="success">Verified</Badge>
+<Badge variant="warning">Pending</Badge>
+
+// 数字徽标(antd 风格 — 包裹模式)
+<Badge count={5}>
+  <Bell className="size-6" />
+</Badge>
+
+<Badge count={120} overflowCount={99}>
+  <Bell className="size-6" />
+</Badge>
+
+// 红点
+<Badge dot>
+  <Bell className="size-6" />
+</Badge>
+
+// 独立数字气泡
+<Badge count={3} />
+
+// 状态点 + 文字
+<Badge status="success" text="运行中" />
+<Badge status="processing" text="部署中" />
+<Badge status="error" text="异常" />
+```

package/src/components/badge/badge.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Bell, MessageSquare, ShoppingCart } from 'lucide-react';
+import { Badge } from './badge';
+
+const meta: Meta<typeof Badge> = {
+  title: '基础原语 · Foundation/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '徽标 — shadcn 文本徽标 + antd 数字 / 红点 / 状态点的合集,单组件四种形态。',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      description: '视觉风格(仅文本徽标形态生效)',
+      control: 'select',
+      options: [
+        'default',
+        'secondary',
+        'destructive',
+        'outline',
+        'success',
+        'warning',
+      ],
+    },
+    count: {
+      description: '数字徽标(配 children 时浮在右上角,否则独立气泡)',
+      control: { type: 'number', min: 0 },
+    },
+    overflowCount: {
+      description: 'count 溢出阈值',
+      control: { type: 'number', min: 1 },
+    },
+    showZero: {
+      description: 'count 为 0 时是否显示',
+      control: 'boolean',
+    },
+    dot: {
+      description: '渲染为纯红点(配 children 时浮在右上角)',
+      control: 'boolean',
+    },
+    status: {
+      description: '状态点 + 文字(与 children 互斥)',
+      control: 'select',
+      options: [
+        undefined,
+        'default',
+        'success',
+        'processing',
+        'error',
+        'warning',
+      ],
+    },
+    text: {
+      description: '配合 status 渲染的文字',
+      control: 'text',
+    },
+    children: {
+      description: '徽标内容(文本模式)或被包裹元素',
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'New',
+    variant: 'default',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+/** 文本徽标(默认形态)。在 Controls 调 variant / 文字 / 切换形态。 */
+export const Playground: Story = {};
+
+/** 六种 variant 文本徽标对照。 */
+export const VariantsMatrix: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+    </div>
+  ),
+};
+
+/** 数字徽标 — 包裹模式(浮在 children 右上角)。 */
+export const NumericWrapped: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Badge count={5}>
+        <Bell className="size-6 text-muted-foreground" />
+      </Badge>
+      <Badge count={32}>
+        <MessageSquare className="size-6 text-muted-foreground" />
+      </Badge>
+      <Badge count={120} overflowCount={99}>
+        <ShoppingCart className="size-6 text-muted-foreground" />
+      </Badge>
+    </div>
+  ),
+};
+
+/** 红点 — 无文字提示有未读。 */
+export const Dot: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Badge dot>
+        <Bell className="size-6 text-muted-foreground" />
+      </Badge>
+      <Badge dot>
+        <MessageSquare className="size-6 text-muted-foreground" />
+      </Badge>
+    </div>
+  ),
+};
+
+/** 独立数字气泡(无 children)。常用于内联标记。 */
+export const StandaloneCount: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Badge count={1} />
+      <Badge count={9} />
+      <Badge count={99} />
+      <Badge count={150} overflowCount={99} />
+      <Badge count={0} showZero />
+    </div>
+  ),
+};
+
+/** 状态点 + 文字(列表 / 详情页资源状态)。 */
+export const StatusMatrix: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col items-start gap-2">
+      <Badge status="success" text="运行中" />
+      <Badge status="processing" text="部署中" />
+      <Badge status="warning" text="降级运行" />
+      <Badge status="error" text="异常" />
+      <Badge status="default" text="已停止" />
+    </div>
+  ),
+};

package/src/components/badge/badge.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils/cn';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        success:
+          'border-transparent bg-emerald-500 text-white hover:bg-emerald-500/80',
+        warning:
+          'border-transparent bg-amber-500 text-white hover:bg-amber-500/80',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+/**
+ * 状态点的语义色映射。来自 design `foundations/color/semantic.md`。
+ * 之所以这里硬编码 hex/tailwind class 而非 design token,
+ * 是因为 status 是数值化状态枚举(antd 体系),需要稳定一对一映射;
+ * 切换 design variant 时通过 token 层调整这些颜色,而非组件层。
+ */
+const statusDotClasses: Record<BadgeStatus, string> = {
+  default: 'bg-muted-foreground',
+  success: 'bg-emerald-500',
+  processing: 'bg-blue-500',
+  error: 'bg-destructive',
+  warning: 'bg-amber-500',
+};
+
+export type BadgeStatus =
+  | 'default'
+  | 'success'
+  | 'processing'
+  | 'error'
+  | 'warning';
+
+export interface BadgeProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
+    VariantProps<typeof badgeVariants> {
+  /**
+   * 视觉风格;`default / secondary / destructive / outline` 来自 shadcn,
+   * `success / warning` 来自 antd 状态色补足。
+   * @default "default"
+   */
+  variant?:
+    | 'default'
+    | 'secondary'
+    | 'destructive'
+    | 'outline'
+    | 'success'
+    | 'warning';
+  /**
+   * 数字徽标内容。配合 `children` 时,数字气泡浮在右上角(包裹模式);
+   * 无 `children` 时,渲染为独立小气泡(standalone 模式)。
+   * `0` 默认不显示,需配 `showZero`。
+   */
+  count?: number;
+  /**
+   * 数字超过此值时显示 `${overflowCount}+`。仅在有 `count` 时生效。
+   * @default 99
+   */
+  overflowCount?: number;
+  /**
+   * `true` 时即使 `count === 0` 也显示气泡。
+   * @default false
+   */
+  showZero?: boolean;
+  /**
+   * `true` 时渲染为纯红点(无文字)。配合 `children` 时浮在右上角。
+   * `dot` 与 `count` 同时存在,`dot` 优先。
+   * @default false
+   */
+  dot?: boolean;
+  /**
+   * 状态点 + 文字(`<dot> <text>` 行内组合),用于"运行中 / 已停止"等状态描述。
+   * 必须与 `children` 互斥使用 — 这是 standalone 状态条形态。
+   */
+  status?: BadgeStatus;
+  /**
+   * 配合 `status` 使用,渲染在状态点右侧。无 `status` 时忽略。
+   */
+  text?: React.ReactNode;
+  /** 被包裹的元素(包裹模式)或徽标文本内容(standalone 文本模式)。 */
+  children?: React.ReactNode;
+}
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      className,
+      variant,
+      count,
+      overflowCount = 99,
+      showZero = false,
+      dot = false,
+      status,
+      text,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    // ── Standalone status mode: <dot> + <text> ────────────────────────────────
+    if (status) {
+      return (
+        <span
+          ref={ref}
+          className={cn('inline-flex items-center gap-2 text-sm', className)}
+          {...props}
+        >
+          <span
+            className={cn(
+              'inline-block size-2 rounded-full',
+              statusDotClasses[status],
+            )}
+            aria-hidden="true"
+          />
+          {text != null ? <span>{text}</span> : null}
+        </span>
+      );
+    }
+
+    const hasNumeric = count !== undefined;
+    const shouldShowCount = hasNumeric && (count !== 0 || showZero);
+    const display =
+      hasNumeric && count! > overflowCount ? `${overflowCount}+` : count;
+
+    // ── Wrapped mode: badge floats on top-right of children ───────────────────
+    if (children !== undefined && (dot || shouldShowCount)) {
+      return (
+        <span
+          ref={ref}
+          className={cn('relative inline-flex shrink-0', className)}
+          {...props}
+        >
+          {children}
+          {dot ? (
+            <span
+              className="absolute right-0 top-0 size-2 -translate-y-1/2 translate-x-1/2 rounded-full bg-destructive ring-2 ring-background"
+              aria-hidden="true"
+            />
+          ) : (
+            <span className="absolute right-0 top-0 inline-flex min-w-[1.25rem] -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold leading-none text-destructive-foreground ring-2 ring-background">
+              {display}
+            </span>
+          )}
+        </span>
+      );
+    }
+
+    // ── Standalone dot ────────────────────────────────────────────────────────
+    if (dot) {
+      return (
+        <span
+          ref={ref}
+          className={cn(
+            'inline-block size-2 rounded-full bg-destructive',
+            className,
+          )}
+          aria-hidden="true"
+          {...props}
+        />
+      );
+    }
+
+    // ── Standalone numeric badge ──────────────────────────────────────────────
+    if (shouldShowCount) {
+      return (
+        <span
+          ref={ref}
+          className={cn(
+            'inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold leading-none text-destructive-foreground',
+            className,
+          )}
+          {...props}
+        >
+          {display}
+        </span>
+      );
+    }
+
+    // ── shadcn-style text badge (default mode) ────────────────────────────────
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  },
+);
+Badge.displayName = 'Badge';
+
+export { Badge, badgeVariants };

package/src/components/breadcrumb/breadcrumb.meta.md

@@ -0,0 +1,107 @@
+---
+id: breadcrumb
+name: Breadcrumb
+type: component
+category: navigation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Breadcrumb
+
+面包屑 — 纯组合组件 + antd `separator` 自定义并集。
+**与 antd Breadcrumb 的差异**:antd 用 `routes` 数组配置;本组件走 shadcn 的**组合式**(每项手写 `<BreadcrumbItem>`),配 React Router / Next.js Link 时更灵活。
+
+## When to use
+
+- 多层级页面的当前位置导航(项目 / 资源 / 详情)
+- 文件系统 / 树形结构当前路径
+- 表单分步流程的位置提示
+
+## When NOT to use
+
+- 平级 tab → `Tabs`
+- 步骤流程 → `Steps`(v0.x)
+- 仅一级 → 不需要 Breadcrumb
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `separator` | `React.ReactNode` | – | – | 自定义分隔符(antd `separator` 并集)。每个 `<BreadcrumbSeparator />` 默认渲染 `<ChevronRight />`, 通过设置 children 可全局覆盖。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add breadcrumb` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-slot@^1.1.0 lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+> 子组件:`Breadcrumb`(nav)/ `BreadcrumbList`(ol)/ `BreadcrumbItem`(li)/ `BreadcrumbLink`(支持 asChild)/ `BreadcrumbPage`(当前页,不可点)/ `BreadcrumbSeparator`(默认 ChevronRight,可自定义)/ `BreadcrumbEllipsis`(省略,中间路径折叠用)。
+
+## AI 生成纪律
+
+- **当前页用 `BreadcrumbPage`**,不是 `BreadcrumbLink`(语义 + 视觉都不同)
+- **配路由用 `asChild`**:`<BreadcrumbLink asChild><Link to="/x">...</Link></BreadcrumbLink>`
+- **每两项之间必有 Separator**:不要手写 `>` 字符
+- **过长路径用 Ellipsis**:超过 4 级时中间收成 `<BreadcrumbEllipsis />`(可配 DropdownMenu 展开完整列表)
+- **路径文字简短**:每段 ≤ 6 字 / 12 字符,过长导致换行视觉破碎
+
+## Examples
+
+```tsx
+import {
+  Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink,
+  BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis,
+} from '@/components/ui/breadcrumb';
+
+// 基本
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">首页</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/projects">项目</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>运营后台</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+
+// 自定义 Separator
+<BreadcrumbSeparator>/</BreadcrumbSeparator>
+
+// 长路径折叠
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem><BreadcrumbLink href="/">首页</BreadcrumbLink></BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem><BreadcrumbPage>当前页</BreadcrumbPage></BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Slash } from 'lucide-react';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './breadcrumb';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: '导航 · Navigation/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">首页</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/projects">项目</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>运营后台</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const CustomSeparator: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">首页</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>当前页</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const Ellipsis: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">首页</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/services">服务</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>详情</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};