diff --git a/packages/canvas/package.json b/packages/canvas/package.json
index 95dfa7903..5a0a160b9 100644
--- a/packages/canvas/package.json
+++ b/packages/canvas/package.json
@@ -28,7 +28,6 @@
   "dependencies": {
     "@babel/core": "7.18.13",
     "@opentiny/tiny-engine-builtin-component": "workspace:*",
-    "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
     "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
diff --git a/packages/canvas/src/components/container/CanvasContainer.vue b/packages/canvas/src/components/container/CanvasContainer.vue
index 46d290b81..c4b04298b 100644
--- a/packages/canvas/src/components/container/CanvasContainer.vue
+++ b/packages/canvas/src/components/container/CanvasContainer.vue
@@ -29,7 +29,7 @@
 
 <script>
 import { onMounted, ref, computed, onUnmounted } from 'vue'
-import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
+import { iframeMonitoring } from '@opentiny/tiny-engine-controller/js/monitor'
 import { useTranslate, useCanvas, useResource } from '@opentiny/tiny-engine-controller'
 import CanvasAction from './CanvasAction.vue'
 import CanvasResize from './CanvasResize.vue'
@@ -119,6 +119,7 @@ export default {
         iframeMonitoring()
 
         initCanvas({ emit, renderer: detail, iframe: iframe.value, controller: props.controller })
+        useCanvas().renderer = detail
 
         const doc = iframe.value.contentDocument
         const win = iframe.value.contentWindow
diff --git a/packages/canvas/src/components/container/CanvasMenu.vue b/packages/canvas/src/components/container/CanvasMenu.vue
index b85b0c03a..d7392ec70 100644
--- a/packages/canvas/src/components/container/CanvasMenu.vue
+++ b/packages/canvas/src/components/container/CanvasMenu.vue
@@ -27,7 +27,7 @@
         </ul>
       </li>
     </ul>
-    <save-new-block :boxVisibility="boxVisibility" fromCanvas @close="close"></save-new-block>
+    <SaveNewBlock :boxVisibility="boxVisibility" fromCanvas @close="close"></SaveNewBlock>
   </div>
 </template>
 
@@ -35,7 +35,6 @@
 import { ref, reactive, nextTick } from 'vue'
 import { getConfigure, getController, getCurrent, copyNode, removeNodeById } from './container'
 import { useLayout, useModal, useCanvas } from '@opentiny/tiny-engine-controller'
-import { SaveNewBlock } from '@opentiny/tiny-engine-common'
 import { iconRight } from '@opentiny/vue-icon'
 
 const menuState = reactive({
@@ -74,7 +73,6 @@ export const openMenu = (offset, event) => {
 
 export default {
   components: {
-    SaveNewBlock,
     IconRight: iconRight()
   },
   setup(props, { emit }) {
diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index a2d43fe24..581282576 100644
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@@ -28,7 +28,7 @@ export const POSITION = Object.freeze({
   IN: 'in',
   FORBID: 'forbid'
 })
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 
 const initialDragState = {
   keydown: false,
diff --git a/packages/canvas/src/components/container/shortCutPopover.vue b/packages/canvas/src/components/container/shortCutPopover.vue
index 1bfda8c18..592f13b14 100644
--- a/packages/canvas/src/components/container/shortCutPopover.vue
+++ b/packages/canvas/src/components/container/shortCutPopover.vue
@@ -7,9 +7,9 @@
         <icon-close class="icon-close" @click="closePanel"></icon-close>
       </span>
     </div>
-    <config-group :group="propertiesList" :index="0">
+    <ConfigGroup :group="propertiesList" :index="0">
       <template #item="{ data, propIndex }">
-        <config-item
+        <ConfigItem
           :key="propIndex"
           :property="data"
           :data-prop-index="propIndex"
@@ -22,22 +22,19 @@
           <template v-if="!data.noBinding" #suffix>
             <slot name="suffix" :data="data"></slot>
           </template>
-        </config-item>
+        </ConfigItem>
       </template>
-    </config-group>
+    </ConfigGroup>
   </div>
 </template>
 
 <script>
 import { computed, ref } from 'vue'
 import { useResource, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-controller'
-import { ConfigGroup, ConfigItem } from '@opentiny/tiny-engine-common'
 import { iconSetting, iconClose } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    ConfigGroup,
-    ConfigItem,
     IconSetting: iconSetting(),
     IconClose: iconClose()
   },
diff --git a/packages/canvas/src/components/render/RenderMain.js b/packages/canvas/src/components/render/RenderMain.js
index 922b354b8..5ecf9f1e3 100644
--- a/packages/canvas/src/components/render/RenderMain.js
+++ b/packages/canvas/src/components/render/RenderMain.js
@@ -18,6 +18,8 @@ import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
 import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render'
 import { getNode as getNodeById, clearNodes, getRoot, setContext, getContext, setCondition, context } from './context'
 import CanvasEmpty from './CanvasEmpty.vue'
+import { getCurrent, setLocales, updateRect, addStyle, addScript, canvasDispatch } from '../container/container'
+import Builtin from '../builtin/builtin.json'
 
 const { BROADCAST_CHANNEL } = constants
 
@@ -422,7 +424,15 @@ export const api = {
   getGlobalState,
   getDataSourceMap,
   setDataSourceMap,
-  setGlobalState
+  setGlobalState,
+  getCurrent, 
+  setLocales,
+  getNodeById: getNode,
+  updateRect,
+  addStyle, 
+  addScript, 
+  canvasDispatch
 }
 
 window.api = api
+window.Builtin = Builtin
\ No newline at end of file
diff --git a/packages/canvas/src/components/render/runner.js b/packages/canvas/src/components/render/runner.js
index bb64a226b..bf70d32ff 100644
--- a/packages/canvas/src/components/render/runner.js
+++ b/packages/canvas/src/components/render/runner.js
@@ -13,7 +13,7 @@
 import * as Vue from 'vue'
 import * as VueI18n from 'vue-i18n'
 import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../common'
-import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
+import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-controller/js/i18n'
 import * as TinyWebcomponentCore from '@opentiny/tiny-engine-webcomponent-core'
 import TinyVue from '@opentiny/vue'
 import * as TinyVueIcon from '@opentiny/vue-icon'
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 7e3c0df74..c0fd195e7 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -103,14 +103,14 @@ import { inject, computed, watch, ref, reactive, provide } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
 import { IconWriting, IconHelpCircle, IconPlusCircle } from '@opentiny/vue-icon'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { MetaComponents } from '../index'
 import MetaBindVariable from './MetaBindVariable.vue'
 import MetaCodeEditor from './MetaCodeEditor.vue'
 import MultiTypeSelector from './MultiTypeSelector.vue'
 import { useHistory, useProperties, useResource, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
 import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
-import { SCHEMA_DATA_TYPE, PAGE_STATUS, TYPES } from '../js/constants'
+import { SCHEMA_DATA_TYPE, PAGE_STATUS, TYPES } from '@opentiny/tiny-engine-controller/js/constants'
 
 const hasRule = (required, rules) => {
   if (required) {
diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
index 840fc2a07..a608d0a81 100644
--- a/packages/common/component/LifeCycles.vue
+++ b/packages/common/component/LifeCycles.vue
@@ -84,8 +84,8 @@ import { getSchema } from '@opentiny/tiny-engine-canvas'
 import MetaListItems from './MetaListItems.vue'
 import { iconYes } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
-import { initCompletion } from '../js/completion'
-import { initLinter, lint } from '../js/linter'
+import { initCompletion } from '@opentiny/tiny-engine-controller/js/completion'
+import { initLinter, lint } from '@opentiny/tiny-engine-controller/js/linter'
 import { SvgButton } from '../index'
 
 export default {
diff --git a/packages/common/component/MetaBindVariable.vue b/packages/common/component/MetaBindVariable.vue
index e8b53ac77..624ccd360 100644
--- a/packages/common/component/MetaBindVariable.vue
+++ b/packages/common/component/MetaBindVariable.vue
@@ -128,10 +128,10 @@ import { useCanvas, useResource, useLayout, useApp, useProperties, useData } fro
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
 import { constants } from '@opentiny/tiny-engine-utils'
 import SvgButton from './SvgButton.vue'
-import { parse, traverse, generate } from '../js/ast'
-import { DEFAULT_LOOP_NAME } from '../js/constants.js'
+import { parse, traverse, generate } from '@opentiny/tiny-engine-controller/js/ast'
+import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-controller/js/constants'
 import MonacoEditor from './VueMonaco.vue'
-import { formatString } from '../js/ast.js'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 
 const { EXPRESSION_TYPE } = constants
 
diff --git a/packages/common/component/MetaButtonGroup.vue b/packages/common/component/MetaButtonGroup.vue
index 7a70ea52a..ca4dfa1a7 100644
--- a/packages/common/component/MetaButtonGroup.vue
+++ b/packages/common/component/MetaButtonGroup.vue
@@ -11,7 +11,7 @@
 <script>
 import { ref, watchEffect } from 'vue'
 import { ButtonGroup } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   name: 'MetaButtonGroup',
diff --git a/packages/common/component/MetaCascader.vue b/packages/common/component/MetaCascader.vue
index 0c931a8f0..519f859fb 100644
--- a/packages/common/component/MetaCascader.vue
+++ b/packages/common/component/MetaCascader.vue
@@ -16,7 +16,7 @@
 <script>
 import { ref, watchEffect } from 'vue'
 import { Cascader } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   name: 'MetaCascader',
diff --git a/packages/common/component/MetaCheckboxGroup.vue b/packages/common/component/MetaCheckboxGroup.vue
index 692eab289..7d3c3bd17 100644
--- a/packages/common/component/MetaCheckboxGroup.vue
+++ b/packages/common/component/MetaCheckboxGroup.vue
@@ -10,7 +10,7 @@
 <script>
 import { ref, watchEffect, computed } from 'vue'
 import { CheckboxGroup } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   name: 'MetaCheckboxGroup',
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index b92959193..85b2a2c3b 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -70,8 +70,8 @@ import { reactive, ref, computed, watchEffect, nextTick } from 'vue'
 import { Button, DialogBox } from '@opentiny/vue'
 import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
-import i18n from '../js/i18n'
-import { formatString } from '../js/ast.js'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 
 export default {
   components: {
diff --git a/packages/common/component/MetaJsSlot.vue b/packages/common/component/MetaJsSlot.vue
index 579fe2a46..87af9ae50 100644
--- a/packages/common/component/MetaJsSlot.vue
+++ b/packages/common/component/MetaJsSlot.vue
@@ -37,7 +37,7 @@ import { ref, inject, watchEffect, reactive } from 'vue'
 import { Input, Tooltip, Form, FormItem } from '@opentiny/vue'
 import { useProperties, useCanvas, useModal } from '@opentiny/tiny-engine-controller'
 import SvgICons from '@opentiny/vue-icon'
-import { verifyJsVarName } from '../js/verification'
+import { verifyJsVarName } from '@opentiny/tiny-engine-controller/js/verification'
 
 export default {
   components: {
diff --git a/packages/common/component/MetaRadioGroup.vue b/packages/common/component/MetaRadioGroup.vue
index 4f00b7385..8655c71cf 100644
--- a/packages/common/component/MetaRadioGroup.vue
+++ b/packages/common/component/MetaRadioGroup.vue
@@ -21,7 +21,7 @@
 <script>
 import { ref, watchEffect, computed } from 'vue'
 import { RadioGroup, RadioButton } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   name: 'MetaRadioGroup',
diff --git a/packages/common/component/MetaSelect.vue b/packages/common/component/MetaSelect.vue
index 2b7e1fdd3..d9a59b8f9 100644
--- a/packages/common/component/MetaSelect.vue
+++ b/packages/common/component/MetaSelect.vue
@@ -45,7 +45,7 @@
 <script>
 import { computed, reactive, watchEffect } from 'vue'
 import { Select, Option, OptionGroup, Tooltip } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   components: {
diff --git a/packages/common/component/SaveNewBlock.vue b/packages/common/component/SaveNewBlock.vue
index 2a2c1b087..3ca22e1aa 100644
--- a/packages/common/component/SaveNewBlock.vue
+++ b/packages/common/component/SaveNewBlock.vue
@@ -37,7 +37,7 @@
 import { reactive, computed, ref } from 'vue'
 import { Input, Form, FormItem, Button, DialogBox, Select } from '@opentiny/vue'
 import { useBlock, useLayout, useCanvas, useModal } from '@opentiny/tiny-engine-controller'
-import { REGEXP_BLOCK_NAME } from '../js/verification'
+import { REGEXP_BLOCK_NAME } from '@opentiny/tiny-engine-controller/js/verification'
 
 export default {
   components: {
diff --git a/packages/common/component/VueMonaco.vue b/packages/common/component/VueMonaco.vue
index 28eba766f..d10244942 100644
--- a/packages/common/component/VueMonaco.vue
+++ b/packages/common/component/VueMonaco.vue
@@ -4,7 +4,7 @@
 <script>
 import * as monacoEditor from 'monaco-editor'
 import { watch, onMounted, nextTick, onBeforeUnmount, ref } from 'vue'
-import { formatString } from '../js/ast.js'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 
 export default {
   name: 'MonacoEditor',
diff --git a/packages/common/index.js b/packages/common/index.js
index eae061faa..cab3818fe 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -80,7 +80,7 @@ import ProgressBar from './component/ProgressBar.vue'
 import MetaButtonGroup from './component/MetaButtonGroup.vue'
 import MetaTableColumns from './component/MetaTableColumns.vue'
 
-import i18n, { i18nKeyMaps } from './js/i18n.js'
+import i18n, { i18nKeyMaps } from '@opentiny/tiny-engine-controller/js/i18n'
 
 import enUs from './i18n/en-us.json'
 import zhCn from './i18n/zh-cn.json'
@@ -90,6 +90,20 @@ const { mergeLocaleMessage } = i18n.global
 mergeLocaleMessage(i18nKeyMaps.enUS, enUs)
 mergeLocaleMessage(i18nKeyMaps.zhCN, zhCn)
 
+const globalComponents = {
+  SaveNewBlock,
+  ConfigGroup,
+  ConfigItem
+}
+
+export const injectGlobalComponents = {
+  install: (app) => {
+    Object.entries(globalComponents).forEach(([name, component]) => {
+      app.component(name, component)
+    })
+  }
+}
+
 export const MetaComponents = {
   MetaArrayItem,
   MetaBindI18n,
diff --git a/packages/common/package.json b/packages/common/package.json
index 23d2f5c48..124562e14 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -10,12 +10,10 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
-    ".": "./dist/index.js",
-    "./js/*": "./js/*.js"
+    ".": "./dist/index.js"
   },
   "files": [
-    "dist",
-    "js"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -29,20 +27,14 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@babel/generator": "7.18.13",
-    "@babel/parser": "7.18.13",
-    "@babel/traverse": "7.18.13",
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
-    "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/vue": "~3.10.0",
     "@opentiny/vue-icon": "~3.10.0",
-    "@opentiny/vue-locale": "~3.10.0",
     "@opentiny/vue-renderless": "~3.10.0",
     "@vue/shared": "^3.3.4",
-    "css-tree": "^2.3.1",
     "monaco-editor": "0.33.0",
     "prettier": "2.7.1",
     "vue-draggable-next": "2.1.0"
@@ -53,7 +45,6 @@
     "vite": "^4.3.7"
   },
   "peerDependencies": {
-    "vue": "^3.4.15",
-    "vue-i18n": "^9.9.0"
+    "vue": "^3.4.15"
   }
 }
diff --git a/packages/common/js/app.js b/packages/controller/js/app.js
similarity index 100%
rename from packages/common/js/app.js
rename to packages/controller/js/app.js
diff --git a/packages/common/js/ast.js b/packages/controller/js/ast.js
similarity index 100%
rename from packages/common/js/ast.js
rename to packages/controller/js/ast.js
diff --git a/packages/common/js/index.js b/packages/controller/js/canvas.js
similarity index 91%
rename from packages/common/js/index.js
rename to packages/controller/js/canvas.js
index 67cc0ad7b..c73f81c94 100644
--- a/packages/common/js/index.js
+++ b/packages/controller/js/canvas.js
@@ -11,7 +11,8 @@
  */
 
 import { PAGE_STATUS } from './constants'
-import { useEditorInfo, useResource } from '@opentiny/tiny-engine-controller'
+import useEditorInfo from '../src/useEditorInfo'
+import useResource from '../src/useResource'
 
 export const getCanvasStatus = (data) => {
   // 写死ID 待删除
diff --git a/packages/common/js/completion.js b/packages/controller/js/completion.js
similarity index 98%
rename from packages/common/js/completion.js
rename to packages/controller/js/completion.js
index 3705232a9..ddd113870 100644
--- a/packages/common/js/completion.js
+++ b/packages/controller/js/completion.js
@@ -10,7 +10,8 @@
  *
  */
 
-import { useCanvas, useResource } from '@opentiny/tiny-engine-controller'
+import useCanvas from '../src/useCanvas'
+import useResource from '../src/useResource'
 
 const keyWords = [
   'state',
diff --git a/packages/common/js/constants.js b/packages/controller/js/constants.js
similarity index 100%
rename from packages/common/js/constants.js
rename to packages/controller/js/constants.js
diff --git a/packages/common/js/css.js b/packages/controller/js/css.js
similarity index 96%
rename from packages/common/js/css.js
rename to packages/controller/js/css.js
index 689e6893f..e00ea3b00 100644
--- a/packages/common/js/css.js
+++ b/packages/controller/js/css.js
@@ -11,7 +11,7 @@
  */
 
 import * as cssTree from 'css-tree'
-import { hyphenate } from '@opentiny/tiny-engine-controller/utils'
+import { hyphenate } from '../utils'
 
 /**
  * 传入 css 字符串，得到以选择器为 Key，css 规则为 value 的 object
diff --git a/packages/common/js/environments.js b/packages/controller/js/environments.js
similarity index 100%
rename from packages/common/js/environments.js
rename to packages/controller/js/environments.js
diff --git a/packages/common/js/http.js b/packages/controller/js/http.js
similarity index 94%
rename from packages/common/js/http.js
rename to packages/controller/js/http.js
index 66e0d4b8a..cef979b3b 100644
--- a/packages/common/js/http.js
+++ b/packages/controller/js/http.js
@@ -11,7 +11,9 @@
  */
 
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { usePage, useCanvas, useNotify } from '@opentiny/tiny-engine-controller'
+import usePage from '../src/usePage'
+import useCanvas from '../src/useCanvas'
+import useNotify from '../src/useNotify'
 import { isVsCodeEnv } from './environments'
 import { generateRouter, generatePage } from './vscodeGenerateFile'
 
diff --git a/packages/common/js/i18n.js b/packages/controller/js/i18n.js
similarity index 100%
rename from packages/common/js/i18n.js
rename to packages/controller/js/i18n.js
diff --git a/packages/common/js/linter.js b/packages/controller/js/linter.js
similarity index 100%
rename from packages/common/js/linter.js
rename to packages/controller/js/linter.js
diff --git a/packages/common/js/monitor.js b/packages/controller/js/monitor.js
similarity index 100%
rename from packages/common/js/monitor.js
rename to packages/controller/js/monitor.js
diff --git a/packages/common/js/preview.js b/packages/controller/js/preview.js
similarity index 96%
rename from packages/common/js/preview.js
rename to packages/controller/js/preview.js
index 08d52273a..12840569f 100644
--- a/packages/common/js/preview.js
+++ b/packages/controller/js/preview.js
@@ -12,7 +12,7 @@
 
 import { constants } from '@opentiny/tiny-engine-utils'
 import { isDevelopEnv } from './environments'
-import { useResource } from '@opentiny/tiny-engine-controller'
+import useResource from '../src/useResource'
 // prefer old unicode hacks for backward compatibility
 
 const { COMPONENT_NAME } = constants
diff --git a/packages/common/js/verification.js b/packages/controller/js/verification.js
similarity index 100%
rename from packages/common/js/verification.js
rename to packages/controller/js/verification.js
diff --git a/packages/common/js/vscodeGenerateFile.js b/packages/controller/js/vscodeGenerateFile.js
similarity index 100%
rename from packages/common/js/vscodeGenerateFile.js
rename to packages/controller/js/vscodeGenerateFile.js
diff --git a/packages/controller/package.json b/packages/controller/package.json
index 7855f3b16..2cb9f6221 100644
--- a/packages/controller/package.json
+++ b/packages/controller/package.json
@@ -10,10 +10,12 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "js"
   ],
   "exports": {
     ".": "./dist/index.js",
+    "./js/": "./js/",
     "./utils": "./dist/utils.js",
     "./adapter": "./dist/adapter.js"
   },
@@ -29,14 +31,19 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
+    "@babel/generator": "7.18.13",
+    "@babel/parser": "7.18.13",
+    "@babel/traverse": "7.18.13",
     "@opentiny/tiny-engine-builtin-component": "workspace:*",
-    "@opentiny/tiny-engine-canvas": "workspace:*",
-    "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
+    "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/vue": "~3.10.0",
+    "@opentiny/vue-locale": "~3.10.0",
     "@opentiny/vue-renderless": "~3.10.0",
-    "@vue/shared": "^3.3.4"
+    "@vue/shared": "^3.3.4",
+    "css-tree": "^2.3.1",
+    "prettier": "2.7.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
@@ -44,6 +51,7 @@
     "vite": "^4.3.7"
   },
   "peerDependencies": {
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "vue-i18n": "^9.9.0"
   }
 }
diff --git a/packages/controller/src/useBlock.js b/packages/controller/src/useBlock.js
index 339b8b42c..0aaaf71bb 100644
--- a/packages/controller/src/useBlock.js
+++ b/packages/controller/src/useBlock.js
@@ -15,17 +15,16 @@ import { hyphenate } from '@vue/shared'
 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 { getCanvasStatus } from '@opentiny/tiny-engine-common/js/index'
-import { ast2String, parseExpression } from '@opentiny/tiny-engine-common/js/ast'
-import { getCssObjectFromStyleStr } from '@opentiny/tiny-engine-common/js/css'
 import { constants } from '@opentiny/tiny-engine-utils'
+import { getCanvasStatus } from '../js/canvas'
+import { ast2String, parseExpression } from '../js/ast'
+import { getCssObjectFromStyleStr } from '../js/css'
 import useCanvas from './useCanvas'
 import useTranslate from './useTranslate'
 import useEditorInfo from './useEditorInfo'
 import useBreadcrumb from './useBreadcrumb'
 import useLayout from './useLayout'
 import { getGlobalConfig } from './globalConfig'
-import { getSchema, getCurrent } from '@opentiny/tiny-engine-canvas'
 
 const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants
 
@@ -279,7 +278,7 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => {
   // 把区块的schema传递给画布
   await resetBlockCanvasState({ pageSchema: getBlockPageSchema(block) })
   // 这一步操作很重要，让区块管理面板和画布共同维护同一份区块schema
-  block.content = getSchema()
+  block.content = useCanvas().renderer.value?.getSchema()
 
   setCurrentBlock(block)
   setBreadcrumbBlock([block[nameCn] || block.label], block.histories)
@@ -362,7 +361,7 @@ const createEmptyBlock = ({ name_cn, label, path, categories }) => {
 }
 
 const setComponentLinkedValue = ({ propertyName, value }) => {
-  const { schema } = getCurrent()
+  const { schema } = useCanvas().renderer.value?.getCurrent() || {}
 
   if (!propertyName || !schema) {
     return
diff --git a/packages/controller/src/useCanvas.js b/packages/controller/src/useCanvas.js
index 0372fcbd8..c97b65f29 100644
--- a/packages/controller/src/useCanvas.js
+++ b/packages/controller/src/useCanvas.js
@@ -11,8 +11,7 @@
  */
 
 /* eslint-disable no-new-func */
-import { reactive } from 'vue'
-import { setSchema, renderApi } from '@opentiny/tiny-engine-canvas'
+import { reactive, ref } from 'vue'
 import { constants } from '@opentiny/tiny-engine-utils'
 import useHistory from './useHistory'
 
@@ -52,12 +51,14 @@ const defaultSchema = {
   outputs: []
 }
 
+const renderer = ref(null)
+
 const pageState = reactive({ ...defaultPageState, loading: true })
 // 重置画布数据
 const resetCanvasState = async (state = {}) => {
   Object.assign(pageState, defaultPageState, state)
 
-  await setSchema(pageState.pageSchema)
+  await renderer.value?.setSchema(pageState.pageSchema)
 }
 
 // 页面重置画布数据
@@ -141,6 +142,7 @@ const getCurrentPage = () => pageState.currentPage
 export default function () {
   return {
     pageState,
+    renderer,
     isBlock,
     isSaved,
     isLoading,
@@ -151,8 +153,8 @@ export default function () {
     resetPageCanvasState,
     resetBlockCanvasState,
     clearCurrentState,
-    getDataSourceMap: renderApi.getDataSourceMap,
-    setDataSourceMap: renderApi.setDataSourceMap,
+    getDataSourceMap: renderer.value?.getDataSourceMap,
+    setDataSourceMap: renderer.value?.setDataSourceMap,
     getCurrentSchema,
     setCurrentSchema,
     getCurrentPage
diff --git a/packages/controller/src/useHistory.js b/packages/controller/src/useHistory.js
index 8d9a5dcce..943dd92c2 100644
--- a/packages/controller/src/useHistory.js
+++ b/packages/controller/src/useHistory.js
@@ -12,7 +12,6 @@
 
 import { reactive, isProxy, toRaw, watch } from 'vue'
 import useCanvas from './useCanvas'
-import { setSchema, getSchema } from '@opentiny/tiny-engine-canvas'
 
 const schema2String = (schema) => {
   if (isProxy(schema)) {
@@ -62,7 +61,7 @@ const push = (schema) => {
 
 const go = (addend, valid) => {
   historyState.index = historyState.index + addend
-  setSchema(string2Schema(list[historyState.index]))
+  useCanvas().renderer.value?.setSchema(string2Schema(list[historyState.index]))
 
   // 不是锁定状态，撤销操作后，传递第二个标识位，将 list 的长度减一，置灰 undoredo 操作按钮
   if (typeof valid === 'boolean') {
@@ -84,10 +83,19 @@ const forward = () => {
   }
 }
 
+const clear = () => {
+  list.splice(0)
+  Object.assign(historyState, {
+    index: 0,
+    back: false,
+    forward: false
+  })
+}
+
 const addHistory = (schema) => {
   if (!schema) {
     useCanvas().setSaved(false)
-    push(getSchema())
+    push(useCanvas().renderer.value?.getSchema())
   } else {
     clear()
     // 初始 schema 需要设置为第一条历史记录
@@ -95,15 +103,6 @@ const addHistory = (schema) => {
   }
 }
 
-const clear = () => {
-  list.splice(0)
-  Object.assign(historyState, {
-    index: 0,
-    back: false,
-    forward: false
-  })
-}
-
 // 监控下标，判断是否允许前进后退标志
 watch(
   () => historyState.index,
diff --git a/packages/controller/src/useProperties.js b/packages/controller/src/useProperties.js
index 513a079aa..8c0a91caf 100644
--- a/packages/controller/src/useProperties.js
+++ b/packages/controller/src/useProperties.js
@@ -11,7 +11,6 @@
  */
 
 import { toRaw, nextTick, shallowReactive, ref } from 'vue'
-import { getNode, setState, updateRect } from '@opentiny/tiny-engine-canvas'
 import { constants } from '@opentiny/tiny-engine-utils'
 import useCanvas from './useCanvas'
 import useResource from './useResource'
@@ -192,6 +191,7 @@ const setProp = (name, value, type) => {
   }
 
   // 没有父级，或者不在节点上面，要更新内容。就用setState
+  const { getNode, setState, updateRect } = useCanvas().renderer.value || {}
   getNode(properties.schema.id, true)?.parent || setState(useCanvas().getPageSchema().state)
   propsUpdateKey.value++
 
diff --git a/packages/controller/src/useResource.js b/packages/controller/src/useResource.js
index cce041c57..e8e462ad9 100644
--- a/packages/controller/src/useResource.js
+++ b/packages/controller/src/useResource.js
@@ -14,9 +14,8 @@ import { reactive } from 'vue'
 import { getGlobalConfig } from './globalConfig'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { utils, constants } from '@opentiny/tiny-engine-utils'
-import { Builtin, addScript, addStyle, canvasDispatch } from '@opentiny/tiny-engine-canvas'
-import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/index'
 import { meta as BuiltinComponentMaterials } from '@opentiny/tiny-engine-builtin-component'
+import { getCanvasStatus } from '../js/canvas'
 import useApp from './useApp'
 import useCanvas from './useCanvas'
 import useTranslate from './useTranslate'
@@ -138,6 +137,7 @@ const registerBlock = async (data, notFetchResouce) => {
     return block
   } else {
     if (!blockResource.get(label)) {
+      const { addScript, addStyle } = useCanvas().renderer.value
       const promises = scripts
         .filter((item) => item.includes('umd.js'))
         .map(addScript)
@@ -372,6 +372,7 @@ const fetchResource = async ({ isInit = true } = {}) => {
   const { id, type } = useEditorInfo().useInfo()
   useApp().appInfoState.selectedId = id
 
+  const Builtin = window.Builtin
   Builtin.data.materials.components[0].children.map(registerComponent)
   BuiltinComponentMaterials.components[0].children.map(registerComponent)
 
@@ -451,7 +452,7 @@ const updateCanvasDependencies = (blocks) => {
     getBlockDeps(block.content.dependencies)
   })
 
-  canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
+  useCanvas().renderer.value?.canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
 }
 
 export default function () {
diff --git a/packages/controller/src/useSaveLocal.js b/packages/controller/src/useSaveLocal.js
index fdd88c8c9..7bbc5fbb0 100644
--- a/packages/controller/src/useSaveLocal.js
+++ b/packages/controller/src/useSaveLocal.js
@@ -11,7 +11,7 @@
  */
 
 import { Modal } from '@opentiny/vue'
-import { VITE_ORIGIN } from '@opentiny/tiny-engine-common/js/environments'
+import { VITE_ORIGIN } from '../js/environments'
 import useCanvas from './useCanvas'
 import { getGlobalConfig } from './globalConfig'
 
diff --git a/packages/controller/src/useTranslate.js b/packages/controller/src/useTranslate.js
index 7d7d2c16d..3df0e9442 100644
--- a/packages/controller/src/useTranslate.js
+++ b/packages/controller/src/useTranslate.js
@@ -13,12 +13,12 @@
 import { reactive, ref } from 'vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { utils } from '@opentiny/tiny-engine-utils'
-import { setLocales } from '@opentiny/tiny-engine-canvas'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isVsCodeEnv } from '../js/environments'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { generateI18n } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
+import { generateI18n } from '../js/vscodeGenerateFile'
 import useResource from './useResource'
 import { PROP_DATA_TYPE } from '../utils'
+import useCanvas from './useCanvas'
 
 const { HOST_TYPE } = constants
 const state = reactive({
@@ -101,7 +101,7 @@ const ensureI18n = (obj, send) => {
       }
     })
 
-    setLocales(messages, true)
+    useCanvas().renderer.value?.setLocales(messages, true)
   } catch (e) {
     // 不需要处理，有报错的词条会在画布初始化的时候统一调setLocales这个方法
   }
@@ -171,7 +171,7 @@ const initAppI18n = async (appId) => {
       host: appId,
       hostType: HOST_TYPE.App
     })
-    setLocales(i18nResource.messages)
+    useCanvas().renderer.value?.setLocales(i18nResource.messages)
   }
 }
 
@@ -181,7 +181,7 @@ const initBlockI18n = async (blockId) => {
       host: blockId,
       hostType: HOST_TYPE.Block
     })
-    setLocales(i18nResource.messages)
+    useCanvas().renderer.value?.setLocales(i18nResource.messages)
   }
 }
 
@@ -192,7 +192,7 @@ const initBlockLocalI18n = async (langs = {}) => {
     hostType: HOST_TYPE.Block,
     local: true
   })
-  setLocales(i18nResource.messages)
+  useCanvas().renderer.value?.setLocales(i18nResource.messages)
 }
 
 const format = (str = '', params = {}) => str.replace(/\$\{(.+?)\}/g, (substr, key) => params[key] || '')
diff --git a/packages/controller/vite.config.js b/packages/controller/vite.config.js
index 35120f758..bd77aefff 100644
--- a/packages/controller/vite.config.js
+++ b/packages/controller/vite.config.js
@@ -20,6 +20,9 @@ export default defineConfig({
   plugins: [vue(), vueJsx()],
   publicDir: false,
   resolve: {},
+  define: {
+    'process.env': {}
+  },
   build: {
     cssCodeSplit: false,
     lib: {
@@ -33,7 +36,7 @@ export default defineConfig({
       formats: ['es']
     },
     rollupOptions: {
-      external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/]
+      external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/, /^prettier.*/]
     }
   }
 })
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index 30f33ac94..e8c169a28 100644
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@@ -23,7 +23,7 @@ import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
 import designSmbConfig from '@opentiny/vue-design-smb'
 import { useResource, useLayout, useEditorInfo, useModal, useApp, useNotify } from '@opentiny/tiny-engine-controller'
 import AppManage from '@opentiny/tiny-engine-plugin-page'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import DesignToolbars from './DesignToolbars.vue'
 import DesignPlugins from './DesignPlugins.vue'
 import DesignCanvas from './DesignCanvas.vue'
diff --git a/packages/design-core/src/DesignCanvas.vue b/packages/design-core/src/DesignCanvas.vue
index 3cafb4dc9..dfad7bac2 100644
--- a/packages/design-core/src/DesignCanvas.vue
+++ b/packages/design-core/src/DesignCanvas.vue
@@ -34,8 +34,8 @@ import {
 import materials from '@opentiny/tiny-engine-plugin-materials'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { isVsCodeEnv, isDevelopEnv } from '@opentiny/tiny-engine-common/js/environments'
-import * as ast from '@opentiny/tiny-engine-common/js/ast'
+import { isVsCodeEnv, isDevelopEnv } from '@opentiny/tiny-engine-controller/js/environments'
+import * as ast from '@opentiny/tiny-engine-controller/js/ast'
 
 const { PAGE_STATUS } = constants
 const tenant = new URLSearchParams(location.search).get('tenant') || ''
diff --git a/packages/design-core/src/main.js b/packages/design-core/src/main.js
index e2d7d81b0..f57b6f194 100644
--- a/packages/design-core/src/main.js
+++ b/packages/design-core/src/main.js
@@ -13,16 +13,20 @@
 import { createApp } from 'vue'
 import initSvgs from '@opentiny/tiny-engine-svgs'
 import { setGlobalConfig } from '@opentiny/tiny-engine-controller'
-import i18n from '@opentiny/tiny-engine-common/js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import App from './App.vue'
 import globalConfig from '../config/lowcode.config'
-import { initMonitor } from '@opentiny/tiny-engine-common/js/monitor'
-import { isDevelopEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { initMonitor } from '@opentiny/tiny-engine-controller/js/monitor'
+import { isDevelopEnv } from '@opentiny/tiny-engine-controller/js/environments'
+import { injectGlobalComponents } from '@opentiny/tiny-engine-common'
+import { initHttp } from '@opentiny/tiny-engine-http'
 import 'virtual:svg-icons-register'
 
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题
 
+initHttp({ env: import.meta.env })
+
 // eslint-disable-next-line no-new
 new TinyThemeTool(tinySmbTheme, 'smbtheme') // 初始化主题
 
@@ -37,4 +41,4 @@ const app = createApp(App)
 
 initSvgs(app)
 window.lowcodeI18n = i18n
-app.use(i18n).mount('#app')
+app.use(i18n).use(injectGlobalComponents).mount('#app')
diff --git a/packages/design-core/src/preview/src/preview/http.js b/packages/design-core/src/preview/src/preview/http.js
index 8183ba74b..2726e5b58 100644
--- a/packages/design-core/src/preview/src/preview/http.js
+++ b/packages/design-core/src/preview/src/preview/http.js
@@ -11,7 +11,7 @@
  */
 
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { atou } from '@opentiny/tiny-engine-common/js/preview'
+import { atou } from '@opentiny/tiny-engine-controller/js/preview'
 
 const http = useHttp()
 
diff --git a/packages/design-core/src/preview/src/preview/importMap.js b/packages/design-core/src/preview/src/preview/importMap.js
index 2d7a1aa7c..445010f5e 100644
--- a/packages/design-core/src/preview/src/preview/importMap.js
+++ b/packages/design-core/src/preview/src/preview/importMap.js
@@ -13,7 +13,7 @@
 // import { hyphenate } from '@vue/shared'
 
 import { getSearchParams } from './http'
-import { VITE_CDN_DOMAIN } from '@opentiny/tiny-engine-common/js/environments'
+import { VITE_CDN_DOMAIN } from '@opentiny/tiny-engine-controller/js/environments'
 
 const importMap = {}
 
diff --git a/packages/design-core/src/preview/src/previewApp.vue b/packages/design-core/src/preview/src/previewApp.vue
index 5700df070..9dba94595 100644
--- a/packages/design-core/src/preview/src/previewApp.vue
+++ b/packages/design-core/src/preview/src/previewApp.vue
@@ -21,8 +21,8 @@
 import { ref, onMounted } from 'vue'
 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 { VITE_ORIGIN } from '@opentiny/tiny-engine-controller/js/environments'
+import { EXTEND_CONFIG } from '@opentiny/tiny-engine-controller/js/app'
 import { useApp } from '@opentiny/tiny-engine-controller'
 
 export default {
diff --git a/packages/design-core/vite.config.js b/packages/design-core/vite.config.js
index 00a12b120..4aea414aa 100644
--- a/packages/design-core/vite.config.js
+++ b/packages/design-core/vite.config.js
@@ -138,7 +138,7 @@ const importMapVersions = {
 }
 
 const devAlias = {
-  '@opentiny/tiny-engine-common/js': path.resolve(__dirname, '../common/js'),
+  '@opentiny/tiny-engine-controller/js': path.resolve(__dirname, '../controller/js'),
   '@opentiny/tiny-engine-common/component': path.resolve(__dirname, '../common/component'),
   '@opentiny/tiny-engine-common': path.resolve(__dirname, '../common/index.js'),
   '@opentiny/tiny-engine-controller/utils': path.resolve(__dirname, '../controller/utils.js'),
diff --git a/packages/http/package.json b/packages/http/package.json
index 94e711a51..84a2d245f 100644
--- a/packages/http/package.json
+++ b/packages/http/package.json
@@ -24,7 +24,6 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/vue": "~3.10.0",
     "@vueuse/core": "^9.6.0",
diff --git a/packages/http/src/axios.js b/packages/http/src/axios.js
index 5ad23c3fb..25edcb693 100644
--- a/packages/http/src/axios.js
+++ b/packages/http/src/axios.js
@@ -1,18 +1,30 @@
 /**
-* 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 axios from 'axios'
 import MockAdapter from 'axios-mock-adapter'
 
+export function globalDefaults(key, value) {
+  if (key && typeof key === 'string') {
+    if (typeof value === 'undefined') {
+      return axios.defaults[key]
+    }
+    axios.defaults[key] = value
+    return undefined
+  }
+
+  return axios.defaults
+}
+
 export default (config) => {
   const instance = axios.create(config)
   const defaults = {}
diff --git a/packages/http/src/config.js b/packages/http/src/config.js
index 23d05f7f3..54b57a8ca 100644
--- a/packages/http/src/config.js
+++ b/packages/http/src/config.js
@@ -10,21 +10,20 @@
  *
  */
 
-import { VITE_ORIGIN, isDevelopEnv } from '@opentiny/tiny-engine-common/js/environments'
+export function getConfig(env = import.meta.env) {
+  const baseURL = env.VITE_ORIGIN
 
-const baseURL = VITE_ORIGIN
+  // 仅在本地开发时，启用 withCredentials
+  const dev = env.MODE?.includes('dev')
 
-// 仅在本地开发时，启用 withCredentials
-const dev = isDevelopEnv
-
-// 获取租户 id
-const getTenant = () => new URLSearchParams(location.search).get('tenant')
-
-export default {
-  baseURL,
-  withCredentials: false,
-  headers: {
-    'x-lowcode-mode': dev ? 'develop' : null,
-    'x-lowcode-org': getTenant()
+  // 获取租户 id
+  const getTenant = () => new URLSearchParams(location.search).get('tenant')
+  return {
+    baseURL,
+    withCredentials: false,
+    headers: {
+      'x-lowcode-mode': dev ? 'develop' : null,
+      'x-lowcode-org': getTenant()
+    }
   }
 }
diff --git a/packages/http/src/index.js b/packages/http/src/index.js
index 25cbf44d9..64b182c30 100644
--- a/packages/http/src/index.js
+++ b/packages/http/src/index.js
@@ -11,12 +11,11 @@
  */
 
 /* eslint-disable no-undef */
-import axios from './axios'
+import axios, { globalDefaults } from './axios'
 import { createApp } from 'vue'
-import { isMock, isVsCodeEnv, isDevelopEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { useBroadcastChannel } from '@vueuse/core'
 import Login from './Login.vue'
-import config from './config'
+import { getConfig } from './config'
 import mockData from './mock'
 import { constants } from '@opentiny/tiny-engine-utils'
 
@@ -57,8 +56,20 @@ window.lowcode = {
   }
 }
 
+let http // 封装axios的http实例
+let environment = import.meta.env // 当前设计器运行环境变量
+
+const isVsCodeEnv = window.vscodeBridge
+const isMock = () => environment.VITE_API_MOCK === 'mock'
+
 export const createHttp = (options) => {
-  const http = axios(config)
+  // 缓存http实例，避免每个请求重新创建实例
+  if (http && !options.force) {
+    return http
+  }
+  const isDevelopEnv = environment.MODE?.includes('dev')
+  const axiosConfig = getConfig(environment)
+  http = axios(axiosConfig)
 
   // 如果未指定是否启用 mock，则本地开发时默认启用，模拟数据在 public/mock 目录下
   const { enableMock = isDevelopEnv } = options
@@ -126,4 +137,19 @@ export const createHttp = (options) => {
   return http
 }
 
-export const useHttp = () => createHttp({ enableMock: isMock })
+/**
+ * 根据环境不同初始化设置http参数
+ * @param {*} env: 当前环境变量
+ */
+export const initHttp = ({ env }) => {
+  if (Object.keys(env).length) {
+    environment = env
+  }
+  const baseURL = environment.VITE_ORIGIN
+  // 调用初始化方法前可能已经存在已经实例化的http，需要设置baseURL
+  http?.defaults('baseURL', baseURL)
+  globalDefaults('baseURL', baseURL)
+  http = createHttp({ force: true, enableMock: isMock() })
+}
+
+export const useHttp = () => createHttp({ enableMock: isMock() })
diff --git a/packages/plugins/block/src/BlockConfig.vue b/packages/plugins/block/src/BlockConfig.vue
index b4dd95dc7..71fc59c97 100644
--- a/packages/plugins/block/src/BlockConfig.vue
+++ b/packages/plugins/block/src/BlockConfig.vue
@@ -106,7 +106,7 @@ 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-controller'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 
 const { BLOCK_OPENNESS } = constants
 
diff --git a/packages/plugins/block/src/BlockEventForm.vue b/packages/plugins/block/src/BlockEventForm.vue
index b4395ae27..d8c7d3ddf 100644
--- a/packages/plugins/block/src/BlockEventForm.vue
+++ b/packages/plugins/block/src/BlockEventForm.vue
@@ -16,7 +16,7 @@
 <script>
 import { computed, reactive, watch } from 'vue'
 import { Input as TinyInput, Form as TinyForm, FormItem as TinyFormItem } from '@opentiny/vue'
-import { REGEXP_EVENT_NAME, verifyEventName } from '@opentiny/tiny-engine-common/js/verification'
+import { REGEXP_EVENT_NAME, verifyEventName } from '@opentiny/tiny-engine-controller/js/verification'
 import { getEditEvent, getEditEventName, renameBlockEventName } from './js/blockSetting'
 
 export default {
diff --git a/packages/plugins/block/src/BlockSetting.vue b/packages/plugins/block/src/BlockSetting.vue
index d7c44d0a4..3dc43e94b 100644
--- a/packages/plugins/block/src/BlockSetting.vue
+++ b/packages/plugins/block/src/BlockSetting.vue
@@ -80,7 +80,7 @@ import { reactive, ref, watch, watchEffect, computed } from 'vue'
 import { Button as TinyButton, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
 import { getGlobalConfig, useModal } from '@opentiny/tiny-engine-controller'
 import { BlockHistoryList, PluginSetting, CloseIcon, SvgButton } from '@opentiny/tiny-engine-common'
-import { previewBlock } from '@opentiny/tiny-engine-common/js/preview'
+import { previewBlock } from '@opentiny/tiny-engine-controller/js/preview'
 import { LifeCycles } from '@opentiny/tiny-engine-common'
 import BlockEvent from './BlockEvent.vue'
 import BlockConfig from './BlockConfig.vue'
diff --git a/packages/plugins/block/src/CategoryEdit.vue b/packages/plugins/block/src/CategoryEdit.vue
index ad1846697..d58369946 100644
--- a/packages/plugins/block/src/CategoryEdit.vue
+++ b/packages/plugins/block/src/CategoryEdit.vue
@@ -42,7 +42,7 @@ import {
   DialogBox as TinyDialogBox
 } from '@opentiny/vue'
 import { useBlock } from '@opentiny/tiny-engine-controller'
-import { REGEXP_GROUP_NAME } from '@opentiny/tiny-engine-common/js/verification'
+import { REGEXP_GROUP_NAME } from '@opentiny/tiny-engine-controller/js/verification'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { createOrUpdateCategory } from './js/blockSetting'
 
diff --git a/packages/plugins/block/src/js/blockSetting.jsx b/packages/plugins/block/src/js/blockSetting.jsx
index 9fc945011..98680f88c 100644
--- a/packages/plugins/block/src/js/blockSetting.jsx
+++ b/packages/plugins/block/src/js/blockSetting.jsx
@@ -22,8 +22,8 @@ import {
   useLayout,
   useNotify
 } from '@opentiny/tiny-engine-controller'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
-import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/index'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
+import { getCanvasStatus } from '@opentiny/tiny-engine-controller/js/canvas'
 import { useHistory, useResource } from '@opentiny/tiny-engine-controller'
 import html2canvas from 'html2canvas'
 
@@ -43,7 +43,7 @@ import {
   deleteCategory
 } from './http'
 import { constants, utils } from '@opentiny/tiny-engine-utils'
-import { generateBlock } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
+import { generateBlock } from '@opentiny/tiny-engine-controller/js/vscodeGenerateFile'
 
 const { HOST_TYPE } = constants
 const { getBlockList, setBlockList, setCategoryList, getCurrentBlock, addBlockEvent, addBlockProperty } = useBlock()
diff --git a/packages/plugins/bridge/src/Main.vue b/packages/plugins/bridge/src/Main.vue
index 7cfadb0f3..2d808555d 100644
--- a/packages/plugins/bridge/src/Main.vue
+++ b/packages/plugins/bridge/src/Main.vue
@@ -23,7 +23,7 @@ import { ref, computed } from 'vue'
 import { Tabs, TabItem } from '@opentiny/vue'
 import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
 import { useHelp } from '@opentiny/tiny-engine-controller'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import { RESOURCE_TYPE } from './js/resource'
 import BridgeManage from './BridgeManage.vue'
 import BridgeSetting, { openPanel, closePanel } from './BridgeSetting.vue'
diff --git a/packages/plugins/bridge/src/http.js b/packages/plugins/bridge/src/http.js
index 5c6fc3fab..e726f4f12 100644
--- a/packages/plugins/bridge/src/http.js
+++ b/packages/plugins/bridge/src/http.js
@@ -11,7 +11,7 @@
  */
 
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { generateBridge, generateUtil } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
+import { generateBridge, generateUtil } from '@opentiny/tiny-engine-controller/js/vscodeGenerateFile'
 const http = useHttp()
 
 // 资源管理 -- 获取列表
diff --git a/packages/plugins/bridge/src/js/resource.js b/packages/plugins/bridge/src/js/resource.js
index d46f49b1c..be89fd693 100644
--- a/packages/plugins/bridge/src/js/resource.js
+++ b/packages/plugins/bridge/src/js/resource.js
@@ -12,7 +12,7 @@
 
 import { reactive } from 'vue'
 import { useApp, useResource, useNotify } from '@opentiny/tiny-engine-controller'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import { updateUtils, deleteUtils } from '@opentiny/tiny-engine-canvas'
 import {
   fetchResourceList,
diff --git a/packages/plugins/data/src/CreateStore.vue b/packages/plugins/data/src/CreateStore.vue
index c48d02f57..444fc65ab 100644
--- a/packages/plugins/data/src/CreateStore.vue
+++ b/packages/plugins/data/src/CreateStore.vue
@@ -61,8 +61,8 @@ import { getCurrentInstance, reactive, ref, computed } from 'vue'
 import { Form, FormItem, Input, Popover } from '@opentiny/vue'
 import { MonacoEditor } from '@opentiny/tiny-engine-common'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
-import { string2Ast, ast2String, insertName } from '@opentiny/tiny-engine-common/js/ast'
-import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
+import { string2Ast, ast2String, insertName } from '@opentiny/tiny-engine-controller/js/ast'
+import { verifyJsVarName } from '@opentiny/tiny-engine-controller/js/verification'
 
 export default {
   components: {
diff --git a/packages/plugins/data/src/CreateVariable.vue b/packages/plugins/data/src/CreateVariable.vue
index b04b59cf2..8fefbf37c 100644
--- a/packages/plugins/data/src/CreateVariable.vue
+++ b/packages/plugins/data/src/CreateVariable.vue
@@ -120,8 +120,8 @@
 import { reactive, ref, computed, watch, onBeforeUnmount } from 'vue'
 import { Popover, Form, FormItem, Input, ButtonGroup } from '@opentiny/vue'
 import { MonacoEditor } from '@opentiny/tiny-engine-common'
-import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
-import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
+import { verifyJsVarName } from '@opentiny/tiny-engine-controller/js/verification'
+import { initCompletion } from '@opentiny/tiny-engine-controller/js/completion'
 import * as Monaco from 'monaco-editor'
 import { validateMonacoEditorData } from './js/common'
 import EditorI18nTool from './EditorI18nTool.vue'
diff --git a/packages/plugins/data/src/DataSourceList.vue b/packages/plugins/data/src/DataSourceList.vue
index abd9eab12..c6fecd4cb 100644
--- a/packages/plugins/data/src/DataSourceList.vue
+++ b/packages/plugins/data/src/DataSourceList.vue
@@ -23,7 +23,7 @@
 import { computed } from 'vue'
 import { useModal } from '@opentiny/tiny-engine-controller'
 import { useResource } from '@opentiny/tiny-engine-controller'
-import { findExpressionInAppSchema } from '@opentiny/tiny-engine-common/js/ast'
+import { findExpressionInAppSchema } from '@opentiny/tiny-engine-controller/js/ast'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { SvgButton } from '@opentiny/tiny-engine-common'
 import { STATE, OPTION_TYPE } from './js/constants'
diff --git a/packages/plugins/datasource/src/js/datasource.js b/packages/plugins/datasource/src/js/datasource.js
index a41b44c42..5b9512a21 100644
--- a/packages/plugins/datasource/src/js/datasource.js
+++ b/packages/plugins/datasource/src/js/datasource.js
@@ -13,7 +13,7 @@
 import axios from 'axios'
 import { useResource } from '@opentiny/tiny-engine-controller'
 import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
-import { isMock } from '@opentiny/tiny-engine-common/js/environments'
+import { isMock } from '@opentiny/tiny-engine-controller/js/environments'
 import { utils as commonUtils, constants } from '@opentiny/tiny-engine-utils'
 import { read, utils, writeFileXLSX } from 'xlsx'
 
diff --git a/packages/plugins/datasource/src/js/http.js b/packages/plugins/datasource/src/js/http.js
index 74fa4a0db..b4bb3a685 100644
--- a/packages/plugins/datasource/src/js/http.js
+++ b/packages/plugins/datasource/src/js/http.js
@@ -10,9 +10,9 @@
  *
  */
 
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { generateDataSource } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
+import { generateDataSource } from '@opentiny/tiny-engine-controller/js/vscodeGenerateFile'
 
 const http = useHttp()
 
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index eaeda9605..83e6b1de7 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -130,7 +130,7 @@ import { PluginPanel, LinkButton } from '@opentiny/tiny-engine-common'
 import { useTranslate, useApp, useModal, getGlobalConfig, useHelp } from '@opentiny/tiny-engine-controller'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { BASE_URL } from '@opentiny/tiny-engine-common/js/environments'
+import { BASE_URL } from '@opentiny/tiny-engine-controller/js/environments'
 
 export default {
   components: {
diff --git a/packages/plugins/materials/src/block/BlockGroup.vue b/packages/plugins/materials/src/block/BlockGroup.vue
index 35f377f53..bc632ceb4 100644
--- a/packages/plugins/materials/src/block/BlockGroup.vue
+++ b/packages/plugins/materials/src/block/BlockGroup.vue
@@ -153,7 +153,7 @@ import { useApp, useBlock, useModal } from '@opentiny/tiny-engine-controller'
 import { SvgButton } from '@opentiny/tiny-engine-common'
 import { requestCreateGroup, requestDeleteGroup, fetchGroups, requestUpdateGroup } from './http'
 import { setBlockPanelVisible } from './js/usePanel'
-import { REGEXP_GROUP_NAME } from '@opentiny/tiny-engine-common/js/verification'
+import { REGEXP_GROUP_NAME } from '@opentiny/tiny-engine-controller/js/verification'
 
 export default {
   components: {
diff --git a/packages/plugins/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue
index b01e1a5ef..36a682f55 100644
--- a/packages/plugins/page/src/PageGeneral.vue
+++ b/packages/plugins/page/src/PageGeneral.vue
@@ -67,7 +67,7 @@
 import { ref, computed, watchEffect } from 'vue'
 import { Form, FormItem, Input, Select, Radio } from '@opentiny/vue'
 import { usePage } from '@opentiny/tiny-engine-controller'
-import { REGEXP_PAGE_NAME, REGEXP_FOLDER_NAME, REGEXP_ROUTE } from '@opentiny/tiny-engine-common/js/verification'
+import { REGEXP_PAGE_NAME, REGEXP_FOLDER_NAME, REGEXP_ROUTE } from '@opentiny/tiny-engine-controller/js/verification'
 import { SvgButton } from '@opentiny/tiny-engine-common'
 import PageHome from './PageHome.vue'
 
diff --git a/packages/plugins/page/src/PageHistory.vue b/packages/plugins/page/src/PageHistory.vue
index f79b43209..178a5bcb3 100644
--- a/packages/plugins/page/src/PageHistory.vue
+++ b/packages/plugins/page/src/PageHistory.vue
@@ -5,7 +5,7 @@
 <script>
 import { ref, watchEffect } from 'vue'
 import { BlockHistoryList } from '@opentiny/tiny-engine-common'
-import { previewPage } from '@opentiny/tiny-engine-common/js/preview'
+import { previewPage } from '@opentiny/tiny-engine-controller/js/preview'
 import { getGlobalConfig, usePage, useBlock, useEditorInfo, useModal } from '@opentiny/tiny-engine-controller'
 import { fetchPageHistory } from './http.js'
 
diff --git a/packages/plugins/page/src/PageHome.vue b/packages/plugins/page/src/PageHome.vue
index 8cc783c91..c99c70d8e 100644
--- a/packages/plugins/page/src/PageHome.vue
+++ b/packages/plugins/page/src/PageHome.vue
@@ -17,8 +17,8 @@
 import { computed, reactive, watchEffect, inject } from 'vue'
 import { Checkbox } from '@opentiny/vue'
 import { usePage, useModal, useNotify } from '@opentiny/tiny-engine-controller'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
-import { generateRouter } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
+import { generateRouter } from '@opentiny/tiny-engine-controller/js/vscodeGenerateFile'
 import http from './http.js'
 
 export default {
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index a43191543..4302459e7 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -58,9 +58,9 @@ import { PluginSetting, ButtonGroup, SvgButton, LifeCycles } from '@opentiny/tin
 import { useLayout, usePage, useCanvas, useModal, useApp, useNotify } from '@opentiny/tiny-engine-controller'
 import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
-import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
-import { generatePage } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
+import { handlePageUpdate } from '@opentiny/tiny-engine-controller/js/http'
+import { generatePage } from '@opentiny/tiny-engine-controller/js/vscodeGenerateFile'
 import PageGeneral from './PageGeneral.vue'
 import PageHistory from './PageHistory.vue'
 import PageInputOutput from './PageInputOutput.vue'
diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue
index 9e822b105..8183978e1 100644
--- a/packages/plugins/page/src/PageTree.vue
+++ b/packages/plugins/page/src/PageTree.vue
@@ -41,7 +41,7 @@ import { Search, Tree, Collapse, CollapseItem } from '@opentiny/vue'
 import { IconFolderOpened, IconFolderClosed } from '@opentiny/vue-icon'
 import { useCanvas, useApp, useModal, usePage, useBreadcrumb, useLayout } from '@opentiny/tiny-engine-controller'
 import { isEqual } from '@opentiny/vue-renderless/common/object'
-import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/index'
+import { getCanvasStatus } from '@opentiny/tiny-engine-controller/js/canvas'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { closePageSettingPanel } from './PageSetting.vue'
 import { closeFolderSettingPanel } from './PageFolderSetting.vue'
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index 7a9543690..9ef9e9ec3 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -30,8 +30,8 @@ import { onBeforeUnmount } from 'vue'
 import { Button } from '@opentiny/vue'
 import { VueMonaco, CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
 import { useHelp } from '@opentiny/tiny-engine-controller'
-import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
-import { initLinter } from '@opentiny/tiny-engine-common/js/linter'
+import { initCompletion } from '@opentiny/tiny-engine-controller/js/completion'
+import { initLinter } from '@opentiny/tiny-engine-controller/js/linter'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
 import useMethod, { saveMethod, highlightMethod, getMethodNameList, getMethods } from './js/method'
 
diff --git a/packages/plugins/script/src/js/method.js b/packages/plugins/script/src/js/method.js
index 6c9d6a975..15d2acb26 100644
--- a/packages/plugins/script/src/js/method.js
+++ b/packages/plugins/script/src/js/method.js
@@ -12,10 +12,10 @@
 
 import { ref, reactive, watchEffect, onActivated, nextTick } from 'vue'
 import { useCanvas, useModal, useNotify } from '@opentiny/tiny-engine-controller'
-import { string2Ast, ast2String, insertName, formatString } from '@opentiny/tiny-engine-common/js/ast'
+import { string2Ast, ast2String, insertName, formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { getSchema } from '@opentiny/tiny-engine-canvas'
-import { lint } from '@opentiny/tiny-engine-common/js/linter'
+import { lint } from '@opentiny/tiny-engine-controller/js/linter'
 import { isFunction } from '@opentiny/vue-renderless/grid/static'
 
 const { SCHEMA_DATA_TYPE } = constants
diff --git a/packages/settings/design/package.json b/packages/settings/design/package.json
index 449b2e4e1..20e62984e 100644
--- a/packages/settings/design/package.json
+++ b/packages/settings/design/package.json
@@ -25,6 +25,7 @@
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
     "@opentiny/tiny-engine-common": "workspace:*",
+    "@opentiny/tiny-engine-controller": "workspace:*",
     "@opentiny/vue": "~3.10.0",
     "sortablejs": "^1.14.0"
   },
diff --git a/packages/settings/design/src/main.js b/packages/settings/design/src/main.js
index 55f3714d6..87d253b9d 100644
--- a/packages/settings/design/src/main.js
+++ b/packages/settings/design/src/main.js
@@ -12,7 +12,7 @@
 
 import { createApp } from 'vue'
 import initSvgs from '@opentiny/tiny-engine-svgs'
-import i18n from '@opentiny/tiny-engine-common/js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import 'virtual:svg-icons-register'
 import App from './App.vue'
 
diff --git a/packages/settings/events/src/components/BindEventsDialog.vue b/packages/settings/events/src/components/BindEventsDialog.vue
index e0f6cebf1..4026953ee 100644
--- a/packages/settings/events/src/components/BindEventsDialog.vue
+++ b/packages/settings/events/src/components/BindEventsDialog.vue
@@ -90,7 +90,7 @@ import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { Button, DialogBox, Input, Search, Popover, Switch } from '@opentiny/vue'
 import { useCanvas, useHistory, useLayout } from '@opentiny/tiny-engine-controller'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
-import { string2Ast, ast2String } from '@opentiny/tiny-engine-common/js/ast'
+import { string2Ast, ast2String } from '@opentiny/tiny-engine-controller/js/ast'
 import { iconYes, iconHelpQuery } from '@opentiny/vue-icon'
 
 const dialogVisible = ref(false)
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 4a942356c..1442057b1 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -70,7 +70,7 @@ import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
 import { getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
 import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
-import { formatString } from '@opentiny/tiny-engine-common/js/ast'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import {
   SizeGroup,
   LayoutGroup,
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index a5948d93c..0a3103bb9 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -107,7 +107,7 @@ import { Select as TinySelect } from '@opentiny/vue'
 import { setPageCss, getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
 import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-engine-controller'
 import { MetaCodeEditor, LinkButton } from '@opentiny/tiny-engine-common'
-import { formatString } from '@opentiny/tiny-engine-common/js/ast'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import useStyle, { updateGlobalStyleStr } from '../../js/useStyle'
 import { stringify, getSelectorArr } from '../../js/parser'
 
diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index cfc6a7a94..caaf328df 100644
--- a/packages/settings/styles/src/js/useStyle.js
+++ b/packages/settings/styles/src/js/useStyle.js
@@ -14,7 +14,7 @@ import { computed, reactive, watch } from 'vue'
 import { useBroadcastChannel } from '@vueuse/core'
 import { getSchema as getCanvasPageSchema, updateRect, setPageCss } from '@opentiny/tiny-engine-canvas'
 import { useCanvas, useHistory, useProperties as useProps } from '@opentiny/tiny-engine-controller'
-import { formatString } from '@opentiny/tiny-engine-common/js/ast'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import { constants, utils } from '@opentiny/tiny-engine-utils'
 import { parser, stringify, getSelectorArr } from './parser'
 
diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue
index 025ad03a6..72f4b15c2 100644
--- a/packages/toolbars/logo/src/Main.vue
+++ b/packages/toolbars/logo/src/Main.vue
@@ -113,7 +113,7 @@ import {
 import { iconHelpCircle } from '@opentiny/vue-icon'
 import { useLayout, useApp, getGlobalConfig, useModal } from '@opentiny/tiny-engine-controller'
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { isDevelopEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isDevelopEnv } from '@opentiny/tiny-engine-controller/js/environments'
 
 const http = useHttp()
 
diff --git a/packages/toolbars/preview/src/Main.vue b/packages/toolbars/preview/src/Main.vue
index 8a8963fdb..72b8e2db3 100644
--- a/packages/toolbars/preview/src/Main.vue
+++ b/packages/toolbars/preview/src/Main.vue
@@ -16,7 +16,7 @@
 
 <script>
 import { Popover } from '@opentiny/vue'
-import { previewPage, previewBlock } from '@opentiny/tiny-engine-common/js/preview'
+import { previewPage, previewBlock } from '@opentiny/tiny-engine-controller/js/preview'
 import { getGlobalConfig, useBlock, useCanvas, useLayout, useNotify } from '@opentiny/tiny-engine-controller'
 import { getSchema } from '@opentiny/tiny-engine-canvas'
 
diff --git a/packages/toolbars/save/src/js/index.js b/packages/toolbars/save/src/js/index.js
index 0094b9dbd..4e6cabc37 100644
--- a/packages/toolbars/save/src/js/index.js
+++ b/packages/toolbars/save/src/js/index.js
@@ -14,7 +14,7 @@ import { reactive, ref } from 'vue'
 import { useBlock, useCanvas, useLayout, useNotify, usePage } from '@opentiny/tiny-engine-controller'
 import { getSchema, setSchema, selectNode } from '@opentiny/tiny-engine-canvas'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
+import { handlePageUpdate } from '@opentiny/tiny-engine-controller/js/http'
 
 const { pageState, isSaved, isBlock } = useCanvas()
 const { PLUGIN_NAME, getPluginApi } = useLayout()