hookehuyr

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

在可折叠日历组件中增加 sessionStorage 存储功能,用于保存用户选择的课程筛选状态
添加状态恢复逻辑和列表变化监听,确保筛选状态与数据同步
<!--
* @Date: 2025-01-25 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-18 22:33:09
* @LastEditTime: 2025-12-18 23:23:57
* @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue
* @Description: 可折叠日历组件
-->
......@@ -156,6 +156,27 @@ const selectedCourseText = ref('全部作业')
const selectedCourseId = ref('')
const showRulesPopup = ref(false)
// 存储键名
const STORAGE_KEY = 'collapsible_calendar_filter_state'
// 是否已恢复状态
const isRestored = ref(false)
// 尝试从 sessionStorage 恢复状态
try {
const savedState = sessionStorage.getItem(STORAGE_KEY)
if (savedState) {
const { selectedCourseId: savedId, selectedCourseText: savedText } = JSON.parse(savedState)
// 只有当保存的值存在时才恢复 (savedId 可以是空字符串,表示全部作业)
if (savedId !== undefined) {
selectedCourseId.value = savedId
selectedCourseText.value = savedText || '全部作业'
isRestored.value = true
}
}
} catch (e) {
console.error('Failed to restore calendar filter', e)
}
const { y } = useScroll(window)
const isHeaderHidden = ref(false)
const lastY = ref(0)
......@@ -258,8 +279,36 @@ const onConfirmCourse = (result) => {
selectedCourseId.value = option.value
showCoursePicker.value = false
emit('select-course', option.value)
// 保存状态
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
selectedCourseId: selectedCourseId.value,
selectedCourseText: selectedCourseText.value
}))
}
// 监听 subtaskList 变化,用于在恢复状态后同步筛选
watch(() => props.subtaskList, (newList) => {
if (newList && newList.length > 0 && isRestored.value) {
// 尝试在列表中找到对应的项,更新文本
const target = newList.find(item => item.id === selectedCourseId.value)
if (target) {
selectedCourseText.value = target.title
} else if (selectedCourseId.value) {
// 如果有ID但在列表中找不到(可能是作业被删除),则重置为全部
selectedCourseId.value = ''
selectedCourseText.value = '全部作业'
}
// 通知父组件筛选变更,确保数据与筛选状态一致
emit('select-course', selectedCourseId.value)
// 重置标记,确保只执行一次
isRestored.value = false
}
}, { immediate: true })
// 计算属性:格式化当前日期显示
const formattedCurrentDate = computed(() => {
return dayjs(currentDate.value).format('YYYY年MM月DD日')
......