making tab selection as determinant more dynamic

src/store/modules/dashboard.ts

@@ -40,6 +40,7 @@ interface DashboardState {
   showTopology: boolean;
   fullView: boolean;
   currentTabItems: LayoutConfig[];
+  currentTabName: string;
   dashboards: DashboardItem[];
   currentDashboard: Nullable<DashboardItem>;
   editMode: boolean;
@@ -59,6 +60,7 @@ export const dashboardStore = defineStore({
     showTopology: false,
     fullView: false,
     currentTabItems: [],
+    currentTabName: '',
     dashboards: [],
     currentDashboard: null,
     editMode: false,
@@ -210,6 +212,9 @@ export const dashboardStore = defineStore({
     setCurrentTabItems(items: LayoutConfig[]) {
       this.currentTabItems = items;
     },
+    setCurrentTabName(name: string) {
+      this.currentTabName = name
+    },
     removeTab(item: LayoutConfig) {
       if (this.selectedGrid && this.selectedGrid.i === item.i) {
         this.selectedGrid = null;

src/views/dashboard/controls/Tab.vue

@@ -19,7 +19,7 @@ limitations under the License. -->
         v-for="(child, idx) in data.children || []"
         :key="idx"
         :class="{ active: activeTabIndex === idx }"
-        @click="clickTabs($event, idx)"
+        @click="clickTabs($event, idx, child.name, child)"
       >
         <input
           @click="editTabName($event, idx)"
@@ -266,8 +266,9 @@ export default defineComponent({
       }
     );
 
-    function clickTabs(e: Event, idx: number) {      
+    function clickTabs(e: Event, idx: number, currentTabName:string, extra:any) {      
       e.stopPropagation();
+      console.log(currentTabName, extra)
       activeTabIndex.value = idx;
       dashboardStore.activeGridItem(props.data.i);
       dashboardStore.selectWidget(props.data);
@@ -278,6 +279,7 @@ export default defineComponent({
       dashboardStore.setCurrentTabItems(
         dashboardStore.layout[l].children[activeTabIndex.value].children
       );
+      dashboardStore.setCurrentTabName(currentTabName)
       needQuery.value = true;
     }
     function removeTab(e: Event) {
@@ -484,7 +486,9 @@ export default defineComponent({
     color: #409eff;
   }
 }
-
+.tab-header .tabs .span.active{
+  color: red !important;
+}
 .operations {
   color: #aaa;
   cursor: pointer;

src/views/dashboard/panel/Tool.vue

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="dashboard-tool flex-h">    
+  <div class="dashboard-tool flex-h">  
     <div class="flex-h">
       <div class="flex-h">
         <div
@@ -172,6 +172,9 @@ limitations under the License. -->
         </div>
       </div>
     </div>
+    <!-- <pre>
+    {{dashboardStore.layout[0]}}
+  </pre> -->
     <Header v-if="showLogHeader" />
     <TraceDetailsTools
       v-if="showFilter && currentTraceView === 'traceDetails'"
@@ -183,11 +186,14 @@ limitations under the License. -->
 import Filter from "../related/trace/Filter.vue";
 import Header from "../related/log/Header.vue";
 
-import { reactive, ref, computed, watch } from "vue";
+import { reactive, onMounted, ref, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useTraceStore } from "@/store/modules/trace";
+onMounted(() =>{
+  console.log(dashboardStore.layout,dashboardStore.currentDashboard)
+})
 import {
   EntityType,
   AllTools,