weifuwu 0.87.0 → 0.89.0

package/examples/hello-world/server.ts

@@ -1,46 +0,0 @@
-/**
- * hello-world——最小可运行起步项目（新手第一步，复制本目录即跑）
- *
- * 与 README「快速开始」模式 A 对应——三文件落地版：
- *   server.ts   后端：SPA 外壳 + /api/hello 数据端点
- *   routes.tsx  路由声明：两阶段异步组件（await ctx.data → 返回视图）
- *   client.ts   客户端入口：createRouter 接管渲染
- *
- * 跑起来：node server.ts → http://localhost:3400
- */
-import { serve, Router, ui, cors } from 'weifuwu'
-import { resolve, dirname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-const router = new Router()
-router.use(cors())
-router.use(ui()) // 注入 ctx.ui.html / ctx.ui.js / ctx.ui.css
-
-// SPA 外壳（空 root + 前端 bundle）
-router.get('/', (req, ctx) => ctx.ui.html`
-  <!doctype html>
-  <html>
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/components.css">
-    <title>weifuwu hello-world</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="/static/app.js"></script>
-  </body>
-  </html>
-`)
-router.get('/static/app.js', (req, ctx) => ctx.ui.js(resolve(__dirname, 'client.ts')))
-
-// 样式自托管（node_modules/weifuwu/components/style.css——包内 CSS，零外部依赖/CDN）
-router.get('/components.css', (req, ctx) => ctx.ui.css('weifuwu/components/style.css'))
-
-// 数据端点（ctx.data 消费——SPA 下真 fetch，SSR 下服务端直取）
-router.get('/api/hello', () => Response.json({ msg: '你好，weifuwu！' }))
-
-serve(router, { port: 3400 })
-console.log('hello-world → http://localhost:3400')

package/examples/patterns/AppShell.tsx

@@ -1,224 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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'