feat: 作业页面单元分类导航和样式优化
- 为复合能力课和垂直能力课添加单元分组结构 - 实现单元导航栏和课程筛选功能 - 优化导航栏样式，采用胶囊式设计 - 调整页面布局和间距，提升视觉体验 - 修复营销能力课日历事件显示问题 - 修复1v1规划时间为14:00-16:00 - 修复作业页面iframe返回后滚动失效问题 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
@@ -2,6 +2,7 @@
|
||||
import companyJobsData from './companyJobs.json';
|
||||
import calendarCoursesData from './calendarCourses.json';
|
||||
import aiCoursesData from '../../网页未导入数据/ai课程表.json';
|
||||
import marketingCoursesData from './marketingCourses.json';
|
||||
|
||||
// 转换函数：将JSON数据转换为页面所需格式
|
||||
const transformCompanyJobs = (jobsData) => {
|
||||
@@ -58,18 +59,24 @@ const transformCalendarCourses = (coursesData) => {
|
||||
let startTime = "20:00";
|
||||
let endTime = "21:00";
|
||||
|
||||
// 处理时间格式，确保有效
|
||||
if (timeStr && timeStr.includes('-')) {
|
||||
const timeParts = timeStr.split('-').map(t => t ? t.trim() : '');
|
||||
if (timeParts[0]) startTime = timeParts[0];
|
||||
if (timeParts[1]) endTime = timeParts[1];
|
||||
} else if (timeStr) {
|
||||
// 如果没有'-'，假设是开始时间
|
||||
startTime = timeStr.trim();
|
||||
// 自动计算结束时间（加1小时）
|
||||
const [hour, minute] = startTime.split(':');
|
||||
const endHour = parseInt(hour) + 1;
|
||||
endTime = `${endHour.toString().padStart(2, '0')}:${minute || '00'}`;
|
||||
// 特殊处理1V1规划课程的时间
|
||||
if (course["1V1 规划阶段"]) {
|
||||
startTime = "14:00";
|
||||
endTime = "16:00";
|
||||
} else {
|
||||
// 处理时间格式，确保有效
|
||||
if (timeStr && timeStr.includes('-')) {
|
||||
const timeParts = timeStr.split('-').map(t => t ? t.trim() : '');
|
||||
if (timeParts[0]) startTime = timeParts[0];
|
||||
if (timeParts[1]) endTime = timeParts[1];
|
||||
} else if (timeStr) {
|
||||
// 如果没有'-'，假设是开始时间
|
||||
startTime = timeStr.trim();
|
||||
// 自动计算结束时间（加1小时）
|
||||
const [hour, minute] = startTime.split(':');
|
||||
const endHour = parseInt(hour) + 1;
|
||||
endTime = `${endHour.toString().padStart(2, '0')}:${minute || '00'}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 构建完整的时间戳
|
||||
@@ -126,6 +133,28 @@ const transformCalendarCourses = (coursesData) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 转换营销课程数据为日历事件格式
|
||||
const transformMarketingCourses = (marketingCourses) => {
|
||||
return marketingCourses.map(course => {
|
||||
if (!course["营销课"] || course["营销课"] === "") return null;
|
||||
|
||||
// 转换日期格式 2024/7/15 -> 2024-07-15
|
||||
const dateParts = course["日期"].split('/');
|
||||
const formattedDate = `${dateParts[0]}-${dateParts[1].padStart(2, '0')}-${dateParts[2].padStart(2, '0')}`;
|
||||
|
||||
return {
|
||||
id: `marketing-${course["日期"]}`,
|
||||
title: course["营销课"],
|
||||
startTime: `${formattedDate} ${course["上课时间"].split('~')[0]}`,
|
||||
endTime: `${formattedDate} ${course["上课时间"].split('~')[1]}`,
|
||||
type: 'marketing-course',
|
||||
teacher: '孙应战', // 营销课的默认讲师
|
||||
status: course["课程状态"] || "已完成",
|
||||
location: course["上课地点"] || "线上"
|
||||
};
|
||||
}).filter(event => event !== null);
|
||||
};
|
||||
|
||||
// 转换AI课程数据为日历事件格式
|
||||
const transformAICourses = (aiData) => {
|
||||
return aiData
|
||||
@@ -298,13 +327,13 @@ const generatePublicCourseLiveList = (calendarEvents) => {
|
||||
"李毅峰": "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_teacher-avatar/recuVPz0WRmxCK.jpeg",
|
||||
"周伏波": "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_teacher-avatar/recuVU7Gi9YxSN.jpeg",
|
||||
"范雪娇": "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_teacher-avatar/recuVU7JsHHDNZ.jpeg",
|
||||
"李奇": "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_teacher-avatar/recuVU7LDWK6iG.jpg"
|
||||
"李奇": "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_teacher-avatar/recuW8gePZvRn6.jpg"
|
||||
};
|
||||
|
||||
// 遍历日历事件，找出公开课和AI课程
|
||||
calendarEvents.forEach(event => {
|
||||
// 处理type为'public-course'的课程或AI课程
|
||||
if ((event.type === 'public-course' || event.type === 'ai-course') && event.title) {
|
||||
if ((event.type === 'public-course' || event.type === 'ai-course' || event.type === 'marketing-course') && event.title) {
|
||||
const courseDate = new Date(event.startTime.split(' ')[0]);
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
@@ -329,7 +358,7 @@ const generatePublicCourseLiveList = (calendarEvents) => {
|
||||
// 根据课程类型和讲师分类
|
||||
if (event.type === 'ai-course') {
|
||||
publicUnits["终生学习系统课"].courses.push(courseData);
|
||||
} else if (event.teacher === "孙应战") {
|
||||
} else if (event.type === 'marketing-course' || event.teacher === "孙应战") {
|
||||
publicUnits["营销能力课"].courses.push(courseData);
|
||||
} else {
|
||||
publicUnits["企业高管公开课"].courses.push(courseData);
|
||||
@@ -473,7 +502,8 @@ const generateTasksFromCalendarEvents = (calendarEvents) => {
|
||||
// 合并普通课程和AI课程（需要在mockData之前定义，避免引用错误）
|
||||
const allCalendarEvents = [
|
||||
...transformCalendarCourses(calendarCoursesData),
|
||||
...transformAICourses(aiCoursesData)
|
||||
...transformAICourses(aiCoursesData),
|
||||
...transformMarketingCourses(marketingCoursesData)
|
||||
];
|
||||
|
||||
export const mockData = {
|
||||
@@ -603,7 +633,7 @@ export const mockData = {
|
||||
name: "李奇",
|
||||
introduction: "毕业于南洋理工学院，拥有硕士学位，具备扎实的人工智能理论基础与产业实践经验。近年来，专注于大模型工程化与AI应用课程体系建设，主持完成《AIGC实战：从模型调用到产品落地》《AI在视觉设计与内容生成中的应用》等多个应用型教学项目。曾主导开发'AI技能地图导航系统'，实现课程内容与岗位技能的精准对齐，在2024年全国高校AI课程创新大赛中荣获一等奖。擅长将复杂的算法模型转化为通俗易懂的教学内容，致力于打造'人人可用AI'的实训课程体系，是众多高校与职业培训机构特聘的AI技术与课程体系顾问。",
|
||||
specialties: ["人工智能技术顾问", "大模型工程化研究者", "AI应用课程体系建设者", "教学内容转化能力强", "技巧随手教", "幽默又有料", "讲解有节奏"],
|
||||
avatar: "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_teacher-avatar/recuVU7LDWK6iG.jpg",
|
||||
avatar: "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_teacher-avatar/recuW8gePZvRn6.jpg",
|
||||
type: "AI课导师",
|
||||
courses: []
|
||||
},
|
||||
@@ -1549,11 +1579,134 @@ export const mockData = {
|
||||
],
|
||||
},
|
||||
// 课后作业数据
|
||||
|
||||
homework: [
|
||||
{
|
||||
name: "复合能力课",
|
||||
id: 1,
|
||||
units: [
|
||||
{
|
||||
name: "岗位体系认知",
|
||||
courses: [
|
||||
{ id: 1, name: "教育体系认知", level: "completed" },
|
||||
{ id: 2, name: "现代文旅类企业的管理体系", level: "completed" },
|
||||
{ id: 3, name: "专科生的职业规划", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "产业认知课",
|
||||
courses: [
|
||||
{ id: 4, name: "文旅产业认知课", level: "completed" },
|
||||
{ id: 5, name: "行业详解：旅游行业", level: "completed" },
|
||||
{ id: 6, name: "行业详解：酒店与民宿行业", level: "completed" },
|
||||
{ id: 7, name: "行业详解：活动与会展行业", level: "completed" },
|
||||
{ id: 8, name: "行业详解：文化服务行业", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "旅游产业全景与文旅基础知识",
|
||||
courses: [
|
||||
{ id: 9, name: "现代文旅产业生态图谱", level: "completed" },
|
||||
{ id: 10, name: "文旅政策法规与风险管理", level: "completed" },
|
||||
{ id: 11, name: "旅游产品与旅游资源", level: "completed" },
|
||||
{ id: 12, name: "游客行为心理学基础", level: "completed" },
|
||||
{ id: 13, name: "可持续旅游发展", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "文旅服务：形象、沟通与体验的融合艺术",
|
||||
courses: [
|
||||
{ id: 14, name: "文旅场景职业形象IP塑造", level: "completed" },
|
||||
{ id: 15, name: "情境化服务体验设计", level: "completed" },
|
||||
{ id: 16, name: "政务商务接待专项礼仪", level: "completed" },
|
||||
{ id: 17, name: "文旅服务中的非语言表达", level: "completed" },
|
||||
{ id: 18, name: "服务沟通技巧与表达训练", level: "completed" },
|
||||
{ id: 19, name: "多元文化下的服务表达差异", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "文旅与供应链基础",
|
||||
courses: [
|
||||
{ id: 20, name: "供应链管理的内容", level: "completed" },
|
||||
{ id: 21, name: "文旅资源调度", level: "completed" },
|
||||
{ id: 22, name: "文旅产品全生命周期管理", level: "completed" },
|
||||
{ id: 23, name: "文旅商品供应链", level: "completed" },
|
||||
{ id: 24, name: "住宿业资源协同", level: "completed" },
|
||||
{ id: 25, name: "小型文旅项目的供应链角色模拟", level: "completed" },
|
||||
{ id: 26, name: "文旅项目供应链特征", level: "completed" },
|
||||
{ id: 27, name: "文旅供应链中的B2B与B2C模式", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "商业设计基础",
|
||||
courses: [
|
||||
{ id: 28, name: "现代设计行业的发展现状", level: "completed" },
|
||||
{ id: 29, name: "设计基础", level: "completed" },
|
||||
{ id: 30, name: "字体设计与中文字体情绪表达", level: "completed" },
|
||||
{ id: 31, name: "商业平面色彩搭配", level: "completed" },
|
||||
{ id: 32, name: "平面设计构图", level: "completed" },
|
||||
{ id: 33, name: "图像编辑工具：Photoshop", level: "completed" },
|
||||
{ id: 34, name: "矢量与标志设计：Illustrator", level: "completed" },
|
||||
{ id: 35, name: "快速设计工具使用：Canva", level: "completed" },
|
||||
{ id: 36, name: "移动端视觉原型设计：Figma", level: "completed" },
|
||||
{ id: 37, name: "视频剪辑入门：剪映", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "AIGC人工智能生成内容",
|
||||
courses: [
|
||||
{ id: 38, name: "AIGC发展简史与基本逻辑", level: "completed" },
|
||||
{ id: 39, name: "AIGC的基本概念与各领域的应用", level: "completed" },
|
||||
{ id: 40, name: "AIGC语言模型：chatgpt的灵活应用", level: "completed" },
|
||||
{ id: 41, name: "AIGC生成内容的版权问题与合规使用", level: "completed" },
|
||||
{ id: 42, name: "AIGC图像生成模型：Stable Diffusion Al摄影和平面设计", level: "completed" },
|
||||
{ id: 43, name: "AIGC图像生成模型：Stable Diffusion的应用操作", level: "completed" },
|
||||
{ id: 44, name: "AIGC视频应用：音视频生成与AI自动剪辑", level: "completed" },
|
||||
{ id: 45, name: "AI词曲创作：suno", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "全栈新媒体运营赋能文旅营销",
|
||||
courses: [
|
||||
{ id: 46, name: "新媒体应用传播学", level: "completed" },
|
||||
{ id: 47, name: "新媒体故事结构入门", level: "completed" },
|
||||
{ id: 48, name: "新媒体产品策划", level: "completed" },
|
||||
{ id: 49, name: "平台账号经营与内容赛道", level: "completed" },
|
||||
{ id: 50, name: "各平台变现方式与具体方法", level: "completed" },
|
||||
{ id: 51, name: "内容运营：短视频的制作工具", level: "completed" },
|
||||
{ id: 52, name: "内容运营：短视频制作内容对标", level: "completed" },
|
||||
{ id: 53, name: "直播运营：直播间的搭建", level: "completed" },
|
||||
{ id: 54, name: "品牌运营：当地文化IP数字化传播", level: "completed" },
|
||||
{ id: 55, name: "品牌运营：跨界营销创新", level: "completed" },
|
||||
{ id: 56, name: "私域运营：私域流量池的运营", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "活动策划基础",
|
||||
courses: [
|
||||
{ id: 57, name: "活动类型与功能认知", level: "completed" },
|
||||
{ id: 58, name: "受众定位与主题创意方法", level: "completed" },
|
||||
{ id: 59, name: "活动宣传渠道与推广方式", level: "completed" },
|
||||
{ id: 60, name: "活动文案写作与表达技巧", level: "completed" },
|
||||
{ id: 61, name: "活动流程设计与时间节点把控", level: "completed" },
|
||||
{ id: 62, name: "活动场地选择与布置基础", level: "completed" },
|
||||
{ id: 63, name: "活动预算与资源统筹", level: "completed" },
|
||||
{ id: 64, name: "应急预案与活动风险管理", level: "completed" },
|
||||
{ id: 65, name: "活动复盘报告撰写与数据分析方法", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "智慧文旅应用",
|
||||
courses: [
|
||||
{ id: 66, name: "智慧文旅概论", level: "completed" },
|
||||
{ id: 67, name: "OTA平台运营", level: "completed" },
|
||||
{ id: 68, name: "票务分销平台", level: "completed" },
|
||||
{ id: 69, name: "景区智能导览系统", level: "completed" },
|
||||
{ id: 70, name: "智能导览设备运用", level: "completed" },
|
||||
{ id: 71, name: "智慧酒店/智慧景区体验场景模拟", level: "completed" },
|
||||
]
|
||||
}
|
||||
],
|
||||
// 保留原始list用于兼容
|
||||
list: [
|
||||
// 岗位体系认知
|
||||
{ id: 1, name: "教育体系认知", level: "completed" },
|
||||
@@ -1636,13 +1789,70 @@ export const mockData = {
|
||||
{ id: 69, name: "景区智能导览系统", level: "completed" },
|
||||
{ id: 70, name: "智能导览设备运用", level: "completed" },
|
||||
{ id: 71, name: "智慧酒店/智慧景区体验场景模拟", level: "completed" },
|
||||
// 展会策划教学放在这里（按顺序）
|
||||
{ id: 72, name: "展会策划教学", level: "completed" },
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "垂直能力课",
|
||||
id: 2,
|
||||
units: [
|
||||
{
|
||||
name: "职业规划课",
|
||||
courses: [
|
||||
{ id: 1, name: "活动策划行业讲解", level: "completed" },
|
||||
{ id: 2, name: "活动策划行业岗位职业发展认知", level: "completed" },
|
||||
{ id: 3, name: "个人职业目标与发展路径规划", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "商业活动策略设计与创意策划",
|
||||
courses: [
|
||||
{ id: 4, name: "文旅商业活动概论", level: "completed" },
|
||||
{ id: 5, name: "受众洞察与市场分析", level: "completed" },
|
||||
{ id: 6, name: "活动定位与价值主张", level: "completed" },
|
||||
{ id: 7, name: "创意主题与故事化设计", level: "completed" },
|
||||
{ id: 8, name: "品牌 IP 与形象塑造", level: "completed" },
|
||||
{ id: 9, name: "合作伙伴与赞助方案设计", level: "completed" },
|
||||
{ id: 10, name: "法规合规与风险评估", level: "completed" },
|
||||
{ id: 11, name: "预算编制与资源整合", level: "completed" },
|
||||
{ id: 12, name: "整合营销传播策划", level: "completed" },
|
||||
{ id: 13, name: "策划案撰写与提案技巧", level: "completed" },
|
||||
{ id: 14, name: "AI 辅助创意与洞察", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "商业活动全程策划执行与运营优化",
|
||||
courses: [
|
||||
{ id: 15, name: "项目时间线与里程碑规划", level: "completed" },
|
||||
{ id: 16, name: "场地选择与供应商协调", level: "completed" },
|
||||
{ id: 17, name: "现场动线与流程设计", level: "completed" },
|
||||
{ id: 18, name: "物料设计与场景布置概览", level: "completed" },
|
||||
{ id: 19, name: "安全管控与应急预案", level: "completed" },
|
||||
{ id: 20, name: "现场客户体验管理", level: "completed" },
|
||||
{ id: 21, name: "数据采集与成效评估", level: "completed" },
|
||||
{ id: 22, name: "运营复盘与持续改进", level: "completed" },
|
||||
{ id: 23, name: "关键绩效指标与ROI评估", level: "completed" },
|
||||
{ id: 24, name: "运营优化策略与流程改进", level: "completed" },
|
||||
{ id: 25, name: "AI 驱动运营优化", level: "completed" },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "消费电子展品牌策划与执行",
|
||||
courses: [
|
||||
{ id: 26, name: "展会主题与品牌定位", level: "completed", isShowCase: true },
|
||||
{ id: 27, name: "展区规划与动线设计", level: "completed" },
|
||||
{ id: 28, name: "新品发布会策划", level: "completed" },
|
||||
{ id: 29, name: "高层对接与 B2B 洽谈", level: "completed" },
|
||||
{ id: 30, name: "观众体验与互动区运营", level: "completed" },
|
||||
{ id: 31, name: "媒体公关与国际报道", level: "completed" },
|
||||
{ id: 32, name: "数据采集与商机管理", level: "completed" },
|
||||
{ id: 33, name: "展后商机跟进与 CRM 管理", level: "completed" },
|
||||
{ id: 34, name: "效果评估与改进计划", level: "completed" },
|
||||
{ id: 35, name: "AI 数字导览与多语种客服", level: "completed" },
|
||||
]
|
||||
}
|
||||
],
|
||||
// 保留原始list用于兼容
|
||||
list: [
|
||||
{ id: 1, name: "品牌运营实训", level: "completed" },
|
||||
{ id: 2, name: "内容运营实训", level: "completed" },
|
||||
@@ -4566,6 +4776,45 @@ mockData.publicCourseLiveList = generatePublicCourseLiveList(allCalendarEvents);
|
||||
// 生成垂直能力课列表（传入unitPosters以包含海报数据）
|
||||
mockData.verticalCourseLiveList = generateVerticalCourseLiveList(allCalendarEvents, mockData.unitPosters);
|
||||
|
||||
// 动态更新垂直能力课作业列表
|
||||
if (mockData.homework && mockData.homework[1]) {
|
||||
const verticalHomeworkList = [];
|
||||
let homeworkId = 1;
|
||||
|
||||
// 遍历所有垂直能力课单元
|
||||
mockData.verticalCourseLiveList.forEach(unit => {
|
||||
unit.courses.forEach(course => {
|
||||
// 判断课程状态
|
||||
let level = "locked";
|
||||
if (course.completed) {
|
||||
level = "completed";
|
||||
} else if (course.current) {
|
||||
level = "in-progress";
|
||||
}
|
||||
|
||||
const homeworkItem = {
|
||||
id: homeworkId++,
|
||||
name: course.courseName,
|
||||
level: level,
|
||||
unitName: unit.unitName,
|
||||
teacherName: course.teacherName,
|
||||
date: course.date
|
||||
};
|
||||
|
||||
// 为展会主题与品牌定位课程添加特殊标记（使其可点击）
|
||||
if (course.courseName === "展会主题与品牌定位" && unit.unitName === "消费电子展品牌策划与执行") {
|
||||
homeworkItem.isShowCase = true;
|
||||
homeworkItem.previewUrl = "https://du9uay.github.io/zhanhui/";
|
||||
}
|
||||
|
||||
verticalHomeworkList.push(homeworkItem);
|
||||
});
|
||||
});
|
||||
|
||||
// 更新垂直能力课作业列表
|
||||
mockData.homework[1].list = verticalHomeworkList;
|
||||
}
|
||||
|
||||
// 在courseLiveList定义后，更新dashboardStatistics的课程和任务数据
|
||||
const dashboardCourseData = generateDashboardCourses(mockData.courseLiveList);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user