diff --git a/packages/canvas/DesignCanvas/index.js b/packages/canvas/DesignCanvas/index.js
index db70c726d..04d2cc3d7 100644
--- a/packages/canvas/DesignCanvas/index.js
+++ b/packages/canvas/DesignCanvas/index.js
@@ -1,7 +1,12 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import DesignCanvas from './src/DesignCanvas.vue'
 import metaData from './meta'
-
+import api from './src/api'
 export default {
   ...metaData,
-  entry: DesignCanvas
+  entry: DesignCanvas,
+  apis: api(),
+  composable: {
+    name: HOOK_NAME.useCanvas
+  }
 }
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 87c8714d9..2ac1eb9d3 100644
--- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue
+++ b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="canvas-wrap" ref="canvasRef">
-    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
+  <component :is="CanvasLayout">
+    <template #container>
       <component
         :is="CanvasContainer.entry"
         :controller="controller"
@@ -9,13 +9,15 @@
         @remove="removeNode"
         @selected="nodeSelected"
       ></component>
-    </div>
-    <component :is="CanvasBreadcrumb.entry" :data="footData" @click="selectFooterNode"></component>
-  </div>
+    </template>
+    <template #footer>
+      <component :is="CanvasBreadcrumb" :data="footData" @click="selectFooterNode"></component>
+    </template>
+  </component>
 </template>
 
 <script>
-import { ref, watch, computed, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import {
   useProperties,
   useCanvas,
@@ -45,9 +47,10 @@ const componentType = {
 
 export default {
   setup() {
-    // 暂时这么处理
-    const CanvasContainer = getMergeRegistry('canvas').metas[0]
-    const CanvasBreadcrumb = getMergeRegistry('canvas').metas[1]
+    const registry = getMergeRegistry('canvas')
+    const { CanvasBreadcrumb } = registry.components
+    const CanvasLayout = registry.layout.entry
+    const [CanvasContainer] = registry.metas
     const footData = ref([])
     const showMask = ref(true)
     const canvasRef = ref(null)
@@ -60,14 +63,6 @@ export default {
       pageState.properties = null
     }
 
-    const siteCanvasStyle = computed(() => {
-      const { scale } = useLayout().getDimension()
-      return {
-        height: `calc((100% - var(--base-bottom-panel-height, 30px) - 36px) / ${scale})`,
-        transform: `scale(${scale})`
-      }
-    })
-
     watch(
       [() => useCanvas().isSaved(), () => useLayout().layoutState.pageStatus, () => useCanvas().getPageSchema()],
       ([isSaved, pageStatus, pageSchema], [oldIsSaved, _oldPageStatus, oldPageSchema]) => {
@@ -144,12 +139,6 @@ export default {
       toolbars.visiblePopover = false
     }
 
-    const selectFooterNode = ({ node }) => {
-      const { selectNode } = useCanvas().canvasApi.value
-
-      selectNode(node)
-    }
-
     let canvasResizeObserver = null
     watch(
       () => [useCanvas().isCanvasApiReady.value, canvasRef.value],
@@ -176,7 +165,6 @@ export default {
       removeNode,
       canvasUrl,
       nodeSelected,
-      selectFooterNode,
       footData,
       materialsPanel: materials.entry,
       showMask,
@@ -188,7 +176,7 @@ export default {
         request: useHttp(),
         ast
       },
-      siteCanvasStyle,
+      CanvasLayout,
       canvasRef,
       CanvasContainer,
       CanvasBreadcrumb
diff --git a/packages/canvas/container/src/api/index.js b/packages/canvas/DesignCanvas/src/api/index.js
similarity index 100%
rename from packages/canvas/container/src/api/index.js
rename to packages/canvas/DesignCanvas/src/api/index.js
diff --git a/packages/canvas/container/src/api/useCanvas.js b/packages/canvas/DesignCanvas/src/api/useCanvas.js
similarity index 100%
rename from packages/canvas/container/src/api/useCanvas.js
rename to packages/canvas/DesignCanvas/src/api/useCanvas.js
diff --git a/packages/canvas/breadcrumb/index.js b/packages/canvas/breadcrumb/index.js
index 4d330c414..0d1a629c9 100644
--- a/packages/canvas/breadcrumb/index.js
+++ b/packages/canvas/breadcrumb/index.js
@@ -1,5 +1,5 @@
 import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
-import CanvasBreadcrumb from './src/CanvasFooter.vue'
+import CanvasBreadcrumb from './src/CanvasBreadcrumb.vue'
 import metaData from './meta'
 import useBreadcrumb from './src/useBreadcrumb'
 
diff --git a/packages/canvas/breadcrumb/src/CanvasFooter.vue b/packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue
similarity index 83%
rename from packages/canvas/breadcrumb/src/CanvasFooter.vue
rename to packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue
index af7afecd0..3235abc0f 100644
--- a/packages/canvas/breadcrumb/src/CanvasFooter.vue
+++ b/packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue
@@ -1,13 +1,14 @@
 <template>
   <div id="tiny-bottom-panel">
     <div class="content">
-      <tiny-steps v-show="data.length > 0" :data="data" @click="(index, node) => $emit('click', node)"></tiny-steps>
+      <tiny-steps v-show="data.length > 0" :data="data" @click="(_index, node) => selectFooterNode(node)"></tiny-steps>
       <div v-show="data.length <= 0" class="tip">没有选中的节点</div>
     </div>
   </div>
 </template>
 
 <script>
+import { getPluginApi } from '@opentiny/tiny-engine-entry'
 import { Steps } from '@opentiny/vue'
 
 export default {
@@ -15,13 +16,21 @@ export default {
     TinySteps: Steps
   },
   props: {
-    // TODO: 待整改为自己去api获取信息， 元应用只应该支持配置项不应该支持获取动态数据
     data: {
       type: Array,
       default: () => []
     }
   },
-  emits: ['click']
+  emits: ['click'],
+  setup() {
+    const { selectNode } = getPluginApi('engine.canvas').canvasApi.value
+    const selectFooterNode = ({ node }) => {
+      selectNode(node)
+    }
+    return {
+      selectFooterNode
+    }
+  }
 }
 </script>
 
diff --git a/packages/canvas/container/index.js b/packages/canvas/container/index.js
index 455020b06..1cc593046 100644
--- a/packages/canvas/container/index.js
+++ b/packages/canvas/container/index.js
@@ -1,13 +1,7 @@
-import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import CanvasContainer from './src/CanvasContainer.vue'
 import metaData from './meta'
-import api from './src/api'
 
 export default {
   ...metaData,
-  entry: CanvasContainer,
-  apis: api(),
-  composable: {
-    name: HOOK_NAME.useCanvas
-  }
+  entry: CanvasContainer
 }
diff --git a/packages/canvas/drag-drop/src/CanvasDragItem.vue b/packages/canvas/drag-drop/src/CanvasDragItem.vue
index b5859d583..9d5a3f201 100644
--- a/packages/canvas/drag-drop/src/CanvasDragItem.vue
+++ b/packages/canvas/drag-drop/src/CanvasDragItem.vue
@@ -16,7 +16,7 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const canvasApi = getPluginApi('engine.canvas.container').canvasApi
+    const canvasApi = getPluginApi('engine.canvas').canvasApi
     const dragstart = (e) => {
       if (props.data && canvasApi.value?.dragStart) {
         const data = deepClone(props.data)
diff --git a/packages/canvas/index.js b/packages/canvas/index.js
index 265c74e15..32a34eb1a 100644
--- a/packages/canvas/index.js
+++ b/packages/canvas/index.js
@@ -9,15 +9,22 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
+import CanvasBreadcrumb from './breadcrumb'
 export { createRender } from './render'
 export { CanvasDragItem } from './drag-drop'
 
 // meta app
-import CanvasBreadcrumb from './breadcrumb'
 import CanvasContainer from './container'
+import CanvasLayout from './layout'
 import DesignCanvas from './DesignCanvas'
 
+export { CanvasContainer, CanvasLayout, DesignCanvas }
+
 export default {
   ...DesignCanvas,
+  components: {
+    CanvasBreadcrumb: CanvasBreadcrumb.entry
+  },
+  layout: CanvasLayout,
   metas: [CanvasContainer, CanvasBreadcrumb]
 }
diff --git a/packages/canvas/layout/index.js b/packages/canvas/layout/index.js
new file mode 100644
index 000000000..9a3382240
--- /dev/null
+++ b/packages/canvas/layout/index.js
@@ -0,0 +1,7 @@
+import CanvasLayout from './src/CanvasLayout.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry: CanvasLayout
+}
diff --git a/packages/canvas/layout/meta.js b/packages/canvas/layout/meta.js
new file mode 100644
index 000000000..5d429a507
--- /dev/null
+++ b/packages/canvas/layout/meta.js
@@ -0,0 +1,3 @@
+export default {
+  id: 'engine.canvas.layout'
+}
diff --git a/packages/canvas/layout/src/CanvasLayout.vue b/packages/canvas/layout/src/CanvasLayout.vue
new file mode 100644
index 000000000..9523b1bcd
--- /dev/null
+++ b/packages/canvas/layout/src/CanvasLayout.vue
@@ -0,0 +1,20 @@
+<template>
+  <div id="canvas-wrap" ref="canvasRef">
+    <div ref="siteCanvas" class="site-canvas" :style="siteCanvasStyle">
+      <slot name="container"></slot>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useLayout } from '@opentiny/tiny-engine-controller'
+
+const siteCanvasStyle = computed(() => {
+  const { scale } = useLayout().getDimension()
+  return {
+    height: `calc((100% - var(--base-bottom-panel-height, 30px) - 36px) / ${scale})`,
+    transform: `scale(${scale})`
+  }
+})
+</script>
diff --git a/packages/common/component/BlockDeployDialog.vue b/packages/common/component/BlockDeployDialog.vue
index 9c36e0662..d3afa136d 100644
--- a/packages/common/component/BlockDeployDialog.vue
+++ b/packages/common/component/BlockDeployDialog.vue
@@ -81,7 +81,6 @@ import {
   Popover as TinyPopover,
   FormItem as TinyFormItem
 } from '@opentiny/vue'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { useLayout, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import { constants } from '@opentiny/tiny-engine-utils'
 import VueMonaco from './VueMonaco.vue'
@@ -133,14 +132,8 @@ export default {
 
     const editor = ref(null)
     const editorOptions = {
-      theme: theme(),
-      tabSize: 2,
       language: 'javascript',
-      autoIndent: true,
       lineNumbers: true,
-      formatOnPaste: true,
-      automaticLayout: true,
-      roundedSelection: true,
       minimap: {
         enabled: false
       }
diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
index 72290b9ee..1e57d1a09 100644
--- a/packages/common/component/LifeCycles.vue
+++ b/packages/common/component/LifeCycles.vue
@@ -51,13 +51,7 @@
           ref="editorRef"
           class="life-cycle-editor"
           :options="{
-            roundedSelection: true,
-            automaticLayout: true,
-            autoIndent: true,
-            language: 'javascript',
-            formatOnPaste: true,
-            tabSize: 2,
-            theme: theme()
+            language: 'javascript'
           }"
           :value="state.editorValue"
           @change="handleEditorChange"
@@ -80,7 +74,6 @@ import { reactive, ref, watchEffect, onBeforeUnmount } from 'vue'
 import { Button, DialogBox, Popover, Search, Alert } from '@opentiny/vue'
 import { useModal, usePage, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
 import { getMergeMeta } from '@opentiny/tiny-engine-entry'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import MetaListItems from './MetaListItems.vue'
 import { iconYes } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
@@ -243,7 +236,6 @@ export default {
       openLifeCyclesPanel,
       deleteLifeCycle,
       editorConfirm,
-      theme,
       editorDidMount,
       handleEditorChange
     }
diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index e5f272f8b..08217b78b 100644
--- a/packages/common/component/MonacoEditor.vue
+++ b/packages/common/component/MonacoEditor.vue
@@ -32,7 +32,6 @@
 
 <script>
 import { computed, ref, onActivated, onDeactivated } from 'vue'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { Tooltip } from '@opentiny/vue'
 import PublicIcon from './PublicIcon.vue'
 import VueMonaco from './VueMonaco.vue'
@@ -63,13 +62,7 @@ export default {
     const fullscreen = ref(false)
     const editorOptions = computed(() => {
       return {
-        theme: theme(),
-        tabSize: 2,
         language: 'javascript',
-        autoIndent: true,
-        formatOnPaste: true,
-        automaticLayout: true,
-        roundedSelection: true,
         lineNumbers: false,
         minimap: {
           enabled: false
diff --git a/packages/common/component/VueMonaco.vue b/packages/common/component/VueMonaco.vue
index d10244942..e66e10223 100644
--- a/packages/common/component/VueMonaco.vue
+++ b/packages/common/component/VueMonaco.vue
@@ -6,6 +6,16 @@ import * as monacoEditor from 'monaco-editor'
 import { watch, onMounted, nextTick, onBeforeUnmount, ref } from 'vue'
 import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 
+const defaultMonacoEditorTheme = 'vs'
+const globalMonacoEditorTheme = ref(defaultMonacoEditorTheme)
+
+/**
+ * @param {'vs' | 'vs-dark' | undefined} theme
+ */
+export const setGlobalMonacoEditorTheme = (theme) => {
+  globalMonacoEditorTheme.value = theme || defaultMonacoEditorTheme
+}
+
 export default {
   name: 'MonacoEditor',
   model: {
@@ -19,10 +29,6 @@ export default {
       type: String,
       required: true
     },
-    theme: {
-      type: String,
-      default: 'vs'
-    },
     language: {
       type: String
     },
@@ -45,6 +51,14 @@ export default {
     }
     const monacoRef = ref(null)
 
+    const defaultOptions = {
+      autoIndent: true,
+      automaticLayout: true,
+      formatOnPaste: true,
+      roundedSelection: true,
+      tabSize: 2
+    }
+
     const focus = () => vueMonaco.editor && vueMonaco.editor.focus()
 
     const getMonaco = () => vueMonaco.monaco
@@ -60,7 +74,7 @@ export default {
     const initMonaco = (monaco) => {
       emit('editorWillMount', vueMonaco.monaco)
 
-      const options = { value: props.value, theme: props.theme, language: props.language, ...props.options }
+      const options = { ...defaultOptions, ...props, theme: globalMonacoEditorTheme.value }
 
       if (props.diffEditor) {
         vueMonaco.editor = monaco.editor.createDiffEditor(monacoRef.value, options)
@@ -172,14 +186,11 @@ export default {
       }
     )
 
-    watch(
-      () => props.theme,
-      (newVal) => {
-        if (vueMonaco.editor) {
-          vueMonaco.monaco.editor.setTheme(newVal)
-        }
+    watch(globalMonacoEditorTheme, (newVal) => {
+      if (vueMonaco.editor) {
+        vueMonaco.monaco.editor.setTheme(newVal)
       }
-    )
+    })
 
     return {
       getMonaco,
diff --git a/packages/common/index.js b/packages/common/index.js
index f03fd37f7..cf545e02d 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -71,7 +71,7 @@ import CloseIcon from './component/CloseIcon.vue'
 import LifeCycles from './component/LifeCycles.vue'
 import EmptyTip from './component/EmptyTip.vue'
 import MaskModal from './component/MaskModal.vue'
-import VueMonaco from './component/VueMonaco.vue'
+import VueMonaco, { setGlobalMonacoEditorTheme } from './component/VueMonaco.vue'
 import PublicIcon from './component/PublicIcon.vue'
 import SaveNewBlock from './component/SaveNewBlock.vue'
 import BindI18n from './component/BindI18n.vue'
@@ -205,6 +205,7 @@ export {
   MaskModal,
   HtmlAttributesConfigurator as MetaHtmlAttributes,
   VueMonaco,
+  setGlobalMonacoEditorTheme,
   PublicIcon,
   SaveNewBlock,
   BindI18n,
diff --git a/packages/configurator/src/code-configurator/CodeConfigurator.vue b/packages/configurator/src/code-configurator/CodeConfigurator.vue
index 9ec5d1386..7fa9f55b4 100644
--- a/packages/configurator/src/code-configurator/CodeConfigurator.vue
+++ b/packages/configurator/src/code-configurator/CodeConfigurator.vue
@@ -227,11 +227,6 @@ export default {
       close()
     }
 
-    const getTheme = () => {
-      const defaultTheme = window?.TinyGlobalConfig?.theme || 'light'
-      return (props.theme || defaultTheme)?.includes('dark') ? 'vs-dark' : 'vs'
-    }
-
     return {
       save,
       close,
@@ -246,13 +241,7 @@ export default {
       editorState,
       value,
       options: {
-        theme: getTheme(),
-        tabSize: 2,
         language: props.language,
-        autoIndent: true,
-        formatOnPaste: true,
-        automaticLayout: true,
-        roundedSelection: true,
         minimap: {
           enabled: false
         }
diff --git a/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue b/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
index b1acf20e1..f6b415731 100644
--- a/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
+++ b/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
@@ -43,7 +43,6 @@
 import { getCurrentInstance, reactive, ref, watchEffect } from 'vue'
 import { Button, Tabs, TabItem, Input, ButtonGroup, Switch, Select } from '@opentiny/vue'
 import { IconClose } from '@opentiny/vue-icon'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { VueMonaco } from '../components'
 
 export default {
@@ -182,13 +181,7 @@ export default {
       value,
       editorMode,
       options: {
-        theme: theme(),
-        tabSize: 2,
         language: props.language,
-        autoIndent: true,
-        formatOnPaste: true,
-        automaticLayout: true,
-        roundedSelection: true,
         minimap: {
           enabled: false
         }
diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
index cdf9b9eaa..6e05120b3 100644
--- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue
+++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -123,7 +123,6 @@
 import { VueMonaco as MonacoEditor, SvgButton } from '../components' // TODO 等 common 包移除了 configurator 依赖后再更换成 @opentiny/tiny-engine-common
 import { useApp, useCanvas, useLayout, useProperties, useResource } from '@opentiny/tiny-engine-controller'
 import { getCommentByKey } from '@opentiny/tiny-engine-controller/js/comment'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { formatString, generate, parse, traverse } from '@opentiny/tiny-engine-controller/js/ast'
 import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-controller/js/constants'
 import { useHttp } from '@opentiny/tiny-engine-http'
@@ -267,13 +266,7 @@ export default {
     const bindKey = computed(() => props.modelValue?.value?.replace?.('this.state.', '') || '')
 
     const editorOptions = {
-      theme: theme(),
-      tabSize: 2,
       language: 'javascript',
-      autoIndent: true,
-      formatOnPaste: true,
-      automaticLayout: true,
-      roundedSelection: true,
       lineNumbers: false,
       minimap: {
         enabled: false
diff --git a/packages/controller/js/monaco.js b/packages/controller/js/monaco.js
index 457cf3e70..96a01c15a 100644
--- a/packages/controller/js/monaco.js
+++ b/packages/controller/js/monaco.js
@@ -9,16 +9,3 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-
-import { getMergeMeta } from '@opentiny/tiny-engine-entry'
-
-/**
- * 判断 Monaco 编辑器背景色的主题
- * @returns
- */
-// TODO: 后续放入Monaco组件中，由组件提供API设置主题
-export const theme = () => {
-  const theme = getMergeMeta('engine.config').theme?.includes('dark') ? 'vs-dark' : 'vs'
-
-  return theme
-}
diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js
index 99406d686..c1c06000d 100644
--- a/packages/design-core/src/init.js
+++ b/packages/design-core/src/init.js
@@ -14,11 +14,11 @@ import { createApp } from 'vue'
 import initSvgs from '@opentiny/tiny-engine-svgs'
 import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { initMonitor } from '@opentiny/tiny-engine-controller/js/monitor'
-import { injectGlobalComponents, Modal, Notify } from '@opentiny/tiny-engine-common'
+import { injectGlobalComponents, setGlobalMonacoEditorTheme, Modal, Notify } from '@opentiny/tiny-engine-common'
 import { initHttp } from '@opentiny/tiny-engine-http'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题
-import { defineEntry, mergeRegistry, initHook, HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import { defineEntry, mergeRegistry, getMergeMeta, initHook, HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import App from './App.vue'
 import defaultRegistry from '../registry.js'
 import { registerConfigurators } from './registerConfigurators'
@@ -36,8 +36,8 @@ const defaultLifeCycles = {
     defineEntry(newRegistry)
 
     initHook(HOOK_NAME.useEnv, import.meta.env)
-    initHook(HOOK_NAME.useNotify, () => Notify)
-    initHook(HOOK_NAME.useModal, () => Modal)
+    initHook(HOOK_NAME.useNotify, Notify, { useDefaultExport: true })
+    initHook(HOOK_NAME.useModal, Modal)
 
     // 加载主题样式，尽早加载
     // import(`./theme/${newRegistry.config.theme}.js`)
@@ -58,6 +58,9 @@ const defaultLifeCycles = {
     initSvgs(app)
     window.lowcodeI18n = i18n
     app.use(i18n).use(injectGlobalComponents)
+
+    const theme = getMergeMeta('engine.config').theme?.includes('dark') ? 'vs-dark' : 'vs'
+    setGlobalMonacoEditorTheme(theme)
   }
 }
 
diff --git a/packages/engine-cli/src/commands/create.js b/packages/engine-cli/src/commands/create.js
index b2b2d1d14..6d98cb97d 100644
--- a/packages/engine-cli/src/commands/create.js
+++ b/packages/engine-cli/src/commands/create.js
@@ -19,6 +19,7 @@ export default function (name) {
   const sourcePath = path.join(__dirname, '../template/designer/')
   const destPath = path.join(cwd(), name)
   fs.copySync(sourcePath, destPath)
+  // eslint-disable-next-line no-console
   console.log(
     chalk.green(`create finish, run the follow command to start project: \ncd ${name} && npm install && npm run dev`)
   )
diff --git a/packages/engine-cli/template/designer/src/preview.js b/packages/engine-cli/template/designer/src/preview.js
index 3fc45bd53..21d79b799 100644
--- a/packages/engine-cli/template/designer/src/preview.js
+++ b/packages/engine-cli/template/designer/src/preview.js
@@ -21,7 +21,7 @@ const beforeAppCreate = () => {
 
 initPreview({
   registry: {
-    config: { id : 'engine.config', theme: 'light' },
+    config: { id: 'engine.config', theme: 'light' }
   },
   lifeCycles: {
     beforeAppCreate
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/entry/src/hooks.js b/packages/entry/src/hooks.js
index 560ffc328..9d8d14ab5 100644
--- a/packages/entry/src/hooks.js
+++ b/packages/entry/src/hooks.js
@@ -44,26 +44,33 @@ const hooksState = {
   [HOOK_NAME.useCustom]: {} // 自定义
 }
 
-export const useLayout = () => hooksState[HOOK_NAME.useLayout]
-export const useCanvas = () => hooksState[HOOK_NAME.useCanvas]
-export const useApp = () => hooksState[HOOK_NAME.useApp]
-export const useResource = () => hooksState[HOOK_NAME.useResource]
-export const useHistory = () => hooksState[HOOK_NAME.useHistory]
-export const useProperties = () => hooksState[HOOK_NAME.useProperties]
-export const useSaveLocal = () => hooksState[HOOK_NAME.useSaveLocal]
-export const useEditorInfo = () => hooksState[HOOK_NAME.useEditorInfo]
-export const useBlock = () => hooksState[HOOK_NAME.useBlock]
-export const useTranslate = () => hooksState[HOOK_NAME.useTranslate]
-export const usePage = () => hooksState[HOOK_NAME.usePage]
-export const useDataSource = () => hooksState[HOOK_NAME.useDataSource]
-export const useBreadcrumb = () => hooksState[HOOK_NAME.useBreadcrumb]
-export const useProperty = () => hooksState[HOOK_NAME.useProperty]
-export const useHelp = () => hooksState[HOOK_NAME.useHelp]
-export const useHttp = () => hooksState[HOOK_NAME.useHttp]
-export const useEnv = () => hooksState[HOOK_NAME.useEnv]
-export const useModal = () => hooksState[HOOK_NAME.useModal]
-export const useNotify = () => hooksState[HOOK_NAME.useNotify]
-export const useCustom = () => hooksState[HOOK_NAME.useCustom]
+const getHook = (hookName, args) => {
+  if (typeof hooksState[hookName] === 'function') {
+    return hooksState[hookName](...args)
+  }
+  return hooksState[hookName]
+}
+
+export const useLayout = (...args) => getHook(HOOK_NAME.useLayout, args)
+export const useCanvas = (...args) => getHook(HOOK_NAME.useCanvas, args)
+export const useApp = (...args) => getHook(HOOK_NAME.useApp, args)
+export const useResource = (...args) => getHook(HOOK_NAME.useResource, args)
+export const useHistory = (...args) => getHook(HOOK_NAME.useHistory, args)
+export const useProperties = (...args) => getHook(HOOK_NAME.useProperties, args)
+export const useSaveLocal = (...args) => getHook(HOOK_NAME.useSaveLocal, args)
+export const useEditorInfo = (...args) => getHook(HOOK_NAME.useEditorInfo, args)
+export const useBlock = (...args) => getHook(HOOK_NAME.useBlock, args)
+export const useTranslate = (...args) => getHook(HOOK_NAME.useTranslate, args)
+export const usePage = (...args) => getHook(HOOK_NAME.usePage, args)
+export const useDataSource = (...args) => getHook(HOOK_NAME.useDataSource, args)
+export const useBreadcrumb = (...args) => getHook(HOOK_NAME.useBreadcrumb, args)
+export const useProperty = (...args) => getHook(HOOK_NAME.useProperty, args)
+export const useHelp = (...args) => getHook(HOOK_NAME.useHelp, args)
+export const useHttp = (...args) => getHook(HOOK_NAME.useHttp, args)
+export const useEnv = (...args) => getHook(HOOK_NAME.useEnv, args)
+export const useModal = (...args) => getHook(HOOK_NAME.useModal, args)
+export const useNotify = (...args) => getHook(HOOK_NAME.useNotify, args)
+export const useCustom = (...args) => getHook(HOOK_NAME.useCustom, args)
 
 export function initHook(hookName, hookContent, { useDefaultExport } = {}) {
   if (!Object.keys(hooksState).includes(hookName)) {
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/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
index ac3bf0433..240d59e14 100644
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -123,7 +123,6 @@ import {
 } from './js/resource'
 import { VueMonaco as MonacoEditor, PluginSetting, SvgButton } from '@opentiny/tiny-engine-common'
 import { useApp, useModal, useNotify } from '@opentiny/tiny-engine-controller'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 
 const isOpen = ref(false)
@@ -155,11 +154,6 @@ export default {
   },
   setup(props, { emit }) {
     const monacoOptions = {
-      theme: theme(),
-      roundedSelection: true,
-      automaticLayout: true,
-      autoIndent: true,
-      formatOnPaste: true,
       language: 'javascript',
       mouseStyle: 'default',
       minimap: { enabled: false },
diff --git a/packages/plugins/data/src/CreateRemoteAPI.vue b/packages/plugins/data/src/CreateRemoteAPI.vue
index 8a2e24564..f5fedafe1 100644
--- a/packages/plugins/data/src/CreateRemoteAPI.vue
+++ b/packages/plugins/data/src/CreateRemoteAPI.vue
@@ -93,7 +93,6 @@
 import { getCurrentInstance, reactive } from 'vue'
 import { ButtonGroup, Form, FormItem, Input, Popover, Switch, Button } from '@opentiny/vue'
 import { VueMonaco as MonacoEditor, MetaDescription } from '@opentiny/tiny-engine-common'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { iconPlus } from '@opentiny/vue-icon'
 import CreateFunction from './CreateRemoteFunction.vue'
 
@@ -132,10 +131,6 @@ export default {
     const state = reactive({
       createData: props.createData,
       options: {
-        theme: theme(),
-        roundedSelection: true,
-        automaticLayout: true,
-        autoIndent: true,
         language: 'javascript',
         minimap: { enabled: false }
       },
diff --git a/packages/plugins/data/src/CreateRemoteFunction.vue b/packages/plugins/data/src/CreateRemoteFunction.vue
index dffe914e5..29cc4ce61 100644
--- a/packages/plugins/data/src/CreateRemoteFunction.vue
+++ b/packages/plugins/data/src/CreateRemoteFunction.vue
@@ -9,7 +9,6 @@
 <script>
 import { getCurrentInstance, reactive } from 'vue'
 import { VueMonaco } from '@opentiny/tiny-engine-common'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { iconDel } from '@opentiny/vue-icon'
 
 export default {
@@ -30,11 +29,6 @@ export default {
 
     const state = reactive({
       options: {
-        theme: theme(),
-        roundedSelection: true,
-        automaticLayout: true,
-        autoIndent: true,
-        formatOnPaste: true,
         language: 'javascript',
         minimap: { enabled: false }
       },
diff --git a/packages/plugins/data/src/CreateStore.vue b/packages/plugins/data/src/CreateStore.vue
index ef8ffe58f..db2762918 100644
--- a/packages/plugins/data/src/CreateStore.vue
+++ b/packages/plugins/data/src/CreateStore.vue
@@ -20,7 +20,6 @@
         :showFormatBtn="true"
         :options="{
           language: 'json',
-          tabSize: 2,
           // 禁用滚动条边边一直显示的边框
           overviewRulerBorder: false,
           renderLineHighlightOnlyWhenFocus: true
@@ -65,7 +64,6 @@
 import { getCurrentInstance, reactive, ref, computed, watch } from 'vue'
 import { Form, FormItem, Input, Popover } from '@opentiny/vue'
 import { MonacoEditor } from '@opentiny/tiny-engine-common'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { string2Ast, ast2String, insertName } from '@opentiny/tiny-engine-controller/js/ast'
 import { verifyJsVarName } from '@opentiny/tiny-engine-controller/js/verification'
 
@@ -102,13 +100,7 @@ export default {
     })
 
     const options = {
-      roundedSelection: true,
-      automaticLayout: true,
-      autoIndent: true,
       language: 'javascript',
-      formatOnPaste: true,
-      tabSize: 2,
-      theme: theme(),
       minimap: {
         enabled: false
       },
diff --git a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
index 6ce394770..e7e768702 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
@@ -18,7 +18,6 @@
 <script>
 import { reactive, watchEffect, ref } from 'vue'
 import { VueMonaco as MonacoEditor } from '@opentiny/tiny-engine-common'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { iconCopy } from '@opentiny/vue-icon'
 import { Alert } from '@opentiny/vue'
 import useClipboard from 'vue-clipboard3'
@@ -43,10 +42,6 @@ export default {
     const state = reactive({
       value: '',
       options: {
-        theme: theme(),
-        roundedSelection: true,
-        automaticLayout: true,
-        autoIndent: true,
         language: 'json',
         minimap: { enabled: false }
       }
diff --git a/packages/plugins/datasource/src/DataSourceRemoteParameter.vue b/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
index 87cfa1865..8d7988ee6 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
@@ -5,7 +5,6 @@
 
 <script>
 import { VueMonaco } from '@opentiny/tiny-engine-common'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 
 export default {
   components: {
@@ -28,10 +27,6 @@ export default {
 
     return {
       options: {
-        theme: theme(),
-        roundedSelection: true,
-        automaticLayout: true,
-        autoIndent: true,
         language: 'json',
         minimap: { enabled: false }
       },
diff --git a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
index 3070066fe..50e6204cb 100644
--- a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
+++ b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
@@ -8,7 +8,6 @@
 <script>
 import { ref } from 'vue'
 import { VueMonaco } from '@opentiny/tiny-engine-common'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 
 export default {
   components: {
@@ -39,11 +38,6 @@ export default {
     return {
       editor,
       options: {
-        theme: theme(),
-        roundedSelection: true,
-        automaticLayout: true,
-        autoIndent: true,
-        formatOnPaste: true,
         language: 'javascript',
         mouseStyle: 'default',
         minimap: { enabled: false }
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/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index 23d93395f..90399b64c 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -43,7 +43,6 @@ import { nextTick, reactive, getCurrentInstance, onActivated, ref } from 'vue'
 import { Popover } from '@opentiny/vue'
 import { VueMonaco, CloseIcon } from '@opentiny/tiny-engine-common'
 import { useCanvas, useModal, useHistory, useNotify } from '@opentiny/tiny-engine-controller'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { iconSave, iconDownloadLink } from '@opentiny/vue-icon'
 
@@ -132,15 +131,9 @@ export default {
       close,
       showRed,
       options: {
-        roundedSelection: true,
-        automaticLayout: true,
-        autoIndent: true,
         language: 'json',
         // readOnly: !pageState.isLock,  暂时放开schema录入功能，等画布功能完善后，再打开此注释
         readOnly: false,
-        formatOnPaste: true,
-        tabSize: 2,
-        theme: theme(),
         minimap: {
           enabled: false
         }
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index 871b09175..9ce0e1ea8 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -32,7 +32,6 @@ import { VueMonaco, CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
 import { useHelp } from '@opentiny/tiny-engine-controller'
 import { initCompletion } from '@opentiny/tiny-engine-controller/js/completion'
 import { initLinter } from '@opentiny/tiny-engine-controller/js/linter'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import useMethod, { saveMethod, highlightMethod, getMethodNameList, getMethods } from './js/method'
 
 export const api = {
@@ -55,13 +54,7 @@ export default {
     const { state, monaco, change, close, saveMethods } = useMethod({ emit })
 
     const options = {
-      roundedSelection: true,
-      automaticLayout: true,
-      autoIndent: true,
       language: 'javascript',
-      formatOnPaste: true,
-      tabSize: 2,
-      theme: theme(),
       minimap: {
         enabled: false
       },
diff --git a/packages/settings/design/src/components/SourceEditor.vue b/packages/settings/design/src/components/SourceEditor.vue
index 2dcb5f64b..7e39f19de 100644
--- a/packages/settings/design/src/components/SourceEditor.vue
+++ b/packages/settings/design/src/components/SourceEditor.vue
@@ -47,13 +47,7 @@ export default {
       close,
       change,
       options: {
-        theme: 'vs', // vs | vs-dark
-        tabSize: 2,
         language: 'json',
-        autoIndent: true,
-        formatOnPaste: true,
-        automaticLayout: true,
-        roundedSelection: true,
         minimap: {
           enabled: false
         }
diff --git a/packages/settings/props/src/components/groups/LifeCycle.vue b/packages/settings/props/src/components/groups/LifeCycle.vue
index d7c2a1692..81a834976 100644
--- a/packages/settings/props/src/components/groups/LifeCycle.vue
+++ b/packages/settings/props/src/components/groups/LifeCycle.vue
@@ -76,7 +76,6 @@ import { Button, DialogBox, Modal, Popover, Search, Tooltip } from '@opentiny/vu
 import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { useCanvas } from '@opentiny/tiny-engine-controller'
 import { getMergeMeta } from '@opentiny/tiny-engine-entry'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { iconAdd, IconDel, iconSetting, iconYes } from '@opentiny/vue-icon'
 
 export default {
@@ -106,13 +105,7 @@ export default {
       lifeCycles: getMergeMeta('engine.config')?.lifeCyclesOptions[getMergeMeta('engine.config')?.dslMode],
       bindLifeCycles: pageState.pageSchema?.lifeCycles || {},
       options: {
-        roundedSelection: true,
-        automaticLayout: true,
-        autoIndent: true,
-        language: 'javascript',
-        formatOnPaste: true,
-        tabSize: 2,
-        theme: theme()
+        language: 'javascript'
       },
       editorValue: '{}'
     })
diff --git a/packages/settings/props/src/components/inputs/CodeEditor.vue b/packages/settings/props/src/components/inputs/CodeEditor.vue
index ac20fc344..e588f0093 100644
--- a/packages/settings/props/src/components/inputs/CodeEditor.vue
+++ b/packages/settings/props/src/components/inputs/CodeEditor.vue
@@ -39,7 +39,6 @@ import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { Button, Collapse, CollapseItem, DialogBox } from '@opentiny/vue'
 import { useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
 import { getExample } from '@opentiny/tiny-engine-controller/js/example'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 
 export default {
   components: {
@@ -67,12 +66,7 @@ export default {
     const { setProp } = useProperties()
 
     const options = reactive({
-      roundedSelection: true,
-      automaticLayout: true,
-      autoIndent: true,
-      theme: theme(),
       language: 'json',
-      formatOnPaste: true,
       minimap: { enabled: false }
     })
 
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()
diff --git a/packages/toolbars/save/src/Main.vue b/packages/toolbars/save/src/Main.vue
index edde8e7b8..fa33c6cd9 100644
--- a/packages/toolbars/save/src/Main.vue
+++ b/packages/toolbars/save/src/Main.vue
@@ -43,7 +43,6 @@ import { reactive, ref, onBeforeMount } from 'vue'
 import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { Button, Popover, DialogBox } from '@opentiny/vue'
 import { useCanvas } from '@opentiny/tiny-engine-controller'
-import { theme } from '@opentiny/tiny-engine-controller/js/monaco'
 import { openCommon, saveCommon } from './js/index'
 import { isLoading } from './js/index'
 export const api = {
@@ -91,14 +90,8 @@ export default {
     }
     // 保存或新建区块
     const editorOptions = {
-      theme: theme(),
-      tabSize: 2,
       language: 'json',
-      autoIndent: true,
       lineNumbers: true,
-      formatOnPaste: true,
-      automaticLayout: true,
-      roundedSelection: true,
       minimap: {
         enabled: false
       }