From 6f26e7570c321b99310eb1f20d1a42a9376c47e4 Mon Sep 17 00:00:00 2001 From: RuoYi Date: Sat, 18 Apr 2026 13:13:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=E4=B8=8B?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/sidebar.scss | 2 -- src/assets/styles/variables.module.scss | 21 +++++++++++++++++++-- src/layout/components/Sidebar/Logo.vue | 2 +- src/store/modules/settings.ts | 4 ++++ src/utils/theme.ts | 21 ++++++++++++++++++--- 5 files changed, 42 insertions(+), 8 deletions(-) diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 9549d89..476fec6 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -125,7 +125,6 @@ position: absolute; inset: 0; background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2)); - border-right: 3px solid var(--current-color, #409eff); pointer-events: none; z-index: 1; } @@ -175,7 +174,6 @@ position: absolute; inset: 0; background-color: var(--current-color-light, #ecf5ff); - border-right: 3px solid var(--current-color, #409eff); pointer-events: none; z-index: 1; } diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index ab980e2..8a93d3f 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -89,6 +89,8 @@ html.dark { --el-text-color-regular: #d0d0d0; --el-border-color: #434343; --el-border-color-light: #434343; + --el-menu-text-color: #d0d0d0; + --sidebar-logo-text: #d0d0d0; /* primary */ --primary-bg: #18212b; @@ -111,6 +113,10 @@ html.dark { --tags-item-text: #d0d0d0; --tags-item-hover: #2d2d2d; --tags-close-hover: #64666a; + /* 卡片模式激活页签 */ + --tags-card-active-bg: var(--el-bg-color-overlay); + --tags-card-active-bg: color-mix(in srgb, var(--el-color-primary) 22%, var(--el-bg-color-overlay) 78%); + --tags-card-active-border: var(--tags-card-active-bg); /* splitpanes 组件暗黑模式变量 */ --splitpanes-bg: #141414; @@ -201,7 +207,8 @@ html.dark { &.tags-view-container--chrome { --chrome-strip-bg: var(--el-bg-color); --chrome-strip-border: var(--el-border-color); - --chrome-tab-active-bg: var(--el-color-primary-light-9); + --chrome-tab-active-bg: var(--el-bg-color-overlay); + --chrome-tab-active-bg: color-mix(in srgb, var(--el-color-primary) 22%, var(--el-bg-color-overlay) 78%); --chrome-tab-text: var(--el-text-color-secondary); --chrome-tab-text-active: var(--el-color-primary); .tags-view-wrapper .tags-view-item:not(.active) + .tags-view-item:not(.active) { @@ -213,10 +220,20 @@ html.dark { color: var(--el-text-color-primary); } &.active { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); } } } + &:not(.tags-view-container--chrome) .tags-view-wrapper .tags-view-item.active { + background-color: var(--tags-card-active-bg) !important; + border-color: var(--tags-card-active-border) !important; + color: var(--current-color, #409eff) !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); + + &::before { + background: var(--current-color, #409eff) !important; + } + } } /* 分割窗格覆盖 */ diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 63890d4..c51c8d9 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -43,7 +43,7 @@ const getLogoBackground = computed(() => { // 获取Logo文字颜色 const getLogoTextColor = computed(() => { if (settingsStore.isDark) { - return 'var(--sidebar-text)' + return 'var(--sidebar-logo-text)' } if (settingsStore.navType == 3) { return variables.menuLightText diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts index 9d9620c..2635411 100644 --- a/src/store/modules/settings.ts +++ b/src/store/modules/settings.ts @@ -1,6 +1,7 @@ import defaultSettings from '@/settings' import { useDark, useToggle } from '@vueuse/core' import { useDynamicTitle } from '@/utils/dynamicTitle' +import { handleThemeStyle } from '@/utils/theme' const isDark = useDark() const toggleDark = useToggle(isDark) @@ -64,6 +65,9 @@ const useSettingsStore = defineStore( toggleTheme() { this.isDark = !this.isDark toggleDark() + nextTick(() => { + handleThemeStyle(this.theme) + }) } } }) diff --git a/src/utils/theme.ts b/src/utils/theme.ts index 3e2f518..a66687d 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -1,14 +1,29 @@ // 处理主题样式 export function handleThemeStyle(theme: string): void { - document.documentElement.style.setProperty('--el-color-primary', theme) + const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark') + const primary = isDark ? softenPrimaryForDark(theme) : theme + document.documentElement.style.setProperty('--el-color-primary', primary) for (let i = 1; i <= 9; i++) { - document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme, i / 10)}`) + document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(primary, i / 10)}`) } for (let i = 1; i <= 9; i++) { - document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme, i / 10)}`) + document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(primary, i / 10)}`) } } +/** 混合两种十六进制颜色 */ +export function mixHexColors(fg: string, bg: string, t: number): string { + const a = hexToRgb(String(fg).replace('#', '')) + const b = hexToRgb(String(bg).replace('#', '')) + const out = [0, 1, 2].map((i) => Math.round(a[i] * (1 - t) + b[i] * t)) + return rgbToHex(out[0], out[1], out[2]) +} + +/** 暗色模式下柔化主题色 */ +export function softenPrimaryForDark(theme: string): string { + return mixHexColors(theme, '#2d3036', 0.34) +} + // hex颜色转rgb颜色 export function hexToRgb(str: string): number[] { str = str.replace('#', '')