style: 实现主题弹窗点击外部关闭弹窗

src/views/Layout/src/components/Header/HeaderView.vue

@@ -17,7 +17,6 @@ const route = useRoute()
 const router = useRouter()
 const headerSearch = useHeaderSearch()
 
-const themePopoverRef = ref()
 // 切换系统主题颜色
 const toggleThemeMode = (theme: string) => {
   themeStore.toggleTheme(theme, true)
@@ -159,6 +158,25 @@ const togglePopover = () => {
 const closePopover = () => {
   isPopoverVisible.value = false
 }
+
+const themePopoverRef = ref()
+// // 点击外部关闭逻辑
+const handleClickOutside = (event) => {
+  const popoverElementRef = themePopoverRef.value?.popperRef?.contentRef
+  if (popoverElementRef && !popoverElementRef.contains(event.target)) {
+    isPopoverVisible.value = false
+  }
+}
+
+const handleShowThemePopover = () => {
+  isPopoverVisible.value = true
+  document.addEventListener('click', handleClickOutside)
+}
+
+const handleCloseThemePopover = () => {
+  isPopoverVisible.value = false
+  document.removeEventListener('click', handleClickOutside)
+}
 </script>
 
 <template>
@@ -187,10 +205,12 @@ const closePopover = () => {
         placement="bottom-end"
         :width="400"
         trigger="click"
+        themePopoverRef
+        ref="themePopoverRef"
         :visible="isPopoverVisible"
         popper-class="toggle-theme-popover"
-        @show="isPopoverVisible = true"
-        @hide="isPopoverVisible = false"
+        @show="handleShowThemePopover"
+        @hide="handleCloseThemePopover"
       >
         <div>
           <!-- Popover content remains the same -->