From 7f08c16adf906eecb36319905119074ba05d1df7 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Mon, 1 Apr 2024 17:13:47 +0900
Subject: [PATCH] feat: Apply default select to components

---
 packages/client/src/pages/components.vue | 7 +++++--
 packages/client/src/pages/pinia.vue      | 7 +++++--
 packages/client/src/pages/router.vue     | 7 +++++--
 packages/client/src/pages/timeline.vue   | 9 +++++++--
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index d21f44eac..acbf55de5 100644
--- a/packages/client/src/pages/components.vue
+++ b/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) => {
diff --git a/packages/client/src/pages/pinia.vue b/packages/client/src/pages/pinia.vue
index 04e145b0d..5103354a2 100644
--- a/packages/client/src/pages/pinia.vue
+++ b/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)
     }
   })
 
diff --git a/packages/client/src/pages/router.vue b/packages/client/src/pages/router.vue
index f37e89c66..36cfc9dd4 100644
--- a/packages/client/src/pages/router.vue
+++ b/packages/client/src/pages/router.vue
@@ -28,9 +28,12 @@ function clearRouterState() {
   state.value = {}
 }
 
+const { saveParamId, getValidNodeId } = useDefaultSelect()
+
 watch(selected, () => {
   clearRouterState()
   getRouterState(selected.value)
+  saveParamId(selected.value)
 })
 
 onDevToolsClientConnected(() => {
@@ -38,8 +41,8 @@ onDevToolsClientConnected(() => {
     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)
     }
   })
 
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index fa10a1a07..83e515873 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/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 -->