From b5217ade6709aa713b80b1dd162e808758bcc39e Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Thu, 20 Aug 2026 19:50:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue   |  16 +--
 src/pages/record/record.vue | 211 +++++++++++++++++++++++++++++++++++-
 2 files changed, 210 insertions(+), 17 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 292d70a..1ed4a00 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -173,22 +173,8 @@ const overviewItems = [
 
 // 今日计划
 const plans = [
-  { icon: '🚶', label: '步行 8000 步', done: true },
-  { icon: '🥤', label: '喝水 2000ml', done: true },
+  { icon: '🏃', label: '运动30分钟', done: true },
   { icon: '🛏️', label: '23:00 前入睡', done: false },
-  { icon: '💊', label: '服用维生素 D', done: false },
-]
-
-// 快速记录
-const quickActions = [
-  { icon: '🩺', label: '血压', bg: 'bg-[#fef2f2]', border: 'border-[#fecaca]' },
-  { icon: '😴', label: '睡眠', bg: 'bg-[#e8f1ff]', border: 'border-[#bfdbfe]' },
-  { icon: '⚖️', label: '体重', bg: 'bg-[#fef3cd]', border: 'border-[#fde68a]' },
-  { icon: '💧', label: '喝水', bg: 'bg-[#e0f7fa]', border: 'border-[#a5f3fc]' },
-  { icon: '🍎', label: '饮食', bg: 'bg-[#f0fdf4]', border: 'border-[#bbf7d0]' },
-  { icon: '😊', label: '心情', bg: 'bg-[#fdf2f8]', border: 'border-[#fbcfe8]' },
-  { icon: '💊', label: '用药', bg: 'bg-[#f5f3ff]', border: 'border-[#ddd6fe]' },
-  { icon: '📝', label: '笔记', bg: 'bg-[#f8fafc]', border: 'border-[#cbd5e1]' },
 ]
 
 const recordTypes = [
diff --git a/src/pages/record/record.vue b/src/pages/record/record.vue
index 9fe5ba2..be15044 100644
--- a/src/pages/record/record.vue
+++ b/src/pages/record/record.vue
@@ -1,13 +1,220 @@
 <template>
-  <view class="mt-10 text-center text-green-500">
-    记录
+  <!-- 页面容器 -->
+  <view class="min-h-screen bg-[#f2f4f3]">
+    <!-- 顶部日期栏：左右箭头 + 日期居中 + 回到今天 -->
+    <view class="sticky top-0 z-10 bg-white p-2 shadow-sm">
+      <view class="flex items-center justify-evenly">
+        <wd-button icon="caret-left" type="success" :round="true" size="small" @click="changeDay(-1)" />
+        <view class="flex flex-col items-center" @click="openDatePicker">
+          <text class="text-base text-gray-800 font-semibold">{{ displayDate }}</text>
+        </view>
+        <wd-button icon="caret-right" type="success" :round="true" size="small" @click="changeDay(1)" />
+
+        <wd-button type="success" size="small" @click="goToday">
+          回到今天
+        </wd-button>
+      </view>
+    </view>
+
+    <!-- 时间轴区域 -->
+    <view class="px-5 py-6">
+      <!-- 时间轴容器 -->
+      <view class="relative pl-6">
+        <view
+          class="absolute bottom-1 top-1 w-[2px] from-[#07c160] via-[#2E5B8C] to-[#dde3e0] bg-gradient-to-b"
+          style="left: 0;"
+        />
+
+        <!-- 每条记录 -->
+        <view
+          v-for="(item, idx) in records"
+          :key="idx"
+          class="relative mb-5 last:mb-0"
+        >
+          <view
+            class="absolute border-[2.5px] border-white rounded-full shadow-sm"
+            style="width: 14px; height: 14px; left: -30px; top: 0; z-index: 2;"
+            :class="item.color"
+          />
+
+          <!-- 卡片 -->
+          <view class="rounded-xl bg-white p-3.5 shadow-sm">
+            <!-- 第一行：日期时间 + 状态标签 -->
+            <view class="flex items-center justify-between">
+              <text class="text-xs text-gray-400 font-mono">{{ item.datetime }}</text>
+              <wd-tag type="primary" round>
+                {{ item.status }}
+              </wd-tag>
+            </view>
+
+            <!-- 第二行：图标 + 指标名 -->
+            <view class="mt-1.5 flex items-center gap-2">
+              <view class="h-7 w-7 flex items-center justify-center rounded-lg text-sm" :class="item.color">
+                <text>{{ item.icon }}</text>
+              </view>
+              <text class="text-sm text-gray-700 font-medium">{{ item.label }}</text>
+            </view>
+
+            <!-- 第三行：数值 -->
+            <text class="mt-1.5 block text-xl text-gray-800 font-bold">{{ item.value }}</text>
+
+            <!-- 第四行：备注 -->
+            <text v-if="item.note" class="mt-0.5 block text-xs text-gray-400 leading-relaxed">
+              {{ item.note }}
+            </text>
+          </view>
+        </view>
+
+        <!-- 无数据 -->
+        <view v-if="records.length === 0" class="py-16 text-center">
+          <text class="text-4xl">📭</text>
+          <text class="mt-3 block text-sm text-gray-400">这一天还没有记录</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- AI 分析模块（最底部） -->
+    <view class="px-4 pb-8">
+      <view class="rounded-2xl from-[#07c160] to-[#2baa5e] bg-gradient-to-br p-4 shadow-sm">
+        <!-- 标题行 -->
+        <view class="flex items-center justify-between">
+          <view class="flex items-center gap-2">
+            <text class="text-base">🤖</text>
+            <text class="text-sm text-white font-semibold">AI 健康分析</text>
+          </view>
+          <text class="text-[10px] text-white/70">{{ aiSummary.dateRange }}</text>
+        </view>
+
+        <!-- 摘要 -->
+        <text class="mt-2.5 block text-sm text-white/95 leading-relaxed">
+          {{ aiSummary.text }}
+        </text>
+
+        <!-- 标签 -->
+        <view class="mt-3 flex flex-wrap gap-1.5">
+          <text
+            v-for="(tag, tIdx) in aiSummary.tags"
+            :key="tIdx"
+            class="rounded-full bg-white/20 px-2.5 py-1 text-[10px] text-white"
+          >
+            {{ tag }}
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 日期选择器 -->
+    <wd-datetime-picker
+      v-model="currentDate"
+      v-model:visible="showDatePicker"
+      type="date"
+      :max-date="Date.now()"
+      @confirm="onDateConfirm"
+    />
   </view>
 </template>
 
 <script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+
 definePage({
   style: {
     navigationBarTitleText: '记录',
   },
 })
+
+// ===== 日期逻辑 =====
+const currentDate = ref(Date.now())
+const showDatePicker = ref(false)
+
+const displayDate = computed(() => {
+  const d = new Date(currentDate.value)
+  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
+})
+
+function changeDay(offset: number) {
+  const d = new Date(currentDate.value)
+  d.setDate(d.getDate() + offset)
+  currentDate.value = d.getTime()
+}
+
+function goToday() {
+  currentDate.value = Date.now()
+}
+
+function openDatePicker() {
+  showDatePicker.value = true
+}
+
+function onDateConfirm() {
+  // picker 确认后 currentDate 已自动更新
+}
+
+// ===== 时间轴数据 =====
+const records = ref([
+  {
+    icon: '😴',
+    label: '睡眠',
+    value: '7.5 h',
+    datetime: '2026-08-20 07:30',
+    note: '质量良好，深睡2.1h',
+    color: 'bg-[#2E5B8C]',
+    status: '良好',
+  },
+  {
+    icon: '⚖️',
+    label: '体重',
+    value: '68.5 kg',
+    datetime: '2026-08-20 08:30',
+    note: '早起空腹，较昨日 -0.3kg',
+    color: 'bg-[#E89E3A]',
+    status: '正常',
+  },
+  {
+    icon: '❤️',
+    label: '血压',
+    value: '118/76 mmHg',
+    datetime: '2026-08-20 09:00',
+    note: '服药后测量，静坐5分钟',
+    color: 'bg-[#C04A3C]',
+    status: '正常',
+  },
+  {
+    icon: '📈',
+    label: '血糖',
+    value: '5.2 mmol/L',
+    datetime: '2026-08-20 10:30',
+    note: '早餐后2小时',
+    color: 'bg-[#9C27B0]',
+    status: '正常',
+  },
+  {
+    icon: '🏃',
+    label: '运动',
+    value: '30 min',
+    datetime: '2026-08-20 14:00',
+    note: '快走，公园环道',
+    color: 'bg-[#3A7C5B]',
+    status: '达标',
+  },
+  {
+    icon: '💓',
+    label: '心率',
+    value: '68 bpm',
+    datetime: '2026-08-20 16:00',
+    note: '静息心率',
+    color: 'bg-[#D32F2F]',
+    status: '正常',
+  },
+])
+
+const aiSummary = ref({
+  dateRange: '基于今日数据',
+  text: '今日整体健康状态良好。体重平稳，血压正常，建议增加有氧运动频率，保持当前作息规律。',
+  tags: ['🟢 体重稳定', '❤️ 血压正常', '🏃 建议多运动', '😴 睡眠良好'],
+})
+
+onMounted(() => {
+  // 这里可以接接口拉取当天的记录数据
+})
 </script>