@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/sidebar/{sidebar.stories.tsx → stories.tsx}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react';
 import {
   BookOpen,
   Bot,
@@ -17,10 +17,10 @@ import {
 } from 'lucide-react';
 
 import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from '@/components/input-group/input-group';
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/collapsible';
 
 import {
   Sidebar,
@@ -28,6 +28,7 @@ import {
   SidebarFooter,
   SidebarGroup,
   SidebarGroupAction,
+  SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
   SidebarInput,
@@ -45,15 +46,10 @@ import {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
-} from './sidebar';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/components/collapsible/collapsible';
+} from './index';
 
 const meta: Meta<typeof Sidebar> = {
-  title: '布局 · Layout/Sidebar',
+  title: '导航 · Navigation/Sidebar 侧边栏',
   component: Sidebar,
   tags: ['autodocs'],
   parameters: {
@@ -61,15 +57,12 @@ const meta: Meta<typeof Sidebar> = {
     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。',
+          '侧边栏 — 可折叠的应用侧边导航。支持 `variant=sidebar|floating|inset` × `collapsible=offcanvas|icon|none`、二级菜单(Sub)+ 徽标(Badge)+ 操作(Action)+ 骨架(Skeleton)+ Rail 拖拽收合、折叠态自动 Tooltip。收起 Trigger 在 Sidebar 内部。',
       },
     },
   },
   argTypes: {
-    side: {
-      control: 'inline-radio',
-      options: ['left', 'right'],
-    },
+    side: { control: 'inline-radio', options: ['left', 'right'] },
     variant: {
       control: 'inline-radio',
       options: ['sidebar', 'floating', 'inset'],
@@ -85,11 +78,11 @@ const meta: Meta<typeof Sidebar> = {
 export default meta;
 type Story = StoryObj<typeof Sidebar>;
 
-// ─── 复用数据 + 内部小工具 ──────────────────────────────────────────────────
+// ─── 公共数据 ──────────────────────────────────────────────────────────────
 
 const navItems = [
   { title: '首页', url: '#home', icon: Home },
-  { title: '收件箱', url: '#inbox', icon: Inbox, badge: 5 },
+  { title: '收件箱', url: '#inbox', icon: Inbox },
   { title: '团队', url: '#team', icon: Users },
   { title: '设置', url: '#settings', icon: Settings },
 ];
@@ -106,117 +99,217 @@ const favoriteItems = [
   { 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。'}
+        {children ?? '点击 Sidebar 底部 Trigger 按钮或按 ⌘B 折叠 / 展开。'}
       </div>
     </SidebarInset>
   );
 }
 
-// ─── Story 1: Default — 基础导航 + 折叠 ──────────────────────────────────
+// ─── Story 1: Default — 综合示例 ────────────────────────────────────────────
 
+/** 综合示例 — 品牌头 + 多分组 + 二级菜单 + 徽标 + 行操作 + 用户区 + 内部 Trigger */
 export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '基础形态:Provider + Header + Content/Group/Menu + Footer + Trigger + Inset。点击左上角 Trigger 或按 `Cmd+B` 切换折叠;`isActive` 由消费方根据路由计算传入。',
-      },
-    },
-  },
   render: (args) => (
     <SidebarProvider>
       <Sidebar {...args}>
         <SidebarHeader>
-          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+          <div className="flex items-center gap-2 px-2 py-1.5 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0">
+            <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground group-data-[collapsible=icon]:hidden">
+              <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>
+            <SidebarTrigger />
+          </div>
         </SidebarHeader>
+
         <SidebarContent>
           <SidebarGroup>
             <SidebarGroupLabel>导航</SidebarGroupLabel>
             <SidebarMenu>
-              {navItems.map((it) => (
-                <SidebarMenuItem key={it.title}>
-                  <SidebarMenuButton
-                    asChild
-                    tooltip={it.title}
-                    isActive={it.url === '#home'}
-                  >
-                    <a href={it.url} onClick={(e) => e.preventDefault()}>
-                      <it.icon />
-                      <span>{it.title}</span>
-                    </a>
-                  </SidebarMenuButton>
+              <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>
-          <p className="px-2 text-xs text-muted-foreground">v0.4.0</p>
+          <div className="flex items-center gap-2 px-2 py-1.5 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0">
+            <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 />
+
+      <MainContent>
+        <p>折叠后所有 Tooltip / Badge / SubMenu 自动收起，展开后完整呈现。</p>
+        <p className="mt-2">
+          按{' '}
+          <kbd className="rounded-sm border border-border bg-muted px-1 text-xs">
+            ⌘B
+          </kbd>{' '}
+          切换折叠；窗口缩小到 768px 以下自动切换为 Sheet 抽屉形态。
+        </p>
+      </MainContent>
     </SidebarProvider>
   ),
 };
 
-// ─── Story 2: CollapsibleIcon — 折叠态自动 Tooltip ─────────────────────────
+// ─── Story 2: CollapsibleIcon — 折叠态自动 Tooltip ──────────────────────────
 
+/** 折叠态 + 自动 Tooltip：默认收起，hover icon 弹出文字 */
 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>
+            <div className="flex items-center group-data-[collapsible=icon]:justify-center">
+              <h1 className="flex-1 px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+                Teamix Evo
+              </h1>
+              <SidebarTrigger />
+            </div>
           </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>
+              <SidebarGroupContent>
+                <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>
+              </SidebarGroupContent>
             </SidebarGroup>
           </SidebarContent>
         </Sidebar>
         <MainContent>
           <p>
-            当前折叠状态:<strong>{collapsed ? '已折叠' : '已展开'}</strong>
+            当前折叠状态：<strong>{collapsed ? '已折叠' : '已展开'}</strong>
           </p>
           <p className="mt-2">
-            折叠后将鼠标 hover 到任一 icon 上,会看到 Tooltip 弹出对应文字。
+            折叠后 hover 任一 icon，会看到 Tooltip 弹出对应文字。
           </p>
         </MainContent>
       </SidebarProvider>
@@ -224,23 +317,22 @@ export const CollapsibleIcon: Story = {
   },
 };
 
-// ─── Story 3: WithSubMenus — 二级菜单(MenuSub) ─────────────────────────────
+// ─── Story 3: WithSubMenus — 二级菜单 ──────────────────────────────────────
 
+/** 二级菜单：配合 Collapsible 实现展开/收起，折叠态自动隐藏 */
 export const WithSubMenus: Story = {
-  name: '二级菜单 SubMenus',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '`SidebarMenuSub / SubItem / SubButton` + `Collapsible` 实现二级展开收起。折叠态(`collapsible="icon"`)下二级自动隐藏。常用于知识库 / 多模块工作台。',
-      },
-    },
-  },
+  name: '二级菜单',
+  args: { collapsible: 'icon' },
   render: (args) => (
     <SidebarProvider>
       <Sidebar {...args}>
         <SidebarHeader>
-          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+          <div className="flex items-center group-data-[collapsible=icon]:justify-center">
+            <h1 className="flex-1 px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+              Teamix Evo
+            </h1>
+            <SidebarTrigger />
+          </div>
         </SidebarHeader>
         <SidebarContent>
           <SidebarGroup>
@@ -294,29 +386,28 @@ export const WithSubMenus: Story = {
         </SidebarContent>
       </Sidebar>
       <MainContent>
-        知识库展开后,折叠 Sidebar 试试 — 二级菜单会自动隐藏。
+        知识库展开后，折叠 Sidebar — 二级菜单会自动隐藏。
       </MainContent>
     </SidebarProvider>
   ),
 };
 
-// ─── Story 4: WithBadgeAndAction — 徽标 + 行操作 ─────────────────────────────
+// ─── Story 4: WithBadgeAndAction — 徽标 + 行操作 ────────────────────────────
 
+/** 徽标 + hover 操作：MenuBadge 显示数字，MenuAction 仅 hover 浮现 */
 export const WithBadgeAndAction: Story = {
   name: '徽标 + 行操作',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '`SidebarMenuBadge` 展示未读数 / 状态(Tailwind tabular-nums 等宽);`SidebarMenuAction` 是行内操作槽(`showOnHover` 控制是否仅 hover 时显示)。两者位置在 MenuButton 右侧。',
-      },
-    },
-  },
+  args: { collapsible: 'icon' },
   render: (args) => (
     <SidebarProvider>
       <Sidebar {...args}>
         <SidebarHeader>
-          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+          <div className="flex items-center group-data-[collapsible=icon]:justify-center">
+            <h1 className="flex-1 px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+              Teamix Evo
+            </h1>
+            <SidebarTrigger />
+          </div>
         </SidebarHeader>
         <SidebarContent>
           <SidebarGroup>
@@ -330,9 +421,9 @@ export const WithBadgeAndAction: Story = {
                       <span>{it.title}</span>
                     </a>
                   </SidebarMenuButton>
-                  {it.badge ? (
-                    <SidebarMenuBadge>{it.badge}</SidebarMenuBadge>
-                  ) : null}
+                  {it.title === '收件箱' && (
+                    <SidebarMenuBadge>5</SidebarMenuBadge>
+                  )}
                   <SidebarMenuAction
                     showOnHover
                     aria-label="更多"
@@ -347,30 +438,28 @@ export const WithBadgeAndAction: Story = {
         </SidebarContent>
       </Sidebar>
       <MainContent>
-        把鼠标移到任一菜单项上 — 右侧会浮现「⋯」操作按钮。
+        鼠标移到菜单项 — 右侧浮现「⋯」操作按钮；收件箱有未读徽标。
       </MainContent>
     </SidebarProvider>
   ),
 };
 
-// ─── Story 5: VariantFloating — 浮起圆角 ─────────────────────────────────────
+// ─── Story 5: VariantFloating — 浮起圆角 ────────────────────────────────────
 
+/** 浮起变体：Sidebar 脱离边缘，带圆角和阴影 */
 export const VariantFloating: Story = {
-  name: 'variant=floating(浮起圆角)',
-  args: { variant: 'floating' },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '`variant="floating"`:Sidebar 与边缘留 8px 间距,带圆角 + 阴影 + 边框。视觉更轻盈,适合 dashboard / 营销后台。',
-      },
-    },
-  },
+  name: '浮起变体 (floating)',
+  args: { variant: 'floating', collapsible: 'icon' },
   render: (args) => (
     <SidebarProvider>
       <Sidebar {...args}>
         <SidebarHeader>
-          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+          <div className="flex items-center group-data-[collapsible=icon]:justify-center">
+            <h1 className="flex-1 px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+              Teamix Evo
+            </h1>
+            <SidebarTrigger />
+          </div>
         </SidebarHeader>
         <SidebarContent>
           <SidebarGroup>
@@ -390,29 +479,29 @@ export const VariantFloating: Story = {
           </SidebarGroup>
         </SidebarContent>
       </Sidebar>
-      <MainContent />
+      <MainContent>
+        variant=&quot;floating&quot; — 浮起、圆角、阴影。
+      </MainContent>
     </SidebarProvider>
   ),
 };
 
-// ─── Story 6: VariantInset — 主内容区圆角内嵌 ────────────────────────────────
+// ─── Story 6: VariantInset — 内嵌圆角 ───────────────────────────────────────
 
+/** 内嵌变体：主内容区圆角内缩 */
 export const VariantInset: Story = {
-  name: 'variant=inset(主区圆角)',
-  args: { variant: 'inset' },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '`variant="inset"`:主内容区 SidebarInset 加圆角 + 阴影 + 留白,Sidebar 退到背景。视觉上"内容卡片化",适合内容密集的工作台。',
-      },
-    },
-  },
+  name: '内嵌变体 (inset)',
+  args: { variant: 'inset', collapsible: 'icon' },
   render: (args) => (
     <SidebarProvider>
       <Sidebar {...args}>
         <SidebarHeader>
-          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+          <div className="flex items-center group-data-[collapsible=icon]:justify-center">
+            <h1 className="flex-1 px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+              Teamix Evo
+            </h1>
+            <SidebarTrigger />
+          </div>
         </SidebarHeader>
         <SidebarContent>
           <SidebarGroup>
@@ -432,28 +521,29 @@ export const VariantInset: Story = {
           </SidebarGroup>
         </SidebarContent>
       </Sidebar>
-      <MainContent />
+      <MainContent>
+        variant=&quot;inset&quot; — 主内容区域圆角内嵌。
+      </MainContent>
     </SidebarProvider>
   ),
 };
 
-// ─── Story 7: WithRail — 拖拽收合区 ──────────────────────────────────────────
+// ─── Story 7: WithRail — 拖拽收合 ───────────────────────────────────────────
 
+/** Rail 拖拽收合：Sidebar 右边缘 hover 出线条，点击切换 */
 export const WithRail: Story = {
   name: 'Rail 拖拽收合',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '`SidebarRail` 替代显式 Trigger 按钮 — 在 Sidebar 右边缘提供窄拖拽区,点击/双击触发折叠。`<SidebarRail />` 放在 `<Sidebar>` 内任意位置即可。',
-      },
-    },
-  },
+  args: { collapsible: 'icon' },
   render: (args) => (
     <SidebarProvider>
       <Sidebar {...args}>
         <SidebarHeader>
-          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+          <div className="flex items-center group-data-[collapsible=icon]:justify-center">
+            <h1 className="flex-1 px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+              Teamix Evo
+            </h1>
+            <SidebarTrigger />
+          </div>
         </SidebarHeader>
         <SidebarContent>
           <SidebarGroup>
@@ -475,39 +565,29 @@ export const WithRail: Story = {
         <SidebarRail />
       </Sidebar>
       <MainContent>
-        把鼠标移到 Sidebar 右边缘 — 会出现窄拖拽柄,点击切换折叠。
+        鼠标移到 Sidebar 右边缘 — 出现窄拖拽柄，点击切换折叠。
       </MainContent>
     </SidebarProvider>
   ),
 };
 
-// ─── Story 8: WithInputAndGroupAction — 顶部搜索 + 分组操作 ──────────────────
+// ─── Story 8: WithInputAndGroupAction — 搜索 + 分组操作 ─────────────────────
 
+/** 搜索输入 + 分组操作：SidebarInput + GroupAction */
 export const WithInputAndGroupAction: Story = {
-  name: '顶部搜索 + 分组操作',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '`SidebarInput` 提供顶部搜索框(常配合 cmdk 做命令面板触发);`SidebarGroupAction` 是分组头右侧操作槽(添加 / 编辑 / 设置)。两者组合常见于"项目列表"等需要管理的分组。',
-      },
-    },
-  },
+  name: '搜索 + 分组操作',
+  args: { collapsible: 'icon' },
   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 className="flex items-center group-data-[collapsible=icon]:justify-center">
+            <h1 className="flex-1 px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+              Teamix Evo
+            </h1>
+            <SidebarTrigger />
           </div>
+          <SidebarInput placeholder="搜索…" />
         </SidebarHeader>
         <SidebarContent>
           <SidebarGroup>
@@ -551,32 +631,33 @@ export const WithInputAndGroupAction: Story = {
           </SidebarGroup>
         </SidebarContent>
       </Sidebar>
-      <MainContent>顶部 Input 搜索 + 收藏分组头部「⋯」管理操作。</MainContent>
+      <MainContent>
+        顶部 SidebarInput 搜索 + 收藏分组头部「⋯」管理操作。
+      </MainContent>
     </SidebarProvider>
   ),
 };
 
-// ─── Story 9: LoadingSkeleton — 异步加载占位 ─────────────────────────────────
+// ─── Story 9: LoadingSkeleton — 加载骨架 ────────────────────────────────────
 
+/** 加载骨架：异步数据 ready 前的占位 */
 export const LoadingSkeleton: Story = {
-  name: '加载骨架 MenuSkeleton',
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '`SidebarMenuSkeleton` 用于异步导航的占位 — 自带随机宽度变化避免视觉死板,`showIcon` 控制是否显示左侧 icon 骨架。',
-      },
-    },
-  },
+  name: '加载骨架',
+  args: { collapsible: 'icon' },
   render: (args) => (
     <SidebarProvider>
       <Sidebar {...args}>
         <SidebarHeader>
-          <h1 className="px-2 text-sm font-semibold">Teamix Evo</h1>
+          <div className="flex items-center group-data-[collapsible=icon]:justify-center">
+            <h1 className="flex-1 px-2 text-sm font-semibold group-data-[collapsible=icon]:hidden">
+              Teamix Evo
+            </h1>
+            <SidebarTrigger />
+          </div>
         </SidebarHeader>
         <SidebarContent>
           <SidebarGroup>
-            <SidebarGroupLabel>导航(加载中)</SidebarGroupLabel>
+            <SidebarGroupLabel>导航（加载中）</SidebarGroupLabel>
             <SidebarMenu>
               {Array.from({ length: 5 }).map((_, i) => (
                 <SidebarMenuItem key={i}>
@@ -587,168 +668,7 @@ export const LoadingSkeleton: Story = {
           </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>
+      <MainContent>真实业务中骨架会在数据 ready 后切换为 Menu。</MainContent>
     </SidebarProvider>
   ),
 };