From 4b061775f83b2b40aa04b541864ae4f2ecedacb5 Mon Sep 17 00:00:00 2001
From: hexqi <wu_12556@126.com>
Date: Wed, 19 Jun 2024 12:08:36 +0800
Subject: [PATCH] feat: move hooks

---
 designer-demo/registry.js                     |  24 +--
 packages/canvas/breadcrumb/index.js           |   6 +-
 .../VariableConfigurator.vue                  |   4 +-
 packages/controller/adapter.js                |  37 -----
 packages/controller/js/comment.js             |  16 ++
 packages/controller/{src => js}/example.js    |   3 +-
 packages/controller/meta.js                   |   3 -
 packages/controller/src/composable/index.js   |  23 +++
 .../src/{hooks => composable}/useApp.js       |   6 +-
 .../{hooks => composable}/useEditorInfo.js    |   0
 packages/controller/src/hooks/index.js        | 132 -----------------
 packages/controller/src/index.js              |  13 +-
 packages/controller/src/useData.js            |  20 ---
 packages/controller/src/useMessage.js         | 138 ------------------
 packages/controller/utils.js                  |  58 ++++++--
 packages/design-core/index.js                 |  34 ++---
 .../engine-cli/template/designer/registry.js  |  24 +--
 packages/layout/index.js                      |  10 +-
 packages/layout/src/composable/index.js       |  11 ++
 .../src/{hooks => composable}/useLayout.js    |   0
 packages/plugins/block/index.js               |   6 +-
 .../plugins/block/src/composable/index.js     |  11 ++
 .../block/src/composable}/useBlock.js         |   6 +-
 packages/plugins/data/src/Main.vue            |   3 +-
 packages/plugins/datasource/index.js          |   8 +-
 .../datasource/src/DataSourceRemotePanel.vue  |   2 +-
 .../datasource/src/composable/index.js        |  11 ++
 .../src/composable}/useDataSource.js          |   0
 packages/plugins/help/index.js                |   6 +-
 packages/plugins/help/src/composable/index.js |  11 ++
 .../help/src/composable}/useHelp.js           |   0
 packages/plugins/i18n/index.js                |   6 +-
 packages/plugins/i18n/src/composable/index.js |  11 ++
 .../i18n/src/composable}/useTranslate.js      |   6 +-
 packages/plugins/materials/index.js           |   6 +-
 .../plugins/materials/src/composable/index.js |  11 ++
 .../materials/src/composable}/useResource.js  |   2 +-
 packages/plugins/page/index.js                |   6 +-
 packages/plugins/page/src/composable/index.js |  11 ++
 .../page/src/composable}/usePage.js           |   0
 packages/plugins/schema/src/Main.vue          |   3 +-
 .../events/src/components/AdvanceConfig.vue   |   3 +-
 packages/settings/props/index.js              |  10 +-
 .../src/components/inputs/CodeEditor.vue      |   3 +-
 .../settings/props/src/composable/index.js    |  21 +++
 .../{hooks => composable}/useProperties.js    |   0
 .../src/{hooks => composable}/useProperty.js  |   0
 packages/toolbars/generate-vue/index.js       |   6 +-
 .../generate-vue/src/composable/index.js      |  11 ++
 .../src/composable}/useSaveLocal.js           |   0
 packages/toolbars/redoundo/index.js           |   6 +-
 .../toolbars/redoundo/src/composable/index.js |  11 ++
 .../redoundo/src/composable}/useHistory.js    |   0
 packages/toolbars/save/index.js               |   1 -
 54 files changed, 294 insertions(+), 466 deletions(-)
 create mode 100644 packages/controller/js/comment.js
 rename packages/controller/{src => js}/example.js (98%)
 delete mode 100644 packages/controller/meta.js
 create mode 100644 packages/controller/src/composable/index.js
 rename packages/controller/src/{hooks => composable}/useApp.js (89%)
 rename packages/controller/src/{hooks => composable}/useEditorInfo.js (100%)
 delete mode 100644 packages/controller/src/hooks/index.js
 delete mode 100644 packages/controller/src/useData.js
 delete mode 100644 packages/controller/src/useMessage.js
 create mode 100644 packages/layout/src/composable/index.js
 rename packages/layout/src/{hooks => composable}/useLayout.js (100%)
 create mode 100644 packages/plugins/block/src/composable/index.js
 rename packages/{controller/src/hooks => plugins/block/src/composable}/useBlock.js (98%)
 create mode 100644 packages/plugins/datasource/src/composable/index.js
 rename packages/{controller/src/hooks => plugins/datasource/src/composable}/useDataSource.js (100%)
 create mode 100644 packages/plugins/help/src/composable/index.js
 rename packages/{controller/src/hooks => plugins/help/src/composable}/useHelp.js (100%)
 create mode 100644 packages/plugins/i18n/src/composable/index.js
 rename packages/{controller/src/hooks => plugins/i18n/src/composable}/useTranslate.js (96%)
 create mode 100644 packages/plugins/materials/src/composable/index.js
 rename packages/{controller/src/hooks => plugins/materials/src/composable}/useResource.js (99%)
 create mode 100644 packages/plugins/page/src/composable/index.js
 rename packages/{controller/src/hooks => plugins/page/src/composable}/usePage.js (100%)
 create mode 100644 packages/settings/props/src/composable/index.js
 rename packages/settings/props/src/{hooks => composable}/useProperties.js (100%)
 rename packages/settings/props/src/{hooks => composable}/useProperty.js (100%)
 create mode 100644 packages/toolbars/generate-vue/src/composable/index.js
 rename packages/toolbars/{save/src/hooks => generate-vue/src/composable}/useSaveLocal.js (100%)
 create mode 100644 packages/toolbars/redoundo/src/composable/index.js
 rename packages/{controller/src/hooks => toolbars/redoundo/src/composable}/useHistory.js (100%)

diff --git a/designer-demo/registry.js b/designer-demo/registry.js
index dc2ef6b0b..d4554db72 100644
--- a/designer-demo/registry.js
+++ b/designer-demo/registry.js
@@ -43,18 +43,7 @@ import {
   Layout,
   Canvas,
   EditorInfoService,
-  HelpService,
   AppService,
-  BlockService,
-  BreadcrumbService,
-  DataSourceService,
-  PageService,
-  ResourceService,
-  PropertiesService,
-  PropertyService,
-  SaveLocalService,
-  TranslateService,
-  HistoryService,
 } from '@opentiny/tiny-engine'
 
 export default {
@@ -62,18 +51,7 @@ export default {
     id: 'engine.root',
     metas: [
       EditorInfoService,
-      HelpService,
-      AppService,
-      BreadcrumbService,
-      BlockService,
-      DataSourceService,
-      PageService,
-      ResourceService,
-      PropertiesService,
-      PropertyService,
-      SaveLocalService,
-      TranslateService,
-      HistoryService,
+      AppService
     ]
   },
   config: {
diff --git a/packages/canvas/breadcrumb/index.js b/packages/canvas/breadcrumb/index.js
index 143fe9c3e..4d330c414 100644
--- a/packages/canvas/breadcrumb/index.js
+++ b/packages/canvas/breadcrumb/index.js
@@ -1,3 +1,4 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import CanvasBreadcrumb from './src/CanvasFooter.vue'
 import metaData from './meta'
 import useBreadcrumb from './src/useBreadcrumb'
@@ -5,5 +6,8 @@ import useBreadcrumb from './src/useBreadcrumb'
 export default {
   ...metaData,
   apis: useBreadcrumb(),
-  entry: CanvasBreadcrumb
+  entry: CanvasBreadcrumb,
+  composable: {
+    name: HOOK_NAME.useBreadcrumb
+  }
 }
diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
index a0d6b6070..76bd92d16 100644
--- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue
+++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -121,7 +121,8 @@
 
 <script>
 import { VueMonaco as MonacoEditor, SvgButton } from '../components' // TODO 等 common 包移除了 configurator 依赖后再更换成 @opentiny/tiny-engine-common
-import { useApp, useCanvas, useData, useLayout, useProperties, useResource } from '@opentiny/tiny-engine-controller'
+import { useApp, useCanvas, useLayout, useProperties, useResource } from '@opentiny/tiny-engine-controller'
+import { getCommentByKey } from '@opentiny/tiny-engine-controller/js/comment'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
 import { formatString, generate, parse, traverse } from '@opentiny/tiny-engine-controller/js/ast'
 import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-controller/js/constants'
@@ -318,7 +319,6 @@ export default {
     const genRemoteMethodToLifeSetup = (variableName, sourceRef, pageSchema) => {
       if (sourceRef?.data?.data) {
         const setupFn = pageSchema.lifeCycles?.setup?.value
-        const { getCommentByKey } = useData()
         const { start, end } = getCommentByKey(variableName)
         const intervalId = `${CONSTANTS.INTERVALID}${capitalize(camelize(sourceRef.name))}`
         const isPoll = state.isPoll && state.pollInterval !== undefined
diff --git a/packages/controller/adapter.js b/packages/controller/adapter.js
index 069156b46..dd9498362 100644
--- a/packages/controller/adapter.js
+++ b/packages/controller/adapter.js
@@ -10,45 +10,8 @@
  *
  */
 
-import { toRaw } from 'vue'
 import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 
-/**
- * 将画布pageSchema对象转换成编辑器中的string
- *
- * @param {*} obj
- * @returns
- */
-export const obj2String = (obj) => {
-  let out = null
-
-  try {
-    out = JSON.stringify(toRaw(obj), null, 2)
-  } catch (error) {
-    // do nothing
-  }
-
-  return out
-}
-
-/**
- * 将编辑器中的string转换成画布识别的pageSchema对象
- * @param {*} string
- * @returns
- */
-
-export const string2Obj = (string) => {
-  let obj = null
-
-  try {
-    obj = JSON.parse(string)
-  } catch (error) {
-    // do nothing
-  }
-
-  return obj
-}
-
 /**
  * 判断 Monaco 编辑器背景色的主题
  * @returns
diff --git a/packages/controller/js/comment.js b/packages/controller/js/comment.js
new file mode 100644
index 000000000..335d8b640
--- /dev/null
+++ b/packages/controller/js/comment.js
@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ */
+
+export const getCommentByKey = (key) => ({
+  start: `start-${key} 设计器生成的代码，为了避免出现问题，请勿修改`,
+  end: `end-${key}`
+})
diff --git a/packages/controller/src/example.js b/packages/controller/js/example.js
similarity index 98%
rename from packages/controller/src/example.js
rename to packages/controller/js/example.js
index 42a7b7bba..c9a49717e 100644
--- a/packages/controller/src/example.js
+++ b/packages/controller/js/example.js
@@ -92,7 +92,8 @@ const exampleMap = {
     }
   ] `
 }
-export default (name) => {
+
+export const getExample = (name) => {
   const resetName = `${name || ''}`.toLocaleLowerCase()
   return exampleMap[resetName]
 }
diff --git a/packages/controller/meta.js b/packages/controller/meta.js
deleted file mode 100644
index 5d7a87459..000000000
--- a/packages/controller/meta.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  id: 'engine.controller'
-}
diff --git a/packages/controller/src/composable/index.js b/packages/controller/src/composable/index.js
new file mode 100644
index 000000000..c5d2174be
--- /dev/null
+++ b/packages/controller/src/composable/index.js
@@ -0,0 +1,23 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+
+import useApp from './useApp'
+import useEditorInfo from './useEditorInfo'
+
+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
+  }
+}
+
diff --git a/packages/controller/src/hooks/useApp.js b/packages/controller/src/composable/useApp.js
similarity index 89%
rename from packages/controller/src/hooks/useApp.js
rename to packages/controller/src/composable/useApp.js
index 9a3b840bd..88a97773a 100644
--- a/packages/controller/src/hooks/useApp.js
+++ b/packages/controller/src/composable/useApp.js
@@ -13,8 +13,6 @@
 import { reactive, watch } from 'vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
 
-const http = useHttp()
-
 const defaultState = {
   // 应用列表
   list: [],
@@ -41,7 +39,7 @@ const defaultState = {
 const appInfoState = reactive({ ...defaultState })
 
 // 获取当前应用的信息
-const fetchAppInfo = (appId) => http.get(`/app-center/api/apps/detail/${appId}`)
+const fetchAppInfo = (appId) => useHttp().get(`/app-center/api/apps/detail/${appId}`)
 
 watch(
   () => appInfoState.selectedId,
@@ -55,7 +53,7 @@ watch(
 )
 
 // 获取应用列表
-const fetchAppList = (platformId) => http.get(`/app-center/api/apps/list/${platformId}`)
+const fetchAppList = (platformId) => useHttp().get(`/app-center/api/apps/list/${platformId}`)
 
 const updateApp = async (id) => {
   const appInfo = await fetchAppInfo(id)
diff --git a/packages/controller/src/hooks/useEditorInfo.js b/packages/controller/src/composable/useEditorInfo.js
similarity index 100%
rename from packages/controller/src/hooks/useEditorInfo.js
rename to packages/controller/src/composable/useEditorInfo.js
diff --git a/packages/controller/src/hooks/index.js b/packages/controller/src/hooks/index.js
deleted file mode 100644
index 5aba3bdec..000000000
--- a/packages/controller/src/hooks/index.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
-
-import useApp from './useApp'
-import useResource from './useResource'
-import useHistory from './useHistory'
-import useProperties from './useProperties'
-import useSaveLocal from './useSaveLocal'
-import useEditorInfo from './useEditorInfo'
-import useBlock from './useBlock'
-import useTranslate from './useTranslate'
-import usePage from './usePage'
-import useDataSource from './useDataSource'
-import useBreadcrumb from './useBreadcrumb'
-import useProperty from './useProperty'
-import useHelp from './useHelp'
-
-export const AppService = {
-  id: 'engine.service.app',
-  type: 'MetaService',
-  apis: useApp(),
-  composable: {
-    name: HOOK_NAME.useApp
-  }
-}
-
-export const ResourceService = {
-  id: 'engine.service.resource',
-  type: 'MetaService',
-  apis: useResource(),
-  composable: {
-    name: HOOK_NAME.useResource
-  }
-}
-
-export const HistoryService = {
-  id: 'engine.service.history',
-  type: 'MetaService',
-  apis: useHistory(),
-  composable: {
-    name: HOOK_NAME.useHistory
-  }
-}
-
-export const PropertiesService = {
-  id: 'engine.service.properties',
-  type: 'MetaService',
-  apis: useProperties(),
-  composable: {
-    name: HOOK_NAME.useProperties
-  }
-}
-
-export const SaveLocalService = {
-  id: 'engine.service.saveLocal',
-  type: 'MetaService',
-  apis: useSaveLocal(),
-  composable: {
-    name: HOOK_NAME.useSaveLocal
-  }
-}
-
-export const EditorInfoService = {
-  id: 'engine.service.editorInfo',
-  type: 'MetaService',
-  apis: useEditorInfo(),
-  composable: {
-    name: HOOK_NAME.useEditorInfo
-  }
-}
-
-export const BlockService = {
-  id: 'engine.service.block',
-  type: 'MetaService',
-  apis: useBlock(),
-  composable: {
-    name: HOOK_NAME.useBlock
-  }
-}
-
-export const TranslateService = {
-  id: 'engine.service.translate',
-  type: 'MetaService',
-  apis: useTranslate(),
-  composable: {
-    name: HOOK_NAME.useTranslate
-  }
-}
-
-export const PageService = {
-  id: 'engine.service.page',
-  type: 'MetaService',
-  apis: usePage(),
-  composable: {
-    name: HOOK_NAME.usePage
-  }
-}
-
-export const DataSourceService = {
-  id: 'engine.service.dataSource',
-  type: 'MetaService',
-  apis: useDataSource(),
-  composable: {
-    name: HOOK_NAME.useDataSource
-  }
-}
-
-export const BreadcrumbService = {
-  id: 'engine.service.breadcrumb',
-  type: 'MetaService',
-  apis: useBreadcrumb(),
-  composable: {
-    name: HOOK_NAME.useBreadcrumb
-  }
-}
-
-export const PropertyService = {
-  id: 'engine.service.property',
-  type: 'MetaService',
-  apis: useProperty(),
-  composable: {
-    name: HOOK_NAME.useProperty
-  }
-}
-
-export const HelpService = {
-  id: 'engine.service.help',
-  type: 'MetaService',
-  apis: useHelp(),
-  composable: {
-    name: HOOK_NAME.useHelp
-  }
-}
diff --git a/packages/controller/src/index.js b/packages/controller/src/index.js
index eb21d6ad8..cec166d0d 100644
--- a/packages/controller/src/index.js
+++ b/packages/controller/src/index.js
@@ -10,13 +10,7 @@
  *
  */
 
-export * from './hooks/'
-import useMessage from './useMessage'
-import useData from './useData'
-export { default as metaData } from '../meta'
-import example from './example'
-
-export const getExample = example
+export * from './composable/'
 
 export {
   useLayout,
@@ -36,7 +30,6 @@ export {
   useHelp,
   useModal,
   useNotify,
-  useCustom
+  useCustom,
+  useMessage
 } from '@opentiny/tiny-engine-entry'
-
-export { useData, useMessage }
diff --git a/packages/controller/src/useData.js b/packages/controller/src/useData.js
deleted file mode 100644
index 417e50b02..000000000
--- a/packages/controller/src/useData.js
+++ /dev/null
@@ -1,20 +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.
-*
-*/
-
-const getCommentByKey = (key) => ({
-  start: `start-${key} 设计器生成的代码，为了避免出现问题，请勿修改`,
-  end: `end-${key}`
-})
-
-export default () => ({
-  getCommentByKey
-})
diff --git a/packages/controller/src/useMessage.js b/packages/controller/src/useMessage.js
deleted file mode 100644
index 5681c1b0d..000000000
--- a/packages/controller/src/useMessage.js
+++ /dev/null
@@ -1,138 +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.
-*
-*/
-
-let lastMessage = null
-const subscribers = { '': {} }
-
-/**
- * 订阅消息。
- *
- *      const { subscribe } = useMessage()
- *      subscribe({ topic: 'myTopic', callback: data => console.log(data) })
- *
- * @member TinyEditor.message
- * @param {Object} object { topic: 消息名称, subscriber(可选): 消息集合, callback: 接收到消息之后的回调用函数 }
- * @return {Object} { topic: 消息名称, subscriber: 消息集合 }
- */
-const subscribe = ({ topic, subscriber, callback } = {}) => {
-  const root = subscribers['']
-  let listeners = root
-
-  if (topic && typeof topic === 'string' && typeof callback === 'function') {
-    if (subscriber && typeof subscriber === 'string') {
-      listeners = subscribers[subscriber] || {}
-      subscribers[subscriber] = listeners
-    }
-
-    const callbacks = listeners[topic] || []
-    listeners[topic] = callbacks
-    callbacks.push(callback)
-
-    const lastEvent = callbacks.lastEvent || (root[topic] && root[topic].lastEvent)
-    if (lastEvent) {
-      callback(lastEvent.data)
-    }
-  }
-
-  return { topic, subscriber }
-}
-
-/**
- * 取消订阅。
- *
- *      //订阅消息
- *      const { subscribe } = useMessage()
- *      let message = subscribe({ topic: 'myTopic', callback: data => console.log(data) })
- *
- *      //取消订阅
- *      const { unsubscribe } = useMessage()
- *      unsubscribe({topic: 'myTopic'}) // 方式一
- *      unsubscribe(message) // 方式二
- *
- * @member TinyEditor.message
- * @param {Object} object { topic: 消息名称, subscriber(可选): 消息集合 }
- */
-const unsubscribe = ({ topic, subscriber } = {}) => {
-  if (topic && typeof topic === 'string') {
-    const removeListener = (subscriber) => {
-      const listeners = subscribers[subscriber]
-      if (listeners) {
-        delete listeners[topic]
-        if (subscriber && !Object.getOwnPropertyNames(listeners).length) {
-          delete subscribers[subscriber]
-        }
-      }
-    }
-
-    if (subscriber && typeof subscriber === 'string') {
-      removeListener(subscriber)
-    } else {
-      Object.keys(subscribers).forEach((key) => {
-        removeListener(key)
-      })
-    }
-  }
-}
-
-/**
- * 发布消息。
- *      const { publish } = useMessage()
- *      publish({ topic: 'myTopic', data: 'string' })
- *      publish({ topic: 'myTopic', data: {} })
- *
- * @member TinyEditor.message
- * @param {Object} object { topic: 消息名称, data(string | object): 消息内容 }
- */
-const publish = ({ topic, data } = {}) => {
-  if (topic && typeof topic === 'string') {
-    Object.values(subscribers).forEach((value) => {
-      let callbacks = value[topic] || []
-
-      if (callbacks.length) {
-        callbacks.forEach((callback) => callback(data))
-      } else {
-        value[topic] = callbacks
-      }
-
-      callbacks.lastEvent = { data }
-    })
-  }
-}
-
-/**
- * 广播消息。
- *      const { broadcast } = useMessage()
- *      broadcast({ topic: 'myTopic', data: 'string' })
- *      broadcast({ topic: 'myTopic', data: {} })
- *
- * @member TinyEditor.message
- * @param {Object} object { topic: 消息名称, data(string | object): 消息内容 }
- */
-const broadcast = ({ topic, data }) => {
-  if (topic && typeof topic === 'string') {
-    lastMessage = { topic, data }
-
-    publish(lastMessage)
-  }
-}
-
-export default () => {
-  // 新use的message自动广播上次的异步消息
-  lastMessage && publish(lastMessage)
-
-  return {
-    subscribe,
-    unsubscribe,
-    publish,
-    broadcast
-  }
-}
diff --git a/packages/controller/utils.js b/packages/controller/utils.js
index 9c22b4861..645645e5c 100644
--- a/packages/controller/utils.js
+++ b/packages/controller/utils.js
@@ -1,15 +1,15 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
-
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { toRaw } from 'vue'
 import { isObject, isArray } from '@opentiny/vue-renderless/grid/static'
 
 export const MATERIAL_TYPE = {
@@ -131,3 +131,39 @@ export const getDefaultProps = (properties = []) => {
 
   return props
 }
+
+/**
+ * 响应式对象转化为字符串
+ *
+ * @param {*} obj
+ * @returns
+ */
+export const reactiveObj2String = (obj) => {
+  let out = null
+
+  try {
+    out = JSON.stringify(toRaw(obj), null, 2)
+  } catch (error) {
+    // do nothing
+  }
+
+  return out
+}
+
+/**
+ * 字符串转对象
+ * @param {*} string
+ * @returns
+ */
+
+export const string2Obj = (string) => {
+  let obj = null
+
+  try {
+    obj = JSON.parse(string)
+  } catch (error) {
+    // do nothing
+  }
+
+  return obj
+}
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index c8300bedb..7e743c82e 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -7,27 +7,27 @@ export { default as Lang } from '@opentiny/tiny-engine-toolbar-lang'
 export { default as Checkinout } from '@opentiny/tiny-engine-toolbar-checkinout'
 export { default as Logo } from '@opentiny/tiny-engine-toolbar-logo'
 export { default as Media } from '@opentiny/tiny-engine-toolbar-media'
-export { default as Redoundo } from '@opentiny/tiny-engine-toolbar-redoundo'
+export { default as Redoundo, HistoryService } from '@opentiny/tiny-engine-toolbar-redoundo'
 export { default as Save } from '@opentiny/tiny-engine-toolbar-save'
 export { default as Clean } from '@opentiny/tiny-engine-toolbar-clean'
 export { default as Preview } from '@opentiny/tiny-engine-toolbar-preview'
-export { default as GenerateVue } from '@opentiny/tiny-engine-toolbar-generate-vue'
+export { default as GenerateVue, SaveLocalService } from '@opentiny/tiny-engine-toolbar-generate-vue'
 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 } from '@opentiny/tiny-engine-plugin-materials'
+export { default as Materials, ResourceService } 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'
-export { default as Help } from '@opentiny/tiny-engine-plugin-help'
+export { default as Help, HelpService } from '@opentiny/tiny-engine-plugin-help'
 export { default as Schema } from '@opentiny/tiny-engine-plugin-schema'
-export { default as Page } from '@opentiny/tiny-engine-plugin-page'
-export { default as I18n } from '@opentiny/tiny-engine-plugin-i18n'
+export { default as Page, PageService } from '@opentiny/tiny-engine-plugin-page'
+export { default as I18n, TranslateService } from '@opentiny/tiny-engine-plugin-i18n'
 export { default as Bridge } from '@opentiny/tiny-engine-plugin-bridge'
-export { default as Block } from '@opentiny/tiny-engine-plugin-block'
-export { default as Datasource } from '@opentiny/tiny-engine-plugin-datasource'
+export { default as Block, BlockService } from '@opentiny/tiny-engine-plugin-block'
+export { default as Datasource, DataSourceService } from '@opentiny/tiny-engine-plugin-datasource'
 export { default as Robot } from '@opentiny/tiny-engine-plugin-robot'
-export { default as Props } from '@opentiny/tiny-engine-setting-props'
+export { default as Props, PropertiesService, PropertyService } from '@opentiny/tiny-engine-setting-props'
 export { default as Events } from '@opentiny/tiny-engine-setting-events'
 export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout } from '@opentiny/tiny-engine-layout'
@@ -38,18 +38,4 @@ export { default as defaultRegistry } from './registry'
 
 export * from '@opentiny/tiny-engine-entry'
 
-export {
-  EditorInfoService,
-  HelpService,
-  AppService,
-  BlockService,
-  DataSourceService,
-  PageService,
-  ResourceService,
-  PropertiesService,
-  PropertyService,
-  SaveLocalService,
-  TranslateService,
-  HistoryService,
-  BreadcrumbService,
-} from '@opentiny/tiny-engine-controller'
+export { EditorInfoService, AppService } from '@opentiny/tiny-engine-controller'
diff --git a/packages/engine-cli/template/designer/registry.js b/packages/engine-cli/template/designer/registry.js
index dc2ef6b0b..d4554db72 100644
--- a/packages/engine-cli/template/designer/registry.js
+++ b/packages/engine-cli/template/designer/registry.js
@@ -43,18 +43,7 @@ import {
   Layout,
   Canvas,
   EditorInfoService,
-  HelpService,
   AppService,
-  BlockService,
-  BreadcrumbService,
-  DataSourceService,
-  PageService,
-  ResourceService,
-  PropertiesService,
-  PropertyService,
-  SaveLocalService,
-  TranslateService,
-  HistoryService,
 } from '@opentiny/tiny-engine'
 
 export default {
@@ -62,18 +51,7 @@ export default {
     id: 'engine.root',
     metas: [
       EditorInfoService,
-      HelpService,
-      AppService,
-      BreadcrumbService,
-      BlockService,
-      DataSourceService,
-      PageService,
-      ResourceService,
-      PropertiesService,
-      PropertyService,
-      SaveLocalService,
-      TranslateService,
-      HistoryService,
+      AppService
     ]
   },
   config: {
diff --git a/packages/layout/index.js b/packages/layout/index.js
index d9909bc47..ef6f74f25 100644
--- a/packages/layout/index.js
+++ b/packages/layout/index.js
@@ -1,13 +1,11 @@
 import component from './src/Main.vue'
 import metaData from './meta'
-import useLayout from './src/hooks/useLayout'
-import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import { LayoutService } from './src/composable/'
 
 export default {
   ...metaData,
   component,
-  apis: useLayout(),
-  composable: {
-    name: HOOK_NAME.useLayout
-  }
+  metas: [LayoutService],
 }
+
+export { LayoutService }
diff --git a/packages/layout/src/composable/index.js b/packages/layout/src/composable/index.js
new file mode 100644
index 000000000..bc1b40218
--- /dev/null
+++ b/packages/layout/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useLayout from './useLayout'
+
+export const LayoutService = {
+  id: 'engine.service.layout',
+  type: 'MetaService',
+  apis: useLayout(),
+  composable: {
+    name: HOOK_NAME.useLayout
+  }
+}
diff --git a/packages/layout/src/hooks/useLayout.js b/packages/layout/src/composable/useLayout.js
similarity index 100%
rename from packages/layout/src/hooks/useLayout.js
rename to packages/layout/src/composable/useLayout.js
diff --git a/packages/plugins/block/index.js b/packages/plugins/block/index.js
index b10af68d0..0cc1ec24c 100644
--- a/packages/plugins/block/index.js
+++ b/packages/plugins/block/index.js
@@ -12,9 +12,13 @@
 
 import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
+import { BlockService } from './src/composable/'
 
 export default {
   ...metaData,
   api,
-  entry
+  entry,
+  metas: [BlockService]
 }
+
+export { BlockService }
diff --git a/packages/plugins/block/src/composable/index.js b/packages/plugins/block/src/composable/index.js
new file mode 100644
index 000000000..e83b49a5f
--- /dev/null
+++ b/packages/plugins/block/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useBlock from './useBlock'
+
+export const BlockService = {
+  id: 'engine.service.block',
+  type: 'MetaService',
+  apis: useBlock(),
+  composable: {
+    name: HOOK_NAME.useBlock
+  }
+}
diff --git a/packages/controller/src/hooks/useBlock.js b/packages/plugins/block/src/composable/useBlock.js
similarity index 98%
rename from packages/controller/src/hooks/useBlock.js
rename to packages/plugins/block/src/composable/useBlock.js
index ff5ae3895..af7714ec6 100644
--- a/packages/controller/src/hooks/useBlock.js
+++ b/packages/plugins/block/src/composable/useBlock.js
@@ -17,9 +17,9 @@ 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-entry'
-import { getCanvasStatus } from '../../js/canvas'
-import { ast2String, parseExpression } from '../../js/ast'
-import { getCssObjectFromStyleStr } from '../../js/css'
+import { getCanvasStatus } from '@opentiny/tiny-engine-controller/js/canvas'
+import { ast2String, parseExpression } from '@opentiny/tiny-engine-controller/js/ast'
+import { getCssObjectFromStyleStr } from '@opentiny/tiny-engine-controller/js/css'
 import {
   useCanvas,
   useTranslate,
diff --git a/packages/plugins/data/src/Main.vue b/packages/plugins/data/src/Main.vue
index f13d926f2..b93828364 100644
--- a/packages/plugins/data/src/Main.vue
+++ b/packages/plugins/data/src/Main.vue
@@ -75,10 +75,10 @@ import {
   useEditorInfo,
   useResource,
   useNotify,
-  useData,
   useLayout,
   useHelp
 } from '@opentiny/tiny-engine-controller'
+import { getCommentByKey } from '@opentiny/tiny-engine-controller/js/comment'
 import { iconSearch } from '@opentiny/vue-icon'
 import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
 import DataSourceList from './DataSourceList.vue'
@@ -266,7 +266,6 @@ export default {
 
       if (key.startsWith('datasource')) {
         const pageSchema = getSchema()
-        const { getCommentByKey } = useData()
         const { start, end } = getCommentByKey(key)
 
         /**
diff --git a/packages/plugins/datasource/index.js b/packages/plugins/datasource/index.js
index 695116d48..426c70f5e 100644
--- a/packages/plugins/datasource/index.js
+++ b/packages/plugins/datasource/index.js
@@ -13,10 +13,14 @@
 import { fetchDataSourceList, fetchDataSourceDetail } from './src/js/http'
 import entry from './src/Main.vue'
 import metaData from './meta.js'
+import { DataSourceService } from './src/composable/'
 
 export default {
   ...metaData,
-  entry
+  entry,
+  metas: [
+    DataSourceService
+  ]
 }
 
-export { fetchDataSourceList, fetchDataSourceDetail }
+export { fetchDataSourceList, fetchDataSourceDetail, DataSourceService }
diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
index 11028c634..775e6670d 100644
--- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue
+++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
@@ -48,7 +48,7 @@ import DataSrouceRemoteDataResult, { getResponseData } from './DataSourceRemoteD
 import { open as openRemoteMapping } from './DataSourceRemoteMapping.vue'
 import { useDataSource, useNotify } from '@opentiny/tiny-engine-controller'
 import { isEmptyObject } from '@opentiny/vue-renderless/common/type'
-import { obj2String, string2Obj } from '@opentiny/tiny-engine-controller/adapter'
+import { reactiveObj2String as obj2String, string2Obj } from '@opentiny/tiny-engine-controller/utils'
 import { getRequest } from './js/datasource'
 
 export const isOpen = ref(false)
diff --git a/packages/plugins/datasource/src/composable/index.js b/packages/plugins/datasource/src/composable/index.js
new file mode 100644
index 000000000..84eab631f
--- /dev/null
+++ b/packages/plugins/datasource/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useDataSource from './useDataSource'
+
+export const DataSourceService = {
+  id: 'engine.service.dataSource',
+  type: 'MetaService',
+  apis: useDataSource(),
+  composable: {
+    name: HOOK_NAME.useDataSource
+  }
+}
diff --git a/packages/controller/src/hooks/useDataSource.js b/packages/plugins/datasource/src/composable/useDataSource.js
similarity index 100%
rename from packages/controller/src/hooks/useDataSource.js
rename to packages/plugins/datasource/src/composable/useDataSource.js
diff --git a/packages/plugins/help/index.js b/packages/plugins/help/index.js
index e236a708b..1d000d648 100644
--- a/packages/plugins/help/index.js
+++ b/packages/plugins/help/index.js
@@ -11,7 +11,11 @@
  */
 
 import metaData from './meta.js'
+import { HelpService } from './src/composable/'
 
 export default {
-  ...metaData
+  ...metaData,
+  metas: [HelpService]
 }
+
+export { HelpService }
diff --git a/packages/plugins/help/src/composable/index.js b/packages/plugins/help/src/composable/index.js
new file mode 100644
index 000000000..cc55b02b1
--- /dev/null
+++ b/packages/plugins/help/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useHelp from './useHelp'
+
+export const HelpService = {
+  id: 'engine.service.help',
+  type: 'MetaService',
+  apis: useHelp(),
+  composable: {
+    name: HOOK_NAME.useHelp
+  }
+}
diff --git a/packages/controller/src/hooks/useHelp.js b/packages/plugins/help/src/composable/useHelp.js
similarity index 100%
rename from packages/controller/src/hooks/useHelp.js
rename to packages/plugins/help/src/composable/useHelp.js
diff --git a/packages/plugins/i18n/index.js b/packages/plugins/i18n/index.js
index 387fe5574..a17b8a1ab 100644
--- a/packages/plugins/i18n/index.js
+++ b/packages/plugins/i18n/index.js
@@ -11,8 +11,12 @@
  */
 import entry from './src/Main.vue'
 import metaData from './meta.js'
+import { TranslateService } from './src/composable/'
 
 export default {
   ...metaData,
-  entry
+  entry,
+  metas: [TranslateService]
 }
+
+export { TranslateService }
diff --git a/packages/plugins/i18n/src/composable/index.js b/packages/plugins/i18n/src/composable/index.js
new file mode 100644
index 000000000..d7c511e7c
--- /dev/null
+++ b/packages/plugins/i18n/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useTranslate from './useTranslate'
+
+export const TranslateService = {
+  id: 'engine.service.translate',
+  type: 'MetaService',
+  apis: useTranslate(),
+  composable: {
+    name: HOOK_NAME.useTranslate
+  }
+}
diff --git a/packages/controller/src/hooks/useTranslate.js b/packages/plugins/i18n/src/composable/useTranslate.js
similarity index 96%
rename from packages/controller/src/hooks/useTranslate.js
rename to packages/plugins/i18n/src/composable/useTranslate.js
index 83cdf256e..891fadd79 100644
--- a/packages/controller/src/hooks/useTranslate.js
+++ b/packages/plugins/i18n/src/composable/useTranslate.js
@@ -13,10 +13,10 @@
 import { reactive, ref } from 'vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { utils } from '@opentiny/tiny-engine-utils'
-import { isVsCodeEnv } from '../../js/environments'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { generateI18n } from '../../js/vscodeGenerateFile'
-import { PROP_DATA_TYPE } from '../../utils'
+import { generateI18n } from '@opentiny/tiny-engine-controller/js/vscodeGenerateFile'
+import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/utils'
 import { useResource, useCanvas } from '@opentiny/tiny-engine-entry'
 
 const { HOST_TYPE } = constants
diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js
index 357a65ee7..1381d904a 100644
--- a/packages/plugins/materials/index.js
+++ b/packages/plugins/materials/index.js
@@ -12,11 +12,13 @@
 
 import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
+import { ResourceService } from './src/composable/'
 
 export default {
   ...metaData,
   entry,
-  api
+  api,
+  metas: [ResourceService]
 }
 
-export { entry }
+export { entry, ResourceService }
diff --git a/packages/plugins/materials/src/composable/index.js b/packages/plugins/materials/src/composable/index.js
new file mode 100644
index 000000000..372d7e3b9
--- /dev/null
+++ b/packages/plugins/materials/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useResource from './useResource'
+
+export const ResourceService = {
+  id: 'engine.service.resource',
+  type: 'MetaService',
+  apis: useResource(),
+  composable: {
+    name: HOOK_NAME.useResource
+  }
+}
diff --git a/packages/controller/src/hooks/useResource.js b/packages/plugins/materials/src/composable/useResource.js
similarity index 99%
rename from packages/controller/src/hooks/useResource.js
rename to packages/plugins/materials/src/composable/useResource.js
index f9da6c660..f753c16b8 100644
--- a/packages/controller/src/hooks/useResource.js
+++ b/packages/plugins/materials/src/composable/useResource.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 { getCanvasStatus } from '../../js/canvas'
+import { getCanvasStatus } from '@opentiny/tiny-engine-controller/js/canvas'
 import {
   getMergeMeta,
   useNotify,
diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
index b10af68d0..0b8e2c094 100644
--- a/packages/plugins/page/index.js
+++ b/packages/plugins/page/index.js
@@ -12,9 +12,13 @@
 
 import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
+import { PageService } from './src/composable/'
 
 export default {
   ...metaData,
   api,
-  entry
+  entry,
+  metas: [PageService]
 }
+
+export { PageService }
diff --git a/packages/plugins/page/src/composable/index.js b/packages/plugins/page/src/composable/index.js
new file mode 100644
index 000000000..d60269cd8
--- /dev/null
+++ b/packages/plugins/page/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import usePage from './usePage'
+
+export const PageService = {
+  id: 'engine.service.page',
+  type: 'MetaService',
+  apis: usePage(),
+  composable: {
+    name: HOOK_NAME.usePage
+  }
+}
diff --git a/packages/controller/src/hooks/usePage.js b/packages/plugins/page/src/composable/usePage.js
similarity index 100%
rename from packages/controller/src/hooks/usePage.js
rename to packages/plugins/page/src/composable/usePage.js
diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index 170393a70..53b238c61 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -43,7 +43,8 @@ import { nextTick, reactive, getCurrentInstance, onActivated, ref } from 'vue'
 import { Popover } from '@opentiny/vue'
 import { VueMonaco, CloseIcon } from '@opentiny/tiny-engine-common'
 import { useCanvas, useModal, useHistory, useNotify } from '@opentiny/tiny-engine-controller'
-import { obj2String, string2Obj, theme } from '@opentiny/tiny-engine-controller/adapter'
+import { theme } from '@opentiny/tiny-engine-controller/adapter'
+import { reactiveObj2String as obj2String, string2Obj } from '@opentiny/tiny-engine-controller/utils'
 import { iconSave, iconDownloadLink } from '@opentiny/vue-icon'
 
 export default {
diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue
index fc55d2e65..cffd3886d 100644
--- a/packages/settings/events/src/components/AdvanceConfig.vue
+++ b/packages/settings/events/src/components/AdvanceConfig.vue
@@ -76,8 +76,7 @@ import { ref, computed, reactive, watch } from 'vue'
 import { MetaInput } from '@opentiny/tiny-engine-common'
 import { CodeConfigurator, SwitchConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 import { useProperties, useCanvas } from '@opentiny/tiny-engine-controller'
-import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/utils'
-import { string2Obj } from '@opentiny/tiny-engine-controller/adapter'
+import { PROP_DATA_TYPE, string2Obj } from '@opentiny/tiny-engine-controller/utils'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { Tooltip } from '@opentiny/vue'
 
diff --git a/packages/settings/props/index.js b/packages/settings/props/index.js
index f6a0ece21..a3924d1c4 100644
--- a/packages/settings/props/index.js
+++ b/packages/settings/props/index.js
@@ -11,16 +11,14 @@
  */
 
 import entry from './src/Main.vue'
-
 import Components from './src/components'
 import metaData from './meta'
+import { PropertyService, PropertiesService } from './src/composable/'
 
-import './src/hooks/useProperties'
-import './src/hooks/useProperty'
-
-export { Components }
+export { Components, PropertyService, PropertiesService }
 
 export default {
   ...metaData,
-  entry
+  entry,
+  metas: [PropertyService, PropertiesService]
 }
diff --git a/packages/settings/props/src/components/inputs/CodeEditor.vue b/packages/settings/props/src/components/inputs/CodeEditor.vue
index b495131c7..24e561588 100644
--- a/packages/settings/props/src/components/inputs/CodeEditor.vue
+++ b/packages/settings/props/src/components/inputs/CodeEditor.vue
@@ -37,7 +37,8 @@
 import { reactive, getCurrentInstance, h, ref, computed } from 'vue'
 import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { Button, Collapse, CollapseItem, DialogBox } from '@opentiny/vue'
-import { getExample, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
+import { useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
+import { getExample } from '@opentiny/tiny-engine-controller/js/example'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
 
 export default {
diff --git a/packages/settings/props/src/composable/index.js b/packages/settings/props/src/composable/index.js
new file mode 100644
index 000000000..ce6479ecc
--- /dev/null
+++ b/packages/settings/props/src/composable/index.js
@@ -0,0 +1,21 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useProperties from './useProperties'
+import useProperty from './useProperty'
+
+export const PropertiesService = {
+  id: 'engine.service.properties',
+  type: 'MetaService',
+  apis: useProperties(),
+  composable: {
+    name: HOOK_NAME.useProperties
+  }
+}
+
+export const PropertyService = {
+  id: 'engine.service.property',
+  type: 'MetaService',
+  apis: useProperty(),
+  composable: {
+    name: HOOK_NAME.useProperty
+  }
+}
diff --git a/packages/settings/props/src/hooks/useProperties.js b/packages/settings/props/src/composable/useProperties.js
similarity index 100%
rename from packages/settings/props/src/hooks/useProperties.js
rename to packages/settings/props/src/composable/useProperties.js
diff --git a/packages/settings/props/src/hooks/useProperty.js b/packages/settings/props/src/composable/useProperty.js
similarity index 100%
rename from packages/settings/props/src/hooks/useProperty.js
rename to packages/settings/props/src/composable/useProperty.js
diff --git a/packages/toolbars/generate-vue/index.js b/packages/toolbars/generate-vue/index.js
index c0e0c0687..f998c173a 100644
--- a/packages/toolbars/generate-vue/index.js
+++ b/packages/toolbars/generate-vue/index.js
@@ -12,8 +12,12 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import { SaveLocalService } from './src/composable/'
 
 export default {
   ...metaData,
-  entry
+  entry,
+  metas: [SaveLocalService]
 }
+
+export { SaveLocalService }
diff --git a/packages/toolbars/generate-vue/src/composable/index.js b/packages/toolbars/generate-vue/src/composable/index.js
new file mode 100644
index 000000000..b6b883f80
--- /dev/null
+++ b/packages/toolbars/generate-vue/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useSaveLocal from './useSaveLocal'
+
+export const SaveLocalService = {
+  id: 'engine.service.savelocal',
+  type: 'MetaService',
+  apis: useSaveLocal(),
+  composable: {
+    name: HOOK_NAME.useSaveLocal
+  }
+}
diff --git a/packages/toolbars/save/src/hooks/useSaveLocal.js b/packages/toolbars/generate-vue/src/composable/useSaveLocal.js
similarity index 100%
rename from packages/toolbars/save/src/hooks/useSaveLocal.js
rename to packages/toolbars/generate-vue/src/composable/useSaveLocal.js
diff --git a/packages/toolbars/redoundo/index.js b/packages/toolbars/redoundo/index.js
index c0e0c0687..2fbc6cc06 100644
--- a/packages/toolbars/redoundo/index.js
+++ b/packages/toolbars/redoundo/index.js
@@ -12,8 +12,12 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import { HistoryService } from './src/composable/'
 
 export default {
   ...metaData,
-  entry
+  entry,
+  metas: [HistoryService]
 }
+
+export { HistoryService }
diff --git a/packages/toolbars/redoundo/src/composable/index.js b/packages/toolbars/redoundo/src/composable/index.js
new file mode 100644
index 000000000..d11210f18
--- /dev/null
+++ b/packages/toolbars/redoundo/src/composable/index.js
@@ -0,0 +1,11 @@
+import { HOOK_NAME } from '@opentiny/tiny-engine-entry'
+import useHistory from './useHistory'
+
+export const HistoryService = {
+  id: 'engine.service.history',
+  type: 'MetaService',
+  apis: useHistory(),
+  composable: {
+    name: HOOK_NAME.useHistory
+  }
+}
diff --git a/packages/controller/src/hooks/useHistory.js b/packages/toolbars/redoundo/src/composable/useHistory.js
similarity index 100%
rename from packages/controller/src/hooks/useHistory.js
rename to packages/toolbars/redoundo/src/composable/useHistory.js
diff --git a/packages/toolbars/save/index.js b/packages/toolbars/save/index.js
index 16bc5dada..23f16fd54 100644
--- a/packages/toolbars/save/index.js
+++ b/packages/toolbars/save/index.js
@@ -12,7 +12,6 @@
 
 import entry, { api } from './src/Main.vue'
 import metaData from './meta'
-import './src/hooks/useSaveLocal'
 
 export default {
   ...metaData,