feat: 顶部面包屑导航封装

src/store/modules/breadcrumb.ts

@@ -0,0 +1,22 @@
+import { VuexModule, Module, getModule, Mutation } from 'vuex-module-decorators';
+import store from '@/store';
+
+export interface IBreadcrumbItem {
+  label: string,
+  path?: string
+}
+
+@Module({ namespaced: true, name: 'breadcrumb', dynamic: true, store })
+export class Breadcrumb extends VuexModule {
+
+  breadcrumbs: IBreadcrumbItem[] = [
+    { label: '首页', path: '/' },
+  ]
+
+  @Mutation
+  setBreadcrumb(breadcrumbs: IBreadcrumbItem[]) {
+    this.breadcrumbs.splice(1, this.breadcrumbs.length - 1, ...breadcrumbs)
+  }
+}
+
+export default getModule<Breadcrumb>(Breadcrumb);

src/views/data-library/DataLibrary.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
+import breadcrumbStore from '@/store/modules/breadcrumb'
+
+const { setBreadcrumb } = breadcrumbStore
+setBreadcrumb([
+  {
+    label: '系统数据库',
+  },
+])
 </script>
 
 <template>

src/views/main-frame/MainFrame.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { invokeAllRefreshCallback } from '@/composables/useRefresh'
+import breadcrumbStore from '@/store/modules/breadcrumb'
+import { isUndefined } from 'lodash'
 
 const route = useRoute()
 
@@ -17,6 +19,8 @@ const handleRefresh = () => {
     refreshing.value = false
   }, 1000);
 }
+
+const breadcrumbs = computed(() => breadcrumbStore.breadcrumbs)
 </script>
 
 <template>
@@ -26,11 +30,12 @@ const handleRefresh = () => {
       <span class="refresh" title="刷新" @click="handleRefresh">
         <iconfont class="icon dsk-undo" :class="{ refreshing }" />
       </span>
-      <ul class="breadcrumb">
-        <li class="item">首页</li>
-        <li class="item">项目列表</li>
-        <li class="item">莲花路电力迁改项目</li>
-      </ul>
+      <el-breadcrumb separator="/">
+        <template v-for="item in breadcrumbs">
+          <el-breadcrumb-item v-if="isUndefined(item.path)">{{ item.label }}</el-breadcrumb-item>
+          <el-breadcrumb-item v-else :to="{ path: item.path }">{{ item.label }}</el-breadcrumb-item>
+        </template>
+      </el-breadcrumb>
       <span class="data-big-screen">
         <iconfont class="icon dsk-workbench" />
       </span>

src/views/main-frame/style.scss

@@ -45,24 +45,30 @@
       }
     }
 
-    .breadcrumb {
-      @apply flex flex-1;
+    .el-breadcrumb {
+      @apply flex-1;
       margin-left: 10px;
-      font-size: 15px;
-      color: rgba(255, 255, 255, 0.7);
 
-      .item {
-        &::after {
-          @apply inline-block;
-          content: "/";
+      ::v-deep .el-breadcrumb__item {
+        .el-breadcrumb__inner {
+          color: rgba(255, 255, 255, 0.7);
+          font-size: 15px;
+          &.is-link {
+            font-weight: 400;
+            &:hover {
+              color: #fff;
+            }
+          }
+        }
+        
+        .el-breadcrumb__separator {
           margin: 0 8px;
+          color: rgba(255, 255, 255, 0.7);
         }
 
         &:last-child {
-          color: #fff;
-
-          &::after {
-            display: none;
+          .el-breadcrumb__inner {
+            color: #fff;
           }
         }
       }

src/views/project-list/ProjectList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
+import breadcrumbStore from '@/store/modules/breadcrumb'
 
 const filterForm = reactive({
   name: '',
@@ -60,6 +61,13 @@ const list = [
 ]
 list.push(...list)
 const projectList = reactive(list);
+
+const { setBreadcrumb } = breadcrumbStore
+setBreadcrumb([
+  {
+    label: '项目列表',
+  }
+])
 </script>
 
 <template>

src/views/project/Project.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useRoute } from 'vue-router'
+import breadcrumbStore from '@/store/modules/breadcrumb'
 
 const route = useRoute()
+
+const { setBreadcrumb } = breadcrumbStore
+setBreadcrumb([
+  {
+    label: '项目列表',
+    path: '/project-list'
+  },
+  {
+    label: '莲花路电力迁改项目'
+  }
+])
 </script>
 
 <template>

src/views/workbench/Workbench.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import getPath, { post } from '@/apis/controller/index';
+import breadcrumbStore from '@/store/modules/breadcrumb'
 
 const handleClick = async () => {
   console.log(await getPath())
   console.log('----')
-  console.log(await post())
+  console.log(await post('1'))
 }
+
+const { setBreadcrumb } = breadcrumbStore
+setBreadcrumb([
+  {
+    label: '工作台',
+  }
+])
 </script>
 
 <template>