@tmagic/editor 1.1.6 → 1.2.0-beta.2

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="m-editor-code-block-list">
+    <slot name="code-block-panel-header">
+      <div class="code-header-wrapper">
+        <el-input
+          :class="[editable ? 'code-filter-input' : 'code-filter-input-no-btn']"
+          size="small"
+          placeholder="输入关键字进行过滤"
+          clearable
+          v-model="filterText"
+          @input="filterTextChangeHandler"
+        ></el-input>
+        <el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
+          >新增</el-button
+        >
+      </div>
+    </slot>
+
+    <!-- 代码块列表 -->
+    <el-tree
+      v-if="!isEmpty(state.codeList)"
+      ref="tree"
+      node-key="id"
+      empty-text="暂无代码块"
+      :data="state.codeList"
+      :highlight-current="true"
+      :filter-node-method="filterNode"
+      @node-click="toggleCombineRelation"
+    >
+      <template #default="{ data }">
+        <div :id="data.id" class="list-container">
+          <div class="list-item">
+            <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
+            <!-- 右侧工具栏 -->
+            <div class="right-tool">
+              <el-tooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+                <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
+              </el-tooltip>
+              <el-tooltip
+                effect="dark"
+                content="查看绑定关系"
+                placement="bottom"
+                v-if="state.bindComps[data.id] && state.bindComps[data.id].length > 0"
+              >
+                <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
+              </el-tooltip>
+              <el-tooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+                <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
+              </el-tooltip>
+              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+            </div>
+          </div>
+          <!-- 展示代码块下绑定的组件 -->
+          <div
+            class="code-comp-map-wrapper"
+            v-if="data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0"
+          >
+            <svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
+              <path
+                fill="currentColor"
+                d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+              ></path>
+            </svg>
+            <!-- todo 功能暂时隐藏 -->
+            <!-- <el-button
+              v-for="(comp, index) in state.bindComps[data.id]"
+              :key="index"
+              class="code-comp"
+              size="small"
+              :plain="true"
+              >{{ comp.name }}<Icon :icon="Close" class="comp-delete-icon" @click.stop="unbind(comp.id, data.id)"></Icon
+            ></el-button> -->
+            <el-button
+              v-for="(comp, index) in state.bindComps[data.id]"
+              :key="index"
+              class="code-comp"
+              size="small"
+              :plain="true"
+              @click.stop="selectComp(comp.id)"
+              >{{ comp.name }}</el-button
+            >
+          </div>
+        </div>
+      </template>
+    </el-tree>
+
+    <!-- 代码块编辑区 -->
+    <code-block-editor>
+      <template #code-block-edit-panel-header="{ id }">
+        <slot name="code-block-edit-panel-header" :id="id"></slot>
+      </template>
+    </code-block-editor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, reactive, ref, watch } from 'vue';
+import { Close, Edit, Link, View } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { forIn, isEmpty } from 'lodash-es';
+
+import { Id } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
+
+import Icon from '../../../components/Icon.vue';
+import type { CodeBlockContent, CodeRelation, Services } from '../../../type';
+import { CodeDeleteErrorType, CodeDslList, CodeEditorMode, ListRelationState } from '../../../type';
+
+import codeBlockEditor from './CodeBlockEditor.vue';
+
+const props = defineProps<{
+  customError?: (id: string, errorType: CodeDeleteErrorType) => any;
+}>();
+
+const services = inject<Services>('services');
+
+// 代码块列表
+const state = reactive<ListRelationState>({
+  codeList: [],
+  bindComps: {},
+});
+
+const editable = computed(() => services?.codeBlockService.getEditStatus());
+
+// 根据代码块ID获取其绑定的组件信息
+const getBindCompsByCodeId = (codeId: string, codeBlockContent: CodeBlockContent) => {
+  if (isEmpty(codeBlockContent) || isEmpty(codeBlockContent.comps)) {
+    state.bindComps[codeId] = [];
+    return;
+  }
+  const compsField = codeBlockContent.comps as CodeRelation;
+  const bindCompIds = Object.keys(compsField);
+  const bindCompsFiltered = bindCompIds.filter((compId) => !isEmpty(compsField[compId]));
+  const compsInfo = bindCompsFiltered.map((compId) => ({
+    id: compId,
+    name: getCompName(compId),
+  }));
+  state.bindComps[codeId] = compsInfo;
+};
+
+// 初始化代码块列表
+const initList = async () => {
+  const codeDsl = (await services?.codeBlockService.getCodeDsl()) || null;
+  if (!codeDsl) return;
+  state.codeList = [];
+  forIn(codeDsl, (value: CodeBlockContent, codeId: string) => {
+    getBindCompsByCodeId(codeId, value);
+    state.codeList.push({
+      id: codeId,
+      name: value.name,
+      codeBlockContent: value,
+      showRelation: true,
+    });
+  });
+};
+
+watch(
+  () => services?.codeBlockService.getCodeDsl(),
+  () => {
+    initList();
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+// 监听组件名称修改，更新到代码块列表
+watch(
+  () => services?.editorService.get('node'),
+  (curNode) => {
+    if (!curNode?.id) return;
+    forIn(state.bindComps, (bindCompInfo) => {
+      bindCompInfo.forEach((comp) => {
+        if (comp.id === curNode.id) {
+          comp.name = curNode.name;
+        }
+      });
+    });
+  },
+);
+
+// 新增代码块
+const createCodeBlock = async () => {
+  const { codeBlockService } = services || {};
+  if (!codeBlockService) {
+    ElMessage.error('新增代码块失败');
+    return;
+  }
+  const codeConfig: CodeBlockContent = {
+    name: '代码块',
+    content: `() => {\n  // place your code here\n}`,
+  };
+  await codeBlockService.setMode(CodeEditorMode.EDITOR);
+  const id = await codeBlockService.getUniqueId();
+  await codeBlockService.setCodeDslById(id, codeConfig);
+  codeBlockService.setCodeEditorContent(true, id);
+};
+
+// 编辑代码块
+const editCode = async (key: string) => {
+  await services?.codeBlockService.setMode(CodeEditorMode.EDITOR);
+  services?.codeBlockService.setCodeEditorContent(true, key);
+};
+
+// 删除代码块
+const deleteCode = (key: string) => {
+  const existBinds = !!(state.bindComps[key]?.length > 0);
+  const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
+  if (!existBinds && !undeleteableList.includes(key)) {
+    // 无绑定关系，且不在不可删除列表中
+    services?.codeBlockService.deleteCodeDslByIds([key]);
+  } else {
+    if (typeof props.customError === 'function') {
+      props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+    } else {
+      ElMessage.error('代码块删除失败');
+    }
+  }
+};
+
+const filterText = ref('');
+const tree = ref();
+
+const filterNode = (value: string, data: CodeDslList): boolean => {
+  if (!value) {
+    return true;
+  }
+  return `${data.name}${data.id}`.indexOf(value) !== -1;
+};
+
+const filterTextChangeHandler = (val: string) => {
+  tree.value?.filter(val);
+};
+
+// 展示/隐藏组件绑定关系
+const toggleCombineRelation = (data: CodeDslList) => {
+  const { id } = data;
+  const currentCode = state.codeList.find((item) => item.id === id);
+  if (!currentCode) return;
+  currentCode.showRelation = !currentCode?.showRelation;
+};
+
+// 获取组件名称展示到tag上
+const getCompName = (compId: Id): string => {
+  const node = services?.editorService.getNodeById(compId);
+  return node?.name || String(compId);
+};
+
+// todo 功能暂时隐藏
+// 解除绑定
+// const unbind = async (compId: Id, codeId: string) => {
+//   const res = await services?.codeBlockService.unbind(compId, codeId, codeHooks);
+//   if (res) {
+//     ElMessage.success('绑定关系解除成功');
+//   } else {
+//     ElMessage.error('绑定关系解除失败');
+//   }
+// };
+
+// 选中组件
+const selectComp = (compId: Id) => {
+  const stage = services?.editorService.get<StageCore | null>('stage');
+  services?.editorService.select(compId);
+  stage?.select(compId);
+};
+</script>

package/src/services/codeBlock.ts

@@ -0,0 +1,415 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive } from 'vue';
+import { cloneDeep, forIn, isEmpty, keys, omit, pick } from 'lodash-es';
+
+import { Id, 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 BaseService from './BaseService';
+
+class CodeBlock extends BaseService {
+  private state = reactive<CodeState>({
+    isShowCodeEditor: false,
+    codeDsl: null,
+    id: '',
+    editable: true,
+    mode: CodeEditorMode.EDITOR,
+    combineIds: [],
+    undeletableList: [],
+  });
+
+  constructor() {
+    super([
+      'setCodeDsl',
+      'getCodeDsl',
+      'getCodeContentById',
+      'getCodeDslByIds',
+      'getCurrentDsl',
+      'setCodeDslById',
+      'setCodeEditorShowStatus',
+      'setEditStatus',
+      'setMode',
+      'setCombineIds',
+      'setUndeleteableList',
+      'deleteCodeDslByIds',
+    ]);
+  }
+
+  /**
+   * 设置活动的代码块dsl数据源
+   * @param {CodeBlockDSL} codeDsl 代码DSL
+   * @returns {void}
+   */
+  public async setCodeDsl(codeDsl: CodeBlockDSL): Promise<void> {
+    this.state.codeDsl = codeDsl;
+    await editorService.setCodeDsl(this.state.codeDsl);
+    info('[code-block]:code-dsl-change', this.state.codeDsl);
+    this.emit('code-dsl-change', this.state.codeDsl);
+  }
+
+  /**
+   * 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
+   * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
+   * @returns {CodeBlockDSL | null}
+   */
+  public async getCodeDsl(forceRefresh = false): Promise<CodeBlockDSL | null> {
+    if (!this.state.codeDsl || forceRefresh) {
+      this.state.codeDsl = await editorService.getCodeDsl();
+    }
+    return this.state.codeDsl;
+  }
+
+  /**
+   * 根据代码块id获取代码块内容
+   * @param {string} id 代码块id
+   * @returns {CodeBlockContent | null}
+   */
+  public async getCodeContentById(id: string): Promise<CodeBlockContent | null> {
+    if (!id) return null;
+    const totalCodeDsl = await this.getCodeDsl();
+    if (!totalCodeDsl) return null;
+    return totalCodeDsl[id] ?? null;
+  }
+
+  /**
+   * 设置代码块ID和代码内容到源dsl
+   * @param {string} id 代码块id
+   * @param {CodeBlockContent} codeConfig 代码块内容配置信息
+   * @returns {void}
+   */
+  public async setCodeDslById(id: string, codeConfig: CodeBlockContent): Promise<void> {
+    let codeDsl = await this.getCodeDsl();
+    if (!codeDsl) {
+      // dsl中无代码块字段
+      codeDsl = {
+        [id]: codeConfig,
+      };
+    } else {
+      const existContent = codeDsl[id] || {};
+      codeDsl = {
+        ...codeDsl,
+        [id]: {
+          ...existContent,
+          ...codeConfig,
+        },
+      };
+    }
+    await this.setCodeDsl(codeDsl);
+  }
+
+  /**
+   * 根据代码块id数组获取代码dsl
+   * @param {string[]} ids 代码块id数组
+   * @returns {CodeBlockDSL}
+   */
+  public async getCodeDslByIds(ids: string[]): Promise<CodeBlockDSL> {
+    const codeDsl = await this.getCodeDsl();
+    return pick(codeDsl, ids) as CodeBlockDSL;
+  }
+
+  /**
+   * 设置代码编辑面板展示状态
+   * @param {boolean} status 是否展示代码编辑面板
+   * @returns {void}
+   */
+  public async setCodeEditorShowStatus(status: boolean): Promise<void> {
+    this.state.isShowCodeEditor = status;
+  }
+
+  /**
+   * 获取代码编辑面板展示状态
+   * @returns {boolean} 是否展示代码编辑面板
+   */
+  public getCodeEditorShowStatus(): boolean {
+    return this.state.isShowCodeEditor;
+  }
+
+  /**
+   * 设置代码编辑面板展示状态及展示内容
+   * @param {boolean} status 是否展示代码编辑面板
+   * @param {string} id 代码块id
+   * @returns {void}
+   */
+  public setCodeEditorContent(status: boolean, id: string): void {
+    if (!id) return;
+    this.setId(id);
+    this.state.isShowCodeEditor = status;
+  }
+
+  /**
+   * 获取当前选中的代码块内容
+   * @returns {CodeBlockContent | null}
+   */
+  public async getCurrentDsl() {
+    return await this.getCodeContentById(this.state.id);
+  }
+
+  /**
+   * 获取编辑状态
+   * @returns {boolean} 是否可编辑
+   */
+  public getEditStatus(): boolean {
+    return this.state.editable;
+  }
+
+  /**
+   * 设置编辑状态
+   * @param {boolean} 是否可编辑
+   * @returns {void}
+   */
+  public async setEditStatus(status: boolean): Promise<void> {
+    this.state.editable = status;
+  }
+
+  /**
+   * 设置当前选中的代码块ID
+   * @param {string} id 代码块id
+   * @returns {void}
+   */
+  public setId(id: string) {
+    if (!id) return;
+    this.state.id = id;
+  }
+
+  /**
+   * 获取当前选中的代码块ID
+   * @returns {string} id 代码块id
+   */
+  public getId(): string {
+    return this.state.id;
+  }
+
+  /**
+   * 获取当前模式
+   * @returns {CodeEditorMode}
+   */
+  public getMode(): CodeEditorMode {
+    return this.state.mode;
+  }
+
+  /**
+   * 设置当前模式
+   * @param {CodeEditorMode} mode 模式
+   * @returns {void}
+   */
+  public async setMode(mode: CodeEditorMode): Promise<void> {
+    this.state.mode = mode;
+  }
+
+  /**
+   * 设置当前选中组件已关联绑定的代码块id数组
+   * @param {string[]} ids 代码块id数组
+   * @returns {void}
+   */
+  public async setCombineIds(ids: string[]): Promise<void> {
+    this.state.combineIds = ids;
+  }
+
+  /**
+   * 获取当前选中组件已关联绑定的代码块id数组
+   * @returns {string[]}
+   */
+  public getCombineIds(): string[] {
+    return this.state.combineIds;
+  }
+
+  /**
+   * 设置绑定关系
+   * @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);
+  }
+
+  /**
+   * 获取不可删除列表
+   * @returns {string[]}
+   */
+  public getUndeletableList(): string[] {
+    return this.state.undeletableList;
+  }
+
+  /**
+   * 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除）
+   * @param {string[]} codeIds 代码块id数组
+   * @returns {void}
+   */
+  public async setUndeleteableList(codeIds: string[]): Promise<void> {
+    this.state.undeletableList = codeIds;
+  }
+
+  /**
+   * 在dsl数据源中删除指定id的代码块
+   * @param {string[]} codeIds 需要删除的代码块id数组
+   * @returns {CodeBlockDSL} 删除后的code dsl
+   */
+  public async deleteCodeDslByIds(codeIds: string[]): Promise<CodeBlockDSL> {
+    const currentDsl = await this.getCodeDsl();
+    const newDsl = omit(currentDsl, codeIds);
+    await this.setCodeDsl(newDsl);
+    return newDsl;
+  }
+
+  /**
+   * 生成代码块唯一id
+   * @returns {string} 代码块唯一id
+   */
+  public async getUniqueId(): Promise<string> {
+    const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
+    // 判断是否重复
+    const dsl = await this.getCodeDsl();
+    const existedIds = keys(dsl);
+    if (!existedIds.includes(newId)) return newId;
+    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 组件节点
+   * @returns void
+   */
+  public async deleteCompsInRelation(node: MNode) {
+    const codeDsl = cloneDeep(await this.getCodeDsl());
+    if (!codeDsl) return;
+    this.recurseNodes(node, codeDsl);
+    this.setCodeDsl(codeDsl);
+  }
+
+  public destroy() {
+    this.state.isShowCodeEditor = false;
+    this.state.codeDsl = null;
+    this.state.id = '';
+    this.state.editable = true;
+    this.state.mode = CodeEditorMode.EDITOR;
+    this.state.combineIds = [];
+    this.state.undeletableList = [];
+  }
+
+  // 删除组件时 如果是容器 需要遍历删除其包含节点的绑定信息
+  private recurseNodes(node: MNode, codeDsl: CodeBlockDSL) {
+    if (!node.id) return;
+    forIn(codeDsl, (codeBlockContent) => {
+      const compsContent = codeBlockContent.comps || {};
+      codeBlockContent.comps = omit(compsContent, node.id);
+    });
+    if (!isEmpty(node.items)) {
+      node.items.forEach((item: MNode) => {
+        this.recurseNodes(item, codeDsl);
+      });
+    }
+  }
+}
+
+export type CodeBlockService = CodeBlock;
+
+export default new CodeBlock();