hookehuyr

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

为日历组件添加日期格式化函数,标记今天和昨天的日期样式
调整日历弹窗高度为60%以改善用户体验
1 <!-- 1 <!--
2 * @Date: 2025-11-19 21:00:00 2 * @Date: 2025-11-19 21:00:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-12-02 21:30:35 4 + * @LastEditTime: 2025-12-02 22:05:04
5 * @FilePath: /mlaj/src/views/teacher/taskHomePage.vue 5 * @FilePath: /mlaj/src/views/teacher/taskHomePage.vue
6 * @Description: 教师端作业主页(头部介绍、统计、日历与学生完成情况;数据Mock) 6 * @Description: 教师端作业主页(头部介绍、统计、日历与学生完成情况;数据Mock)
7 --> 7 -->
...@@ -77,8 +77,10 @@ ...@@ -77,8 +77,10 @@
77 <!-- 选中日期展示 --> 77 <!-- 选中日期展示 -->
78 <!-- <div class="mt-3 text-sm text-gray-600">当前选择:{{ current_date_text }}</div> --> 78 <!-- <div class="mt-3 text-sm text-gray-600">当前选择:{{ current_date_text }}</div> -->
79 <!-- 日历弹窗:点击“某个日期”弹出 --> 79 <!-- 日历弹窗:点击“某个日期”弹出 -->
80 - <van-calendar v-model:show="show_calendar_popup" :default-date="calendar_default_date" color="#10b981" 80 + <van-config-provider :theme-vars="themeVars">
81 - :show-confirm="true" switch-mode="month" @confirm="on_date_select" /> 81 + <van-calendar v-model:show="show_calendar_popup" :default-date="calendar_default_date" color="#10b981"
82 + :show-confirm="true" switch-mode="month" :formatter="formatter" @confirm="on_date_select" />
83 + </van-config-provider>
82 </div> 84 </div>
83 85
84 <!-- 学生完成情况(参考图片2样式) --> 86 <!-- 学生完成情况(参考图片2样式) -->
...@@ -114,6 +116,10 @@ const $route = useRoute() ...@@ -114,6 +116,10 @@ const $route = useRoute()
114 const $router = useRouter() 116 const $router = useRouter()
115 useTitle('作业主页') 117 useTitle('作业主页')
116 118
119 +const themeVars = {
120 + calendarPopupHeight: '60%',
121 +}
122 +
117 // 弹窗显示状态:是否展示“某个日期”选择日历 123 // 弹窗显示状态:是否展示“某个日期”选择日历
118 const show_calendar_popup = ref(false) 124 const show_calendar_popup = ref(false)
119 // Calendar 默认选中日期(为 null 时不预选) 125 // Calendar 默认选中日期(为 null 时不预选)
...@@ -150,6 +156,31 @@ function select_yesterday() { ...@@ -150,6 +156,31 @@ function select_yesterday() {
150 } 156 }
151 157
152 /** 158 /**
159 + * 日历日期格式化函数
160 + * @param {Object} day - 日历天对象
161 + * @returns {Object} 处理后的日历天对象
162 + */
163 +const formatter = (day) => {
164 + const dateStr = format_date(day.date)
165 + const today = new Date()
166 + const todayStr = format_date(today)
167 +
168 + const yesterday = new Date(today)
169 + yesterday.setDate(today.getDate() - 1)
170 + const yesterdayStr = format_date(yesterday)
171 +
172 + if (dateStr === todayStr) {
173 + day.className = 'calendar-today';
174 + day.bottomInfo = '今天'
175 + } else if (dateStr === yesterdayStr) {
176 + day.className = 'calendar-yesterday';
177 + day.bottomInfo = '昨天'
178 + }
179 +
180 + return day
181 +}
182 +
183 +/**
153 * 打开“某个日期”选择器弹窗 184 * 打开“某个日期”选择器弹窗
154 * @returns {void} 185 * @returns {void}
155 */ 186 */
......