From 1cecb3563b178547e87c4e4ed394921eeba1a52a Mon Sep 17 00:00:00 2001
From: webfansplz <webfansplz@gmail.com>
Date: Tue, 19 Dec 2023 23:34:51 +0800
Subject: [PATCH] fix(client): custom tab view active state

---
 packages/client/src/components/common/SideNavItem.vue | 2 +-
 packages/client/src/main.ts                           | 2 +-
 packages/client/src/pages/custom-tab-view.vue         | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/common/SideNavItem.vue b/packages/client/src/components/common/SideNavItem.vue
index e6a10445..3eb964f4 100644
--- a/packages/client/src/components/common/SideNavItem.vue
+++ b/packages/client/src/components/common/SideNavItem.vue
@@ -17,7 +17,7 @@ const props = withDefaults(
 )
 const route = useRoute()
 
-const tabPath = computed(() => 'path' in props.tab ? props.tab.path! : `/custom-tab-view?name=${(props.tab as ModuleBuiltinTab).name}`)
+const tabPath = computed(() => 'path' in props.tab ? (`${props.tab.path.startsWith('/') ? `` : `/`}${props.tab.path!}`) : `/custom-tab-view/${(props.tab as ModuleBuiltinTab).name}`)
 const badge = computed(() => 'badge' in props.tab && props.tab.badge?.())
 const isActive = computed(() => route.path.startsWith(tabPath.value))
 
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
index e809a4a5..986857bb 100644
--- a/packages/client/src/main.ts
+++ b/packages/client/src/main.ts
@@ -45,7 +45,7 @@ const routes = [
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
   { path: '/settings', component: Settings },
-  { path: '/custom-tab-view', component: CustomTabView },
+  { path: '/custom-tab-view/:name', component: CustomTabView },
 ]
 
 // @TODO: find a better way to handle it
diff --git a/packages/client/src/pages/custom-tab-view.vue b/packages/client/src/pages/custom-tab-view.vue
index 9adc92ae..49af4f57 100644
--- a/packages/client/src/pages/custom-tab-view.vue
+++ b/packages/client/src/pages/custom-tab-view.vue
@@ -5,7 +5,7 @@ import type { CustomTab } from '@vue-devtools-next/kit'
 const route = useRoute()
 const router = useRouter()
 const { flattenedTabs } = useAllTabs()
-const tabName = computed(() => route.query.name as string | undefined)
+const tabName = computed(() => route.params.name as string | undefined)
 const tab = computed(() => flattenedTabs.value.find(tab => tabName.value === tab.name) || null!) as ComputedRef<CustomTab>
 
 onMounted(() => {
@@ -31,13 +31,13 @@ onMounted(() => {
       </div>
     </PanelGrids>
   </template>
-  <template v-else-if="tab.view.type === 'iframe'">
+  <template v-else-if="tab?.view?.type === 'iframe'">
     <IframeView :src="tab.view.src" />
   </template>
   <template v-else>
     <PanelGrids>
       <NCard flex="~ col" h-full items-center justify-center>
-        Unknown tab type {{ tab.view }}
+        Unknown tab type {{ tab?.view }}
       </NCard>
     </PanelGrids>
   </template>