refactor: Optimize the tab component to resize internal components and follow the tab component to jump proportionally (#106)

Author: ziyujiahao

frontend/src/views/chat/chat-block/ChartBlock.vue

@@ -63,6 +63,8 @@ const dataObject = computed<{
 const assistantStore = useAssistantStore()
 const isCompletePage = computed(() => !assistantStore.getAssistant || assistantStore.getEmbedded)
 
+const isAssistant = computed(() => assistantStore.getAssistant)
+
 const chartId = computed(() => props.message?.record?.id + (props.enlarge ? '-fullscreen' : ''))
 
 const data = computed(() => {
@@ -395,7 +397,7 @@ watch(
             </div>
           </el-popover>
         </div>
-        <div v-if="message?.record?.chart && isCompletePage">
+        <div v-if="message?.record?.chart && !isAssistant">
           <el-tooltip effect="dark" :content="t('chat.add_to_dashboard')" placement="top">
             <el-button class="tool-btn" text @click="addToDashboard">
               <el-icon size="16">

frontend/src/views/dashboard/canvas/CanvasCore.vue

@@ -864,7 +864,7 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
 
   html2canvas(clonedSlot).then((canvas) => {
     img.src = canvas.toDataURL()
-    infoBox.value.cloneItem.appendChild(img)
+    infoBox.value.cloneItem?.appendChild(img)
   })
 
   if (containerRef.value) {
@@ -994,6 +994,12 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
     if (infoBox.value.resizeItem) {
       delete infoBox.value.resizeItem.isPlayer
       props.resizeEnd(e, infoBox.value.resizeItem, infoBox.value.resizeItem._dragId)
+
+      if (infoBox.value.resizeItem.component === 'SQTab') {
+        const refTabInstance =
+          currentInstance.refs['shape_component_' + infoBox.value.resizeItem.id][0]
+        refTabInstance.outResizeEnd()
+      }
     }
     if (infoBox.value.moveItem) {
       props.dragEnd(e, infoBox.value.moveItem, infoBox.value.moveItem._dragId)

frontend/src/views/dashboard/components/sq-tab/index.vue

@@ -119,7 +119,12 @@ const beforeHandleCommand = (item: any, param: any) => {
   }
 }
 const isEditMode = computed(() => props.showPosition === 'canvas')
-
+const outResizeEnd = () => {
+  state.tabShow = false
+  nextTick(() => {
+    state.tabShow = true
+  })
+}
 const addTabItem = (item: CanvasItem) => {
   // do addTabItem
   const index = configItem.value.propValue.findIndex(
@@ -168,6 +173,7 @@ onMounted(() => {
 
 defineExpose({
   addTabItem,
+  outResizeEnd,
 })
 </script>
 
@@ -224,35 +230,37 @@ defineExpose({
           </template>
         </el-tab-pane>
       </template>
-      <div
-        v-for="(tabItem, index) in configItem.propValue"
-        :key="tabItem.name + '-content'"
-        class="tab-content-custom"
-        :class="{ 'switch-hidden': configItem.activeTabName !== tabItem.name }"
-      >
-        <SQPreview
-          v-if="showPosition === 'preview'"
-          :ref="'tabPreviewRef_' + index"
-          class="tab-dashboard-preview"
-          :component-data="tabItem.componentData"
-          :canvas-view-info="canvasViewInfo"
-          :base-matrix-count="tabBaseMatrixCount"
-          :canvas-id="tabItem.name"
-        ></SQPreview>
-        <DashboardEditor
-          v-else
-          :ref="'tabEditorRef_' + index"
-          class="tab-dashboard-editor-main"
-          :canvas-component-data="tabItem.componentData"
-          :canvas-view-info="canvasViewInfo"
-          :move-in-active="configItem.moveInActive"
-          :base-matrix-count="tabBaseMatrixCount"
-          :canvas-id="tabItem.name"
-          :parent-config-item="configItem"
-          @parent-add-item-box="(item) => emits('parentAddItemBox', item)"
+      <template v-if="state.tabShow">
+        <div
+          v-for="(tabItem, index) in configItem.propValue"
+          :key="tabItem.name + '-content'"
+          class="tab-content-custom"
+          :class="{ 'switch-hidden': configItem.activeTabName !== tabItem.name }"
         >
-        </DashboardEditor>
-      </div>
+          <SQPreview
+            v-if="showPosition === 'preview'"
+            :ref="'tabPreviewRef_' + index"
+            class="tab-dashboard-preview"
+            :component-data="tabItem.componentData"
+            :canvas-view-info="canvasViewInfo"
+            :base-matrix-count="tabBaseMatrixCount"
+            :canvas-id="tabItem.name"
+          ></SQPreview>
+          <DashboardEditor
+            v-else
+            :ref="'tabEditorRef_' + index"
+            class="tab-dashboard-editor-main"
+            :canvas-component-data="tabItem.componentData"
+            :canvas-view-info="canvasViewInfo"
+            :move-in-active="configItem.moveInActive"
+            :base-matrix-count="tabBaseMatrixCount"
+            :canvas-id="tabItem.name"
+            :parent-config-item="configItem"
+            @parent-add-item-box="(item) => emits('parentAddItemBox', item)"
+          >
+          </DashboardEditor>
+        </div>
+      </template>
     </custom-tab>
     <el-dialog
       v-model="state.dialogVisible"