feat: show route meta info in pages tab (#178)

Co-authored-by: xiangxiao <[email protected]>
Co-authored-by: webfansplz <[email protected]>

Author: 3 people

packages/client/components/RouteMetaDetail.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import JsonEditorVue from 'json-editor-vue'
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
+import type { RouteMeta } from 'vue-router'
+
+const props = defineProps<{
+  meta: RouteMeta
+}>()
+const colorMode = useColorMode()
+const meta = computed(() => props.meta)
+</script>
+
+<template>
+  <div h-full select-none overflow-scroll p-2 class="no-scrollbar">
+    <JsonEditorVue
+      v-model="meta" h-full class="json-editor-vue" :class="[
+        colorMode === 'dark' ? 'jse-theme-dark' : '',
+      ]" :main-menu-bar="false" :navigation-bar="false" :status-bar="false" :read-only="true" :indentation="2"
+      :tab-size="2"
+    />
+  </div>
+</template>

packages/client/components/RoutesTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RouteRecordNormalized } from 'vue-router'
+import type { RouteMeta, RouteRecordNormalized } from 'vue-router'
 
 const props = defineProps<{
   pages: RouteRecordNormalized[]
@@ -9,11 +9,17 @@ const props = defineProps<{
 
 defineEmits<{
   (e: 'navigate', path: string): void
+  (e: 'selectMeta', meta: RouteMeta): void
 }>()
 
 const sorted = computed(() => {
   return [...props.pages].sort((a, b) => a.path.localeCompare(b.path))
 })
+
+function metaToString(meta: RouteMeta, num: number = 0) {
+  const metaStr = JSON.stringify(meta, null, num)
+  return metaStr === '{}' ? '-' : metaStr
+}
 </script>
 
 <template>
@@ -28,6 +34,9 @@ const sorted = computed(() => {
           <th text-left>
             Name
           </th>
+          <th text-left>
+            Route Meta
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -53,13 +62,17 @@ const sorted = computed(() => {
               <RoutePathItem
                 :route="item"
                 :class="matched.find(m => m.path === item.path) ? 'text-primary' : matchedPending.find(m => m.name === item.name) ? 'text-teal' : ''"
+                hover="text-primary"
                 @navigate="(path:string) => $emit('navigate', path)"
               />
             </div>
           </td>
           <td w-30 ws-nowrap pr-1 text-left text-sm font-mono op50>
             {{ item.name ?? '-' }}
           </td>
+          <td 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/pages/pages.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RouteMeta } from 'vue-router'
 import { currentRoute, router, routes } from '~/logic/app'
 
 const routeInput = ref('')
@@ -25,6 +26,8 @@ function navigateToRoute(path: string) {
   router.value?.push(path)
   routeInput.value = path
 }
+
+const selectedMeta = ref<RouteMeta>()
 </script>
 
 <template>
@@ -68,7 +71,15 @@ function navigateToRoute(path: string) {
         :matched="currentRoute?.matched ?? []"
         :matched-pending="routeInputMatched"
         @navigate="navigateToRoute"
+        @select-meta="(meta: RouteMeta) => selectedMeta = meta"
       />
+      <DrawerRight
+        :model-value="!!selectedMeta"
+        auto-close w-120
+        @close="selectedMeta = undefined"
+      >
+        <RouteMetaDetail v-if="!!selectedMeta" :meta="selectedMeta" />
+      </DrawerRight>
     </VDSectionBlock>
   </div>
 </template>