Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d223b541 1 parent f755c92e

refactor(teacher): 清理无用代码并优化日期处理函数 

移除任务图片相关的mock数据和注释
将函数声明改为箭头函数保持风格一致
提取日期格式化工具函数到文件顶部
简化描述性注释，保持代码简洁
Inline Side-by-side
Showing 1 changed file with 38 additions and 61 deletions
<!--
* @Date: 2025-11-19 21:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-13 21:24:23
* @LastEditTime: 2025-12-13 22:36:05
* @FilePath: /mlaj/src/views/teacher/taskHomePage.vue
* @Description: 教师端作业主页（头部介绍、统计、日历与学生完成情况；数据Mock）
* @Description: 教师端作业主页（头部介绍、统计、日历与学生完成情况）
-->
<template>
<div class="TaskHomePage">
<!-- 头部卡片：名称、介绍、细项（参考图片1结构） -->
<!-- 头部卡片：名称、介绍、细项 -->
<div class="headCard bg-white rounded-lg shadow px-4 py-4">
<div class="flex justify-between items-start mb-2">
<div class="title text-2xl font-bold text-gray-900 mr-2">{{ task_title }}</div>
......@@ -19,11 +19,6 @@
</div>
<div class="text-sm font-bold text-gray-700">{{ current_subtask_name }}</div>
<div class="intro text-base text-gray-700 leading-relaxed mb-3" v-html="task_intro"></div>
<!-- 三图展示（可选），使用CDN示例地址并加压缩参数 -->
<!-- <div class="images grid grid-cols-3 gap-3 mb-3">
<img v-for="(img, idx) in task_images" :key="idx" :src="img"
class="rounded-md object-cover w-full h-24" />
</div> -->
<div class="details text-sm text-gray-600" v-if="!subtask_list.length || selectedSubtaskId">
<div class="detailItem">周期：{{ task_details.cycle }}</div>
<div class="detailItem">频次：{{ task_details.frequency }}</div>
......@@ -35,7 +30,7 @@
</div>
</div>
<!-- 统计数据（参考 myClassPage.vue 出勤率/任务完成） -->
<!-- 统计数据 -->
<div class="statsCard bg-white rounded-lg shadow px-4 py-4 mt-4">
<van-row gutter="16">
<!-- 出勤率 -->
......@@ -100,7 +95,7 @@
show-toolbar title="选择作业" />
</van-popup>
<!-- 学生完成情况（参考图片2样式） -->
<!-- 学生完成情况 -->
<div class="studentsCard bg-white rounded-lg shadow px-4 py-4 mt-4">
<div class="flex items-center justify-between mb-3">
<div class="text-base font-semibold text-gray-800">完成情况（{{ completed_count }}/{{ user_list.length }}）
......@@ -150,10 +145,36 @@ const selected_mode = ref('today')
const specific_label = ref('特定日期')
/**
* 将日期对象格式化为 YYYY-MM-DD
* @param {Date} d - 日期对象
* @returns {string} 格式化后的日期字符串
* 注释：补零并返回标准格式，便于与完成记录匹配。
*/
const format_date = (d) => {
const y = d.getFullYear()
const m = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${y}-${m}-${day}`
}
/**
* 字符串转日期对象（YYYY-MM-DD -> Date）
* @param {string} s - 日期字符串
* @returns {Date} 日期对象
*/
const parse_date_text = (s) => {
const parts = String(s).split('-')
const y = Number(parts[0]) || new Date().getFullYear()
const m = Number(parts[1]) || (new Date().getMonth() + 1)
const d = Number(parts[2]) || new Date().getDate()
return new Date(y, m - 1, d)
}
/**
* 选择“今日”，设置为今日日期，并触发查询逻辑
* @returns {void}
*/
function select_today() {
const select_today = () => {
const now = new Date()
selected_date.value = format_date(now)
selected_mode.value = 'today'
......@@ -166,7 +187,7 @@ function select_today() {
* 选择“昨日”，设置为昨日日期，并触发查询逻辑
* @returns {void}
*/
function select_yesterday() {
const select_yesterday = () => {
const y = new Date(Date.now() - 24 * 60 * 60 * 1000)
selected_date.value = format_date(y)
selected_mode.value = 'yesterday'
......@@ -224,22 +245,14 @@ const formatter = (day) => {
* 打开“某个日期”选择器弹窗
* @returns {void}
*/
function open_specific_date_picker() {
const open_specific_date_picker = () => {
show_calendar_popup.value = true
}
//
// API 数据状态
//
const task_id = $route.params.id
const task_title = ref('')
const task_intro = ref('')
// 图片暂时保留 Mock 或从 API 扩展字段获取（当前 API 未返回图片列表，暂时保留为空或 Mock）
const task_images = ref([
'https://cdn.ipadbiz.cn/mlaj/demo-task-1.png?imageMogr2/thumbnail/200x/strip/quality/70',
'https://cdn.ipadbiz.cn/mlaj/demo-task-2.png?imageMogr2/thumbnail/200x/strip/quality/70',
'https://cdn.ipadbiz.cn/mlaj/demo-task-3.png?imageMogr2/thumbnail/200x/strip/quality/70'
])
const task_details = ref({
cycle: '',
frequency: '',
......@@ -247,17 +260,13 @@ const task_details = ref({
attachment_type: ''
})
//
// 统计数据
//
const checkin_count = ref(0)
const upload_count = ref(0)
const checkin_text = computed(() => `${checkin_count.value}%`)
const upload_text = computed(() => `${upload_count.value}%`)
//
// 学生与完成记录
//
const today = new Date()
const selected_date = ref(format_date(today))
const user_list = ref([])
......@@ -288,7 +297,7 @@ const on_confirm_subtask = ({ selectedOptions }) => {
/**
* 获取作业详情和学生完成情况
*/
async function fetchData() {
const fetchData = async () => {
try {
const res = await getTeacherTaskDetailAPI({
id: task_id,
......@@ -377,43 +386,11 @@ onMounted(() => {
})
/**
* 将日期对象格式化为 YYYY-MM-DD
* @param {Date} d - 日期对象
* @returns {string} 格式化后的日期字符串
* 注释：补零并返回标准格式，便于与完成记录匹配。
*/
function format_date(d) {
const y = d.getFullYear()
const m = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${y}-${m}-${day}`
}
/**
* 处理日历选择事件
* @param {any} date - 选中的日期对象
* @returns {void}
* 注释：更新选中日期，并联动学生完成情况。
*/
/**
* 字符串转日期对象（YYYY-MM-DD -> Date）
* @param {string} s - 日期字符串
* @returns {Date} 日期对象
*/
function parse_date_text(s) {
const parts = String(s).split('-')
const y = Number(parts[0]) || new Date().getFullYear()
const m = Number(parts[1]) || (new Date().getMonth() + 1)
const d = Number(parts[2]) || new Date().getDate()
return new Date(y, m - 1, d)
}
/**
* 处理日历选择事件（兼容字符串与Date对象）
* @param {string|Date} val - 选中的日期
* @returns {void}
*/
function on_date_select(val) {
const on_date_select = (val) => {
const is_date_obj = val instanceof Date
const text = is_date_obj ? format_date(val) : String(val)
selected_date.value = text
......@@ -456,11 +433,11 @@ const completed_count = computed(() => students_status.value.filter(s => s.compl
const current_date_text = computed(() => selected_date.value)
/**
* 跳转至学员作业记录页面（固定ID的示例页面）
* 跳转至学员作业记录页面
* @param {{id:string,name:string,completed:boolean}} stu - 学员对象
* @returns {void}
*/
function go_student_record(stu) {
const go_student_record = (stu) => {
if (task_type.value === 'checkin') {
return
}
......