发布v2.0.0分支

frontend/src/components/Breadcrumb/index.vue

@@ -1,46 +1,85 @@
 <template>
-    <a-breadcrumb :routes="routes">
-        <template #itemRender="{ route, routes }">
-            <span v-if="isLastRoute(route, routes)">{{ route.breadcrumbName }}</span>
-            <router-link v-else :to="route.path">{{ route.breadcrumbName }}</router-link>
-        </template>
-    </a-breadcrumb>
+  <el-breadcrumb class="flex-y-center">
+    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
+      <span
+        v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1"
+        class="color-gray-400"
+      >
+        {{ translateRouteTitle(item.meta.title) }}
+      </span>
+      <a v-else @click.prevent="handleLink(item)">
+        {{ translateRouteTitle(item.meta.title) }}
+      </a>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
 </template>
 
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { useRoute } from "vue-router";
+<script setup lang="ts">
+import { RouteLocationMatched } from "vue-router";
+import { compile } from "path-to-regexp";
+import router from "@/router";
+import { translateRouteTitle } from "@/utils/i18n";
 
-interface BreadcrumbRoute {
-    path: string;
-    breadcrumbName?: string;
+const currentRoute = useRoute();
+const pathCompile = (path: string) => {
+  const { params } = currentRoute;
+  const toPath = compile(path);
+  return toPath(params);
+};
+
+const breadcrumbs = ref<Array<RouteLocationMatched>>([]);
+
+function getBreadcrumb() {
+  let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title);
+  const first = matched[0];
+  if (!isDashboard(first)) {
+    matched = [{ path: "/dashboard", meta: { title: "dashboard" } } as any].concat(matched);
+  }
+  breadcrumbs.value = matched.filter((item) => {
+    return item.meta && item.meta.title && item.meta.breadcrumb !== false;
+  });
 }
 
-const route = useRoute();
-const routes = ref<BreadcrumbRoute[]>([]);
+function isDashboard(route: RouteLocationMatched) {
+  const name = route && route.name;
+  if (!name) {
+    return false;
+  }
+  return name.toString().trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase();
+}
 
-const isLastRoute = (currentRoute: BreadcrumbRoute, allRoutes: BreadcrumbRoute[]) => {
-    return allRoutes.indexOf(currentRoute) === allRoutes.length - 1;
-};
+function handleLink(item: any) {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect).catch((err) => {
+      console.warn(err);
+    });
+    return;
+  }
+  router.push(pathCompile(path)).catch((err) => {
+    console.warn(err);
+  });
+}
 
-const getBreadcrumb = () => {
-    const matchedRoutes = route.matched
-        .filter((_, index) => index > 0) // 跳过第一个匹配项
-        .map(item => ({
-            path: item.path,
-            breadcrumbName: item.meta.title?.toString()
-        }));
-    
-    routes.value = matchedRoutes.length > 1 ? matchedRoutes : [];
-};
+watch(
+  () => currentRoute.path,
+  (path) => {
+    if (path.startsWith("/redirect/")) {
+      return;
+    }
+    getBreadcrumb();
+  }
+);
 
-// 初始化并监听路由变化
-watch(() => route.path, getBreadcrumb, { immediate: true });
+onBeforeMount(() => {
+  getBreadcrumb();
+});
 </script>
 
-<style scoped>
-/* 可以添加一些样式优化 */
-.a-breadcrumb {
-    margin: 12px 0;
+<style lang="scss" scoped>
+// 覆盖 element-plus 的样式
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
 }
-</style>
+</style>