@tmagic/editor 1.2.0-beta.11 → 1.2.0-beta.13

package/src/services/codeBlock.ts

@@ -19,12 +19,12 @@
 import { reactive } from 'vue';
 import { cloneDeep, forIn, isEmpty, keys, omit, pick } from 'lodash-es';
 
-import { Id, MNode } from '@tmagic/schema';
+import { CodeBlockContent, CodeBlockDSL, HookType, Id, MApp, MNode } from '@tmagic/schema';
 
 import editorService from '../services/editor';
-import type { CodeBlockContent, CodeBlockDSL, CodeState } from '../type';
-import { CodeEditorMode, CodeSelectOp } from '../type';
-import { error, info } from '../utils/logger';
+import type { CodeRelation, CodeState, HookData } from '../type';
+import { CODE_DRAFT_STORAGE_KEY, CodeEditorMode } from '../type';
+import { info } from '../utils/logger';
 
 import BaseService from './BaseService';
 
@@ -37,6 +37,7 @@ class CodeBlock extends BaseService {
     mode: CodeEditorMode.EDITOR,
     combineIds: [],
     undeletableList: [],
+    relations: {},
   });
 
   constructor() {
@@ -70,22 +71,27 @@ class CodeBlock extends BaseService {
 
   /**
    * 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
+   * 方法要支持钩子添加扩展，会被重写为异步方法,因此这里显示写为异步以提醒调用者需以异步形式调用
    * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
    * @returns {CodeBlockDSL | null}
    */
   public async getCodeDsl(forceRefresh = false): Promise<CodeBlockDSL | null> {
+    return this.getCodeDslSync(forceRefresh);
+  }
+
+  public getCodeDslSync(forceRefresh = false): CodeBlockDSL | null {
     if (!this.state.codeDsl || forceRefresh) {
-      this.state.codeDsl = await editorService.getCodeDsl();
+      this.state.codeDsl = editorService.getCodeDslSync();
     }
     return this.state.codeDsl;
   }
 
   /**
    * 根据代码块id获取代码块内容
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {CodeBlockContent | null}
    */
-  public async getCodeContentById(id: string): Promise<CodeBlockContent | null> {
+  public async getCodeContentById(id: Id): Promise<CodeBlockContent | null> {
     if (!id) return null;
     const totalCodeDsl = await this.getCodeDsl();
     if (!totalCodeDsl) return null;
@@ -94,16 +100,20 @@ class CodeBlock extends BaseService {
 
   /**
    * 设置代码块ID和代码内容到源dsl
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @param {CodeBlockContent} codeConfig 代码块内容配置信息
    * @returns {void}
    */
-  public async setCodeDslById(id: string, codeConfig: CodeBlockContent): Promise<void> {
+  public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
     let codeDsl = await this.getCodeDsl();
     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 +122,8 @@ class CodeBlock extends BaseService {
         [id]: {
           ...existContent,
           ...codeConfig,
+          // eslint-disable-next-line no-eval
+          content: eval(codeConfig.content),
         },
       };
     }
@@ -148,10 +160,10 @@ class CodeBlock extends BaseService {
   /**
    * 设置代码编辑面板展示状态及展示内容
    * @param {boolean} status 是否展示代码编辑面板
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {void}
    */
-  public setCodeEditorContent(status: boolean, id: string): void {
+  public setCodeEditorContent(status: boolean, id: Id): void {
     if (!id) return;
     this.setId(id);
     this.state.isShowCodeEditor = status;
@@ -184,19 +196,19 @@ class CodeBlock extends BaseService {
 
   /**
    * 设置当前选中的代码块ID
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {void}
    */
-  public setId(id: string) {
+  public setId(id: Id) {
     if (!id) return;
     this.state.id = id;
   }
 
   /**
    * 获取当前选中的代码块ID
-   * @returns {string} id 代码块id
+   * @returns {Id} id 代码块id
    */
-  public getId(): string {
+  public getId(): Id {
     return this.state.id;
   }
 
@@ -235,98 +247,70 @@ class CodeBlock extends BaseService {
   }
 
   /**
-   * 设置绑定关系
-   * @param {Id} 组件id
-   * @param {string[]} diffCodeIds 代码块id数组
-   * @param {CodeSelectOp} opFlag 操作类型
-   * @param {string} hook 代码块挂载hook名称
+   * 刷新绑定关系
    * @returns {void}
    */
-  public async setCombineRelation(compId: Id, diffCodeIds: string[], opFlag: CodeSelectOp, hook: string) {
-    const codeDsl = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl) return;
-    if (opFlag === CodeSelectOp.DELETE) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const index = compsContent?.[compId].findIndex((item) => item === hook);
-          if (typeof index !== 'undefined' && index !== -1) {
-            compsContent?.[compId].splice(index, 1);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error('解绑代码块失败');
-      }
-    } else if (opFlag === CodeSelectOp.ADD) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const existHooks = compsContent?.[compId];
-          if (isEmpty(existHooks)) {
-            // comps属性不存在，或者comps为空：新增
-            codeDsl[codeId].comps = {
-              ...(codeDsl[codeId].comps || {}),
-              [compId]: [hook],
-            };
-          } else {
-            // 往已有的关系中添加hook
-            existHooks?.push(hook);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error('绑定代码块失败');
-      }
-    } else if (opFlag === CodeSelectOp.CHANGE) {
-      // 单选修改
-      forIn(codeDsl, (codeBlockContent, codeId) => {
-        if (codeId === diffCodeIds[0]) {
-          // 增加
-          codeBlockContent.comps = {
-            ...(codeBlockContent?.comps || {}),
-            [compId]: [hook],
-          };
-        } else if (isEmpty(diffCodeIds) || codeId !== diffCodeIds[0]) {
-          // 清空或者移除之前的选项
-          const compHooks = codeBlockContent?.comps?.[compId];
-          // continue
-          if (!compHooks) return true;
-          const index = compHooks.findIndex((hookName) => hookName === hook);
-          if (index !== -1) {
-            compHooks.splice(index, 1);
-            // break
-            return false;
-          }
-        }
-      });
-    }
-    this.setCodeDsl(codeDsl);
+  public refreshCombineInfo(): CodeRelation | null {
+    const root = editorService.get<MApp | null>('root');
+    if (!root) return null;
+    const relations = {};
+    this.recurseMNode(root, relations);
+    this.state.relations = relations;
+    return this.state.relations;
+  }
+
+  /**
+   * 获取绑定关系
+   * @returns {CodeRelation}
+   */
+  public getCombineInfo(): CodeRelation {
+    return this.state.relations;
   }
 
   /**
    * 获取不可删除列表
-   * @returns {string[]}
+   * @returns {Id[]}
    */
-  public getUndeletableList(): string[] {
+  public getUndeletableList(): Id[] {
     return this.state.undeletableList;
   }
 
   /**
    * 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除）
-   * @param {string[]} codeIds 代码块id数组
+   * @param {Id[]} codeIds 代码块id数组
    * @returns {void}
    */
-  public async setUndeleteableList(codeIds: string[]): Promise<void> {
+  public async setUndeleteableList(codeIds: Id[]): Promise<void> {
     this.state.undeletableList = codeIds;
   }
 
+  /**
+   * 设置代码草稿
+   */
+  public setCodeDraft(codeId: Id, content: string): void {
+    globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+  }
+
+  /**
+   * 获取代码草稿
+   */
+  public getCodeDraft(codeId: Id): string | null {
+    return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+
+  /**
+   * 删除代码草稿
+   */
+  public removeCodeDraft(codeId: Id): void {
+    globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+
   /**
    * 在dsl数据源中删除指定id的代码块
-   * @param {string[]} codeIds 需要删除的代码块id数组
+   * @param {Id[]} codeIds 需要删除的代码块id数组
    * @returns {CodeBlockDSL} 删除后的code dsl
    */
-  public async deleteCodeDslByIds(codeIds: string[]): Promise<CodeBlockDSL> {
+  public async deleteCodeDslByIds(codeIds: Id[]): Promise<CodeBlockDSL> {
     const currentDsl = await this.getCodeDsl();
     const newDsl = omit(currentDsl, codeIds);
     await this.setCodeDsl(newDsl);
@@ -335,9 +319,9 @@ class CodeBlock extends BaseService {
 
   /**
    * 生成代码块唯一id
-   * @returns {string} 代码块唯一id
+   * @returns {Id} 代码块唯一id
    */
-  public async getUniqueId(): Promise<string> {
+  public async getUniqueId(): Promise<Id> {
     const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
     // 判断是否重复
     const dsl = await this.getCodeDsl();
@@ -346,33 +330,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 组件节点
@@ -381,7 +338,7 @@ class CodeBlock extends BaseService {
   public async deleteCompsInRelation(node: MNode) {
     const codeDsl = cloneDeep(await this.getCodeDsl());
     if (!codeDsl) return;
-    this.recurseNodes(node, codeDsl);
+    this.refreshRelationDeep(node, codeDsl);
     this.setCodeDsl(codeDsl);
   }
 
@@ -395,8 +352,13 @@ class CodeBlock extends BaseService {
     this.state.undeletableList = [];
   }
 
-  // 删除组件时 如果是容器 需要遍历删除其包含节点的绑定信息
-  private recurseNodes(node: MNode, codeDsl: CodeBlockDSL) {
+  /**
+   * 删除组件时 如果是容器 需要遍历删除其包含节点的绑定信息
+   * @param {MNode} node 节点信息
+   * @param {CodeBlockDSL} codeDsl 代码块
+   * @returns void
+   */
+  private refreshRelationDeep(node: MNode, codeDsl: CodeBlockDSL) {
     if (!node.id) return;
     forIn(codeDsl, (codeBlockContent) => {
       const compsContent = codeBlockContent.comps || {};
@@ -404,7 +366,36 @@ class CodeBlock extends BaseService {
     });
     if (!isEmpty(node.items)) {
       node.items.forEach((item: MNode) => {
-        this.recurseNodes(item, codeDsl);
+        this.refreshRelationDeep(item, codeDsl);
+      });
+    }
+  }
+
+  /**
+   * 递归遍历dsl中挂载了代码块的节点，并更新绑定关系数据
+   * @param {MContainer} node 节点信息
+   * @returns void
+   */
+  private recurseMNode(node: MNode, relations: CodeRelation) {
+    forIn(node, (value, key) => {
+      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
+        value.hookData.forEach((relationItem: HookData) => {
+          // continue
+          if (!relationItem.codeId) return;
+          if (!relations[relationItem.codeId]) {
+            relations[relationItem.codeId] = {};
+          }
+          const codeItem = relations[relationItem.codeId];
+          if (isEmpty(codeItem[node.id])) {
+            codeItem[node.id] = [];
+          }
+          codeItem[node.id].push(key);
+        });
+      }
+    });
+    if (!isEmpty(node.items)) {
+      node.items.forEach((item: MNode) => {
+        this.recurseMNode(item, relations);
       });
     }
   }

package/src/services/editor.ts

@@ -17,7 +17,7 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep, mergeWith, uniq } from 'lodash-es';
+import { cloneDeep, isObject, mergeWith, uniq } from 'lodash-es';
 
 import type { CodeBlockDSL, Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
@@ -375,7 +375,9 @@ class Editor extends BaseService {
       }
     }
 
-    this.pushHistoryState();
+    if (!isPage(newNodes[0])) {
+      this.pushHistoryState();
+    }
 
     this.emit('add', newNodes);
 
@@ -437,8 +439,10 @@ class Editor extends BaseService {
 
     await Promise.all(nodes.map((node) => this.doRemove(node)));
 
-    // 更新历史记录
-    this.pushHistoryState();
+    if (!isPage(nodes[0])) {
+      // 更新历史记录
+      this.pushHistoryState();
+    }
 
     this.emit('remove', nodes);
   }
@@ -455,6 +459,10 @@ class Editor extends BaseService {
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
+      if (isObject(srcValue) && Array.isArray(objValue)) {
+        // 原来的配置是数组，新的配置是对象，则直接使用新的值
+        return srcValue;
+      }
       if (Array.isArray(srcValue)) {
         return srcValue;
       }
@@ -517,7 +525,7 @@ class Editor extends BaseService {
     this.pushHistoryState();
 
     this.emit('update', newNodes);
-
+    codeBlockService.refreshCombineInfo();
     return Array.isArray(config) ? newNodes : newNodes[0];
   }
 
@@ -780,6 +788,12 @@ class Editor extends BaseService {
     return root.codeBlocks || null;
   }
 
+  public getCodeDslSync(): CodeBlockDSL | null {
+    const root = this.get<MApp | null>('root');
+    if (!root) return null;
+    return root.codeBlocks || null;
+  }
+
   /**
    * 设置代码块到dsl的codeBlocks字段
    * @param {CodeBlockDSL} codeDsl 代码DSL

package/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;
@@ -74,19 +77,6 @@
 
 .m-fields-code-select {
   width: 100%;
-  .el-card__body {
-    padding: 5px;
-  }
-  .tool-bar {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    height: 20px;
-    .tool-item {
-      display: flex;
-      align-items: center;
-    }
-  }
 }
 .code-editor-dialog {
   .el-dialog__body {
@@ -97,7 +87,7 @@
     height: 100%;
     background: #fff;
     .el-card__body {
-      height: calc(100% - 80px);
+      height: 100%;
       background: #fff;
     }
   }
@@ -109,6 +99,9 @@
     .side-tree {
       height: 100%;
       overflow: auto;
+      .el-tree-node__label {
+        width: 100%;
+      }
 
       .list-container {
         width: 100%;
@@ -134,6 +127,7 @@
     display: flex;
     align-items: center;
     font-size: 16px;
+    margin-bottom: 10px;
     .code-name-label {
       margin-right: 10px;
     }
@@ -155,7 +149,7 @@
     position: absolute;
     top: 0;
     left: 4px;
-    width: calc(100% - 9px);
+    width: 100%;
     height: 100%;
     z-index: 10;
     background: #fff;
@@ -167,14 +161,17 @@
   .m-editor-wrapper {
     height: 100%;
     .m-editor-container {
-      height: calc(100% - 70px);
+      height: calc(100% - 65px);
     }
     .m-editor-content-bottom {
-      height: 40px;
+      height: 45px;
       width: 100%;
       display: flex;
       justify-content: end;
       background: #fff;
+      position: absolute;
+      right: 20px;
+      bottom: 0;
       > button {
         height: 30px;
         margin-top: 15px;

package/src/type.ts

@@ -19,7 +19,7 @@
 import type { Component } from 'vue';
 
 import type { FormConfig } from '@tmagic/form';
-import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
@@ -309,28 +309,13 @@ export interface ScrollViewerEvent {
   scrollWidth: number;
 }
 
-export interface CodeBlockDSL {
-  [id: string]: CodeBlockContent;
-}
-
-export interface CodeBlockContent {
-  /** 代码块名称 */
-  name: string;
-  /** 代码块内容 */
-  content: string;
-  /** 代码块与组件的绑定关系 */
-  comps?: CodeRelation;
-  /** 扩展字段 */
-  [propName: string]: any;
-}
-
 export type CodeState = {
   /** 是否展示代码块编辑区 */
   isShowCodeEditor: boolean;
   /** 代码块DSL数据源 */
   codeDsl: CodeBlockDSL | null;
   /** 当前选中的代码块id */
-  id: string;
+  id: Id;
   /** 代码块是否可编辑 */
   editable: boolean;
   /** 代码编辑面板的展示模式 */
@@ -338,12 +323,23 @@ export type CodeState = {
   /** list模式下左侧展示的代码列表 */
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
-  undeletableList: string[];
+  undeletableList: Id[];
+  /** 代码块和组件的绑定关系 */
+  relations: CodeRelation;
+};
+
+export type HookData = {
+  /** 代码块id */
+  codeId: Id;
+  /** 参数 */
+  params?: object;
 };
 
 export type CodeRelation = {
-  /** 组件id:['created'] */
-  [compId: string | number]: string[];
+  [codeId: Id]: {
+    /** 组件id:['created'] */
+    [compId: Id]: string[];
+  };
 };
 
 export enum CodeEditorMode {
@@ -353,28 +349,29 @@ export enum CodeEditorMode {
   EDITOR = 'editor',
 }
 
-export interface CodeDslList {
+export interface CodeDslItem {
   /** 代码块id */
-  id: string;
+  id: Id;
   /** 代码块名称 */
   name: string;
   /** 代码块函数内容 */
   codeBlockContent?: CodeBlockContent;
   /** 是否展示代码绑定关系 */
   showRelation?: boolean;
+  /** 代码块对应绑定的组件信息 */
+  combineInfo?: CombineInfo[];
 }
 
-export interface ListState {
-  /** 代码块列表 */
-  codeList: CodeDslList[];
+export interface CombineInfo {
+  /** 组件id */
+  compId: Id;
+  /** 组件名称 */
+  compName: string;
 }
 
-export interface ListRelationState extends ListState {
-  /** 与代码块绑定的组件id信息 */
-  bindComps: {
-    /** 代码块id : 组件信息 */
-    [id: string]: MNode[];
-  };
+export interface ListState {
+  /** 代码块列表 */
+  codeList: CodeDslItem[];
 }
 
 export enum CodeDeleteErrorType {
@@ -384,11 +381,12 @@ export enum CodeDeleteErrorType {
   BIND = 'bind',
 }
 
-export enum CodeSelectOp {
-  /** 增加 */
-  ADD = 'add',
-  /** 删除 */
-  DELETE = 'delete',
-  /** 单选修改 */
-  CHANGE = 'change',
+// 代码块草稿localStorage key
+export const CODE_DRAFT_STORAGE_KEY = 'magicCodeDraft';
+
+export interface CodeParamStatement {
+  /** 参数名称 */
+  name: string;
+  /** 参数类型 */
+  type?: string;
 }

package/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: ');

package/src/utils/props.ts

@@ -226,14 +226,14 @@ export const fillConfig = (config: FormConfig = []) => [
           {
             name: 'created',
             text: 'created',
-            type: 'code-select',
             labelWidth: '100px',
+            type: 'code-select',
           },
           {
             name: 'mounted',
             text: 'mounted',
-            type: 'code-select',
             labelWidth: '100px',
+            type: 'code-select',
           },
         ],
       },