refactor(components): 对布局中的组件进行了拆分

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>

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>

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>

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',
         },
       },
     ],