hookehuyr

refactor(teacher/taskHomePage): 重构作业切换区域的UI样式和布局

将作业切换区域从简单的文本按钮改为包含当前作业名称和切换图标的卡片样式,提升用户体验和视觉一致性
<!--
* @Date: 2025-11-19 21:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-15 13:21:41
* @LastEditTime: 2025-12-15 18:18:51
* @FilePath: /mlaj/src/views/teacher/taskHomePage.vue
* @Description: 教师端作业主页(头部介绍、统计、日历与学生完成情况)
-->
......@@ -9,15 +9,22 @@
<div class="TaskHomePage">
<!-- 头部卡片:名称、介绍、细项 -->
<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>
<div v-if="subtask_list.length > 0"
class="text-sm text-green-600 border border-green-600 rounded px-2 py-1 cursor-pointer whitespace-nowrap ml-2"
@click="show_subtask_picker = true">
{{ '切换作业' }}
<div class="title text-2xl font-bold text-gray-900 mb-3">{{ task_title }}</div>
<!-- 作业切换区域 -->
<div v-if="subtask_list.length > 0"
class="flex items-center justify-between bg-green-50 rounded-lg p-3 mb-4 cursor-pointer active:bg-green-100 border border-green-100"
@click="show_subtask_picker = true">
<div class="flex items-center overflow-hidden">
<span class="text-xs text-green-600 mr-2 flex-shrink-0 bg-white px-1.5 py-0.5 rounded border border-green-200">当前</span>
<span class="text-sm font-bold text-gray-800 truncate">{{ current_subtask_name }}</span>
</div>
<div class="flex items-center text-green-600 flex-shrink-0 ml-2">
<span class="text-xs mr-1 font-medium">切换作业</span>
<van-icon name="exchange" size="14" />
</div>
</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>
<div class="details text-sm text-gray-600" v-if="!subtask_list.length || selectedSubtaskId">
<div class="detailItem">周期:{{ task_details.cycle }}</div>
......