diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 17ccad33de..eae10a4c74 100644
--- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue
+++ b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="CanvasLayout">
+  <component :is="CanvasLayout" :class="{ 'not-selected': getMoveDragBarState() }">
     <template #header>
       <component v-if="!isBlock()" :is="CanvasRouteBar"></component>
     </template>
@@ -67,6 +67,8 @@ export default {
     const { canvasSrc = '' } = getOptions(meta.id) || {}
     const canvasSrcDoc = ref('')
 
+    const { getMoveDragBarState } = useLayout()
+
     useMessage().subscribe({
       topic: 'init_canvas_deps',
       subscriber: 'canvas_design_canvas',
@@ -275,6 +277,7 @@ export default {
         useNotify
       },
       isBlock,
+      getMoveDragBarState,
       CanvasLayout,
       canvasRef,
       CanvasContainer,
@@ -284,3 +287,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.not-selected {
+  pointer-events: none;
+  user-select: none;
+}
+</style>
diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index 35da8bfbf6..2cbe095dce 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="plugin-panel">
-    <div class="plugin-panel-header">
+  <div class="plugin-panel" ref="panel" :style="{ width: panelWidth + 'px' }">
+    <div class="plugin-panel-header" :style="{ marginBottom: headerMarginBottom + 'px' }">
       <div class="plugin-panel-title">
         <span class="title"
           >{{ title }}<link-button class="link" v-if="isShowDocsIcon" :href="docsUrl"></link-button
@@ -9,22 +9,49 @@
       </div>
       <div class="plugin-panel-icon">
         <slot name="header"></slot>
+        <tiny-tooltip
+          v-if="isShowCollapseIcon"
+          effect="light"
+          :content="isCollapsed ? '展开' : '折叠'"
+          placement="top"
+          :visible-arrow="false"
+        >
+          <template #default>
+            <svg-button :name="settingIcon" @click="clickCollapseIcon"></svg-button>
+          </template>
+        </tiny-tooltip>
+        <svg-button
+          class="item icon-sidebar"
+          :name="fixedPanels?.includes(fixedName) ? 'fixed-solid' : 'fixed'"
+          :tips="!fixedPanels?.includes(fixedName) ? '固定面板' : '解除固定面板'"
+          @click="fixPanel"
+        ></svg-button>
         <close-icon v-if="!isCloseLeft" :name="name" @close="closePanel"></close-icon>
       </div>
     </div>
-    <slot name="content"></slot>
+    <div class="scroll-content">
+      <slot name="content"></slot>
+    </div>
+
+    <div class="resizer-right" v-if="isLeftResizer" @mousedown="onMouseDownRight"></div>
+    <div class="resizer-left" v-if="isRightResizer" @mousedown="onMouseDownLeft"></div>
   </div>
 </template>
 
 <script>
+import { inject, ref, computed, onMounted, provide } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
+import { SvgButton } from '@opentiny/tiny-engine-common'
 import LinkButton from './LinkButton.vue'
 import CloseIcon from './CloseIcon.vue'
+import { Tooltip } from '@opentiny/vue'
 
 export default {
   components: {
+    TinyTooltip: Tooltip,
     LinkButton,
-    CloseIcon
+    CloseIcon,
+    SvgButton
   },
   props: {
     /**
@@ -52,9 +79,35 @@ export default {
     isShowDocsIcon: {
       type: Boolean,
       default: false
+    },
+    /**
+     * 固定面板插件数组
+     */
+    fixedPanels: {
+      type: Array
+    },
+    /**
+     * 固定面板标识
+     */
+    fixedName: {
+      type: String
+    },
+    /**
+     * 自定义标题下边距
+     */
+    headerMarginBottom: {
+      type: Number,
+      default: 12
+    },
+    /**
+     * 是否展示折叠按钮
+     */
+    isShowCollapseIcon: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['close'],
+  emits: ['close', 'updateCollapseStatus'],
   setup(props, { emit }) {
     const closePanel = () => {
       useLayout().closePlugin()
@@ -62,8 +115,130 @@ export default {
       emit('close')
     }
 
+    const MIN_WIDTH = 300 // 固定的最小宽度值
+    const MAX_WIDTH = 1000 // 固定的最大宽度值
+    const panel = ref(null)
+    let startX = 0
+    let startWidth = 0
+
+    const isCollapsed = ref(false)
+    const settingIcon = computed(() => (isCollapsed.value ? 'collapse_all' : 'expand_all'))
+
+    provide('isCollapsed', isCollapsed)
+
+    const panelState = inject('panelState')
+    const fixPanel = () => {
+      panelState.emitEvent('fixPanel', props.fixedName)
+    }
+
+    const { getPluginWidth, changePluginWidth, getPluginByLayout, changeMoveDragBarState } = useLayout()
+
+    const align = ref(getPluginByLayout(props.fixedName)) // 滚动条位置
+    const panelWidth = ref(getPluginWidth(props.fixedName)) // 面板使用默认宽度
+    const isLeftResizer = ref(align.value.includes('left'))
+    const isRightResizer = ref(align.value.includes('right'))
+
+    const onMouseMoveRight = (event) => {
+      const newWidth = startWidth + (event.clientX - startX)
+      panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
+      changePluginWidth(props.fixedName, panelWidth.value)
+    }
+
+    const onMouseMoveLeft = (event) => {
+      const newWidth = startWidth - (event.clientX - startX)
+      panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
+      changePluginWidth(props.fixedName, panelWidth.value)
+    }
+
+    //节流
+    function throttle(func, limit) {
+      let lastFunc
+      let lastRan
+      return function (...args) {
+        const context = this
+        if (!lastRan) {
+          func.apply(context, args)
+          lastRan = Date.now()
+        } else {
+          clearTimeout(lastFunc)
+          lastFunc = setTimeout(function () {
+            if (Date.now() - lastRan >= limit) {
+              func.apply(context, args)
+              lastRan = Date.now()
+            }
+          }, limit - (Date.now() - lastRan))
+        }
+      }
+    }
+
+    const throttledMouseMoveRight = throttle(onMouseMoveRight, 50)
+    const throttledMouseMoveLeft = throttle(onMouseMoveLeft, 50)
+
+    const leftResizer = ref(null)
+    const rightResizer = ref(null)
+
+    const onMouseUpRight = () => {
+      changeMoveDragBarState(false)
+      document.removeEventListener('mousemove', throttledMouseMoveRight)
+      document.removeEventListener('mouseup', onMouseUpRight)
+      rightResizer.value.style.cursor = ''
+      rightResizer.value.classList.remove('dragging')
+    }
+
+    const onMouseDownRight = (event) => {
+      changeMoveDragBarState(true)
+      startX = event.clientX
+      startWidth = panel.value.offsetWidth
+      document.addEventListener('mousemove', throttledMouseMoveRight)
+      document.addEventListener('mouseup', onMouseUpRight)
+      rightResizer.value.style.cursor = 'ew-resize'
+      rightResizer.value.classList.add('dragging')
+    }
+
+    const onMouseUpLeft = () => {
+      changeMoveDragBarState(false)
+      document.removeEventListener('mousemove', throttledMouseMoveLeft)
+      document.removeEventListener('mouseup', onMouseUpLeft)
+      leftResizer.value.style.cursor = ''
+      leftResizer.value.classList.remove('dragging')
+    }
+
+    const onMouseDownLeft = (event) => {
+      changeMoveDragBarState(true)
+      startX = event.clientX
+      startWidth = panel.value.offsetWidth
+      document.addEventListener('mousemove', throttledMouseMoveLeft)
+      document.addEventListener('mouseup', onMouseUpLeft)
+      leftResizer.value.style.cursor = 'ew-resize'
+      leftResizer.value.classList.add('dragging')
+    }
+
+    const initResizerDOM = () => {
+      leftResizer.value = document.querySelector('.resizer-left')
+      rightResizer.value = document.querySelector('.resizer-right')
+    }
+
+    const clickCollapseIcon = () => {
+      isCollapsed.value = !isCollapsed.value
+      emit('updateCollapseStatus', isCollapsed.value)
+    }
+
+    onMounted(() => {
+      initResizerDOM()
+    })
+
     return {
-      closePanel
+      clickCollapseIcon,
+      isCollapsed,
+      settingIcon,
+      closePanel,
+      fixPanel,
+      panel,
+      panelWidth,
+      onMouseDownRight,
+      onMouseDownLeft,
+      isLeftResizer,
+      isRightResizer
     }
   }
 }
@@ -83,17 +258,22 @@ export default {
     justify-content: space-between;
     align-items: center;
     font-size: 12px;
+    border-bottom: 1px solid var(--te-common-border-divider);
+    margin-bottom: 12px;
     font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
       'Helvetica Neue', sans-serif;
     padding: 12px;
     color: var(--te-component-common-text-color-primary);
     font-weight: var(--te-base-font-weight-7);
+
     .plugin-panel-title {
       display: flex;
       align-items: center;
+
       .title + .icon-wrap {
         margin-left: 10px;
       }
+
       .title {
         display: flex;
         align-items: center;
@@ -109,10 +289,61 @@ export default {
       :deep(.svg-button + .svg-button) {
         margin-left: 4px;
       }
+
       :deep(.svg-button + .icon-wrap) {
         margin-left: 4px;
       }
     }
   }
 }
+
+// 右边拖拽线
+.resizer-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  cursor: ew-resize;
+  background-color: rgba(0, 0, 0, 0.1);
+  transition: width 0.3s ease;
+}
+
+.dragging {
+  width: 8px !important;
+  background-color: var(--te-base-blue-40) !important;
+}
+
+.resizer-right:hover {
+  width: 8px;
+  background-color: var(--te-base-blue-40);
+}
+
+// 左边拖拽线
+.resizer-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  cursor: ew-resize;
+  background-color: rgba(0, 0, 0, 0.1);
+  transition: width 0.3s ease;
+}
+
+.resizer-left:hover {
+  width: 8px;
+  background-color: var(--te-base-blue-40);
+}
+
+.scroll-content {
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scroll-content::-webkit-scrollbar {
+  display: none;
+}
 </style>
diff --git a/packages/common/component/PluginRightMenu.vue b/packages/common/component/PluginRightMenu.vue
new file mode 100644
index 0000000000..401c147de5
--- /dev/null
+++ b/packages/common/component/PluginRightMenu.vue
@@ -0,0 +1,183 @@
+<template>
+  <ul
+    v-if="contextMenu.visible"
+    class="plugin-context-menu"
+    :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+  >
+    <li v-if="contextMenu.type" @click="hidePlugin">隐藏 "{{ contextMenu.item.title }}"</li>
+    <li v-if="contextMenu.type" class="bottom-li" @click="switchAlign">
+      切换到{{ align.includes('right') ? '左侧' : '右侧' }}
+    </li>
+    <li
+      v-for="(item, index) in list"
+      :key="index"
+      @click.stop="changeShowState(item.id)"
+      class="menu-item-wrapper"
+      :class="{
+        'bottom-li': index === list.length - 1
+      }"
+    >
+      <span class="check-mark">
+        <span v-show="getPluginShown(item.id)">√</span>
+      </span>
+      <span>{{ item.title }}</span>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { reactive, onMounted, onBeforeUnmount, nextTick, ref } from 'vue'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
+export default {
+  props: {
+    list: {
+      type: Array
+    },
+    align: {
+      type: String,
+      default: 'left'
+    }
+  },
+  emits: ['close', 'switchAlign'],
+  setup(props, { emit }) {
+    const { getPluginShown, changePluginShown, changeMenuShown } = useLayout()
+    const pluginGroupPosition = ref('')
+    const contextMenu = reactive({
+      type: true,
+      visible: false,
+      x: 0,
+      y: 0,
+      item: null,
+      index: null,
+      list: null
+    })
+
+    // 显示菜单
+    const contextMenuWidth = props.align.includes('right') ? 130 : 0
+    const showContextMenu = (x, y, type, item, index, position) => {
+      const windowHeight = window.innerHeight
+
+      contextMenu.type = type
+      contextMenu.visible = true
+
+      nextTick(() => {
+        const pluginMenuPanel = document.querySelector('.plugin-context-menu')
+        const menuHeight = pluginMenuPanel?.offsetHeight
+
+        const spaceBelow = windowHeight - y - 20
+
+        if (menuHeight && spaceBelow < menuHeight) {
+          contextMenu.y = y - menuHeight
+        } else {
+          contextMenu.y = y
+        }
+
+        contextMenu.x = x - contextMenuWidth
+      })
+
+      if (type) {
+        contextMenu.item = item
+        contextMenu.index = index
+        pluginGroupPosition.value = position
+      }
+    }
+
+    // 隐藏菜单
+    const hideContextMenu = () => {
+      contextMenu.visible = false
+    }
+
+    // 隐藏插件
+    const hidePlugin = () => {
+      emit('close')
+      changePluginShown(contextMenu.item.id)
+      hideContextMenu()
+    }
+
+    // 切换组件位置
+    const switchAlign = () => {
+      emit('close')
+      emit('switchAlign', contextMenu.index, contextMenu.item.id, pluginGroupPosition.value)
+      hideContextMenu()
+    }
+
+    // 隐藏活动栏
+    const hideSidebar = () => {
+      const align = props.align.includes('right') ? 'right' : 'left'
+      changeMenuShown(align)
+      hideContextMenu()
+    }
+
+    // 改变组件显示状态
+    const changeShowState = (pluginName) => {
+      changePluginShown(pluginName)
+    }
+
+    const handleClickOutside = (event) => {
+      if (!event.target.closest('.plugin-context-menu')) {
+        hideContextMenu()
+      }
+    }
+
+    onMounted(() => {
+      document.addEventListener('click', handleClickOutside)
+    })
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('click', handleClickOutside)
+    })
+
+    return {
+      contextMenu,
+      showContextMenu,
+      changeShowState,
+      getPluginShown,
+      hidePlugin,
+      switchAlign,
+      hideSidebar
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 引入B的CSS样式 */
+.plugin-context-menu {
+  position: absolute;
+  background: white;
+  border: 1px solid #ccc;
+  list-style: none;
+  width: 135px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+.plugin-context-menu-header {
+  padding: 8px 12px;
+  font-weight: bold;
+  cursor: default;
+  background: #f5f5f5;
+  border-bottom: 1px solid #ccc;
+}
+.bottom-li {
+  border-bottom: 1px solid #ccc;
+}
+
+.plugin-context-menu li {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.plugin-context-menu li:hover {
+  background: #f0f0f0;
+}
+.menu-item-wrapper {
+  display: flex;
+  flex-grow: 1;
+}
+
+.check-mark {
+  width: 20px;
+  text-align: left;
+}
+</style>
diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index dc1be5288a..6a4f03a405 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -1,6 +1,14 @@
 <template>
   <div
-    :class="['plugin-setting', { 'second-panel': isSecond }, { 'full-screen': state.isFullScreen }]"
+    id="panel-setting"
+    :class="[
+      'plugin-setting',
+      { 'second-panel': isSecond },
+      { 'full-screen': state.isFullScreen },
+      { 'align-right': align.includes('right') },
+      shadowClass
+    ]"
+    :style="alignStyle"
     @click="$emit('click')"
   >
     <div class="plugin-setting-header">
@@ -31,11 +39,12 @@
 </template>
 
 <script>
-import { reactive, watchEffect } from 'vue'
+import { nextTick, reactive, watchEffect, computed } from 'vue'
 import { Button } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'
 import ButtonGroup from './ButtonGroup.vue'
 import SvgButton from './SvgButton.vue'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
 
 const EVENTS = {
   FULL_SCREEN_CHANGE: 'fullScreenChange',
@@ -91,6 +100,14 @@ export default {
     icon: {
       type: Object,
       default: iconPlus()
+    },
+    fixedName: {
+      type: String,
+      default: ''
+    },
+    align: {
+      type: String,
+      default: 'leftTop'
     }
   },
   emits: [EVENTS.FULL_SCREEN_CHANGE, EVENTS.SAVE, EVENTS.CANCEL, EVENTS.ADD, EVENTS.CLICK],
@@ -99,6 +116,28 @@ export default {
       isFullScreen: false
     })
 
+    const { getPluginWidth } = useLayout()
+
+    const firstPanelOffset = computed(() => {
+      return getPluginWidth(props.fixedName)
+    })
+
+    const secondPanelAlign = computed(() => {
+      return props.align.includes('left') ? 'left' : 'right'
+    })
+
+    const alignStyle = computed(() => {
+      return `${secondPanelAlign.value} : ${firstPanelOffset.value}px`
+    })
+
+    watchEffect(() => {
+      // 处理二级面板偏移量
+      const secondPanelOffset = document.querySelector('.plugin-setting')?.clientWidth + firstPanelOffset.value
+      nextTick(() => {
+        document.querySelector('.second-panel')?.style.setProperty(secondPanelAlign.value, `${secondPanelOffset}px`)
+      })
+    })
+
     watchEffect(() => {
       state.isFullScreen = props.isFullScreen
     })
@@ -112,7 +151,16 @@ export default {
       return isFullScreen ? '收起' : '全屏查看'
     }
 
+    // 计算属性用于确定阴影类
+    const shadowClass = computed(() => {
+      if (props.isSecond) return ''
+      return props.align.includes('right') ? 'shadow-right' : 'shadow-left'
+    })
+
     return {
+      alignStyle,
+      shadowClass,
+      firstPanelOffset,
       state,
       fullScreen,
       getFullScreenLabel
@@ -124,7 +172,6 @@ export default {
 <style lang="less" scoped>
 .plugin-setting {
   position: absolute;
-  left: var(--base-left-panel-width);
   top: 0;
   width: var(--base-collection-panel-width);
   height: 100%;
@@ -132,17 +179,24 @@ export default {
   background: var(--te-component-common-bg-color);
   overflow: hidden;
   border-left: 1px solid var(--te-component-common-border-color-divider);
+
   &:not(.second-panel) {
-    box-shadow: 6px 0px 3px 0px var(--te-component-common-shadow-color);
-    border-right: none;
-    border-left: none;
+    &.shadow-left {
+      box-shadow: 6px 0px 3px 0px var(--te-component-common-shadow-color);
+      border-right: none;
+    }
+
+    &.shadow-right {
+      box-shadow: -6px 0px 3px 0px var(--te-component-common-shadow-color);
+      border-left: none;
+    }
   }
+
   &.full-screen {
     width: var(--base-collection-panel-full-screen-width);
   }
 
   &.second-panel {
-    left: calc(var(--base-left-panel-width) + var(--base-collection-panel-width));
     z-index: 1;
   }
 
@@ -167,6 +221,7 @@ export default {
     color: var(--te-component-common-text-color-primary);
     padding: 0 12px;
     border-bottom: 1px solid var(--te-component-common-border-color-divider);
+
     .plugin-setting-header-title {
       font-size: 12px;
       font-weight: 700;
@@ -175,9 +230,11 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
     :deep(.svg-button + .svg-button) {
       margin: 0;
     }
+
     :deep(.tiny-button.tiny-button) {
       margin-right: 0;
     }
@@ -195,4 +252,8 @@ export default {
     align-items: center;
   }
 }
+
+.align-right {
+  right: 0;
+}
 </style>
diff --git a/packages/common/component/index.js b/packages/common/component/index.js
index 7397fd2809..98da34cce6 100644
--- a/packages/common/component/index.js
+++ b/packages/common/component/index.js
@@ -14,6 +14,7 @@ import ConfigGroup from './ConfigGroup.vue'
 import ConfigItem from './ConfigItem.vue'
 export { default as PluginSetting } from './PluginSetting.vue'
 export { default as PluginPanel } from './PluginPanel.vue'
+export { default as PluginRightMenu } from './PluginRightMenu.vue'
 export { default as SvgButton } from './SvgButton.vue'
 export { default as LinkButton } from './LinkButton.vue'
 export { default as ConfigCollapse } from './ConfigCollapse.vue'
diff --git a/packages/layout/package.json b/packages/layout/package.json
index 08e0161518..2eaae277ac 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -26,7 +26,8 @@
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
-    "@vueuse/core": "^9.6.0"
+    "@vueuse/core": "^9.6.0",
+    "vue-draggable-next": "2.1.0"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index c2f2914f20..61d643dcce 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -1,7 +1,15 @@
+<!-- 左侧插件栏-->
 <template>
   <div id="tiny-engine-nav-panel" :style="{ 'pointer-events': pluginState.pluginEvent }">
-    <ul class="nav-panel-lists top">
-      <li
+    <vue-draggable-next
+      v-model="state.topNavLists"
+      filter="EditorHelp"
+      class="nav-panel-lists top"
+      id="leftTop"
+      group="plugins"
+      @end="onEnd"
+    >
+      <div
         v-for="(item, index) in state.topNavLists"
         :key="index"
         :class="{
@@ -12,8 +20,9 @@
         }"
         :title="item.title"
         @click="clickMenu({ item, index })"
+        @contextmenu.prevent="showContextMenu($event, true, item, index, PLUGIN_POSITION.leftTop)"
       >
-        <div>
+        <div v-if="getPluginShown(item.id)">
           <span class="item-icon">
             <svg-icon
               v-if="typeof iconComponents[item.id] === 'string'"
@@ -23,65 +32,83 @@
             <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
           </span>
         </div>
-      </li>
-    </ul>
-    <ul class="nav-panel-lists bottom">
-      <li style="flex: 1" class="list-item"></li>
-      <li
-        v-for="(item, index) in state.bottomNavLists"
-        :key="index"
-        :class="[
-          'list-item',
-          { active: renderPanel === item.id, prev: state.prevIdex - 1 === index, 'first-item': index === 0 }
-        ]"
-        :title="item.title"
-        @click="clickMenu({ item, index })"
-      >
-        <div :class="{ 'is-show': renderPanel }">
-          <span class="item-icon">
-            <public-icon
-              v-if="typeof iconComponents[item.id] === 'string'"
-              :name="iconComponents[item.id]"
-              class="panel-icon"
-              svgClass="panel-svg"
-            ></public-icon>
-            <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
-          </span>
+      </div>
+    </vue-draggable-next>
+
+    <!-- 图标菜单下侧区域（附加icon） -->
+    <div class="nav-panel-lists bottom">
+      <div style="flex: 1" class="list-item" @contextmenu.prevent="showContextMenu($event, false)" />
+      <vue-draggable-next id="leftBottom" v-model="state.bottomNavLists" group="plugins" @end="onEnd">
+        <div
+          v-for="(item, index) in state.bottomNavLists"
+          :key="index"
+          :class="[
+            'list-item',
+            { active: renderPanel === item.id, prev: state.prevIdex - 1 === index, 'first-item': index === 0 }
+          ]"
+          :title="item.title"
+          @click="clickMenu({ item, index })"
+          @contextmenu.prevent="showContextMenu($event, true, item, index, PLUGIN_POSITION.leftBottom)"
+        >
+          <div :class="{ 'is-show': renderPanel }" v-if="getPluginShown(item.id)">
+            <span class="item-icon">
+              <public-icon
+                v-if="typeof iconComponents[item.id] === 'string'"
+                :name="iconComponents[item.id]"
+                class="panel-icon"
+                svgClass="panel-svg"
+              ></public-icon>
+              <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
+            </span>
+          </div>
         </div>
-      </li>
-    </ul>
+      </vue-draggable-next>
+    </div>
   </div>
 
-  <div
-    v-show="renderPanel && components[renderPanel]"
-    id="tiny-engine-left-panel"
-    :class="[renderPanel, { 'is-fixed': pluginState.fixedPanels.includes(renderPanel) }]"
-  >
-    <div class="left-panel-wrap">
-      <keep-alive>
-        <component
-          :is="components[renderPanel]"
-          ref="pluginRef"
-          :fixed-panels="pluginState.fixedPanels"
-          @close="close"
-          @fixPanel="fixPanel"
-        ></component>
-      </keep-alive>
+  <div :class="{ 'not-selected': getMoveDragBarState() }">
+    <!-- 插件面板 -->
+    <div
+      v-show="renderPanel && components[renderPanel]"
+      id="tiny-engine-left-panel"
+      :class="[renderPanel, { 'is-fixed': pluginState.fixedPanels.includes(renderPanel) }]"
+    >
+      <div class="left-panel-wrap">
+        <keep-alive>
+          <component
+            :is="components[renderPanel]"
+            ref="pluginRef"
+            :fixed-panels="pluginState.fixedPanels"
+            @close="close"
+            @fixPanel="fixPanel"
+          ></component>
+        </keep-alive>
+      </div>
     </div>
   </div>
+
+  <plugin-right-menu
+    ref="rightMenu"
+    :list="[...state.topNavLists, ...state.bottomNavLists]"
+    :align="left"
+    @switchAlign="switchAlign"
+  />
 </template>
 
 <script>
 import { reactive, ref, watch } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
+import { VueDraggableNext } from 'vue-draggable-next'
 import { useLayout, usePage, useModal, META_APP } from '@opentiny/tiny-engine-meta-register'
-import { PublicIcon } from '@opentiny/tiny-engine-common'
+import { PublicIcon, PluginRightMenu } from '@opentiny/tiny-engine-common'
 import { constants } from '@opentiny/tiny-engine-utils'
 
 const { STORAGE_KEY_FIXED_PANELS } = constants
 
 export default {
   components: {
+    PluginRightMenu,
+    VueDraggableNext,
     TinyPopover: Popover,
     TinyTooltip: Tooltip,
     PublicIcon
@@ -93,6 +120,10 @@ export default {
     plugins: {
       type: Array,
       default: () => []
+    },
+    pluginList: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['click', 'node-click'],
@@ -104,15 +135,39 @@ export default {
     const { message } = useModal()
     const pluginState = useLayout().getPluginState()
 
-    props.plugins.forEach(({ id, entry, icon }) => {
-      components[id] = entry
-      iconComponents[id] = icon
-    })
+    const {
+      getPluginById,
+      getPluginShown,
+      PLUGIN_POSITION,
+      getMoveDragBarState,
+      isSameSide,
+      dragPluginLayout,
+      getPluginsByPosition
+    } = useLayout()
+
+    const rightMenu = ref(null)
+    const showContextMenu = (event, type, item, index, align) => {
+      if (!type) {
+        rightMenu.value.showContextMenu(event.clientX, event.clientY, type)
+      } else {
+        rightMenu.value.showContextMenu(event.clientX, event.clientY, type, item, index, align)
+      }
+    }
 
     const state = reactive({
       prevIdex: -2,
-      topNavLists: props.plugins.filter((item) => item.align === 'top'),
-      bottomNavLists: props.plugins.filter((item) => item.align === 'bottom')
+      topNavLists: getPluginsByPosition(PLUGIN_POSITION.leftTop, props.pluginList),
+      bottomNavLists: getPluginsByPosition(PLUGIN_POSITION.leftBottom, props.pluginList)
+    })
+
+    const changeAlign = (pluginId) => {
+      const item = getPluginById(props.pluginList, pluginId)
+      state.topNavLists.unshift(item)
+    }
+
+    props.pluginList.forEach(({ id, entry, icon }) => {
+      components[id] = entry
+      iconComponents[id] = icon
     })
 
     const clickMenu = ({ item, index }) => {
@@ -127,14 +182,14 @@ export default {
           result &&
           emit('click', {
             item,
-            navLists: item.align === 'top' ? state.topNavLists[index] : state.bottomNavLists[index]
+            navLists: item.align === 'leftTop' ? state.topNavLists[index] : state.bottomNavLists[index]
           })
 
         pluginRef.value?.[lastPlugin.confirm](confirmCallback)
       } else {
         emit('click', {
           item,
-          navLists: item.align === 'top' ? state.topNavLists[index] : state.bottomNavLists[index]
+          navLists: item.align === 'leftTop' ? state.topNavLists[index] : state.bottomNavLists[index]
         })
       }
     }
@@ -154,6 +209,23 @@ export default {
       useLayout().closePlugin(true)
     }
 
+    /**
+     * @param index 组件索引
+     * @param id 组件 ID, 类似于 'engine.plugins.*'
+     * @param from 组件来源
+     */
+    const switchAlign = (index, id, from) => {
+      if (from === PLUGIN_POSITION.leftTop) {
+        state.topNavLists.splice(index, 1)
+      } else {
+        state.bottomNavLists.splice(index, 1)
+      }
+      emit('changeLeftAlign', id)
+
+      if (!isSameSide(index, 0)) close()
+      dragPluginLayout(from, PLUGIN_POSITION.rightTop, index, 0)
+    }
+
     const fixPanel = (pluginName) => {
       pluginState.fixedPanels = pluginState.fixedPanels?.includes(pluginName)
         ? pluginState.fixedPanels?.filter((item) => item !== pluginName)
@@ -182,7 +254,20 @@ export default {
 
     restoreFixedPanels()
 
+    //监听拖拽结束事件
+    const onEnd = (e) => {
+      if (!isSameSide(e.from.id, e.to.id)) close()
+      dragPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex)
+    }
+
     return {
+      changeAlign,
+      rightMenu,
+      PLUGIN_POSITION,
+      showContextMenu,
+      switchAlign,
+      getPluginShown,
+      onEnd,
       state,
       clickMenu,
       pluginRef,
@@ -190,6 +275,7 @@ export default {
       fixPanel,
       pluginState,
       components,
+      getMoveDragBarState,
       iconComponents
     }
   }
@@ -198,7 +284,7 @@ export default {
 
 <style lang="less" scoped>
 #tiny-engine-left-panel {
-  width: var(--base-left-panel-width);
+  width: auto !important;
   height: calc(100vh - var(--base-top-panel-height));
   border-right: 1px solid var(--te-layout-common-border-color);
   background: var(--te-layout-common-bg-color);
@@ -209,10 +295,6 @@ export default {
   left: var(--base-nav-panel-width);
   z-index: 999;
 
-  &[class~='engine.plugins.i18n'] {
-    width: auto;
-  }
-
   &.is-fixed {
     position: relative;
     top: 0;
@@ -324,4 +406,9 @@ export default {
 :deep(.svg-icon.icon-plugin-icon-plugin-help) {
   font-size: 18px;
 }
+
+.not-selected {
+  pointer-events: none;
+  user-select: none;
+}
 </style>
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 63621184ec..c83a10986d 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -1,130 +1,317 @@
+<!-- 右侧插件栏 -->
 <template>
-  <div id="tiny-right-panel">
-    <tiny-tabs v-model="layoutState.settings.render">
-      <tiny-tab-item v-for="(setting, index) in settings" :key="index" :title="setting.title" :name="setting.name">
-        <component :is="setting.entry"></component>
-        <div v-show="activating" class="active"></div>
-      </tiny-tab-item>
-    </tiny-tabs>
-    <div v-if="layoutState.settings.render === 'style'" class="tabs-setting">
-      <tiny-tooltip effect="light" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
-        <template #default> <svg-icon :name="settingIcon" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
-      </tiny-tooltip>
+  <div :class="{ 'not-selected': getMoveDragBarState() }">
+    <div
+      v-show="renderPanel && components[renderPanel]"
+      id="tiny-engine-right-panel"
+      :class="[renderPanel, { 'is-fixed': rightFixedPanelsStorage.includes(renderPanel) }]"
+    >
+      <div class="right-panel-wrap">
+        <component
+          :is="components[renderPanel]"
+          :fixed-panels="rightFixedPanelsStorage"
+          @close="close"
+          @fixPanel="fixPanel"
+        ></component>
+        <div v-show="activating" class="active2" />
+      </div>
     </div>
   </div>
+  <div id="tiny-engine-nav-panel">
+    <vue-draggable-next id="rightTop" v-model="settingPlugins" class="nav-panel-lists" group="plugins" @end="onEnd">
+      <div
+        v-for="(item, index) in settingPlugins"
+        :key="index"
+        :class="['list-item', { 'first-item': item === settingPlugins[0], active: item.id === renderPanel }]"
+        :title="item.title"
+        @click="clickMenu({ item, index })"
+        @contextmenu.prevent="showContextMenu($event, true, item, index, PLUGIN_POSITION.rightTop)"
+      >
+        <span class="item-icon" v-if="getPluginShown(item.id)">
+          <svg-icon v-if="iconComponents[item.id]" :name="iconComponents[item.id]" class="panel-icon"></svg-icon>
+          <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
+        </span>
+      </div>
+      <div style="flex: 1" class="list-item" @contextmenu.prevent="showContextMenu($event, false)"></div>
+    </vue-draggable-next>
+  </div>
+
+  <plugin-right-menu
+    ref="rightMenu"
+    :list="settingPlugins"
+    :align="PLUGIN_POSITION.rightTop"
+    @switchAlign="switchAlign"
+  />
 </template>
 
 <script>
-import { computed, provide, ref } from 'vue'
-import { Tabs, TabItem, Tooltip } from '@opentiny/vue'
+import { computed, ref, watch, toRefs } from 'vue'
+import { Tabs, TabItem } from '@opentiny/vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
+import { VueDraggableNext } from 'vue-draggable-next'
+import { PluginRightMenu } from '@opentiny/tiny-engine-common'
 
 export default {
   components: {
+    PluginRightMenu,
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
-    TinyTooltip: Tooltip
+    VueDraggableNext
   },
   props: {
     settings: {
       type: Array,
       default: () => []
+    },
+    renderPanel: {
+      type: String
+    },
+    pluginList: {
+      type: Array,
+      default: () => []
     }
   },
-  setup() {
-    const { layoutState } = useLayout()
-    const activating = computed(() => layoutState.settings.activating)
-    const showMask = ref(true)
-    const isCollapsed = ref(false)
-    const settingIcon = computed(() => (isCollapsed.value ? 'collapse_all' : 'expand_all'))
+  setup(props, { emit }) {
+    const components = {}
+    const iconComponents = {}
+
+    const {
+      getPluginsByPosition,
+      getPluginById,
+      PLUGIN_POSITION,
+      rightFixedPanelsStorage,
+      changeRightFixedPanels,
+      dragPluginLayout,
+      isSameSide,
+      getPluginShown,
+      getMoveDragBarState,
+      layoutState: { settings: settingsState }
+    } = useLayout()
+
+    const rightMenu = ref(null)
+    const { renderPanel } = toRefs(props)
+    const showContextMenu = (event, type, item, index, align) => {
+      if (!type) {
+        rightMenu.value.showContextMenu(event.clientX, event.clientY, type)
+      } else {
+        rightMenu.value.showContextMenu(event.clientX, event.clientY, type, item, index, align)
+      }
+    }
+
+    props.pluginList.forEach(({ id, entry, icon }) => {
+      components[id] = entry
+      iconComponents[id] = icon
+    })
+
+    const settingPlugins = ref(getPluginsByPosition(PLUGIN_POSITION.rightTop, props.pluginList))
+
+    const close = () => {
+      useLayout().closeSetting(true)
+    }
+
+    const switchAlign = (index, id, from) => {
+      settingPlugins.value.splice(index, 1)
+      emit('changeRightAlign', id)
+      if (!isSameSide(index, 0)) close()
+      dragPluginLayout(from, PLUGIN_POSITION.leftTop, index, 0)
+    }
+
+    const changeAlign = (pluginId) => {
+      const item = getPluginById(props.pluginList, pluginId)
+      settingPlugins.value.unshift(item)
+    }
 
-    provide('isCollapsed', isCollapsed)
+    const setRender = (curId) => {
+      settingsState.render = curId
+    }
+
+    //点击右侧菜单icon按钮
+    const clickMenu = ({ item }) => {
+      if (settingsState.render == item.id) {
+        useLayout().closeSetting(true)
+        return
+      }
+      setRender(item.id)
+    }
+
+    watch(renderPanel, (n) => {
+      setRender(n)
+    })
+
+    //切换面板状态
+    const fixPanel = (pluginName) => {
+      changeRightFixedPanels(pluginName)
+    }
+
+    //监听拖拽结束事件
+    const onEnd = (e) => {
+      if (!isSameSide(e.from.id, e.to.id)) close()
+      dragPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex)
+    }
+
+    const activating = computed(() => settingsState.activating)
+    const showMask = ref(true)
 
     return {
+      changeAlign,
       showMask,
-      isCollapsed,
       activating,
-      settingIcon,
-      layoutState
+      settingsState,
+      settingPlugins,
+      components,
+      iconComponents,
+      clickMenu,
+      close,
+      fixPanel,
+      rightFixedPanelsStorage,
+      onEnd,
+      showContextMenu,
+      PLUGIN_POSITION,
+      getPluginShown,
+      switchAlign,
+      rightMenu,
+      getMoveDragBarState
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-#tiny-right-panel {
-  width: var(--base-right-panel-width);
-  height: 100%;
-  transition: 0.3s linear;
-  position: relative;
-  border-left: 1px solid var(--te-layout-common-border-color);
-  padding-top: 12px;
-  background-color: var(--te-layout-common-bg-color);
-
-  .tabs-setting {
-    position: absolute;
-    top: 9px;
-    right: 18px;
-    line-height: 26px;
-    color: var(--te-layout-common-icon-color);
-    cursor: pointer;
+#tiny-engine-right-panel {
+  height: calc(100vh - var(--base-top-panel-height));
+  border-left: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
+  background: var(--ti-lowcode-common-component-bg);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: var(--base-top-panel-height);
+  right: var(--base-nav-panel-width);
+  z-index: 999;
+
+  &.I18n {
+    width: auto;
+  }
+
+  &.is-fixed {
+    position: relative;
+    top: 0;
+    right: 0;
   }
-  .tiny-tabs {
+
+  .right-panel-wrap {
+    width: 100%;
     height: 100%;
+    position: relative;
+    :deep(.tiny-tabs__nav.is-show-active-bar) .tiny-tabs__item {
+      margin-right: 0;
+    }
   }
-  :deep(.tiny-tabs) {
+}
+
+#tiny-engine-nav-panel {
+  display: none;
+  width: var(--base-nav-panel-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--te-layout-common-bg-color);
+  box-sizing: border-box;
+  z-index: 1000;
+  border-left: 1px solid var(--te-layout-common-border-color);
+
+  &.completed {
+    display: block;
+  }
+
+  .nav-panel-lists {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     display: flex;
     flex-direction: column;
-    .tiny-tabs__header .tiny-tabs__nav {
-      width: 60%;
-      background-color: var(--te-layout-common-bg-color);
-    }
-    .tiny-tabs__nav-scroll {
-      margin-left: 12px;
-      .tiny-tabs__active-bar {
-        height: 3px;
-        background-color: var(--te-layout-common-text-color-active);
-      }
-    }
+    height: 100vh;
 
-    .tiny-tabs__content {
+    &.bottom {
       flex: 1;
-      overflow-y: auto;
-      padding: 0;
-      margin: 0;
+      padding-bottom: 28px;
     }
-    .tiny-tabs__nav.is-show-active-bar .tiny-tabs__item {
-      margin-right: 8px;
-    }
-    .tiny-tabs__item {
-      flex: 1;
-      background-color: var(--te-layout-common-bg-color);
-      color: var(--te-layout-common-text-color-secondary);
-      margin-right: 5px;
-      &:hover {
-        color: var(--te-layout-common-text-color-hover);
+
+    .list-item {
+      width: 100%;
+      padding: 3px 0;
+
+      &:first-child {
+        padding-top: 12px;
       }
-      &.is-active {
-        color: var(--te-layout-common-text-color-active);
-        border: none;
+
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:hover,
+      &.active {
+        .item-icon {
+          background: var(--te-layout-common-bg-color-hover);
+          border-radius: 4px;
+        }
       }
 
-      .tiny-tabs__item__title {
-        padding-bottom: 6px;
+      &.active {
+        position: relative;
+
+        .item-icon {
+          color: var(--te-layout-common-text-color-secondary-checked);
+        }
+      }
+
+      &.prev {
+        border-bottom-color: var(--te-layout-common-border-color);
       }
     }
 
-    .tiny-tabs__nav-wrap-not-separator::after {
-      z-index: 2;
+    .item-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--te-layout-common-text-color);
+      font-size: 22px;
+      width: 26px;
+      height: 26px;
+
+      svg {
+        font-size: 18px;
+      }
+      .public-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 26px;
+        height: 26px;
+      }
     }
   }
+}
 
-  :deep(.tiny-collapse-item__content) {
-    padding: 0 8px 12px 12px; // 这里的bottom为4px + 内部行元素与底部的距离为8px = 12px
-  }
+:deep(.panel-svg) {
+  font-size: 18px;
 }
 
-.active {
+:deep(.svg-icon.icon-plugin-icon-plugin-help) {
+  font-size: 18px;
+}
+
+.not-selected {
+  pointer-events: none;
+  user-select: none;
+}
+
+:deep(.svg-icon.icon-plugin-icon-plugin-help) {
+  font-size: 22px;
+}
+
+//高亮显示动画
+.active2 {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -135,10 +322,14 @@ export default {
 
 @keyframes glow {
   0% {
-    box-shadow: inset 0px 0px 4px var(--te-layout-setting-bg-color-hover);
+    box-shadow: inset 0px 0px 4px var(--ti-lowcode-canvas-handle-hover-bg);
   }
   100% {
-    box-shadow: inset 0px 0px 14px var(--te-layout-setting-bg-color-hover);
+    box-shadow: inset 0px 0px 14px var(--ti-lowcode-canvas-handle-hover-bg);
   }
 }
+
+.not-selected {
+  user-select: none;
+}
 </style>
diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index 657baa047a..c6131ddad3 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -6,8 +6,12 @@
         <div class="tiny-engine-left-wrap">
           <div class="tiny-engine-content-wrap">
             <design-plugins
+              v-if="leftMenuShownStorage"
+              ref="left"
               :plugins="registry.plugins"
+              :plugin-list="pluginList"
               :render-panel="plugins.render"
+              @changeLeftAlign="changeLeftAlign"
               @click="toggleNav"
             ></design-plugins>
             <component :is="registry.canvas.entry"></component>
@@ -15,9 +19,13 @@
         </div>
         <div class="tiny-engine-right-wrap">
           <design-settings
+            v-if="rightMenuShownStorage"
+            ref="right"
             :settings="registry.settings"
+            :render-panel="settings.render"
+            :plugin-list="pluginList"
             v-show="layoutState.settings.showDesignSettings"
-            ref="right"
+            @changeRightAlign="changeRightAlign"
           ></design-settings>
         </div>
       </div>
@@ -31,6 +39,7 @@ import DesignToolbars from './DesignToolbars.vue'
 import DesignPlugins from './DesignPlugins.vue'
 import DesignSettings from './DesignSettings.vue'
 import meta from '../meta'
+import { ref } from 'vue'
 
 export default {
   name: 'TinyLowCode',
@@ -49,24 +58,78 @@ export default {
       type: Object
     }
   },
-  setup() {
+  setup(props) {
     const layoutRegistry = getMergeRegistry(meta.type)
     const configProvider = layoutRegistry.options.configProvider
     const configProviderDesign = layoutRegistry.options.configProviderDesign
 
-    const { layoutState } = useLayout()
-    const { plugins } = layoutState
+    const { layoutState, leftMenuShownStorage, rightMenuShownStorage, initPluginStorageReactive } = useLayout()
+    const { plugins, settings } = layoutState
 
     const toggleNav = ({ item }) => {
       if (!item.id) return
       plugins.render = plugins.render === item.id ? null : item.id
     }
 
+    const left = ref(null)
+    const right = ref(null)
+
+    const changeLeftAlign = (pluginId) => {
+      right.value?.changeAlign(pluginId)
+    }
+    const changeRightAlign = (pluginId) => {
+      left.value?.changeAlign(pluginId)
+    }
+
+    // 合并插件和设置列表
+    const pluginList = [...props.registry.plugins, ...props.registry.settings]
+
+    // 收集插件的 align 信息
+    const alignGroups = {}
+    const plugin = {}
+
+    pluginList.forEach((item) => {
+      if (item.id) {
+        const align = item?.align || 'leftTop'
+
+        // 初始化 alignGroups[align]
+        if (!alignGroups[align]) {
+          alignGroups[align] = []
+        }
+
+        // 将 item.id 推入对应的 alignGroups
+        alignGroups[align].push(item.id)
+
+        // 为每个插件分配 index 和相关属性
+        const index = alignGroups[align].indexOf(item.id)
+
+        plugin[item.id] = {
+          width: item?.width || 300,
+          align: align,
+          index: index,
+          isShow: true,
+          entry: item.entry,
+          id: item.id,
+          icon: item.icon
+        }
+      }
+    })
+    localStorage.setItem('plugin', JSON.stringify(plugin))
+    initPluginStorageReactive(plugin)
+
     return {
+      left,
+      right,
+      changeLeftAlign,
+      changeRightAlign,
+      leftMenuShownStorage,
+      rightMenuShownStorage,
+      pluginList,
       layoutRegistry,
       configProvider,
       configProviderDesign,
       plugins,
+      settings,
       toggleNav,
       layoutState
     }
@@ -98,7 +161,8 @@ export default {
     }
   }
   .tiny-engine-right-wrap {
-    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
     z-index: 4;
   }
   :deep(.monaco-editor .suggest-widget) {
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index 00b61ef42f..4062621f67 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -11,12 +11,27 @@
  */
 
 import { reactive, nextTick } from 'vue'
+import { useStorage } from '@vueuse/core'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { META_APP as PLUGIN_NAME, getMetaApi } from '@opentiny/tiny-engine-meta-register'
 
 const { PAGE_STATUS } = constants
 
+const PLUGIN_POSITION = {
+  leftTop: 'leftTop',
+  leftBottom: 'leftBottom',
+  independence: 'independence',
+  rightTop: 'rightTop',
+  rightBottom: 'rightBottom',
+  fixed: 'fixed'
+}
+
+const pluginState = reactive({
+  pluginEvent: 'all'
+})
+
 const layoutState = reactive({
+  isMoveDragBar: false,
   dimension: {
     deviceType: 'desktop',
     width: '',
@@ -26,12 +41,18 @@ const layoutState = reactive({
     height: '100%'
   },
   plugins: {
+    isShow: true,
     fixedPanels: [PLUGIN_NAME.Materials],
-    render: null,
-    pluginEvent: 'all'
+    render: PLUGIN_NAME.Materials,
+    pluginEvent: 'all',
+    api: {}, // 插件需要注册交互API到这里
+    activating: false, // 右侧面版激活提示状态
+    showDesignSettings: true
   },
   settings: {
-    render: 'props',
+    isShow: true,
+    fixedPanels: [PLUGIN_NAME.Props],
+    render: PLUGIN_NAME.Props,
     api: null,
     activating: false, // 右侧面版激活提示状态
     showDesignSettings: true
@@ -41,6 +62,49 @@ const layoutState = reactive({
   },
   pageStatus: ''
 })
+const getMoveDragBarState = () => {
+  return layoutState.isMoveDragBar
+}
+const changeMoveDragBarState = (state) => {
+  layoutState.isMoveDragBar = state
+}
+const leftMenuShownStorage = useStorage('leftMenuShown', layoutState.plugins.isShow)
+const rightMenuShownStorage = useStorage('rightMenuShown', layoutState.settings.isShow)
+const changeMenuShown = (menuName) => {
+  switch (menuName) {
+    case 'left': {
+      leftMenuShownStorage.value = !leftMenuShownStorage.value
+      break
+    }
+    case 'right': {
+      rightMenuShownStorage.value = !rightMenuShownStorage.value
+      break
+    }
+  }
+}
+const leftFixedPanelsStorage = useStorage('leftPanels', layoutState.plugins.fixedPanels)
+const rightFixedPanelsStorage = useStorage('rightPanels', layoutState.settings.fixedPanels)
+
+const changeLeftFixedPanels = (pluginName) => {
+  leftFixedPanelsStorage.value = leftFixedPanelsStorage.value?.includes(pluginName)
+    ? leftFixedPanelsStorage.value?.filter((item) => item !== pluginName)
+    : [...leftFixedPanelsStorage.value, pluginName]
+}
+const changeRightFixedPanels = (pluginName) => {
+  rightFixedPanelsStorage.value = rightFixedPanelsStorage.value?.includes(pluginName)
+    ? rightFixedPanelsStorage.value?.filter((item) => item !== pluginName)
+    : [...rightFixedPanelsStorage.value, pluginName]
+}
+
+const registerPluginApi = (api) => {
+  Object.assign(layoutState.plugins.api, api)
+}
+
+const getPluginApi = (pluginName) => {
+  const { plugins } = layoutState
+
+  return plugins.api[pluginName] || plugins.api
+}
 
 const getScale = () => layoutState.dimension.scale
 
@@ -66,6 +130,13 @@ const activeSetting = (name) => {
   })
 }
 
+const closeSetting = (forceClose) => {
+  const { settings } = layoutState
+  if (!settings.fixedPanels.includes(settings.render) || forceClose) {
+    settings.render = null
+  }
+}
+
 // 激活plugin面板并返回当前插件注册的Api
 const activePlugin = (name, noActiveRender) => {
   const { plugins } = layoutState
@@ -90,16 +161,180 @@ const closePlugin = (forceClose) => {
 const isEmptyPage = () => layoutState.pageStatus?.state === PAGE_STATUS.Empty
 
 export default () => {
+  let plugin = []
+
+  try {
+    const storedPlugin = localStorage.getItem('plugin')
+    if (storedPlugin) {
+      plugin = JSON.parse(storedPlugin)
+    }
+  } catch (error) {
+    throw new Error(error)
+  }
+
+  // 如果 plugin 不是一个数组，则将其重置为默认值
+  if (!Array.isArray(plugin)) {
+    plugin = []
+  }
+
+  const pluginStorageReactive = useStorage('plugin', plugin)
+
+  // 获取插件宽度
+  const getPluginWidth = (name) => pluginStorageReactive.value[name]?.width || 300
+
+  // 修改插件宽度
+  const changePluginWidth = (name, width, offset) => {
+    if (Object.prototype.hasOwnProperty.call(pluginStorageReactive.value, name)) {
+      pluginStorageReactive.value[name].width = width
+      pluginStorageReactive.value[name].offset = offset
+    } else {
+      pluginStorageReactive.value[name] = {
+        width
+      }
+    }
+  }
+
+  // 获取插件布局
+  const getPluginByLayout = (name) => pluginStorageReactive.value[name]?.align || 'leftTop'
+
+  // 获取某个布局（左上/左下/右上/右下）的插件名称列表
+  const getPluginsByLayout = (layout = 'all') => {
+    // 筛选出符合布局条件的插件名称
+    const pluginNames = Object.keys(pluginStorageReactive.value).filter(
+      (key) => pluginStorageReactive.value[key].align === layout || layout === 'all'
+    )
+
+    pluginNames.sort((a, b) => pluginStorageReactive.value[a].index - pluginStorageReactive.value[b].index)
+
+    return pluginNames
+  }
+
+  const getPluginById = (pluginList, pluginId) => {
+    return pluginList.find((item) => item.id === pluginId)
+  }
+
+  const getPluginsByPosition = (position, pluginList) => {
+    return getPluginsByLayout(position).map((pluginId) => getPluginById(pluginList, pluginId))
+  }
+
+  // 修改某个插件的布局
+  const changePluginLayout = (name, layout) => {
+    if (pluginStorageReactive.value[name]) {
+      pluginStorageReactive.value[name].align = layout
+    }
+  }
+
+  /**
+   * 拖拽后改变插件位置
+   * @param {*} from 插件的起始位置
+   * @param {*} to  插件的结束位置
+   * @param {*} oldIndex  插件的起始索引
+   * @param {*} newIndex 插件的结束索引
+   * @returns
+   */
+  const dragPluginLayout = (from, to, oldIndex, newIndex) => {
+    if (from === to && oldIndex === newIndex) return
+
+    const items = Object.values(pluginStorageReactive.value)
+    // 记录拖拽项
+    const movedItem = items.find((item) => item.align === from && item.index === oldIndex)
+
+    // 同一列表中的拖拽
+    if (from === to) {
+      if (oldIndex < newIndex) {
+        //往后移动
+        items.forEach((item) => {
+          if (item !== movedItem && item.align === from && item.index > oldIndex && item.index <= newIndex) {
+            item.index -= 1
+          }
+        })
+      } else {
+        //往前移动
+        items.forEach((item) => {
+          if (item !== movedItem && item.align === from && item.index >= newIndex && item.index < oldIndex) {
+            item.index += 1
+          }
+        })
+      }
+    } else {
+      // 跨列表拖拽
+      items.forEach((item) => {
+        if (item !== movedItem && item.align === from && item.index > oldIndex) {
+          item.index -= 1
+        }
+        if (item !== movedItem && item.align === to && item.index >= newIndex) {
+          item.index += 1
+        }
+      })
+    }
+
+    // 更新拖拽项的位置
+    if (movedItem) {
+      movedItem.align = to
+      movedItem.index = newIndex
+    }
+  }
+
+  //判断是否在同一侧
+  const isSameSide = (from, to) => {
+    const leftSide = [PLUGIN_POSITION.leftTop, PLUGIN_POSITION.leftBottom]
+    const rightSide = [PLUGIN_POSITION.rightTop, PLUGIN_POSITION.rightBottom]
+
+    const isLeft = leftSide.includes(from) && leftSide.includes(to)
+    const isRight = rightSide.includes(from) && rightSide.includes(to)
+
+    return isLeft || isRight
+  }
+
+  //获取插件显示状态
+  const getPluginShown = (name) => pluginStorageReactive.value[name]?.isShow
+
+  //修改插件显示状态
+  const changePluginShown = (name) => {
+    pluginStorageReactive.value[name].isShow = !pluginStorageReactive.value[name].isShow
+  }
+
+  const initPluginStorageReactive = (pluginList) => {
+    if (Object.keys(pluginStorageReactive.value).length) return
+    pluginStorageReactive.value = pluginList
+  }
+
   return {
+    initPluginStorageReactive,
     PLUGIN_NAME,
+    PLUGIN_POSITION,
     activeSetting,
+    closeSetting,
     activePlugin,
     closePlugin,
     layoutState,
     getScale,
     setDimension,
     getDimension,
+    registerPluginApi,
+    getPluginById,
+    getPluginApi,
+    pluginState,
     getPluginState,
-    isEmptyPage
+    isEmptyPage,
+    getPluginWidth,
+    changePluginWidth,
+    leftFixedPanelsStorage,
+    rightFixedPanelsStorage,
+    leftMenuShownStorage,
+    rightMenuShownStorage,
+    changeLeftFixedPanels,
+    changeRightFixedPanels,
+    getPluginsByLayout,
+    changePluginLayout,
+    getPluginByLayout,
+    dragPluginLayout,
+    isSameSide,
+    getPluginShown,
+    changePluginShown,
+    changeMenuShown,
+    getMoveDragBarState,
+    changeMoveDragBarState,
+    getPluginsByPosition
   }
 }
diff --git a/packages/plugins/block/meta.js b/packages/plugins/block/meta.js
index 01d507a79a..c61c1add69 100644
--- a/packages/plugins/block/meta.js
+++ b/packages/plugins/block/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.blockmanage',
   title: '区块管理',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-symbol'
 }
diff --git a/packages/plugins/block/src/BlockSetting.vue b/packages/plugins/block/src/BlockSetting.vue
index 95c3652ebc..4833e4e29b 100644
--- a/packages/plugins/block/src/BlockSetting.vue
+++ b/packages/plugins/block/src/BlockSetting.vue
@@ -3,6 +3,8 @@
     v-if="isOpen"
     class="plugin-block-setting"
     title="区块设置"
+    :align="align"
+    :fixed-name="PLUGIN_NAME.BlockManage"
     @mouseleave="onMouseLeave"
     @click="handleClick"
   >
@@ -86,7 +88,14 @@
 <script lang="jsx">
 import { reactive, ref, watch, watchEffect, computed } from 'vue'
 import { Button as TinyButton, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
-import { useModal, getMergeMeta, useBlock, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import {
+  useLayout,
+  useModal,
+  getMergeMeta,
+  useBlock,
+  getMetaApi,
+  META_SERVICE
+} from '@opentiny/tiny-engine-meta-register'
 import { BlockHistoryList, PluginSetting, CloseIcon, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
 import { previewBlock } from '@opentiny/tiny-engine-common/js/preview'
 import { LifeCycles } from '@opentiny/tiny-engine-common'
@@ -152,6 +161,9 @@ export default {
     })
     const blockConfigForm = ref(null)
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.BlockManage))
+
     const state = reactive({
       activeName: ['base', 'attribute', 'event', 'lifeCycle', 'history'],
       backupList: [],
@@ -277,6 +289,8 @@ export default {
     }
 
     return {
+      align,
+      PLUGIN_NAME,
       state,
       isOpen,
       showDeployBlockDialog,
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index ef8ae4d71f..a22989298e 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -1,129 +1,129 @@
 <template>
-  <div class="plugin-block">
-    <plugin-panel
-      class="block-manage"
-      title="区块管理"
-      :docsUrl="docsUrl"
-      :isShowDocsIcon="true"
-      :isCloseLeft="false"
-      @close="closePanel"
-    >
-      <template #header>
-        <svg-button name="add-page" placement="bottom" tips="新建区块" @click="openBlockAdd"></svg-button>
-      </template>
-      <template #content>
-        <div class="app-manage-type">
-          <tiny-select
-            ref="groupSelect"
-            v-model="state.categoryId"
-            popper-class="block-popper"
-            :placeholder="groupLabels.selectPlaceholder"
-            filterable
-            :filter-method="categoryFilter"
-            clearable
-            top-create
-            @top-create-click="createCategory"
-            @change="changeCategory"
-            @clear="changeCategory"
-            @visible-change="handleSelectVisibleChange"
-            class="search-select"
+  <plugin-panel
+    class="plugin-block"
+    title="区块管理"
+    :fixed-name="PLUGIN_NAME.BlockManage"
+    :fixedPanels="fixedPanels"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+    :isCloseLeft="false"
+    @close="closePanel"
+  >
+    <template #header>
+      <svg-button name="add-page" placement="bottom" tips="新建区块" @click="openBlockAdd"></svg-button>
+    </template>
+    <template #content>
+      <div class="app-manage-type">
+        <tiny-select
+          ref="groupSelect"
+          v-model="state.categoryId"
+          popper-class="block-popper"
+          :placeholder="groupLabels.selectPlaceholder"
+          filterable
+          :filter-method="categoryFilter"
+          clearable
+          top-create
+          @top-create-click="createCategory"
+          @change="changeCategory"
+          @clear="changeCategory"
+          @visible-change="handleSelectVisibleChange"
+          class="search-select"
+        >
+          <tiny-option
+            v-for="item in categoryList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+            class="block-group-option-item"
           >
-            <tiny-option
-              v-for="item in categoryList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-              class="block-group-option-item"
-            >
-              <div class="block-item">
-                <span>{{ item.name }}</span>
-                <div class="item-btns">
-                  <svg-button
-                    class="item-icon"
-                    name="to-edit"
-                    :hoverBgColor="false"
-                    @click.stop="editCategory(item)"
-                  ></svg-button>
-                  <tiny-popover
-                    :modelValue="state.currentDeleteGroupId === item.id"
-                    placement="right"
-                    trigger="manual"
-                    popper-class="block-category-option-popper-wrapper"
-                    @update:modelValue="handleChangeDeletePopoverVisible"
-                  >
-                    <div class="popper-confirm" @mousedown.stop="">
-                      <div class="popper-confirm-header">删除</div>
-                      <div class="popper-confirm-content">
-                        <span class="title">{{ groupLabels.deletePrompt }}</span>
-                      </div>
-                      <div class="popper-confirm-footer">
-                        <tiny-button class="cancel-btn" size="small" @click="handleShowDeleteModal(null)"
-                          >取消</tiny-button
-                        >
-                        <tiny-button class="confirm-btn" size="small" type="primary" @click="delCategory(item.id)"
-                          >确定</tiny-button
-                        >
-                      </div>
+            <div class="block-item">
+              <span>{{ item.name }}</span>
+              <div class="item-btns">
+                <svg-button
+                  class="item-icon"
+                  name="to-edit"
+                  :hoverBgColor="false"
+                  @click.stop="editCategory(item)"
+                ></svg-button>
+                <tiny-popover
+                  :modelValue="state.currentDeleteGroupId === item.id"
+                  placement="right"
+                  trigger="manual"
+                  popper-class="block-category-option-popper-wrapper"
+                  @update:modelValue="handleChangeDeletePopoverVisible"
+                >
+                  <div class="popper-confirm" @mousedown.stop="">
+                    <div class="popper-confirm-header">删除</div>
+                    <div class="popper-confirm-content">
+                      <span class="title">{{ groupLabels.deletePrompt }}</span>
                     </div>
-                    <template #reference>
-                      <svg-button
-                        v-if="!item.blocks.length"
-                        class="item-icon"
-                        name="delete"
-                        :hoverBgColor="false"
-                        @click.stop="handleShowDeleteModal(item.id)"
-                      ></svg-button>
-                    </template>
-                  </tiny-popover>
-                </div>
+                    <div class="popper-confirm-footer">
+                      <tiny-button class="cancel-btn" size="small" @click="handleShowDeleteModal(null)"
+                        >取消</tiny-button
+                      >
+                      <tiny-button class="confirm-btn" size="small" type="primary" @click="delCategory(item.id)"
+                        >确定</tiny-button
+                      >
+                    </div>
+                  </div>
+                  <template #reference>
+                    <svg-button
+                      v-if="!item.blocks.length"
+                      class="item-icon"
+                      name="delete"
+                      :hoverBgColor="false"
+                      @click.stop="handleShowDeleteModal(item.id)"
+                    ></svg-button>
+                  </template>
+                </tiny-popover>
               </div>
-            </tiny-option>
-          </tiny-select>
-        </div>
-        <div class="app-manage-search">
-          <tiny-search v-model="state.searchKey" placeholder="搜索">
-            <template #prefix>
-              <tiny-icon-search />
-            </template>
-          </tiny-search>
-        </div>
-        <div class="plugin-block-list">
-          <plugin-block-list
-            :data="state.blockList"
-            :isBlockManage="true"
-            :showBlockShot="true"
-            :blockStyle="state.layout"
-            default-icon-tip="查看区块"
-            :externalBlock="externalBlock"
-            @editBlock="editBlock"
-            @iconClick="openSettingPanel"
-          ></plugin-block-list>
-        </div>
-        <block-setting></block-setting>
-        <div class="block-footer">
-          <tiny-dropdown trigger="click" @item-click="changeType">
-            <span>
-              <span>{{ state.sortTypeLabel }}</span>
-            </span>
-            <template #dropdown>
-              <tiny-dropdown-menu
-                popper-class="my-class"
-                placement="top"
-                :options="state.sortOptions"
-              ></tiny-dropdown-menu>
-            </template>
-          </tiny-dropdown>
-          <block-group-arrange v-model="state.layout" :arrangeList="state.arrangeList"></block-group-arrange>
-        </div>
-      </template>
-    </plugin-panel>
-    <category-edit v-model="state.editVisible" :initialValue="state.groupInitialValue"></category-edit>
-    <save-new-block :boxVisibility="boxVisibility" @close="close"></save-new-block>
-  </div>
+            </div>
+          </tiny-option>
+        </tiny-select>
+      </div>
+      <div class="app-manage-search">
+        <tiny-search v-model="state.searchKey" placeholder="搜索">
+          <template #prefix>
+            <tiny-icon-search />
+          </template>
+        </tiny-search>
+      </div>
+      <div class="plugin-block-list">
+        <plugin-block-list
+          :data="state.blockList"
+          :isBlockManage="true"
+          :showBlockShot="true"
+          :blockStyle="state.layout"
+          default-icon-tip="查看区块"
+          :externalBlock="externalBlock"
+          @editBlock="editBlock"
+          @iconClick="openSettingPanel"
+        ></plugin-block-list>
+      </div>
+      <block-setting></block-setting>
+      <div class="block-footer">
+        <tiny-dropdown trigger="click" @item-click="changeType">
+          <span>
+            <span>{{ state.sortTypeLabel }}</span>
+          </span>
+          <template #dropdown>
+            <tiny-dropdown-menu
+              popper-class="my-class"
+              placement="top"
+              :options="state.sortOptions"
+            ></tiny-dropdown-menu>
+          </template>
+        </tiny-dropdown>
+        <block-group-arrange v-model="state.layout" :arrangeList="state.arrangeList"></block-group-arrange>
+      </div>
+    </template>
+  </plugin-panel>
+  <category-edit v-model="state.editVisible" :initialValue="state.groupInitialValue"></category-edit>
+  <save-new-block :boxVisibility="boxVisibility" @close="close"></save-new-block>
 </template>
 
 <script lang="jsx">
-import { ref, reactive, computed, watch } from 'vue'
+import { ref, reactive, computed, watch, provide } from 'vue'
 import {
   Search as TinySearch,
   Select as TinySelect,
@@ -217,8 +217,12 @@ export default {
     TinyButton,
     TinyIconSearch: IconSearch()
   },
-
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     const docsUrl = useHelp().getDocsUrl('block')
     const { getBlockList, sort } = useBlock()
     const { isSaved } = useCanvas()
@@ -266,6 +270,14 @@ export default {
 
     const groupSelect = ref(null)
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+
+    provide('panelState', panelState)
+
     watch(
       () => [getBlockList(), state.searchKey, state.publishFilterType],
       () => {
@@ -423,6 +435,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       groupSelect,
       categoryList,
@@ -458,7 +471,7 @@ export default {
 }
 .app-manage-type {
   padding: 0 10px;
-  margin: 12px 0;
+  margin-bottom: 12px;
   display: flex;
   .search-select {
     flex: 1;
diff --git a/packages/plugins/bridge/meta.js b/packages/plugins/bridge/meta.js
index 503e2e0a1f..7e458b3278 100644
--- a/packages/plugins/bridge/meta.js
+++ b/packages/plugins/bridge/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.bridge',
   title: '资源管理',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-sresources'
 }
diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
index 0896a038eb..be222b88c9 100644
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <plugin-setting v-if="isOpen">
+  <plugin-setting v-if="isOpen" :align="align" :fixed-name="PLUGIN_NAME.Bridge">
     <template #title>
       <div class="title-wrap">
         <span>{{ state.title }}</span>
@@ -112,7 +112,7 @@ import {
   getResourceNamesByType
 } from './js/resource'
 import { VueMonaco as MonacoEditor, PluginSetting, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
-import { useModal, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useModal, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 
 const isOpen = ref(false)
@@ -151,6 +151,9 @@ export default {
     }
     const { confirm } = useModal()
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Bridge))
+
     const state = reactive({
       resource: computed(() => getResource()),
       name: '',
@@ -273,6 +276,8 @@ export default {
     }
 
     return {
+      align,
+      PLUGIN_NAME,
       rules,
       resourceForm,
       editor,
diff --git a/packages/plugins/bridge/src/Main.vue b/packages/plugins/bridge/src/Main.vue
index 4383c3d3b4..36cb43de08 100644
--- a/packages/plugins/bridge/src/Main.vue
+++ b/packages/plugins/bridge/src/Main.vue
@@ -1,5 +1,12 @@
 <template>
-  <plugin-panel title="资源管理" class="plugin-bridge" :isCloseLeft="false" @close="closePanel">
+  <plugin-panel
+    title="资源管理"
+    class="plugin-bridge"
+    :fixed-name="PLUGIN_NAME.Bridge"
+    :fixedPanels="fixedPanels"
+    :isCloseLeft="false"
+    @close="closePanel"
+  >
     <template #header>
       <svg-button name="add-utils" placement="left" :tips="tips" @click="addResource('npm')"></svg-button>
     </template>
@@ -11,8 +18,9 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue'
+import { ref, reactive, computed, provide } from 'vue'
 import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
 import { RESOURCE_TYPE } from './js/resource'
 import BridgeManage from './BridgeManage.vue'
 import BridgeSetting, { openPanel, closePanel } from './BridgeSetting.vue'
@@ -25,11 +33,23 @@ export default {
     BridgeManage,
     BridgeSetting
   },
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     const activedName = ref(RESOURCE_TYPE.Util)
     const utilsRef = ref(null)
     const tips = computed(() => RESOURCE_TIP[activedName.value])
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const openBridgePanel = () => {
       openPanel()
     }
@@ -43,6 +63,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       addResource,
       RESOURCE_TYPE,
       activedName,
diff --git a/packages/plugins/datasource/meta.js b/packages/plugins/datasource/meta.js
index 085544ded0..73d0dd0d73 100644
--- a/packages/plugins/datasource/meta.js
+++ b/packages/plugins/datasource/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.collections',
   title: '数据源',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-data'
 }
diff --git a/packages/plugins/datasource/src/DataSourceForm.vue b/packages/plugins/datasource/src/DataSourceForm.vue
index d36c358883..f3ec2faf34 100644
--- a/packages/plugins/datasource/src/DataSourceForm.vue
+++ b/packages/plugins/datasource/src/DataSourceForm.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-setting v-if="isOpen" title="设置数据源" class="data-source-form">
+  <plugin-setting
+    v-if="isOpen"
+    title="设置数据源"
+    :fixed-name="PLUGIN_NAME.Collections"
+    :align="align"
+    class="data-source-form plugin-datasource"
+  >
     <template #header>
       <button-group>
         <tiny-button class="field-save" type="primary" @click="save">保存</tiny-button>
@@ -27,7 +33,7 @@
 </template>
 
 <script lang="jsx">
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref, watch, computed } from 'vue'
 import { Form, Button } from '@opentiny/vue'
 import { ButtonGroup, PluginSetting, SvgButton } from '@opentiny/tiny-engine-common'
 import DataSourceType from './DataSourceType.vue'
@@ -41,7 +47,14 @@ import {
   requestDeleteDataSource,
   requestGenerateDataSource
 } from './js/http'
-import { useModal, useDataSource, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import {
+  useLayout,
+  useModal,
+  useDataSource,
+  useNotify,
+  getMetaApi,
+  META_SERVICE
+} from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
 
 const isOpen = ref(false)
@@ -84,6 +97,9 @@ export default {
       dataSource: {}
     })
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))
+
     watch(
       () => state.dataSource.name,
       (value) => {
@@ -131,7 +147,8 @@ export default {
 
         dataSourceState.dataSourceColumn = { name, type: type || 'array', columns: filterColumns }
         dataSourceState.dataSourceColumnCopies = extend(true, {}, dataSourceState.dataSourceColumn)
-      }
+      },
+      { immediate: true }
     )
 
     const closeAllPanel = () => {
@@ -240,6 +257,8 @@ export default {
     }
 
     return {
+      align,
+      PLUGIN_NAME,
       state,
       isOpen,
       save,
diff --git a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
index 1cfc9d7a83..769bfa536e 100644
--- a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
+++ b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
@@ -1,6 +1,12 @@
 <template>
   <div v-if="isOpen" class="global-data-handler">
-    <plugin-setting title="全局设置" @cancel="close" @save="saveGlobalDataHandle">
+    <plugin-setting
+      title="全局设置"
+      :align="align"
+      :fixed-name="PLUGIN_NAME.Collections"
+      @cancel="close"
+      @save="saveGlobalDataHandle"
+    >
       <template #content>
         <tiny-collapse v-model="activeNames">
           <tiny-collapse-item title="请求参数处理函数（willFetch）" name="willFetch">
@@ -20,9 +26,9 @@
 
 <script>
 import DataHandlerEditor from './RemoteDataAdapterForm.vue'
-import { watch, ref, nextTick, reactive } from 'vue'
+import { watch, ref, nextTick, reactive, computed } from 'vue'
 import { requestGlobalDataHandler } from './js/http'
-import { useModal, useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useModal, useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import { Collapse, CollapseItem } from '@opentiny/vue'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -48,6 +54,9 @@ export default {
   setup() {
     const { confirm } = useModal()
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))
+
     const state = reactive({
       dataHandlerValue: useResource().appSchemaState?.dataHandler?.value,
       willFetchValue: useResource().appSchemaState.willFetch?.value,
@@ -88,6 +97,8 @@ export default {
     )
 
     return {
+      align,
+      PLUGIN_NAME,
       isOpen,
       close,
       saveGlobalDataHandle,
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index 11ede61f27..67871415da 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -3,6 +3,8 @@
     v-if="isOpen"
     :is-icon-button="false"
     :showIfFullScreen="true"
+    :fixed-name="PLUGIN_NAME.Collections"
+    :align="align"
     title="静态数据管理"
     class="datasource-record-list"
     @cancel="closeRecordList"
@@ -122,7 +124,8 @@ export default {
     const grid = ref(null)
     const { confirm } = useModal()
     const { toClipboard } = useClipboard()
-    const { layoutState } = useLayout()
+    const { layoutState, PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))
 
     const state = reactive({
       totalData: [],
@@ -559,6 +562,8 @@ export default {
     }
 
     return {
+      align,
+      PLUGIN_NAME,
       isOpen,
       state,
       grid,
diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
index da43728331..a2f8d73c4c 100644
--- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue
+++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
@@ -2,8 +2,9 @@
   <div class="remote">
     <plugin-setting
       title="获取远程字段"
-      class="remote-setting"
+      class="remote-setting plugin-datasource"
       :isSecond="true"
+      :align="align"
       @cancel="closePanel"
       @save="saveRemote"
     >
@@ -52,7 +53,7 @@
 </template>
 
 <script>
-import { reactive, watch, ref } from 'vue'
+import { reactive, watch, ref, computed } from 'vue'
 import { Collapse, CollapseItem, Tabs, TabItem, Button } from '@opentiny/vue'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import DataSourceRemoteForm, { getServiceForm } from './DataSourceRemoteForm.vue'
@@ -61,7 +62,7 @@ import DataSourceRemoteAutoload from './DataSourceRemoteAutoload.vue'
 import DataSourceRemoteAdapter from './DataSourceRemoteDataAdapter.vue'
 import DataSrouceRemoteDataResult, { getResponseData } from './DataSourceRemoteDataResult.vue'
 import { open as openRemoteMapping } from './DataSourceRemoteMapping.vue'
-import { useDataSource, useNotify } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useDataSource, useNotify } from '@opentiny/tiny-engine-meta-register'
 import { isEmptyObject } from '@opentiny/vue-renderless/common/type'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { getRequest } from './js/datasource'
@@ -114,6 +115,9 @@ export default {
     const dataSourceRemoteAdapteRef = ref(null)
     const { dataSourceState } = useDataSource()
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))
+
     const state = reactive({
       remoteData: { options: {} },
       activeName: ['excute', 'result'],
@@ -221,6 +225,7 @@ export default {
     }
 
     return {
+      align,
       state,
       dataSourceRemoteAdapteRef,
       closePanel: close,
diff --git a/packages/plugins/datasource/src/Main.vue b/packages/plugins/datasource/src/Main.vue
index 8f23aff93e..848a9cb36a 100644
--- a/packages/plugins/datasource/src/Main.vue
+++ b/packages/plugins/datasource/src/Main.vue
@@ -1,62 +1,67 @@
 <template>
-  <div class="plugin-datasource">
-    <plugin-panel title="数据源">
-      <template #header>
-        <link-button :href="docsUrl"></link-button>
-        <svg-button
-          class="set-data-source"
-          tips="全局设置"
-          name="global-setting"
-          @click="openGlobalDataHanderPanel"
-        ></svg-button>
-        <svg-button
-          class="refresh-data-source"
-          tips="刷新数据源"
-          name="flow-refresh"
-          @click="refreshDataSource"
-        ></svg-button>
-      </template>
-      <template #content>
-        <tiny-button class="add-data-source" @click="openDataSourceFormPanel()">
-          <svg-icon name="add"></svg-icon>添加数据源
-        </tiny-button>
-        <data-source-list @edit="openDataSourceFormPanel"></data-source-list>
-      </template>
-    </plugin-panel>
-    <data-source-remote-panel
-      v-if="isOpenRemotePanel"
-      v-model="state.currentDataSource.data"
-      :editable="state.editable"
-      @confirm="getRomoteReponseData"
-    ></data-source-remote-panel>
-    <data-source-form
-      v-model="state.currentDataSource"
-      :editable="state.editable"
-      @save="refreshDataSource"
-    ></data-source-form>
-    <data-source-remote-mapping
-      v-if="isOpenSourceRemoteMapping"
-      v-model="state.remoteFields"
-      :data="state.remoteResponData"
-    ></data-source-remote-mapping>
-    <data-source-global-data-handler></data-source-global-data-handler>
-  </div>
+  <plugin-panel
+    title="数据源"
+    class="plugin-datasource"
+    :fixed-name="PLUGIN_NAME.Collections"
+    :fixedPanels="fixedPanels"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+    @close="$emit('close')"
+  >
+    <template #header>
+      <svg-button
+        class="set-data-source"
+        tips="全局设置"
+        name="global-setting"
+        @click="openGlobalDataHanderPanel"
+      ></svg-button>
+      <svg-button
+        class="refresh-data-source"
+        tips="刷新数据源"
+        name="flow-refresh"
+        @click="refreshDataSource"
+      ></svg-button>
+    </template>
+    <template #content>
+      <tiny-button class="add-data-source" @click="openDataSourceFormPanel()">
+        <svg-icon name="add"></svg-icon>添加数据源
+      </tiny-button>
+      <data-source-list @edit="openDataSourceFormPanel"></data-source-list>
+    </template>
+  </plugin-panel>
+  <data-source-remote-panel
+    v-if="isOpenRemotePanel"
+    v-model="state.currentDataSource.data"
+    :editable="state.editable"
+    @confirm="getRomoteReponseData"
+  ></data-source-remote-panel>
+  <data-source-form
+    v-model="state.currentDataSource"
+    :editable="state.editable"
+    @save="refreshDataSource"
+  ></data-source-form>
+  <data-source-remote-mapping
+    v-if="isOpenSourceRemoteMapping"
+    v-model="state.remoteFields"
+    :data="state.remoteResponData"
+  ></data-source-remote-mapping>
+  <data-source-global-data-handler></data-source-global-data-handler>
 </template>
 
 <script>
-import { reactive, watch } from 'vue'
+import { reactive, watch, provide } from 'vue'
 import { Button } from '@opentiny/vue'
 import DataSourceList, { refresh as refreshDataSourceList, clearActive } from './DataSourceList.vue'
 import DataSourceRemotePanel, {
   close as closeRemotePanel,
   isOpen as isOpenRemotePanel
 } from './DataSourceRemotePanel.vue'
-import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import DataSourceForm, { open as openDataSourceForm, close as closeDataSourceForm } from './DataSourceForm.vue'
 import { close as closeRecordList } from './DataSourceRecordList.vue'
 import { close as closeRecordForm } from './DataSourceRecordForm.vue'
 import DataSourceRemoteMapping, { isOpen as isOpenSourceRemoteMapping } from './DataSourceRemoteMapping.vue'
-import { useDataSource, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { useDataSource, useHelp, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { requestUpdateDataSource } from './js/http'
 import DataSourceGlobalDataHandler, {
   open as openGlobalDataHander,
@@ -72,10 +77,14 @@ export default {
     DataSourceGlobalDataHandler,
     PluginPanel,
     DataSourceForm,
-    SvgButton,
-    LinkButton
+    SvgButton
   },
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     const docsUrl = useHelp().getDocsUrl('datasource')
     const state = reactive({
       editable: true,
@@ -84,6 +93,14 @@ export default {
       remoteResponData: {}
     })
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+
+    provide('panelState', panelState)
+
     const { dataSourceState, saveDataSource } = useDataSource()
 
     watch(
@@ -134,6 +151,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       open,
       isOpenRemotePanel,
@@ -153,6 +171,7 @@ export default {
 }
 .add-data-source {
   margin: 0 12px 12px 12px;
+  width: calc(100% - 24px);
 }
 :deep(.help-box) {
   position: absolute;
diff --git a/packages/plugins/help/meta.ts b/packages/plugins/help/meta.ts
index 29507c619b..67776688f8 100644
--- a/packages/plugins/help/meta.ts
+++ b/packages/plugins/help/meta.ts
@@ -2,8 +2,8 @@ import HelpIcon from './src/HelpIcon.vue'
 
 export default {
   id: 'engine.plugins.editorhelp',
-  title: '',
+  title: '帮助',
   type: 'plugins',
   icon: HelpIcon,
-  align: 'bottom'
+  align: 'leftBottom'
 }
diff --git a/packages/plugins/help/src/HelpIcon.vue b/packages/plugins/help/src/HelpIcon.vue
index fdffa0db84..eaeeca8dcc 100644
--- a/packages/plugins/help/src/HelpIcon.vue
+++ b/packages/plugins/help/src/HelpIcon.vue
@@ -154,7 +154,7 @@ export default {
       {
         title: '组件设置',
         text: '拖拽至画布中的组件或区块，在这里进行属性、样式、事件绑定等众多高级配置；',
-        domElement: '#tiny-right-panel',
+        domElement: '#rightTop',
         classes: 'lwocode-guide-toolbar-right',
         popPosition: 'left',
         button: [
diff --git a/packages/plugins/i18n/meta.js b/packages/plugins/i18n/meta.js
index 48221b3312..d58ebe9901 100644
--- a/packages/plugins/i18n/meta.js
+++ b/packages/plugins/i18n/meta.js
@@ -2,6 +2,7 @@ export default {
   id: 'engine.plugins.i18n',
   title: '国际化',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
+  width: 600,
   icon: 'plugin-icon-i18n'
 }
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index 754faf8ba9..dac6ca4413 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -1,5 +1,13 @@
 <template>
-  <plugin-panel title="国际化资源" :docsUrl="docsUrl" :isShowDocsIcon="true" :isCloseLeft="false" class="plugin-i18n">
+  <plugin-panel
+    title="国际化资源"
+    :fixed-name="PLUGIN_NAME.I18n"
+    :fixedPanels="fixedPanels"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+    :isCloseLeft="false"
+    class="plugin-i18n"
+  >
     <template #content>
       <div class="language-search-box">
         <tiny-select v-model="currentSearchType" :options="i18nSearchTypes"></tiny-select>
@@ -113,12 +121,19 @@
 </template>
 
 <script lang="jsx">
-import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveComponent, watch } from 'vue'
+import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveComponent, watch, provide } from 'vue'
 import useClipboard from 'vue-clipboard3'
 import { Grid, GridColumn, Input, Popover, Button, FileUpload, Loading, Tooltip, Select } from '@opentiny/vue'
 import { iconLoadingShadow, iconUpload } from '@opentiny/vue-icon'
 import { PluginPanel, SearchEmpty } from '@opentiny/tiny-engine-common'
-import { useTranslate, useModal, useHelp, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import {
+  useTranslate,
+  useModal,
+  useHelp,
+  getMetaApi,
+  META_SERVICE,
+  useLayout
+} from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { utils, constants } from '@opentiny/tiny-engine-utils'
 import { BASE_URL } from '@opentiny/tiny-engine-common/js/environments'
@@ -138,7 +153,12 @@ export default {
     SearchEmpty,
     IconUpload: iconUpload()
   },
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     // 组件库iconLoadingShadow图标不能切换颜色，因此不同主题用不同icon
     const SvgIcon = resolveComponent('SvgIcon')
     const lightSpinnerIcon = iconLoadingShadow()
@@ -146,6 +166,13 @@ export default {
     const isLightTheme = getMergeMeta('engine.config').theme === 'light'
     const { getLangs, i18nResource, currentLanguage, getI18nData } = useTranslate()
     const { toClipboard } = useClipboard()
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const fullLangList = computed(() => {
       const langs = getLangs()
 
@@ -392,6 +419,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       sortTypeChanges,
       currentSearchType,
       i18nSearchTypes,
diff --git a/packages/plugins/materials/meta.js b/packages/plugins/materials/meta.js
index 8088f738b7..70e2309779 100644
--- a/packages/plugins/materials/meta.js
+++ b/packages/plugins/materials/meta.js
@@ -3,5 +3,5 @@ export default {
   title: '物料',
   type: 'plugins',
   icon: 'plugin-icon-materials',
-  align: 'top'
+  align: 'leftTop'
 }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index 3a195699b4..7077bb87af 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -1,5 +1,12 @@
 <template>
-  <plugin-setting v-if="panel.show" :title="validGroup.groupName" @cancel="closeGroupPanel" @save="addBlocks">
+  <plugin-setting
+    v-if="panel.show"
+    :align="align"
+    :title="validGroup.groupName"
+    :fixed-name="PLUGIN_NAME.Materials"
+    @cancel="closeGroupPanel"
+    @save="addBlocks"
+  >
     <template #content>
       <div class="block-add-content">
         <div class="block-add-content-title">区块列表</div>
@@ -27,12 +34,13 @@
   </plugin-setting>
 </template>
 <script>
-import { reactive, watch, provide, inject, ref } from 'vue'
+import { reactive, watch, provide, inject, ref, computed } from 'vue'
 import { Search } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import {
   useBlock,
+  useLayout,
   useModal,
   useResource,
   useNotify,
@@ -117,6 +125,9 @@ export default {
 
     const validGroup = ref({ ...selectedGroup.value })
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Materials))
+
     watch(
       () => selectedGroup.value.groupId,
       (groupId) => {
@@ -271,12 +282,14 @@ export default {
     })
 
     return {
+      align,
       validGroup,
       state,
       panel,
       closeGroupPanel,
       addBlocks,
-      searchBlocks
+      searchBlocks,
+      PLUGIN_NAME
     }
   }
 }
diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
index 6e39252c4d..1874dd5a77 100644
--- a/packages/plugins/materials/src/meta/layout/src/Main.vue
+++ b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -1,13 +1,10 @@
 <template>
-  <plugin-panel :title="shortcut ? '' : title" @close="$emit('close')">
-    <template #header>
-      <component
-        v-if="!onlyShowDefault"
-        :is="registryData?.components?.header"
-        :fixedPanels="fixedPanels"
-        @fix-panel="(id) => $emit('fix-panel', id)"
-      ></component>
-    </template>
+  <plugin-panel
+    :title="shortcut ? '' : title"
+    :fixed-name="PLUGIN_NAME.Materials"
+    :fixedPanels="fixedPanels"
+    @close="$emit('close')"
+  >
     <template #content>
       <tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" v-if="!onlyShowDefault">
         <tiny-tab-item :key="item.id" v-for="item in tabComponents" :title="item.title" :name="item.id">
@@ -23,7 +20,7 @@
 <script>
 import { reactive, provide, ref, computed } from 'vue'
 import { Tabs, TabItem } from '@opentiny/vue'
-import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
+import { META_APP as PLUGIN_NAME, getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel } from '@opentiny/tiny-engine-common'
 
 export default {
@@ -83,6 +80,7 @@ export default {
     const title = ref(props.registryData?.title)
 
     return {
+      PLUGIN_NAME,
       title,
       activeName,
       defaultComponent,
diff --git a/packages/plugins/page/meta.js b/packages/plugins/page/meta.js
index 28d15c21fd..dc415e75ec 100644
--- a/packages/plugins/page/meta.js
+++ b/packages/plugins/page/meta.js
@@ -3,5 +3,5 @@ export default {
   title: '页面',
   type: 'plugins',
   icon: 'plugin-icon-page',
-  align: 'top'
+  align: 'leftTop'
 }
diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index e295281414..6fe021de5b 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -1,44 +1,50 @@
 <template>
-  <div class="plugin-page">
-    <plugin-panel :title="title" @close="pluginPanelClosed" :docsUrl="docsUrl" :isShowDocsIcon="true">
-      <template #header>
-        <svg-button
-          class="add-folder-icon"
-          name="add-folder"
-          placement="bottom"
-          tips="新建文件夹"
-          @click="createNewFolder()"
-        ></svg-button>
-        <svg-button
-          class="new-page-icon"
-          name="new-page"
-          placement="bottom"
-          tips="新建页面"
-          @click="createNewPage('staticPages')"
-        ></svg-button>
-      </template>
-
-      <template #content>
-        <page-tree
-          ref="pageTreeRef"
-          :isFolder="state.isFolder"
-          @add="createNewPage('publicPages')"
-          @openSettingPanel="openSettingPanel"
-          @createPage="createNewPage"
-          @createFolder="createNewFolder"
-        ></page-tree>
-      </template>
-    </plugin-panel>
-
-    <page-setting :isFolder="state.isFolder" @openNewPage="openNewPage"></page-setting>
-
-    <page-folder-setting :isFolder="state.isFolder"></page-folder-setting>
-  </div>
+  <plugin-panel
+    :title="title"
+    :fixed-name="PLUGIN_NAME.AppManage"
+    :fixedPanels="fixedPanels"
+    @close="pluginPanelClosed"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+    class="plugin-page"
+  >
+    <template #header>
+      <svg-button
+        class="add-folder-icon"
+        name="add-folder"
+        placement="bottom"
+        tips="新建文件夹"
+        @click="createNewFolder()"
+      ></svg-button>
+      <svg-button
+        class="new-page-icon"
+        name="new-page"
+        placement="bottom"
+        tips="新建页面"
+        @click="createNewPage('staticPages')"
+      ></svg-button>
+    </template>
+
+    <template #content>
+      <page-tree
+        ref="pageTreeRef"
+        :isFolder="state.isFolder"
+        @add="createNewPage('publicPages')"
+        @openSettingPanel="openSettingPanel"
+        @createPage="createNewPage"
+        @createFolder="createNewFolder"
+      ></page-tree>
+    </template>
+  </plugin-panel>
+
+  <page-setting :isFolder="state.isFolder" @openNewPage="openNewPage"></page-setting>
+
+  <page-folder-setting :isFolder="state.isFolder"></page-folder-setting>
 </template>
 
 <script lang="jsx">
 import { reactive, ref, watchEffect, provide } from 'vue'
-import { useCanvas, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, usePage, useHelp, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
@@ -69,12 +75,23 @@ export default {
     title: {
       type: String,
       default: '页面'
+    },
+    fixedPanels: {
+      type: Array
     }
   },
-  setup() {
+  setup(props, { emit }) {
     const { pageState } = useCanvas()
     const { pageSettingState, getDefaultPage, isTemporaryPage, initCurrentPageData } = usePage()
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+
+    provide('panelState', panelState)
+
     const pageTreeRef = ref(null)
     const ROOT_ID = pageSettingState.ROOT_ID
     const docsUrl = useHelp().getDocsUrl('page')
@@ -158,6 +175,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       pageState,
       openNewPage,
diff --git a/packages/plugins/page/src/PageFolderSetting.vue b/packages/plugins/page/src/PageFolderSetting.vue
index 747ed358d1..a4be61f2fe 100644
--- a/packages/plugins/page/src/PageFolderSetting.vue
+++ b/packages/plugins/page/src/PageFolderSetting.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-setting v-if="isShow" :title="state.title" class="pageFolder-plugin-setting">
+  <plugin-setting
+    v-if="isShow"
+    :fixed-name="PLUGIN_NAME.AppManage"
+    :align="align"
+    :title="state.title"
+    class="pageFolder-plugin-setting"
+  >
     <template #header>
       <button-group>
         <tiny-button type="primary" @click="saveFolderSetting">保存</tiny-button>
@@ -27,11 +33,12 @@
 </template>
 
 <script>
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { Button, Collapse, CollapseItem } from '@opentiny/vue'
 import { PluginSetting, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
 import {
   usePage,
+  useLayout,
   useModal,
   useNotify,
   getMergeRegistry,
@@ -83,6 +90,9 @@ export default {
     const pageGeneral = registry.components.PageGeneral
     const folderGeneralRef = ref(null)
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.AppManage))
+
     const closeFolderSetting = () => {
       if (isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)) {
         closeFolderSettingPanel()
@@ -197,6 +207,8 @@ export default {
     }
 
     return {
+      align,
+      PLUGIN_NAME,
       saveFolderSetting,
       deleteFolder: throttle(5000, true, deleteFolder),
       pageGeneral,
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index 52010f030c..edba8510d4 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-setting v-if="isShow" :title="state.title" class="page-plugin-setting">
+  <plugin-setting
+    v-if="isShow"
+    :fixed-name="PLUGIN_NAME.AppManage"
+    :align="align"
+    :title="state.title"
+    class="page-plugin-setting"
+  >
     <template #header>
       <button-group>
         <tiny-button type="primary" @click="savePageSetting">保存</tiny-button>
@@ -54,7 +60,7 @@
 </template>
 
 <script lang="jsx">
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { Button, Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { PluginSetting, ButtonGroup, SvgButton, LifeCycles } from '@opentiny/tiny-engine-common'
 import {
@@ -136,6 +142,9 @@ export default {
     const beforeCreatePage = registry?.options?.beforeCreatePage
     const pageGeneralRef = ref(null)
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.AppManage))
+
     const state = reactive({
       activeName: Object.values(PAGE_SETTING_SESSION),
       title: '页面设置',
@@ -381,6 +390,8 @@ export default {
     }
 
     return {
+      align,
+      PLUGIN_NAME,
       state,
       isShow,
       savePageSetting,
diff --git a/packages/plugins/robot/meta.js b/packages/plugins/robot/meta.js
index 4483a3521f..7fcc14f46f 100644
--- a/packages/plugins/robot/meta.js
+++ b/packages/plugins/robot/meta.js
@@ -5,5 +5,5 @@ export default {
   title: 'AI对话框',
   type: 'plugins',
   icon: RobotIcon,
-  align: 'bottom'
+  align: 'leftBottom'
 }
diff --git a/packages/plugins/schema/meta.js b/packages/plugins/schema/meta.js
index c40473cb66..8b010fb8b5 100644
--- a/packages/plugins/schema/meta.js
+++ b/packages/plugins/schema/meta.js
@@ -3,5 +3,6 @@ export default {
   title: '页面 Schema',
   type: 'plugins',
   icon: 'plugin-icon-page-schema',
-  align: 'bottom'
+  align: 'leftBottom',
+  width: 600
 }
diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index 6ab86bf9a3..ee167ac2f6 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -1,45 +1,49 @@
 <template>
-  <div id="source-code" class="plugin-schema">
-    <div class="source-code-header">
-      <div class="title">页面Schema</div>
-      <div class="header-title">
-        <!-- 暂时放开schema录入功能，等画布功能完善后，再打开下面一行的注释 -->
-        <!-- <tiny-popover v-if="isEdit" placement="bottom" trigger="hover" append-to-body content="保存"> -->
-        <span class="icon-wrap" @click="saveSchema">
-          <i v-show="!showRed" class="red"></i>
-          <tiny-button type="primary">保存</tiny-button>
-        </span>
-        <tiny-popover v-show="false" placement="bottom" trigger="hover" append-to-body content="导入 Schema">
-          <template #reference>
-            <span class="icon-wrap">
-              <icon-download-link></icon-download-link>
-            </span>
-          </template>
-        </tiny-popover>
-        <close-icon @close="close"></close-icon>
+  <plugin-panel
+    id="source-code"
+    title="页面 Schema"
+    :fixed-name="PLUGIN_NAME.Schema"
+    :fixedPanels="fixedPanels"
+    @close="close"
+    class="plugin-schema"
+  >
+    <template #header>
+      <span class="icon-wrap">
+        <i v-show="!showRed" class="red"></i>
+        <tiny-button type="primary" @click="saveSchema">保存</tiny-button>
+      </span>
+      <tiny-popover v-show="false" placement="bottom" trigger="hover" append-to-body content="导入 Schema">
+        <template #reference>
+          <span class="icon-wrap">
+            <icon-download-link></icon-download-link>
+          </span>
+        </template>
+      </tiny-popover>
+    </template>
+
+    <template #content>
+      <div class="source-code-content">
+        <monaco-editor
+          ref="container"
+          class="code-edit-content"
+          :value="state.pageData"
+          :options="options"
+          @change="editorChange"
+          @shortcutSave="saveSchema"
+        ></monaco-editor>
       </div>
-    </div>
-    <div class="source-code-content">
-      <monaco-editor
-        ref="container"
-        class="code-edit-content"
-        :value="state.pageData"
-        :options="options"
-        @change="editorChange"
-        @shortcutSave="saveSchema"
-      ></monaco-editor>
-    </div>
-    <div class="source-code-footer">
-      <button>导入 Schema</button>
-    </div>
-  </div>
+      <div class="source-code-footer">
+        <button>导入 Schema</button>
+      </div>
+    </template>
+  </plugin-panel>
 </template>
 
 <script lang="jsx">
-import { nextTick, reactive, getCurrentInstance, onActivated, ref, onDeactivated } from 'vue'
+import { nextTick, reactive, getCurrentInstance, onActivated, ref, onDeactivated, provide } from 'vue'
 import { Popover, Button } from '@opentiny/vue'
-import { VueMonaco, CloseIcon } from '@opentiny/tiny-engine-common'
-import { useCanvas, useModal, useNotify, useMessage } from '@opentiny/tiny-engine-meta-register'
+import { VueMonaco, PluginPanel } from '@opentiny/tiny-engine-common'
+import { useCanvas, useModal, useNotify, useMessage, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { iconDownloadLink } from '@opentiny/vue-icon'
 import { useThrottleFn } from '@vueuse/core'
@@ -51,9 +55,14 @@ export default {
     MonacoEditor: VueMonaco,
     TinyPopover: Popover,
     TinyButton: Button,
-    CloseIcon,
+    PluginPanel,
     IconDownloadLink: iconDownloadLink()
   },
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
   setup(props, { emit }) {
     const app = getCurrentInstance()
     const { pageState } = useCanvas()
@@ -63,6 +72,13 @@ export default {
     })
     const { subscribe, unsubscribe } = useMessage()
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const isEdit = false
     const showRed = ref(true)
 
@@ -148,6 +164,7 @@ export default {
     })
 
     return {
+      PLUGIN_NAME,
       state,
       isEdit,
       saveSchema,
@@ -169,57 +186,35 @@ export default {
 
 <style lang="less" scoped>
 #source-code {
-  width: 50vw;
-  height: calc(100% - var(--base-top-panel-height));
-  padding: 12px 0;
-  position: fixed;
-  top: var(--base-top-panel-height);
-  left: 41px;
-  background: var(--te-schema-panel-bg-color);
   box-shadow: 6px 0px 3px 0px var(--te-schema-panel-shadow-color);
   z-index: 1000;
-  .source-code-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--te-schema-common-border-color);
-    margin-bottom: 12px;
-    padding: 0 12px 12px;
-  }
-  .title {
-    color: var(--te-schema-panel-title-text-color);
-    font-weight: var(--te-base-font-weight-bold);
-  }
-  .header-title {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .icon-wrap {
-      position: relative;
-      .tiny-button {
-        min-width: 40px;
-        margin-right: 2px;
-        height: 24px;
-        line-height: 24px;
-      }
-      .red {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background-color: var(--te-schema-dot-color);
-        display: block;
-        z-index: 100;
-        position: absolute;
-        top: -3px;
-        right: -4px;
-      }
+
+  .icon-wrap {
+    position: relative;
+    margin-right: 6px;
+
+    .tiny-button {
+      min-width: 40px;
+      margin-right: 2px;
+      height: 24px;
+      line-height: 24px;
     }
-    & > span:not(:last-child) {
-      margin-right: 8px;
+
+    .red {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: var(--te-schema-dot-color);
+      display: block;
+      z-index: 100;
+      position: absolute;
+      top: -3px;
+      right: -1px;
     }
   }
+
   .source-code-content {
-    height: calc(100% - 42px);
+    height: calc(100% - 12px);
     border: 1px solid var(--te-schema-common-border-color);
     border-radius: 4px;
     margin: 0 12px;
diff --git a/packages/plugins/script/meta.js b/packages/plugins/script/meta.js
index 7ea61f52b0..0ac7f10586 100644
--- a/packages/plugins/script/meta.js
+++ b/packages/plugins/script/meta.js
@@ -3,6 +3,7 @@ export default {
   title: '页面 JS',
   type: 'plugins',
   icon: 'plugin-icon-js',
-  align: 'top',
+  align: 'leftTop',
+  width: 600,
   confirm: 'close' // 当点击插件栏切换或关闭前是否需要确认, 会调用插件中confirm值指定的方法，e.g. 此处指向 close方法，会调用插件的close方法执行确认逻辑
 }
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index 7cdac0708f..cbdd7037c8 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -1,36 +1,40 @@
 <template>
-  <div class="plugin-page-js-container plugin-script">
-    <div class="code-edit-head">
-      <div class="head-left">
-        <span class="title">页面 JS</span>
-        <link-button :href="docsUrl"></link-button>
+  <plugin-panel
+    title="页面 JS"
+    :fixed-name="PLUGIN_NAME.Page"
+    :fixedPanels="fixedPanels"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+    :isCloseLeft="false"
+    @close="$emit('close')"
+    class="plugin-page-js-container plugin-script"
+  >
+    <template #header>
+      <span class="icon-wrap">
+        <i v-show="state.isChanged" class="red"></i>
+        <tiny-button type="primary" @click="saveMethods">保存</tiny-button>
+      </span>
+    </template>
+    <template #content>
+      <div class="code-edit-content">
+        <monaco-editor
+          ref="monaco"
+          :value="state.script"
+          :options="options"
+          @change="change"
+          @editorDidMount="editorDidMount"
+          @shortcutSave="saveMethods"
+        ></monaco-editor>
       </div>
-      <div class="head-right">
-        <tiny-button type="primary" class="save-btn" @click="saveMethods">
-          <span>保存</span>
-          <span v-show="state.isChanged" class="dots"></span>
-        </tiny-button>
-        <close-icon @close="close"></close-icon>
-      </div>
-    </div>
-    <div class="code-edit-content">
-      <monaco-editor
-        ref="monaco"
-        :value="state.script"
-        :options="options"
-        @change="change"
-        @editorDidMount="editorDidMount"
-        @shortcutSave="saveMethods"
-      ></monaco-editor>
-    </div>
-  </div>
+    </template>
+  </plugin-panel>
 </template>
 
 <script>
-import { onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, reactive, provide } from 'vue'
 import { Button } from '@opentiny/vue'
-import { VueMonaco, CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
-import { useHelp } from '@opentiny/tiny-engine-meta-register'
+import { VueMonaco, PluginPanel } from '@opentiny/tiny-engine-common'
+import { useHelp, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
 import { initLinter } from '@opentiny/tiny-engine-common/js/linter'
 import useMethod, { saveMethod, highlightMethod, getMethodNameList, getMethods } from './js/method'
@@ -46,14 +50,25 @@ export default {
   components: {
     MonacoEditor: VueMonaco,
     TinyButton: Button,
-    CloseIcon,
-    LinkButton
+    PluginPanel
+  },
+  props: {
+    fixedPanels: {
+      type: Array
+    }
   },
   emits: ['close'],
   setup(props, { emit }) {
     const docsUrl = useHelp().getDocsUrl('script')
     const { state, monaco, change, close, saveMethods } = useMethod({ emit })
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const options = {
       language: 'javascript',
       minimap: {
@@ -93,6 +108,7 @@ export default {
     })
 
     return {
+      PLUGIN_NAME,
       state,
       monaco,
       options,
@@ -108,59 +124,36 @@ export default {
 
 <style lang="less" scoped>
 .plugin-page-js-container {
-  width: 50vw;
-  height: 100%;
-  background: var(--te-plugin-js-panel-bg-color);
   box-shadow: 6px 0px 3px 0px var(--te-plugin-js-panel-shadow-color);
-  position: absolute;
-  left: 0;
-  top: 0;
   z-index: 999;
-  box-sizing: border-box;
-
-  .code-edit-head {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--te-plugin-js-common-border-color);
-    padding: 12px 0;
-
-    .head-left {
-      padding-left: 12px;
-      display: flex;
-      align-items: center;
-      .title {
-        color: var(--te-plugin-js-panel-title-text-color);
-        font-weight: var(--te-base-font-weight-bold);
-      }
+
+  .icon-wrap {
+    position: relative;
+    margin-right: 6px;
+
+    .tiny-button {
+      min-width: 40px;
+      margin-right: 2px;
+      height: 24px;
+      line-height: 24px;
     }
 
-    .head-right {
-      margin-right: 12px;
-      display: flex;
-      align-items: center;
-
-      .save-btn {
-        min-width: 40px;
-        margin-right: 8px;
-        height: 24px;
-        line-height: 24px;
-        .dots {
-          width: 6px;
-          height: 6px;
-          background: var(--te-plugin-js-dot-color);
-          border-radius: 50%;
-          position: absolute;
-          top: 9px;
-          right: 34px;
-        }
-      }
+    .red {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--te-plugin-js-dot-color);
+      display: block;
+      z-index: 100;
+      position: absolute;
+      top: -3px;
+      right: -1px;
     }
   }
 
   .code-edit-content {
-    padding: 12px;
-    height: calc(100% - 54px);
+    padding: 0 12px;
+    height: calc(100% - 12px);
 
     & > div {
       border: 1px solid var(--te-plugin-js-common-border-color);
@@ -169,6 +162,7 @@ export default {
     }
   }
 }
+
 :deep(.help-box) {
   height: auto;
   #help-icon {
diff --git a/packages/plugins/state/meta.js b/packages/plugins/state/meta.js
index bf4d450f6b..c744f3634b 100644
--- a/packages/plugins/state/meta.js
+++ b/packages/plugins/state/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.state',
   title: '状态管理',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-var'
 }
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index 774ed92b10..93cab882e0 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -1,78 +1,84 @@
 <template>
-  <div id="data-source" class="plugin-state">
-    <div class="data-source-left-panel">
-      <div class="title">
-        <span>状态管理</span>
-        <link-button :href="docsUrl"></link-button>
-        <close-icon @close="closePanel"></close-icon>
+  <plugin-panel
+    id="data-source"
+    title="状态管理"
+    :fixed-name="PLUGIN_NAME.State"
+    :fixedPanels="fixedPanels"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+    @close="closePanel"
+    class="plugin-state"
+  >
+    <template #content>
+      <div class="data-source-left-panel">
+        <tiny-tabs v-model="activeName" @click="tabClick" tab-style="button-card">
+          <tiny-tab-item :name="STATE.CURRENT_STATE" :title="isBlock ? '区块状态' : '页面状态'"></tiny-tab-item>
+          <tiny-tab-item :name="STATE.GLOBAL_STATE" title="应用状态"></tiny-tab-item>
+        </tiny-tabs>
+        <tiny-search
+          :modelValue="query"
+          class="left-filter"
+          placeholder="请输入搜索条件"
+          clearable
+          @update:modelValue="search"
+        >
+          <template #prefix>
+            <tiny-icon-search />
+          </template>
+        </tiny-search>
+        <div class="add-btn">
+          <tiny-button @click="openPanel(OPTION_TYPE.ADD)">
+            <svg-icon name="add" class="add-btn-icon"></svg-icon>
+            <span class="add-btn-text">{{ activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量' }}</span>
+          </tiny-button>
+        </div>
+        <data-source-list
+          :modelValue="Object.keys(state.dataSource)"
+          :stateScope="activeName"
+          :query="query"
+          :selectedKey="selectedKey"
+          @openPanel="openPanel"
+          @remove="remove"
+          @removeStore="removeStore"
+        />
       </div>
-      <tiny-tabs v-model="activeName" @click="tabClick" tab-style="button-card">
-        <tiny-tab-item :name="STATE.CURRENT_STATE" :title="isBlock ? '区块状态' : '页面状态'"></tiny-tab-item>
-        <tiny-tab-item :name="STATE.GLOBAL_STATE" title="应用状态"></tiny-tab-item>
-      </tiny-tabs>
-      <tiny-search
-        :modelValue="query"
-        class="left-filter"
-        placeholder="请输入搜索条件"
-        clearable
-        @update:modelValue="search"
-      >
-        <template #prefix>
-          <tiny-icon-search />
-        </template>
-      </tiny-search>
-      <div class="add-btn">
-        <tiny-button @click="openPanel(OPTION_TYPE.ADD)">
-          <svg-icon name="add" class="add-btn-icon"></svg-icon>
-          <span class="add-btn-text">{{ activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量' }}</span>
-        </tiny-button>
+      <div class="data-source-right-panel" v-if="isPanelShow" :style="alignStyle">
+        <div class="header">
+          <span>{{ addDataSource }}</span>
+          <span class="options-wrap">
+            <tiny-button type="primary" @click="confirm">保存</tiny-button>
+            <close-icon @close="cancel"></close-icon>
+          </span>
+        </div>
+        <create-variable
+          v-if="activeName === STATE.CURRENT_STATE"
+          ref="variableRef"
+          :dataSource="state.dataSource"
+          :flag="flag"
+          :updateKey="updateKey"
+          :createData="state.createData"
+          @nameInput="updateName"
+          @close="cancel"
+          @mouseleave="onMouseLeaveVariable"
+        />
+        <create-store
+          v-if="activeName === STATE.GLOBAL_STATE"
+          ref="storeRef"
+          :dataSource="state.dataSource"
+          :flag="flag"
+          :updateKey="updateKey"
+          :storeData="state.createData"
+          @nameInput="validName"
+          @close="cancel"
+          @mouseleave="onMouseLeaveStore"
+        />
       </div>
-      <data-source-list
-        :modelValue="Object.keys(state.dataSource)"
-        :stateScope="activeName"
-        :query="query"
-        :selectedKey="selectedKey"
-        @openPanel="openPanel"
-        @remove="remove"
-        @removeStore="removeStore"
-      />
-    </div>
-    <div v-if="isPanelShow" class="data-source-right-panel">
-      <div class="header">
-        <span>{{ addDataSource }}</span>
-        <span class="options-wrap">
-          <tiny-button type="primary" @click="confirm">保存</tiny-button>
-          <close-icon @close="cancel"></close-icon>
-        </span>
-      </div>
-      <create-variable
-        v-if="activeName === STATE.CURRENT_STATE"
-        ref="variableRef"
-        :dataSource="state.dataSource"
-        :flag="flag"
-        :updateKey="updateKey"
-        :createData="state.createData"
-        @nameInput="updateName"
-        @close="cancel"
-        @mouseleave="onMouseLeaveVariable"
-      />
-      <create-store
-        v-if="activeName === STATE.GLOBAL_STATE"
-        ref="storeRef"
-        :dataSource="state.dataSource"
-        :flag="flag"
-        :updateKey="updateKey"
-        :storeData="state.createData"
-        @nameInput="validName"
-        @close="cancel"
-        @mouseleave="onMouseLeaveStore"
-      />
-    </div>
-  </div>
+    </template>
+  </plugin-panel>
 </template>
 
 <script>
-import { reactive, ref, computed, onActivated, watch } from 'vue'
+import { reactive, ref, computed, onActivated, watch, provide } from 'vue'
 import { Button, Search, Tabs, TabItem } from '@opentiny/vue'
 import {
   useCanvas,
@@ -80,13 +86,14 @@ import {
   useResource,
   useNotify,
   useHelp,
+  useLayout,
   getMetaApi,
   META_APP,
   META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
 import { iconSearch } from '@opentiny/vue-icon'
-import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
+import { CloseIcon, PluginPanel } from '@opentiny/tiny-engine-common'
 import DataSourceList from './DataSourceList.vue'
 import CreateVariable from './CreateVariable.vue'
 import CreateStore from './CreateStore.vue'
@@ -104,9 +111,14 @@ export default {
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
     CreateStore,
-    LinkButton,
+    PluginPanel,
     TinyIconSearch: iconSearch()
   },
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
   setup(props, { emit }) {
     const variableRef = ref(null)
     const storeRef = ref(null)
@@ -131,6 +143,24 @@ export default {
     })
     const selectedKey = ref(null)
 
+    const { PLUGIN_NAME, getPluginWidth, getPluginByLayout } = useLayout()
+
+    const firstPanelOffset = computed(() => {
+      return getPluginWidth(PLUGIN_NAME.State)
+    })
+
+    const alignStyle = computed(() => {
+      const panelAlign = getPluginByLayout(PLUGIN_NAME.State)
+      const align = panelAlign.includes('left') ? 'left' : 'right'
+      return `${align}: ${firstPanelOffset.value}px`
+    })
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+
+    provide('panelState', panelState)
+
     watch(activeName, () => {
       selectedKey.value = null
     })
@@ -355,6 +385,9 @@ export default {
     })
 
     return {
+      alignStyle,
+      firstPanelOffset,
+      PLUGIN_NAME,
       isBlock,
       isPanelShow,
       errorMessage,
@@ -420,18 +453,6 @@ export default {
       }
     }
 
-    .title {
-      padding: 10px;
-      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-        'Helvetica Neue', sans-serif;
-      color: var(--te-state-common-text-color);
-      font-weight: var(--te-base-font-weight-bold);
-      border-bottom: 1px solid var(--te-state-common-border-color-divider);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
     .left-filter {
       margin-top: 4px;
       padding: 0 8px;
@@ -459,7 +480,6 @@ export default {
     border-right: 1px solid var(--te-state-common-border-color-divider);
     background: var(--te-state-common-bg-color);
     position: absolute;
-    left: var(--base-left-panel-width);
     top: 0;
 
     .header {
@@ -490,7 +510,7 @@ export default {
   }
 
   :deep(.tiny-tabs__header) {
-    padding: 8px;
+    padding: 0 8px 8px 8px;
   }
 
   :deep(.tiny-tabs__header .tiny-tabs__active-bar) {
diff --git a/packages/plugins/tree/meta.js b/packages/plugins/tree/meta.js
index 4dd08ca593..a5dc9b827c 100644
--- a/packages/plugins/tree/meta.js
+++ b/packages/plugins/tree/meta.js
@@ -3,5 +3,5 @@ export default {
   title: '大纲树',
   type: 'plugins',
   icon: 'plugin-icon-tree',
-  align: 'top'
+  align: 'leftTop'
 }
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index ace9b63e7c..3f57f9582e 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -1,13 +1,11 @@
 <template>
-  <plugin-panel class="outlinebox plugin-tree" title="大纲树" @close="$emit('close')">
-    <template #header>
-      <svg-button
-        class="item icon-sidebar"
-        :name="panelFixed ? 'fixed-solid' : 'fixed'"
-        :tips="panelFixed ? '解除固定面板' : '固定面板'"
-        @click="$emit('fix-panel', PLUGIN_NAME.OutlineTree)"
-      ></svg-button>
-    </template>
+  <plugin-panel
+    title="大纲树"
+    :fixed-name="PLUGIN_NAME.OutlineTree"
+    :fixedPanels="fixedPanels"
+    @close="$emit('close')"
+    class="outlinebox plugin-tree"
+  >
     <template #content>
       <draggable-tree
         label-key="componentName"
@@ -38,8 +36,8 @@
 </template>
 
 <script>
-import { reactive, watch, computed, onActivated, onDeactivated, nextTick } from 'vue'
-import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
+import { reactive, watch, computed, onActivated, onDeactivated, provide, nextTick } from 'vue'
+import { PluginPanel } from '@opentiny/tiny-engine-common'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { useCanvas, useMaterial, useLayout, useMessage } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
@@ -49,7 +47,6 @@ const { PAGE_STATUS } = constants
 export default {
   components: {
     PluginPanel,
-    SvgButton,
     DraggableTree
   },
   props: {
@@ -58,13 +55,18 @@ export default {
     }
   },
   emits: ['close', 'fix-panel'],
-  setup(props) {
+  setup(props, { emit }) {
     const { pageState } = useCanvas()
     const { getMaterial } = useMaterial()
     const { PLUGIN_NAME } = useLayout()
 
     const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
 
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const filterSchema = (data) => {
       const translateChild = (data) => {
         data.forEach((item) => {
diff --git a/packages/plugins/tutorial/meta.js b/packages/plugins/tutorial/meta.js
index f1aa82e505..9574ce2630 100644
--- a/packages/plugins/tutorial/meta.js
+++ b/packages/plugins/tutorial/meta.js
@@ -3,5 +3,5 @@ export default {
   title: 'TinyEngine 教程',
   type: 'plugins',
   icon: 'plugin-icon-tutorial',
-  align: 'bottom'
+  align: 'leftBottom'
 }
diff --git a/packages/register/src/common.js b/packages/register/src/common.js
index 33fa0e960e..e2f9e2472e 100644
--- a/packages/register/src/common.js
+++ b/packages/register/src/common.js
@@ -9,7 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-
+import { isRef } from 'vue'
 import { initHook } from './hooks'
 
 const vueLifeHook = [
@@ -161,7 +161,7 @@ export const preprocessRegistry = (registry) => {
 
 export const generateRegistry = (registry) => {
   Object.entries(registry).forEach(([key, value]) => {
-    if (typeof value === 'object' && value) {
+    if (typeof value === 'object' && value && !isRef(value)) {
       const { id } = value
       // 如果匹配到了id，说明是元服务配置，对元服务配置做读取和写入
       if (id && key !== 'metaData') {
diff --git a/packages/register/src/constants.js b/packages/register/src/constants.js
index 6f589f0091..12415696ba 100644
--- a/packages/register/src/constants.js
+++ b/packages/register/src/constants.js
@@ -46,7 +46,7 @@ export const META_APP = {
   Collections: 'engine.plugins.collections',
   Bridge: 'engine.plugins.bridge',
   I18n: 'engine.plugins.i18n',
-  Page: 'engine.plugins.pagecontroller',
+  Page: 'engine.plugins.pagecontroller', // 页面 JS
   State: 'engine.plugins.state',
   Schema: 'engine.plugins.schema',
   Help: 'engine.plugins.editorhelp',
diff --git a/packages/settings/events/index.js b/packages/settings/events/index.js
index 785a2a2c7b..a088702aee 100644
--- a/packages/settings/events/index.js
+++ b/packages/settings/events/index.js
@@ -20,9 +20,7 @@ import './src/styles/vars.less'
 export default {
   ...metaData,
   entry,
-  options: {
-    commonEvents
-  },
+  options: Object.assign({}, commonEvents, metaData.options),
   components: {
     BindEventsDialogSidebar,
     BindEventsDialogContent
diff --git a/packages/settings/events/meta.js b/packages/settings/events/meta.js
index 4f3b9bd69a..643cff248a 100644
--- a/packages/settings/events/meta.js
+++ b/packages/settings/events/meta.js
@@ -2,7 +2,7 @@ export default {
   id: 'engine.setting.event',
   title: '高级',
   type: 'setting',
-  align: 'left',
+  align: 'rightTop',
   name: 'event',
-  icon: ''
+  icon: 'target'
 }
diff --git a/packages/settings/events/src/Main.vue b/packages/settings/events/src/Main.vue
index 4ed763bcb2..0fac554f6b 100644
--- a/packages/settings/events/src/Main.vue
+++ b/packages/settings/events/src/Main.vue
@@ -1,19 +1,44 @@
 <template>
-  <tiny-collapse v-model="activeNames">
-    <tiny-collapse-item title="事件绑定" name="bindEvent">
-      <bind-events></bind-events>
-    </tiny-collapse-item>
-    <tiny-collapse-item title="高级配置" name="advancedConfig">
-      <advance-config></advance-config>
-    </tiny-collapse-item>
-  </tiny-collapse>
+  <plugin-panel
+    title="高级"
+    :fixed-panels="fixedPanels"
+    :fixed-name="PLUGIN_NAME.Event"
+    :header-margin-bottom="0"
+    @close="$emit('close')"
+  >
+    <template #content>
+      <tiny-collapse v-model="activeNames">
+        <tiny-collapse-item title="事件绑定" name="bindEvent">
+          <bind-events></bind-events>
+        </tiny-collapse-item>
+        <tiny-collapse-item title="高级配置" name="advancedConfig">
+          <advance-config></advance-config>
+        </tiny-collapse-item>
+      </tiny-collapse>
+    </template>
+  </plugin-panel>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive, provide, defineProps, defineEmits } from 'vue'
 import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
 import BindEvents from './components/BindEvents.vue'
 import AdvanceConfig from './components/AdvanceConfig.vue'
+import { PluginPanel } from '@opentiny/tiny-engine-common'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
 
 const activeNames = ref(['bindEvent', 'advancedConfig'])
+const { PLUGIN_NAME } = useLayout()
+
+defineProps({
+  fixedPanels: Array
+})
+
+const emit = defineEmits([])
+
+const panelState = reactive({
+  emitEvent: emit
+})
+
+provide('panelState', panelState)
 </script>
diff --git a/packages/settings/props/meta.js b/packages/settings/props/meta.js
index 4ea095d2ea..99fcbbc641 100644
--- a/packages/settings/props/meta.js
+++ b/packages/settings/props/meta.js
@@ -2,7 +2,7 @@ export default {
   id: 'engine.setting.props',
   title: '属性',
   type: 'setting',
-  align: 'left',
+  align: 'rightTop',
   name: 'props',
-  icon: ''
+  icon: 'form'
 }
diff --git a/packages/settings/props/src/Main.vue b/packages/settings/props/src/Main.vue
index 3b64f75aa9..0957e60566 100644
--- a/packages/settings/props/src/Main.vue
+++ b/packages/settings/props/src/Main.vue
@@ -1,17 +1,27 @@
 <template>
-  <config-render :data="properties">
-    <template #prefix="{ data }">
-      <block-link-field v-if="isBlock" :data="data"></block-link-field>
+  <plugin-panel
+    title="属性"
+    :fixed-panels="fixedPanels"
+    :fixed-name="PLUGIN_NAME.Props"
+    :header-margin-bottom="0"
+    @close="$emit('close')"
+  >
+    <template #content>
+      <config-render :data="properties">
+        <template #prefix="{ data }">
+          <block-link-field v-if="isBlock" :data="data"></block-link-field>
+        </template>
+      </config-render>
+      <block-description v-if="isBlock" class="block-description"> </block-description>
+      <empty :showEmptyTips="showEmptyTips"></empty>
     </template>
-  </config-render>
-  <block-description v-if="isBlock" class="block-description"> </block-description>
-  <empty :showEmptyTips="showEmptyTips"></empty>
+  </plugin-panel>
 </template>
 
 <script>
-import { computed, watchEffect, ref } from 'vue'
-import { ConfigRender, BlockDescription, BlockLinkField } from '@opentiny/tiny-engine-common'
-import { useCanvas, useProperty } from '@opentiny/tiny-engine-meta-register'
+import { computed, watchEffect, ref, reactive, provide } from 'vue'
+import { ConfigRender, BlockDescription, BlockLinkField, PluginPanel } from '@opentiny/tiny-engine-common'
+import { useCanvas, useProperty, useLayout } from '@opentiny/tiny-engine-meta-register'
 import Empty from './components/Empty.vue'
 
 export default {
@@ -19,13 +29,21 @@ export default {
     ConfigRender,
     BlockLinkField,
     BlockDescription,
-    Empty
+    Empty,
+    PluginPanel
   },
-  setup() {
+  setup(props, { emit }) {
     const { pageState } = useCanvas()
     const { properties } = useProperty().getProperty({ pageState })
     const showEmptyTips = ref(false)
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const isBlock = computed(() => pageState.isBlock)
 
     watchEffect(() => {
@@ -33,6 +51,7 @@ export default {
     })
 
     return {
+      PLUGIN_NAME,
       isBlock,
       properties,
       showEmptyTips
diff --git a/packages/settings/styles/meta.js b/packages/settings/styles/meta.js
index e1d179f89f..cf3a7ab3b9 100644
--- a/packages/settings/styles/meta.js
+++ b/packages/settings/styles/meta.js
@@ -3,6 +3,6 @@ export default {
   title: '样式',
   name: 'style',
   type: 'setting',
-  align: 'left',
-  icon: ''
+  align: 'rightTop',
+  icon: 'display-inline'
 }
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index eb8a2b86f3..9d12ea3a28 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -1,75 +1,86 @@
 <template>
-  <div class="style-editor">
-    <div class="line-style">
-      <span class="line-text"> 行内样式 </span>
-      <div class="inline-style">
-        <component
-          :is="CodeConfigurator"
-          v-if="state.lineStyleDisable"
-          :buttonShowContent="true"
-          :modelValue="state.styleContent"
-          title="编辑行内样式"
-          :button-text="state.inlineBtnText"
-          language="css"
-          single
-          @save="save"
-        ></component>
-        <div v-if="!state.lineStyleDisable">
-          <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
+  <plugin-panel
+    title="样式"
+    :fixed-panels="fixedPanels"
+    :fixed-name="PLUGIN_NAME.Styles"
+    :is-show-collapse-icon="true"
+    @updateCollapseStatus="updateCollapseStatus"
+    @close="$emit('close')"
+  >
+    <template #content>
+      <div class="style-editor">
+        <div class="line-style">
+          <span class="line-text"> 行内样式 </span>
+          <div class="inline-style">
+            <component
+              :is="CodeConfigurator"
+              v-if="state.lineStyleDisable"
+              :buttonShowContent="true"
+              :modelValue="state.styleContent"
+              title="编辑行内样式"
+              :button-text="state.inlineBtnText"
+              language="css"
+              single
+              @save="save"
+            ></component>
+            <div v-if="!state.lineStyleDisable">
+              <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
+            </div>
+            <component
+              :is="VariableConfigurator"
+              ref="bindVariable"
+              :model-value="state.bindModelValue"
+              name="advance"
+              @update:modelValue="setConfig"
+            >
+            </component>
+          </div>
         </div>
-        <component
-          :is="VariableConfigurator"
-          ref="bindVariable"
-          :model-value="state.bindModelValue"
-          name="advance"
-          @update:modelValue="setConfig"
-        >
-        </component>
       </div>
-    </div>
-  </div>
-  <class-names-container></class-names-container>
-  <tiny-collapse v-model="activeNames" @change="handoverGroup">
-    <tiny-collapse-item title="布局" name="layout">
-      <layout-group :display="state.style.display" @update="updateStyle" />
-      <flex-box v-if="state.style.display === 'flex'" :style="state.style" @update="updateStyle"></flex-box>
-      <grid-box v-if="state.style.display === 'grid'" :style="state.style" @update="updateStyle"></grid-box>
-    </tiny-collapse-item>
+      <class-names-container></class-names-container>
+      <tiny-collapse v-model="activeNames" @change="handoverGroup">
+        <tiny-collapse-item title="布局" name="layout">
+          <layout-group :display="state.style.display" @update="updateStyle" />
+          <flex-box v-if="state.style.display === 'flex'" :style="state.style" @update="updateStyle"></flex-box>
+          <grid-box v-if="state.style.display === 'grid'" :style="state.style" @update="updateStyle"></grid-box>
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="间距" name="spacing">
-      <spacing-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="间距" name="spacing">
+          <spacing-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="尺寸" name="size">
-      <size-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="尺寸" name="size">
+          <size-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="定位" name="position">
-      <position-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="定位" name="position">
+          <position-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="文本" name="typography">
-      <typography-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="文本" name="typography">
+          <typography-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="背景" name="backgrounds">
-      <background-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="背景" name="backgrounds">
+          <background-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="边框" name="borders">
-      <border-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="边框" name="borders">
+          <border-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="效果" name="effects" class="effects-style">
-      <effect-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
-  </tiny-collapse>
+        <tiny-collapse-item title="效果" name="effects" class="effects-style">
+          <effect-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
+      </tiny-collapse>
+    </template>
+  </plugin-panel>
 </template>
 
 <script>
-import { watch, inject, ref } from 'vue'
+import { watch, ref, reactive, provide } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
-import { useHistory, useCanvas, useProperties, getConfigurator } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useHistory, useCanvas, useProperties, getConfigurator } from '@opentiny/tiny-engine-meta-register'
 import {
   SizeGroup,
   LayoutGroup,
@@ -85,10 +96,12 @@ import {
 } from './components'
 import { CSS_TYPE } from './js/cssType'
 import useStyle from './js/useStyle'
+import { PluginPanel } from '@opentiny/tiny-engine-common'
 import { styleStrRemoveRoot } from './js/cssConvert'
 
 export default {
   components: {
+    PluginPanel,
     SizeGroup,
     LayoutGroup,
     FlexBox,
@@ -104,7 +117,12 @@ export default {
     TinyCollapseItem: CollapseItem,
     TinyInput: Input
   },
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     const CodeConfigurator = getConfigurator('CodeConfigurator')
     const VariableConfigurator = getConfigurator('VariableConfigurator')
     const styleCategoryGroup = [
@@ -117,13 +135,19 @@ export default {
       'borders',
       'effects'
     ]
-    const isCollapsed = inject('isCollapsed')
+    const isCollapsed = ref(false)
     const activeNames = ref(styleCategoryGroup)
     const { getCurrentSchema } = useCanvas()
     // 获取当前节点 style 对象
     const { state, updateStyle } = useStyle() // updateStyle
     const { addHistory } = useHistory()
     const { getSchema, setProp } = useProperties()
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
 
     const handoverGroup = (actives) => {
       if (isCollapsed.value) {
@@ -196,6 +220,10 @@ export default {
       }
     )
 
+    const updateCollapseStatus = (val) => {
+      isCollapsed.value = val
+    }
+
     watch(
       () => isCollapsed.value,
       () => {
@@ -208,6 +236,8 @@ export default {
     )
 
     return {
+      updateCollapseStatus,
+      PLUGIN_NAME,
       CodeConfigurator,
       VariableConfigurator,
       state,
@@ -228,7 +258,6 @@ export default {
 <style lang="less" scoped>
 .style-editor {
   justify-content: space-around;
-  padding: 12px 0 0;
   column-gap: 8px;
   .line-style {
     padding: 0 8px 0 12px;
diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less
index 59f8f41879..e2d1ac74f0 100644
--- a/packages/theme/base/src/page/base-config-page.less
+++ b/packages/theme/base/src/page/base-config-page.less
@@ -40,7 +40,7 @@ body {
   --base-bottom-panel-height: 30px;
   --base-nav-panel-width: 40px;
   --base-collection-panel-width: calc(
-    (100vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) - 1px)) / 2
+    (99vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) - 1px)) / 2
   );
   --base-collection-panel-full-screen-width: calc(
     (100vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) - 1px))
diff --git a/packages/toolbars/themeSwitch/src/Main.vue b/packages/toolbars/themeSwitch/src/Main.vue
index d887e35320..d7776651e3 100644
--- a/packages/toolbars/themeSwitch/src/Main.vue
+++ b/packages/toolbars/themeSwitch/src/Main.vue
@@ -81,7 +81,7 @@ export default {
     const showpopover = ref(false)
 
     const themeShowType = computed(() => {
-      let filterList = THEME_DATA.value.filter((item) => ['light', 'dark'].includes(item.type)) || []
+      const filterList = THEME_DATA.value.filter((item) => ['light', 'dark'].includes(item.type)) || []
       return THEME_DATA.value.length === filterList.length
     })