1
0
mirror of https://github.com/chatopera/cosin.git synced 2025-08-01 16:38:02 +08:00

fix: add page header

Signed-off-by: Kaifuny <superbiger.github@gmail.com>
This commit is contained in:
Kaifuny 2023-07-22 15:24:38 +08:00
parent 029ff8bef5
commit 90803370fc
3 changed files with 41 additions and 3 deletions

View File

@ -93,7 +93,7 @@ const active = ref(false)
</n-alert> </n-alert>
<Nav <Nav
v-model:current="current" 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" :navigations="navigations"
:dropdown-menus="dropdownMenus" :dropdown-menus="dropdownMenus"
@update:current="handleClickNav" @update:current="handleClickNav"

View File

@ -1,5 +1,16 @@
<script setup lang="ts"> <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> </script>
<template> <template>
<n-layout has-sider class="h-full"> <n-layout has-sider class="h-full">
@ -7,7 +18,34 @@ import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
<slot></slot> <slot></slot>
</n-layout-sider> </n-layout-sider>
<n-layout-content content-style="padding: 10px"> <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-content>
</n-layout> </n-layout>
</template> </template>