fix: remove items

src/store/modules/dashboard.ts

@@ -43,6 +43,7 @@ interface DashboardState {
   durationTime: Duration;
   selectorStore: any;
   showTopology: boolean;
+  currentTabItems: LayoutConfig[];
 }
 
 export const dashboardStore = defineStore({
@@ -57,6 +58,7 @@ export const dashboardStore = defineStore({
     durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
     showTopology: false,
+    currentTabItems: [],
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -158,6 +160,7 @@ export const dashboardStore = defineStore({
         });
         items.push(newItem);
         this.layout[idx].children[tabIndex].children = items;
+        this.currentTabItems = items;
       }
     },
     activeGridItem(index: string) {
@@ -172,7 +175,13 @@ export const dashboardStore = defineStore({
       }
       this.layout[idx].activedTabIndex = index;
     },
+    setCurrentTabItems(items: LayoutConfig[]) {
+      this.currentTabItems = items;
+    },
     removeTab(item: LayoutConfig) {
+      if (this.selectedGrid && this.selectedGrid.i === item.i) {
+        this.selectedGrid = null;
+      }
       this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
     },
     removeControls(item: LayoutConfig) {
@@ -181,6 +190,9 @@ export const dashboardStore = defineStore({
         (d: LayoutConfig) => actived[0] === d.i
       );
 
+      if (this.selectedGrid.i === item.i) {
+        this.selectedGrid = null;
+      }
       if (actived.length === 3) {
         const tabIndex = Number(actived[1]);
         const itemIndex = this.layout[index].children[
@@ -188,12 +200,18 @@ export const dashboardStore = defineStore({
         ].children.findIndex((d: LayoutConfig) => actived[2] === d.i);
 
         this.layout[index].children[tabIndex].children.splice(itemIndex, 1);
+        this.setCurrentTabItems(this.layout[index].children[tabIndex].children);
         return;
       }
       this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
     },
     removeTabItem(item: LayoutConfig, index: number) {
       const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
+      for (const item of this.layout[idx].children[index].children) {
+        if (this.selectedGrid.i === item.i) {
+          this.selectedGrid = null;
+        }
+      }
       if (this.layout[idx].children) {
         this.layout[idx].children?.splice(index, 1);
       }

src/views/dashboard/controls/Tab.vue

@@ -33,7 +33,7 @@ limitations under the License. -->
           v-show="activeTabIndex === idx"
           size="sm"
           iconName="cancel"
-          @click="deleteTabItem(idx)"
+          @click="deleteTabItem($event, idx)"
         />
       </span>
       <span class="tab-icons">
@@ -50,8 +50,8 @@ limitations under the License. -->
   </div>
   <div class="tab-layout">
     <grid-layout
-      v-if="state.layout.length"
-      v-model:layout="state.layout"
+      v-if="dashboardStore.currentTabItems.length"
+      v-model:layout="dashboardStore.currentTabItems"
       :col-num="24"
       :row-height="10"
       :is-draggable="true"
@@ -59,7 +59,7 @@ limitations under the License. -->
       @layout-updated="layoutUpdatedEvent"
     >
       <grid-item
-        v-for="item in state.layout"
+        v-for="item in dashboardStore.currentTabItems"
         :x="item.x"
         :y="item.y"
         :w="item.w"
@@ -105,26 +105,25 @@ export default defineComponent({
     const activeTabIndex = ref<number>(0);
     const activeTabWidget = ref<string>("");
     const editTabIndex = ref<number>(NaN); // edit tab item name
-    const state = reactive<{
-      layout: LayoutConfig[];
-    }>({
-      layout:
-        dashboardStore.layout[props.data.i].children[activeTabIndex.value]
-          .children,
-    });
+    dashboardStore.setCurrentTabItems(
+      dashboardStore.layout[props.data.i].children[activeTabIndex.value]
+        .children
+    );
 
     function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
-      state.layout = newLayout;
+      dashboardStore.setCurrentTabItems(newLayout);
     }
     function clickTabs(e: Event, idx: number) {
       e.stopPropagation();
       activeTabIndex.value = idx;
       dashboardStore.activeGridItem(idx);
     }
-    function removeTab() {
+    function removeTab(e: Event) {
+      e.stopPropagation();
       dashboardStore.removeTab(props.data);
     }
-    function deleteTabItem(idx: number) {
+    function deleteTabItem(e: Event, idx: number) {
+      e.stopPropagation();
       dashboardStore.removeTabItem(props.data, idx);
     }
     function addTabItem() {
@@ -148,18 +147,6 @@ export default defineComponent({
       );
     }
     document.body.addEventListener("click", handleClick, false);
-
-    const items =
-      dashboardStore.layout[props.data.i].children[activeTabIndex.value] || {};
-    watch(
-      () => items.children,
-      (data) => {
-        if (!data) {
-          return data;
-        }
-        state.layout = data;
-      }
-    );
     watch(
       () => dashboardStore.activedGridItem,
       (data) => {
@@ -185,7 +172,7 @@ export default defineComponent({
       layoutUpdatedEvent,
       ...toRefs(props),
       activeTabWidget,
-      state,
+      dashboardStore,
       activeTabIndex,
       editTabIndex,
     };

src/views/dashboard/panel/Tool.vue

@@ -313,6 +313,7 @@ function setTabControls(id: string) {
       dashboardStore.addTabControls("Topology");
       break;
     default:
+      ElMessage.info("Don't support this control");
       break;
   }
 }