feat: handlePanelBlur

src/components/capture/Capture.vue

@@ -160,7 +160,7 @@ const submitAnswer = () => {
             <div v-if="isShowAnswer" class="answer">
               <div>{{ $tm('AlertInfo.capture.hint4') }}</div>
               <a
-                href="http://github.com/KUN1007/kun-galgame-vue"
+                href="https://github.com/KUN1007/kun-galgame-vue/tree/remove-server/src/components/capture"
                 target="_blank"
                 rel="noopener noreferrer"
               >

src/components/top-bar/KUNGalgameTopBar.vue

@@ -97,7 +97,7 @@ onBeforeRouteLeave(() => {
       </div>
       <KUNGalgameUserInfo
         v-if="showKUNGalgameUserPanel"
-        @blur="showKUNGalgameUserPanel = false"
+        @close="showKUNGalgameUserPanel = false"
       />
     </div>
   </div>

src/components/top-bar/KUNGalgameUserInfo.vue

@@ -2,6 +2,22 @@
 import { onMounted, ref } from 'vue'
 const container = ref<HTMLElement>()
 
+const emit = defineEmits({
+  close,
+})
+
+// 失去焦点时关闭面板
+const handlePanelBlur = async () => {
+  // 等待一段时间，不然会直接导致面板关闭
+  await new Promise((resolve) => {
+    setTimeout(resolve, 107)
+  })
+  emit('close')
+}
+
+// 退出登录
+const logOut = () => {}
+
 onMounted(() => {
   // 自动获取焦点
   container.value?.focus()
@@ -9,7 +25,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="container" tabindex="-1" class="container">
+  <div ref="container" tabindex="-1" class="container" @blur="handlePanelBlur">
     <span class="triangle1"></span>
     <span class="triangle2"></span>
     <div class="kungalgamer">