喝水打卡 · 家庭版
设计规范 V1.4

/* 品牌色 */
--primary: #2f7cf6;        /* 主蓝：进度 0% 起点、主按钮、选中态 */
--primary-dark: #1f63d6;
--primary-soft: #e9f1ff;     /* 主色浅底：ghost 按钮 */
/* 完成色（进度 100% 终点） */
--ok: #22b07d;
/* 语义色 */
--danger: #f2555a;  --danger-soft: #fff0f0;  --warn: #f5a623;
/* 中性 */
--bg: #f4f8ff;  --card: #ffffff;
--text: #17233d;      /* 主文本：深蓝黑，不用纯黑 #000 */
--text-sub: #7d879c;  --text-light: #a6b0c2;  --line: #eef2f8;
/* 阴影：带品牌色调，不用中性灰 */
--shadow: 0 8rpx 32rpx rgba(31, 99, 214, 0.08);

/** 蓝→绿渐进色：f∈[0,1]，0=#2f7cf6 蓝，1=#22b07d 绿 */
function gradColor(f) {
  const r = Math.round(47 + (34 - 47) * f)
  const g = Math.round(124 + (176 - 124) * f)
  const b = Math.round(246 + (125 - 246) * f)
  const hex = '#' + [r, g, b].map((v) => (v < 16 ? '0' : '') + v.toString(16)).join('')
  return { hex, glow: `rgba(${r}, ${g}, ${b}, 0.4)` }
}

/**
 * 环形背景样式：整环是一张 SVG（viewBox 380），弧端圆头由 stroke-linecap="round" 负责
 * 为什么不用 conic-gradient：它的弧端是径向硬边，想圆润只能补一个同色实心圆盖住 ——
 * 那本质就是「一颗珠子」，用户一眼看穿。SVG 圆头是渲染器画进线段的，DOM 里没有端点元素。
 */
const RING_R = 174
const RING_CIRC = 2 * Math.PI * RING_R   // ≈ 1093.27
function svgUrl(svg) {
  const enc = encodeURIComponent(svg).replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29')
  return "url('data:image/svg+xml," + enc + "')"
}
function ringBgStyle(p, color, track) {
  const dash = Math.max(0.01, RING_CIRC * Math.min(100, p) / 100)
  let svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380">'
  // 底轨道（满圈）
  svg += '<circle cx="190" cy="190" r="' + RING_R + '" fill="none" stroke="' + track + '" stroke-width="32"/>'
  // 进度弧：round 线帽 → 起点终点都是天然半圆，不需要任何补圆元素
  if (p > 0) {
    svg += '<circle cx="190" cy="190" r="' + RING_R + '" fill="none" stroke="' + color + '"' +
      ' stroke-width="32" stroke-linecap="round"' +
      ' stroke-dasharray="' + dash.toFixed(2) + ' ' + RING_CIRC.toFixed(2) + '"' +
      ' transform="rotate(-90 190 190)"/>'
  }
  return 'background-image:' + svgUrl(svg + '</svg>')
}

applyPctStyle(ml, pct) {
  const p = Math.max(0, Math.min(100, pct))
  const done = p >= 100
  const track = done ? 'rgba(34, 176, 125, 0.15)' : '#eef0f4'
  // 整体渐变：中间进度「整体统一」为插值色，不是沿弧的空间渐变
  const color = gradColor(p / 100).hex
  this.setData({           // ← 一次 setData，绝不分多次
    displayMl: ml, percent: Math.round(p), percentText: `${Math.round(p)}%`,
    // 环：整个环就一个 view，背景是 SVG data URI，圆头在 SVG 内部
    ringStyle: ringBgStyle(p, color, track),
    pctColor: color,
    barPct: Math.round(p * 10) / 10,
    done
  })
  // ⚠️ 没有 dotX / dotY / dotGlow / barDotX —— 端点不再由任何元素承担
}

<!-- 环：整个环只有一个 .ring，背景是 SVG；两端圆头由 stroke-linecap="round" 画进线段 -->
<view wx:if="{{progressStyle === 'ring'}}" class="ring-wrap">
  <view class="ring" style="{{ringStyle}}"></view>
  <view class="ring-inner">
    <view class="ring-pct" style="color:{{pctColor}}">{{percentText}}</view>
    <view class="ring-goal">{{displayMl}}/{{targetMl}}ml</view>
  </view>
</view>

<!-- 条：填充自带 border-radius:999rpx，两端天然圆润，同样不需要端点元素 -->
<view wx:else class="bar-wrap">
  <view class="bar-num" style="color:{{pctColor}}">{{displayMl}}<text class="bar-unit">ml</text></view>
  <view class="bar-track">
    <view class="bar-fill" style="width:{{barPct}}%;background:{{pctColor}}"></view>
  </view>
  <view class="bar-goal">目标 {{targetMl}} ml · {{percentText}}</view>
</view>

.ring-wrap { position: relative; width: 380rpx; height: 380rpx; margin: 36rpx auto 0; }
.ring { position: absolute; inset: 0; border-radius: 50%; }  /* 背景由 ringStyle 注入 conic-gradient */

/* 环：背景由 ringStyle 注入 SVG data URI；必须关掉 repeat 并拉伸到 100%，
   否则 SVG 会按固有尺寸平铺，看起来像一圈碎弧 */
.ring {
  position: absolute; left: 0; top: 0; width: 380rpx; height: 380rpx;
  border-radius: 50%; background-repeat: no-repeat; background-size: 100% 100%;
}
/* ❌ 不要再出现 .ring-cap / .ring-head / .ring-dot：
   同色圆盖硬边 = 换皮的珠子，用户照样看得出来。判定标准：停在 12% 放大看，
   能看到一颗独立珠子轮廓就是错的。 */

/* 数字条：轨道 24rpx，填充整体色。填充自带 999rpx 圆角 → 两端天然圆润，不需要任何端点元素 */
.bar-track { position: relative; height: 24rpx; border-radius: 999rpx; background: #edf1f6; }
.bar-fill  { position: relative; height: 100%; border-radius: 999rpx; overflow: hidden; }

/* 点击涟漪：细圈 scale 2–3，0.5s，不抢主体 */
.tap-ripple {
  position: absolute; width: 56rpx; height: 56rpx; margin: -28rpx 0 0 -28rpx;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72,202,228,.5), rgba(72,202,228,0) 70%);
  animation: tap-ripple 0.5s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes tap-ripple {
  0%   { transform: scale(.4); opacity: .85; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* 庆祝层容器：整屏、不接收事件 */
.celebrate { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }

.achv-card {
  position: relative; border-radius: 34rpx; padding: 44rpx 36rpx; text-align: center; overflow: hidden;
  background: linear-gradient(160deg, #232a38, #141922 55%, #1d232f);
  box-shadow: 0 0 0 1rpx rgba(255,214,120,.34),
              0 36rpx 80rpx rgba(0,0,0,.42),
              0 0 92rpx rgba(255,196,84,.16);
}
/* 旋转流光 */
.achv-card::before {
  content: ''; position: absolute; inset: -60%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 32%,
              rgba(255,214,120,.42) 42%, transparent 52% 100%);
  animation: achvSpin 5.2s linear infinite;
}
@keyframes achvSpin { to { transform: rotate(360deg); } }

const sys = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync()
const menu = wx.getMenuButtonBoundingClientRect()   // 系统胶囊位置
const statusBarH = sys.statusBarHeight
const navH = (menu.top - statusBarH) * 2 + menu.height
// 成就墙胶囊贴到系统胶囊左侧，留 8px 间距
const achvRight = sys.windowWidth - menu.left + 8
this.setData({ statusBarH, navH, navTotal: statusBarH + navH, achvRight })

/* 1. 组件加 hidden 字段与过渡 */
Component({ data: { selected: 0, hidden: false, list: [...] } })

/* wxml */
<view class="tab-bar {{hidden ? 'is-hidden' : ''}}"> … </view>

/* wxss */
.tab-bar { transition: transform 0.24s cubic-bezier(.22,.61,.36,1), opacity 0.24s ease; }
.tab-bar.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* 2. 页面封装 */
_setTabBarHidden(hidden) {
  if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({ hidden })
  }
}
// 打开弹层 → true；关闭/保存成功 → false；onShow 里再兜底置 false

/* 弹层：底部安全区留白，操作按钮固定在最底部 */
.sheet {
  width: 100%; background: #fff; border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));
  animation: sheetUp 0.28s cubic-bezier(.22,.61,.36,1);
}

/* 两列联动：换月/换历法后重建日列并钳位 */
onProfilePick(e) {
  const m = Number(e.detail.value[0]) + 1
  const d = Number(e.detail.value[1]) + 1
  const max = this._dayCount(this.data.pfBirthCal, m)   // 公历实天数 / 农历 30
  const day = Math.min(d, max)                            // 钳位，绝不出现 2月30日
  this.setData({ pfBirthMonth: m, pfBirthDay: day, pfBirthDays: this._dayNames(cal, m) })
}

<!-- wxml：按该成员是否被提醒过挂 dim 类，并把状态带进 dataset -->
<view wx:if="{{!item.isMe && item.status !== 'left'}}"
      class="member-remind {{item.remindedToday ? 'dim' : ''}}"
      data-id="{{item.userId}}" data-name="{{item.displayName}}"
      data-reminded="{{item.remindedToday ? 1 : 0}}"
      catchtap="onRemindMember">提醒</view>

/* wxss：灰度态 —— 只降饱和，不降透明度（避免看起来像禁用按钮点不动） */
.member-remind.dim { background: #f2f4f8; color: #b3bdcc; }

// js：已提醒该成员则不发请求，直接给文案；发送成功后本地即时置灰该行
onRemindMember(e) {
  const reminded = Number(e.currentTarget.dataset.reminded) === 1
  if (reminded) {
    wx.showToast({ title: '今天已提醒过该成员了', icon: 'none' })
    return
  }
  // …确认弹窗 → api.call('sendFamilyReminder') → 本地置灰该行
  const idx = this.data.members.findIndex((m) => m.userId === toOpenid)
  if (idx >= 0) this.setData({ [`members[${idx}].remindedToday`]: true })
}

// 云函数 getFamilyDailySummary：按「我当日发出的、按目标分组」富集状态
const today = beijingDate()
const logRes = await db.collection('reminder_log')
  .where({ fromOpenid: OPENID, date: today })
  .limit(200).get()
const remindedMap = {}
;(logRes.data || []).forEach((l) => { remindedMap[l.toOpenid] = true })
members.forEach((m) => { m.remindedToday = !!remindedMap[m.userId] })

// 云函数 sendFamilyReminder：发送前按「fromOpenid + toOpenid + 自然日」频控，逐对用尽即拒
const c = await db.collection('reminder_log')
  .where({ fromOpenid: OPENID, toOpenid, date: today }).count()
if (c.total >= 1) return fail('ERR_RATE_LIMITED', '今天已提醒过该成员了')

// 小队头像池：友谊符号主题（14 个，全中性无人数指代）
const FAMILY_AVATARS = [
  { value: '🤝', type: 'emoji', label: '握手同盟' },
  { value: '🫂', type: 'emoji', label: '好友拥抱' },
  { value: '🪢', type: 'emoji', label: '同心结' },
  { value: '🫶', type: 'emoji', label: '比心' },
  { value: '💛', type: 'emoji', label: '友谊黄心' },
  { value: '💞', type: 'emoji', label: '心心相印' },
  { value: '✨', type: 'emoji', label: '闪闪友谊' },
  { value: '📸', type: 'emoji', label: '合影留念' },
  { value: '🍀', type: 'emoji', label: '幸运同队' },
  { value: '🎉', type: 'emoji', label: '派对时刻' },
  { value: '🍻', type: 'emoji', label: '举杯碰杯' },
  { value: '☕', type: 'emoji', label: '咖啡之约' },
  { value: '🧩', type: 'emoji', label: '缺一不可' },
  { value: '♾️', type: 'emoji', label: '友谊无限' }
]

function beep(type) {
  var freq = type === 'unlock' ? 1046 : type === 'done' ? 1318 : 880;
  try {
    if (typeof wx === 'undefined' || !wx.createWebAudioContext) return;
    var ctx = wx.createWebAudioContext();
    var osc = ctx.createOscillator(), gain = ctx.createGain();
    osc.connect(gain); gain.connect(ctx.destination);
    osc.type = 'sine'; osc.frequency.value = freq;
    gain.gain.setValueAtTime(0.0001, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.18, ctx.currentTime + 0.01);
    gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.12);
    osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.13);
  } catch (e) { /* 静默降级 */ }
}

/** 云函数调用统一包装：{ ok, data } / { ok:false, msg } */
function call(name, data = {}) {
  return wx.cloud.callFunction({ name, data }).then((res) => {
    const r = res.result || {}
    if (r.ok === false) throw new Error(r.msg || '操作失败')
    return r.data
  })
}

function showError(e) {
  wx.showToast({ title: (e && e.message) || '网络开小差了', icon: 'none' })
}

module.exports = { call, showError }