style: fix login view segmented compoment

This commit is contained in:
2026-01-04 01:03:25 +08:00
parent 0543f89e3c
commit 4add9bffb1
2 changed files with 72 additions and 0 deletions
+32
View File
@@ -202,6 +202,38 @@ export default function getAntdTheme(isDark = false) {
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
},
// === Segmented 组件 ===
Segmented: {
borderRadius: 12,
borderRadiusSM: 8,
// 根据源码,Segmented 使用这些 token 映射:
// labelColor <- colorTextLabel
// labelColorHover <- colorText
// bgColor <- colorBgLayout
// bgColorHover <- colorFillSecondary
// bgColorSelected <- colorBgElevated
// 未选中项文字颜色
colorTextLabel: isDark ? '#938f99' : '#79747e',
labelColor: isDark ? '#938f99' : '#79747e',
// 选中项和 hover 时的文字颜色
colorText: isDark ? '#ffffff' : '#1c1b1f',
labelColorHover: isDark ? '#ffffff' : '#1c1b1f',
// 整体背景色
colorBgLayout: isDark ? '#26252a' : '#f5f5f5',
bgColor: isDark ? '#26252a' : '#f5f5f5',
// hover 背景色(降低透明度,保持文字可见)
colorFillSecondary: isDark ? 'rgba(129, 199, 132, 0.12)' : 'rgba(76, 175, 80, 0.08)',
bgColorHover: isDark ? 'rgba(129, 199, 132, 0.12)' : 'rgba(76, 175, 80, 0.08)',
// 选中项背景色(主题色)
colorBgElevated: isDark ? '#81c784' : '#4caf50',
bgColorSelected: isDark ? '#81c784' : '#4caf50',
},
// === Tooltip 组件 ===
Tooltip: {
colorBgSpotlight: isDark ? '#313033' : '#f5f5f5', // Tooltip 背景色(跟随主题)
+40
View File
@@ -351,6 +351,12 @@ const handleLoginError = error => {
bottom: 0;
overflow-y: auto;
padding: 16px;
transition: background 0.3s ease;
}
/* 暗色模式背景 */
.dark .login-container {
background: linear-gradient(135deg, #1a237e 0%, #4a148c 100%);
}
.login-card {
@@ -360,6 +366,11 @@ const handleLoginError = error => {
margin: 20px 0;
}
/* 暗色模式卡片阴影 */
.dark .login-card {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.card-header {
text-align: center;
}
@@ -368,12 +379,24 @@ const handleLoginError = error => {
margin: 0;
font-size: 24px;
color: #303133;
transition: color 0.3s ease;
}
/* 暗色模式标题 */
.dark .card-header h2 {
color: #e6e1e5;
}
.subtitle {
margin: 10px 0 0 0;
font-size: 14px;
color: #909399;
transition: color 0.3s ease;
}
/* 暗色模式副标题 */
.dark .subtitle {
color: #cac4d0;
}
.mode-switch {
@@ -389,12 +412,22 @@ const handleLoginError = error => {
color: #2196f3;
cursor: pointer;
text-decoration: none;
transition: color 0.3s ease;
}
.link-text:hover {
text-decoration: underline;
}
/* 暗色模式链接 */
.dark .link-text {
color: #64b5f6;
}
.dark .link-text:hover {
color: #90caf9;
}
.tips {
margin-top: 20px;
}
@@ -411,6 +444,13 @@ const handleLoginError = error => {
border-top: 1px dashed #e0e0e0;
color: #606266;
font-weight: 500;
transition: all 0.3s ease;
}
/* 暗色模式提示注释 */
.dark .tip-note {
border-top-color: #49454f;
color: #cac4d0;
}
/* 确保 Ant Design Row 占满高度 */