refactor: simplify dark mode with VueUse + Element Plus
Remove custom CSS variable overrides, use Element Plus built-in dark mode with VueUse useDark
This commit is contained in:
parent
85a20baf5a
commit
4df5c13976
@ -1,132 +1,42 @@
|
||||
/* 暗色模式 CSS 变量 */
|
||||
/* 自定义 CSS 变量（Element Plus 组件由其内置暗色模式处理） */
|
||||
:root {
|
||||
/* 侧边栏变量 */
|
||||
--sidebar-bg: #1e293b;
|
||||
--sidebar-header-bg: #0f172a;
|
||||
--sidebar-hover-bg: #334155;
|
||||
--sidebar-text: #94a3b8;
|
||||
--sidebar-active-text: #fff;
|
||||
--sidebar-active-text: #ffffff;
|
||||
--sidebar-active-bg: #3b82f6;
|
||||
--header-bg: #ffffff;
|
||||
--header-border: #e2e8f0;
|
||||
--header-text: #1e293b;
|
||||
--main-bg: #f8fafc;
|
||||
--main-text: #1e293b;
|
||||
--footer-bg: #ffffff;
|
||||
--footer-border: #e2e8f0;
|
||||
--footer-text: #64748b;
|
||||
|
||||
/* 通用文本变量（用于非 Element Plus 元素） */
|
||||
--el-text-color-primary: #303133;
|
||||
--el-text-color-regular: #606266;
|
||||
--el-text-color-secondary: #909399;
|
||||
--el-border-color: #dcdfe6;
|
||||
--el-bg-color: #ffffff;
|
||||
--el-bg-color-page: #f2f3f5;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
/* 侧边栏暗色变量 */
|
||||
--sidebar-bg: #0f172a;
|
||||
--sidebar-header-bg: #020617;
|
||||
--sidebar-hover-bg: #1e293b;
|
||||
--sidebar-text: #cbd5e1;
|
||||
--sidebar-active-text: #fff;
|
||||
--sidebar-active-text: #ffffff;
|
||||
--sidebar-active-bg: #3b82f6;
|
||||
--header-bg: #1e293b;
|
||||
--header-border: #334155;
|
||||
--header-text: #f1f5f9;
|
||||
--main-bg: #0f172a;
|
||||
--main-text: #f1f5f9;
|
||||
--footer-bg: #1e293b;
|
||||
--footer-border: #334155;
|
||||
--footer-text: #cbd5e1;
|
||||
|
||||
/* 通用文本暗色变量 */
|
||||
--el-text-color-primary: #e5eaf3;
|
||||
--el-text-color-regular: #cfd3dc;
|
||||
--el-text-color-secondary: #a3a6ad;
|
||||
--el-border-color: #4c4d4f;
|
||||
--el-bg-color: #141414;
|
||||
--el-bg-color-page: #0a0a0a;
|
||||
}
|
||||
|
||||
/* 基础样式 */
|
||||
/* 全局基础样式 */
|
||||
body {
|
||||
color: var(--main-text);
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
|
||||
/* ========== Element Plus 暗色模式全局覆盖 ========== */
|
||||
|
||||
/* 输入框、文本框、选择器 */
|
||||
html.dark .el-input__inner,
|
||||
html.dark .el-textarea__inner,
|
||||
html.dark .el-select .el-input__inner,
|
||||
html.dark .el-cascader .el-input__inner {
|
||||
color: var(--header-text) !important;
|
||||
background-color: var(--header-bg) !important;
|
||||
border-color: var(--header-border) !important;
|
||||
}
|
||||
|
||||
/* 选择器下拉项 */
|
||||
html.dark .el-select-dropdown__item {
|
||||
color: var(--header-text) !important;
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown__item.selected {
|
||||
color: var(--sidebar-active-text) !important;
|
||||
background-color: var(--sidebar-active-bg) !important;
|
||||
}
|
||||
|
||||
html.dark .el-select-dropdown__item.hover {
|
||||
background-color: var(--sidebar-hover-bg) !important;
|
||||
}
|
||||
|
||||
/* 表单标签 */
|
||||
html.dark .el-form-item__label {
|
||||
color: var(--header-text) !important;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
html.dark .el-table {
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
html.dark .el-table th {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
html.dark .el-table tr {
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
html.dark .el-table td {
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
html.dark .el-card {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
}
|
||||
|
||||
html.dark .el-card .el-card__header {
|
||||
border-bottom-color: var(--header-border);
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
html.dark .el-tag {
|
||||
background-color: var(--sidebar-bg) !important;
|
||||
border-color: var(--header-border) !important;
|
||||
color: var(--header-text) !important;
|
||||
}
|
||||
|
||||
/* 按钮文字颜色 */
|
||||
html.dark .el-button--default {
|
||||
color: var(--header-text);
|
||||
background-color: var(--header-bg);
|
||||
border-color: var(--header-border);
|
||||
}
|
||||
|
||||
html.dark .el-button--primary {
|
||||
background-color: var(--sidebar-active-bg) !important;
|
||||
border-color: var(--sidebar-active-bg) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 级联选择器、日期选择器等 */
|
||||
html.dark .el-cascader .el-input__inner,
|
||||
html.dark .el-date-editor .el-input__inner {
|
||||
color: var(--header-text) !important;
|
||||
background-color: var(--header-bg) !important;
|
||||
border-color: var(--header-border) !important;
|
||||
}
|
||||
|
||||
/* 占位符 */
|
||||
html.dark .el-input__inner::placeholder {
|
||||
color: var(--footer-text) !important;
|
||||
color: var(--el-text-color-primary);
|
||||
background-color: var(--el-bg-color-page);
|
||||
}
|
||||
|
||||
@ -211,21 +211,9 @@ const showLoginDialog = ref(false)
|
||||
const logging = ref(false)
|
||||
const loginFormRef = ref()
|
||||
|
||||
// 使用 VueUse 的 useDark 管理暗色模式 - SSR safe
|
||||
const isDark = ref(false)
|
||||
const toggleDark = ref(() => {})
|
||||
|
||||
onMounted(() => {
|
||||
const dark = useDark({
|
||||
selector: 'html',
|
||||
attribute: 'class',
|
||||
valueDark: 'dark',
|
||||
valueLight: '',
|
||||
storageKey: 'theme',
|
||||
})
|
||||
isDark.value = dark
|
||||
toggleDark.value = useToggle(dark)
|
||||
})
|
||||
// VueUse useDark - 自动添加/移除 html.dark 类，Element Plus 自动响应
|
||||
const isDark = useDark()
|
||||
const toggleDark = useToggle(isDark)
|
||||
|
||||
const collapsed = ref(false)
|
||||
const currentUser = ref<any>(null)
|
||||
@ -318,13 +306,13 @@ onMounted(() => {
|
||||
if (savedUser) {
|
||||
currentUser.value = JSON.parse(savedUser)
|
||||
}
|
||||
// 主题切换由 VueUse useDark 自动处理
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
/* ========== 布局容器 ========== */
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
@ -334,11 +322,11 @@ onMounted(() => {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 侧边栏 - 始终使用深色背景 */
|
||||
/* ========== 侧边栏 ========== */
|
||||
.sidebar {
|
||||
background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-header-bg) 100%);
|
||||
background: var(--sidebar-bg);
|
||||
color: var(--sidebar-text);
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
@ -350,12 +338,12 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--sidebar-header-bg);
|
||||
border-bottom: 1px rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo h2 {
|
||||
color: #fff;
|
||||
color: var(--sidebar-active-text);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
@ -364,11 +352,12 @@ onMounted(() => {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* ========== 侧边栏控制按钮 ========== */
|
||||
.sidebar-toggle {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.rotate-icon {
|
||||
@ -379,13 +368,10 @@ onMounted(() => {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 菜单样式 */
|
||||
/* ========== 菜单基础样式 ========== */
|
||||
.sidebar-menu {
|
||||
border-right: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sidebar-menu:not(.el-menu--collapse) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -396,15 +382,17 @@ onMounted(() => {
|
||||
line-height: 48px;
|
||||
margin: 4px 8px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* ========== 菜单悬停状态 ========== */
|
||||
.sidebar-menu .el-menu-item:hover,
|
||||
.sidebar-menu .el-sub-menu__title:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
color: #fff;
|
||||
color: var(--sidebar-active-text);
|
||||
}
|
||||
|
||||
/* ========== 菜单激活状态 ========== */
|
||||
.sidebar-menu .el-menu-item.is-active,
|
||||
.sidebar-menu .el-sub-menu .el-menu-item.is-active {
|
||||
background-color: var(--sidebar-active-bg);
|
||||
@ -420,87 +408,11 @@ onMounted(() => {
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 24px;
|
||||
background-color: #fff;
|
||||
background-color: var(--sidebar-active-text);
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* 子菜单样式 */
|
||||
.sidebar-menu .el-sub-menu .el-menu-item {
|
||||
padding-left: 20px !important;
|
||||
margin: 2px 8px;
|
||||
}
|
||||
|
||||
/* 菜单图标 */
|
||||
.sidebar-menu .el-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Staggered animation for menu items */
|
||||
.sidebar-menu .el-menu-item:nth-child(1),
|
||||
.sidebar-menu .el-sub-menu:nth-child(1) {
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item:nth-child(2),
|
||||
.sidebar-menu .el-sub-menu:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item:nth-child(3),
|
||||
.sidebar-menu .el-sub-menu:nth-child(3) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item:nth-child(4),
|
||||
.sidebar-menu .el-sub-menu:nth-child(4) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item:nth-child(5),
|
||||
.sidebar-menu .el-sub-menu:nth-child(5) {
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item:hover,
|
||||
.sidebar-menu .el-sub-menu__title:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
color: #fff;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item.is-active,
|
||||
.sidebar-menu .el-sub-menu .el-menu-item.is-active {
|
||||
background-color: var(--sidebar-active-bg);
|
||||
color: var(--sidebar-active-text);
|
||||
font-weight: 500;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item.is-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 24px;
|
||||
background-color: #fff;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* 子菜单样式 */
|
||||
/* ========== 子菜单样式 ========== */
|
||||
.sidebar-menu .el-sub-menu .el-menu-item {
|
||||
padding-left: 20px !important;
|
||||
margin: 2px 8px;
|
||||
@ -508,7 +420,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 菜单图标 - 确保垂直居中 */
|
||||
/* ========== 菜单图标 ========== */
|
||||
.sidebar-menu .el-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -518,7 +430,127 @@ onMounted(() => {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 子菜单箭头对齐 */
|
||||
/* ========== 子菜单箭头 ========== */
|
||||
.sidebar-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ========== 侧边栏 ========== */
|
||||
.sidebar {
|
||||
background: var(--sidebar-bg);
|
||||
color: var(--sidebar-text);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--sidebar-header-bg);
|
||||
border-bottom: 1px solid var(--sidebar-text);
|
||||
border-color: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo h2 {
|
||||
color: var(--sidebar-active-text);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.5px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* ========== 侧边栏控制按钮 ========== */
|
||||
.sidebar-toggle {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.rotate-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.rotate-icon:hover {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ========== 菜单基础样式 ========== */
|
||||
.sidebar-menu {
|
||||
border-right: none;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item,
|
||||
.sidebar-menu .el-sub-menu__title {
|
||||
color: var(--sidebar-text);
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 4px 8px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* ========== 菜单悬停状态 ========== */
|
||||
.sidebar-menu .el-menu-item:hover,
|
||||
.sidebar-menu .el-sub-menu__title:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
color: var(--sidebar-active-text);
|
||||
}
|
||||
|
||||
/* ========== 菜单激活状态 ========== */
|
||||
.sidebar-menu .el-menu-item.is-active,
|
||||
.sidebar-menu .el-sub-menu .el-menu-item.is-active {
|
||||
background-color: var(--sidebar-active-bg);
|
||||
color: var(--sidebar-active-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item.is-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 24px;
|
||||
background-color: var(--sidebar-active-text);
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* ========== 子菜单样式 ========== */
|
||||
.sidebar-menu .el-sub-menu .el-menu-item {
|
||||
padding-left: 20px !important;
|
||||
margin: 2px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ========== 菜单图标 ========== */
|
||||
.sidebar-menu .el-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ========== 子菜单箭头 ========== */
|
||||
.sidebar-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
@ -526,8 +558,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: var(--header-bg);
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
background-color: var(--el-bg-color);
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -550,7 +582,7 @@ onMounted(() => {
|
||||
|
||||
.header h3 {
|
||||
margin: 0;
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -571,13 +603,13 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.username {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
margin-right: 12px;
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
transition: all 0.3s ease;
|
||||
@ -585,12 +617,12 @@ onMounted(() => {
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background-color: var(--sidebar-hover-bg) !important;
|
||||
color: #fff;
|
||||
color: var(--sidebar-active-text);
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background-color: var(--main-bg);
|
||||
background-color: var(--el-bg-color-page);
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -604,15 +636,15 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-header-bg) 100%);
|
||||
border-bottom: 1px rgba(255, 255, 255, 0.05);
|
||||
background: var(--sidebar-bg);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.drawer-logo h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
color: var(--sidebar-active-text);
|
||||
}
|
||||
|
||||
.drawer-menu {
|
||||
@ -631,7 +663,7 @@ onMounted(() => {
|
||||
.drawer-menu .el-menu-item.is-active,
|
||||
.drawer-menu .el-sub-menu .el-menu-item.is-active {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
color: #fff;
|
||||
color: var(--sidebar-active-text);
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
@ -669,8 +701,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--footer-bg);
|
||||
border-top: 1px solid var(--footer-border);
|
||||
background-color: var(--el-bg-color);
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -681,7 +713,7 @@ onMounted(() => {
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
color: var(--footer-text);
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -305,7 +305,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -323,7 +323,7 @@ onMounted(() => {
|
||||
|
||||
.form-tip {
|
||||
font-size: 12px;
|
||||
color: var(--footer-text);
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@ -334,18 +334,18 @@ onMounted(() => {
|
||||
.secret-display p {
|
||||
margin: 16px 0 8px;
|
||||
font-size: 14px;
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.secret-value {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
background-color: var(--header-bg);
|
||||
border: 1px solid var(--header-border);
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
@ -356,24 +356,24 @@ onMounted(() => {
|
||||
/* 确保表格在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--header-border);
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--header-text) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
@ -381,7 +381,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
@ -287,7 +287,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -298,31 +298,31 @@ onMounted(() => {
|
||||
|
||||
.form-tip {
|
||||
font-size: 12px;
|
||||
color: var(--footer-text);
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--header-border);
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--header-text) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
@ -330,7 +330,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
@ -175,7 +175,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -187,24 +187,24 @@ onMounted(() => {
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--header-border);
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--header-text) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
@ -212,7 +212,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
@ -211,7 +211,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -223,24 +223,24 @@ onMounted(() => {
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--header-border);
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--header-text) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
@ -248,7 +248,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
/* Table row staggered animations */
|
||||
|
||||
@ -153,12 +153,12 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.welcome-card h1 {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.welcome-card p {
|
||||
color: var(--footer-text);
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@ -184,12 +184,12 @@ onMounted(async () => {
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: var(--footer-text);
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@ -210,8 +210,8 @@ onMounted(async () => {
|
||||
|
||||
.system-info li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
color: var(--header-text);
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.system-info li:last-child {
|
||||
|
||||
@ -185,7 +185,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -197,24 +197,24 @@ onMounted(() => {
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--header-border);
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--header-text) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
@ -222,7 +222,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
/* Table row staggered animations */
|
||||
|
||||
@ -173,7 +173,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -185,24 +185,24 @@ onMounted(() => {
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--header-border);
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--header-text) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
@ -210,7 +210,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.rank-cell {
|
||||
@ -219,7 +219,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.medals {
|
||||
@ -240,8 +240,8 @@ onMounted(() => {
|
||||
|
||||
.rules-list li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
color: var(--header-text);
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.rules-list li:last-child {
|
||||
@ -253,8 +253,8 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
color: var(--header-text);
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.top-item:last-child {
|
||||
|
||||
@ -157,7 +157,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -169,24 +169,24 @@ onMounted(() => {
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--header-border);
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--header-text) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
@ -194,7 +194,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
export default defineNuxtConfig({
|
||||
ssr: false,
|
||||
modules: ['@element-plus/nuxt'],
|
||||
css: ['~/assets/css/dark-mode.css']
|
||||
elementPlus: {
|
||||
themes: ['dark'],
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user