From de1711d7133cd4dcf19c2c868ff21b03c02f6a11 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 15 Mar 2024 16:44:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=B1=9E=E6=80=A7=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=94=AF=E6=8C=81=E5=88=87=E6=8D=A2=E6=BA=90=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/layouts/PropsPanel.vue | 35 ++++++++++++++++++++++
 packages/editor/src/theme/props-panel.scss | 14 +++++++++
 2 files changed, 49 insertions(+)

diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 7ef63f6f..3965bba8 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/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>
diff --git a/packages/editor/src/theme/props-panel.scss b/packages/editor/src/theme/props-panel.scss
index 6da68a83..2a5d643c 100644
--- a/packages/editor/src/theme/props-panel.scss
+++ b/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;