From 532d6e83c5219f5f24032da44a2d52d8cfdf5fce Mon Sep 17 00:00:00 2001
From: Jacky <me@jackyu.cn>
Date: Wed, 24 Jul 2024 19:16:48 +0800
Subject: [PATCH] refactor: better breadcrumbs #258

---
 app/src/components/Breadcrumb/Breadcrumb.vue  | 36 ++++++++++++-------
 .../components/NodeSelector/NodeSelector.vue  |  4 +--
 app/src/components/PageHeader/PageHeader.vue  |  3 +-
 app/src/routes/index.ts                       |  5 +++
 app/src/routes/type.d.ts                      |  1 +
 app/src/views/stream/StreamList.vue           |  1 +
 app/src/views/user/userColumns.tsx            |  1 +
 7 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/app/src/components/Breadcrumb/Breadcrumb.vue b/app/src/components/Breadcrumb/Breadcrumb.vue
index f96de909..299bdddb 100644
--- a/app/src/components/Breadcrumb/Breadcrumb.vue
+++ b/app/src/components/Breadcrumb/Breadcrumb.vue
@@ -1,30 +1,41 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
-
 interface bread {
-  name: () => string
+  name: string
+  translatedName: () => string
   path: string
+  hasChildren?: boolean
 }
 
 const name = ref()
 const route = useRoute()
+const router = useRouter()
 
 const breadList = computed(() => {
-  const _breadList: bread[] = []
+  const result: bread[] = []
 
   name.value = route.meta.name
 
   route.matched.forEach(item => {
-    // item.name !== 'index' && this.breadList.push(item)
-    _breadList.push({
-      name: item.meta.name as never as () => string,
+    if (item.meta?.lastRouteName) {
+      const lastRoute = router.resolve({ name: item.meta.lastRouteName })
+
+      result.push({
+        name: lastRoute.name as string,
+        translatedName: lastRoute.meta.name as never as () => string,
+        path: lastRoute.path,
+      })
+    }
+
+    result.push({
+      name: item.name as string,
+      translatedName: item.meta.name as never as () => string,
       path: item.path,
+      hasChildren: item.children?.length > 0,
     })
   })
 
-  return _breadList
+  return result
 })
-
 </script>
 
 <template>
@@ -34,12 +45,13 @@ const breadList = computed(() => {
       :key="item.name"
     >
       <RouterLink
-        v-if="item.name !== name && index !== 1"
+        v-if="index === 0 || !item.hasChildren && index !== breadList.length - 1"
         :to="{ path: item.path === '' ? '/' : item.path }"
       >
-        {{ item.name() }}
+        {{ item.translatedName() }}
       </RouterLink>
-      <span v-else>{{ item.name() }}</span>
+      <span v-else-if="item.hasChildren">{{ item.translatedName() }}</span>
+      <span v-else>{{ item.translatedName() }}</span>
     </ABreadcrumbItem>
   </ABreadcrumb>
 </template>
diff --git a/app/src/components/NodeSelector/NodeSelector.vue b/app/src/components/NodeSelector/NodeSelector.vue
index da55b3bf..9845ac2c 100644
--- a/app/src/components/NodeSelector/NodeSelector.vue
+++ b/app/src/components/NodeSelector/NodeSelector.vue
@@ -4,7 +4,7 @@ import type { Environment } from '@/api/environment'
 import environment from '@/api/environment'
 
 const props = defineProps<{
-  target: number[]
+  target?: number[]
   map?: Record<number, string>
   hiddenLocal?: boolean
 }>()
@@ -37,7 +37,7 @@ const value = computed({
   },
   set(v) {
     if (typeof props.map === 'object') {
-      v.forEach(id => {
+      v?.forEach(id => {
         if (id !== 0)
           emit('update:map', { ...props.map, [id]: data_map.value[id].name })
       })
diff --git a/app/src/components/PageHeader/PageHeader.vue b/app/src/components/PageHeader/PageHeader.vue
index 32c02874..5a57cfda 100644
--- a/app/src/components/PageHeader/PageHeader.vue
+++ b/app/src/components/PageHeader/PageHeader.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb.vue'
 
 const route = useRoute()
@@ -9,7 +8,7 @@ const display = computed(() => {
 })
 
 const name = computed(() => {
-  return (route.meta.name as never as () => string)()
+  return (route.meta.name as () => string)()
 })
 </script>
 
diff --git a/app/src/routes/index.ts b/app/src/routes/index.ts
index 54a58123..ea2f5b2a 100644
--- a/app/src/routes/index.ts
+++ b/app/src/routes/index.ts
@@ -62,6 +62,7 @@ export const routes: RouteRecordRaw[] = [
           component: () => import('@/views/domain/DomainAdd.vue'),
           meta: {
             name: () => $gettext('Add Site'),
+            lastRouteName: 'Sites List',
           },
         }, {
           path: ':name',
@@ -70,6 +71,7 @@ export const routes: RouteRecordRaw[] = [
           meta: {
             name: () => $gettext('Edit Site'),
             hiddenInSidebar: true,
+            lastRouteName: 'Sites List',
           },
         }],
       },
@@ -89,6 +91,7 @@ export const routes: RouteRecordRaw[] = [
         meta: {
           name: () => $gettext('Edit Stream'),
           hiddenInSidebar: true,
+          lastRouteName: 'Manage Streams',
         },
       },
       {
@@ -143,6 +146,7 @@ export const routes: RouteRecordRaw[] = [
             meta: {
               name: () => $gettext('Modify Certificate'),
               hiddenInSidebar: true,
+              lastRouteName: 'Certificates List',
             },
           },
           {
@@ -152,6 +156,7 @@ export const routes: RouteRecordRaw[] = [
             meta: {
               name: () => $gettext('Import Certificate'),
               hiddenInSidebar: true,
+              lastRouteName: 'Certificates List',
             },
           },
           {
diff --git a/app/src/routes/type.d.ts b/app/src/routes/type.d.ts
index 6ef6bb31..0bff43b4 100644
--- a/app/src/routes/type.d.ts
+++ b/app/src/routes/type.d.ts
@@ -16,5 +16,6 @@ declare module 'vue-router' {
     noAuth?: boolean
     status_code?: number
     error?: () => string
+    lastRouteName?: string
   }
 }
diff --git a/app/src/views/stream/StreamList.vue b/app/src/views/stream/StreamList.vue
index 6af00e70..f751e7c1 100644
--- a/app/src/views/stream/StreamList.vue
+++ b/app/src/views/stream/StreamList.vue
@@ -181,6 +181,7 @@ function handleAddStream() {
     <AModal
       v-model:open="showAddStream"
       :title="$gettext('Add Stream')"
+      :mask="false"
       @ok="handleAddStream"
     >
       <AForm layout="vertical">
diff --git a/app/src/views/user/userColumns.tsx b/app/src/views/user/userColumns.tsx
index d68fb892..67b6e1f5 100644
--- a/app/src/views/user/userColumns.tsx
+++ b/app/src/views/user/userColumns.tsx
@@ -27,6 +27,7 @@ const columns: Column[] = [{
     },
   },
   hiddenInTable: true,
+  hiddenInDetail: true,
 }, {
   title: () => $gettext('2FA'),
   dataIndex: 'enabled_2fa',