weifuwu 0.94.0 → 0.95.0

package/dist/level6/apps/showcase/src/demos/others.tsx

@@ -0,0 +1,240 @@
+/**
+ * others 分类 demo（由 scripts/migrate-demos.mjs 从 components-demo 自动迁移——勿手改）
+ */
+/**
+ * weifuwu/client/components cheatsheet
+ *
+ * 每个 demo 组件都是 (initProps, ctx) => (props) => VNode，
+ * 使用闭包变量 + ctx.render() 管理交互状态。
+ *
+ * 启动: node apps/components-demo/server.ts
+ */
+
+import type { UIContext, Component } from '../../../../client/vdom/index.ts'
+import { h } from '../../../../client/vdom/index.ts'
+import { FilePreview } from '../../../../client/components/index.ts'
+
+import {
+  VideoPlayer, Math,
+  MarkdownEditor, CodeEditor, ImageCropper,
+  Button, Input, Textarea, Select,
+  Checkbox, Switch, RadioGroup, Slider,
+  Form, Field, SearchInput, SegmentedControl, ProgressBar,
+  Table, Modal, Toast, Alert, Loading, EmptyState,
+  Card, Badge, Tag, Avatar, StatCard, Steps,
+  Tabs, Dropdown, Pagination, Accordion,
+  Breadcrumb, Divider, FileUpload, Tooltip, Drawer, Popover, Skeleton, Img,
+  InView, DatePicker, Chart, Editor, ThemeSwitch,
+  AiChat, ChatInput, AuthPage, ToolCallCard, ApprovalCard, PageHeader, Icon,
+  Markdown, CodeBlock, Timeline, InputNumber, Descriptions, AvatarGroup, MessageBubble,
+  Menu, PasswordInput, TagsInput, Highlight, List, Result,
+  Rate, Title, Text, Paragraph, Label, AspectRatio,
+  Toggle, ToggleGroup, CheckboxGroup, PinInput, CopyButton, ColorPicker,
+  BackTop, Affix, HoverCard, Notification, ContextMenu, Mentions,
+  Collapse, Tree, Cascader, Transfer, Command, Menubar, Carousel, Resizable, Calendar, Watermark,
+  VirtualList, VirtualTable, InfiniteScroll, QRCode, Anchor, LogViewer, JSONViewer, DiffView, Sparkline, Tour, Kanban, Pipeline, TreeSelect,
+  Layout, LayoutHeader, LayoutSider, LayoutContent, LayoutFooter, Popconfirm, AutoComplete, Link,
+  Space, Grid, Col, Scrollbar, AlertGroup, FloatButton, FloatButtonGroup, NavMenu,
+  JsonSchemaForm, ReasoningBlock, CitationCard, SessionList,
+  TabBar, ActionSheet, NavBar, DropZone,
+} from '../../../../client/components/index.ts'
+import type { ToastItem, ToastType, ToastPosition, ToastInjected, JsonSchema } from '../../../../client/components/index.ts'
+
+const DemoPageHeader: Component = (_props, ctx) => {
+  let display = false
+  return (_p: any) => (
+    <div class="wf-stack wf-gap-md wf-width-full">
+      <PageHeader title="用户管理" sub="管理平台所有用户的账号、角色与权限">
+        <Button size="sm" variant="primary">新建用户</Button>
+        <Button size="sm">导出</Button>
+      </PageHeader>
+      <PageHeader display title="大标题模式" sub="display 档 30px 页面大标题" />
+      <Button size="sm" variant="ghost" onClick={() => { display = !display; ctx.render() }}>切换: {display ? '普通' : 'display'}</Button>
+      <PageHeader display={display} title="可切换标题" sub="点击上方按钮切换 display 档" />
+    </div>
+  )
+}
+
+const DemoIcon: Component = () => () => {
+  const names = ['chevron-down','chevron-up','chevron-left','chevron-right','arrow-left','arrow-up','arrow-down','sort','sort-asc','sort-desc','check','close','alert','info','warning','pause','settings','search','send','stop','retry','upload','trash','edit','plus'] as const
+  return (
+    <div class="wf-stack wf-gap-sm wf-width-full">
+      <div class="wf-row wf-gap-md wf-cluster">
+        {names.map(n => (
+          <span class="wf-row wf-gap-xs wf-font-xs wf-text-secondary" style="align-items:center">
+            <Icon name={n} size={16} />
+            <span>{n}</span>
+          </span>
+        ))}
+      </div>
+      <div class="wf-row wf-gap-md wf-cluster wf-font-sm">
+        <span class="wf-row wf-gap-xs" style="align-items:center"><Icon name="search" /> 随字号</span>
+        <span class="wf-row wf-gap-xs wf-text-primary" style="align-items:center"><Icon name="check" size={20} /> currentColor</span>
+        <span class="wf-row wf-gap-xs wf-text-error" style="align-items:center"><Icon name="trash" /> 红色</span>
+      </div>
+    </div>
+  )
+}
+
+const DemoDivider: Component = () => () => (
+  <div class="wf-stack wf-gap-sm wf-width-full">
+    <p>上方分割线</p>
+    <Divider />
+    <p>下方分割线</p>
+    <Divider>或</Divider>
+    <p>
+      <span>左</span>
+      <Divider vertical />
+      <span>中</span>
+      <Divider vertical />
+      <span>右</span>
+    </p>
+  </div>
+)
+
+
+export const DemoMarkdownEditor: Component = (_props, ctx) => {
+  let md = '# 标题\n\n支持 **加粗** 与 \\`code\\`——右侧实时预览'
+  return (_p: any) => (
+    <div class="wf-width-full wf-stack wf-gap-xs">
+      <div class="wf-font-xs wf-text-secondary">分屏编辑 + 实时预览（复用 Markdown parser——零漂移）</div>
+      <MarkdownEditor value={md} onChange={(v: string) => { md = v; ctx.render() }} rows={6} />
+    </div>
+  )
+}
+
+export const DemoCodeEditor: Component = (_props, ctx) => {
+  let code = 'const greet = (name: string) => `你好, ${name}`\n\nconsole.log(greet(\'weifuwu\'))'
+  return (_p: any) => (
+    <div class="wf-width-full wf-stack wf-gap-xs">
+      <div class="wf-font-xs wf-text-secondary">轻量代码编辑——行号 + Tab 缩进（零依赖，不引 Monaco）</div>
+      <CodeEditor value={code} lang="ts" onChange={(v: string) => { code = v; ctx.render() }} rows={6} />
+    </div>
+  )
+}
+
+export const DemoImageCropper: Component = (_props: any) => (_p: any) => (
+  <div class="wf-width-full wf-stack wf-gap-xs">
+    <div class="wf-font-xs wf-text-secondary">图片裁剪——canvas 原生 + 裁剪框（示例图用占位数据）</div>
+    <ImageCropper src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODAiIGhlaWdodD0iMzYwIj48cmVjdCB3aWR0aD0iNDgwIiBoZWlnaHQ9IjM2MCIgZmlsbD0iI2UyZThmMCIvPjxjaXJjbGUgY3g9IjI0MCIgY3k9IjE4MCIgcj0iMTIwIiBmaWxsPSIjMjU2M2ViIi8+PC9zdmc+" aspect={4/3} onCrop={(dataUrl: string) => { (window as any).__lastCrop = dataUrl; console.log('[crop]', dataUrl.slice(0, 30)) }} />
+  </div>
+)
+
+export const DemoVideoPlayer: Component = (_props: any) => (_p: any) => (
+  <div class="wf-width-full wf-stack wf-gap-xs">
+    <div class="wf-font-xs wf-text-secondary">视频播放器——原生 video 封装（示例源为公共测试视频）</div>
+    <VideoPlayer src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" poster="" aspect={16 / 9} />
+  </div>
+)
+
+export const DemoMath: Component = (_props: any) => (_p: any) => (
+  <div class="wf-width-full wf-stack wf-gap-xs">
+    <div class="wf-font-xs wf-text-secondary">轻量公式渲染（零依赖 LaTeX 子集——教学/文档场景）</div>
+    <div class="wf-stack wf-gap-sm wf-font-base">
+      <div>勾股定理：<Math tex="a^2 + b^2 = c^2" /></div>
+      <div>分数：<Math tex="x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}" /></div>
+      <div>求和：<Math tex="\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}" /></div>
+      <div>希腊字母：<Math tex="\\alpha + \\beta = \\gamma" /></div>
+    </div>
+  </div>
+)
+
+/** TabBar：底部标签栏（移动端导航——MUI BottomNavigation 对位） */
+export const DemoTabBar: Component = (_props: any, ctx: any) => {
+  let tab = 'home'
+  return () => (
+    <div class="wf-stack wf-gap-sm wf-border wf-radius-md" style="position:relative;min-height:320px;overflow:hidden">
+      <div class="wf-padding-lg wf-fill wf-font-sm wf-text-secondary">
+        {tab === 'home' && '🏠 首页——组件/页面/应用/后端/能力/指南 一站式'}
+        {tab === 'message' && '💬 消息——会话列表 + 审批通知'}
+        {tab === 'search' && '🔍 发现——文档与模板搜索'}
+        {tab === 'me' && '👤 我的——主题/预设/设置'}
+      </div>
+      <TabBar
+        items={[
+          { key: 'home', label: '首页', icon: 'home' },
+          { key: 'message', label: '消息', icon: 'message', badge: 3 },
+          { key: 'search', label: '发现', icon: 'search' },
+          { key: 'me', label: '我的', icon: 'user' },
+        ]}
+        activeKey={tab}
+        onChange={(k: string) => { tab = k; ctx.render() }}
+      />
+    </div>
+  )
+}
+
+/** ActionSheet：动作面板（移动端底部滑出——照片选择/更多操作） */
+export const DemoActionSheet: Component = (_props: any, ctx: any) => {
+  let open = false
+  let last = '未选择'
+  return () => (
+    <div class="wf-stack wf-gap-sm wf-border wf-radius-md" style="min-height:120px">
+      <div class="wf-padding-md wf-font-sm wf-text-secondary">选择结果：{last}</div>
+      <div class="wf-padding-md">
+        <button class="wf-btn" type="button" onClick={() => { open = true; ctx.render() }}>选择操作</button>
+      </div>
+      <ActionSheet
+        open={open}
+        title="选择操作"
+        cancelText="算了"
+        items={[
+          { key: 'camera', label: '拍照', icon: 'camera' },
+          { key: 'album', label: '从相册选择', icon: 'image' },
+          { key: 'share', label: '分享', icon: 'share' },
+          { key: 'delete', label: '删除', icon: 'trash', danger: true },
+          { key: 'locked', label: '不可用操作', icon: 'lock', disabled: true },
+        ]}
+        onSelect={(k: string) => { last = k; ctx.render() }}
+        onClose={() => { open = false; ctx.render() }}
+      />
+    </div>
+  )
+}
+
+/** NavBar：移动端顶栏（antd-mobile NavBar 对位——left 槽 + 标题 + right 槽） */
+export const DemoNavBar: Component = (_props: any, ctx: any) => {
+  let clicks = 0
+  const bump = () => { clicks++; ctx.render() }
+  return () => (
+    <div class="wf-stack wf-gap-sm wf-border wf-radius-md" style="overflow:hidden">
+      <NavBar
+        title="工作台"
+        left={<Button size="sm" variant="ghost" aria-label="返回" onClick={bump}><Icon name="arrow-left" size={20} /></Button>}
+        right={<Button size="sm" variant="ghost" aria-label="设置" onClick={bump}><Icon name="settings" size={16} /></Button>}
+      />
+      <div class="wf-padding-md wf-font-sm wf-text-secondary">
+        点击次数：{clicks}——NavBar 移动端顶栏（sticky 常驻 + safe-area 避让；title 单行截断）
+      </div>
+    </div>
+  )
+}
+
+/** DropZone：全区域拖放区（整容器拖入文件高亮——现代 IM 标配） */
+export const DemoDropZone: Component = (_props: any, ctx: any) => {
+  let files: string[] = []
+  return () => (
+    <div class="wf-stack wf-gap-sm wf-border wf-radius-md" style="min-height:160px">
+      <DropZone className="wf-padding-lg" onFiles={(fs: File[]) => { files = fs.map((f) => f.name); ctx.render() }}>
+        <div class="wf-center wf-font-sm wf-text-secondary" style="min-height:100px">
+          {files.length > 0 ? `已拖入：${files.join(', ')}` : '把文件拖到这里（整区域均可）——高亮后松开即回调'}
+        </div>
+      </DropZone>
+    </div>
+  )
+}
+
+export const DEMOS: Record<string, any> = {
+  VideoPlayer: DemoVideoPlayer,
+  Math: DemoMath,
+  MarkdownEditor: DemoMarkdownEditor,
+  CodeEditor: DemoCodeEditor,
+  ImageCropper: DemoImageCropper,
+  "PageHeader": DemoPageHeader,
+  "Icon": DemoIcon,
+  "Divider": DemoDivider,
+  "TabBar": DemoTabBar,
+  "ActionSheet": DemoActionSheet,
+  "NavBar": DemoNavBar,
+  "DropZone": DemoDropZone,
+}

package/dist/level6/apps/showcase/src/demos/overlay-custom.tsx

@@ -0,0 +1,42 @@
+/** 分层抽象演示——useOverlay 换皮（行为契约 + 自绘皮——三用法之一） */
+import type { Component } from '../../../../client/vdom/index.ts'
+import { h } from '../../../../client/vdom/index.ts'
+
+export const OverlayCustomDemo: Component = (_i, ctx) => {
+  let open = false
+  const ov = ctx.ui.useOverlay({ role: 'dialog' })
+
+  return () => {
+    const trigger = h('button', {
+      class: 'wf-btn wf-btn--primary',
+      onClick: () => { open = true; ctx.render() },
+    }, '打开自绘面板')
+
+    const panel = open
+      ? h('div', {
+          class: 'my-overlay-root',
+          ...ov.panelProps,
+        }, [
+          h('div', { class: 'my-overlay-mask', ...ov.maskProps }),
+          h('div', { class: 'my-overlay-panel' }, [
+            h('h3', {}, '自绘面板（行为来自 useOverlay）'),
+            h('p', {}, 'Esc 关闭 · 焦点困禁 · 滚动锁 · 遮罩点击关闭——无一手写。'),
+            h('button', {
+              class: 'wf-btn',
+              onClick: () => { open = false; ctx.render() },
+            }, '关闭'),
+          ]),
+        ])
+      : null
+
+    if (open) ov.sync(() => panel!, { open: true, onOpenChange: (v) => { if (!v) { open = false; ctx.render() } } })
+    else ov.sync(() => panel!, { open })
+
+    return h('div', { class: 'wf-stack wf-items-center wf-gap-md', style: 'padding:24px' }, [
+      trigger,
+      panel,
+    ])
+  }
+}
+
+export const DEMOS = { OverlayCustom: OverlayCustomDemo }

package/dist/level6/apps/showcase/src/demos/platform-migrate.tsx

@@ -0,0 +1,75 @@
+/**
+ * showcase — platform-migrate 组（agent-platform 入库组件展示）
+ * CronPicker · ListScaffold · StatusDot —— 三个平台原语的活体 demo
+ */
+import type { UIContext } from '../../../../client/vdom/index.ts'
+import { h } from '../../../../client/vdom/index.ts'
+import { CronPicker, ListScaffold, StatusDot, Button, Tag } from '../../../../client/components/index.ts'
+
+/* ── CronPicker —— preset/自由编辑双通道 ── */
+export const DemoCronPicker = (_init: {}, ctx: UIContext) => {
+  let value = '*/5 * * * *'
+  return () => (
+    <div class="wf-stack wf-gap-md">
+      <CronPicker value={value} onChange={(v) => { value = v; ctx.render() }} />
+      <div class="wf-row wf-gap-sm wf-items-center">
+        <span class="wf-font-xs wf-text-secondary">当前值：</span>
+        <Tag>{value}</Tag>
+      </div>
+    </div>
+  )
+}
+
+/* ── ListScaffold —— 骨架 + 空态显式（isEmpty 契约演示）── */
+export const DemoListScaffold = (_init: {}, ctx: UIContext) => {
+  let isEmpty = true
+  return () => (
+    <div style="max-width:640px">
+      <div class="wf-row wf-gap-sm wf-padding-sm">
+        <Button size="sm" onClick={() => { isEmpty = !isEmpty; ctx.render() }}>{isEmpty ? '显示数据' : '变空'}</Button>
+        <span class="wf-font-xs wf-text-secondary">isEmpty={String(isEmpty)}（空态仅在 isEmpty 时渲染——防并存）</span>
+      </div>
+      <ListScaffold
+        title="交付物列表"
+        sub="列表页骨架演示"
+        toolbar={<div class="wf-row wf-gap-sm"><span class="wf-font-sm wf-text-secondary">工具栏区（搜索/筛选）</span></div>}
+        empty={{ icon: '📦', text: '暂无交付物', hint: '创建第一个交付物开始' }}
+        isEmpty={isEmpty}
+      >
+        {!isEmpty && (
+          <div class="wf-stack wf-gap-sm">
+            <div class="wf-row wf-gap-md wf-border wf-padding-sm wf-radius-md"><span>交付物 A</span><Tag>ready</Tag></div>
+            <div class="wf-row wf-gap-md wf-border wf-padding-sm wf-radius-md"><span>交付物 B</span><Tag>building</Tag></div>
+          </div>
+        )}
+      </ListScaffold>
+    </div>
+  )
+}
+
+/* ── StatusDot —— on/tone 语义矩阵 ── */
+export const DemoStatusDot = (_init: {}, _ctx: UIContext) => {
+  const ROWS: { label?: string; desc: string; props: { on?: boolean; tone?: 'success' | 'warning' | 'error' | 'default' } }[] = [
+    { label: '运行中（on）', desc: 'success', props: { on: true } },
+    { label: '已暂停（off）', desc: 'default', props: { on: false } },
+    { label: '降级（warning）', desc: 'warning', props: { on: true, tone: 'warning' } },
+    { label: '故障（error）', desc: 'error', props: { on: true, tone: 'error' } },
+    { desc: '仅点（label 缺省——文字是调用方职责）', props: { on: true } },
+  ]
+  return () => (
+    <div class="wf-stack wf-gap-sm">
+      {ROWS.map((r, i) => (
+        <div key={i} class="wf-row wf-gap-md wf-items-center">
+          <StatusDot {...r.props} label={r.label} />
+          <span class="wf-font-xs wf-text-secondary">{r.desc}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export const DEMOS: Record<string, any> = {
+  CronPicker: DemoCronPicker,
+  ListScaffold: DemoListScaffold,
+  StatusDot: DemoStatusDot,
+}

package/dist/level6/apps/showcase/src/main.tsx

@@ -0,0 +1,26 @@
+/**
+ * showcase 平台入口——浏览器 boot（uiServe 收养渲染）
+ *
+ * **双端一体**：路由树在 app-router.ts（buildRouter 单一实现源）——
+ * 本文件只做浏览器端落地（服务端 SSR 走同一棵树——server.ts uiSsr）。
+ */
+import { uiServe } from '../../../client/vdom/index.ts'
+import { buildRouter, toast, confirm, notification } from './app-router.ts'
+import { preloadIndex } from './data.ts'
+
+// ── 渲染落地（uiServe——UIRouter 唯一应用入口——仅浏览器执行） ──
+// （SSR 侧 esbuild 节点 bundle 也会 import 本文件——document 未定义时
+//   不 boot——仅导出 buildRouter 供 uiSsr 消费）
+if (typeof document !== 'undefined') {
+  // **SSR 种子预热（2027-08——SSR≡SPA 首帧一致性）**：__DATA__.showcaseIndex
+  // → indexCache 预填——客户端首帧同步命中（吸收结构一致——零差异）
+  preloadIndex((window as unknown as { __DATA__?: { showcaseIndex?: import('./data.ts').IndexJson } }).__DATA__?.showcaseIndex)
+  const router = buildRouter()
+  const serve = uiServe(router, {
+    root: '#root',
+    toast,
+    confirm,
+    notification,
+  })
+  ;(window as any).__wf_router = router
+}

package/dist/level6/apps/showcase/src/pages/components.tsx

@@ -0,0 +1,183 @@
+/**
+ * 组件域页面——目录（全量平铺 A→Z + 即时搜索）/ 详情页（活体 demo + 文档）
+ *
+ * **components-only 定稿（SHOWCASE-COMPONENTS-ONLY-PLAN——2027-XX）**：
+ * 分类层取消、字母序、组件即首页（/）——用户路径：落地即目录 → 搜索/扫读
+ * → 详情 → 用起来。CategoryPage 已删（git 历史可查）。
+ */
+import { h } from '../../../../client/vdom/index.ts'
+import type { Component } from '../../../../client/vdom/index.ts'
+import { Tag } from '../../../../client/components/index.ts'
+import { fetchIndexCached } from '../data.ts'
+import * as demosAny from '../demos/index.ts'
+import { NotFound } from './not-found.tsx'
+
+/** 家族元数据（家族徽标——目录搜索 family 维度 + 详情页徽标） */
+const FAMILIES: Record<string, { name: string; desc: string }> = {
+  'file-preview': { name: 'FilePreview 家族', desc: 'office 文档域（预览/xlsx/pptx）' },
+  'ai-chat': { name: 'AI 会话家族', desc: 'AI 会话场景（对话/工具/审批/模板）' },
+}
+
+/** 家族徽标（非链接 span——guides 域已移除，家族页不存在——title 提示即可） */
+const FamilyTag = (f: string | null | undefined) => {
+  const meta = f ? FAMILIES[f] : null
+  if (!meta) return null
+  return h('span', {
+    class: 'wf-tag wf-tag--primary',
+    title: meta.desc,
+  }, meta.name)
+}
+
+/** 组件目录（兼站首页）——全量平铺（A→Z 字母序）+ 即时搜索（名称/描述/家族） */
+export const ComponentsIndex: Component = (_init: any, ctx: any) => {
+  const idx = fetchIndexCached(() => ctx.render())
+  let q = ''
+  return (_p: any) => {
+    const kw = q.trim().toLowerCase()
+    const all = idx.components
+      .filter((c) => !kw
+        || c.name.toLowerCase().includes(kw)
+        || c.desc.toLowerCase().includes(kw)
+        || (c.family ?? '').toLowerCase().includes(kw)
+        || (c.family ? (FAMILIES[c.family]?.name ?? '').toLowerCase().includes(kw) : false))
+      .sort((a, b) => a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }))
+    return (
+      <div class="wf-container wf-stack" style="--wf-max:980px;--wf-gap:20px;padding:24px 16px">
+        <div class="wf-row wf-justify-between">
+          <div class="wf-stack wf-gap-xs">
+            <h1 class="wf-font-2xl wf-margin-none">组件 · {idx.components.length || '…'}</h1>
+            <p class="wf-text-secondary wf-font-sm wf-margin-none">每组件一个活体 demo——按字母排序，搜索名称/功能直达</p>
+          </div>
+          <input class="wf-input" style="max-width:260px" placeholder="🔍 搜索组件（名称/功能）…" value={q}
+            onInput={(e: any) => { q = (e.target as HTMLInputElement).value; ctx.render() }} />
+        </div>
+        {kw && <div class="wf-font-xs wf-text-secondary">匹配 {all.length} 个组件</div>}
+        <div class="wf-grid" style="--wf-cols:repeat(auto-fill,minmax(min(100%,300px),1fr));--wf-gap:12px">
+          {all.map((c) => (
+            <a key={c.id} href={`/components/${c.id}`} class="wf-surface wf-surface--flat wf-border wf-radius-md wf-padding-md wf-stack wf-gap-xs" style="text-decoration:none;color:inherit">
+              <b class="wf-font-base">{c.name}</b>
+              <span class="wf-font-xs wf-text-secondary">{c.desc}</span>
+              <span class="wf-cluster wf-gap-xs">{FamilyTag(c.family)}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    )
+  }
+}
+
+/** 组件详情页——活体 demo（demos 注册表驱动） */
+export const ComponentPage: Component = (initProps: any, ctx: any) => {
+  // 变体展开状态（mount 闭包——一页一组件收敛——v.id → open）
+  const openVar: Record<string, boolean> = {}
+  // **2027-08 同步化——数据在 renderFn 内同步读**（fetchIndexCached——
+  // SSR prefetch / 客户端种子预热 → 首帧同步命中——SSR≡SPA 一致）——
+  // 未命中 EMPTY + notify（数据到 → 重渲染）——无异步启动时序差异
+  return (_p: any) => {
+    const idx = fetchIndexCached(() => ctx.render())
+    // 数据未到（冷启动无种子——SSR 回退 SPA 壳）：loading 占位（数据到 → 重渲染）
+    if (!idx.components.length) {
+      return <div class="wf-container wf-padding-md wf-font-sm wf-text-secondary">加载中…</div>
+    }
+    const id = initProps.id
+    const comp = idx.components.find((c) => c.id === id)
+    // 未知组件 id（含旧分类链接 /components/<category>）→ 404 壳（导航可用）
+    if (!comp) return h(NotFound)
+    let name = comp.name
+    const compTags = comp.tags ?? []
+    const compDesc = comp.desc ?? ''
+    const compFamily = comp.family ?? null
+    // 一页一组件（2026-09 收敛）：变体无独立路由——variants 挂主条目（章节渲染）
+    const resolved = comp
+    const variantsOf = comp.variants ?? []
+    // demo 活体：demos 注册表（已迁移分类）——同步引用
+    const Demo = (demosAny as any).DEMOS[name]
+    const compSource = resolved?.sourceFile ?? ''
+    const compCss = resolved?.cssFile ?? ''
+    const compTest = resolved?.testFile ?? ''
+    const compGotchas = resolved?.gotchas ?? []
+    return (
+      <div class="wf-container wf-stack" style="--wf-max:980px;--wf-gap:16px;padding:24px 16px">
+        <div class="wf-font-xs wf-text-secondary">
+          <a href="/components" style="color:inherit">组件</a> › {name}
+        </div>
+        <div class="wf-stack wf-gap-sm">
+          <div class="wf-row wf-justify-between" style="--wf-align:flex-start">
+            <div class="wf-stack wf-gap-xs">
+              <h1 class="wf-font-3xl wf-margin-none">{name}</h1>
+              {compDesc && <div class="wf-font-sm wf-text-secondary wf-margin-none">{compDesc}</div>}
+              {(compTags.length > 0 || compFamily) && (
+                <div class="wf-cluster wf-gap-xs">
+                  {FamilyTag(compFamily)}
+                  {compTags.map((t) => <Tag key={t}>{t}</Tag>)}
+                </div>
+              )}
+            </div>
+          </div>
+          {Demo ? (
+            <div class="wf-surface wf-surface--flat wf-border wf-radius-md wf-stack wf-gap-none" style="overflow:hidden">
+              {/* 舞台标题栏：品牌圆点 + 标签——分隔线（细边框美学） */}
+              <div class="wf-row wf-justify-between wf-padding-x-md wf-padding-y-sm wf-border-bottom">
+                <span class="wf-cluster wf-gap-xs wf-font-xs wf-text-secondary">
+                  <span style="width:6px;height:6px;border-radius:50%;background:var(--wf-color-primary);display:inline-block"></span>
+                  活体 demo（可交互）
+                </span>
+              </div>
+              <div class="wf-padding-md wf-stack wf-gap-md" style="min-height:220px;background:var(--wf-color-bg)">
+                <Demo />
+              </div>
+            </div>
+          ) : (
+            <div class="wf-surface wf-surface--flat wf-border wf-radius-md wf-padding-md wf-font-sm wf-text-secondary">
+              本组件无独立活体 demo——能力见下方组件文件/纪律，或在组合页面中体验。
+            </div>
+          )}
+          {/* 组件文件 + 纪律（registry 元数据——源码导航） */}
+          {(compSource || compCss || compTest || compGotchas.length > 0) && (
+            <div class="wf-surface wf-surface--flat wf-border wf-radius-md wf-padding-md wf-stack wf-gap-sm">
+              <div class="wf-font-xs wf-text-secondary">组件文件</div>
+              <div class="wf-stack wf-gap-xs wf-font-xs" style="font-family:var(--wf-font-mono)">
+                {compSource && <span>{compSource}</span>}
+                {compCss && <span>{compCss}</span>}
+                {compTest && <span>{compTest}</span>}
+              </div>
+              {compGotchas.map((g, i) => (
+                <div key={i} class="wf-font-xs wf-text-warning">⚠ {g}</div>
+              ))}
+            </div>
+          )}
+          {/* 变体章节（一页一组件——2026-09 收敛：变体 demo 并入主页面——
+              手写折叠（自有类 wf-variant-*——无 collapse 字样——不污染既有
+              [class*=collapse] 宽选择器测试——懒渲染：收起不挂 VDemo 实例） */}
+          {variantsOf.length > 0 && (
+            <div class="wf-stack wf-gap-sm">
+              <div class="wf-font-xs wf-text-secondary">本组件的不同使用方式（{variantsOf.length} 个变体——点击展开）：</div>
+              {variantsOf.map((v) => (
+                <div key={v.id} class="wf-surface wf-surface--flat wf-border wf-radius-md wf-stack wf-gap-none" style="overflow:hidden">
+                  <button
+                    type="button"
+                    class="wf-variant-toggle"
+                    aria-expanded={String(!!openVar[v.id])}
+                    onClick={() => { openVar[v.id] = !openVar[v.id]; ctx.render() }}
+                  >
+                    <span class="wf-variant-chevron">{openVar[v.id] ? '▾' : '▸'}</span>
+                    <span class="wf-variant-name">{v.name}</span>
+                    <span class="wf-variant-desc">{v.desc}</span>
+                  </button>
+                  {openVar[v.id] && (() => {
+                    const VDemo = (demosAny as any).DEMOS[v.name]
+                    return (
+                      <div class="wf-padding-md" style="min-height:120px;background:var(--wf-color-bg)">
+                        {VDemo ? <VDemo /> : <span class="wf-font-xs wf-text-tertiary">此变体无独立活体 demo</span>}
+                      </div>
+                    )
+                  })()}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+}

package/dist/level6/apps/showcase/src/pages/not-found.tsx

@@ -0,0 +1,18 @@
+/**
+ * 404——未匹配路由（组件/布局回退）
+ */
+import { h } from '../../../../client/vdom/index.ts'
+import type { Component } from '../../../../client/vdom/index.ts'
+import { DOMAINS } from '../shell.tsx'
+
+export const NotFound: Component = (_init: any, _ctx: any) => (_p: any) => (
+  <div class="wf-container wf-center wf-gap-sm" style="--wf-max:600px;padding:80px 16px;text-align:center">
+    <h1 class="wf-font-4xl wf-margin-none">404</h1>
+    <p class="wf-text-secondary">页面不存在——试试入口：</p>
+    <div class="wf-cluster wf-gap-sm" style="justify-content:center">
+      {DOMAINS.map((d) => (
+        <a key={d.id} href={d.path} class="wf-btn wf-btn--sm">{d.name}</a>
+      ))}
+    </div>
+  </div>
+)