hookehuyr

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

- 将选中日期时的按钮文本从“选中 YYYY-MM-DD”简化为“更改日期”,提升简洁性
- 为按钮添加日历图标,并通过动态类名在选中和未选中状态间切换颜色
- 使用 flex 布局优化图标与文本的对齐,并添加状态颜色过渡效果
<!--
* @Date: 2025-01-25 15:34:17
* @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
* @Description: 可折叠日历组件
-->
......@@ -29,7 +29,23 @@
<div class="calendar-date-display" @click="expandCalendar">
<div class="calendar-date-main">{{ formattedCurrentDate }}</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 class="calendar-action">
<div class="calendar-action-text">指定日期</div>
......@@ -334,9 +350,7 @@ const formattedWeekday = computed(() => {
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}`
return '更改日期'
})
/**
......