From 2f75c713d5c1fde3ae79b421d4e108cbc9b472d5 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Mon, 23 Jun 2025 11:45:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=9D=A2=E5=8C=85=E5=B1=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/separator.png           | Bin 0 -> 662 bytes
 src/components/Breadcrumb copy.vue |  77 +++++++++++++++++
 src/components/Breadcrumb.vue      | 166 +++++++++++++++++++++----------------
 src/router/index.js                |  50 +++++------
 4 files changed, 192 insertions(+), 101 deletions(-)
 create mode 100644 src/assets/separator.png
 create mode 100644 src/components/Breadcrumb copy.vue

diff --git a/src/assets/separator.png b/src/assets/separator.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ff4277ab6dd1266044a1ecb534bb1e8d391b976
GIT binary patch
literal 662
zcmV;H0%`q;P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrKuJVFRA_<imrst<Fcii=J4q?9$q~w$f*L5TDi*Xi
zffLZ4VCV^E<^*sAZjkOgOh6vdvZhDqW+Y%zKQ=|`1l6hkBqKzATSxEtdoS;^4Ky?~
zG&D5)!?3$ZDunFtDCj9-o6(CW3zt~63rMAmAE-zI=l}p?SRiM!!Qk<gO+4;%bH~um
z!zp%~2LK|BDIh7b<vW{rwRS)V+2O6|`=NEEXkz+H)!KpJUi4nKu840;W7Z}>WXmxT
z#)sA!!{VjI9MmR&bEd8Sc1v@sxOUqy<04z#8r&iTe6Y3C$_1oS#*E`c^T~#O-B?v0
zs6oI(6`cTx53MUj=c7@wwvAt@fXmBoJp!hhPu4%e{LCdswH*lQRJ%@UHc1j=>)fZZ
zgG^-0G3P8jn3!QPc-Eb`=BcCusg!Y5wppYS0mb`H5eA&O-a`N2UBIsTZ#AE6uDQK!
z7V$3NzKTv!Vw<jmyN}l)E*o3`>*4e6BcD0Fb|46t?!<*s^u}jCz@q^1<?HLR+orF<
z-N%c7RLYoxYpcKgdE>qMfF}V**`~vNM~AZjA!Mgc+brTNfVWy&+a!g#PuncwWTU0F
zNw^yJyNOGVGMqY4YMVqem-xqEE#M+sP4B`si&zOb=9yTPZ5FW-u(Qp|o{1(H3)tN@
zwbgfhCYoR@pq+<3-MWJNGtmSq8~yZoCBg8Q5MR$k6Rc)n*zYDv(Hy|7O8a^yn&5Ph
wrBcT2Je)GdUNNZiVgKnzUmI&^X!uX~4SomE<RVsL{{R3007*qoM6N<$f|d<6-2eap

literal 0
HcmV?d00001

diff --git a/src/components/Breadcrumb copy.vue b/src/components/Breadcrumb copy.vue
new file mode 100644
index 0000000..7dea213
--- /dev/null
+++ b/src/components/Breadcrumb copy.vue	
@@ -0,0 +1,77 @@
+<template>
+    <el-breadcrumb v-if="showBreadcrumb" separator="/">
+      <el-breadcrumb-item
+        v-for="(item, index) in breadcrumbList"
+        :key="index"
+      >
+        <i v-if="item.icon" :class="item.icon"></i>
+        <span>{{ item.title }}</span>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        breadcrumbList: [],
+        showBreadcrumb: false // 控制是否显示面包屑导航
+      };
+    },
+    watch: {
+      $route() {
+        this.updateBreadcrumb();
+      }
+    },
+    mounted() {
+      this.updateBreadcrumb();
+    },
+    methods: {
+      updateBreadcrumb() {
+        const currentPath = this.$route.path;
+        // 判断是否为子页面
+        if(!this.$parent.menuData)return
+        const isSubPage = this.isSubPage(currentPath);
+        this.showBreadcrumb = isSubPage;
+  
+        if (isSubPage) {
+          this.breadcrumbList = this.getBreadcrumbList(currentPath);
+        } else {
+          this.breadcrumbList = [];
+        }
+      },
+      isSubPage(path) {
+        console.log(this.$parent.menuData,'this.$parent.menuData==');
+        // 判断当前路径是否为子页面
+        for (const menu of this.$parent.menuData) {
+          for (const subMenu of menu.children) {
+            if (subMenu.path === path) {
+              return true;
+            }
+          }
+        }
+        return false;
+      },
+      getBreadcrumbList(path) {
+        const breadcrumbList = [];
+        // 遍历菜单数据，查找匹配的面包屑路径
+        for (const menu of this.$parent.menuData) {
+          for (const subMenu of menu.children) {
+            if (subMenu.path === path) {
+              breadcrumbList.push({ title: menu.title, icon: menu.icon });
+              breadcrumbList.push({ title: subMenu.title });
+              break;
+            }
+          }
+        }
+        return breadcrumbList;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .el-breadcrumb {
+    margin-bottom: 20px;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 7dea213..c0b0094 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -1,77 +1,101 @@
 <template>
-    <el-breadcrumb v-if="showBreadcrumb" separator="/">
-      <el-breadcrumb-item
-        v-for="(item, index) in breadcrumbList"
-        :key="index"
-      >
-        <i v-if="item.icon" :class="item.icon"></i>
-        <span>{{ item.title }}</span>
-      </el-breadcrumb-item>
-    </el-breadcrumb>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-        breadcrumbList: [],
-        showBreadcrumb: false // 控制是否显示面包屑导航
-      };
-    },
-    watch: {
-      $route() {
-        this.updateBreadcrumb();
-      }
-    },
-    mounted() {
-      this.updateBreadcrumb();
-    },
-    methods: {
-      updateBreadcrumb() {
-        const currentPath = this.$route.path;
-        // 判断是否为子页面
-        if(!this.$parent.menuData)return
-        const isSubPage = this.isSubPage(currentPath);
-        this.showBreadcrumb = isSubPage;
-  
-        if (isSubPage) {
-          this.breadcrumbList = this.getBreadcrumbList(currentPath);
+  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container">
+    <nav>
+      <ol class="breadcrumb">
+        <li
+          v-for="(item, index) in breadcrumbs"
+          :key="index"
+          class="breadcrumb-item"
+          :class="{ active: index === breadcrumbs.length - 1 }"
+        >
+          <template v-if="index !== breadcrumbs.length - 1">
+            <router-link :to="item.path">{{ item.title }}</router-link>
+            <!-- <span class="separator">/</span> -->
+            <img class="separator" src="@/assets/separator.png" alt="">
+          </template>
+          <template v-else>
+            <span>{{ item.title }}</span>
+          </template>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Breadcrumb',
+  computed: {
+    breadcrumbs() {
+      if (this.$route.meta.hideBreadcrumb) return []
+
+      const crumbs = []
+      let currentRoute = this.$route
+
+      // 递归查找所有父级路由
+      while (currentRoute) {
+        crumbs.unshift({
+          path: currentRoute.path,
+          title: this.getTitle(currentRoute)
+        })
+
+        // 通过 meta.breadcrumbParent 查找父级路由
+        if (currentRoute.meta.breadcrumbParent) {
+          currentRoute = this.$router.options.routes.find(
+            r => r.name === currentRoute.meta.breadcrumbParent
+          )
         } else {
-          this.breadcrumbList = [];
-        }
-      },
-      isSubPage(path) {
-        console.log(this.$parent.menuData,'this.$parent.menuData==');
-        // 判断当前路径是否为子页面
-        for (const menu of this.$parent.menuData) {
-          for (const subMenu of menu.children) {
-            if (subMenu.path === path) {
-              return true;
-            }
-          }
+          currentRoute = null
         }
-        return false;
-      },
-      getBreadcrumbList(path) {
-        const breadcrumbList = [];
-        // 遍历菜单数据，查找匹配的面包屑路径
-        for (const menu of this.$parent.menuData) {
-          for (const subMenu of menu.children) {
-            if (subMenu.path === path) {
-              breadcrumbList.push({ title: menu.title, icon: menu.icon });
-              breadcrumbList.push({ title: subMenu.title });
-              break;
-            }
-          }
-        }
-        return breadcrumbList;
       }
+
+      return crumbs
+    }
+  },
+  methods: {
+    getTitle(route) {
+      return typeof route.meta.title === 'function'
+        ? route.meta.title(route)
+        : route.meta.title || route.name
     }
-  };
-  </script>
-  
-  <style scoped>
-  .el-breadcrumb {
-    margin-bottom: 20px;
   }
-  </style>
\ No newline at end of file
+}
+</script>
+<style scoped>
+/* 保持之前的样式不变 */
+.breadcrumb-container {
+  padding: 16px 12px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb-item a {
+  color: #626573;
+  text-decoration: none;
+}
+
+.breadcrumb-item.active span {
+  color: #1E2226;;
+
+}
+
+.separator {
+  /* margin: 0 5px;
+  color: #6c757d;; */
+  width: 12px;
+  height: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 3c44a5d..1a4cfdf 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,27 +30,17 @@ const routes = [{
     path: '/',
     name: '首页',
     component: HomeView,
-    // component: Franchise
+    meta: { 
+      title: '首页',
+      hideBreadcrumb: true // 首页不显示面包屑
+    }
   },
   {
     path: '/register',
     name: 'register',
-    // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import( /* webpackChunkName: "register" */ '../views/Register.vue'),
-    children: [ // 这是子路由的定义开始
-      // {
-      //   path: '', // 当访问 /user 时，默认加载 UserProfile 组件
-      //   name: 'register',
-      //   component: Register
-      // },
-      // {
-      //   path: 'posts', // 当访问 /user/posts 时，加载 UserPosts 组件
-      //   name: 'UserPosts',
-      //   component: UserPosts,
-      // }
-    ]
   },
   {
     path: '/ui',
@@ -68,22 +58,22 @@ const routes = [{
     // which is lazy-loaded when the route is visited.
     component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteList.vue')
   },
-  {
-    path: '/agent/siteBaseSetting',
-    name: '站点基本设置',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteBaseSetting.vue')
-  },
-  {
-    path: '/agent/siteSemSetting',
-    name: '营销推广',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteSemSetting.vue')
-  },
+  // {
+  //   path: '/agent/siteBaseSetting',
+  //   name: '站点基本设置',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteBaseSetting.vue')
+  // },
+  // {
+  //   path: '/agent/siteSemSetting',
+  //   name: '营销推广',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteSemSetting.vue')
+  // },
   {
     path: '/franchise',
     name: '加盟',