mirror of
https://gitee.com/JavaLionLi/plus-ui.git
synced 2026-09-15 00:25:07 +08:00
116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<template>
|
||
<div class="sidebar-logo-container" :class="{ collapse: collapse }" :style="{ backgroundColor: bgColor }">
|
||
<transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
|
||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||
<h1 v-else class="sidebar-title" :style="{ color: textColor }">
|
||
{{ title }}
|
||
</h1>
|
||
</router-link>
|
||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||
<h1 class="sidebar-title" :style="{ color: textColor }">
|
||
{{ title }}
|
||
</h1>
|
||
</router-link>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import logo from '@/assets/logo/logo.png';
|
||
import useSettingsStore from '@/store/modules/settings';
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
|
||
defineProps({
|
||
collapse: {
|
||
type: Boolean,
|
||
required: true
|
||
}
|
||
});
|
||
|
||
const title = ref('RuoYi-Vue-Plus');
|
||
const settingsStore = useSettingsStore();
|
||
const sideTheme = computed(() => settingsStore.sideTheme);
|
||
|
||
// 动态设置背景颜色
|
||
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>
|
||
|
||
<style lang="scss" scoped>
|
||
.sidebarLogoFade-enter-active {
|
||
transition: opacity 1.5s;
|
||
}
|
||
|
||
.sidebarLogoFade-enter,
|
||
.sidebarLogoFade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
.sidebar-logo-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
|
||
& .sidebar-logo-link {
|
||
height: 100%;
|
||
width: 100%;
|
||
|
||
& .sidebar-logo {
|
||
width: 32px;
|
||
height: 32px;
|
||
vertical-align: middle;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
& .sidebar-title {
|
||
display: inline-block;
|
||
margin: 0;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
font-size: 14px;
|
||
font-family:
|
||
Avenir,
|
||
Helvetica Neue,
|
||
Arial,
|
||
Helvetica,
|
||
sans-serif;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
&.collapse {
|
||
.sidebar-logo {
|
||
margin-right: 0px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|