@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/drawer/drawer.meta.md

@@ -1,95 +0,0 @@
----
-id: drawer
-name: Drawer
-displayName: 抽屉（Sheet 别名）
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
-alias: sheet
----
-
-# Drawer 抽屉（Sheet 别名）
-
-Drawer 现在是 Sheet 的 re-export 别名。所有能力(side / size / header / body / footer / 圆角)与 Sheet 完全一致。
-保留本 entry 仅为向后兼容 — 已有的 `import { Drawer, DrawerContent } from '...'` 不会断裂。
-
-> **新代码推荐直接使用 Sheet。**
-
-## When to use
-
-与 Sheet 相同 — 参见 [Sheet](../sheet/sheet.meta.md)。
-
-## When NOT to use
-
-与 Sheet 相同 — 参见 [Sheet](../sheet/sheet.meta.md)。
-
-## Props
-
-> DrawerContent 的 props 与 SheetContent 完全一致(类型别名)。
-
-<!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`drawer.tsx`](./drawer.tsx))_
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add drawer` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `sheet` | component | 侧边面板 — Radix Dialog + side(left/right/top/bottom) + size(sm/md/lg/xl) + --radius-dialog 圆角,对齐 antd Drawer 全能力集 |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-> 导出映射:`Drawer=Sheet` / `DrawerContent=SheetContent` / `DrawerHeader=SheetHeader` / `DrawerBody=SheetBody` / `DrawerFooter=SheetFooter` / `DrawerTitle=SheetTitle` / `DrawerDescription=SheetDescription` / `DrawerClose=SheetClose`。
-
-## AI 生成纪律
-
-- **新代码不要使用 Drawer**:统一用 Sheet,Drawer 仅保持已有代码兼容
-- **Drawer 与 Sheet 能力完全等价**:side / size / header / body / footer 行为一致
-- 其余纪律参见 [Sheet meta](../sheet/sheet.meta.md)
-
-## Examples
-
-```tsx
-// 向后兼容写法(不推荐新代码使用)
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  DrawerHeader,
-  DrawerBody,
-  DrawerTitle,
-  DrawerFooter,
-  DrawerClose,
-} from '@/components/ui/drawer';
-import { Button } from '@/components/ui/button';
-
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button variant="outline">打开</Button>
-  </DrawerTrigger>
-  <DrawerContent side="right" size="md">
-    <DrawerHeader>
-      <DrawerTitle>编辑</DrawerTitle>
-    </DrawerHeader>
-    <DrawerBody>{/* content */}</DrawerBody>
-    <DrawerFooter>
-      <DrawerClose asChild>
-        <Button variant="outline">取消</Button>
-      </DrawerClose>
-      <Button>确定</Button>
-    </DrawerFooter>
-  </DrawerContent>
-</Drawer>;
-```

package/src/components/drawer/drawer.stories.tsx

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  DrawerHeader,
-  DrawerBody,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerClose,
-} from './drawer';
-import { Button } from '@/components/button/button';
-
-const meta: Meta<typeof DrawerContent> = {
-  title: '反馈 · Feedback/Drawer (alias)',
-  component: DrawerContent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '抽屉（Sheet 别名） —— Drawer 现为 Sheet 的 re-export 别名,保持向后兼容。所有能力(`side`/`size`/header/body/footer/圆角)与 Sheet 完全一致,新代码推荐直接使用 Sheet。Radix Dialog 内核 + cva side/size 双变体,对齐 antd `Drawer`:`side`、`size`、`showClose`。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    side: {
-      control: 'inline-radio',
-      options: ['top', 'right', 'bottom', 'left'],
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['sm', 'md', 'lg', 'xl'],
-    },
-    showClose: {
-      control: 'boolean',
-    },
-  },
-  args: { side: 'right', size: 'md', showClose: true },
-};
-
-export default meta;
-type Story = StoryObj<typeof DrawerContent>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">打开 Drawer (alias)</Button>
-      </DrawerTrigger>
-      <DrawerContent {...args}>
-        <DrawerHeader>
-          <DrawerTitle>编辑资料</DrawerTitle>
-        </DrawerHeader>
-        <DrawerBody>
-          <DrawerDescription>Drawer 现在等同于 Sheet。</DrawerDescription>
-          <div className="py-4 text-sm text-muted-foreground">
-            内容区域...
-          </div>
-        </DrawerBody>
-        <DrawerFooter>
-          <DrawerClose asChild>
-            <Button variant="outline">取消</Button>
-          </DrawerClose>
-          <Button>确定</Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  ),
-};

package/src/components/drawer/drawer.tsx

@@ -1,23 +0,0 @@
-/**
- * Drawer — Sheet 的别名导出。
- *
- * 历史上 Drawer 基于 vaul(底部可拖拽抽屉),现在统一为 Sheet(Radix Dialog 底座)。
- * 本文件通过 re-export 保持向后兼容:业务侧已有的 `import { Drawer, DrawerContent } from '...'` 不会断裂。
- *
- * @see sheet.tsx — 实际实现
- */
-export {
-  Sheet as Drawer,
-  SheetPortal as DrawerPortal,
-  SheetOverlay as DrawerOverlay,
-  SheetTrigger as DrawerTrigger,
-  SheetClose as DrawerClose,
-  SheetContent as DrawerContent,
-  SheetHeader as DrawerHeader,
-  SheetBody as DrawerBody,
-  SheetFooter as DrawerFooter,
-  SheetTitle as DrawerTitle,
-  SheetDescription as DrawerDescription,
-} from '@/components/sheet/sheet';
-
-export type { SheetContentProps as DrawerContentProps, SheetSize as DrawerSize } from '@/components/sheet/sheet';

package/src/components/dropdown-menu/dropdown-menu.meta.md

@@ -1,171 +0,0 @@
----
-id: dropdown-menu
-name: DropdownMenu
-type: component
-category: navigation
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 下拉菜单
----
-
-# DropdownMenu 下拉菜单
-
-下拉菜单 — Radix DropdownMenu 完整实现:Item / CheckboxItem / RadioItem / Label / Separator / Shortcut / Sub(子菜单)。
-对应 antd `Dropdown`,但本组件是**完整 menu primitives**(antd Dropdown 主要走 children 自由排版,本组件提供语义化每一种 item)。
-
-## When to use
-
-- 行内动作菜单(列表项的"更多")
-- 用户头像下拉(账户 / 设置 / 退出)
-- 工具栏溢出菜单
-- 多选 / 单选下拉(用 CheckboxItem / RadioItem)
-
-## When NOT to use
-
-- 页面顶部主导航 → `NavigationMenu`
-- 工具栏多个一级菜单 → `Menubar`
-- 右键菜单 → `ContextMenu`
-- 选择类表单 → `Select` / `Combobox`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `DropdownMenuContent` 的 props;`DropdownMenu`(Root)透传 Radix `open / defaultOpen / onOpenChange / modal`。
-
-<!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`dropdown-menu.tsx`](./dropdown-menu.tsx))_
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add dropdown-menu` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-dropdown-menu@^2.1.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **Trigger 用 `asChild`**:wrap 已有 Button,而非新增 button 层
-- **每个 Item 必有 `onClick` 或 `onSelect`**:无操作的 Item 是反模式 — 移到 Description 区
-- **危险动作单独配色**:`<DropdownMenuItem className="text-destructive focus:text-destructive">删除</DropdownMenuItem>`,**不要**塞 destructive Button 进 Item
-- **Shortcut 用 `<DropdownMenuShortcut>`**:右对齐快捷键文案,**不要**手写 `<span className="ml-auto">`
-- **inset 对齐有 icon 的 item**:同一菜单内有 icon item 也有无 icon item 时,无 icon 的加 `inset` 让文字对齐
-
-## Examples
-
-```tsx
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-  DropdownMenuPortal,
-} from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { User, Settings, LogOut } from 'lucide-react';
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">菜单</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent className="w-56">
-    <DropdownMenuLabel>我的账户</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      <User /> 个人资料
-      <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Settings /> 设置
-      <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem className="text-destructive focus:text-destructive">
-      <LogOut /> 退出
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
-## MenuButton 形态 — 旧库 API → 新组合映射
-
-新库 **不提供独立的 `MenuButton` 组件**。这是主动决策 — 旧库 cloud-design `MenuButton` / antd `Dropdown` 本质上就是 `DropdownMenu + Button trigger` 的组合,因此面向业务只暴露组合写法可以:
-
-- 与 `SplitButton` 形态(见 [`button.meta.md`](../button/button.meta.md))共享同一套 trigger 协议
-- 遵循 P1 "三层对齐"的原子/合成分层,不引入 wrapper 级套娃
-- 业务侧保留 trigger Button 类型全控(variant / size / icon / iconRight / loading 任意组合)
-
-### Props 映射表
-
-| 旧库 `MenuButton` API | 新库等价写法 | 备注 |
-| --- | --- | --- |
-| `label="X"` | `<DropdownMenuTrigger asChild><Button iconRight={<ChevronDown />}>X</Button></DropdownMenuTrigger>` | trigger Button 是 unstyled Slot,业务自由组合 variant/size/icon/iconRight |
-| `shape` / `type` / `size` / `component` / `ghost` 等 Button 属性透传 | 直接给 trigger Button 传同名 props | 新库 Button 见 [`button.meta.md`](../button/button.meta.md) |
-| `autoWidth`(默认 true,弹层宽度=按钮宽度) | `<DropdownMenuContent style={{ minWidth: 'var(--radix-dropdown-menu-trigger-width)' }}>` | 读 Radix 暴露的 CSS 变量;默认遵 shadcn `min-w-menu`(8rem)。主动选 `style` 而非 Tailwind arbitrary value(`min-w-[var(--...)]`),避免 `no-arbitrary-tw-value` lint 告警 |
-| `popupTriggerType="click"`(默认) | 默认即点击触发,无需配置 | — |
-| `popupTriggerType="hover"` | **不支持** — Radix 故意不暴露 hover(WCAG 可达性) | 替代:用 `HoverCard`(纯展示)或 `NavigationMenu`(导航) |
-| `popupContainer` | `<DropdownMenuPortal container={...}>` | 见 Radix 原生 Portal API |
-| `visible` / `defaultVisible` | `<DropdownMenu open={...}>` / `defaultOpen={...}` | — |
-| `onVisibleChange` | `<DropdownMenu onOpenChange={...}>` | — |
-| `popupStyle` / `popupClassName` | `<DropdownMenuContent style={...} className={...}>` | 直接传给 Content |
-| `popupProps` | `<DropdownMenuContent {...props}>` | 任意原生 prop 透传 |
-| `followTrigger`(滚动跟随) | **不支持** — Radix Portal 默认即 follow | — |
-| `defaultSelectedKeys` / `selectedKeys` + `selectMode="single"` | `<DropdownMenuRadioGroup defaultValue={...}>` / `value={...}` + `<DropdownMenuRadioItem value="...">` | 受控/非受控两套 |
-| `selectMode="multiple"` + `selectedKeys` | 多个独立 `<DropdownMenuCheckboxItem checked={...} onCheckedChange={...}>` | 业务侧自管 state(单选 vs 多选语义不同) |
-| `onItemClick` | 给每个 `<DropdownMenuItem onSelect={...}>` 单独绑 | shadcn/Radix 范式 — 每项独立处理器更类型安全 |
-| `onSelect` | `<DropdownMenuRadioGroup onValueChange={...}>` | 单选场景 |
-| `menuProps` | `<DropdownMenuContent {...}>` | 与 popupProps 等价 |
-| `MenuButton.Item` | `DropdownMenuItem` | — |
-| `MenuButton.Group` | `DropdownMenuGroup` + `DropdownMenuLabel` | — |
-| `MenuButton.Divider` | `DropdownMenuSeparator` | — |
-
-### 不修复清单(主动不补)
-
-| 旧 API | 决策原因 |
-| --- | --- |
-| `popupTriggerType="hover"` | Radix 故意不暴露(WCAG 可达性 — hover-only 触发对键盘/触屏不友好);替代用 `HoverCard` |
-| `delay`(hover 延时) | 无 hover 模式,故无需延时 |
-| `beforeOpen` / `afterClose` 等生命周期 | 已统一为 `onOpenChange(open)`,语义更窄/无歧义 |
-| `animation` 自定义参数 | 已固化为内置 CSS 动画(`animate-in/out fade+zoom+slide` 四向);业务覆盖 → `<DropdownMenuContent className="...">` |
-| 默认 ChevronDown 图标 | trigger Button 由业务组合,不在 Trigger 内塞默认 icon — 与 shadcn / Radix 的 unstyled trigger 语义一致 |
-| 独立 `MenuButton` 导出 | P1 三层对齐;`<DropdownMenu> + <Button>` 即原子合成,无需 wrapper |
-
-### 4 段标准形态 ↔ 现有 Story
-
-| 旧库 demo | 新库 Story | 文件 |
-| --- | --- | --- |
-| 基本(`label` + Button 属性透传) | `Default` | [`dropdown-menu.stories.tsx`](./dropdown-menu.stories.tsx) |
-| 复杂菜单(`Group` / `Item` / `Divider`) | `WithSubMenu`(包含 Group + Sub + Separator) | 同上 |
-| 多选菜单(`selectMode="multiple"`) | `CheckboxItems` | 同上 |
-| 单选菜单(`selectMode="single"`) | `RadioItems` | 同上 |
-| 尺寸(`size` 三档) | trigger Button 自传 `size` — 见 [`button.stories.tsx`](../button/button.stories.tsx) `GroupSplitButtonSizes` | — |
-
-### MenuButton 专项 AI 生成纪律(在通用纪律之上叠加)
-
-- **trigger Button 用 `iconRight={<ChevronDown />}`**(而非 `icon=`/`<ChevronDown />` 平铺到 children) — 让 "label + ▼" 顺序与旧库 MenuButton 一致,且自动适应 RTL
-- **ghost / 暗色容器内不要单独发明 prop** — 直接 `variant="ghost"`(浅色容器)或在暗色作用域内 `variant="ghost"` 让其继承 `--accent`(本仓库走 OpenTrek tokens 主题作用域,不需要 prop 级 light/dark 二态)
-- **autoWidth 不要写成 `min-w-[var(--radix-dropdown-menu-trigger-width)]`** — 会触发 `teamix-evo/no-arbitrary-tw-value` lint 告警;统一用 `style={{ minWidth: 'var(--radix-dropdown-menu-trigger-width)' }}` inline style
-- **不要手控 `open` state 实现 `onItemClick` 全局回调** — 每个 Item 用 `onSelect`,Radix 默认会自动关闭弹层

package/src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -1,198 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ChevronDown, LogOut, Settings, User, Cloud, Github } from 'lucide-react';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-  DropdownMenuGroup,
-} from './dropdown-menu';
-import { Button } from '@/components/button/button';
-
-const meta: Meta<typeof DropdownMenuContent> = {
-  title: '导航 · Navigation/DropdownMenu',
-  component: DropdownMenuContent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'DropdownMenu 下拉菜单 —— 按钮 / 头像 / 溢出按钮触发一组能被选择、勾选或切换的动作。Radix `DropdownMenu` 内核 + shadcn 原子，**对齐 antd `Dropdown`** 为动作菜单提供完整语义化原语，对齐 shadcn 的 `DropdownMenuItem` / `DropdownMenuCheckboxItem` / `DropdownMenuRadioItem` / `DropdownMenuSub` / `DropdownMenuShortcut`，并补足 `disabled` / `inset` / 嵌套子菜单。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/tokens`，无 mock。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DropdownMenuContent>;
-
-export const Default: Story = {
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">打开菜单</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>我的账户</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <User /> 个人资料
-          <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Settings /> 设置
-          <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Cloud /> API
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Github /> GitHub
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem className="text-destructive focus:text-destructive">
-          <LogOut /> 退出
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
-};
-
-export const CheckboxItems: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [bookmarks, setBookmarks] = React.useState(true);
-    const [fullURLs, setFullURLs] = React.useState(false);
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">视图设置</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56">
-          <DropdownMenuLabel>外观</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuCheckboxItem
-            checked={bookmarks}
-            onCheckedChange={setBookmarks}
-          >
-            显示书签栏
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={fullURLs}
-            onCheckedChange={setFullURLs}
-          >
-            显示完整 URL
-          </DropdownMenuCheckboxItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  },
-};
-
-export const RadioItems: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [pos, setPos] = React.useState('bottom');
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">面板位置</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56">
-          <DropdownMenuLabel>面板位置</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuRadioGroup value={pos} onValueChange={setPos}>
-            <DropdownMenuRadioItem value="top">顶部</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="bottom">底部</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="right">右侧</DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  },
-};
-
-export const WithSubMenu: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">更多动作</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>项目</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>新建</DropdownMenuItem>
-          <DropdownMenuItem>复制</DropdownMenuItem>
-          <DropdownMenuItem>重命名…</DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>分享到</DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            <DropdownMenuItem>邮件</DropdownMenuItem>
-            <DropdownMenuItem>消息</DropdownMenuItem>
-            <DropdownMenuItem>复制链接</DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>导出为</DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            <DropdownMenuItem>PDF</DropdownMenuItem>
-            <DropdownMenuItem>Markdown</DropdownMenuItem>
-            <DropdownMenuItem disabled>HTML（即将支持）</DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
-};
-
-export const DisabledItems: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">查看禁用项</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuItem>可点击</DropdownMenuItem>
-        <DropdownMenuItem disabled>不可点击（disabled）</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>另一个可点击项</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
-};
-
-export const SplitButtonTrigger: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="inline-flex isolate [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:-ml-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10">
-      <Button>保存</Button>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button size="icon" icon={<ChevronDown />} aria-label="更多保存选项" />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>保存为草稿</DropdownMenuItem>
-          <DropdownMenuItem>保存并发布</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>另存为…</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  ),
-};