From d8d388b43726cca1d7f5d03d30920a73a6757632 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com> Date: Fri, 1 Aug 2025 03:11:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E6=A1=86?= =?UTF-8?q?=E6=9E=B6=E5=92=8C=E8=80=83=E8=AF=95=E7=BB=83=E4=B9=A0=E6=A8=A1?= =?UTF-8?q?=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Profile.vue | 2570 +++++++++++++++++++++++++++++++++++------ 1 file changed, 2238 insertions(+), 332 deletions(-) diff --git a/src/views/Profile.vue b/src/views/Profile.vue index 2c9babb..580ad8b 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -2,348 +2,513 @@
- -
- + +
+ + + {{ userStore.user?.username || '用户名' }} + + +
+ + + + +
- {{ userStore.user?.username || '用户名' }} + 我的课程 +
- -
- - + +
+ + 我的作业 +
- -
- - 我的课程 + +
+ + 我的考试 +
+ + +
+ + 我的练习 +
+ + +
+ + 我的活动 +
+ + +
+ + 我的消息 +
+ + +
+ + 我的资料 +
+ + +
+ + 我的下载 +
+
+
+ + +
+ +
+ +
+ 全部课程 + 学习中 + 已完结 +
+ + +
+ + +
+ +
+
+
+ + {{ getStatusText(course.status) }} +
- -
- - 我的作业 -
+
+
+ {{ course.title }} + + {{ course.rating || 541 }} +
+ 讲师:{{ course.instructor }} + {{ course.description }} - -
- - 我的考试 -
- - -
- - 我的练习 -
- - -
- - 我的活动 -
- - -
- - 我的消息 -
- - -
- - 我的资料 -
- - -
- - 我的下载 +
+ + 共{{ course.chapters || 9 }}章{{ course.lessons || 54 }}节 + + {{ course.duration || '12小时43分钟' }} + + 已看{{ course.watchedTime || '10小时20分钟' }} +
+ {{ course.status === 'learning' ? '去学习' : '去复习' }} +
+
- -
- -
- -
- 全部课程 - 学习中 - 已完结 -
- - -
- - -
- -
-
-
- - {{ getStatusText(course.status) }} -
-
- -
-
- {{ course.title }} - - {{ course.rating || 541 }} -
- 讲师:{{ course.instructor }} - {{ course.description }} - -
- - 共{{ course.chapters || 9 }}章{{ course.lessons || 54 }}节 - - {{ course.duration || '12小时43分钟' }} - - 已看{{ course.watchedTime || '10小时20分钟' }} -
- {{ course.status === 'learning' ? '去学习' : '去复习' }} -
-
-
-
-
- - -
- - - -
- -
- 全部作业 - 未完成 - 已完成 -
- - -
- - -
-
- -
- -
- -
-
- 教师头像 -
- {{ detailAssignment.teacherName }} - {{ detailAssignment.assignTime }} -
-
- {{ detailAssignment.status }} -
- - -
- {{ detailAssignment.title }} -
- - {{ detailAssignment.description }} - -
-
- - -
-
- -
-
- - -
- -
-
-
- - -
-
- -
-
- -
- {{ assignment.teacherName }} - {{ assignment.assignTime }} -
-
- {{ assignment.status }} -
- - -
- {{ assignment.title }} -
- - {{ assignment.description }} - -
-
- - -
- - - -
- -
-
- - -
- - - - -
- - -
-
-
- - -
-

{{ getTabTitle(activeTab) }}

-

{{ activeTab }}功能开发中...

+ + +
+ +
+ 全部作业 + 未完成 + 已完成 +
+ + +
+ + +
+
+ +
+ +
+ +
+
+ 教师头像 +
+ {{ detailAssignment.teacherName }} + {{ detailAssignment.assignTime }} +
+
+ {{ detailAssignment.status }} +
+ + +
+ {{ detailAssignment.title }} +
+ + {{ detailAssignment.description }} + +
+
+ + +
+
+ +
+
+ + +
+ +
+
+
+ + +
+
+ +
+
+ +
+ {{ assignment.teacherName }} + {{ assignment.assignTime }} +
+
+ {{ assignment.status }} +
+ + +
+ {{ assignment.title }} +
+ + {{ assignment.description }} + +
+
+ + +
+ + + +
+ +
+
+ + +
+ + + + +
+ + +
+
+
+ + +
+ +
+ 全部考试 + 未开始 + 进行中 + 已结束 +
+ + +
+ + +
+
+ +
{{ exam.title }}
+ + +
+ {{ exam.score }}分 +
+ + +
+
+ 考试日期: + {{ exam.examDate }} +
+
+ 考试时间: + {{ exam.duration }}分钟 +
+
+ 考试题量: + {{ exam.questionCount }}题 +
+
+ + +
+ {{ exam.description }} +
+ + + +
+
+
+ + +
+ +
+ 全部练习 + 练习中 + 已结束 +
+ + +
+ + +
+
+ +
+ {{ practice.score }}分 +
+ + +

{{ practice.title }}

+ + +
+
+ 练习日期: + {{ practice.practiceDate }} +
+
+ 练习时间: + {{ practice.duration }}分钟 +
+
+ 题库数量: + {{ practice.questionCount }} +
+
+ + + + +
+
+ 答对 + {{ practice.correctCount }}题 +
+
+ 答错 + {{ practice.wrongCount }}题 +
+
+ + +
+
练习简介
+
+ 练习涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。 +
+
+ + + +
+
+
+ + +
+

{{ getTabTitle(activeTab) }}

+

{{ activeTab }}功能开发中...

+
+
+
@@ -358,18 +523,18 @@ 选择文件 @@ -388,6 +553,196 @@ + +
+
+ +
+ +
+ + +
+ +
+
+

{{ currentExamDetail.title }}

+
+ + +
+
+ +
+ {{ String(index + 1).padStart(2, '0') }} + {{ question.title }} + +59 +
+ + +
+ {{ question.content }} +
+ + +
+
+
+ +
+
+ {{ option.text }} +
+ +
+
+
+
+ + + + + +
+
答案解析:
+
+ 这道题考查的是危险化学品安全管理的相关知识点,根据相关法规要求,危险化学品生产企业应当提供完整的安全技术说明书和应急处理措施。 +
+
+
+
+ + +
+ +
+
+ + +
+ +
+
+
+
{{ currentExamDetail.score }}
+
+
+
得分
+
+ + +
+
+ {{ currentDetailType === 'exam' ? '交卷时间:' : '练习时间:' }} + {{ currentDetailType === 'exam' ? (currentExamDetail as any).examDate : (currentExamDetail as any).practiceDate }} +
+
+ {{ currentDetailType === 'exam' ? '考试时长:' : '练习时长:' }} + {{ currentExamDetail.duration }}分钟 +
+
+ {{ currentDetailType === 'exam' ? '考试题量:' : '练习题量:' }} + {{ currentExamDetail.totalQuestions }}题 +
+
+ + +
+
+
+
{{ currentExamDetail.correctCount }}
+
答对题数
+
+
+
{{ currentExamDetail.wrongCount }}
+
答错题数
+
+
+
{{ currentExamDetail.totalQuestions - currentExamDetail.correctCount - currentExamDetail.wrongCount }}
+
答对题数
+
+
+
+ + +
+
答题卡
+
+ +
+
单选 (10)
+
+
+ {{ String(i).padStart(2, '0') }} +
+
+
+ + +
+
多选 (10)
+
+
+ {{ String(i).padStart(2, '0') }} +
+
+
+
+ + +
+
+ + 答对 +
+
+ + 答错 +
+
+ + +
+
+
+
+
+
+
+ @@ -396,13 +751,6 @@ import { ref, computed, onMounted, reactive } from 'vue' import { useMessage, NModal, NUpload, NInput, NForm, NFormItem, NButton } from 'naive-ui' import { useUserStore } from '@/stores/user' -// 定义文件接口 -interface UploadFile { - name: string - size: number - type?: string -} - // 定义课程接口 interface Course { id: number @@ -435,6 +783,77 @@ interface Assignment { mainImage: string } +// 定义考试接口 +interface Exam { + id: number + title: string + examDate: string + duration: number + questionCount: number + description: string + status: 'upcoming' | 'ongoing' | 'finished' + score: number | null +} + +// 考试题目选项接口 +interface ExamOption { + id: string + text: string + image?: string +} + +// 考试题目接口 +interface ExamQuestion { + id: number + type: 'single' | 'multiple' + title: string + content: string + options: ExamOption[] + correctAnswers: string[] + userAnswers: string[] + isCorrect: boolean +} + +// 考试详情接口 +interface ExamDetail { + id: number + title: string + examDate: string + duration: number + totalQuestions: number + correctCount: number + wrongCount: number + score: number + questions: ExamQuestion[] +} + +// 练习接口 +interface Practice { + id: number + title: string + practiceDate: string + duration: number + questionCount: number + description: string + status: 'ongoing' | 'finished' + score: number | null + correctCount: number + wrongCount: number +} + +// 练习详情接口(复用考试题目结构) +interface PracticeDetail { + id: number + title: string + practiceDate: string + duration: number + totalQuestions: number + correctCount: number + wrongCount: number + score: number + questions: ExamQuestion[] +} + const message = useMessage() const userStore = useUserStore() @@ -447,6 +866,12 @@ const activeCourseTab = ref('all') // 作业筛选状态 const activeHomeworkTab = ref('all') +// 考试筛选状态 +const activeExamTab = ref('all') + +// 练习筛选状态 +const activePracticeTab = ref('all') + // 分页相关状态 const currentPage = ref(1) const pageSize = ref(5) // 每页显示5个课程 @@ -634,6 +1059,480 @@ const mockAssignments: Assignment[] = [ } ] +// 模拟考试数据 +const mockExams: Exam[] = [ + { + id: 1, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'upcoming', + score: null + }, + { + id: 2, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'ongoing', + score: null + }, + { + id: 3, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'finished', + score: 90 + }, + { + id: 4, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'upcoming', + score: null + }, + { + id: 5, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'ongoing', + score: null + }, + { + id: 6, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'finished', + score: 90 + }, + { + id: 7, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'upcoming', + score: null + }, + { + id: 8, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'finished', + score: 90 + }, + { + id: 9, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '考试涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'ongoing', + score: null + } +] + +// 模拟考试详情数据 +const mockExamDetails: { [key: number]: ExamDetail } = { + 3: { + id: 3, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-30 12:00', + duration: 100, + totalQuestions: 120, + correctCount: 90, + wrongCount: 10, + score: 98, + questions: [ + { + id: 1, + type: 'single', + title: '[单选题]', + content: '危险化学品生产企业应当提供危险化学品安全技术说明书,并在包装(包括外包装)上标识,或者将技术与包装内危险化学品相符的化学品()和安全技术说明书。', + options: [ + { id: 'A', text: 'A.操作规范说明书' }, + { id: 'B', text: 'B.应急处理措施' }, + { id: 'C', text: 'C.安全标签' }, + { id: 'D', text: 'D.产品合格证' } + ], + correctAnswers: ['B'], + userAnswers: ['B'], + isCorrect: true + }, + { + id: 2, + type: 'multiple', + title: '[多选题]', + content: '危险化学品生产企业应当提供危险化学品安全技术说明书,并在包装(包括外包装)上标识,或者将技术与包装内危险化学品相符的化学品()和安全技术说明书。', + options: [ + { id: 'A', text: 'A.操作规范说明书', image: '/images/exam/option-a.png' }, + { id: 'B', text: 'B.应急处理措施', image: '/images/exam/option-b.png' }, + { id: 'C', text: 'C.安全标签' }, + { id: 'D', text: 'D.产品合格证', image: '/images/exam/option-d.png' }, + { id: 'E', text: 'E.产品标签' } + ], + correctAnswers: ['A', 'B'], + userAnswers: ['A', 'B'], + isCorrect: true + } + ] + }, + 6: { + id: 6, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-30 12:00', + duration: 100, + totalQuestions: 120, + correctCount: 90, + wrongCount: 10, + score: 98, + questions: [ + { + id: 1, + type: 'single', + title: '[单选题]', + content: '危险化学品生产企业应当提供危险化学品安全技术说明书,并在包装(包括外包装)上标识,或者将技术与包装内危险化学品相符的化学品()和安全技术说明书。', + options: [ + { id: 'A', text: 'A.操作规范说明书' }, + { id: 'B', text: 'B.应急处理措施' }, + { id: 'C', text: 'C.安全标签' }, + { id: 'D', text: 'D.产品合格证' } + ], + correctAnswers: ['B'], + userAnswers: ['B'], + isCorrect: true + }, + { + id: 2, + type: 'multiple', + title: '[多选题]', + content: '危险化学品生产企业应当提供危险化学品安全技术说明书,并在包装(包括外包装)上标识,或者将技术与包装内危险化学品相符的化学品()和安全技术说明书。', + options: [ + { id: 'A', text: 'A.操作规范说明书', image: '/images/exam/option-a.png' }, + { id: 'B', text: 'B.应急处理措施', image: '/images/exam/option-b.png' }, + { id: 'C', text: 'C.安全标签' }, + { id: 'D', text: 'D.产品合格证', image: '/images/exam/option-d.png' }, + { id: 'E', text: 'E.产品标签' } + ], + correctAnswers: ['A', 'B'], + userAnswers: ['A', 'B'], + isCorrect: true + } + ] + }, + 8: { + id: 8, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-30 12:00', + duration: 100, + totalQuestions: 120, + correctCount: 90, + wrongCount: 10, + score: 98, + questions: [ + { + id: 1, + type: 'single', + title: '[单选题]', + content: '危险化学品生产企业应当提供危险化学品安全技术说明书,并在包装(包括外包装)上标识,或者将技术与包装内危险化学品相符的化学品()和安全技术说明书。', + options: [ + { id: 'A', text: 'A.操作规范说明书' }, + { id: 'B', text: 'B.应急处理措施' }, + { id: 'C', text: 'C.安全标签' }, + { id: 'D', text: 'D.产品合格证' } + ], + correctAnswers: ['B'], + userAnswers: ['B'], + isCorrect: true + }, + { + id: 2, + type: 'multiple', + title: '[多选题]', + content: '危险化学品生产企业应当提供危险化学品安全技术说明书,并在包装(包括外包装)上标识,或者将技术与包装内危险化学品相符的化学品()和安全技术说明书。', + options: [ + { id: 'A', text: 'A.操作规范说明书', image: '/images/exam/option-a.png' }, + { id: 'B', text: 'B.应急处理措施', image: '/images/exam/option-b.png' }, + { id: 'C', text: 'C.安全标签' }, + { id: 'D', text: 'D.产品合格证', image: '/images/exam/option-d.png' }, + { id: 'E', text: 'E.产品标签' } + ], + correctAnswers: ['A', 'B'], + userAnswers: ['A', 'B'], + isCorrect: true + } + ] + }, + 9: { + id: 9, + title: 'C++语言程序设计基础考试', + examDate: '2025-07-30 12:00', + duration: 100, + totalQuestions: 120, + correctCount: 90, + wrongCount: 10, + score: 98, + questions: [ + { + id: 1, + type: 'single', + title: '[单选题]', + content: '危险化学品生产企业应当提供危险化学品安全技术说明书,并在包装(包括外包装)上标识,或者将技术与包装内危险化学品相符的化学品()和安全技术说明书。', + options: [ + { id: 'A', text: 'A.操作规范说明书' }, + { id: 'B', text: 'B.应急处理措施' }, + { id: 'C', text: 'C.安全标签' }, + { id: 'D', text: 'D.产品合格证' } + ], + correctAnswers: ['B'], + userAnswers: ['B'], + isCorrect: true + }, + { + id: 2, + type: 'multiple', + title: '[多选题]', + content: '危险化学品生产企业应当提供危险化学品安全技术说明书,并在包装(包括外包装)上标识,或者将技术与包装内危险化学品相符的化学品()和安全技术说明书。', + options: [ + { id: 'A', text: 'A.操作规范说明书', image: '/images/exam/option-a.png' }, + { id: 'B', text: 'B.应急处理措施', image: '/images/exam/option-b.png' }, + { id: 'C', text: 'C.安全标签' }, + { id: 'D', text: 'D.产品合格证', image: '/images/exam/option-d.png' }, + { id: 'E', text: 'E.产品标签' } + ], + correctAnswers: ['A', 'B'], + userAnswers: ['A', 'B'], + isCorrect: true + } + ] + } +} + +// 模拟练习数据 +const mockPractices: Practice[] = [ + { + id: 1, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'ongoing', + score: null, + correctCount: 18, + wrongCount: 15 + }, + { + id: 2, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-18 10:00', + duration: 88, + questionCount: 100, + description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'finished', + score: 90, + correctCount: 18, + wrongCount: 15 + }, + { + id: 3, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-18 10:00', + duration: 88, + questionCount: 100, + description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'finished', + score: 90, + correctCount: 18, + wrongCount: 15 + }, + { + id: 4, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-18 10:00', + duration: 120, + questionCount: 100, + description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'ongoing', + score: null, + correctCount: 18, + wrongCount: 15 + }, + { + id: 5, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-18 10:00', + duration: 88, + questionCount: 100, + description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'finished', + score: 90, + correctCount: 18, + wrongCount: 15 + }, + { + id: 6, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-18 10:00', + duration: 88, + questionCount: 100, + description: '练习涵盖C++基础语法、面向对象编程、数据结构等核心内容,旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。', + status: 'finished', + score: 90, + correctCount: 18, + wrongCount: 15 + } +] + +// 模拟练习详情数据 +const mockPracticeDetails: { [key: number]: PracticeDetail } = { + 2: { + id: 2, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-30 14:00', + duration: 88, + totalQuestions: 100, + correctCount: 18, + wrongCount: 15, + score: 90, + questions: [ + { + id: 1, + type: 'single', + title: '[单选题]', + content: 'C++中,下列哪个关键字用于定义类?', + options: [ + { id: 'A', text: 'A.struct' }, + { id: 'B', text: 'B.class' }, + { id: 'C', text: 'C.union' }, + { id: 'D', text: 'D.enum' } + ], + correctAnswers: ['B'], + userAnswers: ['B'], + isCorrect: true + }, + { + id: 2, + type: 'multiple', + title: '[多选题]', + content: 'C++中,下列哪些是面向对象编程的特性?', + options: [ + { id: 'A', text: 'A.封装' }, + { id: 'B', text: 'B.继承' }, + { id: 'C', text: 'C.多态' }, + { id: 'D', text: 'D.递归' }, + { id: 'E', text: 'E.抽象' } + ], + correctAnswers: ['A', 'B', 'C', 'E'], + userAnswers: ['A', 'B', 'C'], + isCorrect: false + } + ] + }, + 3: { + id: 3, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-30 14:00', + duration: 88, + totalQuestions: 100, + correctCount: 18, + wrongCount: 15, + score: 90, + questions: [ + { + id: 1, + type: 'single', + title: '[单选题]', + content: 'C++中,下列哪个关键字用于定义类?', + options: [ + { id: 'A', text: 'A.struct' }, + { id: 'B', text: 'B.class' }, + { id: 'C', text: 'C.union' }, + { id: 'D', text: 'D.enum' } + ], + correctAnswers: ['B'], + userAnswers: ['B'], + isCorrect: true + } + ] + }, + 5: { + id: 5, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-30 14:00', + duration: 88, + totalQuestions: 100, + correctCount: 18, + wrongCount: 15, + score: 90, + questions: [ + { + id: 1, + type: 'single', + title: '[单选题]', + content: 'C++中,下列哪个关键字用于定义类?', + options: [ + { id: 'A', text: 'A.struct' }, + { id: 'B', text: 'B.class' }, + { id: 'C', text: 'C.union' }, + { id: 'D', text: 'D.enum' } + ], + correctAnswers: ['B'], + userAnswers: ['B'], + isCorrect: true + } + ] + }, + 6: { + id: 6, + title: 'C++语言程序设计基础练习题', + practiceDate: '2025-07-30 14:00', + duration: 88, + totalQuestions: 100, + correctCount: 18, + wrongCount: 15, + score: 90, + questions: [ + { + id: 1, + type: 'single', + title: '[单选题]', + content: 'C++中,下列哪个关键字用于定义类?', + options: [ + { id: 'A', text: 'A.struct' }, + { id: 'B', text: 'B.class' }, + { id: 'C', text: 'C.union' }, + { id: 'D', text: 'D.enum' } + ], + correctAnswers: ['B'], + userAnswers: ['B'], + isCorrect: true + } + ] + } +} + // 获取筛选后的所有课程 const allFilteredCourses = computed(() => { if (activeCourseTab.value === 'learning') { @@ -666,10 +1565,33 @@ const filteredAssignments = computed(() => { return mockAssignments }) +// 获取筛选后的考试 +const filteredExams = computed(() => { + if (activeExamTab.value === 'upcoming') { + return mockExams.filter(exam => exam.status === 'upcoming') + } else if (activeExamTab.value === 'ongoing') { + return mockExams.filter(exam => exam.status === 'ongoing') + } else if (activeExamTab.value === 'finished') { + return mockExams.filter(exam => exam.status === 'finished') + } + return mockExams +}) + +// 获取筛选后的练习 +const filteredPractices = computed(() => { + if (activePracticeTab.value === 'ongoing') { + return mockPractices.filter(practice => practice.status === 'ongoing') + } else if (activePracticeTab.value === 'finished') { + return mockPractices.filter(practice => practice.status === 'finished') + } + return mockPractices +}) + // 计算属性用于模板中的条件判断 const isCoursesTab = computed(() => activeTab.value === 'courses') const isHomeworkTab = computed(() => activeTab.value === 'homework') -// const isOtherTab = computed(() => !isCoursesTab.value && !isHomeworkTab.value) +const isExamTab = computed(() => activeTab.value === 'exam') +const isPracticeTab = computed(() => activeTab.value === 'practice') // 处理菜单选择 const handleMenuSelect = (key: TabType) => { @@ -737,6 +1659,59 @@ const handleHomeworkTabChange = (tab: string) => { activeHomeworkTab.value = tab } +// 处理考试筛选变化 +const handleExamTabChange = (tab: string) => { + activeExamTab.value = tab +} + +// 处理练习筛选变化 +const handlePracticeTabChange = (tab: string) => { + activePracticeTab.value = tab +} + +// 获取考试状态文本 +const getExamStatusText = (status: string) => { + switch (status) { + case 'upcoming': + return '未开始' + case 'ongoing': + return '进行中' + case 'finished': + return '已结束' + default: + return '未知状态' + } +} + +// 开始考试 +const startExam = (examId: number) => { + message.info(`开始考试 ${examId}`) +} + +// 继续考试 +const continueExam = (examId: number) => { + message.info(`继续考试 ${examId}`) +} + +// 查看考试结果 +const viewExamResult = (examId: number) => { + currentExamId.value = examId + currentDetailType.value = 'exam' + showExamDetail.value = true +} + +// 继续练习 +const continuePractice = (practiceId: number) => { + message.info(`继续练习 ${practiceId}`) +} + +// 查看练习详情 +const viewPracticeDetail = (practiceId: number) => { + currentExamId.value = practiceId + currentDetailType.value = 'practice' + showExamDetail.value = true +} + // 获取标签标题 const getTabTitle = (tab: TabType) => { const titles: Record = { @@ -758,16 +1733,51 @@ const currentAssignment = ref(null) const uploadForm = reactive({ title: '', content: '', - files: [] as UploadFile[] + files: [] as File[] }) -// 作业描述展开状态管理 -// const expandedAssignments = ref>({}) + // 作业详情视图状态 const showDetailView = ref(false) const detailAssignment = ref(null) +// 考试详情视图状态 +const showExamDetail = ref(false) +const currentExamId = ref(null) +const currentDetailType = ref<'exam' | 'practice'>('exam') + +// 获取当前详情(考试或练习) +const currentExamDetail = computed(() => { + if (currentExamId.value) { + if (currentDetailType.value === 'exam') { + return mockExamDetails[currentExamId.value] + } else if (currentDetailType.value === 'practice') { + return mockPracticeDetails[currentExamId.value] + } + } + return null +}) + +// 关闭考试详情 +const closeExamDetail = () => { + showExamDetail.value = false + currentExamId.value = null + currentDetailType.value = 'exam' +} + +// 获取答题卡项目的样式类 +const getAnswerItemClass = (index: number) => { + // 模拟答题状态:前10题答对,第11-15题答错,其余未答 + if (index <= 10) { + return 'correct' + } else if (index <= 15) { + return 'wrong' + } else { + return 'unanswered' + } +} + // 查看作业详情 const viewAssignmentDetail = (assignment: Assignment) => { detailAssignment.value = assignment @@ -806,17 +1816,17 @@ const submitAssignment = () => { message.error('请输入标题') return } - + if (!uploadForm.content.trim()) { message.error('请输入内容') return } - + if (uploadForm.files.length === 0) { message.error('请上传至少一个文件') return } - + // 这里可以添加实际的提交逻辑 message.success('作业提交成功') closeUploadModal() @@ -1016,7 +2026,7 @@ onMounted(() => { gap: 2.81vw; /* 54px转换为vw:54/1920*100 = 2.81vw */ } -.text_12, .text_13, .text_14 { +.text_12, .text_13, .text_14, .text_15 { font-size: 0.94vw; /* 18px转换为vw */ color: rgba(102, 102, 102, 1); font-family: 'Microsoft YaHei', Arial, sans-serif; @@ -1027,11 +2037,11 @@ onMounted(() => { background: transparent; /* 确保背景透明 */ } -.text_12.active, .text_13.active, .text_14.active { +.text_12.active, .text_13.active, .text_14.active, .text_15.active { color: rgba(2, 134, 206, 1); /* 只改变字体颜色,去掉背景色 */ } -.text_12:hover, .text_13:hover, .text_14:hover { +.text_12:hover, .text_13:hover, .text_14:hover, .text_15:hover { color: rgba(2, 134, 206, 1); } @@ -1089,7 +2099,7 @@ onMounted(() => { /* 状态标签 */ .status-text { position: absolute; - top: 0.63vh; /* 12px转换为vh */ + top: 26vh; /* 12px转换为vh */ left: 0.63vw; /* 12px转换为vw */ padding: 0.21vh 0.63vw; /* 4px 12px转换 */ border-radius: 0.21vw; /* 4px转换为vw */ @@ -1644,22 +2654,22 @@ onMounted(() => { /* 上传作业按钮 - 未完成状态 */ .submit-button { - width: 102px; -height: 33px; -border: 1px solid #0288D1; + width: 102px; + height: 33px; + border: 1px solid #0288D1; } /* 查看情况按钮 - 未完成状态 */ .view-button { - width: 102px; -height: 33px; + width: 102px; + height: 33px; background-color: #0288D1 } /* 查看详情按钮 - 已完成状态 */ .details-button { - width: 102px; -height: 33px; + width: 102px; + height: 33px; background-color: #0288D1 } @@ -1695,6 +2705,173 @@ height: 33px; /* 蓝湖UI作业样式完成 */ +/* 考试页面样式 - 网格布局 */ +.exam-content { + width: 100%; +} + +.exam-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin-top: 20px; +} + +.exam-card { + background: #ffffff; + border: 1px solid #e8e8e8; + border-radius: 8px; + padding: 20px; + position: relative; + min-height: 280px; + display: flex; + flex-direction: column; + transition: all 0.3s ease; +} + +.exam-card:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + +.exam-title { + font-size: 16px; + font-weight: 600; + color: #333; + margin-bottom: 16px; + line-height: 1.4; +} + +.exam-score-badge { + position: absolute; + top: 15px; + right: 15px; + background: #fff2e8; + border: 1px solid #ffb366; + border-radius: 4px; + padding: 4px 8px; +} + +.score-text { + font-size: 14px; + font-weight: bold; + color: #ff8c00; +} + +.exam-details { + margin-bottom: 16px; +} + +.exam-meta-item { + display: flex; + margin-bottom: 8px; + font-size: 14px; +} + +.meta-label { + color: #666; + min-width: 70px; +} + +.meta-value { + color: #333; + font-weight: 500; +} + +.exam-description { + font-size: 13px; + color: #666; + line-height: 1.5; + margin-bottom: auto; + flex: 1; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +.exam-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; + padding-top: 16px; + border-top: 1px solid #f0f0f0; + flex-shrink: 0; +} + +.exam-status-left { + display: flex; + align-items: center; +} + +.exam-status-text { + font-size: 14px; + color: #666; +} + +.exam-action-right { + display: flex; +} + +.action-btn { + padding: 6px 16px; + border-radius: 4px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + border: none; + transition: all 0.3s ease; + min-width: 80px; +} + +.upcoming-btn { + background: #f5f5f5; + color: #999; + border: 1px solid #e8e8e8; +} + +.upcoming-btn:hover { + background: #e8e8e8; +} + +.ongoing-btn { + background: #1890ff; + color: white; +} + +.ongoing-btn:hover { + background: #40a9ff; +} + +.finished-btn { + background: #52c41a; + color: white; +} + +.finished-btn:hover { + background: #73d13d; +} + +/* 响应式设计 */ +@media (max-width: 1200px) { + .exam-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .exam-grid { + grid-template-columns: 1fr; + gap: 16px; + } + + .exam-card { + padding: 16px; + min-height: 240px; + } +} + /* 简化的作业卡片样式 */ .assignment-card-simple { width: 100%; @@ -2129,4 +3306,733 @@ height: 33px; color: #666; font-size: 14px; } + +/* 考试详情页面样式 */ +.exam-detail-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #f5f5f5; + z-index: 1000; + overflow-y: auto; +} + +.exam-detail-container { + max-width: 1200px; + margin: 0 auto; + background: white; + min-height: 100vh; +} + +.exam-detail-header { + background: white; + padding: 16px 24px; + border-bottom: 1px solid #e8e8e8; +} + +.breadcrumb { + font-size: 14px; + color: #666; +} + +.breadcrumb-link { + color: #1890ff; + cursor: pointer; + text-decoration: none; +} + +.breadcrumb-link:hover { + text-decoration: underline; +} + +.breadcrumb-separator { + margin: 0 8px; + color: #999; +} + +.breadcrumb-current { + color: #333; +} + +.exam-detail-content { + display: flex; + gap: 24px; + padding: 24px; +} + +.exam-questions-section { + flex: 1; + background: white; +} + +.exam-title-section { + margin-bottom: 24px; +} + +.exam-main-title { + font-size: 20px; + font-weight: 600; + color: #333; + margin: 0; +} + +.questions-container { + margin-bottom: 24px; +} + +.question-item { + background: white; + border: 1px solid #e8e8e8; + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; +} + +.question-header { + display: flex; + align-items: center; + margin-bottom: 16px; +} + +.question-number { + background: #1890ff; + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 14px; + font-weight: 500; + margin-right: 12px; +} + +.question-type { + color: #1890ff; + font-size: 14px; + font-weight: 500; + margin-right: 12px; +} + +.question-score { + color: #ff4d4f; + font-size: 14px; + margin-left: auto; +} + +.question-content { + font-size: 16px; + color: #333; + line-height: 1.6; + margin-bottom: 20px; +} + +.question-options { + margin-bottom: 20px; +} + +.option-item { + display: flex; + align-items: flex-start; + padding: 12px; + border: 1px solid #e8e8e8; + border-radius: 6px; + margin-bottom: 8px; + transition: all 0.3s ease; +} + +.option-item.option-selected { + background: #e6f7ff; + border-color: #1890ff; +} + +.option-item.option-correct { + background: #f6ffed; + border-color: #52c41a; +} + +.option-item.option-wrong { + background: #fff2f0; + border-color: #ff4d4f; +} + +.option-checkbox { + margin-right: 12px; + margin-top: 2px; +} + +.option-checkbox input[type="checkbox"] { + width: 16px; + height: 16px; +} + +.option-content { + flex: 1; +} + +.option-text { + font-size: 14px; + color: #333; + line-height: 1.5; +} + +.option-image { + margin-top: 8px; +} + +.option-image img { + max-width: 200px; + height: auto; + border: 1px solid #e8e8e8; + border-radius: 4px; +} + +.question-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 16px; + border-top: 1px solid #f0f0f0; +} + +.question-stats { + display: flex; + flex-direction: column; + gap: 4px; +} + +.correct-answer, .user-answer { + font-size: 14px; + color: #666; +} + +.question-result { + font-size: 20px; + font-weight: bold; +} + +.result-correct { + color: #52c41a; +} + +.result-wrong { + color: #ff4d4f; +} + +.question-analysis { + margin-top: 16px; + padding: 16px; + background: #fafafa; + border-radius: 6px; +} + +.analysis-title { + font-size: 14px; + font-weight: 500; + color: #333; + margin-bottom: 8px; +} + +.analysis-content { + font-size: 14px; + color: #666; + line-height: 1.6; +} + +.exam-submit-section { + margin-top: 24px; + text-align: center; +} + +.submit-btn { + background: #1890ff; + color: white; + border: none; + border-radius: 6px; + padding: 12px 24px; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + gap: 12px; + margin: 0 auto; + transition: background-color 0.3s ease; +} + +.submit-btn:hover { + background: #40a9ff; +} + +.submit-text { + font-weight: 500; +} + +.submit-stats { + font-size: 12px; + opacity: 0.8; +} + +.submit-score { + font-weight: bold; +} + +.exam-info-section { + width: 300px; + flex-shrink: 0; +} + +.score-circle-container { + text-align: center; + margin-bottom: 24px; +} + +.score-circle { + width: 120px; + height: 120px; + border-radius: 50%; + background: conic-gradient(#1890ff 0deg 352deg, #e8e8e8 352deg 360deg); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 12px; + position: relative; +} + +.score-inner { + width: 90px; + height: 90px; + border-radius: 50%; + background: white; + display: flex; + align-items: center; + justify-content: center; +} + +.score-number { + font-size: 32px; + font-weight: bold; + color: #333; +} + +.score-label { + font-size: 14px; + color: #666; +} + +.exam-stats { + background: white; + border: 1px solid #e8e8e8; + border-radius: 8px; + padding: 16px; + margin-bottom: 20px; +} + +.stat-item { + display: flex; + justify-content: space-between; + margin-bottom: 8px; + font-size: 14px; +} + +.stat-item:last-child { + margin-bottom: 0; +} + +.stat-label { + color: #666; +} + +.stat-value { + color: #333; + font-weight: 500; +} + +.answer-stats { + margin-bottom: 20px; +} + +.stats-row { + display: flex; + gap: 12px; +} + +.stat-box { + flex: 1; + text-align: center; + padding: 16px 8px; + border-radius: 6px; +} + +.stat-box.correct { + background: #f6ffed; + border: 1px solid #b7eb8f; +} + +.stat-box.wrong { + background: #fff2f0; + border: 1px solid #ffb3b3; +} + +.stat-box.total { + background: #e6f7ff; + border: 1px solid #91d5ff; +} + +.stat-number { + font-size: 24px; + font-weight: bold; + margin-bottom: 4px; +} + +.stat-box.correct .stat-number { + color: #52c41a; +} + +.stat-box.wrong .stat-number { + color: #ff4d4f; +} + +.stat-box.total .stat-number { + color: #1890ff; +} + +.stat-text { + font-size: 12px; + color: #666; +} + +.answer-card { + background: white; + border: 1px solid #e8e8e8; + border-radius: 8px; + padding: 16px; +} + +.card-title { + font-size: 16px; + font-weight: 500; + color: #333; + margin-bottom: 16px; +} + +.card-sections { + margin-bottom: 16px; +} + +.card-section { + margin-bottom: 20px; +} + +.card-section:last-child { + margin-bottom: 0; +} + +.section-title { + font-size: 14px; + color: #666; + margin-bottom: 8px; +} + +.answer-grid { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 8px; +} + +.answer-item { + width: 32px; + height: 32px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; +} + +.answer-item.correct { + background: #1890ff; + color: white; +} + +.answer-item.wrong { + background: #ff4d4f; + color: white; +} + +.answer-item.unanswered { + background: #f5f5f5; + color: #999; + border: 1px solid #e8e8e8; +} + +.answer-item:hover { + transform: scale(1.1); +} + +.card-legend { + display: flex; + align-items: center; + gap: 16px; + padding-top: 16px; + border-top: 1px solid #f0f0f0; +} + +.legend-item { + display: flex; + align-items: center; + gap: 6px; +} + +.legend-color { + width: 12px; + height: 12px; + border-radius: 2px; +} + +.legend-color.correct { + background: #1890ff; +} + +.legend-color.wrong { + background: #ff4d4f; +} + +.legend-text { + font-size: 12px; + color: #666; +} + +.legend-checkbox { + margin-left: auto; + display: flex; + align-items: center; + gap: 6px; +} + +.legend-checkbox input[type="checkbox"] { + width: 14px; + height: 14px; +} + +.legend-checkbox label { + font-size: 12px; + color: #666; + cursor: pointer; +} + +/* 响应式设计 */ +@media (max-width: 1024px) { + .exam-detail-content { + flex-direction: column; + } + + .exam-info-section { + width: 100%; + } + + .stats-row { + justify-content: center; + } + + .stat-box { + max-width: 120px; + } +} + +@media (max-width: 768px) { + .exam-detail-content { + padding: 16px; + } + + .question-item { + padding: 16px; + } + + .answer-grid { + grid-template-columns: repeat(4, 1fr); + } + + .score-circle { + width: 100px; + height: 100px; + } + + .score-inner { + width: 75px; + height: 75px; + } + + .score-number { + font-size: 24px; + } +} + +/* 练习页面样式 - 网格布局 */ +.practice-content { + width: 100%; +} + +.practice-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin-top: 20px; +} + +.practice-card { + background: #ffffff; + border: 1px solid #e8e8e8; + border-radius: 8px; + padding: 20px; + position: relative; + min-height: 280px; + display: flex; + flex-direction: column; + transition: all 0.3s ease; +} + +.practice-card:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + +.practice-title { + font-size: 16px; + font-weight: 600; + color: #333; + margin-bottom: 16px; + line-height: 1.4; +} + +.practice-score-badge { + position: absolute; + top: 15px; + right: 15px; + background: #fff2e8; + border: 1px solid #ffb366; + border-radius: 4px; + padding: 4px 8px; +} + +.practice-details { + margin-bottom: 16px; +} + +.practice-meta-item { + display: flex; + margin-bottom: 8px; + font-size: 14px; +} + +.practice-description { + font-size: 13px; + color: #666; + line-height: 1.5; + margin-bottom: 16px; + flex: 1; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +.practice-stats { + display: flex; + gap: 16px; + margin-bottom: 16px; + padding: 12px; + background: #f8f9fa; + border-radius: 6px; +} + +.stats-item { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; +} + +.stats-item.correct .stats-number { + color: #1890ff; +} + +.stats-item.wrong .stats-number { + color: #ff4d4f; +} + +.stats-label { + font-size: 12px; + color: #666; + margin-bottom: 4px; +} + +.stats-number { + font-size: 14px; + font-weight: 600; +} + +.practice-intro { + padding: 12px; + background: #f8f9fa; + border-radius: 6px; + margin-bottom: 16px; +} + +.intro-title { + font-size: 14px; + font-weight: 600; + color: #333; + margin-bottom: 8px; +} + +.intro-content { + font-size: 13px; + color: #666; + line-height: 1.5; +} + +.practice-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; + padding-top: 16px; + border-top: 1px solid #f0f0f0; + flex-shrink: 0; +} + +.practice-status-left { + display: flex; + align-items: center; +} + +.practice-status-text { + font-size: 14px; + color: #666; +} + +.practice-action-right { + display: flex; +} + +/* 响应式设计 */ +@media (max-width: 1200px) { + .practice-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .practice-grid { + grid-template-columns: 1fr; + gap: 16px; + } + + .practice-card { + padding: 16px; + min-height: 240px; + } +} \ No newline at end of file