Просмотр исходного кода

docs(首页改造): 设计稿入库 + 计划文档补齐裁定

- 新入库 cfc-frontend/design/cfc-home-redesign.html(单文件设计稿,四门禁全绿,390px 手机画布)
- 补记主理人裁定:§4.3 禁用态淡出已移除+pointer-events;§10 富/智按周口径落地
Agnes Agent 2 недель назад
Родитель
Сommit
0b86c0e88c
2 измененных файлов с 1858 добавлено и 2 удалено
  1. 1846 0
      cfc-frontend/design/cfc-home-redesign.html
  2. 12 2
      docs/2026-10-27-index-home-redesign-plan.md

+ 1846 - 0
cfc-frontend/design/cfc-home-redesign.html

@@ -0,0 +1,1846 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>浠艾福 · 首页家庭总览重设计(设计稿)</title>
+<style>
+/* ============================================================
+   浠艾福(CFC)首页家庭总览 · 设计稿
+   令牌三层:基色层 primitive 到 语义层 semantic 再到 组件层 component
+   品牌色锚定 uni.scss:brand-primary 系、五维 dim-* 五色
+   全部色值只在 :root 定义,组件一律 var(--…) 引用
+   ============================================================ */
+:root {
+  /* ---------- 基色层 · 品牌橙(沿用 uni.scss $brand-* 与 $uni-primary*) ---------- */
+  --orange-50:  #FFF7ED;
+  --orange-100: #FFEDD5;
+  --orange-200: #FBE3CC;
+  --orange-300: #FDBA74;
+  --orange-500: #F97316;   /* 品牌主色(tabBar.selectedColor 真值,仅装饰用) */
+  --orange-600: #EA580C;
+  --orange-700: #C2410C;
+  --orange-800: #9A3412;
+  --orange-900: #7C2D12;
+
+  /* ---------- 基色层 · 五维身份色(沿用 uni.scss §12 $dim-* / $dim-*-tint) ---------- */
+  --dim-body:        #C2703D;   /* 赭石橙 装饰用途 不承文字 */
+  --dim-body-deep:   #9C4A1A;   /* 赭石深档 承载 badge 文字 */
+  --dim-body-tint:   #FBF3EC;   /* 暖灰棕底 deep-on-tint 达标 */
+  --dim-wisdom:      #6366F1;
+  --dim-wisdom-deep: #4338CA;
+  --dim-wisdom-tint: #F0F0FF;
+  --dim-wealth:      #F59E0B;
+  --dim-wealth-deep: #92400E;
+  --dim-wealth-tint: #FFFBEB;
+  --dim-action:      #10B981;
+  --dim-action-deep: #047857;
+  --dim-action-tint: #F0FFF4;
+  --dim-mind:        #FF6B9D;
+  --dim-mind-deep:   #9D174D;
+  --dim-mind-tint:   #FFF0F5;
+
+  /* ---------- 基色层 · 五行元素色(能量沙盘 沿用 uni.scss 三档:主色/承文字/浅底) ---------- */
+  /* 五行到五维映射:全站统一到 $dim-* 五维身份色(主理人裁定 2026-10-27)
+     火=心 金=智 水=富 木=行 土=身;五行语义由顶点图标形状(火焰/山/闪电/水滴/叶)承载 */
+  --el-fire:        var(--dim-mind);
+  --el-fire-ink:    var(--dim-mind-deep);
+  --el-fire-tint:   var(--dim-mind-tint);
+  --el-earth:       var(--dim-body);       /* 土 身 */
+  --el-earth-ink:   var(--dim-body-deep);
+  --el-earth-tint:  var(--dim-body-tint);
+  --el-metal:       var(--dim-wisdom);
+  --el-metal-ink:   var(--dim-wisdom-deep);
+  --el-metal-tint:  var(--dim-wisdom-tint);
+  --el-water:       var(--dim-wealth);
+  --el-water-ink:   var(--dim-wealth-deep);
+  --el-water-tint:  var(--dim-wealth-tint);
+  --el-wood:        var(--dim-action);
+  --el-wood-ink:    var(--dim-action-deep);
+  --el-wood-tint:   var(--dim-action-tint);
+
+  /* ---------- 基色层 · 暖中性阶(替代纯白纯黑;呼应页面底 #F8F8F8 约定) ---------- */
+  --warm-0:   #FFFDFB;
+  --warm-50:  #FAF7F1;
+  --warm-100: #F4EEE5;
+  --warm-200: #E8E0D4;
+  --warm-300: #D8CDBC;
+  --ink-100:  #3A2E24;
+  --ink-80:   #5C4F43;
+  --ink-60:   #6E5F51;
+  --stage-bg: #E9E2D5;
+
+  /* ---------- 基色层 · 状态色(只承担语义,不当装饰) ---------- */
+  --ok-ink:      #166534;
+  --ok-tint:     #F0FFF4;
+  --warn-ink:    #92400E;
+  --warn-tint:   #FFFBEB;
+  --danger-ink:  #B91C1C;
+  --danger-tint: #FEF2F2;
+  --info-ink:    #1E3A8A;
+  --info-tint:   #F0F0FF;
+
+  /* ---------- 语义层 · 表面与文字 ---------- */
+  --bg-page:      var(--warm-50);
+  --surface:      var(--warm-0);
+  --surface-2:    var(--warm-100);
+  --line:         var(--warm-200);  /* 装饰分隔线 不承担控件识别 */
+  --line-strong:  var(--warm-300);  /* 装饰分隔线 不承担控件识别 */
+  --line-control: #8E7C60;   /* 交互控件边界专用 须 3:1(复选框 按钮 开关) */
+  --text:         var(--ink-100);
+  --text-2:       var(--ink-80);
+  --text-3:       var(--ink-60);
+  --on-accent:    #FFFDFB;
+
+  /* 语义层 · 动作(品牌橙的可读用法:承载语义一律用深档) */
+  --accent:        var(--orange-700);
+  --accent-strong: var(--orange-800);
+  --accent-soft:   var(--orange-50);
+  --accent-soft-2: var(--orange-100);
+  --accent-mid:    var(--orange-600);
+  --brand-mark:    var(--orange-500);
+  --focus:         var(--orange-600);
+
+  /* 语义层 · 主角色带(hero) */
+  --hero-top:  #FFF9F2;
+  --hero-bot:  #FFEFDF;
+  --hero-line: #F7E1C9;
+
+  /* 语义层 · 能量沙盘星图 */
+  --star-h:       244px;
+  --star-grid:    #948264;   /* 网格线须同时对暖白底与多边形填充达标 */
+  --star-fill:    #FCE7CE;
+  --star-stroke:  var(--accent);
+  --star-disc:    #FFFDFB;   /* 星心隔离盘 把数字从辐条汇聚点抬出来 */
+  --star-disc-w:  56px;
+  --star-glow-in:  rgba(154, 52, 18, 0.17);
+  --star-glow-out: rgba(154, 52, 18, 0);
+
+  /* ---------- 间距(兼容 uni.scss --space-xs/sm/md/lg/xl/page 4·8·12·16·24·16) ---------- */
+  --s-1: 4px;
+  --s-2: 8px;
+  --s-3: 12px;
+  --s-4: 16px;
+  --s-5: 20px;
+  --s-6: 24px;
+  --s-7: 28px;
+  --s-8: 32px;
+  --s-9: 40px;
+  --s-10: 48px;
+  --page-pad: 16px;
+
+  /* ---------- 圆角(沿用已收敛 4 档:8/16/24/999rpx ≈ 4/8/12/pill) ---------- */
+  --r-xs: 4px;
+  --r-sm: 8px;
+  --r-md: 12px;
+  --r-pill: 999px;
+
+  /* ---------- 尺寸(触控 44、图标档、画布) ---------- */
+  --hairline: 1px;
+  --focus-w: 2px;
+  --focus-offset: 2px;
+  --icon-sm: 16px;
+  --icon-md: 20px;
+  --icon-lg: 24px;
+  --tile-sm: 26px;
+  --tile-md: 32px;
+  --avatar: 26px;
+  --tap: 44px;
+  --canvas-w: 390px;
+  --screen-h: 812px;
+  --statusbar-h: 30px;
+  --tabbar-h: 52px;
+  --safe-b: 20px;
+
+  /* ---------- 字体 ---------- */
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
+  --fs-10: 10px;
+  --fs-11: 11px;
+  --fs-12: 12px;
+  --fs-13: 13px;
+  --fs-14: 14px;
+  --fs-15: 15px;
+  --fs-16: 16px;
+  --fs-18: 18px;
+  --fs-22: 22px;
+  --fs-34: 34px;
+  --lh-tight: 1.25;
+  --lh-body: 1.55;
+
+  /* ---------- 动效(只用 transform / opacity) ---------- */
+  --dur-1: 120ms;
+  --dur-2: 200ms;
+  --dur-3: 260ms;
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ---------- 阴影(分层且罕见:只有主角带与设备外框有投影) ---------- */
+  --shadow-hero: 0 10px 28px rgba(154, 52, 18, 0.10);
+  --shadow-device: 0 24px 60px rgba(60, 45, 30, 0.16);
+
+  /* ---------- 状态令牌 ---------- */
+  --opacity-disabled: 0.45;
+  --opacity-press: 0.88;
+}
+
+/* ============================ 基础 ============================ */
+* { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  background: var(--stage-bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: var(--fs-14);
+  line-height: var(--lh-body);
+  -webkit-font-smoothing: antialiased;
+}
+
+button { font-family: inherit; color: inherit; }
+
+a { color: var(--accent); text-decoration: none; }
+
+ul, ol { margin: 0; padding: 0; list-style: none; }
+
+h1, h2, h3, p { margin: 0; }
+
+svg { display: block; }
+
+.sr-only {
+  position: absolute;
+  width: var(--hairline);
+  height: var(--hairline);
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* 统一的键盘焦点环:2px 实心 + 2px 外距,对暖白底 3.3:1 */
+:focus-visible {
+  outline: var(--focus-w) solid var(--focus);
+  outline-offset: var(--focus-offset);
+}
+
+/* ============================ 设计说明条(不计入手机画布) ============================ */
+.doc {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: var(--s-8) var(--s-4) var(--s-10);
+}
+
+.doc-head {
+  background: var(--surface);
+  border: var(--hairline) solid var(--line);
+  border-radius: var(--r-md);
+  padding: var(--s-6);
+}
+
+.doc-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--s-3);
+}
+
+.doc-title {
+  font-size: var(--fs-22);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.doc-tag {
+  font-size: var(--fs-12);
+  color: var(--text-3);
+  background: var(--surface-2);
+  border-radius: var(--r-pill);
+  padding: var(--s-1) var(--s-3);
+}
+
+.doc-desc {
+  margin-top: var(--s-2);
+  font-size: var(--fs-13);
+  color: var(--text-2);
+  max-width: 62ch;
+}
+
+.doc-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-3);
+  margin-top: var(--s-5);
+}
+
+.doc-card {
+  flex: 1 1 240px;
+  background: var(--bg-page);
+  border: var(--hairline) solid var(--line);
+  border-radius: var(--r-sm);
+  padding: var(--s-4);
+}
+
+.doc-card h2 {
+  font-size: var(--fs-12);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--accent);
+  margin-bottom: var(--s-2);
+}
+
+.doc-card p,
+.doc-card li {
+  font-size: var(--fs-12);
+  color: var(--text-2);
+  line-height: 1.7;
+}
+
+.doc-card ul { display: flex; flex-direction: column; gap: var(--s-1); }
+
+.sw-line {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-size: var(--fs-11);
+  color: var(--text-2);
+}
+
+.sw {
+  width: var(--s-4);
+  height: var(--s-4);
+  border-radius: var(--r-xs);
+  border: var(--hairline) solid var(--line-strong);
+  flex: none;
+}
+
+.doc-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-3);
+  margin-top: var(--s-5);
+  padding-top: var(--s-4);
+  border-top: var(--hairline) solid var(--line);
+}
+
+.doc-controls-label {
+  font-size: var(--fs-12);
+  color: var(--text-3);
+}
+
+.switch {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-2);
+}
+
+.switch button {
+  min-height: var(--tap);
+  padding: 0 var(--s-3);
+  font-size: var(--fs-12);
+  background: var(--surface);
+  border: var(--hairline) solid var(--line-control);
+  border-radius: var(--r-pill);
+  color: var(--text-2);
+  cursor: pointer;
+  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
+}
+
+.switch button:hover { background: var(--accent-soft); border-color: var(--accent-soft-2); }
+
+.switch button:active { transform: scale(0.97); }
+
+.switch button.is-on {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+
+/* 八态陈列 */
+.btn-states {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-2);
+  width: 100%;
+}
+
+.btn-state-demo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s-1);
+}
+
+.btn-state-demo span {
+  font-size: var(--fs-12);
+  color: var(--text-2);
+}
+
+.doc-foot {
+  margin-top: var(--s-6);
+  padding-top: var(--s-4);
+  border-top: var(--hairline) solid var(--line);
+  font-size: var(--fs-11);
+  color: var(--text-3);
+}
+
+/* ============================ 手机画布 ============================ */
+.stage {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--s-7);
+}
+
+.phone {
+  width: var(--canvas-w);
+  max-width: 100%;
+  height: var(--screen-h);
+  background: var(--bg-page);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-device);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.statusbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--statusbar-h);
+  padding: 0 var(--s-5);
+  font-size: var(--fs-10);
+  color: var(--text-2);
+  flex: none;
+}
+
+.statusbar-time { font-weight: 600; letter-spacing: 0.02em; }
+
+.statusbar-icons { display: flex; align-items: center; gap: var(--s-1); }
+
+.statusbar-icons svg { width: var(--fs-12); height: var(--fs-12); color: var(--text-2); }
+
+.screen {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+}
+
+.page {
+  padding: 0 var(--page-pad) var(--s-10);
+}
+
+/* ============================ 一 · 问候条 ============================ */
+.greet { padding-top: var(--s-2); }
+
+.greet-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-3);
+}
+
+.family { display: flex; align-items: center; gap: var(--s-2); }
+
+.avatars { display: flex; align-items: center; }
+
+.avatar {
+  width: var(--avatar);
+  height: var(--avatar);
+  border-radius: var(--r-pill);
+  background: var(--accent-soft-2);
+  border: var(--hairline) solid var(--surface);
+  color: var(--accent-strong);
+  font-size: var(--fs-11);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: calc(var(--s-2) * -1);
+}
+
+.avatar:first-child { margin-left: 0; }
+
+.avatar--b { background: var(--dim-wisdom-tint); color: var(--dim-wisdom-deep); }
+.avatar--c { background: var(--dim-action-tint); color: var(--dim-action-deep); }
+.avatar--d { background: var(--surface-2); color: var(--text-2); }
+
+.family-meta { display: flex; flex-direction: column; line-height: var(--lh-tight); }
+
+.family-name { font-size: var(--fs-13); font-weight: 600; }
+
+.family-sub { font-size: var(--fs-11); color: var(--text-3); }
+
+.icon-btn {
+  width: var(--tap);
+  height: var(--tap);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--hairline) solid var(--line);
+  background: var(--surface);
+  border-radius: var(--r-pill);
+  color: var(--text-2);
+  cursor: pointer;
+  position: relative;
+  transition: background-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
+}
+
+.icon-btn svg { width: var(--icon-md); height: var(--icon-md); }
+
+.icon-btn:hover { background: var(--accent-soft); }
+
+.icon-btn:active { transform: scale(0.94); }
+
+.icon-btn[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
+
+.bell-badge {
+  position: absolute;
+  top: var(--s-2);
+  right: var(--s-2);
+  min-width: var(--icon-sm);
+  height: var(--icon-sm);
+  padding: 0 var(--s-1);
+  border-radius: var(--r-pill);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--fs-10);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.greet-title {
+  margin-top: var(--s-4);
+  font-size: var(--fs-22);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--text);
+  max-width: 20ch;
+}
+
+.greet-line {
+  margin-top: var(--s-1);
+  font-size: var(--fs-14);
+  color: var(--text-2);
+  max-width: 30ch;
+}
+
+/* ============================ 二 · 五维状态主角带 ============================ */
+.hero {
+  margin-top: var(--s-5);
+  background: linear-gradient(170deg, var(--hero-top) 0%, var(--hero-bot) 100%);
+  border: var(--hairline) solid var(--hero-line);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-hero);
+  padding: var(--s-4) var(--s-4) var(--s-2);
+}
+
+.hero-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--s-3);
+}
+
+.hero-kicker {
+  font-size: var(--fs-12);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+}
+
+.hero-note {
+  margin-top: var(--s-1);
+  font-size: var(--fs-11);
+  color: var(--text-3);
+}
+
+.dims { display: flex; flex-direction: column; margin-top: var(--s-3); }
+
+.dim {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) 0;
+  border-top: var(--hairline) solid var(--hero-line);
+}
+
+.dim-badge {
+  width: var(--tile-sm);
+  height: var(--tile-sm);
+  border-radius: var(--r-pill);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+
+.dim-badge svg { width: var(--icon-sm); height: var(--icon-sm); }
+
+/* 状态行徽章沿用已定稿 $dim-*(评审第 6 条两套类目色方向未拍板 保持基线待定) */
+.dim-badge--body { background: var(--dim-body-tint); color: var(--dim-body-deep); }
+.dim-badge--wisdom { background: var(--dim-wisdom-tint); color: var(--dim-wisdom-deep); }
+.dim-badge--wealth { background: var(--dim-wealth-tint); color: var(--dim-wealth-deep); }
+.dim-badge--action { background: var(--dim-action-tint); color: var(--dim-action-deep); }
+.dim-badge--mind { background: var(--dim-mind-tint); color: var(--dim-mind-deep); }
+
+.dim-main { flex: 1; display: flex; flex-direction: column; gap: calc(var(--s-1) / 2); min-width: 0; }
+
+.dim-name { font-size: var(--fs-14); font-weight: 600; color: var(--text); }
+
+.dim-detail { font-size: var(--fs-11); color: var(--text-3); }
+
+/* 状态词 chip:文字 + 底色,颜色不是唯一指示 */
+.chip {
+  flex: none;
+  font-size: var(--fs-11);
+  font-weight: 600;
+  padding: calc(var(--s-1) / 2) var(--s-2);
+  border-radius: var(--r-pill);
+  white-space: nowrap;
+}
+
+.chip--ok { background: var(--ok-tint); color: var(--ok-ink); }
+.chip--warn { background: var(--warn-tint); color: var(--warn-ink); }
+.chip--info { background: var(--info-tint); color: var(--info-ink); }
+.chip--muted { background: var(--surface-2); color: var(--text-2); }
+
+/* ============================ 能量沙盘(星图为主角 · 状态行读数) ============================ */
+/* 品牌头:logo + 标题 + 个人/全家切换(live 模式) */
+.sandbox-brand { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
+
+.sandbox-logo {
+  flex: none;
+  width: var(--tile-sm);
+  height: var(--tile-sm);
+  border-radius: var(--r-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.sandbox-logo svg { width: var(--icon-sm); height: var(--icon-sm); }
+
+.sandbox-switch {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--s-1) / 2);
+  min-height: var(--tile-md);
+  padding: 0 var(--s-3);
+  font-size: var(--fs-11);
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--accent-soft);
+  border: var(--hairline) solid var(--accent-soft-2);
+  border-radius: var(--r-pill);
+  cursor: pointer;
+  transition: background-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
+}
+
+.sandbox-switch:hover { background: var(--accent-soft-2); }
+
+.sandbox-switch:active { transform: scale(0.97); }
+
+.sandbox-switch svg { width: var(--fs-12); height: var(--fs-12); }
+
+/* 星图舞台 */
+.sandbox-star {
+  position: relative;
+  height: var(--star-h);
+  margin-top: var(--s-3);
+  background: var(--surface);
+  border: var(--hairline) solid var(--hero-line);
+  border-radius: var(--r-sm);
+  overflow: hidden;
+}
+
+.star-glow {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 220px;
+  height: 220px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, var(--star-glow-in), var(--star-glow-out) 70%);
+  border-radius: var(--r-pill);
+  pointer-events: none;
+}
+
+.star-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
+
+.star-ring { fill: none; stroke: var(--star-grid); stroke-width: var(--hairline); }
+
+.star-spoke { fill: none; stroke: var(--star-grid); stroke-width: var(--hairline); }
+
+.star-shape {
+  fill: var(--star-fill);
+  stroke: var(--star-stroke);
+  stroke-width: var(--focus-w);
+  stroke-linejoin: round;
+}
+
+.star-node { stroke: var(--surface); stroke-width: var(--focus-w); }
+
+.star-node--fire  { fill: var(--el-fire-ink); }
+.star-node--earth { fill: var(--el-earth-ink); }
+.star-node--metal { fill: var(--el-metal-ink); }
+.star-node--water { fill: var(--el-water-ink); }
+.star-node--wood  { fill: var(--el-wood-ink); }
+
+/* 星图中心:全家指数(把原 hero-score 收进星心) */
+.star-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--star-disc-w);
+  height: var(--star-disc-w);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--s-1) / 2);
+  background: var(--star-disc);
+  border: var(--hairline) solid var(--hero-line);
+  border-radius: var(--r-pill);
+  pointer-events: none;
+}
+
+.star-center-num {
+  font-size: var(--fs-22);
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--accent-strong);
+}
+
+.star-center-label { font-size: var(--fs-10); color: var(--text-2); }
+
+/* 顶点:环形顺时针 心 身 智 富 行(五行相生序) */
+.star-point {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  padding: 0;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+.star-point--top { left: 50%; top: calc(16.4% + 13px); transform: translate(-50%, -100%); flex-direction: column-reverse; }
+.star-point--right { left: 74.5%; top: 40.2%; transform: translate(-13px, -50%); flex-direction: row; }
+.star-point--lr { left: 65.2%; top: 78.7%; transform: translate(-13px, -50%); flex-direction: row; }
+.star-point--ll { left: calc(34.8% + 13px); top: 78.7%; transform: translate(-100%, -50%); flex-direction: row-reverse; }
+.star-point--left { left: calc(25.5% + 13px); top: 40.2%; transform: translate(-100%, -50%); flex-direction: row-reverse; }
+
+.star-dot {
+  flex: none;
+  width: var(--tile-sm);
+  height: var(--tile-sm);
+  border-radius: var(--r-pill);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--focus-w) solid var(--el-fire-ink);
+  background: var(--el-fire-tint);
+  color: var(--el-fire-ink);
+  transition: transform var(--dur-1) var(--ease);
+}
+
+.star-dot svg { width: var(--icon-sm); height: var(--icon-sm); }
+
+.star-dot--fire  { border-color: var(--el-fire-ink);  background: var(--el-fire-tint);  color: var(--el-fire-ink); }
+.star-dot--earth { border-color: var(--el-earth-ink); background: var(--el-earth-tint); color: var(--el-earth-ink); }
+.star-dot--metal { border-color: var(--el-metal-ink); background: var(--el-metal-tint); color: var(--el-metal-ink); }
+.star-dot--water { border-color: var(--el-water-ink); background: var(--el-water-tint); color: var(--el-water-ink); }
+.star-dot--wood  { border-color: var(--el-wood-ink);  background: var(--el-wood-tint);  color: var(--el-wood-ink); }
+
+.star-text { display: flex; align-items: baseline; gap: calc(var(--s-1) / 2); white-space: nowrap; }
+
+.star-name { font-size: var(--fs-12); font-weight: 600; color: var(--text); }
+
+.star-val { font-size: var(--fs-11); color: var(--text-2); }
+
+.star-point:hover .star-dot { transform: scale(1.08); }
+
+.star-point:active .star-dot { transform: scale(0.94); }
+
+.star-point:focus-visible {
+  outline: var(--focus-w) solid var(--focus);
+  outline-offset: var(--focus-offset);
+  border-radius: var(--r-sm);
+}
+
+/* 状态行读数:维度名 + 能量值 */
+/* 星图脚注:常显 不折叠 不 tooltip 向用户交代 82 不等于五维均值 */
+.star-note {
+  margin-top: var(--s-2);
+  font-size: var(--fs-12);
+  color: var(--text-2);
+  text-align: center;
+}
+
+.dim-line { display: flex; align-items: baseline; gap: var(--s-1); }
+
+.dim-energy { font-size: var(--fs-11); font-weight: 600; color: var(--text-2); }
+
+/* ============================ 三 · 今日待办带 ============================ */
+.band { margin-top: var(--s-7); }
+
+.band-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--s-2);
+  margin-bottom: var(--s-2);
+}
+
+.band-title { font-size: var(--fs-16); font-weight: 600; letter-spacing: 0.01em; }
+
+.band-sub { font-size: var(--fs-11); color: var(--text-3); }
+
+.panel {
+  background: var(--surface);
+  border: var(--hairline) solid var(--line);
+  border-radius: var(--r-md);
+  padding: var(--s-2) var(--s-4);
+}
+
+.panel-state { display: none; }
+
+.panel[data-state="list"] .panel-state[data-variant="list"],
+.panel[data-state="data"] .panel-state[data-variant="data"],
+.panel[data-state="loading"] .panel-state[data-variant="loading"],
+.panel[data-state="error"] .panel-state[data-variant="error"],
+.panel[data-state="empty"] .panel-state[data-variant="empty"] { display: flex; }
+
+.panel[data-state="loading"] .panel-state[data-variant="loading"],
+.panel[data-state="error"] .panel-state[data-variant="error"],
+.panel[data-state="empty"] .panel-state[data-variant="empty"] {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s-2);
+  padding: var(--s-5) 0;
+}
+
+.task-list { display: flex; flex-direction: column; }
+
+.task {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) 0;
+  border-top: var(--hairline) solid var(--line);
+}
+
+.task:first-child { border-top: 0; }
+
+.task-check {
+  width: var(--tap);
+  height: var(--tap);
+  margin-left: calc(var(--s-2) * -1);
+  border: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex: none;
+  border-radius: var(--r-pill);
+  transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
+}
+
+.task-check:hover { transform: scale(1.06); }
+
+.task-check:active { transform: scale(0.94); }
+
+.task-check[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
+
+.check-ring {
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+  border-radius: var(--r-pill);
+  border: var(--hairline) solid var(--line-control);
+  background: var(--surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: transparent;
+  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
+}
+
+.check-ring svg { width: var(--icon-sm); height: var(--icon-sm); }
+
+.task-check.is-checked .check-ring {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+
+.task-main { flex: 1; min-width: 0; }
+
+.task-text { font-size: var(--fs-14); color: var(--text); }
+
+.task.is-done .task-text { color: var(--text-3); text-decoration: line-through; }
+
+.task-flag {
+  flex: none;
+  font-size: var(--fs-10);
+  color: var(--text-3);
+  border: var(--hairline) solid var(--line);
+  border-radius: var(--r-pill);
+  padding: calc(var(--s-1) / 2) var(--s-2);
+}
+
+/* ============================ 四 · 近期健康数据带 ============================ */
+.stat-lead {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-2);
+  padding: var(--s-4) 0 var(--s-3);
+}
+
+.stat-name { font-size: var(--fs-13); color: var(--text-2); width: var(--s-8); flex: none; }
+
+.stat-value { font-size: var(--fs-22); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
+
+.stat-unit { font-size: var(--fs-11); color: var(--text-3); margin-left: var(--s-1); font-weight: 400; }
+
+.stat-lead .chip { margin-left: auto; }
+
+.stats { display: flex; flex-direction: column; }
+
+.stat-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-3) 0;
+  border-top: var(--hairline) solid var(--line);
+}
+
+.stat-row .stat-name { width: auto; flex: 1; font-size: var(--fs-12); }
+
+.stat-row b { font-size: var(--fs-14); font-weight: 600; }
+
+.state-line {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-size: var(--fs-13);
+  color: var(--text-2);
+  max-width: 30ch;
+}
+
+.state-line svg { width: var(--icon-md); height: var(--icon-md); flex: none; color: var(--text-3); }
+
+.state-line--error svg { color: var(--danger-ink); }
+
+/* 加载中:旋转只用 transform */
+.spinner {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  border-radius: var(--r-pill);
+  border: var(--focus-w) solid var(--line-control);
+  border-top-color: var(--accent);
+  animation: spin var(--dur-3) linear infinite;
+  flex: none;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* ============================ 五 · 服务入口 ============================ */
+.services {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-2);
+  margin-top: var(--s-1);
+}
+
+.svc {
+  width: calc((100% - 4 * var(--s-2)) / 5);
+  min-height: var(--tap);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s-1);
+  padding: var(--s-2) var(--s-1);
+  background: var(--surface);
+  border: var(--hairline) solid var(--line-control);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  text-align: center;
+  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
+}
+
+.svc:hover { background: var(--accent-soft); border-color: var(--accent-soft-2); }
+
+.svc:active { transform: scale(0.97); }
+
+.svc[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
+
+.svc-icon {
+  width: var(--tile-md);
+  height: var(--tile-md);
+  border-radius: var(--r-sm);
+  background: var(--surface-2);
+  color: var(--text-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
+}
+
+.svc:hover .svc-icon { background: var(--surface); color: var(--accent); }
+
+.svc-icon svg { width: var(--icon-md); height: var(--icon-md); }
+
+.svc-name { font-size: var(--fs-11); font-weight: 600; color: var(--text); line-height: var(--lh-tight); }
+
+.svc-desc {
+  font-size: var(--fs-11);
+  color: var(--text-3);
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+/* ============================ 六 · 推荐阅读 ============================ */
+.article {
+  margin-top: var(--s-2);
+  background: var(--surface);
+  border: var(--hairline) solid var(--line);
+  border-radius: var(--r-md);
+  padding: var(--s-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+
+.article-chip {
+  align-self: flex-start;
+  font-size: var(--fs-10);
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-radius: var(--r-pill);
+  padding: calc(var(--s-1) / 2) var(--s-2);
+}
+
+.article-title {
+  font-size: var(--fs-16);
+  font-weight: 600;
+  line-height: 1.45;
+  color: var(--text);
+  max-width: 22ch;
+}
+
+.article-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-2);
+  margin-top: var(--s-1);
+}
+
+.article-meta { font-size: var(--fs-11); color: var(--text-3); }
+
+/* ============================ 未登录引导条 ============================
+   来源:源码底部 <wuxing-sandbox mode="preview" badgeText="登录查看完整报告">
+   定位:轻量示意,刻意低于沙盘主角带一个量级——不加阴影,底色取 surface-2,
+   描边仅发丝级,并弱化五边形轮廓(不画完整星图,避免同页出现两张等权五维卡)。
+   登录态隐藏,仅在未登录时展示。 */
+.hint-band {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  background: var(--surface-2);
+  border: var(--hairline) solid var(--line);
+  border-radius: var(--r-md);
+  padding: var(--s-3) var(--s-4);
+}
+
+.hint-star {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  color: var(--accent);
+  opacity: .55;
+}
+
+.hint-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.hint-title { font-size: var(--fs-13); font-weight: 600; color: var(--text); }
+
+.hint-sub { font-size: var(--fs-11); color: var(--text-2); }
+
+.hint-badge {
+  flex: none;
+  font-size: var(--fs-10);
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-radius: var(--r-pill);
+  padding: calc(var(--s-1) / 2) var(--s-2);
+}
+
+/* ============================ 按钮与八态 ============================ */
+.btn {
+  min-height: var(--tap);
+  min-width: var(--tap);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-1);
+  padding: 0 var(--s-4);
+  font-size: var(--fs-13);
+  font-weight: 600;
+  border-radius: var(--r-pill);
+  border: var(--hairline) solid transparent;
+  background: transparent;
+  color: var(--text-2);
+  cursor: pointer;
+  position: relative;
+  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
+}
+
+.btn svg { width: var(--icon-sm); height: var(--icon-sm); }
+
+/* 默认 */
+.btn-primary { background: var(--accent); color: var(--on-accent); }
+/* 悬停 */
+.btn-primary:hover { background: var(--accent-strong); }
+/* 按下 */
+.btn-primary:active { transform: scale(0.97); }
+/* 禁用(主理人契约:禁用态清晰、不淡出,中性底 + 深字;移除全局 0.45 淡出对白字合成对比度的破坏;
+   pointer-events:none 切断 hover/active/transform 重漆,防止 .btn-primary:hover 等更高特异性规则覆盖中性底) */
+.btn[disabled],
+.btn.is-disabled {
+  background: var(--warm-200);
+  color: var(--text-2);
+  border-color: var(--line-control);
+  opacity: 1;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+/* 加载中 */
+.btn.is-loading { cursor: progress; }
+.btn.is-loading .btn-label { opacity: 1; }
+.btn.is-loading::after {
+  content: "";
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  margin-left: var(--s-1);
+  border-radius: var(--r-pill);
+  border: var(--focus-w) solid var(--on-accent);
+  border-top-color: transparent;
+  animation: spin var(--dur-3) linear infinite;
+}
+/* 出错 */
+.btn.is-error { background: var(--danger-ink); color: var(--on-accent); }
+/* 成功 */
+.btn.is-success { background: var(--ok-ink); color: var(--on-accent); }
+
+/* 轻量按钮(待办行内动作) */
+.btn-quiet {
+  color: var(--accent);
+  border-color: var(--accent-soft-2);
+  background: transparent;
+  padding: 0 var(--s-3);
+  font-size: var(--fs-12);
+}
+
+.btn-quiet:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
+
+.btn-quiet:active { transform: scale(0.97); }
+
+/* 胶囊跳转按钮(文章 CTA) */
+.btn-go {
+  background: var(--accent-soft);
+  color: var(--accent);
+  padding: 0 var(--s-3);
+  font-size: var(--fs-12);
+}
+
+.btn-go:hover { background: var(--accent-soft-2); }
+
+.btn-go:active { transform: scale(0.97); }
+
+.btn-go svg { width: var(--fs-12); height: var(--fs-12); }
+
+/* 演示用的小尺寸变体(仅设计说明条) */
+.btn-demo {
+  min-height: var(--tap);
+  min-width: var(--tap);
+  padding: 0 var(--s-3);
+  font-size: var(--fs-11);
+}
+
+/* ============================ 底部 tabBar(≈50px + 安全区) ============================ */
+.tabbar {
+  flex: none;
+  display: flex;
+  align-items: stretch;
+  background: var(--surface);
+  border-top: var(--hairline) solid var(--line);
+  padding-bottom: var(--safe-b);
+}
+
+.tab {
+  flex: 1;
+  min-height: var(--tabbar-h);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--s-1) / 2);
+  border: 0;
+  background: transparent;
+  color: var(--text-3);
+  cursor: pointer;
+  transition: color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
+}
+
+.tab svg { width: var(--icon-lg); height: var(--icon-lg); }
+
+.tab span { font-size: var(--fs-10); font-weight: 500; }
+
+.tab:hover { color: var(--text-2); }
+
+.tab:active { transform: scale(0.94); }
+
+.tab[aria-current="page"] { color: var(--accent); }
+
+.tab[aria-current="page"] span { font-weight: 600; }
+
+.tab[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
+
+/* ============================ 响应式与动效降级 ============================ */
+@media (max-width: 430px) {
+  .doc { padding: var(--s-4) var(--s-2) var(--s-7); }
+  .doc-head { padding: var(--s-4); }
+  .phone { height: auto; min-height: var(--screen-h); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+</style>
+</head>
+<body>
+
+<!-- ===================== 设计说明条(不计入手机画布) ===================== -->
+<header class="doc">
+  <div class="doc-head">
+    <div class="doc-title-row">
+      <h2 class="doc-title">浠艾福 · 首页家庭总览重设计</h2>
+      <span class="doc-tag">390px 画布 · 浅色主题 · 单文件 · 无外部依赖</span>
+    </div>
+    <p class="doc-desc">基于现有首页的结构重做:问候条起笔,五维状态独占主角带,今日待办与近期数据以两条不同形状的安静带承接,服务与阅读收束。所有图标为内联 SVG,布局全部 flexbox。</p>
+
+    <div class="doc-grid">
+      <div class="doc-card">
+        <h2>令牌层</h2>
+        <ul>
+          <li>基色层:品牌橙 9 档 · 五维身份色 5 组 · 五行元素色 5 组 · 暖中性 6 档 · 状态色 4 组</li>
+          <li>语义层:表面 3 档 · 文字 3 档 · 描边 2 档 · 动作 6 档 · 主角带 3 档</li>
+          <li>组件层:间距 11 档 · 圆角 4 档 · 字阶 10 档 · 动效 3 档 · 阴影 2 档</li>
+          <li>间距与圆角量级对齐 uni.scss 已有档位(4/8/12/16/24 与 4/8/12/pill)</li>
+        </ul>
+      </div>
+
+      <div class="doc-card">
+        <h2>五维配色来源</h2>
+        <ul>
+          <li class="sw-line"><span class="sw" style="background:var(--dim-body)"></span>身 body · 取自 $dim-body 与 $dim-body-tint</li>
+          <li class="sw-line"><span class="sw" style="background:var(--dim-wisdom)"></span>智 wisdom · 取自 $dim-wisdom 与 $dim-wisdom-tint</li>
+          <li class="sw-line"><span class="sw" style="background:var(--dim-wealth)"></span>富 wealth · 取自 $dim-wealth 与 $dim-wealth-tint</li>
+          <li class="sw-line"><span class="sw" style="background:var(--dim-action)"></span>行 action · 取自 $dim-action 与 $dim-action-tint</li>
+          <li class="sw-line"><span class="sw" style="background:var(--dim-mind)"></span>心 mind · 取自 $dim-mind 与 $dim-mind-tint</li>
+          <li>顺序固定为 身 智 富 行 心;五维色只出现在主角带内,其余区域由品牌橙与暖中性承担</li>
+        </ul>
+      </div>
+
+      <div class="doc-card">
+        <h2>能量沙盘</h2>
+        <ul>
+          <li>星图为视觉焦点 · 五维状态行为其下方紧凑读数 · 二者不再等权</li>
+          <li>环形顺序固定 心 身 智 富 行(五行相生序 · 心恒在顶)· 状态行仍走线性 身 智 富 行 心</li>
+          <li>不重复的理由:星图回答整体形状与各维能量 · 状态行回答谁缺什么与要做什么 · 一图一言</li>
+          <li>顶点图标由 emoji 改内联 SVG 极简几何:火焰·火 山·土 闪电·金 水滴·水 叶·木</li>
+          <li>身 由沙盘土棕改为与新稿统一的赭石 · 全稿只有一个身色</li>
+          <li>原组件为深蓝底星图 · 本稿按温暖清爽重铺暖白底 · 几何与环形顺序不变</li>
+          <li>星心 82 是加权合成健康指数 不是五维算术均值(五维均值 80)· 实现时不要改成均值 · 界面已常显脚注向用户交代</li>
+          <li>星图 aria 摘要的维序须与顶点 DOM 序一致 · 环形序与官方序是同一循环的旋转 · 两者皆可 · 不得只改其一</li>
+        </ul>
+      </div>
+
+      <div class="doc-card">
+        <h2>问候语候选(三组 · 当前启用 A 组清晨)</h2>
+        <ul>
+          <li>A 组 信息型 · 清晨 待办较多:早上好。今天家里有 3 件事要办,第一件是解读妈妈的体检报告。</li>
+          <li>A 组 信息型 · 上午 有报告待看:上午好。妈妈的体检报告刚出,2 分钟能看完摘要。</li>
+          <li>B 组 行动型 · 午后 待办清空:下午好。今天的事都办完了,还剩一份本周食材清单可以看。</li>
+          <li>B 组 行动型 · 晚间 有缺录:晚上好。今天还差 1 项没记:爸爸的运动时长。</li>
+          <li>C 组 温暖型 · 清晨 数据平稳:早上好。今天家人的数据都平稳,只有妈妈的睡眠略偏少,午后可以看看建议。</li>
+          <li>C 组 温暖型 · 晚间 收束一天:晚上好。今天 3 项待办全部完成,可以安心休息了。</li>
+          <li>三组为候选文案 · 仅 A 组清晨进入产品 UI · B 组与 C 组按文档核对 不要同时生效</li>
+        </ul>
+      </div>
+
+      <div class="doc-card">
+        <h2>交互状态契约</h2>
+        <ul>
+          <li>八态完整实现:主按钮 .btn(默认 悬停 键盘焦点 按下 禁用 加载中 出错 成功)</li>
+          <li>豁免声明(不夸大):服务格 .svc · 图标按钮 .icon-btn · 待办勾选 .task-check · 沙盘顶点 .star-point 只实现 默认 悬停 键盘焦点 按下 禁用;这几类无异步请求也无提交结果 加载中 出错 成功 语义不适用</li>
+          <li>语义变化态:底部导航当前页 · 待办勾选完成;本页无折叠面板,故不涉及展开与收起</li>
+          <li>焦点环:2px 实心 + 2px 外距,对暖白底实测 3.3:1</li>
+          <li>待办行点击不改变布局边界,只用底色与缩放反馈</li>
+        </ul>
+      </div>
+
+      <div class="doc-card">
+        <h2>关键设计决策</h2>
+        <ul>
+          <li>能量沙盘是唯一主角:暖橙淡底卡片内星图为焦点 · 星心收 22px 健康指数 · 五维状态行为其下紧凑读数 · 服务与阅读刻意安静</li>
+          <li>品牌主色在承载语义处一律换深档,主色只做装饰层次,保证文字达标</li>
+          <li>近期数据把唯一异常项提到首位,其余三项压缩成行,避免等权卡片墙</li>
+          <li>阴影只给主角带与设备外框,其余面板靠发丝描边分层</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="doc-controls">
+      <span class="doc-controls-label">状态演示(作用在画布内的两条带)</span>
+      <div class="switch" id="state-switch">
+        <button type="button" data-target="report" data-state="data" class="is-on">数据有值</button>
+        <button type="button" data-target="report" data-state="loading">加载中</button>
+        <button type="button" data-target="report" data-state="error">加载出错</button>
+        <button type="button" data-target="report" data-state="empty">数据为空</button>
+        <button type="button" data-target="todo" data-state="empty">待办为空</button>
+      </div>
+    </div>
+
+    <div class="doc-controls">
+      <span class="doc-controls-label">按钮八态</span>
+      <div class="btn-states">
+        <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo"><span class="btn-label">默认</span></button><span>默认</span></div>
+        <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo"><span class="btn-label">悬停</span></button><span>悬停</span></div>
+        <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo"><span class="btn-label">焦点</span></button><span>键盘焦点</span></div>
+        <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo"><span class="btn-label">按下</span></button><span>按下</span></div>
+        <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo" disabled><span class="btn-label">禁用</span></button><span>禁用</span></div>
+        <div class="btn-state-demo"><button type="button" class="btn btn-primary btn-demo is-loading"><span class="btn-label">加载中</span></button><span>加载中</span></div>
+        <div class="btn-state-demo"><button type="button" class="btn btn-demo is-error"><span class="btn-label">出错</span></button><span>出错</span></div>
+        <div class="btn-state-demo"><button type="button" class="btn btn-demo is-success"><span class="btn-label">成功</span></button><span>成功</span></div>
+      </div>
+    </div>
+  </div>
+
+  <footer class="doc-foot" id="gate-foot">
+    门禁实测结果(共享技能 tools/ 执行,2026-11):lint_hardcodes 0 违例;check_no_emoji 0 处;slop_tells --strict 0 命中;contrast.py 显式解析的令牌对全部达标(正文 4.5:1),唯一例外是焦点环色(accent-mid 档)对暖白底 3.33:1,属非文本 UI 阈值 3:1 达标。
+  </footer>
+</header>
+
+<!-- ===================== 手机画布 ===================== -->
+<div class="stage">
+  <div class="phone">
+    <!-- 状态栏(示意,非交互) -->
+    <div class="statusbar" aria-hidden="true">
+      <span class="statusbar-time">9:41</span>
+      <span class="statusbar-icons">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="13" width="3" height="7" rx="1" fill="currentColor" stroke="none"/><rect x="8" y="10" width="3" height="10" rx="1" fill="currentColor" stroke="none"/><rect x="13" y="7" width="3" height="13" rx="1" fill="currentColor" stroke="none"/><rect x="18" y="4" width="3" height="16" rx="1" fill="currentColor" stroke="none"/></svg>
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9.5a12 12 0 0 1 16 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M7.2 13a7.5 7.5 0 0 1 9.6 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="17.4" r="1.6" fill="currentColor" stroke="none"/></svg>
+        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="7" width="16" height="10" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="5" y="9" width="10" height="6" rx="1.5" fill="currentColor" stroke="none"/><path d="M21 11v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+      </span>
+    </div>
+
+    <div class="screen">
+      <main class="page">
+
+        <!-- 一 · 问候条 -->
+        <header class="greet">
+          <div class="greet-top">
+            <div class="family">
+              <div class="avatars" aria-hidden="true">
+                <span class="avatar">我</span>
+                <span class="avatar avatar--b">妈</span>
+                <span class="avatar avatar--c">爷</span>
+                <span class="avatar avatar--d">奶</span>
+              </div>
+              <div class="family-meta">
+                <span class="family-name">林一家</span>
+                <span class="family-sub">4 位成员</span>
+              </div>
+            </div>
+            <button type="button" class="icon-btn" aria-label="通知,2 条未读">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4a5 5 0 0 0-5 5v3.2L5.4 15h13.2L17 12.2V9a5 5 0 0 0-5-5z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M10 18a2 2 0 0 0 4 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+              <span class="bell-badge">2</span>
+            </button>
+          </div>
+          <h1 class="greet-title">早上好</h1>
+          <p class="greet-line">今天家里有 3 件事要办,第一件是解读妈妈的体检报告。</p>
+        </header>
+
+        <!-- 二 · 能量沙盘主角带(星图为视觉焦点 · 五维状态行为其下紧凑读数) -->
+        <section class="hero" aria-labelledby="hero-title">
+          <div class="hero-head">
+            <div class="sandbox-brand">
+              <span class="sandbox-logo" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M12 3.4 14.4 9.1h6l-4.8 3.7 1.8 5.9-5.4-3.8-5.4 3.8 1.8-5.9-4.8-3.7h6z" fill="currentColor"/></svg>
+              </span>
+              <div>
+                <h2 class="hero-kicker" id="hero-title">浠艾福能量沙盘</h2>
+                <p class="hero-note">更新于今天 07:20</p>
+              </div>
+            </div>
+            <button type="button" class="sandbox-switch" aria-label="切换视角,当前全家">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M2.8 19c0-3.1 2.8-5.2 6.2-5.2s6.2 2.1 6.2 5.2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M16.2 8.6a3 3 0 0 1 0 5.6M18.8 19c0-2.5-1.4-4.3-3.4-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+              <span>全家</span>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 9.5h10l-3-3M17 14.5H7l3 3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+
+          <div class="sandbox-star">
+            <div class="star-glow" aria-hidden="true"></div>
+            <svg class="star-svg" viewBox="0 0 326 244" role="img" aria-label="全家五维能量星图:心 92,身 78,智 74,富 80,行 76,健康指数 82" aria-describedby="star-note">
+              <polygon class="star-ring" points="163,54 229.6,102.4 204.1,180.6 121.9,180.6 96.4,102.4"/>
+              <polygon class="star-ring" points="163,77.3 207.4,109.6 190.5,161.8 135.6,161.8 118.6,109.6"/>
+              <line class="star-spoke" x1="163" y1="124" x2="163" y2="40"/>
+              <line class="star-spoke" x1="163" y1="124" x2="242.9" y2="98"/>
+              <line class="star-spoke" x1="163" y1="124" x2="212.4" y2="192"/>
+              <line class="star-spoke" x1="163" y1="124" x2="113.6" y2="192"/>
+              <line class="star-spoke" x1="163" y1="124" x2="83.1" y2="98"/>
+              <polygon class="star-shape" points="163,59.6 214.9,107.1 193.5,165.9 130.1,169.3 112.4,107.6"/>
+              <circle class="star-node star-node--fire" cx="163" cy="59.6" r="3.5"/>
+              <circle class="star-node star-node--earth" cx="214.9" cy="107.1" r="3.5"/>
+              <circle class="star-node star-node--metal" cx="193.5" cy="165.9" r="3.5"/>
+              <circle class="star-node star-node--water" cx="130.1" cy="169.3" r="3.5"/>
+              <circle class="star-node star-node--wood" cx="112.4" cy="107.6" r="3.5"/>
+            </svg>
+
+            <div class="star-center">
+              <span class="star-center-num">82</span>
+              <span class="star-center-label">健康指数</span>
+            </div>
+
+            <button type="button" class="star-point star-point--top" aria-label="心 能量 92">
+              <span class="star-dot star-dot--fire">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.6c3.6 0 6-2.4 6-5.7 0-3.6-3.2-6-6-10.5-2.8 4.5-6 6.9-6 10.5 0 3.3 2.4 5.7 6 5.7z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M12 18.1c1.5 0 2.5-1 2.5-2.4 0-1.6-1.2-2.7-2.5-4.3-1.3 1.6-2.5 2.7-2.5 4.3 0 1.4 1 2.4 2.5 2.4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+              </span>
+              <span class="star-text"><span class="star-name">心</span><span class="star-val">92</span></span>
+            </button>
+
+            <button type="button" class="star-point star-point--right" aria-label="身 能量 78">
+              <span class="star-dot star-dot--earth">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.6 19.4h18.8L14.4 8.2l-3.2 5.2-1.7-2.2-6.9 8.2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+              </span>
+              <span class="star-text"><span class="star-name">身</span><span class="star-val">78</span></span>
+            </button>
+
+            <button type="button" class="star-point star-point--lr" aria-label="智 能量 74">
+              <span class="star-dot star-dot--metal">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3 6.5 13H11l-1 8 6.5-10H12z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+              </span>
+              <span class="star-text"><span class="star-name">智</span><span class="star-val">74</span></span>
+            </button>
+
+            <button type="button" class="star-point star-point--ll" aria-label="富 能量 80">
+              <span class="star-dot star-dot--water">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.5c3.2 3.6 5.5 6.4 5.5 9.3a5.5 5.5 0 0 1-11 0c0-2.9 2.3-5.7 5.5-9.3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+              </span>
+              <span class="star-text"><span class="star-name">富</span><span class="star-val">80</span></span>
+            </button>
+
+            <button type="button" class="star-point star-point--left" aria-label="行 能量 76">
+              <span class="star-dot star-dot--wood">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19C5 11 11 5 19 5c0 8-6 14-14 14z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M8.4 15.6 19 5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+              </span>
+              <span class="star-text"><span class="star-name">行</span><span class="star-val">76</span></span>
+            </button>
+          </div>
+
+          <p class="star-note" id="star-note">五维占比不同,合成后不等于平均</p>
+
+          <ul class="dims">
+            <li class="dim">
+              <span class="dim-badge dim-badge--body" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M5.5 19c0-3.3 2.9-5.5 6.5-5.5s6.5 2.2 6.5 5.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+              </span>
+              <span class="dim-main">
+                <span class="dim-line">
+                  <span class="dim-name">身</span>
+                  <span class="dim-energy">78</span>
+                </span>
+                <span class="dim-detail">妈妈 · 睡眠 6.2 小时 · 偏少</span>
+              </span>
+              <span class="chip chip--warn">略偏</span>
+            </li>
+            <li class="dim">
+              <span class="dim-badge dim-badge--wisdom" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M13 3 6.5 13H11l-1 8 6.5-10H12z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+              </span>
+              <span class="dim-main">
+                <span class="dim-line">
+                  <span class="dim-name">智</span>
+                  <span class="dim-energy">74</span>
+                </span>
+                <span class="dim-detail">奶奶 · 上周测评 74,本周还没做</span>
+              </span>
+              <span class="chip chip--info">本周待测</span>
+            </li>
+            <li class="dim">
+              <span class="dim-badge dim-badge--wealth" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M12 3.5c3.2 3.6 5.5 6.4 5.5 9.3a5.5 5.5 0 0 1-11 0c0-2.9 2.3-5.7 5.5-9.3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+              </span>
+              <span class="dim-main">
+                <span class="dim-line">
+                  <span class="dim-name">富</span>
+                  <span class="dim-energy">80</span>
+                </span>
+                <span class="dim-detail">上周读数 80,本周还没更新</span>
+              </span>
+              <span class="chip chip--muted">周更待填</span>
+            </li>
+            <li class="dim">
+              <span class="dim-badge dim-badge--action" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 19 5c0 8-6 14-14 14z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M8.4 15.6 19 5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+              </span>
+              <span class="dim-main">
+                <span class="dim-line">
+                  <span class="dim-name">行</span>
+                  <span class="dim-energy">76</span>
+                </span>
+                <span class="dim-detail">运动记录还差 2 次</span>
+              </span>
+              <span class="chip chip--warn">略偏</span>
+            </li>
+            <li class="dim">
+              <span class="dim-badge dim-badge--mind" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9.2A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 7 2.8C19 15.7 12 20 12 20z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+              </span>
+              <span class="dim-main">
+                <span class="dim-line">
+                  <span class="dim-name">心</span>
+                  <span class="dim-energy">92</span>
+                </span>
+                <span class="dim-detail">情绪打卡连续 5 天正常</span>
+              </span>
+              <span class="chip chip--ok">平稳</span>
+            </li>
+          </ul>
+        </section>
+
+        <!-- 三 · 今日待办带 -->
+        <section class="band" aria-labelledby="todo-title">
+          <div class="band-head">
+            <h2 class="band-title" id="todo-title">今日待办</h2>
+            <span class="band-sub">3 项待办 · 1 项完成</span>
+          </div>
+
+          <div class="panel" id="todo-panel" data-state="list">
+            <div class="panel-state" data-variant="list">
+              <ul class="task-list">
+                <li class="task">
+                  <button type="button" class="task-check" aria-pressed="false" aria-label="标记完成:妈妈的年度体检报告待解读">
+                    <span class="check-ring"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+                  </button>
+                  <span class="task-main"><span class="task-text">妈妈的年度体检报告待解读</span></span>
+                  <button type="button" class="btn btn-quiet"><span class="btn-label">去解读</span></button>
+                </li>
+                <li class="task">
+                  <button type="button" class="task-check" aria-pressed="false" aria-label="标记完成:补记昨天的晚餐">
+                    <span class="check-ring"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+                  </button>
+                  <span class="task-main"><span class="task-text">补记昨天的晚餐</span></span>
+                  <button type="button" class="btn btn-quiet"><span class="btn-label">去补记</span></button>
+                </li>
+                <li class="task">
+                  <button type="button" class="task-check" aria-pressed="false" aria-label="标记完成:本周行维度还差 2 次运动记录">
+                    <span class="check-ring"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+                  </button>
+                  <span class="task-main"><span class="task-text">本周「行」维度还差 2 次运动记录</span></span>
+                  <button type="button" class="btn btn-quiet"><span class="btn-label">去记录</span></button>
+                </li>
+                <li class="task is-done">
+                  <button type="button" class="task-check is-checked" aria-pressed="true" aria-label="已完成的待办:爷爷的血压已记录">
+                    <span class="check-ring"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+                  </button>
+                  <span class="task-main"><span class="task-text">爷爷的血压已记录</span></span>
+                  <span class="task-flag">已完成</span>
+                </li>
+              </ul>
+            </div>
+
+            <div class="panel-state" data-variant="empty">
+              <p class="state-line">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 13.5 7 6.5h10l3 7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M4 13.5V19h16v-5.5h-4.5a3.5 3.5 0 0 1-7 0z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+                今天还没有安排。去「健康」页补录一条数据,就能开始。
+              </p>
+              <button type="button" class="btn btn-quiet"><span class="btn-label">去补录</span></button>
+            </div>
+          </div>
+        </section>
+
+        <!-- 四 · 近期健康数据带 -->
+        <section class="band" aria-labelledby="report-title">
+          <div class="band-head">
+            <h2 class="band-title" id="report-title">近期健康数据</h2>
+            <span class="band-sub">来自家人的报告</span>
+          </div>
+
+          <div class="panel" id="report-panel" data-state="data">
+            <div class="panel-state" data-variant="data">
+              <div class="stat-lead">
+                <span class="stat-name">睡眠</span>
+                <span class="stat-value">6.2<span class="stat-unit">小时</span></span>
+                <span class="chip chip--warn">偏少</span>
+              </div>
+              <ul class="stats">
+                <li class="stat-row">
+                  <span class="stat-name">BMI</span>
+                  <b>23.4</b>
+                  <span class="chip chip--ok">正常</span>
+                </li>
+                <li class="stat-row">
+                  <span class="stat-name">血压</span>
+                  <b>128/82<span class="stat-unit">mmHg</span></b>
+                  <span class="chip chip--ok">平稳</span>
+                </li>
+                <li class="stat-row">
+                  <span class="stat-name">步数</span>
+                  <b>6842<span class="stat-unit">步</span></b>
+                  <span class="chip chip--ok">达标</span>
+                </li>
+              </ul>
+            </div>
+
+            <div class="panel-state" data-variant="loading" aria-live="polite">
+              <p class="state-line"><span class="spinner" aria-hidden="true"></span>正在整理家人的健康数据…</p>
+            </div>
+
+            <div class="panel-state" data-variant="error" role="alert">
+              <p class="state-line state-line--error">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4 21 19.5H3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M12 9.5v4.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="17" r="0.9" fill="currentColor" stroke="none"/></svg>
+                健康报告加载失败,可能是网络不稳。点「重试」再试一次。
+              </p>
+              <button type="button" class="btn btn-primary" id="retry-btn"><span class="btn-label">重试</span></button>
+            </div>
+
+            <div class="panel-state" data-variant="empty">
+              <p class="state-line">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.5c3.2 3.6 5.5 6.4 5.5 9.3a5.5 5.5 0 0 1-11 0c0-2.9 2.3-5.7 5.5-9.3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+                这周还没有健康数据。先补记一顿晚餐,就能看到第一条营养分析。
+              </p>
+              <button type="button" class="btn btn-quiet"><span class="btn-label">去补记</span></button>
+            </div>
+          </div>
+        </section>
+
+        <!-- 五 · 服务入口 -->
+        <section class="band" aria-labelledby="svc-title">
+          <div class="band-head">
+            <h2 class="band-title" id="svc-title">服务</h2>
+          </div>
+          <div class="services">
+            <button type="button" class="svc" aria-label="健康报告:解读家人的体检结果">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 3.5h7l4 4V20.5H7z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M14 3.5V8h4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9.5 12h6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M9.5 15.5h6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
+              <span class="svc-name">健康报告</span>
+              <span class="svc-desc">解读家人的体检结果</span>
+            </button>
+            <button type="button" class="svc" aria-label="食材推荐:按本周状态配一周三餐">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 11.5h16a8 8 0 0 1-16 0z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 8.5c0-1.5 1-2 1-3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M13.5 8.5c0-1.5 1-2 1-3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
+              <span class="svc-name">食材推荐</span>
+              <span class="svc-desc">按本周状态配一周三餐</span>
+            </button>
+            <button type="button" class="svc" aria-label="五维详情:看全家五维变化趋势">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3.2 20.4 9.4 17.2 19.2H6.8L3.6 9.4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><circle cx="12" cy="12" r="1.6" fill="none" stroke="currentColor" stroke-width="1.8"/></svg></span>
+              <span class="svc-name">五维详情</span>
+              <span class="svc-desc">看全家五维变化趋势</span>
+            </button>
+            <button type="button" class="svc" aria-label="成长记录:记下家人的每个变化">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="4" y="5.5" width="16" height="14.5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M4 10.5h16" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8 3.5v4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M16 3.5v4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M9.5 15l2 2 3.5-3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+              <span class="svc-name">成长记录</span>
+              <span class="svc-desc">记下家人的每个变化</span>
+            </button>
+            <button type="button" class="svc" aria-label="活动:报名家庭健康活动">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 3.5V21" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M6 4.5h11l-2.2 4 2.2 4H6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></span>
+              <span class="svc-name">活动</span>
+              <span class="svc-desc">报名家庭健康活动</span>
+            </button>
+            <button type="button" class="svc" aria-label="认知测评:半小时自查脑力状态">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/></svg></span>
+              <span class="svc-name">认知测评</span>
+              <span class="svc-desc">半小时自查脑力状态</span>
+            </button>
+            <button type="button" class="svc" aria-label="文章:每天读懂一条健康知识">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 5.5c2.5-1 5-1 7.5.8v13c-2.5-1.8-5-1.8-7.5-.8z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M20 5.5c-2.5-1-5-1-7.5.8v13c2.5-1.8 5-1.8 7.5-.8z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></span>
+              <span class="svc-name">文章</span>
+              <span class="svc-desc">每天读懂一条健康知识</span>
+            </button>
+            <button type="button" class="svc" aria-label="商城:为家人挑选健康好物">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5.5 8h13l-1 12h-11z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
+              <span class="svc-name">商城</span>
+              <span class="svc-desc">为家人挑选健康好物</span>
+            </button>
+            <button type="button" class="svc" aria-label="会员:查看会员专属权益">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 17.5 5 7l4.5 3.5L12 6l2.5 4.5L19 7l1 10.5z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M4 20h16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
+              <span class="svc-name">会员</span>
+              <span class="svc-desc">查看会员专属权益</span>
+            </button>
+            <button type="button" class="svc" aria-label="客服:人工客服在线解答">
+              <span class="svc-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 14v-2a7.5 7.5 0 0 1 15 0v2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><rect x="3" y="13" width="3.5" height="6" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="17.5" y="13" width="3.5" height="6" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M19.5 19v.5a2.5 2.5 0 0 1-2.5 2.5h-2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
+              <span class="svc-name">客服</span>
+              <span class="svc-desc">人工客服在线解答</span>
+            </button>
+          </div>
+        </section>
+
+        <!-- 六 · 推荐阅读 -->
+        <section class="band" aria-labelledby="read-title">
+          <div class="band-head">
+            <h2 class="band-title" id="read-title">推荐阅读</h2>
+          </div>
+          <article class="article">
+            <span class="article-chip">健康知识</span>
+            <h3 class="article-title">睡够 7 小时还是累?先看深度睡眠占多少</h3>
+            <div class="article-foot">
+              <span class="article-meta">11 月 20 日 · 3 分钟读完</span>
+              <button type="button" class="btn btn-go">
+                <span class="btn-label">去看看</span>
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5.5 15.5 12 9 18.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              </button>
+            </div>
+          </article>
+        </section>
+
+        <!-- 七 · 未登录引导条(轻量示意)
+             来源:源码底部 <wuxing-sandbox mode="preview" badgeText="登录查看完整报告">
+             登录态隐藏;弱化五边形轮廓,不做完整星图,避免与主角带等权 -->
+        <section class="band" aria-labelledby="hint-title">
+          <div class="hint-band">
+            <svg class="hint-star" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.6 20.4 9.9 17.2 19.5H6.8L3.6 9.9z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
+            <div class="hint-body">
+              <span class="hint-title" id="hint-title">能量沙盘</span>
+              <span class="hint-sub">看全家五维能量的完整形状</span>
+            </div>
+            <span class="hint-badge">登录查看完整报告</span>
+          </div>
+        </section>
+
+      </main>
+    </div>
+
+    <!-- tabBar:≈52px + 20px 安全区 -->
+    <nav class="tabbar" aria-label="主导航">
+      <button type="button" class="tab" aria-current="page">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 10.5 12 4l8 6.5V20H4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9.5 20v-5.5h5V20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+        <span>首页</span>
+      </button>
+      <button type="button" class="tab">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h4l2-4 3 8 2-4h7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        <span>健康</span>
+      </button>
+      <button type="button" class="tab">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20v-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M12 14c0-3.3-2.7-6-6-6 0 3.3 2.7 6 6 6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M12 14c0-3.3 2.7-6 6-6 0 3.3-2.7 6-6 6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+        <span>成长</span>
+      </button>
+      <button type="button" class="tab">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3.2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M5 20c0-3.9 3.1-6.5 7-6.5s7 2.6 7 6.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+        <span>我的</span>
+      </button>
+    </nav>
+  </div>
+</div>
+
+<script>
+(function () {
+  var switchBox = document.getElementById('state-switch');
+  var reportPanel = document.getElementById('report-panel');
+  var todoPanel = document.getElementById('todo-panel');
+
+  function setState(panel, state) {
+    if (!panel || !state) { return; }
+    panel.setAttribute('data-state', state);
+  }
+
+  if (switchBox) {
+    switchBox.addEventListener('click', function (ev) {
+      var btn = ev.target.closest('button');
+      if (!btn) { return; }
+      var target = btn.getAttribute('data-target');
+      if (!target) { return; }
+      var on = switchBox.querySelector('button.is-on');
+      if (on) { on.classList.remove('is-on'); }
+      btn.classList.add('is-on');
+      var next = btn.getAttribute('data-state');
+      if (target === 'report') {
+        setState(reportPanel, next);
+        setState(todoPanel, 'list');
+      } else {
+        setState(todoPanel, next);
+        setState(reportPanel, 'data');
+      }
+    });
+  }
+
+  var retryBtn = document.getElementById('retry-btn');
+  if (retryBtn) {
+    retryBtn.addEventListener('click', function () {
+      retryBtn.classList.add('is-loading');
+      retryBtn.setAttribute('aria-busy', 'true');
+      setTimeout(function () {
+        retryBtn.classList.remove('is-loading');
+        retryBtn.removeAttribute('aria-busy');
+        setState(reportPanel, 'data');
+      }, 900);
+    });
+  }
+
+  var checks = document.querySelectorAll('.task-check');
+  for (var i = 0; i < checks.length; i += 1) {
+    (function (check) {
+      check.addEventListener('click', function () {
+        var pressed = check.getAttribute('aria-pressed') === 'true';
+        check.setAttribute('aria-pressed', pressed ? 'false' : 'true');
+        if (pressed) {
+          check.classList.remove('is-checked');
+        } else {
+          check.classList.add('is-checked');
+        }
+        var row = check.parentNode;
+        if (!row) { return; }
+        if (pressed) {
+          row.classList.remove('is-done');
+        } else {
+          row.classList.add('is-done');
+        }
+      });
+    })(checks[i]);
+  }
+})();
+</script>
+</body>
+</html>

+ 12 - 2
docs/2026-10-27-index-home-redesign-plan.md

@@ -119,7 +119,7 @@ tabBar(首页 / 健康 / 成长 / 我的)
 ### 4.3 按钮八态(主理人拍板)
 
 - **除禁用态外,一律白色字体**
-- 禁用态:暖灰中性底 + 深字(`text-2`),**不加白字、不淡出**
+- 禁用态:暖灰中性底 + 深字(`text-2`),**不加白字、不淡出**;全局 `.btn[disabled]`/`.btn.is-disabled` 的 `opacity: var(--opacity-disabled)`(0.45 淡出)**已移除**(2026-10-28),并加 `pointer-events: none` 切断 hover/active/transform 重漆(防止 `.btn-primary:hover` 等更高特异性规则覆盖中性底);`--opacity-disabled` 令牌保留(icon-btn/task-check/svc/tab 仍引用,不在八态契约内)
 - 八态:默认 / 悬停 / 焦点 / 按下 / 禁用 / 加载中 / 出错 / 成功,文字对比均须 ≥4.5:1
 
 ### 4.4 其余令牌
@@ -211,4 +211,14 @@ tabBar(首页 / 健康 / 成长 / 我的)
 - **D3**:`家庭动态`、`上传报告`、`推荐商品`、`会员入口` 四个区块的去留/位置
 - **C2**:沙盘"身"最终色值待设计稿确认后回填
 
-> 以上未决项不影响 B1/B2 开工;涉及 Б3–B5 时须先回收结论。
+> 以上未决项不影响 B1/B2 开工;涉及 B3–B5 时须先回收结论。
+
+---
+
+## 10. 已裁定决策(过程补充)
+
+- **富 / 智 缺测基数口径(主理人 2026-10-27 裁定「都按周」)**:两维度按**周**为节奏呈现缺测。
+  - 智(示例):`奶奶 · 上周测评 74,本周还没做`;星图顶点沿用上周值 74(**缺测顶点不当 0 画**,以最近一次真实读数为准)。
+  - 富(示例):`上周读数 80,本周还没更新`;星图顶点沿用上周值 80。
+  - 设计稿已落地上述文案(智 chip「本周待测」/ 富 chip「周更待填」);真实组件实现时 `dimensions` 入参需携带 `lastMeasuredAt` / `period=week`,缺测项渲染副题、星图顶点取最近读数而非 0。
+