CollegeAIcenter/frontend

医科高校 AI 学习中心 · 前端（三端）

基于 Next.js 14（App Router）+ TypeScript + Tailwind CSS 的三端前端，与 NestJS 后端真实联调。

三端

• 学生端 /student：学习空间、能力画像、职业规划、课程对练、临床对话对练、研究资料查询、AI 协同训练
• 导师端 /mentor：题目审核、成果点评、带教学生画像
• 管理端 /admin：技能治理、权限与合规

登录后按账号角色自动进入对应工作台；AppShell 做角色访问守卫，跨角色访问会被拦截。

与后端联调

• 所有请求走 /api/*，由 next.config.mjs 的 rewrites 代理到后端（默认 http://localhost:3000），避免浏览器跨域。
• 鉴权：登录/注册成功后将 JWT 存入 localStorage，后续请求自动附加 Authorization: Bearer <token>。
• 错误：后端统一错误体（AppError.toJSON()）由 ApiError 承载，UI 展示 message。

可用环境变量 BACKEND_URL 覆盖后端地址（如部署时）。

本地运行

# 1) 先启动后端（仓库根目录）
npm run start:dev          # 监听 3000，需 .env 中 DB_ENABLED 与 PostgreSQL（可选）

# 2) 启动前端（frontend 目录）
cd frontend
npm install
npm run dev                # 监听 4000

打开 http://localhost:4000 ，注册一个账号（可选角色：学生 / 导师 / 管理员）后即可进入对应工作台。

构建

npm run build && npm run start

目录

src/
  app/                 # App Router 页面（login / student / mentor / admin）
  components/          # AppShell（外壳+守卫）与基础 UI 组件
  lib/
    api.ts             # fetch 封装：鉴权头、错误解析（ApiError）
    auth-context.tsx   # 登录态上下文（login/register/logout/me）
    services.ts        # 按后端模块组织的 API 服务函数
    types.ts           # 与后端对齐的类型与枚举