refactor: 解决子包循环依赖问题 (#313)

* refactor: move common/js to controller/js * refactor: replace common/js * refactor: replace ../js * refactor: update package.json * refactor: resolve canvas rely on common * refactor: remove controller deps in http * refactor: add canvas renderer state * refactor: remove useless file ext * refactor: modify controller deps path * refactor: fix eslint * refactor: resolve http env
2024-03-08 15:10:42 +08:00 · 2024-03-08 15:10:42 +08:00 · 731a8536aa
parent 913f40c4d2
commit 731a8536aa
86 changed files with 241 additions and 174 deletions
--- 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:*",
--- 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
--- 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 }) {
--- 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,
--- 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()
  },
--- 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
--- 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'
--- 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) {
--- 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 {
--- 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

--- 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',
--- 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',
--- 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',
--- 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: {
--- 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: {
--- 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',
--- 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: {
--- 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: {
--- 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',
--- 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,
--- 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"
  }
 }
--- a/packages/controller/js/app.js
+++ b/packages/controller/js/app.js
--- a/packages/controller/js/ast.js
+++ b/packages/controller/js/ast.js
--- a/packages/controller/js/canvas.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 待删除
--- a/packages/controller/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',
--- a/packages/controller/js/constants.js
+++ b/packages/controller/js/constants.js
--- a/packages/controller/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
--- a/packages/controller/js/environments.js
+++ b/packages/controller/js/environments.js
--- a/packages/controller/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'

--- a/packages/controller/js/i18n.js
+++ b/packages/controller/js/i18n.js
--- a/packages/controller/js/linter.js
+++ b/packages/controller/js/linter.js
--- a/packages/controller/js/monitor.js
+++ b/packages/controller/js/monitor.js
--- a/packages/controller/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
--- a/packages/controller/js/verification.js
+++ b/packages/controller/js/verification.js
--- a/packages/controller/js/vscodeGenerateFile.js
+++ b/packages/controller/js/vscodeGenerateFile.js
--- 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"
  }
 }
--- 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
--- 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
--- 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,17 +83,6 @@ const forward = () => {
  }
 }

-const addHistory = (schema) => {
-  if (!schema) {
-    useCanvas().setSaved(false)
-    push(getSchema())
-  } else {
-    clear()
-    // 初始 schema 需要设置为第一条历史记录
-    push(schema)
-  }
-}
-
 const clear = () => {
  list.splice(0)
  Object.assign(historyState, {
@ -104,6 +92,17 @@ const clear = () => {
  })
 }

+const addHistory = (schema) => {
+  if (!schema) {
+    useCanvas().setSaved(false)
+    push(useCanvas().renderer.value?.getSchema())
+  } else {
+    clear()
+    // 初始 schema 需要设置为第一条历史记录
+    push(schema)
+  }
+}
+
 // 监控下标，判断是否允许前进后退标志
 watch(
  () => historyState.index,
--- 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++

--- 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 () {
--- 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'

--- 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] || '')
--- 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.*/]
    }
  }
 })
--- 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'
--- 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') || ''
--- 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')
--- 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()

--- 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 = {}

--- 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 {
--- 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'),
--- 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",
--- 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 = {}
--- 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()
+    }
  }
 }
--- 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() })
--- 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

--- 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 {
--- 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'
--- 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'

--- 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()
--- 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'
--- 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()

 // 资源管理 -- 获取列表
--- 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,
--- 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: {
--- 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'
--- 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'
--- 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'

--- 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()

--- 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: {
--- 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: {
--- 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'

--- 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'

--- 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 {
--- 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'
--- 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'
--- 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'

--- 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
--- 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"
  },
--- 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'

--- 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)
--- 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,
--- 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'

--- 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'

--- 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()

--- 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'

--- 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()