mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-04 09:10:59 +00:00
refactor(theme): 移除侧边栏配色方案并优化主题样式
移除侧边栏配色方案相关代码,统一使用主题变量控制样式 优化表格区域样式,修复布局问题 更新主题色预设,提供更丰富的颜色选择 调整暗黑模式和明亮模式下的样式表现
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user