feat: 在播放控制器中优化日期选择器,增加自定义样式和类型处理,提升用户体验

This commit is contained in:
xudan 2025-10-13 16:23:03 +08:00
parent 8cd8bb7491
commit d870848926

View File

@ -210,8 +210,9 @@ const handleTimelineClick = (event: MouseEvent) => {
<a-date-picker
:value="selectedDate"
placeholder="请选择回放日期"
@change="handleDateChange"
@change="handleDateChange as any"
style="margin-right: 8px"
dropdownClassName="playback-datepicker-theme"
/>
<a-select :value="selectedHour" style="width: 150px" :options="hourOptions" @change="handleHourChange" />
</a-col>
@ -340,3 +341,22 @@ body[data-theme='dark'] {
}
}
</style>
<style lang="scss">
.playback-datepicker-theme {
.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
border-color: #0dbb8a !important; /* Today indicator */
}
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
background-color: #0dbb8a !important; /* Selected date background */
}
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner .ant-picker-calendar-date-value {
color: white !important; /* Text color for selected date */
}
.ant-picker-today-btn {
color: #0dbb8a !important; /* "Today" button text color */
}
}
</style>