@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.4

package/src/layouts/sidebar/LayerPanel.vue

@@ -1,23 +1,27 @@
 <template>
-  <el-scrollbar class="magic-editor-layer-panel">
+  <TMagicScrollbar
+    class="magic-editor-layer-panel"
+    @mouseenter="addSelectModeListener"
+    @mouseleave="removeSelectModeListener"
+  >
     <slot name="layer-panel-header"></slot>
 
-    <el-input
+    <TMagicInput
       class="filterInput"
       size="small"
       placeholder="输入关键字进行过滤"
       clearable
       v-model="filterText"
       @change="filterTextChangeHandler"
-    ></el-input>
+    ></TMagicInput>
 
-    <el-tree
+    <TMagicTree
       v-if="values.length"
       ref="tree"
       node-key="id"
       empty-text="页面空荡荡的"
       draggable
-      :default-expanded-keys="expandedKeys"
+      :default-expanded-keys="defaultExpandedKeys"
       :load="loadItems"
       :data="values"
       :expand-on-click-node="false"
@@ -27,20 +31,22 @@
       }"
       :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"
-          @mousedown="toggleClickFlag"
-          @mouseup="toggleClickFlag"
           @mouseenter="highlightHandler(data)"
-          :class="{ 'cus-tree-node-hover': canHighlight && data.id === highlightNode?.id }"
+          :class="{ 'cus-tree-node-hover': canHighlight(data) }"
         >
           <slot name="layer-node-content" :node="node" :data="data">
             <span>
@@ -49,32 +55,56 @@
           </slot>
         </div>
       </template>
-    </el-tree>
+    </TMagicTree>
 
     <teleport to="body">
       <layer-menu ref="menu"></layer-menu>
     </teleport>
-  </el-scrollbar>
+  </TMagicScrollbar>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, Ref, ref, watchEffect } from 'vue';
-import type { ElTree } from 'element-plus';
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
 
+import { TMagicInput, TMagicScrollbar, TMagicTree } from '@tmagic/design';
 import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
-import type { EditorService } from '../../services/editor';
 import type { Services } from '../../type';
 import { Layout } from '../../type';
 
 import LayerMenu from './LayerMenu.vue';
 
 const throttleTime = 150;
+const services = inject<Services>('services');
+const tree = ref<InstanceType<typeof TMagicTree>>();
+const menu = ref<InstanceType<typeof LayerMenu>>();
+const editorService = services?.editorService;
+const page = computed(() => editorService?.get('page'));
+const values = computed(() => (page.value ? [page.value] : []));
+// 多选选中的节点数组
+const selectedNodes = ref<MNode[]>([]);
+// 多选选中的组件id数组
+const selectedIds = computed(() => selectedNodes.value.map((node: MNode) => node.id));
+// 是否多选
+const isMultiSelectStatus = ref(false);
+// 多选场景 取消选中的那个节点id
+const spliceNodeKey = ref<Id>();
+const filterText = ref('');
+// 默认展开节点
+const defaultExpandedKeys = computed(() => (selectedIds.value.length > 0 ? selectedIds.value : []));
+
+editorService?.on('remove', () => {
+  setTimeout(() => {
+    tree.value?.getNode(editorService.get('node').id)?.updateChildren();
+  }, 0);
+});
 
-const select = async (data: MNode, editorService?: EditorService) => {
+// 触发画布单选
+const select = async (data: MNode) => {
   if (!data.id) {
     throw new Error('没有id');
   }
@@ -83,7 +113,14 @@ const select = async (data: MNode, editorService?: EditorService) => {
   editorService?.get<StageCore>('stage')?.select(data.id);
 };
 
-const highlight = (data: MNode, editorService?: EditorService) => {
+// 触发画布多选
+const multiSelect = async (data: Id[]) => {
+  await editorService?.multiSelect(data);
+  editorService?.get<StageCore>('stage')?.multiSelect(data);
+};
+
+// 触发画布高亮
+const highlight = (data: MNode) => {
   if (!data?.id) {
     throw new Error('没有id');
   }
@@ -91,58 +128,97 @@ const highlight = (data: MNode, editorService?: EditorService) => {
   editorService?.get<StageCore>('stage')?.highlight(data.id);
 };
 
-const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => ({
-  allowDrop: (draggingNode: any, dropNode: any, type: string): boolean => {
-    const { data } = dropNode || {};
-    const { data: ingData } = draggingNode;
+const expandedKeys = new Map<Id, Id>();
 
-    const { type: ingType } = ingData;
+// tree方法：拖拽时判定目标节点能否成为拖动目标位置
+const allowDrop = (draggingNode: any, dropNode: any, type: string): boolean => {
+  const { data } = dropNode || {};
+  const { data: ingData } = draggingNode;
 
-    if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE) return false;
-    if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE) return false;
-    if (!data || !data.type) return false;
-    if (['prev', 'next'].includes(type)) return true;
-    if (data.items || data.type === 'container') return true;
+  const { type: ingType } = ingData;
 
-    return false;
-  },
+  if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE) return false;
+  if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE) return false;
+  if (!data || !data.type) return false;
+  if (['prev', 'next'].includes(type)) return true;
+  if (data.items || data.type === 'container') return true;
 
-  async handleDragEnd(e: any) {
-    if (!tree.value) return;
-    const { data: node } = e;
-    const parent = editorService?.getParentById(node.id, false) as MContainer;
-    const layout = await editorService?.getLayout(parent);
-    node.style.position = layout;
-    if (layout === Layout.RELATIVE) {
-      node.style.top = 0;
-      node.style.left = 0;
-    }
-    const { data } = tree.value;
-    const [page] = data as [MPage];
-    editorService?.update(page);
-  },
-});
+  return false;
+};
 
-const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => {
-  const node = ref<MNode>();
-  const page = computed(() => editorService?.get('page'));
-  const expandedKeys = new Map<Id, Id>();
+// tree事件：拖拽结束时（可能未成功）触发的事件
+const handleDragEnd = async (e: any) => {
+  if (!tree.value) return;
+  const { data: node } = e;
+  const parent = editorService?.getParentById(node.id, false) as MContainer;
+  const layout = await editorService?.getLayout(parent);
+  node.style.position = layout;
+  if (layout === Layout.RELATIVE) {
+    node.style.top = 0;
+    node.style.left = 0;
+  }
+  const data = tree.value.getData();
+  const [page] = data as [MPage];
+  editorService?.update(page);
+};
 
-  const expandNodes = () => {
-    expandedKeys.forEach((key) => {
-      if (!tree.value) return;
-      tree.value.getNode(key)?.expand();
-    });
-  };
+// tree方法： 加载子树数据的方法
+const loadItems = (node: any, resolve: Function) => {
+  if (Array.isArray(node.data)) {
+    return resolve(node.data);
+  }
+  if (Array.isArray(node.data?.items)) {
+    return resolve(node.data?.items);
+  }
+  resolve([]);
+};
 
-  watchEffect(() => {
-    if (!tree.value) return;
-    if (!editorService) return;
-    node.value = editorService.get('node');
+// tree事件：节点被关闭时触发的事件
+const handleCollapse = (data: MNode) => {
+  expandedKeys.delete(data.id);
+};
+
+// tree事件：节点被展开时触发的事件
+const handleExpand = (data: MNode) => {
+  const parent = editorService?.getParentById(data.id);
+  if (!parent?.id) return;
+  expandedKeys.set(parent.id, parent.id);
+};
+
+// tree方法：对树节点进行筛选时执行的方法
+const filterNode = (value: string, data: MNode): boolean => {
+  if (!value) {
+    return true;
+  }
+  let name = '';
+  if (data.name) {
+    name = data.name;
+  } else if (data.items) {
+    name = 'container';
+  }
+  return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
+};
+
+// 过滤关键字
+const filterTextChangeHandler = (val: string) => {
+  tree.value?.filter(val);
+};
 
-    if (!node.value) return;
+// 展开树节点
+const expandNodes = () => {
+  expandedKeys.forEach((key) => {
+    if (!tree.value) return;
+    tree.value.getNode(key)?.expand();
+  });
+};
 
-    tree.value.setCurrentKey(node.value.id, true);
+watch(
+  () => editorService?.get('nodes'),
+  (nodes) => {
+    if (!tree.value) return;
+    if (!editorService) return;
+    if (!nodes) return;
+    selectedNodes.value = nodes as unknown as MNode[];
 
     const parent = editorService.get('parent');
     if (!parent?.id) return;
@@ -152,121 +228,135 @@ const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorSer
 
     setTimeout(() => {
       tree.value &&
-        Object.entries(tree.value.store.nodesMap).forEach(([id, node]) => {
+        Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]: [string, any]) => {
           if (node.expanded && node.data.items) {
             expandedKeys.set(id, id);
           }
         });
       expandNodes();
     });
-  });
+  },
+);
+
+// 设置树节点选中状态
+const setTreeKeyStatus = () => {
+  if (!tree.value) return;
+  if (selectedIds.value.length === 0) {
+    tree.value.setCheckedKeys([]);
+    tree.value.setCurrentKey();
+  } else if (selectedIds.value.length === 1 && !isMultiSelectStatus.value) {
+    // 选中1个
+    tree.value.setCurrentKey(selectedIds.value[0], true);
+    tree.value.setCheckedKeys([]);
+  } else {
+    // 多选框选中多个
+    tree.value.setCheckedKeys(selectedIds.value);
+    tree.value.setCurrentKey();
+  }
+};
 
-  return {
-    values: computed(() => (page.value ? [page.value] : [])),
-
-    loadItems: (node: any, resolve: Function) => {
-      if (Array.isArray(node.data)) {
-        return resolve(node.data);
-      }
-      if (Array.isArray(node.data?.items)) {
-        return resolve(node.data?.items);
-      }
-      resolve([]);
-    },
-
-    highlightNode: computed(() => editorService?.get('highlightNode')),
-    clickNode: node,
-    expandedKeys: computed(() => (node.value ? [node.value.id] : [])),
-
-    handleCollapse: (data: MNode) => {
-      expandedKeys.delete(data.id);
-    },
-
-    handleExpand: (data: MNode) => {
-      const parent = editorService?.getParentById(data.id);
-      if (!parent?.id) return;
-      expandedKeys.set(parent.id, parent.id);
-    },
-  };
+watch(selectedIds, () => {
+  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 removeSelectModeListener = () => {
+  keycon.value?.destroy();
+  // 如果鼠标移出监听范围，且当前只选中了一个，置为单选模式(修复按住ctrl不放但鼠标移出的情况)
+  if (selectedIds.value.length === 1) isMultiSelectStatus.value = false;
 };
 
-const useFilter = (tree: Ref<InstanceType<typeof ElTree> | undefined>) => ({
-  filterText: ref(''),
+// 鼠标是否按下标志，用于高亮状态互斥
+const clicked = ref(false);
+// 高亮的节点
+const highlightNode = computed(() => editorService?.get('highlightNode'));
 
-  filterNode: (value: string, data: MNode): boolean => {
-    if (!value) {
-      return true;
-    }
-    let name = '';
-    if (data.name) {
-      name = data.name;
-    } else if (data.items) {
-      name = 'container';
-    }
-    return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
-  },
+// 鼠标在组件树移动触发高亮
+const highlightHandler = throttle((data: MNode) => {
+  highlight(data);
+}, throttleTime);
 
-  filterTextChangeHandler(val: string) {
-    tree.value?.filter(val);
-  },
-});
+const toggleClickFlag = () => {
+  clicked.value = !clicked.value;
+};
 
-export default defineComponent({
-  name: 'magic-editor-layer-panel',
-
-  components: { LayerMenu },
-
-  setup() {
-    const services = inject<Services>('services');
-    const tree = ref<InstanceType<typeof ElTree>>();
-    const menu = ref<InstanceType<typeof LayerMenu>>();
-    const clicked = ref(false);
-    const editorService = services?.editorService;
-    const highlightHandler = throttle((data: MNode) => {
-      highlight(data, editorService);
-    }, throttleTime);
-
-    const toggleClickFlag = () => {
-      clicked.value = !clicked.value;
-    };
-
-    const statusData = useStatus(tree, editorService);
-    const canHighlight = computed(
-      () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value,
-    );
-
-    editorService?.on('remove', () => {
-      setTimeout(() => {
-        tree.value?.getNode(editorService.get('node').id)?.updateChildren();
-      }, 0);
-    });
+// 是否满足展示高亮
+const canHighlight = (data: MNode) => {
+  if (clicked.value) return false;
+  return (
+    data.id === highlightNode?.value?.id && !selectedIds.value.includes(data.id) && spliceNodeKey.value !== data.id
+  );
+};
 
-    return {
-      tree,
-      menu,
-      ...statusData,
-      ...useDrop(tree, editorService),
-      ...useFilter(tree),
-
-      highlightHandler,
-      toggleClickFlag,
-      canHighlight,
-
-      clickHandler(data: MNode): void {
-        if (services?.uiService.get<boolean>('uiSelectMode')) {
-          document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
-          return;
-        }
-        tree.value?.setCurrentKey(data.id);
-        select(data, editorService);
-      },
-
-      async contextmenu(event: MouseEvent, data: MNode) {
-        event.preventDefault();
-        await select(data, editorService);
-        menu.value?.show(event);
-      },
-    };
-  },
+// 监听选择模式，针对多选情况做一些处理
+watch(isMultiSelectStatus, () => {
+  // 多选模式如果已存在第一个选中的元素是页面(magic-ui-page) 剔除页面选中状态
+  if (isMultiSelectStatus.value && selectedNodes.value.length === 1 && selectedNodes.value[0].type === NodeType.PAGE) {
+    selectedNodes.value = [];
+  }
 });
+
+// 选择节点多选框
+const multiClickHandler = (data: MNode): void => {
+  if (!data?.id) {
+    throw new Error('没有id');
+  }
+
+  // 页面(magic-ui-page)不可选中
+  if (data.type === NodeType.PAGE) {
+    tree.value?.setCheckedKeys([]);
+    return;
+  }
+
+  const index = selectedNodes.value.findIndex((node) => node.id === data.id);
+  if (index !== -1) {
+    // 已经包含就移除掉
+    selectedNodes.value.splice(index, 1);
+    spliceNodeKey.value = data.id;
+  } else {
+    selectedNodes.value = [...selectedNodes.value, data];
+  }
+  tree.value?.setCheckedKeys(selectedIds.value);
+  multiSelect(selectedIds.value);
+};
+
+// 点击节点
+const clickHandler = (data: MNode): void => {
+  if (!isMultiSelectStatus.value) {
+    if (services?.uiService.get<boolean>('uiSelectMode')) {
+      document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
+      return;
+    }
+    tree.value?.setCurrentKey(data.id);
+    select(data);
+  } else {
+    multiClickHandler(data);
+  }
+};
+
+// 右键菜单
+const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
+  event.preventDefault();
+  await select(data);
+  menu.value?.show(event);
+};
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-tabs
+  <TMagicTabs
     v-if="data.type === 'tabs' && data.items.length"
     class="m-editor-sidebar"
     v-model="activeTabName"
@@ -35,12 +35,14 @@
         <slot name="code-block-edit-panel-header" :id="id"></slot>
       </template>
     </tab-pane>
-  </el-tabs>
+  </TMagicTabs>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
+import { TMagicTabs } from '@tmagic/design';
+
 import { SideBarData } from '../../type';
 
 import TabPane from './TabPane.vue';

package/src/layouts/sidebar/TabPane.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-tab-pane v-if="config" :name="config.text">
+  <TMagicTabPane v-if="config" :name="config.text">
     <template #label>
       <div :key="config.text">
         <m-icon v-if="config.icon" :icon="config.icon"></m-icon>
@@ -61,13 +61,15 @@
         />
       </template>
     </component>
-  </el-tab-pane>
+  </TMagicTabPane>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
+import { TMagicTabPane } from '@tmagic/design';
+
 import MIcon from '../../components/Icon.vue';
 import { SideComponent, SideItem } from '../../type';
 

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog
+  <TMagicDialog
     v-model="isShowCodeBlockEditor"
     class="code-editor-dialog"
     :title="currentTitle"
@@ -10,16 +10,15 @@
     <layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 左侧列表 -->
       <template #left v-if="mode === CodeEditorMode.LIST">
-        <el-tree
+        <TMagicTree
           v-if="!isEmpty(state.codeList)"
-          ref="tree"
+          class="side-tree"
           node-key="id"
           empty-text="暂无代码块"
           :data="state.codeList"
           :highlight-current="true"
-          @node-click="selectHandler"
           :current-node-key="state.codeList[0].id"
-          class="side-tree"
+          @node-click="selectHandler"
         >
           <template #default="{ data }">
             <div :id="data.id" class="list-container">
@@ -28,7 +27,7 @@
               </div>
             </div>
           </template>
-        </el-tree>
+        </TMagicTree>
       </template>
       <!-- 右侧区域 -->
       <template #center>
@@ -41,11 +40,16 @@
           ]"
         >
           <slot name="code-block-edit-panel-header" :id="id"></slot>
-          <el-card shadow="never">
+          <TMagicCard shadow="never">
             <template #header>
               <div class="code-name-wrapper">
                 <div class="code-name-label">代码块名称</div>
-                <el-input v-if="codeConfig" class="code-name-input" v-model="codeConfig.name" :disabled="!editable" />
+                <TMagicInput
+                  v-if="codeConfig"
+                  class="code-name-input"
+                  v-model="codeConfig.name"
+                  :disabled="!editable"
+                />
               </div>
             </template>
             <div class="m-editor-wrapper">
@@ -63,26 +67,27 @@
                 }"
               ></magic-code-editor>
               <div class="m-editor-content-bottom" v-if="editable">
-                <el-button type="primary" class="button" @click="saveCode">保存</el-button>
-                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+                <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>
-                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
               </div>
             </div>
-          </el-card>
+          </TMagicCard>
         </div>
       </template>
     </layout>
-  </el-dialog>
+  </TMagicDialog>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
-import { ElMessage } from 'element-plus';
 import { forIn, isEmpty } from 'lodash-es';
 import type * as monaco from 'monaco-editor';
 
+import { TMagicButton, TMagicCard, TMagicDialog, TMagicInput, tMagicMessage, TMagicTree } from '@tmagic/design';
+
 import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
 import { CodeEditorMode } from '../../../type';
 import MagicCodeEditor from '../../CodeEditor.vue';
@@ -137,7 +142,7 @@ const saveCode = async (): Promise<boolean> => {
     /* eslint no-eval: "off" */
     codeConfig.value.content = eval(codeContent);
   } catch (e: any) {
-    ElMessage.error(e.stack);
+    tMagicMessage.error(e.stack);
     return false;
   }
   // 存入dsl
@@ -145,7 +150,7 @@ const saveCode = async (): Promise<boolean> => {
     name: codeConfig.value.name,
     content: codeConfig.value.content,
   });
-  ElMessage.success('代码保存成功');
+  tMagicMessage.success('代码保存成功');
   return true;
 };