From c9552170ba6405d5b897feeda77245a0d6d4f947 Mon Sep 17 00:00:00 2001
From: Azir <2075125282@qq.com>
Date: Thu, 23 May 2024 23:34:32 +0800
Subject: [PATCH 1/2] fix(styles): Fix the issue of button edges on both sides
 of the header

---
 src/layouts/modules/global-header/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/modules/global-header/index.vue b/src/layouts/modules/global-header/index.vue
index 033edd3ee..12103ac41 100644
--- a/src/layouts/modules/global-header/index.vue
+++ b/src/layouts/modules/global-header/index.vue
@@ -47,7 +47,7 @@ const headerMenus = computed(() => {
 </script>
 
 <template>
-  <DarkModeContainer class="h-full flex-y-center shadow-header">
+  <DarkModeContainer class="h-full flex-y-center px-4 shadow-header">
     <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
     <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
     <div v-else class="h-full flex-y-center flex-1-hidden">

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

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

diff --git a/src/components/custom/button-icon.vue b/src/components/custom/button-icon.vue
index 3cf39e59d..a2bec8479 100644
--- a/src/components/custom/button-icon.vue
+++ b/src/components/custom/button-icon.vue
@@ -52,7 +52,7 @@ const cls = computed(() => {
 <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 06c40ec26..f8580db7c 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>