feat(editor): 代码编辑新增草稿功能

#440
2026-04-03 14:38:37 +08:00 · 2022-10-21 15:17:27 +08:00
parent 3e78a0809b
commit 3673d6016d
5 changed files with 104 additions and 47 deletions
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -1,10 +1,10 @@
 <template>
  <TMagicDialog
-    v-model="isShowCodeBlockEditor"
+    :model-value="true"
    class="code-editor-dialog"
    :title="currentTitle"
    :fullscreen="true"
-    :before-close="saveAndClose"
+    :before-close="close"
    :append-to-body="true"
  >
    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
@@ -58,7 +58,7 @@
                ref="codeEditor"
                class="m-editor-container"
                :init-values="`${codeConfig.content}`"
-                @save="saveCode"
+                @save="saveCodeDraft"
                :options="{
                  tabSize: 2,
                  fontSize: 16,
@@ -68,10 +68,10 @@
              ></MagicCodeEditor>
              <div class="m-editor-content-bottom" v-if="editable">
                <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
-                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
+                <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
              </div>
              <div class="m-editor-content-bottom" v-else>
-                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
+                <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
              </div>
            </div>
          </TMagicCard>
@@ -83,14 +83,24 @@

 <script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
-import { forIn, isEmpty } from 'lodash-es';
+import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 import type * as monaco from 'monaco-editor';

-import { TMagicButton, TMagicCard, TMagicDialog, TMagicInput, tMagicMessage, TMagicTree } from '@tmagic/design';
+import {
+  TMagicButton,
+  TMagicCard,
+  TMagicDialog,
+  TMagicInput,
+  tMagicMessage,
+  tMagicMessageBox,
+  TMagicTree,
+} from '@tmagic/design';
+import { datetimeFormatter } from '@tmagic/utils';

 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');
@@ -100,15 +110,13 @@ 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: [],
 });

-// 是否展示代码编辑区
-const isShowCodeBlockEditor = computed(
-  () => (codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus()) || false,
-);
 const mode = computed(() => services?.codeBlockService.getMode());
 const id = computed(() => services?.codeBlockService.getId() || '');
 const editable = computed(() => services?.codeBlockService.getEditStatus());
@@ -116,7 +124,17 @@ const editable = computed(() => services?.codeBlockService.getEditStatus());
 const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);

 watchEffect(async () => {
-  codeConfig.value = (await services?.codeBlockService.getCodeContentById(id.value)) || null;
+  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;
+  }
 });

 watchEffect(async () => {
@@ -132,6 +150,18 @@ 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;
@@ -151,14 +181,33 @@ const saveCode = async (): Promise<boolean> => {
    content: codeConfig.value.content,
  });
  tMagicMessage.success('代码保存成功');
+  // 删除草稿
+  services?.codeBlockService.removeCodeDraft(id.value);
  return true;
 };

-// 保存并关闭
-const saveAndClose = async () => {
-  const saveRes = await saveCode();
-  if (saveRes) {
-    await services?.codeBlockService.setCodeEditorShowStatus(false);
+// 关闭弹窗
+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);
  }
 };

--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -85,7 +85,7 @@
    </TMagicTree>

    <!-- 代码块编辑区 -->
-    <code-block-editor>
+    <code-block-editor v-if="isShowCodeBlockEditor">
      <template #code-block-edit-panel-header="{ id }">
        <slot name="code-block-edit-panel-header" :id="id"></slot>
      </template>
@@ -122,6 +122,9 @@ const state = reactive<ListRelationState>({

 const editable = computed(() => services?.codeBlockService.getEditStatus());

+// 是否展示代码编辑区
+const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
+
 // 根据代码块ID获取其绑定的组件信息
 const getBindCompsByCodeId = (codeId: string, codeBlockContent: CodeBlockContent) => {
  if (isEmpty(codeBlockContent) || isEmpty(codeBlockContent.comps)) {
--- a/packages/editor/src/services/codeBlock.ts
+++ b/packages/editor/src/services/codeBlock.ts
@@ -23,7 +23,7 @@ import { Id, MNode } from '@tmagic/schema';

 import editorService from '../services/editor';
 import type { CodeBlockContent, CodeBlockDSL, CodeState } from '../type';
-import { CodeEditorMode, CodeSelectOp } from '../type';
+import { CODE_DRAFT_STORAGE_KEY, CodeEditorMode, CodeSelectOp } from '../type';
 import { error, info } from '../utils/logger';

 import BaseService from './BaseService';
@@ -321,6 +321,27 @@ class CodeBlock extends BaseService {
    this.state.undeletableList = codeIds;
  }

+  /**
+   * 设置代码草稿
+   */
+  public setCodeDraft(codeId: string, content: string): void {
+    globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+  }
+
+  /**
+   * 获取代码草稿
+   */
+  public getCodeDraft(codeId: string): string | null {
+    return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+
+  /**
+   * 删除代码草稿
+   */
+  public removeCodeDraft(codeId: string): void {
+    globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+
  /**
   * 在dsl数据源中删除指定id的代码块
   * @param {string[]} codeIds 需要删除的代码块id数组
@@ -346,33 +367,6 @@ class CodeBlock extends BaseService {
    return await this.getUniqueId();
  }

-  /**
-   * 一对一解除绑定关系  功能隐藏，暂时注释
-   * @param {string} compId 组件id
-   * @param {string} codeId 代码块id
-   * @param {string[]} codeHooks 代码块挂载hook名称
-   * @returns {boolean} 结果
-   */
-  // public async unbind(compId: Id, codeId: string, codeHooks: string[]): Promise<boolean> {
-  //   const nodeInfo = editorService.getNodeById(compId);
-  //   if (!nodeInfo) return false;
-  //   // 更新node节点信息
-  //   codeHooks.forEach((hook) => {
-  //     if (!isEmpty(nodeInfo[hook])) {
-  //       const newHookInfo = nodeInfo[hook].filter((item: string) => item !== codeId);
-  //       nodeInfo[hook] = newHookInfo;
-  //       editorService.update(nodeInfo);
-  //     }
-  //   });
-  //   // 更新绑定关系
-  //   const oldRelation = await this.getCompRelation();
-  //   const oldCodeIds = oldRelation[compId];
-  //   // 不能直接splice修改原数组,会导致绑定关系更新错乱
-  //   const newCodeIds = oldCodeIds.filter((item) => item !== codeId);
-  //   this.setCompRelation(compId, newCodeIds);
-  //   return true;
-  // }
-
  /**
   * 通过组件id解除绑定关系（删除组件）
   * @param {MNode} compId 组件节点
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -392,3 +392,6 @@ export enum CodeSelectOp {
  /** 单选修改 */
  CHANGE = 'change',
 }
+
+// 代码块草稿localStorage key
+export const CODE_DRAFT_STORAGE_KEY = 'magicCodeDraft';
--- a/packages/editor/src/utils/editor.ts
+++ b/packages/editor/src/utils/editor.ts
@@ -16,13 +16,14 @@
 * limitations under the License.
 */

+import serialize from 'serialize-javascript';
+
 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';

 import { Layout } from '../type';
-
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';

 /**
@@ -237,3 +238,10 @@ export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageC
    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
  };
 };
+
+// 序列化配置
+export const serializeConfig = (config: any) =>
+  serialize(config, {
+    space: 2,
+    unsafe: true,
+  }).replace(/"(\w+)":\s/g, '$1: ');