fix: 日期选择器改为深色主题和中文显示

This commit is contained in:
Your Name 2026-01-08 13:42:04 +08:00
parent 1380ef401a
commit 941a18e29b
2 changed files with 134 additions and 0 deletions

View File

@ -1438,3 +1438,124 @@ a.ant-btn-primary {
}
}
// ===== 深色日期选择器样式 =====
.dark-date-picker {
.ant-picker-panel-container {
background: $bg-card !important;
border: 1px solid $border-primary !important;
border-radius: $radius-md !important;
box-shadow: $shadow-elevated !important;
}
.ant-picker-header {
color: $text-primary !important;
border-bottom: 1px solid $border-divider !important;
button {
color: $text-secondary !important;
&:hover {
color: $brand-primary !important;
}
}
.ant-picker-header-view {
button {
color: $text-primary !important;
&:hover {
color: $brand-primary !important;
}
}
}
}
.ant-picker-content {
th {
color: $text-secondary !important;
}
td {
color: $text-primary !important;
}
}
.ant-picker-cell {
color: $text-secondary !important;
&:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-disabled) {
.ant-picker-cell-inner {
background: rgba($brand-primary, 0.1) !important;
}
}
&.ant-picker-cell-in-view {
color: $text-primary !important;
}
&.ant-picker-cell-selected {
.ant-picker-cell-inner {
background: $brand-primary !important;
color: #000 !important;
}
}
&.ant-picker-cell-today {
.ant-picker-cell-inner::before {
border-color: $brand-primary !important;
}
}
}
.ant-picker-month-panel,
.ant-picker-year-panel {
.ant-picker-cell-inner {
border-radius: $radius-sm !important;
}
}
.ant-picker-footer {
border-top: 1px solid $border-divider !important;
.ant-picker-today-btn {
color: $brand-primary !important;
}
}
}
// ===== 全局 Ant Design DatePicker 输入框深色样式 =====
.ant-picker {
background: $bg-tertiary !important;
border-color: $border-primary !important;
input {
color: $text-primary !important;
&::placeholder {
color: $text-tertiary !important;
}
}
.ant-picker-suffix {
color: $text-tertiary !important;
}
.ant-picker-clear {
background: $bg-tertiary !important;
color: $text-tertiary !important;
&:hover {
color: $text-secondary !important;
}
}
&:hover {
border-color: $brand-primary !important;
}
&.ant-picker-focused {
border-color: $brand-primary !important;
box-shadow: 0 0 0 2px rgba($brand-primary, 0.2) !important;
}
}

View File

@ -818,6 +818,8 @@
placeholder="筛选月份"
format="YYYY-MM"
value-format="YYYY-MM"
:locale="locale"
:popup-class-name="'dark-date-picker'"
@change="handleDesignerTargetMonthChange"
/>
</div>
@ -2229,6 +2231,8 @@
placeholder="留空则为通用配置"
format="YYYY-MM"
value-format="YYYY-MM"
:locale="locale"
:popup-class-name="'dark-date-picker'"
style="width: 100%"
/>
<div style="font-size: 12px; color: #888; margin-top: 4px;">
@ -2246,6 +2250,15 @@
import { ref, reactive, onMounted, computed, watch } from 'vue'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import { message } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
// 设置 dayjs 中文
dayjs.locale('zh-cn')
// Ant Design 中文配置
const locale = zhCN
import Icon from '@/components/Icon.vue'
import { useRouter } from 'vue-router'
import { useSiteSettingsStore } from '@/stores/siteSettings'