初始化
This commit is contained in:
@@ -1,2 +1,5 @@
|
|||||||
# AI-interview-web
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||||
|
|||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1838
package-lock.json
generated
Normal file
1838
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
package.json
Normal file
24
package.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "ai-interview-web",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.2",
|
||||||
|
"axios": "^1.11.0",
|
||||||
|
"echarts": "^6.0.0",
|
||||||
|
"element-plus": "^2.11.1",
|
||||||
|
"normalize.css": "^8.0.1",
|
||||||
|
"vue": "^3.5.18",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^6.0.1",
|
||||||
|
"vite": "^7.1.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
11
src/App.vue
Normal file
11
src/App.vue
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<router-view />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
8
src/api/dashboard.js
Normal file
8
src/api/dashboard.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import apiClient from './index';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取仪表盘的所有统计数据
|
||||||
|
*/
|
||||||
|
export const getDashboardStats = () => {
|
||||||
|
return apiClient.post('/dashboard/stats');
|
||||||
|
};
|
||||||
33
src/api/index.js
Normal file
33
src/api/index.js
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
|
// Create an Axios instance with a base configuration
|
||||||
|
const apiClient = axios.create({
|
||||||
|
baseURL: '/api/v1',
|
||||||
|
timeout: 600000, // 10 min timeout
|
||||||
|
});
|
||||||
|
|
||||||
|
// Optional: Add a response interceptor for global error handling
|
||||||
|
apiClient.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
// Check if the response has the expected successful structure
|
||||||
|
if (response.data && response.data.code === 0) {
|
||||||
|
return response.data; // Return only the data part of the response
|
||||||
|
} else {
|
||||||
|
// Handle business errors (e.g., code !== 200)
|
||||||
|
const errorMessage = response.data.message || 'An unknown error occurred.';
|
||||||
|
ElMessage.error(errorMessage);
|
||||||
|
return Promise.reject(new Error(errorMessage));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
// Handle HTTP errors (e.g., 4xx, 5xx)
|
||||||
|
const errorMessage = error.response?.data?.message || 'A network error occurred. Please check your connection.';
|
||||||
|
ElMessage.error(errorMessage);
|
||||||
|
console.error('API Error:', error.response || error);
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default apiClient;
|
||||||
|
|
||||||
37
src/api/interview.js
Normal file
37
src/api/interview.js
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import apiClient from './index';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始新的面试
|
||||||
|
* @param {FormData} formData - 包含简历和候选人信息的表单数据
|
||||||
|
*/
|
||||||
|
export const startInterview = (formData) => {
|
||||||
|
console.log(formData)
|
||||||
|
return apiClient.post('/interview/start', formData, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 继续面试（发送回答）
|
||||||
|
* @param {object} data - 包含sessionId和userAnswer的数据
|
||||||
|
*/
|
||||||
|
export const continueInterview = (data) => {
|
||||||
|
return apiClient.post('/interview/chat', data);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取面试历史列表
|
||||||
|
*/
|
||||||
|
export const getInterviewHistoryList = () => {
|
||||||
|
return apiClient.post('/interview/get-history-list');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取详细的面试复盘报告
|
||||||
|
* @param {string} sessionId - 面试会话ID
|
||||||
|
*/
|
||||||
|
export const getInterviewReportDetail = (sessionId) => {
|
||||||
|
return apiClient.post('/interview/get-report-detail', { sessionId });
|
||||||
|
};
|
||||||
5
src/api/question-progress.js
Normal file
5
src/api/question-progress.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import apiClient from './index';
|
||||||
|
|
||||||
|
export const pageList = (params) => {
|
||||||
|
return apiClient.post('/interview-question-progress/page', params);
|
||||||
|
}
|
||||||
53
src/api/question.js
Normal file
53
src/api/question.js
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import apiClient from './index';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分页获取题库列表
|
||||||
|
* @param {object} params - 分页和查询参数
|
||||||
|
*/
|
||||||
|
export const getQuestionPage = (params) => {
|
||||||
|
return apiClient.post('/question/page', params);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增题目
|
||||||
|
* @param {object} data - 题目数据
|
||||||
|
*/
|
||||||
|
export const addQuestion = (data) => {
|
||||||
|
return apiClient.post('/question/add', data);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新题目
|
||||||
|
* @param {object} data - 题目数据
|
||||||
|
*/
|
||||||
|
export const updateQuestion = (data) => {
|
||||||
|
return apiClient.post('/question/update', data);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除题目
|
||||||
|
* @param {number} id - 题目ID
|
||||||
|
*/
|
||||||
|
export const deleteQuestion = (id) => {
|
||||||
|
return apiClient.post('/question/delete', { id });
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AI批量导入题目
|
||||||
|
* @param {FormData} formData - 包含文件的表单数据
|
||||||
|
*/
|
||||||
|
export const importQuestionsByAi = (formData) => {
|
||||||
|
return apiClient.post('/question/import-by-ai', formData, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 校验重复数据
|
||||||
|
* @returns {Promise<axios.AxiosResponse<any>>}
|
||||||
|
*/
|
||||||
|
export const checkQuestionData = () => {
|
||||||
|
return apiClient.post('/question/check-question-data');
|
||||||
|
}
|
||||||
135
src/ard.vue
Normal file
135
src/ard.vue
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dashboard-container">
|
||||||
|
<!-- 欢迎横幅 -->
|
||||||
|
<el-card shadow="never" class="welcome-banner">
|
||||||
|
<div class="welcome-content">
|
||||||
|
<div class="welcome-text">
|
||||||
|
<h2>欢迎回来！</h2>
|
||||||
|
<p>准备好开始您的下一次模拟面试了吗？在这里管理您的题库，不断提升面试技巧。</p>
|
||||||
|
</div>
|
||||||
|
<img src="/src/assets/dashboard-hero.svg" alt="仪表盘插图" class="welcome-illustration" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 功能导航 -->
|
||||||
|
<div class="feature-grid">
|
||||||
|
<router-link to="/interview" class="feature-card-link">
|
||||||
|
<el-card shadow="hover" class="feature-card">
|
||||||
|
<div class="card-content">
|
||||||
|
<el-icon class="card-icon" style="background-color: #ecf5ff; color: #409eff;"><ChatLineRound /></el-icon>
|
||||||
|
<div class="text-content">
|
||||||
|
<h3>开始模拟面试</h3>
|
||||||
|
<p>上传简历，与AI进行实战演练</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/question-bank" class="feature-card-link">
|
||||||
|
<el-card shadow="hover" class="feature-card">
|
||||||
|
<div class="card-content">
|
||||||
|
<el-icon class="card-icon" style="background-color: #f0f9eb; color: #67c23a;"><MessageBox /></el-icon>
|
||||||
|
<div class="text-content">
|
||||||
|
<h3>题库管理</h3>
|
||||||
|
<p>新增、编辑和导入您的面试题库</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/history" class="feature-card-link">
|
||||||
|
<el-card shadow="hover" class="feature-card">
|
||||||
|
<div class="card-content">
|
||||||
|
<el-icon class="card-icon" style="background-color: #fdf6ec; color: #e6a23c;"><Finished /></el-icon>
|
||||||
|
<div class="text-content">
|
||||||
|
<h3>面试历史</h3>
|
||||||
|
<p>查看过往的面试记录与AI复盘报告</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 导入Element Plus图标
|
||||||
|
import { ChatLineRound, MessageBox, Finished } from '@element-plus/icons-vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 仪表盘容器 */
|
||||||
|
.dashboard-container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 欢迎横幅 */
|
||||||
|
.welcome-banner {
|
||||||
|
border: none;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-text h2 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
margin-top: 0;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-text p {
|
||||||
|
color: #606266;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-illustration {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 功能网格布局 */
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card-link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card .card-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
transition: transform 0.3s, box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content h3 {
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
color: #303133;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content p {
|
||||||
|
margin: 0;
|
||||||
|
color: #909399;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
23
src/assets/css/reset.css
Normal file
23
src/assets/css/reset.css
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
body, html, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
1
src/assets/dashboard-hero.svg
Normal file
1
src/assets/dashboard-hero.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M112 0C85.5 0 64 21.5 64 48v48H48c-26.5 0-48 21.5-48 48v80c0 26.5 21.5 48 48 48h16v32c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H112zM48 144c-8.8 0-16 7.2-16 16v80c0 8.8 7.2 16 16 16h16v96H112c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v288c0 8.8-7.2 16-16 16H112v-32h48c26.5 0 48-21.5 48-48V144H48z" fill="#a0aec0"/><path d="M176 224c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32s-14.3-32-32-32H176z" fill="#718096"/></svg>
|
||||||
|
After Width: | Height: | Size: 560 B |
1
src/assets/interview-start.svg
Normal file
1
src/assets/interview-start.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M176 96c0-35.3 28.7-64 64-64s64 28.7 64 64v32H176V96z" fill="#a0aec0"/><path d="M240 32c-44.2 0-80 35.8-80 80v32h160V112c0-44.2-35.8-80-80-80z" fill="#718096"/><path d="M0 192c0-35.3 28.7-64 64-64h384c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192zm64 32c-17.7 0-32 14.3-32 32v192c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H64z" fill="#a0aec0"/><path d="M160 320c-17.7 0-32 14.3-32 32s14.3 32 32 32h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H160z" fill="#718096"/></svg>
|
||||||
|
After Width: | Height: | Size: 596 B |
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
137
src/layout/Layout.vue
Normal file
137
src/layout/Layout.vue
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 整体后台布局容器 -->
|
||||||
|
<el-container class="layout-container">
|
||||||
|
<!-- 侧边栏 -->
|
||||||
|
<el-aside width="220px" class="sidebar">
|
||||||
|
<!-- Logo区域 -->
|
||||||
|
<div class="logo-container">
|
||||||
|
<el-icon class="logo-icon"><ChatDotSquare /></el-icon>
|
||||||
|
<span class="logo-title">AI面试官</span>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
el-scrollbar: Element Plus的滚动条组件。
|
||||||
|
通过CSS设置其高度为100%，它会自动在内容溢出时显示滚动条，
|
||||||
|
否则滚动条不显示，解决了您提出的问题。
|
||||||
|
-->
|
||||||
|
<el-scrollbar style="height: calc(100% - 60px);">
|
||||||
|
<el-menu
|
||||||
|
:default-active="$route.path"
|
||||||
|
background-color="#0a192f"
|
||||||
|
text-color="#8892b0"
|
||||||
|
active-text-color="#64ffda"
|
||||||
|
:router="true"
|
||||||
|
>
|
||||||
|
<el-menu-item index="/">
|
||||||
|
<el-icon><House /></el-icon>
|
||||||
|
<span>仪表盘</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/interview">
|
||||||
|
<el-icon><ChatLineRound /></el-icon>
|
||||||
|
<span>模拟面试</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/question-bank">
|
||||||
|
<el-icon><MessageBox /></el-icon>
|
||||||
|
<span>题库管理</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/history">
|
||||||
|
<el-icon><Finished /></el-icon>
|
||||||
|
<span>会话历史</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/answer-record">
|
||||||
|
<el-icon><List /></el-icon>
|
||||||
|
<span>答题记录</span>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</el-scrollbar>
|
||||||
|
</el-aside>
|
||||||
|
|
||||||
|
<!-- 右侧主内容区 -->
|
||||||
|
<el-container>
|
||||||
|
<el-header class="header">
|
||||||
|
<div class="header-title">欢迎使用AI模拟面试平台</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="main-content">
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition name="fade-transform" mode="out-in">
|
||||||
|
<component :is="Component" />
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {House, ChatLineRound, MessageBox, ChatDotSquare, Finished, List} from '@element-plus/icons-vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.layout-container {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 更新后的侧边栏样式 */
|
||||||
|
.sidebar {
|
||||||
|
background-color: #0a192f; /* 更深、更现代的科技蓝 */
|
||||||
|
transition: width 0.28s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #0a192f;
|
||||||
|
color: #ccd6f6;
|
||||||
|
font-size: 1.3em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
margin-right: 12px;
|
||||||
|
color: #64ffda; /* 高亮颜色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 菜单项激活时的样式 */
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
background-color: #112240 !important; /* 深色背景 */
|
||||||
|
border-left: 3px solid #64ffda; /* 左侧高亮条 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item:hover {
|
||||||
|
background-color: #112240; /* 悬浮背景色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 1.1em;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-transform-enter-active,
|
||||||
|
.fade-transform-leave-active {
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-transform-enter-from,
|
||||||
|
.fade-transform-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
13
src/main.js
Normal file
13
src/main.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import router from "./router/index.js";
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import './assets/css/reset.css'
|
||||||
|
import "normalize.css";
|
||||||
|
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
app.use( router)
|
||||||
|
app.mount('#app')
|
||||||
135
src/rd.vue
Normal file
135
src/rd.vue
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dashboard-container">
|
||||||
|
<!-- 欢迎横幅 -->
|
||||||
|
<el-card shadow="never" class="welcome-banner">
|
||||||
|
<div class="welcome-content">
|
||||||
|
<div class="welcome-text">
|
||||||
|
<h2>欢迎回来！</h2>
|
||||||
|
<p>准备好开始您的下一次模拟面试了吗？在这里管理您的题库，不断提升面试技巧。</p>
|
||||||
|
</div>
|
||||||
|
<img src="/src/assets/dashboard-hero.svg" alt="仪表盘插图" class="welcome-illustration" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 功能导航 -->
|
||||||
|
<div class="feature-grid">
|
||||||
|
<router-link to="/interview" class="feature-card-link">
|
||||||
|
<el-card shadow="hover" class="feature-card">
|
||||||
|
<div class="card-content">
|
||||||
|
<el-icon class="card-icon" style="background-color: #ecf5ff; color: #409eff;"><ChatLineRound /></el-icon>
|
||||||
|
<div class="text-content">
|
||||||
|
<h3>开始模拟面试</h3>
|
||||||
|
<p>上传简历，与AI进行实战演练</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/question-bank" class="feature-card-link">
|
||||||
|
<el-card shadow="hover" class="feature-card">
|
||||||
|
<div class="card-content">
|
||||||
|
<el-icon class="card-icon" style="background-color: #f0f9eb; color: #67c23a;"><MessageBox /></el-icon>
|
||||||
|
<div class="text-content">
|
||||||
|
<h3>题库管理</h3>
|
||||||
|
<p>新增、编辑和导入您的面试题库</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/history" class="feature-card-link">
|
||||||
|
<el-card shadow="hover" class="feature-card">
|
||||||
|
<div class="card-content">
|
||||||
|
<el-icon class="card-icon" style="background-color: #fdf6ec; color: #e6a23c;"><Finished /></el-icon>
|
||||||
|
<div class="text-content">
|
||||||
|
<h3>面试历史</h3>
|
||||||
|
<p>查看过往的面试记录与AI复盘报告</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 导入Element Plus图标
|
||||||
|
import { ChatLineRound, MessageBox, Finished } from '@element-plus/icons-vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 仪表盘容器 */
|
||||||
|
.dashboard-container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 欢迎横幅 */
|
||||||
|
.welcome-banner {
|
||||||
|
border: none;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-text h2 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
margin-top: 0;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-text p {
|
||||||
|
color: #606266;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-illustration {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 功能网格布局 */
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card-link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card .card-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
transition: transform 0.3s, box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content h3 {
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
color: #303133;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content p {
|
||||||
|
margin: 0;
|
||||||
|
color: #909399;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
50
src/router/index.js
Normal file
50
src/router/index.js
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
|
import Layout from '../layout/Layout.vue';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: Layout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'Dashboard',
|
||||||
|
component: () => import('../views/Dashboard.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'interview',
|
||||||
|
name: 'Interview',
|
||||||
|
component: () => import('../views/InterviewView.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'question-bank',
|
||||||
|
name: 'QuestionBank',
|
||||||
|
component: () => import('../views/QuestionBank.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'history',
|
||||||
|
name: 'InterviewHistory',
|
||||||
|
component: () => import('../views/InterviewHistory.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'report/:sessionId',
|
||||||
|
name: 'InterviewReport',
|
||||||
|
component: () => import('../views/InterviewReport.vue'),
|
||||||
|
props: true, // 将路由参数作为props传递给组件
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'answer-record',
|
||||||
|
name: 'AnswerRecord',
|
||||||
|
component: () => import('../views/AnswerRecord.vue'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
|
|
||||||
103
src/views/AnswerRecord.vue
Normal file
103
src/views/AnswerRecord.vue
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import type { ComponentSize } from 'element-plus'
|
||||||
|
import { pageList } from '../api/question-progress'
|
||||||
|
|
||||||
|
const tableData = ref([])
|
||||||
|
const currentPage = ref(1)
|
||||||
|
const pageSize = ref(10)
|
||||||
|
const size = ref<ComponentSize>('default')
|
||||||
|
const background = ref(false)
|
||||||
|
const disabled = ref(false)
|
||||||
|
const handleSizeChange = (val: number) => {
|
||||||
|
console.log(`${val} items per page`)
|
||||||
|
pageSize.value = val
|
||||||
|
fetchData()
|
||||||
|
}
|
||||||
|
const total = ref(0)
|
||||||
|
const handleCurrentChange = (val: number) => {
|
||||||
|
console.log(`current page: ${val}`)
|
||||||
|
currentPage.value = val
|
||||||
|
fetchData()
|
||||||
|
|
||||||
|
}
|
||||||
|
const searchContent = ref('')
|
||||||
|
const fetchData = () => {
|
||||||
|
pageList({
|
||||||
|
current: currentPage.value,
|
||||||
|
size: pageSize.value,
|
||||||
|
questionName: searchContent.value
|
||||||
|
}).then(({ data }) => {
|
||||||
|
console.log(data)
|
||||||
|
tableData.value = data.records
|
||||||
|
currentPage.value = data.current
|
||||||
|
total.value = data.total
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
fetchData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-card>
|
||||||
|
<!-- 上半部分-->
|
||||||
|
<div>
|
||||||
|
<el-card style="width: 100%;margin-bottom: 15px;" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>答题记录</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-form :inline="true">
|
||||||
|
<el-form-item style="margin: 0;">
|
||||||
|
<el-input placeholder="请输入需要查询的题目" v-model="searchContent" style="width: 240px"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item style="margin-bottom: 0;margin-left: 15px;">
|
||||||
|
<el-button type="primary" @click="fetchData">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<!-- 数据部分-->
|
||||||
|
|
||||||
|
<el-card style="width: 100%;" shadow="hover">
|
||||||
|
<el-table :data="tableData" style="width: 100%" border height="calc(100vh - 260px)">
|
||||||
|
<el-table-column align="center" prop="questionContent" label="问题" />
|
||||||
|
<el-table-column align="center" prop="userAnswer" label="用户回答" />
|
||||||
|
<el-table-column align="center" prop="aiAnswer" label="AI回答" />
|
||||||
|
<el-table-column align="center" prop="feedback" label="AI反馈" />
|
||||||
|
<el-table-column align="center" prop="suggestions" label="AI建议" />
|
||||||
|
<el-table-column align="center" prop="score" label="AI评分" />
|
||||||
|
<el-table-column #default="scope" align="center">
|
||||||
|
<el-tag :type="scope.row.status === 'ACTIVE' ? 'primary' : 'success'">
|
||||||
|
{{ scope.row.status }}
|
||||||
|
</el-tag>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="createdTime" label="创建时间" />
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-pagination class="pagination-container" v-model:current-page="currentPage" v-model:page-size="pageSize"
|
||||||
|
:page-sizes="[10, 20, 50, 100]" :size="size" :disabled="disabled" :background="background"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange" />
|
||||||
|
</el-card>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="css">
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
150
src/views/Dashboard.vue
Normal file
150
src/views/Dashboard.vue
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dashboard-container">
|
||||||
|
<el-row :gutter="20" class="stats-cards">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<el-statistic :value="stats.totalInterviews">
|
||||||
|
<template #title>
|
||||||
|
<div class="statistic-title">
|
||||||
|
<el-icon><DataAnalysis /></el-icon>
|
||||||
|
<span>面试总次数</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-statistic>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<el-statistic :value="stats.totalQuestions">
|
||||||
|
<template #title>
|
||||||
|
<div class="statistic-title">
|
||||||
|
<el-icon><MessageBox /></el-icon>
|
||||||
|
<span>题库总题数</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-statistic>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- ECharts图表 -->
|
||||||
|
<el-row :gutter="20" class="chart-row">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="never" class="chart-card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">题库分类占比</div>
|
||||||
|
</template>
|
||||||
|
<div ref="categoryChart" style="height: 400px;"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="never" class="chart-card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">最近7日面试次数</div>
|
||||||
|
</template>
|
||||||
|
<div ref="dailyChart" style="height: 400px;"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 导入Vue核心功能、ECharts、API客户端和图标
|
||||||
|
import { ref, onMounted, nextTick } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { getDashboardStats } from '../api/dashboard';
|
||||||
|
import { DataAnalysis, MessageBox } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
// --- 响应式状态定义 ---
|
||||||
|
const stats = ref({
|
||||||
|
totalInterviews: 0,
|
||||||
|
totalQuestions: 0,
|
||||||
|
questionCategoryStats: [],
|
||||||
|
recentInterviewStats: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// ECharts实例的DOM引用
|
||||||
|
const categoryChart = ref(null);
|
||||||
|
const dailyChart = ref(null);
|
||||||
|
|
||||||
|
// --- ECharts图表配置与渲染 ---
|
||||||
|
|
||||||
|
// 渲染题库分类饼图
|
||||||
|
const renderCategoryChart = () => {
|
||||||
|
const chartInstance = echarts.init(categoryChart.value);
|
||||||
|
const option = {
|
||||||
|
tooltip: { trigger: 'item' },
|
||||||
|
legend: { top: '5%', left: 'center' },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '题目分类',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
||||||
|
label: { show: false, position: 'center' },
|
||||||
|
emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } },
|
||||||
|
labelLine: { show: false },
|
||||||
|
data: stats.value.questionCategoryStats,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
chartInstance.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 渲染每日面试次数柱状图
|
||||||
|
const renderDailyChart = () => {
|
||||||
|
const chartInstance = echarts.init(dailyChart.value);
|
||||||
|
const option = {
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: stats.value.recentInterviewStats.map(item => item.date),
|
||||||
|
},
|
||||||
|
yAxis: { type: 'value' },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '面试次数',
|
||||||
|
type: 'bar',
|
||||||
|
data: stats.value.recentInterviewStats.map(item => item.count),
|
||||||
|
barWidth: '60%',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||||
|
};
|
||||||
|
chartInstance.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- API交互方法 ---
|
||||||
|
|
||||||
|
// 获取所有仪表盘数据
|
||||||
|
const fetchDashboardStats = async () => {
|
||||||
|
try {
|
||||||
|
const responseData = await getDashboardStats();
|
||||||
|
stats.value = responseData.data;
|
||||||
|
// 数据获取后，在下一个DOM更新周期渲染图表
|
||||||
|
nextTick(() => {
|
||||||
|
renderCategoryChart();
|
||||||
|
renderDailyChart();
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取仪表盘数据失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 生命周期钩子 ---
|
||||||
|
onMounted(() => {
|
||||||
|
fetchDashboardStats();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dashboard-container { padding: 10px; }
|
||||||
|
.stats-cards { margin-bottom: 20px; }
|
||||||
|
.statistic-title { display: flex; align-items: center; color: #606266; font-size: 14px; }
|
||||||
|
.statistic-title .el-icon { margin-right: 8px; }
|
||||||
|
.chart-row { margin-top: 20px; }
|
||||||
|
.chart-card { border: none; }
|
||||||
|
.card-header { font-size: 1.1em; font-weight: bold; }
|
||||||
|
</style>
|
||||||
151
src/views/InterviewHistory.vue
Normal file
151
src/views/InterviewHistory.vue
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<div class="history-container">
|
||||||
|
<el-card class="box-card" shadow="never">
|
||||||
|
<!-- 卡片头部 -->
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>会话列表</span>
|
||||||
|
<el-tooltip class="box-item" effect="dark" content="刷新列表" placement="top">
|
||||||
|
<el-button :icon="Refresh" circle @click="fetchSessions" :loading="isLoading"></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 加载中的骨架屏 -->
|
||||||
|
<div v-if="isLoading" class="loading-container">
|
||||||
|
<el-skeleton :rows="5" animated />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 无数据时的空状态 -->
|
||||||
|
<div v-else-if="sessions.length === 0" class="empty-container">
|
||||||
|
<el-empty description="暂无面试记录，快去开始一场模拟面试吧！" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 历史记录列表 -->
|
||||||
|
<div v-else class="history-list">
|
||||||
|
<el-card v-for="session in sessions" :key="session.id" class="session-card" shadow="hover">
|
||||||
|
<div class="session-content">
|
||||||
|
<div class="session-info">
|
||||||
|
<h4>{{ session.candidateName }} 的面试</h4>
|
||||||
|
<div class="info-row">
|
||||||
|
<el-icon>
|
||||||
|
<Calendar />
|
||||||
|
</el-icon>
|
||||||
|
<span>面试日期: {{ new Date(session.createdTime).toLocaleString() }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<el-icon>
|
||||||
|
<MessageBox />
|
||||||
|
</el-icon>
|
||||||
|
<span>面试状态:
|
||||||
|
<el-tag :type="session.status === 'COMPLETED' ? 'success' : 'info'" size="small">{{ session.status
|
||||||
|
}}</el-tag>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="session-actions">
|
||||||
|
<el-button v-if="session.status === 'COMPLETED'" type="primary" plain
|
||||||
|
@click="viewReport(session.sessionId)">查看复盘报告</el-button>
|
||||||
|
<el-button v-else type="primary"
|
||||||
|
@click="$router.push({ path: '/interview', query: { sessionId: session.sessionId } })">继续答题</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 导入Vue核心功能、路由和API客户端
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { getInterviewHistoryList } from '../api/interview';
|
||||||
|
import { Calendar, MessageBox, Refresh } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
// --- 响应式状态定义 ---
|
||||||
|
const sessions = ref([]); // 存储面试会话列表
|
||||||
|
const isLoading = ref(false); // 加载状态
|
||||||
|
const router = useRouter(); // Vue Router实例
|
||||||
|
|
||||||
|
// --- API交互方法 ---
|
||||||
|
|
||||||
|
// 获取面试历史列表
|
||||||
|
const fetchSessions = async () => {
|
||||||
|
isLoading.value = true;
|
||||||
|
try {
|
||||||
|
const responseData = await getInterviewHistoryList();
|
||||||
|
// 按创建时间倒序排序，最新的在最前面
|
||||||
|
sessions.value = responseData.data.sort((a, b) => new Date(b.createdTime) - new Date(a.createdTime));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取面试历史失败:', error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 事件处理 ---
|
||||||
|
|
||||||
|
// 跳转到详细的复盘报告页面
|
||||||
|
const viewReport = (sessionId) => {
|
||||||
|
router.push({ name: 'InterviewReport', params: { sessionId } });
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 生命周期钩子 ---
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchSessions();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.history-container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-container,
|
||||||
|
.empty-container {
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-card:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-info h4 {
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row .el-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
176
src/views/InterviewReport.vue
Normal file
176
src/views/InterviewReport.vue
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<div class="report-container">
|
||||||
|
<!-- 加载中的骨架屏 -->
|
||||||
|
<div v-if="isLoading" class="loading-container">
|
||||||
|
<el-skeleton :rows="10" animated />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 无数据时的空状态 -->
|
||||||
|
<div v-else-if="!reportData" class="empty-container">
|
||||||
|
<el-empty description="无法加载面试报告，请返回重试。" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 报告主内容 -->
|
||||||
|
<div v-else>
|
||||||
|
<!-- 报告头部 -->
|
||||||
|
<el-page-header @back="goBack" class="report-header">
|
||||||
|
<template #content>
|
||||||
|
<div class="header-content">
|
||||||
|
<span class="title">{{ reportData.sessionDetails.candidateName }} 的面试复盘报告</span>
|
||||||
|
<el-tag size="large">{{ new Date(reportData.sessionDetails.createdTime).toLocaleString() }}</el-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-page-header>
|
||||||
|
|
||||||
|
<!-- AI最终评估报告 -->
|
||||||
|
<el-card class="box-card report-summary" shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<el-icon><DataAnalysis /></el-icon>
|
||||||
|
<span>AI 最终评估报告</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-if="finalReport" class="summary-content">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-statistic title="综合得分" :value="finalReport.overallScore" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-statistic title="录用建议">
|
||||||
|
<template #formatter>
|
||||||
|
<el-tag :type="getRecommendationType(finalReport.hiringRecommendation)" size="large" effect="dark">{{ finalReport.hiringRecommendation }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-statistic>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider />
|
||||||
|
<h4>综合评语</h4>
|
||||||
|
<p class="feedback-paragraph">{{ finalReport.overallFeedback }}</p>
|
||||||
|
<h4>技术能力评估</h4>
|
||||||
|
<ul class="assessment-list">
|
||||||
|
<li v-for="(value, key) in finalReport.technicalAssessment" :key="key"><strong>{{ key }}:</strong> {{ value }}</li>
|
||||||
|
</ul>
|
||||||
|
<h4>改进建议</h4>
|
||||||
|
<ol class="suggestions-list">
|
||||||
|
<li v-for="suggestion in finalReport.suggestions" :key="suggestion">{{ suggestion }}</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div v-else><el-empty description="AI最终报告正在生成中或生成失败。" /></div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 问答详情 -->
|
||||||
|
<el-card class="box-card question-details" shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<el-icon><ChatDotRound /></el-icon>
|
||||||
|
<span>问答详情与逐题评估</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-timeline>
|
||||||
|
<el-timeline-item v-for="(item, index) in reportData.questionDetails" :key="item.questionId" :timestamp="`第 ${index + 1} 题`" placement="top">
|
||||||
|
<el-card class="question-card" shadow="hover">
|
||||||
|
<h4>{{ item.questionContent }}</h4>
|
||||||
|
<p class="user-answer"><strong>您的回答:</strong> {{ item.userAnswer }}</p>
|
||||||
|
<el-divider />
|
||||||
|
<div class="feedback-section">
|
||||||
|
<p><strong>AI 评语:</strong> {{ item.aiFeedback }}</p>
|
||||||
|
<p><strong>AI 建议:</strong> {{ item.suggestions }}</p>
|
||||||
|
<div class="score-section">
|
||||||
|
<strong>本题得分:</strong> <el-rate v-model="item.score" :max="5" disabled show-score text-color="#ff9900" score-template="{value} 分" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-timeline-item>
|
||||||
|
</el-timeline>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 导入Vue核心功能、路由、API客户端和图标
|
||||||
|
import { ref, onMounted, computed } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { getInterviewReportDetail } from '../api/interview';
|
||||||
|
import { DataAnalysis, ChatDotRound } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
// --- Props & Router ---
|
||||||
|
const props = defineProps({ sessionId: { type: String, required: true } });
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
// --- 响应式状态定义 ---
|
||||||
|
const reportData = ref(null); // 存储完整的报告数据
|
||||||
|
const isLoading = ref(false); // 加载状态
|
||||||
|
|
||||||
|
// --- 计算属性 ---
|
||||||
|
|
||||||
|
// 安全地解析最终报告的JSON字符串
|
||||||
|
const finalReport = computed(() => {
|
||||||
|
if (reportData.value && reportData.value.sessionDetails.finalReport) {
|
||||||
|
try {
|
||||||
|
return JSON.parse(reportData.value.sessionDetails.finalReport);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('解析最终报告JSON失败:', e);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- API交互方法 ---
|
||||||
|
|
||||||
|
// 获取面试报告详情
|
||||||
|
const fetchReport = async () => {
|
||||||
|
isLoading.value = true;
|
||||||
|
try {
|
||||||
|
const responseData = await getInterviewReportDetail(props.sessionId);
|
||||||
|
reportData.value = responseData.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取面试报告失败:', error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 事件处理 ---
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
const goBack = () => router.push('/history');
|
||||||
|
|
||||||
|
// 根据录用建议返回不同的标签类型
|
||||||
|
const getRecommendationType = (rec) => {
|
||||||
|
if (rec === '强烈推荐' || rec === '推荐') return 'success';
|
||||||
|
if (rec === '待考虑') return 'warning';
|
||||||
|
if (rec === '不推荐') return 'danger';
|
||||||
|
return 'info';
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 生命周期钩子 ---
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchReport();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.report-container { padding: 10px; }
|
||||||
|
.report-header { margin-bottom: 20px; background-color: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); }
|
||||||
|
.header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; }
|
||||||
|
.header-content .title { font-size: 1.2em; font-weight: 600; }
|
||||||
|
|
||||||
|
.box-card { margin-bottom: 20px; border: none; }
|
||||||
|
.card-header { font-size: 1.1em; font-weight: bold; display: flex; align-items: center; }
|
||||||
|
.card-header .el-icon { margin-right: 10px; }
|
||||||
|
|
||||||
|
.summary-content { padding: 10px; }
|
||||||
|
.report-summary h4 { margin: 25px 0 10px 0; font-size: 1.05em; }
|
||||||
|
.report-summary p, .report-summary li { color: #606266; line-height: 1.8; }
|
||||||
|
.feedback-paragraph { text-indent: 2em; }
|
||||||
|
.assessment-list, .suggestions-list { padding-left: 20px; }
|
||||||
|
|
||||||
|
.question-card { margin-top: 10px; }
|
||||||
|
.user-answer { color: #303133; font-style: italic; }
|
||||||
|
.feedback-section { background-color: #f9fafb; padding: 15px; border-radius: 4px; margin-top: 15px; }
|
||||||
|
.score-section { display: flex; align-items: center; margin-top: 10px; }
|
||||||
|
.el-rate { margin-left: 10px; }
|
||||||
|
</style>
|
||||||
408
src/views/InterviewView.vue
Normal file
408
src/views/InterviewView.vue
Normal file
@@ -0,0 +1,408 @@
|
|||||||
|
<template>
|
||||||
|
<div class="interview-view-container">
|
||||||
|
<!-- 面试未开始时的启动界面 -->
|
||||||
|
<div v-if="!interviewStarted" class="start-screen">
|
||||||
|
<el-card class="start-card" shadow="never">
|
||||||
|
<div class="start-content">
|
||||||
|
<img src="/src/assets/interview-start.svg" alt="开始面试插图" class="start-illustration"/>
|
||||||
|
<div class="start-form">
|
||||||
|
<h2>准备开始您的模拟面试</h2>
|
||||||
|
<p>请填写您的信息并上传简历，AI面试官已准备就绪。</p>
|
||||||
|
<el-form label-position="top" @submit.prevent="startInterview">
|
||||||
|
<el-form-item label="您的姓名" required>
|
||||||
|
<el-input v-model="candidateName" placeholder="请输入您的姓名" size="large"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="上传您的简历" required>
|
||||||
|
<el-upload
|
||||||
|
ref="uploadRef"
|
||||||
|
action="#"
|
||||||
|
:limit="1"
|
||||||
|
:auto-upload="false"
|
||||||
|
:on-change="handleFileChange"
|
||||||
|
:on-exceed="handleFileExceed"
|
||||||
|
>
|
||||||
|
<template #trigger>
|
||||||
|
<el-button type="primary" size="large">选择简历文件</el-button>
|
||||||
|
</template>
|
||||||
|
<template #tip>
|
||||||
|
<div class="el-upload__tip">
|
||||||
|
支持PDF或Markdown格式，文件大小不超过10MB。
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="success" @click="startInterviewAction" :loading="isLoading" size="large"
|
||||||
|
class="start-button">开始面试
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 面试开始后的聊天窗口 -->
|
||||||
|
<div v-else class="chat-window-container">
|
||||||
|
<div class="chat-window">
|
||||||
|
<!-- 消息展示区 -->
|
||||||
|
<div class="messages-container" ref="messagesContainer">
|
||||||
|
<div v-for="(message, index) in messages" :key="index" class="message-row"
|
||||||
|
:class="'message-' + message.sender.toLowerCase()">
|
||||||
|
<el-avatar class="avatar" :style="{ backgroundColor: message.sender === 'AI' ? '#409EFF' : '#67C23A' }">
|
||||||
|
{{ message.sender === 'AI' ? 'AI' : '我' }}
|
||||||
|
</el-avatar>
|
||||||
|
<div class="message-content">
|
||||||
|
<div class="message-bubble" v-html="formatMessage(message.content)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI思考中的动画 -->
|
||||||
|
<div v-if="isAiThinking" class="message-row message-ai">
|
||||||
|
<el-avatar class="avatar" :style="{ backgroundColor: '#409EFF' }">AI</el-avatar>
|
||||||
|
<div class="message-content">
|
||||||
|
<div class="message-bubble thinking">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 输入区 -->
|
||||||
|
<div class="input-area">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
v-model="userAnswer"
|
||||||
|
placeholder="在此输入您的回答..."
|
||||||
|
:disabled="isLoading || interviewStatus === 'COMPLETED'"
|
||||||
|
resize="none"
|
||||||
|
class="answer-input"
|
||||||
|
></el-input>
|
||||||
|
<div class="input-actions">
|
||||||
|
<span class="char-counter">{{ userAnswer.length }} / 1000</span>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="sendMessage"
|
||||||
|
:loading="isLoading"
|
||||||
|
:disabled="interviewStatus === 'COMPLETED' || !userAnswer.trim()"
|
||||||
|
class="send-button">发送回答
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 面试结束提示 -->
|
||||||
|
<div v-if="interviewStatus === 'COMPLETED'" class="completion-message">
|
||||||
|
<el-alert title="面试已结束" type="success" show-icon :closable="false">
|
||||||
|
感谢您的参与！您可以从左侧菜单开始新的面试或管理题库。
|
||||||
|
</el-alert>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 导入Vue核心功能、API客户端和Element Plus组件
|
||||||
|
import {ref, nextTick, onMounted} from 'vue';
|
||||||
|
import {startInterview, continueInterview, getInterviewReportDetail} from '../api/interview';
|
||||||
|
import {ElMessage} from 'element-plus';
|
||||||
|
|
||||||
|
// --- 响应式状态定义 ---
|
||||||
|
const interviewStarted = ref(false); // 面试是否已开始
|
||||||
|
const isLoading = ref(false); // 全局加载状态，用于按钮和输入框
|
||||||
|
const isAiThinking = ref(false); // AI是否正在生成回答
|
||||||
|
const candidateName = ref(''); // 候选人姓名
|
||||||
|
const resumeFile = ref(null); // 上传的简历文件
|
||||||
|
const sessionId = ref(null); // 当前会话ID
|
||||||
|
const messages = ref([]); // 对话消息列表
|
||||||
|
const userAnswer = ref(''); // 用户输入框的内容
|
||||||
|
const interviewStatus = ref('ACTIVE'); // 面试状态
|
||||||
|
|
||||||
|
// --- DOM引用 ---
|
||||||
|
const messagesContainer = ref(null); // 消息容器的引用
|
||||||
|
const uploadRef = ref(null); // 上传组件的引用
|
||||||
|
|
||||||
|
// --- 生命周期钩子 ---
|
||||||
|
onMounted(() => {
|
||||||
|
// 检查URL中是否有sessionId，用于恢复面试
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const sid = urlParams.get('sessionId');
|
||||||
|
if (sid) {
|
||||||
|
fetchSessionHistory(sid);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- UI交互方法 ---
|
||||||
|
const handleFileChange = (file) => {
|
||||||
|
resumeFile.value = file.raw;
|
||||||
|
};
|
||||||
|
const handleFileExceed = () => {
|
||||||
|
ElMessage.warning('只能上传一个简历文件。');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 滚动到消息列表底部
|
||||||
|
const scrollToBottom = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
if (messagesContainer.value) {
|
||||||
|
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化消息，将换行符转为<br>
|
||||||
|
const formatMessage = (content) => content ? content.replace(/\n/g, '<br />') : '';
|
||||||
|
|
||||||
|
// --- API交互方法 ---
|
||||||
|
|
||||||
|
// 获取历史会话
|
||||||
|
const fetchSessionHistory = async (sid) => {
|
||||||
|
isLoading.value = true;
|
||||||
|
try {
|
||||||
|
const responseData = await getInterviewReportDetail(sid);
|
||||||
|
const data = responseData.data;
|
||||||
|
sessionId.value = data.sessionDetails.sessionId;
|
||||||
|
candidateName.value = data.sessionDetails.candidateName;
|
||||||
|
interviewStatus.value = data.sessionDetails.status;
|
||||||
|
// 注意：历史记录接口现在不直接返回messages，这里需要适配
|
||||||
|
// 此处暂时留空，复盘报告页将展示完整对话
|
||||||
|
messages.value = data.messages.map(msg => ({ sender: msg.sender, content: msg.content }));
|
||||||
|
currentQuestionId.value = data.currentQuestionId
|
||||||
|
interviewStarted.value = true;
|
||||||
|
// 如果是已完成的面试，直接显示提示
|
||||||
|
if (interviewStatus.value === 'COMPLETED') {
|
||||||
|
messages.value.push({sender: 'AI', content: '本次面试已完成，详细报告请在“面试历史”页面查看。'});
|
||||||
|
}
|
||||||
|
scrollToBottom();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取会话历史失败:', error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentQuestionId = ref('')
|
||||||
|
|
||||||
|
// 开始面试
|
||||||
|
const startInterviewAction = async () => {
|
||||||
|
if (!candidateName.value || !resumeFile.value) {
|
||||||
|
ElMessage.error('请输入您的姓名并上传简历。');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
isLoading.value = true;
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('candidateName', candidateName.value);
|
||||||
|
formData.append('resume', resumeFile.value);
|
||||||
|
try {
|
||||||
|
console.log(formData.values())
|
||||||
|
const responseData = await startInterview(formData);
|
||||||
|
const data = responseData.data;
|
||||||
|
sessionId.value = data.sessionId;
|
||||||
|
currentQuestionId.value = data.currentQuestionId;
|
||||||
|
messages.value.push({sender: 'AI', content: data.message});
|
||||||
|
interviewStarted.value = true;
|
||||||
|
window.history.pushState({}, '', `/interview?sessionId=${data.sessionId}`);
|
||||||
|
scrollToBottom();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('开始面试失败:', error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 发送回答
|
||||||
|
const sendMessage = async () => {
|
||||||
|
if (!userAnswer.value.trim()) return;
|
||||||
|
const currentAnswer = userAnswer.value;
|
||||||
|
messages.value.push({sender: 'USER', content: currentAnswer});
|
||||||
|
userAnswer.value = '';
|
||||||
|
isAiThinking.value = true;
|
||||||
|
scrollToBottom();
|
||||||
|
try {
|
||||||
|
const responseData = await continueInterview(
|
||||||
|
{
|
||||||
|
sessionId: sessionId.value,
|
||||||
|
userAnswer: currentAnswer,
|
||||||
|
currentQuestionId: Number(currentQuestionId.value)
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const data = responseData.data;
|
||||||
|
messages.value.push({sender: 'AI', content: data.message});
|
||||||
|
interviewStatus.value = data.status;
|
||||||
|
scrollToBottom();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('发送消息失败:', error);
|
||||||
|
messages.value.pop();
|
||||||
|
userAnswer.value = currentAnswer;
|
||||||
|
} finally {
|
||||||
|
isAiThinking.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* --- 启动界面样式 --- */
|
||||||
|
.start-screen {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-card {
|
||||||
|
max-width: 800px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 40px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-illustration {
|
||||||
|
width: 300px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-form {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-form h2 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-form p {
|
||||||
|
color: #606266;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 聊天窗口样式 --- */
|
||||||
|
.chat-window-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh - 140px); /* 减去顶栏和padding的高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-window {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-container {
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-row {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-ai {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-user {
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-user .avatar {
|
||||||
|
order: 2;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-bubble {
|
||||||
|
padding: 12px 18px;
|
||||||
|
border-radius: 18px;
|
||||||
|
line-height: 1.6;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-ai .message-bubble {
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
color: #303133;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-user .message-bubble {
|
||||||
|
background-color: #409eff;
|
||||||
|
color: #fff;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 输入区样式 --- */
|
||||||
|
.input-area {
|
||||||
|
padding: 20px;
|
||||||
|
border-top: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer-input {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-counter {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- AI思考中动画 --- */
|
||||||
|
.thinking span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #909399;
|
||||||
|
margin: 0 2px;
|
||||||
|
animation: thinking-dots 1.4s infinite ease-in-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking span:nth-child(1) {
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking span:nth-child(2) {
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes thinking-dots {
|
||||||
|
0%, 80%, 100% {
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
280
src/views/QuestionBank.vue
Normal file
280
src/views/QuestionBank.vue
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
<template>
|
||||||
|
<div class="question-bank-container">
|
||||||
|
<el-card class="box-card" shadow="never">
|
||||||
|
|
||||||
|
<!-- 卡片头部：标题和操作按钮 -->
|
||||||
|
<div class="card-header">
|
||||||
|
<el-card style="width: 100%;" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<span>题库管理中心</span>
|
||||||
|
</template>
|
||||||
|
<el-row :gutter="20" justify="space-between">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-input v-model="searchParams.content" placeholder="按题目内容搜索..." class="search-input"
|
||||||
|
:prefix-icon="Search" @clear="fetchQuestionPage" @keyup.enter="fetchQuestionPage" clearable />
|
||||||
|
<el-button type="primary" :icon="Search" @click="fetchQuestionPage"
|
||||||
|
style="margin-left: 15px;">查询</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-button type="success" :icon="Plus" @click="handleOpenAddDialog">新增题目</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-upload action="#" :show-file-list="false" :auto-upload="false" :on-change="handleFileUpload"
|
||||||
|
class="upload-button">
|
||||||
|
<el-button type="primary" :icon="UploadFilled">AI批量导入</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-button type="primary" @click="sendCheckDataReq">校验数据</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<!-- 题库表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="isLoading" style="width: 100%" height="calc(100vh - 260px)">
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="category" label="分类" width="180">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag>{{ scope.row.category }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="difficulty" label="难度" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag :type="getDifficultyTagType(scope.row.difficulty)">{{ scope.row.difficulty }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="content" label="题目内容" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="tags" label="标签" width="250">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-for="tag in (scope.row.tags || '').split(',').filter(t => t.trim() !== '')" :key="tag"
|
||||||
|
type="info" style="margin-right: 5px; margin-bottom: 5px;">{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button size="small" :icon="Edit" @click="handleOpenEditDialog(scope.row)"></el-button>
|
||||||
|
<el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.row.id)"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页控制器 -->
|
||||||
|
<el-pagination v-if="totalItems > 0" class="pagination-container"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper" :total="totalItems" :page-sizes="[10, 20, 50, 100]"
|
||||||
|
v-model:current-page="pagination.current" v-model:page-size="pagination.size" @size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange" />
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 新增/编辑题目的对话框 -->
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" @close="resetForm">
|
||||||
|
<el-form :model="questionForm" ref="questionFormRef" label-width="80px">
|
||||||
|
<el-form-item label="题目内容" prop="content" required>
|
||||||
|
<el-input v-model="questionForm.content" type="textarea" :rows="4" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="分类" prop="category" required>
|
||||||
|
<el-input v-model="questionForm.category" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="难度" prop="difficulty" required>
|
||||||
|
<el-select v-model="questionForm.difficulty" placeholder="请选择难度">
|
||||||
|
<el-option label="Easy" value="Easy" />
|
||||||
|
<el-option label="Medium" value="Medium" />
|
||||||
|
<el-option label="Hard" value="Hard" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签" prop="tags">
|
||||||
|
<el-input v-model="questionForm.tags" placeholder="多个标签请用英文逗号分隔" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { getQuestionPage, addQuestion, updateQuestion, deleteQuestion, importQuestionsByAi, checkQuestionData } from '../api/question';
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
|
import { Search, UploadFilled, Plus, Edit, Delete } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
// --- 响应式状态定义 ---
|
||||||
|
const tableData = ref([]);
|
||||||
|
const totalItems = ref(0);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const pagination = ref({ current: 1, size: 10 });
|
||||||
|
const searchParams = ref({ content: '' });
|
||||||
|
|
||||||
|
// --- 对话框状态 ---
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const dialogTitle = ref('');
|
||||||
|
const isEditMode = ref(false);
|
||||||
|
const questionForm = ref({});
|
||||||
|
const questionFormRef = ref(null);
|
||||||
|
|
||||||
|
// --- UI辅助方法 ---
|
||||||
|
const getDifficultyTagType = (difficulty) => {
|
||||||
|
switch ((difficulty || '').toLowerCase()) {
|
||||||
|
case 'easy':
|
||||||
|
return 'success';
|
||||||
|
case 'medium':
|
||||||
|
return 'warning';
|
||||||
|
case 'hard':
|
||||||
|
return 'danger';
|
||||||
|
default:
|
||||||
|
return 'info';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
questionForm.value = { content: '', category: '', difficulty: 'Medium', tags: '' };
|
||||||
|
isEditMode.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 对话框处理方法 ---
|
||||||
|
const handleOpenAddDialog = () => {
|
||||||
|
resetForm();
|
||||||
|
dialogTitle.value = '新增题目';
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenEditDialog = (row) => {
|
||||||
|
resetForm();
|
||||||
|
isEditMode.value = true;
|
||||||
|
dialogTitle.value = '编辑题目';
|
||||||
|
questionForm.value = { ...row };
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- API交互方法 ---
|
||||||
|
const fetchQuestionPage = async () => {
|
||||||
|
isLoading.value = true;
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
current: pagination.value.current,
|
||||||
|
size: pagination.value.size,
|
||||||
|
...searchParams.value
|
||||||
|
};
|
||||||
|
const responseData = await getQuestionPage(params);
|
||||||
|
tableData.value = responseData.data.records;
|
||||||
|
totalItems.value = responseData.data.total;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取题库分页失败:', error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendCheckDataReq = async () => {
|
||||||
|
const res = await checkQuestionData()
|
||||||
|
console.log(res)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFileUpload = async (file) => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file.raw);
|
||||||
|
isLoading.value = true;
|
||||||
|
try {
|
||||||
|
await importQuestionsByAi(formData);
|
||||||
|
ElMessage.success('文件上传成功！AI正在后台处理，请稍后刷新查看。');
|
||||||
|
await fetchQuestionPage()
|
||||||
|
// setTimeout(fetchQuestionPage, 3000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('文件上传失败:', error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
if (isEditMode.value) {
|
||||||
|
await updateQuestion(questionForm.value);
|
||||||
|
ElMessage.success('题目更新成功！');
|
||||||
|
} else {
|
||||||
|
await addQuestion(questionForm.value);
|
||||||
|
ElMessage.success('题目新增成功！');
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
fetchQuestionPage();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
ElMessageBox.confirm('确定要删除这道题目吗？此操作不可撤销。', '警告', {
|
||||||
|
confirmButtonText: '确定删除',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
await deleteQuestion(id);
|
||||||
|
ElMessage.success('题目删除成功！');
|
||||||
|
fetchQuestionPage();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error);
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
ElMessage.info('已取消删除');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 分页处理 ---
|
||||||
|
const handleSizeChange = (val) => {
|
||||||
|
pagination.value.size = val;
|
||||||
|
fetchQuestionPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCurrentChange = (val) => {
|
||||||
|
pagination.value.current = val;
|
||||||
|
fetchQuestionPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- 生命周期钩子 ---
|
||||||
|
onMounted(() => {
|
||||||
|
fetchQuestionPage();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.question-bank-container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
src/views/question-category/index.vue
Normal file
11
src/views/question-category/index.vue
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
18
vite.config.js
Normal file
18
vite.config.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
proxy: {
|
||||||
|
// Proxy API requests to the backend server
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
changeOrigin: true, // Needed for virtual hosted sites
|
||||||
|
secure: false, // Optional: if you are using https
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user