# 长者档案功能 - 快速开始指南

## 📋 功能概述

在长者卡片上添加了"长者档案"按钮，点击可以查看长者的详细信息，包括：
- 基本信息（名字、年龄、性别）
- 联系方式（电话、地址）
- 预警历史记录

## 🚀 快速开始

### 1. 查看长者档案

```
1. 打开大屏页面
2. 在左侧老人列表中找到要查看的长者
3. 点击长者卡片右侧的"长者档案"按钮
4. 弹窗打开，显示长者的详细信息
```

### 2. 弹窗内容

弹窗分为三个主要区域：

#### 基本信息区
```
┌─────────────────────────────────┐
│  [头像]  姓名：王奶奶            │
│          年龄：72岁             │
│          性别：女               │
└─────────────────────────────────┘
```

#### 联系方式区
```
┌─────────────────────────────────┐
│ 联系方式                         │
│ 长者电话：13800138000           │
│ 家属电话：13900139000           │
│ 地址：北京市朝阳区建国路1号     │
└─────────────────────────────────┘
```

#### 预警历史区
```
┌─────────────────────────────────┐
│ 预警历史 (3)                     │
│ ┌─────────────────────────────┐ │
│ │ [跌倒预警]    2024-01-15    │ │
│ │ 检测到长者跌倒，请立即查看   │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ [心率异常]    2024-01-14    │ │
│ │ 心率过高，建议就医检查       │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘
```

## 📁 文件结构

```
src/views/Home/
├── components/
│   ├── ElderProfileDialog.vue      ← 新增：长者档案弹窗组件
│   ├── ElderlyCard.vue             ← 修改：添加档案按钮
│   └── ElderlyList.vue             ← 修改：传递事件
├── home-refactored.vue             ← 修改：集成档案组件
├── ELDER_PROFILE_FEATURE.md        ← 功能文档
├── TEST_GUIDE.md                   ← 测试指南
└── QUICK_START.md                  ← 本文件
```

## 🔧 技术细节

### 组件通信流程

```
ElderlyCard (点击档案按钮)
    ↓ emit('viewProfile')
ElderlyList
    ↓ emit('viewProfile')
home-refactored.vue (打开弹窗)
    ↓ 传递 elderId
ElderProfileDialog (显示档案)
```

### 数据流

```
点击档案按钮
    ↓
openElderProfileDialog(elderly)
    ↓
currentProfileElderId = elderly.id
elderProfileDialogVisible = true
    ↓
ElderProfileDialog 监听到 elderId 变化
    ↓
调用 fetchElderDetail(elderId)
    ↓
GET /api/pc/admin/getElderDetail?elderId=xxx
    ↓
显示数据或假数据
```

## 🎨 样式特点

- **头部**: 蓝紫渐变色背景
- **头像**: 圆形设计，显示名字首字
- **预警**: 橙色警告色突出显示
- **滚动**: 预警列表支持滚动显示

## 🧪 测试假数据

当接口暂无数据时，会自动生成假数据：

```typescript
// 假数据示例
{
  name: "王奶奶",
  age: 72,
  gender: "女",
  elderPhone: "13800138000",
  relativePhone: "13900139000",
  address: "北京市朝阳区建国路1号",
  warningData: [
    {
      eventType: "跌倒预警",
      message: "检测到长者跌倒，请立即查看",
      happensAt: "2024-01-15T10:30:00Z"
    }
  ]
}
```

## 📞 API 接口

### 获取长者档案

**请求**:
```
GET /api/pc/admin/getElderDetail?elderId=1
```

**响应**:
```json
{
  "id": 1,
  "name": "王奶奶",
  "age": 72,
  "gender": "女",
  "elderPhone": "13800138000",
  "relativePhone": "13900139000",
  "address": "北京市朝阳区建国路1号",
  "warningData": [
    {
      "eventType": "跌倒预警",
      "message": "检测到长者跌倒，请立即查看",
      "happensAt": "2024-01-15T10:30:00Z"
    }
  ]
}
```

## ⚙️ 配置说明

### ElderProfileDialog Props

| 属性 | 类型 | 说明 |
|------|------|------|
| modelValue | boolean | 弹窗是否显示 |
| elderId | number | 长者ID |

### ElderProfileDialog Events

| 事件 | 说明 |
|------|------|
| update:modelValue | 弹窗显示/隐藏状态变化 |

## 🔄 后续改进计划

- [ ] 接口正式上线后移除假数据
- [ ] 添加编辑功能
- [ ] 添加导出PDF功能
- [ ] 添加预警记录筛选
- [ ] 支持真实头像上传
- [ ] 添加更多统计信息

## ❓ 常见问题

### Q: 为什么显示的是假数据？
A: 因为接口 `/api/pc/admin/getElderDetail` 还没有真实数据，所以组件会自动生成假数据用于测试。

### Q: 如何关闭弹窗？
A: 点击弹窗右上角的关闭按钮即可。

### Q: 预警记录太多怎么办？
A: 预警列表支持滚动，可以向下滚动查看更多记录。

### Q: 如何修改假数据？
A: 编辑 `ElderProfileDialog.vue` 中的 `generateMockData` 函数。

## 📞 技术支持

如有问题，请查看：
1. `ELDER_PROFILE_FEATURE.md` - 详细功能文档
2. `TEST_GUIDE.md` - 测试指南
3. 代码注释

## 📝 更新日志

### v1.0.0 (2024-01-15)
- ✅ 新增长者档案弹窗组件
- ✅ 添加档案按钮到长者卡片
- ✅ 实现数据加载和显示
- ✅ 添加假数据生成逻辑
- ✅ 完成样式设计