feat: implement a breadcrumb component as navigation (#313)

src/views/dashboard/Edit.vue

@@ -41,13 +41,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-  import { ref, defineComponent } from "vue";
+  import { ref, defineComponent, onUnmounted } from "vue";
   import { useI18n } from "vue-i18n";
   import { useRoute } from "vue-router";
   import GridLayout from "./panel/Layout.vue";
   import Tool from "./panel/Tool.vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import Configuration from "./configuration";
   import type { LayoutConfig } from "@/types/dashboard";
   import WidgetLink from "./components/WidgetLink.vue";
@@ -57,7 +56,6 @@ limitations under the License. -->
     components: { ...Configuration, GridLayout, Tool, WidgetLink },
     setup() {
       const dashboardStore = useDashboardStore();
-      const appStore = useAppStoreWithOut();
       const { t } = useI18n();
       const p = useRoute().params;
       const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
@@ -77,7 +75,6 @@ limitations under the License. -->
         const layout: any = c.configuration || {};
 
         dashboardStore.setLayout(setWidgetsID(layout.children || []));
-        appStore.setPageTitle(layout.name);
         if (p.entity) {
           dashboardStore.setCurrentDashboard({
             layer: p.layerId,
@@ -114,6 +111,10 @@ limitations under the License. -->
         }
       }
 
+      onUnmounted(() => {
+        dashboardStore.setCurrentDashboard({});
+      });
+
       return {
         t,
         handleClick,

src/views/dashboard/List.vue

@@ -135,7 +135,6 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { ElMessageBox, ElMessage } from "element-plus";
   import { ElTable } from "element-plus";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import router from "@/router";
   import type { DashboardItem, LayoutConfig } from "@/types/dashboard";
@@ -145,7 +144,6 @@ limitations under the License. -->
 
   /*global Nullable*/
   const { t } = useI18n();
-  const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const pageSize = 20;
   const dashboards = ref<DashboardItem[]>([]);
@@ -157,7 +155,6 @@ limitations under the License. -->
   const multipleSelection = ref<DashboardItem[]>([]);
   const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
 
-  appStore.setPageTitle("Dashboard List");
   const handleSelectionChange = (val: DashboardItem[]) => {
     multipleSelection.value = val;
   };

src/views/dashboard/New.vue

@@ -53,12 +53,9 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import { EntityType } from "./data";
   import { ElMessage } from "element-plus";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
 
-  const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
-  appStore.setPageTitle("Dashboard New");
   const { t } = useI18n();
   const selectorStore = useSelectorStore();
   const states = reactive({

src/views/dashboard/data.ts

@@ -161,6 +161,7 @@ export enum MetricCatalog {
   SERVICE_RELATION = "ServiceRelation",
   SERVICE_INSTANCE_RELATION = "ServiceInstanceRelation",
   ENDPOINT_RELATION = "EndpointRelation",
+  Process = "Process",
   PROCESS_RELATION = "ProcessRelation",
 }
 export const EntityType = [

src/views/dashboard/graphs/InstanceList.vue

@@ -294,4 +294,8 @@ limitations under the License. -->
     max-height: 400px;
     overflow: auto;
   }
+
+  .link {
+    color: $active-color;
+  }
 </style>

src/views/dashboard/related/network-profiling/components/Tasks.vue

@@ -216,7 +216,7 @@ limitations under the License. -->
     width: 330px;
     height: calc(100% - 10px);
     overflow: auto;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgb(0 0 0 / 10%);
   }
 
   .item span {
@@ -225,7 +225,7 @@ limitations under the License. -->
 
   .profile-td {
     padding: 10px 5px 10px 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
       background-color: #ededed;
@@ -253,13 +253,13 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgb(0 0 0 / 4%);
     }
   }
 
   .profile-t-tool {
     padding: 10px 5px 10px 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
     background: #f3f4f9;
     width: 100%;
   }