feat(components): 增加面包屑导航

src/App.vue

@@ -12,7 +12,7 @@ const themeOverrides: GlobalThemeOverrides = {} || json;
 <template>
   <n-loading-bar-provider>
     <n-config-provider
-      wh-full
+      class="wh-full"
       :theme="null"
       :locale="locale"
       :date-locale="dateLocale"

src/layouts/BasicLayout/index.vue

@@ -11,7 +11,6 @@
     >
       <Logo :collapsed="collapsed" />
       <n-menu
-        :value="activeKey"
         :collapsed="collapsed"
         :collapsed-width="64"
         :collapsed-icon-size="24"
@@ -22,10 +21,20 @@
     </n-layout-sider>
 
     <n-layout class="h-full bg-hex-f3f4f6" :native-scrollbar="false">
-      <n-layout-header bordered class="text-2xl h-60px flex-y-center">
-        <div class="hover:bg-hex-F3F4F6 h-full px-2 flex-center cursor-pointer">
-          <Icon icon="icon-park-outline:mindmap-list" />
+      <n-layout-header bordered class="h-60px flex-y-center">
+        <div class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-2 flex-center cursor-pointer">
+          <Icon icon="carbon:list" class="inline-block" width="18" />
         </div>
+        <n-breadcrumb>
+          <n-breadcrumb-item v-for="(item, index) in routes" :key="index">
+            <Icon :icon="item.meta.icon" class="inline-block" width="18" />
+            {{ item.meta.title }}
+          </n-breadcrumb-item>
+          <n-breadcrumb-item v-for="(item, index) in routes" :key="index">
+            <Icon :icon="item.meta.icon" class="inline-block" width="18" />
+            {{ item.meta.title }}
+          </n-breadcrumb-item>
+        </n-breadcrumb>
       </n-layout-header>
       <div class="p-16px">
         <n-layout-content>
@@ -50,7 +59,7 @@ const collapsed = ref(false);
 function renderIcon(icon: string) {
   return () => h(Icon, { icon });
 }
-const activeKey = ref('');
+// const activeKey = ref('');
 const handleClickMenu = (key: string, _item: MenuOption) => {
   router.push(key);
 };
@@ -108,6 +117,12 @@ const menuOptions: MenuOption[] = [
     ],
   },
 ];
+import { computed } from 'vue';
+const routes = computed(() => {
+  return router.currentRoute.value.matched.filter((item) => {
+    return item.meta.title;
+  });
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

src/layouts/components/logo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-60px text-2xl flex-center">
     <SvgIcon name="logo" class="w-9 h-9" />
-    <span v-show="!props.collapsed" class="font-bold mx-5">{{ props.title }}</span>
+    <span v-show="!props.collapsed" class="mx-5">{{ props.title }}</span>
   </div>
 </template>
 

src/router/index.ts

@@ -14,16 +14,28 @@ const routes: RouteRecordRaw[] = [
         path: '/test1',
         name: 'test1',
         component: () => import('~/src/views/test/test1.vue'),
+        meta: {
+          title: '测试1',
+          icon: 'icon-park-outline:game-three',
+        },
       },
       {
         path: '/test2',
         name: 'test2',
         component: () => import('~/src/views/test/test2.vue'),
+        meta: {
+          title: '测试2',
+          icon: 'carbon:aperture',
+        },
       },
       {
         path: '/test3',
         name: 'test3',
         component: () => import('~/src/views/test/test3.vue'),
+        meta: {
+          title: '测试3',
+          icon: 'carbon:breaking-change',
+        },
       },
     ],
   },

src/views/login/index.vue

@@ -5,8 +5,8 @@
     </n-carousel>
     <div flex-1 flex-center>
       <div b-rd-2 bg-white w-md h-xl shadow-lg p-5xl>
-        <n-h1>
-          <Icon icon="icon-park:ad-product" inline-block />
+        <n-h1 c-blue>
+          <Icon icon="icon-park-outline:plastic-surgery" inline-block />
           Ench Admin
         </n-h1>
         <n-p depth="3">高效、简约、可能对你有点帮助</n-p>

src/views/test/test1.vue

@@ -20,7 +20,6 @@ import { ref } from 'vue';
 const msg = ref();
 const pinter = () => {
   msg.value = import.meta.env;
-  console.log('打印环境配置', import.meta.env);
 };
 const get = () => {
   fetachGet().then((res) => {