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

- 修复6月17日单元小结归属问题,正确归入商业设计基础单元
- 添加单元海报功能,非直播状态显示单元海报图片
- 更新首页Dashboard开始上课和当日事项板块数据
- 实现课程数据与Dashboard数据自动同步
- 优化课程列表显示,包含完整100门课程数据

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
2025-09-02 22:09:48 +08:00
parent ed5b65ea41
commit 316dd9b6bf
27 changed files with 2287 additions and 719 deletions

View File

@@ -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>