feat: minimize panel while inspecting component node (#119)

Author: webfansplz

packages/client/src/pages/components.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useDevToolsBridgeRpc, useDevToolsState } from '@vue/devtools-core'
+import { useDevToolsBridge, useDevToolsBridgeRpc, useDevToolsState } from '@vue/devtools-core'
 
 import type { ComponentBoundingRect, ComponentTreeNode, InspectorState } from '@vue/devtools-kit'
 import { VueIcon, VueInput, VTooltip as vTooltip } from '@vue/devtools-ui'
 import { Pane, Splitpanes } from 'splitpanes'
 
 const bridgeRpc = useDevToolsBridgeRpc()
+const bridge = useDevToolsBridge()
 const treeNode = ref<ComponentTreeNode[]>([])
 const activeComponentId = ref('')
 
@@ -121,13 +122,16 @@ function scrollToComponent(id: string) {
 }
 
 function inspectComponentInspector() {
+  bridge.value.emit('toggle-panel', false)
   bridgeRpc.inspectComponentInspector().then(({ data }) => {
     selectedComponentTree.value = data.id
     selectComponentTree(data.id)
     const linkedList = componentTreeLinkedList.value[data.id]
     linkedList.forEach((id) => {
       componentTreeCollapseMap.value[id] = true
     })
+  }).finally(() => {
+    bridge.value.emit('toggle-panel', true)
   })
 }
 

packages/overlay/src/composables/panel.ts

@@ -15,8 +15,8 @@ export function usePanelVisible() {
     },
   })
 
-  const toggleVisible = () => {
-    visible.value = !visible.value
+  const toggleVisible = (_: unknown, state?: boolean) => {
+    visible.value = state ?? !visible.value
   }
 
   const closePanel = () => {