面包屑右侧内容恢复

src/components/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container">
+  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container flex-between">
     <nav>
       <ol class="breadcrumb">
         <li
@@ -9,7 +9,10 @@
           :class="{ active: index === breadcrumbs.length - 1 }"
         >
         <template v-if="index !== breadcrumbs.length - 1">
-            <router-link :to="item.path">{{ item.title }}</router-link>
+            <router-link to="/" v-if="item.title == '首页'">
+              <SvgIcon1 :iconPath="require(`@/assets/menu/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/>
+            </router-link>
+            <router-link v-else :to="item.path">{{ item.title }}</router-link>
             <img class="separator" src="@/assets/separator.png" alt="">
           </template>
           <template v-else>
@@ -18,11 +21,21 @@
         </li>
       </ol>
     </nav>
+    <div v-if="breadRightText" class="gap8 breadRight">
+      <img class="ml-8" src="@/assets/site/bind_sites.svg" alt="" />
+      站点简称：<a :href="breadRightText">{{ breadRightText }}</a>
+    </div>
   </div>
 </template>
 <script>
+import SvgIcon1 from '@/components/SvgIcon1.vue';
+import { mapState } from 'vuex';
+
 export default {
   name: 'Breadcrumb',
+  components: {
+    SvgIcon1,
+  },
   computed: {
     breadcrumbs() {
       if (this.$route.meta.hideBreadcrumb) return [];
@@ -71,7 +84,8 @@ export default {
       }
 
       return crumbs;
-    }
+    },
+    ...mapState(['breadRightText']) // 从Vuex映射showSidebar状态到组件的计算属性中
   },
   methods: {
     getTitle(route) {
@@ -88,6 +102,12 @@ export default {
   padding: 16px 12px;
   background-color: #f5f5f5;
   border-radius: 4px;
+  .breadRight{
+    a{
+      text-decoration: none;
+      color: #006AFF;
+    }
+  }
 }
 
 .home-icon {