From cfe078369d252ab26a1d670db96a5fc82e1e8108 Mon Sep 17 00:00:00 2001
From: Azir <2075125282@qq.com>
Date: Thu, 23 May 2024 23:27:11 +0800
Subject: [PATCH] fix(styles): Fix the issue where the header button remains
 highlighted after clicking

---
 src/components/custom/button-icon.vue              | 14 +++++++-------
 .../global-header/components/theme-button.vue      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/custom/button-icon.vue b/src/components/custom/button-icon.vue
index 3cf39e59..b2adae21 100644
--- a/src/components/custom/button-icon.vue
+++ b/src/components/custom/button-icon.vue
@@ -28,12 +28,6 @@ const props = withDefaults(defineProps<Props>(), {
   zIndex: 98
 });
 
-interface ButtonProps {
-  className: string;
-}
-
-const [DefineButton, Button] = createReusableTemplate<ButtonProps>();
-
 const cls = computed(() => {
   let clsStr = props.class;
 
@@ -47,12 +41,18 @@ const cls = computed(() => {
 
   return clsStr;
 });
+
+interface ButtonProps {
+  className: string;
+}
+
+const [DefineButton, Button] = createReusableTemplate<ButtonProps>();
 </script>
 
 <template>
   <!-- define component start: Button -->
   <DefineButton v-slot="{ $slots, className }">
-    <NButton quaternary :class="className">
+    <NButton quaternary :class="className" :focusable="false">
       <div class="flex-center gap-8px">
         <component :is="$slots.default" />
       </div>
diff --git a/src/layouts/modules/global-header/components/theme-button.vue b/src/layouts/modules/global-header/components/theme-button.vue
index 06c40ec2..f8580db7 100644
--- a/src/layouts/modules/global-header/components/theme-button.vue
+++ b/src/layouts/modules/global-header/components/theme-button.vue
@@ -13,7 +13,7 @@ const appStore = useAppStore();
   <ButtonIcon
     icon="majesticons:color-swatch-line"
     :tooltip-content="$t('icon.themeConfig')"
-    @click="appStore.openThemeDrawer"
+    @click.stop="appStore.openThemeDrawer"
   />
 </template>