feat: 无法跳转的面包屑

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>

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"
+    <component
-      class="trigger"
+      class="menu-fold"
+      :is="loadIconCpn(collapsed ? 'MenuUnfoldOutlined' : 'MenuFoldOutlined')"
       @click="clickMenuFold"
-    />
+    >
-    <menu-fold-outlined v-else class="trigger" @click="clickMenuFold" />
+    </component>
-    <UserInfo />
+
+    <div class="right">
+      <HeaderCrumb />
+      <UserInfo class="info" />
+    </div>
   </div>
 </template>
 
 <style scoped>
-.trigger {
+.header {
-  margin-left: 16px;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+}
+.menu-fold {
   font-size: 24px;
+  line-height: 64px;
 }
 
 .right {
-  float: right;
+  display: flex;
-  margin-right: 16px;
+  flex: 1;
-  font-size: 16px;
+  justify-content: space-between;
 }
 </style>

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>

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">
+    <div class="logo"></div>
-      <img src="@/assets/img/fastapi.svg" />
-      <h1>Mini RBAC</h1>
-    </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;
+  background: rgba(255, 255, 255, 0.3) url("@/assets/img/fastapi.svg");
-  transition: height 0.2s;
+  margin: 16px;
-}
+  background-size: 100% 100%;
-
-.logo h1 {
-  margin: 0 0 0 12px;
-  overflow: hidden;
-  color: #fff;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 32px;
 }
 </style>