From 5470429a79313630a7ddef601de1d89e7dada754 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 22 五月 2026 09:14:12 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_NEW_pro' into dev-new_pro_OA
---
src/layout/components/Sidebar/Logo.vue | 94 +++++++++++++++++++++++++++++++++++++---------
1 files changed, 75 insertions(+), 19 deletions(-)
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 57c2b4b..1a66c4a 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -4,7 +4,7 @@
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img :src="faviconUrl" class="sidebar-logo sidebar-favicon" alt="绔欑偣鍥炬爣" />
</router-link>
- <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+ <router-link v-else key="expand" class="sidebar-logo-link" :style="expandLogoLinkStyle" to="/">
<img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="鍏徃Logo" />
<h1 v-if="!logoUrl" class="sidebar-title">{{ title }}</h1>
</router-link>
@@ -35,6 +35,14 @@
})
const logoUrl = ref('')
+
+const expandLogoLinkStyle = computed(() => {
+ if (!logoUrl.value) {
+ return { '--logo-bg-image': 'none' }
+ }
+ const escaped = String(logoUrl.value).replace(/"/g, '\\"')
+ return { '--logo-bg-image': `url("${escaped}")` }
+})
const updateLogoUrl = () => {
if (!cleanFactoryName.value) {
@@ -82,32 +90,63 @@
.sidebar-logo-container {
position: relative;
width: 100% !important;
- height: 56px !important;
- line-height: 56px;
- background: rgba(255, 255, 255, 0.78);
- border: 1px solid var(--surface-border);
- border-radius: 22px;
- text-align: center;
+ height: 78px !important;
+ line-height: 78px;
+ background: transparent;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ text-align: left;
overflow: hidden;
- box-shadow: var(--shadow-sm);
+ box-shadow: none;
+ backdrop-filter: none;
+ transition: all 0.3s ease;
.sidebar-logo-link {
+ position: relative;
+ isolation: isolate;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
- padding: 0 18px 0 14px;
+ padding: 0;
+
+ &::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background-image: var(--logo-bg-image);
+ background-size: cover;
+ background-position: center;
+ opacity: 0.26;
+ filter: blur(8px) saturate(0.9);
+ transform: scale(1.06);
+ pointer-events: none;
+ z-index: 0;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, rgba(16, 49, 89, 0.18), rgba(16, 49, 89, 0.08));
+ pointer-events: none;
+ z-index: 0;
+ }
}
.sidebar-logo {
- width: auto;
- max-width: 250px;
- max-height: 50px;
- height: auto;
+ width: 100%;
+ height: 100%;
+ max-width: none;
+ max-height: none;
+ padding: 6px 10px;
vertical-align: middle;
object-fit: contain;
object-position: center;
+ filter: none;
+ display: block;
+ position: relative;
+ z-index: 1;
}
.sidebar-title {
@@ -119,23 +158,40 @@
font-size: 14px;
font-family: "Segoe UI", "PingFang SC", sans-serif;
vertical-align: middle;
+ position: relative;
+ z-index: 1;
}
&.collapse {
.sidebar-logo-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
padding: 0;
+
+ &::before,
+ &::after {
+ display: none;
+ }
}
.sidebar-logo {
- max-width: 30px;
- max-height: 30px;
+ width: calc(100% - 8px);
+ height: calc(100% - 8px);
+ max-width: none;
+ max-height: none;
+ padding: 4px;
+ margin: 0 auto;
+ filter: none;
+ object-fit: contain;
+ object-position: center;
}
.sidebar-favicon {
- width: 24px;
- height: 24px;
- max-width: 24px;
- max-height: 24px;
+ width: calc(100% - 8px);
+ height: calc(100% - 8px);
+ max-width: none;
+ max-height: none;
}
}
}
--
Gitblit v1.9.3