feat: use treeviewer.vue

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']
   }
 }

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>

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>

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>

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,
+  }
+}

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,
+  }
+}

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>

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

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) => {

packages/types/index.d.ts

@@ -8,6 +8,7 @@ export interface ModuleInfo {
 export interface ComponentTreeNode {
   name: string
   file: string
+  id: string
   children?: ComponentTreeNode[]
 }