From 917b447a39785a1f255aa37f6505c16784abfebd Mon Sep 17 00:00:00 2001
From: flippedround <734243792@qq.com>
Date: Thu, 28 Nov 2024 17:18:50 +0800
Subject: [PATCH] feat: use treeviewer.vue

---
 packages/client/auto-imports.d.ts             | 322 +-----------------
 packages/client/components.d.ts               |   2 +
 .../client/src/components/basic/NodeTag.vue   |  28 ++
 .../src/components/basic/ToggleExpanded.vue   |  14 +
 .../client/src/components/tree/TreeViewer.vue |  73 ++++
 packages/client/src/composables/select.ts     |  27 ++
 .../client/src/composables/toggle-expanded.ts |  32 ++
 packages/client/src/pages/components.vue      |  20 +-
 packages/client/src/stores/init.ts            |  10 +-
 packages/plugin/inspect/initMPClient.js       |   9 +-
 packages/types/index.d.ts                     |   1 +
 11 files changed, 205 insertions(+), 333 deletions(-)
 create mode 100644 packages/client/src/components/basic/NodeTag.vue
 create mode 100644 packages/client/src/components/basic/ToggleExpanded.vue
 create mode 100644 packages/client/src/components/tree/TreeViewer.vue
 create mode 100644 packages/client/src/composables/select.ts
 create mode 100644 packages/client/src/composables/toggle-expanded.ts

diff --git a/packages/client/auto-imports.d.ts b/packages/client/auto-imports.d.ts
index 42f0384..5c483a2 100644
--- a/packages/client/auto-imports.d.ts
+++ b/packages/client/auto-imports.d.ts
@@ -19,10 +19,12 @@ declare global {
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createExpandedContext: typeof import('./src/composables/toggle-expanded')['createExpandedContext']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
+  const createSelectedContext: typeof import('./src/composables/select')['createSelectedContext']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
@@ -259,6 +261,7 @@ declare global {
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSelect: typeof import('./src/composables/select')['useSelect']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
@@ -289,6 +292,7 @@ declare global {
   const useToNumber: typeof import('@vueuse/core')['useToNumber']
   const useToString: typeof import('@vueuse/core')['useToString']
   const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useToggleExpanded: typeof import('./src/composables/toggle-expanded')['useToggleExpanded']
   const useTransition: typeof import('@vueuse/core')['useTransition']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
@@ -324,7 +328,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
 // for vue template auto import
@@ -346,10 +350,12 @@ declare module 'vue' {
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
+    readonly createExpandedContext: UnwrapRef<typeof import('./src/composables/toggle-expanded')['createExpandedContext']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
+    readonly createSelectedContext: UnwrapRef<typeof import('./src/composables/select')['createSelectedContext']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
@@ -406,6 +412,7 @@ declare module 'vue' {
     readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
     readonly openInEditor: UnwrapRef<typeof import('./src/composables/openInEditor')['openInEditor']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
@@ -523,6 +530,7 @@ declare module 'vue' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useId: UnwrapRef<typeof import('vue')['useId']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
     readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
@@ -540,6 +548,7 @@ declare module 'vue' {
     readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -576,6 +585,7 @@ declare module 'vue' {
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSelect: UnwrapRef<typeof import('./src/composables/select')['useSelect']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
@@ -588,6 +598,7 @@ declare module 'vue' {
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
@@ -604,314 +615,7 @@ declare module 'vue' {
     readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
     readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
     readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
-    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
-    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
-    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
-    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
-    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
-    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
-    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
-    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
-    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
-    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
-    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
-    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
-    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
-    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
-    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
-    readonly watch: UnwrapRef<typeof import('vue')['watch']>
-    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
-    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
-    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
-    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
-    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
-    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
-    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
-    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
-    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
-    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
-    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
-    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
-    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
-    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
-    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
-  }
-}
-declare module '@vue/runtime-core' {
-  interface GlobalComponents {}
-  interface ComponentCustomProperties {
-    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
-    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
-    readonly builtinTab: UnwrapRef<typeof import('./src/constants/tab')['builtinTab']>
-    readonly computed: UnwrapRef<typeof import('vue')['computed']>
-    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
-    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
-    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
-    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
-    readonly consoleTypeColorMap: UnwrapRef<typeof import('./src/constants/stateColorMap')['consoleTypeColorMap']>
-    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
-    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
-    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
-    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
-    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
-    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
-    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
-    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
-    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
-    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
-    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
-    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
-    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
-    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
-    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
-    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
-    readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['definePage']>
-    readonly devtoolsClientState: UnwrapRef<typeof import('./src/composables/state')['devtoolsClientState']>
-    readonly downloadBase64File: UnwrapRef<typeof import('./src/composables/downloadBase64File')['downloadBase64File']>
-    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
-    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
-    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
-    readonly formatStateType: UnwrapRef<typeof import('./src/composables/formatStateType')['formatStateType']>
-    readonly formatStateValue: UnwrapRef<typeof import('./src/composables/format')['formatStateValue']>
-    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
-    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
-    readonly getStateValueType: UnwrapRef<typeof import('./src/composables/format')['getStateValueType']>
-    readonly h: UnwrapRef<typeof import('vue')['h']>
-    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
-    readonly inject: UnwrapRef<typeof import('vue')['inject']>
-    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
-    readonly isArray: UnwrapRef<typeof import('./src/composables/formatStateType')['isArray']>
-    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
-    readonly isMap: UnwrapRef<typeof import('./src/composables/formatStateType')['isMap']>
-    readonly isPlainObject: UnwrapRef<typeof import('./src/composables/formatStateType')['isPlainObject']>
-    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
-    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
-    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
-    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly isRegExp: UnwrapRef<typeof import('./src/composables/formatStateType')['isRegExp']>
-    readonly isSet: UnwrapRef<typeof import('./src/composables/formatStateType')['isSet']>
-    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
-    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
-    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
-    readonly objectToString: UnwrapRef<typeof import('./src/composables/formatStateType')['objectToString']>
-    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
-    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteUpdate']>
-    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
-    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
-    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
-    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
-    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
-    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
-    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
-    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
-    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
-    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
-    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
-    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
-    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
-    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
-    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
-    readonly openInEditor: UnwrapRef<typeof import('./src/composables/openInEditor')['openInEditor']>
-    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
-    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
-    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
-    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
-    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
-    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
-    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
-    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
-    readonly ref: UnwrapRef<typeof import('vue')['ref']>
-    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
-    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
-    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
-    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
-    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
-    readonly renderCodeHighlight: UnwrapRef<typeof import('./src/composables/shiki')['renderCodeHighlight']>
-    readonly resetDevtoolsClientState: UnwrapRef<typeof import('./src/composables/state')['resetDevtoolsClientState']>
-    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
-    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
-    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
-    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
-    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
-    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly shiki: UnwrapRef<typeof import('./src/composables/shiki')['shiki']>
-    readonly stateTypeColorMap: UnwrapRef<typeof import('./src/constants/stateColorMap')['stateTypeColorMap']>
-    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
-    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
-    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
-    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
-    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
-    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
-    readonly toRawType: UnwrapRef<typeof import('./src/composables/formatStateType')['toRawType']>
-    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
-    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
-    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
-    readonly toTypeString: UnwrapRef<typeof import('./src/composables/formatStateType')['toTypeString']>
-    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
-    readonly trpc: UnwrapRef<typeof import('./src/trpc/index')['trpc']>
-    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
-    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
-    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
-    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
-    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
-    readonly unref: UnwrapRef<typeof import('vue')['unref']>
-    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
-    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
-    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
-    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
-    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
-    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
-    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
-    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
-    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
-    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
-    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
-    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
-    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
-    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
-    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
-    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
-    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
-    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
-    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
-    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
-    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
-    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
-    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
-    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
-    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
-    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
-    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
-    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
-    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
-    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
-    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
-    readonly useCopy: UnwrapRef<typeof import('./src/composables/editor')['useCopy']>
-    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
-    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
-    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
-    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
-    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
-    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
-    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
-    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
-    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
-    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
-    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
-    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
-    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
-    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
-    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
-    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
-    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
-    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
-    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
-    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
-    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
-    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
-    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
-    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
-    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
-    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
-    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
-    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
-    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
-    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
-    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
-    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
-    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
-    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
-    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
-    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
-    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
-    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
-    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
-    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
-    readonly useInitState: UnwrapRef<typeof import('./src/stores/init')['useInitState']>
-    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
-    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
-    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
-    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
-    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
-    readonly useLink: UnwrapRef<typeof import('vue-router/auto')['useLink']>
-    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
-    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
-    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
-    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
-    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
-    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
-    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
-    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
-    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
-    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
-    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
-    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
-    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
-    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
-    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
-    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
-    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
-    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
-    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
-    readonly usePagesState: UnwrapRef<typeof import('./src/stores/pages')['usePagesState']>
-    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
-    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
-    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
-    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
-    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
-    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
-    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
-    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
-    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
-    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
-    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
-    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
-    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
-    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
-    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
-    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
-    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
-    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
-    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
-    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
-    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
-    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
-    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
-    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
-    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
-    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
-    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
-    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
-    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
-    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
-    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
-    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
-    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
-    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
-    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
-    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
-    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
-    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
-    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
-    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
-    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
-    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
-    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
-    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
-    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
-    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
-    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
-    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
-    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
+    readonly useToggleExpanded: UnwrapRef<typeof import('./src/composables/toggle-expanded')['useToggleExpanded']>
     readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
     readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
     readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
diff --git a/packages/client/components.d.ts b/packages/client/components.d.ts
index e857682..4af0c39 100644
--- a/packages/client/components.d.ts
+++ b/packages/client/components.d.ts
@@ -22,6 +22,7 @@ declare module 'vue' {
     IconTitle: typeof import('./src/components/common/IconTitle.vue')['default']
     IframeView: typeof import('./src/components/common/IframeView.vue')['default']
     Navbar: typeof import('./src/components/common/Navbar.vue')['default']
+    NodeTag: typeof import('./src/components/basic/NodeTag.vue')['default']
     PanelGrids: typeof import('./src/components/common/PanelGrids.vue')['default']
     RootStateViewer: typeof import('./src/components/state/RootStateViewer.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -34,5 +35,6 @@ declare module 'vue' {
     StateFieldsTree: typeof import('./src/components/state/StateFieldsTree.vue')['default']
     TabIcon: typeof import('./src/components/TabIcon.vue')['default']
     ToggleExpanded: typeof import('./src/components/common/ToggleExpanded.vue')['default']
+    TreeViewer: typeof import('./src/components/tree/TreeViewer.vue')['default']
   }
 }
diff --git a/packages/client/src/components/basic/NodeTag.vue b/packages/client/src/components/basic/NodeTag.vue
new file mode 100644
index 0000000..02a7a95
--- /dev/null
+++ b/packages/client/src/components/basic/NodeTag.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { InspectorNodeTag } from '@vue/devtools-kit'
+import { vTooltip } from '@vue/devtools-ui'
+
+defineProps<{
+  tag: InspectorNodeTag
+}>()
+
+function toHex(color: number) {
+  return color.toString(16).padStart(6, '0')
+}
+</script>
+
+<template>
+  <span
+    v-tooltip="{
+      content: tag.tooltip,
+      html: true,
+    }"
+    :style="{
+      color: `#${toHex(tag.textColor)}`,
+      backgroundColor: `#${toHex(tag.backgroundColor)}`,
+    }"
+    class="ml-2 rounded-sm px-1 text-[0.75rem] leading-snug"
+  >
+    {{ tag.label }}
+  </span>
+</template>
diff --git a/packages/client/src/components/basic/ToggleExpanded.vue b/packages/client/src/components/basic/ToggleExpanded.vue
new file mode 100644
index 0000000..d813f4e
--- /dev/null
+++ b/packages/client/src/components/basic/ToggleExpanded.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  value: boolean
+}>()
+</script>
+
+<template>
+  <i
+    class="i-radix-icons:triangle-right flex-none text-4 op-50 transition-base"
+    :class="{
+      'transform rotate-90': value,
+    }"
+  />
+</template>
diff --git a/packages/client/src/components/tree/TreeViewer.vue b/packages/client/src/components/tree/TreeViewer.vue
new file mode 100644
index 0000000..a02c798
--- /dev/null
+++ b/packages/client/src/components/tree/TreeViewer.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { ComponentTreeNode } from '@uni-helper/devtools-types'
+import ToggleExpanded from '~/components/basic/ToggleExpanded.vue'
+import ComponentTreeViewer from '~/components/tree/TreeViewer.vue'
+import { useSelect } from '~/composables/select'
+import { useToggleExpanded } from '~/composables/toggle-expanded'
+
+withDefaults(defineProps<{
+  data: ComponentTreeNode[]
+  depth: number
+  withTag: boolean
+}>(), {
+  depth: 0,
+  withTag: false,
+})
+
+const emit = defineEmits(['hover', 'leave'])
+
+const selectedNodeId = defineModel()
+const { expanded, toggleExpanded } = useToggleExpanded()
+const { select: _select } = useSelect()
+
+function select(id: string) {
+  selectedNodeId.value = id
+}
+</script>
+
+<template>
+  <div
+    v-for="(item, index) in data"
+    :key="index"
+    :class="{
+      'min-w-max': depth === 0,
+    }"
+  >
+    <div
+      class="group flex cursor-pointer items-center justify-between rounded-1 hover:(bg-primary-300 dark:bg-gray-600)"
+      :style=" { paddingLeft: `${15 * depth + 4}px` }"
+      :class="{ 'bg-primary-600! active': selectedNodeId === item.id }"
+      @click="select(item.id)"
+      @dblclick="toggleExpanded(item.id)"
+      @mouseover="() => emit('hover', item.id)"
+      @mouseleave="() => emit('leave')"
+    >
+      <div>
+        <ToggleExpanded
+          v-if="item?.children?.length"
+          :value="expanded.includes(item.id)"
+          class="[.active_&]:op20 group-hover:op20"
+          @click.stop="toggleExpanded(item.id)"
+        />
+        <!-- placeholder -->
+        <span v-else pl5 />
+        <span font-state-field>
+          <span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
+          <span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ item.name }}</span>
+          <span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&gt;</span>
+        </span>
+      </div>
+      <div
+        v-if="item.file"
+        i-material-symbols:my-location-outline-rounded mr3 op-0 group-focus:op50 group-hover:op-50
+        class="hover:op-100!"
+        @click="openInEditor(item.file)"
+      />
+    </div>
+    <div v-if="item?.children?.length && (expanded.includes(item.id) || depth < 2)">
+      <ComponentTreeViewer
+        v-model="selectedNodeId" :data="item?.children" :depth="depth + 1" :with-tag="withTag" @hover="(id) => emit('hover', id)" @leave="emit('leave')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/packages/client/src/composables/select.ts b/packages/client/src/composables/select.ts
new file mode 100644
index 0000000..2d6356d
--- /dev/null
+++ b/packages/client/src/composables/select.ts
@@ -0,0 +1,27 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide, ref } from 'vue'
+
+const SelectedSymbolKey: InjectionKey<Ref<string>> = Symbol('SelectedSymbolKey')
+
+export function createSelectedContext() {
+  const selected = ref<string>('')
+
+  provide<Ref<string>>(SelectedSymbolKey, selected)
+
+  return {
+    selected,
+  }
+}
+
+export function useSelect() {
+  const selected = inject<Ref<string>>(SelectedSymbolKey, ref(''))!
+
+  function select(value: string) {
+    selected.value = value
+  }
+
+  return {
+    selected,
+    select,
+  }
+}
diff --git a/packages/client/src/composables/toggle-expanded.ts b/packages/client/src/composables/toggle-expanded.ts
new file mode 100644
index 0000000..36f1d2b
--- /dev/null
+++ b/packages/client/src/composables/toggle-expanded.ts
@@ -0,0 +1,32 @@
+import type { Ref } from 'vue'
+import { inject, provide, ref } from 'vue'
+
+const expandedKey = 'expanded-state'
+
+export function createExpandedContext(id = '') {
+  const expanded = ref<string[]>([])
+
+  provide<Ref<string[]>>(`${expandedKey}-${id}`, expanded)
+
+  return {
+    expanded,
+  }
+}
+
+export function useToggleExpanded(id = '') {
+  const expanded = inject<Ref<string[]>>(`${expandedKey}-${id}`, ref([]))!
+
+  function toggleExpanded(key: string) {
+    const index = expanded.value.indexOf(key)
+    if (index === -1)
+      expanded.value.push(key)
+
+    else
+      expanded.value.splice(index, 1)
+  }
+
+  return {
+    expanded,
+    toggleExpanded,
+  }
+}
diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index 9f4e685..111d858 100644
--- a/packages/client/src/pages/components.vue
+++ b/packages/client/src/pages/components.vue
@@ -1,25 +1,21 @@
 <script setup lang="ts">
-const { initState } = useInitState()
+import type { ComponentTreeNode } from '@uni-helper/devtools-types'
 
 const filterName = ref('')
-trpc.onUpdate.subscribe('test', {
-  onData: (data) => {
-    console.log('onData', data)
-  },
-  onStarted() {
-    console.log('onStarted')
+
+const data = ref<ComponentTreeNode[]>()
+trpc.onComponentTree.subscribe(undefined, {
+  onData: (value) => {
+    data.value = [value]
   },
 })
-async function handleClick() {
-  await trpc.update.mutate('123123')
-}
 </script>
 
 <template>
-  <PanelGrids block h-screen of-auto @click="handleClick">
+  <PanelGrids block h-screen of-auto>
     <Navbar v-model:search="filterName" :no-padding="true" />
     <div no-scrollbar flex-1 select-none overflow-hidden px2>
-      <ComponentTreeNode :data="initState!.components" />
+      <TreeViewer :data="data!" :with-tag="true" :depth="0" />
     </div>
   </PanelGrids>
 </template>
diff --git a/packages/client/src/stores/init.ts b/packages/client/src/stores/init.ts
index cc8eeb4..d901039 100644
--- a/packages/client/src/stores/init.ts
+++ b/packages/client/src/stores/init.ts
@@ -1,8 +1,7 @@
-import type { InitState, VersionState } from '@uni-helper/devtools-types'
+import type { VersionState } from '@uni-helper/devtools-types'
 
 export const useInitState = createGlobalState(
   () => {
-    const initState = ref<InitState>({})
     const versionState = ref<VersionState>()
     const currentPage = ref('')
     const loading = ref(false)
@@ -18,18 +17,11 @@ export const useInitState = createGlobalState(
           console.log('currentPage', data)
         },
       })
-      trpc.onComponentTree.subscribe(undefined, {
-        onData: (data) => {
-          console.log(data)
-          initState.value.components = data
-        },
-      })
     }
 
     return {
       init,
       loading,
-      initState,
       currentPage,
       versionState,
     }
diff --git a/packages/plugin/inspect/initMPClient.js b/packages/plugin/inspect/initMPClient.js
index 42c21e4..067ff0e 100644
--- a/packages/plugin/inspect/initMPClient.js
+++ b/packages/plugin/inspect/initMPClient.js
@@ -34,7 +34,11 @@ function extractComponentInfo(component) {
   if (name === 'UniDevTools')
     return null
   const file = type.filePath
-  const componentInfo = { name, file }
+  const componentInfo = {
+    name,
+    file,
+    id: component.$.uid,
+  }
 
   if (component.$children?.length > 0) {
     componentInfo.children = component.$children.map(extractComponentInfo).filter(c => c !== null)
@@ -44,6 +48,7 @@ function extractComponentInfo(component) {
 }
 
 export function setCurrentPage() {
+  console.log('initMPClient')
   onShow(() => {
     // eslint-disable-next-line no-undef
     const pages = getCurrentPages()
@@ -60,8 +65,6 @@ export function setCurrentPage() {
     trpc.setComponentTree.subscribe(componentTree, {
       onComplete: () => {},
     })
-    console.log('setCurrentPage', currentPage.route)
-    console.log('setComponentTree', componentTree)
 
     trpc.onChangeCurrentPage.subscribe(undefined, {
       onData: (data) => {
diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
index a1ab06c..84d2807 100644
--- a/packages/types/index.d.ts
+++ b/packages/types/index.d.ts
@@ -8,6 +8,7 @@ export interface ModuleInfo {
 export interface ComponentTreeNode {
   name: string
   file: string
+  id: string
   children?: ComponentTreeNode[]
 }