13. 医院预约挂号系统（technical-architecture）

1. 架构设计

2. 技术栈说明

• 前端: React@18 + Ant Design@5 (或 Ant Design Mobile) + TypeScript + Vite
• UI框架: Tailwind CSS (用于布局和细节调整) + Ant Design (使用其成熟的表单、日历、列表组件)
• 后端: Supabase (BaaS)
• 数据库: PostgreSQL
• 认证: Supabase Auth (手机号/邮箱登录)
• 状态管理: Zustand
• 路由: React Router@6
• 日期处理: Day.js

3. 路由定义

4. API 定义

4.1 基础数据 API

获取科室列表

GET /rest/v1/departments

获取医生列表

GET /rest/v1/doctors?select=*,departments(name)

Query Parameters:

• department_id: 科室筛选
• title: 职称筛选

4.2 预约相关 API

获取医生排班

GET /rest/v1/schedules?doctor_id=eq.{id}&date=gte.{today}

提交预约

POST /rest/v1/appointments

Request Body:

{
  "user_id": "uuid",
  "schedule_id": "uuid",
  "patient_name": "珊",
  "patient_id_card": "110101...",
  "patient_phone": "xxx",
  "status": "pending"
}

4.3 健康档案 API

获取/更新健康档案

GET /rest/v1/health_profiles?user_id=eq.{uid}
POST /rest/v1/health_profiles

5. 数据模型

5.1 ER 图

5.2 数据定义语言 (DDL)

科室表 (departments)

CREATE TABLE departments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(100) NOT NULL,
  description TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

医生表 (doctors)

CREATE TABLE doctors (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  department_id UUID REFERENCES departments(id),
  name VARCHAR(100) NOT NULL,
  title VARCHAR(50), -- 主任医师, 副主任医师, 主治医师
  avatar_url TEXT,
  introduction TEXT,
  consultation_fee DECIMAL(10,2) DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

排班表 (schedules)

CREATE TABLE schedules (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  doctor_id UUID REFERENCES doctors(id),
  work_date DATE NOT NULL,
  start_time TIME NOT NULL,
  end_time TIME NOT NULL,
  max_count INTEGER DEFAULT 20,
  booked_count INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

预约表 (appointments)

CREATE TABLE appointments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id),
  schedule_id UUID REFERENCES schedules(id),
  patient_name VARCHAR(100) NOT NULL,
  patient_id_card VARCHAR(18),
  patient_phone VARCHAR(20) NOT NULL,
  status VARCHAR(20) DEFAULT 'pending', -- pending, confirmed, completed, cancelled
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

6. 关键技术实现

6.1 日期与排班选择

• 使用 Ant Design 的 Calendar 或 DatePicker 组件定制。
• 前端需处理日期的格式化与展示，区分“上午”、“下午”或具体时间段。
• 逻辑：点击医生 -> 获取 schedules -> 渲染日历上可预约的日期 -> 点击日期显示具体时间段号源。

6.2 表单验证

• 引入 async-validator 或使用 Ant Design Form 内置校验。
• 身份证校验：严格校验18位身份证格式及校验位。
• 手机号校验：正则匹配。
• 防重复提交：提交按钮点击后置灰，或使用防抖(debounce)处理。

6.3 预约并发控制

• 乐观锁或数据库约束：在 schedules 表增加 booked_count 字段。
• 预约时执行 SQL 事务或原子更新：

  UPDATE schedules 
  SET booked_count = booked_count + 1 
  WHERE id = {schedule_id} AND booked_count < max_count;
  

• 若更新行数为0，则提示“号源已满”。

6.4 实时咨询 (可选)

• 利用 Supabase Realtime 订阅 consultation_messages 表的 INSERT 事件。
• 实现简单的聊天界面，消息自动滚动到底部。