From c5d3179d0ec6c30632e3128f2cbdb74c20636f50 Mon Sep 17 00:00:00 2001
From: Kaifuny <superbiger.github@gmail.com>
Date: Tue, 25 Jul 2023 12:36:03 +0800
Subject: [PATCH] fix: auto set page header by current route

Signed-off-by: Kaifuny <superbiger.github@gmail.com>
---
 .../enterprise/src/layouts/MenusLayout.vue    | 19 +++++--
 .../organization/src/layouts/MenusLayout.vue  | 19 +++++--
 .../seats/src/layouts/MenusLayout.vue         | 19 +++++--
 .../services/seats/src/routes/index.ts        | 12 ++---
 .../setting/src/layouts/MenusLayout.vue       | 19 +++++--
 .../system/src/layouts/MenusLayout.vue        | 19 +++++--
 .../shared/ui/src/layouts/MenusLayout.vue     | 52 ++++++++++++++-----
 7 files changed, 124 insertions(+), 35 deletions(-)

diff --git a/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
index 59bcd135..76713b75 100644
--- a/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { MenuOption } from 'naive-ui'
+import { ref, h } from 'vue'
+import { MenuOption, NBreadcrumbItem } from 'naive-ui'
 
 import { MenusLayout } from '@cskefu/shared-ui'
 import { routesToMenus } from '@cskefu/shared-utils'
 import { Menu } from '@cskefu/shared-ui'
+import { ROUTE_NAME } from '@cskefu/models'
 
 import routes from '../routes'
 
@@ -12,7 +13,19 @@ const menuOptions: MenuOption[] = routesToMenus(routes)
 const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout v-model:collapsed="collapsed">
+  <MenusLayout
+    v-model:collapsed="collapsed"
+    :page-title="$route.meta.title"
+    :page-icon="$route.meta.icon"
+    :page-breadcrumbs="[
+      h(NBreadcrumbItem, { to: { name: ROUTE_NAME.DASHBOARD_INDEX } }, '首页'),
+      h(
+        NBreadcrumbItem,
+        { to: { name: $route.name } },
+        $route.meta.title as string
+      ),
+    ]"
+  >
     <Menu
       v-model:collapsed="collapsed"
       :options="menuOptions"
diff --git a/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
index d6178b5b..7a50f12a 100644
--- a/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
@@ -1,15 +1,28 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption } from 'naive-ui'
+import { MenuOption, NBreadcrumbItem } from 'naive-ui'
 
 import { Menu } from '@cskefu/shared-ui'
-import { ref } from 'vue'
+import { ROUTE_NAME } from '@cskefu/models'
+import { ref, h } from 'vue'
 
 const menuOptions: MenuOption[] = []
 const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout v-model:collapsed="collapsed">
+  <MenusLayout
+    v-model:collapsed="collapsed"
+    :page-title="$route.meta.title"
+    :page-icon="$route.meta.icon"
+    :page-breadcrumbs="[
+      h(NBreadcrumbItem, { to: { name: ROUTE_NAME.DASHBOARD_INDEX } }, '首页'),
+      h(
+        NBreadcrumbItem,
+        { to: { name: $route.name } },
+        $route.meta.title as string
+      ),
+    ]"
+  >
     <Menu
       v-model:collapsed="collapsed"
       :options="menuOptions"
diff --git a/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
index 59bcd135..76713b75 100644
--- a/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { MenuOption } from 'naive-ui'
+import { ref, h } from 'vue'
+import { MenuOption, NBreadcrumbItem } from 'naive-ui'
 
 import { MenusLayout } from '@cskefu/shared-ui'
 import { routesToMenus } from '@cskefu/shared-utils'
 import { Menu } from '@cskefu/shared-ui'
+import { ROUTE_NAME } from '@cskefu/models'
 
 import routes from '../routes'
 
@@ -12,7 +13,19 @@ const menuOptions: MenuOption[] = routesToMenus(routes)
 const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout v-model:collapsed="collapsed">
+  <MenusLayout
+    v-model:collapsed="collapsed"
+    :page-title="$route.meta.title"
+    :page-icon="$route.meta.icon"
+    :page-breadcrumbs="[
+      h(NBreadcrumbItem, { to: { name: ROUTE_NAME.DASHBOARD_INDEX } }, '首页'),
+      h(
+        NBreadcrumbItem,
+        { to: { name: $route.name } },
+        $route.meta.title as string
+      ),
+    ]"
+  >
     <Menu
       v-model:collapsed="collapsed"
       :options="menuOptions"
diff --git a/contact-frontend/packages/modules/services/seats/src/routes/index.ts b/contact-frontend/packages/modules/services/seats/src/routes/index.ts
index 47d466fd..18201f42 100644
--- a/contact-frontend/packages/modules/services/seats/src/routes/index.ts
+++ b/contact-frontend/packages/modules/services/seats/src/routes/index.ts
@@ -28,7 +28,7 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'index',
+        path: 'chat-manage',
         name: ROUTE_NAME.SEATS_CHATMANAGE_INDEX,
         component: () => import('../views/HomeView.vue'),
         meta: {
@@ -38,7 +38,7 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'index',
+        path: 'leave-message',
         name: ROUTE_NAME.SEATS_LEAVEMANAGE_INDEX,
         component: () => import('../views/HomeView.vue'),
         meta: {
@@ -48,7 +48,7 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'index',
+        path: 'seats-manage',
         name: ROUTE_NAME.SEATS_SEATSMANAGE_INDEX,
         component: () => import('../views/HomeView.vue'),
         meta: {
@@ -58,7 +58,7 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'index',
+        path: 'robot',
         name: ROUTE_NAME.SEATS_ROBOT_INDEX,
         meta: {
           title: '机器人管理',
@@ -75,7 +75,7 @@ const routes: RouteRecordRaw[] = [
             },
           },
           {
-            path: 'index',
+            path: 'manage',
             name: ROUTE_NAME.SEATS_ROBOT_MANAGE_INDEX,
             component: () => import('../views/HomeView.vue'),
             meta: {
@@ -84,7 +84,7 @@ const routes: RouteRecordRaw[] = [
             },
           },
           {
-            path: 'index',
+            path: 'setting',
             name: ROUTE_NAME.SEATS_INDEX,
             component: () => import('../views/HomeView.vue'),
             meta: {
diff --git a/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
index f2e01e36..a5e4643c 100644
--- a/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
@@ -1,14 +1,27 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption } from 'naive-ui'
+import { MenuOption, NBreadcrumbItem } from 'naive-ui'
 import { Menu } from '@cskefu/shared-ui'
-import { ref } from 'vue'
+import { ref, h } from 'vue'
+import { ROUTE_NAME } from '@cskefu/models'
 
 const menuOptions: MenuOption[] = []
 const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout v-model:collapsed="collapsed">
+  <MenusLayout
+    v-model:collapsed="collapsed"
+    :page-title="$route.meta.title"
+    :page-icon="$route.meta.icon"
+    :page-breadcrumbs="[
+      h(NBreadcrumbItem, { to: { name: ROUTE_NAME.DASHBOARD_INDEX } }, '首页'),
+      h(
+        NBreadcrumbItem,
+        { to: { name: $route.name } },
+        $route.meta.title as string
+      ),
+    ]"
+  >
     <Menu
       v-model:collapsed="collapsed"
       :options="menuOptions"
diff --git a/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
index 114641eb..43831946 100644
--- a/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
@@ -1,18 +1,31 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { MenuOption } from 'naive-ui'
+import { ref, h } from 'vue'
+import { MenuOption, NBreadcrumbItem } from 'naive-ui'
 
 import { Menu } from '@cskefu/shared-ui'
 import { MenusLayout } from '@cskefu/shared-ui'
 import { routesToMenus } from '@cskefu/shared-utils'
 
 import routes from '../routes'
+import { ROUTE_NAME } from '@cskefu/models'
 
 const menuOptions: MenuOption[] = routesToMenus(routes)
 const collapsed = ref<boolean>(false)
 </script>
 <template>
-  <MenusLayout v-model:collapsed="collapsed">
+  <MenusLayout
+    v-model:collapsed="collapsed"
+    :page-title="$route.meta.title"
+    :page-icon="$route.meta.icon"
+    :page-breadcrumbs="[
+      h(NBreadcrumbItem, { to: { name: ROUTE_NAME.DASHBOARD_INDEX } }, '首页'),
+      h(
+        NBreadcrumbItem,
+        { to: { name: $route.name } },
+        $route.meta.title as string
+      ),
+    ]"
+  >
     <Menu
       v-model:collapsed="collapsed"
       :options="menuOptions"
diff --git a/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue b/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
index a5274b65..058a6227 100644
--- a/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
@@ -6,22 +6,46 @@ import {
   NPageHeader,
   NBreadcrumb,
   NBreadcrumbItem,
-  NAvatar,
   NSpace,
   NButton,
   NDropdown,
   NWatermark,
+  NIcon,
 } from 'naive-ui'
 
 defineProps({
-  showWatermark: {
+  isWatermarkMode: {
     type: Boolean,
-    default: true,
+    default: false,
+  },
+  watermarkLabel: {
+    type: String,
+    default: '',
   },
   collapsed: {
     type: Boolean,
     default: false,
   },
+  pageTitle: {
+    type: String,
+    default: '',
+    required: false,
+  },
+  pageSubtitle: {
+    type: String,
+    default: '',
+    required: false,
+  },
+  pageIcon: {
+    type: Object,
+    default: null,
+    required: false,
+  },
+  pageBreadcrumbs: {
+    type: Array<typeof NBreadcrumbItem>,
+    default: () => [],
+    required: false,
+  },
 })
 
 defineEmits(['update:collapsed'])
@@ -29,8 +53,8 @@ defineEmits(['update:collapsed'])
 <template>
   <n-layout has-sider class="h-full">
     <n-watermark
-      v-if="showWatermark"
-      content="大家艰苦一下，一切都会有的"
+      v-if="isWatermarkMode"
+      :content="watermarkLabel"
       cross
       fullscreen
       :font-size="16"
@@ -56,25 +80,25 @@ defineEmits(['update:collapsed'])
     <n-layout-content
       content-style="display: flex; flex-direction: column;width: 100%;height:100%;padding: 10px"
     >
-      <n-page-header subtitle="subtitle">
+      <n-page-header :subtitle="pageSubtitle">
         <template #header>
           <n-breadcrumb>
-            <n-breadcrumb-item>Github</n-breadcrumb-item>
-            <n-breadcrumb-item>CSKEFU</n-breadcrumb-item>
-            <n-breadcrumb-item>春松客服</n-breadcrumb-item>
+            <Component
+              :is="breadcrumb"
+              v-for="(breadcrumb, index) in pageBreadcrumbs"
+              :key="index"
+            />
           </n-breadcrumb>
         </template>
         <template #avatar>
-          <n-avatar
-            src="https://avatars.githubusercontent.com/u/16386583?v=4"
-          />
+          <n-icon size="large" :component="pageIcon" />
         </template>
         <template #title>
-          <a style="text-decoration: none; color: inherit">Title</a>
+          <a style="text-decoration: none; color: inherit">{{ pageTitle }}</a>
         </template>
         <template #extra>
           <n-space>
-            <n-button>Button</n-button>
+            <n-button size="small">Button</n-button>
             <n-dropdown placement="bottom-start">
               <n-button :bordered="false" style="padding: 0 4px">
                 ···