fix: auto set page header by current route

Signed-off-by: Kaifuny <superbiger.github@gmail.com>
2025-08-01 16:38:02 +08:00 · 2023-07-25 12:36:03 +08:00 · 2023-07-25 12:36:03 +08:00 · c5d3179d0e
commit c5d3179d0e
parent 12cb53bba4
7 changed files with 124 additions and 35 deletions
--- 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"
--- 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"
--- 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"
--- 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: {
--- 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"
--- 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"
--- 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">
                ···