feat: add route-meta for pages (#560)

Co-authored-by: Alex <alexzhang1030@foxmail.com>
Co-authored-by: arlo <webfansplz@gmail.com>

packages/client/src/components/pages/RouteMetaDetail.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { VueCodeBlock } from '@vue/devtools-ui'
+import type { RouteMeta } from 'vue-router'
+
+defineProps<{
+  meta: RouteMeta
+}>()
+
+defineEmits<{
+  close: []
+}>()
+</script>
+
+<template>
+  <div p-2>
+    <div class="flex items-center justify-between">
+      <span class="font-500">Route meta detail</span>
+      <div class="i-carbon-close cursor-pointer p1 $ui-text" @click="$emit('close')" />
+    </div>
+    <VueCodeBlock :code="JSON.stringify(meta, null, 2)" lang="json" lines />
+  </div>
+</template>

packages/client/src/components/pages/RoutesTable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { VueBadge } from '@vue/devtools-ui'
-import type { RouteRecordNormalized } from 'vue-router'
+import type { RouteMeta, RouteRecordNormalized } from 'vue-router'
 import { useDevToolsState } from '@vue/devtools-core'
 import { openInEditor } from '../../composables/open-in-editor'
 
@@ -12,6 +12,7 @@ const props = defineProps<{
 
 defineEmits<{
   (e: 'navigate', path: string): void
+  (e: 'selectMeta', meta: RouteMeta): void
 }>()
 
 const sorted = computed(() => {
@@ -20,6 +21,15 @@ const sorted = computed(() => {
 
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 const state = useDevToolsState()
+
+function metaToString(meta: RouteMeta, num: number = 0) {
+  const metaStr = JSON.stringify(meta, null, num)
+  return metaStr === '{}' ? '-' : metaStr
+}
+
+const metaFieldVisible = computed(() => {
+  return sorted.value.some(item => Object.keys(item.meta)?.length)
+})
 </script>
 
 <template>
@@ -34,7 +44,9 @@ const state = useDevToolsState()
           <th text-left>
             Name
           </th>
-          <th text-left />
+          <th v-if="metaFieldVisible" text-left>
+            Route Meta
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -77,6 +89,9 @@ const state = useDevToolsState()
           <td w-0 ws-nowrap pr-1 text-left text-sm font-mono op50>
             {{ item.name }}
           </td>
+          <td v-if="metaFieldVisible" w-50 ws-nowrap pr-1 text-left text-sm font-mono op50 hover="text-primary op100">
+            <span inline-block w-50 cursor-pointer overflow-hidden text-ellipsis :title="metaToString(item.meta, 2)" @click="() => $emit('selectMeta', item.meta)">{{ metaToString(item.meta) }}</span>
+          </td>
         </tr>
       </tbody>
     </table>

packages/client/src/pages/pages.vue

@@ -2,7 +2,8 @@
 import type { RouterInfo } from '@vue/devtools-kit'
 import { VueInput } from '@vue/devtools-ui'
 import { DevToolsMessagingEvents, onDevToolsConnected, rpc } from '@vue/devtools-core'
-import type { RouteLocationNormalizedLoaded, RouteRecordNormalized } from 'vue-router'
+import type { RouteLocationNormalizedLoaded, RouteMeta, RouteRecordNormalized } from 'vue-router'
+import { Pane, Splitpanes } from 'splitpanes'
 
 const routeInput = ref('')
 const currentRoute = ref<RouteLocationNormalizedLoaded | null>(null)
@@ -16,6 +17,8 @@ const routeInputMatched = computed(() => {
 
 const routes = ref<RouteRecordNormalized[]>([])
 
+const selectedMeta = ref<RouteMeta>()
+
 function init(data: RouterInfo) {
   routes.value = data.routes
   currentRoute.value = data.currentRoute as RouteLocationNormalizedLoaded
@@ -54,7 +57,7 @@ onUnmounted(() => {
 
 <template>
   <div block h-screen of-auto>
-    <div h-full of-auto>
+    <div h-full class="grid grid-rows-[auto_1fr]">
       <div border="b base" flex="~ col gap1" px4 py3>
         <div>
           <template v-if="false">
@@ -95,20 +98,28 @@ onUnmounted(() => {
         @navigate="navigateToRoute"
       />
     </SectionBlock> -->
-      <SectionBlock
-        icon="i-carbon-tree-view-alt"
-        text="All Routes"
-        :description="`${routes.length} routes registered in your application`"
-        :padding="false"
-      >
-        <RoutesTable
-          v-if="routes.length"
-          :pages="routes"
-          :matched="currentRoute?.matched ?? []"
-          :matched-pending="routeInputMatched"
-          @navigate="navigateToRoute"
-        />
-      </SectionBlock>
+      <Splitpanes class="of-hidden">
+        <Pane size="70" class="of-auto!">
+          <SectionBlock
+            icon="i-carbon-tree-view-alt"
+            text="All Routes"
+            :description="`${routes.length} routes registered in your application`"
+            :padding="false"
+          >
+            <RoutesTable
+              v-if="routes.length"
+              :pages="routes"
+              :matched="currentRoute?.matched ?? []"
+              :matched-pending="routeInputMatched"
+              @navigate="navigateToRoute"
+              @select-meta="(meta: RouteMeta) => selectedMeta = meta"
+            />
+          </SectionBlock>
+        </Pane>
+        <Pane v-if="!!selectedMeta" size="30" class="of-auto!">
+          <RouteMetaDetail :meta="selectedMeta" @close="selectedMeta = undefined" />
+        </Pane>
+      </Splitpanes>
     </div>
   </div>
 </template>

packages/devtools-kit/src/core/router/index.ts

@@ -14,14 +14,15 @@ function getRoutes(router?: Router) {
 
 function filterRoutes(routes: RouteRecordRaw[]) {
   return routes.map((item) => {
-    let { path, name, children } = item
+    let { path, name, children, meta } = item
     if (children?.length)
       children = filterRoutes(children)
 
     return {
       path,
       name,
       children,
+      meta,
     }
   })
 }

packages/playground/basic/src/main.ts

@@ -38,11 +38,13 @@ const routes: RouteRecordRaw[] = [
     path: '/hello',
     component: () => import('./pages/Hello.vue'),
     name: 'hello',
+    meta: { auth: 'admin', note: 'Hey! Manger' },
   },
   {
     path: '/hey/:id',
     component: Hey,
     name: 'hey',
+    meta: { auth: 'user', note: 'Hey!' },
   },
   {
     path: '/vue-query',