weifuwu 0.35.1 → 0.36.0

package/README.md

@@ -23,6 +23,7 @@ npm install weifuwu
 | **ui** | `ui` | SSR 渲染 + 动态 JS 编译 → `ctx.ui.html/css/js` | `Router` |
 | **graphql** | `router.graphql()` | GraphQL 端点 | `Router` |
 | **client** | — | 前端 VDOM + Proxy 框架 | — |
+| **layout** | — | 纯 CSS 布局原语 + 主题 Token 系统 | — |
 
 **前端 `weifuwu/client` 模块总览：**
 
@@ -721,6 +722,105 @@ function myMiddleware(): AppMiddleware {
 
 ---
 
+## 布局 & 主题 (`weifuwu/layout`)
+
+纯 CSS 布局原语 + 主题 Token 系统，不绑定任何 JS 框架。
+
+```bash
+npm install weifuwu  # 已包含
+```
+
+```ts
+// 服务端编译 CSS
+app.get('/weifuwu.css', async (req, ctx) => ctx.ui.css('./node_modules/weifuwu/dist/layout/weifuwu-layout.css'))
+```
+
+```html
+<!-- 或直接引入 -->
+<link rel="stylesheet" href="/weifuwu.css">
+```
+
+### 33 个布局原语
+
+| 类别 | 原语 | 含义 | CSS 实现 |
+|------|------|------|---------|
+| **排列** | `wf-stack` | 纵向堆叠 | `flex-direction: column + gap` |
+| | `wf-stack-reverse` | 反向堆叠 | `flex-direction: column-reverse + gap` |
+| | `wf-row` | 横向排列 | `flex + flex-wrap + gap` |
+| | `wf-row-reverse` | 反向排列 | `flex-direction: row-reverse` |
+| | `wf-nowrap` | 不换行 | `flex-wrap: nowrap` |
+| | `wf-cluster` | 换行簇 | `flex-wrap: wrap + justify-content: center` |
+| **分布** | `wf-split` | 两端展开 | `justify-content: space-between` |
+| | `wf-center` | 居中 | `flex + center both axes` |
+| | `wf-right` | 靠右 | `justify-content: flex-end` |
+| | `wf-around` | 环绕 | `justify-content: space-around` |
+| | `wf-evenly` | 均匀 | `justify-content: space-evenly` |
+| **对齐** | `wf-top` | 顶部 | `align-items: flex-start` |
+| | `wf-bottom` | 底部 | `align-items: flex-end` |
+| | `wf-stretch` | 拉伸 | `align-items: stretch` |
+| **弹性** | `wf-fill` | 撑满 | `flex: 1 + min-width: 0` |
+| | `wf-fixed` | 固定 | `flex: none` |
+| | `wf-auto` | 按内容 | `flex: auto` |
+| | `wf-shrink` | 可收缩 | `min-width: 0 / min-height: 0` |
+| **Z轴** | `wf-cover` | 全屏覆盖 | `position: fixed + inset: 0` |
+| | `wf-pop` | 浮动层 | `position: absolute` |
+| | `wf-anchor` | 锚点容器 | `position: relative` |
+| | `wf-layer` | 层级控制 | `position: relative + z-index` |
+| | `wf-sticky` | 粘性 | `position: sticky` |
+| **容器** | `wf-surface` | 基础面 | `border-radius + box-shadow + bg` |
+| | `wf-grid` | 网格 | `display: grid + --wf-cols` |
+| | `wf-container` | 宽度约束 | `max-width + margin: auto` |
+| | `wf-scroll` | 滚动 | `overflow: auto` |
+| | `wf-clip` | 裁剪 | `overflow: hidden` |
+| **显隐** | `wf-hidden` | 隐藏 | `display: none` |
+| | `wf-block` | 块级 | `display: block` |
+| | `wf-inline` | 行内 | `display: inline` |
+| | `wf-inline-block` | 行内块 | `display: inline-block` |
+| | `wf-contents` | 容器抹除 | `display: contents` |
+
+### 72 个主题 Token
+
+| 类别 | Token 示例 | 含义 |
+|------|-----------|------|
+| 品牌色 | `--wf-color-primary`, `--wf-color-primary-bg` | 品牌色、Hover、背景 |
+| 语义色 | `--wf-color-success`, `--wf-color-warning`, `--wf-color-error`, `--wf-color-info` | 状态语义色 |
+| 中性色 | `--wf-color-text`, `--wf-color-bg`, `--wf-color-border` | 文字/背景/边框 |
+| 字体 | `--wf-font-sans`, `--wf-font-mono` | 字体族 |
+| 字号 | `--wf-font-size-xs` ~ `--wf-font-size-5xl`（9 级）| 字号层级 |
+| 字重 | `--wf-font-weight-normal` ~ `bold`（4 级）| 字重 |
+| 行高 | `--wf-line-height-tight`, `--wf-line-height`, `--wf-line-height-relaxed` | 行高 |
+| 字距 | `--wf-letter-spacing`, `--wf-letter-spacing-wide`, `--wf-letter-spacing-wider` | 字符间距 |
+| 间距 | `--wf-space-xs` ~ `--wf-space-2xl`（8 级）| margin / padding |
+| 间隔 | `--wf-gap-xs` ~ `--wf-gap-2xl`（6 级）| flex / grid gap |
+| 圆角 | `--wf-radius-sm` ~ `--wf-radius-xl`（5 级）| border-radius |
+| 阴影 | `--wf-shadow-sm` ~ `--wf-shadow-lg`（4 级）| box-shadow |
+| 边框 | `--wf-border-width` | 边框宽度 |
+| 聚焦 | `--wf-focus-ring` | 聚焦环 |
+| 动效 | `--wf-transition-duration`, `--wf-transition-timing` | 过渡时长/曲线 |
+| 表单 | `--wf-accent-color`, `--wf-caret-color` | 表单控件主题色 |
+| 透明 | `--wf-opacity-disabled`, `--wf-opacity-overlay` | 禁用态/遮罩透明度 |
+| 层级 | `--wf-pop-z`, `--wf-cover-z` | z-index |
+
+### 暗色模式
+
+切换 `html` 标签的 `data-theme` 属性即可自动切换全部主题色：
+
+```ts
+// weifuwu/client
+function toggleTheme() {
+  const dark = document.documentElement.getAttribute('data-theme') === 'dark'
+  document.documentElement.setAttribute('data-theme', dark ? 'light' : 'dark')
+}
+```
+
+### 基础元素默认样式
+
+引入 `weifuwu/layout` 后，以下 HTML 元素自动绑定主题 Token，无需额外样式：
+
+`body`, `h1`~`h6`, `p`, `a`, `label`, `small`, `input`, `textarea`, `select`, `button`, `table`, `th`, `td`, `hr`, `pre`, `code`
+
+---
+
 ## 全栈模式
 
 ### 认证流程

package/dist/layout/weifuwu-layout.css

@@ -0,0 +1,536 @@
+/* weifuwu/layout — 基于 CSS 标准的布局原语 */
+
+/* weifuwu/theme — 设计 Token */
+:root {
+  /* ── 间距 ── */
+  --wf-gap-xs: 4px;
+  --wf-gap-sm: 8px;
+  --wf-gap-md: 12px;
+  --wf-gap-lg: 16px;
+  --wf-gap-xl: 24px;
+  --wf-gap-2xl: 32px;
+
+  --wf-space-xs: 4px;
+  --wf-space-sm: 8px;
+  --wf-space: 12px;
+  --wf-space-md: 16px;
+  --wf-space-lg: 24px;
+  --wf-space-xl: 32px;
+  --wf-space-2xl: 40px;
+
+  /* ── 圆角 ── */
+  --wf-radius-sm: 4px;
+  --wf-radius: 6px;
+  --wf-radius-md: 8px;
+  --wf-radius-lg: 12px;
+  --wf-radius-xl: 20px;
+
+  --wf-surface-radius: var(--wf-radius-md);
+  --wf-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  /* ── 阴影 ── */
+  --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --wf-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
+  --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
+
+  /* ── 层级 ── */
+  --wf-pop-z: 50;
+  --wf-cover-z: 100;
+
+  /* ── 色彩 — 品牌 ── */
+  --wf-color-primary: #4f6ef7;
+  --wf-color-primary-hover: #3b5ae0;
+  --wf-color-primary-bg: #eef1ff;
+
+  --wf-color-success: #22c55e;
+  --wf-color-success-bg: #f0fdf4;
+  --wf-color-warning: #f59e0b;
+  --wf-color-warning-bg: #fffbeb;
+  --wf-color-error: #ef4444;
+  --wf-color-error-bg: #fef2f2;
+
+  /* ── 色彩 — 中性 ── */
+  --wf-color-text: #0f172a;
+  --wf-color-text-secondary: #64748b;
+  --wf-color-text-tertiary: #94a3b8;
+  --wf-color-text-disabled: #cbd5e1;
+
+  --wf-color-bg: #ffffff;
+  --wf-color-bg-secondary: #f8fafc;
+  --wf-color-bg-tertiary: #f1f5f9;
+
+  --wf-color-border: #e2e8f0;
+  --wf-color-border-light: #f1f5f9;
+  --wf-color-border-dark: #cbd5e1;
+
+  /* ── surface 引用色彩 ── */
+  --wf-surface-bg: var(--wf-color-bg);
+
+  /* ── 字体 ── */
+  --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --wf-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+
+  --wf-font-size-xs: 11px;
+  --wf-font-size-sm: 12px;
+  --wf-font-size-base: 13px;
+  --wf-font-size-lg: 14px;
+  --wf-font-size-xl: 15px;
+  --wf-font-size-2xl: 20px;
+  --wf-font-size-3xl: 24px;
+  --wf-font-size-4xl: 28px;
+  --wf-font-size-5xl: 32px;
+
+  --wf-font-weight-normal: 400;
+  --wf-font-weight-medium: 500;
+  --wf-font-weight-semibold: 600;
+  --wf-font-weight-bold: 700;
+
+  /* ── 行高 ── */
+  --wf-line-height-tight: 1.25;
+  --wf-line-height: 1.5;
+  --wf-line-height-relaxed: 1.75;
+
+  /* ── 边框宽度 ── */
+  --wf-border-width: 1px;
+
+  /* ── 聚焦环 ── */
+  --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg);
+
+  /* ── 动效 ── */
+  --wf-transition-duration: 150ms;
+  --wf-transition-timing: ease;
+  --wf-transition: var(--wf-transition-duration) var(--wf-transition-timing);
+
+  /* ── 色彩 — 信息（补充） ── */
+  --wf-color-info: #1677ff;
+  --wf-color-info-bg: #e6f4ff;
+
+  /* ── 表单控件 ── */
+  --wf-accent-color: var(--wf-color-primary);
+  --wf-caret-color: var(--wf-color-primary);
+
+  /* ── 透明度 ── */
+  --wf-opacity-disabled: 0.5;
+  --wf-opacity-overlay: 0.4;
+
+  /* ── 文字间距 ── */
+  --wf-letter-spacing: normal;
+  --wf-letter-spacing-wide: 0.5px;
+  --wf-letter-spacing-wider: 1px;
+}
+
+/* weifuwu/theme — 暗色模式 */
+[data-theme="dark"] {
+  --wf-color-primary: #6b8aff;
+  --wf-color-primary-hover: #8ba3ff;
+  --wf-color-primary-bg: #1e293b;
+
+  --wf-color-success: #4ade80;
+  --wf-color-success-bg: #14532d;
+  --wf-color-warning: #fbbf24;
+  --wf-color-warning-bg: #451a03;
+  --wf-color-error: #f87171;
+  --wf-color-error-bg: #451a1a;
+
+  --wf-color-info: #60a5fa;
+  --wf-color-info-bg: #172554;
+
+  --wf-color-text: #f1f5f9;
+  --wf-color-text-secondary: #94a3b8;
+  --wf-color-text-tertiary: #64748b;
+  --wf-color-text-disabled: #475569;
+
+  --wf-color-bg: #0f172a;
+  --wf-color-bg-secondary: #1e293b;
+  --wf-color-bg-tertiary: #334155;
+
+  --wf-color-border: #334155;
+  --wf-color-border-light: #1e293b;
+  --wf-color-border-dark: #475569;
+
+  --wf-surface-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
+  --wf-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+  --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
+
+  --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg);
+
+  --wf-surface-bg: var(--wf-color-bg);
+}
+
+/* weifuwu/theme — 基础元素默认样式 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-base);
+  line-height: var(--wf-line-height);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--wf-color-primary);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--wf-color-primary-hover);
+  text-decoration: underline;
+}
+
+input,
+textarea,
+select,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+input,
+textarea,
+select {
+  accent-color: var(--wf-accent-color);
+  caret-color: var(--wf-caret-color);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-space-sm) var(--wf-space);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-color: var(--wf-color-primary);
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled,
+button:disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+button {
+  accent-color: var(--wf-accent-color);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  cursor: pointer;
+}
+button:hover {
+  border-color: var(--wf-color-primary);
+  color: var(--wf-color-primary);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--wf-font-weight-semibold);
+  line-height: var(--wf-line-height-tight);
+  color: var(--wf-color-text);
+}
+
+p {
+  line-height: var(--wf-line-height-relaxed);
+}
+
+small {
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-tertiary);
+}
+
+label {
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-medium);
+  color: var(--wf-color-text);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th {
+  text-align: left;
+  font-weight: var(--wf-font-weight-medium);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: var(--wf-space) var(--wf-space-sm);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  background: var(--wf-color-bg-secondary);
+}
+
+td {
+  padding: var(--wf-space) var(--wf-space-sm);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  color: var(--wf-color-text);
+  font-size: var(--wf-font-size-base);
+}
+
+hr {
+  border: none;
+  border-top: var(--wf-border-width) solid var(--wf-color-border);
+  margin: var(--wf-space-md) 0;
+}
+
+pre, code {
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+}
+
+pre {
+  background: var(--wf-color-bg-secondary);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-space) var(--wf-space-md);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+code {
+  background: var(--wf-color-bg-secondary);
+  padding: 2px 6px;
+  border-radius: var(--wf-radius-sm);
+}
+
+/* stack — 纵向堆叠 */
+.wf-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* stack-reverse — 纵向反向堆叠 */
+.wf-stack-reverse {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* row — 横向排列 */
+.wf-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wf-gap, var(--wf-gap-md));
+  align-items: var(--wf-align, center);
+}
+
+/* row-reverse — 横向反向排列 */
+.wf-row-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  gap: var(--wf-gap, var(--wf-gap-md));
+  align-items: var(--wf-align, center);
+}
+
+/* split — 两端展开 */
+.wf-split {
+  display: flex;
+  justify-content: space-between;
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+.wf-split > :last-child {
+  flex-shrink: 0;
+}
+
+/* center — 居中 */
+.wf-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* right — 靠右对齐 */
+.wf-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* top — 顶部对齐 */
+.wf-top {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* bottom — 底部对齐 */
+.wf-bottom {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* stretch — 拉伸对齐 */
+.wf-stretch {
+  display: flex;
+  align-items: stretch;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* around — 均匀环绕分布 */
+.wf-around {
+  display: flex;
+  justify-content: space-around;
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* evenly — 均匀分布 */
+.wf-evenly {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* fill — 撑满剩余空间 */
+.wf-fill {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* fixed — 固定不伸缩 */
+.wf-fixed {
+  flex: none;
+}
+
+/* auto — 按内容撑满 */
+.wf-auto {
+  flex: auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* cover — 全屏覆盖 */
+.wf-cover {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--wf-z, var(--wf-cover-z));
+}
+
+/* pop — 浮动层 */
+.wf-pop {
+  position: absolute;
+  z-index: var(--wf-z, var(--wf-pop-z));
+}
+
+/* anchor — 定位锚点容器 */
+.wf-anchor {
+  position: relative;
+}
+
+/* sticky — 粘性定位 */
+.wf-sticky {
+  position: sticky;
+  top: var(--wf-offset, 0);
+}
+
+/* surface — 基础面 */
+.wf-surface {
+  border-radius: var(--wf-surface-radius);
+  box-shadow: var(--wf-surface-shadow);
+  background: var(--wf-surface-bg);
+}
+
+/* grid — 二维网格 */
+.wf-grid {
+  display: grid;
+  grid-template-columns: var(--wf-cols, repeat(auto-fill, minmax(280px, 1fr)));
+  gap: var(--wf-gap, var(--wf-gap-lg));
+}
+
+/* cluster — 换行簇 */
+.wf-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wf-gap, var(--wf-gap-sm));
+  justify-content: var(--wf-justify, center);
+  align-items: var(--wf-align, center);
+}
+
+/* scroll — 可滚动容器 */
+.wf-scroll {
+  overflow: auto;
+}
+
+/* clip — 裁剪溢出 */
+.wf-clip {
+  overflow: hidden;
+}
+
+/* hidden — 隐藏元素 */
+.wf-hidden {
+  display: none;
+}
+
+/* block — 块级显示 */
+.wf-block {
+  display: block;
+}
+
+/* inline — 行内显示 */
+.wf-inline {
+  display: inline;
+}
+
+/* inline-block — 行内块 */
+.wf-inline-block {
+  display: inline-block;
+}
+
+/* container — 内容宽度约束居中 */
+.wf-container {
+  max-width: var(--wf-max, 1200px);
+  margin: 0 auto;
+  padding: 0 var(--wf-gap, var(--wf-gap-lg));
+}
+
+/* contents — 容器抹除（子元素直接参与上层布局） */
+.wf-contents {
+  display: contents;
+}
+
+/* layer — 层级控制 */
+.wf-layer {
+  position: relative;
+  z-index: var(--wf-z, 1);
+}
+
+/* nowrap — 不换行 */
+.wf-nowrap {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--wf-gap, var(--wf-gap-md));
+  align-items: var(--wf-align, center);
+}
+
+/* min — flex 子项可收缩约束 */
+.wf-shrink {
+  min-width: 0;
+  min-height: 0;
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.35.1",
+  "version": "0.36.0",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {
@@ -15,7 +15,8 @@
     "./client/jsx-runtime": {
       "types": "./dist/client/index.d.ts",
       "default": "./dist/client/index.js"
-    }
+    },
+    "./layout": "./dist/layout/weifuwu-layout.css"
   },
   "files": [
     "dist/",