feat: components tree panel (#655)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/devtools/client/pages/modules/components-tree.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Components as VueComponents } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
+
+const { connected } = useVueDevToolsState()
+const client = useClient()
+const openInEditor = useOpenInEditor()
+
+definePageMeta({
+  icon: 'i-carbon-category',
+  title: 'Components Tree',
+  layout: 'full',
+  show: () => {
+    const client = useClient()
+    return () => !!client.value
+  },
+  order: 3,
+})
+
+function togglePanel(status: boolean) {
+  if (status)
+    client.value.devtools.open()
+  else
+    client.value.devtools.close()
+}
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <VueComponents
+      v-if="connected"
+      @on-inspect-component-start="togglePanel(false)"
+      @on-inspect-component-end="togglePanel(true)"
+      @open-in-editor="openInEditor"
+    />
+    <NLoading v-else>
+      Connecting....
+    </NLoading>
+  </div>
+</template>

packages/devtools/client/pages/modules/imports.vue

@@ -5,7 +5,7 @@ import Fuse from 'fuse.js'
 definePageMeta({
   icon: 'carbon-function',
   title: 'Imports',
-  order: 3,
+  order: 4,
 })
 
 const config = useServerConfig()

packages/devtools/client/pages/modules/modules.vue

@@ -2,7 +2,7 @@
 definePageMeta({
   icon: 'carbon-3d-mpr-toggle',
   title: 'Modules',
-  order: 4,
+  order: 5,
 })
 
 const installModuleOpen = ref(false)