fix(editor): 区分直接关闭和保存后关闭

#440

packages/editor/src/Editor.vue

@@ -319,6 +319,7 @@ export default defineComponent({
 
     provide('services', services);
 
+    provide('codeOptions', props.codeOptions);
     provide(
       'stageOptions',
       reactive({

packages/editor/src/components/CodeDraftEditor.vue

@@ -5,12 +5,8 @@
       class="m-editor-container"
       :init-values="`${codeContent}`"
       @save="saveCodeDraft"
-      :options="{
-        tabSize: 2,
-        fontSize: 16,
-        formatOnPaste: true,
-        readOnly: !editable,
-      }"
+      :language="language"
+      :options="codeOptions"
     ></magic-code-editor>
     <div class="m-editor-content-bottom" v-if="editable">
       <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
@@ -22,7 +18,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { inject, ref, watchEffect } from 'vue';
+import { computed, inject, ref, watchEffect } from 'vue';
 import type * as monaco from 'monaco-editor';
 
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
@@ -31,9 +27,6 @@ import { datetimeFormatter } from '@tmagic/utils';
 import MagicCodeEditor from '../layouts/CodeEditor.vue';
 import type { Services } from '../type';
 
-// 草稿提示延时，避免点击保存时出现两次提醒
-const draftTipTimeOut = 100;
-
 const props = withDefaults(
   defineProps<{
     /** 代码id */
@@ -44,22 +37,30 @@ const props = withDefaults(
     editable?: boolean;
     /** 是否自动保存草稿 */
     autoSaveDraft?: boolean;
+    /** 编辑器参数 */
+    codeOptions?: Object;
+    /** 编辑器语言 */
+    language?: string;
   }>(),
   {
     editable: true,
     autoSaveDraft: true,
   },
 );
-const emit = defineEmits(['save', 'close']);
+const emit = defineEmits(['save', 'close', 'saveAndClose']);
 
 const services = inject<Services>('services');
 
 const codeContent = ref<string>('');
+const editorContent = ref<string>('');
 const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
 // 原始代码内容
 const originCodeContent = ref<string | null>(null);
-// 是否展示草稿保存提示语
-const shouldShowDraftTip = ref(true);
+
+const codeOptions = computed(() => ({
+  ...props.codeOptions,
+  readOnly: !props.editable,
+}));
 
 watchEffect(() => {
   codeContent.value = props.content;
@@ -83,63 +84,45 @@ const saveCodeDraft = async (codeValue: string) => {
     return;
   }
   services?.codeBlockService.setCodeDraft(props.id, codeValue);
-
-  setTimeout(() => {
-    if (shouldShowDraftTip.value) {
-      tMagicMessage.success(`代码草稿保存成功 ${datetimeFormatter(new Date())}`);
-    }
-  }, draftTipTimeOut);
+  tMagicMessage.success(`代码草稿保存成功 ${datetimeFormatter(new Date())}`);
 };
 
 // 保存代码
-const saveCode = async (): Promise<boolean> => {
-  if (!codeEditor.value || !props.editable) return true;
-
-  try {
-    // 代码内容
-    const editorContent = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
-    /* eslint no-eval: "off" */
-    eval(editorContent);
-    // 不重复提示
-    shouldShowDraftTip.value = false;
-    // 删除草稿
-    services?.codeBlockService.removeCodeDraft(props.id);
-    emit('save', editorContent);
-    shouldShowDraftTip.value = true;
-    return true;
-  } catch (e: any) {
-    tMagicMessage.error(e.stack);
-    return false;
-  }
+const saveCode = (): void => {
+  if (!codeEditor.value || !props.editable) return;
+  // 代码内容
+  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
+  emit('save', editorContent.value);
 };
 
-const beforeClose = async () => {
-  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
-  if (!codeDraft || !props.autoSaveDraft) {
-    return await saveCode();
-  }
-  let saveRes = true;
-  await tMagicMessageBox
-    .confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
-    .then(async () => {
-      // 保存之后再关闭
-      saveRes = await saveCode();
-    })
-    .catch(() => {
-      // 删除草稿 直接关闭
-      services?.codeBlockService.removeCodeDraft(props.id);
-    });
-  return saveRes;
+// 保存并关闭
+const saveAndClose = (): void => {
+  if (!codeEditor.value || !props.editable) return;
+  // 代码内容
+  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
+  emit('saveAndClose', editorContent.value);
 };
 
 // 关闭弹窗
 const close = async () => {
-  const shouldClose = await beforeClose();
-  if (shouldClose) {
+  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+  if (codeDraft) {
+    tMagicMessageBox
+      .confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      .then(async () => {
+        // 保存之后再关闭
+        saveAndClose();
+      })
+      .catch(() => {
+        // 删除草稿 直接关闭
+        services?.codeBlockService.removeCodeDraft(props.id);
+        emit('close');
+      });
+  } else {
     emit('close');
   }
 };

packages/editor/src/components/FunctionEditor.vue

@@ -11,7 +11,10 @@
       :content="codeContent"
       :editable="editable"
       :autoSaveDraft="autoSaveDraft"
+      :codeOptions="codeOptions"
+      language="javascript"
       @save="saveCode"
+      @saveAndClose="saveAndClose"
       @close="close"
     ></CodeDraftEditor>
   </TMagicCard>
@@ -32,6 +35,7 @@ const props = withDefaults(
     content: string;
     editable?: boolean;
     autoSaveDraft?: boolean;
+    codeOptions?: object;
   }>(),
   {
     editable: true,
@@ -43,22 +47,47 @@ const services = inject<Services>('services');
 
 const codeName = ref<string>('');
 const codeContent = ref<string>('');
+const evalRes = ref(true);
 
 watchEffect(() => {
   codeName.value = props.name;
   codeContent.value = props.content;
 });
 
+// 保存前钩子
+const beforeSave = (codeValue: string): boolean => {
+  try {
+    // eslint-disable-next-line no-eval
+    eval(codeValue);
+    return true;
+  } catch (e: any) {
+    tMagicMessage.error(e.stack);
+    return false;
+  }
+};
+
 // 保存代码
 const saveCode = async (codeValue: string): Promise<void> => {
   if (!props.editable) return;
+  evalRes.value = beforeSave(codeValue);
+  if (evalRes.value) {
+    // 存入dsl
+    await services?.codeBlockService.setCodeDslById(props.id, {
+      name: codeName.value,
+      content: codeValue,
+    });
+    tMagicMessage.success('代码保存成功');
+    // 删除草稿
+    services?.codeBlockService.removeCodeDraft(props.id);
+  }
+};
 
-  // 存入dsl
-  await services?.codeBlockService.setCodeDslById(props.id, {
-    name: codeName.value,
-    content: codeValue,
-  });
-  tMagicMessage.success('代码保存成功');
+// 保存并关闭
+const saveAndClose = async (codeValue: string) => {
+  await saveCode(codeValue);
+  if (evalRes.value) {
+    close();
+  }
 };
 
 // 关闭弹窗

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

@@ -48,6 +48,7 @@
             :content="codeConfig.content"
             :editable="!!editable"
             :autoSaveDraft="mode === CodeEditorMode.EDITOR"
+            :codeOptions="codeOptions"
           ></FunctionEditor>
         </div>
       </template>
@@ -68,6 +69,7 @@ import { CodeEditorMode } from '../../../type';
 import { serializeConfig } from '../../../utils/editor';
 
 const services = inject<Services>('services');
+const codeOptions = inject('codeOptions', {});
 
 const left = ref(200);
 const currentTitle = ref('');