feat(page): add composable page primitives

2026-09-28 23:13:49 +08:00
parent 0ec968c344
commit d23deca0e7
18 changed files with 1979 additions and 0 deletions
@@ -0,0 +1,71 @@
+---
+title: 商品页面示例
+description: 使用路由链接组合响应式商品管理页面。
+order: 30
+toc:
+  - id: page-tabs
+    title: 页面 Tabs
+  - id: complete-example
+    title: 完整示例
+---
+
+## 页面 Tabs {#page-tabs}
+
+`PageTabs` 采用标准的 Root、List、Trigger、Indicator 和 Content 组合：
+
+```tsx
+<PageTabs defaultValue="overview" placement="top-start" variant="default">
+  <PageTabsList aria-label="商品页面">
+    <PageTabsExtra>
+      <Button variant="ghost">返回</Button>
+    </PageTabsExtra>
+    <PageTabsTrigger value="overview">概览</PageTabsTrigger>
+    <PageTabsTrigger value="inventory">库存</PageTabsTrigger>
+    <PageTabsTrigger value="settings">设置</PageTabsTrigger>
+    <PageTabsIndicator />
+    <PageTabsExtra align="end">
+      <Button variant="ghost">帮助</Button>
+    </PageTabsExtra>
+  </PageTabsList>
+  <PageTabsContent value="overview">商品概览</PageTabsContent>
+  <PageTabsContent value="inventory">库存管理</PageTabsContent>
+  <PageTabsContent value="settings">商品设置</PageTabsContent>
+</PageTabs>
+```
+
+`placement` 由 `top | right | bottom | left` 和 `start | center | end` 组合，例如 `top-start`、`top-center`、`left-end`。顶部和底部横向排列，左侧和右侧纵向排列；后缀控制 Tabs 组在主轴上的对齐。
+
+`variant` 接受 `line`、`card` 或 `default`。`line` 在当前 Trigger 的内容侧绘制前景色线条，`card` 将带边框的标签与内容边界衔接，`default` 则渲染带凸起选中面的圆角浅色轨道。`PageTabsIndicator` 会自动跟随当前 Trigger。
+
+`PageTabsExtra` 通过 `align="start | end"` 放到 List 两端，默认是 `start`。同一端可以声明多个 Extra，它们会保持原始顺序。
+
+## 完整示例 {#complete-example}
+
+```tsx
+<PageContainer
+  info={{
+    breadcrumb: [{ label: "商品", href: "/products" }, { label: "蓝牙耳机" }],
+    description: "更新详情、库存和销售渠道。",
+    title: "蓝牙耳机",
+  }}
+>
+  <PageHeader>
+    <PageBreadcrumb aria-label="当前位置" />
+    <PageHeading>
+      <PageTitle />
+      <PageDescription />
+      <PageHeadingExtra align="end">
+        <Button variant="outline">预览</Button>
+        <Button>保存</Button>
+      </PageHeadingExtra>
+    </PageHeading>
+    <PageHeaderExtra>
+      <ProductMetadata />
+    </PageHeaderExtra>
+  </PageHeader>
+  <ProductRouteTabs />
+  <PageSection aria-label="商品详情">
+    <ProductForm />
+  </PageSection>
+</PageContainer>
+```