From d5e46c347358ecc15f0136a66e61f1a5e20c9ae0 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Thu, 11 Aug 2022 12:52:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E5=AF=B9=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=AD=E7=9A=84=E7=BB=84=E4=BB=B6=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E4=BA=86=E6=8B=86=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout/index.vue          | 26 +++------------
 src/layouts/components/Breadcrumb.vue      | 37 ++++++++++++++++++++++
 src/layouts/components/CollapaseButton.vue | 11 +++++++
 src/router/index.ts                        |  2 +-
 4 files changed, 54 insertions(+), 22 deletions(-)
 create mode 100644 src/layouts/components/Breadcrumb.vue
 create mode 100644 src/layouts/components/CollapaseButton.vue

diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index c7f3cf8..479448e 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -22,19 +22,8 @@
 
     <n-layout class="h-full bg-hex-f3f4f6" :native-scrollbar="false">
       <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>
+        <CollapaseButton />
+        <Breadcrumb />
       </n-layout-header>
       <div class="p-16px">
         <n-layout-content>
@@ -51,8 +40,9 @@ import type { MenuOption } from 'naive-ui';
 import { h, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
-import Logo from '../components/logo.vue';
-import { computed } from 'vue';
+import Logo from '../components/Logo.vue';
+import Breadcrumb from '../components/Breadcrumb.vue';
+import CollapaseButton from '../components/CollapaseButton.vue';
 
 const router = useRouter();
 const collapsed = ref(false);
@@ -118,12 +108,6 @@ const menuOptions: MenuOption[] = [
     ],
   },
 ];
-
-const routes = computed(() => {
-  return router.currentRoute.value.matched.filter((item) => {
-    return item.meta.title;
-  });
-});
 </script>
 
 <style scoped></style>
diff --git a/src/layouts/components/Breadcrumb.vue b/src/layouts/components/Breadcrumb.vue
new file mode 100644
index 0000000..8aa6e33
--- /dev/null
+++ b/src/layouts/components/Breadcrumb.vue
@@ -0,0 +1,37 @@
+<template>
+  <n-breadcrumb>
+    <n-breadcrumb-item class="align-middle">
+      <Icon icon="icon-park-outline:home-two" class="inline-block" width="16" />
+      首页
+    </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>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { Icon } from '@iconify/vue';
+
+const router = useRouter();
+// const props = defineProps({
+//   title: {
+//     type: String,
+//     default: 'Logo2',
+//   },
+//   collapsed: {
+//     type: Boolean,
+//     default: false,
+//   },
+// });
+const routes = computed(() => {
+  return router.currentRoute.value.matched.filter((item) => {
+    return item.meta.title;
+  });
+});
+</script>
+
+<style scoped></style>
diff --git a/src/layouts/components/CollapaseButton.vue b/src/layouts/components/CollapaseButton.vue
new file mode 100644
index 0000000..3a48505
--- /dev/null
+++ b/src/layouts/components/CollapaseButton.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-2 flex-center cursor-pointer">
+    <Icon icon="icon-park-outline:music-list" class="inline-block" width="18" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+</script>
+
+<style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 16c610c..137b9bc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -34,7 +34,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('~/src/views/test/test3.vue'),
         meta: {
           title: '测试3',
-          icon: 'carbon:breaking-change',
+          icon: 'icon-park-outline:music-list',
         },
       },
     ],