@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/sidebar/sidebar.stories.tsx

@@ -1,42 +1,142 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Home, Inbox, Settings, Users } from 'lucide-react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  BookOpen,
+  Bot,
+  ChevronRight,
+  FileText,
+  Folder,
+  Home,
+  Inbox,
+  MessageSquare,
+  MoreHorizontal,
+  Search,
+  Settings,
+  Star,
+  Users,
+} from 'lucide-react';
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@/components/input-group/input-group';
+
 import {
-  SidebarProvider,
   Sidebar,
-  SidebarHeader,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
+  SidebarGroupAction,
   SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
   SidebarMenu,
-  SidebarMenuItem,
+  SidebarMenuAction,
+  SidebarMenuBadge,
   SidebarMenuButton,
-  SidebarFooter,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
   SidebarTrigger,
-  SidebarInset,
 } from './sidebar';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/collapsible/collapsible';
 
 const meta: Meta<typeof Sidebar> = {
-  title: '导航 · Navigation/Sidebar',
+  title: '布局 · Layout/Sidebar',
   component: Sidebar,
   tags: ['autodocs'],
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Sidebar — shadcn 完整版 25 primitives 复合,等价 antd Layout.Sider + Menu + 移动端 Drawer。\n\n**核心能力**:Provider(open 受控/cookie 持久化/Cmd+B 快捷键/mobile 自动切 Sheet)、`variant=sidebar|floating|inset` × `collapsible=offcanvas|icon|none`、Menu 二级(Sub)+ 徽标(Badge)+ 操作(Action)+ 骨架(Skeleton)+ Rail 拖拽收合、Input 顶部搜索、GroupAction 头部操作槽、折叠态自动 Tooltip。',
+      },
+    },
+  },
+  argTypes: {
+    side: {
+      control: 'inline-radio',
+      options: ['left', 'right'],
+    },
+    variant: {
+      control: 'inline-radio',
+      options: ['sidebar', 'floating', 'inset'],
+    },
+    collapsible: {
+      control: 'inline-radio',
+      options: ['offcanvas', 'icon', 'none'],
+    },
+  },
+  args: { side: 'left', variant: 'sidebar', collapsible: 'icon' },
 };
 
 export default meta;
 type Story = StoryObj<typeof Sidebar>;
 
-const items = [
+// ─── 复用数据 + 内部小工具 ──────────────────────────────────────────────────
+
+const navItems = [
   { title: '首页', url: '#home', icon: Home },
-  { title: '收件箱', url: '#inbox', icon: Inbox },
+  { title: '收件箱', url: '#inbox', icon: Inbox, badge: 5 },
   { title: '团队', url: '#team', icon: Users },
   { title: '设置', url: '#settings', icon: Settings },
 ];
 
-function DemoLayout({ active }: { active: string }) {
+const kbSubItems = [
+  { title: '公开文档', url: '#kb-public' },
+  { title: '团队空间', url: '#kb-team' },
+  { title: '我的草稿', url: '#kb-mine' },
+];
+
+const favoriteItems = [
+  { title: 'React 文档', url: '#fav-react' },
+  { title: '发布流程', url: '#fav-release' },
+  { title: '故障排查', url: '#fav-debug' },
+];
+
+function MainContent({ children }: { children?: React.ReactNode }) {
   return (
+    <SidebarInset>
+      <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-4">
+        <SidebarTrigger />
+        <h2 className="text-sm font-medium">主内容区</h2>
+        <span className="ml-auto text-xs text-muted-foreground">
+          按 ⌘ + B 切换 Sidebar
+        </span>
+      </header>
+      <div className="flex-1 overflow-auto p-6 text-sm text-muted-foreground">
+        {children ?? '点击左上角图标可折叠 / 展开 Sidebar。'}
+      </div>
+    </SidebarInset>
+  );
+}
+
+// ─── Story 1: Default — 基础导航 + 折叠 ──────────────────────────────────
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '基础形态:Provider + Header + Content/Group/Menu + Footer + Trigger + Inset。点击左上角 Trigger 或按 `Cmd+B` 切换折叠;`isActive` 由消费方根据路由计算传入。',
+      },
+    },
+  },
+  render: (args) => (
     <SidebarProvider>
-      <Sidebar>
+      <Sidebar {...args}>
         <SidebarHeader>
           <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
         </SidebarHeader>
@@ -44,11 +144,12 @@ function DemoLayout({ active }: { active: string }) {
           <SidebarGroup>
             <SidebarGroupLabel>导航</SidebarGroupLabel>
             <SidebarMenu>
-              {items.map((it) => (
+              {navItems.map((it) => (
                 <SidebarMenuItem key={it.title}>
                   <SidebarMenuButton
                     asChild
-                    isActive={active === it.url}
+                    tooltip={it.title}
+                    isActive={it.url === '#home'}
                   >
                     <a href={it.url} onClick={(e) => e.preventDefault()}>
                       <it.icon />
@@ -61,22 +162,593 @@ function DemoLayout({ active }: { active: string }) {
           </SidebarGroup>
         </SidebarContent>
         <SidebarFooter>
-          <p className="px-2 text-xs text-muted-foreground">v0.1.0</p>
+          <p className="px-2 text-xs text-muted-foreground">v0.4.0</p>
         </SidebarFooter>
       </Sidebar>
-      <SidebarInset>
-        <header className="flex h-12 items-center gap-2 border-b px-4">
-          <SidebarTrigger />
-          <h2 className="text-sm font-medium">主内容区</h2>
-        </header>
-        <div className="flex-1 p-6 text-sm text-muted-foreground">
-          点击左上角图标可折叠 / 展开 Sidebar。
-        </div>
-      </SidebarInset>
+      <MainContent />
     </SidebarProvider>
-  );
-}
+  ),
+};
 
-export const Default: Story = {
-  render: () => <DemoLayout active="#home" />,
+// ─── Story 2: CollapsibleIcon — 折叠态自动 Tooltip ─────────────────────────
+
+export const CollapsibleIcon: Story = {
+  name: '折叠态 + 自动 Tooltip',
+  args: { collapsible: 'icon' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`collapsible="icon"` + `<SidebarMenuButton tooltip="文字" />`:折叠后只剩 icon 列(3rem),hover icon 自动弹 Tooltip 显示文字,折叠态导航不丢失语义。点击 Trigger 或 `Cmd+B` 切换折叠演示。',
+      },
+    },
+  },
+  render: (args) => {
+    const [collapsed, setCollapsed] = React.useState(true);
+    return (
+      <SidebarProvider open={!collapsed} onOpenChange={(o) => setCollapsed(!o)}>
+        <Sidebar {...args}>
+          <SidebarHeader>
+            <h1 className="px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+              Teamix Evo
+            </h1>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>导航</SidebarGroupLabel>
+              <SidebarMenu>
+                {navItems.map((it) => (
+                  <SidebarMenuItem key={it.title}>
+                    <SidebarMenuButton asChild tooltip={it.title}>
+                      <a href={it.url} onClick={(e) => e.preventDefault()}>
+                        <it.icon />
+                        <span>{it.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+        <MainContent>
+          <p>
+            当前折叠状态:<strong>{collapsed ? '已折叠' : '已展开'}</strong>
+          </p>
+          <p className="mt-2">
+            折叠后将鼠标 hover 到任一 icon 上,会看到 Tooltip 弹出对应文字。
+          </p>
+        </MainContent>
+      </SidebarProvider>
+    );
+  },
+};
+
+// ─── Story 3: WithSubMenus — 二级菜单(MenuSub) ─────────────────────────────
+
+export const WithSubMenus: Story = {
+  name: '二级菜单 SubMenus',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`SidebarMenuSub / SubItem / SubButton` + `Collapsible` 实现二级展开收起。折叠态(`collapsible="icon"`)下二级自动隐藏。常用于知识库 / 多模块工作台。',
+      },
+    },
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <Sidebar {...args}>
+        <SidebarHeader>
+          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>导航</SidebarGroupLabel>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild tooltip="首页">
+                  <a href="#home" onClick={(e) => e.preventDefault()}>
+                    <Home />
+                    <span>首页</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              {/* 知识库 + 二级 */}
+              <Collapsible defaultOpen asChild className="group/collapsible">
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton tooltip="知识库">
+                      <BookOpen />
+                      <span>知识库</span>
+                      <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {kbSubItems.map((s) => (
+                        <SidebarMenuSubItem key={s.title}>
+                          <SidebarMenuSubButton
+                            href={s.url}
+                            isActive={s.url === '#kb-public'}
+                            onClick={(e) => e.preventDefault()}
+                          >
+                            <span>{s.title}</span>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild tooltip="设置">
+                  <a href="#settings" onClick={(e) => e.preventDefault()}>
+                    <Settings />
+                    <span>设置</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <MainContent>
+        知识库展开后,折叠 Sidebar 试试 — 二级菜单会自动隐藏。
+      </MainContent>
+    </SidebarProvider>
+  ),
+};
+
+// ─── Story 4: WithBadgeAndAction — 徽标 + 行操作 ─────────────────────────────
+
+export const WithBadgeAndAction: Story = {
+  name: '徽标 + 行操作',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`SidebarMenuBadge` 展示未读数 / 状态(Tailwind tabular-nums 等宽);`SidebarMenuAction` 是行内操作槽(`showOnHover` 控制是否仅 hover 时显示)。两者位置在 MenuButton 右侧。',
+      },
+    },
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <Sidebar {...args}>
+        <SidebarHeader>
+          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>导航</SidebarGroupLabel>
+            <SidebarMenu>
+              {navItems.map((it) => (
+                <SidebarMenuItem key={it.title}>
+                  <SidebarMenuButton asChild tooltip={it.title}>
+                    <a href={it.url} onClick={(e) => e.preventDefault()}>
+                      <it.icon />
+                      <span>{it.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                  {it.badge ? (
+                    <SidebarMenuBadge>{it.badge}</SidebarMenuBadge>
+                  ) : null}
+                  <SidebarMenuAction
+                    showOnHover
+                    aria-label="更多"
+                    onClick={(e) => e.preventDefault()}
+                  >
+                    <MoreHorizontal />
+                  </SidebarMenuAction>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <MainContent>
+        把鼠标移到任一菜单项上 — 右侧会浮现「⋯」操作按钮。
+      </MainContent>
+    </SidebarProvider>
+  ),
+};
+
+// ─── Story 5: VariantFloating — 浮起圆角 ─────────────────────────────────────
+
+export const VariantFloating: Story = {
+  name: 'variant=floating(浮起圆角)',
+  args: { variant: 'floating' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`variant="floating"`:Sidebar 与边缘留 8px 间距,带圆角 + 阴影 + 边框。视觉更轻盈,适合 dashboard / 营销后台。',
+      },
+    },
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <Sidebar {...args}>
+        <SidebarHeader>
+          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>导航</SidebarGroupLabel>
+            <SidebarMenu>
+              {navItems.map((it) => (
+                <SidebarMenuItem key={it.title}>
+                  <SidebarMenuButton asChild tooltip={it.title}>
+                    <a href={it.url} onClick={(e) => e.preventDefault()}>
+                      <it.icon />
+                      <span>{it.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <MainContent />
+    </SidebarProvider>
+  ),
+};
+
+// ─── Story 6: VariantInset — 主内容区圆角内嵌 ────────────────────────────────
+
+export const VariantInset: Story = {
+  name: 'variant=inset(主区圆角)',
+  args: { variant: 'inset' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`variant="inset"`:主内容区 SidebarInset 加圆角 + 阴影 + 留白,Sidebar 退到背景。视觉上"内容卡片化",适合内容密集的工作台。',
+      },
+    },
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <Sidebar {...args}>
+        <SidebarHeader>
+          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>导航</SidebarGroupLabel>
+            <SidebarMenu>
+              {navItems.map((it) => (
+                <SidebarMenuItem key={it.title}>
+                  <SidebarMenuButton asChild tooltip={it.title}>
+                    <a href={it.url} onClick={(e) => e.preventDefault()}>
+                      <it.icon />
+                      <span>{it.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <MainContent />
+    </SidebarProvider>
+  ),
+};
+
+// ─── Story 7: WithRail — 拖拽收合区 ──────────────────────────────────────────
+
+export const WithRail: Story = {
+  name: 'Rail 拖拽收合',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`SidebarRail` 替代显式 Trigger 按钮 — 在 Sidebar 右边缘提供窄拖拽区,点击/双击触发折叠。`<SidebarRail />` 放在 `<Sidebar>` 内任意位置即可。',
+      },
+    },
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <Sidebar {...args}>
+        <SidebarHeader>
+          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>导航</SidebarGroupLabel>
+            <SidebarMenu>
+              {navItems.map((it) => (
+                <SidebarMenuItem key={it.title}>
+                  <SidebarMenuButton asChild tooltip={it.title}>
+                    <a href={it.url} onClick={(e) => e.preventDefault()}>
+                      <it.icon />
+                      <span>{it.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <MainContent>
+        把鼠标移到 Sidebar 右边缘 — 会出现窄拖拽柄,点击切换折叠。
+      </MainContent>
+    </SidebarProvider>
+  ),
+};
+
+// ─── Story 8: WithInputAndGroupAction — 顶部搜索 + 分组操作 ──────────────────
+
+export const WithInputAndGroupAction: Story = {
+  name: '顶部搜索 + 分组操作',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`SidebarInput` 提供顶部搜索框(常配合 cmdk 做命令面板触发);`SidebarGroupAction` 是分组头右侧操作槽(添加 / 编辑 / 设置)。两者组合常见于"项目列表"等需要管理的分组。',
+      },
+    },
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <Sidebar {...args}>
+        <SidebarHeader>
+          <div className="flex items-center gap-2 px-2 py-1.5">
+            <h1 className="text-sm font-semibold">Teamix Evo</h1>
+          </div>
+          <div className="px-2 pb-1">
+            <InputGroup>
+              <InputGroupAddon position="before" variant="icon">
+                <Search className="size-4" />
+              </InputGroupAddon>
+              <InputGroupInput placeholder="搜索…" />
+            </InputGroup>
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>导航</SidebarGroupLabel>
+            <SidebarMenu>
+              {navItems.slice(0, 3).map((it) => (
+                <SidebarMenuItem key={it.title}>
+                  <SidebarMenuButton asChild tooltip={it.title}>
+                    <a href={it.url} onClick={(e) => e.preventDefault()}>
+                      <it.icon />
+                      <span>{it.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+
+          <SidebarSeparator />
+
+          <SidebarGroup>
+            <SidebarGroupLabel>收藏</SidebarGroupLabel>
+            <SidebarGroupAction
+              aria-label="管理收藏"
+              onClick={(e) => e.preventDefault()}
+            >
+              <MoreHorizontal />
+            </SidebarGroupAction>
+            <SidebarMenu>
+              {favoriteItems.map((f) => (
+                <SidebarMenuItem key={f.title}>
+                  <SidebarMenuButton asChild tooltip={f.title} size="sm">
+                    <a href={f.url} onClick={(e) => e.preventDefault()}>
+                      <Star />
+                      <span>{f.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <MainContent>顶部 Input 搜索 + 收藏分组头部「⋯」管理操作。</MainContent>
+    </SidebarProvider>
+  ),
+};
+
+// ─── Story 9: LoadingSkeleton — 异步加载占位 ─────────────────────────────────
+
+export const LoadingSkeleton: Story = {
+  name: '加载骨架 MenuSkeleton',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`SidebarMenuSkeleton` 用于异步导航的占位 — 自带随机宽度变化避免视觉死板,`showIcon` 控制是否显示左侧 icon 骨架。',
+      },
+    },
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <Sidebar {...args}>
+        <SidebarHeader>
+          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>导航(加载中)</SidebarGroupLabel>
+            <SidebarMenu>
+              {Array.from({ length: 5 }).map((_, i) => (
+                <SidebarMenuItem key={i}>
+                  <SidebarMenuSkeleton showIcon />
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <MainContent>
+        真实业务里这层骨架会在数据 ready 后切换为 Menu。
+      </MainContent>
+    </SidebarProvider>
+  ),
+};
+
+// ─── Story 10: FullStack — 综合演示(品牌头 + 多分组 + 二级 + 徽标 + 用户区) ───
+
+export const FullStack: Story = {
+  name: '综合 — 品牌头 + 多分组 + 二级 + 徽标 + 用户区',
+  args: { collapsible: 'icon' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '把 Header(品牌)+ 多 Group(导航 / KB 二级 / 收藏)+ Badge / Action + Footer(用户区)拼起来,接近真实后台 layout。注意所有需要在折叠态保留语义的菜单项都传了 `tooltip` prop。',
+      },
+    },
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <Sidebar {...args}>
+        <SidebarHeader>
+          <div className="flex items-center gap-2 px-2 py-1.5">
+            <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+              <Bot className="size-4" />
+            </div>
+            <div className="flex flex-1 flex-col leading-tight group-data-[collapsible=icon]:hidden">
+              <span className="truncate text-sm font-semibold">Teamix Evo</span>
+              <span className="truncate text-xs text-sidebar-foreground/70">
+                v0.4 · OpenTrek
+              </span>
+            </div>
+          </div>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>导航</SidebarGroupLabel>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild tooltip="首页" isActive>
+                  <a href="#home" onClick={(e) => e.preventDefault()}>
+                    <Home />
+                    <span>首页</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+
+              <Collapsible defaultOpen asChild className="group/collapsible">
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton tooltip="知识库">
+                      <BookOpen />
+                      <span>知识库</span>
+                      <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {kbSubItems.map((s) => (
+                        <SidebarMenuSubItem key={s.title}>
+                          <SidebarMenuSubButton
+                            href={s.url}
+                            isActive={s.url === '#kb-team'}
+                            onClick={(e) => e.preventDefault()}
+                          >
+                            <span>{s.title}</span>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild tooltip="收件箱">
+                  <a href="#inbox" onClick={(e) => e.preventDefault()}>
+                    <Inbox />
+                    <span>收件箱</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuBadge>5</SidebarMenuBadge>
+              </SidebarMenuItem>
+
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild tooltip="评论">
+                  <a href="#comments" onClick={(e) => e.preventDefault()}>
+                    <MessageSquare />
+                    <span>评论</span>
+                  </a>
+                </SidebarMenuButton>
+                <SidebarMenuAction
+                  showOnHover
+                  aria-label="评论设置"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  <MoreHorizontal />
+                </SidebarMenuAction>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+
+          <SidebarGroup>
+            <SidebarGroupLabel>项目</SidebarGroupLabel>
+            <SidebarGroupAction
+              aria-label="新建项目"
+              onClick={(e) => e.preventDefault()}
+            >
+              <FileText />
+            </SidebarGroupAction>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild tooltip="移动端" size="sm">
+                  <a href="#proj-1" onClick={(e) => e.preventDefault()}>
+                    <Folder />
+                    <span>移动端 App</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild tooltip="后台" size="sm">
+                  <a href="#proj-2" onClick={(e) => e.preventDefault()}>
+                    <Folder />
+                    <span>管理后台</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroup>
+        </SidebarContent>
+
+        <SidebarFooter>
+          <div className="flex items-center gap-2 px-2 py-1.5">
+            <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-sidebar-accent text-xs font-medium text-sidebar-accent-foreground">
+              U
+            </div>
+            <div className="flex min-w-0 flex-1 flex-col leading-tight group-data-[collapsible=icon]:hidden">
+              <span className="truncate text-sm font-medium">张三</span>
+              <span className="truncate text-xs text-sidebar-foreground/70">
+                zhangsan@example.com
+              </span>
+            </div>
+          </div>
+        </SidebarFooter>
+      </Sidebar>
+
+      <MainContent>
+        <p>
+          真实工作台合成:折叠后所有 Tooltip / Badge / SubMenu
+          自动收起,展开后完整呈现。
+        </p>
+        <p className="mt-2">
+          按{' '}
+          <kbd className="rounded-sm border border-border bg-muted px-1 text-xxs">
+            ⌘B
+          </kbd>{' '}
+          切换折叠;窗口缩小到 768px 以下会自动切换为 Sheet 抽屉形态。
+        </p>
+      </MainContent>
+    </SidebarProvider>
+  ),
 };