feat(日历组件): 添加清空选中日期功能并优化日期切换按钮显示

在日历组件中添加清空选中日期的功能，并优化日期切换按钮的显示样式和文本
当有选中日期时显示具体日期，无选中日期时显示"切换日期"
添加清空按钮用于快速清除当前选中状态

 <!--
  * @Date: 2025-01-25 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-22 20:26:40
+ * @LastEditTime: 2026-01-22 20:44:20
  * @FilePath: /mlaj/src/components/calendar/CollapsibleCalendar.vue
  * @Description: 可折叠日历组件
 -->
@@ -29,7 +29,7 @@
                 <div class="calendar-date-display" @click="expandCalendar">
                     <div class="calendar-date-main">{{ formattedCurrentDate }}</div>
                     <div class="calendar-weekday">{{ formattedWeekday }}</div>
-                    <div class="text-xs text-gray-500 mt-1 collapsible-text p-1 bg-white w-20 text-center rounded-full border border-gray-200">切换日期</div>
+                    <div class="text-xs text-gray-500 mt-1 collapsible-text px-3 py-1 bg-white text-center rounded-full border border-gray-200 inline-block min-w-[5rem] max-w-[8rem]">{{ toggleButtonText }}</div>
                 </div>
                 <!-- <div class="calendar-action">
                     <div class="calendar-action-text">指定日期</div>
@@ -63,6 +63,13 @@
             @close="collapseCalendar"
         >
             <div class="calendar-popup-content">
+                <button
+                    v-if="hasSelectedDate"
+                    class="absolute top-3 right-3 z-10 text-xs px-3 py-1 rounded-full border border-green-600 text-green-600 bg-white"
+                    @click.stop="clearSelectedDate"
+                >
+                    清空
+                </button>
                 <van-calendar
                     ref="calendarRef"
                     :poppable="false"
@@ -144,11 +151,15 @@ const props = defineProps({
     subtaskList: {
         type: Array,
         default: () => []
+    },
+    hasSelectedDate: {
+        type: Boolean,
+        default: false
     }
 })
 
 // Emits定义
-const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change', 'select-course'])
+const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change', 'select-course', 'clear-date'])
 
 // 响应式数据
 const isExpanded = ref(false)
@@ -321,6 +332,13 @@ const formattedWeekday = computed(() => {
     return weekdays[dayjs(currentDate.value).day()]
 })
 
+const toggleButtonText = computed(() => {
+    if (!props.hasSelectedDate) return '切换日期'
+    const date_val = props.modelValue || currentDate.value
+    const text = dayjs(date_val).format('YYYY-MM-DD')
+    return `选中 ${text}`
+})
+
 /**
  * 展开日历
  */
@@ -366,6 +384,17 @@ const onPanelChange = (panel) => {
     emit('panel-change', panel)
 }
 
+const clearSelectedDate = () => {
+    const today = new Date()
+    currentDate.value = today
+    if (calendarRef.value && typeof calendarRef.value.reset === 'function') {
+        calendarRef.value.reset(today)
+    }
+    emit('update:modelValue', today)
+    emit('clear-date')
+    collapseCalendar()
+}
+
 // 监听modelValue变化
 watch(() => props.modelValue, (newValue) => {
     if (newValue) {
@@ -592,6 +621,7 @@ defineExpose({
 }
 
 .calendar-popup-content {
+    position: relative;
     height: 100%;
     overflow: hidden;
 

@@ -15,11 +15,13 @@
           :title="taskDetail.title"
           :formatter="formatter"
           :subtask-list="taskDetail.subtask_list"
+          :has-selected-date="hasUserSelectedDate"
           v-model="selectedDate"
           @select="onSelectDay"
           @click-subtitle="onClickSubtitle"
           @panel-change="onPanelChange"
           @select-course="onSelectCourse"
+          @clear-date="onClearSelectedDate"
         />
       </div>
 
@@ -335,6 +337,24 @@ const selectedDate = ref(new Date());
 const hasUserSelectedDate = ref(!!route.query.date)
 const isInitializing = ref(true)
 
+const onClearSelectedDate = () => {
+  const next_query = { ...route.query }
+  delete next_query.date
+  router.replace({
+    path: route.path,
+    query: next_query
+  })
+
+  hasUserSelectedDate.value = false
+  selectedDate.value = dayjs().format('YYYY-MM-DD')
+  getTaskDetail(dayjs().format('YYYY-MM'))
+
+  page.value = 0
+  checkinDataList.value = []
+  finished.value = false
+  onLoad(null, false)
+}
+
 const onSelectDay = (day) => {
   const currentSelectedDate = dayjs(day).format('YYYY-MM-DD');
 
@@ -394,7 +414,7 @@ const onSelectCourse = (course) => {
   checkinDataList.value = []
   finished.value = false
   // 重新加载数据
-  onLoad(route.query.date, hasUserSelectedDate.value)
+  onLoad(hasUserSelectedDate.value ? (route.query.date || selectedDate.value) : null, hasUserSelectedDate.value)
 }
 
 /**