feat: Apply default select to components

Author: Azurewarth0920

packages/client/src/pages/components.vue

@@ -77,12 +77,14 @@ function checkComponentInTree(treeNode: ComponentTreeNode[], id: string) {
   return treeNode.some(item => checkComponentInTree(item.children || [], id))
 }
 
+const { saveParamId, getValidNestedNodeId } = useDefaultSelect()
+
 function initSelectedComponent(treeNode: ComponentTreeNode[]) {
   if (!treeNode.length)
     return
   if (!selectedComponentTree.value) {
-    selectedComponentTree.value = treeNode?.[0].id
-    getComponentState(treeNode?.[0].id)
+    selectedComponentTree.value = getValidNestedNodeId(treeNode) || treeNode?.[0].id
+    getComponentState(selectedComponentTree.value)
   }
   else {
     // fallback to root if selected component is not in the tree
@@ -185,6 +187,7 @@ function selectComponentTree(id: string) {
   clearComponentState()
   getComponentState(id)
   activeComponentId.value = id
+  saveParamId(id)
 }
 
 watch(selectedComponentTree, (id) => {

packages/client/src/pages/pinia.vue

@@ -25,9 +25,12 @@ function clearPiniaState() {
   state.value = {}
 }
 
+const { saveParamId, getValidNodeId } = useDefaultSelect()
+
 watch(selected, () => {
   clearPiniaState()
   getPiniaState(selected.value)
+  saveParamId(selected.value)
 })
 
 createCollapseContext('inspector-state')
@@ -37,8 +40,8 @@ onDevToolsClientConnected(() => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getPiniaState(data[0].id)
+      selected.value = getValidNodeId(data) || data[0].id
+      getPiniaState(selected.value)
     }
   })
 

packages/client/src/pages/router.vue

@@ -28,18 +28,21 @@ function clearRouterState() {
   state.value = {}
 }
 
+const { saveParamId, getValidNodeId } = useDefaultSelect()
+
 watch(selected, () => {
   clearRouterState()
   getRouterState(selected.value)
+  saveParamId(selected.value)
 })
 
 onDevToolsClientConnected(() => {
   getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getRouterState(data[0].id)
+      selected.value = getValidNodeId(data) || data[0].id
+      getRouterState(selected.value)
     }
   })
 

packages/client/src/pages/timeline.vue

@@ -66,6 +66,8 @@ function normalizeGroupInfo(layerId: string, event: TimelineEvent['event']) {
   }
 }
 
+const { saveParamId, getValidNodeId } = useDefaultSelect()
+
 onDevToolsClientConnected(() => {
   getTimelineLayer().then((data) => {
     layers.value = data!
@@ -74,7 +76,7 @@ onDevToolsClientConnected(() => {
       layer.groups = {}
     })
     if (!selectedLayer.value)
-      selectedLayer.value = data?.length ? data[0].id : ''
+      selectedLayer.value = data?.length ? (getValidNodeId(layers.value) || data[0].id) : ''
   })
   onAddTimelineEvent((payload) => {
     if (!payload)
@@ -99,7 +101,10 @@ watch(() => activeTimelineEvent.value.length, (l) => {
         <!-- layer -->
         <Pane border="r base" size="20">
           <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
-            <TimelineLayer v-for="(item) in layers" :key="item.id" v-model="selectedLayer" :data="item" />
+            <TimelineLayer
+              v-for="(item) in layers" :key="item.id" v-model="selectedLayer" :data="item"
+              @update:model-value="saveParamId"
+            />
           </div>
         </Pane>
         <!-- event -->