feat(health): 血糖详情页支持周视图和月份选择器

- 新增周视图模式，可切换月/周显示
- 替换原有月份选择器为年月双列选择器
- 支持通过按钮切换上一周期/下一周期
- 图表标题根据视图模式动态显示本月或本周趋势
- 优化mock数据生成逻辑，支持按周生成记录
- 新增获取周起始日期、周结束日期和周数的工具函数
- 图表绘制逻辑适配周视图，x轴显示周一至周日
- 添加确认添加记录时判断是否属于当前周期的逻辑
- 样式调整，新增视图切换按钮和周期控制布局样式

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

@@ -4,18 +4,23 @@
 
     <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>
+        <button class="btn" @click="prevPeriod">‹</button>
+        <view class="period-controls">
+          <picker mode="multiSelector" :value="pickerValue" :range="pickerRange" @change="onPickerChange">
+            <view class="month-label">{{ displayPeriod }}</view>
+          </picker>
+          <view class="view-toggle">
+            <button :class="['toggle-btn', { active: viewMode === 'month' }]" @click="setViewMode('month')">月</button>
+            <button :class="['toggle-btn', { active: viewMode === 'week' }]" @click="setViewMode('week')">周</button>
+          </view>
+        </view>
+        <button class="btn" @click="nextPeriod">›</button>
       </view>
-      <picker mode="date" :value="pickerValue" @change="onPickerChange">
-        <view class="picker-display">切换月份</view>
-      </picker>
     </view>
 
     <!-- 趋势图 - 简化canvas设置 -->
-    <view class="chart-wrap">
-      <view class="chart-header">本月趋势</view>
+  <view class="chart-wrap">
+  <view class="chart-header">{{ viewMode === 'month' ? '本月' : '本周' }}趋势</view>
       <canvas 
         canvas-id="bgChart" 
         id="bgChart" 
@@ -97,7 +102,17 @@ type RecordItem = { id: string; date: string; value: number; type: string }
 
 // 当前展示年月
 const current = ref(new Date())
-const pickerValue = ref(formatPickerDate(current.value))
+// pickerValue 使用 multiSelector，两列：年份偏移（2000起），月份（0-11）
+const pickerValue = ref([current.value.getFullYear() - 2000, current.value.getMonth()]) // [yearOffset, month]
+
+// 视图模式：'month' 或 'week'
+const viewMode = ref<'month' | 'week'>('month')
+
+// 年月选择器的选项范围
+const pickerRange = ref([
+  Array.from({ length: 50 }, (_, i) => `${2000 + i}年`), // 2000-2049年
+  Array.from({ length: 12 }, (_, i) => `${i + 1}月`) // 1-12月
+])
 
 // 明确的canvas尺寸（将由 getCanvasSize 初始化以匹配设备宽度）
 const canvasWidth = ref(700) // 初始值，会在 mounted 时覆盖
@@ -124,29 +139,80 @@ function formatPickerDate(d: Date) {
 const displayYear = computed(() => current.value.getFullYear())
 const displayMonth = computed(() => current.value.getMonth() + 1)
 
+// 显示周期的计算属性
+const displayPeriod = computed(() => {
+  if (viewMode.value === 'month') {
+    return `${displayYear.value}年 ${displayMonth.value}月`
+  } else {
+    const weekStart = getWeekStart(current.value)
+    const weekEnd = getWeekEnd(current.value)
+    return `${formatDisplayDate(weekStart)} - ${formatDisplayDate(weekEnd)}`
+  }
+})
+
 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 
-    })
+
+  if (viewMode.value === 'month') {
+    const y = d.getFullYear()
+    const m = d.getMonth()
+    const days = daysInMonth(y, m)
+    const n = Math.floor(Math.random() * Math.min(days, 7))
+    for (let i = 0; i < n; i++) {
+      const day = Math.max(1, Math.floor(Math.random() * days) + 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: `${date.getTime()}${i}${Date.now()}`, date: formatDisplayDate(date), value: val, type })
+    }
+  } else {
+    // 周视图：生成本周内的随机记录
+    const weekStart = getWeekStart(d)
+    const n = Math.floor(Math.random() * 7)
+    for (let i = 0; i < n; i++) {
+      const dayOffset = Math.floor(Math.random() * 7)
+      const date = new Date(weekStart)
+      date.setDate(weekStart.getDate() + dayOffset)
+      const val = Number((3 + Math.random() * 10).toFixed(1))
+      const type = typesLocal[Math.random() > 0.5 ? 0 : 1]
+      arr.push({ id: `${date.getTime()}${i}${Date.now()}`, date: formatDisplayDate(date), value: val, type })
+    }
   }
+
   return arr.sort((a, b) => (a.date < b.date ? 1 : -1))
 }
 
+// 获取指定日期所在周的开始日期（星期一）
+function getWeekStart(date: Date): Date {
+  const d = new Date(date)
+  d.setHours(0, 0, 0, 0)
+  const day = d.getDay()
+  const diff = day === 0 ? -6 : 1 - day
+  d.setDate(d.getDate() + diff)
+  d.setHours(0, 0, 0, 0)
+  return d
+}
+
+// 获取指定日期所在周的结束日期（星期日）
+function getWeekEnd(date: Date): Date {
+  const d = getWeekStart(date)
+  d.setDate(d.getDate() + 6)
+  d.setHours(0, 0, 0, 0)
+  return d
+}
+
+// 获取指定日期所在周的周数（一年中的第几周）
+function getWeekNumber(date: Date): number {
+  const d = new Date(date)
+  d.setHours(0, 0, 0, 0)
+  d.setDate(d.getDate() + 4 - (d.getDay() || 7))
+  const yearStart = new Date(d.getFullYear(), 0, 1)
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
+}
+
 // 将 records 聚合为每天一个点（取最新记录）
 function aggregateDaily(recordsArr: RecordItem[], year: number, month: number) {
   const map = new Map<number, RecordItem>()
@@ -235,53 +301,79 @@ async function drawChart() {
 
   const year = current.value.getFullYear()
   const month = current.value.getMonth()
-  const days = daysInMonth(year, month)
-  
-  // 生成合理的categories - 只显示关键日期
-  const categories: string[] = []
-  const showLabelDays = []
-  
-  // 选择要显示的标签：1号、中间几天、最后一天
-  if (days > 0) {
-    showLabelDays.push(1) // 第1天
-    if (days > 1) showLabelDays.push(days) // 最后一天
-    // 中间添加2-3个关键点
-    if (days > 7) showLabelDays.push(Math.ceil(days / 3))
-    if (days > 14) showLabelDays.push(Math.ceil(days * 2 / 3))
-  }
+  let categories: string[] = []
+  let showLabelDays: number[] = []
   
-  for (let d = 1; d <= days; d++) {
-    if (showLabelDays.includes(d)) {
-      categories.push(`${d}日`)
-    } else {
-      categories.push('')
+  if (viewMode.value === 'month') {
+    const days = daysInMonth(year, month)
+    if (days > 0) {
+      showLabelDays.push(1)
+      if (days > 1) showLabelDays.push(days)
+      if (days > 7) showLabelDays.push(Math.ceil(days / 3))
+      if (days > 14) showLabelDays.push(Math.ceil(days * 2 / 3))
+    }
+    for (let d = 1; d <= days; d++) {
+      categories.push(showLabelDays.includes(d) ? `${d}日` : '')
+    }
+  } else {
+    // 周视图
+    const weekStart = getWeekStart(current.value)
+    const weekDays = ['一', '二', '三', '四', '五', '六', '日']
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(weekStart)
+      date.setDate(weekStart.getDate() + i)
+      categories.push(`${date.getDate()}日(${weekDays[i]})`)
     }
   }
 
   // 只为有记录的天生成categories和data，避免将无数据天设为0
   const data: number[] = []
   const filteredCategories: string[] = []
-  // 使用Map按日聚合，保留最新记录（records 数组头部为最新）
   const dayMap = new Map<number, RecordItem>()
-  for (const r of records.value) {
-    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) {
-        // 以最后遍历到的（数组顺序保证头部为最新）作为最终值
-        dayMap.set(d, r)
+  if (viewMode.value === 'month') {
+    for (const r of records.value) {
+      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) {
+          dayMap.set(d, r)
+        }
+      }
+    }
+    const sortedDays = Array.from(dayMap.keys()).sort((a, b) => a - b)
+    for (const d of sortedDays) {
+      const rec = dayMap.get(d)!
+      filteredCategories.push(`${d}日`)
+      data.push(rec.value)
+    }
+  } else {
+    // 周视图：按周聚合
+    const weekStart = getWeekStart(current.value)
+    for (const r of records.value) {
+      const parts = r.date.split('-')
+      if (parts.length >= 3) {
+        const recordDate = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10))
+        const recordWeekStart = getWeekStart(recordDate)
+        if (recordWeekStart.getTime() === weekStart.getTime()) {
+          // 计算星期内的序号（1-7）
+          const dayIndex = recordDate.getDate() - weekStart.getDate() + 1
+          // 保留当天最新记录
+          dayMap.set(dayIndex, r)
+        }
+      }
+    }
+    // 按星期一到星期日输出
+    const weekDays = ['一', '二', '三', '四', '五', '六', '日']
+    for (let i = 1; i <= 7; i++) {
+      const rec = dayMap.get(i)
+      if (rec) {
+        const date = new Date(rec.date)
+        filteredCategories.push(`${date.getDate()}日(${weekDays[i-1]})`)
+        data.push(rec.value)
       }
     }
-  }
-
-  // 将有数据的日期按日顺序输出
-  const sortedDays = Array.from(dayMap.keys()).sort((a, b) => a - b)
-  for (const d of sortedDays) {
-    const rec = dayMap.get(d)!
-    filteredCategories.push(`${d}日`)
-    data.push(rec.value)
   }
 
   // 如果没有任何数据，则回退为整月空数据（避免 uCharts 抛错）
@@ -518,11 +610,7 @@ async function updateChartData() {
 
     chartInstance.value.updateData({
       categories: categoriesToUse,
-      series: [{
-        name: '血糖',
-        data: data,
-        color: '#ff6a00'
-      }]
+      series: [{ name: '血糖', data: data, color: '#ff6a00' }]
     })
 
     // 更新Y轴范围
@@ -611,34 +699,50 @@ async function rebuildChart() {
   }
 }
 
-// 其他函数保持不变
-async function prevMonth() {
+// 其他函数（含周期切换、picker 处理）
+async function prevPeriod() {
   const d = new Date(current.value)
-  d.setMonth(d.getMonth() - 1)
+  if (viewMode.value === 'month') {
+    d.setMonth(d.getMonth() - 1)
+  } else {
+    d.setDate(d.getDate() - 7)
+  }
   current.value = d
-  pickerValue.value = formatPickerDate(d)
+  pickerValue.value = [d.getFullYear() - 2000, d.getMonth()]
   records.value = generateMockRecords(d)
   await rebuildChart()
 }
 
-async function nextMonth() {
+async function nextPeriod() {
   const d = new Date(current.value)
-  d.setMonth(d.getMonth() + 1)
+  if (viewMode.value === 'month') {
+    d.setMonth(d.getMonth() + 1)
+  } else {
+    d.setDate(d.getDate() + 7)
+  }
   current.value = d
-  pickerValue.value = formatPickerDate(d)
+  pickerValue.value = [d.getFullYear() - 2000, d.getMonth()]
   records.value = generateMockRecords(d)
   await rebuildChart()
 }
 
+async function setViewMode(mode: 'month' | 'week') {
+  if (viewMode.value !== mode) {
+    viewMode.value = mode
+    records.value = generateMockRecords(current.value)
+    await rebuildChart()
+  }
+}
+
 async function onPickerChange(e: any) {
+  // multiSelector 会返回 [yearOffset, monthIndex]
   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
+  if (Array.isArray(val) && val.length >= 2) {
+    const y = 2000 + Number(val[0])
+    const m = Number(val[1])
     const d = new Date(y, m, 1)
     current.value = d
-    pickerValue.value = formatPickerDate(d)
+    pickerValue.value = [Number(val[0]), Number(val[1])]
     records.value = generateMockRecords(d)
     await rebuildChart()
   }
@@ -678,8 +782,19 @@ async function confirmAdd() {
   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] 
+  const addD = parseInt(parts[2], 10)
+  const addDateObj = new Date(addY, addM, addD)
+  let isInCurrentPeriod = false
+  if (viewMode.value === 'month') {
+    isInCurrentPeriod = addY === current.value.getFullYear() && addM === current.value.getMonth()
+  } else {
+    const weekStart = getWeekStart(current.value)
+    const recordWeekStart = getWeekStart(addDateObj)
+    isInCurrentPeriod = weekStart.getTime() === recordWeekStart.getTime()
+  }
+
+  if (isInCurrentPeriod) {
+    records.value = [item, ...records.value]
   }
   uni.showToast && uni.showToast({ title: '已添加', icon: 'success' })
   closeAdd()
@@ -729,6 +844,35 @@ async function confirmDeleteRecord(id: string) {
   gap: 12rpx 
 }
 
+.period-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.view-toggle {
+  display: flex;
+  gap: 4rpx;
+}
+
+.toggle-btn {
+  padding: 4rpx 12rpx;
+  border: 1rpx solid #ddd;
+  background: #f5f5f5;
+  color: #666;
+  border-radius: 6rpx;
+  font-size: 24rpx;
+  min-width: 60rpx;
+  text-align: center;
+}
+
+.toggle-btn.active {
+  background: #ff6a00;
+  color: #fff;
+  border-color: #ff6a00;
+}
+
 .month-label { 
   font-size: 34rpx; 
   color: #333