开源-MBTI人格测试+情侣匹配+AI分析+职场黑话翻译 - 桌面端人格解码器

一、项目概述

1.1 项目简介

人格解码器是一款基于 MBTI 理论的桌面端人格分析应用，采用 Vue3 + Pinia + Electron 技术栈开发。应用支持 60 题精准 MBTI 测试、情侣匹配分析、AI 智能解读和职场黑话翻译等核心功能。

1.2 核心功能

• MBTI 人格测试：60 道精选题目，4 维度深度分析
• 情侣匹配：16 种人格类型两两匹配，查看兼容度
• AI 智能分析：接入大模型 API，生成个性化深度解读
• 职场黑话翻译：120+ 条互联网/职场黑话解析
• 历史记录：本地保存测试记录，随时回顾
• 数据可视化：维度偏好百分比展示

1.3 技术栈

• 前端框架：Vue 3.4 + Vite 5
• 状态管理：Pinia 2.1
• 样式方案：Tailwind CSS 3.4
• 桌面端：Electron 29 + electron-builder
• AI 接口：OpenAI 兼容格式 API

二、系统架构

2.1 整体架构设计

项目采用经典的三层架构设计，将表现层、业务逻辑层和数据层清晰分离。Electron 主进程负责原生能力，渲染进程运行 Vue 应用，通过 IPC 通信桥接两端。

Electron Main Process: Window Management | IPC | File System

Vue3 Render Process: Components | Stores | Services

2.2 目录结构

mbti-decoder/electron/main.cjs – Main Process Entry

src/components/ – Vue Components (Home, Test, Result, Settings)

src/stores/ – Pinia State Management (appStore, testStore)

src/services/apiService.js – API Service Layer

三、核心模块详解

3.1 状态管理设计

项目采用 Pinia 进行状态管理，遵循单一数据源原则。每个 Store 职责明确，通过 Composition API 风格组织代码。

3.1.1 应用状态 Store

负责管理全局视图状态和页面导航逻辑，包含 currentView、previousView 等状态，以及 goHome、openTest、goBack 等导航方法。

3.1.2 测试状态 Store

核心业务逻辑所在，管理测试流程、答案收集、结果计算和 AI 分析。包含 currentQuestionIndex、answers、result、resultType 等状态，以及 submitTest、analyzeWithAI 等方法。

3.2 MBTI 算法实现

MBTI 类型计算基于四个维度的二分法，每个维度 15 道题目，通过统计选项分布确定最终类型。维度包括：E/I（能量获取）、S/N（感知）、T/F（决策）、J/P（生活方式）。

四、AI 服务集成

4.1 多服商架构

系统设计了统一的多 AI 服务商接入架构，支持 9 大主流 AI 平台，采用 OpenAI 兼容的 API 格式。

4.2 API 服务封装

apiService.js 封装了统一的 API 调用接口，支持流式响应。主要特性包括：请求取消机制、竞态处理、错误容错、回调安全。

五、Electron 桌面应用

5.1 主进程设计

Electron 主进程负责窗口管理、IPC 通信和原生能力暴露。安全配置：禁用 Node 集成、启用上下文隔离、使用 preload 脚本暴露 API。

5.2 预加载脚本

通过 contextBridge 安全暴露 API 给渲染进程，包括 saveFile、getUserDataPath 等方法。

5.3 打包配置

使用 electron-builder 进行打包，支持 NSIS 安装程序，可自定义安装目录、创建桌面快捷方式、开始菜单快捷方式。

六、数据持久化

6.1 本地存储方案

应用采用 localStorage 作为本地存储方案，存储内容包括：测试历史记录、AI 配置信息、用户偏好设置。

七、UI 组件设计

7.1 设计风格

应用采用深色主题设计，使用 Tailwind CSS 构建响应式布局。主要设计特点：渐变背景、毛玻璃效果、流畅动画、响应式布局。

八、开发与部署

8.1 开发环境搭建

git clone [repository] && cd mbti-decoder && npm install && npm run dev

8.2 构建与打包

npm run build && npm run electron:build:win

8.3 项目依赖

九、开源协议

本项目采用 MIT License 开源协议，允许自由使用、修改和分发。
💻 源码地址 https://github.com/guyue581/mbti-decode

结语

人格解码器是一个完整的 Vue3 + Electron 桌面应用案例，涵盖了现代前端开发的核心技术栈。通过本教程，您可以学习到 Vue3 Composition API 的最佳实践、Pinia 状态管理的模块化设计、Electron 桌面应用的安全架构、AI API 的流式响应处理、Tailwind CSS 的现代 UI 设计。

希望对您的学习和开发有所帮助！