feat(日历组件): 添加课程筛选状态持久化功能
在可折叠日历组件中增加 sessionStorage 存储功能,用于保存用户选择的课程筛选状态 添加状态恢复逻辑和列表变化监听,确保筛选状态与数据同步
Showing
1 changed file
with
50 additions
and
1 deletions
| 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日') | ... | ... |
-
Please register or login to post a comment