「碎片」设计系统：莫奈色卡 × 玻璃态 × 卡片翻转

设计系统的核心是：用 8 个颜色 Token 支撑起 4 种卡片类型、6 种玻璃组件、2 种布局模式。

---

一、莫奈调色板

从莫奈的《睡莲》《日本桥》《日落》等画作中提取了 8 个颜色 Token：

Token	色值	灵感来源	用途
--paper	#fff4df	米色画布底	卡片基底
--ink	#18231f	松针深绿	正文字色
--green	#1f5a4d	睡莲叶	主强调色
--blue	#31677b	水面倒影	次要强调色
--amber	#b9782d	黄昏光线	笔记卡片强调
--coral	#b85f48	日落	心情卡片强调
--rose	#a84d63	玫瑰园	愿望卡片强调
--kicker	#8a6045	赭石	日期标签

背景是一个三层渐变 + 模拟画布纹理：

background: 
  linear-gradient(150deg, #ecdfc8 0%, #dbe8e2 54%, #bfd6d1 100%),
  repeating-linear-gradient(0deg, transparent, transparent 56rpx, rgba(0,0,0,0.02) 56rpx, rgba(0,0,0,0.02) 57rpx);

这个渐变的三个颜色分别对应莫奈画中的草地、水面、天空——也是这个项目名字「碎片」的由来：把一幅画拆成色块，散落在交互里。

---

二、玻璃态组件体系

6 种玻璃态组件类，每个都用统一的毛玻璃公式：

background: rgba(255, 255, 255, 0.34~0.48)
backdrop-filter: blur(10px)
border: 2rpx solid rgba(255, 255, 255, 0.72~0.82)

组件	圆角	用途
.glass-panel	60rpx	主卡片面板
.chip-glass	999rpx（药丸形）	标签、分类筛选
.field-like	36rpx	输入框、按钮
.round-glass	50%（圆形）	头像、图标徽章
.paper-sheet	60rpx	时间轴卡片
.mark	50%	卡片类型指示标

透明度的数值经过反复调试：一开始设 0.18~0.26，在莫奈渐变背景上几乎完全消失。最终提到 0.34~0.48 才能看到清晰的玻璃质感。

---

三、卡片堆叠位置算法

首页的核心交互是一叠卡片，当前卡片居中，左右露出相邻卡片的边缘。这个位置计算用了一个 relativePosition() 函数：

function relativePosition(index, active, total) {
  // 环形回绕：计算当前卡片到活跃卡片的偏移量
  // 处理 wrap-around 情况（从最后一张划到第一张）
  // 返回 -2, -1, 0, 1, 2 等相对位置
}

每个相对位置对应一组 CSS 样式：

• pos-active（0）：居中，scale(1)，opacity 1，z-index 4
• pos-prev（-1）：左侧偏移 260rpx，scale(0.88)，opacity 0.82，z-index 2
• pos-next（+1）：右侧偏移 260rpx，scale(0.88)，opacity 0.82，z-index 2
• pos-far（其他）：translateY(36rpx)，scale(0.82)，opacity 0.28，z-index 1

滑动切换的阈值：Math.abs(dx) >= 50 && Math.abs(dx) > Math.abs(dy)——水平划够 50px 且比垂直滑动多才触发切换。

---

四、卡片翻转机制

每张卡片都可以翻转——正面显示内容，反面是表单（填体重、记心情、写愿望）。

实现上用一个 flipMap[cardId] 状态映射表，驱动 wx:if / wx:else 切换显示正面或反面。数据在 JS 中预计算（buildCardsState()），避免在模板中动态计算——这是为了解决 WXML 的「true 文字渲染」bug。

---

五、4 种卡片类型 + 笔记工厂

卡片按类型区分，每种的样式和交互都不一样：

卡片类型	底色	强调色	功能
体重（Body）	#fff4df	绿色	记录体重、单位切换（kg/斤）
心情（Mood）	#fff0dc	珊瑚色	记录今日心情语录
愿望（Wish）	#f8faef	玫瑰色	愿望列表管理
笔记工厂（Note）	8 色循环	琥珀色	每日笔记，每次新增换一个颜色

笔记工厂是最好玩的设计——每次点「写笔记」按钮，系统自动生成一张新的笔记卡片，颜色在 8 色调色板中循环。这 8 个颜色也是从莫奈画作中提取的，每张新卡片都像从画布上撕下的一小块碎片。

---

六、底部导航指示器

底部导航栏有一个会滑动的绿色透镜，跟随当前激活的 Tab。实现上用 createSelectorQuery() 动态计算每个 Tab 的宽度，而不是写死偏移量——这样即使未来修改了 Tab 文案也不会断裂。

点击 Tab 时，图标有一个 200ms 的弹跳动画（scale 关键帧），这是除了卡片滑动外最常用的交互反馈。