admin

admin-web/src/layouts/components/Topbar/Toolbar/Breadcrumb/index.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { compile } from 'path-to-regexp'
+import Breadcrumb from '../../../Breadcrumb/index.vue'
+import BreadcrumbItem from '../../../Breadcrumb/item.vue'
+
+const route = useRoute()
+
+const settingsStore = useSettingsStore()
+
+// 面包屑备份
+let breadcrumbListBackup: any = []
+const breadcrumbList = computed(() => {
+  if (route.name === 'reload') {
+    return breadcrumbListBackup
+  }
+  const list = []
+  if (settingsStore.settings.home.enable) {
+    list.push({
+      path: settingsStore.settings.home.fullPath,
+      title: settingsStore.settings.home.title,
+    })
+  }
+  route.matched.forEach((item) => {
+    if (item.meta?.breadcrumb !== false) {
+      list.push({
+        path: item.path,
+        title: item.meta?.title,
+      })
+    }
+  })
+  breadcrumbListBackup = list
+  return list
+})
+
+function pathCompile(path: string) {
+  const toPath = compile(path)
+  return toPath(route.params)
+}
+</script>
+
+<template>
+  <Breadcrumb v-if="settingsStore.mode === 'pc' && settingsStore.settings.app.routeBaseOn !== 'filesystem'" class="breadcrumb whitespace-nowrap px-2">
+    <TransitionGroup name="breadcrumb">
+      <BreadcrumbItem v-for="(item, index) in breadcrumbList" :key="`${index}_${item.path}_${item.title}`" :to="Number(index) < breadcrumbList.length - 1 && item.path !== '' ? pathCompile(item.path) : ''">
+        {{ item.title }}
+      </BreadcrumbItem>
+    </TransitionGroup>
+  </Breadcrumb>
+</template>
+
+<style scoped>
+/* 面包屑动画 */
+.breadcrumb-enter-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.breadcrumb-enter-from {
+  opacity: 0;
+  transform: translateX(30px) skewX(-50deg);
+}
+</style>