# 预约问诊界面更新说明

## 更新内容

根据UI设计图更新了预约问诊组件，使其更符合实际业务需求。

## 新增功能

### 1. 预约方式选择
- **选择时段预约有专医生**：先选时间段，系统推荐有空的医生
- **选择医生预约有专时段**：先选医生，显示该医生的可用时间段

### 2. 预约类型
- 视频问诊（可扩展：图文问诊、电话问诊等）

### 3. 患者信息
- 显示当前患者姓名
- 显示上次就诊记录

### 4. 医生选择优化
- 单选按钮形式选择医生
- 每个医生名称后显示可用号源数量标签
  - 有号源：绿色标签显示数字
  - 无号源：灰色标签显示"无"

### 5. 日期选择优化
- 横向按钮式布局
- 显示未来7天
- 格式：02月26日 (四)
- 选中状态：蓝色按钮

### 6. 时间段显示优化
- 4列网格布局
- 每个时间段包含：
  - 时间（如：09:00-09:30）
  - 可用号源数量标签
- 状态样式：
  - 可预约：白色背景 + 蓝色数字标签
  - 不可预约：灰色背景 + 灰色"无"标签
  - 已选择：蓝色背景 + 白色文字

## 界面布局

```
┌─────────────────────────────────────────────────────────┐
│ 预约问诊                                          [X]    │
├─────────────────────────────────────────────────────────┤
│ 上次就诊: 无就诊记录                                     │
│                                                          │
│ 预约方式: ○ 选择时段预约有专医生                         │
│          ● 选择医生预约有专时段                          │
│                                                          │
│ 预约类型: ● 视频问诊                                     │
│                                                          │
│ 选择患者: ● 刘炳希                                       │
│                                                          │
│ 预约医生: ● 樊平 [7]  ○ 樊雪芹 [7]  ○ 刘文英 [7]       │
│          ○ 王西诗 [7] ○ 吉红梅 [7]  ○ 李世伟           │
│          ○ 李新星 [7] ○ 喻小勇                          │
│                                                          │
│ 预约时间:                                                │
│  [02月26日(四)] [02月27日(五)] [02月28日(六)]           │
│                                                          │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐  │
│  │09:00-09:30│ │09:30-10:00│ │10:00-10:30│ │10:30-11:00│  │
│  │    无     │ │    无     │ │    无     │ │    无     │  │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘  │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐  │
│  │13:00-13:30│ │13:30-14:00│ │14:00-14:30│ │14:30-15:00│  │
│  │    无     │ │    无     │ │    无     │ │    无     │  │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘  │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐  │
│  │15:00-15:30│ │15:30-16:00│ │16:00-16:30│ │16:30-17:00│  │
│  │    无     │ │    无     │ │    无     │ │    无     │  │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘  │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐              │
│  │17:00-17:30│ │17:30-18:00│ │18:00-18:30│              │
│  │    无     │ │    无     │ │    无     │              │
│  └──────────┘ └──────────┘ └──────────┘              │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐              │
│  │19:00-19:30│ │19:30-20:00│ │20:00-20:30│              │
│  │    无     │ │    无     │ │    6      │ ← 选中      │
│  └──────────┘ └──────────┘ └──────────┘              │
│                                                          │
│ 备注: _______________________________________________    │
│                                                          │
├─────────────────────────────────────────────────────────┤
│                                      [取消]  [确定]      │
└─────────────────────────────────────────────────────────┘
```

## 技术实现要点

### 1. 时间段生成
```typescript
// 生成30分钟间隔的时间段
const generateTimeSlots = () => {
  const slots = []
  // 上午: 09:00-12:00
  for (let hour = 9; hour < 12; hour++) {
    for (let minute = 0; minute < 60; minute += 30) {
      slots.push({
        time: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`,
        period: 'morning'
      })
    }
  }
  // 下午: 13:00-20:30
  for (let hour = 13; hour <= 20; hour++) {
    for (let minute = 0; minute < 60; minute += 30) {
      if (hour === 20 && minute > 30) break
      slots.push({
        time: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`,
        period: 'afternoon'
      })
    }
  }
  return slots
}
```

### 2. 医生可用号源统计
```typescript
// 获取医生在指定日期的可用号源总数
const getDoctorAvailability = async (doctorId: number, date: string) => {
  const morningSlots = await getAvailableSlots({
    doctor_id: doctorId,
    date: date,
    period: 'morning'
  })
  
  const afternoonSlots = await getAvailableSlots({
    doctor_id: doctorId,
    date: date,
    period: 'afternoon'
  })
  
  const totalAvailable = [
    ...(morningSlots?.slots || []),
    ...(afternoonSlots?.slots || [])
  ].filter(slot => slot.available && slot.quota > 0).length
  
  return totalAvailable
}
```

### 3. 响应式布局
```scss
.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .time-slots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
```

## 后端API需要返回的数据

### 1. 可用时间段接口增强
```json
{
  "slots": [
    {
      "time": "09:00",
      "available": true,
      "quota": 5,  // 剩余号源数
      "total": 10  // 总号源数
    }
  ]
}
```

### 2. 医生可用号源统计接口（新增）
```
GET /doctor.appointment/doctorAvailability
参数:
{
  "doctor_id": 1,
  "date": "2024-02-26"
}

返回:
{
  "available_count": 7,  // 可用号源总数
  "total_count": 20      // 总号源数
}
```

## 用户体验优化

1. **加载状态**：在获取数据时显示加载动画
2. **空状态提示**：当没有可用时间段时显示友好提示
3. **实时更新**：选择医生或日期后立即加载时间段
4. **视觉反馈**：
   - 可点击元素有hover效果
   - 选中状态明显区分
   - 不可用状态灰色显示
5. **错误处理**：网络错误时显示错误提示

## 扩展建议

1. **智能推荐**：根据患者历史就诊记录推荐医生
2. **快速预约**：一键预约最近可用时间
3. **批量查看**：同时查看多个医生的可用时间
4. **日历视图**：提供月历视图方便选择日期
5. **收藏医生**：支持收藏常用医生快速预约