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

package/src/layouts/sidebar/LayerPanel.vue

@@ -1,72 +1,70 @@
 <template>
-  <TMagicScrollbar
-    class="magic-editor-layer-panel"
-    @mouseenter="addSelectModeListener"
-    @mouseleave="removeSelectModeListener"
-  >
-    <slot name="layer-panel-header"></slot>
-
-    <TMagicInput
-      v-model="filterText"
-      class="search-input"
-      size="small"
-      placeholder="输入关键字进行过滤"
-      clearable
-      :prefix-icon="Search"
-      @change="filterTextChangeHandler"
-    ></TMagicInput>
-
-    <TMagicTree
-      v-if="values.length"
-      class="magic-editor-layer-tree"
-      ref="tree"
-      node-key="id"
-      empty-text="页面空荡荡的"
-      draggable
-      :default-expanded-keys="defaultExpandedKeys"
-      :load="loadItems"
-      :data="values"
-      :expand-on-click-node="false"
-      :highlight-current="true"
-      :props="{
-        children: 'items',
-      }"
-      :filter-node-method="filterNode"
-      :allow-drop="allowDrop"
-      :show-checkbox="isMultiSelectStatus || selectedIds.length > 1"
-      @node-click="clickHandler"
-      @node-contextmenu="contextmenu"
-      @node-drag-end="handleDragEnd"
-      @node-collapse="handleCollapse"
-      @node-expand="handleExpand"
-      @check="multiClickHandler"
-      @mousedown="toggleClickFlag"
-      @mouseup="toggleClickFlag"
-    >
-      <template #default="{ node, data }">
-        <div
-          :id="data.id"
-          class="cus-tree-node"
-          @mouseenter="highlightHandler(data)"
-          :class="{ 'cus-tree-node-hover': canHighlight(data) }"
-        >
-          <slot name="layer-node-content" :node="node" :data="data">
-            <span>
-              {{ `${data.name} (${data.id})` }}
-            </span>
-          </slot>
-        </div>
-      </template>
-    </TMagicTree>
-
-    <Teleport to="body">
-      <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
-    </Teleport>
-  </TMagicScrollbar>
+  <div ref="layerPanel">
+    <TMagicScrollbar class="magic-editor-layer-panel">
+      <slot name="layer-panel-header"></slot>
+
+      <TMagicInput
+        v-model="filterText"
+        class="search-input"
+        size="small"
+        placeholder="输入关键字进行过滤"
+        clearable
+        :prefix-icon="Search"
+        @change="filterTextChangeHandler"
+      ></TMagicInput>
+
+      <TMagicTree
+        v-if="values.length"
+        class="magic-editor-layer-tree"
+        ref="tree"
+        node-key="id"
+        empty-text="页面空荡荡的"
+        draggable
+        :default-expanded-keys="defaultExpandedKeys"
+        :load="loadItems"
+        :data="values"
+        :expand-on-click-node="false"
+        :highlight-current="true"
+        :props="{
+          children: 'items',
+        }"
+        :filter-node-method="filterNode"
+        :allow-drop="allowDrop"
+        :show-checkbox="isMultiSelectStatus || selectedIds.length > 1"
+        @node-click="clickHandler"
+        @node-contextmenu="contextmenu"
+        @node-drag-end="handleDragEnd"
+        @node-collapse="handleCollapse"
+        @node-expand="handleExpand"
+        @check="multiClickHandler"
+        @mousedown="toggleClickFlag"
+        @mouseup="toggleClickFlag"
+      >
+        <template #default="{ node, data }">
+          <div
+            :id="data.id"
+            class="cus-tree-node"
+            @mouseenter="highlightHandler(data)"
+            :class="{ 'cus-tree-node-hover': canHighlight(data) }"
+          >
+            <slot name="layer-node-content" :node="node" :data="data">
+              <span>
+                {{ `${data.name} (${data.id})` }}
+              </span>
+            </slot>
+          </div>
+        </template>
+      </TMagicTree>
+
+      <Teleport to="body">
+        <LayerMenu ref="menu" :layer-content-menu="layerContentMenu"></LayerMenu>
+      </Teleport>
+    </TMagicScrollbar>
+  </div>
 </template>
 
 <script lang="ts" setup name="MEditorLayerPanel">
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
@@ -264,32 +262,47 @@ watch([selectedIds, tree], async () => {
   setTreeKeyStatus();
 });
 
-const keycon = ref<KeyController>();
-// 监听模式选择
-const addSelectModeListener = () => {
-  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-  const ctrl = isMac ? 'meta' : 'ctrl';
-  keycon.value = new KeyController();
-  keycon.value.keydown(ctrl, (e) => {
-    e.inputEvent.preventDefault();
-    isMultiSelectStatus.value = true;
-  });
-  // ctrl+tab切到其他窗口，需要将多选状态置为false
-  keycon.value.on('blur', () => {
-    isMultiSelectStatus.value = false;
-  });
-  keycon.value.keyup(ctrl, (e) => {
-    e.inputEvent.preventDefault();
-    isMultiSelectStatus.value = false;
-  });
+const layerPanel = ref<HTMLDivElement>();
+const mouseenterHandler = () => {
+  layerPanel.value?.focus();
 };
-// 移除监听
-const removeSelectModeListener = () => {
-  keycon.value?.destroy();
+
+const mouseleaveHandler = () => {
+  layerPanel.value?.blur();
   // 如果鼠标移出监听范围，且当前只选中了一个，置为单选模式(修复按住ctrl不放但鼠标移出的情况)
   if (selectedIds.value.length === 1) isMultiSelectStatus.value = false;
 };
 
+let keycon: KeyController;
+
+onMounted(() => {
+  layerPanel.value?.addEventListener('mouseenter', mouseenterHandler);
+  layerPanel.value?.addEventListener('mouseleave', mouseleaveHandler);
+
+  keycon = new KeyController(layerPanel.value);
+  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+  const ctrl = isMac ? 'meta' : 'ctrl';
+
+  keycon
+    .keydown(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      isMultiSelectStatus.value = true;
+    })
+    .on('blur', () => {
+      isMultiSelectStatus.value = false;
+    })
+    .keyup(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      isMultiSelectStatus.value = false;
+    });
+});
+
+onUnmounted(() => {
+  layerPanel.value?.removeEventListener('mouseenter', mouseenterHandler);
+  layerPanel.value?.removeEventListener('mouseleave', mouseleaveHandler);
+  keycon.destroy();
+});
+
 // 鼠标是否按下标志，用于高亮状态互斥
 const clicked = ref(false);
 // 高亮的节点

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

@@ -1,11 +1,12 @@
 <template>
   <TMagicDialog
-    v-model="isShowCodeBlockEditor"
+    :model-value="true"
     class="code-editor-dialog"
     :title="currentTitle"
     :fullscreen="true"
-    :before-close="saveAndClose"
+    :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,41 +41,15 @@
           ]"
         >
           <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="saveCode"
-                :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="saveAndClose">关闭</TMagicButton>
-              </div>
-              <div class="m-editor-content-bottom" v-else>
-                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
-              </div>
-            </div>
-          </TMagicCard>
+          <FunctionEditor
+            v-if="codeConfig"
+            :id="id"
+            :name="codeConfig.name"
+            :content="codeConfig.content"
+            :editable="!!editable"
+            :autoSaveDraft="mode === CodeEditorMode.EDITOR"
+            :codeOptions="codeOptions"
+          ></FunctionEditor>
         </div>
       </template>
     </Layout>
@@ -83,19 +58,20 @@
 
 <script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
-import { forIn, isEmpty } from 'lodash-es';
-import type * as monaco from 'monaco-editor';
+import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
-import { TMagicButton, TMagicCard, TMagicDialog, TMagicInput, tMagicMessage, TMagicTree } from '@tmagic/design';
+import { TMagicDialog, TMagicTree } from '@tmagic/design';
+import { CodeBlockContent } from '@tmagic/schema';
 
+import FunctionEditor from '../../../components/FunctionEditor.vue';
 import Layout from '../../../components/Layout.vue';
-import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
+import type { CodeDslItem, ListState, Services } from '../../../type';
 import { CodeEditorMode } from '../../../type';
-import MagicCodeEditor from '../../CodeEditor.vue';
+import { serializeConfig } from '../../../utils/editor';
 
 const services = inject<Services>('services');
+const codeOptions = inject('codeOptions', {});
 
-const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
 const left = ref(200);
 const currentTitle = ref('');
 // 编辑器当前需展示的代码块内容
@@ -105,10 +81,6 @@ 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 +88,9 @@ 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;
+  codeConfig.value.content = serializeConfig(codeConfig.value.content);
 });
 
 watchEffect(async () => {
@@ -132,37 +106,7 @@ watchEffect(async () => {
   currentTitle.value = state.codeList[0]?.name || '';
 });
 
-// 保存代码
-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('代码保存成功');
-  return true;
-};
-
-// 保存并关闭
-const saveAndClose = async () => {
-  const saveRes = await saveCode();
-  if (saveRes) {
-    await services?.codeBlockService.setCodeEditorShowStatus(false);
-  }
-};
-
-const selectHandler = (data: CodeDslList) => {
+const selectHandler = (data: CodeDslItem) => {
   services?.codeBlockService.setId(data.id);
   currentTitle.value = data.name;
 };

package/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">
@@ -40,7 +40,7 @@
                 effect="dark"
                 content="查看绑定关系"
                 placement="bottom"
-                v-if="state.bindComps[data.id] && state.bindComps[data.id].length > 0"
+                v-if="data.combineInfo && data.combineInfo.length > 0"
               >
                 <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
               </TMagicTooltip>
@@ -53,7 +53,7 @@
           <!-- 展示代码块下绑定的组件 -->
           <div
             class="code-comp-map-wrapper"
-            v-if="data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0"
+            v-if="data.showRelation && data.combineInfo && data.combineInfo.length > 0"
           >
             <svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
               <path
@@ -61,23 +61,14 @@
                 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 功能暂时隐藏 -->
-            <!-- <TMagicButton
-              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
-            ></TMagicButton> -->
             <TMagicButton
-              v-for="(comp, index) in state.bindComps[data.id]"
+              v-for="(comp, index) in data.combineInfo"
               :key="index"
               class="code-comp"
               size="small"
               :plain="true"
-              @click.stop="selectComp(comp.id)"
-              >{{ comp.name }}</TMagicButton
+              @click.stop="selectComp(comp.compId)"
+              >{{ comp.compName }}</TMagicButton
             >
           </div>
         </div>
@@ -85,7 +76,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>
@@ -96,66 +87,65 @@
 <script lang="ts" setup name="MEditorCodeBlockList">
 import { computed, inject, reactive, ref, watch } from 'vue';
 import { Close, Edit, Link, View } from '@element-plus/icons-vue';
-import { forIn, isEmpty } from 'lodash-es';
+import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
 import { TMagicButton, TMagicInput, tMagicMessage, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { Id } from '@tmagic/schema';
+import { CodeBlockContent, 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 type { CodeRelation, Services } from '../../../type';
+import { CodeDeleteErrorType, CodeDslItem, CodeEditorMode, ListState } from '../../../type';
 
 import codeBlockEditor from './CodeBlockEditor.vue';
 
 const props = defineProps<{
-  customError?: (id: string, errorType: CodeDeleteErrorType) => any;
+  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
 }>();
 
 const services = inject<Services>('services');
 
 // 代码块列表
-const state = reactive<ListRelationState>({
+const state = reactive<ListState>({
   codeList: [],
-  bindComps: {},
 });
 
 const editable = computed(() => services?.codeBlockService.getEditStatus());
 
+// 是否展示代码编辑区
+const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
+// 获取绑定关系
+const codeCombineInfo = ref<CodeRelation | null>(null);
+
 // 根据代码块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),
+const getBindCompsByCodeId = (codeId: Id) => {
+  if (!codeCombineInfo.value || !codeCombineInfo.value[codeId]) return [];
+  const bindCompsId = Object.keys(codeCombineInfo.value[codeId]);
+  return bindCompsId.map((compId) => ({
+    compId,
+    compName: getCompName(compId),
   }));
-  state.bindComps[codeId] = compsInfo;
 };
 
 // 初始化代码块列表
 const initList = async () => {
-  const codeDsl = (await services?.codeBlockService.getCodeDsl()) || null;
-  if (!codeDsl) return;
+  const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
+  codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
+  if (!codeDsl || !codeCombineInfo.value) return;
   state.codeList = [];
-  forIn(codeDsl, (value: CodeBlockContent, codeId: string) => {
-    getBindCompsByCodeId(codeId, value);
+  forIn(codeDsl, (value: CodeBlockContent, codeId: Id) => {
     state.codeList.push({
       id: codeId,
       name: value.name,
       codeBlockContent: value,
       showRelation: true,
+      combineInfo: getBindCompsByCodeId(codeId),
     });
   });
 };
 
 watch(
-  () => services?.codeBlockService.getCodeDsl(),
+  [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.refreshCombineInfo()],
   () => {
     initList();
   },
@@ -165,21 +155,6 @@ watch(
   },
 );
 
-// 监听组件名称修改，更新到代码块列表
-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 || {};
@@ -190,6 +165,7 @@ const createCodeBlock = async () => {
   const codeConfig: CodeBlockContent = {
     name: '代码块',
     content: `() => {\n  // place your code here\n}`,
+    params: [],
   };
   await codeBlockService.setMode(CodeEditorMode.EDITOR);
   const id = await codeBlockService.getUniqueId();
@@ -198,14 +174,15 @@ const createCodeBlock = async () => {
 };
 
 // 编辑代码块
-const editCode = async (key: string) => {
+const editCode = async (key: Id) => {
   await services?.codeBlockService.setMode(CodeEditorMode.EDITOR);
   services?.codeBlockService.setCodeEditorContent(true, key);
 };
 
 // 删除代码块
-const deleteCode = (key: string) => {
-  const existBinds = !!(state.bindComps[key]?.length > 0);
+const deleteCode = (key: Id) => {
+  const currentCode = state.codeList.find((codeItem: CodeDslItem) => codeItem.id === key);
+  const existBinds = !isEmpty(currentCode?.combineInfo);
   const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
   if (!existBinds && !undeleteableList.includes(key)) {
     // 无绑定关系，且不在不可删除列表中
@@ -222,7 +199,7 @@ const deleteCode = (key: string) => {
 const filterText = ref('');
 const tree = ref();
 
-const filterNode = (value: string, data: CodeDslList): boolean => {
+const filterNode = (value: string, data: CodeDslItem): boolean => {
   if (!value) {
     return true;
   }
@@ -234,7 +211,7 @@ const filterTextChangeHandler = (val: string) => {
 };
 
 // 展示/隐藏组件绑定关系
-const toggleCombineRelation = (data: CodeDslList) => {
+const toggleCombineRelation = (data: CodeDslItem) => {
   const { id } = data;
   const currentCode = state.codeList.find((item) => item.id === id);
   if (!currentCode) return;
@@ -247,17 +224,6 @@ const getCompName = (compId: Id): string => {
   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');