Duguay/jiaowu-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复面试评价页面UI和功能优化

Browse Source 
- 重新设计面试评价三板块(专业能力、现场表现力、综合评价)的布局
- 移除专业能力和现场表现力图标的彩色背景框
- 删除综合评价板块的图标
- 修复评价内容字符串解析错误
- 优化三个评价板块的视觉样式和内容提取逻辑

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
2025-09-08 04:29:40 +08:00
parent d1f6f2ee0d
commit ec7b14e3e8
11 changed files with 5374 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/CoursesVideoPlayer/index.jsx
View File

@@ -2,7 +2,7 @@ import { Avatar, Tooltip } from "@arco-design/web-react";
import Locked from "@/components/Locked";
import "./index.css";
export default ({ className = "", isLock = false, selectedCourse, teacherData, unitPosters, isPublicCourse = false }) => {
export default ({ className = "", isLock = false, selectedCourse, teacherData, unitPosters, isPublicCourse = false, backgroundImage }) => {
const handleClickBtn = (item) => {
console.log(item);
};
@@ -84,8 +84,8 @@ export default ({ className = "", isLock = false, selectedCourse, teacherData, u
{isLock ? (
<Locked
className="video-lock-wrapper"
text="该板块将于「垂直能力提升」阶段启动后开放届时，请留意教务系统通知，您可在该板块进行线上
1V1 求职策略定制"
text="DEMO演示，非学员本人与导师无查看权限"
backgroundImage={backgroundImage}
/>
) : (
<>

20
src/components/LiveSummary/index.css
View File

@@ -101,19 +101,27 @@
.live-summary-item-content-item {
flex-shrink: 0;
width: 100%;
height: 46px;
min-height: 32px;
height: auto;
box-sizing: border-box;
background-color: #f7f8fa;
border-radius: 8px;
padding: 0 10px;
line-height: 46px;
font-size: 14px;
padding: 8px 10px;
line-height: 1.5;
font-size: 13px;
font-weight: 400;
color: #1d2129;
text-align: left;
margin-bottom: 10px;
margin-bottom: 8px;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
transition: all 0.2s ease;
&:hover {
background-color: #e8f3ff;
transform: translateX(2px);
}
}
}
}

48
src/components/LiveSummary/index.jsx
View File

@@ -10,31 +10,29 @@ const LiveSummary = ({ className = "", showBtn = false, isLiving = true }) => {
navigate("/job-strategy-detail");
};
// 将时间字符串转换为秒数用于排序
const timeToSeconds = (timeStr) => {
const parts = timeStr.split(':').map(Number);
if (parts.length === 3) {
return parts[0] * 3600 + parts[1] * 60 + parts[2];
} else if (parts.length === 2) {
return parts[0] * 60 + parts[1];
}
return 0;
};
// 按时间排序keyPoints（从早到晚）
const sortedPoints = [...jobStrategyNotes.keyPoints].sort((a, b) => {
const timeA = a.time.split(':').map(Number);
const timeB = b.time.split(':').map(Number);
return (timeA[0] * 60 + timeA[1]) - (timeB[0] * 60 + timeB[1]);
return timeToSeconds(a.time) - timeToSeconds(b.time);
});
// 根据type分组排序后的keyPoints
const groupedPoints = sortedPoints.reduce((acc, point) => {
const typeMap = {
strategy: "策略建议",
advice: "专家建议",
technique: "核心技巧",
timeline: "时间规划",
qa: "答疑解惑"
};
const groupName = typeMap[point.type] || point.type;
if (!acc[groupName]) {
acc[groupName] = [];
}
acc[groupName].push(point);
return acc;
}, {});
// 根据纪要文档的分组结构
const groupedPoints = {
"策略建议": sortedPoints.filter(p => [1, 2, 3].includes(p.id)),
"求职核心技巧": sortedPoints.filter(p => [4, 5, 6].includes(p.id)),
"面试流程拆解": sortedPoints.filter(p => [7, 8, 9, 10, 11].includes(p.id)),
"个性化策略": sortedPoints.filter(p => [12, 13, 14, 15, 16].includes(p.id))
};
return (
<div className={`${className} live-summary-wrapper`}>
@@ -42,13 +40,15 @@ const LiveSummary = ({ className = "", showBtn = false, isLiving = true }) => {
{jobStrategyNotes.title}
</p>
<ul className="live-summary-list">
{Object.entries(groupedPoints).slice(0, 3).map(([groupName, points]) => (
{Object.entries(groupedPoints).map(([groupName, points]) => (
<li className="live-summary-item" key={groupName}>
<p className="live-summary-item-title">{groupName}</p>
<ul className="live-summary-item-content-list">
{points.slice(0, 3).map((point) => (
{points.map((point) => (
<li className="live-summary-item-content-item" key={point.id}>
<span style={{fontWeight: "600"}}>{point.time}</span> - {point.title}
<span style={{fontWeight: "600", color: "#2c7aff"}}>{point.time}</span>
<span style={{margin: "0 8px", color: "#86909c"}}>→</span>
<span>{point.title}</span>
</li>
))}
</ul>

16
src/components/Locked/index.css
View File

@@ -11,8 +11,8 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 320px;
width: 200px;
height: 200px;
background-image: url("https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuVOrz2GnJdK.png");
background-size: contain;
background-position: center;
@@ -20,15 +20,19 @@
> span {
position: absolute;
bottom: -50px;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
width: 433px;
height: 44px;
text-align: center;
color: #1d2129;
font-size: 14px;
font-weight: 600;
color: #fff;
font-size: 16px;
font-weight: 500;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px 16px;
border-radius: 4px;
white-space: nowrap;
}
}
}

28
src/components/Locked/index.jsx
View File

@@ -1,9 +1,31 @@
import "./index.css";
export default ({ text = "", className = "" }) => {
export default ({ text = "", className = "", backgroundImage }) => {
return (
<div className={`lock-wrapper ${className}`}>
<div className="lock">{text ? <span>{text}</span> : null}</div>
<div
className={`lock-wrapper ${className}`}
style={backgroundImage ? {
backgroundImage: `url(${backgroundImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
position: 'relative'
} : {}}
>
{backgroundImage && (
<div style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
backgroundColor: 'rgba(0, 0, 0, 0.3)'
}} />
)}
<div className="lock" style={backgroundImage ? { position: 'relative', zIndex: 1 } : {}}>
{text ? <span>{text}</span> : null}
</div>
</div>
);
};

115
src/data/mockData.js
View File

@@ -3484,52 +3484,115 @@ export const mockData = {
keyPoints: [
{
id: 1,
time: "5:05",
time: "05:05",
type: "strategy",
title: "个人优势挖掘与定位",
content: "通过深入分析你的专业背景、项目经验和个人特质，确定最适合的求职方向。魏老师强调要从企业用人需求角度出发，找到个人优势与市场需求的最佳匹配点，避免盲目投递简历。"
title: "求职理念",
content: "深入理解求职的本质，建立正确的求职心态和认知框架。"
},
{
id: 2,
time: "12:18",
type: "advice",
title: "简历包装的黄金法则",
content: "简历要讲故事，不是流水账。每一个项目经验都要用STAR法则（情景、任务、行动、结果）来描述，量化成果数据。技能部分要与目标岗位高度匹配，删除无关经历，确保HR在30秒内抓住重点。"
time: "08:40",
type: "strategy",
title: "理念：能力大于学历、曲线就业路径",
content: "强调实际能力比学历背景更重要，通过曲线就业路径实现职业目标。"
},
{
id: 3,
time: "10:32",
type: "technique",
title: "面试谈薪的心理博弈",
content: "薪资谈判不是讨价还价，而是价值展示。要提前调研行业薪资水平，准备3个薪资区间，学会用非货币化福利进行缓冲。魏老师分享了HR心理：他们更愿意给有准备、有底气的候选人更高的薪资。"
time: "12:15",
type: "strategy",
title: "如何选择岗位：发展前景+稳定性+岗位匹配",
content: "从三个维度评估岗位选择，确保职业发展的可持续性。"
},
{
id: 4,
time: "8:45",
type: "strategy",
title: "面试流程全解析",
content: "从企业角度解读面试环节设置的真实意图：初面看基本素质、复面看专业能力、终面看文化匹配。每个环节的考核重点不同，要针对性准备。特别是行为面试题，要提前准备5-8个核心故事。"
time: "18:30",
type: "technique",
title: "简历：从通用型到专属型",
content: "针对不同岗位定制简历，提高简历通过率和面试机会。"
},
{
id: 5,
time: "13:58",
type: "timeline",
title: "求职时间管理策略",
content: "制定3阶段求职计划：第1-2周完成市场调研和简历优化，第3-5周集中投递和面试准备，第6-8周面试冲刺和offer选择。合理安排时间节点，避免拖延症和焦虑情绪影响求职效果。"
time: "23:20",
type: "technique",
title: "项目案例包装：如何把'执行助理'写成'策划支持'",
content: "通过职能升级和价值展现，提升项目经验的含金量。"
},
{
id: 6,
time: "15:12",
type: "advice",
title: "职场新人的发展路径规划",
content: "入职后的前3年是职业发展的黄金期，要主动承担挑战性工作，建立个人品牌。魏老师建议制定'321职业规划'：3年内成为业务骨干，2年内获得晋升机会，1年内建立核心竞争力。"
time: "28:15",
type: "technique",
title: "招聘平台差异与投递建议",
content: "了解不同招聘平台特点，制定差异化投递策略。"
},
{
id: 7,
time: "20:25",
time: "35:40",
type: "advice",
title: "群面发言逻辑",
content: "掌握群面发言技巧，展现团队协作能力和领导潜质。"
},
{
id: 8,
time: "41:05",
type: "advice",
title: "个人面试答题套路",
content: "结构化回答面试问题，让回答更有逻辑和说服力。"
},
{
id: 9,
time: "48:20",
type: "advice",
title: "不同类型的面试官的关注点",
content: "识别面试官类型，针对性调整沟通策略和重点。"
},
{
id: 10,
time: "56:50",
type: "advice",
title: "面试流程重点：薪资谈判/常见问题/避坑要点",
content: "掌握面试各环节要点，避免常见错误，争取最佳offer。"
},
{
id: 11,
time: "1:05:10",
type: "technique",
title: "面试后复盘：如何记录与形成答题库",
content: "系统化总结面试经验，持续优化面试表现。"
},
{
id: 12,
time: "1:15:25",
type: "qa",
title: "热门问题答疑",
content: "针对学员提出的跳槽时机、职业转型、学历不足等问题，魏老师给出针对性建议。特别强调要用成长思维面对职场挑战，每一次求职都是个人品牌的重新包装和升级。"
title: "商业活动策划行业的深度解读",
content: "全面了解行业现状、发展趋势和职业路径。"
},
{
id: 13,
time: "1:26:40",
type: "qa",
title: "岗位梯度讲解：当前可进/努力可进/暂不可进",
content: "理性评估自身条件，制定阶梯式求职策略。"
},
{
id: 14,
time: "1:38:20",
type: "timeline",
title: "曲线就业路径：先执行再策划，再到项目经理",
content: "规划清晰的职业发展路径，逐步实现职业目标。"
},
{
id: 15,
time: "1:52:30",
type: "qa",
title: "会展策划师从简历到面试的完整举例说明",
content: "通过实际案例，展示完整的求职准备过程。"
},
{
id: 16,
time: "2:03:15",
type: "strategy",
title: "总结如何用项目经验打动HR",
content: "提炼项目亮点，用数据和成果征服面试官。"
}
],
expertAdvices: [

4961
src/data/mockData.js.backup_20250908_035423 Normal file
View File

File diff suppressed because it is too large Load Diff

163
src/pages/InterviewSimulationPage/components/InterviewRating/index.css
View File

@@ -278,16 +278,167 @@
ol, ul {
margin: 8px 0;
padding-left: 24px;
}
}
}
li {
margin: 6px 0;
line-height: 1.8;
text-indent: 2em;
/* 面试评价三板块样式 */
.interview-evaluation-sections {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
padding: 0;
.evaluation-section {
width: 100%;
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
border-radius: 12px;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e6eb;
transition: all 0.3s ease;
overflow: hidden;
&:hover {
box-shadow: 0 4px 16px rgba(44, 122, 255, 0.1);
transform: translateY(-2px);
}
.section-header {
display: flex;
align-items: center;
padding: 16px 20px;
background: linear-gradient(90deg, #f7faff 0%, #ffffff 100%);
border-bottom: 1px solid #e8e8e8;
position: relative;
.section-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
img {
width: 24px;
height: 24px;
}
}
.section-title {
font-size: 18px;
font-weight: 600;
color: #1d2129;
margin: 0;
flex: 1;
}
.section-score {
display: flex;
align-items: baseline;
gap: 4px;
.score-label {
font-size: 13px;
color: #86909c;
margin-right: 4px;
}
.score-value {
font-size: 24px;
font-weight: 700;
background: linear-gradient(135deg, #2c7aff 0%, #667eea 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.score-total {
font-size: 14px;
color: #c9cdd4;
font-weight: 500;
}
}
.section-badge {
padding: 6px 16px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #2c7aff 0%, #4096ff 100%);
box-shadow: 0 2px 6px rgba(44, 122, 255, 0.2);
}
}
strong {
font-weight: 600;
.section-content {
padding: 20px;
h1, h2, h3 {
display: none;
}
p {
margin: 0 0 12px 0;
line-height: 1.8;
color: #4e5969;
font-size: 14px;
text-indent: 0;
}
ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: item;
li {
margin-bottom: 16px;
padding-left: 32px;
position: relative;
line-height: 1.8;
color: #4e5969;
font-size: 14px;
counter-increment: item;
&:before {
content: counter(item);
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #e8f3ff 0%, #f0f7ff 100%);
border: 1px solid #2c7aff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: #2c7aff;
}
&:last-child {
margin-bottom: 0;
}
}
}
}
&.comprehensive-section {
.section-content {
background: linear-gradient(135deg, #f7faff 0%, #ffffff 100%);
border-radius: 0 0 12px 12px;
p {
font-size: 15px;
line-height: 1.9;
color: #1d2129;
text-align: justify;
}
}
}
}
}

72
src/pages/InterviewSimulationPage/components/InterviewRating/index.jsx
View File

@@ -339,14 +339,72 @@ export default ({ selectedItem = "求职面试初体验" }) => {
</div>
</div>
{/* 基础面试评价区域 */}
<div className="interview-evaluation-text-wrapper">
<div className="interview-rating-header" style={{ justifyContent: 'flex-start' }}>
<img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuUY5vlvUj2X.png" alt="icon" style={{ width: '28px', height: '28px', marginRight: '10px' }} />
<span className="interview-rating-header-title">{getEvaluationData().title}</span>
{/* 面试评价三板块区域 */}
<div className="interview-evaluation-sections">
{/* 专业能力板块 */}
<div className="evaluation-section">
<div className="section-header">
<div className="section-icon professional-icon">
<img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuUY5vlvUj2X.png" alt="专业能力" />
</div>
<h3 className="section-title">专业能力</h3>
<div className="section-score">
<span className="score-label">得分</span>
<span className="score-value">{getEvaluationData().professionalScore}</span>
<span className="score-total">/60</span>
</div>
</div>
<div className="section-content">
<ReactMarkdown>
{(() => {
const content = getEvaluationData().content;
const sections = content.split('#');
if (sections.length > 1) {
const professionalContent = sections[1].split('\n\n');
return professionalContent.slice(1, -1).join('\n\n');
}
return '';
})()}
</ReactMarkdown>
</div>
</div>
<div className="interview-rating-text">
<ReactMarkdown>{getEvaluationData().content}</ReactMarkdown>
{/* 现场表现力板块 */}
<div className="evaluation-section">
<div className="section-header">
<div className="section-icon performance-icon">
<img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuUY5uY7Ek50.png" alt="现场表现力" />
</div>
<h3 className="section-title">现场表现力</h3>
<div className="section-score">
<span className="score-label">得分</span>
<span className="score-value">{getEvaluationData().performanceScore}</span>
<span className="score-total">/40</span>
</div>
</div>
<div className="section-content">
<ReactMarkdown>
{getEvaluationData().content.split('# 现场表现力')[1].split('# 综合评价')[0].trim()}
</ReactMarkdown>
</div>
</div>
{/* 综合评价板块 */}
<div className="evaluation-section comprehensive-section">
<div className="section-header">
<h3 className="section-title">综合评价</h3>
<div className="section-badge">
{getEvaluationData().totalScore >= 80 ? '优秀' :
getEvaluationData().totalScore >= 60 ? '良好' :
getEvaluationData().totalScore >= 40 ? '及格' : '需努力'}
</div>
</div>
<div className="section-content">
<ReactMarkdown>
{getEvaluationData().content.split('# 综合评价')[1].trim()}
</ReactMarkdown>
</div>
</div>
</div>
</>

12
src/pages/JobStrategyDetailPage/components/CurvedEmployment/index.css
View File

@@ -3,12 +3,18 @@
height: 100%;
position: relative;
display: flex;
justify-content: flex-end;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
> img {
width: 1056px;
height: 561px;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
}

5
src/pages/JobStrategyPage/index.jsx
View File

@@ -5,7 +5,10 @@ import "./index.css";
const JobStrategyPage = () => {
return (
<div className="job-strategy-page">
<CoursesVideoPlayer isLock />
<CoursesVideoPlayer
isLock
backgroundImage="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/public_bg/recuW8VeXQDVI2.jpg"
/>
<LiveSummary showBtn />
</div>
);