From 499fe4b8bc96ea33c652a6672c4e1dc0534e2070 Mon Sep 17 00:00:00 2001
From: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Date: Fri, 25 Jul 2025 11:24:13 +0800
Subject: [PATCH] feat: add click outside to close sidebar functionality

---
 src/renderer/src/views/ChatTabView.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/views/ChatTabView.vue b/src/renderer/src/views/ChatTabView.vue
index 78f392189..6b4e1f88e 100644
--- a/src/renderer/src/views/ChatTabView.vue
+++ b/src/renderer/src/views/ChatTabView.vue
@@ -20,6 +20,7 @@
         >
           <div
             v-show="chatStore.isSidebarOpen"
+            ref="sidebarRef"
             :class="[
               'w-60 max-w-60 h-full fixed z-20 lg:relative',
               langStore.dir === 'rtl' ? 'right-0' : 'left-0'
@@ -52,7 +53,8 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from 'vue'
 import { useChatStore } from '@/stores/chat'
-import { computed, watch } from 'vue'
+import { computed, watch, ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { useSettingsStore } from '@/stores/settings'
 import { RENDERER_MODEL_META } from '@shared/presenter'
 import { useArtifactStore } from '@/stores/artifact'
@@ -100,6 +102,15 @@ watch(
   { deep: true }
 )
 
+// 点击外部区域关闭侧边栏
+const sidebarRef = ref<HTMLElement>()
+
+onClickOutside(sidebarRef, () => {
+  if (chatStore.isSidebarOpen) {
+    chatStore.isSidebarOpen = false
+  }
+})
+
 const activeModel = computed(() => {
   let model: RENDERER_MODEL_META | undefined
   const modelId = chatStore.activeThread?.settings.modelId