feat: Kinetic Dark 设计语言 + Lucide 图标迁移 + 首页轻量个性化

- 建立 Lucide 子集 iconfont（49 字形），全站 emoji 替换为 fc-icon 组件 - 重塑 Design Token（冷中性近黑底 + Volt 荧光绿 #B6F24E），消除硬编码颜色 - 首页登录后个性化：我的计划 / 我的收藏 / 今日推荐（纯前端复用现有 API） - 后端 DEFAULT_EMOJI→Lucide 名，PALETTE 对齐 Kinetic Dark 语义色板 - 修复 person-standing 缺失字形；14 个官方组合 seed emoji 全部映射到现有字形
2026-07-22 21:38:56 +08:00
parent ca0af6f7d2
commit b94eb706ff
64 changed files with 1572 additions and 173 deletions
--- a/miniprogram/app.wxss
+++ b/miniprogram/app.wxss
@@ -1,54 +1,116 @@
-/* ===== FITCOACH 设计系统：高端暗金奢华主题 ===== */
+/* ===== Lucide 子集 iconfont（动态生成，font-family: fc-icon） ===== */
+@font-face {
+  font-family: "fc-icon";
+  src: url('assets/fonts/fc-icon.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+/* ===== FITCOACH 设计系统：动能暗色（Kinetic Dark） =====
+   强调色 accent = Volt 荧光绿 #B6F24E（用户拍板）。
+   为兼容现有页面对 --gold/--teal 等变量名的引用，保留变量名、改其色值为新调色板；
+   并补全套语义色/字号/间距/圆角/阴影/动效 Token（真源 design-system/design-tokens.json）。 */
 page {
-  /* 设计令牌 */
-  --bg: #0E1110;
-  --bg-grad: linear-gradient(160deg, #16201B 0%, #0E1110 55%);
-  --surface: #171C19;
-  --surface-2: #1F2622;
-  --gold: #D9B36C;
-  --gold-2: #F0D9A8;
-  --gold-soft: rgba(217,179,108,0.12);
-  --gold-line: rgba(217,179,108,0.28);
-  --teal: #58C9B9;
-  --text: #F3F5F2;
-  --text-2: #98A39B;
-  --text-3: #6B746D;
-  --line: rgba(255,255,255,0.07);
-  --radius: 28rpx;
-  --radius-sm: 18rpx;
-  --shadow: 0 12rpx 40rpx rgba(0,0,0,0.35);
+  /* —— 颜色 —— */
+  --bg: #0B0F0E;                                   /* 页面背景（冷中性近黑） */
+  --bg-grad: radial-gradient(120% 80% at 50% 0%, rgba(17,23,20,0) 0%, #0B0F0E 60%);
+  --surface: #141A18;                              /* 卡片/容器 */
+  --surface-2: #1C2421;                            /* 次级表面 chip/输入/选中 */
+  --surface-warm: #1A211E;                         /* 悬浮/高亮表面 */
+
+  --text: #ECF1EF;                                 /* 主文本 */
+  --text-2: #9BA7A1;                               /* 次级文本 */
+  --text-3: #6B7670;                               /* 三级/元数据（仅 ≥24rpx） */
+
+  --line: rgba(255,255,255,0.08);                  /* 默认边框/分隔线 */
+  --border-strong: rgba(255,255,255,0.14);         /* 强调边框（选中态） */
+  --border-soft: rgba(255,255,255,0.05);           /* 内部行分隔 */
+
+  /* 强调色（原 --gold 命名保留以兼容引用，值改为 Volt 绿） */
+  --gold: #B6F24E;                                 /* accent 主色 */
+  --gold-2: #C7F56E;                               /* accent hover */
+  --gold-soft: rgba(182,242,78,0.12);              /* accent 淡底 */
+  --gold-line: rgba(182,242,78,0.28);              /* accent 边框 */
+  --teal: #2BD9A6;                                 /* success（原语义） */
+
+  /* 语义色（新增） */
+  --accent: #B6F24E;
+  --accent-hover: #C7F56E;
+  --accent-active: #9EDB3A;
+  --accent-on: #0E1A05;                            /* accent 背景上的前景（深绿，对比>7:1） */
+  --accent-soft: rgba(182,242,78,0.12);
+  --accent-ring: rgba(182,242,78,0.38);
+  --success: #2BD9A6;
+  --success-on: #04201A;
+  --success-soft: rgba(43,217,166,0.12);
+  --warn: #F2B53D;
+  --danger: #FF5C5C;                               /* 替代旧 #E5544B */
+  --danger-soft: rgba(255,92,92,0.12);
+  --info: #4FA8FF;
+  --bar-bg: rgba(11,15,14,0.92);                     /* 底部操作条毛玻璃底（=bg 带透明） */
+  --float-bg: rgba(11,15,14,0.55);                   /* 浮动按钮底 */
+  --scrim: rgba(0,0,0,0.5);                          /* 弹层遮罩 */
+
+  /* 字体三族（含中文） */
+  --font-display: 'Manrope', 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
+  --font-body: 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
+
+  /* 字号阶梯（rpx，22–72） */
+  --fs-xs: 22rpx; --fs-sm: 24rpx; --fs-base: 28rpx; --fs-md: 30rpx;
+  --fs-lg: 32rpx; --fs-xl: 36rpx; --fs-2xl: 44rpx; --fs-3xl: 56rpx; --fs-4xl: 72rpx;
+
+  /* 字重 / 字距 */
+  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
+  --ls-eyebrow: 0.08em; --ls-title: -0.02em; --ls-body: 0;
+
+  /* 间距尺度（4px 网格） */
+  --sp-1: 8rpx; --sp-2: 16rpx; --sp-3: 24rpx; --sp-4: 32rpx; --sp-5: 40rpx;
+  --sp-6: 48rpx; --sp-8: 64rpx; --sp-10: 80rpx; --sp-12: 96rpx; --sp-16: 128rpx;
+
+  /* 圆角（收紧） */
+  --radius-sm: 16rpx; --radius: 24rpx; --radius-md: 24rpx;
+  --radius-lg: 32rpx; --radius-xl: 40rpx; --radius-pill: 9999rpx;
+
+  /* 阴影（Hairline First：默认无阴影，靠发丝边框） */
+  --shadow: none;
+  --shadow-ring: 0 0 0 1rpx rgba(255,255,255,0.08);
+  --shadow-raised: 0 8rpx 24rpx rgba(0,0,0,0.32);
+  --shadow-float: 0 12rpx 40rpx rgba(0,0,0,0.45);
+  --shadow-glow: 0 8rpx 24rpx rgba(182,242,78,0.28);   /* 唯一允许的彩色阴影：CTA */
+  --focus-ring: 0 0 0 3rpx rgba(182,242,78,0.45);
+
+  /* 动效 */
+  --motion-fast: 150ms; --motion-base: 200ms; --motion-slow: 300ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);

  background: var(--bg);
  color: var(--text);
-  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 28rpx;
+  font-family: var(--font-body);
+  font-size: var(--fs-base);
  line-height: 1.5;
 }

-view, text, scroll-view, image, input {
+view, text, scroll-view, image, input, textarea, button {
  box-sizing: border-box;
 }

 /* ===== 通用工具类 ===== */
 .eyebrow {
-  font-size: 22rpx;
-  letter-spacing: 4rpx;
-  color: var(--gold);
+  font-size: var(--fs-xs);
+  letter-spacing: var(--ls-eyebrow);
+  color: var(--accent);
  text-transform: uppercase;
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
 }

-.section {
-  padding: 40rpx 32rpx;
-}
-.section + .section {
-  border-top: 1rpx solid var(--line);
-}
+.section { padding: var(--sp-5) var(--sp-4); }
+.section + .section { border-top: 1rpx solid var(--line); }

 .card {
  background: var(--surface);
  border-radius: var(--radius);
-  box-shadow: var(--shadow);
  border: 1rpx solid var(--line);
 }

@@ -56,10 +118,10 @@ view, text, scroll-view, image, input {
  display: inline-flex;
  align-items: center;
  padding: 10rpx 24rpx;
-  border-radius: 999rpx;
+  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
-  font-size: 24rpx;
+  font-size: var(--fs-sm);
  border: 1rpx solid var(--line);
 }

@@ -70,7 +132,7 @@ view, text, scroll-view, image, input {

 .empty {
  color: var(--text-3);
-  font-size: 26rpx;
+  font-size: var(--fs-sm);
  text-align: center;
  padding: 80rpx 0;
 }
@@ -80,24 +142,22 @@ view, text, scroll-view, image, input {
  color: var(--text-2);
  background: var(--surface-2);
  padding: 4rpx 12rpx;
-  border-radius: 999rpx;
+  border-radius: var(--radius-pill);
 }
 .tag--gold {
  color: var(--gold-2);
  background: var(--gold-soft);
 }

-/* ===== 横向滚动提示：右侧渐隐遮罩，提示「还可向右滑动」 ===== */
+/* ===== 横向滚动右侧渐隐遮罩（提示可右滑） ===== */
 .hscroll, .chip-scroll, .filterbar, .emoji-row, .prog-scroll {
  position: relative;
 }
 .hscroll::after, .chip-scroll::after, .filterbar::after, .emoji-row::after, .prog-scroll::after {
  content: '';
  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  top: 0; right: 0; bottom: 0;
  width: 56rpx;
  pointer-events: none;
-  background: linear-gradient(90deg, rgba(14,17,16,0) 0%, rgba(14,17,16,0.9) 100%);
+  background: linear-gradient(90deg, rgba(11,15,14,0) 0%, rgba(11,15,14,0.9) 100%);
 }