hookehuyr

feat(日历组件): 添加课程筛选状态持久化功能

在可折叠日历组件中增加 sessionStorage 存储功能,用于保存用户选择的课程筛选状态
添加状态恢复逻辑和列表变化监听,确保筛选状态与数据同步
1 <!-- 1 <!--
2 * @Date: 2025-01-25 15:34:17 2 * @Date: 2025-01-25 15:34:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-12-18 22:33:09 4 + * @LastEditTime: 2025-12-18 23:23:57
5 * @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue 5 * @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue
6 * @Description: 可折叠日历组件 6 * @Description: 可折叠日历组件
7 --> 7 -->
...@@ -156,6 +156,27 @@ const selectedCourseText = ref('全部作业') ...@@ -156,6 +156,27 @@ const selectedCourseText = ref('全部作业')
156 const selectedCourseId = ref('') 156 const selectedCourseId = ref('')
157 const showRulesPopup = ref(false) 157 const showRulesPopup = ref(false)
158 158
159 +// 存储键名
160 +const STORAGE_KEY = 'collapsible_calendar_filter_state'
161 +// 是否已恢复状态
162 +const isRestored = ref(false)
163 +
164 +// 尝试从 sessionStorage 恢复状态
165 +try {
166 + const savedState = sessionStorage.getItem(STORAGE_KEY)
167 + if (savedState) {
168 + const { selectedCourseId: savedId, selectedCourseText: savedText } = JSON.parse(savedState)
169 + // 只有当保存的值存在时才恢复 (savedId 可以是空字符串,表示全部作业)
170 + if (savedId !== undefined) {
171 + selectedCourseId.value = savedId
172 + selectedCourseText.value = savedText || '全部作业'
173 + isRestored.value = true
174 + }
175 + }
176 +} catch (e) {
177 + console.error('Failed to restore calendar filter', e)
178 +}
179 +
159 const { y } = useScroll(window) 180 const { y } = useScroll(window)
160 const isHeaderHidden = ref(false) 181 const isHeaderHidden = ref(false)
161 const lastY = ref(0) 182 const lastY = ref(0)
...@@ -258,8 +279,36 @@ const onConfirmCourse = (result) => { ...@@ -258,8 +279,36 @@ const onConfirmCourse = (result) => {
258 selectedCourseId.value = option.value 279 selectedCourseId.value = option.value
259 showCoursePicker.value = false 280 showCoursePicker.value = false
260 emit('select-course', option.value) 281 emit('select-course', option.value)
282 +
283 + // 保存状态
284 + sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
285 + selectedCourseId: selectedCourseId.value,
286 + selectedCourseText: selectedCourseText.value
287 + }))
261 } 288 }
262 289
290 +// 监听 subtaskList 变化,用于在恢复状态后同步筛选
291 +watch(() => props.subtaskList, (newList) => {
292 + if (newList && newList.length > 0 && isRestored.value) {
293 + // 尝试在列表中找到对应的项,更新文本
294 + const target = newList.find(item => item.id === selectedCourseId.value)
295 +
296 + if (target) {
297 + selectedCourseText.value = target.title
298 + } else if (selectedCourseId.value) {
299 + // 如果有ID但在列表中找不到(可能是作业被删除),则重置为全部
300 + selectedCourseId.value = ''
301 + selectedCourseText.value = '全部作业'
302 + }
303 +
304 + // 通知父组件筛选变更,确保数据与筛选状态一致
305 + emit('select-course', selectedCourseId.value)
306 +
307 + // 重置标记,确保只执行一次
308 + isRestored.value = false
309 + }
310 +}, { immediate: true })
311 +
263 // 计算属性:格式化当前日期显示 312 // 计算属性:格式化当前日期显示
264 const formattedCurrentDate = computed(() => { 313 const formattedCurrentDate = computed(() => {
265 return dayjs(currentDate.value).format('YYYY年MM月DD日') 314 return dayjs(currentDate.value).format('YYYY年MM月DD日')
......