hookehuyr

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

添加教师端作业管理页面,包含作业列表展示功能(名称、开始/截止时间)
更新路由配置和守卫逻辑以支持新页面
修改打卡页作业ID获取逻辑,优先从路由参数读取
更新README文档记录功能变更
...@@ -2,3 +2,8 @@ ...@@ -2,3 +2,8 @@
2 2
3 测试环境网站 3 测试环境网站
4 https://oa-dev.onwall.cn/f/mlaj 4 https://oa-dev.onwall.cn/f/mlaj
5 +
6 + 功能更新记录
7 + - 教师端新增作业管理页面:路径 `/teacher/tasks`,标题“作业管理”。
8 + - 列表展示:作业名称、开始时间、截止时间。
9 + - 当前数据来源为Mock,后续可替换为真实接口数据。
......
1 /* 1 /*
2 * @Date: 2025-03-20 20:36:36 2 * @Date: 2025-03-20 20:36:36
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-11-17 14:15:18 4 + * @LastEditTime: 2025-11-19 20:37:35
5 * @FilePath: /mlaj/src/router/guards.js 5 * @FilePath: /mlaj/src/router/guards.js
6 * @Description: 路由守卫逻辑 6 * @Description: 路由守卫逻辑
7 */ 7 */
...@@ -26,6 +26,10 @@ export const authRequiredRoutes = [ ...@@ -26,6 +26,10 @@ export const authRequiredRoutes = [
26 path: '/checkin', 26 path: '/checkin',
27 exact: false, 27 exact: false,
28 }, 28 },
29 + {
30 + path: '/teacher',
31 + exact: false,
32 + },
29 ] 33 ]
30 34
31 // TAG: 微信授权检查 35 // TAG: 微信授权检查
......
...@@ -34,6 +34,15 @@ export default [ ...@@ -34,6 +34,15 @@ export default [
34 }, 34 },
35 }, 35 },
36 { 36 {
37 + path: '/teacher/tasks',
38 + name: 'TeacherTasks',
39 + component: () => import('../views/teacher/taskManagePage.vue'),
40 + meta: {
41 + title: '作业管理',
42 + requiresAuth: true
43 + },
44 + },
45 + {
37 path: '/teacher/student/:id', 46 path: '/teacher/student/:id',
38 name: 'Student', 47 name: 'Student',
39 component: () => import('../views/teacher/studentPage.vue'), 48 component: () => import('../views/teacher/studentPage.vue'),
......
...@@ -115,8 +115,8 @@ const mock_task_info = ref({ ...@@ -115,8 +115,8 @@ const mock_task_info = ref({
115 join_deadline_desc: '2025-11-20 23:59', 115 join_deadline_desc: '2025-11-20 23:59',
116 }) 116 })
117 117
118 -// 目标打卡页作业ID(无真实数据前默认写死 118 +// 目标打卡页作业ID(无真实数据前默认写死
119 -const target_checkin_id = ref('833668') 119 +const target_checkin_id = ref($route.query.id || '833668')
120 120
121 /** 121 /**
122 * 载入页面Mock数据 122 * 载入页面Mock数据
......
1 +<!--
2 + * @Date: 2025-11-19 10:18:00
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-11-19 20:25:40
5 + * @FilePath: /mlaj/src/views/teacher/taskManagePage.vue
6 + * @Description: 教师端作业管理页面(列表展示作业名称与开始/截止时间,数据先Mock)
7 +-->
8 +<template>
9 + <div class="TaskManagePage">
10 + <!-- 页面头部 -->
11 + <!-- <div class="pageHeader bg-white rounded-lg shadow px-4 py-3">
12 + <div class="flex items-center justify-between">
13 + <div class="title text-base font-semibold text-gray-800">作业管理</div>
14 + </div>
15 + </div> -->
16 +
17 + <!-- 作业列表 -->
18 + <div class="listWrapper mt-4">
19 + <div v-for="task in task_list" :key="task.id" class="taskItem bg-white rounded-lg shadow px-4 py-3 mb-3">
20 + <div class="flex items-center justify-between">
21 + <!-- 左侧图标:垂直居中,占用较小空间 -->
22 + <div class="iconWrapper flex items-center justify-center w-8 mr-3 text-gray-500">
23 + <van-icon name="notes-o" size="1.2rem" />
24 + </div>
25 + <!-- 中间内容:占据剩余空间 -->
26 + <div class="left flex-1">
27 + <div class="taskTitle text-sm font-semibold text-gray-800">{{ task.title }}</div>
28 + <div class="taskDates text-xs text-gray-600 mt-1">{{ format_date_range(task.begin_date, task.end_date) }}</div>
29 + </div>
30 + <!-- 右侧按钮:占用较小空间,右对齐 -->
31 + <div class="right flex items-center justify-end w-20 ml-3">
32 + <van-button type="primary" size="small" round class="w-full">查看</van-button>
33 + </div>
34 + </div>
35 + </div>
36 + </div>
37 + </div>
38 +
39 + <!--
40 + 页面说明:
41 + - 列表项显示作业名称与开始/截止时间,样式参考项目统一风格(白卡片+阴影+圆角)。
42 + - 数据暂用Mock,后续可替换为真实API。
43 + -->
44 +</template>
45 +
46 +<script setup>
47 +import { ref } from 'vue'
48 +import { useRoute } from 'vue-router'
49 +import { useTitle } from '@vueuse/core'
50 +
51 +const $route = useRoute()
52 +useTitle($route.meta.title)
53 +
54 +//
55 +// Mock数据:作业列表
56 +//
57 +const task_list = ref([
58 + { id: '101', title: '英语口语练习', begin_date: '2025-11-01', end_date: '2025-11-30' },
59 + { id: '102', title: '语文古诗背诵', begin_date: '2025-11-05', end_date: '2025-11-25' },
60 + { id: '103', title: '数学口算巩固', begin_date: '2025-11-10', end_date: '2025-12-10' }
61 +])
62 +
63 +/**
64 + * 格式化日期范围
65 + * @param {string} begin_date - 开始时间
66 + * @param {string} end_date - 截止时间
67 + * @returns {string} 格式化后的日期范围文案
68 + * 注释:按“开始时间 至 截止时间”展示,字段为空时返回“-”。
69 + */
70 +const format_date_range = (begin_date, end_date) => {
71 + const start = begin_date || '-'
72 + const end = end_date || '-'
73 + return `${start} 至 ${end}`
74 +}
75 +</script>
76 +
77 +<style lang="less" scoped>
78 +.TaskManagePage {
79 + min-height: 100vh;
80 + background: linear-gradient(to bottom right, #f0fdf4, #f0fdfa, #eff6ff);
81 + padding: 1rem;
82 + padding-bottom: 6rem;
83 +
84 + .pageHeader {
85 + .title {
86 + color: #4caf50;
87 + line-height: 1.4;
88 + }
89 + }
90 +
91 + .listWrapper {
92 + .taskItem {
93 + .taskTitle {
94 + line-height: 1.5;
95 + }
96 +
97 + .taskDates {
98 + color: #6b7280;
99 + }
100 + }
101 + }
102 +}
103 +</style>