# mbti

**Repository Path**: leerolee/mbti

## Basic Information

- **Project Name**: mbti
- **Description**: MBTI性格测试应用 - 基于Vue3开发的性格测试小程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-20
- **Last Updated**: 2026-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MBTI 人格测试系统

一个简洁优雅的 MBTI 在线性格测试应用，帮助用户发现自己的性格类型，并获得专业的职业推荐。

🌐 **在线体验**: [https://leerolee.gitee.io/mbti](https://leerolee.gitee.io/mbti)

## ✨ 功能特性

### 🎯 核心功能
- **在线测试** - 提供 60 道专业 MBTI 测试题目
- **实时评分** - 四个维度精准计算：外向/内向(E/I)、感觉/直觉(S/N)、思考/情感(T/F)、判断/知觉(J/P)
- **结果展示** - 清晰呈现 16 种人格类型测试结果
- **人格详情** - 深度解析每种人格类型的特点、优势、劣势
- **职业推荐** - 根据人格类型推荐适合的职业方向
- **历史记录** - 自动保存测试记录，随时查看历史结果

### 🎨 用户体验
- 📱 响应式设计，完美适配移动端和桌面端
- 🎬 流畅的页面切换动画
- 💾 本地存储，无需登录即可使用
- 🌈 现代化的视觉设计

## 🛠️ 技术栈

| 类别 | 技术 |
|------|------|
| 前端框架 | HTML5 + CSS3 + JavaScript (原生) |
| 样式方案 | CSS Variables + Flexbox + Grid |
| 数据存储 | LocalStorage |
| 图标资源 | Emoji + SVG |
| 部署方式 | 静态托管 / GitHub Pages / Gitee Pages |

## 🚀 快速开始

### 本地运行
1. 克隆项目
```bash
git clone https://gitee.com/leerolee/mbti.git
cd mbti
```

2. 直接打开
```bash
# 使用浏览器打开 index.html 文件
open index.html

# 或使用本地服务器
python -m http.server 8080
# 访问 http://localhost:8080
```

### 部署到 Gitee Pages
项目已配置 `deploy.sh` 部署脚本，可一键部署到 Gitee Pages：

```bash
# 设置仓库地址后直接运行
./deploy.sh
```

## 📁 项目结构

```
mbti/
├── index.html          # 主页面入口
├── css/                # 样式文件
│   ├── reset.css       # CSS 重置
│   ├── variables.css   # CSS 变量定义
│   ├── common.css      # 公共样式
│   ├── index.css       # 首页样式
│   ├── quiz.css        # 测试问卷样式
│   ├── result.css      # 结果展示样式
│   └── detail.css      # 人格详情样式
├── js/                 # JavaScript 文件
│   ├── main.js         # 入口文件
│   ├── data/           # 数据文件
│   │   ├── questions.js     # 测试题目数据
│   │   ├── personalities.js # 16种人格类型数据
│   │   └── careers.js       # 职业推荐数据
│   ├── modules/        # 功能模块
│   │   ├── router.js       # 页面路由
│   │   ├── quiz.js         # 测试逻辑
│   │   ├── calculator.js   # 分数计算
│   │   ├── storage.js      # 本地存储
│   │   └── ui.js           # UI 渲染
│   └── utils/          # 工具函数
│       └── helpers.js      # 辅助函数
└── deploy.sh           # 部署脚本
```

## 🧠 MBTI 十六种人格类型

| 类型 | 名称 | 特点 |
|------|------|------|
| ISTJ | 物流师 | 安静、友好、负责、有序 |
| ISFJ | 守卫者 | 忠诚、温暖、细心、有责任感 |
| INFJ | 倡导者 | 安静、有洞察力、理想主义 |
| INTJ | 建筑师 | 独立、理性、战略思维 |
| ISTP | 鉴赏家 | 灵活、务实、善于分析 |
| ISFP | 探险家 | 灵活、友好、艺术感 |
| INFP | 调停者 | 理想主义、忠诚、有好奇心 |
| INTP | 逻辑学家 | 创新、逻辑、抽象思维 |
| ESTP | 企业家 | 灵活、敏锐、实用主义 |
| ESFP | 表演者 | 外向、热情、富有表现力 |
| ENFP | 竞选者 | 热情、创意、洞察力 |
| ENTP | 辩论家 | 聪明、好奇、善于辩论 |
| ESTJ | 执行者 | 务实、有序、注重效率 |
| ESFJ | 执政官 | 友好、热情、善于社交 |
| ENFJ | 主人公 | 魅力四射、理想主义、领导力 |
| ENTJ | 指挥官 | 大胆、果断、战略思维 |

## 📖 MBTI 四维度说明

| 维度 | 倾向A | 倾向B | 说明 |
|------|-------|-------|------|
| 外向 E - 内向 I | 外向型 | 内向型 | 精力来源方式 |
| 感觉 S - 直觉 N | 感觉型 | 直觉型 | 信息获取方式 |
| 思考 T - 情感 F | 思考型 | 情感型 | 决策方式 |
| 判断 J - 知觉 P | 判断型 | 知觉型 | 生活态度方式 |

## 🌟 开发说明

### 添加新的测试题目
编辑 `js/data/questions.js` 文件，按以下格式添加：

```javascript
{
  id: 61,
  dimension: 'EI',      // 所属维度：EI/SN/TF/JP
  text: '你的问题内容',
  options: [
    { text: '选项A（偏向E/S/T/J）', score: 1 },
    { text: '选项B（偏向I/N/F/P）', score: 0 }
  ]
}
```

### 自定义人格类型
编辑 `js/data/personalities.js` 文件，添加或修改人格类型数据。

### 修改样式主题
编辑 `css/variables.css` 文件，修改 CSS 变量即可自定义主题颜色。

## 📝 License

MIT License - 欢迎自由使用和学习

## 👤 作者

**李俊杰**
- Gitee: [https://gitee.com/leerolee](https://gitee.com/leerolee)
- Email: jj112358@163.com

---

⭐ 如果这个项目对你有帮助，请给我们一个 Star！