From 9968787228bec20cb5feb0745ff85d6b4899b806 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 2 Jan 2024 22:59:13 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=9C=80=E5=B7=A6=E4=B8=8B=E8=A7=92=E7=9A=84?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E3=80=81=E6=8A=98=E5=8F=A0=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=9C=A8=E4=BA=AE=E7=99=BD=E4=B8=BB=E9=A2=98=E9=85=8D=E8=89=B2?=
 =?UTF-8?q?=E4=B8=8B=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/sidebar/leftCollapse.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/layout/components/sidebar/leftCollapse.vue b/src/layout/components/sidebar/leftCollapse.vue
index ad474fc1ba..f72be40b2e 100644
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
 
@@ -22,14 +23,14 @@ const iconClass = computed(() => {
     "h-[16px]",
     "inline-block",
     "align-middle",
-    "text-primary",
     "cursor-pointer",
-    "duration-[100ms]",
-    "hover:text-primary",
-    "dark:hover:!text-white"
+    "duration-[100ms]"
   ];
 });
 
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+const themeColor = computed(() => $storage.layout?.themeColor);
+
 const emit = defineEmits<{
   (e: "toggleClick"): void;
 }>();
@@ -40,7 +41,7 @@ const toggleClick = () => {
 </script>
 
 <template>
-  <div class="container">
+  <div class="collapse-container">
     <el-tooltip
       placement="right"
       :visible="visible"
@@ -49,7 +50,7 @@ const toggleClick = () => {
     >
       <IconifyIconOffline
         :icon="MenuFold"
-        :class="iconClass"
+        :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
         :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
         @click="toggleClick"
         @mouseenter="visible = true"
@@ -60,7 +61,7 @@ const toggleClick = () => {
 </template>
 
 <style lang="scss" scoped>
-.container {
+.collapse-container {
   position: absolute;
   bottom: 0;
   width: 100%;