# china-test

**Repository Path**: xp630/china-test

## Basic Information

- **Project Name**: china-test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-10
- **Last Updated**: 2026-08-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中医九种体质测评 · 酷炫暗色科技感版

> 基于国标 ZYYXH/T157-2009《中医体质分类与判定》的王琦九种体质测评系统。
> 整套前端采用 **深色科技感 + 玻璃拟态 + 霓虹渐变** 设计语言，H5 答题 + PC 管理后台一体交付。

## 技术栈

| 层 | 技术 |
| --- | --- |
| 构建 | Vite 5 |
| 视图 | React 18 + TypeScript |
| H5 UI | antd-mobile 5 |
| PC UI | antd 5 |
| 动效 | framer-motion 11 |
| 图表 | ECharts 5 |
| 路由 | react-router-dom 6 |

## 目录结构

```
评测-中医/
├─ docs/                      # 项目文档
│  └─ requirements.md         # 完整功能需求
├─ src/
│  ├─ main.tsx                # 入口
│  ├─ App.tsx                 # 路由配置
│  ├─ styles/global.css       # 全局深色 + 玻璃 + 霓虹样式
│  ├─ data/
│  │  └─ constitutionQuestions.ts   # 国标示范题（mock）
│  ├─ utils/
│  │  └─ score.ts             # 分数计算 + 转化分 + 判定
│  ├─ components/
│  │  ├─ GlassCard.tsx        # 玻璃卡片
│  │  ├─ NeonButton.tsx       # 霓虹按钮
│  │  ├─ ProgressBar.tsx      # 流动光进度条
│  │  └─ RadarChart.tsx       # 3D 风格雷达图
│  └─ pages/
│     ├─ mobile/              # H5 答题端
│     │  ├─ Home.tsx          # 首页 / 介绍
│     │  ├─ Info.tsx          # 信息采集
│     │  ├─ Quiz.tsx          # 答题
│     │  └─ Result.tsx        # 报告（雷达图 + 维度）
│     └─ admin/               # PC 管理后台
│        ├─ Login.tsx
│        ├─ Dashboard.tsx
│        ├─ Questions.tsx     # 题库管理
│        ├─ Responses.tsx     # 答卷列表
│        └─ ResponseDetail.tsx
└─ ...
```

## 本地运行

```bash
npm install
npm run dev          # 默认 5173，进入 /m 是 H5，进入 /admin 是 PC 后台
```

## 路由表

| 路径 | 说明 |
| --- | --- |
| `/m` | H5 首页（介绍 + 开始测评） |
| `/m/info` | 用户信息采集 |
| `/m/quiz` | 答题主流程 |
| `/m/result` | 测评结果 / 雷达图 |
| `/admin/login` | 后台登录 |
| `/admin` | 仪表盘 |
| `/admin/questions` | 题库管理 |
| `/admin/responses` | 答卷列表 |
| `/admin/responses/:id` | 单份答卷详情 |

## 视觉风格

- **背景**：深空蓝黑 `#0a0e27` → 紫蓝 `#1a1f4e` 径向渐变 + 远景星点
- **强调色**：霓虹青 `#00f5ff`、电紫 `#b537f2`、霓粉 `#ff2d92`
- **卡片**：玻璃拟态（`backdrop-filter: blur(20px)`、1px 半透白边、内阴影高光）
- **动效**：hover 上抬 + 霓虹光晕、页面切换 `AnimatePresence` 翻页、分数数字滚动、雷达图加载动画

## tcm-api 后端子目录（Node Express + MySQL）

前后端**不分离**：前端留根目录，后端独立子目录 `tcm-api/`（自己跑的 Node 服务，连 MySQL）。

```bash
cd tcm-api
cp .env.example .env      # 填 DB_HOST/DB_PORT/DB_USER/DB_PASSWORD/DB_DATABASE/PORT/JWT_SECRET/INIT_ADMIN_PASSWORD_HASH
npm install
npm run dev               # 监听 :3000
```

接口（统一信封 `{code, data, msg}`）：
- `GET /health` — 探活
- `/auth` — 账号密码鉴权（HS256 JWT 8h）：`POST /auth/login`、`GET /auth/me`、`POST /auth/logout`（见 `tcm-api/README.md` 「用户体系」章节）
- `/responses` — 答卷 CRUD：`GET`（分页+姓名/性别/日期筛选）、`GET /:id`（头 + 作答明细）、`POST`（保存 H5 测评结果）
- `/questions` — 题库 + 体质 CRUD：`GET`（列表 + dim/gender 筛选）、`GET/POST/PUT/DELETE /:id`；首次访问幂等建表 + 写种子
- `/dashboard` — 仪表盘聚合：`GET /stats`（KPI / 7 天趋势 / 体质分布）

前端 `src/utils/request.ts` 的 `BASE_URL`：开发态默认 `http://localhost:3000`，生产态读 `VITE_API_BASE`。
PC 后台请求带 `Authorization: Bearer <tcm_admin token>`（来自 sessionStorage.tcm_admin）；登录入口 `/admin/login`。

## 当前进度

> 本仓库为 **前端 + tcm-api 独立后端** 一体交付。前端留根，后端在 `tcm-api/`（Node Express + mysql2 + JWT 鉴权）。
> 部署：前端仍 `npm run build && cloudbase hosting deploy ./dist -e xxx-d5g2iacvv8de042e6`（云只托管静态站）；tcm-api 作为独立后端单独运行（另见 deploy-tcm-api plan）。