refactor: canvas force update

Author: ziyujiahao

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

@@ -1037,8 +1037,18 @@ function afterInitOk(func) {
   }, 100)
 }
 
+const forceComputed = () => {
+  // Force the trigger of copy-add calculation here, as the position calculation uses a method and there is no change in internal style attributes
+  // In some cases, recalculation may not be triggered, resulting in a positional offset. The cellHeight property is being monitored, and forced recalculation is performed here
+  cellHeight.value = cellHeight.value + 0.001
+  nextTick(function () {
+    cellHeight.value = cellHeight.value - 0.001
+  })
+}
+
 function addItemBox(item: CanvasItem) {
   canvasComponentData.value.push(item)
+  forceComputed()
   nextTick(() => {
     addItem(item, canvasComponentData.value.length - 1)
   })

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

@@ -1,8 +1,7 @@
 <template>
   <div class="rich-main-class" :class="{ 'edit-model': configItem.editing }" draggable="false">
     <div
-      v-if="isDisabled && !configItem.propValue"
-      class="rich-text-empty"
+      :class="{ 'rich-text-empty': true, 'layer-hidden': !isDisabled }"
       @keydown.stop
       @keyup.stop
       @mousedown.stop
@@ -11,21 +10,19 @@
       {{ t('dashboard.rich_text_tips') }}
     </div>
     <div
-      v-else-if="isDisabled"
       draggable="false"
-      :class="{ 'custom-text-content': true, 'preview-text': true }"
+      :class="{ 'custom-text-content': true, 'preview-text': true, 'layer-hidden': !isDisabled }"
       @keydown.stop
       @keyup.stop
       @mousedown.stop
       @dblclick.stop="setEdit"
       v-html="configItem.propValue"
     ></div>
     <editor
-      v-else
       :id="tinymceId"
       v-model="configItem.propValue"
       draggable="false"
-      :class="{ 'custom-text-content': true }"
+      :class="{ 'custom-text-content': true, 'layer-hidden': isDisabled }"
       :init="init"
     ></editor>
   </div>
@@ -128,12 +125,14 @@ onMounted(() => {
   position: relative;
   padding: 12px !important;
   .rich-text-empty {
+    position: absolute;
+    width: calc(100% - 24px);
+    height: calc(100% - 24px);
     display: flex;
-    width: 100%;
-    height: 100%;
     align-items: center;
     justify-content: center;
     font-size: 16px;
+    z-index: 10;
     color: rgba(100, 106, 115, 1);
   }
   div::-webkit-scrollbar {

frontend/src/views/dashboard/editor/index.vue

@@ -38,7 +38,7 @@ const addComponent = (componentType: string, viewInfo?: any) => {
       component.propValue[0].name = subTabName
       component.activeTabName = subTabName
     }
-
+    component.y = 100
     // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     dashboardEditorInnerRef.value.addItemToBox(component)
   }