From aa20898bc87ad54a7a8964c9d0adf7bd3af6a48e Mon Sep 17 00:00:00 2001
From: zy7y <13271962515@163.com>
Date: Wed, 14 Sep 2022 11:29:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A0=E6=B3=95=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E7=9A=84=E9=9D=A2=E5=8C=85=E5=B1=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/mini.db-wal                           | Bin 399672 -> 449112 bytes
 .../src/components/layout/header-crumb.vue    |  32 ++++++++++++++++
 .../src/components/layout/layout-header.vue   |  36 ++++++++++++------
 .../layout/layout-info/layout-info.vue        |   8 +++-
 frontend/src/components/layout/sider-menu.vue |  29 ++------------
 5 files changed, 66 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/components/layout/header-crumb.vue

diff --git a/backend/mini.db-wal b/backend/mini.db-wal
index f113b48bfa4af1963c7d31b1e096a3c742ba8836..ba48e783fabb5c39dd597ae9f26c33e37d00abcf 100644
GIT binary patch
delta 975
zcmdn7N#e#9>4p}@7N!>F7M2#)Eo>H&Y77hvTtLjd|MraD{`hE_*DWV4dmNhCd4Yn=
z{0fZx+xc_&6*ead2=Pyk5Mr9f$S}SC2CKw$olT5}7@E_%?{HYPZ!zWN&tYKZy9(6I
zcNMJpI3K4c6FUQ=uP-C#^h6;h;pzID81+F0`mg{k@|rHOiO~(O(c3m}R9m*N;u(g!
zfJOst^TuK{ez(4PaiY3r)~--q{_Q}wUSs6D2KDH1K1TlOahn*u!2aa~I*-AV)7O`C
zy38g<M+`4dKG?F^$o|G5Ebijs2O8}KbQmYX&w7Ld(I)nY(#J_@b7&BVvTNKLI`;Rx
z#Nt@;0x_%Fe(Mj$6H6!z#BFX3xwBOsoW<fUG6OMY*1JFXCv_*&AQ01M<Vs!Z|FH*)
TW62A|w)(F1+O6r#qy-`X(60@T

delta 21
ccmcbyMS903iG~)&7N!>F7M2#)Eo>H&0AWT4SO5S3

diff --git a/frontend/src/components/layout/header-crumb.vue b/frontend/src/components/layout/header-crumb.vue
new file mode 100644
index 0000000..43aa6ab
--- /dev/null
+++ b/frontend/src/components/layout/header-crumb.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+
+const route = useRoute();
+const cruPath = computed(() => {
+  return route.path.substring(1, route.path.length).split("/");
+});
+console.log(route.path, route.fullPath);
+</script>
+
+<template>
+  <div class="crumb">
+    <a-breadcrumb>
+      <a-breadcrumb-item href="">Home</a-breadcrumb-item>
+      <template v-for="path in cruPath">
+        <a-breadcrumb-item>
+          {{ path }}
+        </a-breadcrumb-item>
+      </template>
+    </a-breadcrumb>
+  </div>
+</template>
+
+<style scoped>
+.crumb {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  font-size: 10px;
+}
+</style>
diff --git a/frontend/src/components/layout/layout-header.vue b/frontend/src/components/layout/layout-header.vue
index fbd00c6..57badda 100644
--- a/frontend/src/components/layout/layout-header.vue
+++ b/frontend/src/components/layout/layout-header.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { ref } from "vue";
 import UserInfo from "@/components/layout/layout-info/layout-info.vue";
-import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
+import HeaderCrumb from "./header-crumb.vue";
+import { loadIconCpn } from "@/utils/loadCpn";
 
 // 记录图标状态
 const collapsed = ref(false);
@@ -18,25 +19,36 @@ const clickMenuFold = () => {
 
 <template>
   <div class="header">
-    <menu-unfold-outlined
-      v-if="collapsed"
-      class="trigger"
+    <!-- 左侧菜单收缩控制 -->
+    <component
+      class="menu-fold"
+      :is="loadIconCpn(collapsed ? 'MenuUnfoldOutlined' : 'MenuFoldOutlined')"
       @click="clickMenuFold"
-    />
-    <menu-fold-outlined v-else class="trigger" @click="clickMenuFold" />
-    <UserInfo />
+    >
+    </component>
+
+    <div class="right">
+      <HeaderCrumb />
+      <UserInfo class="info" />
+    </div>
   </div>
 </template>
 
 <style scoped>
-.trigger {
-  margin-left: 16px;
+.header {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+}
+.menu-fold {
   font-size: 24px;
+  line-height: 64px;
 }
 
 .right {
-  float: right;
-  margin-right: 16px;
-  font-size: 16px;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
 }
 </style>
diff --git a/frontend/src/components/layout/layout-info/layout-info.vue b/frontend/src/components/layout/layout-info/layout-info.vue
index a2bec66..b6747b1 100644
--- a/frontend/src/components/layout/layout-info/layout-info.vue
+++ b/frontend/src/components/layout/layout-info/layout-info.vue
@@ -22,7 +22,7 @@ const onClick = ({ key }) => {
 </script>
 
 <template>
-  <div class="right">
+  <div>
     <a-dropdown>
       <a class="ant-dropdown-link" @click.prevent>
         {{ store.userInfo.nickname }} - {{ store.userInfo.roles[0].name }}
@@ -38,4 +38,8 @@ const onClick = ({ key }) => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+div {
+  font-size: 16px;
+}
+</style>
diff --git a/frontend/src/components/layout/sider-menu.vue b/frontend/src/components/layout/sider-menu.vue
index 5f34f41..d1baf76 100644
--- a/frontend/src/components/layout/sider-menu.vue
+++ b/frontend/src/components/layout/sider-menu.vue
@@ -2,7 +2,6 @@
 import { useRouter } from "vue-router";
 import { userStore } from "@/stores/user";
 import { loadIconCpn } from "@/utils/loadCpn";
-import { ref } from "vue";
 
 const store = userStore();
 const router = useRouter();
@@ -15,10 +14,7 @@ const menuClick = (menu) => {
 
 <template>
   <div class="sider-menu">
-    <div class="logo">
-      <img src="@/assets/img/fastapi.svg" />
-      <h1>Mini RBAC</h1>
-    </div>
+    <div class="logo"></div>
     <a-menu theme="dark" mode="inline" v-model:selectedKeys="store.selectKey">
       <template v-for="menu in store.userMenus" :key="menu.id">
         <!-- 0 目录 顶层菜单 -->
@@ -46,27 +42,10 @@ const menuClick = (menu) => {
 
 <style scoped>
 .logo {
-  position: relative;
   display: flex;
-  align-items: center;
-  padding: 16px 16px;
-  line-height: 32px;
-  cursor: pointer;
-}
-
-.logo img {
-  display: inline-block;
   height: 32px;
-  vertical-align: middle;
-  transition: height 0.2s;
-}
-
-.logo h1 {
-  margin: 0 0 0 12px;
-  overflow: hidden;
-  color: #fff;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 32px;
+  background: rgba(255, 255, 255, 0.3) url("@/assets/img/fastapi.svg");
+  margin: 16px;
+  background-size: 100% 100%;
 }
 </style>