checkpoint: pre-refactor state before fixing P0/P1 issues

2026-06-11 18:40:59 +08:00
parent 2c3c2653fa
commit d55ed60907
41 changed files with 1129 additions and 1051 deletions
--- a/miniprogram/app.wxss
+++ b/miniprogram/app.wxss
@@ -1,49 +1,63 @@
-/* ── 全局设计令牌：毛玻璃配色系统 ── */
+/* ── 全局设计令牌:Vital 风格(参考 vital_style_reference.md)──
+   单一紫色主色 + 黑白灰层级:强调动作用黑,品牌用紫,其余靠灰度撑层级 */
 page {
-  --coral: #ff2d6e;
-  --tangerine: #ff7a1a;
-  --lemon: #ffd400;
-  --mint: #00d9a0;
-  --sky: #1f9bff;
-  --lilac: #8b5cf6;
+  /* 主色板 */
+  --purple: #8b7cf6;
+  --purple-light: #a99bf8;
+  --purple-deep: #7563e0;
+  --accent-dark: #2b2b30;

-  /* 兼容旧变量名，逐步迁移 */
-  --pink: var(--coral);
-  --pink-light: rgba(255, 45, 110, 0.14);
-  --orange: var(--tangerine);
-  --yellow: var(--lemon);
+  /* 兼容旧变量名:六彩体系全部收敛到 Vital 色板,
+     旧渐变 coral→tangerine 自动变为 紫→浅紫 */
+  --coral: var(--purple);
+  --tangerine: var(--purple-light);
+  --lemon: var(--purple-light);
+  --mint: #4bbe9a;
+  --sky: var(--purple);
+  --lilac: var(--purple);
+
+  --pink: var(--purple);
+  --pink-light: rgba(139, 124, 246, 0.12);
+  --orange: var(--purple-light);
+  --yellow: var(--purple-light);
  --green: var(--mint);
-  --blue: var(--sky);
-  --violet: var(--lilac);
-  --ink: #2b2438;
+  --blue: var(--purple);
+  --violet: var(--purple);
+  --ink: #1b1b20;

-  --bg-primary: #ffffff;
-  --bg-page: #ffffff;
+  --bg-primary: #f1f2f6;
+  --bg-page: #f1f2f6;

-  --text-primary: #2b2438;
-  --text-secondary: #6e6480;
-  --text-tertiary: #a59cb5;
+  --text-primary: #1b1b20;
+  --text-secondary: #6e7280;
+  --text-tertiary: #b9bdc6;

-  --glass: rgba(255, 255, 255, 0.40);
-  --glass-strong: rgba(255, 255, 255, 0.58);
-  --glass-edge: rgba(255, 255, 255, 0.78);
+  /* 紫底上的半透明白(头部胶囊、次级卡片) */
+  --on-primary: rgba(255, 255, 255, 0.22);
+  --on-primary-strong: rgba(255, 255, 255, 0.32);

-  --border-card: rgba(255, 255, 255, 0.72);
-  --border-subtle: rgba(43, 37, 61, 0.08);
+  /* 旧玻璃变量 → 实底白卡 */
+  --glass: #ffffff;
+  --glass-strong: #ffffff;
+  --glass-edge: rgba(255, 255, 255, 0);

-  --shadow-soft: 0 22rpx 48rpx rgba(120, 70, 140, 0.16);
-  --shadow-card: 0 22rpx 48rpx rgba(120, 70, 140, 0.16);
-  --shadow-pop: 0 14rpx 32rpx rgba(255, 45, 110, 0.30);
+  --border-card: rgba(255, 255, 255, 0);
+  --border-subtle: rgba(27, 27, 32, 0.06);

-  --radius-sm: 16rpx;
-  --radius-md: 28rpx;
-  --radius-lg: 44rpx;
+  /* 中性阴影:大模糊、低不透明度,光源一致来自上方 */
+  --shadow-soft: 0 16rpx 48rpx rgba(27, 27, 32, 0.06);
+  --shadow-card: 0 16rpx 48rpx rgba(27, 27, 32, 0.06);
+  --shadow-pop: 0 12rpx 32rpx rgba(43, 43, 48, 0.22);
+
+  --radius-sm: 20rpx;
+  --radius-md: 32rpx;
+  --radius-lg: 48rpx;
  --radius-full: 9999rpx;

  --tab-h: 112rpx;

  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
-  background: var(--bg-primary);
+  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 28rpx;
  line-height: 1.5;
@@ -68,64 +82,92 @@ button::after {
  border: none;
 }

-/* ── 通用卡片（兼容旧用法） ── */
+/* ── 通用卡片:纯白实底、大圆角、柔和中性阴影 ── */
 .card {
-  background: rgba(255, 255, 255, 0.86);
-  border: 1rpx solid var(--border-card);
+  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
 }

-/* ── 真毛玻璃工具类：背景模糊 + 折射边缘 + 内高光
-   低端 Android 对 backdrop-filter 支持有限，已叠加半透明底色兜底 ── */
+/* ── 旧玻璃工具类 → 实底白卡(Vital 无毛玻璃,靠层叠和阴影做深度) ── */
 .glass {
-  background: var(--glass);
-  backdrop-filter: blur(28rpx) saturate(170%);
-  -webkit-backdrop-filter: blur(28rpx) saturate(170%);
-  border: 1rpx solid var(--glass-edge);
-  box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.65), inset 0 -1rpx 0 rgba(255, 255, 255, 0.12);
+  background: #ffffff;
+  box-shadow: var(--shadow-soft);
 }

 .glass-strong {
-  background: var(--glass-strong);
-  backdrop-filter: blur(34rpx) saturate(180%);
-  -webkit-backdrop-filter: blur(34rpx) saturate(180%);
-  border: 1rpx solid var(--glass-edge);
-  box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
+  background: #ffffff;
+  box-shadow: var(--shadow-soft);
 }

-/* ── 贴纸式标签：略微旋转，像贴上去的 ── */
+/* ── 标签:白色小胶囊,不再旋转 ── */
 .sticker-tag {
  position: absolute;
-  background: rgba(255, 255, 255, 0.55);
-  backdrop-filter: blur(20rpx) saturate(180%);
-  -webkit-backdrop-filter: blur(20rpx) saturate(180%);
-  color: var(--ink);
+  background: #ffffff;
+  color: var(--text-primary);
  font-size: 22rpx;
-  font-weight: 800;
+  font-weight: 600;
  padding: 10rpx 22rpx;
-  border-radius: 24rpx;
-  border: 1rpx solid rgba(255, 255, 255, 0.7);
-  box-shadow: 0 14rpx 30rpx rgba(120, 70, 150, 0.18);
-  transform: rotate(-3deg);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-soft);
 }

 .sticker-tag.tilt-r {
-  transform: rotate(3deg);
+  transform: none;
 }

-/* ── 渐变按钮 ── */
+/* ── 主按钮:黑色胶囊(Vital 的 CTA 用强调黑,不用主题色) ── */
 .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: linear-gradient(135deg, var(--coral), var(--tangerine));
+  background: var(--accent-dark);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 28rpx;
-  font-weight: 800;
+  font-weight: 600;
  box-shadow: var(--shadow-pop);
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.btn-primary:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
+/* ── 数字分级排版:整数超大加粗 + 小数/单位缩小变灰 ── */
+.num-xl {
+  font-size: 96rpx;
+  font-weight: 700;
+  letter-spacing: -2rpx;
+  line-height: 1;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.num-sub {
+  font-size: 40rpx;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 信息行:左数字、右说明 + chevron,中间渐隐细线 ── */
+.row-line {
+  flex: 1;
+  height: 2rpx;
+  margin: 0 20rpx;
+  background: linear-gradient(90deg, rgba(27, 27, 32, 0.10), rgba(27, 27, 32, 0.02));
+}
+
+.chevron {
+  width: 16rpx;
+  height: 16rpx;
+  border-top: 4rpx solid var(--text-tertiary);
+  border-right: 4rpx solid var(--text-tertiary);
+  transform: rotate(45deg);
+  flex-shrink: 0;
 }

 /* ── 页面顶部状态栏占位 ── */
@@ -133,40 +175,44 @@ button::after {
  height: env(safe-area-inset-top, 44rpx);
 }

+/* ── 紫色渐变淡出头部:从顶部主色向下融入页面背景,无分界线 ── */
+.hero-fade {
+  background: linear-gradient(180deg, #9181f4 0%, #a99bf8 55%, rgba(169, 155, 248, 0) 100%);
+}
+
 /* ── 滚动区通用 ── */
 .scroll-view {
  width: 100%;
 }

-/* ── Hashtag 标签 ── */
+/* ── Hashtag 标签:主色淡紫底 ── */
 .hashtag {
  display: inline-flex;
  align-items: center;
  font-size: 22rpx;
-  font-weight: 800;
-  color: #8a3fe0;
-  background: rgba(167, 139, 250, 0.16);
-  border: 1rpx solid rgba(167, 139, 250, 0.28);
+  font-weight: 600;
+  color: var(--purple-deep);
+  background: var(--pink-light);
  border-radius: var(--radius-full);
  padding: 6rpx 14rpx;
 }

-/* ── 在线绿点 ── */
+/* ── 在线绿点(语义色,保留但降饱和) ── */
 .online-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
-  box-shadow: 0 0 0 5rpx rgba(0, 217, 160, 0.18);
+  box-shadow: 0 0 0 5rpx rgba(75, 190, 154, 0.16);
 }

-/* ── 骨架屏占位 ── */
+/* ── 骨架屏占位:中性冷灰 ── */
 .skeleton {
-  background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%);
+  background: linear-gradient(90deg, #ebecf1 25%, #e2e4ea 50%, #ebecf1 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s infinite;
-  border-radius: 8rpx;
+  border-radius: 12rpx;
 }

@keyframes skeleton-shine {
@@ -174,6 +220,84 @@ button::after {
  100% { background-position: -200% 0; }
 }

+/* ── 固定顶栏:液态玻璃,置于图层顶层,高度固定(状态栏 + 导航栏) ──
+   下层内容滚动/下拉时始终钉在顶部 */
+.glass-topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background:
+    radial-gradient(120% 180% at 18% -50%, rgba(255, 255, 255, 0.42), transparent 60%),
+    rgba(255, 255, 255, 0.52);
+  backdrop-filter: blur(40rpx) saturate(180%);
+  -webkit-backdrop-filter: blur(40rpx) saturate(180%);
+  border-bottom: 1rpx solid rgba(255, 255, 255, 0.55);
+  box-shadow:
+    0 8rpx 28rpx rgba(27, 27, 32, 0.05),
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
+}
+
+/* 顶栏上的标题:玻璃上用深色文字 */
+.glass-topbar .topbar-logo,
+.glass-topbar .navbar-title {
+  color: #1b1b20;
+}
+
+.glass-topbar .logo-accent {
+  color: var(--purple);
+}
+
+/* ── 顶栏图标按钮:线条化图标,右侧紧贴小程序胶囊按钮 ── */
+.navbar-action {
+  margin-left: auto;
+  margin-right: 8rpx;
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.navbar-action:active {
+  opacity: 0.6;
+}
+
+/* 线条图标:单色 alpha 蒙版 + background-color 上色 */
+.icon-line {
+  width: 44rpx;
+  height: 44rpx;
+  background-color: #1b1b20;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+}
+
+/* 搜索:线条放大镜 */
+.icon-search-line {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSIyMSIgY3k9IjIxIiByPSIxMi41Ii8+PHBhdGggZD0iTTMwLjUgMzAuNUw0MSA0MSIvPjwvZz48L3N2Zz4=");
+}
+
+/* 通知:线条铃铛 */
+.icon-bell-line {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjQgN2ExMyAxMyAwIDAgMC0xMyAxM3Y3LjVMNyAzNWgzNGwtNC03LjVWMjBBMTMgMTMgMCAwIDAgMjQgN1oiLz48cGF0aCBkPSJNMTkuNSAzOC41YTQuOCA0LjggMCAwIDAgOSAwIi8+PC9nPjwvc3ZnPg==");
+}
+
+/* 图标按钮上的未读红点 */
+.navbar-action.has-badge::after {
+  content: '';
+  position: absolute;
+  top: 6rpx;
+  right: 6rpx;
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  background: var(--purple);
+  border: 2rpx solid #fff;
+}
+
 /* ── 安全区 ── */
 .safe-top {
  background: transparent;