hookehuyr

feat(teacher/taskHomePage): 添加日历日期格式化功能并调整弹窗高度

为日历组件添加日期格式化函数,标记今天和昨天的日期样式
调整日历弹窗高度为60%以改善用户体验
<!--
* @Date: 2025-11-19 21:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-02 21:30:35
* @LastEditTime: 2025-12-02 22:05:04
* @FilePath: /mlaj/src/views/teacher/taskHomePage.vue
* @Description: 教师端作业主页(头部介绍、统计、日历与学生完成情况;数据Mock)
-->
......@@ -77,8 +77,10 @@
<!-- 选中日期展示 -->
<!-- <div class="mt-3 text-sm text-gray-600">当前选择:{{ current_date_text }}</div> -->
<!-- 日历弹窗:点击“某个日期”弹出 -->
<van-calendar v-model:show="show_calendar_popup" :default-date="calendar_default_date" color="#10b981"
:show-confirm="true" switch-mode="month" @confirm="on_date_select" />
<van-config-provider :theme-vars="themeVars">
<van-calendar v-model:show="show_calendar_popup" :default-date="calendar_default_date" color="#10b981"
:show-confirm="true" switch-mode="month" :formatter="formatter" @confirm="on_date_select" />
</van-config-provider>
</div>
<!-- 学生完成情况(参考图片2样式) -->
......@@ -114,6 +116,10 @@ const $route = useRoute()
const $router = useRouter()
useTitle('作业主页')
const themeVars = {
calendarPopupHeight: '60%',
}
// 弹窗显示状态:是否展示“某个日期”选择日历
const show_calendar_popup = ref(false)
// Calendar 默认选中日期(为 null 时不预选)
......@@ -150,6 +156,31 @@ function select_yesterday() {
}
/**
* 日历日期格式化函数
* @param {Object} day - 日历天对象
* @returns {Object} 处理后的日历天对象
*/
const formatter = (day) => {
const dateStr = format_date(day.date)
const today = new Date()
const todayStr = format_date(today)
const yesterday = new Date(today)
yesterday.setDate(today.getDate() - 1)
const yesterdayStr = format_date(yesterday)
if (dateStr === todayStr) {
day.className = 'calendar-today';
day.bottomInfo = '今天'
} else if (dateStr === yesterdayStr) {
day.className = 'calendar-yesterday';
day.bottomInfo = '昨天'
}
return day
}
/**
* 打开“某个日期”选择器弹窗
* @returns {void}
*/
......