diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 64866d37f8..5cd3adab43 100644
--- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue
+++ b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -22,7 +22,7 @@ import {
   useProperties,
   useCanvas,
   useLayout,
-  useResource,
+  useMaterial,
   useHistory,
   useModal
 } from '@opentiny/tiny-engine-meta-register'
@@ -170,9 +170,9 @@ export default {
       showMask,
       controller: {
         // 需要在canvas/render或内置组件里使用的方法
-        getMaterial: useResource().getMaterial,
+        getMaterial: useMaterial().getMaterial,
         addHistory: useHistory().addHistory,
-        registerBlock: useResource().registerBlock,
+        registerBlock: useMaterial().registerBlock,
         request: useHttp(),
         ast
       },
diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue
index 390f55a8f5..6778d57345 100644
--- a/packages/canvas/container/src/CanvasContainer.vue
+++ b/packages/canvas/container/src/CanvasContainer.vue
@@ -30,7 +30,7 @@
 <script>
 import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
-import { useTranslate, useCanvas, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useTranslate, useCanvas, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { NODE_UID, NODE_LOOP } from '../../common'
 import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
@@ -110,8 +110,7 @@ export default {
     const beforeCanvasReady = () => {
       if (iframe.value) {
         const win = iframe.value.contentWindow
-
-        win.thirdPartyDeps = useResource().resState.thirdPartyDeps
+        win.thirdPartyDeps = useMaterial().materialState.thirdPartyDeps
       }
     }
 
diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue
index 0a39a2d713..fd08d5610c 100644
--- a/packages/canvas/container/src/components/CanvasAction.vue
+++ b/packages/canvas/container/src/components/CanvasAction.vue
@@ -128,7 +128,7 @@ import {
   dragStart,
   getCurrentElement
 } from '../container'
-import { useLayout, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { Popover } from '@opentiny/vue'
 import shortCutPopover from './shortCutPopover.vue'
 
@@ -236,7 +236,7 @@ export default {
     const showToParent = computed(() => getCurrent().parent !== getSchema())
 
     const isModal = computed(() => {
-      const config = useResource().getMaterial(props.selectState.componentName)
+      const config = useMaterial().getMaterial(props.selectState.componentName)
       return config?.configure?.isModal
     })
 
diff --git a/packages/canvas/container/src/components/shortCutPopover.vue b/packages/canvas/container/src/components/shortCutPopover.vue
index 13f1940bc5..e01f26c743 100644
--- a/packages/canvas/container/src/components/shortCutPopover.vue
+++ b/packages/canvas/container/src/components/shortCutPopover.vue
@@ -30,7 +30,7 @@
 
 <script>
 import { computed, ref } from 'vue'
-import { useResource, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-meta-register'
+import { useMaterial, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-meta-register'
 import { iconSetting, iconClose } from '@opentiny/vue-icon'
 
 export default {
@@ -39,7 +39,7 @@ export default {
     IconClose: iconClose()
   },
   setup(props, { emit }) {
-    const { getMaterial } = useResource()
+    const { getMaterial } = useMaterial()
     const { pageState } = useCanvas()
     const { properties } = useProperty().getProperty({ pageState })
     const active = ref('props')
diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js
index 38e7424c61..a6e809d584 100644
--- a/packages/canvas/container/src/container.js
+++ b/packages/canvas/container/src/container.js
@@ -19,7 +19,7 @@ import {
   NODE_TAG,
   NODE_LOOP
 } from '../../common'
-import { useCanvas, useLayout, useResource, useTranslate } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useLayout, useResource, useTranslate, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import Builtin from '../../render/src/builtin/builtin.json' //TODO 画布内外应该分开
 
@@ -916,7 +916,7 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
   // 设置画布全局的utils工具类上下文环境
   setUtils(useResource().resState.utils)
   setSchema(schema)
-  setConfigure(useResource().getConfigureMap())
-  canvasDispatch('updateDependencies', { detail: useResource().resState.thirdPartyDeps })
+  setConfigure(useMaterial().getConfigureMap())
+  canvasDispatch('updateDependencies', { detail: useMaterial().materialState.thirdPartyDeps })
   canvasState.loading = false
 }
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 8726545206..1d2e90d780 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -106,7 +106,7 @@ import { typeOf } from '@opentiny/vue-renderless/common/type'
 import {
   useHistory,
   useProperties,
-  useResource,
+  useMaterial,
   useLayout,
   useCanvas,
   getConfigurator
@@ -261,7 +261,7 @@ export default {
         const currentComponent = useProperties().getSchema().componentName
         const {
           schema: { events = {} }
-        } = useResource().getMaterial(currentComponent)
+        } = useMaterial().getMaterial(currentComponent)
 
         if (Object.keys(events).includes(`onUpdate:${property}`)) {
           // 默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。
diff --git a/packages/common/js/preview.js b/packages/common/js/preview.js
index 4cb3b4ebf5..c1db5f8481 100644
--- a/packages/common/js/preview.js
+++ b/packages/common/js/preview.js
@@ -12,7 +12,7 @@
 
 import { constants } from '@opentiny/tiny-engine-utils'
 import { isDevelopEnv } from './environments'
-import { useResource } from '@opentiny/tiny-engine-meta-register'
+import { useMaterial } from '@opentiny/tiny-engine-meta-register'
 // prefer old unicode hacks for backward compatibility
 
 const { COMPONENT_NAME } = constants
@@ -25,10 +25,13 @@ const open = (params = {}) => {
   const paramsMap = new URLSearchParams(location.search)
   params.app = paramsMap.get('id')
   params.tenant = paramsMap.get('tenant')
-  const { scripts, styles } = useResource().resState.thirdPartyDeps
-  params.scripts = scripts
+  const { scripts, styles } = useMaterial().resState.thirdPartyDeps
+  params.scripts = {}
+  scripts
     .filter((item) => item.script)
-    .reduce((pre, cur) => ({ ...pre, [cur.package]: cur.script }), {})
+    .forEach((item) => {
+      params.scripts[item.package] = item.script
+    })
   params.styles = [...styles]
 
   const href = window.location.href.split('?')[0] || './'
diff --git a/packages/configurator/src/container-configurator/ContainerConfigurator.vue b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
index f7bb50f2cb..c441fe435f 100644
--- a/packages/configurator/src/container-configurator/ContainerConfigurator.vue
+++ b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
@@ -22,7 +22,7 @@
 <script>
 import { ref } from 'vue'
 import { MetaListItems } from '@opentiny/tiny-engine-common'
-import { useProperties, useResource, useHistory } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useMaterial, useHistory } from '@opentiny/tiny-engine-meta-register'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { iconDel } from '@opentiny/vue-icon'
 
@@ -33,7 +33,7 @@ export default {
   },
   setup() {
     const { children: schemaChildren, componentName } = useProperties().getSchema()
-    const configureMap = useResource().getConfigureMap()
+    const configureMap = useMaterial().getConfigureMap()
     const childComponentName =
       configureMap[componentName]?.nestingRule?.childWhitelist?.[0] || schemaChildren?.[0]?.componentName
 
diff --git a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
index 92a9e16110..e503e11cf9 100644
--- a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
+++ b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
@@ -48,7 +48,7 @@
 </template>
 <script>
 import { reactive, ref, watchEffect } from 'vue'
-import { useProperties, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { IconDel, IconEdit, IconClose, IconPlus } from '@opentiny/vue-icon'
 import { Form, FormItem, Input, Button, Popover, Tooltip } from '@opentiny/vue'
 import { utils } from '@opentiny/tiny-engine-utils'
@@ -89,7 +89,7 @@ export default {
         return
       }
 
-      const { schema } = useResource().getMaterial(useProperties().getSchema().componentName)
+      const { schema } = useMaterial().getMaterial(useProperties().getSchema().componentName)
       schema?.properties?.forEach(({ content }) => {
         content.forEach(({ property }) => properties.push(property))
       })
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index 90ced4a24d..a024634cca 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -25,7 +25,7 @@
 <script>
 import { ref, watchEffect, nextTick } from 'vue'
 import { Popover } from '@opentiny/vue'
-import { useProperties, useResource, useModal, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useModal, useCanvas, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { iconHelpCircle } from '@opentiny/vue-icon'
 
 export default {
@@ -108,7 +108,7 @@ export default {
           cancel: () => {}
         })
       }
-      const config = useResource().getMaterial(schema.componentName)
+      const config = useMaterial().getMaterial(schema.componentName)
       const isPopper = config?.configure?.isPopper
 
       if (isPopper) {
diff --git a/packages/configurator/src/table-columns-configurator/TableColumnsConfigurator.vue b/packages/configurator/src/table-columns-configurator/TableColumnsConfigurator.vue
index 6097234d9d..bafffa90e1 100644
--- a/packages/configurator/src/table-columns-configurator/TableColumnsConfigurator.vue
+++ b/packages/configurator/src/table-columns-configurator/TableColumnsConfigurator.vue
@@ -4,11 +4,11 @@
 
 <script setup>
 import { nextTick } from 'vue'
-import { useProperties, useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useMaterial, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import ArrayItemConfigurator from '../array-item-configurator/ArrayItemConfigurator.vue'
 
 const { children: schemaChildren, componentName, props } = useProperties().getSchema()
-const configureMap = useResource().getConfigureMap()
+const configureMap = useMaterial().getConfigureMap()
 const childComponentName =
   configureMap[componentName]?.nestingRule?.childWhitelist?.[0] || schemaChildren?.[0]?.componentName
 
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index b0ac10ba67..9325a0ba41 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -15,7 +15,7 @@ export { default as GenerateVue, SaveLocalService } from '@opentiny/tiny-engine-
 export { default as Refresh } from '@opentiny/tiny-engine-toolbar-refresh'
 export { default as Collaboration } from '@opentiny/tiny-engine-toolbar-collaboration'
 export { default as Setting } from '@opentiny/tiny-engine-toolbar-setting'
-export { default as Materials, ResourceService } from '@opentiny/tiny-engine-plugin-materials'
+export { default as Materials, ResourceService, MaterialService } from '@opentiny/tiny-engine-plugin-materials'
 export { default as Data } from '@opentiny/tiny-engine-plugin-data'
 export { default as Script } from '@opentiny/tiny-engine-plugin-script'
 export { default as Tree } from '@opentiny/tiny-engine-plugin-tree'
diff --git a/packages/plugins/block/src/js/blockSetting.jsx b/packages/plugins/block/src/js/blockSetting.jsx
index 8c87ffe476..d4593a42eb 100644
--- a/packages/plugins/block/src/js/blockSetting.jsx
+++ b/packages/plugins/block/src/js/blockSetting.jsx
@@ -22,7 +22,7 @@ import {
   useLayout,
   useNotify,
   useHistory,
-  useResource
+  useMaterial
 } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
@@ -51,7 +51,7 @@ const { getBlockList, setBlockList, setCategoryList, getCurrentBlock, addBlockEv
 const { batchCreateI18n } = useTranslate()
 const { message, confirm } = useModal()
 const { setSaved } = useCanvas()
-const { getMaterial } = useResource()
+const { getMaterial } = useMaterial()
 
 const STRING_SLOT = ['Slot', 'slot']
 
diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js
index 13a773932a..47572a5f1c 100644
--- a/packages/plugins/materials/index.js
+++ b/packages/plugins/materials/index.js
@@ -12,11 +12,11 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta.js'
+import { ResourceService, MaterialService } from './src/composable'
 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,
@@ -24,14 +24,14 @@ export default {
   layout: MaterialLayout,
   options: {
     defaultTabId: 'engine.plugins.materials.component',
-    tabComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block']
+    displayComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block']
   },
   components: {
     header: MaterialHeader
   },
   apis: { ...MaterialBlock.apis },
   api: { ...MaterialBlock.apis },
-  metas: [MaterialBlock, MaterialComponent, ResourceService]
+  metas: [MaterialBlock, MaterialComponent, ResourceService, MaterialService]
 }
 
-export { entry, ResourceService }
+export { entry, ResourceService, MaterialService }
diff --git a/packages/plugins/materials/src/composable/index.js b/packages/plugins/materials/src/composable/index.js
index 2fc9ae5c0d..74faf8c869 100644
--- a/packages/plugins/materials/src/composable/index.js
+++ b/packages/plugins/materials/src/composable/index.js
@@ -1,5 +1,6 @@
 import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
 import useResource from './useResource'
+import useMaterial from './useMaterial'
 
 export const ResourceService = {
   id: 'engine.service.resource',
@@ -9,3 +10,12 @@ export const ResourceService = {
     name: HOOK_NAME.useResource
   }
 }
+
+export const MaterialService = {
+  id: 'engine.service.material',
+  type: 'MetaService',
+  apis: useMaterial(),
+  composable: {
+    name: HOOK_NAME.useMaterial
+  }
+}
diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js
new file mode 100644
index 0000000000..7b87251603
--- /dev/null
+++ b/packages/plugins/materials/src/composable/useMaterial.js
@@ -0,0 +1,358 @@
+/**
+ * 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'
+import { useHttp } from '@opentiny/tiny-engine-http'
+import { utils, constants } from '@opentiny/tiny-engine-utils'
+import { meta as BuiltinComponentMaterials } from '@opentiny/tiny-engine-builtin-component'
+import { getMergeMeta, useNotify, useCanvas, useBlock } from '@opentiny/tiny-engine-meta-register'
+
+const { camelize, capitalize } = utils
+const { MATERIAL_TYPE } = constants
+
+// 这里存放所有TinyVue组件、原生HTML、内置组件的缓存，包含了物料插件面板里所有显示的组件，也包含了没显示的一些联动组件
+const resource = new Map()
+
+// 这里涉及到区块发布后的更新问题，所以需要单独缓存区块
+const blockResource = new Map()
+
+const http = useHttp()
+
+const materialState = reactive({
+  components: [], // 这里存放的是物料插件面板里所有显示的组件
+  blocks: [],
+  thirdPartyDeps: { scripts: [], styles: new Set() }
+})
+
+const componentState = reactive({
+  componentsMap: {}
+})
+const getSnippet = (component) => {
+  let schema = {}
+  materialState.components.some(({ children }) => {
+    const child = children.find(({ snippetName }) => snippetName === component)
+    if (child) {
+      schema = child.schema
+      return true
+    }
+    return false
+  })
+
+  return schema
+}
+
+const generateNode = ({ type, component }) => {
+  const snippet = getSnippet(component) || {}
+  const schema = {
+    componentName: component,
+    props: {},
+    ...snippet
+  }
+
+  if (type === 'block') {
+    schema.componentType = 'Block'
+  }
+
+  return schema
+}
+
+/**
+ * 获取物料组件的配置信息
+ * @returns
+ */
+const getConfigureMap = () => {
+  const entries = Object.entries(Object.fromEntries(resource)).map(([key, value]) => {
+    return [key, value.content?.configure || value.configure]
+  })
+  return Object.fromEntries(entries)
+}
+
+/**
+ * 将component里的内容注册到resource变量中
+ * @param {*} data
+ */
+const registerComponentToResource = (data) => {
+  if (Array.isArray(data.component)) {
+    const { component, ...others } = data
+    component.forEach((item) => {
+      resource.set(item, { item, ...others, type: MATERIAL_TYPE.Component })
+    })
+  } else {
+    resource.set(data.component, { ...data, type: MATERIAL_TYPE.Component })
+  }
+}
+
+const fetchBlockDetail = async (blockName) => {
+  const { getBlockAssetsByVersion } = useBlock()
+  const currentVersion = componentState.componentsMap?.[blockName]?.version
+  const block = (await http.get(`/material-center/api/block?label=${blockName}`))?.[0]
+
+  if (!block) {
+    throw new Error(`区块${blockName}不存在！`)
+  }
+
+  block.assets = getBlockAssetsByVersion(block, currentVersion)
+  block.assets = history?.assets || block.assets
+
+  return block
+}
+
+/**
+ * registerBlock 注册区块
+ * @param {String|Object} data 当为字符串时请求详细信息
+ * @param {*} notFetchResouce 是否添加js css资源到页面
+ * @returns
+ */
+const registerBlock = async (data, notFetchResouce) => {
+  let block = data
+
+  if (typeof block === 'string') {
+    try {
+      block = await fetchBlockDetail(block)
+    } catch (error) {
+      useNotify({
+        type: 'warning',
+        title: '区块读取错误',
+        message: error?.message || error
+      })
+
+      return false
+    }
+  }
+
+  if (!block) {
+    return false
+  }
+
+  block.type = MATERIAL_TYPE.Block
+  block.component = block.component || block.blockName || block.label || block.fileName
+  // 区块还原备份时, 后台改变current_history, 所以assets优先从current_history里取
+  const assets = block.assets
+  const label = block.component
+  const { scripts = [], styles = [] } = assets || {}
+
+  if (!notFetchResouce && !blockResource.get(label)) {
+    const { addScript, addStyle } = useCanvas().canvasApi.value
+    const promises = scripts
+      .filter((item) => item.includes('umd.js'))
+      .map(addScript)
+      .concat(styles.map(addStyle))
+    // 此处删除await，提前放行区块数据，在区块渲染前找到区块数据源映射关系
+    Promise.allSettled(promises)
+    blockResource.set(label, block.content)
+  }
+  return block
+}
+
+const clearMaterials = () => {
+  materialState.components = []
+  materialState.blocks = []
+  resource.clear()
+}
+
+const clearBlockResources = () => blockResource.clear()
+
+/**
+ * 收集第三方组件库依赖
+ * @param {array} components 组件物料列表
+ */
+const generateThirdPartyDeps = (components) => {
+  const styles = []
+  const scripts = []
+
+  components.forEach((item) => {
+    const { npm, component } = item
+
+    if (!npm || !Object.keys(npm).length) return
+
+    const { package: pkg, script, exportName, css } = npm
+    const currentPkg = scripts.find((item) => item.package === pkg)
+
+    if (currentPkg) {
+      // 保存组件id和导出组件名的对应关系 TinyButton： Button
+      currentPkg.components[component] = exportName
+    } else {
+      scripts.push({
+        package: pkg,
+        script,
+        components: {
+          [component]: exportName
+        }
+      })
+    }
+
+    if (css) {
+      styles.push(css)
+    }
+  })
+
+  return { styles, scripts }
+}
+
+/**
+ * 设置第三方组件库依赖
+ * @param {array} components 组件物料列表
+ */
+const setThirdPartyDeps = (components) => {
+  const { scripts = [], styles = [] } = generateThirdPartyDeps(components)
+  materialState.thirdPartyDeps.scripts.push(...scripts)
+  styles.forEach((item) => materialState.thirdPartyDeps.styles.add(item))
+}
+
+/**
+ * 获取到符合物料协议的bundle.json之后，对其进行处理的函数
+ * @param {*} materials
+ */
+const addMaterials = (materials = {}) => {
+  setThirdPartyDeps(materials.components)
+  materialState.components.push(...materials.snippets)
+  materials.components.forEach(registerComponentToResource)
+
+  const promises = materials?.blocks?.map((item) => registerBlock(item, true))
+
+  Promise.allSettled(promises).then((blocks) => {
+    if (!blocks?.length) {
+      return
+    }
+    // 默认区块都会展示在默认分组中
+    if (!materialState.blocks?.[0]?.children) {
+      materialState.blocks.push({
+        groupId: useBlock().DEFAULT_GROUP_ID,
+        groupName: useBlock().DEFAULT_GROUP_NAME,
+        children: []
+      })
+    }
+    materialState.blocks[0].children.unshift(
+      ...blocks.filter((res) => res.status === 'fulfilled').map((res) => res.value)
+    )
+  })
+}
+
+const getMaterial = (name) => {
+  if (name) {
+    // 先读取组件缓存，再读取区块缓存
+    return (
+      resource.get(name) ||
+      resource.get(capitalize(camelize(name))) ||
+      blockResource.get(name) ||
+      blockResource.get(capitalize(camelize(name))) ||
+      {}
+    )
+  } else {
+    return {}
+  }
+}
+
+const setMaterial = (name, data) => {
+  resource.set(name, data)
+}
+
+/**
+ * 获取物料，并返回符合物料协议的bundle.json内容
+ * @returns getMaterialsRes: () =>  Promise<Materials>
+ */
+export const getMaterialsRes = async () => {
+  const bundleUrls = getMergeMeta('engine.config')?.material || []
+  const materials = await Promise.allSettled(bundleUrls.map((url) => http.get(url)))
+  return materials
+}
+
+const fetchMaterial = async () => {
+  const materials = await getMaterialsRes()
+
+  materials.forEach((response) => {
+    if (response.status === 'fulfilled' && response.value.materials) {
+      addMaterials(response.value.materials)
+    }
+  })
+}
+
+/**
+ * 获取区块保存的依赖信息，合并到resState.thirdPartyDeps
+ * @param {object} dependencies 区块保存的依赖信息
+ */
+const getBlockDeps = (dependencies = {}) => {
+  const { scripts = [], styles = [] } = dependencies
+
+  scripts.length &&
+    scripts.forEach((npm) => {
+      const { package: pkg, script, css, components } = npm
+      const npmInfo = materialState.thirdPartyDeps.scripts.find((item) => item.package === pkg)
+
+      if (!npmInfo || !npmInfo.script) {
+        materialState.thirdPartyDeps.scripts.push({ package: pkg, script, css, components })
+      } else {
+        const components = npmInfo.components || {}
+
+        npmInfo.components = { ...components, ...npm.components }
+      }
+    })
+
+  styles?.forEach((item) => materialState.thirdPartyDeps.styles.add(item))
+}
+
+/**
+ * 获取新增区块的依赖，更新画布中的组件依赖
+ * @param {array} blocks 新增的区块列表
+ */
+const updateCanvasDependencies = (blocks) => {
+  blocks.forEach((block) => {
+    if (!block.content.dependencies) return
+
+    getBlockDeps(block.content.dependencies)
+  })
+
+  useCanvas().canvasApi.value?.canvasDispatch('updateDependencies', { detail: materialState.thirdPartyDeps })
+}
+
+const initBuiltinMaterial = () => {
+  const { Builtin } = useCanvas().canvasApi.value
+  Builtin.data.materials.components[0].children.forEach(registerComponentToResource)
+  BuiltinComponentMaterials.components[0].children.forEach(registerComponentToResource)
+
+  const builtinSnippets = {
+    group: '内置组件',
+    children: [...Builtin.data.materials.snippets[0].children, ...BuiltinComponentMaterials.snippets[0].children]
+  }
+
+  materialState.components.push(builtinSnippets)
+}
+
+const initMaterial = ({ isInit = true, appData = {} } = {}) => {
+  initBuiltinMaterial()
+  if (isInit) {
+    componentState.componentsMap = {}
+    appData.componentsMap?.forEach((component) => {
+      if (component.dependencies) {
+        getBlockDeps(component.dependencies)
+      }
+      componentState.componentsMap[component.componentName] = component
+    })
+  }
+}
+
+export default function () {
+  return {
+    materialState, // 存放着组件、物料侧区块、第三方依赖信息
+    initMaterial, // 物料模块初始化
+    fetchMaterial, // 请求物料并进行处理
+    getMaterialsRes, // 获取物料，并返回符合物料协议的bundle.json内容，getMaterialsRes: () =>  Promise<Materials>
+    generateNode, // 根据 包含{ type, componentName }的组件信息生成组件schema节点，结构：
+    clearMaterials, // 清空物料
+    clearBlockResources, // 清空区块缓存，以便更新最新版区块
+    getMaterial, // 获取单个物料，(property) getMaterial: (name: string) => Material
+    setMaterial, // 设置单个物料 (property) setMaterial: (name: string, data: Material) => void
+    registerBlock, // 注册新的区块
+    updateCanvasDependencies, //传入新的区块，获取新增区块的依赖，更新画布中的组件依赖
+    getConfigureMap // 获取物料组件的配置信息
+  }
+}
diff --git a/packages/plugins/materials/src/composable/useResource.js b/packages/plugins/materials/src/composable/useResource.js
index b37f301cd2..45b98e72db 100644
--- a/packages/plugins/materials/src/composable/useResource.js
+++ b/packages/plugins/materials/src/composable/useResource.js
@@ -12,252 +12,29 @@
 
 import { reactive } from 'vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { utils, constants } from '@opentiny/tiny-engine-utils'
-import { meta as BuiltinComponentMaterials } from '@opentiny/tiny-engine-builtin-component'
+import { constants } from '@opentiny/tiny-engine-utils'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
 import {
-  getMergeMeta,
-  useNotify,
   useApp,
   useCanvas,
   useTranslate,
   useEditorInfo,
   useBreadcrumb,
   useLayout,
-  useBlock
+  useBlock,
+  useMaterial
 } from '@opentiny/tiny-engine-meta-register'
 
-const { camelize, capitalize } = utils
-const { MATERIAL_TYPE, COMPONENT_NAME, DEFAULT_INTERCEPTOR } = constants
-
-// 这里存放TinyVue组件、原生HTML、内置组件的缓存
-const resource = new Map()
-
-// 这里涉及到区块发布后的更新问题，所以需要单独缓存区块
-const blockResource = new Map()
-
-const http = useHttp()
+const { COMPONENT_NAME, DEFAULT_INTERCEPTOR } = constants
 
 const resState = reactive({
-  components: [],
-  blocks: [],
   dataSource: [],
   pageTree: [],
   langs: {},
   utils: {},
-  globalState: [],
-  thirdPartyDeps: { scripts: [], styles: new Set() }
+  globalState: []
 })
 
-const getSnippet = (component) => {
-  let schema = {}
-  resState.components.forEach(({ children }) => {
-    const child = children.find(({ snippetName }) => snippetName === component)
-    child && (schema = child.schema)
-  })
-
-  return schema
-}
-
-const generateNode = ({ type, component }) => {
-  const schema = {
-    componentName: component,
-    props: {},
-    ...getSnippet(component)
-  }
-
-  if (type === 'block') {
-    schema.componentType = 'Block'
-  }
-
-  return schema
-}
-
-const registerComponent = (data) => {
-  if (Array.isArray(data.component)) {
-    const { component, ...others } = data
-    component.forEach((item) => {
-      resource.set(item, { item, ...others, type: MATERIAL_TYPE.Component })
-    })
-  } else {
-    resource.set(data.component, { ...data, type: MATERIAL_TYPE.Component })
-  }
-
-  return data
-}
-
-const fetchBlockDetail = async (blockName) => {
-  const { getBlockAssetsByVersion } = useBlock()
-  const currentVersion = resState.componentsMap?.[blockName]?.version
-  const block = (await http.get(`/material-center/api/block?label=${blockName}`))?.[0]
-
-  if (!block) {
-    throw new Error(`区块${blockName}不存在！`)
-  }
-
-  block.assets = getBlockAssetsByVersion(block, currentVersion)
-  block.assets = history?.assets || block.assets
-
-  return block
-}
-
-/**
- * registerBlock 注册区块
- * @param {String|Object} data 当为字符串时请求详细信息
- * @param {*} notFetchResouce 是否添加js css资源到页面
- * @returns
- */
-const registerBlock = async (data, notFetchResouce) => {
-  let block = data
-
-  if (typeof block === 'string') {
-    try {
-      block = await fetchBlockDetail(block)
-    } catch (error) {
-      useNotify({
-        type: 'warning',
-        title: '区块读取错误',
-        message: error?.message || error
-      })
-
-      return false
-    }
-  }
-
-  if (!block) {
-    return false
-  }
-
-  block.type = MATERIAL_TYPE.Block
-  block.component = block.component || block.blockName || block.label || block.fileName
-  // 区块还原备份时, 后台改变current_history, 所以assets优先从current_history里取
-  const assets = block.assets
-  const label = block.component
-  const { scripts = [], styles = [] } = assets || {}
-
-  if (notFetchResouce) {
-    return block
-  } else {
-    if (!blockResource.get(label)) {
-      const { addScript, addStyle } = useCanvas().canvasApi.value
-      const promises = scripts
-        .filter((item) => item.includes('umd.js'))
-        .map(addScript)
-        .concat(styles.map(addStyle))
-      // 此处删除await，提前放行区块数据，在区块渲染前找到区块数据源映射关系
-      Promise.allSettled(promises)
-      blockResource.set(label, block.content)
-    }
-  }
-
-  return block
-}
-
-const clearMaterials = () => {
-  resState.components = []
-  resState.blocks = []
-  resource.clear()
-}
-
-const clearBlockResources = () => blockResource.clear()
-
-/**
- * 收集第三方组件库依赖
- * @param {array} components 组件物料列表
- */
-const generateThirdPartyDeps = (components) => {
-  const styles = []
-  const scripts = []
-
-  components.forEach((item) => {
-    const { npm, component } = item
-
-    if (!npm || !Object.keys(npm).length) return
-
-    const { package: pkg, script, exportName, css } = npm
-    const currentPkg = scripts.find((item) => item.package === pkg)
-
-    if (currentPkg) {
-      // 保存组件id和导出组件名的对应关系 TinyButton： Button
-      currentPkg.components[component] = exportName
-    } else {
-      scripts.push({
-        package: pkg,
-        script,
-        components: {
-          [component]: exportName
-        }
-      })
-    }
-
-    if (css) {
-      styles.push(css)
-    }
-  })
-
-  resState.thirdPartyDeps.scripts.push(...scripts)
-  styles.forEach((item) => resState.thirdPartyDeps.styles.add(item))
-}
-
-const addMaterials = (materials = {}) => {
-  generateThirdPartyDeps(materials.components)
-  resState.components.push(...materials.snippets)
-  materials.components.map(registerComponent)
-
-  const promises = materials?.blocks?.map((item) => registerBlock(item, true))
-  Promise.allSettled(promises).then((blocks) => {
-    if (!blocks?.length) {
-      return
-    }
-    // 默认区块都会展示在默认分组中
-    if (!resState.blocks?.[0]?.children) {
-      resState.blocks.push({
-        groupId: useBlock().DEFAULT_GROUP_ID,
-        groupName: useBlock().DEFAULT_GROUP_NAME,
-        children: []
-      })
-    }
-    resState.blocks[0].children.unshift(...blocks.filter((res) => res.status === 'fulfilled').map((res) => res.value))
-  })
-}
-
-const getMaterial = (name) => {
-  if (name) {
-    // 先读取组件缓存，再读取区块缓存
-    return (
-      resource.get(name) ||
-      resource.get(capitalize(camelize(name))) ||
-      blockResource.get(name) ||
-      blockResource.get(capitalize(camelize(name))) ||
-      {}
-    )
-  } else {
-    return {}
-  }
-}
-
-const setMaterial = (name, data) => {
-  resource.set(name, data)
-}
-
-const getConfigureMap = () => {
-  const entries = Object.entries(Object.fromEntries(resource)).map(([key, value]) => {
-    return [key, value.content?.configure || value.configure]
-  })
-  return Object.fromEntries(entries)
-}
-
-const fetchMaterial = async () => {
-  const bundleUrls = getMergeMeta('engine.config')?.material || []
-  const materials = await Promise.allSettled(bundleUrls.map((url) => http.get(url)))
-
-  materials.forEach((response) => {
-    if (response.status === 'fulfilled' && response.value.materials) {
-      addMaterials(response.value.materials)
-    }
-  })
-}
-
 const initPage = (pageInfo) => {
   try {
     if (pageInfo.meta) {
@@ -345,45 +122,9 @@ const handlePopStateEvent = async () => {
   await useTranslate().initI18n({ host: id, hostType: type })
 }
 
-/**
- * 获取区块保存的依赖信息，合并到resState.thirdPartyDeps
- * @param {object} dependencies 区块保存的依赖信息
- */
-const getBlockDeps = (dependencies = {}) => {
-  const { scripts = [], styles = [] } = dependencies
-
-  scripts.length &&
-    scripts.forEach((npm) => {
-      const { package: pkg, script, css, components } = npm
-      const npmInfo = resState.thirdPartyDeps.scripts.find((item) => item.package === pkg)
-
-      if (!npmInfo || !npmInfo.script) {
-        resState.thirdPartyDeps.scripts.push({ package: pkg, script, css, components })
-      } else {
-        const components = npmInfo.components || {}
-
-        npmInfo.components = { ...components, ...npm.components }
-      }
-    })
-
-  styles?.forEach((item) => resState.thirdPartyDeps.styles.add(item))
-}
-
 const fetchResource = async ({ isInit = true } = {}) => {
   const { id, type } = useEditorInfo().useInfo()
   useApp().appInfoState.selectedId = id
-
-  const { Builtin } = useCanvas().canvasApi.value
-  Builtin.data.materials.components[0].children.map(registerComponent)
-  BuiltinComponentMaterials.components[0].children.map(registerComponent)
-
-  const builtinSnippets = {
-    group: '内置组件',
-    children: [...Builtin.data.materials.snippets[0].children, ...BuiltinComponentMaterials.snippets[0].children]
-  }
-
-  resState.components.push(builtinSnippets)
-
   const appData = await useHttp().get(`/app-center/v1/api/apps/schema/${id}`)
   resState.pageTree = appData.componentsTree
   resState.dataSource = appData.dataSource?.list
@@ -396,15 +137,7 @@ const fetchResource = async ({ isInit = true } = {}) => {
   resState.isDemo = appData.meta?.is_demo
   resState.globalState = appData?.meta.global_state
 
-  if (isInit) {
-    resState.componentsMap = appData.componentsMap?.reduce((componentsMap, component) => {
-      if (component.dependencies) {
-        getBlockDeps(component.dependencies)
-      }
-
-      return { ...componentsMap, [component.componentName]: component }
-    }, {})
-  }
+  useMaterial().initMaterial({ isInit, appData })
 
   // 词条语言为空时使用默认的语言
   const defaultLocales = [
@@ -420,7 +153,7 @@ const fetchResource = async ({ isInit = true } = {}) => {
   }
 
   try {
-    await fetchMaterial()
+    await useMaterial().fetchMaterial()
 
     if (isInit) {
       await initPageOrBlock()
@@ -432,47 +165,11 @@ const fetchResource = async ({ isInit = true } = {}) => {
   }
 }
 
-const getSnippetRelationship = (component) => {
-  let relationship = {}
-  resState.components.forEach(({ children }) => {
-    const child = children.find(({ snippetName }) => snippetName === component)
-    child && (relationship = child.relationship)
-  })
-
-  return relationship
-}
-
-/**
- * 获取新增区块的依赖，更新画布中的组件依赖
- * @param {array} blocks 新增的区块列表
- */
-const updateCanvasDependencies = (blocks) => {
-  blocks.forEach((block) => {
-    if (!block.content.dependencies) return
-
-    getBlockDeps(block.content.dependencies)
-  })
-
-  useCanvas().canvasApi.value?.canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
-}
-
 export default function () {
   return {
     resState,
     fetchResource,
-    fetchMaterial,
-    generateNode,
-    addMaterials,
-    clearMaterials,
-    clearBlockResources,
-    getMaterial,
-    setMaterial,
-    getConfigureMap,
-    registerComponent,
-    registerBlock,
-    getSnippetRelationship,
     initPageOrBlock,
-    handlePopStateEvent,
-    updateCanvasDependencies
+    handlePopStateEvent
   }
 }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index 8186d02f10..946b28936a 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -24,7 +24,7 @@ import { nextTick, reactive, watch, inject } from 'vue'
 import { Search } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
-import { useApp, useBlock, useModal, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useApp, useBlock, useModal, useResource, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import BlockGroupTransfer from './BlockGroupTransfer.vue'
 import BlockGroupFilters from './BlockGroupFilters.vue'
 
@@ -113,7 +113,7 @@ export default {
             const selectedId = selectedBlockArray.value.map((b) => b.id)
             const addedBlocks = res.blocks.filter((item) => selectedId.includes(item.id))
 
-            useResource().updateCanvasDependencies(addedBlocks)
+            useMaterial().updateCanvasDependencies(addedBlocks)
 
             isRefresh.value = true
             state.searchValue = ''
diff --git a/packages/plugins/materials/src/meta/block/src/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
index 297f99fab9..3c3486e188 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockList.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockList.vue
@@ -17,7 +17,7 @@
 
 <script lang="jsx">
 import { computed, inject, reactive, ref } from 'vue'
-import { useBlock, useResource, useModal, useApp, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useBlock, useMaterial, useModal, useApp, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { PluginBlockList } from '@opentiny/tiny-engine-common'
 import { requestUpdateGroup, fetchGroupBlocksById } from './http'
 import { setBlockPanelVisible, setBlockVersionPanelVisible } from './js/usePanel'
@@ -49,7 +49,7 @@ export default {
   },
   emits: ['check', 'close'],
   setup(props, { emit }) {
-    const { generateNode, registerBlock } = useResource()
+    const { generateNode, registerBlock } = useMaterial()
     const { isDefaultGroupId, isAllGroupId, selectedBlock, selectedGroup, isRefresh, getBlockAssetsByVersion } =
       useBlock()
     const blockRef = ref(null)
diff --git a/packages/plugins/materials/src/meta/block/src/Main.vue b/packages/plugins/materials/src/meta/block/src/Main.vue
index 92ceb1f560..3cc7f0179d 100644
--- a/packages/plugins/materials/src/meta/block/src/Main.vue
+++ b/packages/plugins/materials/src/meta/block/src/Main.vue
@@ -16,7 +16,7 @@
 import { onMounted, reactive, watch, provide, computed } from 'vue'
 import { Search } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
-import { useApp, useBlock, useModal, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useApp, useBlock, useMaterial, useModal } from '@opentiny/tiny-engine-meta-register'
 import BlockGroup from './BlockGroup.vue'
 import BlockList from './BlockList.vue'
 import BlockGroupPanel from './BlockGroupPanel.vue'
@@ -40,7 +40,7 @@ export default {
   },
   setup(props) {
     const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
-    const { resState } = useResource()
+    const { materialState } = useMaterial()
     const { message } = useModal()
     const appId = useApp().appInfoState.selectedId
 
@@ -81,14 +81,14 @@ export default {
       // 设计器默认区块分组的数据从bundle.json取，其他用户自定义分组调接口向数据库查询
       const groupId = selectedGroup.value.groupId
       if (isDefaultGroupId(groupId)) {
-        const blocks = resState.blocks[0]?.children || []
+        const blocks = materialState.blocks[0]?.children || []
         state.groupData = value ? blocks.filter((item) => new RegExp(value, 'i').test(item?.label)) : blocks
         state.groupData.forEach((block) => {
           block.isDefaultGroup = true
         })
       } else if (isAllGroupId(groupId)) {
         const groupIds = state.groups.map((item) => item.value.groupId).filter((id) => typeof id === 'number')
-        const innerBlocks = resState.blocks[0]?.children || []
+        const innerBlocks = materialState.blocks[0]?.children || []
         innerBlocks.forEach((item) => {
           item.isDefaultGroup = true
           item.groupName = '设计器默认区块分组'
diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue
index 878f0265a4..ac1bedcdfd 100644
--- a/packages/plugins/materials/src/meta/component/src/Main.vue
+++ b/packages/plugins/materials/src/meta/component/src/Main.vue
@@ -34,7 +34,7 @@ import { inject, onMounted, reactive, ref } from 'vue'
 import { Collapse, CollapseItem, Search } from '@opentiny/vue'
 import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import { iconSearch } from '@opentiny/vue-icon'
-import { useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useMaterial, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { CanvasDragItem } from '@opentiny/tiny-engine-canvas'
 
 export default {
@@ -49,10 +49,10 @@ export default {
   setup() {
     const COMPONENT_PANEL_COLUMNS = '1fr 1fr 1fr'
     const SHORTCUT_PANEL_COLUMNS = '1fr 1fr 1fr 1fr 1fr 1fr'
-    const { generateNode, resState } = useResource()
+    const { generateNode, materialState } = useMaterial()
     const gridTemplateColumns = ref(COMPONENT_PANEL_COLUMNS)
     const panelState = inject('panelState', {})
-    const { components } = resState
+    const { components } = materialState
 
     const fetchComponents = (components, name) => {
       if (!name) {
diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
index 381cb0eeb9..4e786ef78c 100644
--- a/packages/plugins/materials/src/meta/layout/src/Main.vue
+++ b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -50,15 +50,16 @@ export default {
 
     const pluginRegistryData = ref(props.registryData)
     const rightPanelRef = ref(null)
-    const tabComponentIds = pluginRegistryData.value.options.tabComponentIds || []
+    const displayComponentIds = pluginRegistryData.value.options.displayComponentIds || []
     const headerComponent = getMergeMeta(pluginRegistryData.value.components?.header)
-    const onlyShowDefault = ref(tabComponentIds.length === 1)
+    const onlyShowDefault = ref(displayComponentIds.length === 1)
     const activeTabId =
-      tabComponentIds.find((item) => item === pluginRegistryData.value.options?.defaultTabId) || tabComponentIds[0]
+      displayComponentIds.find((item) => item === pluginRegistryData.value.options?.defaultTabId) ||
+      displayComponentIds[0]
 
     const activeName = ref(activeTabId)
     const defaultComponent = getMergeMeta(activeName.value)?.entry
-    const tabComponents = tabComponentIds.map((id) => {
+    const tabComponents = displayComponentIds.map((id) => {
       const itemMeta = getMergeMeta(id)
       return {
         id,
diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index 3200349ba7..9c29df0384 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -35,7 +35,7 @@
 
 <script lang="jsx">
 import { reactive, ref, watchEffect, provide } from 'vue'
-import { useCanvas, useApp, useResource, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useApp, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
@@ -73,7 +73,6 @@ export default {
     const { appInfoState } = useApp()
     const { pageState } = useCanvas()
     const { pageSettingState, DEFAULT_PAGE, isTemporaryPage, initCurrentPageData } = usePage()
-    const { resState } = useResource()
     const pageTreeRef = ref(null)
     const ROOT_ID = pageSettingState.ROOT_ID
     const docsUrl = useHelp().getDocsUrl('page')
@@ -145,7 +144,6 @@ export default {
 
     return {
       state,
-      resState,
       appInfoState,
       pageState,
       openNewPage,
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 1d5b667b12..8eb0ae2ae6 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -77,7 +77,7 @@ import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { IconChevronDown, iconEyeopen, iconEyeclose } from '@opentiny/vue-icon'
 // import Sortable from 'sortablejs'
-import { useCanvas, useResource, useLayout } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useMaterial, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
 
@@ -99,7 +99,7 @@ export default {
   emits: ['close', 'fix-panel'],
   setup() {
     const { pageState, getInstance } = useCanvas()
-    const { getMaterial } = useResource()
+    const { getMaterial } = useMaterial()
 
     const filterSchema = (data) => {
       const translateChild = (data) => {
diff --git a/packages/register/src/hooks.js b/packages/register/src/hooks.js
index 9d8d14ab58..8deafd8ecb 100644
--- a/packages/register/src/hooks.js
+++ b/packages/register/src/hooks.js
@@ -18,7 +18,8 @@ export const HOOK_NAME = {
   useEnv: 'env',
   useModal: 'modal',
   useNotify: 'notify',
-  useCustom: 'custom'
+  useCustom: 'custom',
+  useMaterial: 'material'
 }
 
 const hooksState = {
@@ -41,6 +42,7 @@ const hooksState = {
   [HOOK_NAME.useEnv]: {},
   [HOOK_NAME.useNotify]: {},
   [HOOK_NAME.useModal]: {},
+  [HOOK_NAME.useMaterial]: {},
   [HOOK_NAME.useCustom]: {} // 自定义
 }
 
@@ -70,6 +72,7 @@ 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 useMaterial = (...args) => getHook(HOOK_NAME.useMaterial, args)
 export const useCustom = (...args) => getHook(HOOK_NAME.useCustom, args)
 
 export function initHook(hookName, hookContent, { useDefaultExport } = {}) {
diff --git a/packages/settings/events/src/components/BindEvents.vue b/packages/settings/events/src/components/BindEvents.vue
index 8378330cc0..02a5ebf151 100644
--- a/packages/settings/events/src/components/BindEvents.vue
+++ b/packages/settings/events/src/components/BindEvents.vue
@@ -88,7 +88,7 @@
 import { computed, reactive, watchEffect } from 'vue'
 import { Popover, Button } from '@opentiny/vue'
 import { useModal } from '@opentiny/tiny-engine-meta-register'
-import { getMergeMeta, useCanvas, useLayout, useBlock, useResource } from '@opentiny/tiny-engine-meta-register'
+import { getMergeMeta, useCanvas, useLayout, useBlock, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { BlockLinkEvent, SvgButton } from '@opentiny/tiny-engine-common'
 import { iconHelpQuery, iconChevronDown } from '@opentiny/vue-icon'
 import BindEventsDialog, { open as openDialog } from './BindEventsDialog.vue'
@@ -110,7 +110,7 @@ export default {
     const { PLUGIN_NAME, activePlugin, getPluginApi } = useLayout()
     const { pageState } = useCanvas()
     const { getBlockEvents, getCurrentBlock, removeEventLink } = useBlock()
-    const { getMaterial } = useResource()
+    const { getMaterial } = useMaterial()
     const { confirm } = useModal()
 
     const { highlightMethod } = getPluginApi(PLUGIN_NAME.PageController)
diff --git a/packages/settings/props/src/components/inputs/BindFunction.vue b/packages/settings/props/src/components/inputs/BindFunction.vue
index 66d5f05439..f47794b483 100644
--- a/packages/settings/props/src/components/inputs/BindFunction.vue
+++ b/packages/settings/props/src/components/inputs/BindFunction.vue
@@ -12,7 +12,7 @@
 <script>
 import { reactive, ref } from 'vue'
 import { Button } from '@opentiny/vue'
-import { useProperties, useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useMaterial, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import BindEventsDialog from '@/settings/events/src/components/BindEventsDialog.vue'
 
 export default {
@@ -34,7 +34,7 @@ export default {
   setup(props) {
     const { setProp } = useProperties()
     const { pageState } = useCanvas()
-    const { getMaterial } = useResource()
+    const { getMaterial } = useMaterial()
     const currentSchema = pageState.currentSchema
     const keys = Object.keys(currentSchema.props)
     const dialogVisible = ref(false)
diff --git a/packages/settings/props/src/components/inputs/DraggableOptions.vue b/packages/settings/props/src/components/inputs/DraggableOptions.vue
index 6f7971aa84..33d7ba57cb 100644
--- a/packages/settings/props/src/components/inputs/DraggableOptions.vue
+++ b/packages/settings/props/src/components/inputs/DraggableOptions.vue
@@ -25,7 +25,7 @@ import {
   IconPlus,
   IconCode
 } from '@opentiny/vue-icon'
-import { useProperties, useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useProperties, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { MetaList, MetaListActions, MetaListItems } from '@opentiny/tiny-engine-common'
 
 export default {
@@ -51,7 +51,6 @@ export default {
   },
   setup(props, { emit }) {
     const { setProp } = useProperties()
-    const { resState } = useResource()
     const { pageState } = useCanvas()
 
     let properties = []
@@ -163,7 +162,6 @@ export default {
       changeItem,
       deleteItem,
       actionEvents,
-      resState,
       pageState,
       optionsList,
       actionsOptions,
diff --git a/packages/settings/props/src/composable/useProperties.js b/packages/settings/props/src/composable/useProperties.js
index 91f7b2a025..0b881fbb6a 100644
--- a/packages/settings/props/src/composable/useProperties.js
+++ b/packages/settings/props/src/composable/useProperties.js
@@ -12,7 +12,7 @@
 
 import { toRaw, nextTick, shallowReactive, ref } from 'vue'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { useCanvas, useResource, useTranslate } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useMaterial, useTranslate } from '@opentiny/tiny-engine-meta-register'
 
 const { COMPONENT_NAME } = constants
 const propsUpdateKey = ref(0)
@@ -160,7 +160,7 @@ const getProps = (schema, parent) => {
       schema: metaSchema,
       content,
       properties
-    } = useResource().getMaterial(isPageOrBlock(schema) ? 'div' : componentName)
+    } = useMaterial().getMaterial(isPageOrBlock(schema) ? 'div' : componentName) || {}
     const schemaProps = properties || metaSchema?.properties || content?.schema?.properties || []
     const propGroups = [...schemaProps]
 
diff --git a/packages/toolbars/refresh/src/Main.vue b/packages/toolbars/refresh/src/Main.vue
index 0b3735b54a..a0d856a5ea 100644
--- a/packages/toolbars/refresh/src/Main.vue
+++ b/packages/toolbars/refresh/src/Main.vue
@@ -16,7 +16,7 @@
 
 <script>
 import { Popover } from '@opentiny/vue'
-import { useResource, useCanvas, useModal, useLayout, useBlock } from '@opentiny/tiny-engine-meta-register'
+import { useMaterial, useCanvas, useModal, useLayout, useBlock } from '@opentiny/tiny-engine-meta-register'
 
 export default {
   components: {
@@ -36,7 +36,7 @@ export default {
 
     const refreshResouce = () => {
       // 清空区块缓存(不能清空组件缓存)，保证画布刷新后可以重新注册最新的区块资源
-      useResource().clearBlockResources()
+      useMaterial().clearBlockResources()
       // 因为webcomponents无法重复注册，所以需要刷新内部iframe
       useCanvas().canvasApi.value.getDocument().location.reload()
     }