Train/apps/web/README.md

中国机车图鉴 · 前端 (apps/web)

Vite + React + TypeScript，消费 apps/api（NestJS）的接口。对应 Phase 1C（T-1.5/1.6/1.7）。

功能

• 列表页：分类/状态/国别/年代区间/时速筛选 + 排序 + 分页
• 三视图切换：列表卡片 / 时间轴（分类泳道）/ 图鉴卡牌（含收集占位）
• 详情页：技术参数表 + 原始数据（raw_json）保真表
• 全局搜索框：防抖下拉，命中跳转详情

开发运行（需先启动后端）

# 1) 终端 A：启动后端 API（在 apps/api）
cd apps/api && npm run build && node dist/main.js     # http://localhost:3001

# 2) 终端 B：启动前端（在 apps/web）
npm run dev                                            # http://localhost:5173

Vite 已将 /api 代理到 http://127.0.0.1:3001，无需额外配置。

测试与构建

npm test         # Vitest 单元/组件测试（23 项）
npm run build    # tsc 类型检查 + vite 生产构建

说明

• 时间轴布局、格式化、查询拼装等纯逻辑抽到 src/lib、src/api，便于单测。
• 图鉴"已收集/未收集"为占位，收集逻辑待 Phase 3 打卡功能接入。