# in-ai-interview-frontend

**Repository Path**: bkmsoft/in-ai-interview-frontend

## Basic Information

- **Project Name**: in-ai-interview-frontend
- **Description**: 专注于面试场景的前端项目，旨在通过AI技术提升候选人和面试官的体验，包含丰富的交互功能和智能评估系统。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: matser
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-12-17
- **Last Updated**: 2025-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI面试平台前端

一个功能完整的AI面试模拟平台前端应用，提供智能面试官、题库管理、简历编辑、语音识别等功能。

## 📋 项目概览

本项目是AI面试平台的前端部分，核心功能包括：
- **AI智能面试** - 与AI面试官进行实时对话，获取智能提问和评分
- **面试题库** - 浏览、搜索、收藏各类面试题目
- **简历管理** - 编辑和预览多种样式的个人简历
- **语音识别** - 支持语音答题和麦克风测试
- **面试报告** - 生成详细的面试评估报告
- **后台管理** - 用户、题库、模板管理等管理员功能

## 🚀 快速开始

### 环境要求
- **Node.js**: ^20.19.0 或 >=22.12.0
- **包管理工具**: pnpm（推荐）或 npm

### 安装依赖

```bash
# 使用pnpm
pnpm install

# 或使用npm
npm install
```

### 启动开发服务器

```bash
# 开发模式（热重载）
pnpm dev

# 访问地址
# http://localhost:5173
```

### 构建生产版本

```bash
# 执行构建（包含类型检查）
pnpm build

# 预览生产构建
pnpm preview
```

### 代码格式化

```bash
# 使用Prettier格式化代码
pnpm format
```

## 📁 项目结构

```
src/
├── components/          # 可复用组件
│   ├── templates/      # 简历模板（Classic/Creative/Modern）
│   ├── CategoryTags.vue
│   ├── QuestionBankCard.vue
│   ├── QuestionBankList.vue
│   ├── ResumeEditor.vue
│   ├── ResumePreview.vue
│   └── SpeechRecognition.vue
├── composables/         # Vue 3 组合式函数
│   ├── useInterviewAudioPlayer.ts    # 音频播放
│   └── useSpeechRecognition.ts       # 语音识别
├── config/             # 配置文件
│   └── env.ts          # 环境变量配置
├── layouts/            # 布局组件
│   └── BasicLayout.vue
├── router/             # 路由配置
│   └── index.ts        # 路由定义和权限控制
├── services/           # API服务
│   ├── auth.ts
│   ├── categories.ts
│   ├── category.ts
│   ├── favorites.ts
│   ├── interview.ts
│   ├── question.ts
│   ├── questionBank.ts
│   ├── speech.ts
│   ├── templateAdmin.ts
│   └── users.ts
├── stores/             # Pinia状态管理
│   ├── index.ts
│   ├── resume.ts       # 简历状态
│   └── user.ts         # 用户状态
├── styles/             # 全局样式
│   └── main.css
├── types/              # TypeScript类型定义
│   └── interview.ts
├── utils/              # 工具函数
│   ├── request.ts      # Axios实例封装
│   └── websocket.ts    # WebSocket工具
├── views/              # 页面级组件
│   ├── AiInterviewerPage.vue
│   ├── FavoriteQuestionsPage.vue
│   ├── HomePage.vue
│   ├── InterviewReportPage.vue
│   ├── InterviewRoomPage.vue
│   ├── LandingPage.vue
│   ├── LoginPage.vue
│   ├── ProfilePage.vue
│   ├── QuestionBankManagementPage.vue
│   ├── QuizBankManagementPage.vue
│   ├── RegisterPage.vue
│   ├── ResumePage.vue
│   ├── SpeechTestPage.vue
│   ├── TemplateManagementPage.vue
│   ├── UserManagementPage.vue
│   ├── bank.vue
│   └── question.vue
├── App.vue
├── main.ts
└── 主页.html
```

## 🛠️ 技术栈

### 核心框架
- **Vue 3** - 进步的JavaScript框架
- **TypeScript** - 类型安全的JavaScript
- **Vite** - 新一代前端构建工具

### 状态管理与路由
- **Pinia** - Vue 3的状态管理库
- **Vue Router** - Vue官方路由管理

### UI与样式
- **Ant Design Vue** - 4.x版本
- **Element Plus** - 完整的UI组件库
- **CSS** - 原生样式支持

### HTTP与通信
- **Axios** - Promise型HTTP客户端
- **SockJS** - WebSocket兼容库
- **STOMP** - 基于WebSocket的消息协议

### AI与内容处理
- **Google Generative AI** - 智能问答能力
- **Markdown-it** - Markdown解析
- **KaTeX** - 数学公式渲染
- **Mermaid** - 流程图渲染
- **Shiki** - 代码高亮

### 其他工具
- **html2canvas** - HTML转图片
- **jsPDF** - PDF生成
- **Day.js** - 日期处理
- **Prettier** - 代码格式化

## 📖 核心功能说明

### 1. AI面试模块（InterviewRoomPage）
- 创建面试会话
- AI开场白和提问
- 实时对话交互
- AI智能判断（追问/下一题/结束）
- 支持多种简历模板
- 自动滚动到最新消息

### 2. 面试报告（InterviewReportPage）
- 自动生成详细评估报告
- 多维度评分展示
- 简历验证分析
- 录用建议

### 3. 题库管理
- 浏览所有题库分类
- 搜索和筛选题目
- 收藏常用题目
- 查看题目详情

### 4. 简历编辑（ResumePage）
- 支持Classic、Creative、Modern三种模板
- 实时预览功能
- 导出PDF

### 5. 语音识别（SpeechTest）
- 麦克风测试
- 语音转文字
- 音频播放回放

### 6. 后台管理（仅管理员）
- 用户管理
- 题库管理
- 模板管理
- 行业岗位管理

## 🔌 API代理与连接

### 开发环境配置

项目使用Vite代理配置，避免跨域问题：

```
HTTP API: /api → http://127.0.0.1:8080
WebSocket: /ws → ws://127.0.0.1:8080
```

### 环境变量

支持通过`.env`文件自定义配置：

- `VITE_API_BASE_URL` - API基础地址
- `VITE_WS_BASE_URL` - WebSocket地址
- `VITE_ALLOW_CROSS_ORIGIN_API` - 是否允许跨域API调用

生产环境默认地址：
- API: https://api.in-ai-interview.com
- WebSocket: https://api.in-ai-interview.com

## 🔐 路由与权限

### 公开路由（无需登录）
- `/landing` - 首页
- `/login` - 登录页
- `/register` - 注册页

### 受保护路由（需要登录）
- `/questions` - 题库列表
- `/ai-interviewer` - AI面试官
- `/interview/room/:sessionId` - 面试房间
- `/interview/report/:sessionId` - 面试报告
- `/resume` - 简历编辑
- `/favorites` - 收藏题目
- `/profile` - 个人中心
- `/speech-test` - 语音测试

### 管理员路由（需要管理员权限）
- `/user-management` - 用户管理
- `/quiz-bank-management` - 行业岗位管理
- `/question-bank-management` - 题库管理
- `/template-management` - 模板管理

## 📱 响应式设计

项目使用Element Plus和Ant Design Vue的响应式组件，支持：
- PC桌面端
- 平板设备
- 移动设备

## 🎨 主题与样式

- 支持Light/Dark主题切换
- 使用CSS变量实现主题定制
- 全局样式在`src/styles/main.css`中管理

## 🧪 开发与调试

### Vite DevTools
项目集成Vite插件DevTools，可在开发时方便地调试：
```bash
pnpm dev
# 访问 http://localhost:5173/__vite_plugin_vue_inspector/
```

### 类型检查
```bash
# 执行TypeScript类型检查
pnpm type-check
```

## 🚢 部署

### 构建优化
```bash
# 生成优化的生产包
pnpm build
```

### 预部署检查
```bash
# 预览生产构建
pnpm preview
```

### 部署建议
1. 确保后端API服务正常运行
2. 配置WebSocket连接地址
3. 设置正确的CORS和会话Cookie策略
4. 使用CDN加速静态资源

## 📋 已知限制与计划

### 当前版本（v1.0.1）
- WebSocket流式推送暂未启用（使用HTTP同步返回）
- 刷新页面会丢失对话历史

### 计划改进（v1.1.0+）
- [ ] 启用WebSocket流式AI响应
- [ ] 添加对话历史持久化
- [ ] 优化移动端体验
- [ ] 报告导出（PDF/Word）
- [ ] 数据可视化增强
- [ ] 面试回放功能
- [ ] 性能优化

## 🐛 问题反馈

如遇到问题，请检查：
1. Node.js版本是否满足要求
2. 后端服务是否正常运行
3. 网络连接和代理设置
4. 浏览器控制台错误信息

## 📚 相关文档

- [Vite文档](https://vite.dev/)
- [Vue 3文档](https://vuejs.org/)
- [TypeScript文档](https://www.typescriptlang.org/)
- [Pinia文档](https://pinia.vuejs.org/)
- [Ant Design Vue文档](https://4x.ant.design/components/overview/)
- [Element Plus文档](https://element-plus.org/)

## 📄 更新日志

详见 [CHANGELOG.md](./CHANGELOG.md)

## 👥 维护信息

- **项目名称**: in-ai-interview-frontend
- **版本**: 0.0.0
- **维护者**: AI面试团队
- **最后更新**: 2025-11-25

## 📝 许可证

请参考项目许可证文件。