fix(overlay): hide panel when enable inspector (#407)

Author: alexzhang1030

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
 })

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
   }