From 48687e8731ce43c5416e1d1fd32fd01fdd45e29c Mon Sep 17 00:00:00 2001
From: chilingling <26962197+chilingling@users.noreply.github.com>
Date: Sat, 26 Oct 2024 02:46:21 -0700
Subject: [PATCH] feat: editorInfo migrate to globalService (#702)

* feat: editorInfo migrate to globalService

* feat: change to signal event

* refactor: useApp migrate to globalService

* refactor: optimize globalService state structure

* feat: metaservice provide default apis: getState and setState

* feat: poc refactor

* feat: service poc improve

* feat: improve service definition

* feat: reduce the props exposed by service

* fix: rebase to latest code

* fix: change by review comment

* fix: change import name

* fix: use constant var instead of string

* fix: adjust import order

* fix: add unsubscribe logic

* change by review

* fix: change by review comment

* fix: add initTimeout check

---------

Co-authored-by: gene9831 <pacify.98@gmail.com>
---
 designer-demo/registry.js                     |   7 +-
 designer-demo/src/main.js                     |   6 +-
 .../common/composable/defaultGlobalService.js | 125 ++++++++++++++++++
 packages/common/composable/index.js           |  24 +---
 packages/common/composable/useApp.js          |  71 ----------
 packages/common/composable/useEditorInfo.js   |  72 ----------
 packages/common/js/canvas.js                  |   7 +-
 .../CollectionConfigurator.vue                |   5 +-
 .../VariableConfigurator.vue                  |   8 +-
 packages/design-core/index.js                 |  10 +-
 packages/design-core/src/App.vue              |  34 ++---
 packages/design-core/src/init.js              |  72 +++++++++-
 .../src/preview/src/previewApp.vue            |  24 ++--
 .../engine-cli/template/designer/registry.js  |   7 +-
 .../engine-cli/template/designer/src/main.js  |   6 +-
 packages/plugins/block/src/BlockConfig.vue    |   4 +-
 .../plugins/block/src/composable/useBlock.js  |   8 +-
 .../plugins/block/src/js/blockSetting.jsx     |  22 +--
 packages/plugins/bridge/src/BridgeSetting.vue |   4 +-
 packages/plugins/bridge/src/js/resource.js    |  16 ++-
 .../plugins/datasource/src/DataSourceForm.vue |  13 +-
 .../src/DataSourceGlobalDataHandler.vue       |   4 +-
 .../plugins/datasource/src/DataSourceList.vue |   6 +-
 packages/plugins/i18n/src/Main.vue            |   4 +-
 .../materials/src/composable/useResource.js   |  14 +-
 .../src/meta/block/src/BlockDetail.vue        |   4 +-
 .../src/meta/block/src/BlockGroup.vue         |  12 +-
 .../src/meta/block/src/BlockGroupPanel.vue    |  14 +-
 .../src/meta/block/src/BlockList.vue          |  13 +-
 .../src/meta/block/src/BlockPanel.vue         |   6 +-
 .../materials/src/meta/block/src/http.js      |   4 +-
 packages/plugins/page/src/Main.vue            |   4 +-
 .../plugins/page/src/PageFolderSetting.vue    |  12 +-
 packages/plugins/page/src/PageHistory.vue     |   4 +-
 packages/plugins/page/src/PageSetting.vue     |   8 +-
 packages/plugins/page/src/PageTree.vue        |  32 ++++-
 packages/plugins/robot/src/js/robotSetting.js |   4 +-
 packages/plugins/state/src/Main.vue           |   8 +-
 packages/register/src/common.js               |   6 +-
 packages/register/src/constants.js            |   1 +
 packages/register/src/hooks.js                |   6 -
 packages/register/src/index.js                |   2 +-
 packages/register/src/service.js              | 100 ++++++++++++++
 packages/register/src/useState.js             |  43 ------
 packages/register/test/useState.test.js       |  66 ---------
 packages/toolbars/generate-code/src/Main.vue  |   6 +-
 packages/toolbars/logo/src/AppList.vue        |  12 +-
 packages/toolbars/logo/src/Main.vue           |  10 +-
 48 files changed, 515 insertions(+), 435 deletions(-)
 create mode 100644 packages/common/composable/defaultGlobalService.js
 delete mode 100644 packages/common/composable/useApp.js
 delete mode 100644 packages/common/composable/useEditorInfo.js
 create mode 100644 packages/register/src/service.js
 delete mode 100644 packages/register/src/useState.js
 delete mode 100644 packages/register/test/useState.test.js

diff --git a/designer-demo/registry.js b/designer-demo/registry.js
index 72bcf8296..88a463480 100644
--- a/designer-demo/registry.js
+++ b/designer-demo/registry.js
@@ -41,16 +41,15 @@ import {
   Styles,
   Layout,
   Canvas,
-  EditorInfoService,
-  AppService,
-  GenerateCodeService
+  GenerateCodeService,
+  GlobalService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [EditorInfoService, AppService, GenerateCodeService]
+    metas: [GenerateCodeService, GlobalService]
   },
   config: engineConfig,
   layout: {
diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js
index 19d563cb0..6f29317b2 100644
--- a/designer-demo/src/main.js
+++ b/designer-demo/src/main.js
@@ -17,4 +17,8 @@ import { configurators } from './configurators/'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
 
-init({ registry, configurators })
+init({
+  registry,
+  configurators,
+  createAppSignal: ['global_service_init_finish']
+})
diff --git a/packages/common/composable/defaultGlobalService.js b/packages/common/composable/defaultGlobalService.js
new file mode 100644
index 000000000..f62f05635
--- /dev/null
+++ b/packages/common/composable/defaultGlobalService.js
@@ -0,0 +1,125 @@
+import { useHttp } from '@opentiny/tiny-engine-http'
+import { useMessage, useModal, defineService, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { watch } from 'vue'
+
+const getBaseInfo = () => {
+  const paramsMap = new URLSearchParams(location.search)
+  const id = paramsMap.get('id')
+  const blockId = paramsMap.get('blockid')
+  const pageId = paramsMap.get('pageid')
+  const type = paramsMap.get('type')
+  const version = paramsMap.get('version')
+
+  return {
+    type: type || 'app',
+    id,
+    pageId,
+    blockId,
+    version
+  }
+}
+
+const initialState = {
+  userInfo: null,
+  // 当前应用
+  appInfo: {
+    id: '',
+    name: '',
+    app_desc: '',
+    app_website: '',
+    obs_url: null,
+    published_at: '',
+    created_at: '',
+    updated_at: '',
+    platform: '',
+    state: null,
+    published: false,
+    tenant: null,
+    editor_url: ''
+  },
+  // 应用列表
+  appList: []
+}
+
+const getUserInfo = () => {
+  // 获取登录用户信息
+  return useHttp()
+    .get('/platform-center/api/user/me')
+    .catch((error) => {
+      useModal().message({ message: error.message, status: 'error' })
+    })
+}
+
+// 获取当前应用的信息
+const fetchAppInfo = (appId) => useHttp().get(`/app-center/api/apps/detail/${appId}`)
+
+// 获取应用列表
+const fetchAppList = (platformId) => useHttp().get(`/app-center/api/apps/list/${platformId}`)
+
+const { subscribe, publish } = useMessage()
+
+export default defineService({
+  id: META_SERVICE.GlobalService,
+  type: 'MetaService',
+  options: {},
+  initialState,
+  init: ({ state }) => {
+    watch(
+      () => state.appInfo,
+      (appInfo) => {
+        publish({ topic: 'app_info_changed', data: appInfo })
+      }
+    )
+
+    watch(
+      () => state.appList,
+      (appList) => {
+        publish({ topic: 'app_list_changed', data: appList })
+      }
+    )
+
+    subscribe({
+      topic: 'app_id_changed',
+      callback: (appId) => {
+        if (!appId) {
+          // eslint-disable-next-line no-console
+          console.error('Invalid appId received in app_id_changed event')
+
+          return
+        }
+
+        fetchAppInfo(appId).then((app) => {
+          state.appInfo = app
+          // 监听应用 ID 变化，根据应用名称设置网页 title
+          document.title = `${app.name} —— TinyEditor 前端可视化设计器`
+        })
+      }
+    })
+
+    subscribe({
+      topic: 'platform_id_changed',
+      callback: (platformId) => {
+        if (!platformId) {
+          // eslint-disable-next-line no-console
+          console.error('Received platform_id_changed event with no platformId')
+
+          return
+        }
+        fetchAppList(platformId).then((list) => {
+          state.appList = list
+        })
+      }
+    })
+
+    getUserInfo().then((data) => {
+      if (data) {
+        state.userInfo = data
+      }
+      publish({ topic: 'global_service_init_finish' })
+    })
+  },
+  apis: ({ state }) => ({
+    getBaseInfo,
+    isAdmin: () => state.userInfo.resetPasswordToken === 'p_webcenter'
+  })
+})
diff --git a/packages/common/composable/index.js b/packages/common/composable/index.js
index 75268a70d..7abca1078 100644
--- a/packages/common/composable/index.js
+++ b/packages/common/composable/index.js
@@ -1,24 +1,2 @@
-import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
-
-import useApp from './useApp'
-import useEditorInfo from './useEditorInfo'
-
 export { GenerateCodeService } from './generateCode'
-
-export const AppService = {
-  id: 'engine.service.app',
-  type: 'MetaService',
-  apis: useApp(),
-  composable: {
-    name: HOOK_NAME.useApp
-  }
-}
-
-export const EditorInfoService = {
-  id: 'engine.service.editorInfo',
-  type: 'MetaService',
-  apis: useEditorInfo(),
-  composable: {
-    name: HOOK_NAME.useEditorInfo
-  }
-}
+export { default as GlobalService } from './defaultGlobalService'
diff --git a/packages/common/composable/useApp.js b/packages/common/composable/useApp.js
deleted file mode 100644
index 88a97773a..000000000
--- a/packages/common/composable/useApp.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * 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, watch } from 'vue'
-import { useHttp } from '@opentiny/tiny-engine-http'
-
-const defaultState = {
-  // 应用列表
-  list: [],
-  // 当前选中的应用
-  selectedApp: {
-    id: '',
-    name: '',
-    app_desc: '',
-    app_website: '',
-    obs_url: null,
-    published_at: '',
-    created_at: '',
-    updated_at: '',
-    platform: '',
-    state: null,
-    published: false,
-    tenant: null,
-    editor_url: ''
-  },
-  // 当前选中的appId
-  selectedId: ''
-}
-
-const appInfoState = reactive({ ...defaultState })
-
-// 获取当前应用的信息
-const fetchAppInfo = (appId) => useHttp().get(`/app-center/api/apps/detail/${appId}`)
-
-watch(
-  () => appInfoState.selectedId,
-  (id) => {
-    fetchAppInfo(id).then((app) => {
-      appInfoState.selectedApp = app
-      // 监听应用 ID 变化，根据应用名称设置网页 title
-      document.title = `${app.name} —— TinyEditor 前端可视化设计器`
-    })
-  }
-)
-
-// 获取应用列表
-const fetchAppList = (platformId) => useHttp().get(`/app-center/api/apps/list/${platformId}`)
-
-const updateApp = async (id) => {
-  const appInfo = await fetchAppInfo(id)
-  appInfoState.selectedApp = appInfo
-  appInfoState.selectedId = appInfo.id
-}
-
-export default () => {
-  return {
-    appInfoState,
-    fetchAppInfo,
-    fetchAppList,
-    updateApp
-  }
-}
diff --git a/packages/common/composable/useEditorInfo.js b/packages/common/composable/useEditorInfo.js
deleted file mode 100644
index 250642b24..000000000
--- a/packages/common/composable/useEditorInfo.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * 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 { ref } from 'vue'
-import { useHttp } from '@opentiny/tiny-engine-http'
-import { useModal } from '@opentiny/tiny-engine-meta-register'
-
-// web版获取配置信息: 从url中获取
-const _getWebData = () => {
-  const paramsMap = new URLSearchParams(location.search)
-  const id = paramsMap.get('id')
-  const blockId = paramsMap.get('blockid')
-  const pageId = paramsMap.get('pageid')
-  const type = paramsMap.get('type')
-  const version = paramsMap.get('version')
-
-  return {
-    type: type || 'app',
-    id,
-    pageId,
-    blockId,
-    version
-  }
-}
-
-const userInfo = ref({})
-const getUserInfo = () => {
-  // 获取登录用户信息
-  useHttp()
-    .get('/platform-center/api/user/me')
-    .then((data) => {
-      if (data) {
-        userInfo.value = data
-      }
-    })
-    .catch((error) => {
-      useModal().message({ message: error.message, status: 'error' })
-    })
-}
-
-const isAdmin = () => userInfo.value.resetPasswordToken === 'p_webcenter'
-/**
- * 1、是否是VSCode插件: 通过是否有全局变量window.vscodeBridge判断
- *
- * 2、vscode中类型和id
- *   window.vscodeInjectData
- *      type: app 应用管理  block 区块管理
- *      id: 应用id/blockid
- *      ...其他详细信息
- *
- * 3、web版中，通过url参数判断
- *      type: app 应用管理  block 区块管理
- *      id: 应用id/blockid
- *
- */
-export default () => {
-  return {
-    useInfo: _getWebData,
-    getUserInfo,
-    userInfo,
-    isAdmin
-  }
-}
diff --git a/packages/common/js/canvas.js b/packages/common/js/canvas.js
index bdf88ae3c..50d526b0d 100644
--- a/packages/common/js/canvas.js
+++ b/packages/common/js/canvas.js
@@ -11,12 +11,13 @@
  */
 
 import { PAGE_STATUS } from './constants'
-import { useEditorInfo, useResource } from '@opentiny/tiny-engine-meta-register'
+import { useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 
 export const getCanvasStatus = (data) => {
+  const globalState = getMetaApi(META_SERVICE.GlobalService).getState()
   // 写死ID 待删除
   let isDemo = useResource().resState.isDemo
-  const { resetPasswordToken } = useEditorInfo().userInfo.value
+  const { resetPasswordToken } = globalState.userInfo
 
   if (isDemo && [PAGE_STATUS.Developer, PAGE_STATUS.SuperAdmin].includes(resetPasswordToken)) {
     isDemo = false
@@ -29,7 +30,7 @@ export const getCanvasStatus = (data) => {
   } else if (!data) {
     state = PAGE_STATUS.Release
   } else {
-    state = useEditorInfo().userInfo.value.id === data.id ? PAGE_STATUS.Occupy : PAGE_STATUS.Lock
+    state = globalState.userInfo.id === data.id ? PAGE_STATUS.Occupy : PAGE_STATUS.Lock
   }
 
   return {
diff --git a/packages/configurator/src/collection-configurator/CollectionConfigurator.vue b/packages/configurator/src/collection-configurator/CollectionConfigurator.vue
index cc4c695ff..9b4448bbf 100644
--- a/packages/configurator/src/collection-configurator/CollectionConfigurator.vue
+++ b/packages/configurator/src/collection-configurator/CollectionConfigurator.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="jsx">
-import { useApp, useModal } from '@opentiny/tiny-engine-meta-register'
+import { useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { Option, Select, Tooltip } from '@opentiny/vue'
 import { IconConmentRefresh } from '@opentiny/vue-icon'
@@ -49,7 +49,8 @@ export default {
 
     const fetchDataSourceList = (appId) => http.get(`/app-center/api/sources/list/${appId}`)
 
-    fetchDataSourceList(useApp().appInfoState.selectedId).then((data) => {
+    const appId = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
+    fetchDataSourceList(appId).then((data) => {
       options.value = data
     })
 
diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
index fb821fa01..ccca21f73 100644
--- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue
+++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -120,12 +120,12 @@
 <script>
 import { VueMonaco as MonacoEditor, SvgButton } from '@opentiny/tiny-engine-common'
 import {
-  useApp,
   useCanvas,
   useProperties,
   useResource,
   getMetaApi,
-  META_APP
+  META_APP,
+  META_SERVICE
 } 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'
@@ -487,9 +487,9 @@ export default {
         state.variables = bindProperties
       } else if (item.id === 'datasource') {
         state.bindPrefix = CONSTANTS.DATASOUCEPREFIX
-        const { appInfoState } = useApp()
         const url = new URLSearchParams(location.search)
-        const selectedId = appInfoState.selectedId || url.get('id')
+        const appId = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
+        const selectedId = appId || url.get('id')
 
         // 实时请求数据源列表数据，保证数据源获取最新的数据源数据
         http.get(`/app-center/api/sources/list/${selectedId}`).then((data) => {
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index 4785bce04..58d5d8bcc 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -33,10 +33,14 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
-export { PluginPanel, PluginSetting, ToolbarBase } from '@opentiny/tiny-engine-common'
+export {
+  GenerateCodeService,
+  PluginPanel,
+  PluginSetting,
+  ToolbarBase,
+  GlobalService
+} from '@opentiny/tiny-engine-common'
 
 export { default as defaultRegistry } from './registry'
 
 export * from '@opentiny/tiny-engine-meta-register'
-
-export { EditorInfoService, AppService, GenerateCodeService } from '@opentiny/tiny-engine-common'
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index 399290d45..b4de54e91 100644
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@@ -8,10 +8,10 @@ import {
   getMergeRegistry,
   getMetaApi,
   useModal,
-  useApp,
   useNotify,
   useResource,
-  useCanvas
+  useCanvas,
+  useMessage
 } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { useBroadcastChannel } from '@vueuse/core'
@@ -32,19 +32,23 @@ export default {
     watch(data, (options) => useNotify(options))
 
     if (isVsCodeEnv) {
-      const appId = useApp().appInfoState.selectedId
-      materialsApi
-        .fetchGroups(appId)
-        .then((groups) => {
-          const blocks = []
-          groups.forEach((group) => {
-            blocks.push(...group.blocks)
-          })
-          blockApi.requestInitBlocks(blocks)
-        })
-        .catch((error) => {
-          message({ message: error.message, status: 'error' })
-        })
+      useMessage().subscribe({
+        topic: 'app_id_changed',
+        callback: (appId) => {
+          materialsApi
+            .fetchGroups(appId)
+            .then((groups) => {
+              const blocks = []
+              groups.forEach((group) => {
+                blocks.push(...group.blocks)
+              })
+              blockApi.requestInitBlocks(blocks)
+            })
+            .catch((error) => {
+              message({ message: error.message, status: 'error' })
+            })
+        }
+      })
     }
 
     const handlePopStateEvent = () => {
diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js
index b1aede90f..457e14d6a 100644
--- a/packages/design-core/src/init.js
+++ b/packages/design-core/src/init.js
@@ -22,14 +22,18 @@ import {
   defineEntry,
   mergeRegistry,
   getMergeMeta,
+  initServices,
   initHook,
   HOOK_NAME,
-  useEditorInfo
+  useMessage
 } from '@opentiny/tiny-engine-meta-register'
+import { utils } from '@opentiny/tiny-engine-utils'
 import App from './App.vue'
 import defaultRegistry from '../registry.js'
 import { registerConfigurators } from './registerConfigurators'
 
+const { guid } = utils
+
 const defaultLifeCycles = {
   beforeAppCreate: ({ registry }) => {
     // 合并用户自定义注册表
@@ -42,6 +46,9 @@ const defaultLifeCycles = {
     // 在common层注入合并后的注册表
     defineEntry(newRegistry)
 
+    // 初始化所有服务
+    initServices()
+
     initHook(HOOK_NAME.useEnv, import.meta.env)
     initHook(HOOK_NAME.useNotify, Notify, { useDefaultExport: true })
     initHook(HOOK_NAME.useModal, Modal)
@@ -73,18 +80,77 @@ const defaultLifeCycles = {
   }
 }
 
-export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, configurators = {} } = {}) => {
+const subscribeSignalFinish = (createAppSignal, timeout = 30000) => {
+  return new Promise((resolve, reject) => {
+    let finishCount = new Set()
+    const len = new Set(createAppSignal).size
+
+    const signalTopicAndSubscriber = createAppSignal.map((name) => ({
+      topic: name,
+      subscriber: `createAppSignal_${name}_${guid}`
+    }))
+
+    const initTimeout = setTimeout(() => {
+      // 取消订阅
+      signalTopicAndSubscriber.forEach(({ topic, subscriber }) => {
+        useMessage().unsubscribe({
+          topic,
+          subscriber
+        })
+      })
+
+      reject(new Error(`Signal initialization timeout after ${Math.floor(timeout / 1000)}s.`))
+    }, timeout)
+
+    signalTopicAndSubscriber.forEach(({ topic, subscriber }) => {
+      useMessage().subscribe({
+        topic,
+        subscriber,
+        callback: () => {
+          finishCount.add(topic)
+
+          // 取消订阅
+          useMessage().unsubscribe({
+            topic,
+            subscriber
+          })
+
+          if (finishCount.size === len) {
+            clearTimeout(initTimeout)
+            resolve()
+          }
+        }
+      })
+    })
+  })
+}
+
+export const init = async ({
+  selector = '#app',
+  registry = defaultRegistry,
+  lifeCycles = {},
+  configurators = {},
+  createAppSignal = [],
+  initTimeout = 30000
+} = {}) => {
   const { beforeAppCreate, appCreated, appMounted } = lifeCycles
 
   registerConfigurators(configurators)
 
   defaultLifeCycles.beforeAppCreate({ registry })
   beforeAppCreate?.({ registry })
+
+  if (Array.isArray(createAppSignal) && createAppSignal.length) {
+    if (typeof initTimeout !== 'number' || initTimeout <= 0) {
+      throw new Error('initTimeout must be a positive number')
+    }
+    await subscribeSignalFinish(createAppSignal, initTimeout)
+  }
+
   const app = createApp(App)
   defaultLifeCycles.appCreated({ app })
   appCreated?.({ app })
 
   app.mount(selector)
   appMounted?.({ app })
-  useEditorInfo().getUserInfo()
 }
diff --git a/packages/design-core/src/preview/src/previewApp.vue b/packages/design-core/src/preview/src/previewApp.vue
index e173ea50f..16de7db88 100644
--- a/packages/design-core/src/preview/src/previewApp.vue
+++ b/packages/design-core/src/preview/src/previewApp.vue
@@ -23,7 +23,7 @@ import { Progress, Button } from '@opentiny/vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { VITE_ORIGIN } from '@opentiny/tiny-engine-common/js/environments'
 import { EXTEND_CONFIG } from '@opentiny/tiny-engine-common/js/app'
-import { useApp } from '@opentiny/tiny-engine-meta-register'
+import { useMessage } from '@opentiny/tiny-engine-meta-register'
 
 export default {
   components: {
@@ -84,21 +84,29 @@ export default {
 
           let openUrl = `${VITE_ORIGIN}/app-center/entry/${appId}/`
 
-          const { appInfoState, updateApp } = useApp()
+          const { subscribe, publish, unsubscribe } = useMessage()
 
-          updateApp(appId)
-            .then(() => {
-              const extendConfig = appInfoState.selectedApp?.extend_config || {}
+          subscribe({
+            topic: 'app_info_changed',
+            subscriber: 'from_preview',
+            callback: (app) => {
+              const extendConfig = app?.extend_config || {}
 
               if (extendConfig?.app_type === EXTEND_CONFIG.TYPE.CONSOLE) {
                 openUrl = `${VITE_ORIGIN}/app-service/${extendConfig?.app_type ?? extendConfig?.type}${
                   extendConfig.business.router
                 }?appId=${appId}&region=cn-north-7&previewType=app&env=alpha&tenant=${paramsMap.get('tenant')}`
               }
-            })
-            .finally(() => {
+
+              // 要在 url 改变之前取消监听
+              unsubscribe({ topic: 'app_info_changed', subscriber: 'from_preview' })
+
+              // TODO finally 怎么实现
               window.location = openUrl
-            })
+            }
+          })
+
+          publish({ topic: 'app_id_changed', data: appId })
         } else {
           progressStatus.value = 'exception'
           percentage.value = 0
diff --git a/packages/engine-cli/template/designer/registry.js b/packages/engine-cli/template/designer/registry.js
index 72bcf8296..88a463480 100644
--- a/packages/engine-cli/template/designer/registry.js
+++ b/packages/engine-cli/template/designer/registry.js
@@ -41,16 +41,15 @@ import {
   Styles,
   Layout,
   Canvas,
-  EditorInfoService,
-  AppService,
-  GenerateCodeService
+  GenerateCodeService,
+  GlobalService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [EditorInfoService, AppService, GenerateCodeService]
+    metas: [GenerateCodeService, GlobalService]
   },
   config: engineConfig,
   layout: {
diff --git a/packages/engine-cli/template/designer/src/main.js b/packages/engine-cli/template/designer/src/main.js
index 19d563cb0..6f29317b2 100644
--- a/packages/engine-cli/template/designer/src/main.js
+++ b/packages/engine-cli/template/designer/src/main.js
@@ -17,4 +17,8 @@ import { configurators } from './configurators/'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
 
-init({ registry, configurators })
+init({
+  registry,
+  configurators,
+  createAppSignal: ['global_service_init_finish']
+})
diff --git a/packages/plugins/block/src/BlockConfig.vue b/packages/plugins/block/src/BlockConfig.vue
index 232e612c0..a5d36ba2b 100644
--- a/packages/plugins/block/src/BlockConfig.vue
+++ b/packages/plugins/block/src/BlockConfig.vue
@@ -105,7 +105,7 @@ import { Input, Tag, Button, Form, FormItem, Radio, Select, Option } from '@open
 import { constants } from '@opentiny/tiny-engine-utils'
 import { remove } from '@opentiny/vue-renderless/common/array'
 import { getEditBlock } from './js/blockSetting'
-import { useBlock, useEditorInfo } from '@opentiny/tiny-engine-meta-register'
+import { useBlock, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 
 const { BLOCK_OPENNESS } = constants
@@ -127,7 +127,7 @@ export default {
     const state = reactive({
       inputVisible: false,
       inputValue: '',
-      publicOptions: useEditorInfo().userInfo.value.tenants
+      publicOptions: getMetaApi(META_SERVICE.GlobalService).getState().userInfo.tenants
     })
 
     const groupSelect = ref(null)
diff --git a/packages/plugins/block/src/composable/useBlock.js b/packages/plugins/block/src/composable/useBlock.js
index 3ede9939e..09e67ac8a 100644
--- a/packages/plugins/block/src/composable/useBlock.js
+++ b/packages/plugins/block/src/composable/useBlock.js
@@ -16,18 +16,18 @@ import { extend, copyArray } from '@opentiny/vue-renderless/common/object'
 import { format } from '@opentiny/vue-renderless/common/date'
 import { remove } from '@opentiny/vue-renderless/common/array'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
 import { ast2String, parseExpression } from '@opentiny/tiny-engine-common/js/ast'
 import { getCssObjectFromStyleStr } from '@opentiny/tiny-engine-common/js/css'
 import {
   useCanvas,
   useTranslate,
-  useEditorInfo,
   useBreadcrumb,
   useLayout,
   getMetaApi,
-  META_APP
+  META_APP,
+  getMergeMeta,
+  META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 
 const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants
@@ -290,7 +290,7 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => {
   // 如果是点击区块管理列表进来的则不需要执行以下操作
   if (!isEdit) {
     // 非编辑状态即为新增，新增默认锁定画布
-    block.occupier = useEditorInfo().userInfo.value
+    block.occupier = getMetaApi(META_SERVICE.GlobalService).getState().userInfo
     useLayout().layoutState.pageStatus = getCanvasStatus(block.occupier)
     addBlock(block)
     setSaved(false)
diff --git a/packages/plugins/block/src/js/blockSetting.jsx b/packages/plugins/block/src/js/blockSetting.jsx
index cfa66961b..181aeb573 100644
--- a/packages/plugins/block/src/js/blockSetting.jsx
+++ b/packages/plugins/block/src/js/blockSetting.jsx
@@ -18,11 +18,12 @@ import {
   useModal,
   useCanvas,
   useTranslate,
-  useApp,
   useLayout,
   useNotify,
   useHistory,
-  useMaterial
+  useMaterial,
+  getMetaApi,
+  META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
@@ -583,8 +584,10 @@ export const publishBlock = (params) => {
   }
 }
 
+const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
+
 const getCategories = () => {
-  const appId = useApp().appInfoState.selectedId
+  const appId = getAppId()
   fetchCategories({ appId }).then((res) => {
     useBlock().setCategoryList(res)
   })
@@ -592,9 +595,8 @@ const getCategories = () => {
 
 // 新建区块
 const createBlock = (block = {}) => {
-  const { appInfoState } = useApp()
   const { message } = useModal()
-  const { selectedId: created_app } = appInfoState
+  const created_app = getAppId()
   const params = { ...block, created_app }
 
   if (isVsCodeEnv) {
@@ -656,7 +658,7 @@ const updateBlock = (block = {}) => {
     },
     {
       params: {
-        appId: useApp().appInfoState.selectedId
+        appId: getAppId()
       }
     }
   )
@@ -735,7 +737,7 @@ export const saveBlock = async (block) => {
 }
 
 export const updateBlockList = (params) => {
-  const appId = useApp().appInfoState.selectedId
+  const appId = getAppId()
   fetchBlockList({ appId, ...params }).then((data) => {
     const blockListDescByUpdateAt = data.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))
     useBlock().setBlockList(blockListDescByUpdateAt)
@@ -743,9 +745,7 @@ export const updateBlockList = (params) => {
 }
 
 export const fetchMaterialId = () => {
-  const { appInfoState } = useApp()
-
-  fetchComponentsMap(appInfoState.selectedId).then((data) => {
+  fetchComponentsMap(getAppId()).then((data) => {
     setMaterialHistory(data?.materialHistory)
   })
 }
@@ -775,7 +775,7 @@ export const getBlockById = async (id) => {
 }
 
 export const createOrUpdateCategory = async ({ categoryId, ...params }, isEdit) => {
-  const appId = useApp().appInfoState.selectedId
+  const appId = getAppId()
   params.app = Number(appId)
   let requestFunc = updateCategory
 
diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
index 1b37d9503..ef1782b9f 100644
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -112,7 +112,7 @@ import {
   getResourceNamesByType
 } from './js/resource'
 import { VueMonaco as MonacoEditor, PluginSetting, SvgButton } from '@opentiny/tiny-engine-common'
-import { useApp, useModal, useNotify } from '@opentiny/tiny-engine-meta-register'
+import { useModal, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 
 const isOpen = ref(false)
@@ -209,7 +209,7 @@ export default {
         category: getType(),
         type: getCategory(),
         name: state.name,
-        app: useApp().appInfoState.selectedId,
+        app: getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id,
         content: state.category
           ? state.content
           : {
diff --git a/packages/plugins/bridge/src/js/resource.js b/packages/plugins/bridge/src/js/resource.js
index 813bfdafe..1527d7c2d 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 { useResource, useNotify, useCanvas, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import {
   fetchResourceList,
@@ -116,8 +116,10 @@ export const ACTION_TYPE = {
   Edit: 'edit'
 }
 
+const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
+
 export const getResources = () => {
-  const id = useApp().appInfoState.selectedId
+  const id = getAppId()
   state.resources.length ||
     fetchResourceList(id).then((data) => {
       state.resources = data || TempBridge
@@ -131,7 +133,7 @@ export const setResourceNamesByType = (type, names) => {
 }
 
 export const getResourcesByType = (type) => {
-  const id = useApp().appInfoState.selectedId
+  const id = getAppId()
   return fetchResourceList(id, type)
 }
 
@@ -185,7 +187,7 @@ export const saveResource = (data, callback, emit) => {
 
         // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
         updateUtils([result])
-        generateBridgeUtil(useApp().appInfoState.selectedId)
+        generateBridgeUtil(getAppId())
 
         useNotify({
           type: 'success',
@@ -204,7 +206,7 @@ export const saveResource = (data, callback, emit) => {
 
         // 更新画布工具函数环境，保证渲染最新工具类返回值, 并触发画布的强制刷新
         updateUtils([result])
-        generateBridgeUtil(useApp().appInfoState.selectedId)
+        generateBridgeUtil(getAppId())
         useNotify({
           type: 'success',
           message: '创建成功'
@@ -218,7 +220,7 @@ export const saveResource = (data, callback, emit) => {
 }
 
 export const deleteData = (name, callback, emit) => {
-  const params = `app=${useApp().appInfoState.selectedId}&id=${state.resource?.id}`
+  const params = `app=${getAppId()}&id=${state.resource?.id}`
   const { deleteUtils } = useCanvas().canvasApi.value
 
   requestDeleteReSource(params).then((data) => {
@@ -227,7 +229,7 @@ export const deleteData = (name, callback, emit) => {
       useResource().resState[state.type].splice(index, 1)
 
       deleteUtils([data])
-      generateBridgeUtil(useApp().appInfoState.selectedId)
+      generateBridgeUtil(getAppId())
       useNotify({
         type: 'success',
         message: '删除成功'
diff --git a/packages/plugins/datasource/src/DataSourceForm.vue b/packages/plugins/datasource/src/DataSourceForm.vue
index c2bdb3bed..1ceb50e1e 100644
--- a/packages/plugins/datasource/src/DataSourceForm.vue
+++ b/packages/plugins/datasource/src/DataSourceForm.vue
@@ -43,7 +43,7 @@ import {
   requestDeleteDataSource,
   requestGenerateDataSource
 } from './js/http'
-import { useModal, useApp, useDataSource, useNotify } from '@opentiny/tiny-engine-meta-register'
+import { useModal, useDataSource, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
 
 let isOpen = ref(false)
@@ -80,7 +80,6 @@ export default {
   emits: ['update:modelValue', 'save'],
   setup(props, { emit }) {
     const { message } = useModal()
-    const { appInfoState } = useApp()
     const { dataSourceState } = useDataSource()
 
     const state = reactive({
@@ -142,12 +141,14 @@ export default {
       closeRemotePanel()
     }
 
+    const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
+
     const deleteDataSource = () => {
       const execDelete = () =>
         requestDeleteDataSource(state.dataSource.id)
           .then((data) => {
             if (data) {
-              requestGenerateDataSource(appInfoState.selectedId)
+              requestGenerateDataSource(getAppId())
               useNotify({
                 title: '数据源删除成功',
                 type: 'success'
@@ -187,7 +188,7 @@ export default {
               name: state.dataSource.name,
               data: Object.assign(state.dataSource.data, { columns, ...dataSourceState.remoteConfig })
             }).then(() => {
-              requestGenerateDataSource(appInfoState.selectedId)
+              requestGenerateDataSource(getAppId())
               // 修改dataSource成功
               useNotify({
                 title: '数据源修改成功',
@@ -200,7 +201,7 @@ export default {
           } else {
             requestAddDataSource({
               name: state.dataSource.name,
-              app: appInfoState.selectedId,
+              app: getAppId(),
               data: {
                 columns,
                 data: [],
@@ -209,7 +210,7 @@ export default {
               }
             })
               .then(() => {
-                requestGenerateDataSource(appInfoState.selectedId)
+                requestGenerateDataSource(getAppId())
                 useNotify({
                   title: '数据源新增成功',
                   type: 'success'
diff --git a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
index b1ce538e0..10022e1ca 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 { useModal, useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import { Collapse, CollapseItem } from '@opentiny/vue'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -55,7 +55,7 @@ export default {
     })
 
     const saveGlobalDataHandle = () => {
-      const id = useApp().appInfoState.selectedId
+      const id = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
 
       const handler = {
         dataHandler: { type: 'JSFunction', value: state.dataHandlerValue || DEFAULT_INTERCEPTOR.dataHandler.value },
diff --git a/packages/plugins/datasource/src/DataSourceList.vue b/packages/plugins/datasource/src/DataSourceList.vue
index 4fba1dd95..511da1b7e 100644
--- a/packages/plugins/datasource/src/DataSourceList.vue
+++ b/packages/plugins/datasource/src/DataSourceList.vue
@@ -39,7 +39,7 @@
 
 <script>
 import { onMounted, reactive, ref } from 'vue'
-import { useApp, useDataSource, useResource, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useDataSource, useResource, useCanvas, getMetaApi, META_SERVICE } 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'
@@ -52,10 +52,8 @@ const dataSourceList = ref([])
 const activeIndex = ref(-1)
 
 export const refresh = () => {
-  const { appInfoState } = useApp()
-
   const url = new URLSearchParams(location.search)
-  const selectedId = appInfoState.selectedId || url.get('id')
+  const selectedId = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id || url.get('id')
   fetchDataSourceList(selectedId).then((data) => {
     dataSourceList.value = data
     useCanvas().canvasApi.value.setDataSourceMap(data)
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index 33aba27c3..fd80a3f70 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -126,7 +126,7 @@ import useClipboard from 'vue-clipboard3'
 import { Grid, GridColumn, Input, Popover, Button, FileUpload, Loading, Tooltip, Select } from '@opentiny/vue'
 import { iconLoadingShadow, iconPlus, iconUpload } from '@opentiny/vue-icon'
 import { PluginPanel, SearchEmpty } from '@opentiny/tiny-engine-common'
-import { useTranslate, useApp, useModal, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { useTranslate, useModal, useHelp, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { useHttp } from '@opentiny/tiny-engine-http'
@@ -361,7 +361,7 @@ export default {
       })
     }
     const handleChange = (data) => {
-      const appId = useApp().appInfoState.selectedId
+      const appId = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
       const action = `/app-center/api/apps/${appId}/i18n/entries/update`
 
       const loadingTarget = notEmpty.value ? '#boxeight' : '#empty-loading-box'
diff --git a/packages/plugins/materials/src/composable/useResource.js b/packages/plugins/materials/src/composable/useResource.js
index bbc382859..3e2a0dbe1 100644
--- a/packages/plugins/materials/src/composable/useResource.js
+++ b/packages/plugins/materials/src/composable/useResource.js
@@ -15,16 +15,16 @@ 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
+  META_APP,
+  useMessage,
+  META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 
 const { COMPONENT_NAME, DEFAULT_INTERCEPTOR } = constants
@@ -83,7 +83,7 @@ const initBlock = async (blockId) => {
 }
 
 const initPageOrBlock = async () => {
-  const { pageId, blockId } = useEditorInfo().useInfo()
+  const { pageId, blockId } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
   const { setBreadcrumbPage } = useBreadcrumb()
 
   if (pageId) {
@@ -114,7 +114,7 @@ const initPageOrBlock = async () => {
 }
 
 const handlePopStateEvent = async () => {
-  const { id, type } = useEditorInfo().useInfo()
+  const { id, type } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
 
   await initPageOrBlock()
 
@@ -123,8 +123,8 @@ const handlePopStateEvent = async () => {
 }
 
 const fetchResource = async ({ isInit = true } = {}) => {
-  const { id, type } = useEditorInfo().useInfo()
-  useApp().appInfoState.selectedId = id
+  const { id, type } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
+  useMessage().publish({ topic: 'app_id_changed', data: id })
   const appData = await useHttp().get(`/app-center/v1/api/apps/schema/${id}`)
   resState.pageTree = appData.componentsTree
   resState.dataSource = appData.dataSource?.list
diff --git a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
index e19398b8b..6c03a4bf4 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
@@ -39,7 +39,7 @@
 import { Button } from '@opentiny/vue'
 import { IconDel, iconDoubleRight } from '@opentiny/vue-icon'
 import { inject } from 'vue'
-import { useApp, useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
+import { useBlock, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { requestUpdateGroup, fetchGroupBlocksById } from './http'
 import { setHistoryPanelVisible } from './js/usePanel'
 
@@ -63,7 +63,6 @@ export default {
     const { isRefresh, isDefaultGroupId, selectedBlock, selectedGroup } = useBlock()
     const { confirm, message } = useModal()
     const panelState = inject('panelState', {})
-    const appId = useApp().appInfoState.selectedId
 
     const closeDetail = () => {
       emit('close')
@@ -83,6 +82,7 @@ export default {
               .filter((item) => item.id !== blockId)
               .map((item) => ({ id: item.id, version: item.current_version }))
 
+            const appId = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
             requestUpdateGroup({ id: groupId, blocks, app: appId }).then(() => {
               isRefresh.value = true
               emit('close')
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
index 0a78a7e2d..05b5c1553 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
@@ -143,7 +143,7 @@ import {
   Popover
 } from '@opentiny/vue'
 import { iconYes, iconClose, iconError } from '@opentiny/vue-icon'
-import { useApp, useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
+import { useBlock, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { SvgButton } from '@opentiny/tiny-engine-common'
 import { requestCreateGroup, requestDeleteGroup, fetchGroups, requestUpdateGroup } from './http'
 import { setBlockPanelVisible } from './js/usePanel'
@@ -176,7 +176,7 @@ export default {
     const groupSelect = ref(null)
     const editFormRef = ref(null)
     const editFormItemRef = ref(null)
-    const appId = useApp().appInfoState.selectedId
+    const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
 
     const createGroupForm = ref(null)
 
@@ -219,7 +219,7 @@ export default {
       const exec = () => {
         requestDeleteGroup(groupId)
           .then(() => {
-            fetchGroups(appId).then((data) => {
+            fetchGroups(getAppId()).then((data) => {
               state.groups = addDefaultGroup(data)
               if (selectedGroup.value.groupId === groupId) {
                 groupChange(state.groups[0].value)
@@ -245,6 +245,8 @@ export default {
         if (!valid) {
           return
         }
+
+        const appId = getAppId()
         requestUpdateGroup({ id: state.currentEditId, name: state.groupNameModel.value, app: appId })
           .then(() => fetchGroups(appId))
           .catch((error) => {
@@ -299,6 +301,8 @@ export default {
           return
         }
 
+        const appId = getAppId()
+
         requestCreateGroup({ name: state.createGroupForm.groupName, app: appId })
           .then((data) => {
             state.showCreateGroupForm = false
@@ -320,7 +324,7 @@ export default {
       requestDeleteGroup(groupId)
         .then(() => {
           state.currentDeleteGroupId = null
-          fetchGroups(appId).then((data) => {
+          fetchGroups(getAppId()).then((data) => {
             state.groups = addDefaultGroup(data)
             if (selectedGroup.value.groupId === groupId) {
               groupChange(state.groups[0].value)
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index cfa6ca0d4..7fe1f675e 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -33,7 +33,15 @@ import { nextTick, reactive, watch, provide, inject, ref } 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, useNotify } from '@opentiny/tiny-engine-meta-register'
+import {
+  useBlock,
+  useModal,
+  useResource,
+  useMaterial,
+  useNotify,
+  getMetaApi,
+  META_SERVICE
+} from '@opentiny/tiny-engine-meta-register'
 import BlockGroupTransfer from './BlockGroupTransfer.vue'
 import BlockGroupFilters from './BlockGroupFilters.vue'
 
@@ -72,7 +80,7 @@ export default {
     const { isDefaultGroupId, isRefresh, selectedGroup, selectedBlockArray, getGroupList } = useBlock()
     const { panel, closePanel } = useGroupPanel()
     const { message } = useModal()
-    const appId = useApp().appInfoState.selectedId
+    const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
     const panelState = inject('panelState', {})
     const blockUsers = ref([])
     provide('blockUsers', blockUsers)
@@ -124,7 +132,7 @@ export default {
           return requestUpdateGroup({
             id: groupId,
             blocks,
-            app: appId
+            app: getAppId()
           }).then((res) => {
             const selectedId = selectedBlockArray.value.map((b) => b.id)
             const addedBlocks = res.blocks.filter((item) => selectedId.includes(item.id))
diff --git a/packages/plugins/materials/src/meta/block/src/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
index 40c148fb5..55ad63605 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockList.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockList.vue
@@ -21,7 +21,14 @@
 
 <script lang="jsx">
 import { computed, inject, reactive, ref } from 'vue'
-import { useBlock, useMaterial, useModal, useApp, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import {
+  useBlock,
+  useMaterial,
+  useModal,
+  useCanvas,
+  getMetaApi,
+  META_SERVICE
+} from '@opentiny/tiny-engine-meta-register'
 import { PluginBlockList } from '@opentiny/tiny-engine-common'
 import { requestUpdateGroup, fetchGroupBlocksById } from './http'
 import { setBlockPanelVisible, setBlockVersionPanelVisible } from './js/usePanel'
@@ -74,7 +81,7 @@ export default {
     const panelState = inject('panelState', {})
     const displayType = inject('displayType')
     const { message, confirm } = useModal()
-    const appId = useApp().appInfoState.selectedId
+    const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
 
     const openVersionPanel = async ({ item }) => {
       selectedBlock.value = item
@@ -178,7 +185,7 @@ export default {
               ?.filter((item) => item.id !== blockId)
               .map((block) => ({ id: block.id, version: block.current_version }))
 
-            requestUpdateGroup({ id: groupId, blocks, app: appId }).then(() => {
+            requestUpdateGroup({ id: groupId, blocks, app: getAppId() }).then(() => {
               isRefresh.value = true
             })
           })
diff --git a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
index 0b15791e4..6674a56c8 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
@@ -19,7 +19,7 @@
 import { onMounted, reactive, watch, provide, computed } from 'vue'
 import { Search } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
-import { useApp, useBlock, useMaterial, useModal } from '@opentiny/tiny-engine-meta-register'
+import { useBlock, useMaterial, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import BlockGroup from './BlockGroup.vue'
 import BlockList from './BlockList.vue'
 import BlockGroupPanel from './BlockGroupPanel.vue'
@@ -48,7 +48,7 @@ export default {
     const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
     const { materialState } = useMaterial()
     const { message } = useModal()
-    const appId = useApp().appInfoState.selectedId
+    const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
 
     const state = reactive({
       searchValue: '',
@@ -145,7 +145,7 @@ export default {
     )
 
     onMounted(() => {
-      fetchGroups(appId)
+      fetchGroups(getAppId())
         .then((data) => {
           const groups = addDefaultGroup(data)
           state.groups.push(...groups)
diff --git a/packages/plugins/materials/src/meta/block/src/http.js b/packages/plugins/materials/src/meta/block/src/http.js
index a95766ff0..295ac171f 100644
--- a/packages/plugins/materials/src/meta/block/src/http.js
+++ b/packages/plugins/materials/src/meta/block/src/http.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { useApp } from '@opentiny/tiny-engine-meta-register'
+import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 const http = useHttp()
@@ -94,7 +94,7 @@ export const requestUpdateGroup = ({ id, name, app, blocks }) =>
 
 // 更新区块版本
 export const requestGroupBlockVersion = async ({ groupId, blockId, blockVersion }) => {
-  const app = useApp().appInfoState.selectedId
+  const app = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
   let blocks = await fetchGroupBlocksById({ groupId })
 
   blocks = blocks.map((block) => ({
diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index a3fa44156..2101637cf 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -34,7 +34,7 @@
 
 <script lang="jsx">
 import { reactive, ref, watchEffect, provide } from 'vue'
-import { useCanvas, useApp, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
@@ -68,7 +68,6 @@ export default {
     }
   },
   setup() {
-    const { appInfoState } = useApp()
     const { pageState } = useCanvas()
     const { pageSettingState, DEFAULT_PAGE, isTemporaryPage, initCurrentPageData } = usePage()
 
@@ -143,7 +142,6 @@ export default {
 
     return {
       state,
-      appInfoState,
       pageState,
       openNewPage,
       pageTreeRef,
diff --git a/packages/plugins/page/src/PageFolderSetting.vue b/packages/plugins/page/src/PageFolderSetting.vue
index 5f2f8d5ad..49cf43e62 100644
--- a/packages/plugins/page/src/PageFolderSetting.vue
+++ b/packages/plugins/page/src/PageFolderSetting.vue
@@ -30,7 +30,14 @@
 import { reactive, ref } from 'vue'
 import { Button, Collapse, CollapseItem } from '@opentiny/vue'
 import { PluginSetting, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
-import { usePage, useModal, useApp, useNotify, getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
+import {
+  usePage,
+  useModal,
+  useNotify,
+  getMergeRegistry,
+  getMetaApi,
+  META_SERVICE
+} from '@opentiny/tiny-engine-meta-register'
 import { isEqual } from '@opentiny/vue-renderless/common/object'
 import throttle from '@opentiny/vue-renderless/common/deps/throttle'
 import meta from '../meta'
@@ -70,7 +77,6 @@ export default {
       title: '文件夹设置'
     })
     const { requestCreatePage, requestUpdatePage, requestDeletePage } = http
-    const { appInfoState } = useApp()
     const { pageSettingState, changeTreeData } = usePage()
     const { confirm } = useModal()
     const registry = getMergeRegistry(meta.type, meta.id)
@@ -99,7 +105,7 @@ export default {
       const data = pageSettingState.currentPageData
       const createParams = {
         ...data,
-        app: appInfoState.selectedId,
+        app: getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id,
         isPage: false
       }
 
diff --git a/packages/plugins/page/src/PageHistory.vue b/packages/plugins/page/src/PageHistory.vue
index 540fea872..876be2313 100644
--- a/packages/plugins/page/src/PageHistory.vue
+++ b/packages/plugins/page/src/PageHistory.vue
@@ -6,7 +6,7 @@
 import { ref, watchEffect } from 'vue'
 import { BlockHistoryList } from '@opentiny/tiny-engine-common'
 import { previewPage } from '@opentiny/tiny-engine-common/js/preview'
-import { usePage, useBlock, useEditorInfo, useModal } from '@opentiny/tiny-engine-meta-register'
+import { usePage, useBlock, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { fetchPageHistory } from './http.js'
 
@@ -28,7 +28,7 @@ export default {
     const list = ref([])
 
     const getHistoryList = (pageId) => {
-      const { id, version } = useEditorInfo().useInfo()
+      const { id, version } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
       const params = version ? `&app=${id}&version=${version}` : ''
 
       if (pageId) {
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index 4c3cfaed5..501b54cdf 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -62,9 +62,10 @@ import {
   usePage,
   useCanvas,
   useModal,
-  useApp,
   useNotify,
-  getMergeRegistry
+  getMergeRegistry,
+  getMetaApi,
+  META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -123,7 +124,6 @@ export default {
   emits: ['openNewPage'],
   setup(props, { emit }) {
     const { requestCreatePage, requestDeletePage } = http
-    const { appInfoState } = useApp()
     const {
       DEFAULT_PAGE,
       pageSettingState,
@@ -174,7 +174,7 @@ export default {
           ...page_content_state,
           fileName: pageSettingState.currentPageData.name
         },
-        app: appInfoState.selectedId,
+        app: getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id,
         isPage: true
       }
 
diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue
index 0c3b7c188..77c64adf4 100644
--- a/packages/plugins/page/src/PageTree.vue
+++ b/packages/plugins/page/src/PageTree.vue
@@ -34,10 +34,19 @@
 </template>
 
 <script lang="jsx">
-import { reactive, ref, watchEffect, nextTick } from 'vue'
+import { reactive, ref, nextTick, onUnmounted } from 'vue'
 import { Search, Tree, Collapse, CollapseItem } from '@opentiny/vue'
 import { IconFolderOpened, IconFolderClosed, IconSearch } from '@opentiny/vue-icon'
-import { useCanvas, useApp, useModal, usePage, useBreadcrumb, useLayout } from '@opentiny/tiny-engine-meta-register'
+import {
+  useCanvas,
+  useModal,
+  usePage,
+  useBreadcrumb,
+  useLayout,
+  useMessage,
+  getMetaApi,
+  META_SERVICE
+} from '@opentiny/tiny-engine-meta-register'
 import { isEqual } from '@opentiny/vue-renderless/common/object'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -63,7 +72,6 @@ export default {
   },
   emits: ['openSettingPanel', 'add'],
   setup(props, { emit }) {
-    const { appInfoState } = useApp()
     const { confirm } = useModal()
     const { initData, pageState, isBlock, isSaved } = useCanvas()
     const { pageSettingState, changeTreeData, isCurrentDataSame, STATIC_PAGE_GROUP_ID, COMMON_PAGE_GROUP_ID } =
@@ -72,6 +80,7 @@ export default {
     const { setBreadcrumbPage } = useBreadcrumb()
     const pageTreeRefs = ref([])
     const ROOT_ID = pageSettingState.ROOT_ID
+    const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
 
     const state = reactive({
       pageSearchValue: '',
@@ -149,7 +158,7 @@ export default {
     }
 
     pageSettingState.updateTreeData = async () => {
-      const pageList = await refreshPageList(appInfoState.selectedId)
+      const pageList = await refreshPageList(getAppId())
       return pageList
     }
 
@@ -290,9 +299,11 @@ export default {
       )
     }
 
-    watchEffect(() => {
-      if (appInfoState.selectedId) {
-        refreshPageList(appInfoState.selectedId)
+    useMessage().subscribe({
+      topic: 'app_id_changed',
+      subscriber: 'page_tree_app_id_changed',
+      callback: (appId) => {
+        refreshPageList(appId)
       }
     })
 
@@ -316,6 +327,13 @@ export default {
 
     const nullIcon = <span></span>
 
+    onUnmounted(() => {
+      useMessage().unsubscribe({
+        topic: 'app_id_changed',
+        subscriber: 'page_tree_app_id_changed'
+      })
+    })
+
     return {
       createPublicPage,
       state,
diff --git a/packages/plugins/robot/src/js/robotSetting.js b/packages/plugins/robot/src/js/robotSetting.js
index 8453a3988..05ca26832 100644
--- a/packages/plugins/robot/src/js/robotSetting.js
+++ b/packages/plugins/robot/src/js/robotSetting.js
@@ -11,7 +11,7 @@
  */
 
 import { reactive } from 'vue'
-import { useApp } from '@opentiny/tiny-engine-meta-register'
+import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { useHttp } from '@opentiny/tiny-engine-http'
 
 export const AIModelOptions = [
@@ -59,7 +59,7 @@ export const initBlockList = async () => {
   if (state.blockList?.length) {
     return
   }
-  const appId = useApp().appInfoState.selectedId
+  const appId = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
   try {
     const list = await useHttp().get('/material-center/api/blocks', { params: { appId } })
     setBlocks(list)
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index 1f2ec4343..8d49ec06e 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -75,12 +75,12 @@ import { Button, Search, Tabs, TabItem } from '@opentiny/vue'
 import {
   useCanvas,
   useHistory,
-  useEditorInfo,
   useResource,
   useNotify,
   useHelp,
   getMetaApi,
-  META_APP
+  META_APP,
+  META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { iconPlus } from '@opentiny/vue-icon'
 import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
@@ -245,7 +245,7 @@ export default {
         Object.assign(state.dataSource, store)
         const storeList = Object.values(state.dataSource)
 
-        const { id } = useEditorInfo().useInfo()
+        const { id } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
         updateGlobalState(id, { global_state: storeList }).then((res) => {
           isPanelShow.value = false
           setGlobalState(res.global_state || [])
@@ -310,7 +310,7 @@ export default {
       const { setGlobalState } = useCanvas().canvasApi.value
 
       if (index !== -1) {
-        const { id } = useEditorInfo().useInfo()
+        const { id } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
 
         storeListt.splice(index, 1)
         updateGlobalState(id, { global_state: storeListt }).then((res) => {
diff --git a/packages/register/src/common.js b/packages/register/src/common.js
index 2b733b339..33fa0e960 100644
--- a/packages/register/src/common.js
+++ b/packages/register/src/common.js
@@ -46,7 +46,7 @@ export const templateHashMap = {}
  */
 export const layoutHashMap = {}
 
-export const metasHashMap = {}
+export const metaHashMap = {}
 
 export const apisMap = {}
 export const optionsMap = {}
@@ -166,7 +166,7 @@ export const generateRegistry = (registry) => {
       // 如果匹配到了id，说明是元服务配置，对元服务配置做读取和写入
       if (id && key !== 'metaData') {
         handleRegistryProp(id, value)
-        metasHashMap[id] = value
+        metaHashMap[id] = value
       } else {
         // TODO: 其他类型配置处理
       }
@@ -177,5 +177,5 @@ export const generateRegistry = (registry) => {
 }
 
 export const getMergeMeta = (id) => {
-  return metasHashMap[id]
+  return metaHashMap[id]
 }
diff --git a/packages/register/src/constants.js b/packages/register/src/constants.js
index e4fddd73b..03db83897 100644
--- a/packages/register/src/constants.js
+++ b/packages/register/src/constants.js
@@ -1,4 +1,5 @@
 export const META_SERVICE = {
+  GlobalService: 'engine.service.globalService',
   EditorInfo: 'engine.service.editorInfo',
   App: 'engine.service.app',
   GenerateCode: 'engine.service.generateCode',
diff --git a/packages/register/src/hooks.js b/packages/register/src/hooks.js
index 8deafd8ec..07826248b 100644
--- a/packages/register/src/hooks.js
+++ b/packages/register/src/hooks.js
@@ -1,13 +1,11 @@
 export const HOOK_NAME = {
   useLayout: 'layout',
-  useApp: 'app',
   useCanvas: 'canvas',
   useResource: 'resource',
   useHistory: 'history',
   useProperties: 'properties',
   useProperty: 'property',
   useSaveLocal: 'saveLocal',
-  useEditorInfo: 'editorInfo',
   useBlock: 'block',
   useTranslate: 'translate',
   usePage: 'page',
@@ -24,14 +22,12 @@ export const HOOK_NAME = {
 
 const hooksState = {
   [HOOK_NAME.useLayout]: {},
-  [HOOK_NAME.useApp]: {},
   [HOOK_NAME.useCanvas]: {},
   [HOOK_NAME.useResource]: {},
   [HOOK_NAME.useHistory]: {},
   [HOOK_NAME.useProperties]: {},
   [HOOK_NAME.useProperty]: {},
   [HOOK_NAME.useSaveLocal]: {},
-  [HOOK_NAME.useEditorInfo]: {},
   [HOOK_NAME.useBlock]: {},
   [HOOK_NAME.useTranslate]: {},
   [HOOK_NAME.usePage]: {},
@@ -55,12 +51,10 @@ 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)
-export const useEditorInfo = (...args) => getHook(HOOK_NAME.useEditorInfo, args)
 export const useBlock = (...args) => getHook(HOOK_NAME.useBlock, args)
 export const useTranslate = (...args) => getHook(HOOK_NAME.useTranslate, args)
 export const usePage = (...args) => getHook(HOOK_NAME.usePage, args)
diff --git a/packages/register/src/index.js b/packages/register/src/index.js
index 3faa004ef..c1bac3b6b 100644
--- a/packages/register/src/index.js
+++ b/packages/register/src/index.js
@@ -15,7 +15,7 @@ export { useCompile } from './templateHash'
 export { defineEntry, callEntry, beforeCallEntry, afterCallEntry, mergeRegistry, getMergeRegistry } from './entryHash'
 export { getLayoutComponent } from './layoutHash'
 export { default as useMessage } from './useMessage'
-export { useState, useStore } from './useState'
 export { getConfigurator, addConfigurator } from './configurators'
 export * from './hooks'
 export { META_APP, META_SERVICE } from './constants'
+export { defineService, initServices } from './service'
diff --git a/packages/register/src/service.js b/packages/register/src/service.js
new file mode 100644
index 000000000..11b53796d
--- /dev/null
+++ b/packages/register/src/service.js
@@ -0,0 +1,100 @@
+import { reactive, readonly } from 'vue'
+import { metaHashMap } from './common'
+
+/**
+ * @template T
+ * @template K
+ * @typedef {Object} Context
+ * @property {(import 'vue').UnwrapNestedRefs<T>} state
+ * @property {K} options
+ */
+
+/**
+ * @template T
+ * @template K
+ * @typedef {Object} ServiceOptions
+ * @property {string} id
+ * @property {'MetaService'} type
+ * @property {T} initialState
+ * @property {K} options
+ * @property {(context: Context<T, K>) => void} init
+ * @property {Record<string, Function> | (context: Context<T, K>) => Record<string, Function>} apis
+ */
+
+/**
+ * @template T
+ * @template K
+ * @typedef {()=> (import 'vue').DeepReadonly<(import 'vue').UnwrapNestedRefs<T>>} GetState
+ * @typedef {(kv: Partial<T>) => void} SetState
+ * @typedef {Pick<ServiceOptions<T, K>, 'id' | 'type' | 'options'> & {
+ *   apis: { getState: GetState; setState: SetState } & Record<string, Function>
+ * }} Service
+ */
+
+/**
+ * @template T
+ * @template K
+ * @type {WeakMap<Service<T, K>, {state: T} & Pick<ServiceOptions<T, K>, 'init'>>}
+ */
+const servicesMap = new WeakMap()
+
+/**
+ * @template T
+ * @template K
+ * @param {ServiceOptions<T, K>} serviceOptions
+ * @returns {Service<T, K>}
+ */
+export const defineService = (serviceOptions) => {
+  const { id, type, initialState, options, init, apis } = serviceOptions
+
+  if (!id || !type) {
+    throw new Error('Service id and type are required')
+  }
+
+  if (type !== 'MetaService') {
+    throw new Error('Invalid service type. Expected: MetaService')
+  }
+
+  /**
+   * @type {Service<T, K>}
+   */
+  const resultService = {
+    id,
+    type,
+    options,
+    apis: {}
+  }
+
+  const state = reactive(initialState || {})
+
+  if (typeof apis === 'object' && apis) {
+    resultService.apis = apis
+  } else if (typeof apis === 'function') {
+    resultService.apis = apis({ state })
+  }
+
+  resultService.apis.getState = () => readonly(state)
+  resultService.apis.setState = (kv) => {
+    Object.assign(state, kv)
+  }
+
+  servicesMap.set(resultService, {
+    state,
+    init: typeof init === 'function' ? init : () => {}
+  })
+
+  return resultService
+}
+
+export const initServices = () => {
+  const services = Object.values(metaHashMap).filter((service) => service.type === 'MetaService')
+
+  services.forEach((service) => {
+    const context = servicesMap.get(service)
+    if (context) {
+      const { state, init } = context
+      const { options } = service
+      init({ state, options })
+    }
+  })
+}
diff --git a/packages/register/src/useState.js b/packages/register/src/useState.js
deleted file mode 100644
index 522823c9e..000000000
--- a/packages/register/src/useState.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { computed, isReactive, reactive } from 'vue'
-
-/**
- * @type {Record<string, Record<string, any>>}
- */
-const stores = {}
-
-/**
- * @param {string} name
- * @returns
- */
-export const useStore = (name) => {
-  if (!isReactive(stores[name])) {
-    stores[name] = reactive({})
-  }
-
-  const store = stores[name]
-
-  return {
-    store,
-    /**
-     * @param {Record<string, any>} kv
-     * @returns
-     */
-    patchStore: (kv) => {
-      return Object.assign(store, kv)
-    },
-    /**
-     * @param {string} key
-     * @returns {[(import 'vue').ComputedRef<any>, (value: any) => void]}
-     */
-    useState: (key) => {
-      return [
-        computed(() => store[key]),
-        (value) => {
-          store[key] = value
-        }
-      ]
-    }
-  }
-}
-
-export const { useState } = useStore('_defaultGlobal')
diff --git a/packages/register/test/useState.test.js b/packages/register/test/useState.test.js
deleted file mode 100644
index 42c63efd0..000000000
--- a/packages/register/test/useState.test.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { useState, useStore } from '../src/useState'
-
-describe.concurrent('useState Key-based Access', () => {
-  it('accesses shared state using a key', () => {
-    const [state, setState] = useState('sharedKey')
-    expect(state.value).toBeUndefined() // Assuming no initial value set
-
-    setState('new value')
-    expect(state.value).toEqual('new value')
-
-    // Simulate another component accessing the same key
-    const [state2] = useState('sharedKey')
-    expect(state2.value).toEqual('new value')
-  })
-
-  it('handles non-existent keys gracefully', () => {
-    const [state] = useState('nonExistentKey')
-    expect(state.value).toBeUndefined()
-  })
-
-  it('ensures state consistency across components', () => {
-    const [, setState] = useState('consistentKey')
-    setState('consistent value')
-
-    // Simulate another component accessing the same key
-    const [state2] = useState('consistentKey')
-    expect(state2.value).toEqual('consistent value')
-  })
-})
-
-describe.concurrent('useStore', () => {
-  it('patch store correctly', () => {
-    const { store, patchStore } = useStore('foo')
-
-    expect(store).toEqual({})
-
-    patchStore({ hello: 'world', foo: 'bar' })
-
-    expect(store).toEqual({ hello: 'world', foo: 'bar' })
-
-    patchStore({ hello: 'univese' })
-
-    expect(store).toEqual({ hello: 'univese', foo: 'bar' })
-  })
-
-  it('patch store and set state correctly', () => {
-    const { store, patchStore, useState } = useStore('hello')
-
-    patchStore({ hello: 'world' })
-
-    const [state, setState] = useState('hello')
-
-    expect(state.value).toEqual('world')
-
-    setState('world 2')
-
-    expect(state.value).toEqual('world 2')
-    expect(store).toEqual({ hello: 'world 2' })
-
-    patchStore({ hello: 'world 3' })
-
-    expect(state.value).toEqual('world 3')
-    expect(store).toEqual({ hello: 'world 3' })
-  })
-})
diff --git a/packages/toolbars/generate-code/src/Main.vue b/packages/toolbars/generate-code/src/Main.vue
index aa5e0ca6d..640a9fbdf 100644
--- a/packages/toolbars/generate-code/src/Main.vue
+++ b/packages/toolbars/generate-code/src/Main.vue
@@ -18,10 +18,10 @@ import {
   useCanvas,
   useNotify,
   useLayout,
-  useEditorInfo,
   getMetaApi,
   META_APP,
-  getMergeMeta
+  getMergeMeta,
+  META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { fs } from '@opentiny/tiny-engine-utils'
 import { useHttp } from '@opentiny/tiny-engine-http'
@@ -102,7 +102,7 @@ export default {
 
     const getPreGenerateInfo = async () => {
       const params = getParams()
-      const { id } = useEditorInfo().useInfo()
+      const { id } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
       const promises = [
         useHttp().get(`/app-center/v1/api/apps/schema/${id}`),
         fetchMetaData(params),
diff --git a/packages/toolbars/logo/src/AppList.vue b/packages/toolbars/logo/src/AppList.vue
index f834d026c..65138b53b 100644
--- a/packages/toolbars/logo/src/AppList.vue
+++ b/packages/toolbars/logo/src/AppList.vue
@@ -1,7 +1,7 @@
 <template>
-  <tiny-select v-model="appInfoState.selectedId" placeholder="应用名称" @change="appChange">
+  <tiny-select :model-value="globalState.appInfo.id" placeholder="应用名称" @change="appChange">
     <tiny-option
-      v-for="item in appInfoState.list"
+      v-for="item in globalState.appList"
       :key="`app-${item.name}-${item.id}`"
       :label="item.name"
       :value="item.id"
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { useApp } from '@opentiny/tiny-engine-meta-register'
+import { useMessage, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { Select, Option } from '@opentiny/vue'
 
 export default {
@@ -19,14 +19,14 @@ export default {
     TinyOption: Option
   },
   setup() {
-    const { appInfoState } = useApp()
+    const globalState = getMetaApi(META_SERVICE.GlobalService).getState()
 
     const appChange = (appId) => {
-      appInfoState.selectedId = appId
+      useMessage().publish({ topic: 'app_id_changed', data: appId })
     }
 
     return {
-      appInfoState,
+      globalState,
       appChange
     }
   }
diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue
index e847ec4a7..0ac0d290a 100644
--- a/packages/toolbars/logo/src/Main.vue
+++ b/packages/toolbars/logo/src/Main.vue
@@ -114,7 +114,7 @@ import {
   Tooltip as TinyTooltip
 } from '@opentiny/vue'
 import { iconHelpCircle } from '@opentiny/vue-icon'
-import { useLayout, useApp, useModal } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
@@ -133,6 +133,8 @@ const { PLUGIN_NAME, activePlugin } = useLayout()
 
 const IconHelp = iconHelpCircle()
 
+const globalState = getMetaApi(META_SERVICE.GlobalService).getState()
+
 const state = reactive({
   hoverState: false,
   showMenu: false,
@@ -148,7 +150,7 @@ const state = reactive({
     canCreateNewBranch: false
   },
   title: computed(() => (state.showPreview ? '发布应用' : '保存历史版本')),
-  appName: computed(() => useApp().appInfoState.selectedApp.name),
+  appName: computed(() => globalState.appInfo.name),
   leaveTimeoutId: null,
   overTimeoutId: null
 })
@@ -200,7 +202,7 @@ const actions = {
     state.showPreview = true
   },
   previewApp() {
-    const appId = useApp().appInfoState.selectedId
+    const appId = globalState.appInfo.id
     // 获取租户 id
     const getTenant = () => new URLSearchParams(location.search).get('tenant')
     const tenantId = getTenant() || ''
@@ -213,7 +215,7 @@ const actions = {
 }
 
 const confirm = () => {
-  const appId = useApp().appInfoState.selectedId
+  const appId = globalState.appInfo.id
 
   form.value.validate((valid) => {
     if (valid) {