@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/page-header/page-header.meta.md

@@ -1,210 +0,0 @@
----
-id: page-header
-name: PageHeader
-displayName: 页头容器
-type: component
-category: layout
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# PageHeader 页头容器
-
-页头容器 — 承接 teamix-pro `ProPageHeader` 的视觉规范,转为 shadcn 复合组件范式。**纯排版骨架,不接受配置对象** — 面包屑 / 标签 / 操作按钮 / 图标 / 数据概览全部由消费方用 [`Breadcrumb`](../breadcrumb/breadcrumb.meta.md) / [`Tag`](../tag/tag.meta.md) / [`Button`](../button/button.meta.md) / [`Icon`](../icon/icon.meta.md) 等原子组件自由组合;`backgroundImage` 通过 inline `style` 注入(Tailwind 不支持动态 URL);`onBack` 纯回调,不绑路由库。
-
-## When to use
-
-- **详情页 / 列表页 / 实例页页头** — 标题 + 描述 + 面包屑 + 操作 + 数据概览的统一容器
-- **带返回按钮的二级页面** — `<PageHeaderHeading goBack onBack={...}>`
-- **品牌图 / 装饰背景的页头** — `backgroundImage` prop 注入右下角 PNG / SVG
-- **加载态占位** — `<PageHeaderSkeleton />` 直接替换整个页头
-
-## When NOT to use
-
-- **页面内子区块标题** → 用 [`Title`](../typography/typography.meta.md) + 自定义容器,PageHeader 是页面级容器(`<header>` + flex 列布局),不适合内嵌
-
-- **Modal / Drawer 头部** → 这些组件自带 header 区域(`DialogHeader` / `SheetHeader`),不要再叠 PageHeader
-- **需要随滚动吸顶的特殊容器** → PageHeader 自身不内置 sticky,真有诉求外层包 `<div className="sticky top-0 z-10">`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `PageHeader` 主容器 props,其余子组件 props 见下方"子组件"小节与 Storybook autodocs。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `backgroundImage` | `string` | – | – | 右下角背景装饰图 URL — 通过 inline `style.backgroundImage` 注入(Tailwind 不支持 动态 URL)。固定 `bg-no-repeat bg-right-bottom`。 |
-<!-- auto:props:end -->
-
-### 子组件
-
-| 子组件                  | 关键 props                                                                                                            | 用途                                                            |
-| ----------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
-| `PageHeaderNav`         | —                                                                                                                     | 顶部导航行(面包屑 + 右侧链接,`flex justify-between`)            |
-| `PageHeaderContent`     | —                                                                                                                     | 主内容区(左 Heading/Description,右 Actions/Data,`flex-wrap`)    |
-| `PageHeaderHeading`     | `goBack?: boolean`、`onBack?: (e) => void`                                                                            | 标题行容器 — `goBack` 自动渲染 `ArrowLeft` 图标按钮             |
-| `PageHeaderDescription` | —                                                                                                                     | 描述文字 `<p>`(`text-sm text-muted-foreground`)                 |
-| `PageHeaderActions`     | —                                                                                                                     | 操作按钮区(`flex items-center gap-2`)                           |
-| `PageHeaderData`        | —                                                                                                                     | 数据概览容器(`flex items-end gap-6`)                            |
-| `PageHeaderDataItem`    | `label: ReactNode`(必填)、`color?: 'default' \| 'primary' \| 'success' \| 'warning' \| 'destructive'`(默认 `default`) | 单项数据(label + value,数字自动 `tabular-nums` 等宽)            |
-| `PageHeaderFooter`      | —                                                                                                                     | 底部详情区(`mt-4 border-t pt-4`),消费方用 `Descriptions` 等填充 |
-| `PageHeaderSkeleton`    | `showNav?: boolean`(默认 `true`)、`showDescription?: boolean`(默认 `true`)、`showFooter?: boolean`(默认 `false`)      | 骨架屏 — 与 `PageHeader` 整体替换关系,**不**嵌入 PageHeader 内  |
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add page-header` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `skeleton` | component | 骨架屏 — shadcn pulse 单元素 + antd Avatar/Image/Button/Input/Paragraph 子家族,自动 motion-reduce |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-### 硬约束
-
-- **Padding 由 PageContainer 层提供** — PageHeader 自身只含 `bg-background` 与 flex 列布局,**不带 padding**。实际使用必须放在 `UmPageContainer` / `OpPageContainer` 或消费方自建 wrapper 内,由外层加 `px-6 py-4`(或变体自己的尺寸)。stories 通过 decorator 包 `<div className="px-6 py-4">` 模拟容器内展示。
-- **不接受配置对象** — 不要给 PageHeader 加 `breadcrumbs={[...]}` / `actions={[...]}` / `tags={[...]}` 一类的配置,**所有内容必须用子组件 + 原子组件组合**(P3 一图流原则:看到 jsx 即看到 DOM)
-- **`PageHeaderSkeleton` 与 `PageHeader` 是替换关系** — 不要把 Skeleton 放进 `<PageHeader>...</PageHeader>` 里,加载态条件渲染整体替换
-- **`onBack` 是纯回调** — 不要在 PageHeader 内部 import `react-router` / `next/navigation`,路由由调用方在 `onBack` 里实现(P5 不绑框架)
-- **`backgroundImage` 必须是 URL 字符串** — 不要传 `import logo from './logo.png'` 后再传 `logo.src`(那是构建产物,直接传 import 默认导出即可),也不要传 base64 大图
-- **图标用 `<Icon>` 不要直接用 lucide** — 在 `PageHeaderHeading` 前置图标位、`PageHeaderActions` 内的图标按钮场景,套 [`<Icon>`](../icon/icon.meta.md) 走统一 size/color
-
-### 推荐范式
-
-- 极简:`<PageHeader><PageHeaderContent><PageHeaderHeading><Title level={2}>实例详情</Title></PageHeaderHeading></PageHeaderContent></PageHeader>`
-- 标准三段:Nav(面包屑) → Content(Heading + Description / Actions) → 可选 Footer(详情面板)
-- 数据概览:`<PageHeaderData>` 内放 3-5 个 `<PageHeaderDataItem label="CPU 使用率" color="warning">85%</PageHeaderDataItem>`,适合云资源 / 实例详情场景
-- 加载:外层 `{loading ? <PageHeaderSkeleton /> : <PageHeader>...</PageHeader>}`
-
-### 反例
-
-- ❌ `<PageHeader breadcrumb={[...]} actions={[...]} />` — 不要回到 antd 配置对象的写法,违反"复合组件范式"
-- ❌ `<PageHeader><PageHeaderSkeleton /></PageHeader>` — Skeleton 是整体替换,不嵌入
-- ❌ `onBack={() => router.back()}` 写在组件源码里 — 路由调用必须在使用方,组件只暴露回调
-- ❌ `style={{ backgroundImage: 'url(...)' }}` 直接覆盖 — 用 `backgroundImage` prop,内部已处理 `bg-no-repeat bg-right-bottom`
-- ❌ `<PageHeaderDataItem color="destructive">SUCCESS</PageHeaderDataItem>` — 颜色与文案语义打架,选合适的 color 档位
-
-## Examples
-
-```tsx
-import {
-  PageHeader,
-  PageHeaderActions,
-  PageHeaderContent,
-  PageHeaderData,
-  PageHeaderDataItem,
-  PageHeaderDescription,
-  PageHeaderFooter,
-  PageHeaderHeading,
-  PageHeaderNav,
-  PageHeaderSkeleton,
-} from '@/components/page-header';
-import { Button } from '@/components/button';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/breadcrumb';
-import { Tag } from '@/components/tag';
-import { Title } from '@/components/typography';
-import { Icon } from '@/components/icon';
-import { Cloud } from 'lucide-react';
-
-// 极简
-<PageHeader>
-  <PageHeaderContent>
-    <PageHeaderHeading>
-      <Title level={2}>实例详情</Title>
-    </PageHeaderHeading>
-  </PageHeaderContent>
-</PageHeader>
-
-// 标准:面包屑 + 标题 + 描述 + 标签 + 操作 + 返回
-<PageHeader>
-  <PageHeaderNav>
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem><BreadcrumbLink href="/">首页</BreadcrumbLink></BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem><BreadcrumbPage>实例详情</BreadcrumbPage></BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  </PageHeaderNav>
-  <PageHeaderContent>
-    <div>
-      <PageHeaderHeading goBack onBack={() => history.back()}>
-        <Icon variant="circle" color="primary" size="lg"><Cloud /></Icon>
-        <Title level={2}>i-bp1abc123</Title>
-        <Tag color="success">运行中</Tag>
-      </PageHeaderHeading>
-      <PageHeaderDescription>华东 1 (杭州) · ecs.g7.large · 2 vCPU 8 GiB</PageHeaderDescription>
-    </div>
-    <PageHeaderActions>
-      <Button variant="outline">重启</Button>
-      <Button variant="destructive">停止</Button>
-    </PageHeaderActions>
-  </PageHeaderContent>
-</PageHeader>
-
-// 含数据概览
-<PageHeader>
-  <PageHeaderContent>
-    <PageHeaderHeading><Title level={2}>资源概览</Title></PageHeaderHeading>
-    <PageHeaderData>
-      <PageHeaderDataItem label="CPU 使用率" color="warning">85%</PageHeaderDataItem>
-      <PageHeaderDataItem label="内存使用率" color="success">62%</PageHeaderDataItem>
-      <PageHeaderDataItem label="网络流量">1.2 GB/s</PageHeaderDataItem>
-    </PageHeaderData>
-  </PageHeaderContent>
-</PageHeader>
-
-// 加载态(整体替换)
-{loading ? (
-  <PageHeaderSkeleton />
-) : (
-  <PageHeader>...</PageHeader>
-)}
-
-// 背景装饰图
-<PageHeader backgroundImage="/illustrations/header-bg.png">
-  <PageHeaderContent>
-    <PageHeaderHeading><Title level={2}>欢迎回来</Title></PageHeaderHeading>
-  </PageHeaderContent>
-</PageHeader>
-```
-
-## 路线图
-
-| 阶段        | 能力                                                                              |
-| ----------- | --------------------------------------------------------------------------------- |
-| v0.1 (本期) | 10 个子组件 + `goBack` + `backgroundImage` + `PageHeaderSkeleton` + 6 档数据色    |
-| v0.2        | 与 `Tabs` 组件的官方集成范式(放在 `PageHeaderFooter` 内承接 ProPageHeader tab 槽) |
-| v0.3+       | 可选 sticky / 紧凑模式(如有强诉求再加,默认仍是无主题骨架)                         |
-
-> **API 在 v0.1 就稳定** — 后续不计划加配置对象 prop。
-
-## 关联
-
-- 范本组件:[Sidebar](../sidebar/sidebar.meta.md) — shadcn 复合组件范式参考(provider + 多子组件)
-- 关联组件:[Icon](../icon/icon.meta.md) — `variant="circle|square"` + `color` 是 PageHeaderHeading 前置图标的首选写法
-- 关联组件:[Skeleton](../skeleton/skeleton.meta.md) — `PageHeaderSkeleton` 内部组合 `Skeleton` + `SkeletonParagraph`
-- 关联 ADR:[ADR 0005](../../../../../docs/adr/0005-ui-no-variant.md) — ui 不感知 variant,品牌色由 design tokens 注入
-- 设计文档:[DEVELOPMENT.md](./DEVELOPMENT.md)

package/src/components/page-header/page-header.stories.tsx

@@ -1,428 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  ChevronDown,
-  Cloud,
-  FileText,
-  Info,
-  Plus,
-  Search,
-  Server,
-} from 'lucide-react';
-
-import { Button } from '@/components/button/button';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/breadcrumb/breadcrumb';
-import { Tag } from '@/components/tag/tag';
-import { Tooltip, TooltipProvider } from '@/components/tooltip/tooltip';
-import { Title } from '@/components/typography/typography';
-import { Icon } from '@/components/icon/icon';
-import {
-  PageHeader,
-  PageHeaderActions,
-  PageHeaderContent,
-  PageHeaderData,
-  PageHeaderDataItem,
-  PageHeaderDescription,
-  PageHeaderFooter,
-  PageHeaderHeading,
-  PageHeaderNav,
-  PageHeaderSkeleton,
-} from './page-header';
-
-const meta: Meta<typeof PageHeader> = {
-  title: '布局 · Layout/PageHeader',
-  component: PageHeader,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'PageHeader 页头容器 —— 承接 teamix-pro `ProPageHeader` 的视觉规范,转为 shadcn 复合组件范式(Nav / Heading / Description / Content / Actions / Data / DataItem / Footer / Skeleton 子组件)。**纯排版骨架,不接受配置对象** — 面包屑 / 标签 / 操作按钮 / 详情面板都由消费方用 `<Breadcrumb>` / `<Tag>` / `<Button>` / `<Descriptions>` 等原子组件自由组合;图标采用 `<Icon variant="circle|square" color="...">{children}</Icon>` 带背景容器范式。背景图通过 `backgroundImage` prop inline `style` 注入。`onBack` 纯回调,不绑定路由库。\n\n**Padding**:组件自身不含外边距 — 实际使用时由 PageContainer 层(如 `UmPageContainer` / `OpPageContainer`)提供 padding。下方 Story 通过 decorator 包 `<div className="px-6 py-4">` 模拟容器内的展示效果。',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="bg-background px-6 py-4">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof PageHeader>;
-
-// ─── 0. Default —— 全款对齐设计稿首屏形态 ──────────────────────────
-
-export const Default: Story = {
-  parameters: {
-    layout: 'fullscreen',
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '全款示例 — 对齐设计稿"基本用法"首屏形态，一般用于详情页/表单页：4 级面包屑 + 双帮助文档链接、返回 + 带背景色 Icon（`size=lg`） + 标题 + 上标 info tooltip + 三色语义 Tag、右侧 outline + primary 两个带前置图标的操作按钮、一行描述。调整文案 / 颜色只需改 children，骨架不动。',
-      },
-    },
-  },
-  render: () => (
-    <TooltipProvider delayDuration={200}>
-      <PageHeader>
-        <PageHeaderNav>
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#">首页</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#">二级标题</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#">三级标题</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>当前</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="flex items-center gap-4">
-            <a
-              href="#"
-              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
-            >
-              <Icon size="sm">
-                <FileText />
-              </Icon>
-              帮助文档1
-            </a>
-            <a
-              href="#"
-              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
-            >
-              <Icon size="sm">
-                <FileText />
-              </Icon>
-              帮助文档2
-            </a>
-          </div>
-        </PageHeaderNav>
-
-        <PageHeaderContent>
-          <PageHeaderHeading goBack onBack={() => alert('go back')}>
-            <Icon variant="square" color="primary" size="lg">
-              <Server />
-            </Icon>
-            <Title level={2}>页面标题</Title>
-            <Tooltip title="该页面用于管理资源实例，可查看、启停、远程连接。">
-              <button
-                type="button"
-                aria-label="查看说明"
-                className="-ml-1 inline-flex cursor-help items-start text-muted-foreground hover:text-foreground"
-              >
-                <Icon size="sm">
-                  <Info />
-                </Icon>
-              </button>
-            </Tooltip>
-            <Tag color="success">标签一</Tag>
-            <Tag color="primary">标签二</Tag>
-            <Tag color="destructive">标签三</Tag>
-          </PageHeaderHeading>
-
-          <PageHeaderActions>
-            <Button variant="outline">
-              <Plus />
-              操作按钮1
-            </Button>
-            <Button>
-              <Search />
-              操作按钮2
-            </Button>
-          </PageHeaderActions>
-        </PageHeaderContent>
-
-        <PageHeaderDescription>
-          页面描述页面描述页面描述页面描述页面描述页面描述页面描述
-        </PageHeaderDescription>
-      </PageHeader>
-    </TooltipProvider>
-  ),
-};
-
-// ─── 1. 极简用法 ──────────────────────────────────────────────────────────────
-
-export const Minimal: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <PageHeader>
-      <PageHeaderContent>
-        <PageHeaderHeading>
-          <Title level={2}>实例管理</Title>
-        </PageHeaderHeading>
-      </PageHeaderContent>
-    </PageHeader>
-  ),
-};
-
-// ─── 2. 标准用法 ──────────────────────────────────────────────────────────────
-
-export const Standard: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '面包屑 + 返回按钮 + 带背景图标 + 标题 + 多 Tag + 操作按钮区,对齐 teamix-pro ProPageHeader 主形态。',
-      },
-    },
-  },
-  render: () => (
-    <PageHeader>
-      <PageHeaderNav>
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="#">首页</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbLink href="#">资源管理</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>实例详情</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-        <a
-          className="text-xs text-muted-foreground hover:text-foreground"
-          href="#"
-        >
-          帮助文档
-        </a>
-      </PageHeaderNav>
-
-      <PageHeaderContent>
-        <PageHeaderHeading goBack onBack={() => alert('go back')}>
-          <Icon variant="square" color="primary" size="md">
-            <Server />
-          </Icon>
-          <Title level={2}>i-2ze3m5j8w</Title>
-          <Tag color="success">运行中</Tag>
-          <Tag>华东 1</Tag>
-        </PageHeaderHeading>
-
-        <PageHeaderActions>
-          <Button variant="outline">停止</Button>
-          <Button>远程连接</Button>
-        </PageHeaderActions>
-      </PageHeaderContent>
-
-      <PageHeaderDescription>
-        ECS 实例规格 ecs.g7.large · 2 vCPU 8 GiB · 创建于 2026-03-15
-      </PageHeaderDescription>
-    </PageHeader>
-  ),
-};
-
-// ─── 3. 数据概览 ──────────────────────────────────────────────────────────────
-
-export const WithData: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '左侧标题 + 描述,右侧数据概览(`<PageHeaderData>` + `<PageHeaderDataItem>`)。数据值通过 `color` prop 上语义色(对齐 ADR 0021),数字默认 `tabular-nums` 等宽对齐。',
-      },
-    },
-  },
-  render: () => (
-    <PageHeader>
-      <PageHeaderContent>
-        <div className="flex flex-col gap-1">
-          <PageHeaderHeading>
-            <Title level={2}>集群总览</Title>
-          </PageHeaderHeading>
-          <PageHeaderDescription>
-            杭州地域集群资源使用情况
-          </PageHeaderDescription>
-        </div>
-
-        <PageHeaderData>
-          <PageHeaderDataItem label="总实例">456</PageHeaderDataItem>
-          <PageHeaderDataItem label="运行中" color="success">
-            324
-          </PageHeaderDataItem>
-          <PageHeaderDataItem label="已停止" color="destructive">
-            14
-          </PageHeaderDataItem>
-          <PageHeaderDataItem label="待启动" color="warning">
-            8
-          </PageHeaderDataItem>
-          <PageHeaderDataItem label="未分配">110</PageHeaderDataItem>
-        </PageHeaderData>
-      </PageHeaderContent>
-    </PageHeader>
-  ),
-};
-
-// ─── 4. 详情面板(Footer)──────────────────────────────────────────────────────
-
-export const WithFooter: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '`<PageHeaderFooter>` 内可放任意自定义详情(此处用 grid + label/value 演示)。配合 `<Descriptions>` 原子组件可实现 ProInfo 式详情面板。',
-      },
-    },
-  },
-  render: () => (
-    <PageHeader>
-      <PageHeaderNav>
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="#">首页</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>实例详情</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </PageHeaderNav>
-
-      <PageHeaderContent>
-        <PageHeaderHeading goBack onBack={() => alert('go back')}>
-          <Icon variant="circle" color="primary" size="md">
-            <Server />
-          </Icon>
-          <Title level={2}>i-2ze3m5j8w</Title>
-          <Tag color="success">运行中</Tag>
-        </PageHeaderHeading>
-
-        <PageHeaderActions>
-          <Button>启动</Button>
-          <Button variant="outline">停止</Button>
-        </PageHeaderActions>
-      </PageHeaderContent>
-
-      <PageHeaderFooter>
-        <dl className="grid grid-cols-3 gap-x-8 gap-y-3 text-sm">
-          {[
-            ['实例 ID', 'i-2ze3m5j8w'],
-            ['状态', '运行中'],
-            ['地域', '华东 1(杭州)'],
-            ['规格', 'ecs.g7.large'],
-            ['网络', 'VPC vpc-xxxx'],
-            ['创建时间', '2026-03-15 10:30:00'],
-          ].map(([k, v]) => (
-            <div key={k} className="flex flex-col gap-1">
-              <dt className="text-xs text-muted-foreground">{k}</dt>
-              <dd className="text-sm">{v}</dd>
-            </div>
-          ))}
-        </dl>
-      </PageHeaderFooter>
-    </PageHeader>
-  ),
-};
-
-// ─── 5. 背景装饰图 ────────────────────────────────────────────────────────────
-
-export const WithBackgroundImage: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '`backgroundImage` prop 通过 inline style 注入背景图,固定 `bg-no-repeat bg-right-bottom`(Tailwind 不支持动态 URL)。',
-      },
-    },
-  },
-  render: () => (
-    <PageHeader backgroundImage="https://img.alicdn.com/imgextra/i4/O1CN01JPHwMl1xfXtMu5jth_!!6000000006470-2-tps-160-160.png">
-      <PageHeaderContent>
-        <PageHeaderHeading>
-          <Icon variant="square" color="primary" size="md">
-            <Cloud />
-          </Icon>
-          <Title level={2}>云服务器 ECS</Title>
-        </PageHeaderHeading>
-        <PageHeaderActions>
-          <Button>创建实例</Button>
-        </PageHeaderActions>
-      </PageHeaderContent>
-      <PageHeaderDescription>
-        弹性、安全、稳定、易用的计算服务
-      </PageHeaderDescription>
-    </PageHeader>
-  ),
-};
-
-// ─── 6. Loading 骨架屏 ───────────────────────────────────────────────────────
-
-export const SkeletonLoading: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '`<PageHeaderSkeleton>` 整体替换为骨架屏(loading 态一键切换),含 `showNav / showDescription / showFooter` 三档可选行。',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex flex-col gap-6">
-      <PageHeaderSkeleton />
-      <PageHeaderSkeleton showFooter />
-    </div>
-  ),
-};
-
-// ─── 7. 选项卡切换头(用户自由组装)────────────────────────────────────────
-
-export const WithTabs: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          'PageHeader 不内置 Tabs 逻辑 — 用户在 `<PageHeaderHeading>` children 中放置任意切换组件即可。',
-      },
-    },
-  },
-  render: () => (
-    <PageHeader>
-      <PageHeaderContent>
-        <PageHeaderHeading goBack onBack={() => alert('back')}>
-          <Title level={2}>资源详情</Title>
-          <div className="ml-auto inline-flex items-center gap-1 rounded-md border border-border p-1">
-            <Button variant="ghost" size="sm">
-              基础信息
-            </Button>
-            <Button variant="ghost" size="sm">
-              监控
-            </Button>
-            <Button variant="ghost" size="sm">
-              日志
-            </Button>
-          </div>
-        </PageHeaderHeading>
-      </PageHeaderContent>
-    </PageHeader>
-  ),
-};