weifuwu 0.85.0 → 0.87.0

package/examples/patterns/Docs.tsx

@@ -0,0 +1,105 @@
+import type { Component } from 'weifuwu/vdom'
+import {Title,Paragraph, Anchor, BackTop, Breadcrumb, Button, CodeBlock, Divider, Icon, Tag, Space, } from 'weifuwu/components'
+
+
+// ─────────────────────────────────────────────────────────────
+// 模式 2：文档站（Docs Site）
+//
+// 顶部导航 + 左侧章节目录（Anchor 滚动跟随）+ 右侧正文（prose 排版）。
+// 100% 原语 + 组件：wf-row / wf-gap-* / wf-prose / wf-container / wf-border-t
+//   Anchor（目录）、Breadcrumb（面包屑）、CodeBlock（代码）、Tag（版本）
+// ─────────────────────────────────────────────────────────────
+
+const SECTIONS = [
+  { id: 'intro', title: '快速开始' },
+  { id: 'install', title: '安装' },
+  { id: 'usage', title: '基本用法' },
+  { id: 'theme', title: '主题定制' },
+  { id: 'ssr', title: '服务端渲染' },
+  { id: 'api', title: 'API 参考' },
+]
+
+export const Docs: Component = async (_init, ctx) => {
+  let mainEl: HTMLElement | undefined
+
+  return async () => (
+    <div class="wf-stack wf-gap-none" style={{ minHeight: 'calc(100vh - 48px)' }}>
+      {/* 顶部导航 */}
+      <header class="wf-row wf-p-md wf-gap-lg wf-border-b wf-between">
+        <Space align="center">
+          <Icon name="book-open" size={18} />
+          <b class="wf-text-bold">weifuwu 文档</b>
+          <span class="wf-text-tertiary wf-text-sm">布局原语指南</span>
+        </Space>
+        <Space>
+          <Button size="sm" variant="ghost"><Icon name="github" size={14} /> GitHub</Button>
+          <Tag variant="primary">v0.69.0</Tag>
+        </Space>
+      </header>
+
+      {/* 主体：左目录 + 右正文 */}
+      <div class="wf-row wf-gap-none wf-fill wf-stretch wf-nowrap">
+        <aside class="wf-p-lg wf-border-r wf-sticky" style={{ width: 220, flexShrink: 0 }}>
+          <span class="wf-text-tertiary wf-text-sm wf-block wf-mb-sm">目录</span>
+          <Anchor
+            container={() => mainEl ?? window}
+            items={SECTIONS.map((s) => ({ href: `#${s.id}`, title: s.title }))}
+          />
+        </aside>
+
+        <main
+          ref={(el: any) => { if (el) mainEl = el }}
+          class="wf-fill wf-p-lg wf-scroll"
+        >
+          <Breadcrumb items={[{ label: '首页' }, { label: '文档' }, { label: '布局指南' }]} />
+          <div class="wf-container wf-prose wf-mt-md" style={{ maxWidth: 720 }}>
+            <Title level={1}>快速开始</Title>
+            <Paragraph>
+              在 weifuwu 中，布局由原子原语（wf-stack / wf-row / wf-grid / wf-split…）与组件族组合而成。
+              原子原语只做一件事：把元素按某一种空间关系排列。组合它们即可搭建任意界面。
+            </Paragraph>
+            <CodeBlock lang="html" code={`<div class="wf-stack wf-gap-md">
+  <h1>标题</h1>
+  <p>纵向堆叠段落</p>
+</div>`} />
+
+            <Divider />
+
+            <Title level={2}>安装</Title>
+            <Paragraph>安装 weifuwu 并引入布局样式：</Paragraph>
+            <CodeBlock lang="bash" code={`npm i weifuwu
+# server.ts
+app.get('/layout.css', (req, ctx) => ctx.ui.css('weifuwu/layout'))`} />
+
+            <Divider />
+
+            <Title level={2}>基本用法</Title>
+            <Paragraph>
+              原子原语可以像乐高一样自由嵌套：外层定空间关系，内层定内容呈现。
+              间距、断点、圆角、颜色均以 CSS 变量暴露（--wf-gap-*、--wf-bp-*、--wf-color-*），覆盖变量即换肤。
+            </Paragraph>
+
+            <Divider />
+
+            <Title level={2}>服务端渲染</Title>
+            <Paragraph>布局纯 CSS + 无状态组件，天然适配 SSR——路由级渲染时布局零成本。</Paragraph>
+
+            <Divider />
+
+            <Title level={2}>API 参考</Title>
+            <Paragraph>原子原语按用途分组：排列（stack/row/grid/split）、定位（fixed/sticky/fill）、装饰（surface/prose）等。</Paragraph>
+          </div>
+        </main>
+      </div>
+
+      {/* footer */}
+      <footer class="wf-cluster wf-p-md wf-border-t">
+        <span class="wf-text-tertiary wf-text-sm">weifuwu/layout · 58 布局原语 · 136 工具类 · 开源 MIT</span>
+      </footer>
+
+      {/* 返回顶部（BackTop——组件能力展示：target 指向壳内部滚动容器） */}
+      <BackTop target={() => ctx.browser?.query('.wf-fill.wf-scroll') as HTMLElement} />
+    </div>
+  )
+}
+

package/examples/patterns/FocusTask.tsx

@@ -0,0 +1,67 @@
+import type { Component } from 'weifuwu/vdom'
+import {Text, Button, Card, Checkbox, Field, Form, Icon, Input, Space, Alert, Divider } from 'weifuwu/components'
+
+
+// ─────────────────────────────────────────────────────────────
+// 模式 8：聚焦任务页（Focus Task）
+//
+// 单任务页面：居中卡片承载表单——登录、注册、支付、审批通用。
+// 100% 原语 + 组件：wf-fill + wf-center（视口居中）+ Card 承载
+//   Form / Field / Input / Checkbox / Button（weifuwu 表单全家桶）
+// ─────────────────────────────────────────────────────────────
+
+export const FocusTask: Component = async (_init, ctx) => {
+  let ok = false
+  let errors = {} as Record<string, string>
+  const rerender = () => ctx.render()
+
+  return async () => (
+    <div class="wf-fill wf-center wf-p-md wf-bg-secondary" style={{ minHeight: 'calc(100vh - 48px)' }}>
+      <Card padding="lg" style={{ width: '400px', maxWidth: '100%' }}>
+        <div class="wf-stack wf-gap-md wf-center">
+          {/* 品牌区 */}
+          <Space direction="vertical" size="sm" align="center">
+            <Icon name="lock" size={32} className="wf-text-primary" />
+            <b class="wf-text-bold wf-text-lg">登录 weifuwu</b>
+            <Text type="secondary" className="wf-text-sm">进入你的工作台</Text>
+          </Space>
+
+          <Form
+            validation={{
+              username: [{ required: true, message: '请输入用户名' }],
+              password: [{ required: true, message: '请输入密码' }],
+            }}
+            onError={(e) => { errors = e; rerender() }}
+            onSubmit={(v) => {
+              if (v.username === 'admin' && v.password === 'admin') {
+                ok = true; rerender()
+              }
+            }}
+          >
+            <div class="wf-stack wf-gap-md">
+              <Field label="用户名" required error={errors.username}>
+                <Input name="username" placeholder="请输入用户名" />
+              </Field>
+              <Field label="密码" required error={errors.password}>
+                <Input name="password" type="password" placeholder="请输入密码" />
+              </Field>
+              <div class="wf-row wf-between">
+                <Checkbox label="记住我" />
+                <Text className="wf-text-primary wf-text-sm wf-pointer">忘记密码？</Text>
+              </div>
+              <Button type="submit" variant="primary" block size="lg">登 录</Button>
+            </div>
+          </Form>
+
+          {ok && <Alert variant="success">登录成功（demo：admin / admin）</Alert>}
+          {!ok && (
+            <Divider>
+              <Text type="secondary" className="wf-text-sm">没有账号？<Text className="wf-text-primary wf-pointer">立即注册</Text></Text>
+            </Divider>
+          )}
+        </div>
+      </Card>
+    </div>
+  )
+}
+

package/examples/patterns/Landing.tsx

@@ -0,0 +1,90 @@
+import type { Component } from 'weifuwu/vdom'
+import {Title,Paragraph,Text, Badge, BackTop, Button, Card, Divider, Icon, Link, Space, Avatar } from 'weifuwu/components'
+
+
+// ─────────────────────────────────────────────────────────────
+// 模式 5：营销落地页（Landing Page）
+//
+// Hero（全宽居中）+ 特性区（三列网格）+ CTA + Footer。
+// 100% 原语 + 组件：wf-center / wf-container / wf-grid / wf-gap-*
+//   Badge、Card、Button、Tag
+// ─────────────────────────────────────────────────────────────
+
+const FEATURES = [
+  { icon: 'layers' as const, title: '原子原语', desc: '66 个布局原语 + 156 个工具类组合任意界面，无框架锁定' },
+  { icon: 'zap' as const, title: '零依赖前端', desc: '纯函数组件 + Proxy 状态驱动，无 npm 运行时依赖' },
+  { icon: 'globe' as const, title: 'SSR 透明', desc: '路由级服务端渲染，hydration 零决策' },
+  { icon: 'database' as const, title: '全栈一体', desc: 'DB / Redis / 队列 / AI / WebSocket 一个框架搞定' },
+]
+
+export const Landing: Component = async (_init, ctx) => (
+  async () => (
+    <div class="wf-stack wf-gap-none">
+      {/* 顶部导航 */}
+      <header class="wf-row wf-p-md wf-gap-lg wf-container wf-between wf-sticky wf-bg-secondary" style={{ maxWidth: 1100, top: 0 }}>
+        <Space align="center">
+          <Icon name="zap" size={20} className="wf-text-primary" />
+          <b class="wf-text-bold wf-text-lg">weifuwu</b>
+        </Space>
+        <Space size="lg" align="center">
+          <Link href="#features" underline={false} variant="muted">特性</Link>
+          <Link href="#docs" underline={false} variant="muted">文档</Link>
+          <Link href="#pricing" underline={false} variant="muted">定价</Link>
+        </Space>
+        <Button size="sm" variant="primary">开始使用</Button>
+      </header>
+
+      {/* Hero：全宽 + 居中 */}
+      <section class="wf-center wf-p-xl wf-bg-primary">
+        <div class="wf-stack wf-gap-md wf-text-center" style={{ maxWidth: 640 }}>
+          <Badge variant="primary">v0.69.0 已发布</Badge>
+          <Title level={1} className="wf-text-display">
+            一个框架，<br />构建完整应用
+          </Title>
+          <Paragraph className="wf-text-secondary" style={{ maxWidth: 480 }}>
+            后端中间件 + 前端响应式组件 + SSR，从数据库到像素，全程一个心智模型。
+          </Paragraph>
+          <div class="wf-cluster wf-gap-md">
+            <Button size="lg" variant="primary">免费开始</Button>
+            <Button size="lg" variant="ghost">查看文档 <Icon name="arrow-right" size={14} /></Button>
+          </div>
+        </div>
+      </section>
+
+      {/* 特性区 */}
+      <section class="wf-container wf-p-xl" style={{ maxWidth: 1100 }}>
+        <div class="wf-grid" style={{ '--wf-cols': 'repeat(auto-fill, minmax(240px, 1fr))' }}>
+          {FEATURES.map((f) => (
+            <Card outlined key={f.title} padding="lg">
+              <Space direction="vertical" size="md">
+                <Icon name={f.icon} size={28} className="wf-text-primary" />
+                <b>{f.title}</b>
+                <Text type="secondary" className="wf-text-sm">{f.desc}</Text>
+              </Space>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section class="wf-center wf-p-xl wf-bg-secondary">
+        <div class="wf-stack wf-gap-md wf-center wf-text-center">
+          <Title level={2}>准备构建你的下一个应用？</Title>
+          <Paragraph className="wf-text-secondary">npm i weifuwu — 5 分钟跑通全栈</Paragraph>
+          <Button variant="primary" size="lg"><Icon name="zap" size={16} /> 立即上手</Button>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <BackTop target={() => ctx.browser?.query('.wf-fill.wf-scroll') as HTMLElement} />
+      <footer class="wf-row wf-p-md wf-gap-lg wf-border-t wf-container wf-between" style={{ maxWidth: 1100 }}>
+        <Text type="secondary" className="wf-text-sm">© 2026 weifuwu</Text>
+        <Space align="center" size="sm">
+          <Avatar size="sm" name="W" />
+          <Text type="secondary" className="wf-text-sm">Made with weifuwu</Text>
+        </Space>
+      </footer>
+    </div>
+  )
+)
+

package/examples/patterns/ListPage.tsx

@@ -0,0 +1,77 @@
+import type { Component } from 'weifuwu/vdom'
+import { PageHeader, SearchInput, Table, Tag, Pagination, Button, Icon, EmptyState, Card } from 'weifuwu/components'
+
+// ─────────────────────────────────────────────────────────────
+// 模式 9：列表页（List Page）
+//
+// 最常见的业务页面：搜索 + 表格 + 分页 + 状态标签组合。
+// 复制此文件即可得到一个标准的"列表页"：
+//   - PageHeader（标题 + 操作区）
+//   - SearchInput（搜索过滤——客户端即时过滤）
+//   - Table（列配置 + 状态 Tag 渲染）
+//   - Pagination（分页——当前为前端分页，接 API 时分页参数同理）
+// 改造：换 columns/data → 自己的业务列表。
+// ─────────────────────────────────────────────────────────────
+
+const ORDERS = [
+  { id: 'SO-1001', customer: '张伟', amount: 1280, status: '已支付', date: '2026-08-10' },
+  { id: 'SO-1002', customer: '李娜', amount: 560, status: '待支付', date: '2026-08-11' },
+  { id: 'SO-1003', customer: '王强', amount: 3200, status: '已发货', date: '2026-08-12' },
+  { id: 'SO-1004', customer: '赵敏', amount: 890, status: '已支付', date: '2026-08-13' },
+  { id: 'SO-1005', customer: '陈杰', amount: 2100, status: '待支付', date: '2026-08-14' },
+  { id: 'SO-1006', customer: '刘洋', amount: 450, status: '已支付', date: '2026-08-15' },
+  { id: 'SO-1007', customer: '孙丽', amount: 1750, status: '已发货', date: '2026-08-16' },
+  { id: 'SO-1008', customer: '周涛', amount: 980, status: '已支付', date: '2026-08-17' },
+]
+
+const statusTag = (s: string) =>
+  s === '已支付' ? <Tag variant="success">{s}</Tag> : s === '已发货' ? <Tag variant="primary">{s}</Tag> : <Tag>{s}</Tag>
+
+export const ListPage: Component = async (_init: any, ctx: any) => {
+  let q = ''
+  let page = 1
+  const PAGE_SIZE = 5
+  return async (_p: any) => {
+    const filtered = ORDERS.filter((o) => !q || o.customer.toLowerCase().includes(q.toLowerCase()) || o.id.toLowerCase().includes(q.toLowerCase()))
+    const total = filtered.length
+    const pages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+    const cur = Math.min(page, pages)
+    const rows = filtered.slice((cur - 1) * PAGE_SIZE, cur * PAGE_SIZE)
+    return (
+      <div class="wf-container wf-stack" style="--wf-max:960px;--wf-gap:16px;padding:24px 16px">
+        <PageHeader title="订单列表" sub={`共 ${total} 条订单`}>
+          <div class="wf-row wf-gap-sm">
+            <SearchInput placeholder="搜索客户/订单号…" value={q}
+              onInput={(e: any) => { q = (e.target as HTMLInputElement).value; page = 1; ctx.render() }}
+              onClear={() => { q = ''; page = 1; ctx.render() }} />
+            <Button variant="primary" onClick={() => ctx.render()}>
+              <Icon name="plus" size={14} /> 新建订单
+            </Button>
+          </div>
+        </PageHeader>
+
+        {rows.length === 0 ? (
+          <Card><EmptyState text={q ? `无匹配「${q}」的订单` : '暂无订单'} /></Card>
+        ) : (
+          <Table
+            columns={[
+              { key: 'id', label: '订单号' },
+              { key: 'customer', label: '客户' },
+              { key: 'amount', label: '金额', render: (v: any) => `¥${Number(v).toLocaleString()}` },
+              { key: 'date', label: '日期' },
+              { key: 'status', label: '状态', render: (v: any) => statusTag(v) },
+              { key: 'id', label: '操作', render: () => <a class="wf-link" style="cursor:pointer">查看</a> },
+            ]}
+            data={rows}
+          />
+        )}
+
+        <div class="wf-row wf-between">
+          <span class="wf-text-xs wf-text-tertiary">第 {cur}/{pages} 页 · 每页 {PAGE_SIZE} 条</span>
+          <Pagination total={total} page={cur} pageSize={PAGE_SIZE}
+            onChange={(p: number) => { page = p; ctx.render() }} />
+        </div>
+      </div>
+    )
+  }
+}

package/examples/patterns/Mobile.tsx

@@ -0,0 +1,154 @@
+import type { Component } from 'weifuwu/vdom'
+import { Text, Avatar, Badge, Divider, Icon, List, SearchInput, Space, TabBar } from 'weifuwu/components'
+
+
+// ─────────────────────────────────────────────────────────────
+// 模式 6：移动端布局（Mobile App Shell）
+//
+// App 壳：顶部导航（wf-safe-top 避让刘海）+ 内容列表 + 底部 Tab
+// （wf-safe-bottom 避让手势条）。固定视口（390px 居中）模拟手机屏。
+// 100% 原语 + 组件：wf-safe-top/bottom、wf-fill、wf-row/gap、wf-center
+//   SearchInput（搜索）、List（消息流）、Badge（未读数）
+// ─────────────────────────────────────────────────────────────
+
+const CONTACTS = [
+  { name: '张伟', role: '产品经理', online: true },
+  { name: '李娜', role: '设计师', online: true },
+  { name: '王强', role: '后端工程师', online: false },
+  { name: '赵敏', role: '测试', online: true },
+  { name: '陈晨', role: '运营', online: false },
+]
+
+const DISCOVER = [
+  { title: '前端周刊', meta: '12 篇新文章', icon: 'file-text' },
+  { title: 'AI 助手', meta: '对话式工具', icon: 'zap' },
+  { title: '设计资源', meta: '图标 / 插画', icon: 'layers' },
+  { title: '开源项目', meta: 'weifuwu 生态', icon: 'github' },
+]
+
+const CHATS = [
+  { name: '产品讨论组', msg: '王强：新的布局原语文档已更新', time: '10:24', unread: 3 },
+  { name: '张伟', msg: '收到，明天下午评审', time: '09:58', unread: 0 },
+  { name: '前端小分队', msg: '李娜：PR #128 已合并 🎉', time: '昨天', unread: 12 },
+  { name: '服务端同学', msg: '部署脚本已就绪', time: '昨天', unread: 0 },
+  { name: '设计同步', msg: '新图标包已上传 Figma', time: '周一', unread: 5 },
+]
+
+const TABS = [
+  { key: '消息', icon: 'message' as const, label: '消息' },
+  { key: '通讯录', icon: 'users' as const, label: '通讯录' },
+  { key: '发现', icon: 'grid' as const, label: '发现' },
+  { key: '我', icon: 'user' as const, label: '我' },
+]
+
+export const Mobile: Component = async (_init, ctx) => {
+  let query = ''
+  let tab = '消息'
+  const rerender = () => ctx.render()
+
+  return async () => {
+    const filtered = CHATS.filter((c) => c.name.includes(query) || c.msg.includes(query))
+    return (
+    <div class="wf-center wf-p-lg wf-bg-tertiary" style={{ minHeight: 'calc(100vh - 48px)' }}>
+      {/* 手机视口（390×640 模拟屏——唯一允许的视口容器内联） */}
+      <div class="wf-stack wf-gap-none wf-border wf-rounded-lg wf-elevate wf-bg-primary" style={{ width: 390, maxWidth: '100%', height: 640, overflow: 'hidden' }}>
+        {/* 顶部导航（安全区避让） */}
+        <div class="wf-safe-top wf-row wf-p-md wf-gap-sm wf-border-b wf-between">
+          <Icon name="chevron-left" size={18} />
+          <b class="wf-text-bold">消息</b>
+          <Icon name="plus" size={18} />
+        </div>
+
+        {/* 搜索（输入过滤列表） */}
+        <div class="wf-p-md wf-border-b">
+          <SearchInput
+            placeholder="搜索会话"
+            onInput={(e) => { query = (e.target as HTMLInputElement).value; rerender() }}
+            onClear={() => { query = ''; rerender() }}
+          />
+        </div>
+
+        {/* 内容区（按底部 Tab 切换） */}
+        <div class="wf-fill wf-scroll">
+          {tab === '消息' && (
+          <List
+            divided
+            items={filtered}
+            renderItem={(c) => (
+              <div class="wf-row wf-p-md wf-gap-md">
+                <Avatar name={c.name[0]} size="md" />
+                <div class="wf-fill wf-stack wf-gap-none" style={{ minWidth: 0 }}>
+                  <div class="wf-row wf-gap-none wf-between">
+                    <Text className="wf-text-sm" strong>{c.name}</Text>
+                    <Text type="secondary" className="wf-text-xs">{c.time}</Text>
+                  </div>
+                  <Text type="secondary" className="wf-text-sm wf-truncate">{c.msg}</Text>
+                </div>
+                {c.unread > 0 && <Badge variant="danger" dot={false}>{c.unread}</Badge>}
+              </div>
+            )}
+          />
+          )}
+          {tab === '通讯录' && (
+            <List
+              divided
+              items={CONTACTS}
+              renderItem={(c) => (
+                <div class="wf-row wf-p-md wf-gap-md">
+                  <Avatar name={c.name[0]} size="md" />
+                  <div class="wf-fill">
+                    <Text className="wf-text-sm" strong>{c.name}</Text>
+                    <Text type="secondary" className="wf-text-xs wf-block">{c.role}</Text>
+                  </div>
+                  {c.online && <span class="wf-badge-dot wf-badge-dot--success" />}
+                </div>
+              )}
+            />
+          )}
+          {tab === '发现' && (
+            <List
+              divided
+              items={DISCOVER}
+              renderItem={(d) => (
+                <div class="wf-row wf-p-md wf-gap-md">
+                  <Icon name={d.icon as any} size={20} className="wf-text-primary" />
+                  <div class="wf-fill">
+                    <Text className="wf-text-sm" strong>{d.title}</Text>
+                    <Text type="secondary" className="wf-text-xs wf-block">{d.meta}</Text>
+                  </div>
+                  <Icon name="chevron-right" size={16} className="wf-text-tertiary" />
+                </div>
+              )}
+            />
+          )}
+          {tab === '我' && (
+            <div class="wf-stack wf-gap-md wf-p-md">
+              <div class="wf-row wf-gap-md">
+                <Avatar name="我" size="lg" />
+                <div class="wf-stack wf-gap-none">
+                  <Text strong>管理员</Text>
+                  <Text type="secondary" className="wf-text-xs">ID: 10086</Text>
+                </div>
+              </div>
+              {['账号与安全', '通知设置', '隐私', '关于'].map((item) => (
+                <div key={item} class="wf-between wf-p-sm wf-border-b">
+                  <Text className="wf-text-sm">{item}</Text>
+                  <Icon name="chevron-right" size={14} className="wf-text-tertiary" />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* 底部 Tab（TabBar 组件——safe-area 避让 + 受控激活 + 键盘方向键） */}
+        <TabBar
+          items={TABS}
+          activeKey={tab}
+          onChange={(k: string) => { tab = k; rerender() }}
+        />
+      </div>
+    </div>
+    )
+  }
+}
+

package/examples/patterns/SettingsPage.tsx

@@ -0,0 +1,98 @@
+import type { Component } from 'weifuwu/vdom'
+import { PageHeader, Tabs, Form, Field, Input, Switch, Select, Button, Alert, Space } from 'weifuwu/components'
+
+// ─────────────────────────────────────────────────────────────
+// 模式 11：设置页（Settings Page）
+//
+// 多分区设置：Tabs 分块 + Form 表单 + 开关项 + 保存反馈。
+// 复制此文件即可得到一个标准的"设置页"：
+//   - PageHeader（标题 + 保存按钮）
+//   - Tabs（基本设置 / 通知 / 安全——分区）
+//   - Form + Field（表单校验）
+//   - Switch（开关项——通知开关）
+//   - Alert（保存成功反馈）
+// 改造：换分区/字段 → 自己的设置项。
+// ─────────────────────────────────────────────────────────────
+
+export const SettingsPage: Component = async (_init: any, ctx: any) => {
+  let tab = 'basic'
+  let saved = false
+  let saving = false
+  let name = '团队工作台'
+  let email = 'admin@acme.cn'
+  let notifyOrder = true
+  let notifyDigest = false
+  let twoFactor = true
+
+  const save = () => {
+    saving = true
+    saved = false
+    ctx.render()
+    setTimeout(() => { saving = false; saved = true; ctx.render() }, 800)
+  }
+
+  return async (_p: any) => (
+    <div class="wf-container wf-stack" style="--wf-max:760px;--wf-gap:16px;padding:24px 16px">
+      <PageHeader title="系统设置" sub="工作区偏好、通知与安全">
+        <Button variant="primary" loading={saving} onClick={save}>保存设置</Button>
+      </PageHeader>
+
+      {saved && <Alert variant="success">设置已保存</Alert>}
+
+      <Tabs
+        items={[
+          { key: 'basic', label: '基本设置' },
+          { key: 'notify', label: '通知' },
+          { key: 'security', label: '安全' },
+        ]}
+        active={tab}
+        onChange={(k: string) => { tab = k; saved = false; ctx.render() }}
+      />
+
+      {tab === 'basic' && (
+        <div class="wf-stack wf-gap-sm" style="max-width:480px">
+          <Field label="工作区名称" hint="团队成员可见">
+            <Input value={name} onInput={(e: any) => { name = (e.target as HTMLInputElement).value; ctx.render() }} />
+          </Field>
+          <Field label="管理员邮箱" required>
+            <Input type="email" value={email} onInput={(e: any) => { email = (e.target as HTMLInputElement).value; ctx.render() }} />
+          </Field>
+        </div>
+      )}
+
+      {tab === 'notify' && (
+        <div class="wf-stack wf-gap-sm" style="max-width:480px">
+          <div class="wf-surface wf-border wf-rounded-sm wf-p-sm wf-row wf-between">
+            <div class="wf-stack wf-gap-xs">
+              <b class="wf-text-sm">订单通知</b>
+              <span class="wf-text-xs wf-text-secondary">新订单到达时推送</span>
+            </div>
+            <Switch checked={notifyOrder} onChange={(v: boolean) => { notifyOrder = v; ctx.render() }} />
+          </div>
+          <div class="wf-surface wf-border wf-rounded-sm wf-p-sm wf-row wf-between">
+            <div class="wf-stack wf-gap-xs">
+              <b class="wf-text-sm">每日摘要</b>
+              <span class="wf-text-xs wf-text-secondary">每天早上 9 点发送昨日汇总</span>
+            </div>
+            <Switch checked={notifyDigest} onChange={(v: boolean) => { notifyDigest = v; ctx.render() }} />
+          </div>
+        </div>
+      )}
+
+      {tab === 'security' && (
+        <div class="wf-stack wf-gap-sm" style="max-width:480px">
+          <div class="wf-surface wf-border wf-rounded-sm wf-p-sm wf-row wf-between">
+            <div class="wf-stack wf-gap-xs">
+              <b class="wf-text-sm">两步验证</b>
+              <span class="wf-text-xs wf-text-secondary">登录时要求验证码</span>
+            </div>
+            <Switch checked={twoFactor} onChange={(v: boolean) => { twoFactor = v; ctx.render() }} />
+          </div>
+          <Field label="登录密码">
+            <Input type="password" placeholder="输入新密码（留空不修改）" />
+          </Field>
+        </div>
+      )}
+    </div>
+  )
+}