first commit

src/layout/components/header/BreadCrumb.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const { currentRoute } = router
+
+function handleBreadClick(path) {
+  if (path === currentRoute.value.path) return
+  router.push(path)
+}
+</script>
+
+<template>
+  <n-breadcrumb>
+    <n-breadcrumb-item v-for="item in currentRoute.matched" :key="item.path" @click="handleBreadClick(item.path)">
+      {{ item.meta.title }}
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>

src/layout/components/header/HeaderAction.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useUserStore } from '@/store/modules/user'
+import { useRouter } from 'vue-router'
+import { NDropdown } from 'naive-ui'
+
+const userStore = useUserStore()
+const router = useRouter()
+
+const options = [
+  {
+    label: '退出登录',
+    key: 'logout',
+  },
+]
+
+function handleSelect(key) {
+  if (key === 'logout') {
+    userStore.logout()
+    $message.success('已退出登录')
+    router.push({ path: '/login' })
+  }
+}
+</script>
+
+<template>
+  <n-dropdown :options="options" @select="handleSelect">
+    <div class="avatar">
+      <img :src="userStore.avatar" />
+      <span>{{ userStore.name }}</span>
+    </div>
+  </n-dropdown>
+</template>
+
+<style lang="scss" scoped>
+.avatar {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  img {
+    width: 100%;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+}
+</style>

src/layout/components/header/index.vue

@@ -0,0 +1,21 @@
+<script setup>
+import BreadCrumb from './BreadCrumb.vue'
+import HeaderAction from './HeaderAction.vue'
+</script>
+
+<template>
+  <header class="header">
+    <bread-crumb />
+    <header-action />
+  </header>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  padding: 0 35px;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>