fix: 日期选择器改为深色主题和中文显示
This commit is contained in:
parent
1380ef401a
commit
941a18e29b
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user