中年男人等级测试

一个有趣的测试应用，通过 10 道题目测出你的中年男人段位，从入门级到超神级，看看你在中年男人的道路上走了多远。

项目简介

这是一个基于 React + TypeScript + Vite 构建的趣味测试应用。用户通过回答一系列问题，根据得分判定自己的"中年男人等级"。

特点

• 10 道精心设计的测试题
• 题目和选项随机打乱，每次测试体验不同
• 即时反馈选择结果
• 根据总分判定等级（6 个等级段位）
• 个性化结果描述，基于用户的选择生成
• 响应式设计，支持移动端和桌面端
• 流畅的动画效果和交互体验

技术栈

• 框架: React 19.2
• 语言: TypeScript
• 构建工具: Vite 7.2
• 样式: CSS
• 代码规范: ESLint + TypeScript ESLint
• 部署: Cloudflare Workers (Wrangler)

开始使用

安装依赖

npm install
# 或
pnpm install

开发模式

npm run dev

应用将在 http://localhost:5173 运行

构建生产版本

npm run build

预览生产构建

npm run preview

代码检查

npm run lint

项目结构

middle-age-man-test/
├── src/
│   ├── App.tsx          # 主应用组件
│   ├── App.css          # 应用样式
│   ├── main.tsx         # 应用入口
│   ├── index.css        # 全局样式
│   └── data/
│       └── questions.ts # 题目数据和评分逻辑
├── public/              # 静态资源
├── index.html           # HTML 模板
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
└── vite.config.ts       # Vite 配置

等级说明

测试包含 6 个等级段位：

• 青铜: 还保持着年轻的心态
• 白银: 刚刚踏入中年男人的门槛
• 黄金: 已经具备了一些中年男人特质
• 铂金: 中年男人特征明显
• 钻石: 资深中年男人
• 超神: 中年男人界的天花板

开发说明

添加新题目

在 src/data/questions.ts 中添加新的题目对象：

{
  id: 11,
  question: "你的问题内容",
  options: [
    { text: "选项1", score: 10 },
    { text: "选项2", score: 20 },
    // ...
  ]
}

调整等级判定

在 src/data/questions.ts 的 levels 数组中修改等级的分数阈值和描述。

部署

项目支持部署到 Cloudflare Workers：

npx wrangler deploy

License

MIT

贡献

欢迎提交 Issue 和 Pull Request！