refactor: dashboard init

Author: ziyujiahao

frontend/src/style.less

@@ -34,6 +34,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -62,9 +63,11 @@ body {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }
@@ -109,7 +112,6 @@ body {
 }
 
 
-
 .hover-icon {
   cursor: pointer;
   height: 24px !important;
@@ -131,4 +133,7 @@ body {
   }
 }
 
-
+.tox-toolbar__primary {
+  min-width: 780px !important;
+  flex-wrap: wrap !important;
+}

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

@@ -50,12 +50,18 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showPosition: {
+    type: String,
+    required: false,
+    default: 'preview',
+  },
 })
 
-const { configItem } = toRefs(props)
-const tinymceId = 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
+const { configItem, showPosition } = toRefs(props)
+const tinymceId = 'tinymce-view-' + configItem.value.id + '-' + showPosition.value
 const init = reactive({
   selector: tinymceId,
+  toolbar_items_size: 'small',
   language_url: '/tinymce-sqlbot-private/langs/zh_CN.js',
   language: 'zh_CN',
   skin_url: '/tinymce-sqlbot-private/skins/ui/oxide',
@@ -86,12 +92,6 @@ const isDisabled = computed(() => props.disabled || !configItem.value.editing)
 
 const setEdit = () => {
   configItem.value.editing = true
-  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  const ed = tinymce.editors[tinymceId]
-  ed.setContent(configItem.value.propValue)
-  nextTick(() => {
-    editCursor()
-  })
 }
 
 const editCursor = () => {

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

@@ -69,7 +69,11 @@ const baseParams = computed(() => {
 <template>
   <div class="editor-main">
     <Toolbar :base-params="baseParams" @add-component="addComponent"></Toolbar>
-    <DashboardEditor ref="dashboardEditorRef" :canvas-component-data="componentData">
+    <DashboardEditor
+      v-if="dataInitState"
+      ref="dashboardEditorRef"
+      :canvas-component-data="componentData"
+    >
     </DashboardEditor>
   </div>
 </template>