mirror of
https://gitee.com/JavaLionLi/plus-ui.git
synced 2026-09-15 00:25:07 +08:00
79 lines
2.8 KiB
Vue
79 lines
2.8 KiB
Vue
<template>
|
||
<div :class="{ 'has-logo': showLogo }" :style="{ background: bgColor, '--text-color': textColor }">
|
||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
|
||
<transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
|
||
<el-menu
|
||
:default-active="activeMenu"
|
||
:collapse="isCollapse"
|
||
:style="{ background: bgColor }"
|
||
:text-color="textColor"
|
||
:unique-opened="true"
|
||
:active-text-color="theme"
|
||
:collapse-transition="false"
|
||
mode="vertical"
|
||
>
|
||
<sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />
|
||
</el-menu>
|
||
</transition>
|
||
</el-scrollbar>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Logo from './Logo.vue';
|
||
import SidebarItem from './SidebarItem.vue';
|
||
import useAppStore from '@/store/modules/app';
|
||
import useSettingsStore from '@/store/modules/settings';
|
||
import usePermissionStore from '@/store/modules/permission';
|
||
import { RouteRecordRaw } from 'vue-router';
|
||
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
|
||
const route = useRoute();
|
||
const appStore = useAppStore();
|
||
const settingsStore = useSettingsStore();
|
||
const permissionStore = usePermissionStore();
|
||
const sidebarRouters = computed<RouteRecordRaw[]>(() => permissionStore.getSidebarRoutes());
|
||
const showLogo = computed(() => settingsStore.sidebarLogo);
|
||
// 侧边栏颜色
|
||
const sideTheme = computed(() => settingsStore.sideTheme);
|
||
const theme = computed(() => settingsStore.theme);
|
||
const isCollapse = computed(() => !appStore.sidebar.opened);
|
||
|
||
const activeMenu = computed(() => {
|
||
const { meta, path } = route;
|
||
if (meta.activeMenu) {
|
||
return meta.activeMenu;
|
||
}
|
||
return path;
|
||
});
|
||
|
||
// 动态设置侧边栏背景颜色
|
||
const bgColor = computed(() => (sideTheme.value.startsWith('linear-gradient') ? sideTheme.value : settingsStore.sideTheme));
|
||
|
||
const textColor = computed(() => {
|
||
// 如果 bgColor 是渐变色，直接返回白色
|
||
if (bgColor.value.startsWith('linear-gradient')) {
|
||
return '#ffffff';
|
||
}
|
||
// 如果是纯色，判断是否为深色
|
||
const isDarkColor = isColorDark(bgColor.value);
|
||
return isDarkColor ? '#ffffff' : '#606266FF';
|
||
});
|
||
|
||
// 判断颜色是否为深色的辅助函数
|
||
const isColorDark = (color: string): boolean => {
|
||
// 将颜色转换为 RGB 值
|
||
const hex = color.replace('#', '');
|
||
const r = parseInt(hex.substring(0, 2), 16);
|
||
const g = parseInt(hex.substring(2, 4), 16);
|
||
const b = parseInt(hex.substring(4, 6), 16);
|
||
// 计算亮度（亮度公式：Y = 0.299*R + 0.587*G + 0.114*B）
|
||
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
||
console.log('Brightness:', brightness); // 调试输出
|
||
// 如果亮度小于 128，则认为是深色
|
||
return brightness < 192;
|
||
};
|
||
</script>
|