feat(health): 实现血压记录详情页功能

- 新增月份选择器，支持前后月切换和日期选择
- 添加血压数据图表展示，支持收缩压和舒张压趋势可视化
- 实现血压记录列表展示，包含平均值计算和删除功能
- 集成滑动刻度尺组件，用于输入收缩压和舒张压数值
- 添加血压记录模态框，支持新增血压数据
- 优化页面样式布局，提升用户体验和视觉效果
- 实现血压数据mock生成和图表绘制逻辑
- 添加canvas图表渲染支持，兼容不同平台环境

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

@@ -1,18 +1,421 @@
 <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="bpChart" canvas-id="bpChart" class="chart-canvas" width="340" height="140"></canvas>
+    </view>
+
+    <view class="content">
+      <view class="summary">共 {{ records.length }} 条记录，本月平均：{{ averageSystolic }}/{{ averageDiastolic }} mmHg</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.s }}/{{ item.d }} mmHg</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">收缩压 (S)</text>
+            <input type="number" v-model.number="addSystolic" class="input" placeholder="收缩压" />
+          </view>
+          <view class="form-row">
+            <text class="label">舒张压 (D)</text>
+            <input type="number" v-model.number="addDiastolic" class="input" placeholder="舒张压" />
+          </view>
+        </view>
+
+        <view class="ruler-wrap">
+          <view class="ruler-row">
+            <ScaleRuler v-if="showAdd" :min="80" :max="220" :step="1" :gutter="16" :initialValue="addSystolic ?? 120" @update="onSUpdate" @change="onSChange" />
+          </view>
+          <view class="ruler-row">
+            <ScaleRuler v-if="showAdd" :min="40" :max="140" :step="1" :gutter="16" :initialValue="addDiastolic ?? 80" @update="onDUpdate" @change="onDChange" />
+          </view>
+        </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; s: number; d: number }
+
+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)
+  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 s = 100 + Math.floor(Math.random() * 40)
+    const dval = 60 + Math.floor(Math.random() * 30)
+    arr.push({ id: `${y}${m}${i}${Date.now()}`, date: formatDisplayDate(date), s, d: dval })
+  }
+  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 averageSystolic = computed(() => {
+  if (records.value.length === 0) return '--'
+  const sum = records.value.reduce((s, r) => s + r.s, 0)
+  return Math.round(sum / records.value.length)
+})
+const averageDiastolic = computed(() => {
+  if (records.value.length === 0) return '--'
+  const sum = records.value.reduce((s, r) => s + r.d, 0)
+  return Math.round(sum / records.value.length)
+})
+
+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 = 140
+  const leftPad = 10
+  const rightPad = 10
+  const topPad = 10
+  const bottomPad = 10
+  const innerW = W - leftPad - rightPad
+  const innerH = H - topPad - bottomPad
+  const sValues: Array<number | null> = Array(days).fill(null)
+  const dValues: 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) {
+        sValues[d - 1] = r.s
+        dValues[d - 1] = r.d
+      }
+    }
+  })
+  const numericS = sValues.filter(v => v !== null) as number[]
+  const numericD = dValues.filter(v => v !== null) as number[]
+  const min = Math.min(numericD.length ? Math.min(...numericD) : 50, numericS.length ? Math.min(...numericS) : 90)
+  const max = Math.max(numericS.length ? Math.max(...numericS) : 140, numericD.length ? Math.max(...numericD) : 90)
+  const range = Math.max(1, max - min)
+  const sCoords = sValues.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 }
+  })
+  const dCoords = dValues.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 { sCoords, dCoords, 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('#bpChart').boundingClientRect((res: any) => {
+          if (res) resolve({ width: res.width || 340, height: res.height || 140 })
+          else resolve({ width: 340, height: 140 })
+        }).exec()
+      } else if (chartCanvas.value) {
+        resolve({ width: chartCanvas.value.clientWidth || 340, height: chartCanvas.value.clientHeight || 140 })
+      } else {
+        resolve({ width: 340, height: 140 })
+      }
+    } catch (e) {
+      resolve({ width: 340, height: 140 })
+    }
+  })
+}
+
+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 || 140
+    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 / 140
+    const { sCoords, dCoords, min, max } = pointCoords.value
+    const ptsS = sCoords.map(p => p ? { x: p.x * scaleX, y: p.y * scaleY } : null)
+    const ptsD = dCoords.map(p => p ? { x: p.x * scaleX, y: p.y * scaleY } : null)
+    const validS = ptsS.filter(p => p !== null) as { x: number; y: number }[]
+    const validD = ptsD.filter(p => 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(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 (validD.length) {
+      ctx.beginPath()
+      ctx.moveTo(validD[0].x, validD[0].y)
+      validD.forEach(p => ctx.lineTo(p.x, p.y))
+      ctx.strokeStyle = '#007aff'
+      ctx.lineWidth = 2
+      ctx.stroke()
+    }
+    if (validS.length) {
+      ctx.beginPath()
+      ctx.moveTo(validS[0].x, validS[0].y)
+      validS.forEach(p => ctx.lineTo(p.x, p.y))
+      ctx.strokeStyle = '#ff6a00'
+      ctx.lineWidth = 2
+      ctx.stroke()
+    }
+    validD.forEach(p => { ctx.beginPath(); ctx.arc(p.x, p.y, 3, 0, Math.PI * 2); ctx.fillStyle = '#007aff'; ctx.fill() })
+    validS.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 || 140
+    const ctx = (typeof uni !== 'undefined' && uni.createCanvasContext) ? uni.createCanvasContext('bpChart', 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 / 140
+    const { sCoords, dCoords, min, max } = pointCoords.value
+    const ptsS = sCoords.map(p => p ? { x: p.x * scaleX, y: p.y * scaleY } : null)
+    const ptsD = dCoords.map(p => p ? { x: p.x * scaleX, y: p.y * scaleY } : null)
+    const validS = ptsS.filter(p => p !== null) as { x: number; y: number }[]
+    const validD = ptsD.filter(p => p !== null) as { x: number; y: number }[]
+    ctx.setFillStyle && ctx.setFillStyle('#999')
+    ctx.setFontSize && ctx.setFontSize(12)
+    const range = Math.max(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 (validD.length) {
+      ctx.beginPath && ctx.beginPath()
+      ctx.moveTo && ctx.moveTo(validD[0].x, validD[0].y)
+      validD.forEach(p => ctx.lineTo && ctx.lineTo(p.x, p.y))
+      ctx.setStrokeStyle && ctx.setStrokeStyle('#007aff')
+      ctx.setLineWidth && ctx.setLineWidth(2)
+      ctx.stroke && ctx.stroke()
+    }
+    if (validS.length) {
+      ctx.beginPath && ctx.beginPath()
+      ctx.moveTo && ctx.moveTo(validS[0].x, validS[0].y)
+      validS.forEach(p => ctx.lineTo && ctx.lineTo(p.x, p.y))
+      ctx.setStrokeStyle && ctx.setStrokeStyle('#ff6a00')
+      ctx.setLineWidth && ctx.setLineWidth(2)
+      ctx.stroke && ctx.stroke()
+    }
+    validD.forEach(p => { ctx.beginPath && ctx.beginPath(); ctx.arc && ctx.arc(p.x, p.y, 3, 0, Math.PI * 2); ctx.setFillStyle && ctx.setFillStyle('#007aff'); ctx.fill && ctx.fill() })
+    validS.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 addSystolic = ref<number | null>(null)
+const addDiastolic = ref<number | null>(null)
+
+function onSUpdate(v: number) { addSystolic.value = Math.round(v) }
+function onSChange(v: number) { addSystolic.value = Math.round(v) }
+function onDUpdate(v: number) { addDiastolic.value = Math.round(v) }
+function onDChange(v: number) { addDiastolic.value = Math.round(v) }
+
+function openAdd() { showAdd.value = true; if (!addSystolic.value) addSystolic.value = 120; if (!addDiastolic.value) addDiastolic.value = 80 }
+function closeAdd() { showAdd.value = false; addSystolic.value = null; addDiastolic.value = null }
+
+function onAddDateChange(e: any) { const val = e?.detail?.value || e; addDate.value = val; addDateLabel.value = val.replace(/^(.{10}).*$/, '$1') }
+
+function confirmAdd() {
+  if (!addSystolic.value || !addDiastolic.value) { uni.showToast && uni.showToast({ title: '请输入血压值', icon: 'none' }); return }
+  const id = `user-${Date.now()}`
+  const item: RecordItem = { id, date: addDateLabel.value, s: Math.round(addSystolic.value), d: Math.round(addDiastolic.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: 200rpx; 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 }
+.ruler-row { margin-bottom: 8rpx }
+.fixed-footer { position: absolute; left: 0; right: 0; bottom: 40rpx; padding: 0 24rpx }
+.btn-full { width: 100%; padding: 18rpx; border-radius: 12rpx; }
 </style>