From 90803370fc3876cb11a8a3217372dc39b23e0308 Mon Sep 17 00:00:00 2001
From: Kaifuny <superbiger.github@gmail.com>
Date: Sat, 22 Jul 2023 15:24:38 +0800
Subject: [PATCH] fix: add page header

Signed-off-by: Kaifuny <superbiger.github@gmail.com>
---
 .../apps/web/src/layouts/NavLayout.vue        |  2 +-
 .../packages/modules/composables/src/index.ts |  0
 .../shared/ui/src/layouts/MenusLayout.vue     | 42 ++++++++++++++++++-
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 contact-frontend/packages/modules/composables/src/index.ts

diff --git a/contact-frontend/packages/apps/web/src/layouts/NavLayout.vue b/contact-frontend/packages/apps/web/src/layouts/NavLayout.vue
index eda2351b..0c2d85d4 100644
--- a/contact-frontend/packages/apps/web/src/layouts/NavLayout.vue
+++ b/contact-frontend/packages/apps/web/src/layouts/NavLayout.vue
@@ -93,7 +93,7 @@ const active = ref(false)
     </n-alert>
     <Nav
       v-model:current="current"
-      avatar-url="https://avatars.githubusercontent.com/u/499270?v=4"
+      avatar-url="https://avatars.githubusercontent.com/u/16386583?v=4"
       :navigations="navigations"
       :dropdown-menus="dropdownMenus"
       @update:current="handleClickNav"
diff --git a/contact-frontend/packages/modules/composables/src/index.ts b/contact-frontend/packages/modules/composables/src/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue b/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
index dd1e61f7..82942ad2 100644
--- a/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
@@ -1,5 +1,16 @@
 <script setup lang="ts">
-import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
+import {
+  NLayout,
+  NLayoutContent,
+  NLayoutSider,
+  NPageHeader,
+  NBreadcrumb,
+  NBreadcrumbItem,
+  NAvatar,
+  NSpace,
+  NButton,
+  NDropdown,
+} from 'naive-ui'
 </script>
 <template>
   <n-layout has-sider class="h-full">
@@ -7,7 +18,34 @@ import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
       <slot></slot>
     </n-layout-sider>
     <n-layout-content content-style="padding: 10px">
-      <router-view></router-view>
+      <n-page-header subtitle="subtitle">
+        <template #header>
+          <n-breadcrumb>
+            <n-breadcrumb-item>Github</n-breadcrumb-item>
+            <n-breadcrumb-item>CSKEFU</n-breadcrumb-item>
+            <n-breadcrumb-item>春松客服</n-breadcrumb-item>
+          </n-breadcrumb>
+        </template>
+        <template #avatar>
+          <n-avatar
+            src="https://avatars.githubusercontent.com/u/16386583?v=4"
+          />
+        </template>
+        <template #title>
+          <a style="text-decoration: none; color: inherit">Title</a>
+        </template>
+        <template #extra>
+          <n-space>
+            <n-button>Button</n-button>
+            <n-dropdown placement="bottom-start">
+              <n-button :bordered="false" style="padding: 0 4px">
+                ···
+              </n-button>
+            </n-dropdown>
+          </n-space>
+        </template>
+        <router-view></router-view>
+      </n-page-header>
     </n-layout-content>
   </n-layout>
 </template>