12. 在线教育平台（technical-architecture）

1. 架构设计

2. 技术栈说明

• 前端: React@18 + Ant Design@5 (或自定义清新主题) + TypeScript + Vite
• UI框架: Ant Design (配合 Tailwind CSS 进行样式定制以符合清新风格)
• 视频播放器: React Player 或 Video.js 封装
• 后端: Supabase (BaaS服务)
• 数据库: PostgreSQL (Supabase内置)
• 认证: Supabase Auth
• 文件存储: Supabase Storage (用于存储课程封面、视频文件)
• 状态管理: Zustand 或 React Context
• 路由: React Router@6

3. 路由定义

4. API 定义

4.1 课程 API

获取课程列表

GET /rest/v1/courses

Query Parameters:

• category_id: 分类筛选
• level: 难度筛选
• sort: 排序 (latest, popular, price_asc, price_desc)

获取课程详情

GET /rest/v1/courses?id=eq.{id}&select=*,chapters(id,title,lessons(id,title,duration,is_free))

4.2 学习进度 API

更新学习进度

POST /rest/v1/user_progress

Request Body:

{
  "user_id": "uuid",
  "lesson_id": "uuid",
  "progress_seconds": 120,
  "is_completed": false,
  "last_watched_at": "timestamp"
}

获取课程进度

GET /rest/v1/user_progress?user_id=eq.{uid}&course_id=eq.{cid}

4.3 测试 API

提交测试结果

POST /rest/v1/test_results

Request Body:

{
  "user_id": "uuid",
  "test_id": "uuid",
  "score": 85,
  "answers":_json_details_
}

5. 数据模型

5.1 ER 图

5.2 数据定义语言 (DDL)

课程表 (courses)

CREATE TABLE courses (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title VARCHAR(200) NOT NULL,
  description TEXT,
  cover_url TEXT,
  price DECIMAL(10,2) DEFAULT 0,
  level VARCHAR(20) CHECK (level IN ('beginner', 'intermediate', 'advanced')),
  category_id UUID,
  teacher_id UUID REFERENCES auth.users(id),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

章节表 (chapters)

CREATE TABLE chapters (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  course_id UUID REFERENCES courses(id) ON DELETE CASCADE,
  title VARCHAR(100) NOT NULL,
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

课时表 (lessons)

CREATE TABLE lessons (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  chapter_id UUID REFERENCES chapters(id) ON DELETE CASCADE,
  title VARCHAR(100) NOT NULL,
  video_url TEXT,
  duration_seconds INTEGER DEFAULT 0,
  is_free BOOLEAN DEFAULT false,
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

学习进度表 (user_progress)

CREATE TABLE user_progress (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  lesson_id UUID REFERENCES lessons(id) ON DELETE CASCADE,
  progress_seconds INTEGER DEFAULT 0,
  is_completed BOOLEAN DEFAULT false,
  last_watched_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(user_id, lesson_id)
);

6. 关键技术实现

6.1 视频播放器

• 封装 HTML5 Video 或使用 react-player。
• 实现自定义控制条，支持倍速 (0.5x, 1.0x, 1.5x, 2.0x)。
• 监听 timeupdate 事件，定期（如每10秒）或暂停/结束时同步进度到后端。
• 防拖拽限制（可选，用于考试类课程）。

6.2 筛选组件

• 组合筛选：支持多条件同时筛选（分类 + 难度 + 价格）。
• 状态同步：筛选条件同步到 URL Query 参数，方便分享和刷新保持状态。
• 性能优化：前端缓存筛选配置项，减少 API 请求。

6.3 学习进度管理

• 自动记录：记录每个视频的观看时长。
• 课程完成度计算：后端聚合计算或前端根据 user_progress 计算课程总进度。
• 续播功能：进入课程详情页或播放页时，自动跳转到上次观看位置。

6.4 安全与权限

• 视频鉴权：视频 URL 设置有时效性的 Signed URL，防止盗链。
• 购买验证：后端 RLS (Row Level Security) 策略，确保只有购买/加入课程的用户才能获取视频播放地址。