hookehuyr

feat(教师端): 新增学员作业记录页面及跳转功能

- 添加学员作业记录页面路由及视图组件
- 在作业主页学生卡片添加点击跳转功能
- 实现作业记录列表展示、媒体播放及点评功能
- 更新README文档说明新增功能
......@@ -12,3 +12,7 @@ https://oa-dev.onwall.cn/f/mlaj
- 统计:出勤率与任务完成率(参考 `myClassPage.vue` 统计样式,数据Mock)。
- 日历:使用 `van-calendar` 单选模式,选择日期后展示当日学生完成情况。
- 学生完成情况:参考图片2样式,勾选代表已完成,未勾选代表未完成(数据Mock)。
- 教师端新增学员作业记录页面:路径 `/teacher/student-record`,标题“学员作业记录”。
- 在作业主页的学生列表点击卡片可跳转至该页面(当前版本为固定示例页面)。
- 列表展示:作业帖子、图片/视频/音频、点赞与点评弹窗(与 `studentPage.vue` 的作业记录样式一致)。
- 接口参数固定:`user_id=817017``group_id=816653`(后续可替换为动态参数)。
......
......@@ -60,4 +60,13 @@ export default [
requiresAuth: true
},
},
{
path: '/teacher/student-record',
name: 'StudentRecord',
component: () => import('../views/teacher/studentRecordPage.vue'),
meta: {
title: '学员作业记录',
requiresAuth: true
},
},
]
......
This diff is collapsed. Click to expand it.
<!--
* @Date: 2025-11-19 21:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-19 21:43:15
* @LastEditTime: 2025-11-19 22:10:07
* @FilePath: /mlaj/src/views/teacher/taskHomePage.vue
* @Description: 教师端作业主页(头部介绍、统计、日历与学生完成情况;数据Mock)
-->
......@@ -66,7 +66,8 @@
<div class="grid grid-cols-5 gap-3 StudentsGrid">
<div v-for="(stu, idx) in students_status" :key="stu.id"
class="studentItem relative rounded-md h-16 flex flex-col items-center justify-center text-center border overflow-hidden"
:class="stu.completed ? 'bg-white border-green-500 text-green-600' : 'bg-gray-100 border-gray-300 text-gray-500'">
:class="stu.completed ? 'bg-white border-green-500 text-green-600' : 'bg-gray-100 border-gray-300 text-gray-500'"
@click="go_student_record(stu)">
<div class="text-sm font-semibold">{{ idx + 1 }}</div>
<div class="text-sm mt-1">{{ stu.name }}</div>
<img v-if="stu.completed" :src="checkCorner" alt="checked" class="cornerIcon" />
......@@ -78,12 +79,13 @@
<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useRoute, useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import TaskCalendar from '@/components/ui/TaskCalendar.vue'
import checkCorner from '@/assets/check_corner.svg'
const $route = useRoute()
const $router = useRouter()
useTitle('作业主页')
//
......@@ -193,6 +195,16 @@ const completed_count = computed(() => students_status.value.filter(s => s.compl
* @returns {string} 文本
*/
const current_date_text = computed(() => selected_date.value)
/**
* 跳转至学员作业记录页面(固定ID的示例页面)
* @param {{id:string,name:string,completed:boolean}} stu - 学员对象
* @returns {void}
*/
function go_student_record(stu) {
// 跳转到固定ID的作业记录页面,当前版本不使用传入ID
$router.push({ name: 'StudentRecord' })
}
</script>
<style lang="less" scoped>
......