From 1b66ab1b8801fda03a92b5d1a6ca8c0aa7ce096a Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 2 Jun 2026 16:32:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor):=20=E6=8A=BD=E5=8F=96=20serial?=
 =?UTF-8?q?izeConfig=20=E5=B7=A5=E5=85=B7=E7=BB=9F=E4=B8=80=E5=BA=8F?=
 =?UTF-8?q?=E5=88=97=E5=8C=96=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将分散在 CodeLink、CodeEditor 及 playground 中重复的 serialize-javascript
序列化逻辑收敛为 @editor/utils/editor 的 serializeConfig 并对外导出复用。
---
 packages/editor/src/fields/CodeLink.vue    |  7 ++-----
 packages/editor/src/layouts/CodeEditor.vue |  7 ++-----
 playground/src/pages/Editor.vue            | 18 +++++++++---------
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/packages/editor/src/fields/CodeLink.vue b/packages/editor/src/fields/CodeLink.vue
index 58d9a58c..e26b3842 100644
--- a/packages/editor/src/fields/CodeLink.vue
+++ b/packages/editor/src/fields/CodeLink.vue
@@ -4,11 +4,11 @@
 
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
-import serialize from 'serialize-javascript';
 
 import type { CodeLinkConfig, FieldProps, MLink } from '@tmagic/form';
 
 import { getEditorConfig } from '@editor/utils/config';
+import { serializeConfig } from '@editor/utils/editor';
 
 defineOptions({
   name: 'MFieldsCodeLink',
@@ -47,10 +47,7 @@ watch(
   () => props.model[props.name],
   (value) => {
     modelValue.form = {
-      [props.name]: serialize(value, {
-        space: 2,
-        unsafe: true,
-      }).replace(/"(\w+)":\s/g, '$1: '),
+      [props.name]: serializeConfig(value),
     };
   },
   {
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index 4b8c7823..7a954dc9 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -21,12 +21,12 @@ import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTe
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import type * as Monaco from 'monaco-editor';
-import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
 import { getEditorConfig } from '@editor/utils/config';
+import { serializeConfig } from '@editor/utils/editor';
 import loadMonaco from '@editor/utils/monaco-editor';
 
 defineOptions({
@@ -163,10 +163,7 @@ const toString = (v: string | any, language: string): string => {
     if (language === 'json') {
       value = JSON.stringify(v, null, 2);
     } else {
-      value = serialize(v, {
-        space: 2,
-        unsafe: true,
-      }).replace(/"(\w+)":\s/g, '$1: ');
+      value = serializeConfig(v);
     }
   } else {
     value = v;
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index d6dfe950..10e0f854 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -48,11 +48,17 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, ref, shallowRef, toRaw } from 'vue';
-import serialize from 'serialize-javascript';
 
 import type { MApp, MContainer, MNode } from '@tmagic/core';
 import type { DatasourceTypeOption } from '@tmagic/editor';
-import { editorService, propsService, TMagicDialog, TMagicEditor, tMagicMessage } from '@tmagic/editor';
+import {
+  editorService,
+  propsService,
+  serializeConfig,
+  TMagicDialog,
+  TMagicEditor,
+  tMagicMessage,
+} from '@tmagic/editor';
 
 import DeviceGroup from '../components/DeviceGroup.vue';
 import componentGroupList from '../configs/componentGroupList';
@@ -88,13 +94,7 @@ const previewUrl = computed(
 const { moveableOptions } = useEditorMoveableOptions(editor);
 
 const save = () => {
-  localStorage.setItem(
-    'magicDSL',
-    serialize(toRaw(value.value), {
-      space: 2,
-      unsafe: true,
-    }).replace(/"(\w+)":\s/g, '$1: '),
-  );
+  localStorage.setItem('magicDSL', serializeConfig(toRaw(value.value)));
   editor.value?.editorService.resetModifiedNodeId();
 };