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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/CoursesVideoPlayer/index.jsx

@@ -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="该板块将于「垂直能力提升」阶段启动后开放届时，请留意教务系统通知，您可在该板块进行线上
+            text="DEMO演示，非学员本人与导师无查看权限"
-        1V1 求职策略定制"
+            backgroundImage={backgroundImage}
           />
         ) : (
           <>

src/components/LiveSummary/index.css

@@ -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;
+          padding: 8px 10px;
-          line-height: 46px;
+          line-height: 1.5;
-          font-size: 14px;
+          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);
+          }
         }
       }
     }

src/components/LiveSummary/index.jsx

@@ -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);
+    return timeToSeconds(a.time) - timeToSeconds(b.time);
-    const timeB = b.time.split(':').map(Number);
-    return (timeA[0] * 60 + timeA[1]) - (timeB[0] * 60 + timeB[1]);
   });
 
-  // 根据type分组排序后的keyPoints
+  // 根据纪要文档的分组结构
-  const groupedPoints = sortedPoints.reduce((acc, point) => {
+  const groupedPoints = {
-    const typeMap = {
+    "策略建议": sortedPoints.filter(p => [1, 2, 3].includes(p.id)),
-      strategy: "策略建议",
+    "求职核心技巧": sortedPoints.filter(p => [4, 5, 6].includes(p.id)),
-      advice: "专家建议",
+    "面试流程拆解": sortedPoints.filter(p => [7, 8, 9, 10, 11].includes(p.id)),
-      technique: "核心技巧",
+    "个性化策略": sortedPoints.filter(p => [12, 13, 14, 15, 16].includes(p.id))
-      timeline: "时间规划",
+  };
-      qa: "答疑解惑"
-    };
-    
-    const groupName = typeMap[point.type] || point.type;
-    
-    if (!acc[groupName]) {
-      acc[groupName] = [];
-    }
-    acc[groupName].push(point);
-    return acc;
-  }, {});
 
   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>

src/components/Locked/index.css

@@ -11,8 +11,8 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 320px;
+    width: 200px;
-    height: 320px;
+    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;
+      color: #fff;
-      font-size: 14px;
+      font-size: 16px;
-      font-weight: 600;
+      font-weight: 500;
+      background-color: rgba(0, 0, 0, 0.6);
+      padding: 8px 16px;
+      border-radius: 4px;
+      white-space: nowrap;
     }
   }
 }

src/components/Locked/index.jsx

@@ -1,9 +1,31 @@
 import "./index.css";
 
-export default ({ text = "", className = "" }) => {
+export default ({ text = "", className = "", backgroundImage }) => {
   return (
-    <div className={`lock-wrapper ${className}`}>
+    <div 
-      <div className="lock">{text ? <span>{text}</span> : null}</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>
   );
 };

src/data/mockData.js

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

src/pages/InterviewSimulationPage/components/InterviewRating/index.css

@@ -278,16 +278,167 @@
       ol, ul {
         margin: 8px 0;
         padding-left: 24px;
+      }
+    }
+  }
+
+  /* 面试评价三板块样式 */
+  .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;
         
-        li {
+        .section-icon {
-          margin: 6px 0;
+          width: 36px;
-          line-height: 1.8;
+          height: 36px;
-          text-indent: 2em;
+          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 {
+      .section-content {
-        font-weight: 600;
+        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;
+          }
+        }
       }
     }
   }

src/pages/InterviewSimulationPage/components/InterviewRating/index.jsx

@@ -339,14 +339,72 @@ export default ({ selectedItem = "求职面试初体验" }) => {
             </div>
           </div>
 
-          {/* 基础面试评价区域 */}
+          {/* 面试评价三板块区域 */}
-          <div className="interview-evaluation-text-wrapper">
+          <div className="interview-evaluation-sections">
-            <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' }} />
+            <div className="evaluation-section">
-              <span className="interview-rating-header-title">{getEvaluationData().title}</span>
+              <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>
         </>

src/pages/JobStrategyDetailPage/components/CurvedEmployment/index.css

@@ -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;
+    width: auto;
-    height: 561px;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    display: block;
   }
 }

src/pages/JobStrategyPage/index.jsx

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