feat(health): 实现血糖记录与趋势图表功能

- 新增血糖记录的添加、删除与列表展示
- 支持按月份切换查看历史数据
- 集成 Canvas 绘制血糖趋势折线图
- 添加 ScaleRuler 组件用于血糖值输入
- 提供平均血糖计算与空数据提示
- 样式优化，支持深色模式与响应式布局

src/pages/health/details/blood-glucose.vue

@@ -1,18 +1,360 @@
 <template>
   <CustomNav title="血糖" leftType="back" />
-  <view class="content">
-    <view class="placeholder">支持空腹/随机血糖记录与历史查看</view>
+  <view class="page">
+
+    <view class="header">
+      <view class="month-selector">
+        <button class="btn" @click="prevMonth">‹</button>
+        <view class="month-label">{{ displayYear }}年 {{ displayMonth }}月</view>
+        <button class="btn" @click="nextMonth">›</button>
+      </view>
+      <picker mode="date" :value="pickerValue" @change="onPickerChange">
+        <view class="picker-display">切换月份</view>
+      </picker>
+    </view>
+
+    <view class="chart-wrap">
+      <view class="chart-header">本月趋势</view>
+      <canvas ref="chartCanvas" id="bgChart" canvas-id="bgChart" class="chart-canvas" width="340" height="120"></canvas>
+    </view>
+
+    <view class="content">
+      <view class="summary">共 {{ records.length }} 条记录，本月平均：{{ averageGlucose }} mmol/L</view>
+
+      <view class="list">
+        <view v-if="records.length === 0" class="empty">暂无记录，点击右下角 + 添加</view>
+        <view v-for="item in records" :key="item.id" class="list-item">
+          <view class="date">{{ item.date }}</view>
+          <view class="value">{{ item.value }} mmol/L · {{ item.type }}</view>
+          <button class="btn-delete" @click="confirmDeleteRecord(item.id)">删除</button>
+        </view>
+      </view>
+    </view>
+
+    <view class="fab" @click="openAdd">
+      <view class="fab-inner">+</view>
+    </view>
+
+    <view class="modal" v-if="showAdd">
+      <view class="modal-backdrop" @click="closeAdd"></view>
+      <view class="modal-panel">
+        <view class="drag-handle"></view>
+        <view class="modal-header"><text class="modal-title">添加血糖</text></view>
+
+        <view class="modal-inner">
+          <view class="form-row">
+            <text class="label">日期</text>
+            <picker mode="date" :value="addDate" @change="onAddDateChange">
+              <view class="picker-display">{{ addDateLabel }}</view>
+            </picker>
+          </view>
+
+          <view class="form-row">
+            <text class="label">类型</text>
+            <picker mode="selector" :range="types" :value="typeIndex" @change="onTypeChange">
+              <view class="picker-display">{{ types[typeIndex] }}</view>
+            </picker>
+          </view>
+
+          <view class="form-row">
+            <text class="label">血糖 (mmol/L)</text>
+            <input type="number" v-model.number="addGlucose" class="input" placeholder="例如 5.6" />
+          </view>
+        </view>
+
+        <view class="ruler-wrap">
+          <ScaleRuler v-if="showAdd" :min="2" :max="16" :step="0.1" :gutter="12" :initialValue="addGlucose ?? 6" @update="onRulerUpdate" @change="onRulerChange" />
+        </view>
+
+        <view class="fixed-footer">
+          <button class="btn-primary btn-full" @click="confirmAdd">保存</button>
+        </view>
+      </view>
+    </view>
+
   </view>
   <TabBar />
 </template>
 
 <script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
 import CustomNav from '@/components/CustomNav.vue'
-
 import TabBar from '@/components/TabBar.vue'
+import ScaleRuler from '@/components/scale-ruler.vue'
+
+type RecordItem = { id: string; date: string; value: number; type: string }
+
+const current = ref(new Date())
+const pickerValue = ref(formatPickerDate(current.value))
+
+function formatPickerDate(d: Date) {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+const displayYear = computed(() => current.value.getFullYear())
+const displayMonth = computed(() => current.value.getMonth() + 1)
+
+const records = ref<RecordItem[]>(generateMockRecords(current.value))
+
+function generateMockRecords(d: Date): RecordItem[] {
+  const y = d.getFullYear()
+  const m = d.getMonth()
+  const arr: RecordItem[] = []
+  const n = Math.floor(Math.random() * 7)
+  const typesLocal = ['空腹', '随机']
+  for (let i = 0; i < n; i++) {
+    const day = Math.max(1, Math.floor(Math.random() * 28) + 1)
+    const date = new Date(y, m, day)
+    const val = Number((3 + Math.random() * 10).toFixed(1))
+    const type = typesLocal[Math.random() > 0.5 ? 0 : 1]
+    arr.push({ id: `${y}${m}${i}${Date.now()}`, date: formatDisplayDate(date), value: val, type })
+  }
+  return arr.sort((a, b) => (a.date < b.date ? 1 : -1))
+}
+
+function formatDisplayDate(d: Date) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+const averageGlucose = computed(() => {
+  if (records.value.length === 0) return '--'
+  const sum = records.value.reduce((s, r) => s + r.value, 0)
+  return (sum / records.value.length).toFixed(1)
+})
+
+function daysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+const pointCoords = computed(() => {
+  const year = current.value.getFullYear()
+  const month = current.value.getMonth()
+  const days = daysInMonth(year, month)
+  const W = 340
+  const H = 120
+  const leftPad = 10
+  const rightPad = 10
+  const topPad = 10
+  const bottomPad = 10
+  const innerW = W - leftPad - rightPad
+  const innerH = H - topPad - bottomPad
+  const values: Array<number | null> = Array(days).fill(null)
+  records.value.forEach(r => {
+    const parts = r.date.split('-')
+    if (parts.length >= 3) {
+      const y = parseInt(parts[0], 10)
+      const m = parseInt(parts[1], 10) - 1
+      const d = parseInt(parts[2], 10)
+      if (y === year && m === month && d >= 1 && d <= days) {
+        values[d - 1] = r.value
+      }
+    }
+  })
+  const numeric = values.filter(v => v !== null) as number[]
+  const min = numeric.length ? Math.min(...numeric) : 4
+  const max = numeric.length ? Math.max(...numeric) : 12
+  const range = Math.max(0.1, max - min)
+  const coords = values.map((v, idx) => {
+    const x = leftPad + (innerW * idx) / Math.max(1, days - 1)
+    if (v === null) return null
+    const y = topPad + innerH - ((v - min) / range) * innerH
+    return { x, y }
+  })
+  return { coords, min, max }
+})
+
+const chartCanvas = ref<HTMLCanvasElement | null>(null)
+const vm = getCurrentInstance()
+
+function getCanvasSize(): Promise<{ width: number; height: number }> {
+  return new Promise(resolve => {
+    try {
+      if (typeof uni !== 'undefined' && uni.createSelectorQuery) {
+        uni.createSelectorQuery().select('#bgChart').boundingClientRect((res: any) => {
+          if (res) resolve({ width: res.width || 340, height: res.height || 120 })
+          else resolve({ width: 340, height: 120 })
+        }).exec()
+      } else if (chartCanvas.value) {
+        resolve({ width: chartCanvas.value.clientWidth || 340, height: chartCanvas.value.clientHeight || 120 })
+      } else {
+        resolve({ width: 340, height: 120 })
+      }
+    } catch (e) {
+      resolve({ width: 340, height: 120 })
+    }
+  })
+}
+
+async function drawChart() {
+  const canvas = chartCanvas.value as HTMLCanvasElement | null
+  if (canvas && canvas.getContext) {
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    const dpr = (typeof uni !== 'undefined' && uni.getSystemInfoSync) ? (uni.getSystemInfoSync().pixelRatio || (window?.devicePixelRatio || 1)) : (window?.devicePixelRatio || 1)
+    const cssWidth = canvas.clientWidth || 340
+    const cssHeight = canvas.clientHeight || 120
+    canvas.width = Math.round(cssWidth * dpr)
+    canvas.height = Math.round(cssHeight * dpr)
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, cssWidth, cssHeight)
+    ctx.strokeStyle = 'rgba(0,0,0,0.04)'
+    ctx.lineWidth = 1
+    for (let i = 0; i <= 4; i++) {
+      const y = (cssHeight / 4) * i
+      ctx.beginPath()
+      ctx.moveTo(0, y)
+      ctx.lineTo(cssWidth, y)
+      ctx.stroke()
+    }
+    const scaleX = cssWidth / 340
+    const scaleY = cssHeight / 120
+    const { coords, min, max } = pointCoords.value
+    const pts = coords.map((p: any) => p ? { x: p.x * scaleX, y: p.y * scaleY } : null)
+    const validPts = pts.filter((p: any) => p !== null) as { x: number; y: number }[]
+    ctx.fillStyle = '#999'
+    ctx.font = '12px sans-serif'
+    ctx.textAlign = 'right'
+    ctx.textBaseline = 'middle'
+    const range = Math.max(0.1, max - min)
+    for (let j = 0; j <= 4; j++) {
+      const val = Math.round((max - (range * j) / 4) * 10) / 10
+      const y = 10 * scaleY + ((cssHeight - 10 * 2) * j) / 4
+      ctx.fillText(String(val), 10 * scaleX - 6, y)
+    }
+    if (validPts.length) {
+      ctx.beginPath()
+      ctx.moveTo(validPts[0].x, validPts[0].y)
+      validPts.forEach(p => ctx.lineTo(p.x, p.y))
+      ctx.strokeStyle = '#ff6a00'
+      ctx.lineWidth = 2
+      ctx.stroke()
+    }
+    validPts.forEach(p => { ctx.beginPath(); ctx.arc(p.x, p.y, 3, 0, Math.PI * 2); ctx.fillStyle = '#ff6a00'; ctx.fill() })
+    return
+  }
+
+  try {
+    const size = await getCanvasSize()
+    const cssWidth = size.width || 340
+    const cssHeight = size.height || 120
+    const ctx = (typeof uni !== 'undefined' && uni.createCanvasContext) ? uni.createCanvasContext('bgChart', vm?.proxy) : null
+    if (!ctx) return
+    ctx.clearRect && ctx.clearRect(0, 0, cssWidth, cssHeight)
+    ctx.setStrokeStyle && ctx.setStrokeStyle('rgba(0,0,0,0.04)')
+    for (let i = 0; i <= 4; i++) {
+      const y = (cssHeight / 4) * i
+      ctx.beginPath && ctx.beginPath()
+      ctx.moveTo && ctx.moveTo(0, y)
+      ctx.lineTo && ctx.lineTo(cssWidth, y)
+      ctx.stroke && ctx.stroke()
+    }
+    const scaleX = cssWidth / 340
+    const scaleY = cssHeight / 120
+    const { coords, min, max } = pointCoords.value
+    const pts = coords.map((p: any) => p ? { x: p.x * scaleX, y: p.y * scaleY } : null)
+    const validPts = pts.filter((p: any) => p !== null) as { x: number; y: number }[]
+    ctx.setFillStyle && ctx.setFillStyle('#999')
+    ctx.setFontSize && ctx.setFontSize(12)
+    const range = Math.max(0.1, max - min)
+    for (let j = 0; j <= 4; j++) {
+      const val = Math.round((max - (range * j) / 4) * 10) / 10
+      const y = 10 * scaleY + ((cssHeight - 10 * 2) * j) / 4
+      ctx.fillText && ctx.fillText(String(val), 10 * scaleX - 6, y)
+    }
+    if (validPts.length) {
+      ctx.beginPath && ctx.beginPath()
+      ctx.moveTo && ctx.moveTo(validPts[0].x, validPts[0].y)
+      validPts.forEach(p => ctx.lineTo && ctx.lineTo(p.x, p.y))
+      ctx.setStrokeStyle && ctx.setStrokeStyle('#ff6a00')
+      ctx.setLineWidth && ctx.setLineWidth(2)
+      ctx.stroke && ctx.stroke()
+    }
+    validPts.forEach(p => { ctx.beginPath && ctx.beginPath(); ctx.arc && ctx.arc(p.x, p.y, 3, 0, Math.PI * 2); ctx.setFillStyle && ctx.setFillStyle('#ff6a00'); ctx.fill && ctx.fill() })
+    ctx.draw && ctx.draw(true)
+  } catch (err) {
+    // ignore
+  }
+}
+
+onMounted(() => { nextTick(() => drawChart()) })
+
+watch([() => records.value, () => current.value], () => { nextTick(() => drawChart()) }, { deep: true })
+
+onBeforeUnmount(() => { /* nothing */ })
+
+function prevMonth() { const d = new Date(current.value); d.setMonth(d.getMonth() - 1); current.value = d; pickerValue.value = formatPickerDate(d); records.value = generateMockRecords(d) }
+function nextMonth() { const d = new Date(current.value); d.setMonth(d.getMonth() + 1); current.value = d; pickerValue.value = formatPickerDate(d); records.value = generateMockRecords(d) }
+function onPickerChange(e: any) { const val = e?.detail?.value || e; const parts = (val as string).split('-'); if (parts.length >= 2) { const y = parseInt(parts[0], 10); const m = parseInt(parts[1], 10) - 1; const d = new Date(y, m, 1); current.value = d; pickerValue.value = formatPickerDate(d); records.value = generateMockRecords(d) } }
+
+// 添加逻辑
+const showAdd = ref(false)
+const addDate = ref(formatPickerDate(new Date()))
+const addDateLabel = ref(formatDisplayDate(new Date()))
+const types = ['空腹', '随机']
+const typeIndex = ref(0)
+const addGlucose = ref<number | null>(null)
+
+function onTypeChange(e: any) { typeIndex.value = e?.detail?.value ?? e }
+function onRulerUpdate(v: number) { addGlucose.value = Number(v.toFixed ? Number(v.toFixed(1)) : v) }
+function onRulerChange(v: number) { addGlucose.value = Number(v.toFixed ? Number(v.toFixed(1)) : v) }
+
+function openAdd() { showAdd.value = true; if (!addGlucose.value) addGlucose.value = 6 }
+function closeAdd() { showAdd.value = false; addGlucose.value = null }
+
+function onAddDateChange(e: any) { const val = e?.detail?.value || e; addDate.value = val; addDateLabel.value = val.replace(/^(.{10}).*$/, '$1') }
+
+function confirmAdd() {
+  if (!addGlucose.value) { uni.showToast && uni.showToast({ title: '请输入血糖值', icon: 'none' }); return }
+  const id = `user-${Date.now()}`
+  const item: RecordItem = { id, date: addDateLabel.value, value: Number(Number(addGlucose.value).toFixed(1)), type: types[typeIndex.value] }
+  const parts = addDate.value.split('-')
+  const addY = parseInt(parts[0], 10)
+  const addM = parseInt(parts[1], 10) - 1
+  if (addY === current.value.getFullYear() && addM === current.value.getMonth()) { records.value = [item, ...records.value] }
+  uni.showToast && uni.showToast({ title: '已添加', icon: 'success' })
+  closeAdd()
+}
+
+function confirmDeleteRecord(id: string) { if (typeof uni !== 'undefined' && uni.showModal) { uni.showModal({ title: '删除', content: '确认删除该条记录吗？', success(res: any) { if (res.confirm) records.value = records.value.filter(r => r.id !== id) } }) } else { records.value = records.value.filter(r => r.id !== id) } }
 </script>
 
-<style>
-.placeholder { padding: 40rpx; color: #666 }
-.content { padding-top: calc(var(--status-bar-height) + 44px) }
+<style scoped>
+.page { min-height: calc(100vh); padding-top: calc(var(--status-bar-height) + 44px); background: #f5f6f8; box-sizing: border-box }
+.header { padding: 20rpx 40rpx }
+.month-selector { display: flex; align-items: center; justify-content: center; gap: 12rpx }
+.month-label { font-size: 34rpx; color: #333 }
+.btn { background: transparent; border: none; font-size: 36rpx; color: #666 }
+.content { padding: 20rpx 24rpx 100rpx 24rpx }
+.chart-wrap { padding: 12rpx 24rpx }
+.chart-header { font-size: 28rpx; color: #666; margin-bottom: 10rpx }
+.chart-canvas { width: 100%; height: 160rpx; display: block }
+.summary { padding: 20rpx; color: #666; font-size: 28rpx }
+.list { background: #fff; border-radius: 12rpx; padding: 10rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03) }
+.empty { padding: 40rpx; text-align: center; color: #999 }
+.list-item { display: flex; align-items: center; padding: 20rpx; border-bottom: 1rpx solid #f0f0f0 }
+.list-item .date { color: #666 }
+.list-item .value { color: #333; font-weight: 600; flex: 1; text-align: right }
+.btn-delete { width: 80rpx; height: 60rpx; min-width: 60rpx; min-height: 60rpx; display: inline-flex; align-items: center; justify-content: center; background: #fff0f0; color: #d9534f; border: 1rpx solid rgba(217,83,79,0.15); border-radius: 8rpx; margin-left: 30rpx }
+.fab { position: fixed; right: 28rpx; bottom: 160rpx; width: 110rpx; height: 110rpx; border-radius: 999px; background: linear-gradient(180deg, #ff7a00, #ff4a00); display: flex; align-items: center; justify-content: center; box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.2); z-index: 1200 }
+.fab-inner { color: #fff; font-size: 56rpx; line-height: 56rpx }
+.modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; z-index: 1300 }
+.modal-backdrop { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.4) }
+.modal-panel { position: relative; width: 100%; background: #fff; border-top-left-radius: 18rpx; border-top-right-radius: 18rpx; padding: 28rpx 24rpx 140rpx 24rpx; box-shadow: 0 -8rpx 30rpx rgba(0,0,0,0.12) }
+.modal-title { font-size: 56rpx; margin-block:  60rpx; color: #222; font-weight: 700; letter-spacing: 1rpx }
+.modal-inner { max-width: 70%; margin: 0 auto }
+.form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34rpx; padding: 14rpx 0; font-size: 32rpx }
+.input { width: 240rpx; text-align: right; padding: 16rpx; border-radius: 14rpx; border: 1rpx solid #eee; background: #fff7f0 }
+.picker-display { color: #333 }
+.modal-actions { display: flex; justify-content: center; gap: 12rpx; margin-top: 18rpx }
+.modal-actions.full { padding: 6rpx 0 24rpx 0 }
+.btn-primary { background: #ff6a00; color: #fff; padding: 18rpx 22rpx; border-radius: 16rpx; text-align: center; width: 50%; box-shadow: 0 10rpx 28rpx rgba(255,106,0,0.18) }
+.drag-handle { width: 64rpx; height: 6rpx; background: rgba(0,0,0,0.08); border-radius: 999px; margin: 10rpx auto 14rpx auto }
+.modal-header { display: flex; align-items: center; justify-content: center; gap: 12rpx; margin-bottom: 6rpx }
+.label { color: #666 }
+.ruler-wrap { margin: 12rpx 0 }
+.fixed-footer { position: absolute; left: 0; right: 0; bottom: 40rpx; padding: 0 24rpx }
+.btn-full { width: 100%; padding: 18rpx; border-radius: 12rpx; }
 </style>