AbleGo

从想就业到能就业，我们陪你补齐能力

面向有求职需求的残障人士的就业能力补足平台 MVP Web Demo。

功能

• AI 能力诊断：填写表单，AI 分析当前能力与目标岗位的差距
• 技能课程推荐：根据诊断结果推荐 学习资源
• 招聘信息整合：整合残障友好招聘平台与示例岗位

技术栈

• React + TypeScript
• Vite
• Tailwind CSS
• 百炼 API（兼容 OpenAI 格式）/ 本地 mock

运行方式

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

环境变量配置

复制 .env.example 为 .env：

cp .env.example .env

编辑 .env 填入你的百炼 API Key：

VITE_BAILIAN_API_KEY=your_api_key_here
VITE_BAILIAN_API_URL=https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions
VITE_BAILIAN_MODEL=qwen-plus

注意：如果不配置 API Key，页面会自动使用本地 mock 诊断结果，不影响演示。

项目结构

src/
├── components/
│   ├── Navbar.tsx          # 顶部导航栏
│   ├── HeroSection.tsx     # 首页 Hero 区域
│   ├── FeatureCards.tsx    # 三个功能入口卡片
│   ├── DiagnosisForm.tsx   # AI 能力诊断表单
│   ├── DiagnosisResult.tsx # 诊断结果展示
│   ├── SkillProgressBar.tsx # 能力维度进度条
│   ├── CourseSection.tsx   # 技能课程区域
│   ├── CourseCard.tsx      # 课程卡片
│   ├── JobSection.tsx      # 招聘信息区域
│   ├── PlatformCard.tsx    # 招聘平台卡片
│   ├── JobCard.tsx         # 岗位卡片
│   ├── HistorySection.tsx  # 诊断历史
│   └── Footer.tsx          # 页脚
├── data/
│   ├── courses.ts          # 课程数据
│   ├── jobs.ts             # 岗位数据
│   ├── platforms.ts        # 平台数据
│   └── mockDiagnosis.ts    # Mock 诊断结果
├── services/
│   └── aiService.ts        # AI 服务（百炼 API 调用）
├── App.tsx                 # 主应用
├── main.tsx                # 入口
└── index.css               # 全局样式