55f2e020b5
* Add dark/light theme toggle feature * update: refine dark/light theme and related components * 调整语义化主题变量，优化暗/亮模式切换效果 * Revert "调整语义化主题变量，优化暗/亮模式切换效果" This reverts commit 85d9373297686fdbacb252a880b2847d20a39641. * 深色模式适配：减少 !important，迁移 CSS 变量，优化布局 * style: 替换硬编码颜色值为CSS变量以支持主题切换 将多处硬编码的颜色值（如#fff、#f0f0f0等）替换为CSS变量（如--gray-0、--gray-150等），统一管理颜色样式，便于主题切换和样式维护。主要修改包括背景色、边框色、文字色等视觉元素，同时移除不再需要的深色模式适配代码。 * style: 使用CSS变量替换硬编码颜色值 * refactor(theme): 重构主题系统，统一使用CSS变量并优化暗色模式实现 - 移除冗余的theme.js配置文件，将主题配置集中到theme store - 使用ant-design-vue的darkAlgorithm实现暗色模式 - 在多个组件中替换硬编码颜色值为CSS变量 - 优化用户信息组件，整合文档中心和主题切换功能 - 更新基础CSS样式，完善颜色系统和滚动条样式 * reset: 恢复被覆盖的修改（96d257a7ace38c94e2b113d56472d211d1141087） * feat(theme): 实现深色主题支持并重构样式系统 重构颜色变量系统，添加深色主题支持 移除硬编码颜色值，统一使用CSS变量 优化图表组件以响应主题切换 清理无用样式代码，提升可维护性 * docs: 更新开发规范文档 * style: 调整边框和背景颜色样式 --------- Co-authored-by: Wenjie Zhang <xerrors@163.com>
293 lines
6.2 KiB
CSS
293 lines
6.2 KiB
CSS
/* Dashboard 共享样式文件 */
|
|
|
|
/* Chart Color System - 图表颜色系统 */
|
|
:root {
|
|
/* ECharts 图表颜色配置 */
|
|
--echarts-primary-gradient: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'var(--chart-primary)' },
|
|
{ offset: 1, color: 'var(--chart-primary-light)' }
|
|
]
|
|
};
|
|
|
|
--echarts-success-gradient: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'var(--chart-success)' },
|
|
{ offset: 1, color: 'var(--chart-success-light)' }
|
|
]
|
|
};
|
|
|
|
--echarts-warning-gradient: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'var(--chart-warning)' },
|
|
{ offset: 1, color: 'var(--chart-warning-light)' }
|
|
]
|
|
};
|
|
|
|
--echarts-error-gradient: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'var(--chart-error)' },
|
|
{ offset: 1, color: 'var(--chart-error-light)' }
|
|
]
|
|
};
|
|
|
|
--echarts-info-gradient: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'var(--chart-info)' },
|
|
{ offset: 1, color: 'var(--chart-info-light)' }
|
|
]
|
|
};
|
|
|
|
--echarts-secondary-gradient: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'var(--chart-secondary)' },
|
|
{ offset: 1, color: 'var(--chart-secondary-light)' }
|
|
]
|
|
};
|
|
|
|
--echarts-accent-gradient: {
|
|
type: 'linear',
|
|
x: 0, y: 0, x2: 0, y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'var(--chart-accent)' },
|
|
{ offset: 1, color: 'var(--chart-accent-light)' }
|
|
]
|
|
};
|
|
}
|
|
|
|
/* Chart Color Palette - 图表调色板 */
|
|
.chart-color-palette {
|
|
--palette-1: var(--chart-palette-1);
|
|
--palette-2: var(--chart-palette-2);
|
|
--palette-3: var(--chart-palette-3);
|
|
--palette-4: var(--chart-palette-4);
|
|
--palette-5: var(--chart-palette-5);
|
|
--palette-6: var(--chart-palette-6);
|
|
--palette-7: var(--chart-palette-7);
|
|
--palette-8: var(--chart-palette-8);
|
|
--palette-9: var(--chart-palette-9);
|
|
--palette-10: var(--chart-palette-10);
|
|
}
|
|
|
|
/* Chart Area Gradient - 图表区域渐变 */
|
|
.chart-area-gradient-primary {
|
|
background: linear-gradient(180deg,
|
|
rgba(57, 150, 174, 0.3) 0%,
|
|
rgba(57, 150, 174, 0.05) 100%
|
|
);
|
|
}
|
|
|
|
.chart-area-gradient-success {
|
|
background: linear-gradient(180deg,
|
|
rgba(82, 196, 26, 0.3) 0%,
|
|
rgba(82, 196, 26, 0.05) 100%
|
|
);
|
|
}
|
|
|
|
.chart-area-gradient-warning {
|
|
background: linear-gradient(180deg,
|
|
rgba(250, 173, 20, 0.3) 0%,
|
|
rgba(250, 173, 20, 0.05) 100%
|
|
);
|
|
}
|
|
|
|
.chart-area-gradient-error {
|
|
background: linear-gradient(180deg,
|
|
rgba(245, 34, 45, 0.3) 0%,
|
|
rgba(245, 34, 45, 0.05) 100%
|
|
);
|
|
}
|
|
|
|
/* Chart Shadow Effects - 图表阴影效果 */
|
|
.chart-shadow-primary {
|
|
box-shadow: 0 4px 12px rgba(57, 150, 174, 0.15);
|
|
}
|
|
|
|
.chart-shadow-success {
|
|
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.15);
|
|
}
|
|
|
|
.chart-shadow-warning {
|
|
box-shadow: 0 4px 12px rgba(250, 173, 20, 0.15);
|
|
}
|
|
|
|
.chart-shadow-error {
|
|
box-shadow: 0 4px 12px rgba(245, 34, 45, 0.15);
|
|
}
|
|
|
|
|
|
/* 共享的卡片样式 */
|
|
.dashboard-card {
|
|
background-color: var(--gray-0);
|
|
border: 1px solid var(--gray-100);
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&:hover {
|
|
border-color: var(--gray-200);
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
/* 使用更具体的选择器来覆盖 Ant Design 的默认样式 */
|
|
.dashboard-card .ant-card-head {
|
|
/* border-bottom: 1px solid var(--gray-200) !important; */
|
|
min-height: 56px !important;
|
|
padding: 0 20px !important;
|
|
flex-shrink: 0;
|
|
background-color: var(--gray-0) !important;
|
|
/* border: 1px solo; */
|
|
}
|
|
|
|
.dashboard-card .ant-card-head-title {
|
|
font-size: 18px !important;
|
|
font-weight: 600 !important;
|
|
color: var(--gray-1000) !important;
|
|
}
|
|
|
|
.dashboard-card .ant-card-body {
|
|
padding: 20px !important;
|
|
padding-top: 0px !important;
|
|
flex: 1;
|
|
overflow: auto;
|
|
background-color: var(--gray-0) !important;
|
|
}
|
|
|
|
.dashboard-card .ant-card-extra {
|
|
padding-top: 0px !important;
|
|
}
|
|
|
|
/* 统计概览样式 */
|
|
.stats-overview {
|
|
margin-bottom: 16px;
|
|
|
|
.ant-statistic {
|
|
.ant-statistic-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--gray-600);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ant-statistic-content {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--gray-1000);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 图表容器样式 */
|
|
.chart-container {
|
|
h4, h5 {
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
color: var(--gray-1000);
|
|
}
|
|
|
|
h4 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 14px;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.chart {
|
|
height: 250px;
|
|
width: 100%;
|
|
background-color: var(--gray-0);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
border: 1px solid var(--gray-100);
|
|
}
|
|
|
|
.chart-medium {
|
|
height: 180px;
|
|
width: 100%;
|
|
background-color: var(--gray-0);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
border: 1px solid var(--gray-100);
|
|
}
|
|
|
|
.chart-small {
|
|
height: 180px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Ant Design 组件样式覆盖 */
|
|
.dashboard-card .ant-statistic-title {
|
|
color: var(--gray-600) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.dashboard-card .ant-statistic-content {
|
|
color: var(--gray-1000);
|
|
}
|
|
|
|
.dashboard-card .ant-table {
|
|
background-color: var(--gray-0);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
.ant-table-thead > tr > th {
|
|
background-color: var(--gray-25);
|
|
border-bottom: 1px solid var(--gray-200);
|
|
font-weight: 600;
|
|
padding: 12px 16px;
|
|
font-size: 12px;
|
|
color: var(--gray-700);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.ant-table-tbody > tr {
|
|
transition: background-color 0.2s ease;
|
|
|
|
> td {
|
|
border-bottom: 1px solid var(--gray-100);
|
|
color: var(--gray-1000);
|
|
padding: 12px 16px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
&:hover > td {
|
|
background-color: var(--gray-25);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-card .ant-progress {
|
|
.ant-progress-bg {
|
|
background-color: var(--main-500) !important;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ant-progress-text {
|
|
color: var(--gray-1000) !important;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|