diff --git a/packages/entry/src/common.js b/packages/entry/src/common.js
index f93cee1e3..d55a0c18f 100644
--- a/packages/entry/src/common.js
+++ b/packages/entry/src/common.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { initHook } from "./hooks"
+import { initHook } from './hooks'
 
 const vueLifeHook = [
   'onMounted',
diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index 6c6fee120..c10ac3d8a 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -50,7 +50,7 @@ import { constants } from '@opentiny/tiny-engine-utils'
 
 const { message } = useModal()
 const { requestInitBlocks } = blockPlugin.api
-const { fetchGroups } = materials.api
+const { fetchGroups } = materials.apis
 const { BROADCAST_CHANNEL } = constants
 
 export default {
diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js
index 13ff9b5ee..13a773932 100644
--- a/packages/plugins/materials/index.js
+++ b/packages/plugins/materials/index.js
@@ -10,15 +10,28 @@
  *
  */
 
-import entry, { api } from './src/Main.vue'
+import entry from './src/Main.vue'
 import metaData from './meta.js'
+import MaterialLayout from './src/meta/layout'
+import MaterialBlock from './src/meta/block'
+import MaterialComponent from './src/meta/component'
+import MaterialHeader from './src/components/header/Main.vue'
 import { ResourceService } from './src/composable'
 
 export default {
   ...metaData,
   entry,
-  api,
-  metas: [ResourceService]
+  layout: MaterialLayout,
+  options: {
+    defaultTabId: 'engine.plugins.materials.component',
+    tabComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block']
+  },
+  components: {
+    header: MaterialHeader
+  },
+  apis: { ...MaterialBlock.apis },
+  api: { ...MaterialBlock.apis },
+  metas: [MaterialBlock, MaterialComponent, ResourceService]
 }
 
 export { entry, ResourceService }
diff --git a/packages/plugins/materials/src/Main.vue b/packages/plugins/materials/src/Main.vue
index 3239ecb9d..305919fae 100644
--- a/packages/plugins/materials/src/Main.vue
+++ b/packages/plugins/materials/src/Main.vue
@@ -1,116 +1,18 @@
 <template>
-  <plugin-panel :title="shortcut ? '' : '物料'" @close="$emit('close')">
-    <template #header>
-      <svg-button
-        class="item icon-sidebar"
-        :class="[fixedPanels?.includes(PLUGIN_NAME.Materials) && 'active']"
-        name="fixed"
-        :tips="!fixedPanels?.includes(PLUGIN_NAME.Materials) ? '固定面板' : '解除固定面板'"
-        @click="$emit('fixPanel', PLUGIN_NAME.Materials)"
-      ></svg-button>
-    </template>
-    <template #content>
-      <tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" @click="tabClick">
-        <tiny-tab-item name="components" title="组件">
-          <component-panel></component-panel>
-        </tiny-tab-item>
-        <tiny-tab-item name="blocks" title="区块">
-          <block-panel></block-panel>
-        </tiny-tab-item>
-      </tiny-tabs>
-      <block-group-panel></block-group-panel>
-      <block-version-select></block-version-select>
-    </template>
-  </plugin-panel>
+  <component :is="layout.entry" :registryData="registryData"></component>
 </template>
 
 <script>
-import { ref, reactive, provide } from 'vue'
-import { Tabs, TabItem } from '@opentiny/vue'
-import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
-import ComponentPanel from './component/Main.vue'
-import BlockPanel from './block/Main.vue'
-import BlockGroupPanel from './block/BlockGroupPanel.vue'
-import BlockVersionSelect from './block/BlockVersionSelect.vue'
-import { setBlockPanelVisible, setBlockVersionPanelVisible } from './block/js/usePanel'
-import { useLayout } from '@opentiny/tiny-engine-controller'
-import { fetchGroups } from './block/http'
-
-export const api = {
-  fetchGroups
-}
-
+import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
+import meta from '../meta'
 export default {
-  components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    PluginPanel,
-    ComponentPanel,
-    BlockPanel,
-    BlockGroupPanel,
-    BlockVersionSelect,
-    SvgButton
-  },
-
-  props: {
-    shortcut: [Boolean, String],
-    fixedPanels: {
-      type: Array
-    }
-  },
-  emits: ['close', 'fix-panel'],
-  setup(props, { emit }) {
-    const activeName = ref('components')
-
-    const panelState = reactive({
-      isShortcutPanel: props.shortcut,
-      isBlockGroupPanel: false,
-      isBlockList: false,
-      emitEvent: emit
-    })
-
-    provide('panelState', panelState)
-
-    const tabClick = (tabs) => {
-      if (tabs.name === 'components') {
-        setBlockPanelVisible(false)
-        setBlockVersionPanelVisible(false)
-      }
-    }
-    const { PLUGIN_NAME } = useLayout()
-
+  setup() {
+    const registry = getMergeRegistry(meta.type, meta.id)
+    const { layout, ...restRegistry } = registry
     return {
-      activeName,
-      tabClick,
-      PLUGIN_NAME
+      registryData: restRegistry,
+      layout
     }
   }
 }
 </script>
-
-<style lang="less" scoped>
-.tiny-tabs {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow-y: auto;
-}
-
-:deep(.tiny-tabs__header) {
-  padding: 8px;
-}
-
-:deep(.tiny-tabs__content) {
-  flex: 1;
-  overflow-y: scroll;
-  padding: 0;
-  & > div {
-    height: 100%;
-  }
-}
-
-.tiny-collapse {
-  flex: 1;
-  overflow-y: scroll;
-}
-</style>
diff --git a/packages/plugins/materials/src/components/header/Main.vue b/packages/plugins/materials/src/components/header/Main.vue
new file mode 100644
index 000000000..8b734be7a
--- /dev/null
+++ b/packages/plugins/materials/src/components/header/Main.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg-button
+    class="item icon-sidebar"
+    :class="[fixedPanels?.includes(PLUGIN_NAME.Materials) && 'active']"
+    name="fixed"
+    :tips="!fixedPanels?.includes(PLUGIN_NAME.Materials) ? '固定面板' : '解除固定面板'"
+    @click="$emit('fixPanel', PLUGIN_NAME.Materials)"
+  ></svg-button>
+</template>
+
+<script>
+import { SvgButton } from '@opentiny/tiny-engine-common'
+import { useLayout } from '@opentiny/tiny-engine-controller'
+
+export default {
+  components: {
+    SvgButton
+  },
+
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup() {
+    const { PLUGIN_NAME } = useLayout()
+
+    return {
+      PLUGIN_NAME
+    }
+  }
+}
+</script>
diff --git a/packages/plugins/materials/src/meta/block/index.js b/packages/plugins/materials/src/meta/block/index.js
new file mode 100644
index 000000000..b801a21b5
--- /dev/null
+++ b/packages/plugins/materials/src/meta/block/index.js
@@ -0,0 +1,14 @@
+import entry from './src/Main.vue'
+import metaData from './meta'
+import { fetchGroups } from './src/http'
+
+export default {
+  ...metaData,
+  entry,
+  apis: {
+    fetchGroups
+  },
+  options: {
+    title: '区块'
+  }
+}
diff --git a/packages/plugins/materials/src/meta/block/meta.js b/packages/plugins/materials/src/meta/block/meta.js
new file mode 100644
index 000000000..2acb872cf
--- /dev/null
+++ b/packages/plugins/materials/src/meta/block/meta.js
@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.plugins.materials.block',
+  type: 'plugins'
+}
diff --git a/packages/plugins/materials/src/block/BlockDetail.vue b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockDetail.vue
rename to packages/plugins/materials/src/meta/block/src/BlockDetail.vue
diff --git a/packages/plugins/materials/src/block/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockGroup.vue
rename to packages/plugins/materials/src/meta/block/src/BlockGroup.vue
diff --git a/packages/plugins/materials/src/block/BlockGroupArrange.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockGroupArrange.vue
rename to packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
diff --git a/packages/plugins/materials/src/block/BlockGroupFilters.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockGroupFilters.vue
rename to packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
diff --git a/packages/plugins/materials/src/block/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockGroupPanel.vue
rename to packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
diff --git a/packages/plugins/materials/src/block/BlockGroupSort.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockGroupSort.vue
rename to packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
diff --git a/packages/plugins/materials/src/block/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockGroupTransfer.vue
rename to packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
diff --git a/packages/plugins/materials/src/block/BlockGroupTransferPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockGroupTransferPanel.vue
rename to packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
diff --git a/packages/plugins/materials/src/block/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockList.vue
rename to packages/plugins/materials/src/meta/block/src/BlockList.vue
diff --git a/packages/plugins/materials/src/block/BlockVersionSelect.vue b/packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue
similarity index 100%
rename from packages/plugins/materials/src/block/BlockVersionSelect.vue
rename to packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue
diff --git a/packages/plugins/materials/src/block/Main.vue b/packages/plugins/materials/src/meta/block/src/Main.vue
similarity index 85%
rename from packages/plugins/materials/src/block/Main.vue
rename to packages/plugins/materials/src/meta/block/src/Main.vue
index e27165635..dc5706dff 100644
--- a/packages/plugins/materials/src/block/Main.vue
+++ b/packages/plugins/materials/src/meta/block/src/Main.vue
@@ -6,6 +6,10 @@
     </tiny-search>
     <block-list v-model:blockList="filterBlocks" :show-add-button="true" :show-block-shot="true"></block-list>
   </div>
+  <teleport to=".material-right-panel" v-if="rightPanelRef">
+    <block-group-panel></block-group-panel>
+    <block-version-select></block-version-select>
+  </teleport>
 </template>
 
 <script lang="jsx">
@@ -15,16 +19,26 @@ import { iconSearch } from '@opentiny/vue-icon'
 import { useApp, useBlock, useModal, useResource } from '@opentiny/tiny-engine-controller'
 import BlockGroup from './BlockGroup.vue'
 import BlockList from './BlockList.vue'
+import BlockGroupPanel from './BlockGroupPanel.vue'
+import BlockVersionSelect from './BlockVersionSelect.vue'
 import { fetchGroups, fetchGroupBlocksById, fetchGroupBlocksByIds } from './http'
+import metaData from '../meta'
+import { setBlockPanelVisible, setBlockVersionPanelVisible } from './js/usePanel'
 
 export default {
   components: {
     TinySearch: Search,
     TinyIconSearch: iconSearch(),
     BlockGroup,
-    BlockList
+    BlockList,
+    BlockGroupPanel,
+    BlockVersionSelect
   },
-  setup() {
+  props: {
+    activeTabName: String,
+    rightPanelRef: Object
+  },
+  setup(props) {
     const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
     const { resState } = useResource()
     const { message } = useModal()
@@ -114,6 +128,16 @@ export default {
       }
     )
 
+    watch(
+      () => props.activeTabName,
+      (value) => {
+        if (value !== metaData.id) {
+          setBlockPanelVisible(false)
+          setBlockVersionPanelVisible(false)
+        }
+      }
+    )
+
     onMounted(() => {
       fetchGroups(appId)
         .then((data) => {
diff --git a/packages/plugins/materials/src/block/http.js b/packages/plugins/materials/src/meta/block/src/http.js
similarity index 100%
rename from packages/plugins/materials/src/block/http.js
rename to packages/plugins/materials/src/meta/block/src/http.js
diff --git a/packages/plugins/materials/src/block/js/usePanel.js b/packages/plugins/materials/src/meta/block/src/js/usePanel.js
similarity index 70%
rename from packages/plugins/materials/src/block/js/usePanel.js
rename to packages/plugins/materials/src/meta/block/src/js/usePanel.js
index a87791e91..6b0f434ce 100644
--- a/packages/plugins/materials/src/block/js/usePanel.js
+++ b/packages/plugins/materials/src/meta/block/src/js/usePanel.js
@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import { reactive } from 'vue'
 
diff --git a/packages/plugins/materials/src/meta/component/index.js b/packages/plugins/materials/src/meta/component/index.js
new file mode 100644
index 000000000..78a6e82de
--- /dev/null
+++ b/packages/plugins/materials/src/meta/component/index.js
@@ -0,0 +1,10 @@
+import entry from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry,
+  options: {
+    title: '组件'
+  }
+}
diff --git a/packages/plugins/materials/src/meta/component/meta.js b/packages/plugins/materials/src/meta/component/meta.js
new file mode 100644
index 000000000..49053a854
--- /dev/null
+++ b/packages/plugins/materials/src/meta/component/meta.js
@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.plugins.materials.component',
+  type: 'plugins'
+}
diff --git a/packages/plugins/materials/src/component/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue
similarity index 100%
rename from packages/plugins/materials/src/component/Main.vue
rename to packages/plugins/materials/src/meta/component/src/Main.vue
diff --git a/packages/plugins/materials/src/meta/layout/index.js b/packages/plugins/materials/src/meta/layout/index.js
new file mode 100644
index 000000000..6f941d9f2
--- /dev/null
+++ b/packages/plugins/materials/src/meta/layout/index.js
@@ -0,0 +1,7 @@
+import entry from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry
+}
diff --git a/packages/plugins/materials/src/meta/layout/meta.js b/packages/plugins/materials/src/meta/layout/meta.js
new file mode 100644
index 000000000..3023e5446
--- /dev/null
+++ b/packages/plugins/materials/src/meta/layout/meta.js
@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.plugins.materials.layout',
+  type: 'plugins'
+}
diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
new file mode 100644
index 000000000..b3785cb1f
--- /dev/null
+++ b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -0,0 +1,110 @@
+<template>
+  <plugin-panel :title="shortcut ? '' : title" @close="$emit('close')">
+    <template #header>
+      <component :is="headerComponent" :fixedPanels="fixedPanels"></component>
+    </template>
+    <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">
+          <component :is="item.component" :activeTabName="activeName" :rightPanelRef="rightPanelRef"></component>
+        </tiny-tab-item>
+      </tiny-tabs>
+      <component :is="defaultComponent" v-if="onlyShowDefault"></component>
+      <div class="material-right-panel" ref="rightPanelRef"></div>
+    </template>
+  </plugin-panel>
+</template>
+
+<script>
+import { reactive, provide, ref } from 'vue'
+import { Tabs, TabItem } from '@opentiny/vue'
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
+import { PluginPanel } from '@opentiny/tiny-engine-common'
+
+export default {
+  components: {
+    PluginPanel,
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+
+  props: {
+    shortcut: [Boolean, String],
+    fixedPanels: {
+      type: Array
+    },
+    registryData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['close', 'fix-panel'],
+  setup(props, { emit }) {
+    const panelState = reactive({
+      isShortcutPanel: props.shortcut,
+      isBlockGroupPanel: false,
+      isBlockList: false,
+      emitEvent: emit
+    })
+    provide('panelState', panelState) // 使用provide传给子组件,后续可能会有调整，先暂定
+
+    const pluginRegistryData = ref(props.registryData)
+    const rightPanelRef = ref(null)
+    const tabComponentIds = pluginRegistryData.value.options.tabComponentIds || []
+    const headerComponent = getMergeMeta(pluginRegistryData.value.components?.header)
+    const onlyShowDefault = ref(tabComponentIds.length === 1)
+    const activeTabId =
+      tabComponentIds.find((item) => item === pluginRegistryData.value.options?.defaultTabId) || tabComponentIds[0]
+
+    const activeName = ref(activeTabId)
+    const defaultComponent = getMergeMeta(activeName.value)?.entry
+    const tabComponents = tabComponentIds.map((id) => {
+      const itemMeta = getMergeMeta(id)
+      return {
+        id,
+        component: itemMeta?.entry,
+        title: itemMeta?.options?.title || itemMeta?.id
+      }
+    })
+
+    const title = ref(props.registryData?.title)
+
+    return {
+      headerComponent,
+      title,
+      activeName,
+      defaultComponent,
+      onlyShowDefault,
+      tabComponents,
+      rightPanelRef
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-tabs {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+}
+
+:deep(.tiny-tabs__header) {
+  padding: 8px;
+}
+
+:deep(.tiny-tabs__content) {
+  flex: 1;
+  overflow-y: scroll;
+  padding: 0;
+  & > div {
+    height: 100%;
+  }
+}
+
+.tiny-collapse {
+  flex: 1;
+  overflow-y: scroll;
+}
+</style>
diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index ebc9fdd12..95dcbcb12 100644
--- a/packages/settings/styles/src/js/useStyle.js
+++ b/packages/settings/styles/src/js/useStyle.js
@@ -134,7 +134,13 @@ const getClassNameAndIdList = (schema) => {
 }
 
 watch(
-  () => [useCanvas().getCurrentSchema?.(), state.schemaUpdateKey, useProps().propsUpdateKey?.value, useCanvas().canvasApi?.value?.getSchema?.(), schemaLength],
+  () => [
+    useCanvas().getCurrentSchema?.(),
+    state.schemaUpdateKey,
+    useProps().propsUpdateKey?.value,
+    useCanvas().canvasApi?.value?.getSchema?.(),
+    schemaLength
+  ],
   ([curSchema], [oldCurSchema] = []) => {
     const { getCurrentSchema, canvasApi } = useCanvas()
     let schema = getCurrentSchema()