HumanOS

下一代人格评估平台 | Next Generation Personality Assessment Platform

English | 简体中文

• ✨ 特性
• 🚀 快速开始
• 🎯 测评类型
• 🛠️ 技术栈
• 📁 项目结构
• 🎨 动画系统
• 🤝 贡献指南
• 📄 许可证
• 🙏 致谢

• 本地存储 - 所有数据仅存储在浏览器本地，不上传任何服务器
• 零追踪 - 不使用任何分析工具或追踪代码
• 开源透明 - 完全开源，代码可审计

• 30+ 专业测评 - 涵盖人格心理、职业能力、人际关系等7大领域
• 科学方法 - 基于心理学研究的标准化测评工具
• 即时反馈 - 完成测评后立即获得详细的结果分析

• 现代UI - 采用玻璃态设计风格，视觉效果出众
• 流畅动画 - 基于 Framer Motion 的丝滑动画体验
• 响应式布局 - 完美适配桌面端和移动端

• Vite 构建 - 极速的开发体验和生产构建
• 代码分割 - 智能分包，按需加载
• PWA 支持 - 可安装为桌面应用

• Node.js >= 18.0.0
• npm >= 9.0.0 或 pnpm >= 8.0.0

# 克隆仓库 git clone https://github.com/badhope/HumanOS.git # 进入项目目录 cd HumanOS # 安装依赖 npm install # 或使用 pnpm pnpm install

# 启动开发服务器 npm run dev # 在浏览器中打开 http://localhost:5173

# 生产构建 npm run build # 预览构建结果 npm run preview

# 运行 ESLint npm run lint # 运行 TypeScript 类型检查 npm run typecheck

HumanOS 提供多种专业测评，涵盖以下领域：

• React 18 - 用户界面库
• TypeScript 5 - 类型安全
• Vite 5 - 下一代前端构建工具

• Tailwind CSS - 原子化 CSS 框架
• Framer Motion - 动画库
• Lucide Icons - 图标库

• Zustand - 轻量级状态管理

• Three.js - 3D 渲染
• React Three Fiber - React 3D 渲染器

• ESLint - 代码检查
• Prettier - 代码格式化
• PostCSS - CSS 后处理

HumanOS/ ├── .github/ # GitHub 配置 │ ├── workflows/ # CI/CD 工作流 │ ├── ISSUE_TEMPLATE/ # Issue 模板 │ └── PULL_REQUEST_TEMPLATE.md ├── public/ # 静态资源 ├── src/ │ ├── components/ # React 组件 │ │ ├── animations/ # 动画组件 │ │ ├── AssessmentCard3D.tsx │ │ ├── PersonalityRadar.tsx │ │ └── ... │ ├── data/ # 测评数据 │ ├── pages/ # 页面组件 │ ├── store/ # 状态管理 │ ├── types/ # TypeScript 类型定义 │ ├── utils/ # 工具函数 │ ├── App.tsx # 应用入口 │ └── main.tsx # 渲染入口 ├── CHANGELOG.md # 更新日志 ├── CODE_OF_CONDUCT.md # 行为准则 ├── CONTRIBUTING.md # 贡献指南 ├── LICENSE # 许可证 ├── README.md # 项目说明（中文） ├── README_EN.md # 项目说明（英文） ├── SECURITY.md # 安全政策 ├── package.json ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts 

HumanOS 拥有一套完整的动画系统，提供丰富的视觉效果：

• 淡入淡出 (Fade)
• 滑动切换 (Slide)
• 3D 翻转 (Flip)
• 缩放效果 (Zoom)

• GlowCard - 悬停发光卡片效果
• RippleButton - 点击波纹按钮
• AnimatedNumber - 数字滚动动画
• AnimatedProgress - 进度条动画

• SplashScreen - 启动加载动画
• ResultReveal - 结果揭晓动画
• AchievementUnlock - 成就解锁动画

// 自定义动画变体 import { pageVariants, cardVariants } from '@utils/animation-config' // 使用动画组件 import { GlowCard, RippleButton, FadeInSection } from '@components/animations'

我们非常欢迎社区贡献！请阅读 贡献指南 了解详情。

1. 🍴 Fork 本仓库
2. 🌿 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 💾 提交更改 (git commit -m 'Add some AmazingFeature')
4. 📤 推送到分支 (git push origin feature/AmazingFeature)
5. 🎉 创建 Pull Request

• 遵循 Conventional Commits 提交规范
• 确保代码通过 ESLint 和 TypeScript 检查
• 为新功能添加适当的测试
• 更新相关文档

本项目采用 Creative Commons Attribution-NonCommercial 4.0 International 许可证。

这意味着你可以：

• ✅ 共享 — 复制、发行本作品
• ✅ 演绎 — 修改、转换或基于本作品进行创作

但必须遵守：

• ⚠️ 署名 — 必须给出适当的署名
• ⚠️ 非商业性使用 — 不得将本作品用于商业目的

• 心理学测评理论与实践
• 现代前端技术社区

• React
• Vite
• Tailwind CSS
• Framer Motion
• Three.js

感谢所有为这个项目做出贡献的开发者！