@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

package/src/layouts/sidebar/LayerNode.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    {{ `${data.name} (${data.id})` }}
+  </div>
+  <div class="layer-node-tool">
+    <template v-if="data.type !== 'page'">
+      <el-icon v-if="data.visible === false" @click.stop="setNodeVisible(true)" title="点击显示">
+        <Hide />
+      </el-icon>
+      <el-icon v-else @click.stop="setNodeVisible(false)" class="node-lock" title="点击隐藏">
+        <View />
+      </el-icon>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+import { Hide, View } from '@element-plus/icons-vue';
+
+import { MNode } from '@tmagic/schema';
+
+import { Services } from '@editor/type';
+
+const props = defineProps<{
+  data: MNode;
+}>();
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const setNodeVisible = (visible: boolean) => {
+  if (!editorService) return;
+
+  editorService.update({
+    id: props.data.id,
+    visible,
+  });
+};
+</script>

package/src/layouts/sidebar/LayerPanel.vue

@@ -10,6 +10,7 @@
       ref="tree"
       node-key="id"
       empty-text="页面空荡荡的"
+      tabindex="-1"
       draggable
       :default-expanded-keys="expandedKeys"
       :default-checked-keys="checkedKeys"
@@ -34,9 +35,7 @@
       <template #default="{ node, data }">
         <div class="cus-tree-node" :id="data.id" @mouseenter="highlightHandler(data)">
           <slot name="layer-node-content" :node="node" :data="data">
-            <span>
-              {{ `${data.name} (${data.id})` }}
-            </span>
+            <LayerNode :data="data"></LayerNode>
           </slot>
         </div>
       </template>
@@ -48,9 +47,8 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorLayerPanel">
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
-import KeyController from 'keycon';
+<script lang="ts" setup>
+import { computed, inject, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
 import { difference, throttle, union } from 'lodash-es';
 
 import { TMagicScrollbar, TMagicTree } from '@tmagic/design';
@@ -63,6 +61,11 @@ import type { MenuButton, MenuComponent, Services } from '@editor/type';
 import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
+import LayerNode from './LayerNode.vue';
+
+defineOptions({
+  name: 'MEditorLayerPanel',
+});
 
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
@@ -71,6 +74,7 @@ defineProps<{
 const throttleTime = 150;
 const services = inject<Services>('services');
 const editorService = services?.editorService;
+const keybindingService = services?.keybindingService;
 
 const tree = ref<InstanceType<typeof TMagicTree>>();
 const menu = ref<InstanceType<typeof LayerMenu>>();
@@ -152,7 +156,7 @@ 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);
+  const layout = await editorService?.getLayout(parent, node);
   node.style.position = layout;
   if (layout === Layout.RELATIVE) {
     node.style.top = 0;
@@ -242,34 +246,69 @@ const windowBlurHandler = () => {
   isCtrlKeyDown.value = false;
 };
 
-let keycon: KeyController;
+keybindingService?.registeCommand('layer-panel-not-ctrl-keydown', (e) => {
+  if (e.key !== keybindingService.ctrlKey) {
+    isCtrlKeyDown.value = false;
+  }
+});
+
+keybindingService?.registeCommand('layer-panel-ctrl-keydown', () => {
+  isCtrlKeyDown.value = true;
+});
+
+keybindingService?.registeCommand('layer-panel-ctrl-keyup', () => {
+  isCtrlKeyDown.value = false;
+});
+
+keybindingService?.registeCommand('layer-panel-global-keydwon', () => {
+  if (!tree.value?.$el.contains(document.activeElement)) {
+    isCtrlKeyDown.value = false;
+  }
+});
+
+keybindingService?.registe([
+  {
+    command: 'layer-panel-not-ctrl-keydown',
+    when: [['layer-panel', 'keydown']],
+  },
+  {
+    command: 'layer-panel-ctrl-keydown',
+    keybinding: 'ctrl',
+    when: [['layer-panel', 'keydown']],
+  },
+  {
+    command: 'layer-panel-ctrl-keyup',
+    keybinding: 'ctrl',
+    when: [['layer-panel', 'keyup']],
+  },
+  {
+    command: 'layer-panel-global-keydwon',
+    keybinding: 'ctrl',
+    when: [['global', 'keydown']],
+  },
+]);
+
+watch(tree, () => {
+  if (tree.value?.$el) {
+    keybindingService?.registeEl('layer-panel', tree.value.$el);
+
+    tree.value.$el.addEventListener('blur', windowBlurHandler);
+  } else {
+    keybindingService?.unregisteEl('layer-panel');
+  }
+});
 
 onMounted(() => {
   editorService?.on('remove', editorServiceRemoveHandler);
 
-  keycon = new KeyController();
-  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-  const ctrl = isMac ? 'meta' : 'ctrl';
-
-  keycon
-    .keydown((e) => {
-      if (e.key !== ctrl) {
-        isCtrlKeyDown.value = false;
-      }
-    })
-    .keydown(ctrl, () => {
-      isCtrlKeyDown.value = true;
-    })
-    .keyup(ctrl, () => {
-      isCtrlKeyDown.value = false;
-    });
-
   globalThis.addEventListener('blur', windowBlurHandler);
 });
 
-onUnmounted(() => {
-  keycon.destroy();
+onBeforeUnmount(() => {
+  tree.value?.$el.removeEventListener('blur', windowBlurHandler);
+});
 
+onUnmounted(() => {
   editorService?.off('remove', editorServiceRemoveHandler);
   globalThis.removeEventListener('blur', windowBlurHandler);
 });
@@ -310,7 +349,11 @@ const clickHandler = (data: MNode): void => {
 // 右键菜单
 const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
   event.preventDefault();
-  await select(data);
+
+  if (nodes.value.length < 2) {
+    await select(data);
+  }
+
   menu.value?.show(event);
 };
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -3,13 +3,13 @@
     v-if="data.type === 'tabs' && data.items.length"
     v-model="activeTabName"
     class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
-    :is="tabsComponent.component"
+    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
+    :is="tabsComponent?.component || 'el-tabs'"
   >
     <component
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent.props({ name: config.text })"
-      :is="tabPaneComponent.component"
+      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="config.$key || index"
     >
       <template #label>
@@ -58,14 +58,6 @@
           <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
         </template>
 
-        <template
-          #code-block-edit-panel-header="{ id }"
-          v-if="config.$key === 'code-block' || config.slots?.codeBlockEditPanelHeader"
-        >
-          <slot v-if="config.$key === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
-          <component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
-        </template>
-
         <template
           #layer-node-content="{ data: nodeData, node }"
           v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
@@ -83,7 +75,7 @@
   </component>
 </template>
 
-<script lang="ts" setup name="MEditorSidebar">
+<script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
@@ -93,11 +85,15 @@ import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
 import { SideBarData } from '@editor/type';
 
-import CodeBlockList from './code-block/CodeBlockList.vue';
+import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
 import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
+defineOptions({
+  name: 'MEditorSidebar',
+});
+
 const props = withDefaults(
   defineProps<{
     data: SideBarData;
@@ -108,8 +104,8 @@ const props = withDefaults(
   },
 );
 
-const tabPaneComponent = getConfig('components').tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabPaneComponent = getConfig('components')?.tabPane;
+const tabsComponent = getConfig('components')?.tabs;
 
 const activeTabName = ref(props.data?.status);
 
@@ -139,7 +135,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       type: 'component',
       icon: EditPen,
       text: '代码编辑',
-      component: CodeBlockList,
+      component: CodeBlockListPanel,
       slots: {},
     },
     'data-source': {

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

@@ -1,92 +1,75 @@
 <template>
-  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
-    <slot name="code-block-panel-header">
-      <div class="search-wrapper">
-        <SearchInput @search="filterTextChangeHandler"></SearchInput>
-        <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
-          >新增</TMagicButton
-        >
-      </div>
-    </slot>
-
-    <!-- 代码块列表 -->
-    <TMagicTree
-      ref="tree"
-      class="magic-editor-layer-tree"
-      node-key="id"
-      empty-text="暂无代码块"
-      :default-expanded-keys="expandedKeys"
-      :expand-on-click-node="false"
-      :data="codeList"
-      :props="treeProps"
-      :highlight-current="true"
-      :filter-node-method="filterNode"
-      @node-click="clickHandler"
-    >
-      <template #default="{ data }">
-        <div :id="data.id" class="list-container">
-          <div class="list-item">
-            <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
-            <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
-            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
-              >{{ data.name }} ({{ data.id }})</span
-            >
-            <!-- 右侧工具栏 -->
-            <div class="right-tool" v-if="data.type === 'code'">
-              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-                <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
-              </TMagicTooltip>
-              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
-                <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
-              </TMagicTooltip>
-              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
-            </div>
+  <TMagicTree
+    ref="tree"
+    class="magic-editor-layer-tree"
+    node-key="id"
+    empty-text="暂无代码块"
+    :default-expanded-keys="expandedKeys"
+    :expand-on-click-node="false"
+    :data="codeList"
+    :props="{
+      children: 'children',
+      label: 'name',
+      value: 'id',
+    }"
+    :highlight-current="true"
+    :filter-node-method="filterNode"
+    @node-click="clickHandler"
+  >
+    <template #default="{ data }">
+      <div :id="data.id" class="list-container">
+        <div class="list-item">
+          <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
+          <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
+          <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+            >{{ data.name }} ({{ data.id }})</span
+          >
+          <!-- 右侧工具栏 -->
+          <div class="right-tool" v-if="data.type === 'code'">
+            <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+              <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(data.id)"></Icon>
+            </TMagicTooltip>
+            <TMagicTooltip v-if="editable" effect="dark" content="删除" placement="bottom">
+              <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
+            </TMagicTooltip>
+            <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
           </div>
         </div>
-      </template>
-    </TMagicTree>
-
-    <!-- 代码块编辑区 -->
-    <CodeBlockEditor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
-      <template #code-block-edit-panel-header="{ id }">
-        <slot name="code-block-edit-panel-header" :id="id"></slot>
-      </template>
-    </CodeBlockEditor>
-  </TMagicScrollbar>
+      </div>
+    </template>
+  </TMagicTree>
 </template>
 
-<script setup lang="ts" name="MEditorCodeBlockList">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { ColumnConfig } from '@tmagic/form';
-import { CodeBlockContent, Id } from '@tmagic/schema';
+import { tMagicMessage, tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import type { Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
-import SearchInput from '@editor/components/SearchInput.vue';
 import AppManageIcon from '@editor/icons/AppManageIcon.vue';
 import CodeIcon from '@editor/icons/CodeIcon.vue';
-import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
+import { CodeDeleteErrorType, CodeDslItem, DepTargetType, Services } from '@editor/type';
 
-import CodeBlockEditor from './CodeBlockEditor.vue';
+defineOptions({
+  name: 'MEditorCodeBlockList',
+});
 
 const props = defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
-  paramsColConfig?: ColumnConfig;
 }>();
 
-const treeProps = {
-  children: 'children',
-  label: 'name',
-  value: 'id',
-};
+const emit = defineEmits<{
+  edit: [id: string];
+  remove: [id: string];
+}>();
 
 const { codeBlockService, depService, editorService } = inject<Services>('services') || {};
 
 // 代码块列表
 const codeList = computed(() =>
-  Object.values(depService?.targets['code-block'] || {}).map((target) => {
+  Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
     // 组件节点
     const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
       name: dep.name,
@@ -103,58 +86,10 @@ const codeList = computed(() =>
     };
   }),
 );
-
 // 默认展开组件层级的节点
 const expandedKeys = computed(() => codeList.value.map((item) => item.id));
-
 const editable = computed(() => codeBlockService?.getEditStatus());
 
-// 是否展示代码编辑区
-const isShowCodeBlockEditor = computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
-
-// 新增代码块
-const createCodeBlock = async () => {
-  if (!codeBlockService) {
-    tMagicMessage.error('新增代码块失败');
-    return;
-  }
-
-  const codeConfig: CodeBlockContent = {
-    name: '代码块',
-    content: `({app, params}) => {\n  // place your code here\n}`,
-    params: [],
-  };
-
-  const id = await codeBlockService.getUniqueId();
-
-  await codeBlockService.setCodeDslById(id, codeConfig);
-  codeBlockService.setCodeEditorContent(true, id);
-};
-
-// 编辑代码块
-const editCode = async (key: Id) => {
-  codeBlockService?.setCodeEditorContent(true, key);
-};
-
-// 删除代码块
-const deleteCode = (key: Id) => {
-  const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
-  const existBinds = Boolean(currentCode?.children.length);
-  const undeleteableList = codeBlockService?.getUndeletableList() || [];
-  if (!existBinds && !undeleteableList.includes(key)) {
-    // 无绑定关系，且不在不可删除列表中
-    codeBlockService?.deleteCodeDslByIds([key]);
-  } else {
-    if (typeof props.customError === 'function') {
-      props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
-    } else {
-      tMagicMessage.error('代码块删除失败');
-    }
-  }
-};
-
-const tree = ref<InstanceType<typeof TMagicTree>>();
-
 const filterNode = (value: string, data: CodeDslItem): boolean => {
   if (!value) {
     return true;
@@ -162,10 +97,6 @@ const filterNode = (value: string, data: CodeDslItem): boolean => {
   return `${data.name}${data.id}`.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
 };
 
-const filterTextChangeHandler = (val: string) => {
-  tree.value?.filter(val);
-};
-
 // 选中组件
 const selectComp = (compId: Id) => {
   const stage = editorService?.get('stage');
@@ -180,4 +111,39 @@ const clickHandler = (data: any, node: any) => {
     selectComp(node.parent.data.id);
   }
 };
+
+// 编辑代码块
+const editCode = (id: string) => {
+  emit('edit', id);
+};
+
+const deleteCode = async (id: string) => {
+  const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
+  const existBinds = Boolean(currentCode?.children.length);
+  const undeleteableList = codeBlockService?.getUndeletableList() || [];
+  if (!existBinds && !undeleteableList.includes(id)) {
+    await tMagicMessageBox.confirm('确定删除该代码块吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    // 无绑定关系，且不在不可删除列表中
+    emit('remove', id);
+  } else {
+    if (typeof props.customError === 'function') {
+      props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+    } else {
+      tMagicMessage.error('代码块删除失败');
+    }
+  }
+};
+
+const tree = ref<InstanceType<typeof TMagicTree>>();
+
+defineExpose({
+  filter(val: string) {
+    tree.value?.filter(val);
+  },
+});
 </script>

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

@@ -0,0 +1,63 @@
+<template>
+  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
+    <slot name="code-block-panel-header">
+      <div class="search-wrapper">
+        <SearchInput @search="filterTextChangeHandler"></SearchInput>
+        <TMagicButton v-if="editable" class="create-code-button" type="primary" size="small" @click="createCodeBlock"
+          >新增</TMagicButton
+        >
+      </div>
+    </slot>
+
+    <!-- 代码块列表 -->
+    <CodeBlockList ref="codeBlockList" :custom-error="customError" @edit="editCode" @remove="deleteCode">
+      <template #code-block-panel-tool="{ id, data }">
+        <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
+      </template>
+    </CodeBlockList>
+
+    <!-- 代码块编辑区 -->
+    <CodeBlockEditor
+      v-if="codeConfig"
+      ref="codeBlockEditor"
+      :disabled="!editable"
+      :content="codeConfig"
+      @submit="submitCodeBlockHandler"
+    ></CodeBlockEditor>
+  </TMagicScrollbar>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import type { Id } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
+import type { CodeDeleteErrorType, Services } from '@editor/type';
+
+import CodeBlockList from './CodeBlockList.vue';
+
+defineOptions({
+  name: 'MEditorCodeBlockListPanel',
+});
+
+defineProps<{
+  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+}>();
+
+const { codeBlockService } = inject<Services>('services') || {};
+
+const editable = computed(() => codeBlockService?.getEditStatus());
+
+const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
+  useCodeBlockEdit(codeBlockService);
+
+const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
+
+const filterTextChangeHandler = (val: string) => {
+  codeBlockList.value?.filter(val);
+};
+</script>