feat(health+miniprogram): 预约/报告/随访/资讯/家庭管理 — Chunk 4-6

后端: - 添加 articles 表迁移 + Entity + Service + Handler - 健康数据趋势 API (get_mini_trend) 注册路由 - article CRUD (list/get) + DTO 前端 (11个新页面 + 5个服务): - 预约挂号: 列表/创建向导/详情页 - 报告管理: 列表/详情页 - 随访管理: 任务列表/记录详情页 - 资讯文章: 文章详情页 - 个人中心: 就诊人管理/新增/我的报告/我的随访/用药提醒/设置 - 更新 app.config.ts 注册全部路由 - 更新 profile/article 页面为真实功能
2026-04-24 00:58:40 +08:00
parent ee9a5c4da1
commit 9ef65b9a9f
53 changed files with 6044 additions and 32 deletions
--- a/apps/miniprogram/src/app.config.ts
+++ b/apps/miniprogram/src/app.config.ts
@@ -5,8 +5,21 @@ export default defineAppConfig({
    'pages/health/input/index',
    'pages/health/trend/index',
    'pages/appointment/index',
+    'pages/appointment/create/index',
+    'pages/appointment/detail/index',
    'pages/article/index',
+    'pages/article/detail/index',
+    'pages/report/index',
+    'pages/report/detail/index',
+    'pages/followup/index',
+    'pages/followup/detail/index',
    'pages/profile/index',
+    'pages/profile/family/index',
+    'pages/profile/family-add/index',
+    'pages/profile/reports/index',
+    'pages/profile/followups/index',
+    'pages/profile/medication/index',
+    'pages/profile/settings/index',
    'pages/login/index',
  ],
  tabBar: {
--- a/apps/miniprogram/src/pages/appointment/create/index.scss
+++ b/apps/miniprogram/src/pages/appointment/create/index.scss
@@ -0,0 +1,289 @@
+@import '../../../styles/variables.scss';
+
+.create-page {
+  min-height: 100vh;
+  background: $bg;
+  padding-bottom: 140px;
+}
+
+/* 步骤指示器 */
+.step-bar {
+  display: flex;
+  justify-content: space-around;
+  padding: 32px 24px 0;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  opacity: 0.4;
+  transition: opacity 0.3s;
+}
+
+.step-item.step-active {
+  opacity: 1;
+}
+
+.step-item.step-done {
+  opacity: 0.8;
+}
+
+.step-dot {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: $bd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.3s;
+}
+
+.step-active .step-dot {
+  background: $pri;
+}
+
+.step-done .step-dot {
+  background: $acc;
+}
+
+.step-num {
+  font-size: 28px;
+  color: white;
+  font-weight: bold;
+}
+
+.step-check {
+  font-size: 28px;
+  color: white;
+  font-weight: bold;
+}
+
+.step-label {
+  font-size: 22px;
+  color: $tx2;
+}
+
+.step-active .step-label {
+  color: $pri;
+  font-weight: 500;
+}
+
+/* 步骤连接线 */
+.step-line-wrapper {
+  padding: 12px 80px 0;
+}
+
+.step-line {
+  height: 4px;
+  background: $bd;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.step-line-fill {
+  height: 100%;
+  background: linear-gradient(90deg, $acc, $pri);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+/* 步骤内容 */
+.step-content {
+  padding: 32px 24px;
+}
+
+.step-title {
+  font-size: 32px;
+  font-weight: bold;
+  color: $tx;
+  margin-bottom: 28px;
+  display: block;
+}
+
+/* 选择器卡片 */
+.picker-card {
+  background: $card;
+  border-radius: $r;
+  padding: 24px 28px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.picker-value {
+  font-size: 28px;
+  color: $tx;
+}
+
+.picker-value.placeholder {
+  color: $tx3;
+}
+
+.picker-arrow {
+  font-size: 24px;
+  color: $tx3;
+}
+
+/* 医生列表 */
+.doctor-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.doctor-card {
+  background: $card;
+  border-radius: $r;
+  padding: 24px 28px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 2px solid transparent;
+  transition: border-color 0.2s;
+}
+
+.doctor-card.doctor-selected {
+  border-color: $pri;
+  background: $pri-surface;
+}
+
+.doctor-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: $pri-l;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.doctor-avatar-text {
+  font-size: 32px;
+  color: $pri;
+  font-weight: bold;
+}
+
+.doctor-detail {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.doctor-name {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.doctor-title {
+  font-size: 24px;
+  color: $tx2;
+}
+
+.doctor-specialty {
+  font-size: 22px;
+  color: $pri;
+}
+
+.doctor-check {
+  font-size: 32px;
+  color: $pri;
+  font-weight: bold;
+}
+
+/* 表单 */
+.form-group {
+  margin-bottom: 28px;
+}
+
+.form-label {
+  font-size: 26px;
+  color: $tx2;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.form-static {
+  background: $card;
+  border-radius: $r-sm;
+  padding: 24px 28px;
+}
+
+.form-static-text {
+  font-size: 28px;
+  color: $tx;
+}
+
+.form-input {
+  background: $card;
+  border-radius: $r-sm;
+  padding: 24px 28px;
+  font-size: 28px;
+  color: $tx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 空状态 */
+.empty-state {
+  padding: 80px 0;
+  text-align: center;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+/* 底部操作栏 */
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  gap: 16px;
+  padding: 20px 24px;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  background: $card;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.btn {
+  flex: 1;
+  padding: 24px 0;
+  border-radius: $r-sm;
+  text-align: center;
+  transition: opacity 0.2s;
+}
+
+.btn-prev {
+  background: $bd-l;
+}
+
+.btn-next,
+.btn-submit {
+  background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
+}
+
+.btn-disabled {
+  opacity: 0.5;
+}
+
+.btn-text {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx2;
+}
+
+.btn-text-white {
+  color: white;
+}
--- a/apps/miniprogram/src/pages/appointment/create/index.tsx
+++ b/apps/miniprogram/src/pages/appointment/create/index.tsx
@@ -0,0 +1,268 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text, Picker, Input } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { listDoctors, createAppointment } from '../../../services/appointment';
+import { useAuthStore } from '../../../stores/auth';
+import './index.scss';
+
+const DEPARTMENTS = ['内科', '外科', '妇科', '儿科', '体检中心'];
+
+interface DoctorItem {
+  id: string;
+  name: string;
+  title?: string;
+  department?: string;
+  specialty?: string;
+}
+
+export default function AppointmentCreate() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [department, setDepartment] = useState('');
+  const [deptPickerIndex, setDeptPickerIndex] = useState(0);
+  const [doctors, setDoctors] = useState<DoctorItem[]>([]);
+  const [selectedDoctor, setSelectedDoctor] = useState<DoctorItem | null>(null);
+  const [appointmentDate, setAppointmentDate] = useState('');
+  const [timeSlot, setTimeSlot] = useState('');
+  const [reason, setReason] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const currentPatient = useAuthStore((s) => s.currentPatient);
+
+  // Step 1: 选择科室后加载医生列表
+  const onDepartmentChange = useCallback(async (e: any) => {
+    const idx = e.detail.value;
+    const dept = DEPARTMENTS[idx];
+    setDeptPickerIndex(idx);
+    setDepartment(dept);
+    setSelectedDoctor(null);
+
+    try {
+      const res = await listDoctors(dept);
+      setDoctors(res.data || []);
+    } catch {
+      Taro.showToast({ title: '加载医生失败', icon: 'none' });
+    }
+  }, []);
+
+  // Step 2: 选择医生
+  const onSelectDoctor = useCallback((doctor: DoctorItem) => {
+    setSelectedDoctor(doctor);
+  }, []);
+
+  // Step 3: 日期变更
+  const onDateChange = useCallback((e: any) => {
+    setAppointmentDate(e.detail.value);
+  }, []);
+
+  // Step 3: 时段变更
+  const onTimeSlotChange = useCallback((e: any) => {
+    setTimeSlot(e.detail.value);
+  }, []);
+
+  // Step 3: 备注变更
+  const onReasonChange = useCallback((e: any) => {
+    setReason(e.detail.value);
+  }, []);
+
+  // 提交预约
+  const handleSubmit = useCallback(async () => {
+    if (!selectedDoctor) {
+      Taro.showToast({ title: '请选择医生', icon: 'none' });
+      return;
+    }
+    if (!appointmentDate) {
+      Taro.showToast({ title: '请选择日期', icon: 'none' });
+      return;
+    }
+    if (!timeSlot.trim()) {
+      Taro.showToast({ title: '请输入时段', icon: 'none' });
+      return;
+    }
+    if (!currentPatient) {
+      Taro.showToast({ title: '请先选择就诊人', icon: 'none' });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await createAppointment({
+        patient_id: currentPatient.id,
+        doctor_id: selectedDoctor.id,
+        schedule_id: '',
+        appointment_date: appointmentDate,
+        time_slot: timeSlot.trim(),
+        reason: reason.trim() || undefined,
+      });
+      Taro.showToast({ title: '预约成功', icon: 'success' });
+      setTimeout(() => {
+        Taro.navigateBack();
+      }, 1500);
+    } catch {
+      Taro.showToast({ title: '预约失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedDoctor, appointmentDate, timeSlot, reason, currentPatient]);
+
+  // 步骤切换
+  const goNext = () => {
+    if (currentStep === 0 && !department) {
+      Taro.showToast({ title: '请先选择科室', icon: 'none' });
+      return;
+    }
+    if (currentStep === 1 && !selectedDoctor) {
+      Taro.showToast({ title: '请选择医生', icon: 'none' });
+      return;
+    }
+    setCurrentStep(Math.min(currentStep + 1, 2));
+  };
+
+  const goPrev = () => {
+    setCurrentStep(Math.max(currentStep - 1, 0));
+  };
+
+  const stepLabels = ['选择科室', '选择医生', '选择日期与时段'];
+
+  return (
+    <View className='create-page'>
+      {/* 步骤指示器 */}
+      <View className='step-bar'>
+        {stepLabels.map((label, idx) => (
+          <View
+            className={`step-item ${idx <= currentStep ? 'step-active' : ''} ${idx < currentStep ? 'step-done' : ''}`}
+            key={label}
+          >
+            <View className='step-dot'>
+              {idx < currentStep ? (
+                <Text className='step-check'>&#10003;</Text>
+              ) : (
+                <Text className='step-num'>{idx + 1}</Text>
+              )}
+            </View>
+            <Text className='step-label'>{label}</Text>
+          </View>
+        ))}
+      </View>
+
+      {/* 步骤连接线 */}
+      <View className='step-line-wrapper'>
+        <View className='step-line'>
+          <View className='step-line-fill' style={{ width: `${(currentStep / 2) * 100}%` }} />
+        </View>
+      </View>
+
+      {/* Step 1: 选择科室 */}
+      {currentStep === 0 && (
+        <View className='step-content'>
+          <Text className='step-title'>请选择就诊科室</Text>
+          <Picker mode='selector' range={DEPARTMENTS} value={deptPickerIndex} onChange={onDepartmentChange}>
+            <View className='picker-card'>
+              <Text className={`picker-value ${department ? '' : 'placeholder'}`}>
+                {department || '点击选择科室'}
+              </Text>
+              <Text className='picker-arrow'>&#9662;</Text>
+            </View>
+          </Picker>
+        </View>
+      )}
+
+      {/* Step 2: 选择医生 */}
+      {currentStep === 1 && (
+        <View className='step-content'>
+          <Text className='step-title'>{department} - 请选择医生</Text>
+          {doctors.length === 0 ? (
+            <View className='empty-state'>
+              <Text className='empty-text'>暂无可选医生</Text>
+            </View>
+          ) : (
+            <View className='doctor-list'>
+              {doctors.map((doc) => (
+                <View
+                  className={`doctor-card ${selectedDoctor?.id === doc.id ? 'doctor-selected' : ''}`}
+                  key={doc.id}
+                  onClick={() => onSelectDoctor(doc)}
+                >
+                  <View className='doctor-avatar'>
+                    <Text className='doctor-avatar-text'>{doc.name.charAt(0)}</Text>
+                  </View>
+                  <View className='doctor-detail'>
+                    <Text className='doctor-name'>{doc.name}</Text>
+                    <Text className='doctor-title'>{doc.title || '医生'}</Text>
+                    {doc.specialty && <Text className='doctor-specialty'>{doc.specialty}</Text>}
+                  </View>
+                  {selectedDoctor?.id === doc.id && (
+                    <Text className='doctor-check'>&#10003;</Text>
+                  )}
+                </View>
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* Step 3: 选择日期和时段 */}
+      {currentStep === 2 && (
+        <View className='step-content'>
+          <Text className='step-title'>选择就诊时间</Text>
+
+          <View className='form-group'>
+            <Text className='form-label'>医生</Text>
+            <View className='form-static'>
+              <Text className='form-static-text'>{selectedDoctor?.name} - {department}</Text>
+            </View>
+          </View>
+
+          <View className='form-group'>
+            <Text className='form-label'>就诊日期</Text>
+            <Picker mode='date' value={appointmentDate} onChange={onDateChange}>
+              <View className='picker-card'>
+                <Text className={`picker-value ${appointmentDate ? '' : 'placeholder'}`}>
+                  {appointmentDate || '点击选择日期'}
+                </Text>
+                <Text className='picker-arrow'>&#9662;</Text>
+              </View>
+            </Picker>
+          </View>
+
+          <View className='form-group'>
+            <Text className='form-label'>就诊时段</Text>
+            <Input
+              className='form-input'
+              placeholder='例如: 09:00-10:00'
+              value={timeSlot}
+              onInput={onTimeSlotChange}
+            />
+          </View>
+
+          <View className='form-group'>
+            <Text className='form-label'>备注（选填）</Text>
+            <Input
+              className='form-input'
+              placeholder='请简要描述症状或就诊目的'
+              value={reason}
+              onInput={onReasonChange}
+            />
+          </View>
+        </View>
+      )}
+
+      {/* 底部操作栏 */}
+      <View className='bottom-bar'>
+        {currentStep > 0 && (
+          <View className='btn btn-prev' onClick={goPrev}>
+            <Text className='btn-text'>上一步</Text>
+          </View>
+        )}
+        {currentStep < 2 ? (
+          <View className='btn btn-next' onClick={goNext}>
+            <Text className='btn-text btn-text-white'>下一步</Text>
+          </View>
+        ) : (
+          <View className={`btn btn-submit ${loading ? 'btn-disabled' : ''}`} onClick={loading ? undefined : handleSubmit}>
+            <Text className='btn-text btn-text-white'>{loading ? '提交中...' : '确认预约'}</Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/appointment/detail/index.scss
+++ b/apps/miniprogram/src/pages/appointment/detail/index.scss
@@ -0,0 +1,216 @@
+@import '../../../styles/variables.scss';
+
+.detail-page {
+  min-height: 100vh;
+  background: $bg;
+  padding-bottom: 140px;
+}
+
+/* 顶部导航 */
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px;
+  padding-top: 48px;
+  background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
+}
+
+.back-btn {
+  padding: 8px 0;
+}
+
+.back-text {
+  font-size: 28px;
+  color: white;
+}
+
+.header-title {
+  font-size: 34px;
+  font-weight: bold;
+  color: white;
+}
+
+.header-placeholder {
+  width: 60px;
+}
+
+/* 状态卡片 */
+.status-card {
+  background: $card;
+  border-radius: $r-lg;
+  padding: 40px 32px;
+  margin: -20px 24px 24px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-badge {
+  padding: 8px 32px;
+  border-radius: 24px;
+  margin-bottom: 12px;
+
+  .status-badge-text {
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  &.tag-pending {
+    background: $wrn-l;
+    .status-badge-text { color: $wrn; }
+  }
+
+  &.tag-confirmed {
+    background: $acc-l;
+    .status-badge-text { color: $acc; }
+  }
+
+  &.tag-cancelled {
+    background: $bd-l;
+    .status-badge-text { color: $tx3; }
+  }
+
+  &.tag-completed {
+    background: $pri-l;
+    .status-badge-text { color: $pri; }
+  }
+}
+
+.status-doctor {
+  font-size: 36px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.status-dept {
+  font-size: 26px;
+  color: $tx2;
+}
+
+/* 详情信息 */
+.info-section {
+  margin: 0 24px 24px;
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.section-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+  margin-bottom: 24px;
+  display: block;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid $bd-l;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 26px;
+  color: $tx2;
+}
+
+.info-value {
+  font-size: 26px;
+  color: $tx;
+  font-weight: 500;
+}
+
+.info-id {
+  font-size: 22px;
+  color: $tx3;
+  word-break: break-all;
+  max-width: 400px;
+  text-align: right;
+}
+
+/* 温馨提示 */
+.tips-card {
+  margin: 0 24px 24px;
+  background: $wrn-l;
+  border-radius: $r;
+  padding: 24px 28px;
+}
+
+.tips-title {
+  font-size: 26px;
+  font-weight: bold;
+  color: $wrn;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.tips-text {
+  font-size: 24px;
+  color: $tx2;
+  line-height: 1.6;
+}
+
+/* 底部操作 */
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px 24px;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  background: $card;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.cancel-btn {
+  background: $dan-l;
+  border-radius: $r-sm;
+  padding: 24px 0;
+  text-align: center;
+  transition: opacity 0.2s;
+}
+
+.cancel-disabled {
+  opacity: 0.5;
+}
+
+.cancel-text {
+  font-size: 30px;
+  font-weight: bold;
+  color: $dan;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+}
+
+.empty-text {
+  font-size: 30px;
+  color: $tx2;
+  margin-bottom: 12px;
+}
+
+.empty-hint {
+  font-size: 24px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/appointment/detail/index.tsx
+++ b/apps/miniprogram/src/pages/appointment/detail/index.tsx
@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useRouter } from '@tarojs/taro';
+import { cancelAppointment } from '../../../services/appointment';
+import type { Appointment } from '../../../services/appointment';
+import './index.scss';
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  pending: { label: '待确认', className: 'tag-pending' },
+  confirmed: { label: '已确认', className: 'tag-confirmed' },
+  cancelled: { label: '已取消', className: 'tag-cancelled' },
+  completed: { label: '已完成', className: 'tag-completed' },
+};
+
+export default function AppointmentDetail() {
+  const router = useRouter();
+  const id = router.params.id || '';
+  const [cancelling, setCancelling] = useState(false);
+
+  // 从页面参数或全局缓存获取预约数据
+  const encodedData = router.params.data || '';
+  let appointment: Appointment | null = null;
+  try {
+    if (encodedData) {
+      appointment = JSON.parse(decodeURIComponent(encodedData));
+    }
+  } catch {
+    // 解析失败则尝试从 Storage 获取
+    const cached = Taro.getStorageSync('appointment_detail_cache');
+    if (cached && cached.id === id) {
+      appointment = cached;
+    }
+  }
+
+  // 如果没有传数据，尝试从缓存获取
+  if (!appointment) {
+    const cached = Taro.getStorageSync('appointment_detail_cache');
+    if (cached && cached.id === id) {
+      appointment = cached;
+    }
+  }
+
+  const status = appointment ? (STATUS_MAP[appointment.status] || { label: appointment.status, className: 'tag-pending' }) : { label: '未知', className: 'tag-pending' };
+  const canCancel = appointment && (appointment.status === 'pending' || appointment.status === 'confirmed');
+
+  const handleCancel = async () => {
+    if (!appointment || cancelling) return;
+
+    const res = await Taro.showModal({
+      title: '确认取消',
+      content: '确定要取消此预约吗？取消后需重新预约。',
+    });
+    if (!res.confirm) return;
+
+    setCancelling(true);
+    try {
+      await cancelAppointment(appointment.id, appointment.version);
+      Taro.showToast({ title: '已取消预约', icon: 'success' });
+      setTimeout(() => {
+        Taro.navigateBack();
+      }, 1500);
+    } catch {
+      Taro.showToast({ title: '取消失败', icon: 'none' });
+    } finally {
+      setCancelling(false);
+    }
+  };
+
+  const goBack = () => {
+    Taro.navigateBack();
+  };
+
+  if (!appointment) {
+    return (
+      <View className='detail-page'>
+        <View className='detail-header'>
+          <View className='back-btn' onClick={goBack}>
+            <Text className='back-text'>返回</Text>
+          </View>
+          <Text className='header-title'>预约详情</Text>
+          <View className='header-placeholder' />
+        </View>
+        <View className='empty-state'>
+          <Text className='empty-icon'>📋</Text>
+          <Text className='empty-text'>未找到预约信息</Text>
+          <Text className='empty-hint'>请从预约列表进入</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View className='detail-page'>
+      {/* 顶部导航 */}
+      <View className='detail-header'>
+        <View className='back-btn' onClick={goBack}>
+          <Text className='back-text'>返回</Text>
+        </View>
+        <Text className='header-title'>预约详情</Text>
+        <View className='header-placeholder' />
+      </View>
+
+      {/* 状态卡片 */}
+      <View className='status-card'>
+        <View className={`status-badge ${status.className}`}>
+          <Text className='status-badge-text'>{status.label}</Text>
+        </View>
+        <Text className='status-doctor'>{appointment.doctor_name}</Text>
+        <Text className='status-dept'>{appointment.department}</Text>
+      </View>
+
+      {/* 详情信息 */}
+      <View className='info-section'>
+        <Text className='section-title'>预约信息</Text>
+
+        <View className='info-item'>
+          <Text className='info-label'>就诊人</Text>
+          <Text className='info-value'>{appointment.patient_name}</Text>
+        </View>
+
+        <View className='info-item'>
+          <Text className='info-label'>就诊日期</Text>
+          <Text className='info-value'>{appointment.appointment_date}</Text>
+        </View>
+
+        <View className='info-item'>
+          <Text className='info-label'>就诊时段</Text>
+          <Text className='info-value'>{appointment.time_slot}</Text>
+        </View>
+
+        <View className='info-item'>
+          <Text className='info-label'>预约单号</Text>
+          <Text className='info-value info-id'>{appointment.id}</Text>
+        </View>
+      </View>
+
+      {/* 温馨提示 */}
+      {(appointment.status === 'pending' || appointment.status === 'confirmed') && (
+        <View className='tips-card'>
+          <Text className='tips-title'>温馨提示</Text>
+          <Text className='tips-text'>请按预约时间提前15分钟到达，携带有效身份证件和医保卡。</Text>
+        </View>
+      )}
+
+      {/* 底部操作 */}
+      {canCancel && (
+        <View className='bottom-bar'>
+          <View
+            className={`cancel-btn ${cancelling ? 'cancel-disabled' : ''}`}
+            onClick={cancelling ? undefined : handleCancel}
+          >
+            <Text className='cancel-text'>{cancelling ? '处理中...' : '取消预约'}</Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/appointment/index.scss
+++ b/apps/miniprogram/src/pages/appointment/index.scss
@@ -1 +1,176 @@
@import '../../styles/variables.scss';
+
+.appointment-page {
+  min-height: 100vh;
+  background: $bg;
+  padding-bottom: 140px;
+}
+
+.page-header {
+  background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
+  padding: 32px;
+  padding-top: 48px;
+}
+
+.page-title {
+  font-size: 36px;
+  font-weight: bold;
+  color: white;
+}
+
+.appointment-list {
+  padding: 0 24px;
+  margin-top: -16px;
+}
+
+.appointment-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.doctor-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.doctor-name {
+  font-size: 32px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.department {
+  font-size: 24px;
+  color: $pri;
+  background: $pri-l;
+  padding: 4px 16px;
+  border-radius: 20px;
+}
+
+.status-tag {
+  padding: 6px 20px;
+  border-radius: 20px;
+
+  .status-tag-text {
+    font-size: 22px;
+    font-weight: 500;
+  }
+
+  &.tag-pending {
+    background: $wrn-l;
+
+    .status-tag-text {
+      color: $wrn;
+    }
+  }
+
+  &.tag-confirmed {
+    background: $acc-l;
+
+    .status-tag-text {
+      color: $acc;
+    }
+  }
+
+  &.tag-cancelled {
+    background: $bd-l;
+
+    .status-tag-text {
+      color: $tx3;
+    }
+  }
+
+  &.tag-completed {
+    background: $pri-l;
+
+    .status-tag-text {
+      color: $pri;
+    }
+  }
+}
+
+.card-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 20px;
+  border-top: 1px solid $bd-l;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.info-icon {
+  font-size: 26px;
+}
+
+.info-text {
+  font-size: 26px;
+  color: $tx2;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120px 0 80px;
+}
+
+.empty-icon {
+  font-size: 80px;
+  margin-bottom: 20px;
+}
+
+.empty-text {
+  font-size: 30px;
+  color: $tx2;
+  margin-bottom: 12px;
+}
+
+.empty-hint {
+  font-size: 24px;
+  color: $tx3;
+}
+
+.loading-tip {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.loading-text {
+  font-size: 24px;
+  color: $tx3;
+}
+
+.fab-btn {
+  position: fixed;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
+  padding: 24px 64px;
+  border-radius: 48px;
+  box-shadow: 0 8px 24px rgba($pri, 0.4);
+  z-index: 100;
+}
+
+.fab-text {
+  font-size: 30px;
+  color: white;
+  font-weight: bold;
+}
--- a/apps/miniprogram/src/pages/appointment/index.tsx
+++ b/apps/miniprogram/src/pages/appointment/index.tsx
@@ -1,12 +1,141 @@
+import React, { useState, useCallback } from 'react';
 import { View, Text } from '@tarojs/components';
-import '../health/index.scss';
+import Taro, { useDidShow, useReachBottom, usePullDownRefresh } from '@tarojs/taro';
+import { listAppointments, cancelAppointment } from '../../services/appointment';
+import type { Appointment } from '../../services/appointment';
+import './index.scss';
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  pending: { label: '待确认', className: 'tag-pending' },
+  confirmed: { label: '已确认', className: 'tag-confirmed' },
+  cancelled: { label: '已取消', className: 'tag-cancelled' },
+  completed: { label: '已完成', className: 'tag-completed' },
+};
+
+export default function AppointmentList() {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const fetchData = useCallback(async (pageNum: number, isRefresh = false) => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      const res = await listAppointments(pageNum);
+      const list = res.data || [];
+      if (isRefresh) {
+        setAppointments(list);
+      } else {
+        setAppointments((prev) => [...prev, ...list]);
+      }
+      setTotal(res.total);
+      setPage(pageNum);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [loading]);
+
+  useDidShow(() => {
+    fetchData(1, true);
+  });
+
+  usePullDownRefresh(() => {
+    setRefreshing(true);
+    fetchData(1, true).finally(() => {
+      Taro.stopPullDownRefresh();
+    });
+  });
+
+  useReachBottom(() => {
+    if (!loading && appointments.length < total) {
+      fetchData(page + 1);
+    }
+  });
+
+  const goCreate = () => {
+    Taro.navigateTo({ url: '/pages/appointment/create/index' });
+  };
+
+  const goDetail = (id: string) => {
+    const item = appointments.find((a) => a.id === id);
+    if (item) {
+      Taro.setStorageSync('appointment_detail_cache', item);
+    }
+    Taro.navigateTo({ url: `/pages/appointment/detail/index?id=${id}` });
+  };
+
+  const getStatusTag = (status: string) => {
+    return STATUS_MAP[status] || { label: status, className: 'tag-pending' };
+  };

-export default function Appointment() {
  return (
-    <View className='placeholder-page'>
-      <Text className='placeholder-icon'>📅</Text>
-      <Text className='placeholder-title'>预约挂号</Text>
-      <Text className='placeholder-desc'>选择科室、医生、时段</Text>
+    <View className='appointment-page'>
+      {/* 页面标题 */}
+      <View className='page-header'>
+        <Text className='page-title'>预约挂号</Text>
+      </View>
+
+      {/* 预约列表 */}
+      {appointments.length === 0 && !loading ? (
+        <View className='empty-state'>
+          <Text className='empty-icon'>📋</Text>
+          <Text className='empty-text'>暂无预约记录</Text>
+          <Text className='empty-hint'>点击下方按钮新建预约</Text>
+        </View>
+      ) : (
+        <View className='appointment-list'>
+          {appointments.map((item) => {
+            const tag = getStatusTag(item.status);
+            return (
+              <View
+                className='appointment-card'
+                key={item.id}
+                onClick={() => goDetail(item.id)}
+              >
+                <View className='card-top'>
+                  <View className='doctor-info'>
+                    <Text className='doctor-name'>{item.doctor_name}</Text>
+                    <Text className='department'>{item.department}</Text>
+                  </View>
+                  <View className={`status-tag ${tag.className}`}>
+                    <Text className='status-tag-text'>{tag.label}</Text>
+                  </View>
+                </View>
+                <View className='card-bottom'>
+                  <View className='info-row'>
+                    <Text className='info-icon'>📅</Text>
+                    <Text className='info-text'>{item.appointment_date}</Text>
+                  </View>
+                  <View className='info-row'>
+                    <Text className='info-icon'>🕐</Text>
+                    <Text className='info-text'>{item.time_slot}</Text>
+                  </View>
+                </View>
+              </View>
+            );
+          })}
+          {loading && (
+            <View className='loading-tip'>
+              <Text className='loading-text'>加载中...</Text>
+            </View>
+          )}
+          {!loading && appointments.length >= total && total > 0 && (
+            <View className='loading-tip'>
+              <Text className='loading-text'>没有更多了</Text>
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* 底部悬浮按钮 */}
+      <View className='fab-btn' onClick={goCreate}>
+        <Text className='fab-text'>+ 新建预约</Text>
+      </View>
    </View>
  );
 }
--- a/apps/miniprogram/src/pages/article/detail/index.scss
+++ b/apps/miniprogram/src/pages/article/detail/index.scss
@@ -0,0 +1,98 @@
+@import '../../../styles/variables.scss';
+
+.article-detail-page {
+  min-height: 100vh;
+  background: $bg;
+  padding-bottom: 40px;
+}
+
+.article-header {
+  background: $card;
+  padding: 32px;
+  margin-bottom: 2px;
+}
+
+.article-title {
+  font-size: 38px;
+  font-weight: bold;
+  color: $tx;
+  display: block;
+  line-height: 1.4;
+  margin-bottom: 16px;
+}
+
+.article-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.article-category {
+  font-size: 22px;
+  color: $pri;
+  background: $pri-l;
+  padding: 4px 12px;
+  border-radius: 12px;
+}
+
+.article-author {
+  font-size: 24px;
+  color: $tx2;
+}
+
+.article-date {
+  font-size: 24px;
+  color: $tx3;
+}
+
+.article-summary {
+  background: $card;
+  padding: 24px 32px;
+  margin-bottom: 2px;
+}
+
+.summary-text {
+  font-size: 26px;
+  color: $tx2;
+  line-height: 1.6;
+}
+
+.article-content {
+  background: $card;
+  padding: 32px;
+
+  // RichText 内部样式优化
+  h1, h2, h3 {
+    font-weight: bold;
+    color: #134E4A;
+    margin: 24px 0 12px;
+  }
+
+  p {
+    font-size: 28px;
+    color: #134E4A;
+    line-height: 1.8;
+    margin-bottom: 16px;
+  }
+
+  img {
+    max-width: 100%;
+    border-radius: 8px;
+    margin: 12px 0;
+  }
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.loading-text,
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/article/detail/index.tsx
+++ b/apps/miniprogram/src/pages/article/detail/index.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, RichText } from '@tarojs/components';
+import Taro, { useRouter } from '@tarojs/taro';
+import { getArticleDetail, Article } from '../../../services/article';
+import './index.scss';
+
+export default function ArticleDetail() {
+  const router = useRouter();
+  const id = router.params.id || '';
+
+  const [article, setArticle] = useState<Article | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    getArticleDetail(id)
+      .then((data) => setArticle(data))
+      .catch(() => Taro.showToast({ title: '加载失败', icon: 'none' }))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) {
+    return (
+      <View className='article-detail-page'>
+        <View className='loading-state'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (!article) {
+    return (
+      <View className='article-detail-page'>
+        <View className='empty-state'>
+          <Text className='empty-text'>文章不存在</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View className='article-detail-page'>
+      {/* 文章头部 */}
+      <View className='article-header'>
+        <Text className='article-title'>{article.title}</Text>
+        <View className='article-meta'>
+          {article.category && (
+            <Text className='article-category'>{article.category}</Text>
+          )}
+          {article.author && (
+            <Text className='article-author'>{article.author}</Text>
+          )}
+          {article.published_at && (
+            <Text className='article-date'>{article.published_at.slice(0, 10)}</Text>
+          )}
+        </View>
+      </View>
+
+      {/* 摘要 */}
+      {article.summary && (
+        <View className='article-summary'>
+          <Text className='summary-text'>{article.summary}</Text>
+        </View>
+      )}
+
+      {/* 正文 */}
+      <View className='article-content'>
+        <RichText
+          nodes={article.content || ''}
+        />
+      </View>
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/article/index.scss
+++ b/apps/miniprogram/src/pages/article/index.scss
@@ -1 +1,108 @@
@import '../../styles/variables.scss';
+
+.article-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 40px;
+}
+
+.article-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.article-card {
+  display: flex;
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.article-card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-right: 20px;
+}
+
+.article-card-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+  line-height: 1.4;
+  display: block;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.article-card-summary {
+  font-size: 26px;
+  color: $tx2;
+  line-height: 1.4;
+  display: block;
+  margin-bottom: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.article-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.article-card-tag {
+  font-size: 22px;
+  color: $pri;
+  background: $pri-l;
+  padding: 2px 12px;
+  border-radius: 12px;
+}
+
+.article-card-date {
+  font-size: 22px;
+  color: $tx3;
+}
+
+.article-card-cover {
+  width: 180px;
+  height: 120px;
+  border-radius: $r-sm;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.cover-img {
+  width: 100%;
+  height: 100%;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+.loading-hint {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.loading-text {
+  font-size: 24px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/article/index.tsx
+++ b/apps/miniprogram/src/pages/article/index.tsx
@@ -1,12 +1,95 @@
+import React, { useState, useCallback } from 'react';
 import { View, Text } from '@tarojs/components';
-import '../health/index.scss';
+import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro';
+import { listArticles, Article } from '../../services/article';
+import './index.scss';
+
+export default function ArticleList() {
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = useCallback(async (p: number, append = false) => {
+    setLoading(true);
+    try {
+      const res = await listArticles(p);
+      const list = res.data || [];
+      setArticles(append ? (prev) => [...prev, ...list] : list);
+      setTotal(res.total);
+      setPage(p);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useDidShow(() => {
+    fetchData(1);
+  }, [fetchData]);
+
+  usePullDownRefresh(() => {
+    fetchData(1).finally(() => {
+      Taro.stopPullDownRefresh();
+    });
+  });
+
+  useReachBottom(() => {
+    if (!loading && articles.length < total) {
+      fetchData(page + 1, true);
+    }
+  });
+
+  const goToDetail = (id: string) => {
+    Taro.navigateTo({ url: `/pages/article/detail/index?id=${id}` });
+  };

-export default function Article() {
  return (
-    <View className='placeholder-page'>
-      <Text className='placeholder-icon'>📰</Text>
-      <Text className='placeholder-title'>健康资讯</Text>
-      <Text className='placeholder-desc'>科普文章、健康知识</Text>
+    <View className='article-page'>
+      <View className='article-list'>
+        {articles.map((a) => (
+          <View
+            className='article-card'
+            key={a.id}
+            onClick={() => goToDetail(a.id)}
+          >
+            <View className='article-card-body'>
+              <Text className='article-card-title'>{a.title}</Text>
+              {a.summary && (
+                <Text className='article-card-summary'>{a.summary}</Text>
+              )}
+              <View className='article-card-meta'>
+                {a.category && (
+                  <Text className='article-card-tag'>{a.category}</Text>
+                )}
+                {a.published_at && (
+                  <Text className='article-card-date'>
+                    {a.published_at.slice(0, 10)}
+                  </Text>
+                )}
+              </View>
+            </View>
+            {a.cover_image && (
+              <View className='article-card-cover'>
+                <image className='cover-img' src={a.cover_image} mode='aspectFill' />
+              </View>
+            )}
+          </View>
+        ))}
+      </View>
+
+      {articles.length === 0 && !loading && (
+        <View className='empty-state'>
+          <Text className='empty-text'>暂无资讯文章</Text>
+        </View>
+      )}
+
+      {loading && (
+        <View className='loading-hint'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      )}
    </View>
  );
 }
--- a/apps/miniprogram/src/pages/followup/detail/index.scss
+++ b/apps/miniprogram/src/pages/followup/detail/index.scss
@@ -0,0 +1,118 @@
+@import '../../../styles/variables.scss';
+
+.detail-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 40px;
+}
+
+.detail-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.detail-title {
+  font-size: 34px;
+  font-weight: bold;
+  color: $tx;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid $bd-l;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.detail-label {
+  font-size: 26px;
+  color: $tx2;
+}
+
+.detail-value {
+  font-size: 26px;
+  color: $tx;
+}
+
+.detail-desc {
+  margin-top: 16px;
+  padding: 20px;
+  background: $bd-l;
+  border-radius: $r-sm;
+}
+
+.detail-desc-text {
+  font-size: 26px;
+  color: $tx;
+  line-height: 1.6;
+}
+
+.submit-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.section-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.submit-textarea {
+  width: 100%;
+  min-height: 200px;
+  font-size: 28px;
+  color: $tx;
+  background: $bd-l;
+  border-radius: $r-sm;
+  padding: 20px;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  margin-bottom: 20px;
+}
+
+.submit-btn {
+  background: $pri;
+  border-radius: $r-sm;
+  padding: 24px;
+  text-align: center;
+
+  &.disabled {
+    opacity: 0.6;
+  }
+}
+
+.submit-btn-text {
+  font-size: 30px;
+  color: white;
+  font-weight: bold;
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.loading-text,
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/followup/detail/index.tsx
+++ b/apps/miniprogram/src/pages/followup/detail/index.tsx
@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useRouter } from '@tarojs/taro';
+import { listTasks, submitRecord, FollowUpTask } from '../../../services/followup';
+import './index.scss';
+
+export default function FollowUpDetail() {
+  const router = useRouter();
+  const id = router.params.id || '';
+
+  const [task, setTask] = useState<FollowUpTask | null>(null);
+  const [content, setContent] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    listTasks()
+      .then((res) => {
+        const found = (res.data || []).find((t) => t.id === id);
+        setTask(found || null);
+      })
+      .catch(() => Taro.showToast({ title: '加载失败', icon: 'none' }))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleSubmit = async () => {
+    if (!content.trim()) {
+      Taro.showToast({ title: '请输入内容', icon: 'none' });
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await submitRecord({
+        task_id: id,
+        content: { text: content.trim() },
+      });
+      Taro.showToast({ title: '提交成功', icon: 'success' });
+      setContent('');
+    } catch {
+      Taro.showToast({ title: '提交失败', icon: 'none' });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    if (status === 'completed') return '已完成';
+    if (status === 'overdue') return '已过期';
+    return '待完成';
+  };
+
+  if (loading) {
+    return (
+      <View className='detail-page'>
+        <View className='loading-state'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (!task) {
+    return (
+      <View className='detail-page'>
+        <View className='empty-state'>
+          <Text className='empty-text'>任务不存在</Text>
+        </View>
+      </View>
+    );
+  }
+
+  const isCompleted = task.status === 'completed';
+
+  return (
+    <View className='detail-page'>
+      {/* 任务详情 */}
+      <View className='detail-card'>
+        <Text className='detail-title'>{task.task_type}</Text>
+        <View className='detail-row'>
+          <Text className='detail-label'>状态</Text>
+          <Text className='detail-value'>{getStatusLabel(task.status)}</Text>
+        </View>
+        <View className='detail-row'>
+          <Text className='detail-label'>截止日期</Text>
+          <Text className='detail-value'>{task.due_date}</Text>
+        </View>
+        {task.description && (
+          <View className='detail-desc'>
+            <Text className='detail-desc-text'>{task.description}</Text>
+          </View>
+        )}
+      </View>
+
+      {/* 提交表单 */}
+      {!isCompleted && (
+        <View className='submit-card'>
+          <Text className='section-title'>填写随访记录</Text>
+          <textarea
+            className='submit-textarea'
+            placeholder='请输入随访内容...'
+            value={content}
+            onInput={(e) => setContent(e.detail.value)}
+            maxlength={500}
+          />
+          <View
+            className={`submit-btn ${submitting ? 'disabled' : ''}`}
+            onClick={submitting ? undefined : handleSubmit}
+          >
+            <Text className='submit-btn-text'>
+              {submitting ? '提交中...' : '提交'}
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/followup/index.scss
+++ b/apps/miniprogram/src/pages/followup/index.scss
@@ -0,0 +1,132 @@
+@import '../../styles/variables.scss';
+
+.followup-page {
+  min-height: 100vh;
+  background: $bg;
+}
+
+.tab-bar {
+  display: flex;
+  background: $card;
+  padding: 0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 0;
+  position: relative;
+
+  &.active {
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 48px;
+      height: 4px;
+      background: $pri;
+      border-radius: 2px;
+    }
+  }
+}
+
+.tab-text {
+  font-size: 28px;
+  color: $tx2;
+
+  .tab-item.active & {
+    color: $pri;
+    font-weight: bold;
+  }
+}
+
+.task-list {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.task-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.task-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.task-name {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.task-status {
+  font-size: 24px;
+  padding: 4px 16px;
+  border-radius: 20px;
+
+  &.pending {
+    color: $wrn;
+    background: $wrn-l;
+  }
+
+  &.completed {
+    color: $acc;
+    background: $acc-l;
+  }
+
+  &.overdue {
+    color: $dan;
+    background: $dan-l;
+  }
+}
+
+.task-desc {
+  font-size: 26px;
+  color: $tx2;
+  display: block;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-due {
+  font-size: 24px;
+  color: $tx3;
+  display: block;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+.loading-hint {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.loading-text {
+  font-size: 24px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/followup/index.tsx
+++ b/apps/miniprogram/src/pages/followup/index.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useDidShow } from '@tarojs/taro';
+import { listTasks, FollowUpTask } from '../../services/followup';
+import './index.scss';
+
+const TABS = [
+  { key: 'pending', label: '待完成' },
+  { key: 'completed', label: '已完成' },
+  { key: 'overdue', label: '已过期' },
+];
+
+export default function FollowUpList() {
+  const [activeTab, setActiveTab] = useState('pending');
+  const [tasks, setTasks] = useState<FollowUpTask[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchTasks = useCallback(async (status: string) => {
+    setLoading(true);
+    try {
+      const res = await listTasks(status);
+      setTasks(res.data || []);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useDidShow(() => {
+    fetchTasks(activeTab);
+  }, [activeTab, fetchTasks]);
+
+  const handleTabChange = (key: string) => {
+    setActiveTab(key);
+    setTasks([]);
+    fetchTasks(key);
+  };
+
+  const goToDetail = (id: string) => {
+    Taro.navigateTo({ url: `/pages/followup/detail/index?id=${id}` });
+  };
+
+  const getStatusClass = (status: string) => {
+    if (status === 'completed') return 'completed';
+    if (status === 'overdue') return 'overdue';
+    return 'pending';
+  };
+
+  const getStatusLabel = (status: string) => {
+    if (status === 'completed') return '已完成';
+    if (status === 'overdue') return '已过期';
+    return '待完成';
+  };
+
+  return (
+    <View className='followup-page'>
+      {/* Tab 栏 */}
+      <View className='tab-bar'>
+        {TABS.map((tab) => (
+          <View
+            className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
+            key={tab.key}
+            onClick={() => handleTabChange(tab.key)}
+          >
+            <Text className='tab-text'>{tab.label}</Text>
+          </View>
+        ))}
+      </View>
+
+      {/* 任务列表 */}
+      <View className='task-list'>
+        {tasks.map((t) => (
+          <View
+            className='task-card'
+            key={t.id}
+            onClick={() => goToDetail(t.id)}
+          >
+            <View className='task-top'>
+              <Text className='task-name'>{t.task_type}</Text>
+              <Text className={`task-status ${getStatusClass(t.status)}`}>
+                {getStatusLabel(t.status)}
+              </Text>
+            </View>
+            <Text className='task-desc'>{t.description}</Text>
+            <Text className='task-due'>截止日期：{t.due_date}</Text>
+          </View>
+        ))}
+      </View>
+
+      {tasks.length === 0 && !loading && (
+        <View className='empty-state'>
+          <Text className='empty-text'>暂无{(() => {
+            const tab = TABS.find((t) => t.key === activeTab);
+            return tab ? tab.label : '';
+          })()}任务</Text>
+        </View>
+      )}
+
+      {loading && (
+        <View className='loading-hint'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/profile/family-add/index.scss
+++ b/apps/miniprogram/src/pages/profile/family-add/index.scss
@@ -0,0 +1,82 @@
+@import '../../../styles/variables.scss';
+
+.family-add-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 140px;
+}
+
+.form-card {
+  background: $card;
+  border-radius: $r;
+  padding: 8px 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28px 0;
+  border-bottom: 1px solid $bd-l;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.form-label {
+  font-size: 28px;
+  color: $tx;
+  flex-shrink: 0;
+  width: 140px;
+}
+
+.form-input {
+  flex: 1;
+  font-size: 28px;
+  color: $tx;
+  text-align: right;
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+.form-picker {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.form-picker-text {
+  font-size: 28px;
+  color: $tx;
+  margin-right: 8px;
+}
+
+.form-picker-arrow {
+  font-size: 32px;
+  color: $tx3;
+}
+
+.submit-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: $pri;
+  padding: 28px;
+  text-align: center;
+
+  &.disabled {
+    opacity: 0.6;
+  }
+}
+
+.submit-text {
+  font-size: 32px;
+  color: white;
+  font-weight: bold;
+}
--- a/apps/miniprogram/src/pages/profile/family-add/index.tsx
+++ b/apps/miniprogram/src/pages/profile/family-add/index.tsx
@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { Picker } from '@tarojs/components';
+import { createPatient } from '../../../services/patient';
+import './index.scss';
+
+const RELATION_OPTIONS = ['本人', '配偶', '父母', '子女', '其他'];
+const GENDER_OPTIONS = ['男', '女'];
+
+export default function FamilyAdd() {
+  const [name, setName] = useState('');
+  const [relationIdx, setRelationIdx] = useState(0);
+  const [genderIdx, setGenderIdx] = useState(0);
+  const [birthDate, setBirthDate] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!name.trim()) {
+      Taro.showToast({ title: '请输入姓名', icon: 'none' });
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await createPatient({
+        name: name.trim(),
+        gender: GENDER_OPTIONS[genderIdx] === '男' ? 'male' : 'female',
+        birthday: birthDate || undefined,
+      });
+      Taro.showToast({ title: '添加成功', icon: 'success' });
+      setTimeout(() => {
+        Taro.navigateBack();
+      }, 1000);
+    } catch {
+      Taro.showToast({ title: '添加失败', icon: 'none' });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <View className='family-add-page'>
+      <View className='form-card'>
+        {/* 姓名 */}
+        <View className='form-item'>
+          <Text className='form-label'>姓名</Text>
+          <input
+            className='form-input'
+            placeholder='请输入姓名'
+            value={name}
+            onInput={(e) => setName(e.detail.value)}
+          />
+        </View>
+
+        {/* 关系 */}
+        <View className='form-item'>
+          <Text className='form-label'>关系</Text>
+          <Picker
+            mode='selector'
+            range={RELATION_OPTIONS}
+            value={relationIdx}
+            onChange={(e) => setRelationIdx(Number(e.detail.value))}
+          >
+            <View className='form-picker'>
+              <Text className='form-picker-text'>{RELATION_OPTIONS[relationIdx]}</Text>
+              <Text className='form-picker-arrow'>›</Text>
+            </View>
+          </Picker>
+        </View>
+
+        {/* 性别 */}
+        <View className='form-item'>
+          <Text className='form-label'>性别</Text>
+          <Picker
+            mode='selector'
+            range={GENDER_OPTIONS}
+            value={genderIdx}
+            onChange={(e) => setGenderIdx(Number(e.detail.value))}
+          >
+            <View className='form-picker'>
+              <Text className='form-picker-text'>{GENDER_OPTIONS[genderIdx]}</Text>
+              <Text className='form-picker-arrow'>›</Text>
+            </View>
+          </Picker>
+        </View>
+
+        {/* 出生日期 */}
+        <View className='form-item'>
+          <Text className='form-label'>出生日期</Text>
+          <Picker
+            mode='date'
+            value={birthDate || '2000-01-01'}
+            onChange={(e) => setBirthDate(e.detail.value)}
+          >
+            <View className='form-picker'>
+              <Text className='form-picker-text'>{birthDate || '请选择'}</Text>
+              <Text className='form-picker-arrow'>›</Text>
+            </View>
+          </Picker>
+        </View>
+      </View>
+
+      <View
+        className={`submit-btn ${submitting ? 'disabled' : ''}`}
+        onClick={submitting ? undefined : handleSubmit}
+      >
+        <Text className='submit-text'>{submitting ? '提交中...' : '确认添加'}</Text>
+      </View>
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/profile/family/index.scss
+++ b/apps/miniprogram/src/pages/profile/family/index.scss
@@ -0,0 +1,97 @@
+@import '../../../styles/variables.scss';
+
+.family-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 140px;
+}
+
+.family-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.family-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 2px solid transparent;
+
+  &.active {
+    border-color: $pri;
+    background: $pri-surface;
+  }
+}
+
+.family-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.family-name {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+  margin-bottom: 8px;
+}
+
+.family-meta {
+  display: flex;
+  gap: 16px;
+}
+
+.family-tag {
+  font-size: 24px;
+  color: $pri;
+  background: $pri-l;
+  padding: 2px 12px;
+  border-radius: 12px;
+}
+
+.family-gender {
+  font-size: 24px;
+  color: $tx2;
+}
+
+.family-check {
+  font-size: 24px;
+  color: $pri;
+  background: $pri-l;
+  padding: 6px 16px;
+  border-radius: 16px;
+  font-weight: bold;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+.family-add-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: $pri;
+  padding: 28px;
+  text-align: center;
+}
+
+.family-add-text {
+  font-size: 32px;
+  color: white;
+  font-weight: bold;
+}
--- a/apps/miniprogram/src/pages/profile/family/index.tsx
+++ b/apps/miniprogram/src/pages/profile/family/index.tsx
@@ -0,0 +1,85 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useDidShow } from '@tarojs/taro';
+import { listPatients, Patient } from '../../../services/patient';
+import { useAuthStore } from '../../../stores/auth';
+import './index.scss';
+
+export default function FamilyList() {
+  const [patients, setPatients] = useState<Patient[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { currentPatient, setCurrentPatient } = useAuthStore();
+
+  const fetchPatients = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await listPatients();
+      setPatients(res.data || []);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useDidShow(() => {
+    fetchPatients();
+  }, [fetchPatients]);
+
+  const handleSelect = (patient: Patient) => {
+    setCurrentPatient({
+      id: patient.id,
+      name: patient.name,
+      gender: patient.gender,
+      birthday: patient.birthday,
+      relation: patient.relation || '本人',
+    });
+    Taro.showToast({ title: `已切换为 ${patient.name}`, icon: 'success' });
+  };
+
+  const goToAdd = () => {
+    Taro.navigateTo({ url: '/pages/profile/family-add/index' });
+  };
+
+  const genderText = (g?: string) => {
+    if (g === 'male') return '男';
+    if (g === 'female') return '女';
+    return '未知';
+  };
+
+  return (
+    <View className='family-page'>
+      <View className='family-list'>
+        {patients.map((p) => {
+          const isActive = currentPatient?.id === p.id;
+          return (
+            <View
+              className={`family-item ${isActive ? 'active' : ''}`}
+              key={p.id}
+              onClick={() => handleSelect(p)}
+            >
+              <View className='family-info'>
+                <Text className='family-name'>{p.name}</Text>
+                <View className='family-meta'>
+                  <Text className='family-tag'>{p.relation || '本人'}</Text>
+                  <Text className='family-gender'>{genderText(p.gender)}</Text>
+                </View>
+              </View>
+              {isActive && <Text className='family-check'>当前</Text>}
+            </View>
+          );
+        })}
+      </View>
+
+      {patients.length === 0 && !loading && (
+        <View className='empty-state'>
+          <Text className='empty-text'>暂无就诊人</Text>
+        </View>
+      )}
+
+      <View className='family-add-btn' onClick={goToAdd}>
+        <Text className='family-add-text'>+ 添加就诊人</Text>
+      </View>
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/profile/followups/index.scss
+++ b/apps/miniprogram/src/pages/profile/followups/index.scss
@@ -0,0 +1,132 @@
+@import '../../../styles/variables.scss';
+
+.my-followups-page {
+  min-height: 100vh;
+  background: $bg;
+}
+
+.tab-bar {
+  display: flex;
+  background: $card;
+  padding: 0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 0;
+  position: relative;
+
+  &.active {
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 48px;
+      height: 4px;
+      background: $pri;
+      border-radius: 2px;
+    }
+  }
+}
+
+.tab-text {
+  font-size: 28px;
+  color: $tx2;
+
+  .tab-item.active & {
+    color: $pri;
+    font-weight: bold;
+  }
+}
+
+.task-list {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.task-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.task-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.task-name {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.task-status {
+  font-size: 24px;
+  padding: 4px 16px;
+  border-radius: 20px;
+
+  &.pending {
+    color: $wrn;
+    background: $wrn-l;
+  }
+
+  &.completed {
+    color: $acc;
+    background: $acc-l;
+  }
+
+  &.overdue {
+    color: $dan;
+    background: $dan-l;
+  }
+}
+
+.task-desc {
+  font-size: 26px;
+  color: $tx2;
+  display: block;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-due {
+  font-size: 24px;
+  color: $tx3;
+  display: block;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+.loading-hint {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.loading-text {
+  font-size: 24px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/profile/followups/index.tsx
+++ b/apps/miniprogram/src/pages/profile/followups/index.tsx
@@ -0,0 +1,105 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useDidShow } from '@tarojs/taro';
+import { listTasks, FollowUpTask } from '../../../services/followup';
+import './index.scss';
+
+const TABS = [
+  { key: 'pending', label: '待完成' },
+  { key: 'completed', label: '已完成' },
+  { key: 'overdue', label: '已过期' },
+];
+
+export default function MyFollowUps() {
+  const [activeTab, setActiveTab] = useState('pending');
+  const [tasks, setTasks] = useState<FollowUpTask[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchTasks = useCallback(async (status: string) => {
+    setLoading(true);
+    try {
+      const res = await listTasks(status);
+      setTasks(res.data || []);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useDidShow(() => {
+    fetchTasks(activeTab);
+  }, [activeTab, fetchTasks]);
+
+  const handleTabChange = (key: string) => {
+    setActiveTab(key);
+    setTasks([]);
+    fetchTasks(key);
+  };
+
+  const goToDetail = (id: string) => {
+    Taro.navigateTo({ url: `/pages/followup/detail/index?id=${id}` });
+  };
+
+  const getStatusClass = (status: string) => {
+    if (status === 'completed') return 'completed';
+    if (status === 'overdue') return 'overdue';
+    return 'pending';
+  };
+
+  const getStatusLabel = (status: string) => {
+    if (status === 'completed') return '已完成';
+    if (status === 'overdue') return '已过期';
+    return '待完成';
+  };
+
+  return (
+    <View className='my-followups-page'>
+      <View className='tab-bar'>
+        {TABS.map((tab) => (
+          <View
+            className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
+            key={tab.key}
+            onClick={() => handleTabChange(tab.key)}
+          >
+            <Text className='tab-text'>{tab.label}</Text>
+          </View>
+        ))}
+      </View>
+
+      <View className='task-list'>
+        {tasks.map((t) => (
+          <View
+            className='task-card'
+            key={t.id}
+            onClick={() => goToDetail(t.id)}
+          >
+            <View className='task-top'>
+              <Text className='task-name'>{t.task_type}</Text>
+              <Text className={`task-status ${getStatusClass(t.status)}`}>
+                {getStatusLabel(t.status)}
+              </Text>
+            </View>
+            <Text className='task-desc'>{t.description}</Text>
+            <Text className='task-due'>截止日期：{t.due_date}</Text>
+          </View>
+        ))}
+      </View>
+
+      {tasks.length === 0 && !loading && (
+        <View className='empty-state'>
+          <Text className='empty-text'>暂无{(() => {
+            const tab = TABS.find((t) => t.key === activeTab);
+            return tab ? tab.label : '';
+          })()}任务</Text>
+        </View>
+      )}
+
+      {loading && (
+        <View className='loading-hint'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/profile/index.tsx
+++ b/apps/miniprogram/src/pages/profile/index.tsx
@@ -1,10 +1,35 @@
+import React from 'react';
 import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
 import { useAuthStore } from '../../stores/auth';
-import '../health/index.scss';
+import './index.scss';
+
+const MENU_ITEMS = [
+  { label: '就诊人管理', icon: '👥', path: '/pages/profile/family/index' },
+  { label: '我的报告', icon: '📋', path: '/pages/profile/reports/index' },
+  { label: '我的随访', icon: '💬', path: '/pages/profile/followups/index' },
+  { label: '用药提醒', icon: '💊', path: '/pages/profile/medication/index' },
+  { label: '设置', icon: '⚙️', path: '/pages/profile/settings/index' },
+];

 export default function Profile() {
  const { user, logout } = useAuthStore();

+  const handleMenuClick = (path: string) => {
+    Taro.navigateTo({ url: path });
+  };
+
+  const handleLogout = () => {
+    Taro.showModal({
+      title: '退出登录',
+      content: '确定要退出登录吗？',
+    }).then((res) => {
+      if (res.confirm) {
+        logout();
+      }
+    });
+  };
+
  return (
    <View className='profile-page'>
      <View className='profile-header'>
@@ -18,14 +43,12 @@ export default function Profile() {
      </View>

      <View className='profile-menu'>
-        {[
-          { label: '就诊人管理', icon: '👥' },
-          { label: '我的报告', icon: '📋' },
-          { label: '我的随访', icon: '💬' },
-          { label: '用药提醒', icon: '💊' },
-          { label: '设置', icon: '⚙️' },
-        ].map((item) => (
-          <View className='menu-item' key={item.label}>
+        {MENU_ITEMS.map((item) => (
+          <View
+            className='menu-item'
+            key={item.label}
+            onClick={() => handleMenuClick(item.path)}
+          >
            <Text className='menu-icon'>{item.icon}</Text>
            <Text className='menu-label'>{item.label}</Text>
            <Text className='menu-arrow'>›</Text>
@@ -33,7 +56,7 @@ export default function Profile() {
        ))}
      </View>

-      <View className='profile-logout' onClick={logout}>
+      <View className='profile-logout' onClick={handleLogout}>
        <Text className='logout-text'>退出登录</Text>
      </View>
    </View>
--- a/apps/miniprogram/src/pages/profile/medication/index.scss
+++ b/apps/miniprogram/src/pages/profile/medication/index.scss
@@ -0,0 +1,196 @@
+@import '../../../styles/variables.scss';
+
+.medication-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 140px;
+}
+
+.reminder-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.reminder-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.reminder-left {
+  display: flex;
+  flex-direction: column;
+}
+
+.reminder-name {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+  margin-bottom: 4px;
+}
+
+.reminder-dosage {
+  font-size: 24px;
+  color: $tx2;
+}
+
+.reminder-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.toggle {
+  width: 80px;
+  height: 44px;
+  border-radius: 22px;
+  padding: 4px;
+  position: relative;
+  transition: background 0.3s;
+
+  &.on {
+    background: $pri;
+  }
+
+  &.off {
+    background: $bd;
+  }
+}
+
+.toggle-dot {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: white;
+  position: absolute;
+  top: 4px;
+  transition: left 0.3s;
+
+  .toggle.on & {
+    left: 40px;
+  }
+
+  .toggle.off & {
+    left: 4px;
+  }
+}
+
+.delete-btn {
+  font-size: 24px;
+  color: $dan;
+  padding: 4px 12px;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+.form-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  margin-top: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  border-bottom: 1px solid $bd-l;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
+.form-label {
+  font-size: 28px;
+  color: $tx;
+  flex-shrink: 0;
+  width: 140px;
+}
+
+.form-input {
+  flex: 1;
+  font-size: 28px;
+  color: $tx;
+  text-align: right;
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+.time-picker-wrap {
+  flex: 1;
+  text-align: right;
+}
+
+.time-value {
+  font-size: 28px;
+  color: $tx;
+}
+
+.form-actions {
+  display: flex;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.form-cancel {
+  flex: 1;
+  background: $bd-l;
+  border-radius: $r-sm;
+  padding: 20px;
+  text-align: center;
+}
+
+.form-cancel-text {
+  font-size: 28px;
+  color: $tx2;
+}
+
+.form-confirm {
+  flex: 1;
+  background: $pri;
+  border-radius: $r-sm;
+  padding: 20px;
+  text-align: center;
+}
+
+.form-confirm-text {
+  font-size: 28px;
+  color: white;
+  font-weight: bold;
+}
+
+.add-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: $pri;
+  padding: 28px;
+  text-align: center;
+}
+
+.add-text {
+  font-size: 32px;
+  color: white;
+  font-weight: bold;
+}
--- a/apps/miniprogram/src/pages/profile/medication/index.tsx
+++ b/apps/miniprogram/src/pages/profile/medication/index.tsx
@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import './index.scss';
+
+interface MedicationReminder {
+  id: string;
+  name: string;
+  dosage: string;
+  time: string;
+  enabled: boolean;
+}
+
+const STORAGE_KEY = 'medication_reminders';
+
+function loadReminders(): MedicationReminder[] {
+  return Taro.getStorageSync(STORAGE_KEY) || [];
+}
+
+function saveReminders(reminders: MedicationReminder[]) {
+  Taro.setStorageSync(STORAGE_KEY, reminders);
+}
+
+export default function MedicationReminder() {
+  const [reminders, setReminders] = useState<MedicationReminder[]>([]);
+  const [showForm, setShowForm] = useState(false);
+  const [formName, setFormName] = useState('');
+  const [formDosage, setFormDosage] = useState('');
+  const [formTime, setFormTime] = useState('08:00');
+
+  useEffect(() => {
+    setReminders(loadReminders());
+  }, []);
+
+  const updateReminders = (updated: MedicationReminder[]) => {
+    setReminders(updated);
+    saveReminders(updated);
+  };
+
+  const handleToggle = (id: string) => {
+    const updated = reminders.map((r) =>
+      r.id === id ? { ...r, enabled: !r.enabled } : r
+    );
+    updateReminders(updated);
+  };
+
+  const handleDelete = (id: string) => {
+    Taro.showModal({
+      title: '确认删除',
+      content: '确定要删除这个提醒吗？',
+    }).then((res) => {
+      if (res.confirm) {
+        updateReminders(reminders.filter((r) => r.id !== id));
+      }
+    });
+  };
+
+  const handleAdd = () => {
+    if (!formName.trim()) {
+      Taro.showToast({ title: '请输入药品名称', icon: 'none' });
+      return;
+    }
+    const newReminder: MedicationReminder = {
+      id: Date.now().toString(),
+      name: formName.trim(),
+      dosage: formDosage.trim(),
+      time: formTime,
+      enabled: true,
+    };
+    updateReminders([...reminders, newReminder]);
+    setFormName('');
+    setFormDosage('');
+    setFormTime('08:00');
+    setShowForm(false);
+    Taro.showToast({ title: '添加成功', icon: 'success' });
+  };
+
+  return (
+    <View className='medication-page'>
+      <View className='reminder-list'>
+        {reminders.map((r) => (
+          <View className='reminder-card' key={r.id}>
+            <View className='reminder-left'>
+              <Text className='reminder-name'>{r.name}</Text>
+              <Text className='reminder-dosage'>
+                {r.dosage} | {r.time}
+              </Text>
+            </View>
+            <View className='reminder-actions'>
+              <View
+                className={`toggle ${r.enabled ? 'on' : 'off'}`}
+                onClick={() => handleToggle(r.id)}
+              >
+                <View className='toggle-dot' />
+              </View>
+              <Text
+                className='delete-btn'
+                onClick={() => handleDelete(r.id)}
+              >
+                删除
+              </Text>
+            </View>
+          </View>
+        ))}
+      </View>
+
+      {reminders.length === 0 && (
+        <View className='empty-state'>
+          <Text className='empty-text'>暂无用药提醒</Text>
+        </View>
+      )}
+
+      {/* 添加表单 */}
+      {showForm && (
+        <View className='form-card'>
+          <View className='form-item'>
+            <Text className='form-label'>药品名称</Text>
+            <input
+              className='form-input'
+              placeholder='请输入药品名称'
+              value={formName}
+              onInput={(e) => setFormName(e.detail.value)}
+            />
+          </View>
+          <View className='form-item'>
+            <Text className='form-label'>剂量</Text>
+            <input
+              className='form-input'
+              placeholder='如：1片、10ml'
+              value={formDosage}
+              onInput={(e) => setFormDosage(e.detail.value)}
+            />
+          </View>
+          <View className='form-item'>
+            <Text className='form-label'>提醒时间</Text>
+            <View className='time-picker-wrap'>
+              <Text className='time-value'>{formTime}</Text>
+            </View>
+          </View>
+          <View className='form-actions'>
+            <View className='form-cancel' onClick={() => setShowForm(false)}>
+              <Text className='form-cancel-text'>取消</Text>
+            </View>
+            <View className='form-confirm' onClick={handleAdd}>
+              <Text className='form-confirm-text'>确认</Text>
+            </View>
+          </View>
+        </View>
+      )}
+
+      {!showForm && (
+        <View className='add-btn' onClick={() => setShowForm(true)}>
+          <Text className='add-text'>+ 添加提醒</Text>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/profile/reports/index.scss
+++ b/apps/miniprogram/src/pages/profile/reports/index.scss
@@ -0,0 +1,78 @@
+@import '../../../styles/variables.scss';
+
+.my-reports-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 40px;
+}
+
+.report-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.report-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.report-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.report-type {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.report-status {
+  font-size: 24px;
+  padding: 4px 16px;
+  border-radius: 20px;
+
+  &.normal {
+    color: $acc;
+    background: $acc-l;
+  }
+
+  &.abnormal {
+    color: $dan;
+    background: $dan-l;
+  }
+}
+
+.report-date {
+  font-size: 26px;
+  color: $tx2;
+  display: block;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+.loading-hint {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.loading-text {
+  font-size: 24px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/profile/reports/index.tsx
+++ b/apps/miniprogram/src/pages/profile/reports/index.tsx
@@ -0,0 +1,94 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro';
+import { listReports, LabReport } from '../../../services/report';
+import './index.scss';
+
+const PAGE_SIZE = 20;
+
+export default function MyReports() {
+  const [reports, setReports] = useState<LabReport[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const patientId = Taro.getStorageSync('current_patient_id') || '';
+
+  const fetchData = useCallback(async (p: number, append = false) => {
+    if (!patientId) return;
+    setLoading(true);
+    try {
+      const res = await listReports(patientId, p);
+      const list = res.data || [];
+      setReports(append ? (prev) => [...prev, ...list] : list);
+      setTotal(res.total);
+      setPage(p);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, [patientId]);
+
+  useDidShow(() => {
+    fetchData(1);
+  }, [fetchData]);
+
+  usePullDownRefresh(() => {
+    fetchData(1).finally(() => {
+      Taro.stopPullDownRefresh();
+    });
+  });
+
+  useReachBottom(() => {
+    if (!loading && reports.length < total) {
+      fetchData(page + 1, true);
+    }
+  });
+
+  const goToDetail = (id: string) => {
+    Taro.navigateTo({ url: `/pages/report/detail/index?id=${id}` });
+  };
+
+  const formatStatus = (report: LabReport) => {
+    const indicators = report.indicators;
+    if (!indicators || typeof indicators !== 'object') return '未知';
+    const vals = Object.values(indicators) as Array<{ status?: string }>;
+    const hasAbnormal = vals.some((v) => v.status === 'high' || v.status === 'low');
+    return hasAbnormal ? '异常' : '正常';
+  };
+
+  return (
+    <View className='my-reports-page'>
+      <View className='report-list'>
+        {reports.map((r) => (
+          <View
+            className='report-card'
+            key={r.id}
+            onClick={() => goToDetail(r.id)}
+          >
+            <View className='report-card-top'>
+              <Text className='report-type'>{r.report_type}</Text>
+              <Text className={`report-status ${formatStatus(r) === '正常' ? 'normal' : 'abnormal'}`}>
+                {formatStatus(r)}
+              </Text>
+            </View>
+            <Text className='report-date'>{r.report_date}</Text>
+          </View>
+        ))}
+      </View>
+
+      {reports.length === 0 && !loading && (
+        <View className='empty-state'>
+          <Text className='empty-text'>暂无报告记录</Text>
+        </View>
+      )}
+
+      {loading && (
+        <View className='loading-hint'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/profile/settings/index.scss
+++ b/apps/miniprogram/src/pages/profile/settings/index.scss
@@ -0,0 +1,50 @@
+@import '../../../styles/variables.scss';
+
+.settings-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+}
+
+.settings-group {
+  background: $card;
+  border-radius: $r;
+  overflow: hidden;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.settings-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28px 24px;
+  border-bottom: 1px solid $bd-l;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.logout-item {
+    justify-content: center;
+  }
+}
+
+.settings-label {
+  font-size: 30px;
+  color: $tx;
+
+  .logout-item & {
+    color: $dan;
+    font-weight: bold;
+  }
+}
+
+.logout-label {
+  color: $dan;
+}
+
+.settings-arrow {
+  font-size: 32px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/profile/settings/index.tsx
+++ b/apps/miniprogram/src/pages/profile/settings/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { useAuthStore } from '../../../stores/auth';
+import './index.scss';
+
+export default function Settings() {
+  const { logout } = useAuthStore();
+
+  const handleClearCache = () => {
+    Taro.showModal({
+      title: '清除缓存',
+      content: '确定要清除本地缓存数据吗？不会影响账号信息。',
+    }).then((res) => {
+      if (res.confirm) {
+        // 保留登录态和核心设置
+        const token = Taro.getStorageSync('access_token');
+        const refreshToken = Taro.getStorageSync('refresh_token');
+        const user = Taro.getStorageSync('user');
+        const currentPatient = Taro.getStorageSync('current_patient');
+        const currentPatientId = Taro.getStorageSync('current_patient_id');
+        const tenantId = Taro.getStorageSync('tenant_id');
+
+        Taro.clearStorageSync();
+
+        // 恢复登录态
+        if (token) Taro.setStorageSync('access_token', token);
+        if (refreshToken) Taro.setStorageSync('refresh_token', refreshToken);
+        if (user) Taro.setStorageSync('user', user);
+        if (currentPatient) Taro.setStorageSync('current_patient', currentPatient);
+        if (currentPatientId) Taro.setStorageSync('current_patient_id', currentPatientId);
+        if (tenantId) Taro.setStorageSync('tenant_id', tenantId);
+
+        Taro.showToast({ title: '缓存已清除', icon: 'success' });
+      }
+    });
+  };
+
+  const handleAbout = () => {
+    Taro.showModal({
+      title: '关于我们',
+      content: 'HMS 健康管理平台 v1.0.0\n为您的健康保驾护航',
+      showCancel: false,
+    });
+  };
+
+  const handlePrivacy = () => {
+    Taro.showModal({
+      title: '隐私政策',
+      content: '我们重视您的隐私保护。所有健康数据均经过加密存储，仅用于为您提供健康管理服务，不会向第三方分享。',
+      showCancel: false,
+    });
+  };
+
+  const handleLogout = () => {
+    Taro.showModal({
+      title: '退出登录',
+      content: '确定要退出登录吗？',
+    }).then((res) => {
+      if (res.confirm) {
+        logout();
+      }
+    });
+  };
+
+  return (
+    <View className='settings-page'>
+      <View className='settings-group'>
+        <View className='settings-item' onClick={handleClearCache}>
+          <Text className='settings-label'>清除缓存</Text>
+          <Text className='settings-arrow'>›</Text>
+        </View>
+        <View className='settings-item' onClick={handleAbout}>
+          <Text className='settings-label'>关于我们</Text>
+          <Text className='settings-arrow'>›</Text>
+        </View>
+        <View className='settings-item' onClick={handlePrivacy}>
+          <Text className='settings-label'>隐私政策</Text>
+          <Text className='settings-arrow'>›</Text>
+        </View>
+      </View>
+
+      <View className='settings-group'>
+        <View className='settings-item logout-item' onClick={handleLogout}>
+          <Text className='settings-label logout-label'>退出登录</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/report/detail/index.scss
+++ b/apps/miniprogram/src/pages/report/detail/index.scss
@@ -0,0 +1,142 @@
+@import '../../../styles/variables.scss';
+
+.detail-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 40px;
+}
+
+.detail-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.detail-title {
+  font-size: 34px;
+  font-weight: bold;
+  color: $tx;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 12px 0;
+  border-bottom: 1px solid $bd-l;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.detail-label {
+  font-size: 26px;
+  color: $tx2;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  font-size: 26px;
+  color: $tx;
+  text-align: right;
+  flex: 1;
+  margin-left: 24px;
+}
+
+.indicators-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.section-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.indicator-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid $bd-l;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.indicator-left {
+  display: flex;
+  flex-direction: column;
+}
+
+.indicator-name {
+  font-size: 26px;
+  color: $tx2;
+  margin-bottom: 4px;
+}
+
+.indicator-value {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.indicator-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.indicator-ref {
+  font-size: 22px;
+  color: $tx3;
+  margin-bottom: 4px;
+}
+
+.indicator-status {
+  font-size: 24px;
+  font-weight: bold;
+  padding: 4px 12px;
+  border-radius: 16px;
+
+  &.normal {
+    color: $tx3;
+    background: $bd-l;
+  }
+
+  &.high {
+    color: $dan;
+    background: $dan-l;
+  }
+
+  &.low {
+    color: $dan;
+    background: $dan-l;
+  }
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.loading-text,
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/report/detail/index.tsx
+++ b/apps/miniprogram/src/pages/report/detail/index.tsx
@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useRouter } from '@tarojs/taro';
+import { getReportDetail, LabReport } from '../../../services/report';
+import './index.scss';
+
+interface IndicatorItem {
+  name: string;
+  value: number;
+  unit?: string;
+  reference_min?: number;
+  reference_max?: number;
+  status?: string;
+}
+
+export default function ReportDetail() {
+  const router = useRouter();
+  const id = router.params.id || '';
+  const patientId = Taro.getStorageSync('current_patient_id') || '';
+
+  const [report, setReport] = useState<LabReport | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id || !patientId) return;
+    setLoading(true);
+    getReportDetail(patientId, id)
+      .then((data) => setReport(data))
+      .catch(() => Taro.showToast({ title: '加载失败', icon: 'none' }))
+      .finally(() => setLoading(false));
+  }, [id, patientId]);
+
+  const indicators: IndicatorItem[] = React.useMemo(() => {
+    if (!report?.indicators || typeof report.indicators !== 'object') return [];
+    return Object.entries(report.indicators).map(([name, val]: [string, any]) => ({
+      name,
+      value: val.value,
+      unit: val.unit,
+      reference_min: val.reference_min,
+      reference_max: val.reference_max,
+      status: val.status,
+    }));
+  }, [report]);
+
+  const getStatusInfo = (status?: string) => {
+    if (status === 'high') return { text: '偏高', icon: '', className: 'high' };
+    if (status === 'low') return { text: '偏低', icon: '', className: 'low' };
+    return { text: '正常', icon: '', className: 'normal' };
+  };
+
+  if (loading) {
+    return (
+      <View className='detail-page'>
+        <View className='loading-state'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (!report) {
+    return (
+      <View className='detail-page'>
+        <View className='empty-state'>
+          <Text className='empty-text'>报告不存在</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View className='detail-page'>
+      {/* 基本信息 */}
+      <View className='detail-card'>
+        <Text className='detail-title'>{report.report_type}</Text>
+        <View className='detail-row'>
+          <Text className='detail-label'>报告日期</Text>
+          <Text className='detail-value'>{report.report_date}</Text>
+        </View>
+        {report.doctor_interpretation && (
+          <View className='detail-row'>
+            <Text className='detail-label'>医生解读</Text>
+            <Text className='detail-value'>{report.doctor_interpretation}</Text>
+          </View>
+        )}
+      </View>
+
+      {/* 指标列表 */}
+      <View className='indicators-card'>
+        <Text className='section-title'>检查指标</Text>
+        {indicators.map((item) => {
+          const statusInfo = getStatusInfo(item.status);
+          return (
+            <View className='indicator-item' key={item.name}>
+              <View className='indicator-left'>
+                <Text className='indicator-name'>{item.name}</Text>
+                <Text className='indicator-value'>
+                  {item.value}
+                  {item.unit ? ` ${item.unit}` : ''}
+                </Text>
+              </View>
+              <View className='indicator-right'>
+                {item.reference_min != null && item.reference_max != null && (
+                  <Text className='indicator-ref'>
+                    {item.reference_min}~{item.reference_max}
+                  </Text>
+                )}
+                <Text className={`indicator-status ${statusInfo.className}`}>
+                  {statusInfo.icon} {statusInfo.text}
+                </Text>
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/report/index.scss
+++ b/apps/miniprogram/src/pages/report/index.scss
@@ -0,0 +1,88 @@
+@import '../../styles/variables.scss';
+
+.report-page {
+  min-height: 100vh;
+  background: $bg;
+  padding: 24px;
+  padding-bottom: 40px;
+}
+
+.report-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.report-card {
+  background: $card;
+  border-radius: $r;
+  padding: 28px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.report-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.report-type {
+  font-size: 30px;
+  font-weight: bold;
+  color: $tx;
+}
+
+.report-status {
+  font-size: 24px;
+  padding: 4px 16px;
+  border-radius: 20px;
+
+  &.normal {
+    color: $acc;
+    background: $acc-l;
+  }
+
+  &.abnormal {
+    color: $dan;
+    background: $dan-l;
+  }
+}
+
+.report-date {
+  font-size: 26px;
+  color: $tx2;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.report-note {
+  font-size: 24px;
+  color: $tx3;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120px 0;
+}
+
+.empty-text {
+  font-size: 28px;
+  color: $tx3;
+}
+
+.loading-hint {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.loading-text {
+  font-size: 24px;
+  color: $tx3;
+}
--- a/apps/miniprogram/src/pages/report/index.tsx
+++ b/apps/miniprogram/src/pages/report/index.tsx
@@ -0,0 +1,97 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro';
+import { listReports, LabReport } from '../../services/report';
+import './index.scss';
+
+const PAGE_SIZE = 20;
+
+export default function ReportList() {
+  const [reports, setReports] = useState<LabReport[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const patientId = Taro.getStorageSync('current_patient_id') || '';
+
+  const fetchData = useCallback(async (p: number, append = false) => {
+    if (!patientId) return;
+    setLoading(true);
+    try {
+      const res = await listReports(patientId, p);
+      const list = res.data || [];
+      setReports(append ? (prev) => [...prev, ...list] : list);
+      setTotal(res.total);
+      setPage(p);
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  }, [patientId]);
+
+  useDidShow(() => {
+    fetchData(1);
+  });
+
+  usePullDownRefresh(() => {
+    fetchData(1).finally(() => {
+      Taro.stopPullDownRefresh();
+    });
+  });
+
+  useReachBottom(() => {
+    if (!loading && reports.length < total) {
+      fetchData(page + 1, true);
+    }
+  });
+
+  const goToDetail = (id: string) => {
+    Taro.navigateTo({ url: `/pages/report/detail/index?id=${id}` });
+  };
+
+  const formatStatus = (report: LabReport) => {
+    const indicators = report.indicators;
+    if (!indicators || typeof indicators !== 'object') return '未知';
+    const vals = Object.values(indicators) as Array<{ status?: string }>;
+    const hasAbnormal = vals.some((v) => v.status === 'high' || v.status === 'low');
+    return hasAbnormal ? '异常' : '正常';
+  };
+
+  return (
+    <View className='report-page'>
+      <View className='report-list'>
+        {reports.map((r) => (
+          <View
+            className='report-card'
+            key={r.id}
+            onClick={() => goToDetail(r.id)}
+          >
+            <View className='report-card-top'>
+              <Text className='report-type'>{r.report_type}</Text>
+              <Text className={`report-status ${formatStatus(r) === '正常' ? 'normal' : 'abnormal'}`}>
+                {formatStatus(r)}
+              </Text>
+            </View>
+            <Text className='report-date'>{r.report_date}</Text>
+            {r.doctor_interpretation && (
+              <Text className='report-note'>{r.doctor_interpretation}</Text>
+            )}
+          </View>
+        ))}
+      </View>
+
+      {reports.length === 0 && !loading && (
+        <View className='empty-state'>
+          <Text className='empty-text'>暂无报告记录</Text>
+        </View>
+      )}
+
+      {loading && (
+        <View className='loading-hint'>
+          <Text className='loading-text'>加载中...</Text>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/services/appointment.ts
+++ b/apps/miniprogram/src/services/appointment.ts
@@ -0,0 +1,50 @@
+import { api } from './request';
+
+export interface Appointment {
+  id: string;
+  patient_name: string;
+  doctor_name: string;
+  department: string;
+  appointment_date: string;
+  time_slot: string;
+  status: string;
+  version: number;
+}
+
+export async function listAppointments(page = 1) {
+  return api.get<{ data: Appointment[]; total: number }>(`/health/appointments?page=${page}&page_size=20`);
+}
+
+export async function createAppointment(data: {
+  patient_id: string;
+  doctor_id: string;
+  schedule_id: string;
+  appointment_date: string;
+  time_slot: string;
+  reason?: string;
+}) {
+  return api.post<Appointment>('/health/appointments', data);
+}
+
+export async function cancelAppointment(id: string, version: number) {
+  return api.put(`/health/appointments/${id}/status`, {
+    status: 'cancelled',
+    version,
+  });
+}
+
+export async function getDoctorSchedules(doctorId: string, startDate: string, endDate: string) {
+  return api.get<{ data: any[]; total: number }>(
+    `/health/doctor-schedules?doctor_id=${doctorId}&start_date=${startDate}&end_date=${endDate}&page_size=50`
+  );
+}
+
+export async function listDoctors(department?: string) {
+  const deptParam = department ? `&department=${department}` : '';
+  return api.get<{ data: any[]; total: number }>(`/health/doctors?page_size=100${deptParam}`);
+}
+
+export async function calendarView(startDate: string, endDate: string, doctorId?: string) {
+  const docParam = doctorId ? `&doctor_id=${doctorId}` : '';
+  return api.get<any[]>(`/health/doctor-schedules/calendar?start_date=${startDate}&end_date=${endDate}${docParam}`);
+}
--- a/apps/miniprogram/src/services/article.ts
+++ b/apps/miniprogram/src/services/article.ts
@@ -0,0 +1,19 @@
+import { api } from './request';
+
+export interface Article {
+  id: string;
+  title: string;
+  summary?: string;
+  content?: string;
+  cover_image?: string;
+  category?: string;
+  published_at?: string;
+}
+
+export async function listArticles(page = 1) {
+  return api.get<{ data: Article[]; total: number }>(`/health/articles?page=${page}&page_size=20`);
+}
+
+export async function getArticleDetail(id: string) {
+  return api.get<Article>(`/health/articles/${id}`);
+}
--- a/apps/miniprogram/src/services/followup.ts
+++ b/apps/miniprogram/src/services/followup.ts
@@ -0,0 +1,36 @@
+import { api } from './request';
+
+export interface FollowUpTask {
+  id: string;
+  patient_name: string;
+  task_type: string;
+  description: string;
+  status: string;
+  due_date: string;
+  version: number;
+}
+
+export interface FollowUpRecord {
+  id: string;
+  task_id: string;
+  content: any;
+  created_at: string;
+}
+
+export async function listTasks(status?: string) {
+  const statusParam = status ? `&status=${status}` : '';
+  return api.get<{ data: FollowUpTask[]; total: number }>(
+    `/health/follow-up-tasks?page=1&page_size=50${statusParam}`
+  );
+}
+
+export async function submitRecord(data: { task_id: string; content: any }) {
+  return api.post<FollowUpRecord>('/health/follow-up-records', data);
+}
+
+export async function listRecords(taskId?: string) {
+  const taskParam = taskId ? `&task_id=${taskId}` : '';
+  return api.get<{ data: FollowUpRecord[]; total: number }>(
+    `/health/follow-up-records?page=1&page_size=50${taskParam}`
+  );
+}
--- a/apps/miniprogram/src/services/patient.ts
+++ b/apps/miniprogram/src/services/patient.ts
@@ -0,0 +1,30 @@
+import { api } from './request';
+
+export interface Patient {
+  id: string;
+  name: string;
+  gender?: string;
+  birthday?: string;
+  phone?: string;
+  id_number?: string;
+  relation?: string;
+  version: number;
+}
+
+export async function listPatients() {
+  return api.get<{ data: Patient[]; total: number }>('/health/patients?page=1&page_size=100');
+}
+
+export async function createPatient(data: {
+  name: string;
+  gender?: string;
+  birthday?: string;
+  phone?: string;
+  id_number?: string;
+}) {
+  return api.post<Patient>('/health/patients', data);
+}
+
+export async function updatePatient(id: string, data: any, version: number) {
+  return api.put<Patient>(`/health/patients/${id}`, { ...data, version });
+}
--- a/apps/miniprogram/src/services/report.ts
+++ b/apps/miniprogram/src/services/report.ts
@@ -0,0 +1,21 @@
+import { api } from './request';
+
+export interface LabReport {
+  id: string;
+  report_date: string;
+  report_type: string;
+  indicators: any;
+  doctor_interpretation?: string;
+  image_urls?: string[];
+  version: number;
+}
+
+export async function listReports(patientId: string, page = 1) {
+  return api.get<{ data: LabReport[]; total: number }>(
+    `/health/patients/${patientId}/lab-reports?page=${page}&page_size=20`
+  );
+}
+
+export async function getReportDetail(patientId: string, id: string) {
+  return api.get<LabReport>(`/health/patients/${patientId}/lab-reports/${id}`);
+}