feat(editor): 属性面板支持切换源码

packages/editor/src/layouts/PropsPanel.vue

@@ -12,17 +12,42 @@
       @change="submit"
       @error="errorHandler"
     ></MForm>
+
+    <TMagicButton
+      class="m-editor-props-panel-src-icon"
+      circle
+      size="large"
+      title="源码"
+      :icon="DocumentIcon"
+      :type="showSrc ? 'primary' : ''"
+      @click="showSrc = !showSrc"
+    ></TMagicButton>
+
+    <CodeEditor
+      v-if="showSrc"
+      :height="`${editorContentHeight}px`"
+      :init-values="values"
+      :options="codeOptions"
+      :parse="true"
+      @save="saveCode"
+    ></CodeEditor>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
+import { TMagicButton } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
+import type { MNode } from '@tmagic/schema';
 
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import type { PropsPanelSlots, Services } from '@editor/type';
 
+import CodeEditor from './CodeEditor.vue';
+
 defineSlots<PropsPanelSlots>();
 
 defineOptions({
@@ -33,8 +58,12 @@ defineProps<{
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
+const codeOptions = inject('codeOptions', {});
+
 const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
 
+const showSrc = ref(false);
+
 const internalInstance = getCurrentInstance();
 const values = ref<FormValue>({});
 const configForm = ref<InstanceType<typeof MForm>>();
@@ -46,6 +75,8 @@ const nodes = computed(() => services?.editorService.get('nodes') || []);
 const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
 const stage = computed(() => services?.editorService.get('stage'));
 
+const { height: editorContentHeight } = useEditorContentHeight();
+
 const init = async () => {
   if (!node.value) {
     curFormConfig.value = [];
@@ -87,5 +118,9 @@ const errorHandler = (e: any) => {
   emit('form-error', e);
 };
 
+const saveCode = (values: MNode) => {
+  services?.editorService.update(values);
+};
+
 defineExpose({ configForm, submit });
 </script>

packages/editor/src/theme/props-panel.scss

@@ -1,6 +1,20 @@
 .m-editor-props-panel {
   padding: 0 10px;
 
+  .m-editor-props-panel-src-icon {
+    position: absolute;
+    right: 15px;
+    bottom: 15px;
+    z-index: 30;
+  }
+
+  .magic-code-editor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+  }
+
   &.small {
     .el-form-item__label {
       font-size: 12px;