diff --git a/src/router/index.ts b/src/router/index.ts index e60814c..483145e 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -762,12 +762,28 @@ const routes: RouteRecordRaw[] = [ const router = createRouter({ history: createWebHistory(), routes, - scrollBehavior(_to, _from, savedPosition) { + scrollBehavior(to, from, savedPosition) { + console.log('🔍 scrollBehavior 触发:', { + to: to.path, + from: from.path, + savedPosition, + currentScrollY: window.scrollY + }) + + // 如果是浏览器前进/后退，使用保存的位置 if (savedPosition) { + console.log('📍 使用保存的位置:', savedPosition) return savedPosition - } else { - return { top: 0 } } + + // 对于所有新的路由跳转，都滚动到顶部 + console.log('⬆️ 准备滚动到顶部') + return new Promise((resolve) => { + setTimeout(() => { + console.log('⬆️ 执行滚动到顶部') + resolve({ top: 0, behavior: 'smooth' }) + }, 100) // 延迟确保页面已渲染 + }) } }) @@ -801,4 +817,47 @@ router.beforeEach((to, from, next) => { }) }) +// 路由跳转完成后的处理 +router.afterEach((to, from) => { + console.log('🔍 router.afterEach 触发:', { + to: to.path, + from: from.path, + windowScrollY: window.scrollY, + documentScrollTop: document.documentElement.scrollTop, + bodyScrollTop: document.body.scrollTop + }) + + // 检查所有可能的滚动容器 + setTimeout(() => { + console.log('🔍 检查滚动容器:') + console.log('- window.scrollY:', window.scrollY) + console.log('- document.documentElement.scrollTop:', document.documentElement.scrollTop) + console.log('- document.body.scrollTop:', document.body.scrollTop) + + // 查找所有可能的滚动容器 + const scrollableElements = document.querySelectorAll('.n-layout, .n-layout-content, .content, .app-layout') + scrollableElements.forEach((el, index) => { + console.log(`- 滚动容器 ${index}:`, el.className, 'scrollTop:', el.scrollTop) + }) + + // 强制滚动所有容器到顶部 + console.log('⬆️ 强制滚动所有容器到顶部') + window.scrollTo(0, 0) + document.documentElement.scrollTop = 0 + document.body.scrollTop = 0 + + scrollableElements.forEach((el) => { + el.scrollTop = 0 + }) + + // 最后检查 + setTimeout(() => { + console.log('⬆️ 最终检查所有滚动位置:') + console.log('- window.scrollY:', window.scrollY) + console.log('- document.documentElement.scrollTop:', document.documentElement.scrollTop) + console.log('- document.body.scrollTop:', document.body.scrollTop) + }, 100) + }, 100) +}) + export default router \ No newline at end of file diff --git a/src/views/CourseExchanged.vue b/src/views/CourseExchanged.vue index ff8ad59..69417c2 100644 --- a/src/views/CourseExchanged.vue +++ b/src/views/CourseExchanged.vue @@ -64,7 +64,7 @@
- {{ course.name }} + {{ course?.title || '课程' }} > {{ practiceMode ? currentPracticeSection?.name || '练习' : '讨论' }}
@@ -338,59 +338,47 @@
-
-
-

{{ currentDiscussionSection?.name }} - 讨论区

-

如何理解机器学习与科研流程的关系？如何理解机器学习与科研流程之间的关系？各位同学大家好，欢迎加入本学期的课程学习，在学习过程中有任何问题思考不同见解，都欢迎在讨论区积极交流，期待回复老师的问题。

+ +
+ +
+

讨论

+ 未参与 +
+ + +
+ 如何理解学风与科研诚信？如何理解优良学风与科研诚信之间的关系？各位同学大家好，欢迎加入本学期的课程学习，在学习过程有任何问题困惑和不同见解，都欢迎同学在讨论区积极交流，踊跃回复老师留在讨论区的问题。
-
- -
-
-
- 评论 ({{ discussionList.length }}) - + 评论 (1251)
- +
-
+
+ 用户头像 +
+
-
-
- -
-
@@ -400,27 +388,25 @@
- +
{{ comment.username }} - {{ comment.time }} + 讲师
{{ comment.content }}
-
- - +
+ 评论图片 +
+
+ {{ comment.time }} +
+ + 回复 +
@@ -2443,11 +2429,7 @@ const currentPracticeQuestion = computed(() => { return null }) -// 开始练习 -const startPractice = () => { - practiceStarted.value = true - console.log('✅ 练习已开始') -} + // 退出练习 const exitPractice = () => { @@ -2544,12 +2526,7 @@ const nextPracticeQuestion = () => { -// 答题卡相关计算方法 -const getPracticeProgress = () => { - if (practiceQuestions.value.length === 0) return 0 - const answered = getAnsweredCount() - return Math.round((answered / practiceQuestions.value.length) * 100) -} + const getCurrentPracticeScore = () => { // 这里可以根据实际答题情况计算得分 @@ -2669,20 +2646,53 @@ const loadDiscussionData = async (section: CourseSection) => { discussionList.value = [ { id: 1, - username: '张同学', - avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80', - content: '如何理解机器学习与科研流程的关系？如何理解机器学习与科研流程之间的关系？各位同学大家好，欢迎加入本学期的课程学习，在学习过程中有任何问题思考不同见解，都欢迎在讨论区积极交流，期待回复老师的问题。', - time: '2023.07.23 16:25', - likes: 29, + username: '春暖花开', + avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=40&q=80', + content: '为了让科学教育有效，它必须符合科学的本质，而且应该让学生认识科学的本质，家庭和社会如何配合学校实现科学教育的目标。', + time: '2025.07.23 16:28', + likes: 23, replies: [] }, { id: 2, username: '春暖花开', - avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80', + avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=40&q=80', content: '为了让科学教育有效，它必须符合科学的本质，而且应该让学生认识科学的本质，家庭和社会如何配合学校实现科学教育的目标。', - time: '2023.07.23 16:25', - likes: 24, + time: '2025.07.23 16:29', + likes: 23, + replies: [] + }, + { + id: 3, + username: '汪深', + avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=40&q=80', + content: '这位同学的观点很好，希望能够继续深入讨论', + time: '2025.07.23 16:28', + likes: 0, + isTeacher: true, + replies: [] + }, + { + id: 4, + username: '春暖花开', + avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=40&q=80', + content: '为了让科学教育有效，它必须符合科学的本质，而且应该让学生认识科学的本质，家庭和社会如何配合学校实现科学教育的目标。', + time: '2025.07.23 16:28', + likes: 23, + images: [ + 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80', + 'https://images.unsplash.com/photo-1518186285589-2f7649de83e0?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80', + 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80' + ], + replies: [] + }, + { + id: 5, + username: '春暖花开', + avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=40&q=80', + content: '为了让科学教育有效，它必须符合科学的本质，而且应该让学生认识科学的本质，家庭和社会如何配合学校实现科学教育的目标。', + time: '2025.07.23 16:28', + likes: 23, replies: [] } ] @@ -8283,15 +8293,16 @@ onActivated(() => { line-height: 1.2; } -/* 讨论模式样式 */ +/* 讨论模式样式 - 按照原型图设计 */ .discussion-section { - background: white; - border-radius: 8px; - overflow: hidden; - width: 100%; - max-width: none; - margin: 0; - padding: 0; + width: 1246px; + min-height: 864px; /* 改为最小高度，支持自适应 */ + height: auto; /* 自适应高度 */ + background: rgba(255, 255, 255, 0.5); + border-radius: 2px; + border: 1px solid #E5E5E5; + padding: 24px; + margin: 0 auto; } .discussion-header { @@ -8346,8 +8357,8 @@ onActivated(() => { justify-content: space-between; align-items: center; margin-bottom: 24px; - padding-bottom: 16px; - border-bottom: 1px solid #f0f0f0; + padding-bottom: 6px; + } .comment-count { @@ -8527,6 +8538,381 @@ onActivated(() => { color: white; } +/* 讨论容器 */ +.discussion-container { + width: 100%; + height: 100%; + padding-right: 48px; /* 增加右侧距离 */ +} + +/* 讨论标题行 */ +.discussion-title-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + width: 100%; /* 确保占满容器宽度 */ +} + +.discussion-title { + font-family: PingFangSC, PingFang SC; + font-weight: 500; + font-size: 16px; + color: #0088D1; + line-height: 22px; + text-align: left; + font-style: normal; + margin: 0; + flex-shrink: 0; /* 防止标题被压缩 */ +} + +.participation-status { + font-family: PingFangSC, PingFang SC; + font-weight: 500; + font-size: 16px; + color: #0088D1; + line-height: 22px; + text-align: right; + font-style: normal; + flex-shrink: 0; /* 防止状态文字被压缩 */ +} + +/* 讨论描述 */ +.discussion-description { + width: 100%; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 16px; + color: #000000; + line-height: 22px; + text-align: justify; + font-style: normal; + margin-bottom: 32px; +} + +/* 评论统计 */ +.discussion-stats { + margin-bottom: 14px; +} + +.comment-count { + width: 85px; + height: 20px; + font-family: PingFangSC, PingFang SC; + font-weight: 500; + font-size: 14px; + color: #008BD7; + line-height: 20px; + text-align: left; + font-style: normal; + text-transform: none; +} + +/* 评论输入区域 */ +.comment-input-section { + display: flex; + gap: 12px; + margin-bottom: 24px; + background: transparent; /* 无背景，无边框 */ +} + +.user-avatar img { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; +} + +.input-wrapper { + flex: 1; + background: transparent; +} + +.comment-input { + width: 100%; + height: 36px; + padding: 8px 12px; + border: 1px solid #E6E6E6; + border-radius: 2px; + outline: none; + resize: none; + font-family: PingFangSC, PingFang SC; + font-size: 14px; + color: #333; + background: transparent; /* 透明背景 */ + box-sizing: border-box; +} + +.comment-input::placeholder { + color: #BFBFBF; +} + +.input-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 8px; /* 减少到8px */ + margin-top: 8px; +} + +.toolbar-left { + display: flex; + gap: 8px; +} + +.toolbar-btn { + width: 24px; + height: 20px; + border-radius: 2px; + border: 1px solid #E6E6E6; + background: transparent; /* 透明背景 */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0; +} + +.toolbar-icon { + width: 16px; /* 调整图标大小 */ + height: 16px; + /* 移除蓝色边框 */ +} + +.submit-btn { + width: 48px; /* 确保宽度为48px */ + height: 24px; + background: #0088D1; + border-radius: 2px; + border: none; + cursor: pointer; + transition: background-color 0.3s; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 14px; + color: #FFFFFF; + line-height: 20px; + text-align: center; + font-style: normal; +} + +.submit-btn:hover { + background: #0077B8; +} + +.submit-btn:disabled { + background: #D9D9D9; + cursor: not-allowed; +} + +/* 评论列表 */ +.discussion-list { + background: transparent; +} + +.discussion-item { + display: flex; + gap: 12px; + margin-bottom: 16px; /* 减少间距 */ + background: transparent; + padding: 0; /* 移除内边距 */ +} + +.discussion-item:last-child { + margin-bottom: 0; +} + +.comment-avatar img { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; +} + +.comment-content { + flex: 1; + background: transparent; +} + +.comment-header { + display: flex; + align-items: center; + gap: 12px; /* 用户名与讲师标签间距12px，更紧凑 */ + margin-bottom: 6px; /* 减少间距 */ + justify-content: flex-start; /* 左对齐，让讲师标签紧跟用户名 */ +} + +.comment-username { + height: 20px; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 14px; + color: #666666; + line-height: 20px; + text-align: left; + font-style: normal; + white-space: nowrap; /* 不换行 */ + display: inline-block; /* 宽度自适应内容 */ +} + +.comment-badge { + background: #1890FF; + color: white; + padding: 2px 6px; + border-radius: 2px; + font-size: 10px; + line-height: 14px; +} + +.comment-text { + width: 700px; + min-height: 20px; /* 改为最小高度，支持自适应 */ + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 14px; + color: #333333; + line-height: 20px; + text-align: left; + font-style: normal; + margin-bottom: 8px; /* 减少间距 */ + word-wrap: break-word; /* 支持换行 */ + word-break: break-all; /* 强制换行 */ +} + +.comment-images { + display: flex; + gap: 8px; + margin-bottom: 12px; +} + +.comment-image { + width: 80px; + height: 60px; + border-radius: 4px; + object-fit: cover; +} + +.comment-footer { + display: flex; + align-items: center; + margin-top: 4px; /* 减少顶部间距 */ + gap: 24px; /* 时间与操作按钮间距24px */ +} + +.comment-time { + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 12px; + color: #999999; + line-height: 20px; + text-align: left; + font-style: normal; + text-transform: none; + white-space: nowrap; /* 确保时间一行展示 */ +} + +.comment-actions { + display: flex; + align-items: center; + gap: 24px; /* 点赞与回复间距24px */ +} + +/* 讨论区域专用的评论操作样式 */ +.discussion-comment-actions { + display: flex; + align-items: center; + gap: 24px; /* 点赞与回复间距24px */ +} + +.like-btn { + background: transparent; /* 透明背景 */ + border: none; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 12px; + color: #999999; + line-height: 20px; + text-align: left; + font-style: normal; + text-transform: none; + cursor: pointer; + display: flex; + align-items: center; + gap: 4px; + padding: 0; + white-space: nowrap; /* 确保一行展示 */ +} + +.like-btn:hover { + color: #1890FF; +} + +.reply-text { + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 12px; + color: #999999; + line-height: 20px; + text-align: left; + font-style: normal; + text-transform: none; + cursor: pointer; + padding: 0; + background: transparent; /* 透明背景 */ + white-space: nowrap; /* 确保一行展示 */ +} + +.reply-text:hover { + color: #1890FF; +} + +/* 讨论区域专用的点赞和回复按钮样式 */ +.discussion-like-btn { + background: transparent !important; /* 强制透明背景 */ + border: none; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 12px; + color: #999999; + line-height: 20px; + text-align: left; + font-style: normal; + text-transform: none; + cursor: pointer; + display: flex; + align-items: center; + gap: 4px; + padding: 0; + white-space: nowrap; /* 确保一行展示 */ +} + +.discussion-like-btn:hover { + color: #1890FF; +} + +.discussion-reply-text { + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 12px; + color: #999999; + line-height: 20px; + text-align: left; + font-style: normal; + text-transform: none; + cursor: pointer; + padding: 0; + background: transparent !important; /* 强制透明背景 */ + white-space: nowrap; /* 确保一行展示 */ +} + +.discussion-reply-text:hover { + color: #1890FF; +} + /* 新的答题卡样式 */ /* 答题信息样式 */ .answer-info { diff --git a/src/views/Home.vue b/src/views/Home.vue index 44169bd..a8d75c7 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -503,10 +503,10 @@
-
@@ -615,6 +615,7 @@ const handleEnrollCourse = async (course: any, event?: Event) => { // 如果已经报名，直接跳转到学习页面 if (course.isEnrolled) { console.log('✅ 用户已报名，跳转到学习页面') + console.log('🔍 跳转前的滚动位置:', window.scrollY) router.push(`/course/${course.id}/exchanged`) return } diff --git a/src/views/teacher/ExamPages/AddExam.vue b/src/views/teacher/ExamPages/AddExam.vue index f733e8f..3c2e07e 100644 --- a/src/views/teacher/ExamPages/AddExam.vue +++ b/src/views/teacher/ExamPages/AddExam.vue @@ -1371,7 +1371,15 @@ const saveExam = async () => { // 从响应中获取试卷ID if (response.data) { - paperId = response.data; + // 检查是否是包含result字段的对象 + if (typeof response.data === 'object' && (response.data as any).result) { + paperId = (response.data as any).result; + } else if (typeof response.data === 'string') { + // 兼容直接返回字符串的情况 + paperId = response.data; + } else { + throw new Error('创建试卷失败，返回数据格式不正确'); + } } else { throw new Error('创建试卷失败，无法获取试卷ID'); } @@ -1724,13 +1732,14 @@ const saveExamQuestions = async (paperId: string) => { // 将题目关联到试卷 const paperQuestionData = { - paperId: paperId, + paperId: String(paperId), // 确保paperId是字符串 questionId: questionId, orderNo: questionOrder, score: subQuestion.score || 0 }; console.log('📝 关联题目到试卷:', paperQuestionData); + console.log('🔍 paperId类型:', typeof paperId, '值:', paperId); const paperQuestionResponse = await ExamApi.addExamPaperQuestion(paperQuestionData); console.log('✅ 题目关联成功:', paperQuestionResponse);