
HelloBadge/
├── mbti-test/
│   ├── dist/                  # 构建输出目录
│   │   ├── assets/            # 静态资源
│   │   │   ├── index-*.css    # 样式文件
│   │   │   └── index-*.js      # JavaScript文件
│   │   ├── index.html         # 主HTML文件
│   │   └── vite.svg           # Vite图标
│   ├── public/                # 公共资源
│   │   └── vite.svg           # Vite图标
│   ├── src/                   # 源代码目录
│   │   ├── assets/            # 项目资源
│   │   │   └── react.svg      # React图标
│   │   ├── components/        # 组件目录
│   │   │   ├── MBTITest.css   # 测试组件样式
│   │   │   ├── MBTITest.tsx   # 测试组件
│   │   │   ├── mbtiQuestions.ts # 测试问题数据
│   │   │   └── mbtiTypes.ts   # MBTI类型定义
│   │   ├── App.css            # 应用样式
│   │   ├── App.jsx            # 应用组件
│   │   ├── index.css          # 全局样式
│   │   └── main.jsx           # 应用入口
│   ├── .gitignore            # Git忽略文件
│   ├── README.md             # 项目说明
│   ├── check-duplicates.mjs  # 检查重复问题脚本
│   ├── check-questions.js    # 检查问题脚本
│   ├── eslint.config.js      # ESLint配置
│   ├── index.html            # HTML模板
│   ├── package-lock.json     # 依赖锁定文件
│   ├── package.json          # 项目配置
│   └── vite.config.js        # Vite配置
└── .gitignore                # 根目录Git忽略文件

安装步骤

克隆项目


git clone <repository-url>
cd HelloBadge/mbti-test

安装依赖
```
npm install
```
启动开发服务器
```
npm run dev
```
应用将在 http://127.0.0.1:5173/ 启动
构建生产版本
```
npm run build
```
构建产物将生成在 dist 目录中
预览生产版本
```
npm run preview
```

使用说明

开始测试
- 打开应用后，点击开始按钮进入测试
- 系统会随机展示80个MBTI测试问题
答题过程
- 每个问题有5个选项，选择最符合你情况的选项
- 使用"上一题"和"下一题"按钮导航
- 页面顶部显示当前答题进度
查看结果
- 完成所有问题后，点击"查看结果"按钮
- 系统将根据你的答题情况生成MBTI人格类型报告
- 报告包含人格类型、特点描述、优点、缺点和适合的职业建议

MBTI维度说明

MBTI测试基于四个维度：

E/I: 外向（Extraversion）/ 内向（Introversion）
S/N: 感觉（Sensing）/ 直觉（Intuition）
T/F: 思考（Thinking）/ 情感（Feeling）
J/P: 判断（Judging）/ 感知（Perceiving）

每个维度取一个字母，组合成16种人格类型之一。

项目特点

国际化标准问题
- 包含80个国际标准MBTI测试问题
- 每个问题都经过精心设计，确保测试结果准确
随机排序算法
- 使用Fisher-Yates洗牌算法随机排序问题
- 避免用户记忆问题顺序，提高测试准确性
响应式设计
- 适配电脑、手机、iPad等不同设备
- 确保在各种屏幕尺寸下都有良好的用户体验
直观的用户界面
- 简洁明了的设计风格
- 清晰的进度指示
- 流畅的答题体验
详细的结果分析
- 提供完整的MBTI人格类型分析
- 包含人格特点、优点、缺点和职业建议

开发说明

项目配置

开发服务器: http://127.0.0.1:5173/
构建命令: npm run build
代码检查: npm run lint
类型检查: npm run typecheck

主要组件

MBTITest: 主测试组件，包含答题流程和结果展示
mbtiQuestions: 80个测试问题的数据定义
mbtiTypes: 16种MBTI人格类型的定义和描述

自定义配置

可以在 vite.config.js 中修改开发服务器配置
可以在 src/components/mbtiQuestions.ts 中添加或修改测试问题
可以在 src/components/mbtiTypes.ts 中修改人格类型描述

部署说明

构建生产版本
```
npm run build
```
部署到服务器
- 将 dist 目录中的所有文件上传到服务器
- 配置服务器以支持单页应用路由
- 例如，对于Nginx，添加以下配置：
```
location / {
  try_files $uri $uri/ /index.html;
}
```