@tmagic/editor 1.4.14 → 1.4.15

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.14",
+  "version": "1.4.15",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -55,8 +55,8 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/dep": "1.4.14",
-    "@tmagic/table": "1.4.14"
+    "@tmagic/dep": "1.4.15",
+    "@tmagic/table": "1.4.15"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -78,12 +78,12 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": "^3.4.27",
-    "@tmagic/core": "1.4.14",
-    "@tmagic/design": "1.4.14",
-    "@tmagic/schema": "1.4.14",
-    "@tmagic/form": "1.4.14",
-    "@tmagic/stage": "1.4.14",
-    "@tmagic/utils": "1.4.14"
+    "@tmagic/core": "1.4.15",
+    "@tmagic/form": "1.4.15",
+    "@tmagic/schema": "1.4.15",
+    "@tmagic/stage": "1.4.15",
+    "@tmagic/design": "1.4.15",
+    "@tmagic/utils": "1.4.15"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -33,6 +33,10 @@
             <slot name="layer-node-tool" :data="data"></slot>
           </template>
 
+          <template #component-list="{ componentGroupList }">
+            <slot name="component-list" :component-group-list="componentGroupList"></slot>
+          </template>
+
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>

package/src/components/ContentMenu.vue

@@ -38,6 +38,8 @@
 <script lang="ts" setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 
+import { useZIndex } from '@tmagic/design';
+
 import { MenuButton, MenuComponent } from '@editor/type';
 
 import ToolButton from './ToolButton.vue';
@@ -71,6 +73,8 @@ const buttons = ref<InstanceType<typeof ToolButton>[]>();
 const subMenu = ref<any>();
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
+const zIndex = useZIndex();
+const curZIndex = ref<number>(0);
 
 const menuPosition = ref({
   left: 0,
@@ -80,6 +84,7 @@ const menuPosition = ref({
 const menuStyle = computed(() => ({
   top: `${menuPosition.value.top}px`,
   left: `${menuPosition.value.left}px`,
+  zIndex: curZIndex.value,
 }));
 
 const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
@@ -127,13 +132,15 @@ const setPosition = (e: { clientY: number; clientX: number }) => {
 };
 
 const show = (e?: { clientY: number; clientX: number }) => {
-  // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+  // 加setTimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
   setTimeout(() => {
     visible.value = true;
 
     nextTick(() => {
       e && setPosition(e);
 
+      curZIndex.value = zIndex.nextZIndex();
+
       emit('show');
     });
   }, 300);

package/src/components/TreeNode.vue

@@ -4,6 +4,8 @@
     class="m-editor-tree-node"
     :draggable="draggable"
     :data-node-id="data.id"
+    :data-parent-id="parent?.id"
+    :data-parents-id="parentsId"
     :data-is-container="Array.isArray(data.items)"
     @dragstart="handleDragStart"
     @dragleave="handleDragLeave"
@@ -40,6 +42,8 @@
         v-for="item in data.items"
         :key="item.id"
         :data="item"
+        :parent="data"
+        :parentsId="[...parentsId, data.id]"
         :node-status-map="nodeStatusMap"
         :indent="indent + 11"
       >
@@ -91,11 +95,14 @@ const treeEmit = inject<typeof emit>('treeEmit');
 const props = withDefaults(
   defineProps<{
     data: TreeNodeData;
+    parent?: TreeNodeData;
+    parentsId?: Id[];
     nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number;
   }>(),
   {
     indent: 0,
+    parentsId: () => [],
   },
 );
 

package/src/fields/CodeSelect.vue

@@ -72,7 +72,7 @@ const codeConfig = computed(() => ({
         {
           type: 'select',
           name: 'codeType',
-          span: 8,
+          span: 6,
           options: [
             { value: HookCodeType.CODE, text: '代码块' },
             { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
@@ -91,7 +91,7 @@ const codeConfig = computed(() => ({
         {
           type: 'code-select-col',
           name: 'codeId',
-          span: 16,
+          span: 18,
           labelWidth: 0,
           display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !services?.codeBlockService.getEditStatus(),
@@ -99,7 +99,7 @@ const codeConfig = computed(() => ({
         {
           type: 'data-source-method-select',
           name: 'codeId',
-          span: 16,
+          span: 18,
           labelWidth: 0,
           display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !services?.dataSourceService.get('editable'),

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -57,13 +57,11 @@
       @change="onChangeHandler"
     ></TMagicCascader>
 
-    <TMagicButton
-      v-if="selectDataSourceId && hasDataSourceSidePanel"
-      class="m-fields-select-action-button"
-      :size="size"
-      @click="editHandler(selectDataSourceId)"
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
+    <TMagicTooltip v-if="selectDataSourceId && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
+      <TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler(selectDataSourceId)"
+        ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+      ></TMagicButton>
+    </TMagicTooltip>
   </div>
 </template>
 
@@ -71,7 +69,13 @@
 import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { getConfig as getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect } from '@tmagic/design';
+import {
+  getConfig as getDesignConfig,
+  TMagicButton,
+  TMagicCascader,
+  TMagicSelect,
+  TMagicTooltip,
+} from '@tmagic/design';
 import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
 import { DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -26,14 +26,15 @@
       @change="onChangeHandler"
     ></component>
 
-    <TMagicButton
-      v-if="config.fieldConfig"
-      style="margin-left: 5px"
-      :type="showDataSourceFieldSelect ? 'primary' : 'default'"
-      :size="size"
-      @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
-      ><MIcon :icon="Coin"></MIcon
-    ></TMagicButton>
+    <TMagicTooltip v-if="config.fieldConfig" :disabled="showDataSourceFieldSelect" content="选择数据源">
+      <TMagicButton
+        style="margin-left: 5px"
+        :type="showDataSourceFieldSelect ? 'primary' : 'default'"
+        :size="size"
+        @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+        ><MIcon :icon="Coin"></MIcon
+      ></TMagicButton>
+    </TMagicTooltip>
   </div>
 </template>
 
@@ -41,7 +42,7 @@
 import { computed, inject, ref, resolveComponent, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
-import { TMagicButton, tMagicMessage } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
 import { DataSchema } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';

package/src/fields/DataSourceMethodSelect.vue

@@ -9,14 +9,14 @@
         @change="onChangeHandler"
       ></MContainer>
 
-      <TMagicButton
+      <TMagicTooltip
         v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
-        class="m-fields-select-action-button"
-        :size="size"
-        @click="editCodeHandler"
+        :content="notEditable ? '查看' : '编辑'"
       >
-        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
-      </TMagicButton>
+        <TMagicButton class="m-fields-select-action-button" :size="size" @click="editCodeHandler">
+          <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+        </TMagicButton>
+      </TMagicTooltip>
     </div>
 
     <CodeParams
@@ -35,7 +35,7 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
@@ -91,7 +91,7 @@ const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']
   }));
 };
 
-const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model.dataSourceMethod));
+const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name || 'dataSourceMethod']));
 
 const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) => {
   // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params

package/src/fields/DataSourceSelect.vue

@@ -11,13 +11,11 @@
       @change="changeHandler"
     ></MSelect>
 
-    <TMagicButton
-      v-if="model[name] && hasDataSourceSidePanel"
-      class="m-fields-select-action-button"
-      :size="size"
-      @click="editHandler"
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
+    <TMagicTooltip v-if="model[name] && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
+      <TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler"
+        ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+      ></TMagicButton>
+    </TMagicTooltip>
   </div>
 </template>
 
@@ -25,7 +23,7 @@
 import { computed, inject } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';

package/src/hooks/use-float-box.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef, inject, ref, watch } from 'vue';
+import { computed, ComputedRef, inject, onBeforeUnmount, ref, watch } from 'vue';
 
 import type { Services } from '@editor/type';
 
@@ -30,22 +30,62 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
   const showingBoxKeys = computed(() =>
     Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status),
   );
-  const isDragging = ref(false);
 
-  const dragstartHandler = () => (isDragging.value = true);
+  const dragState = {
+    startOffset: {
+      x: 0,
+      y: 0,
+    },
+    isDragging: false,
+  };
+
+  const dragstartHandler = (e: DragEvent) => {
+    dragState.isDragging = true;
+
+    dragState.startOffset.x = e.clientX;
+    dragState.startOffset.y = e.clientY;
+  };
+
+  const effectiveDistance = 20;
+
   const dragendHandler = (key: string, e: DragEvent) => {
-    const navMenuRect = services?.uiService?.get('navMenuRect');
-    floatBoxStates.value[key] = {
-      left: e.clientX,
-      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
-      status: true,
-    };
-    isDragging.value = false;
+    if (!dragState.isDragging) return;
+
+    const { startOffset } = dragState;
+
+    if (
+      Math.abs(startOffset.x - e.clientX) > effectiveDistance ||
+      Math.abs(startOffset.y - e.clientY) > effectiveDistance
+    ) {
+      const navMenuRect = services?.uiService?.get('navMenuRect');
+      floatBoxStates.value[key] = {
+        left: e.clientX,
+        top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+        status: true,
+      };
+    }
+
+    dragState.isDragging = false;
   };
 
-  document.body.addEventListener('dragover', (e: DragEvent) => {
-    if (!isDragging.value) return;
+  const dragoverHandler = (e: DragEvent) => {
+    if (!dragState.isDragging) return;
     e.preventDefault();
+  };
+
+  const blurHandler = () => {
+    dragState.startOffset.x = 0;
+    dragState.startOffset.y = 0;
+
+    dragState.isDragging = false;
+  };
+
+  globalThis.document.body.addEventListener('dragover', dragoverHandler);
+  globalThis.addEventListener('blur', blurHandler);
+
+  onBeforeUnmount(() => {
+    globalThis.document.body.removeEventListener('dragover', dragoverHandler);
+    globalThis.removeEventListener('blur', blurHandler);
   });
 
   watch(

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -2,31 +2,34 @@
   <TMagicScrollbar>
     <slot name="component-list-panel-header"></slot>
 
-    <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
-      <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <template v-for="(group, index) in list">
-        <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
-          <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
-          <div
-            v-for="item in group.items"
-            class="component-item"
-            draggable="true"
-            :key="item.type"
-            @click="appendComponent(item)"
-            @dragstart="dragstartHandler(item, $event)"
-            @dragend="dragendHandler"
-            @drag="dragHandler"
-          >
-            <slot name="component-list-item" :component="item">
-              <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
-                <MIcon :icon="item.icon"></MIcon>
-              </TMagicTooltip>
-              <span :title="item.text">{{ item.text }}</span>
-            </slot>
-          </div>
-        </TMagicCollapseItem>
-      </template>
-    </TMagicCollapse>
+    <SearchInput @search="filterTextChangeHandler"></SearchInput>
+
+    <slot name="component-list" :component-group-list="list">
+      <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+        <template v-for="(group, index) in list">
+          <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
+            <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
+            <div
+              v-for="item in group.items"
+              class="component-item"
+              draggable="true"
+              :key="item.type"
+              @click="appendComponent(item)"
+              @dragstart="dragstartHandler(item, $event)"
+              @dragend="dragendHandler"
+              @drag="dragHandler"
+            >
+              <slot name="component-list-item" :component="item">
+                <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
+                  <MIcon :icon="item.icon"></MIcon>
+                </TMagicTooltip>
+                <span :title="item.text">{{ item.text }}</span>
+              </slot>
+            </div>
+          </TMagicCollapseItem>
+        </template>
+      </TMagicCollapse>
+    </slot>
   </TMagicScrollbar>
 </template>
 
@@ -65,8 +68,8 @@ const services = inject<Services>('services');
 const stageOptions = inject<StageOptions>('stageOptions');
 
 const stage = computed(() => services?.editorService.get('stage'));
-const list = computed(() =>
-  services?.componentListService.getList().map((group: ComponentGroup) => ({
+const list = computed<ComponentGroup[]>(() =>
+  (services?.componentListService.getList() || []).map((group: ComponentGroup) => ({
     ...group,
     items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
   })),

package/src/layouts/sidebar/Sidebar.vue

@@ -5,11 +5,11 @@
         class="m-editor-sidebar-header-item"
         v-for="(config, index) in sideBarItems"
         v-show="!floatBoxStates[config.$key]?.status"
-        draggable="true"
+        :draggable="config.draggable ?? true"
         :key="config.$key ?? index"
         :class="{ 'is-active': activeTabName === config.text }"
         :style="config.tabStyle || {}"
-        @click="activeTabName = config.text || config.$key || `${index}`"
+        @click="headerItemClickHandler(config, index)"
         @dragstart="dragstartHandler"
         @dragend="dragendHandler(config.$key, $event)"
       >
@@ -24,11 +24,23 @@
       v-show="[config.text, config.$key, `${index}`].includes(activeTabName)"
     >
       <component
-        v-if="config && !floatBoxStates[config.$key]?.status"
+        v-if="config?.component && !floatBoxStates[config.$key]?.status"
         :is="config.component"
         v-bind="config.props || {}"
         v-on="config?.listeners || {}"
       >
+        <template
+          #component-list="{ componentGroupList }"
+          v-if="config.$key === 'component-list' || config.slots?.componentList"
+        >
+          <slot
+            v-if="config.$key === 'component-list'"
+            name="component-list"
+            :component-group-list="componentGroupList"
+          ></slot>
+          <component v-else-if="config.slots?.componentList" :is="config.slots.componentList" />
+        </template>
+
         <template
           #component-list-panel-header
           v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"
@@ -272,6 +284,15 @@ watch(
   },
 );
 
+const headerItemClickHandler = async (config: SideComponent, index: number) => {
+  if (typeof config.beforeClick === 'function') {
+    if ((await config.beforeClick(config)) === false) {
+      return;
+    }
+  }
+  activeTabName.value = config.text || config.$key || `${index}`;
+};
+
 defineExpose({
   activeTabName,
 });

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -53,7 +53,7 @@ import type { MNode } from '@tmagic/schema';
 import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
-import { LayerPanelSlots, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
+import type { LayerPanelSlots, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 import LayerNodeTool from './LayerNodeTool.vue';

package/src/layouts/sidebar/layer/use-click.ts

@@ -2,6 +2,7 @@ import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/schema';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services, TreeNodeData, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
@@ -31,6 +32,10 @@ export const useClick = (
   };
 
   const multiSelect = async (data: MNode) => {
+    if (isPage(data) || isPageFragment(data)) {
+      return;
+    }
+
     const nodes = services?.editorService.get('nodes') || [];
 
     const newNodes: Id[] = [];
@@ -41,6 +46,10 @@ export const useClick = (
         return;
       }
 
+      if (isPage(node) || isPageFragment(node)) {
+        return;
+      }
+
       newNodes.push(node.id);
     });
 

package/src/layouts/sidebar/layer/use-drag.ts

@@ -10,6 +10,7 @@ const dragState: {
   dragOverNodeId: Id;
   dropType: NodeDropType | '';
   container: HTMLElement | null;
+  nodeId?: Id;
 } = {
   dragOverNodeId: '',
   dropType: '',
@@ -50,6 +51,7 @@ export const useDrag = (services: Services | undefined) => {
     if (!targetEl || targetEl !== event.currentTarget) return;
 
     event.dataTransfer.effectAllowed = 'move';
+    dragState.nodeId = targetEl.dataset.nodeId;
 
     try {
       event.dataTransfer.setData(
@@ -70,30 +72,52 @@ export const useDrag = (services: Services | undefined) => {
     const labelEl = targetEl.children[0];
     if (!labelEl) return;
 
+    removeClassName(labelEl, 'drag-before', 'drag-after', 'drag-inner');
+
     const { top: targetTop, height: targetHeight } = labelEl.getBoundingClientRect();
 
     const distance = event.clientY - targetTop;
     const isContainer = targetEl.dataset.isContainer === 'true';
 
+    const targetNodeId = targetEl.dataset.nodeId;
+    const { nodeId } = dragState;
+    const parentsId = targetEl.dataset.parentsId?.split(',');
+
+    if (!targetNodeId) {
+      return;
+    }
+
+    // 如果是悬浮在拖动的节点上方，则不响应
+    if (parentsId) {
+      let targetIdIndex = -1;
+      for (let i = 0, l = parentsId.length; i < l; i++) {
+        const id = parentsId[i];
+        if (nodeId === id) {
+          targetIdIndex = i;
+        }
+
+        if (parentsId.includes(`${nodeId}`) && i >= targetIdIndex) {
+          return;
+        }
+      }
+    }
+
     if (distance < targetHeight / 3) {
       dragState.dropType = 'before';
       addClassName(labelEl, globalThis.document, 'drag-before');
-      removeClassName(labelEl, 'drag-after', 'drag-inner');
     } else if (distance > (targetHeight * 2) / 3) {
       dragState.dropType = 'after';
       addClassName(labelEl, globalThis.document, 'drag-after');
-      removeClassName(labelEl, 'drag-before', 'drag-inner');
     } else if (isContainer) {
       dragState.dropType = 'inner';
       addClassName(labelEl, globalThis.document, 'drag-inner');
-      removeClassName(labelEl, 'drag-before', 'drag-after');
     }
 
     if (!dragState.dropType) {
       return;
     }
 
-    dragState.dragOverNodeId = targetEl.dataset.nodeId || '';
+    dragState.dragOverNodeId = targetNodeId;
     dragState.container = event.currentTarget as HTMLElement;
 
     event.preventDefault();

package/src/services/editor.ts

@@ -899,9 +899,20 @@ class Editor extends BaseService {
 
     const newLayout = await this.getLayout(targetParent);
 
-    for (const config of configs) {
+    // eslint-disable-next-line no-restricted-syntax
+    forConfigs: for (const config of configs) {
       const { parent, node: curNode } = this.getNodeInfo(config.id, false);
-      if (!parent || !curNode) throw new Error('找不要删除的节点');
+      if (!parent || !curNode) {
+        continue;
+      }
+
+      const path = getNodePath(curNode.id, parent.items);
+
+      for (const node of path) {
+        if (targetParent.id === node.id) {
+          continue forConfigs;
+        }
+      }
 
       const index = getNodeIndex(curNode.id, parent);
 

package/src/type.ts

@@ -81,6 +81,7 @@ export interface WorkspaceSlots {
 
 export interface ComponentListPanelSlots {
   'component-list-panel-header'(props: {}): any;
+  'component-list'(props: { componentGroupList: ComponentGroup[] }): any;
   'component-list-item'(props: { component: ComponentItem }): any;
 }
 
@@ -384,6 +385,10 @@ export interface SideComponent extends MenuComponent {
   icon?: any;
   /** slide 唯一标识 key */
   $key: string;
+  /** 是否可以将面板拖出，默认为true */
+  draggable?: boolean;
+  /** 点击切换tab前调用，返回false阻止切换 */
+  beforeClick?: (config: SideComponent) => boolean | Promise<boolean>;
 
   /** 组件扩展参数 */
   boxComponentConfig?: {