Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0dbb9680 1 parent 77a4ed8f

feat(teacher): 新增教师端作业管理页面及路由配置 

添加教师端作业管理页面，包含作业列表展示功能（名称、开始/截止时间）
更新路由配置和守卫逻辑以支持新页面
修改打卡页作业ID获取逻辑，优先从路由参数读取
更新README文档记录功能变更
Inline Side-by-side
Showing 5 changed files with 124 additions and 3 deletions
......@@ -2,3 +2,8 @@
测试环境网站
https://oa-dev.onwall.cn/f/mlaj
功能更新记录
- 教师端新增作业管理页面：路径 `/teacher/tasks`，标题“作业管理”。
- 列表展示：作业名称、开始时间、截止时间。
- 当前数据来源为Mock，后续可替换为真实接口数据。
......
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-17 14:15:18
* @LastEditTime: 2025-11-19 20:37:35
* @FilePath: /mlaj/src/router/guards.js
* @Description: 路由守卫逻辑
*/
......@@ -26,6 +26,10 @@ export const authRequiredRoutes = [
path: '/checkin',
exact: false,
},
{
path: '/teacher',
exact: false,
},
]
// TAG: 微信授权检查
......
......@@ -34,6 +34,15 @@ export default [
},
},
{
path: '/teacher/tasks',
name: 'TeacherTasks',
component: () => import('../views/teacher/taskManagePage.vue'),
meta: {
title: '作业管理',
requiresAuth: true
},
},
{
path: '/teacher/student/:id',
name: 'Student',
component: () => import('../views/teacher/studentPage.vue'),
......
......@@ -115,8 +115,8 @@ const mock_task_info = ref({
join_deadline_desc: '2025-11-20 23:59',
})
// 目标打卡页作业ID（无真实数据前默认写死）
const target_checkin_id = ref('833668')
// 目标打卡页作业ID（无真实数据前默认写死
const target_checkin_id = ref($route.query.id || '833668')
/**
* 载入页面Mock数据
......
<!--
* @Date: 2025-11-19 10:18:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-19 20:25:40
* @FilePath: /mlaj/src/views/teacher/taskManagePage.vue
* @Description: 教师端作业管理页面（列表展示作业名称与开始/截止时间，数据先Mock）
-->
<template>
<div class="TaskManagePage">
<!-- 页面头部 -->
<!-- <div class="pageHeader bg-white rounded-lg shadow px-4 py-3">
<div class="flex items-center justify-between">
<div class="title text-base font-semibold text-gray-800">作业管理</div>
</div>
</div> -->
<!-- 作业列表 -->
<div class="listWrapper mt-4">
<div v-for="task in task_list" :key="task.id" class="taskItem bg-white rounded-lg shadow px-4 py-3 mb-3">
<div class="flex items-center justify-between">
<!-- 左侧图标：垂直居中，占用较小空间 -->
<div class="iconWrapper flex items-center justify-center w-8 mr-3 text-gray-500">
<van-icon name="notes-o" size="1.2rem" />
</div>
<!-- 中间内容：占据剩余空间 -->
<div class="left flex-1">
<div class="taskTitle text-sm font-semibold text-gray-800">{{ task.title }}</div>
<div class="taskDates text-xs text-gray-600 mt-1">{{ format_date_range(task.begin_date, task.end_date) }}</div>
</div>
<!-- 右侧按钮：占用较小空间，右对齐 -->
<div class="right flex items-center justify-end w-20 ml-3">
<van-button type="primary" size="small" round class="w-full">查看</van-button>
</div>
</div>
</div>
</div>
</div>
<!--
页面说明：
- 列表项显示作业名称与开始/截止时间，样式参考项目统一风格（白卡片+阴影+圆角）。
- 数据暂用Mock，后续可替换为真实API。
-->
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useTitle } from '@vueuse/core'
const $route = useRoute()
useTitle($route.meta.title)
//
// Mock数据：作业列表
//
const task_list = ref([
{ id: '101', title: '英语口语练习', begin_date: '2025-11-01', end_date: '2025-11-30' },
{ id: '102', title: '语文古诗背诵', begin_date: '2025-11-05', end_date: '2025-11-25' },
{ id: '103', title: '数学口算巩固', begin_date: '2025-11-10', end_date: '2025-12-10' }
])
/**
* 格式化日期范围
* @param {string} begin_date - 开始时间
* @param {string} end_date - 截止时间
* @returns {string} 格式化后的日期范围文案
* 注释：按“开始时间 至 截止时间”展示，字段为空时返回“-”。
*/
const format_date_range = (begin_date, end_date) => {
const start = begin_date || '-'
const end = end_date || '-'
return `${start} 至 ${end}`
}
</script>
<style lang="less" scoped>
.TaskManagePage {
min-height: 100vh;
background: linear-gradient(to bottom right, #f0fdf4, #f0fdfa, #eff6ff);
padding: 1rem;
padding-bottom: 6rem;
.pageHeader {
.title {
color: #4caf50;
line-height: 1.4;
}
}
.listWrapper {
.taskItem {
.taskTitle {
line-height: 1.5;
}
.taskDates {
color: #6b7280;
}
}
}
}
</style>