From d98d3748d36e3a87e726a27a6f2d851b0c26bf75 Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Mon, 24 Oct 2022 10:46:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=8B=86=E5=88=86=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=9D=97=E7=BC=96=E8=BE=91=E5=99=A8=E4=BE=BF=E4=BA=8E?=
 =?UTF-8?q?=E4=BB=A5=E5=90=8E=E6=89=A9=E5=B1=95,=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=8D=89=E7=A8=BF=E8=87=AA=E5=8A=A8=E4=BF=9D=E5=AD=98,?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81=E5=9D=97=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#440
---
 .../editor/src/components/CodeDraftEditor.vue | 145 ++++++++++++++++++
 .../editor/src/components/FunctionEditor.vue  |  68 ++++++++
 .../sidebar/code-block/CodeBlockEditor.vue    | 136 ++--------------
 .../sidebar/code-block/CodeBlockList.vue      |   2 +-
 packages/editor/src/services/codeBlock.ts     |   8 +-
 packages/editor/src/theme/code-block.scss     |   6 +
 6 files changed, 241 insertions(+), 124 deletions(-)
 create mode 100644 packages/editor/src/components/CodeDraftEditor.vue
 create mode 100644 packages/editor/src/components/FunctionEditor.vue

diff --git a/packages/editor/src/components/CodeDraftEditor.vue b/packages/editor/src/components/CodeDraftEditor.vue
new file mode 100644
index 00000000..cb43fe4f
--- /dev/null
+++ b/packages/editor/src/components/CodeDraftEditor.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="m-editor-wrapper">
+    <magic-code-editor
+      ref="codeEditor"
+      class="m-editor-container"
+      :init-values="`${codeContent}`"
+      @save="saveCodeDraft"
+      :options="{
+        tabSize: 2,
+        fontSize: 16,
+        formatOnPaste: true,
+        readOnly: !editable,
+      }"
+    ></magic-code-editor>
+    <div class="m-editor-content-bottom" v-if="editable">
+      <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
+      <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
+    </div>
+    <div class="m-editor-content-bottom" v-else>
+      <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { inject, ref, watchEffect } from 'vue';
+import type * as monaco from 'monaco-editor';
+
+import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import MagicCodeEditor from '../layouts/CodeEditor.vue';
+import type { Services } from '../type';
+
+// 草稿提示延时，避免点击保存时出现两次提醒
+const draftTipTimeOut = 100;
+
+const props = withDefaults(
+  defineProps<{
+    /** 代码id */
+    id: string;
+    /** 代码内容 */
+    content: string;
+    /** 是否可编辑 */
+    editable?: boolean;
+    /** 是否自动保存草稿 */
+    autoSaveDraft?: boolean;
+  }>(),
+  {
+    editable: true,
+    autoSaveDraft: true,
+  },
+);
+const emit = defineEmits(['save', 'close']);
+
+const services = inject<Services>('services');
+
+const codeContent = ref<string>('');
+const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
+// 原始代码内容
+const originCodeContent = ref<string | null>(null);
+// 是否展示草稿保存提示语
+const shouldShowDraftTip = ref(true);
+
+watchEffect(() => {
+  codeContent.value = props.content;
+  if (!originCodeContent.value) {
+    // 暂存原始的代码内容
+    originCodeContent.value = codeContent.value;
+  }
+  // 有草稿时展示上次保存的草稿内容
+  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+  if (codeDraft) {
+    codeContent.value = codeDraft;
+  }
+});
+
+// 保存草稿
+const saveCodeDraft = async (codeValue: string) => {
+  if (!props.autoSaveDraft) return;
+  if (originCodeContent.value === codeValue) {
+    // 没修改或改回原样 有草稿的话删除草稿
+    services?.codeBlockService.removeCodeDraft(props.id);
+    return;
+  }
+  services?.codeBlockService.setCodeDraft(props.id, codeValue);
+
+  setTimeout(() => {
+    if (shouldShowDraftTip.value) {
+      tMagicMessage.success(`代码草稿保存成功 ${datetimeFormatter(new Date())}`);
+    }
+  }, draftTipTimeOut);
+};
+
+// 保存代码
+const saveCode = async (): Promise<boolean> => {
+  if (!codeEditor.value || !props.editable) return true;
+
+  try {
+    // 代码内容
+    const editorContent = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
+    /* eslint no-eval: "off" */
+    eval(editorContent);
+    // 不重复提示
+    shouldShowDraftTip.value = false;
+    // 删除草稿
+    services?.codeBlockService.removeCodeDraft(props.id);
+    emit('save', editorContent);
+    return true;
+  } catch (e: any) {
+    tMagicMessage.error(e.stack);
+    return false;
+  }
+};
+
+const beforeClose = async () => {
+  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+  if (!codeDraft || !props.autoSaveDraft) {
+    return await saveCode();
+  }
+  let saveRes = true;
+  await tMagicMessageBox
+    .confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(async () => {
+      // 保存之后再关闭
+      saveRes = await saveCode();
+    })
+    .catch(() => {
+      // 删除草稿 直接关闭
+      services?.codeBlockService.removeCodeDraft(props.id);
+    });
+  return saveRes;
+};
+
+// 关闭弹窗
+const close = async () => {
+  const shouldClose = await beforeClose();
+  if (shouldClose) {
+    emit('close');
+  }
+};
+</script>
diff --git a/packages/editor/src/components/FunctionEditor.vue b/packages/editor/src/components/FunctionEditor.vue
new file mode 100644
index 00000000..0c72a497
--- /dev/null
+++ b/packages/editor/src/components/FunctionEditor.vue
@@ -0,0 +1,68 @@
+<template>
+  <TMagicCard shadow="never">
+    <template #header>
+      <div class="code-name-wrapper">
+        <div class="code-name-label">代码块名称</div>
+        <TMagicInput class="code-name-input" v-model="codeName" :disabled="!editable" />
+      </div>
+    </template>
+    <CodeDraftEditor
+      :id="id"
+      :content="codeContent"
+      :editable="editable"
+      :autoSaveDraft="autoSaveDraft"
+      @save="saveCode"
+      @close="close"
+    ></CodeDraftEditor>
+  </TMagicCard>
+</template>
+<script lang="ts" setup>
+import { inject, ref, watchEffect } from 'vue';
+
+import { TMagicCard, TMagicInput, tMagicMessage } from '@tmagic/design';
+
+import type { Services } from '../type';
+
+import CodeDraftEditor from './CodeDraftEditor.vue';
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    name: string;
+    content: string;
+    editable?: boolean;
+    autoSaveDraft?: boolean;
+  }>(),
+  {
+    editable: true,
+    autoSaveDraft: true,
+  },
+);
+
+const services = inject<Services>('services');
+
+const codeName = ref<string>('');
+const codeContent = ref<string>('');
+
+watchEffect(() => {
+  codeName.value = props.name;
+  codeContent.value = props.content;
+});
+
+// 保存代码
+const saveCode = async (codeValue: string): Promise<void> => {
+  if (!props.editable) return;
+
+  // 存入dsl
+  await services?.codeBlockService.setCodeDslById(props.id, {
+    name: codeName.value,
+    content: codeValue,
+  });
+  tMagicMessage.success('代码保存成功');
+};
+
+// 关闭弹窗
+const close = () => {
+  services?.codeBlockService.setCodeEditorShowStatus(false);
+};
+</script>
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 27b36275..1170bd4b 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -4,8 +4,9 @@
     class="code-editor-dialog"
     :title="currentTitle"
     :fullscreen="true"
-    :before-close="close"
+    :close-on-press-escape="false"
     :append-to-body="true"
+    :show-close="false"
   >
     <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 左侧列表 -->
@@ -40,78 +41,38 @@
           ]"
         >
           <slot name="code-block-edit-panel-header" :id="id"></slot>
-          <TMagicCard shadow="never">
-            <template #header>
-              <div class="code-name-wrapper">
-                <div class="code-name-label">代码块名称</div>
-                <TMagicInput
-                  v-if="codeConfig"
-                  class="code-name-input"
-                  v-model="codeConfig.name"
-                  :disabled="!editable"
-                />
-              </div>
-            </template>
-            <div class="m-editor-wrapper">
-              <MagicCodeEditor
-                v-if="codeConfig"
-                ref="codeEditor"
-                class="m-editor-container"
-                :init-values="`${codeConfig.content}`"
-                @save="saveCodeDraft"
-                :options="{
-                  tabSize: 2,
-                  fontSize: 16,
-                  formatOnPaste: true,
-                  readOnly: !editable,
-                }"
-              ></MagicCodeEditor>
-              <div class="m-editor-content-bottom" v-if="editable">
-                <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
-                <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
-              </div>
-              <div class="m-editor-content-bottom" v-else>
-                <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
-              </div>
-            </div>
-          </TMagicCard>
+          <FunctionEditor
+            v-if="codeConfig"
+            :id="id"
+            :name="codeConfig.name"
+            :content="codeConfig.content"
+            :editable="!!editable"
+            :autoSaveDraft="mode === CodeEditorMode.EDITOR"
+          ></FunctionEditor>
         </div>
       </template>
-    </Layout>
+    </layout>
   </TMagicDialog>
 </template>
 
 <script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
-import type * as monaco from 'monaco-editor';
 
-import {
-  TMagicButton,
-  TMagicCard,
-  TMagicDialog,
-  TMagicInput,
-  tMagicMessage,
-  tMagicMessageBox,
-  TMagicTree,
-} from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
+import { TMagicDialog, TMagicTree } from '@tmagic/design';
 
+import FunctionEditor from '../../../components/FunctionEditor.vue';
 import Layout from '../../../components/Layout.vue';
 import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
 import { CodeEditorMode } from '../../../type';
 import { serializeConfig } from '../../../utils/editor';
-import MagicCodeEditor from '../../CodeEditor.vue';
 
 const services = inject<Services>('services');
 
-const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
 const left = ref(200);
 const currentTitle = ref('');
 // 编辑器当前需展示的代码块内容
 const codeConfig = ref<CodeBlockContent | null>(null);
-// 原始代码内容
-const originCodeContent = ref<string | null>(null);
 // select选择的内容(ListState)
 const state = reactive<ListState>({
   codeList: [],
@@ -126,15 +87,7 @@ const selectedIds = computed(() => services?.codeBlockService.getCombineIds() ||
 watchEffect(async () => {
   codeConfig.value = cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
   if (!codeConfig.value) return;
-  if (!originCodeContent.value) {
-    // 暂存原始的代码内容
-    originCodeContent.value = serializeConfig(codeConfig.value.content);
-  }
-  // 有草稿时展示上次保存的草稿内容
-  const codeDraft = services?.codeBlockService.getCodeDraft(id.value);
-  if (codeDraft) {
-    codeConfig.value.content = codeDraft;
-  }
+  codeConfig.value.content = serializeConfig(codeConfig.value.content);
 });
 
 watchEffect(async () => {
@@ -150,67 +103,6 @@ watchEffect(async () => {
   currentTitle.value = state.codeList[0]?.name || '';
 });
 
-// 保存草稿
-const saveCodeDraft = (codeValue: string) => {
-  if (!codeEditor.value) return;
-  if (originCodeContent.value === codeValue) {
-    // 没修改或改回原样 有草稿的话删除草稿
-    services?.codeBlockService.removeCodeDraft(id.value);
-    return;
-  }
-  services?.codeBlockService.setCodeDraft(id.value, codeValue);
-  tMagicMessage.success(`代码草稿保存成功 ${datetimeFormatter(new Date())}`);
-};
-
-// 保存代码
-const saveCode = async (): Promise<boolean> => {
-  if (!codeEditor.value || !codeConfig.value || !editable.value) return true;
-
-  try {
-    // 代码内容
-    const codeContent = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
-    /* eslint no-eval: "off" */
-    codeConfig.value.content = eval(codeContent);
-  } catch (e: any) {
-    tMagicMessage.error(e.stack);
-    return false;
-  }
-  // 存入dsl
-  await services?.codeBlockService.setCodeDslById(id.value, {
-    name: codeConfig.value.name,
-    content: codeConfig.value.content,
-  });
-  tMagicMessage.success('代码保存成功');
-  // 删除草稿
-  services?.codeBlockService.removeCodeDraft(id.value);
-  return true;
-};
-
-// 关闭弹窗
-const close = async () => {
-  const codeDraft = services?.codeBlockService.getCodeDraft(id.value);
-  let shouldClose = true;
-  if (codeDraft) {
-    await tMagicMessageBox
-      .confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-      .then(async () => {
-        // 保存之后再关闭
-        shouldClose = await saveCode();
-      })
-      .catch(() => {
-        // 删除草稿 直接关闭
-        services?.codeBlockService.removeCodeDraft(id.value);
-      });
-  }
-  if (shouldClose) {
-    services?.codeBlockService.setCodeEditorShowStatus(false);
-  }
-};
-
 const selectHandler = (data: CodeDslList) => {
   services?.codeBlockService.setId(data.id);
   currentTitle.value = data.name;
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index 398a007f..9a49fbe1 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -30,7 +30,7 @@
       <template #default="{ data }">
         <div :id="data.id" class="list-container">
           <div class="list-item">
-            <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
+            <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
             <!-- 右侧工具栏 -->
             <div class="right-tool">
               <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
diff --git a/packages/editor/src/services/codeBlock.ts b/packages/editor/src/services/codeBlock.ts
index 1a7b60fd..764bb202 100644
--- a/packages/editor/src/services/codeBlock.ts
+++ b/packages/editor/src/services/codeBlock.ts
@@ -103,7 +103,11 @@ class CodeBlock extends BaseService {
     if (!codeDsl) {
       // dsl中无代码块字段
       codeDsl = {
-        [id]: codeConfig,
+        [id]: {
+          ...codeConfig,
+          // eslint-disable-next-line no-eval
+          content: eval(codeConfig.content),
+        },
       };
     } else {
       const existContent = codeDsl[id] || {};
@@ -112,6 +116,8 @@ class CodeBlock extends BaseService {
         [id]: {
           ...existContent,
           ...codeConfig,
+          // eslint-disable-next-line no-eval
+          content: eval(codeConfig.content),
         },
       };
     }
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 04ea4d71..e6c1dd25 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -3,6 +3,9 @@
   .el-tree-node__content {
     height: auto;
   }
+  .el-tree-node__label {
+    width: 100%;
+  }
   .code-header-wrapper {
     display: flex;
     align-items: center;
@@ -109,6 +112,9 @@
     .side-tree {
       height: 100%;
       overflow: auto;
+      .el-tree-node__label {
+        width: 100%;
+      }
 
       .list-container {
         width: 100%;