weifuwu 0.58.0 → 0.59.0

package/dist/layout/weifuwu-layout.css

@@ -1,6 +1,49 @@
 /* weifuwu/layout — 基于 CSS 标准的布局原语 */
 
-/* weifuwu/theme — 设计 Token */
+@layer tokens, base, layout, utilities, components;
+
+@layer tokens {
+/* weifuwu/theme — 设计 Token（Primitive + Semantic 双层）
+ *
+ * 原始层（Primitive）：色值/暗色值只定义一次。品牌换色/暗色调校只改这一层。
+ * 语义层（Semantic）：组件消费这一层。主题切换 = 覆盖语义映射（见 _dark.css）。
+ */
+
+/* ══ 原始层（Primitive）══ */
+:root {
+  /* 品牌（覆盖 --wf-brand-500 即换主题色，全站跟随） */
+  --wf-brand-500: #4f6ef7;
+  --wf-brand-600: #3b5ae0;
+  --wf-brand-50: #eef1ff;
+
+  /* 语义原始色 */
+  --wf-green-500: #22c55e;  --wf-green-50: #f0fdf4;
+  --wf-amber-500: #f59e0b;  --wf-amber-50: #fffbeb;
+  --wf-red-500: #ef4444;    --wf-red-50: #fef2f2;
+  --wf-sky-500: #1677ff;    --wf-sky-50: #e6f4ff;
+
+  /* 中性 */
+  --wf-slate-900: #0f172a;  --wf-slate-500: #64748b;  --wf-slate-400: #94a3b8;
+  --wf-slate-300: #cbd5e1;  --wf-slate-200: #e2e8f0;  --wf-slate-100: #f1f5f9;
+  --wf-slate-50: #f8fafc;   --wf-white: #ffffff;
+
+  /* 暗色值（暗色模式只做映射，值定义于此） */
+  --wf-dark-brand-500: #6b8aff;  --wf-dark-brand-600: #8ba3ff;  --wf-dark-brand-50: #1e293b;
+  --wf-dark-green-500: #4ade80;  --wf-dark-green-50: #14532d;
+  --wf-dark-amber-500: #fbbf24;  --wf-dark-amber-50: #451a03;
+  --wf-dark-red-500: #f87171;    --wf-dark-red-50: #451a1a;
+  --wf-dark-sky-500: #60a5fa;    --wf-dark-sky-50: #172554;
+  --wf-dark-slate-900: #f1f5f9;  --wf-dark-slate-500: #94a3b8;  --wf-dark-slate-400: #64748b;
+  --wf-dark-slate-300: #475569;  --wf-dark-slate-200: #334155;  --wf-dark-slate-100: #1e293b;
+  --wf-dark-slate-50: #0f172a;   --wf-dark-bg: #0f172a;
+  --wf-dark-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --wf-dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --wf-dark-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --wf-dark-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --wf-dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+}
+
+/* ══ 语义层（Semantic）— 组件消费 ══ */
 :root {
   /* ── 间距 ── */
   --wf-gap-xs: 4px;
@@ -50,31 +93,31 @@
   --wf-pop-z: var(--wf-z-popover);
   --wf-cover-z: var(--wf-z-modal);
 
-  /* ── 色彩 — 品牌 ── */
-  --wf-color-primary: #4f6ef7;
-  --wf-color-primary-hover: #3b5ae0;
-  --wf-color-primary-bg: #eef1ff;
+  /* ── 色彩 — 品牌（引用原始层） ── */
+  --wf-color-primary: var(--wf-brand-500);
+  --wf-color-primary-hover: var(--wf-brand-600);
+  --wf-color-primary-bg: var(--wf-brand-50);
 
-  --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-success: var(--wf-green-500);
+  --wf-color-success-bg: var(--wf-green-50);
+  --wf-color-warning: var(--wf-amber-500);
+  --wf-color-warning-bg: var(--wf-amber-50);
+  --wf-color-error: var(--wf-red-500);
+  --wf-color-error-bg: var(--wf-red-50);
 
-  /* ── 色彩 — 中性 ── */
-  --wf-color-text: #0f172a;
-  --wf-color-text-secondary: #64748b;
-  --wf-color-text-tertiary: #94a3b8;
-  --wf-color-text-disabled: #cbd5e1;
+  /* ── 色彩 — 中性（引用原始层） ── */
+  --wf-color-text: var(--wf-slate-900);
+  --wf-color-text-secondary: var(--wf-slate-500);
+  --wf-color-text-tertiary: var(--wf-slate-400);
+  --wf-color-text-disabled: var(--wf-slate-300);
 
-  --wf-color-bg: #ffffff;
-  --wf-color-bg-secondary: #f8fafc;
-  --wf-color-bg-tertiary: #f1f5f9;
+  --wf-color-bg: var(--wf-white);
+  --wf-color-bg-secondary: var(--wf-slate-50);
+  --wf-color-bg-tertiary: var(--wf-slate-100);
 
-  --wf-color-border: #e2e8f0;
-  --wf-color-border-light: #f1f5f9;
-  --wf-color-border-dark: #cbd5e1;
+  --wf-color-border: var(--wf-slate-200);
+  --wf-color-border-light: var(--wf-slate-100);
+  --wf-color-border-dark: var(--wf-slate-300);
 
   /* ── surface 引用色彩 ── */
   --wf-surface-bg: var(--wf-color-bg);
@@ -106,7 +149,7 @@
   /* ── 边框宽度 ── */
   --wf-border-width: 1px;
 
-  /* ── 聚焦环 ── */
+  /* ── 聚焦环（引用 primary-bg，暗色自动跟随） ── */
   --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg);
 
   /* ── 动效 ── */
@@ -115,8 +158,8 @@
   --wf-transition: var(--wf-transition-duration) var(--wf-transition-timing);
 
   /* ── 色彩 — 信息（补充） ── */
-  --wf-color-info: #1677ff;
-  --wf-color-info-bg: #e6f4ff;
+  --wf-color-info: var(--wf-sky-500);
+  --wf-color-info-bg: var(--wf-sky-50);
 
   /* ── 表单控件 ── */
   --wf-accent-color: var(--wf-color-primary);
@@ -132,6 +175,9 @@
   --wf-bp-lg: 1024px;
   --wf-bp-xl: 1280px;
 
+  /* ── 应用外壳 ── */
+  --wf-sidebar-width: 240px;
+
   /* ── 透明度 ── */
   --wf-opacity-disabled: 0.5;
   --wf-opacity-overlay: 0.4;
@@ -141,58 +187,55 @@
   --wf-letter-spacing-wide: 0.5px;
   --wf-letter-spacing-wider: 1px;
 }
+}
 
+@layer tokens {
 /* weifuwu/theme — 暗色模式
  *
  * 两种激活方式（优先级：显式 data-theme > 系统偏好）：
  *   1. 手动：<html data-theme="dark">（或 data-theme="light" 强制亮色）
  *   2. 自动：系统偏好 prefers-color-scheme: dark，无显式覆盖时生效
  *
- * ⚠️ 两段暗色覆盖值必须保持一致（静态 CSS 无法共享选择器列表，改动需同步）。
- * 每段末尾都设置 color-scheme: dark，让原生控件/滚动条跟随。
+ * 值全部定义在 _tokens.css 原始层的 --wf-dark-*，此处只做语义映射——
+ * 两段代码完全一致，且不含任何硬编码色值（改暗色调校只动原始层）。
  */
 
 /* ── 激活方式一：手动 data-theme="dark" ── */
-/* color-scheme 用 :root[data-theme] 提升优先级，压过 _base.css 的 :root 定义（导入顺序在后者） */
 :root[data-theme="dark"] {
   color-scheme: 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-primary: var(--wf-dark-brand-500);
+  --wf-color-primary-hover: var(--wf-dark-brand-600);
+  --wf-color-primary-bg: var(--wf-dark-brand-50);
 
-  --wf-color-info: #60a5fa;
-  --wf-color-info-bg: #172554;
+  --wf-color-success: var(--wf-dark-green-500);
+  --wf-color-success-bg: var(--wf-dark-green-50);
+  --wf-color-warning: var(--wf-dark-amber-500);
+  --wf-color-warning-bg: var(--wf-dark-amber-50);
+  --wf-color-error: var(--wf-dark-red-500);
+  --wf-color-error-bg: var(--wf-dark-red-50);
+  --wf-color-info: var(--wf-dark-sky-500);
+  --wf-color-info-bg: var(--wf-dark-sky-50);
 
-  --wf-color-text: #f1f5f9;
-  --wf-color-text-secondary: #94a3b8;
-  --wf-color-text-tertiary: #64748b;
-  --wf-color-text-disabled: #475569;
+  --wf-color-text: var(--wf-dark-slate-900);
+  --wf-color-text-secondary: var(--wf-dark-slate-500);
+  --wf-color-text-tertiary: var(--wf-dark-slate-400);
+  --wf-color-text-disabled: var(--wf-dark-slate-300);
 
-  --wf-color-bg: #0f172a;
-  --wf-color-bg-secondary: #1e293b;
-  --wf-color-bg-tertiary: #334155;
+  --wf-color-bg: var(--wf-dark-bg);
+  --wf-color-bg-secondary: var(--wf-dark-slate-100);
+  --wf-color-bg-tertiary: var(--wf-dark-slate-200);
 
-  --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-color-border: var(--wf-dark-slate-200);
+  --wf-color-border-light: var(--wf-dark-slate-100);
+  --wf-color-border-dark: var(--wf-dark-slate-300);
 
   --wf-surface-bg: var(--wf-color-bg);
+  --wf-surface-shadow: var(--wf-dark-surface-shadow);
+  --wf-shadow-sm: var(--wf-dark-shadow-sm);
+  --wf-shadow: var(--wf-dark-shadow);
+  --wf-shadow-md: var(--wf-dark-shadow-md);
+  --wf-shadow-lg: var(--wf-dark-shadow-lg);
 }
 
 /* ── 激活方式二：系统暗色偏好（data-theme="light" 可强制亮色） ── */
@@ -200,45 +243,43 @@
   :root:not([data-theme="light"]) {
     color-scheme: 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-primary: var(--wf-dark-brand-500);
+    --wf-color-primary-hover: var(--wf-dark-brand-600);
+    --wf-color-primary-bg: var(--wf-dark-brand-50);
 
-    --wf-color-info: #60a5fa;
-    --wf-color-info-bg: #172554;
+    --wf-color-success: var(--wf-dark-green-500);
+    --wf-color-success-bg: var(--wf-dark-green-50);
+    --wf-color-warning: var(--wf-dark-amber-500);
+    --wf-color-warning-bg: var(--wf-dark-amber-50);
+    --wf-color-error: var(--wf-dark-red-500);
+    --wf-color-error-bg: var(--wf-dark-red-50);
+    --wf-color-info: var(--wf-dark-sky-500);
+    --wf-color-info-bg: var(--wf-dark-sky-50);
 
-    --wf-color-text: #f1f5f9;
-    --wf-color-text-secondary: #94a3b8;
-    --wf-color-text-tertiary: #64748b;
-    --wf-color-text-disabled: #475569;
+    --wf-color-text: var(--wf-dark-slate-900);
+    --wf-color-text-secondary: var(--wf-dark-slate-500);
+    --wf-color-text-tertiary: var(--wf-dark-slate-400);
+    --wf-color-text-disabled: var(--wf-dark-slate-300);
 
-    --wf-color-bg: #0f172a;
-    --wf-color-bg-secondary: #1e293b;
-    --wf-color-bg-tertiary: #334155;
+    --wf-color-bg: var(--wf-dark-bg);
+    --wf-color-bg-secondary: var(--wf-dark-slate-100);
+    --wf-color-bg-tertiary: var(--wf-dark-slate-200);
 
-    --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-color-border: var(--wf-dark-slate-200);
+    --wf-color-border-light: var(--wf-dark-slate-100);
+    --wf-color-border-dark: var(--wf-dark-slate-300);
 
     --wf-surface-bg: var(--wf-color-bg);
+    --wf-surface-shadow: var(--wf-dark-surface-shadow);
+    --wf-shadow-sm: var(--wf-dark-shadow-sm);
+    --wf-shadow: var(--wf-dark-shadow);
+    --wf-shadow-md: var(--wf-dark-shadow-md);
+    --wf-shadow-lg: var(--wf-dark-shadow-lg);
   }
 }
+}
 
+@layer base {
 /* weifuwu/theme — 基础元素默认样式 */
 *,
 *::before,
@@ -429,7 +470,9 @@ code {
     scroll-behavior: auto !important;
   }
 }
+}
 
+@layer layout {
 /* stack — 纵向堆叠 */
 .wf-stack {
   display: flex;
@@ -449,7 +492,9 @@ code {
 @media (min-width: 640px) { .wf-stack-reverse\@sm { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
 @media (min-width: 768px) { .wf-stack-reverse\@md { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
 @media (min-width: 1024px) { .wf-stack-reverse\@lg { flex-direction: row-reverse; align-items: var(--wf-align, center); } }
+}
 
+@layer layout {
 /* row — 横向排列 */
 .wf-row {
   display: flex;
@@ -472,7 +517,9 @@ code {
 @media (min-width: 640px) { .wf-row-reverse\@sm { flex-direction: row-reverse; flex-wrap: wrap; } }
 @media (min-width: 768px) { .wf-row-reverse\@md { flex-direction: row-reverse; flex-wrap: wrap; } }
 @media (min-width: 1024px) { .wf-row-reverse\@lg { flex-direction: row-reverse; flex-wrap: wrap; } }
+}
 
+@layer layout {
 /* split — 两端展开 */
 .wf-split {
   display: flex;
@@ -483,7 +530,9 @@ code {
 .wf-split > :last-child {
   flex-shrink: 0;
 }
+}
 
+@layer layout {
 /* center — 居中 */
 .wf-center {
   display: flex;
@@ -491,7 +540,9 @@ code {
   align-items: center;
   justify-content: center;
 }
+}
 
+@layer layout {
 /* right — 靠右对齐 */
 .wf-right {
   display: flex;
@@ -499,28 +550,36 @@ code {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+}
 
+@layer layout {
 /* top — 顶部对齐 */
 .wf-top {
   display: flex;
   align-items: flex-start;
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+}
 
+@layer layout {
 /* bottom — 底部对齐 */
 .wf-bottom {
   display: flex;
   align-items: flex-end;
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+}
 
+@layer layout {
 /* stretch — 拉伸对齐 */
 .wf-stretch {
   display: flex;
   align-items: stretch;
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+}
 
+@layer layout {
 /* around — 均匀环绕分布 */
 .wf-around {
   display: flex;
@@ -528,7 +587,9 @@ code {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+}
 
+@layer layout {
 /* evenly — 均匀分布 */
 .wf-evenly {
   display: flex;
@@ -536,26 +597,34 @@ code {
   align-items: var(--wf-align, center);
   gap: var(--wf-gap, var(--wf-gap-md));
 }
+}
 
+@layer layout {
 /* fill — 撑满剩余空间 */
 .wf-fill {
   flex: 1;
   min-width: 0;
   min-height: 0;
 }
+}
 
+@layer layout {
 /* fixed — 固定不伸缩 */
 .wf-fixed {
   flex: none;
 }
+}
 
+@layer layout {
 /* auto — 按内容撑满 */
 .wf-auto {
   flex: auto;
   min-width: 0;
   min-height: 0;
 }
+}
 
+@layer layout {
 /* cover — 全屏覆盖 */
 .wf-cover {
   position: fixed;
@@ -565,38 +634,99 @@ code {
   justify-content: center;
   z-index: var(--wf-z, var(--wf-cover-z));
 }
+}
 
+@layer layout {
 /* pop — 浮动层 */
 .wf-pop {
   position: absolute;
   z-index: var(--wf-z, var(--wf-pop-z));
 }
+}
 
+@layer layout {
 /* anchor — 定位锚点容器 */
 .wf-anchor {
   position: relative;
 }
+}
 
+@layer layout {
 /* sticky — 粘性定位 */
 .wf-sticky {
   position: sticky;
   top: var(--wf-offset, 0);
 }
+}
+
+@layer utilities {
+/* surface — 基础面 + 面工具类（背景色/气泡/胶囊） */
 
-/* surface — 基础面 */
 .wf-surface {
   border-radius: var(--wf-surface-radius);
   box-shadow: var(--wf-surface-shadow);
   background: var(--wf-surface-bg);
 }
 
+/* ── 背景色工具 — 引用语义 Token，免自定义 CSS ── */
+.wf-bg-secondary { background: var(--wf-color-bg-secondary); }
+.wf-bg-tertiary { background: var(--wf-color-bg-tertiary); }
+.wf-bg-brand { background: var(--wf-color-primary-bg); } /* 兼容别名 → wf-bg-primary */
+.wf-bg-primary { background: var(--wf-color-primary-bg); }
+.wf-bg-success { background: var(--wf-color-success-bg); }
+.wf-bg-warning { background: var(--wf-color-warning-bg); }
+.wf-bg-error { background: var(--wf-color-error-bg); }
+.wf-bg-info { background: var(--wf-color-info-bg); }
+
+/* ── 胶囊圆角（状态徽章/标签/色块） ── */
+.wf-pill { border-radius: 999px; }
+
+/* ── 圆角工具 — 引用圆角 Token ── */
+.wf-rounded-sm { border-radius: var(--wf-radius-sm); }
+.wf-rounded { border-radius: var(--wf-radius); }
+.wf-rounded-md { border-radius: var(--wf-radius-md); }
+.wf-rounded-lg { border-radius: var(--wf-radius-lg); }
+
+/* ── 聊天气泡 ──
+ * 用法：wf-bubble（对方/AI）+ wf-bubble--own（自己）
+ * 行布局用 wf-row + wf-gap/wf-mb 覆盖；文字用 wf-pre-wrap 已内建
+ */
+.wf-bubble {
+  display: inline-block;
+  max-width: 70%;
+  padding: var(--wf-space-sm) var(--wf-space-md);
+  border-radius: var(--wf-radius-md);
+  background: var(--wf-color-bg-secondary);
+  color: var(--wf-color-text);
+  font-size: var(--wf-font-size-base);
+  line-height: var(--wf-line-height);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.wf-bubble--own {
+  background: var(--wf-color-primary);
+  color: #fff;
+  border-bottom-right-radius: var(--wf-radius-sm);
+}
+
+.wf-bubble--ai {
+  background: var(--wf-color-primary-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border-light);
+  border-bottom-left-radius: var(--wf-radius-sm);
+}
+}
+
+@layer layout {
 /* 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));
 }
+}
 
+@layer layout {
 /* cluster — 换行簇 */
 .wf-cluster {
   display: flex;
@@ -605,17 +735,23 @@ code {
   justify-content: var(--wf-justify, center);
   align-items: var(--wf-align, center);
 }
+}
 
+@layer layout {
 /* scroll — 可滚动容器 */
 .wf-scroll {
   overflow: auto;
 }
+}
 
+@layer layout {
 /* clip — 裁剪溢出 */
 .wf-clip {
   overflow: hidden;
 }
+}
 
+@layer utilities {
 /* hidden — 隐藏元素 */
 .wf-hidden {
   display: none;
@@ -624,6 +760,23 @@ code {
 @media (min-width: 768px) { .wf-hidden\@md { display: none; } }
 @media (min-width: 1024px) { .wf-hidden\@lg { display: none; } }
 
+/* dim — 视觉淡化（运行中/历史态/次要操作） */
+.wf-dim {
+  opacity: 0.7;
+}
+
+/* cursor — 交互指针 */
+.wf-pointer { cursor: pointer; }
+.wf-not-allowed { cursor: not-allowed; }
+
+/* 打印工具 — 导出 PDF 时隐藏工具区 / 恢复块级 */
+@media print {
+  .wf-print-hidden { display: none !important; }
+  .wf-print-block { display: block !important; }
+}
+}
+
+@layer layout {
 /* block — 块级显示 */
 .wf-block {
   display: block;
@@ -631,35 +784,47 @@ code {
 @media (min-width: 640px) { .wf-block\@sm { display: block; } }
 @media (min-width: 768px) { .wf-block\@md { display: block; } }
 @media (min-width: 1024px) { .wf-block\@lg { display: block; } }
+}
 
+@layer layout {
 /* inline — 行内显示 */
 .wf-inline {
   display: inline;
 }
+}
 
+@layer layout {
 /* inline-block — 行内块 */
 .wf-inline-block {
   display: inline-block;
 }
+}
 
+@layer layout {
 /* container — 内容宽度约束居中 */
 .wf-container {
   max-width: var(--wf-max, 1200px);
   margin: 0 auto;
   padding: 0 var(--wf-gap, var(--wf-gap-lg));
 }
+}
 
+@layer layout {
 /* contents — 容器抹除（子元素直接参与上层布局） */
 .wf-contents {
   display: contents;
 }
+}
 
+@layer layout {
 /* layer — 层级控制 */
 .wf-layer {
   position: relative;
   z-index: var(--wf-z, 1);
 }
+}
 
+@layer layout {
 /* nowrap — 不换行 */
 .wf-nowrap {
   display: flex;
@@ -667,13 +832,244 @@ code {
   gap: var(--wf-gap, var(--wf-gap-md));
   align-items: var(--wf-align, center);
 }
+}
 
+@layer layout {
 /* min — flex 子项可收缩约束 */
 .wf-shrink {
   min-width: 0;
   min-height: 0;
 }
+}
+
+@layer utilities {
+/* 间距/尺寸工具类 — 全部引用 --wf-* Token，无硬编码
+ *
+ * 命名：wf-p(adding)/wf-m(argin)[x|y|t|b] + 刻度(xs sm md lg xl 2xl)
+ * 与 flex 原语协作：wf-gap-* 设置 --wf-gap 变量（stack/row/split 等读取）
+ */
+
+/* ── padding ── */
+.wf-p-xs { padding: var(--wf-space-xs); }
+.wf-p-sm { padding: var(--wf-space-sm); }
+.wf-p-md { padding: var(--wf-space-md); }
+.wf-p-lg { padding: var(--wf-space-lg); }
+.wf-p-xl { padding: var(--wf-space-xl); }
+.wf-p-2xl { padding: var(--wf-space-2xl); }
+
+/* ── padding: 水平/垂直 ── */
+.wf-px-xs { padding-left: var(--wf-space-xs); padding-right: var(--wf-space-xs); }
+.wf-px-sm { padding-left: var(--wf-space-sm); padding-right: var(--wf-space-sm); }
+.wf-px-md { padding-left: var(--wf-space-md); padding-right: var(--wf-space-md); }
+.wf-px-lg { padding-left: var(--wf-space-lg); padding-right: var(--wf-space-lg); }
+.wf-px-xl { padding-left: var(--wf-space-xl); padding-right: var(--wf-space-xl); }
+.wf-px-2xl { padding-left: var(--wf-space-2xl); padding-right: var(--wf-space-2xl); }
+
+.wf-py-xs { padding-top: var(--wf-space-xs); padding-bottom: var(--wf-space-xs); }
+.wf-py-sm { padding-top: var(--wf-space-sm); padding-bottom: var(--wf-space-sm); }
+.wf-py-md { padding-top: var(--wf-space-md); padding-bottom: var(--wf-space-md); }
+.wf-py-lg { padding-top: var(--wf-space-lg); padding-bottom: var(--wf-space-lg); }
+.wf-py-xl { padding-top: var(--wf-space-xl); padding-bottom: var(--wf-space-xl); }
+.wf-py-2xl { padding-top: var(--wf-space-2xl); padding-bottom: var(--wf-space-2xl); }
+
+/* ── margin：重置 ── */
+.wf-m-0 { margin: 0; }
+.wf-p-0 { padding: 0; }
+
+/* ── margin（高频方向：top / bottom / 垂直） ── */
+.wf-mt-xs { margin-top: var(--wf-space-xs); }
+.wf-mt-sm { margin-top: var(--wf-space-sm); }
+.wf-mt-md { margin-top: var(--wf-space-md); }
+.wf-mt-lg { margin-top: var(--wf-space-lg); }
+.wf-mt-xl { margin-top: var(--wf-space-xl); }
+.wf-mt-2xl { margin-top: var(--wf-space-2xl); }
+
+.wf-mb-xs { margin-bottom: var(--wf-space-xs); }
+.wf-mb-sm { margin-bottom: var(--wf-space-sm); }
+.wf-mb-md { margin-bottom: var(--wf-space-md); }
+.wf-mb-lg { margin-bottom: var(--wf-space-lg); }
+.wf-mb-xl { margin-bottom: var(--wf-space-xl); }
+.wf-mb-2xl { margin-bottom: var(--wf-space-2xl); }
+
+.wf-my-xs { margin-top: var(--wf-space-xs); margin-bottom: var(--wf-space-xs); }
+.wf-my-sm { margin-top: var(--wf-space-sm); margin-bottom: var(--wf-space-sm); }
+.wf-my-md { margin-top: var(--wf-space-md); margin-bottom: var(--wf-space-md); }
+.wf-my-lg { margin-top: var(--wf-space-lg); margin-bottom: var(--wf-space-lg); }
+.wf-my-xl { margin-top: var(--wf-space-xl); margin-bottom: var(--wf-space-xl); }
+.wf-my-2xl { margin-top: var(--wf-space-2xl); margin-bottom: var(--wf-space-2xl); }
+
+/* ── margin: auto（居中） ── */
+.wf-mx-auto { margin-left: auto; margin-right: auto; }
+.wf-my-auto { margin-top: auto; margin-bottom: auto; }
+
+/* ── gap：为 flex/grid 原语设置间距变量 ── */
+.wf-gap-none { --wf-gap: 0; }
+.wf-gap-xs { --wf-gap: var(--wf-gap-xs); }
+.wf-gap-sm { --wf-gap: var(--wf-gap-sm); }
+.wf-gap-md { --wf-gap: var(--wf-gap-md); }
+.wf-gap-lg { --wf-gap: var(--wf-gap-lg); }
+.wf-gap-xl { --wf-gap: var(--wf-gap-xl); }
+.wf-gap-2xl { --wf-gap: var(--wf-gap-2xl); }
+
+/* ── 尺寸 ── */
+.wf-w-full { width: 100%; }
+.wf-h-full { height: 100%; }
+.wf-w-auto { width: auto; }
+}
+
+@layer layout {
+/* 应用外壳 — 侧边栏 + 主内容区
+ *
+ * 结构约定（应用层 AppLayout 组件使用）：
+ *   wf-app-shell > [wf-sidebar, wf-main]
+ *   wf-sidebar   > [wf-sidebar-header(品牌), wf-sidebar-body(wf-nav), wf-sidebar-footer(用户区)]
+ *   wf-nav       > wf-nav-group(分组标题) / wf-nav-item(链接，--active 激活)
+ *
+ * 移动端（<768px）降级：侧边栏堆叠到顶部、静态定位、主区占满。
+ * 交互式折叠抽屉属应用层职责（需 JS 开关），layout 只提供静态外壳。
+ */
+
+.wf-app-shell {
+  display: grid;
+  grid-template-columns: var(--wf-sidebar-width, 240px) minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+/* ── 侧边栏 ── */
+.wf-sidebar {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  background: var(--wf-color-bg-secondary);
+  border-right: var(--wf-border-width) solid var(--wf-color-border);
+}
+
+.wf-sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-md);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border-light);
+  flex-shrink: 0;
+}
+
+.wf-sidebar-body {
+  flex: 1;
+  padding: var(--wf-space-sm);
+  overflow-y: auto;
+}
+
+.wf-sidebar-footer {
+  padding: var(--wf-space-sm);
+  border-top: var(--wf-border-width) solid var(--wf-color-border-light);
+  flex-shrink: 0;
+}
+
+/* ── 导航 ── */
+.wf-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wf-nav-group {
+  font-size: var(--wf-font-size-xs);
+  font-weight: var(--wf-font-weight-medium);
+  color: var(--wf-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: var(--wf-space-md) var(--wf-space-sm) var(--wf-space-xs);
+}
+
+.wf-nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  padding: var(--wf-space-sm) var(--wf-space);
+  border-radius: var(--wf-radius);
+  color: var(--wf-color-text-secondary);
+  font-size: var(--wf-font-size-base);
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+  transition: background var(--wf-transition), color var(--wf-transition);
+}
+
+.wf-nav-item:hover {
+  background: var(--wf-color-bg-tertiary);
+  color: var(--wf-color-text);
+  text-decoration: none;
+}
+
+.wf-nav-item:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-nav-item--active {
+  background: var(--wf-color-primary-bg);
+  color: var(--wf-color-primary);
+  font-weight: var(--wf-font-weight-medium);
+}
+
+.wf-nav-item--active:hover {
+  background: var(--wf-color-primary-bg);
+  color: var(--wf-color-primary);
+}
+
+.wf-nav-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+/* ── 主内容区 ── */
+.wf-main {
+  padding: var(--wf-space-lg);
+  min-width: 0;
+  background: var(--wf-color-bg);
+}
+
+/* ── 触屏：导航项 44px 命中区 ── */
+@media (pointer: coarse) {
+  .wf-nav-item {
+    min-height: 44px;
+  }
+}
 
+/* ── 移动端：堆叠降级 ── */
+@media (max-width: 767.98px) {
+  .wf-app-shell {
+    grid-template-columns: 1fr;
+  }
+  .wf-sidebar {
+    position: static;
+    height: auto;
+    border-right: none;
+    border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  }
+  .wf-main {
+    padding: var(--wf-space-md);
+  }
+}
+}
+
+@layer utilities {
+/* 边框工具类 — 全部引用 --wf-border-width / --wf-color-border */
+.wf-border { border: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-t { border-top: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-b { border-bottom: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-l { border-left: var(--wf-border-width) solid var(--wf-color-border); }
+.wf-border-r { border-right: var(--wf-border-width) solid var(--wf-color-border); }
+}
+
+@layer utilities {
 /* 排版工具类 — 字号 / 色阶 / 字重 / 截断（零 CSS 用户自排版） */
 
 /* ── text-align ── */
@@ -707,7 +1103,12 @@ code {
 .wf-text-secondary { color: var(--wf-color-text-secondary); }
 .wf-text-tertiary { color: var(--wf-color-text-tertiary); }
 .wf-text-disabled { color: var(--wf-color-text-disabled); }
-.wf-text-brand { color: var(--wf-color-primary); }
+.wf-text-brand { color: var(--wf-color-primary); } /* 兼容别名 → wf-text-primary */
+.wf-text-primary { color: var(--wf-color-primary); }
+.wf-text-success { color: var(--wf-color-success); }
+.wf-text-warning { color: var(--wf-color-warning); }
+.wf-text-error { color: var(--wf-color-error); }
+.wf-text-info { color: var(--wf-color-info); }
 
 /* ── 字重 ── */
 
@@ -715,6 +1116,40 @@ code {
 .wf-text-semibold { font-weight: var(--wf-font-weight-semibold); }
 .wf-text-bold { font-weight: var(--wf-font-weight-bold); }
 
+/* ── 行高 ── */
+
+.wf-leading-tight { line-height: var(--wf-line-height-tight); }
+.wf-leading-base { line-height: var(--wf-line-height); }
+.wf-leading-relaxed { line-height: var(--wf-line-height-relaxed); }
+
+/* ── 字距 ── */
+
+.wf-tracking-normal { letter-spacing: var(--wf-letter-spacing); }
+.wf-tracking-wide { letter-spacing: var(--wf-letter-spacing-wide); }
+.wf-tracking-wider { letter-spacing: var(--wf-letter-spacing-wider); }
+
+/* ── 文本变换 ── */
+
+.wf-uppercase { text-transform: uppercase; }
+.wf-lowercase { text-transform: lowercase; }
+.wf-capitalize { text-transform: capitalize; }
+
+/* ── 换行/折行 ── */
+
+.wf-pre-wrap {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.wf-break-word {
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.wf-text-nowrap {
+  white-space: nowrap;
+}
+
 /* ── 截断 ── */
 
 .wf-truncate {
@@ -736,3 +1171,114 @@ code {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+}
+
+@layer utilities {
+/* prose — 富文本正文排版（文章/博客/文档渲染，一个类包全部）
+ *
+ * 用法：<article class="wf-prose">…markdown/富文本 HTML…</article>
+ * 覆盖：h2-h4 / p / ul / ol / li / blockquote / pre / code / a / img / table / hr / strong
+ */
+
+.wf-prose {
+  font-size: var(--wf-font-size-base);
+  line-height: var(--wf-line-height-relaxed);
+  color: var(--wf-color-text);
+}
+
+.wf-prose h2 {
+  font-size: var(--wf-font-size-2xl);
+  font-weight: var(--wf-font-weight-semibold);
+  line-height: var(--wf-line-height-tight);
+  margin: var(--wf-space-xl) 0 var(--wf-space-md);
+}
+
+.wf-prose h3 {
+  font-size: var(--wf-font-size-xl);
+  font-weight: var(--wf-font-weight-semibold);
+  line-height: var(--wf-line-height-tight);
+  margin: var(--wf-space-lg) 0 var(--wf-space-sm);
+}
+
+.wf-prose h4 {
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-semibold);
+  margin: var(--wf-space-md) 0 var(--wf-space-sm);
+}
+
+.wf-prose p {
+  margin: 0 0 var(--wf-space-md);
+  line-height: var(--wf-line-height-relaxed);
+}
+
+.wf-prose ul,
+.wf-prose ol {
+  margin: 0 0 var(--wf-space-md);
+  padding-left: var(--wf-space-lg);
+}
+
+.wf-prose li {
+  margin: var(--wf-space-xs) 0;
+  line-height: var(--wf-line-height-relaxed);
+}
+
+.wf-prose blockquote {
+  margin: 0 0 var(--wf-space-md);
+  padding: var(--wf-space-xs) var(--wf-space-md);
+  border-left: 3px solid var(--wf-color-primary);
+  background: var(--wf-color-primary-bg);
+  border-radius: var(--wf-radius);
+  color: var(--wf-color-text-secondary);
+}
+
+.wf-prose pre {
+  margin: 0 0 var(--wf-space-md);
+  padding: var(--wf-space-md);
+  background: var(--wf-color-bg-tertiary);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.wf-prose code {
+  background: var(--wf-color-bg-tertiary);
+  padding: 2px 6px;
+  border-radius: var(--wf-radius-sm);
+}
+
+.wf-prose pre code {
+  background: none;
+  padding: 0;
+}
+
+.wf-prose a {
+  color: var(--wf-color-primary);
+  text-decoration: none;
+}
+
+.wf-prose a:hover {
+  text-decoration: underline;
+}
+
+.wf-prose img {
+  max-width: 100%;
+  border-radius: var(--wf-radius-md);
+}
+
+.wf-prose hr {
+  margin: var(--wf-space-lg) 0;
+}
+
+.wf-prose strong {
+  font-weight: var(--wf-font-weight-semibold);
+}
+
+.wf-prose > :first-child {
+  margin-top: 0;
+}
+
+.wf-prose > :last-child {
+  margin-bottom: 0;
+}
+}