feat: Add event and props

Author: Azurewarth0920

packages/applet/src/modules/components/index.vue

@@ -16,9 +16,12 @@ import ComponentTree from '~/components/tree/TreeViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import { createSelectedContext } from '~/composables/select'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
-import { searchDeepInObject } from '~/utils'
+import { getValidNodeId, searchDeepInObject } from '~/utils'
 
-const emit = defineEmits(['openInEditor', 'onInspectComponentStart', 'onInspectComponentEnd'])
+const props = defineProps<{
+  savedSelectedId: string
+}>()
+const emit = defineEmits(['openInEditor', 'onInspectComponentStart', 'onInspectComponentEnd', 'onSelectId'])
 // responsive layout
 const splitpanesRef = ref<HTMLDivElement>()
 const splitpanesReady = ref(false)
@@ -133,7 +136,7 @@ async function getComponentsInspectorTree(filter = '') {
   return rpc.value.getInspectorTree({ inspectorId, filter }).then((data) => {
     const res = parse(data)
     tree.value = res
-    activeComponentId.value = tree.value?.[0]?.id
+    activeComponentId.value = getValidNodeId(tree.value, props.savedSelectedId) || tree.value?.[0]?.id
     expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
     componentTreeLoaded.value = true
   })
@@ -163,6 +166,7 @@ function getComponentState(id: string) {
 
 watch(activeComponentId, (id) => {
   getComponentState(id)
+  emit('onSelectId', id)
   if (componentRenderCodeVisible.value) {
     getComponentRenderCode()
   }

packages/applet/src/modules/custom-inspector/components/state/Index.vue

@@ -11,9 +11,17 @@ import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
+import { getValidNodeId } from '~/utils'
 import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
 
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('custom-inspector-state')
 
@@ -118,16 +126,17 @@ function clearInspectorState() {
 watch(selected, () => {
   clearInspectorState()
   getInspectorState(selected.value)
+  emit('onSelectId', selected.value)
 })
 
 const getInspectorTree = () => {
   rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
-      selected.value = data[0].id
+      selected.value = getValidNodeId(tree.value, props.savedSelectedId) || data[0].id
       expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
-      getInspectorState(data[0].id)
+      getInspectorState(selected.value)
     }
   })
 }

packages/applet/src/modules/custom-inspector/index.vue

@@ -11,9 +11,10 @@ import { createCustomInspectorStateContext } from '~/composables/custom-inspecto
 
 const props = defineProps<{
   id: string
+  savedSelectedId?: string
 }>()
+const emit = defineEmits(['loadError', 'onSelectId'])
 
-const emit = defineEmits(['loadError'])
 const inspectorState = createCustomInspectorStateContext()
 const loading = ref(false)
 
@@ -74,13 +75,17 @@ watch(() => props.id, () => {
 onUnmounted(() => {
   rpc.value.unhighlight()
 })
+
+function handleSelectId(id: string) {
+  emit('onSelectId', id)
+}
 </script>
 
 <template>
   <div h-full w-full>
     <div v-if="loading">
       <AppConnecting />
     </div>
-    <VirtualRouterView v-else />
+    <VirtualRouterView v-else :saved-selected-id="savedSelectedId" @on-select-id="handleSelectId" />
   </div>
 </template>

packages/applet/src/modules/pinia/components/store/Index.vue

@@ -10,9 +10,16 @@ import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
-
+import { getValidNodeId } from '~/utils'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('pinia-store-state')
 
@@ -116,15 +123,16 @@ function clearPiniaState() {
 watch(selected, () => {
   clearPiniaState()
   getPiniaState(selected.value)
+  emit('onSelectId', selected.value)
 })
 
 const getPiniaInspectorTree = () => {
   rpc.value.getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getPiniaState(data[0].id)
+      selected.value = getValidNodeId(tree.value, props.savedSelectedId) || data[0].id
+      getPiniaState(selected.value)
       expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
     }
   })

packages/applet/src/modules/pinia/index.vue

@@ -4,6 +4,13 @@ import Store from './components/store/Index.vue'
 import Timeline from './components/timeline/Index.vue'
 import { registerVirtualRouter } from '~/composables/virtual-router'
 
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const { VirtualRouterView } = registerVirtualRouter([
   {
     path: '/store',
@@ -26,10 +33,14 @@ const { VirtualRouterView } = registerVirtualRouter([
 ], {
   defaultRoutePath: '/store',
 })
+
+const handleSelectId = (id: string) => {
+  emit('onSelectId', id)
+}
 </script>
 
 <template>
   <div h-full w-full>
-    <VirtualRouterView />
+    <VirtualRouterView :saved-selected-id="savedSelectedId" @on-select-id="handleSelectId" />
   </div>
 </template>

packages/applet/src/modules/router/components/routes/Index.vue

@@ -11,8 +11,16 @@ import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import { useCustomInspectorState } from '~/composables/custom-inspector-state'
+import { getValidNodeId } from '~/utils'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
 
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('routes-state')
 
@@ -90,15 +98,16 @@ function clearRoutesState() {
 watch(selected, () => {
   clearRoutesState()
   getRoutesState(selected.value)
+  emit('onSelectId', selected.value)
 })
 
 const getRoutesInspectorTree = () => {
   rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getRoutesState(data[0].id)
+      selected.value = getValidNodeId(data, props.savedSelectedId) || data[0].id
+      getRoutesState(selected.value)
       expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
     }
   })

packages/applet/src/modules/router/index.vue

@@ -9,7 +9,12 @@ import { createCustomInspectorStateContext } from '~/composables/custom-inspecto
 
 const props = defineProps<{
   id: string
+  savedSelectedId?: string
 }>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const inspectorState = createCustomInspectorStateContext()
 const loading = ref(false)
 const { VirtualRouterView, restoreRouter } = registerVirtualRouter([
@@ -61,10 +66,14 @@ watch(() => props.id, (v) => {
     getInspectorInfo()
   }
 })
+
+const handleSelectId = (id: string) => {
+  emit('onSelectId', id)
+}
 </script>
 
 <template>
   <div h-full w-full>
-    <VirtualRouterView />
+    <VirtualRouterView :saved-selected-id="savedSelectedId" @on-select-id="handleSelectId" />
   </div>
 </template>