From c466b7f253a93d3a9b58c658adf6ec75574f5bd8 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 17 六月 2025 09:06:38 +0800
Subject: [PATCH] 公司logo动态切换，整体样式修改
---
src/layout/components/Sidebar/Logo.vue | 78 +++++++++++++++++++++++++++++++-------
1 files changed, 63 insertions(+), 15 deletions(-)
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 962600e..824ed6f 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,22 +1,22 @@
<template>
- <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+ <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
<transition name="sidebarLogoFade">
<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: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
+ <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="鍏徃Logo" />
+ <h1 v-else class="sidebar-title">{{ 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: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
+ <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="鍏徃Logo" />
+ <h1 v-else class="sidebar-title">{{ title }}</h1>
</router-link>
</transition>
</div>
</template>
<script setup>
-import variables from '@/assets/styles/variables.module.scss'
-import logo from '@/assets/logo/logo.png'
-import useSettingsStore from '@/store/modules/settings'
+import { ref, computed, onMounted, watch } from 'vue'
+import useUserStore from '@/store/modules/user'
+import defaultLogo from '@/assets/logo/logo.png' // 瀵煎叆榛樿logo
defineProps({
collapse: {
@@ -25,12 +25,59 @@
}
})
-const title = ref('鑻ヤ緷绠＄悊绯荤粺');
-const settingsStore = useSettingsStore();
-const sideTheme = computed(() => settingsStore.sideTheme);
+const title = import.meta.env.VITE_APP_TITLE
+const userStore = useUserStore()
+
+// 澶勭悊宸ュ巶鍚嶇О锛岀敓鎴愬悎娉曠殑鏂囦欢鍚�
+const cleanFactoryName = computed(() => {
+ if (!userStore.currentFactoryName) return ''
+ return userStore.currentFactoryName.trim()
+})
+
+// 鍔ㄦ�乴ogo璺緞
+const logoUrl = ref('')
+
+// 妫�鏌ogo鏄惁瀛樺湪骞惰缃畊rl
+const updateLogoUrl = () => {
+ if (!cleanFactoryName.value) {
+ logoUrl.value = defaultLogo
+ return
+ }
+
+ // 浣跨敤Vite鐨勫姩鎬佸鍏�
+ try {
+ const dynamicLogo = import.meta.glob('/src/assets/logo/*.png', { eager: true })
+ const logoPath = `/src/assets/logo/${cleanFactoryName.value}.png`
+
+ if (dynamicLogo[logoPath]) {
+ logoUrl.value = dynamicLogo[logoPath].default
+ } else {
+ logoUrl.value = defaultLogo
+ }
+ } catch (error) {
+ console.error('鍔犺浇宸ュ巶Logo澶辫触:', error)
+ logoUrl.value = defaultLogo
+ }
+}
+
+// 鍒濆鍖栧拰鐩戝惉鍙樺寲
+onMounted(() => {
+ updateLogoUrl()
+
+ // 鐩戝惉宸ュ巶鍚嶇О鍙樺寲
+ watch(() => userStore.currentFactoryName, updateLogoUrl)
+})
+
+// 鍥剧墖鍔犺浇閿欒澶勭悊
+const handleImageError = (event) => {
+ console.warn('Logo鍔犺浇澶辫触锛屼娇鐢ㄩ粯璁ogo')
+ logoUrl.value = defaultLogo
+}
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/variables.module.scss';
+
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
@@ -45,7 +92,7 @@
width: 100%;
height: 50px;
line-height: 50px;
- background: #2b2f3a;
+ background: #fff;
text-align: center;
overflow: hidden;
@@ -54,8 +101,9 @@
width: 100%;
& .sidebar-logo {
- width: 32px;
- height: 32px;
+ width: 100%;
+ height: 100%;
+ // height: 32px;
vertical-align: middle;
margin-right: 12px;
}
@@ -63,7 +111,7 @@
& .sidebar-title {
display: inline-block;
margin: 0;
- color: #fff;
+ color: v-bind(getLogoTextColor);
font-weight: 600;
line-height: 50px;
font-size: 14px;
--
Gitblit v1.9.3