# matchAI_web

**Repository Path**: eto_-ailabs/match-ai_web

## Basic Information

- **Project Name**: matchAI_web
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: BSD-2-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-24
- **Last Updated**: 2026-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MatchAI UP 官网

校园 AI 社交匹配平台 · 官网 (C 端)。参考 `match-ai-prd` 原型, Vue 3 + TypeScript + Naive UI, PC 自适应。

后端为 **ruoyi-vue-pro** (localhost:8082), C 端走 `/app-api`。业务接口 (分身/匹配/部落) 后端尚未实现, 前端以 **mock 先行**, 契约见 [docs/api-contract.md](docs/api-contract.md)。

## 技术栈

- Vue 3.5 + TypeScript (strict)
- Vite 6 + pnpm
- Naive UI (auto-import) + 自定义暖色主题 (`src/theme.ts`)
- Vue Router 4 (history) · Pinia + persistedstate
- Axios 类型化 API 层 (`src/api`) + 轻量 mock adapter (`src/mock`)

## 快速开始

```bash
pnpm install
pnpm dev        # http://localhost:5173
```

| 命令 | 说明 |
|---|---|
| `pnpm dev` | 开发服务器 (默认走 mock) |
| `pnpm type-check` | vue-tsc 类型检查 |
| `pnpm build` | 类型检查 + 生产构建 (dist/) |
| `pnpm lint` / `pnpm format` | ESLint / Prettier |

## 环境变量

`.env.development` (默认):

```
VITE_API_BASE_URL=/app-api      # 经 vite proxy → localhost:8082
VITE_USE_MOCK=true              # true 走 mock, false 走真实后端
```

后端就绪后: 设 `VITE_USE_MOCK=false` 即切真实接口, 业务字段须与契约一致。

## 目录结构

```
src/
  api/          # 类型化 API 层 (client / types / auth / match / discover)
  mock/         # axios adapter mock (adapter / handlers / data)
  styles/       # 全局样式 + 设计 token
  theme.ts      # Naive UI 主题定制
  router/       # 路由 + 守卫
  stores/       # Pinia (auth)
  layouts/      # MarketingLayout / AppLayout / AuthLayout
  components/common/  # 共享组件 (AppHeader/Footer/Card/Empty/SectionTitle)
  features/     # 按模块竖切, 见下方拆分
```

## 模块拆分 (3 全栈工程师)

| 工程师 | 前端 (features/) | 后端 (app-api) |
|---|---|---|
| A | `auth` + `marketing` | 对接已有 member auth, 无新接口 |
| B | `onboarding` + `match` | `/match/avatar`, `/match/candidates`, `/match/like`, `/match/pass` |
| C | `results` + `discover` | `/match/results`, `/discover/tribes`, `/discover/schools` |

约定:

- 单人合主分支前, 先跑 `pnpm type-check` + `pnpm lint`
- 新页面放进对应 `features/<module>/` 下, 禁止跨模块引用 (共享物放 `components/common` 或 `api`)
- 新接口: 在 `src/api/types.ts` 定类型 → `src/api/<module>.ts` 加函数 → `src/mock/handlers.ts` 加 mock

## 页面

| 路由 | 页面 | 归属 |
|---|---|---|
| `/` | 官网首页 | A |
| `/mechanism` | 匹配机制 | A |
| `/login` | 登录 / 注册 (验证码或密码) | A |
| `/onboarding` | 创建 AI 分身 (问卷) | B |
| `/home` | 遇见 (匹配卡片) | B |
| `/results` | 匹配结果 | C |
| `/discover` | 校园发现 (部落) | C |

## Mock 说明

开发环境 mock 由 `src/mock` 提供 (axios adapter 注入), 无需后端即可跑通全流程:

- 验证码登录: 验证码固定 `123456`
- 密码登录: 密码默认 `123456`
- 数据在内存, 刷新即重置

## 设计语言

暖米底 (`#f6f3ed`)、深墨文字 (`#171a17`)、品牌陶土橙 (`#c25c3b`), 圆角卡片。Token 集中在 `src/theme.ts` + `src/styles/global.css` 的 CSS 变量。改品牌色只动这两处。