|
1 | 1 | # Humanity - 心理测试平台 |
2 | 2 |
|
3 | | -一个专业的心理测试静态网站,基于 Vue 3 + Vite 构建,部署于 GitHub Pages。 |
| 3 | +一个专业的心理测试静态网站,基于原生HTML/CSS/JS构建,部署于 GitHub Pages。 |
4 | 4 |
|
5 | 5 | ## 功能特点 |
6 | 6 |
|
7 | | -- **9种专业测试**:MBTI、大五人格、九型人格、DISC、政治倾向、价值观、道德基础、IQ测试、情商测试 |
8 | | -- **三种测试模式**:简单、标准、专家模式,不同深度分析 |
| 7 | +- **专业心理测试**:MBTI人格测试、大五人格测试、DISC行为风格测试、情商测试、焦虑症筛查、抑郁倾向筛查 |
9 | 8 | - **精美动画效果**:Three.js 3D粒子背景,GSAP 流畅过渡动画 |
10 | | -- **数据可视化**:ECharts 雷达图展示测试结果 |
| 9 | +- **答题辅助功能**:计时器、题目导航、答题进度保存 |
| 10 | +- **多维度评分**:维度累加法评分逻辑,科学分析测试结果 |
11 | 11 | - **本地存储**:测试历史记录本地保存,保护隐私 |
12 | | -- **响应式设计**:完美适配移动端和桌面端 |
13 | | -- **分享功能**:支持生成图片分享测试结果 |
| 12 | +- **响应式设计**:完美适配移动端、平板和桌面端 |
14 | 13 |
|
15 | 14 | ## 技术栈 |
16 | 15 |
|
17 | | -- **前端框架**:Vue 3 + Vite |
18 | | -- **样式**:Tailwind CSS |
| 16 | +- **前端**:原生 HTML5 + CSS3 + JavaScript (ES6+) |
19 | 17 | - **动画**:Three.js + GSAP |
20 | | -- **图表**:ECharts |
21 | | -- **状态管理**:Pinia |
22 | | -- **路由**:Vue Router |
| 18 | +- **存储**:LocalStorage API |
| 19 | +- **部署**:GitHub Pages |
23 | 20 |
|
24 | | -## 本地开发 |
| 21 | +## 页面结构 |
25 | 22 |
|
26 | | -```bash |
27 | | -# 安装依赖 |
28 | | -npm install |
| 23 | +``` |
| 24 | +humanity/ |
| 25 | +├── index.html # 入口页面(重定向) |
| 26 | +├── splash.html # 启动页 |
| 27 | +├── welcome.html # 欢迎页 |
| 28 | +├── list.html # 测试列表页 |
| 29 | +├── test.html # 测试答题页 |
| 30 | +├── result.html # 结果展示页 |
| 31 | +├── profile.html # 个人中心页 |
| 32 | +├── css/ |
| 33 | +│ └── styles.css # 统一样式 |
| 34 | +└── js/ |
| 35 | + ├── data.js # 题库数据 |
| 36 | + ├── components/ |
| 37 | + │ └── particle-bg.js # 粒子背景组件 |
| 38 | + └── utils/ |
| 39 | + ├── helpers.js # 工具函数 |
| 40 | + └── storage.js # 存储工具 |
| 41 | +``` |
29 | 42 |
|
30 | | -# 启动开发服务器 |
31 | | -npm run dev |
| 43 | +## 时间格式标准 |
32 | 44 |
|
33 | | -# 构建生产版本 |
34 | | -npm run build |
| 45 | +系统采用统一的 2026 年标准时间格式:`YYYY-MM-DD HH:MM:SS` |
35 | 46 |
|
36 | | -# 预览生产版本 |
37 | | -npm run preview |
38 | | -``` |
| 47 | +## 难度体系 |
39 | 48 |
|
40 | | -## 部署到 GitHub Pages |
| 49 | +| 等级 | 说明 | |
| 50 | +|------|------| |
| 51 | +| 1级(基础) | 基础认知和理解 | |
| 52 | +| 2级(进阶) | 应用和分析能力 | |
| 53 | +| 3级(高级) | 综合评价能力 | |
| 54 | +| 4级(专家) | 专业深度评估 | |
41 | 55 |
|
42 | | -1. 修改 `vite.config.js` 中的 `base` 为你的仓库名 |
43 | | -2. 运行 `npm run build` 构建项目 |
44 | | -3. 将 `dist` 目录内容推送到 GitHub Pages |
| 56 | +## 本地运行 |
45 | 57 |
|
46 | | -## 项目结构 |
| 58 | +直接在浏览器中打开 `index.html` 即可运行,或使用本地服务器: |
47 | 59 |
|
48 | | -``` |
49 | | -Mbti-test/ |
50 | | -├── src/ |
51 | | -│ ├── views/ # 页面组件 |
52 | | -│ │ ├── Welcome.vue # 入口页面 |
53 | | -│ │ ├── Home.vue # 主页 |
54 | | -│ │ ├── Test.vue # 测试页面 |
55 | | -│ │ ├── Result.vue # 结果页面 |
56 | | -│ │ └── History.vue # 历史记录 |
57 | | -│ ├── tests/ # 测试题目数据 |
58 | | -│ ├── stores/ # 状态管理 |
59 | | -│ ├── router/ # 路由配置 |
60 | | -│ └── style.css # 全局样式 |
61 | | -├── public/ # 静态资源 |
62 | | -└── package.json |
| 60 | +```bash |
| 61 | +# 使用 Python 启动简单服务器 |
| 62 | +python -m http.server 8080 |
| 63 | + |
| 64 | +# 使用 Node.js http-server |
| 65 | +npx http-server -p 8080 |
63 | 66 | ``` |
64 | 67 |
|
65 | | -## 测试模块 |
| 68 | +## 部署到 GitHub Pages |
66 | 69 |
|
67 | | -### 人格测试 |
68 | | -- **MBTI**:16型人格测试,4维度分析 |
69 | | -- **大五人格**:开放性、尽责性、外向性、宜人性、神经质 |
70 | | -- **九型人格**:9种核心人格类型 |
71 | | -- **DISC**:支配、影响、稳健、服从 |
| 70 | +1. 将代码推送到 GitHub 仓库 |
| 71 | +2. 进入仓库 Settings > Pages |
| 72 | +3. Source 选择 "Deploy from a branch" |
| 73 | +4. Branch 选择 "main",目录选择 "/(root)" |
| 74 | +5. 保存后等待部署完成 |
72 | 75 |
|
73 | | -### 意识形态测试 |
74 | | -- **政治倾向**:左翼/右翼、自由/权威 |
75 | | -- **价值观**:个人主义/集体主义、传统/现代 |
76 | | -- **道德基础**:关爱、公平、忠诚、权威、圣洁 |
| 76 | +## 测试模块 |
77 | 77 |
|
78 | | -### 认知能力测试 |
79 | | -- **IQ测试**:逻辑推理、空间想象、语言能力 |
80 | | -- **情商测试**:自我认知、同理心、自我管理、社交技能 |
| 78 | +- **MBTI人格测试** - 80道题,16型人格 |
| 79 | +- **大五人格测试** - 60道题,五大人格维度 |
| 80 | +- **DISC行为风格** - 行为风格评估 |
| 81 | +- **情商测试详细版** - 50道题,五大维度 |
| 82 | +- **焦虑症筛查(GAD-7)** - 7道题 |
| 83 | +- **抑郁倾向筛查(PHQ-9)** - 9道题 |
81 | 84 |
|
82 | | -## License |
| 85 | +## 许可证 |
83 | 86 |
|
84 | | -MIT |
| 87 | +MIT License |
0 commit comments