From 792df0a50074824ad08246265bdbc4904f0c3b59 Mon Sep 17 00:00:00 2001
From: Alex <alexzhang1030@foxmail.com>
Date: Tue, 28 May 2024 11:00:10 +0800
Subject: [PATCH] fix(overlay): hide panel when enable inspector

---
 packages/overlay/src/App.vue              | 17 +++++++++++++++++
 packages/overlay/src/composables/panel.ts |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index 433b7efc..980af8b6 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -81,9 +81,26 @@ const vueInspector = ref()
 onDevToolsConnected(() => {
   devtools.api.getVueInspector().then((inspector) => {
     vueInspector.value = inspector
+
+    let previousPanelVisible = panelVisible.value
+
+    vueInspector.value.onEnabled = () => {
+      previousPanelVisible = panelVisible.value
+      togglePanelVisible(undefined, false)
+    }
+
+    vueInspector.value.onDisabled = () => {
+      togglePanelVisible(undefined, previousPanelVisible)
+    }
   })
 })
 
+addEventListener('keyup', (e) => {
+  if (e.key.toLowerCase() === 'escape' && vueInspector.value?.enabled) {
+    vueInspector.value?.disable()
+  }
+})
+
 const vueInspectorEnabled = computed(() => {
   return !!vueInspector.value
 })
diff --git a/packages/overlay/src/composables/panel.ts b/packages/overlay/src/composables/panel.ts
index c315d3a8..a99f23d9 100644
--- a/packages/overlay/src/composables/panel.ts
+++ b/packages/overlay/src/composables/panel.ts
@@ -15,7 +15,7 @@ export function usePanelVisible() {
     },
   })
 
-  const toggleVisible = (_: unknown, state?: boolean) => {
+  const toggleVisible = (_?: unknown, state?: boolean) => {
     visible.value = state ?? !visible.value
   }