解决Shadcn Vue日期选择器范围模式样式问题

在Shadcn Vue项目中使用日期选择器(Date Picker)组件时，开发者可能会遇到一个关于范围选择模式的CSS样式问题。当用户选择一个日期范围时，如果范围跨越多个星期，起始和结束日期的圆角效果会丢失。

问题现象

在日期选择器的范围模式下，当用户选择完整一周的日期范围时，样式表现正常：起始日期有左侧圆角，结束日期有右侧圆角，中间日期有连续的背景色。但当选择范围跨越多个星期或位于星期中间时，起始和结束日期的圆角效果会消失，导致视觉不一致。

问题根源

通过分析VCalendar组件的源代码，发现这个问题源于CSS选择器的局限性。日期选择器将日期按星期分组，每个星期是一个独立的容器(.vc-weeks)，这使得很难通过CSS选择器单独定位范围起始和结束日期来应用圆角样式。

解决方案

深入研究发现VCalendar组件实际上已经为范围选择提供了有用的CSS类：

• .vc-highlight-base-start：标记范围起始日期
• .vc-highlight-base-middle：标记范围中间日期
• .vc-highlight-base-end：标记范围结束日期

基于这些类，我们可以编写更精确的CSS规则来解决圆角问题：

/* 起始日期圆角 */
.vc-day-content.vc-highlight-base-start {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

/* 结束日期圆角 */ 
.vc-day-content.vc-highlight-base-end {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

实现细节

这个解决方案的关键点在于：

1. 直接使用VCalendar内置的类选择器，无需额外添加自定义类
2. 针对.vc-day-content元素应用样式，这是日期内容的容器
3. 同时设置上下圆角，确保在各种日期选择状态下都能正确显示
4. 使用rem单位保持与项目整体设计的一致性

效果验证

应用此修复后，日期选择器在以下场景都能正确显示圆角：

• 单日选择
• 完整周范围选择
• 跨越多个星期的范围选择
• 部分周范围选择
• 悬停状态下的预览效果

这个解决方案已被合并到Shadcn Vue项目的主分支中，为所有用户提供了更一致的日期选择体验。