From 1787bf36f37b123de165380e8f9caf7e6bbbf4af Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Fri, 21 Feb 2025 00:11:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8D=E6=B7=B7?=
 =?UTF-8?q?=E5=90=88=E5=B8=83=E5=B1=80=E4=B8=8B=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E9=85=8D=E8=89=B2=E4=B8=BA=E7=99=BD=E8=89=B2=E6=97=B6=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20huamburger=20=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Hamburger/index.vue | 48 ++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 4b624c96..dc79d96d 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,20 +1,38 @@
 <template>
   <div class="hamburger-wrapper" @click="toggleClick">
-    <div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }]" />
+    <div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }, hamburgerClass]" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useSettingsStore } from "@/store";
+import { ThemeEnum, SidebarColorEnum } from "@/enums/ThemeEnum";
+import { LayoutEnum } from "@/enums/LayoutEnum";
+
 defineProps({
-  isActive: {
-    required: true,
-    type: Boolean,
-    default: false,
-  },
+  isActive: { type: Boolean, required: true },
 });
 
 const emit = defineEmits(["toggleClick"]);
 
+const settingsStore = useSettingsStore();
+const layout = computed(() => settingsStore.layout);
+
+const hamburgerClass = computed(() => {
+  // 如果暗黑主题
+  if (settingsStore.theme === ThemeEnum.DARK) {
+    return "hamburger--white";
+  }
+
+  // 如果是混合布局 && 侧边栏配色方案是经典蓝
+  if (
+    layout.value === LayoutEnum.MIX &&
+    settingsStore.sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
+  ) {
+    return "hamburger--white";
+  }
+});
+
 function toggleClick() {
   emit("toggleClick");
 }
@@ -26,20 +44,20 @@ function toggleClick() {
   align-items: center;
   justify-content: center;
   padding: 0 15px;
+  cursor: pointer;
 
   .hamburger {
     vertical-align: middle;
-    cursor: pointer;
     transform: scaleX(-1);
-  }
+    transition: transform 0.3s ease;
 
-  .hamburger.is-active {
-    transform: scaleX(1);
-  }
-}
-.layout-mix {
-  .hamburger-wrapper {
-    color: #fff;
+    &--white {
+      color: #fff;
+    }
+
+    &.is-active {
+      transform: scaleX(1);
+    }
   }
 }
 </style>