@teamix-evo/ui 0.1.1 → 0.3.0

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

@@ -0,0 +1,208 @@
+---
+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>` + 边框 + 内边距,不适合内嵌
+- **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 生成纪律
+
+### 硬约束
+
+- **不接受配置对象** — 不要给 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

@@ -0,0 +1,421 @@
+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` 纯回调,不绑定路由库。',
+      },
+    },
+  },
+};
+
+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>
+  ),
+};