From 436914e7ee45ac4f84b90ff24e1569c7388e4ce4 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 15 Sep 2023 16:18:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=96=B0=E5=A2=9E=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=9D=97=E7=BC=96=E8=BE=91=E6=97=B6=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/CodeBlockEditor.vue | 60 ++++++++++++++++++-
 packages/editor/src/layouts/CodeEditor.vue    |  1 +
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index bf5c53b0..fb0e3e56 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -15,16 +15,45 @@
     @error="errorHandler"
     @open="openHandler"
     @closed="closedHandler"
-  ></MFormDrawer>
+  >
+    <template #left>
+      <TMagicButton type="primary" text @click="difVisible = true">查看修改</TMagicButton>
+    </template>
+  </MFormDrawer>
+
+  <TMagicDialog v-model="difVisible" title="查看修改" fullscreen>
+    <div style="display: flex; margin-bottom: 10px">
+      <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
+      <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
+    </div>
+
+    <CodeEditor
+      v-if="difVisible"
+      ref="magicVsEditor"
+      type="diff"
+      language="json"
+      :initValues="content.content"
+      :modifiedValues="fomDrawer?.form?.values.content"
+      :style="`height: ${height - 200}px`"
+    ></CodeEditor>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <TMagicButton size="small" @click="difVisible = false">取消</TMagicButton>
+        <TMagicButton size="small" type="primary" @click="diffChange">确定</TMagicButton>
+      </span>
+    </template>
+  </TMagicDialog>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, onUnmounted, ref } from 'vue';
 
-import { tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import { ColumnConfig, FormState, MFormDrawer } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 
+import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
@@ -44,6 +73,31 @@ const emit = defineEmits<{
 
 const services = inject<Services>('services');
 
+const difVisible = ref(false);
+const height = ref(globalThis.innerHeight);
+
+const windowReizehandler = () => {
+  height.value = globalThis.innerHeight;
+};
+
+globalThis.addEventListener('resize', windowReizehandler);
+
+onUnmounted(() => {
+  globalThis.removeEventListener('resize', windowReizehandler);
+});
+
+const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
+
+const diffChange = () => {
+  if (!magicVsEditor.value || !fomDrawer.value?.form) {
+    return;
+  }
+
+  fomDrawer.value.form.values.content = magicVsEditor.value.getEditorValue();
+
+  difVisible.value = false;
+};
+
 const columnWidth = computed(() => services?.uiService.get('columnWidth'));
 const size = computed(() =>
   columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600,
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index 2728d026..1feb8aa8 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -202,6 +202,7 @@ defineExpose({
   },
 
   setEditorValue,
+  getEditorValue,
 
   focus() {
     vsEditor?.focus();