feat(editor): code组件新增options props

packages/editor/src/fields/Code.vue

@@ -3,6 +3,7 @@
     :style="`height: ${height}`"
     :init-values="model[name]"
     :language="language"
+    :options="config.options"
     @save="save"
   ></magic-code-editor>
 </template>
@@ -17,6 +18,7 @@ const props = defineProps<{
   name: string;
   config: {
     language?: string;
+    options?: Object;
   };
   prop: string;
 }>();

packages/editor/src/fields/CodeLink.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
     name: string;
     text?: string;
     formTitle?: string;
+    codeOptions?: Object;
   };
   model: any;
   name: string;
@@ -20,17 +21,24 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const formConfig = computed(() => ({
-  ...props.config,
+const formConfig = computed(() => {
+  const { codeOptions, ...config } = props.config;
+  return {
+    ...config,
     text: '',
     type: 'link',
     form: [
       {
         name: props.name,
         type: 'vs-code',
+        options: {
+          tabSize: 2,
+          ...(codeOptions || {}),
+        },
       },
     ],
-}));
+  };
+});
 
 const modelValue = reactive<{ form: Record<string, string> }>({
   form: {

packages/editor/src/index.ts

@@ -63,7 +63,7 @@ export default {
     app.component('m-fields-ui-select', uiSelect);
     app.component('m-fields-code-link', CodeLink);
     app.component('m-fields-vs-code', Code);
-    app.component(CodeEditor.name, CodeEditor);
+    app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-code-select', CodeSelect);
   },
 };

packages/editor/src/layouts/CodeEditor.vue

@@ -2,12 +2,35 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+const props = withDefaults(
+  defineProps<{
+    initValues?: string | Object;
+    modifiedValues?: string | Object;
+    type?: string;
+    language?: string;
+    options?: {
+      [key: string]: any;
+    };
+    autoSave?: boolean;
+  }>(),
+  {
+    type: '',
+    autoSave: true,
+    language: 'javascript',
+    options: () => ({
+      tabSize: 2,
+    }),
+  },
+);
+
+const emit = defineEmits(['initd', 'save']);
+
 const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
@@ -24,37 +47,6 @@ const toString = (v: string | any, language: string): string => {
   return value;
 };
 
-export default defineComponent({
-  name: 'magic-code-editor',
-
-  props: {
-    initValues: {
-      type: [String, Object],
-    },
-
-    modifiedValues: {
-      type: [String, Object],
-    },
-
-    type: {
-      type: String,
-      default: () => '',
-    },
-
-    language: {
-      type: String,
-      default: () => 'javascript',
-    },
-
-    options: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  emits: ['initd', 'save'],
-
-  setup(props, { emit }) {
 let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
 let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
@@ -118,7 +110,7 @@ export default defineComponent({
     }
   });
 
-      if (props.type !== 'diff') {
+  if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
       emit('save', getEditorValue());
     });
@@ -150,11 +142,7 @@ export default defineComponent({
   resizeObserver.disconnect();
 });
 
-    return {
-      values,
-      loading,
-      codeEditor,
-
+defineExpose({
   getEditor() {
     return vsEditor || vsDiffEditor;
   },
@@ -165,7 +153,5 @@ export default defineComponent({
     vsEditor?.focus();
     vsDiffEditor?.focus();
   },
-    };
-  },
 });
 </script>