fix(editor): 修复从dsl初始化时代码块绑定关系未同步的问题,修复一些warning,优化语法报错时保存并关闭的交互逻辑

packages/editor/src/Editor.vue

@@ -65,6 +65,7 @@
 
 <script lang="ts">
 import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch } from 'vue';
+import { isEmpty } from 'lodash-es';
 
 import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
@@ -226,10 +227,26 @@ export default defineComponent({
       emit('update:modelValue', toRaw(editorService.get('root')));
     });
 
+    const initCodeRelation = (rootValue: MNode) => {
+      if (isEmpty(rootValue.items)) return;
+      rootValue.items.forEach((nodeValue: MNode) => {
+        if (!isEmpty(nodeValue.created)) {
+          codeBlockService.setCompRelation(nodeValue.id, nodeValue.created);
+        }
+        if (!isEmpty(nodeValue.items)) {
+          initCodeRelation(nodeValue);
+        }
+      });
+    };
+
     // 初始值变化，重新设置节点信息
     watch(
       () => props.modelValue,
-      (modelValue) => editorService.set('root', modelValue),
+      (modelValue) => {
+        editorService.set('root', modelValue);
+        // 初始化代码块与组件的绑定关系
+        initCodeRelation(modelValue);
+      },
       {
         immediate: true,
       },

packages/editor/src/fields/CodeSelect.vue

@@ -20,9 +20,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineEmits, defineProps, inject, ref, watch, watchEffect } from 'vue';
+import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
 import { View } from '@element-plus/icons-vue';
-import { isEmpty, map } from 'lodash-es';
+import { map } from 'lodash-es';
 
 import { SelectConfig } from '@tmagic/form';
 
@@ -34,7 +34,7 @@ const emit = defineEmits(['change']);
 
 const props = defineProps<{
   config: {
-    selectConfig: SelectConfig;
+    selectConfig?: SelectConfig;
   };
   model: any;
   prop: string;
@@ -101,15 +101,4 @@ const viewHandler = async () => {
   await services?.codeBlockService.setMode(EditorMode.LIST);
   services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
 };
-
-watch(
-  () => props.model[props.name],
-  async (value) => {
-    if (isEmpty(value)) return;
-    await setCombineRelation(value);
-  },
-  {
-    immediate: true,
-  },
-);
 </script>

packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -34,7 +34,7 @@
         <magic-code-editor
           ref="codeEditor"
           class="m-editor-content"
-          :init-values="codeConfig.content"
+          :init-values="`${codeConfig.content}`"
           @save="saveCode"
           :options="{
             tabSize: 2,
@@ -71,7 +71,9 @@ const codeConfig = ref<CodeBlockContent | null>(null);
 const selectedValue = ref<CodeBlockDSL | null>(null);
 
 // 是否展示代码编辑区
-const isShowCodeBlockEditor = computed(() => codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus());
+const isShowCodeBlockEditor = computed(
+  () => (codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus()) || false,
+);
 const mode = computed(() => services?.codeBlockService.getMode());
 const id = computed(() => services?.codeBlockService.getId() || '');
 const editable = computed(() => services?.codeBlockService.getEditStatus());
@@ -87,8 +89,8 @@ watchEffect(async () => {
 });
 
 // 保存代码
-const saveCode = async () => {
+const saveCode = async (): Promise<boolean> => {
-  if (!codeEditor.value || !codeConfig.value || !editable.value) return;
+  if (!codeEditor.value || !codeConfig.value || !editable.value) return false;
 
   try {
     // 代码内容
@@ -97,7 +99,7 @@ const saveCode = async () => {
     codeConfig.value.content = eval(codeContent);
   } catch (e: any) {
     ElMessage.error(e.stack);
-    return;
+    return false;
   }
   // 存入dsl
   await services?.codeBlockService.setCodeDslById(id.value, {
@@ -105,12 +107,15 @@ const saveCode = async () => {
     content: codeConfig.value.content,
   });
   ElMessage.success('代码保存成功');
+  return true;
 };
 
 // 保存并关闭
 const saveAndClose = async () => {
-  await saveCode();
+  const saveRes = await saveCode();
-  await services?.codeBlockService.setCodeEditorShowStatus(false);
+  if (saveRes) {
+    await services?.codeBlockService.setCodeEditorShowStatus(false);
+  }
 };
 
 const menuSelectHandler = (item: any) => {

packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -52,7 +52,7 @@ enum ErrorType {
 }
 
 const props = defineProps<{
-  customError: (id: string, errorType: ErrorType) => any;
+  customError?: (id: string, errorType: ErrorType) => any;
 }>();
 
 const services = inject<Services>('services');