weifuwu 0.86.0 → 0.87.0

package/examples/patterns/AppShell.tsx

@@ -0,0 +1,224 @@
+import type { Component } from 'weifuwu/vdom'
+import { Button, PageHeader, Table, Badge, Icon, Divider, Pagination, StatCard, Space, Card, Text } from 'weifuwu/components'
+
+// ─────────────────────────────────────────────────────────────
+// 模式 1：后台应用壳（App Shell）
+//
+// 最经典的后台布局：左侧可折叠导航 + 右侧内容区。
+// 100% 使用 weifuwu/layout 原语 + weifuwu/components 组件：
+//   - wf-app-shell / wf-sidebar / wf-nav / wf-nav--collapsed / wf-main
+//   - 折叠 = --wf-sidebar-width 收窄 + wf-nav--collapsed（原语组合）
+// 复制此文件即可得到一个标准后台。
+// ─────────────────────────────────────────────────────────────
+
+const NAV = [
+  { key: 'dashboard', icon: 'dashboard', label: '仪表盘' },
+  { key: 'orders', icon: 'box', label: '订单管理' },
+  { key: 'users', icon: 'users', label: '用户管理' },
+  { key: 'goods', icon: 'tag', label: '商品管理' },
+  { key: 'settings', icon: 'settings', label: '系统设置' },
+]
+
+// 5 个视图内容（导航联动——每视图独立 PageHeader + 内容）
+const USERS = [
+  { id: 'U-001', name: '张伟', role: '管理员', email: 'zhang@acme.cn', v: 'primary' },
+  { id: 'U-002', name: '李娜', role: '运营', email: 'li@acme.cn', v: 'default' },
+  { id: 'U-003', name: '王强', role: '开发', email: 'wang@acme.cn', v: 'default' },
+  { id: 'U-004', name: '赵敏', role: '客服', email: 'zhao@acme.cn', v: 'warning' },
+]
+
+const GOODS = [
+  { id: 'G-101', name: '无线键盘', stock: 320, price: '¥199', status: '在售', v: 'success' },
+  { id: 'G-102', name: '机械鼠标', stock: 58, price: '¥89', status: '补货中', v: 'warning' },
+  { id: 'G-103', name: '显示器', stock: 12, price: '¥1299', status: '售罄', v: 'danger' },
+  { id: 'G-104', name: '扩展坞', stock: 200, price: '¥159', status: '在售', v: 'success' },
+]
+
+export const AppShell: Component = async (_init, ctx) => {
+  // render-only：内部状态 let + 显式 render（design 归档）
+  let collapsed = false
+  let nav = 'dashboard'
+  let page = 1
+  const rerender = () => ctx.render()
+
+  // 订单数据（分页演示——12 条 → 每页 5 条）
+  const ORDERS_ALL = Array.from({ length: 12 }, (_, i) => ({
+    id: `A-${2000 + i}`,
+    customer: ['张伟', '李娜', '王强', '赵敏', '陈晨', '刘洋', '孙丽', '周杰', '吴磊', '郑爽', '钱进', '冯刚'][i],
+    amount: `¥${(Math.round(Math.random() * 300) + 100) * 10}`,
+    status: ['已支付', '待发货', '已完成', '已取消'][i % 4],
+    v: (['success', 'warning', 'default', 'danger'] as const)[i % 4],
+  }))
+  return async () => (
+    <div
+      class="wf-app-shell wf-rounded-lg"
+      style={{ height: 'calc(100vh - 48px)', overflow: 'hidden', '--wf-sidebar-width': collapsed ? '64px' : '240px' }}
+    >
+      {/* ── 左侧导航栏 ── */}
+      <aside class="wf-sidebar">
+        <div class="wf-sidebar-header wf-between">
+          {collapsed ? (
+            <Icon name="zap" size={18} className="wf-text-primary" />
+          ) : (
+            <Space>
+              <Icon name="zap" size={18} className="wf-text-primary" />
+              <b class="wf-text-bold">Acme 管理台</b>
+            </Space>
+          )}
+          <Button
+            size="sm"
+            variant="ghost"
+            title={collapsed ? '展开侧栏' : '折叠侧栏'}
+            onClick={() => { collapsed = !collapsed; rerender() }}
+          >
+            <Icon name={collapsed ? 'chevron-right' : 'chevron-left'} size={14} />
+          </Button>
+        </div>
+        <div class="wf-sidebar-body">
+          <nav class={`wf-nav${collapsed ? ' wf-nav--collapsed' : ''}`}>
+            {NAV.map((n) => (
+              <a
+                key={n.key}
+                href="#/app-shell"
+                class={`wf-nav-item wf-pointer${nav === n.key ? ' wf-nav-item--active' : ''}`}
+                title={collapsed ? n.label : undefined}
+                onClick={() => { nav = n.key; rerender() }}
+              >
+                <span class="wf-nav-icon"><Icon name={n.icon as any} size={16} /></span>
+                <span class="wf-nav-label">{n.label}</span>
+              </a>
+            ))}
+          </nav>
+        </div>
+        <div class="wf-sidebar-footer">
+          {collapsed
+            ? <Icon name="shield" size={14} className="wf-text-tertiary" />
+            : <span class="wf-text-tertiary wf-text-xs">v2.4.0 · 内部系统</span>}
+        </div>
+      </aside>
+
+      {/* ── 右侧主区 ── */}
+      <main class="wf-main">
+        {/* 顶栏 */}
+        <div class="wf-between wf-p-md wf-border-b">
+          <Space>
+            <Button size="sm" variant="ghost"><Icon name="star" size={14} /> 收藏</Button>
+            <Button size="sm" variant="ghost"><Icon name="bell" size={14} /> 通知</Button>
+          </Space>
+          <Space>
+            <span class="wf-text-secondary wf-text-sm">管理员</span>
+            <Badge variant="primary">角色</Badge>
+          </Space>
+        </div>
+
+        {/* 内容区（按导航切换） */}
+        <div class="wf-main wf-p-lg wf-scroll">
+          {nav === 'dashboard' && (
+            <>
+              <PageHeader title="仪表盘" sub="经营概览" display>
+                <Button variant="primary" onClick={() => { nav = 'orders'; rerender() }}><Icon name="plus" size={14} /> 去下单</Button>
+              </PageHeader>
+              <div class="wf-grid" style={{ '--wf-cols': 'repeat(auto-fill, minmax(220px, 1fr))' }}>
+                <StatCard label="今日订单" value="128" trend="up" trendLabel="+12% 昨日" icon={<Icon name="box" size={24} className="wf-text-primary" />} />
+                <StatCard label="待发货" value="23" trend="down" trendLabel="-5% 昨日" icon={<Icon name="inbox" size={24} className="wf-text-primary" />} />
+                <StatCard label="销售额" value="¥42,860" trend="up" trendLabel="+8.6% 昨日" icon={<Icon name="bar-chart" size={24} className="wf-text-primary" />} />
+                <StatCard label="客户数" value="1,024" trend="up" trendLabel="+3.2% 昨日" icon={<Icon name="users" size={24} className="wf-text-primary" />} />
+              </div>
+            </>
+          )}
+          {nav === 'orders' && (
+            <>
+              <PageHeader title="订单管理" sub="查看和处理所有订单" display>
+                <Button variant="primary"><Icon name="plus" size={14} /> 新建订单</Button>
+              </PageHeader>
+
+          <div class="wf-grid wf-mt-md" style={{ '--wf-cols': 'repeat(auto-fill, minmax(220px, 1fr))' }}>
+            <StatCard label="今日订单" value="128" trend="up" trendLabel="+12% 昨日" icon={<Icon name="box" size={24} className="wf-text-primary" />} />
+            <StatCard label="待发货" value="23" trend="down" trendLabel="-5% 昨日" icon={<Icon name="inbox" size={24} className="wf-text-primary" />} />
+            <StatCard label="销售额" value="¥42,860" trend="up" trendLabel="+8.6% 昨日" icon={<Icon name="bar-chart" size={24} className="wf-text-primary" />} />
+          </div>
+
+          <Divider />
+
+              <Card outlined>
+                <Table
+                  data={ORDERS_ALL.slice((page - 1) * 5, page * 5)}
+                  columns={[
+                    { key: 'id', label: '订单号' },
+                    { key: 'customer', label: '客户' },
+                    { key: 'amount', label: '金额' },
+                    { key: 'status', label: '状态', render: (v, row) => <Badge variant={row.v}>{v}</Badge> },
+                  ]}
+                />
+                <div class="wf-p-md wf-between">
+                  <Text className="wf-text-sm">共 {ORDERS_ALL.length} 条</Text>
+                  <Pagination total={ORDERS_ALL.length} page={page} pageSize={5} onChange={(p) => { page = p; rerender() }} />
+                </div>
+              </Card>
+            </>
+          )}
+          {nav === 'users' && (
+            <>
+              <PageHeader title="用户管理" sub="平台用户与角色" display>
+                <Button variant="primary"><Icon name="plus" size={14} /> 邀请用户</Button>
+              </PageHeader>
+              <Card outlined>
+                <Table
+                  data={USERS}
+                  columns={[
+                    { key: 'id', label: '用户 ID' },
+                    { key: 'name', label: '姓名' },
+                    { key: 'role', label: '角色', render: (v, row) => <Badge variant={row.v}>{v}</Badge> },
+                    { key: 'email', label: '邮箱' },
+                  ]}
+                />
+              </Card>
+            </>
+          )}
+          {nav === 'goods' && (
+            <>
+              <PageHeader title="商品管理" sub="库存与销售状态" display>
+                <Button variant="primary"><Icon name="plus" size={14} /> 上架商品</Button>
+              </PageHeader>
+              <Card outlined>
+                <Table
+                  data={GOODS}
+                  columns={[
+                    { key: 'id', label: '商品 ID' },
+                    { key: 'name', label: '名称' },
+                    { key: 'stock', label: '库存' },
+                    { key: 'price', label: '价格' },
+                    { key: 'status', label: '状态', render: (v, row) => <Badge variant={row.v}>{v}</Badge> },
+                  ]}
+                />
+              </Card>
+            </>
+          )}
+          {nav === 'settings' && (
+            <>
+              <PageHeader title="系统设置" sub="基础配置" display>
+                <Button variant="primary"><Icon name="check" size={14} /> 保存</Button>
+              </PageHeader>
+              <Card outlined>
+                <div class="wf-stack wf-gap-md">
+                  {[
+                    ['站点名称', 'Acme 管理台'],
+                    ['默认语言', '中文（简体）'],
+                    ['数据保留', '90 天'],
+                    ['时区', 'Asia/Shanghai'],
+                  ].map(([k, v]) => (
+                    <div key={k} class="wf-between wf-p-md wf-border-b">
+                      <span class="wf-text-secondary">{k}</span>
+                      <b>{v}</b>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}
+

package/examples/patterns/Dashboard.tsx

@@ -0,0 +1,153 @@
+import type { Component } from 'weifuwu/vdom'
+import { Title, Text, StatCard, PageHeader, ProgressBar, SegmentedControl, Switch, Table, Badge, Card, Divider, Icon, Space } from 'weifuwu/components'
+
+// ─────────────────────────────────────────────────────────────
+// 模式 3：仪表盘（Dashboard）
+//
+// 响应式卡片网格：KPI 行（StatCard）+ 数据表 + 侧栏概览。
+// SegmentedControl 切换时间范围 → KPI/表格数据联动（let + render()）。
+// 100% 原语 + 组件：wf-grid（--wf-cols 控制列数）窄屏自动单列。
+// ─────────────────────────────────────────────────────────────
+
+interface PeriodData {
+  kpis: { label: string; value: string; trend: 'up' | 'down'; trendLabel: string; icon: string }[]
+  rows: { name: string; sales: string; growth: string; status: string; v: 'success' | 'default' | 'warning' | 'danger' }[]
+  total: string
+}
+
+const DATA: Record<string, PeriodData> = {
+  '7d': {
+    kpis: [
+      { label: '总营收', value: '¥32.4万', trend: 'up' as const, trendLabel: '8.2% 环比', icon: 'bar-chart' },
+      { label: '活跃用户', value: '2,156', trend: 'up' as const, trendLabel: '5.1% 环比', icon: 'users' },
+      { label: '转化率', value: '7.4%', trend: 'up' as const, trendLabel: '1.2% 环比', icon: 'trending-up' },
+      { label: '客单价', value: '¥312', trend: 'up' as const, trendLabel: '3.8% 环比', icon: 'tag' },
+    ],
+    rows: [
+      { name: '新品 B', sales: '¥12.8万', growth: '22.6%', status: '热销', v: 'success' },
+      { name: '商品 A', sales: '¥10.5万', growth: '15.2%', status: '热销', v: 'success' },
+      { name: '商品 C', sales: '¥6.3万', growth: '2.4%', status: '稳定', v: 'default' },
+    ],
+    total: '¥32,480',
+  },
+  '30d': {
+    kpis: [
+      { label: '总营收', value: '¥128.6万', trend: 'up' as const, trendLabel: '12.4% 环比', icon: 'bar-chart' },
+      { label: '活跃用户', value: '8,432', trend: 'up' as const, trendLabel: '3.2% 环比', icon: 'users' },
+      { label: '转化率', value: '6.8%', trend: 'up' as const, trendLabel: '0.5% 环比', icon: 'trending-up' },
+      { label: '客单价', value: '¥286', trend: 'down' as const, trendLabel: '2.1% 环比', icon: 'tag' },
+    ],
+    rows: [
+      { name: '商品 A', sales: '¥42.8万', growth: '18.2%', status: '热销', v: 'success' },
+      { name: '商品 B', sales: '¥36.5万', growth: '9.7%', status: '稳定', v: 'default' },
+      { name: '商品 C', sales: '¥21.3万', growth: '-4.1%', status: '下滑', v: 'warning' },
+      { name: '商品 D', sales: '¥15.9万', growth: '22.6%', status: '热销', v: 'success' },
+    ],
+    total: '¥1,286,400',
+  },
+  '90d': {
+    kpis: [
+      { label: '总营收', value: '¥356.2万', trend: 'up' as const, trendLabel: '18.6% 环比', icon: 'bar-chart' },
+      { label: '活跃用户', value: '24,680', trend: 'up' as const, trendLabel: '9.8% 环比', icon: 'users' },
+      { label: '转化率', value: '6.1%', trend: 'down' as const, trendLabel: '0.3% 环比', icon: 'trending-up' },
+      { label: '客单价', value: '¥268', trend: 'down' as const, trendLabel: '4.2% 环比', icon: 'tag' },
+    ],
+    rows: [
+      { name: '商品 B', sales: '¥98.5万', growth: '31.4%', status: '热销', v: 'success' },
+      { name: '商品 A', sales: '¥86.2万', growth: '12.8%', status: '稳定', v: 'default' },
+      { name: '新品 D', sales: '¥52.1万', growth: '45.2%', status: '热销', v: 'success' },
+      { name: '商品 C', sales: '¥38.9万', growth: '-6.3%', status: '下滑', v: 'warning' },
+    ],
+    total: '¥3,562,000',
+  },
+}
+
+export const Dashboard: Component = async (_init, ctx) => {
+  let period = '30d'
+  let showGoal = true
+  const rerender = () => ctx.render()
+
+  return async () => {
+    const data = DATA[period] ?? DATA['30d']
+    return (
+      <div class="wf-stack wf-gap-lg wf-p-lg wf-scroll" style={{ minHeight: 'calc(100vh - 48px)' }}>
+        {/* 页头 + 时间范围切换（wf-row 提供 wrap——窄屏切换器折行，不挤压标题） */}
+        <div class="wf-row wf-between">
+          <PageHeader title="经营仪表盘" sub="实时经营数据 · 自动刷新" />
+          <SegmentedControl
+            value={period}
+            onChange={(v) => { period = v; rerender() }}
+            options={[
+              { value: '7d', label: '近 7 天' },
+              { value: '30d', label: '近 30 天' },
+              { value: '90d', label: '近 90 天' },
+            ]}
+          />
+        </div>
+
+        {/* KPI 行：wf-grid 自适应（窄屏自动单列） */}
+        <div class="wf-grid" style={{ '--wf-cols': 'repeat(auto-fill, minmax(240px, 1fr))' }}>
+          {data.kpis.map((k) => (
+            <StatCard key={k.label} label={k.label} value={k.value} trend={k.trend} trendLabel={k.trendLabel} icon={<Icon name={k.icon as any} size={24} className="wf-text-primary" />} />
+          ))}
+        </div>
+
+        {/* 内容区：销售排行 + 侧栏 */}
+        <div class="wf-grid" style={{ '--wf-cols': '2fr 1fr', alignItems: 'start' }}>
+          <Card outlined>
+            <Space direction="vertical">
+              <Title level={4}>商品销售排行 · {period}</Title>
+              <Table
+                data={data.rows}
+                columns={[
+                  { key: 'name', label: '商品' },
+                  { key: 'sales', label: '销售额' },
+                  { key: 'growth', label: '增长率' },
+                  { key: 'status', label: '状态', render: (v, row) => <Badge variant={row.v}>{v}</Badge> },
+                ]}
+              />
+            </Space>
+          </Card>
+
+          {/* 侧栏概览 */}
+          <div class="wf-stack wf-gap-md">
+            <Card outlined>
+              <Space direction="vertical" size="sm">
+                <Text type="secondary" className="wf-text-sm">本期总额</Text>
+                <Text strong className="wf-text-lg">{data.total}</Text>
+                <Text type="success" className="wf-text-sm">↑ 18.6% vs 上一期</Text>
+              </Space>
+            </Card>
+            <Card outlined>
+              <Space direction="vertical" size="sm">
+                <div class="wf-between">
+                  <Text type="secondary" className="wf-text-sm">季度目标</Text>
+                  <Switch
+                    label="展示"
+                    checked={showGoal}
+                    onChange={(v) => { showGoal = v; rerender() }}
+                  />
+                </div>
+                {showGoal && (
+                  <Space direction="vertical" size="sm">
+                    <ProgressBar value={78} max={100} label="达成率" showValue />
+                    <Text type="secondary" className="wf-text-xs">距离 ¥150 万目标还差 ¥21.4 万</Text>
+                  </Space>
+                )}
+              </Space>
+            </Card>
+            <Card outlined>
+              <Space direction="vertical" size="sm">
+                <Text type="secondary" className="wf-text-sm">数据刷新</Text>
+                <Text className="wf-text-sm">切换时间范围观察数据联动（let + render() 状态）</Text>
+              </Space>
+            </Card>
+            <Divider />
+            <Text type="secondary" className="wf-text-sm">本页展示了 wf-grid + StatCard + $ 状态组合——无需任何媒体查询即可响应式。</Text>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+

package/examples/patterns/DataScreen.tsx

@@ -0,0 +1,104 @@
+import type { Component } from 'weifuwu/vdom'
+import {Text, Badge, Card, Icon, Sparkline, StatCard, Space } from 'weifuwu/components'
+
+
+// ─────────────────────────────────────────────────────────────
+// 模式 7：数据大屏（Data Screen）
+//
+// 全屏网格 + 固定角标（标题/时间/状态灯）。
+// 100% 原语 + 组件：wf-fill（撑满）、wf-layer + wf-pop（容器内角标——
+// 嵌进任意父容器不错位；全屏使用等价 wf-pin）、wf-grid（大屏格）
+//   Sparkline（曲线）、StatCard、Badge dot（状态灯）
+// ─────────────────────────────────────────────────────────────
+
+const SERIES = {
+  cpu: [42, 45, 38, 52, 48, 61, 55, 72, 68, 75, 70, 66, 78, 82],
+  mem: [30, 32, 35, 33, 38, 42, 40, 45, 43, 48, 52, 50, 55, 58],
+  net: [20, 28, 25, 40, 35, 52, 48, 44, 60, 55, 68, 62, 74, 80],
+  qps: [120, 145, 138, 162, 158, 190, 175, 210, 198, 235, 220, 245, 260, 280],
+  latency: [38, 42, 35, 48, 52, 45, 58, 62, 55, 68, 72, 65, 74, 70],
+  disk: [45, 46, 48, 47, 50, 52, 51, 55, 58, 57, 62, 64, 66, 68],
+}
+
+const CARDS = [
+  { title: 'CPU 使用率', key: 'cpu', unit: '%' },
+  { title: '内存占用', key: 'mem', unit: '%' },
+  { title: '网络吞吐', key: 'net', unit: 'MB/s' },
+  { title: '请求 QPS', key: 'qps', unit: '/s' },
+  { title: '接口延迟', key: 'latency', unit: 'ms' },
+  { title: '磁盘使用', key: 'disk', unit: '%' },
+]
+
+const tick = (series: number[]) => {
+  const base = series[series.length - 1]
+  const next = Math.max(5, Math.min(95, base + (Math.random() * 8 - 4)))
+  return [...series.slice(1), Math.round(next)]
+}
+
+export const DataScreen: Component = async (_init, ctx) => {
+  // render-only：内部状态 let + 显式 render（实时曲线数据 + 时间）
+  const series: Record<string, number[]> = {}
+  for (const c of CARDS) series[c.key] = [...SERIES[c.key as keyof typeof SERIES]]
+  let time = new Date().toTimeString().slice(0, 8)
+  const today = new Date().toISOString().slice(0, 10)
+  // 实时刷新：2 秒滚动更新全部曲线 + 时间（布局蓝本演示实时监控）
+  const timer = setInterval(() => {
+    for (const c of CARDS) series[c.key] = tick(series[c.key])
+    time = new Date().toTimeString().slice(0, 8)
+    ctx.render()
+  }, 2000)
+
+  // ref 纪律：稳定引用定义在 mount 作用域——ref(null) 只在真正卸载时调用
+  // （内联 ref 每次渲染新引用 → 反复 clearInterval → 数据永不更新）
+  const rootRef = (el: any) => { if (!el) clearInterval(timer) }
+
+  return async () => (
+    <div ref={rootRef} class="wf-fill wf-layer wf-stack wf-gap-md wf-p-md wf-bg-tertiary" style={{ height: 'calc(100vh - 48px)' }}>
+      {/* 顶部标题（容器内角标——wf-layer + wf-pop） */}
+      <div class="wf-pop wf-center" style={{ top: 16, left: 0, right: 0 }}>
+        <Space size="sm" align="center">
+          <Icon name="zap" size={18} className="wf-text-primary" />
+          <b class="wf-text-lg wf-text-bold wf-tracking-wider">实时运维监控中心</b>
+        </Space>
+      </div>
+      {/* 右上时间（实时） */}
+      <div class="wf-pop" style={{ top: 16, right: 24 }}>
+        <Text type="secondary" className="wf-text-sm wf-nums">{today} {time}</Text>
+      </div>
+      {/* 左上状态灯 */}
+      <div class="wf-pop wf-row wf-gap-sm" style={{ top: 16, left: 24, alignItems: 'center' }}>
+        <Badge variant="success" dot />
+        <Text type="secondary" className="wf-text-sm">运行正常</Text>
+      </div>
+
+      {/* 主体：指标网格 */}
+      <div class="wf-grid wf-fill wf-p-lg" style={{ '--wf-cols': 'repeat(auto-fill, minmax(280px, 1fr))', alignContent: 'center', paddingTop: 60 }}>
+        {CARDS.map((m) => (
+          <Card outlined key={m.title} padding="lg">
+            <Space direction="vertical" size="md">
+              <div class="wf-row wf-between">
+                <Text strong>{m.title}</Text>
+                <Space size="sm" align="center">
+                  <Badge variant="success" dot />
+                  <Text type="success" className="wf-text-sm">实时</Text>
+                </Space>
+              </div>
+              <Sparkline data={series[m.key]} width={280} height={64} />
+              <StatCard label="当前值" value={`${series[m.key][series[m.key].length - 1]}${m.unit}`} trend="up" trendLabel="最近采样" />
+            </Space>
+          </Card>
+        ))}
+      </div>
+
+      {/* 底部滚动信息 */}
+      <div class="wf-pop wf-p-sm wf-border-t" style={{ bottom: 12, left: 24, right: 24 }}>
+        <Space size="lg">
+          <Text type="secondary" className="wf-text-xs">[INFO] 集群 12 节点健康 · 2s 实时刷新</Text>
+          <Text type="secondary" className="wf-text-xs">[INFO] 自动扩容已触发（us-east-1）</Text>
+          <Text type="warning" className="wf-text-xs">[WARN] 磁盘余量 18%</Text>
+        </Space>
+      </div>
+    </div>
+  )
+}
+

package/examples/patterns/DetailPage.tsx

@@ -0,0 +1,79 @@
+import type { Component } from 'weifuwu/vdom'
+import { PageHeader, Descriptions, Timeline, Tag, Button, Space, Card, Divider } from 'weifuwu/components'
+
+// ─────────────────────────────────────────────────────────────
+// 模式 10：详情页（Detail Page）
+//
+// 业务对象详情：标题栏 + 描述列表 + 状态时间线 + 操作区。
+// 复制此文件即可得到一个标准的"详情页"：
+//   - PageHeader（对象名 + 状态 Tag + 操作按钮）
+//   - Descriptions（label/value 栅格——详情字段）
+//   - Timeline（执行历史/审批流）
+//   - Card 分区（补充信息块）
+// 改造：换 data 字段 → 自己的业务对象。
+// ─────────────────────────────────────────────────────────────
+
+const ORDER = {
+  id: 'SO-1003',
+  customer: '王强',
+  amount: 3200,
+  status: '已发货',
+  date: '2026-08-12',
+  address: '杭州市西湖区文三路 138 号',
+  note: '加急——客户要求周五前送达',
+}
+
+const HISTORY = [
+  { title: '订单创建', time: '2026-08-12 09:12', tone: 'success' as const },
+  { title: '已支付', time: '2026-08-12 09:15' },
+  { title: '仓库发货', time: '2026-08-12 16:40' },
+  { title: '运输中', time: '2026-08-13 08:05' },
+]
+
+export const DetailPage: Component = async (_init: any, ctx: any) => {
+  let cancelled = false
+  return async (_p: any) => (
+    <div class="wf-container wf-stack" style="--wf-max:960px;--wf-gap:16px;padding:24px 16px">
+      <PageHeader title={`订单 ${ORDER.id}`} sub={`客户：${ORDER.customer} · 下单时间：${ORDER.date}`}>
+        <Space size="md">
+          <Tag variant="primary">{ORDER.status}</Tag>
+          <Button variant="ghost" onClick={() => ctx.render()}>
+            <Icon name="copy" size={14} /> 导出
+          </Button>
+          <Button variant="danger" disabled={cancelled} onClick={() => { cancelled = true; ctx.render() }}>
+            {cancelled ? '已取消' : '取消订单'}
+          </Button>
+        </Space>
+      </PageHeader>
+
+      <Descriptions
+        items={[
+          { label: '订单号', value: ORDER.id },
+          { label: '客户', value: ORDER.customer },
+          { label: '金额', value: `¥${ORDER.amount.toLocaleString()}` },
+          { label: '状态', value: ORDER.status },
+          { label: '收货地址', value: ORDER.address, span: 2 },
+          { label: '备注', value: cancelled ? '（已取消）' : ORDER.note, span: 2 },
+        ]}
+        bordered
+      />
+
+      <div class="wf-grid" style="--wf-cols:2fr 1fr;--wf-gap:16px">
+        <Card>
+          <div class="wf-text-bold wf-mb-sm">补充信息</div>
+          <div class="wf-text-secondary wf-text-sm wf-stack wf-gap-xs">
+            <span>支付方式：对公转账</span>
+            <span>发票：已开具（¥3,200.00）</span>
+            <span>业务员：陈晨</span>
+          </div>
+        </Card>
+        <Card>
+          <div class="wf-text-bold wf-mb-sm">执行历史</div>
+          <Timeline items={HISTORY.map((h, i) => ({ ...h, key: String(i) }))} />
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+import { Icon } from 'weifuwu/components'