feat: 添加simple、normal、full 等layout布局

src/layouts/components/BreadCrumb.vue

@@ -0,0 +1,80 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:10
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-breadcrumb>
+    <n-breadcrumb-item v-if="!breadItems?.length" :clickable="false">
+      {{ route.meta.title }}
+    </n-breadcrumb-item>
+    <n-breadcrumb-item
+      v-for="item of breadItems"
+      v-else
+      :key="item.code"
+      :clickable="!!item.path"
+      @click="handleItemClick(item)"
+    >
+      <n-dropdown :options="getDropOptions(item.children)" @select="handleDropSelect">
+        <div class="flex items-center">
+          <i :class="item.icon" class="mr-8" />
+          {{ item.name }}
+        </div>
+      </n-dropdown>
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>
+
+<script setup>
+import { usePermissionStore } from '@/store'
+const router = useRouter()
+const route = useRoute()
+const permissionStore = usePermissionStore()
+
+const breadItems = ref([])
+watch(
+  () => route.name,
+  (v) => {
+    breadItems.value = findMatchs(permissionStore.permissions, v)
+  },
+  { immediate: true }
+)
+
+function findMatchs(tree, code, parents = []) {
+  for (const item of tree) {
+    if (item.code === code) {
+      return [...parents, item]
+    }
+    if (item.children?.length) {
+      const found = findMatchs(item.children, code, [...parents, item])
+      if (found) {
+        return found
+      }
+    }
+  }
+  return null
+}
+
+function handleItemClick(item) {
+  if (item.path && item.code !== route.name) {
+    router.push(item.path)
+  }
+}
+
+function getDropOptions(list = []) {
+  return list.map((child) => ({
+    label: child.name,
+    key: child.code,
+    icon: () => h('i', { class: child.icon }),
+  }))
+}
+
+function handleDropSelect(item) {
+  if (item.path && item.code !== route.name) {
+    router.push(item.path)
+  }
+}
+</script>