14. 酒店预订管理系统（technical-architecture）

1. 架构设计

2. 技术栈说明

• 前端框架: React@18 + Vite
• UI 组件库: Ant Design (后台管理/复杂表单) + Tailwind CSS (C端页面布局与样式定制)
• 语言: TypeScript
• 路由: React Router@6
• 状态管理: Zustand (轻量级状态管理)
• 日期处理: Day.js (轻量高效的日期库)
• 图片轮播: Swiper.js 或 Ant Design Carousel
• 后端服务: Supabase (BaaS)
  • Auth: 用户认证
  • Database: PostgreSQL
  • Storage: 存储房间图片

3. 路由定义

4. API 定义

4.1 房源相关 API

获取房源列表

GET /rest/v1/rooms?select=*

Query Parameters:

• price_gte, price_lte: 价格区间
• type: 房型
• capacity: 入住人数

获取房源详情

GET /rest/v1/rooms?id=eq.{id}

4.2 订单相关 API

提交订单

POST /rest/v1/orders

Request Body:

{
  "user_id": "uuid",
  "room_id": "uuid",
  "check_in_date": "2023-10-01",
  "check_out_date": "2023-10-03",
  "total_price": 500.00,
  "guest_name": "珊",
  "guest_phone": "xxxxx",
  "status": "pending"
}

获取我的订单

GET /rest/v1/orders?user_id=eq.{uid}&order=created_at.desc

4.3 评价相关 API

获取房间评价

GET /rest/v1/reviews?room_id=eq.{id}

5. 数据模型

5.1 ER 图

5.2 数据定义语言 (DDL)

房型表 (room_types)

CREATE TABLE room_types (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(100) NOT NULL,
  description TEXT,
  price_per_night DECIMAL(10,2) NOT NULL,
  capacity INTEGER DEFAULT 2,
  amenities JSONB DEFAULT '[]',
  image_urls TEXT[],
  total_stock INTEGER DEFAULT 1,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

订单表 (orders)

CREATE TABLE orders (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id),
  room_type_id UUID REFERENCES room_types(id),
  check_in_date DATE NOT NULL,
  check_out_date DATE NOT NULL,
  total_price DECIMAL(10,2) NOT NULL,
  guest_name VARCHAR(100),
  guest_phone VARCHAR(20),
  status VARCHAR(20) DEFAULT 'pending',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

评价表 (reviews)

CREATE TABLE reviews (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id),
  room_type_id UUID REFERENCES room_types(id),
  order_id UUID REFERENCES orders(id),
  rating INTEGER CHECK (rating >= 1 AND rating <= 5),
  comment TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

6. 关键技术实现

6.1 日历与库存逻辑

• 日历选择: 使用 Ant Design 的 RangePicker 或自定义日历组件。需禁用“过去日期”。
• 库存检查:
  • 简单模式：room_types.total_stock 减去该时间段内已确认订单的数量。
  • 查询逻辑：

    -- 查询某房型在特定日期范围内的占用数量
    SELECT count(*) FROM orders 
    WHERE room_type_id = {id}
    AND status IN ('paid', 'confirmed')
    AND NOT (check_out_date <= {startDate} OR check_in_date >= {endDate})
    

  • 若 total_stock - occupied_count > 0，则该日期可订。

6.2 图片轮播

• 使用 Swiper 或 react-slick 实现首页推荐和详情页大图展示。
• 详情页支持点击放大预览（Lightbox效果）。
• 图片资源存储在 Supabase Storage，通过 CDN URL 加载。

6.3 筛选器实现

• 前端维护筛选状态 filterState (priceRange, capacity, type)。
• 监听状态变化，通过 Supabase Client 构建查询：

  let query = supabase.from('room_types').select('*');
  if (minPrice) query = query.gte('price_per_night', minPrice);
  if (maxPrice) query = query.lte('price_per_night', maxPrice);
  if (capacity) query = query.gte('capacity', capacity);