feat: 合并master分支代码

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

@@ -23,8 +23,6 @@ const route = useRoute()
 const router = useRouter()
 const headerSearch = useHeaderSearch()
 
-const trainingCardRef = ref()
-
 // 切换系统主题颜色
 const toggleThemeMode = (theme: string) => {
   themeStore.toggleTheme(theme, true)
@@ -199,6 +197,24 @@ onMounted(() => {
     notificationMsgStore.hasUnreadMessages()
   }
 })
+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>
@@ -244,10 +260,12 @@ onMounted(() => {
         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 -->