weifuwu 0.87.0 → 0.89.0

package/examples/patterns/Docs.tsx

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

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

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

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

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

@@ -1,98 +0,0 @@
-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>
-  )
-}