fix(calendar): 优化选中日期时切换按钮的显示样式和文本

- 将选中日期时的按钮文本从“选中 YYYY-MM-DD”简化为“更改日期”，提升简洁性
- 为按钮添加日历图标，并通过动态类名在选中和未选中状态间切换颜色
- 使用 flex 布局优化图标与文本的对齐，并添加状态颜色过渡效果

 <!--
 <!--
  * @Date: 2025-01-25 15:34:17
  * @Date: 2025-01-25 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-23 10:38:40
+ * @LastEditTime: 2026-01-23 13:38:31
  * @FilePath: /mlaj/src/components/calendar/CollapsibleCalendar.vue
  * @FilePath: /mlaj/src/components/calendar/CollapsibleCalendar.vue
  * @Description: 可折叠日历组件
  * @Description: 可折叠日历组件
 -->
 -->
@@ -29,7 +29,23 @@
                 <div class="calendar-date-display" @click="expandCalendar">
                 <div class="calendar-date-display" @click="expandCalendar">
                     <div class="calendar-date-main">{{ formattedCurrentDate }}</div>
                     <div class="calendar-date-main">{{ formattedCurrentDate }}</div>
                     <div class="calendar-weekday">{{ formattedWeekday }}</div>
                     <div class="calendar-weekday">{{ formattedWeekday }}</div>
-                    <div v-if="!isHeaderHidden" 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
+                        v-if="!isHeaderHidden"
+                        class="text-xs mt-1 collapsible-text px-3 py-1 text-center rounded-full border inline-flex items-center justify-center gap-1 min-w-[5rem] transition-colors duration-200"
+                        :class="[
+                            hasSelectedDate
+                                ? 'text-green-600 bg-green-50 border-green-200 font-medium'
+                                : 'text-gray-500 bg-white border-gray-200'
+                        ]"
+                    >
+                        <span>{{ toggleButtonText }}</span>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{'text-green-600': hasSelectedDate, 'text-gray-400': !hasSelectedDate}">
+                            <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </div>
                 </div>
                 </div>
                 <!-- <div class="calendar-action">
                 <!-- <div class="calendar-action">
                     <div class="calendar-action-text">指定日期</div>
                     <div class="calendar-action-text">指定日期</div>
@@ -334,9 +350,7 @@ const formattedWeekday = computed(() => {
 
 
 const toggleButtonText = computed(() => {
 const toggleButtonText = computed(() => {
     if (!props.hasSelectedDate) return '切换日期'
     if (!props.hasSelectedDate) return '切换日期'
-    const date_val = props.modelValue || currentDate.value
-    const text = dayjs(date_val).format('YYYY-MM-DD')
-    return `选中 ${text}`
+    return '更改日期'
 })
 })
 
 
 /**
 /**