feat(applet): enhance pinia panel nav (#285)

Author: webfansplz

packages/applet/src/components/basic/DevToolsHeader.vue

@@ -10,10 +10,14 @@ const router = useVirtualRouter()
 </script>
 
 <template>
-  <div border="b base" class="h10 h40px flex items-center justify-between px-2">
-    <i class="i-ep:back cursor-pointer op70 text-base hover:op100" @click="router.push('/')" />
+  <div border="b base" class="h10 h40px flex items-center justify-between px3">
     <div>
-      <a class="pr1" :href="docLink" target="_blank">
+      <slot>
+        <i class="i-ep:back cursor-pointer op70 text-base hover:op100" @click="router.push('/')" />
+      </slot>
+    </div>
+    <div>
+      <a class="pr2" :href="docLink" target="_blank">
         <i class="i-clarity:document-line cursor-pointer op70 text-base hover:op100" />
       </a>
       <a :href="githubRepoLink" target="_blank">

packages/applet/src/composables/virtual-router.ts

@@ -2,9 +2,10 @@ import type { Component, InjectionKey, Ref } from 'vue'
 import { computed, defineComponent, h, inject, provide, ref } from 'vue'
 
 const VirtualRouteKey: InjectionKey<Ref<{ path: string }>> = Symbol('VirtualRouteKey')
+const VirtualRoutesKey: InjectionKey<{ path: string, component: Component, icon?: string }[]> = Symbol('VirtualRoutesKey')
 
-export function registerVirtualRouter(routes: { path: string, component: Component }[]) {
-  const route = ref<{ path: string }>({
+export function registerVirtualRouter(routes: { path: string, component: Component, icon?: string }[]) {
+  const route = ref<{ path: string, icon?: string }>({
     path: '/',
   })
   const routePath = computed(() => route.value.path)
@@ -22,6 +23,7 @@ export function registerVirtualRouter(routes: { path: string, component: Compone
   })
 
   provide(VirtualRouteKey, route)
+  provide(VirtualRoutesKey, routes)
   return { VirtualRouterView }
 }
 
@@ -34,3 +36,10 @@ export function useVirtualRouter() {
     },
   }
 }
+
+export function useVirtualRoute() {
+  const route = inject(VirtualRoutesKey)!
+  return {
+    routes: route,
+  }
+}

packages/applet/src/pinia/components/Navbar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useVirtualRoute, useVirtualRouter } from '~/composables/virtual-router'
+
+const { routes } = useVirtualRoute()
+const router = useVirtualRouter()
+</script>
+
+<template>
+  <ul class="flex gap3">
+    <li
+      v-for="(item, index) in routes"
+      :key="index"
+      cursor-pointer op70 hover:op100
+      @click="router.push(item.path)"
+    >
+      <i :class="item.icon" />
+    </li>
+  </ul>
+</template>

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

@@ -4,6 +4,7 @@ import { Pane, Splitpanes } from 'splitpanes'
 import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
 import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
+import Navbar from '../Navbar.vue'
 import SelectiveList from '~/components/basic/SelectiveList.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
@@ -77,7 +78,9 @@ onInspectorStateUpdated((data) => {
 
 <template>
   <div class="h-full flex flex-col">
-    <DevToolsHeader doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia" />
+    <DevToolsHeader doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia">
+      <Navbar />
+    </DevToolsHeader>
     <Splitpanes class="flex-1">
       <Pane border="r base" size="40" h-full>
         <div h-full select-none overflow-scroll class="no-scrollbar">

packages/applet/src/pinia/components/timeline/Index.vue

@@ -4,6 +4,7 @@ import { onAddTimelineEvent } from '@vue/devtools-core'
 
 import type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
 import { computed, ref } from 'vue'
+import Navbar from '../Navbar.vue'
 import EventList from './EventList.vue'
 import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
@@ -79,7 +80,9 @@ onAddTimelineEvent((payload) => {
 
 <template>
   <div class="h-full flex flex-col">
-    <DevToolsHeader doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia" />
+    <DevToolsHeader doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia">
+      <Navbar />
+    </DevToolsHeader>
     <template v-if="eventList.length">
       <div class="flex-1 overflow-hidden">
         <Splitpanes class="h-full">

packages/applet/src/pinia/index.vue

@@ -13,22 +13,21 @@ const { VirtualRouterView } = registerVirtualRouter([
   {
     path: '/',
     component: Home,
+    icon: 'i-logos-pinia',
   },
   {
     path: '/store',
     component: Store,
+    icon: 'i-carbon-tree-view-alt',
   },
   {
     path: '/timeline',
     component: Timeline,
+    icon: 'i-mdi:timeline-clock-outline',
   },
 ])
 
 const routePath = ref('/')
-
-function toggleRoute(route: string) {
-  routePath.value = route
-}
 </script>
 
 <template>