diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index 581c7968..cd8e4724 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/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,7 +24,7 @@
       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 || {}"
@@ -284,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,
 });
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
index e46af841..57b3668c 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+++ b/packages/editor/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';
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 028d1e35..8587356e 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -385,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?: {