feat: active widget on the tab

src/store/modules/dashboard.ts

@@ -105,9 +105,13 @@ export const dashboardStore = defineStore({
       this.layout[idx].children?.push(i);
     },
     addTabWidget(tabIndex: number) {
+      const activedGridItem = this.activedGridItem.split("-")[0];
       const idx = this.layout.findIndex(
-        (d: LayoutConfig) => d.i === this.activedGridItem
+        (d: LayoutConfig) => d.i === activedGridItem
       );
+      if (idx < 0) {
+        return;
+      }
       const { children } = this.layout[idx].children[tabIndex];
       const newWidget = {
         x: 0,

src/views/dashboard/controls/Tab.vue

@@ -49,6 +49,7 @@ limitations under the License. -->
       <Icon size="sm" iconName="clearclose" @click="removeTab" />
     </div>
   </div>
+  <div class="tab-layout">
     <grid-layout
       v-model:layout="state.layout"
       :col-num="24"
@@ -65,13 +66,13 @@ limitations under the License. -->
         :h="item.h"
         :i="item.i"
         :key="item.i"
+        @click="clickTabGrid($event, item)"
+        :class="{ active: activeTabWidget === item.i }"
       >
-      <Widget
-        :data="item"
-        :active="dashboardStore.activedGridItem === item.i"
-      />
+        <Widget :data="item" :active="activeTabWidget === item.i" />
       </grid-item>
     </grid-layout>
+  </div>
 </template>
 <script lang="ts" setup>
 import { defineProps, reactive, ref, watch } from "vue";
@@ -82,13 +83,14 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const props = defineProps({
   data: {
-    type: Object as PropType<{ type: string; children: any[]; i: string }>,
+    type: Object as PropType<LayoutConfig>,
     default: () => ({ children: [] }),
   },
   active: { type: Boolean, default: false },
 });
 const dashboardStore = useDashboardStore();
 const activeTabIndex = ref<number>(0);
+const activeTabWidget = ref<string>("0");
 const editTabIndex = ref<number>(NaN); // edit tab item name
 const state = reactive<{
   layout: LayoutConfig[];
@@ -96,6 +98,7 @@ const state = reactive<{
   layout:
     dashboardStore.layout[props.data.i].children[activeTabIndex.value].children,
 });
+
 function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
   state.layout = newLayout;
 }
@@ -120,8 +123,20 @@ function handleClick(el: any) {
   }
   editTabIndex.value = NaN;
 }
-function addTabWidget() {
+function addTabWidget(e: any) {
+  e.stopPropagation();
+  activeTabWidget.value = String(state.layout.length);
   dashboardStore.addTabWidget(activeTabIndex.value);
+  dashboardStore.activeGridItem(
+    `${props.data.i}-${activeTabIndex.value}-${activeTabWidget.value}`
+  );
+}
+function clickTabGrid(e: any, item: LayoutConfig) {
+  e.stopPropagation();
+  activeTabWidget.value = item.i;
+  dashboardStore.activeGridItem(
+    `${props.data.i}-${activeTabIndex.value}-${item.i}`
+  );
 }
 document.body.addEventListener("click", handleClick, false);
 watch(
@@ -148,8 +163,8 @@ watch(
 
   .tab-name {
     max-width: 80px;
-    height: 25px;
-    line-height: 25px;
+    height: 20px;
+    line-height: 20px;
     outline: none;
     color: #333;
     font-style: normal;
@@ -206,4 +221,13 @@ watch(
   box-shadow: 0px 1px 4px 0px #00000029;
   border-radius: 5px;
 }
+
+.tab-layout {
+  height: calc(100% - 55px);
+  overflow: auto;
+}
+
+.vue-grid-item.active {
+  border: 1px solid #409eff;
+}
 </style>

src/views/dashboard/panel/Layout.vue

@@ -55,6 +55,7 @@ export default defineComponent({
       dashboardStore.setLayout(newLayout);
     }
     function clickGrid(item: LayoutConfig) {
+      console.log(item);
       dashboardStore.activeGridItem(item.i);
     }
     return {