fix(editor): code-link组件内容不更新

packages/editor/src/fields/Code.vue

@@ -7,29 +7,25 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 
-export default defineComponent({
-  name: 'm-fields-vs-code',
+const emit = defineEmits(['change']);
 
-  props: ['model', 'name', 'config', 'prop'],
+const props = defineProps<{
+  model: any;
+  name: string;
+  config: {
+    language?: string;
+  };
+  prop: string;
+}>();
 
-  emits: ['change'],
+const language = computed(() => props.config.language || 'javascript');
+const height = computed(() => `${document.body.clientHeight - 168}px`);
 
-  setup(props, { emit }) {
-    const language = computed(() => props.config.language || 'javascript');
-    const height = computed(() => `${document.body.clientHeight - 168}px`);
-
-    return {
-      height,
-      language,
-
-      save(v: string) {
+const save = (v: string) => {
   props.model[props.name] = v;
   emit('change', v);
-      },
-    };
-  },
-});
+};
 </script>

packages/editor/src/fields/CodeLink.vue

@@ -2,57 +2,25 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watchEffect } from 'vue';
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
-interface CodeLinkConfig {
+const props = defineProps<{
+  config: {
     type: 'code-link';
     name: string;
     text?: string;
     formTitle?: string;
-}
+  };
+  model: any;
+  name: string;
+  prop: string;
+}>();
 
-export default defineComponent({
-  name: 'm-fields-code-link',
+const emit = defineEmits(['change']);
 
-  props: {
-    config: {
-      type: Object as PropType<CodeLinkConfig>,
-    },
-
-    model: {
-      type: Object,
-    },
-
-    name: {
-      type: String,
-    },
-
-    prop: {
-      type: String,
-    },
-  },
-
-  emits: ['change'],
-
-  setup(props, { emit }) {
-    const modelValue = ref<{ form: Record<string, any> }>({
-      form: {},
-    });
-
-    watchEffect(() => {
-      if (!props.model || !props.name) return;
-      modelValue.value.form[props.name] = serialize(props.model[props.name], {
-        space: 2,
-        unsafe: true,
-      }).replace(/"(\w+)":\s/g, '$1: ');
-    });
-
-    return {
-      modelValue,
-
-      formConfig: computed(() => ({
+const formConfig = computed(() => ({
   ...props.config,
   text: '',
   type: 'link',
@@ -62,20 +30,39 @@ export default defineComponent({
       type: 'vs-code',
     },
   ],
-      })),
+}));
 
-      changeHandler(v: Record<string, any>) {
+const modelValue = reactive<{ form: Record<string, string> }>({
+  form: {
+    [props.name]: '',
+  },
+});
+
+watch(
+  () => props.model[props.name],
+  (value) => {
+    console.log(props.model[props.name]);
+    modelValue.form = {
+      [props.name]: serialize(value, {
+        space: 2,
+        unsafe: true,
+      }).replace(/"(\w+)":\s/g, '$1: '),
+    };
+  },
+  {
+    immediate: true,
+  },
+);
+
+const changeHandler = (v: Record<string, any>) => {
   if (!props.name || !props.model) return;
 
   try {
     // eslint-disable-next-line no-eval
-          props.model[props.name] = eval(`${v[props.name]}`);
+    props.model[props.name] = eval(`(${v[props.name]})`);
     emit('change', props.model[props.name]);
   } catch (e) {
     console.error(e);
   }
-      },
-    };
-  },
-});
+};
 </script>

packages/editor/src/index.ts

@@ -59,8 +59,8 @@ export default {
 
     app.component(Editor.name, Editor);
     app.component('m-fields-ui-select', uiSelect);
-    app.component(CodeLink.name, CodeLink);
-    app.component(Code.name, Code);
+    app.component('m-fields-code-link', CodeLink);
+    app.component('m-fields-vs-code', Code);
     app.component(CodeEditor.name, CodeEditor);
   },
 };