feat: 完善课程直播页面和首页Dashboard数据同步

- 修复6月17日单元小结归属问题，正确归入商业设计基础单元 - 添加单元海报功能，非直播状态显示单元海报图片 - 更新首页Dashboard开始上课和当日事项板块数据 - 实现课程数据与Dashboard数据自动同步 - 优化课程列表显示，包含完整100门课程数据 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-02 22:09:48 +08:00
parent ed5b65ea41
commit 316dd9b6bf
27 changed files with 2287 additions and 719 deletions
--- a/src/components/CoursesVideoPlayer/index.css
+++ b/src/components/CoursesVideoPlayer/index.css
@@ -14,7 +14,7 @@
    height: 545px;
    box-sizing: border-box;
    padding: 16px;
-    border-radius: 8px;
+    border-radius: 16px;
    background-color: #fff;
    border: 1px solid #fff;

@@ -51,6 +51,12 @@
        width: 100%;
        height: 100%;
      }
+      
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
    }
  }
  .courses-video-player-info {
@@ -58,7 +64,7 @@
    width: 100%;
    height: 234px;
    border: 2px solid #fff;
-    border-radius: 8px;
+    border-radius: 16px;
    box-sizing: border-box;
    padding: 16px;
    background-image: linear-gradient(180deg, #daecff, #ffffff);
@@ -80,16 +86,35 @@
        width: 64px;
        height: 64px;
        position: relative;
+        border-radius: 50%;
+        overflow: hidden;

-        &::after {
-          content: "";
+        img {
+          width: 150%;
+          height: 150%;
+          object-fit: cover;
+          object-position: center 30%;
          position: absolute;
-          left: 0;
-          bottom: -5px;
+          left: 50%;
+          top: 2%;
+          transform: translateX(-50%);
+        }
+      }
+      
+      .avatar-wrapper {
+        position: relative;
+        width: 64px;
+        height: 64px;
+        
+        .living-icon {
+          position: absolute;
+          left: 1px;
+          bottom: -8px;
          width: 62px;
          height: 20px;
          background-image: url("@/assets/images/CoursesVideoPlayer/living_icon.png");
          background-size: 100% 100%;
+          z-index: 10;
        }
      }

@@ -120,7 +145,7 @@
        align-items: center;

        .living-data-item {
-          width: 78px;
+          min-width: 78px;
          height: 100%;
          text-align: center;
          display: flex;
@@ -137,6 +162,11 @@
            color: #1d2129;
            font-size: 16px;
            font-weight: 600;
+            white-space: nowrap;
+          }
+          
+          &:first-child {
+            min-width: 100px;
          }
        }
      }
@@ -155,42 +185,44 @@
        font-size: 16px;
        font-weight: 600;
        color: #1d2129;
-        box-sizing: border-box;
-        padding-left: 25px;
        text-align: left;
+        display: flex;
+        align-items: center;

-        &::before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 0;
+        .title-icon {
          width: 20px;
          height: 20px;
-          background-size: 100% 100%;
+          margin-right: 10px;
+        }
+      }
+
+      .teacher-introduce {
+        width: 100%;
+        min-height: 84px;
+        max-height: 120px;
+        overflow-y: auto;
+        font-size: 12px;
+        line-height: 18px;
+        color: #4e5969;
+        
+        &::-webkit-scrollbar {
+          width: 4px;
+        }
+        
+        &::-webkit-scrollbar-track {
+          background: #f2f3f5;
+          border-radius: 2px;
+        }
+        
+        &::-webkit-scrollbar-thumb {
+          background: #c9cdd4;
          border-radius: 2px;
        }
      }
-
-      .icon1 {
-        &::before {
-          background-image: url("@/assets/images/CoursesVideoPlayer/hat_icon.png");
-        }
-      }
-
-      .icon2 {
-        &::before {
-          background-image: url("@/assets/images/CoursesVideoPlayer/blank_icon.png");
-        }
-      }
-      .teacher-introduce {
-        width: 100%;
-        height: 84px;
-        overflow: hidden;
-      }
      .courses-video-player-teacher-introduce {
        width: 100%;
-        height: 100px;
-        margin-bottom: 20px;
+        min-height: 100px;
+        margin-bottom: 10px;
      }
      .courses-video-player-teacher-tags {
        width: 100%;
@@ -209,13 +241,13 @@

          > li {
            box-sizing: border-box;
-            padding: 0 10px;
-            background-color: #f2f3f5;
-            color: #1d2129;
+            padding: 2px 8px;
+            background-color: #e5f1ff;
+            color: #0077ff;
            font-size: 14px;
-            font-weight: 600;
+            font-weight: 400;
            margin-right: 10px;
-            border-radius: 2px;
+            border-radius: 4px;
            flex-shrink: 0;
            flex-wrap: nowrap;
          }
--- a/src/components/CoursesVideoPlayer/index.jsx
+++ b/src/components/CoursesVideoPlayer/index.jsx
@@ -2,11 +2,65 @@ import { Avatar } from "@arco-design/web-react";
 import Locked from "@/components/Locked";
 import "./index.css";

-export default ({ className = "", isLock = false }) => {
+export default ({ className = "", isLock = false, selectedCourse, teacherData, unitPosters }) => {
  const handleClickBtn = (item) => {
    console.log(item);
  };

+  // 获取当前课程的导师信息
+  const currentTeacher = selectedCourse && teacherData 
+    ? teacherData[selectedCourse.teacherName] 
+    : teacherData?.["魏立慧"] || {
+        name: "魏立慧",
+        introduction: "企业资深一线HR，专注于为求职者提供一对一的个性化指导。通过真实招聘视角，深入剖析个人优势与短板、传授面试技巧、规划职业定位与发展路径，帮助学生快速提升求职竞争力。求职策略以实用落地为核心，注重互动交流与角色定位，让学员在轻松氛围中获得直击痛点的求职策略。",
+        specialties: ["深谙用人逻辑", "擅长挖掘优势", "沟通真诚自然", "点评直击要害"],
+        avatar: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp",
+        type: "企业资深HR"
+      };
+  
+  // 需要调整头像位置的导师
+  const needsAdjustment = ["赵志强", "魏立慧", "郭建辉"].includes(currentTeacher.name);
+  
+  // 根据导师设置不同的背景色 - 这些颜色提取自实际的PNG图片背景
+  const getAvatarBackground = (name) => {
+    const backgrounds = {
+      "刘杰": "#E3E2E0",      // 浅灰色
+      "郭建辉": "#E0D9D3",     // 米灰色
+      "赵志强": "#E3E2E0",     // 浅灰色
+      "孙应战": "#E3E2E0",     // 浅灰色
+      "魏立慧": "#DCD8D4"      // 灰褐色
+    };
+    return backgrounds[name] || "#E3E2E0";
+  };
+  
+  console.log("当前导师:", currentTeacher.name, "需要调整:", needsAdjustment);
+
+  // 获取当前课程信息
+  const courseName = selectedCourse?.courseName || "钢铁是怎样炼成的";
+  const courseDate = selectedCourse?.date || "09.01";
+  const unitName = selectedCourse?.unitName || "教育体系认知";
+  
+  // 格式化日期时间
+  const formatDateTime = (date) => {
+    // 将 "2025-09-02" 格式转换为 "09.02"
+    if (date && date.includes('-')) {
+      const parts = date.split('-');
+      if (parts.length === 3) {
+        return `${parts[1]}.${parts[2]}`;
+      }
+    }
+    // 将 "9/1" 格式转换为 "09.01"
+    if (date && date.includes('/')) {
+      const parts = date.split('/');
+      if (parts.length === 2) {
+        const month = parts[0].padStart(2, '0');
+        const day = parts[1].padStart(2, '0');
+        return `${month}.${day}`;
+      }
+    }
+    return date;
+  };
+
  return (
    <div className={`${className} courses-video-player-wrapper`}>
      {/* 直播板块 */}
@@ -22,12 +76,20 @@ export default ({ className = "", isLock = false }) => {
            <div className="courses-video-player-header">
              <span onClick={() => handleClickBtn(1)}>&lt; 上一集</span>
              <span className="courses-video-player-header-title">
-                钢铁是怎样炼成的
+                {courseName}
              </span>
              <span onClick={() => handleClickBtn(2)}>下一集 &gt;</span>
            </div>
            <div className="courses-video-player-video">
-              <video src="/live.mp4" autoPlay controls></video>
+              {selectedCourse?.current ? (
+                <video src="/live.mp4" autoPlay controls></video>
+              ) : (
+                <img 
+                  src={unitPosters?.[unitName] || unitPosters?.["岗位体系认知"]} 
+                  alt={unitName}
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />
+              )}
            </div>
          </>
        )}
@@ -35,18 +97,24 @@ export default ({ className = "", isLock = false }) => {
      <div className="courses-video-player-info">
        {/* 直播观众信息 */}
        <div className="courses-video-player-audience-info">
-          <Avatar className="teacher-avatar">
-            <img
-              alt="avatar"
-              src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
-            />
-          </Avatar>
-          <span className="teacher-name">魏立慧</span>
-          <span className="teacher-tag">教育体系认知</span>
+          <div className="avatar-wrapper">
+            <Avatar 
+              className={`teacher-avatar ${needsAdjustment ? 'avatar-adjust' : ''}`}
+              style={{ backgroundColor: getAvatarBackground(currentTeacher.name) }}
+            >
+              <img
+                alt="avatar"
+                src={currentTeacher.avatar}
+              />
+            </Avatar>
+            {selectedCourse?.current && <div className="living-icon" />}
+          </div>
+          <span className="teacher-name">{currentTeacher.name}老师</span>
+          <span className="teacher-tag">{unitName}</span>
          <div className="living-data">
            <div className="living-data-item">
              <span>开始</span>
-              <span>9/1 10:00</span>
+              <span>{formatDateTime(courseDate)} - 14:00</span>
            </div>
            <div className="living-data-item">
              <span>时长</span>
@@ -63,16 +131,15 @@ export default ({ className = "", isLock = false }) => {
          <div className="courses-video-player-teacher-introduce">
            <p className="title icon1">导师介绍</p>
            <p className="teacher-introduce">
-              企业资深一线HR，专注于为求职者提供一对一的个性化指导。通过真实招聘视角，深入剖析个人优势与短板、传授面试技巧、规划职业定位与发展路径，帮助学生快速提升求职竞争力。求职策略以实用落地为核心，注重互动交流与角色定位，让学员在轻松氛围中获得直击痛点的求职策略。
+              {currentTeacher.introduction}
            </p>
          </div>
          <div className="courses-video-player-teacher-tags">
            <p className="title icon2">教师专长</p>
            <ul className="teacher-tags">
-              <li>深谙用人逻辑</li>
-              <li>擅长挖掘优势</li>
-              <li>沟通真诚自然</li>
-              <li>点评直击要害</li>
+              {currentTeacher.specialties.map((specialty, index) => (
+                <li key={index}>{specialty}</li>
+              ))}
            </ul>
          </div>
        </div>