diff --git a/designer-demo/registry.js b/designer-demo/registry.js
index 8ccf1ec08..dbb41295e 100644
--- a/designer-demo/registry.js
+++ b/designer-demo/registry.js
@@ -42,6 +42,7 @@ import {
   Canvas,
   EditorInfoService,
   AppService,
+  AppDataService,
   GenerateCodeService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
@@ -52,6 +53,7 @@ export default {
     metas: [
       EditorInfoService,
       AppService,
+      AppDataService,
       GenerateCodeService
     ]
   },
diff --git a/mockServer/src/database/pages.db b/mockServer/src/database/pages.db
index 103c88610..2c1e9dc77 100644
--- a/mockServer/src/database/pages.db
+++ b/mockServer/src/database/pages.db
@@ -2,3 +2,6 @@
 {"name":"createVm","id":"NTJ4MjvqoVj8OVsc","app":"918","route":"createVm","page_content":{"state":{"dataDisk":[1,2,3]},"methods":{},"componentName":"Page","css":"body {\r\n  background-color:#eef0f5 ;\r\n  margin-bottom: 80px;\r\n}","props":{},"children":[{"componentName":"div","props":{"style":"padding-bottom: 10px; padding-top: 10px;"},"id":"2b2cabf0","children":[{"componentName":"TinyTimeLine","props":{"active":"2","data":[{"name":"基础配置"},{"name":"网络配置"},{"name":"高级配置"},{"name":"确认配置"}],"horizontal":true,"style":"border-radius: 0px;"},"id":"dd764b17"}]},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"},"id":"30c94cc8","children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"计费模式"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"包年/包月","value":"1"},{"text":"按需计费","value":"2"}],"modelValue":"1"},"id":"a8d84361"}],"id":"9f39f3e7"},{"componentName":"TinyFormItem","props":{"label":"区域"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"乌兰察布二零一","value":"1"}],"modelValue":"1","style":"border-radius: 0px; margin-right: 10px;"},"id":"c97ccd99"},{"componentName":"Text","props":{"text":"温馨提示：页面左上角切换区域","style":"background-color: [object Event]; color: #8a8e99; font-size: 12px;"},"id":"20923497"},{"componentName":"Text","props":{"text":"不同区域的云服务产品之间内网互不相通；请就近选择靠近您业务的区域，可减少网络时延，提高访问速度","style":"display: block; color: #8a8e99; border-radius: 0px; font-size: 12px;"},"id":"54780a26"}],"id":"4966384d"},{"componentName":"TinyFormItem","props":{"label":"可用区","style":"border-radius: 0px;"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"可用区1","value":"1"},{"text":"可用区2","value":"2"},{"text":"可用区3","value":"3"}],"modelValue":"1"},"id":"6184481b"}],"id":"690837bf"}],"id":"b6a425d4"}]},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"},"children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"CPU架构"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"x86计算","value":"1"},{"text":"鲲鹏计算","value":"2"}],"modelValue":"1"},"id":"7d33ced7"}],"id":"05ed5a79"},{"componentName":"TinyFormItem","props":{"label":"区域"},"children":[{"componentName":"div","props":{"style":"display: flex; justify-content: flex-start; align-items: center;"},"id":"606edf78","children":[{"componentName":"div","props":{"style":"display: flex; align-items: center; margin-right: 10px;"},"id":"f3f98246","children":[{"componentName":"Text","props":{"text":"vCPUs","style":"width: 80px;"},"id":"c287437e"},{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}]},"id":"4c43286b"}]},{"componentName":"div","props":{"style":"display: flex; align-items: center; margin-right: 10px;"},"children":[{"componentName":"Text","props":{"text":"内存","style":"width: 80px; border-radius: 0px;"},"id":"38b8fa1f"},{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}]},"id":"cd33328e"}],"id":"2b2c678f"},{"componentName":"div","props":{"style":"display: flex; align-items: center;"},"children":[{"componentName":"Text","props":{"text":"规格名称","style":"width: 80px;"},"id":"d3eb6352"},{"componentName":"TinySearch","props":{"modelValue":"","placeholder":"输入关键词"},"id":"21cb9282"}],"id":"b8e0f35c"}]},{"componentName":"div","props":{"style":"border-radius: 0px;"},"id":"5000c83e","children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"通用计算型","value":"1"},{"text":"通用计算增强型","value":"2"},{"text":"内存优化型","value":"3"},{"text":"内存优化型","value":"4"},{"text":"磁盘增强型","value":"5"},{"text":"超高I/O型","value":"6"},{"text":"GPU加速型","value":"7"}],"modelValue":"1","style":"border-radius: 0px; margin-top: 12px;"},"id":"b8724703"},{"componentName":"TinyGrid","props":{"editConfig":{"trigger":"click","mode":"cell","showStatus":true},"columns":[{"type":"radio","width":60},{"field":"employees","title":"规格名称"},{"field":"created_date","title":"vCPUs | 内存(GiB)","sortable":true},{"field":"city","title":"CPU","sortable":true},{"title":"基准 / 最大带宽\t","sortable":true},{"title":"内网收发包","sortable":true}],"data":[{"id":"1","name":"GFD科技有限公司","city":"福州","employees":800,"created_date":"2014-04-30 00:56:00","boole":false},{"id":"2","name":"WWW科技有限公司","city":"深圳","employees":300,"created_date":"2016-07-08 12:36:22","boole":true}],"style":"margin-top: 12px; border-radius: 0px;","auto-resize":true},"id":"77701c25"},{"componentName":"div","props":{"style":"margin-top: 12px; border-radius: 0px;"},"id":"3339838b","children":[{"componentName":"Text","props":{"text":"当前规格","style":"width: 150px; display: inline-block;"},"id":"203b012b"},{"componentName":"Text","props":{"text":"通用计算型 | Si2.large.2 | 2vCPUs | 4 GiB","style":"font-weight: 700;"},"id":"87723f52"}]}]}],"id":"657fb2fc"}],"id":"d19b15cf"}],"id":"9991228b"},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"},"children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"镜像","style":"border-radius: 0px;"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"公共镜像","value":"1"},{"text":"私有镜像","value":"2"},{"text":"共享镜像","value":"3"}],"modelValue":"1"},"id":"922b14cb"},{"componentName":"div","props":{"style":"display: flex; margin-top: 12px; border-radius: 0px;"},"id":"6b679524","children":[{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}],"style":"width: 170px; margin-right: 10px;"},"id":"4851fff7"},{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}],"style":"width: 340px;"},"id":"a7183eb7"}]},{"componentName":"div","props":{"style":"margin-top: 12px;"},"id":"57aee314","children":[{"componentName":"Text","props":{"text":"请注意操作系统的语言类型。","style":"color: #e37d29;"},"id":"56d36c27"}]}],"id":"e3b02436"}],"id":"59aebf2b"}],"id":"87ff7b99"},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"},"children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"系统盘","style":"border-radius: 0px;"},"children":[{"componentName":"div","props":{"style":"display: flex;"},"id":"cddba5b8","children":[{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}],"style":"width: 200px; margin-right: 10px;"},"id":"a97fbe15"},{"componentName":"TinyInput","props":{"placeholder":"请输入","modelValue":"","style":"width: 120px; margin-right: 10px;"},"id":"1cde4c0f"},{"componentName":"Text","props":{"text":"GiB   \nIOPS上限240，IOPS突发上限5,000","style":"color: #575d6c; font-size: 12px;"},"id":"2815d82d"}]}],"id":"50239a3a"}],"id":"e8582986"},{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"数据盘","style":"border-radius: 0px;"},"children":[{"componentName":"div","props":{"style":"margin-top: 12px; display: flex;"},"id":"728c9825","children":[{"componentName":"Icon","props":{"style":"margin-right: 10px; width: 16px; height: 16px;","name":"IconPanelMini"},"id":"fded6930"},{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}],"style":"width: 200px; margin-right: 10px;"},"id":"62734e3f"},{"componentName":"TinyInput","props":{"placeholder":"请输入","modelValue":"","style":"width: 120px; margin-right: 10px;"},"id":"667c7926"},{"componentName":"Text","props":{"text":"GiB   \nIOPS上限600，IOPS突发上限5,000","style":"color: #575d6c; font-size: 12px; margin-right: 10px;"},"id":"e7bc36d6"},{"componentName":"TinyInput","props":{"placeholder":"请输入","modelValue":"","style":"width: 120px;"},"id":"1bd56dc0"}],"loop":{"type":"JSExpression","value":"this.state.dataDisk"}},{"componentName":"div","props":{"style":"display: flex; margin-top: 12px; border-radius: 0px;"},"children":[{"componentName":"Icon","props":{"name":"IconPlus","style":"width: 16px; height: 16px; margin-right: 10px;"},"id":"65c89f2b"},{"componentName":"Text","props":{"text":"增加一块数据盘","style":"font-size: 12px; border-radius: 0px; margin-right: 10px;"},"id":"cb344071"},{"componentName":"Text","props":{"text":"您还可以挂载 21 块磁盘（云硬盘）","style":"color: #8a8e99; font-size: 12px;"},"id":"80eea996"}],"id":"e9e530ab"}],"id":"078e03ef"}],"id":"ccef886e"}],"id":"0fb7bd74"},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-color: #ffffff; padding-top: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; position: fixed; inset: auto 0% 0% 0%; height: 80px; line-height: 80px; border-radius: 0px;"},"children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[],"id":"21ed4475"},{"componentName":"TinyRow","props":{"style":"border-radius: 0px; height: 100%;"},"children":[{"componentName":"TinyCol","props":{"span":"8"},"id":"b9d051a5","children":[{"componentName":"TinyRow","props":{"style":"border-radius: 0px;"},"children":[{"componentName":"TinyCol","props":{"span":"5","style":"display: flex;"},"id":"02352776","children":[{"componentName":"Text","props":{"text":"购买量","style":"margin-right: 10px;"},"id":"0cd9ed5c"},{"componentName":"TinyInput","props":{"placeholder":"请输入","modelValue":"","style":"width: 120px; margin-right: 10px;"},"id":"2f9cf442"},{"componentName":"Text","props":{"text":"台"},"id":"facd4481"}]},{"componentName":"TinyCol","props":{"span":"7"},"id":"82b6c659","children":[{"componentName":"div","props":{},"id":"9cd65874","children":[{"componentName":"Text","props":{"text":"配置费用","style":"font-size: 12px;"},"id":"b5a0a0da"},{"componentName":"Text","props":{"text":"¥1.5776","style":"padding-left: 10px; padding-right: 10px; color: #de504e;"},"id":"d9464214"},{"componentName":"Text","props":{"text":"/小时","style":"font-size: 12px;"},"id":"af7cc5e6"}]},{"componentName":"div","props":{},"id":"89063830","children":[{"componentName":"Text","props":{"text":"参考价格，具体扣费请以账单为准。","style":"font-size: 12px; border-radius: 0px;"},"id":"d8995fbc"},{"componentName":"Text","props":{"text":"了解计费详情","style":"font-size: 12px; color: #344899;"},"id":"b383c3e2"}]}]}],"id":"94fc0e43"}]},{"componentName":"TinyCol","props":{"span":"4","style":"display: flex; flex-direction: row-reverse; border-radius: 0px; height: 100%; justify-content: flex-start; align-items: center;"},"id":"10b73009","children":[{"componentName":"TinyButton","props":{"text":"下一步: 网络配置","type":"danger","style":"max-width: unset;"},"id":"0b584011"}]}],"id":"d414a473"}],"id":"e8ec029b"}],"fileName":"createVm"},"tenant":1,"isBody":false,"parentId":"0","group":"staticPages","depth":0,"isPage":true,"isDefault":false,"occupier":{"id":86,"username":"开发者","email":"developer@lowcode.com","resetPasswordToken":"developer","confirmationToken":"dfb2c162-351f-4f44-ad5f-8998","is_admin":true},"isHome":false,"_id":"NTJ4MjvqoVj8OVsc"}
 {"$$indexCreated":{"fieldName":"route","unique":true,"sparse":false}}
 {"$$indexCreated":{"fieldName":"route","unique":true}}
+{"name":"Untitled","id":"","app":"918","route":"Untitled","page_content":{"componentName":"Page","css":"","props":{},"lifeCycles":{},"children":[],"dataSource":{"list":[]},"state":{},"methods":{},"utils":[],"bridge":[],"inputs":[],"outputs":[],"fileName":"Untitled"},"tenant":1,"isBody":false,"parentId":"0","depth":0,"isPage":true,"isDefault":false,"group":"staticPages","occupier":{"id":86,"username":"开发者","email":"developer@lowcode.com","resetPasswordToken":"developer","confirmationToken":"dfb2c162-351f-4f44-ad5f-8998","is_admin":true},"isHome":false,"message":"Page auto save","_id":"JHnQHWZJgWKQeDm0"}
+{"name":"Untitled","id":"JHnQHWZJgWKQeDm0","app":"918","route":"Untitled","page_content":{"componentName":"Page","css":"","props":{},"lifeCycles":{},"children":[],"dataSource":{"list":[]},"state":{},"methods":{},"utils":[],"bridge":[],"inputs":[],"outputs":[],"fileName":"Untitled"},"tenant":1,"isBody":false,"parentId":"0","depth":0,"isPage":true,"isDefault":false,"group":"staticPages","occupier":{"id":86,"username":"开发者","email":"developer@lowcode.com","resetPasswordToken":"developer","confirmationToken":"dfb2c162-351f-4f44-ad5f-8998","is_admin":true},"isHome":false,"message":"Page auto save","_id":"JHnQHWZJgWKQeDm0"}
+{"name":"Untitled","id":"JHnQHWZJgWKQeDm0","app":"918","route":"Untitled","page_content":{"state":{},"methods":{},"componentName":"Page","css":"","props":{},"lifeCycles":{},"children":[{"componentName":"ElTable","props":{"data":[{"date":"2016-05-03","name":"Tom","address":"No. 189, Grove St, Los Angeles"},{"date":"2016-05-02","name":"Tom","address":"No. 189, Grove St, Los Angeles"},{"date":"2016-05-04","name":"Tom","address":"No. 189, Grove St, Los Angeles"},{"date":"2016-05-01","name":"Tom","address":"No. 189, Grove St, Los Angeles"}],"columns":[{"type":"index"},{"label":"Date","prop":"date"},{"label":"Name","prop":"name"},{"label":"Address","prop":"address"}]},"id":"45461212","children":[{"componentName":"ElTableColumn","props":{"type":"index"},"id":"11664532"},{"componentName":"ElTableColumn","props":{"label":"Date","prop":"date"},"id":"626661d4"},{"componentName":"ElTableColumn","props":{"label":"Name","prop":"name"},"id":"44467375"},{"componentName":"ElTableColumn","props":{"label":"Address","prop":"address"},"id":"325c2254"}]}],"dataSource":{"list":[]},"utils":[],"bridge":[],"inputs":[],"outputs":[],"fileName":"Untitled"},"tenant":1,"isBody":false,"parentId":"0","depth":0,"isPage":true,"isDefault":false,"group":"staticPages","occupier":{"id":86,"username":"开发者","email":"developer@lowcode.com","resetPasswordToken":"developer","confirmationToken":"dfb2c162-351f-4f44-ad5f-8998","is_admin":true},"isHome":false,"message":"Page auto save","_id":"JHnQHWZJgWKQeDm0"}
diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js
index a6e809d58..a6663d27c 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, useMaterial } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useLayout, useAppData, 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 画布内外应该分开
 
@@ -790,7 +790,7 @@ export const deleteState = (variable) => {
 }
 
 export const setGlobalState = (state) => {
-  useResource().resState.globalState = state
+  useAppData().appDataState.globalState = state
   getRenderer().setGlobalState(state)
 }
 
@@ -911,10 +911,10 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
     senterMessage({ type: 'i18nReady', value: true }, '*')
   }
 
-  setGlobalState(useResource().resState.globalState)
-  renderer.setDataSourceMap(useResource().resState.dataSource)
+  setGlobalState(useAppData().appDataState.globalState)
+  renderer.setDataSourceMap(useAppData().appDataState.dataSource)
   // 设置画布全局的utils工具类上下文环境
-  setUtils(useResource().resState.utils)
+  setUtils(useAppData().appDataState.utils)
   setSchema(schema)
   setConfigure(useMaterial().getConfigureMap())
   canvasDispatch('updateDependencies', { detail: useMaterial().materialState.thirdPartyDeps })
diff --git a/packages/common/component/MetaListItems.vue b/packages/common/component/MetaListItems.vue
index df9f50491..efa97c06c 100644
--- a/packages/common/component/MetaListItems.vue
+++ b/packages/common/component/MetaListItems.vue
@@ -62,7 +62,7 @@
 <script>
 import { computed } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
-import { useResource } from '@opentiny/tiny-engine-meta-register'
+import { useAppData } from '@opentiny/tiny-engine-meta-register'
 import MetaListItem from './MetaListItem.vue'
 
 export default {
@@ -103,7 +103,7 @@ export default {
   },
   setup(props, { emit }) {
     const listItemOption = computed(() => props)
-    const { resState } = useResource()
+    const { appDataState } = useAppData()
 
     const changeItem = (params) => {
       const optionsList = [...props.optionsList]
@@ -159,7 +159,7 @@ export default {
         if (item[props.textField]) {
           if (item[props.textField].i18nKey) {
             let i18nKey = item[props.textField].i18nKey
-            text = resState.langs[i18nKey][resState.currentLang]
+            text = appDataState.langs[i18nKey][appDataState.currentLang]
           } else {
             text = item[props.textField]
           }
diff --git a/packages/common/composable/index.js b/packages/common/composable/index.js
index 75268a70d..f67a0069d 100644
--- a/packages/common/composable/index.js
+++ b/packages/common/composable/index.js
@@ -2,6 +2,7 @@ import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
 
 import useApp from './useApp'
 import useEditorInfo from './useEditorInfo'
+import useAppData from './useAppData'
 
 export { GenerateCodeService } from './generateCode'
 
@@ -22,3 +23,12 @@ export const EditorInfoService = {
     name: HOOK_NAME.useEditorInfo
   }
 }
+
+export const AppDataService = {
+  id: 'engine.service.appData',
+  type: 'MetaService',
+  apis: useAppData(),
+  composable: {
+    name: HOOK_NAME.useAppData
+  }
+}
diff --git a/packages/common/composable/useAppData.js b/packages/common/composable/useAppData.js
new file mode 100644
index 000000000..6ad975ffc
--- /dev/null
+++ b/packages/common/composable/useAppData.js
@@ -0,0 +1,89 @@
+/**
+ * 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 { constants } from '@opentiny/tiny-engine-utils'
+import { useApp, useTranslate, useEditorInfo } from '@opentiny/tiny-engine-meta-register'
+
+const { DEFAULT_INTERCEPTOR } = constants
+
+const appDataState = reactive({
+  dataSource: [],
+  pageTree: [],
+  langs: {},
+  utils: {},
+  globalState: [],
+  willFetch: {},
+  dataHandler: {},
+  errorHandler: {},
+  bridge: {},
+  isDemo: false
+})
+
+const initI18n = async () => {
+  const { id, type } = useEditorInfo().useInfo()
+  try {
+    await useTranslate().initI18n({ host: id, hostType: type, init: true })
+  } catch (error) {
+    console.log(error) // eslint-disable-line
+  }
+}
+
+const setAppDataState = (appData) => {
+  appDataState.pageTree = appData.componentsTree
+  appDataState.dataSource = appData.dataSource?.list
+  appDataState.dataHandler = appData.dataSource?.dataHandler || DEFAULT_INTERCEPTOR.dataHandler
+  appDataState.willFetch = appData.dataSource?.willFetch || DEFAULT_INTERCEPTOR.willFetch
+  appDataState.errorHandler = appData.dataSource?.errorHandler || DEFAULT_INTERCEPTOR.errorHandler
+
+  appDataState.bridge = appData.bridge
+  appDataState.utils = appData.utils
+  appDataState.isDemo = appData.meta?.is_demo
+  appDataState.globalState = appData?.meta.global_state
+
+  // 词条语言为空时使用默认的语言
+  const defaultLocales = [
+    { lang: 'zh_CN', label: 'zh_CN' },
+    { lang: 'en_US', label: 'en_US' }
+  ]
+  const locales = Object.keys(appData.i18n).length
+    ? Object.keys(appData.i18n).map((key) => ({ lang: key, label: key }))
+    : defaultLocales
+  appDataState.langs = {
+    locales,
+    messages: appData.i18n
+  }
+}
+
+const fetchAppData = async () => {
+  const { id } = useEditorInfo().useInfo()
+  useApp().appInfoState.selectedId = id
+  return await useHttp().get(`/app-center/v1/api/apps/schema/${id}`)
+}
+
+const initAppData = async () => {
+  const appData = await fetchAppData()
+  setAppDataState(appData)
+  await initI18n()
+
+  //TODO： 先返回，等后续有事件通知后，则不采用返回模式，直接使用事件通知
+  return appData
+}
+
+export default function () {
+  return {
+    appDataState,
+    fetchAppData, // 请求APP全局数据
+    initAppData // 初始化APP全局数据
+  }
+}
diff --git a/packages/common/js/canvas.js b/packages/common/js/canvas.js
index bdf88ae3c..a3700bbd1 100644
--- a/packages/common/js/canvas.js
+++ b/packages/common/js/canvas.js
@@ -11,11 +11,11 @@
  */
 
 import { PAGE_STATUS } from './constants'
-import { useEditorInfo, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useEditorInfo, useAppData } from '@opentiny/tiny-engine-meta-register'
 
 export const getCanvasStatus = (data) => {
   // 写死ID 待删除
-  let isDemo = useResource().resState.isDemo
+  let isDemo = useAppData().appDataState.isDemo
   const { resetPasswordToken } = useEditorInfo().userInfo.value
 
   if (isDemo && [PAGE_STATUS.Developer, PAGE_STATUS.SuperAdmin].includes(resetPasswordToken)) {
diff --git a/packages/common/js/completion.js b/packages/common/js/completion.js
index 60c519bdc..6c521cc27 100644
--- a/packages/common/js/completion.js
+++ b/packages/common/js/completion.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { useCanvas, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useAppData } from '@opentiny/tiny-engine-meta-register'
 
 const keyWords = [
   'state',
@@ -71,7 +71,7 @@ const getSnippetsSuggestions = (monaco, range, wordContent) =>
     .filter(({ insertText }) => insertText.indexOf(wordContent) === 0)
 
 const getUserWords = () => {
-  const { bridge = [], dataSource = [], utils = [], globalState = [] } = useResource().resState
+  const { bridge = [], dataSource = [], utils = [], globalState = [] } = useAppData().appDataState
 
   return {
     state: {
diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
index 35253d2dd..bcc6304d6 100644
--- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue
+++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -121,14 +121,7 @@
 
 <script>
 import { VueMonaco as MonacoEditor, SvgButton } from '@opentiny/tiny-engine-common'
-import {
-  useApp,
-  useCanvas,
-  useProperties,
-  useResource,
-  getMetaApi,
-  META_APP
-} from '@opentiny/tiny-engine-meta-register'
+import { useApp, useCanvas, useProperties, useAppData, getMetaApi, META_APP } from '@opentiny/tiny-engine-meta-register'
 import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
 import { formatString, generate, parse, traverse } from '@opentiny/tiny-engine-common/js/ast'
 import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-common/js/constants'
@@ -472,7 +465,7 @@ export default {
       } else if (item.id === 'bridge' || item.id === 'utils') {
         state.bindPrefix = `${CONSTANTS.THIS}${item.id}.`
         const bridge = {}
-        useResource().resState[item.id]?.forEach((res) => {
+        useAppData().appDataState[item.id]?.forEach((res) => {
           bridge[res.name] = `${item.id}.${res.content.exportName}`
         })
 
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index 9325a0ba4..f1c243496 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, MaterialService } from '@opentiny/tiny-engine-plugin-materials'
+export { default as Materials, MaterialService, PageBlockSchemaService } 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'
@@ -39,4 +39,4 @@ export { default as defaultRegistry } from './registry'
 
 export * from '@opentiny/tiny-engine-meta-register'
 
-export { EditorInfoService, AppService } from '@opentiny/tiny-engine-common'
+export { EditorInfoService, AppService, AppDataService } from '@opentiny/tiny-engine-common'
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index 399290d45..ce4a3b4c1 100644
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@@ -10,8 +10,10 @@ import {
   useModal,
   useApp,
   useNotify,
-  useResource,
-  useCanvas
+  useCanvas,
+  useAppData,
+  useMaterial,
+  usePageBlockSchema
 } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { useBroadcastChannel } from '@vueuse/core'
@@ -48,7 +50,7 @@ export default {
     }
 
     const handlePopStateEvent = () => {
-      useResource().handlePopStateEvent()
+      usePageBlockSchema().handlePopStateEvent(useAppData().appDataState.pageTree)
     }
 
     window.addEventListener('popstate', handlePopStateEvent)
@@ -59,9 +61,15 @@ export default {
 
     watch(
       useCanvas().isCanvasApiReady,
-      (ready) => {
+      async (ready) => {
         if (ready) {
-          useResource().fetchResource()
+          const appData = await useAppData().initAppData()
+          try {
+            await useMaterial().initMaterial(appData)
+            await usePageBlockSchema().initPageOrBlock(appData?.componentsTree)
+          } catch (error) {
+            console.log(error) // eslint-disable-line
+          }
         }
       },
       {
diff --git a/packages/engine-cli/template/designer/registry.js b/packages/engine-cli/template/designer/registry.js
index 0119c23da..eb569ac0b 100644
--- a/packages/engine-cli/template/designer/registry.js
+++ b/packages/engine-cli/template/designer/registry.js
@@ -44,14 +44,15 @@ import {
   Canvas,
   EditorInfoService,
   AppService,
-  GenerateCodeService
+  GenerateCodeService,
+  AppDataService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [EditorInfoService, AppService, GenerateCodeService]
+    metas: [EditorInfoService, AppService, GenerateCodeService, AppDataService]
   },
   config: engineConfig,
   layout: Layout,
diff --git a/packages/plugins/bridge/src/js/resource.js b/packages/plugins/bridge/src/js/resource.js
index 813bfdafe..9eecd70b8 100644
--- a/packages/plugins/bridge/src/js/resource.js
+++ b/packages/plugins/bridge/src/js/resource.js
@@ -11,7 +11,7 @@
  */
 
 import { reactive } from 'vue'
-import { useApp, useResource, useNotify, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useApp, useAppData, useNotify, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import {
   fetchResourceList,
@@ -180,8 +180,8 @@ export const saveResource = (data, callback, emit) => {
     data.id = state.resource.id
     requestUpdateReSource(data).then((result) => {
       if (result) {
-        const index = useResource().resState[data.category].findIndex((item) => item.name === result.name)
-        useResource().resState[data.category][index] = result
+        const index = useAppData().appDataState[data.category].findIndex((item) => item.name === result.name)
+        useAppData().appDataState[data.category][index] = result
 
         // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
         updateUtils([result])
@@ -200,7 +200,7 @@ export const saveResource = (data, callback, emit) => {
   } else {
     requestAddReSource(data).then((result) => {
       if (result) {
-        useResource().resState[data.category].push(result)
+        useAppData().appDataState[data.category].push(result)
 
         // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
         updateUtils([result])
@@ -223,8 +223,8 @@ export const deleteData = (name, callback, emit) => {
 
   requestDeleteReSource(params).then((data) => {
     if (data) {
-      const index = useResource().resState[state.type].findIndex((item) => item.name === data.name)
-      useResource().resState[state.type].splice(index, 1)
+      const index = useAppData().appDataState[state.type].findIndex((item) => item.name === data.name)
+      useAppData().appDataState[state.type].splice(index, 1)
 
       deleteUtils([data])
       generateBridgeUtil(useApp().appInfoState.selectedId)
diff --git a/packages/plugins/data/src/DataSourceList.vue b/packages/plugins/data/src/DataSourceList.vue
index e5df9637f..503e56fd5 100644
--- a/packages/plugins/data/src/DataSourceList.vue
+++ b/packages/plugins/data/src/DataSourceList.vue
@@ -21,7 +21,7 @@
 
 <script lang="jsx">
 import { computed } from 'vue'
-import { useModal, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useModal, useAppData } from '@opentiny/tiny-engine-meta-register'
 import { findExpressionInAppSchema } from '@opentiny/tiny-engine-common/js/ast'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { SvgButton, SearchEmpty } from '@opentiny/tiny-engine-common'
@@ -67,7 +67,7 @@ export default {
     }
 
     const removeStoreConfirm = (key) => {
-      const appPages = useResource().resState.pageTree.filter(
+      const appPages = useAppData().appDataState.pageTree.filter(
         (page) => page.componentName === COMPONENT_NAME.Page && page?.meta?.group !== 'publicPages'
       )
       const expression = `stores.${key}`
diff --git a/packages/plugins/data/src/Main.vue b/packages/plugins/data/src/Main.vue
index 01e8a8c6a..88a815bf0 100644
--- a/packages/plugins/data/src/Main.vue
+++ b/packages/plugins/data/src/Main.vue
@@ -73,7 +73,7 @@ import {
   useCanvas,
   useHistory,
   useEditorInfo,
-  useResource,
+  useAppData,
   useNotify,
   useHelp,
   getMetaApi,
@@ -300,7 +300,7 @@ export default {
     }
 
     const removeStore = (key) => {
-      const storeListt = [...useResource().resState.globalState] || []
+      const storeListt = [...useAppData().appDataState.globalState] || []
       const index = storeListt.findIndex((store) => store.id === key)
       const { setGlobalState } = useCanvas().canvasApi.value
 
diff --git a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
index 969adfded..85db38f40 100644
--- a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
+++ b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
@@ -22,7 +22,7 @@
 import DataHandlerEditor from './RemoteDataAdapterForm.vue'
 import { watch, ref, nextTick, reactive } from 'vue'
 import { requestGlobalDataHandler } from './js/http'
-import { useApp, useModal, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useApp, useModal, useAppData } from '@opentiny/tiny-engine-meta-register'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import { Collapse, CollapseItem } from '@opentiny/vue'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -49,9 +49,9 @@ export default {
     const { confirm } = useModal()
 
     const state = reactive({
-      dataHandlerValue: useResource().resState?.dataHandler?.value,
-      willFetchValue: useResource().resState.willFetch?.value,
-      errorHandlerValue: useResource().resState?.errorHandler?.value
+      dataHandlerValue: useAppData().appDataState?.dataHandler?.value,
+      willFetchValue: useAppData().appDataState.willFetch?.value,
+      errorHandlerValue: useAppData().appDataState?.errorHandler?.value
     })
 
     const saveGlobalDataHandle = () => {
@@ -65,9 +65,9 @@ export default {
 
       requestGlobalDataHandler(id, { data_source_global: handler }).then((data) => {
         if (data) {
-          useResource().resState.dataHandler = { type: 'JSFunction', value: state.dataHandlerValue }
-          useResource().resState.willFetch = { type: 'JSFunction', value: state.willFetchValue }
-          useResource().resState.errorHandler = { type: 'JSFunction', value: state.errorHandlerValue }
+          useAppData().appDataState.dataHandler = { type: 'JSFunction', value: state.dataHandlerValue }
+          useAppData().appDataState.willFetch = { type: 'JSFunction', value: state.willFetchValue }
+          useAppData().appDataState.errorHandler = { type: 'JSFunction', value: state.errorHandlerValue }
           confirm({
             title: '提示',
             message: '全局请求处理函数设置成功'
diff --git a/packages/plugins/datasource/src/DataSourceList.vue b/packages/plugins/datasource/src/DataSourceList.vue
index 106206326..ca36f8722 100644
--- a/packages/plugins/datasource/src/DataSourceList.vue
+++ b/packages/plugins/datasource/src/DataSourceList.vue
@@ -32,7 +32,7 @@
 
 <script>
 import { onMounted, reactive, ref } from 'vue'
-import { useApp, useDataSource, useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useApp, useDataSource, useAppData, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { close as closeRemotePanel } from './DataSourceRemotePanel.vue'
 import { close as closeDataSourceForm } from './DataSourceForm.vue'
 import DataSourceRecordList, { open as openRecordList } from './DataSourceRecordList.vue'
@@ -75,7 +75,7 @@ export default {
     const { dataSourceState, saveDataSource } = useDataSource()
 
     onMounted(() => {
-      dataSourceList.value = useResource().resState.dataSource
+      dataSourceList.value = useAppData().appDataState.dataSource
     })
 
     const showSettingIcon = (itemIndex) => {
diff --git a/packages/plugins/datasource/src/js/datasource.js b/packages/plugins/datasource/src/js/datasource.js
index 2a4f3f4f9..def54e549 100644
--- a/packages/plugins/datasource/src/js/datasource.js
+++ b/packages/plugins/datasource/src/js/datasource.js
@@ -11,7 +11,7 @@
  */
 
 import axios from 'axios'
-import { useResource } from '@opentiny/tiny-engine-meta-register'
+import { useAppData } from '@opentiny/tiny-engine-meta-register'
 import { isMock } from '@opentiny/tiny-engine-common/js/environments'
 import { utils as commonUtils, constants } from '@opentiny/tiny-engine-utils'
 import { read, utils, writeFileXLSX } from 'xlsx'
@@ -54,16 +54,16 @@ const defaultWillFetch = createFn(DEFAULT_INTERCEPTOR.willFetch.value)
 const defaultErrorHandler = createFn(DEFAULT_INTERCEPTOR.errorHandler.value)
 
 export const getRequest = (config) => {
-  const globalDataHandle = useResource().resState.dataHandler
-    ? createFn(useResource().resState.dataHandler.value)
+  const globalDataHandle = useAppData().appDataState.dataHandler
+    ? createFn(useAppData().appDataState.dataHandler.value)
     : defaultDataHandler
 
-  const globalErrorHandler = useResource().resState.errorHandler
-    ? createFn(useResource().resState.errorHandler.value)
+  const globalErrorHandler = useAppData().appDataState.errorHandler
+    ? createFn(useAppData().appDataState.errorHandler.value)
     : defaultErrorHandler
 
-  const globalWillFetch = useResource().resState.willFetch
-    ? createFn(useResource().resState.willFetch.value)
+  const globalWillFetch = useAppData().appDataState.willFetch
+    ? createFn(useAppData().appDataState.willFetch.value)
     : defaultWillFetch
 
   const http = axios.create()
diff --git a/packages/plugins/i18n/src/composable/useTranslate.js b/packages/plugins/i18n/src/composable/useTranslate.js
index 76552d046..0c11af465 100644
--- a/packages/plugins/i18n/src/composable/useTranslate.js
+++ b/packages/plugins/i18n/src/composable/useTranslate.js
@@ -17,7 +17,7 @@ import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { generateI18n } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
 import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-common/js/constants'
-import { useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useAppData, useCanvas } from '@opentiny/tiny-engine-meta-register'
 
 const { HOST_TYPE } = constants
 const state = reactive({
@@ -117,10 +117,10 @@ const getI18nData = () => {
 }
 
 const getI18n = async ({ init, local }) => {
-  const { resState } = useResource()
+  const { appDataState } = useAppData()
 
   if (local) {
-    const locales = resState?.langs?.locales || []
+    const locales = appDataState?.langs?.locales || []
     const messages = {}
     const langs = getLangs()
 
@@ -136,7 +136,7 @@ const getI18n = async ({ init, local }) => {
 
     return { locales, messages }
   } else {
-    const i18n = init ? resState.langs : await getI18nData
+    const i18n = init ? appDataState.langs : await getI18nData
 
     return i18n
   }
diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js
index 0f6f10145..4a3097c10 100644
--- a/packages/plugins/materials/index.js
+++ b/packages/plugins/materials/index.js
@@ -12,7 +12,7 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta.js'
-import { ResourceService, MaterialService } from './src/composable'
+import { MaterialService, PageBlockSchemaService } from './src/composable'
 import MaterialLayout from './src/meta/layout'
 import MaterialBlock from './src/meta/block'
 import MaterialComponent from './src/meta/component'
@@ -30,7 +30,7 @@ export default {
     header: MaterialHeader
   },
   apis: { ...MaterialBlock.apis },
-  metas: [MaterialBlock, MaterialComponent, ResourceService, MaterialService]
+  metas: [MaterialBlock, MaterialComponent, MaterialService, PageBlockSchemaService]
 }
 
-export { entry, ResourceService, MaterialService }
+export { entry, MaterialService, PageBlockSchemaService }
diff --git a/packages/plugins/materials/src/composable/index.js b/packages/plugins/materials/src/composable/index.js
index 74faf8c86..6cadddfd6 100644
--- a/packages/plugins/materials/src/composable/index.js
+++ b/packages/plugins/materials/src/composable/index.js
@@ -1,21 +1,21 @@
 import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
-import useResource from './useResource'
 import useMaterial from './useMaterial'
+import usePageBlockSchema from './usePageBlockSchema'
 
-export const ResourceService = {
-  id: 'engine.service.resource',
+export const MaterialService = {
+  id: 'engine.service.material',
   type: 'MetaService',
-  apis: useResource(),
+  apis: useMaterial(),
   composable: {
-    name: HOOK_NAME.useResource
+    name: HOOK_NAME.useMaterial
   }
 }
 
-export const MaterialService = {
-  id: 'engine.service.material',
+export const PageBlockSchemaService = {
+  id: 'engine.service.pageBlockSchema',
   type: 'MetaService',
-  apis: useMaterial(),
+  apis: usePageBlockSchema(),
   composable: {
-    name: HOOK_NAME.useMaterial
+    name: HOOK_NAME.usePageBlockSchema
   }
 }
diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js
index 7b8725160..2bbffd1ff 100644
--- a/packages/plugins/materials/src/composable/useMaterial.js
+++ b/packages/plugins/materials/src/composable/useMaterial.js
@@ -14,7 +14,7 @@ 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'
+import { getMergeMeta, useNotify, useCanvas, useBlock, useMessage } from '@opentiny/tiny-engine-meta-register'
 
 const { camelize, capitalize } = utils
 const { MATERIAL_TYPE } = constants
@@ -36,6 +36,13 @@ const materialState = reactive({
 const componentState = reactive({
   componentsMap: {}
 })
+
+const publishMessage = (topicContent) => {
+  const topic = `lowcode.materials.${topicContent}`
+  const { publish } = useMessage()
+  publish({ topic })
+}
+
 const getSnippet = (component) => {
   let schema = {}
   materialState.components.some(({ children }) => {
@@ -50,7 +57,11 @@ const getSnippet = (component) => {
   return schema
 }
 
-const generateNode = ({ type, component }) => {
+/**
+ * 生成组件的schema节点
+ * @returns schema
+ */
+const generateSchemaNode = ({ type, component }) => {
   const snippet = getSnippet(component) || {}
   const schema = {
     componentName: component,
@@ -153,12 +164,6 @@ const registerBlock = async (data, notFetchResouce) => {
   return block
 }
 
-const clearMaterials = () => {
-  materialState.components = []
-  materialState.blocks = []
-  resource.clear()
-}
-
 const clearBlockResources = () => blockResource.clear()
 
 /**
@@ -218,7 +223,6 @@ const addMaterials = (materials = {}) => {
   materials.components.forEach(registerComponentToResource)
 
   const promises = materials?.blocks?.map((item) => registerBlock(item, true))
-
   Promise.allSettled(promises).then((blocks) => {
     if (!blocks?.length) {
       return
@@ -252,25 +256,23 @@ const getMaterial = (name) => {
   }
 }
 
-const setMaterial = (name, data) => {
-  resource.set(name, data)
-}
-
 /**
  * 获取物料，并返回符合物料协议的bundle.json内容
- * @returns getMaterialsRes: () =>  Promise<Materials>
+ * @returns fetchUserMaterialData: () =>  Promise<Materials>
  */
-export const getMaterialsRes = async () => {
+export const fetchUserMaterialData = 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()
+const initUserMaterial = async () => {
+  publishMessage('beginFetchMaterialData')
+  const materials = await fetchUserMaterialData()
 
   materials.forEach((response) => {
     if (response.status === 'fulfilled' && response.value.materials) {
+      publishMessage('endFetchMaterialData')
       addMaterials(response.value.materials)
     }
   })
@@ -314,6 +316,9 @@ const updateCanvasDependencies = (blocks) => {
   useCanvas().canvasApi.value?.canvasDispatch('updateDependencies', { detail: materialState.thirdPartyDeps })
 }
 
+/**
+ * 初始化内置组件
+ */
 const initBuiltinMaterial = () => {
   const { Builtin } = useCanvas().canvasApi.value
   Builtin.data.materials.components[0].children.forEach(registerComponentToResource)
@@ -327,31 +332,39 @@ const initBuiltinMaterial = () => {
   materialState.components.push(builtinSnippets)
 }
 
-const initMaterial = ({ isInit = true, appData = {} } = {}) => {
+/**
+ * 设置组件全局map
+ * @param {*} appData
+ */
+const initComponentMap = async (appData) => {
+  componentState.componentsMap = {}
+  appData.componentsMap?.forEach((component) => {
+    if (component.dependencies) {
+      getBlockDeps(component.dependencies)
+    }
+    componentState.componentsMap[component.componentName] = component
+  })
+}
+
+/**
+ * 物料模块初始化
+ * @param {*} appData
+ */
+const initMaterial = async (appData) => {
   initBuiltinMaterial()
-  if (isInit) {
-    componentState.componentsMap = {}
-    appData.componentsMap?.forEach((component) => {
-      if (component.dependencies) {
-        getBlockDeps(component.dependencies)
-      }
-      componentState.componentsMap[component.componentName] = component
-    })
-  }
+  initComponentMap(appData)
+  await initUserMaterial()
 }
 
 export default function () {
   return {
     materialState, // 存放着组件、物料侧区块、第三方依赖信息
     initMaterial, // 物料模块初始化
-    fetchMaterial, // 请求物料并进行处理
-    getMaterialsRes, // 获取物料，并返回符合物料协议的bundle.json内容，getMaterialsRes: () =>  Promise<Materials>
-    generateNode, // 根据 包含{ type, componentName }的组件信息生成组件schema节点，结构：
-    clearMaterials, // 清空物料
-    clearBlockResources, // 清空区块缓存，以便更新最新版区块
+    fetchUserMaterialData, // 获取物料，并返回符合物料协议的bundle.json内容，getMaterialsRes: () =>  Promise<Materials>
+    generateSchemaNode, // 根据 包含{ type, componentName }的组件信息生成组件schema节点
     getMaterial, // 获取单个物料，(property) getMaterial: (name: string) => Material
-    setMaterial, // 设置单个物料 (property) setMaterial: (name: string, data: Material) => void
     registerBlock, // 注册新的区块
+    clearBlockResources, // 清空区块缓存，以便更新最新版区块
     updateCanvasDependencies, //传入新的区块，获取新增区块的依赖，更新画布中的组件依赖
     getConfigureMap // 获取物料组件的配置信息
   }
diff --git a/packages/plugins/materials/src/composable/useResource.js b/packages/plugins/materials/src/composable/usePageBlockSchema.js
similarity index 57%
rename from packages/plugins/materials/src/composable/useResource.js
rename to packages/plugins/materials/src/composable/usePageBlockSchema.js
index bbc382859..b4ad31c7a 100644
--- a/packages/plugins/materials/src/composable/useResource.js
+++ b/packages/plugins/materials/src/composable/usePageBlockSchema.js
@@ -10,32 +10,20 @@
  *
  */
 
-import { reactive } from 'vue'
-import { useHttp } from '@opentiny/tiny-engine-http'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
 import {
-  useApp,
   useCanvas,
   useTranslate,
   useEditorInfo,
   useBreadcrumb,
   useLayout,
   useBlock,
-  useMaterial,
   getMetaApi,
   META_APP
 } from '@opentiny/tiny-engine-meta-register'
 
-const { COMPONENT_NAME, DEFAULT_INTERCEPTOR } = constants
-
-const resState = reactive({
-  dataSource: [],
-  pageTree: [],
-  langs: {},
-  utils: {},
-  globalState: []
-})
+const { COMPONENT_NAME } = constants
 
 const initPage = (pageInfo) => {
   try {
@@ -82,7 +70,7 @@ const initBlock = async (blockId) => {
   useBlock().initBlock(blockContent, {}, true)
 }
 
-const initPageOrBlock = async () => {
+const initPageOrBlock = async (pageTree) => {
   const { pageId, blockId } = useEditorInfo().useInfo()
   const { setBreadcrumbPage } = useBreadcrumb()
 
@@ -104,72 +92,24 @@ const initPageOrBlock = async () => {
   }
 
   // url 没有 pageid 或 blockid，到页面首页或第一页
-  const pageInfo = resState.pageTree.find((page) => page?.meta?.isHome) ||
-    resState.pageTree.find(
-      (page) => page.componentName === COMPONENT_NAME.Page && page?.meta?.group !== 'publicPages'
-    ) || {
+  const pageInfo = pageTree.find((page) => page?.meta?.isHome) ||
+    pageTree.find((page) => page.componentName === COMPONENT_NAME.Page && page?.meta?.group !== 'publicPages') || {
       componentName: COMPONENT_NAME.Page
     }
   initPage(pageInfo)
 }
 
-const handlePopStateEvent = async () => {
+const handlePopStateEvent = async (pageTree) => {
   const { id, type } = useEditorInfo().useInfo()
-
-  await initPageOrBlock()
+  await initPageOrBlock(pageTree)
 
   // 国际化貌似有 app 和区块之分，但是目前其实都存到了 app 里面，需要确认是否需要修复
   await useTranslate().initI18n({ host: id, hostType: type })
 }
 
-const fetchResource = async ({ isInit = true } = {}) => {
-  const { id, type } = useEditorInfo().useInfo()
-  useApp().appInfoState.selectedId = id
-  const appData = await useHttp().get(`/app-center/v1/api/apps/schema/${id}`)
-  resState.pageTree = appData.componentsTree
-  resState.dataSource = appData.dataSource?.list
-  resState.dataHandler = appData.dataSource?.dataHandler || DEFAULT_INTERCEPTOR.dataHandler
-  resState.willFetch = appData.dataSource?.willFetch || DEFAULT_INTERCEPTOR.willFetch
-  resState.errorHandler = appData.dataSource?.errorHandler || DEFAULT_INTERCEPTOR.errorHandler
-
-  resState.bridge = appData.bridge
-  resState.utils = appData.utils
-  resState.isDemo = appData.meta?.is_demo
-  resState.globalState = appData?.meta.global_state
-
-  useMaterial().initMaterial({ isInit, appData })
-
-  // 词条语言为空时使用默认的语言
-  const defaultLocales = [
-    { lang: 'zh_CN', label: 'zh_CN' },
-    { lang: 'en_US', label: 'en_US' }
-  ]
-  const locales = Object.keys(appData.i18n).length
-    ? Object.keys(appData.i18n).map((key) => ({ lang: key, label: key }))
-    : defaultLocales
-  resState.langs = {
-    locales,
-    messages: appData.i18n
-  }
-
-  try {
-    await useMaterial().fetchMaterial()
-
-    if (isInit) {
-      await initPageOrBlock()
-    }
-
-    await useTranslate().initI18n({ host: id, hostType: type, init: true })
-  } catch (error) {
-    console.log(error) // eslint-disable-line
-  }
-}
-
 export default function () {
   return {
-    resState,
-    fetchResource,
-    initPageOrBlock,
-    handlePopStateEvent
+    handlePopStateEvent,
+    initPageOrBlock
   }
 }
diff --git "a/packages/plugins/materials/src/composable/useResource\346\213\206\350\247\243.md" "b/packages/plugins/materials/src/composable/useResource\346\213\206\350\247\243.md"
new file mode 100644
index 000000000..b0a76bed1
--- /dev/null
+++ "b/packages/plugins/materials/src/composable/useResource\346\213\206\350\247\243.md"
@@ -0,0 +1,146 @@
+# useResource
+
+## useResource 原本的作用
+1. 存放 resState
+2. 获取appData，设置resState
+3. 初始化物料
+4. 初始化当前画布页面或者区块
+5. 暴露popState事件，可以重新初始化当前画布页面或者区块
+
+## 原本api
+
+### fetchResource
+
+#### 作用
+    1. 获取appData
+    2. 用appData初始化或者刷新state
+    3. 调用useMaterial.initMaterial初始化物料模块（仅在初始化时执行，后续刷新不会调用）
+    4. 初始化当前画布显示的页面或者区块 initPageorBlock（仅在初始化时执行，后续刷新不会调用）
+    5. 刷新i18n
+   
+#### 在哪里被调用
+    1. app.vue 在canvas ready后，作为资源初始化，当在canvas ready之后调用时，会去调用`useMaterial.initMaterial`, `initPageorBlock`
+    2. BlockGroupPanel 在新增消费的区块时调用，只会请求appData，刷新对应的全局数据和i18n。
+
+### handlePopStateEvent
+
+#### 作用
+    1. 能够在路由发生改变时init当前的页面和block
+    2. 刷新i18n
+   
+#### 在哪里被调用
+    1. app.vue 绑定pop state的事件监听
+   
+## 可改造的点
+1. 有两个功能相对独立：1. 和全局appData相关 2. 初始化当前画布页面、区块，可以把两个独立的功能分开
+2. 利用数据流的通信，将appData获取后发送事件通知
+3. 由于useMaterial.initMaterial初始化物料模块只会在canvas ready时执行，将fetchResource调用useMaterial.initMaterial初始化物料模块提出到app.vue中，解耦useMaterial。
+4. 由于initPageorBlock 初始化画布页面模块只会在canvas ready时执行，将 fetchResource调用 initPageorBlock 抽取出来，同2一样，使用事件通信
+5. 将 handlePopStateEvent 抽取出来
+6. 看一下APP.vue是一个什么样的角色，如果app.vue里可以调用上面的几个元服务，那么2，3，4都可以直接写在app.vue中。
+
+
+**因此将其拆分成2个元服务以及将部分功能进行提取**
+
+元服务
+
+- useAppData 作为存放全局数据（来源appData）
+- usePageBlockSchema 作为初始化当前画布页面或者区块
+
+功能提取
+
+- 提取fetchResource里调用useMaterial.initMaterial初始化物料模块，解耦useMaterial。直接在design-core app.vue里调用。
+- 提取fetchResource里调用 initPageorBlock 初始化物料模块，直接在design-core app.vue里调用。
+
+
+## useAppData
+
+### 元服务用途
+ 初始化全局APP数据（来源appData），以及初始化i18n。
+
+### state
+```js
+
+const appDataState = reactive({
+  dataSource: [], // 数据源
+  pageTree: [], // 大纲数
+  langs: {}, // i18n
+  utils: {}, // 工具类
+  globalState: [] // 全局信息
+  willFetch: {}, // 数据源默认拦截器
+  dataHandler: {}, //  数据源默认拦截器
+  errorHandler: {}, // 数据源默认拦截器
+  bridge: {}, // 桥接源
+  isDemo: false,
+})
+
+```
+### api 
+
+#### fetchAppData
+##### 作用
+    请求APP全局数据，并返回AppData
+   
+##### 在哪里被调用
+    被当前的initAppData直接调用
+   
+#### initAppData
+
+##### 作用
+   初始化APP全局数据, 并返回AppData
+   
+##### 在哪里被调用
+    1. app.vue 在canvas ready之后，作为app全局数据初始化
+    2. BlockGroupPanel 在新增消费的区块时调用，用作刷新相关数据
+
+### 遗留修改项
+1. 利用数据流的通信，将appData获取后发送事件通知，initAppData不返回appData
+2. 当前这个元服务还依赖useApp, useTranslate, useEditorInfo, 可能要看此元服务的归属点（放置哪个文件），以及这些依赖项是否可以拆解，是否可以通过传参注入。
+3. 需要定位一下appDataState.currentLang（原：resState.currentLang）是什么，从哪里来的，原来的代码没发现赋值的地方。
+4. 在canvas container里还有直接对 appDataState.globalState进行赋值的操作
+
+## usePageBlockSchema
+
+### 元服务用途
+    作为初始化当前画布页面或者区块
+
+### state
+
+无
+
+### api
+
+#### handlePopStateEvent
+
+##### 作用
+    1. 作为pop state的监听处理事件，能够在路由发生改变时init当前的页面和block
+    2. 刷新i18n
+   
+##### 在哪里被调用
+    1. app.vue 绑定pop state的事件监听
+   
+#### initPageOrBlock
+
+
+##### 作用
+    1. init当前的页面和block
+   
+##### 在哪里被调用
+    1. pop state的事件监听handlePopStateEvent里
+    2. design-core app.vue，获取到appData后，初始化当前的页面或者当前block
+
+### 遗留修改项
+
+1. 看是否需要将handlePopStateEvent提取出来，也放在app.vue里，这里取决于app.vue的定位。如果放在app.vue里的话，当前这个元服务不需要依赖useTranslate，但是需要在app.vue引入useTranslate。
+   
+2. 当前这个元服务还依赖以下元服务，首先要看此元服务应该放置在哪层目录下，然后是否能够将 initPage的部分，initBlock的部分抽取出来，在app.vue作为初始化事件通知他们各自的元服务，去各自进行初始化操作。这样就能将useBlock进行解耦。但是其他的如：`useCanvas`，`useEditorInfo`，`useBreadcrumb`，`useLayout` 作为initPage，initBlock的基础元服务，得进一步分析解耦。
+
+``` js
+  useCanvas,
+  useTranslate,
+  useEditorInfo,
+  useBreadcrumb,
+  useLayout,
+  useBlock,
+ ```
+   
\ No newline at end of file
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index 946b28936..6ad5bea72 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, useMaterial } from '@opentiny/tiny-engine-meta-register'
+import { useApp, useBlock, useModal, useAppData, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import BlockGroupTransfer from './BlockGroupTransfer.vue'
 import BlockGroupFilters from './BlockGroupFilters.vue'
 
@@ -118,7 +118,7 @@ export default {
             isRefresh.value = true
             state.searchValue = ''
             selectedBlockArray.value.length = 0
-            useResource().fetchResource({ isInit: false }) // 添加区块分组，不需要重新init页面或者区块。
+            useAppData().initAppData() // 添加区块分组，不需要重新init页面或者区块。
           })
         })
         .catch((error) => {
diff --git a/packages/plugins/materials/src/meta/block/src/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
index 3c3486e18..760924a37 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockList.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockList.vue
@@ -49,7 +49,7 @@ export default {
   },
   emits: ['check', 'close'],
   setup(props, { emit }) {
-    const { generateNode, registerBlock } = useMaterial()
+    const { generateSchemaNode, registerBlock } = useMaterial()
     const { isDefaultGroupId, isAllGroupId, selectedBlock, selectedGroup, isRefresh, getBlockAssetsByVersion } =
       useBlock()
     const blockRef = ref(null)
@@ -91,7 +91,7 @@ export default {
 
       registerBlock(block).then(() => {
         const blockName = block.component || block.blockName
-        const node = generateNode({ type: 'block', component: blockName })
+        const node = generateSchemaNode({ type: 'block', component: blockName })
         const { addComponent, dragStart } = useCanvas().canvasApi.value
         if (isShortcutPanel) {
           emitEvent('close')
diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue
index 9ff75f76f..a8135bf46 100644
--- a/packages/plugins/materials/src/meta/component/src/Main.vue
+++ b/packages/plugins/materials/src/meta/component/src/Main.vue
@@ -9,7 +9,7 @@
           <template v-for="child in item.children" :key="child.component">
             <canvas-drag-item
               v-if="!child.hidden && (child.name?.zh_CN || child.name)"
-              :data="generateNode({ component: child.snippetName || child.component })"
+              :data="generateSchemaNode({ component: child.snippetName || child.component })"
               @click="componentClick"
             >
               <li class="component-item">
@@ -48,7 +48,7 @@ export default {
   setup() {
     const COMPONENT_PANEL_COLUMNS = '1fr 1fr 1fr'
     const SHORTCUT_PANEL_COLUMNS = '1fr 1fr 1fr 1fr 1fr 1fr'
-    const { generateNode, materialState } = useMaterial()
+    const { generateSchemaNode, materialState } = useMaterial()
     const gridTemplateColumns = ref(COMPONENT_PANEL_COLUMNS)
     const panelState = inject('panelState', {})
     const { components } = materialState
@@ -111,7 +111,7 @@ export default {
       gridTemplateColumns,
       state,
       change,
-      generateNode,
+      generateSchemaNode,
       componentClick
     }
   }
diff --git a/packages/register/src/constants.js b/packages/register/src/constants.js
index 1dba5037f..0ac4faf4e 100644
--- a/packages/register/src/constants.js
+++ b/packages/register/src/constants.js
@@ -6,7 +6,6 @@ export const META_SERVICE = {
   Breadcrumb: 'engine.service.breadcrumb',
   SaveLocal: 'engine.service.savelocal',
   History: 'engine.service.history',
-  Resource: 'engine.service.resource',
   Material: 'engine.service.material',
   Page: 'engine.service.page',
   Block: 'engine.service.block',
@@ -14,7 +13,9 @@ export const META_SERVICE = {
   Translate: 'engine.service.translate',
   Help: 'engine.service.help',
   Property: 'engine.service.property',
-  Properties: 'engine.service.properties'
+  Properties: 'engine.service.properties',
+  AppData: 'engine.service.appData',
+  PageBlockSchema: 'engine.service.pageBlockSchema'
 }
 
 export const META_APP = {
diff --git a/packages/register/src/hooks.js b/packages/register/src/hooks.js
index 8deafd8ec..3328bad44 100644
--- a/packages/register/src/hooks.js
+++ b/packages/register/src/hooks.js
@@ -2,7 +2,6 @@ export const HOOK_NAME = {
   useLayout: 'layout',
   useApp: 'app',
   useCanvas: 'canvas',
-  useResource: 'resource',
   useHistory: 'history',
   useProperties: 'properties',
   useProperty: 'property',
@@ -19,14 +18,15 @@ export const HOOK_NAME = {
   useModal: 'modal',
   useNotify: 'notify',
   useCustom: 'custom',
-  useMaterial: 'material'
+  useMaterial: 'material',
+  useAppData: 'appData',
+  usePageBlockSchema: 'pageBlockSchema'
 }
 
 const hooksState = {
   [HOOK_NAME.useLayout]: {},
   [HOOK_NAME.useApp]: {},
   [HOOK_NAME.useCanvas]: {},
-  [HOOK_NAME.useResource]: {},
   [HOOK_NAME.useHistory]: {},
   [HOOK_NAME.useProperties]: {},
   [HOOK_NAME.useProperty]: {},
@@ -43,6 +43,8 @@ const hooksState = {
   [HOOK_NAME.useNotify]: {},
   [HOOK_NAME.useModal]: {},
   [HOOK_NAME.useMaterial]: {},
+  [HOOK_NAME.useAppData]: {},
+  [HOOK_NAME.usePageBlockSchema]: {},
   [HOOK_NAME.useCustom]: {} // 自定义
 }
 
@@ -56,7 +58,6 @@ const getHook = (hookName, args) => {
 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)
@@ -73,6 +74,8 @@ 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 usePageBlockSchema = (...args) => getHook(HOOK_NAME.usePageBlockSchema, args)
+export const useAppData = (...args) => getHook(HOOK_NAME.useAppData, args)
 export const useCustom = (...args) => getHook(HOOK_NAME.useCustom, args)
 
 export function initHook(hookName, hookContent, { useDefaultExport } = {}) {
diff --git a/packages/settings/props/src/components/modal/ModalContent.vue b/packages/settings/props/src/components/modal/ModalContent.vue
index e08b62454..2e729fb4b 100644
--- a/packages/settings/props/src/components/modal/ModalContent.vue
+++ b/packages/settings/props/src/components/modal/ModalContent.vue
@@ -19,7 +19,7 @@
 <script>
 import { computed } from 'vue'
 import { utils } from '@opentiny/tiny-engine-utils'
-import { useResource } from '@opentiny/tiny-engine-meta-register'
+import { useAppData } from '@opentiny/tiny-engine-meta-register'
 import Components from '../../components'
 
 const { getEnumData, camelize } = utils
@@ -45,7 +45,7 @@ export default {
     }
   },
   setup(props) {
-    const { resState } = useResource()
+    const { appDataState } = useAppData()
 
     const propertyList = computed(() => {
       const properties = JSON.parse(JSON.stringify(props.properties))
@@ -65,9 +65,9 @@ export default {
 
       if (props.values.title && props.values.title.i18nKey) {
         const i18nKey = props.values.title.i18nKey
-        title = resState.langs[i18nKey]
-          ? resState.langs[i18nKey][resState.currentLang]
-          : props.values.title[resState.currentLang]
+        title = appDataState.langs[i18nKey]
+          ? appDataState.langs[i18nKey][appDataState.currentLang]
+          : props.values.title[appDataState.currentLang]
       } else {
         title = props.values.title
       }