From a56b084426cee0af8d54631a47f11ba1a97c0f75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com>
Date: Thu, 11 Aug 2022 01:04:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E5=A2=9E=E5=8A=A0=E9=9D=A2?=
 =?UTF-8?q?=E5=8C=85=E5=B1=91=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |  2 +-
 src/layouts/BasicLayout/index.vue | 27 +++++++++++++++++++++------
 src/layouts/components/logo.vue   |  2 +-
 src/router/index.ts               | 12 ++++++++++++
 src/views/login/index.vue         |  4 ++--
 src/views/test/test1.vue          |  1 -
 6 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ec81238..5f829ae 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index a055e4e..cd81f7d 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/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>
diff --git a/src/layouts/components/logo.vue b/src/layouts/components/logo.vue
index bd162f7..13abdc5 100644
--- a/src/layouts/components/logo.vue
+++ b/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>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 33315e9..16c610c 100644
--- a/src/router/index.ts
+++ b/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',
+        },
       },
     ],
   },
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index e4dfab6..9127c6d 100644
--- a/src/views/login/index.vue
+++ b/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>
diff --git a/src/views/test/test1.vue b/src/views/test/test1.vue
index ed7e3dd..bd8c39f 100644
--- a/src/views/test/test1.vue
+++ b/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) => {