refactor(theme): 移除侧边栏配色方案并优化主题样式

移除侧边栏配色方案相关代码,统一使用主题变量控制样式
优化表格区域样式,修复布局问题
更新主题色预设,提供更丰富的颜色选择
调整暗黑模式和明亮模式下的样式表现
This commit is contained in:
zhangtao
2026-03-22 21:12:46 +08:00
parent 014b5439da
commit 817a5ffc17
49 changed files with 3684 additions and 2725 deletions
+1 -7
View File
@@ -76,10 +76,4 @@ onBeforeMount(() => {
});
</script>
<style lang="scss" scoped>
// 覆盖 element-plus 的样式
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
</style>
<style lang="scss" scoped></style>
+5 -29
View File
@@ -1,42 +1,17 @@
<!-- 折叠按钮 -->
<template>
<div class="hamburger-wrapper" @click="toggleClick">
<div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }, hamburgerClass]" />
<div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }]" />
</div>
</template>
<script setup lang="ts">
import { useSettingsStore } from "@/store";
import { ThemeMode, SidebarColor } from "@/enums/settings/theme.enum";
import { LayoutMode } from "@/enums/settings/layout.enum";
defineProps({
isActive: { type: Boolean, required: true },
});
const emit = defineEmits(["toggleClick"]);
const settingsStore = useSettingsStore();
const layout = computed(() => settingsStore.layout);
const hamburgerClass = computed(() => {
// 如果暗黑主题
if (settingsStore.theme === ThemeMode.DARK) {
return "hamburger--white";
}
// 如果是混合布局 && 导航背景方案是经典蓝
if (
layout.value === LayoutMode.MIX &&
settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
) {
return "hamburger--white";
}
// 默认返回空字符串
return "";
});
function toggleClick() {
emit("toggleClick");
}
@@ -52,11 +27,12 @@ function toggleClick() {
.hamburger {
vertical-align: middle;
color: var(--el-text-color-secondary);
transform: scaleX(-1);
transition: transform 0.3s ease;
transition: all 0.3s ease;
&--white {
color: #fff;
&:hover {
color: var(--el-color-primary);
}
&.is-active {
+2 -2
View File
@@ -196,13 +196,13 @@ onMounted(() => {
padding: 8px;
margin: 4px;
cursor: pointer;
border: 1px solid #dcdfe6;
border: 1px solid var(--el-border-color);
border-radius: 4px;
transition: all 0.3s;
}
.icon-grid-item:hover {
border-color: #4080ff;
border-color: var(--el-color-primary);
transform: scale(1.2);
}
</style>