diff --git a/packages/core/package.json b/packages/core/package.json
index 763392a8..9b37420f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -11,9 +11,9 @@
       "import": "./dist/tmagic-core.js",
       "require": "./dist/tmagic-core.umd.cjs"
     },
-    "./dist/style.css": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
+    "./resetcss.css": {
+      "import": "./resetcss.css",
+      "require": "./resetcss.css"
     },
     "./*": "./*"
   },
@@ -37,6 +37,10 @@
     "vue"
   ],
   "dependencies": {
+    "@tmagic/data-source": "workspace:*",
+    "@tmagic/dep": "workspace:*",
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/utils": "workspace:*",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21"
   },
@@ -48,9 +52,6 @@
     "vite": "^5.3.5"
   },
   "peerDependencies": {
-    "@tmagic/data-source": "workspace:*",
-    "@tmagic/schema": "workspace:*",
-    "@tmagic/utils": "workspace:*",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
diff --git a/packages/utils/src/resetcss.css b/packages/core/resetcss.css
similarity index 100%
rename from packages/utils/src/resetcss.css
rename to packages/core/resetcss.css
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c6d9da90..aab4cb19 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -18,6 +18,11 @@
 
 import App from './App';
 
+export * from '@tmagic/data-source';
+export * from '@tmagic/dep';
+export * from '@tmagic/schema';
+export * from '@tmagic/utils';
+
 export { default as EventHelper } from './EventHelper';
 export * from './utils';
 
diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
index f350a8fd..b3210410 100644
--- a/packages/core/src/utils.ts
+++ b/packages/core/src/utils.ts
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 import { JsEngine } from '@tmagic/schema';
+import { isNumber } from '@tmagic/utils';
 
 import type { default as TMagicNode } from './Node';
 
@@ -57,8 +58,6 @@ export const fillBackgroundImage = (value: string) => {
   return value;
 };
 
-export const isNumber = (value: string) => /^(-?\d+)(\.\d+)?$/.test(value);
-
 export const getTransform = (value: Record<string, string>, jsEngine: JsEngine) => {
   if (!value) return [];
 
diff --git a/packages/data-source/package.json b/packages/data-source/package.json
index e5412d01..bf2117d6 100644
--- a/packages/data-source/package.json
+++ b/packages/data-source/package.json
@@ -33,15 +33,12 @@
     "data-source"
   ],
   "dependencies": {
-    "@tmagic/dep": "workspace:*",
     "deep-state-observer": "^5.5.13",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:*",
-    "@tmagic/schema": "workspace:*",
-    "@tmagic/utils": "workspace:*",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
diff --git a/packages/data-source/src/DataSourceManager.ts b/packages/data-source/src/DataSourceManager.ts
index 136f7bb4..1f4457c8 100644
--- a/packages/data-source/src/DataSourceManager.ts
+++ b/packages/data-source/src/DataSourceManager.ts
@@ -20,9 +20,8 @@ import EventEmitter from 'events';
 
 import { cloneDeep } from 'lodash-es';
 
-import type { default as TMagicApp } from '@tmagic/core';
-import type { DataSourceSchema, DisplayCond, Id, MNode, NODE_CONDS_KEY } from '@tmagic/schema';
-import { compiledNode } from '@tmagic/utils';
+import type { DataSourceSchema, default as TMagicApp, DisplayCond, Id, MNode, NODE_CONDS_KEY } from '@tmagic/core';
+import { compiledNode } from '@tmagic/core';
 
 import { SimpleObservedData } from './observed-data/SimpleObservedData';
 import { DataSource, HttpDataSource } from './data-sources';
diff --git a/packages/data-source/src/createDataSourceManager.ts b/packages/data-source/src/createDataSourceManager.ts
index 62cb9229..ec4285a9 100644
--- a/packages/data-source/src/createDataSourceManager.ts
+++ b/packages/data-source/src/createDataSourceManager.ts
@@ -18,7 +18,7 @@
 import { union } from 'lodash-es';
 
 import type { default as TMagicApp } from '@tmagic/core';
-import { getDepNodeIds, getNodes, isPage } from '@tmagic/utils';
+import { getDepNodeIds, getNodes, isPage } from '@tmagic/core';
 
 import DataSourceManager from './DataSourceManager';
 import type { ChangeEvent, DataSourceManagerData } from './types';
diff --git a/packages/data-source/src/data-sources/Base.ts b/packages/data-source/src/data-sources/Base.ts
index 246a905d..a5515775 100644
--- a/packages/data-source/src/data-sources/Base.ts
+++ b/packages/data-source/src/data-sources/Base.ts
@@ -19,9 +19,8 @@ import EventEmitter from 'events';
 
 import { cloneDeep } from 'lodash-es';
 
-import type { default as TMagicApp } from '@tmagic/core';
-import type { CodeBlockContent, DataSchema, DataSourceSchema } from '@tmagic/schema';
-import { getDefaultValueFromFields } from '@tmagic/utils';
+import type { CodeBlockContent, DataSchema, DataSourceSchema, default as TMagicApp } from '@tmagic/core';
+import { getDefaultValueFromFields } from '@tmagic/core';
 
 import { ObservedData } from '@data-source/observed-data/ObservedData';
 import { SimpleObservedData } from '@data-source/observed-data/SimpleObservedData';
diff --git a/packages/data-source/src/data-sources/Http.ts b/packages/data-source/src/data-sources/Http.ts
index c6b2a48b..3b8c02a3 100644
--- a/packages/data-source/src/data-sources/Http.ts
+++ b/packages/data-source/src/data-sources/Http.ts
@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { HttpOptions, RequestFunction } from '@tmagic/schema';
-import { getValueByKeyPath } from '@tmagic/utils';
+import type { HttpOptions, RequestFunction } from '@tmagic/core';
+import { getValueByKeyPath } from '@tmagic/core';
 
 import { DataSourceOptions, HttpDataSourceSchema } from '@data-source/types';
 
diff --git a/packages/data-source/src/depsCache.ts b/packages/data-source/src/depsCache.ts
index 45c69618..dda86ac6 100644
--- a/packages/data-source/src/depsCache.ts
+++ b/packages/data-source/src/depsCache.ts
@@ -1,6 +1,5 @@
-import { isDataSourceCondTarget, isDataSourceTarget, Target, Watcher } from '@tmagic/dep';
-import type { DataSourceSchema, MNode } from '@tmagic/schema';
-import { DSL_NODE_KEY_COPY_PREFIX } from '@tmagic/utils';
+import type { DataSourceSchema, MNode } from '@tmagic/core';
+import { DSL_NODE_KEY_COPY_PREFIX, isDataSourceCondTarget, isDataSourceTarget, Target, Watcher } from '@tmagic/core';
 
 const cache = new Map();
 
diff --git a/packages/data-source/src/index.ts b/packages/data-source/src/index.ts
index 84fd066e..a8d0a512 100644
--- a/packages/data-source/src/index.ts
+++ b/packages/data-source/src/index.ts
@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 export { default as DataSourceManager } from './DataSourceManager';
 export * from './data-sources';
 export * from './createDataSourceManager';
diff --git a/packages/data-source/src/observed-data/SimpleObservedData.ts b/packages/data-source/src/observed-data/SimpleObservedData.ts
index ba8cb82c..0bd002fc 100644
--- a/packages/data-source/src/observed-data/SimpleObservedData.ts
+++ b/packages/data-source/src/observed-data/SimpleObservedData.ts
@@ -1,6 +1,6 @@
 import { EventEmitter } from 'events';
 
-import { getValueByKeyPath, setValueByKeyPath } from '@tmagic/utils';
+import { getValueByKeyPath, setValueByKeyPath } from '@tmagic/core';
 
 import { ObservedData } from './ObservedData';
 
diff --git a/packages/data-source/src/types.ts b/packages/data-source/src/types.ts
index 47ada219..cdf84410 100644
--- a/packages/data-source/src/types.ts
+++ b/packages/data-source/src/types.ts
@@ -1,5 +1,4 @@
-import type { default as TMagicApp } from '@tmagic/core';
-import type { DataSourceSchema, HttpOptions, RequestFunction } from '@tmagic/schema';
+import type { DataSourceSchema, default as TMagicApp, HttpOptions, RequestFunction } from '@tmagic/core';
 
 import type DataSource from './data-sources/Base';
 import type HttpDataSource from './data-sources/Http';
diff --git a/packages/data-source/src/utils.ts b/packages/data-source/src/utils.ts
index 75706cdb..61f1c95e 100644
--- a/packages/data-source/src/utils.ts
+++ b/packages/data-source/src/utils.ts
@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash-es';
 
-import type { DepData, DisplayCond, DisplayCondItem, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { NODE_CONDS_KEY } from '@tmagic/schema';
+import type { DepData, DisplayCond, DisplayCondItem, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
 import {
   compiledCond,
   compiledNode,
@@ -10,8 +9,9 @@ import {
   getValueByKeyPath,
   isPage,
   isPageFragment,
+  NODE_CONDS_KEY,
   replaceChildNode,
-} from '@tmagic/utils';
+} from '@tmagic/core';
 
 import type { AsyncDataSourceResolveResult, DataSourceManagerData } from './types';
 
diff --git a/packages/data-source/tests/DataSourceMenager.spec.ts b/packages/data-source/tests/DataSourceMenager.spec.ts
index db57f63a..0088f25b 100644
--- a/packages/data-source/tests/DataSourceMenager.spec.ts
+++ b/packages/data-source/tests/DataSourceMenager.spec.ts
@@ -1,11 +1,10 @@
 import { describe, expect, test } from 'vitest';
 
-import App from '@tmagic/core';
-import { NodeType } from '@tmagic/schema';
+import TMagicApp, { NodeType } from '@tmagic/core';
 
 import { DataSource, DataSourceManager } from '@data-source/index';
 
-const app = new App({
+const app = new TMagicApp({
   config: {
     type: NodeType.ROOT,
     id: '1',
diff --git a/packages/data-source/tests/createDataSourceManager.spec.ts b/packages/data-source/tests/createDataSourceManager.spec.ts
index a3b96c73..fa953017 100644
--- a/packages/data-source/tests/createDataSourceManager.spec.ts
+++ b/packages/data-source/tests/createDataSourceManager.spec.ts
@@ -1,17 +1,9 @@
 import { describe, expect, test } from 'vitest';
 
-import { MApp, NodeType } from '@tmagic/schema';
+import TMagicApp, { type MApp, NodeType } from '@tmagic/core';
 
 import { createDataSourceManager, DataSourceManager } from '@data-source/index';
 
-class Core {
-  public dsl?: MApp;
-
-  constructor(options: any) {
-    this.dsl = options.config;
-  }
-}
-
 const dsl: MApp = {
   type: NodeType.ROOT,
   id: 'app_1',
@@ -46,13 +38,14 @@ const dsl: MApp = {
         },
       ],
       methods: [],
+      events: [],
     },
   ],
 };
 
 describe('createDataSourceManager', () => {
   test('instance', () => {
-    const manager = createDataSourceManager(new Core({ config: dsl }));
+    const manager = createDataSourceManager(new TMagicApp({ config: dsl }));
     expect(manager).toBeInstanceOf(DataSourceManager);
   });
 });
diff --git a/packages/design/src/Autocomplete.vue b/packages/design/src/Autocomplete.vue
index e45109c6..0f6f6a6b 100644
--- a/packages/design/src/Autocomplete.vue
+++ b/packages/design/src/Autocomplete.vue
@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { AutocompleteProps } from './types';
 
 defineOptions({
@@ -38,7 +38,7 @@ defineOptions({
 
 const props = defineProps<AutocompleteProps>();
 
-const ui = getConfig('components')?.autocomplete;
+const ui = getDesignConfig('components')?.autocomplete;
 
 const uiComponent = ui?.component || 'el-autocomplete';
 
diff --git a/packages/design/src/Badge.vue b/packages/design/src/Badge.vue
index 7b02cb32..e99f43c1 100644
--- a/packages/design/src/Badge.vue
+++ b/packages/design/src/Badge.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { BadgeProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<BadgeProps>();
 
-const ui = getConfig('components')?.badge;
+const ui = getDesignConfig('components')?.badge;
 const uiComponent = ui?.component || 'el-badge';
 
 const uiProps = computed(() => ui?.props(props) || props);
diff --git a/packages/design/src/Button.vue b/packages/design/src/Button.vue
index aeef4e7d..db51d0ee 100644
--- a/packages/design/src/Button.vue
+++ b/packages/design/src/Button.vue
@@ -9,7 +9,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { ButtonProps } from './types';
 
 defineOptions({
@@ -18,7 +18,7 @@ defineOptions({
 
 const props = defineProps<ButtonProps>();
 
-const ui = getConfig('components')?.button;
+const ui = getDesignConfig('components')?.button;
 
 const uiComponent = ui?.component || 'el-button';
 
diff --git a/packages/design/src/Card.vue b/packages/design/src/Card.vue
index 82428a93..2ad591c3 100644
--- a/packages/design/src/Card.vue
+++ b/packages/design/src/Card.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { CardProps } from './types';
 
 defineOptions({
@@ -22,7 +22,7 @@ defineOptions({
 
 const props = defineProps<CardProps>();
 
-const ui = getConfig('components')?.card;
+const ui = getDesignConfig('components')?.card;
 
 const uiComponent = ui?.component || 'el-card';
 
diff --git a/packages/design/src/Cascader.vue b/packages/design/src/Cascader.vue
index d1641314..b474fa58 100644
--- a/packages/design/src/Cascader.vue
+++ b/packages/design/src/Cascader.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import { CascaderProps } from './types';
 
 defineOptions({
@@ -21,7 +21,7 @@ defineOptions({
 
 const props = defineProps<CascaderProps>();
 
-const ui = getConfig('components')?.cascader;
+const ui = getDesignConfig('components')?.cascader;
 
 const uiComponent = ui?.component || 'el-cascader';
 
diff --git a/packages/design/src/Checkbox.vue b/packages/design/src/Checkbox.vue
index a63d6871..024545c9 100644
--- a/packages/design/src/Checkbox.vue
+++ b/packages/design/src/Checkbox.vue
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { CheckboxProps } from './types';
 
 defineOptions({
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
   falseValue: undefined,
 });
 
-const ui = getConfig('components')?.checkbox;
+const ui = getDesignConfig('components')?.checkbox;
 
 const uiComponent = ui?.component || 'el-checkbox';
 
diff --git a/packages/design/src/CheckboxGroup.vue b/packages/design/src/CheckboxGroup.vue
index b0fe5ad5..02879789 100644
--- a/packages/design/src/CheckboxGroup.vue
+++ b/packages/design/src/CheckboxGroup.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { CheckboxGroupProps } from './types';
 
 defineOptions({
@@ -22,7 +22,7 @@ defineOptions({
 
 const props = defineProps<CheckboxGroupProps>();
 
-const ui = getConfig('components')?.checkboxGroup;
+const ui = getDesignConfig('components')?.checkboxGroup;
 
 const uiComponent = ui?.component || 'el-checkbox-group';
 
diff --git a/packages/design/src/Col.vue b/packages/design/src/Col.vue
index 2a648b5a..0d7e9cc9 100644
--- a/packages/design/src/Col.vue
+++ b/packages/design/src/Col.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { ColProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<ColProps>();
 
-const ui = getConfig('components')?.col;
+const ui = getDesignConfig('components')?.col;
 
 const uiComponent = ui?.component || 'el-col';
 
diff --git a/packages/design/src/Collapse.vue b/packages/design/src/Collapse.vue
index ee3d02a6..c4927357 100644
--- a/packages/design/src/Collapse.vue
+++ b/packages/design/src/Collapse.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { CollapseProps } from './types';
 
 defineOptions({
@@ -22,7 +22,7 @@ defineOptions({
 
 const props = defineProps<CollapseProps>();
 
-const ui = getConfig('components')?.collapse;
+const ui = getDesignConfig('components')?.collapse;
 
 const uiComponent = ui?.component || 'el-collapse';
 
diff --git a/packages/design/src/CollapseItem.vue b/packages/design/src/CollapseItem.vue
index c30b2416..bb991e8f 100644
--- a/packages/design/src/CollapseItem.vue
+++ b/packages/design/src/CollapseItem.vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { CollapseItemProps } from './types';
 
 defineOptions({
@@ -28,7 +28,7 @@ defineOptions({
 
 const props = defineProps<CollapseItemProps>();
 
-const ui = getConfig('components')?.collapseItem;
+const ui = getDesignConfig('components')?.collapseItem;
 
 const uiComponent = ui?.component || 'el-collapse-item';
 
diff --git a/packages/design/src/ColorPicker.vue b/packages/design/src/ColorPicker.vue
index 375b4f34..81384289 100644
--- a/packages/design/src/ColorPicker.vue
+++ b/packages/design/src/ColorPicker.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { ColorPickerProps } from './types';
 
 defineOptions({
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
   disabled: false,
 });
 
-const ui = getConfig('components')?.colorPicker;
+const ui = getDesignConfig('components')?.colorPicker;
 
 const uiComponent = ui?.component || 'el-color-picker';
 
diff --git a/packages/design/src/DatePicker.vue b/packages/design/src/DatePicker.vue
index e9419152..e16d5040 100644
--- a/packages/design/src/DatePicker.vue
+++ b/packages/design/src/DatePicker.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { DatePickerProps } from './types';
 
 defineOptions({
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   type: 'date',
 });
 
-const ui = getConfig('components')?.datePicker;
+const ui = getDesignConfig('components')?.datePicker;
 
 const uiComponent = ui?.component || 'el-date-picker';
 
diff --git a/packages/design/src/Dialog.vue b/packages/design/src/Dialog.vue
index f7ad77e6..4261c81e 100644
--- a/packages/design/src/Dialog.vue
+++ b/packages/design/src/Dialog.vue
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { DialogProps } from './types';
 
 defineOptions({
@@ -28,7 +28,7 @@ const props = defineProps<DialogProps>();
 
 const emit = defineEmits(['close', 'update:modelValue']);
 
-const ui = getConfig('components')?.dialog;
+const ui = getDesignConfig('components')?.dialog;
 
 const uiComponent = ui?.component || 'el-dialog';
 
diff --git a/packages/design/src/Divider.vue b/packages/design/src/Divider.vue
index 67c427b5..108bcf86 100644
--- a/packages/design/src/Divider.vue
+++ b/packages/design/src/Divider.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { DividerProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<DividerProps>();
 
-const ui = getConfig('components')?.divider;
+const ui = getDesignConfig('components')?.divider;
 
 const uiComponent = ui?.component || 'el-divider';
 
diff --git a/packages/design/src/Drawer.vue b/packages/design/src/Drawer.vue
index 749a500f..b2d0724a 100644
--- a/packages/design/src/Drawer.vue
+++ b/packages/design/src/Drawer.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { DrawerProps } from './types';
 
 defineOptions({
@@ -36,7 +36,7 @@ const props = defineProps<DrawerProps>();
 
 const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
 
-const ui = getConfig('components')?.drawer;
+const ui = getDesignConfig('components')?.drawer;
 
 const uiComponent = ui?.component || 'el-drawer';
 
diff --git a/packages/design/src/Dropdown.vue b/packages/design/src/Dropdown.vue
index 54542a1a..19d92699 100644
--- a/packages/design/src/Dropdown.vue
+++ b/packages/design/src/Dropdown.vue
@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { DropdownProps } from './types';
 
 defineOptions({
@@ -20,7 +20,7 @@ defineOptions({
 
 const props = defineProps<DropdownProps>();
 
-const ui = getConfig('components')?.dropdown;
+const ui = getDesignConfig('components')?.dropdown;
 
 const uiComponent = ui?.component || 'el-dropdown';
 
diff --git a/packages/design/src/DropdownItem.vue b/packages/design/src/DropdownItem.vue
index 344af6c7..eef0d0a2 100644
--- a/packages/design/src/DropdownItem.vue
+++ b/packages/design/src/DropdownItem.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { DropdownItemProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<DropdownItemProps>();
 
-const ui = getConfig('components')?.dropdownItem;
+const ui = getDesignConfig('components')?.dropdownItem;
 
 const uiComponent = ui?.component || 'el-dropdown-item';
 
diff --git a/packages/design/src/DropdownMenu.vue b/packages/design/src/DropdownMenu.vue
index 66dad100..5d8fce09 100644
--- a/packages/design/src/DropdownMenu.vue
+++ b/packages/design/src/DropdownMenu.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script setup lang="ts">
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 
 defineOptions({
   name: 'TMDropdownMenu',
 });
 
-const ui = getConfig('components')?.dropdownMenu;
+const ui = getDesignConfig('components')?.dropdownMenu;
 
 const uiComponent = ui?.component || 'el-dropdown-menu';
 </script>
diff --git a/packages/design/src/Form.vue b/packages/design/src/Form.vue
index acbc11aa..df823ee6 100644
--- a/packages/design/src/Form.vue
+++ b/packages/design/src/Form.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { FormProps } from './types';
 
 defineOptions({
@@ -22,7 +22,7 @@ defineOptions({
 
 const props = defineProps<FormProps>();
 
-const ui = getConfig('components')?.form;
+const ui = getDesignConfig('components')?.form;
 
 const uiComponent = ui?.component || 'el-form';
 
diff --git a/packages/design/src/FormItem.vue b/packages/design/src/FormItem.vue
index d54d10ef..14654c1a 100644
--- a/packages/design/src/FormItem.vue
+++ b/packages/design/src/FormItem.vue
@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { FormItemProps } from './types';
 
 defineOptions({
@@ -19,7 +19,7 @@ defineOptions({
 
 const props = defineProps<FormItemProps>();
 
-const ui = getConfig('components')?.formItem;
+const ui = getDesignConfig('components')?.formItem;
 
 const uiComponent = ui?.component || 'el-form-item';
 
diff --git a/packages/design/src/Icon.vue b/packages/design/src/Icon.vue
index 1485553b..8b36ce77 100644
--- a/packages/design/src/Icon.vue
+++ b/packages/design/src/Icon.vue
@@ -5,14 +5,14 @@
 </template>
 
 <script setup lang="ts">
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import { IconProps } from './types';
 
 defineOptions({
   name: 'TMIcon',
 });
 
-const ui = getConfig('components')?.icon;
+const ui = getDesignConfig('components')?.icon;
 const uiComponent = ui?.component || 'el-icon';
 defineProps<IconProps>();
 </script>
diff --git a/packages/design/src/Input.vue b/packages/design/src/Input.vue
index 3144cff3..1bbf0e4a 100644
--- a/packages/design/src/Input.vue
+++ b/packages/design/src/Input.vue
@@ -26,7 +26,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { InputProps } from './types';
 
 defineOptions({
@@ -35,7 +35,7 @@ defineOptions({
 
 const props = defineProps<InputProps>();
 
-const ui = getConfig('components')?.input;
+const ui = getDesignConfig('components')?.input;
 
 const uiComponent = ui?.component || 'el-input';
 
diff --git a/packages/design/src/InputNumber.vue b/packages/design/src/InputNumber.vue
index 605088f7..a32537b8 100644
--- a/packages/design/src/InputNumber.vue
+++ b/packages/design/src/InputNumber.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { InputNumberProps } from './types';
 
 defineOptions({
@@ -21,7 +21,7 @@ defineOptions({
 
 const props = defineProps<InputNumberProps>();
 
-const ui = getConfig('components')?.inputNumber;
+const ui = getDesignConfig('components')?.inputNumber;
 
 const uiComponent = ui?.component || 'el-input-number';
 
diff --git a/packages/design/src/Option.vue b/packages/design/src/Option.vue
index ba2ffc40..cef34aec 100644
--- a/packages/design/src/Option.vue
+++ b/packages/design/src/Option.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { OptionProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<OptionProps>();
 
-const ui = getConfig('components')?.option;
+const ui = getDesignConfig('components')?.option;
 
 const uiComponent = ui?.component || 'el-option';
 
diff --git a/packages/design/src/OptionGroup.vue b/packages/design/src/OptionGroup.vue
index 6a681997..69ada78e 100644
--- a/packages/design/src/OptionGroup.vue
+++ b/packages/design/src/OptionGroup.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { OptionGroupProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<OptionGroupProps>();
 
-const ui = getConfig('components')?.optionGroup;
+const ui = getDesignConfig('components')?.optionGroup;
 
 const uiComponent = ui?.component || 'el-option-group';
 
diff --git a/packages/design/src/Pagination.vue b/packages/design/src/Pagination.vue
index 7f126e30..fbdd3d9f 100644
--- a/packages/design/src/Pagination.vue
+++ b/packages/design/src/Pagination.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { PaginationProps } from './types';
 
 defineOptions({
@@ -23,7 +23,7 @@ const props = defineProps<PaginationProps>();
 
 const emit = defineEmits(['size-change', 'current-change']);
 
-const ui = getConfig('components')?.pagination;
+const ui = getDesignConfig('components')?.pagination;
 
 const uiComponent = ui?.component || 'el-pagination';
 
diff --git a/packages/design/src/Popover.vue b/packages/design/src/Popover.vue
index ef2a27be..302ebfa0 100644
--- a/packages/design/src/Popover.vue
+++ b/packages/design/src/Popover.vue
@@ -190,57 +190,3 @@ onBeforeUnmount(() => {
   destroy();
 });
 </script>
-
-<style lang="scss">
-.tmagic-design-popper {
-  min-width: 150px;
-  line-height: 1.4;
-  background-color: #fff;
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
-  color: #606266;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  font-size: 14px;
-  overflow-wrap: break-word;
-  box-sizing: border-box;
-  padding: 10px;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.tmagic-design-popper[data-popper-placement^='top'] > .tmagic-design-popper-arrow {
-  bottom: -4px;
-}
-
-.tmagic-design-popper[data-popper-placement^='bottom'] > .tmagic-design-popper-arrow {
-  top: -4px;
-}
-
-.tmagic-design-popper[data-popper-placement^='left'] > .tmagic-design-popper-arrow {
-  right: -4px;
-}
-
-.tmagic-design-popper[data-popper-placement^='right'] > .tmagic-design-popper-arrow {
-  left: -4px;
-}
-
-.tmagic-design-popper-arrow,
-.tmagic-design-popper-arrow::before {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-}
-
-.tmagic-design-popper-arrow {
-  visibility: hidden;
-}
-
-.tmagic-design-popper-arrow::before {
-  visibility: visible;
-  content: '';
-  transform: rotate(45deg);
-}
-</style>
diff --git a/packages/design/src/Radio.vue b/packages/design/src/Radio.vue
index 527d7ec8..042e0f75 100644
--- a/packages/design/src/Radio.vue
+++ b/packages/design/src/Radio.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { RadioProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<RadioProps>();
 
-const ui = getConfig('components')?.radio;
+const ui = getDesignConfig('components')?.radio;
 
 const uiComponent = ui?.component || 'el-radio';
 
diff --git a/packages/design/src/RadioButton.vue b/packages/design/src/RadioButton.vue
index 1ca4538f..b6523bcb 100644
--- a/packages/design/src/RadioButton.vue
+++ b/packages/design/src/RadioButton.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { RadioButtonProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<RadioButtonProps>();
 
-const ui = getConfig('components')?.radioButton;
+const ui = getDesignConfig('components')?.radioButton;
 
 const uiComponent = ui?.component || 'el-radio-button';
 
diff --git a/packages/design/src/RadioGroup.vue b/packages/design/src/RadioGroup.vue
index 01e4e252..3ff37193 100644
--- a/packages/design/src/RadioGroup.vue
+++ b/packages/design/src/RadioGroup.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { RadioGroupProps } from './types';
 
 defineOptions({
@@ -22,7 +22,7 @@ defineOptions({
 
 const props = defineProps<RadioGroupProps>();
 
-const ui = getConfig('components')?.radioGroup;
+const ui = getDesignConfig('components')?.radioGroup;
 
 const uiComponent = ui?.component || 'el-radio-group';
 
diff --git a/packages/design/src/Row.vue b/packages/design/src/Row.vue
index 092be1c7..a0bda7c3 100644
--- a/packages/design/src/Row.vue
+++ b/packages/design/src/Row.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script setup lang="ts">
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 
 defineOptions({
   name: 'TMRow',
 });
 
-const uiComponent = getConfig('components')?.row.component || 'el-row';
+const uiComponent = getDesignConfig('components')?.row.component || 'el-row';
 </script>
diff --git a/packages/design/src/Scrollbar.vue b/packages/design/src/Scrollbar.vue
index 2f6da23f..1a37afd6 100644
--- a/packages/design/src/Scrollbar.vue
+++ b/packages/design/src/Scrollbar.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script setup lang="ts">
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 
 defineOptions({
   name: 'TMScrollbar',
 });
 
-const ui = getConfig('components')?.scrollbar;
+const ui = getDesignConfig('components')?.scrollbar;
 
 const uiComponent = ui?.component || 'el-scrollbar';
 </script>
diff --git a/packages/design/src/Select.vue b/packages/design/src/Select.vue
index f3094a93..27372c3d 100644
--- a/packages/design/src/Select.vue
+++ b/packages/design/src/Select.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { SelectProps } from './types';
 
 defineOptions({
@@ -27,7 +27,7 @@ const props = defineProps<SelectProps>();
 
 const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
 
-const ui = getConfig('components')?.select;
+const ui = getDesignConfig('components')?.select;
 
 const uiComponent = ui?.component || 'el-select';
 
diff --git a/packages/design/src/Step.vue b/packages/design/src/Step.vue
index fb6fdb6a..4c3d8bb7 100644
--- a/packages/design/src/Step.vue
+++ b/packages/design/src/Step.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { StepProps } from './types';
 
 defineOptions({
@@ -22,7 +22,7 @@ const clickHandler = (...args: any[]) => {
   emit('click', ...args);
 };
 
-const ui = getConfig('components')?.step;
+const ui = getDesignConfig('components')?.step;
 
 const uiComponent = ui?.component || 'el-step';
 
diff --git a/packages/design/src/Steps.vue b/packages/design/src/Steps.vue
index fb0f6686..02f71f75 100644
--- a/packages/design/src/Steps.vue
+++ b/packages/design/src/Steps.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { StepsProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<StepsProps>();
 
-const ui = getConfig('components')?.steps;
+const ui = getDesignConfig('components')?.steps;
 
 const uiComponent = ui?.component || 'el-steps';
 
diff --git a/packages/design/src/Switch.vue b/packages/design/src/Switch.vue
index 83d1f158..1ec8f337 100644
--- a/packages/design/src/Switch.vue
+++ b/packages/design/src/Switch.vue
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { SwitchProps } from './types';
 
 defineOptions({
@@ -24,7 +24,7 @@ defineOptions({
 
 const props = defineProps<SwitchProps>();
 
-const ui = getConfig('components')?.switch;
+const ui = getDesignConfig('components')?.switch;
 
 const uiComponent = ui?.component || 'el-switch';
 
diff --git a/packages/design/src/TabPane.vue b/packages/design/src/TabPane.vue
index 921cebec..92635375 100644
--- a/packages/design/src/TabPane.vue
+++ b/packages/design/src/TabPane.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { TabPaneProps } from './types';
 
 defineOptions({
@@ -22,7 +22,7 @@ defineOptions({
 
 const props = defineProps<TabPaneProps>();
 
-const ui = getConfig('components')?.tabPane;
+const ui = getDesignConfig('components')?.tabPane;
 
 const uiComponent = ui?.component || 'el-tab-pane';
 
diff --git a/packages/design/src/Table.vue b/packages/design/src/Table.vue
index 87770de2..5d7d8258 100644
--- a/packages/design/src/Table.vue
+++ b/packages/design/src/Table.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { TableProps } from './types';
 
 defineOptions({
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<TableProps>(), {
   data: () => [],
 });
 
-const ui = getConfig('components')?.table;
+const ui = getDesignConfig('components')?.table;
 
 const uiComponent = ui?.component || 'el-table';
 
diff --git a/packages/design/src/TableColumn.vue b/packages/design/src/TableColumn.vue
index 810a41a4..a7ea5401 100644
--- a/packages/design/src/TableColumn.vue
+++ b/packages/design/src/TableColumn.vue
@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { TableColumnProps } from './types';
 
 defineOptions({
@@ -19,7 +19,7 @@ defineOptions({
 
 const props = defineProps<TableColumnProps>();
 
-const ui = getConfig('components')?.tableColumn;
+const ui = getDesignConfig('components')?.tableColumn;
 
 const uiComponent = ui?.component || 'el-table-column';
 
diff --git a/packages/design/src/Tabs.vue b/packages/design/src/Tabs.vue
index 3e51bc02..51159829 100644
--- a/packages/design/src/Tabs.vue
+++ b/packages/design/src/Tabs.vue
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { TabsProps } from './types';
 
 defineOptions({
@@ -26,7 +26,7 @@ defineOptions({
 
 const props = defineProps<TabsProps>();
 
-const ui = getConfig('components')?.tabs;
+const ui = getDesignConfig('components')?.tabs;
 
 const uiComponent = ui?.component || 'el-tabs';
 
diff --git a/packages/design/src/Tag.vue b/packages/design/src/Tag.vue
index ee291b85..1234b831 100644
--- a/packages/design/src/Tag.vue
+++ b/packages/design/src/Tag.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { TagProps } from './types';
 
 defineOptions({
@@ -16,7 +16,7 @@ defineOptions({
 
 const props = defineProps<TagProps>();
 
-const ui = getConfig('components')?.tag;
+const ui = getDesignConfig('components')?.tag;
 
 const uiComponent = ui?.component || 'el-tag';
 
diff --git a/packages/design/src/TimePicker.vue b/packages/design/src/TimePicker.vue
index 80ca4690..05f84f80 100644
--- a/packages/design/src/TimePicker.vue
+++ b/packages/design/src/TimePicker.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { TimePickerProps } from './types';
 
 defineOptions({
@@ -21,7 +21,7 @@ defineOptions({
 
 const props = defineProps<TimePickerProps>();
 
-const ui = getConfig('components')?.timePicker;
+const ui = getDesignConfig('components')?.timePicker;
 
 const uiComponent = ui?.component || 'el-time-picker';
 
diff --git a/packages/design/src/Tooltip.vue b/packages/design/src/Tooltip.vue
index 8465b944..cada3ac1 100644
--- a/packages/design/src/Tooltip.vue
+++ b/packages/design/src/Tooltip.vue
@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { TooltipProps } from './types';
 
 defineOptions({
@@ -19,7 +19,7 @@ defineOptions({
 
 const props = defineProps<TooltipProps>();
 
-const ui = getConfig('components')?.tooltip;
+const ui = getDesignConfig('components')?.tooltip;
 
 const uiComponent = ui?.component || 'el-tooltip';
 
diff --git a/packages/design/src/Tree.vue b/packages/design/src/Tree.vue
index 7ee2b7e1..85d3240c 100644
--- a/packages/design/src/Tree.vue
+++ b/packages/design/src/Tree.vue
@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { TreeProps } from './types';
 
 defineOptions({
@@ -31,7 +31,7 @@ defineOptions({
 
 const props = defineProps<TreeProps>();
 
-const ui = getConfig('components')?.tree;
+const ui = getDesignConfig('components')?.tree;
 
 const uiComponent = ui?.component || 'el-tree';
 
diff --git a/packages/design/src/Upload.vue b/packages/design/src/Upload.vue
index 40b6d869..8ba2f53c 100644
--- a/packages/design/src/Upload.vue
+++ b/packages/design/src/Upload.vue
@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { getConfig } from './config';
+import { getDesignConfig } from './config';
 import type { UploadProps } from './types';
 
 defineOptions({
@@ -25,7 +25,7 @@ const emit = defineEmits(['change']);
 const changeHandler = (...args: any[]) => {
   emit('change', ...args);
 };
-const ui = getConfig('components')?.upload;
+const ui = getDesignConfig('components')?.upload;
 
 const uiComponent = ui?.component || 'el-upload';
 
diff --git a/packages/design/src/config.ts b/packages/design/src/config.ts
index 95870fbb..e37aa831 100644
--- a/packages/design/src/config.ts
+++ b/packages/design/src/config.ts
@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { PluginOptions } from './types';
+import { DesignPluginOptions } from './types';
 
-let $MAGIC_DESIGN: PluginOptions = {};
+let $MAGIC_DESIGN: DesignPluginOptions = {};
 
-const setConfig = (options: PluginOptions): void => {
+const setDesignConfig = (options: DesignPluginOptions): void => {
   $MAGIC_DESIGN = options;
 };
 
-const getConfig = <K extends keyof PluginOptions>(key: K) => $MAGIC_DESIGN[key];
+const getDesignConfig = <K extends keyof DesignPluginOptions>(key: K) => $MAGIC_DESIGN[key];
 
-export { getConfig, setConfig };
+export { getDesignConfig, setDesignConfig };
diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
index a3bc3165..1976034a 100644
--- a/packages/design/src/index.ts
+++ b/packages/design/src/index.ts
@@ -1,8 +1,10 @@
 import type { App, Ref } from 'vue';
 import { computed, ref, unref } from 'vue';
 
-import { setConfig } from './config';
-import { PluginOptions, TMagicMessage, TMagicMessageBox } from './types';
+import { setDesignConfig } from './config';
+import { DesignPluginOptions, TMagicMessage, TMagicMessageBox } from './types';
+
+import './theme/index.scss';
 
 export * from './types';
 export * from './config';
@@ -107,7 +109,7 @@ export let useZIndex = (zIndexOverrides?: Ref<number>) => {
 };
 
 export default {
-  install(app: App, options: PluginOptions) {
+  install(app: App, options: DesignPluginOptions) {
     if (options.message) {
       tMagicMessage.error = options.message?.error;
       tMagicMessage.success = options.message?.success;
@@ -132,6 +134,6 @@ export default {
     }
 
     app.config.globalProperties.$MAGIC_DESIGN = options;
-    setConfig(options);
+    setDesignConfig(options);
   },
 };
diff --git a/packages/design/src/theme/index.scss b/packages/design/src/theme/index.scss
new file mode 100644
index 00000000..77a4d671
--- /dev/null
+++ b/packages/design/src/theme/index.scss
@@ -0,0 +1 @@
+@import "./popover.scss";
diff --git a/packages/design/src/theme/popover.scss b/packages/design/src/theme/popover.scss
new file mode 100644
index 00000000..3f5b409d
--- /dev/null
+++ b/packages/design/src/theme/popover.scss
@@ -0,0 +1,55 @@
+.tmagic-design-popper {
+  min-width: 150px;
+  line-height: 1.4;
+  background-color: #fff;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  color: #606266;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  font-size: 14px;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  padding: 10px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.tmagic-design-popper[data-popper-placement^="top"]
+  > .tmagic-design-popper-arrow {
+  bottom: -4px;
+}
+
+.tmagic-design-popper[data-popper-placement^="bottom"]
+  > .tmagic-design-popper-arrow {
+  top: -4px;
+}
+
+.tmagic-design-popper[data-popper-placement^="left"]
+  > .tmagic-design-popper-arrow {
+  right: -4px;
+}
+
+.tmagic-design-popper[data-popper-placement^="right"]
+  > .tmagic-design-popper-arrow {
+  left: -4px;
+}
+
+.tmagic-design-popper-arrow,
+.tmagic-design-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.tmagic-design-popper-arrow {
+  visibility: hidden;
+}
+
+.tmagic-design-popper-arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+}
diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
index 3118e2fa..8f35c558 100644
--- a/packages/design/src/types.ts
+++ b/packages/design/src/types.ts
@@ -46,7 +46,7 @@ export interface CascaderProps {
   disabled?: boolean;
   clearable?: boolean;
   filterable?: boolean;
-  options?: CascaderOption[];
+  options?: CascaderPropsOption[];
   size?: FieldSize;
   /** 弹出内容的自定义类名 */
   popperClass?: string;
@@ -372,13 +372,13 @@ export interface UploadProps {
   disabled?: boolean;
 }
 
-export interface CascaderOption {
+export interface CascaderPropsOption {
   /** 指定选项的值为选项对象的某个属性值 */
   value: any;
   /** 指定选项标签为选项对象的某个属性值 */
   label: string;
   /** 指定选项的子选项为选项对象的某个属性值 */
-  children?: CascaderOption[];
+  children?: CascaderPropsOption[];
 }
 
 export interface IconProps {
@@ -706,7 +706,7 @@ export interface Components {
   };
 }
 
-export interface PluginOptions {
+export interface DesignPluginOptions {
   message?: TMagicMessage;
   messageBox?: TMagicMessageBox;
   components?: Components;
diff --git a/packages/editor/package.json b/packages/editor/package.json
index efb8bb85..cbe7f842 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -49,8 +49,11 @@
   ],
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/dep": "workspace:*",
+    "@tmagic/design": "workspace:*",
+    "@tmagic/form": "workspace:*",
+    "@tmagic/stage": "workspace:*",
     "@tmagic/table": "workspace:*",
+    "@tmagic/utils": "workspace:*",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -79,11 +82,6 @@
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:*",
-    "@tmagic/design": "workspace:*",
-    "@tmagic/form": "workspace:*",
-    "@tmagic/schema": "workspace:*",
-    "@tmagic/stage": "workspace:*",
-    "@tmagic/utils": "workspace:*",
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": "^3.4.35"
diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 1d947317..9afc4af2 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -119,7 +119,7 @@ import { EventEmitter } from 'events';
 
 import { provide } from 'vue';
 
-import type { MApp } from '@tmagic/schema';
+import type { MApp } from '@tmagic/core';
 
 import Framework from './layouts/Framework.vue';
 import TMagicNavMenu from './layouts/NavMenu.vue';
diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index dd2af131..5d2c095b 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -61,9 +61,9 @@
 <script lang="ts" setup>
 import { computed, inject, Ref, ref } from 'vue';
 
+import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
-import type { CodeBlockContent } from '@tmagic/schema';
+import { type FormConfig, type FormState, MFormBox, type TableColumnConfig } from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
@@ -71,7 +71,7 @@ import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-positi
 import { useWindowRect } from '@editor/hooks/use-window-rect';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MEditorCodeBlockEditor',
@@ -110,7 +110,7 @@ const diffChange = () => {
   difVisible.value = false;
 };
 
-const defaultParamColConfig: ColumnConfig = {
+const defaultParamColConfig: TableColumnConfig = {
   type: 'row',
   label: '参数类型',
   items: [
@@ -197,7 +197,7 @@ const functionConfig = computed<FormConfig>(() => [
     onChange: (formState: FormState | undefined, code: string) => {
       try {
         // 检测js代码是否存在语法错误
-        getConfig('parseDSL')(code);
+        getEditorConfig('parseDSL')(code);
 
         return code;
       } catch (error: any) {
diff --git a/packages/editor/src/components/Tree.vue b/packages/editor/src/components/Tree.vue
index 26246409..c6052528 100644
--- a/packages/editor/src/components/Tree.vue
+++ b/packages/editor/src/components/Tree.vue
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import { provide } from 'vue';
 
-import type { Id } from '@tmagic/schema';
+import type { Id } from '@tmagic/core';
 
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
 
diff --git a/packages/editor/src/components/TreeNode.vue b/packages/editor/src/components/TreeNode.vue
index 88baeead..9c5d8122 100644
--- a/packages/editor/src/components/TreeNode.vue
+++ b/packages/editor/src/components/TreeNode.vue
@@ -65,7 +65,7 @@
 import { computed, inject } from 'vue';
 import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 
-import type { Id } from '@tmagic/schema';
+import type { Id } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
index 77ece155..f9cd2e4d 100644
--- a/packages/editor/src/editorProps.ts
+++ b/packages/editor/src/editorProps.ts
@@ -1,6 +1,5 @@
-import type { EventOption } from '@tmagic/core';
+import type { DataSourceSchema, EventOption, Id, MApp, MNode } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
-import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
diff --git a/packages/editor/src/fields/CodeLink.vue b/packages/editor/src/fields/CodeLink.vue
index 12c11c08..84b7fb1a 100644
--- a/packages/editor/src/fields/CodeLink.vue
+++ b/packages/editor/src/fields/CodeLink.vue
@@ -8,7 +8,7 @@ import serialize from 'serialize-javascript';
 
 import type { FieldProps, FormItem } from '@tmagic/form';
 
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MFieldsCodeLink',
@@ -70,7 +70,7 @@ const changeHandler = (v: Record<string, any>) => {
   if (!props.name || !props.model) return;
 
   try {
-    const parseDSL = getConfig('parseDSL');
+    const parseDSL = getEditorConfig('parseDSL');
     props.model[props.name] = parseDSL(`(${v[props.name]})`);
     emit('change', props.model[props.name]);
   } catch (e) {
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index 509160e8..dc4b78d9 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -19,10 +19,10 @@
 import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
+import { HookCodeType, HookType } from '@tmagic/core';
 import { TMagicCard } from '@tmagic/design';
 import type { FieldProps, FormItem } from '@tmagic/form';
 import { FormState, MContainer } from '@tmagic/form';
-import { HookCodeType, HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
diff --git a/packages/editor/src/fields/CodeSelectCol.vue b/packages/editor/src/fields/CodeSelectCol.vue
index 90ef6df7..b3fbd98c 100644
--- a/packages/editor/src/fields/CodeSelectCol.vue
+++ b/packages/editor/src/fields/CodeSelectCol.vue
@@ -39,9 +39,9 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
+import type { Id } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
diff --git a/packages/editor/src/fields/CondOpSelect.vue b/packages/editor/src/fields/CondOpSelect.vue
index beb7e768..5dc75400 100644
--- a/packages/editor/src/fields/CondOpSelect.vue
+++ b/packages/editor/src/fields/CondOpSelect.vue
@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { getConfig as getDesignConfig, TMagicSelect } from '@tmagic/design';
+import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
 
 import type { CondOpSelectConfig, Services } from '@editor/type';
diff --git a/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue b/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
index 75cbeda6..5cb8162d 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
+++ b/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
@@ -69,15 +69,9 @@
 import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import {
-  getConfig as getDesignConfig,
-  TMagicButton,
-  TMagicCascader,
-  TMagicSelect,
-  TMagicTooltip,
-} from '@tmagic/design';
+import { DataSourceFieldType } from '@tmagic/core';
+import { getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect, TMagicTooltip } from '@tmagic/design';
 import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
-import { DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
diff --git a/packages/editor/src/fields/DataSourceFieldSelect/Index.vue b/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
index c9f92361..81ac39d5 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
+++ b/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
@@ -42,9 +42,9 @@
 import { computed, inject, ref, resolveComponent, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
+import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
-import { DataSchema } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
diff --git a/packages/editor/src/fields/DataSourceFields.vue b/packages/editor/src/fields/DataSourceFields.vue
index 1b0ee880..d8c941bc 100644
--- a/packages/editor/src/fields/DataSourceFields.vue
+++ b/packages/editor/src/fields/DataSourceFields.vue
@@ -49,9 +49,9 @@
 <script setup lang="ts">
 import { inject, Ref, ref } from 'vue';
 
+import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
-import type { DataSchema } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue
index 51f78a1a..daa9ccdf 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/packages/editor/src/fields/DataSourceInput.vue
@@ -1,12 +1,12 @@
 <template>
   <component
     v-if="disabled || isFocused"
-    :is="getConfig('components')?.autocomplete.component || 'el-autocomplete'"
+    :is="getDesignConfig('components')?.autocomplete.component || 'el-autocomplete'"
     class="tmagic-design-auto-complete"
     ref="autocomplete"
     v-model="state"
     v-bind="
-      getConfig('components')?.autocomplete.props({
+      getDesignConfig('components')?.autocomplete.props({
         disabled,
         size,
         fetchSuggestions: querySearch,
@@ -51,9 +51,9 @@
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
-import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { DataSchema, DataSourceSchema } from '@tmagic/core';
+import { getDesignConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
 import type { FieldProps, FormItem } from '@tmagic/form';
-import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 import { getKeysArray, isNumber } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
diff --git a/packages/editor/src/fields/DataSourceMethodSelect.vue b/packages/editor/src/fields/DataSourceMethodSelect.vue
index 47c6a316..3e56e4e4 100644
--- a/packages/editor/src/fields/DataSourceMethodSelect.vue
+++ b/packages/editor/src/fields/DataSourceMethodSelect.vue
@@ -35,9 +35,9 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
+import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
diff --git a/packages/editor/src/fields/DataSourceMethods.vue b/packages/editor/src/fields/DataSourceMethods.vue
index 9e05e168..b01b27b6 100644
--- a/packages/editor/src/fields/DataSourceMethods.vue
+++ b/packages/editor/src/fields/DataSourceMethods.vue
@@ -21,9 +21,9 @@
 </template>
 
 <script setup lang="ts">
+import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
-import type { CodeBlockContent } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
diff --git a/packages/editor/src/fields/DataSourceMocks.vue b/packages/editor/src/fields/DataSourceMocks.vue
index ca715b84..e80daf07 100644
--- a/packages/editor/src/fields/DataSourceMocks.vue
+++ b/packages/editor/src/fields/DataSourceMocks.vue
@@ -31,9 +31,9 @@
 <script setup lang="ts">
 import { inject, Ref, ref } from 'vue';
 
+import type { MockSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
-import type { MockSchema } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
diff --git a/packages/editor/src/fields/DisplayConds.vue b/packages/editor/src/fields/DisplayConds.vue
index 7a83f116..09f4c032 100644
--- a/packages/editor/src/fields/DisplayConds.vue
+++ b/packages/editor/src/fields/DisplayConds.vue
@@ -15,6 +15,7 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
+import type { DisplayCond } from '@tmagic/core';
 import {
   type FieldProps,
   type FilterFunction,
@@ -23,7 +24,6 @@ import {
   type GroupListConfig,
   MGroupList,
 } from '@tmagic/form';
-import type { DisplayCond } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 import { getCascaderOptionsFromFields } from '@editor/utils';
diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue
index 863fe0f3..a11245eb 100644
--- a/packages/editor/src/fields/EventSelect.vue
+++ b/packages/editor/src/fields/EventSelect.vue
@@ -53,11 +53,11 @@ import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
-import type { EventOption } from '@tmagic/core';
+import type { EventOption, MComponent, MContainer } from '@tmagic/core';
+import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
-import { ActionType, type MComponent, type MContainer } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
diff --git a/packages/editor/src/fields/PageFragmentSelect.vue b/packages/editor/src/fields/PageFragmentSelect.vue
index e73b2fb8..b8002832 100644
--- a/packages/editor/src/fields/PageFragmentSelect.vue
+++ b/packages/editor/src/fields/PageFragmentSelect.vue
@@ -19,8 +19,8 @@
 import { computed, inject } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
+import { Id, NodeType } from '@tmagic/core';
 import { FieldProps } from '@tmagic/form';
-import { Id, NodeType } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import type { PageFragmentSelectConfig, Services } from '@editor/type';
diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index 1d9f8c0d..38fb27d9 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@@ -45,9 +45,9 @@ import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
+import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormItem, FormState } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
 import { getIdFromEl } from '@tmagic/utils';
 
 import { type Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
diff --git a/packages/editor/src/hooks/use-code-block-edit.ts b/packages/editor/src/hooks/use-code-block-edit.ts
index f71a6e19..5ad0f0db 100644
--- a/packages/editor/src/hooks/use-code-block-edit.ts
+++ b/packages/editor/src/hooks/use-code-block-edit.ts
@@ -1,8 +1,8 @@
 import { nextTick, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type { CodeBlockContent } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import type { CodeBlockContent } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import type { CodeBlockService } from '@editor/services/codeBlock';
diff --git a/packages/editor/src/hooks/use-data-source-edit.ts b/packages/editor/src/hooks/use-data-source-edit.ts
index 07afb830..54f3be43 100644
--- a/packages/editor/src/hooks/use-data-source-edit.ts
+++ b/packages/editor/src/hooks/use-data-source-edit.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue';
 
-import type { DataSourceSchema } from '@tmagic/schema';
+import type { DataSourceSchema } from '@tmagic/core';
 
 import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
 import type { DataSourceService } from '@editor/services/dataSource';
diff --git a/packages/editor/src/hooks/use-data-source-method.ts b/packages/editor/src/hooks/use-data-source-method.ts
index 444956fe..c2424dda 100644
--- a/packages/editor/src/hooks/use-data-source-method.ts
+++ b/packages/editor/src/hooks/use-data-source-method.ts
@@ -1,11 +1,11 @@
 import { nextTick, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type { CodeBlockContent, DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 export const useDataSourceMethod = () => {
   const codeConfig = ref<CodeBlockContent>();
@@ -81,7 +81,7 @@ export const useDataSourceMethod = () => {
 
       if (values.content) {
         // 在保存的时候转换代码内容
-        const parseDSL = getConfig('parseDSL');
+        const parseDSL = getEditorConfig('parseDSL');
         if (typeof values.content === 'string') {
           values.content = parseDSL<(...args: any[]) => any>(values.content);
         }
diff --git a/packages/editor/src/hooks/use-filter.ts b/packages/editor/src/hooks/use-filter.ts
index e4f0f2e3..0d414d86 100644
--- a/packages/editor/src/hooks/use-filter.ts
+++ b/packages/editor/src/hooks/use-filter.ts
@@ -1,6 +1,6 @@
 import { type Ref, ref } from 'vue';
 
-import type { Id, MNode } from '@tmagic/schema';
+import type { Id, MNode } from '@tmagic/core';
 
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
 import { traverseNode } from '@editor/utils';
diff --git a/packages/editor/src/hooks/use-node-status.ts b/packages/editor/src/hooks/use-node-status.ts
index cd3ad448..52eee764 100644
--- a/packages/editor/src/hooks/use-node-status.ts
+++ b/packages/editor/src/hooks/use-node-status.ts
@@ -1,6 +1,6 @@
 import { ComputedRef, ref, watch } from 'vue';
 
-import type { Id, MNode } from '@tmagic/schema';
+import type { Id, MNode } from '@tmagic/core';
 
 import { LayerNodeStatus, TreeNodeData } from '@editor/type';
 import { traverseNode } from '@editor/utils';
diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts
index eca95517..dabea73a 100644
--- a/packages/editor/src/hooks/use-stage.ts
+++ b/packages/editor/src/hooks/use-stage.ts
@@ -1,6 +1,6 @@
 import { computed, onBeforeUnmount, watch } from 'vue';
 
-import type { MNode } from '@tmagic/schema';
+import type { MNode } from '@tmagic/core';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
 import { getIdFromEl } from '@tmagic/utils';
 
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index 72ae568e..d8484a47 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -17,6 +17,12 @@
  */
 import { App } from 'vue';
 
+import type { DesignPluginOptions } from '@tmagic/design';
+import designPlugin from '@tmagic/design';
+import type { FormInstallOptions } from '@tmagic/form';
+import formPlugin from '@tmagic/form';
+import tablePlugin from '@tmagic/table';
+
 import Code from './fields/Code.vue';
 import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
@@ -35,16 +41,25 @@ import KeyValue from './fields/KeyValue.vue';
 import PageFragmentSelect from './fields/PageFragmentSelect.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
-import { setConfig } from './utils/config';
+import { setEditorConfig } from './utils/config';
 import Editor from './Editor.vue';
-import type { InstallOptions } from './type';
+import type { EditorInstallOptions } from './type';
 
 import './theme/index.scss';
 
+export * from '@tmagic/form';
+export { default as formPlugin } from '@tmagic/form';
+export * from '@tmagic/table';
+export { default as tablePlugin } from '@tmagic/table';
+export * from '@tmagic/stage';
+export { default as StageCore } from '@tmagic/stage';
+export * from '@tmagic/design';
+export { default as designPlugin } from '@tmagic/design';
+export * from '@tmagic/utils';
+
 export type { OnDrag } from 'gesto';
 
-export { DepTargetType } from '@tmagic/dep';
-export type { MoveableOptions } from '@tmagic/stage';
+export { DepTargetType } from '@tmagic/core';
 export * from './type';
 export * from './hooks';
 export * from './utils';
@@ -91,18 +106,23 @@ export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';
 
-const defaultInstallOpt: InstallOptions = {
+const defaultInstallOpt: EditorInstallOptions = {
   // eslint-disable-next-line no-eval
   parseDSL: (dsl: string) => eval(dsl),
 };
 
 export default {
-  install: (app: App, opt?: Partial<InstallOptions>): void => {
+  install: (app: App, opt?: Partial<EditorInstallOptions | DesignPluginOptions | FormInstallOptions>): void => {
     const option = Object.assign(defaultInstallOpt, opt || {});
 
+    app.use(designPlugin, opt || {});
+    app.use(formPlugin, opt || {});
+    app.use(tablePlugin);
+
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
-    setConfig(option);
+    setEditorConfig(option);
+
     app.component(`${Editor.name || 'MEditor'}`, Editor);
     app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-ui-select', uiSelect);
diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts
index c32b7776..b0938fa0 100644
--- a/packages/editor/src/initService.ts
+++ b/packages/editor/src/initService.ts
@@ -1,7 +1,16 @@
 import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { EventOption } from '@tmagic/core';
+import type {
+  CodeBlockContent,
+  DataSourceSchema,
+  EventOption,
+  Id,
+  MApp,
+  MNode,
+  MPage,
+  MPageFragment,
+} from '@tmagic/core';
 import {
   createCodeBlockTarget,
   createDataSourceCondTarget,
@@ -9,8 +18,7 @@ import {
   createDataSourceTarget,
   DepTargetType,
   Target,
-} from '@tmagic/dep';
-import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
+} from '@tmagic/core';
 import { isPage } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
diff --git a/packages/editor/src/layouts/AddPageBox.vue b/packages/editor/src/layouts/AddPageBox.vue
index d82f4265..e4f23b78 100644
--- a/packages/editor/src/layouts/AddPageBox.vue
+++ b/packages/editor/src/layouts/AddPageBox.vue
@@ -22,7 +22,7 @@
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index 080e7e56..cfb6d31b 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -23,7 +23,7 @@ import serialize from 'serialize-javascript';
 import { TMagicButton } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 import monaco from '@editor/utils/monaco-editor';
 
 defineOptions({
@@ -76,7 +76,7 @@ const toString = (v: string | any, language: string): string => {
   return value;
 };
 
-const parse = (v: string | any, language: string): any => {
+const parseCode = (v: string | any, language: string): any => {
   if (typeof v !== 'string') {
     return v;
   }
@@ -85,7 +85,7 @@ const parse = (v: string | any, language: string): any => {
     return JSON.parse(v);
   }
 
-  return getConfig('parseDSL')(v);
+  return getEditorConfig('parseDSL')(v);
 };
 
 let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
@@ -149,7 +149,7 @@ const init = async () => {
       e.stopPropagation();
       const newValue = getEditorValue();
       values.value = newValue;
-      emit('save', props.parse ? parse(newValue, props.language) : newValue);
+      emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
     }
   });
 
@@ -158,7 +158,7 @@ const init = async () => {
       const newValue = getEditorValue();
       if (values.value !== newValue) {
         values.value = newValue;
-        emit('save', props.parse ? parse(newValue, props.language) : newValue);
+        emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
       }
     });
   }
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 801c2e9c..5dcfe9ee 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -65,7 +65,7 @@ import { TMagicScrollbar } from '@tmagic/design';
 
 import SplitView from '@editor/components/SplitView.vue';
 import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions, Services } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 import PageBar from './page-bar/PageBar.vue';
 import AddPageBox from './AddPageBox.vue';
@@ -156,7 +156,7 @@ onBeforeUnmount(() => {
 
 const saveCode = (value: string) => {
   try {
-    const parseDSL = getConfig('parseDSL');
+    const parseDSL = getEditorConfig('parseDSL');
     editorService?.set('root', parseDSL(value));
   } catch (e: any) {
     console.error(e);
diff --git a/packages/editor/src/layouts/NavMenu.vue b/packages/editor/src/layouts/NavMenu.vue
index 748ce59b..56f90969 100644
--- a/packages/editor/src/layouts/NavMenu.vue
+++ b/packages/editor/src/layouts/NavMenu.vue
@@ -10,7 +10,7 @@
 import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import ToolButton from '@editor/components/ToolButton.vue';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 9205fe46..060130a2 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -41,10 +41,10 @@
 import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
+import type { MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
-import type { MNode } from '@tmagic/schema';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
diff --git a/packages/editor/src/layouts/page-bar/AddButton.vue b/packages/editor/src/layouts/page-bar/AddButton.vue
index 9472d7bd..bddf8a1d 100644
--- a/packages/editor/src/layouts/page-bar/AddButton.vue
+++ b/packages/editor/src/layouts/page-bar/AddButton.vue
@@ -14,7 +14,7 @@
 import { computed, inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue
index c6662689..28e370ff 100644
--- a/packages/editor/src/layouts/page-bar/PageBar.vue
+++ b/packages/editor/src/layouts/page-bar/PageBar.vue
@@ -66,8 +66,8 @@
 import { computed, inject, ref, watch } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
+import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
 import { TMagicIcon, TMagicPopover } from '@tmagic/design';
-import { Id, type MPage, type MPageFragment, NodeType } from '@tmagic/schema';
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ToolButton from '@editor/components/ToolButton.vue';
diff --git a/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
index 18042930..85c75e32 100644
--- a/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
+++ b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
@@ -36,7 +36,7 @@ import {
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
 import Sortable, { SortableEvent } from 'sortablejs';
 
-import { Id, NodeType } from '@tmagic/schema';
+import { Id, NodeType } from '@tmagic/core';
 
 import Icon from '@editor/components/Icon.vue';
 import type { PageBarSortOptions, Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/page-bar/PageList.vue b/packages/editor/src/layouts/page-bar/PageList.vue
index 71e39143..71ecdf27 100644
--- a/packages/editor/src/layouts/page-bar/PageList.vue
+++ b/packages/editor/src/layouts/page-bar/PageList.vue
@@ -37,8 +37,8 @@
 import { computed, inject } from 'vue';
 import { Files } from '@element-plus/icons-vue';
 
+import { Id, MPage, MPageFragment } from '@tmagic/core';
 import { TMagicIcon, TMagicPopover } from '@tmagic/design';
-import { Id, MPage, MPageFragment } from '@tmagic/schema';
 
 import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/page-bar/SwitchTypeButton.vue b/packages/editor/src/layouts/page-bar/SwitchTypeButton.vue
index 0273ad5f..37862989 100644
--- a/packages/editor/src/layouts/page-bar/SwitchTypeButton.vue
+++ b/packages/editor/src/layouts/page-bar/SwitchTypeButton.vue
@@ -13,8 +13,8 @@
 </template>
 
 <script setup lang="ts">
+import { NodeType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import { NodeType } from '@tmagic/schema';
 
 defineOptions({
   name: 'MEditorPageBarSwitchTypeButton',
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index ec55f26e..bd52250e 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -28,9 +28,9 @@
 import { computed, inject } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { DepTargetType } from '@tmagic/dep';
+import type { Id, MNode } from '@tmagic/core';
+import { DepTargetType } from '@tmagic/core';
 import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
-import type { Id, MNode } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
index 59ebb1c9..fdd4bcf5 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
@@ -30,8 +30,8 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 
+import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
-import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
index b6b050ec..2f3dee41 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
@@ -24,9 +24,9 @@
 <script setup lang="ts">
 import { inject, Ref, ref, watchEffect } from 'vue';
 
+import { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
 import { FormConfig, MFormBox } from '@tmagic/form';
-import { DataSourceSchema } from '@tmagic/schema';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks';
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue
index 8dd4d60a..b85232d1 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue
@@ -27,9 +27,8 @@
 import { computed, inject } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { DepTargetType } from '@tmagic/dep';
+import { DepData, DepTargetType, Id, MNode } from '@tmagic/core';
 import { tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
-import { DepData, Id, MNode } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue b/packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue
index 9f3d5a3c..817b9324 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue
@@ -9,7 +9,7 @@
 import { inject } from 'vue';
 import { Hide, View } from '@element-plus/icons-vue';
 
-import type { MNode } from '@tmagic/schema';
+import type { MNode } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
 import { Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
index 57b3668c..8f4cd4f1 100644
--- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
@@ -47,8 +47,8 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 
+import type { MNode } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
-import type { MNode } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
diff --git a/packages/editor/src/layouts/sidebar/layer/use-click.ts b/packages/editor/src/layouts/sidebar/layer/use-click.ts
index da60a073..f6a4824a 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-click.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-click.ts
@@ -1,7 +1,7 @@
 import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
 import { throttle } from 'lodash-es';
 
-import { Id, MNode } from '@tmagic/schema';
+import { Id, MNode } from '@tmagic/core';
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services, TreeNodeData, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
diff --git a/packages/editor/src/layouts/sidebar/layer/use-drag.ts b/packages/editor/src/layouts/sidebar/layer/use-drag.ts
index 0cc91066..33f9e339 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-drag.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-drag.ts
@@ -1,4 +1,4 @@
-import type { Id, MContainer, MNode } from '@tmagic/schema';
+import type { Id, MContainer, MNode } from '@tmagic/core';
 import { addClassName, removeClassName } from '@tmagic/utils';
 
 import { DragType, type Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
index 2d10d053..15ac7365 100644
--- a/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
+++ b/packages/editor/src/layouts/sidebar/layer/use-node-status.ts
@@ -1,6 +1,6 @@
 import { computed, ref, watch } from 'vue';
 
-import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import type { Id, MNode, MPage, MPageFragment } from '@tmagic/core';
 import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/workspace/Breadcrumb.vue b/packages/editor/src/layouts/workspace/Breadcrumb.vue
index 06407cd4..2a7e0429 100644
--- a/packages/editor/src/layouts/workspace/Breadcrumb.vue
+++ b/packages/editor/src/layouts/workspace/Breadcrumb.vue
@@ -10,8 +10,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
+import type { MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { MNode } from '@tmagic/schema';
 import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
diff --git a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
index cdd15281..7f0e8b50 100644
--- a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
@@ -24,8 +24,8 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, ref, watch } from 'vue';
 
+import type { MNode } from '@tmagic/core';
 import { TMagicTooltip } from '@tmagic/design';
-import type { MNode } from '@tmagic/schema';
 import { getIdFromEl } from '@tmagic/utils';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 22e649d1..98b578e5 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -44,14 +44,14 @@
 import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { MApp, MContainer } from '@tmagic/schema';
+import type { MApp, MContainer } from '@tmagic/core';
 import StageCore, { getOffset, Runtime } from '@tmagic/stage';
 import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
 import { DragType, Layout, type MenuButton, type MenuComponent, type Services, type StageOptions } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 import NodeListMenu from './NodeListMenu.vue';
@@ -170,7 +170,7 @@ onBeforeUnmount(() => {
   services?.editorService.off('root-change', rootChangeHandler);
 });
 
-const parseDSL = getConfig('parseDSL');
+const parseDSL = getEditorConfig('parseDSL');
 
 const contextmenuHandler = (e: MouseEvent) => {
   e.preventDefault();
diff --git a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
index ae5ed5ba..c2ecad47 100644
--- a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
@@ -6,7 +6,7 @@
 import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Bottom, Top } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
diff --git a/packages/editor/src/services/codeBlock.ts b/packages/editor/src/services/codeBlock.ts
index 0888b568..2f28c21b 100644
--- a/packages/editor/src/services/codeBlock.ts
+++ b/packages/editor/src/services/codeBlock.ts
@@ -20,15 +20,15 @@ import { reactive } from 'vue';
 import { cloneDeep, get, keys, pick } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
-import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
-import type { ColumnConfig } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, Id, MNode } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL, Id, MNode, TargetOptions } from '@tmagic/core';
+import { Target, Watcher } from '@tmagic/core';
+import type { TableColumnConfig } from '@tmagic/form';
 
 import editorService from '@editor/services/editor';
 import storageService, { Protocol } from '@editor/services/storage';
 import type { AsyncHookPlugin, CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 import { COPY_CODE_STORAGE_KEY } from '@editor/utils/editor';
 
 import BaseService from './BaseService';
@@ -117,7 +117,7 @@ class CodeBlock extends BaseService {
     const codeConfigProcessed = cloneDeep(codeConfig);
     if (codeConfigProcessed.content) {
       // 在保存的时候转换代码内容
-      const parseDSL = getConfig('parseDSL');
+      const parseDSL = getEditorConfig('parseDSL');
       if (typeof codeConfigProcessed.content === 'string') {
         codeConfigProcessed.content = parseDSL<(...args: any[]) => any>(codeConfigProcessed.content);
       }
@@ -231,11 +231,11 @@ class CodeBlock extends BaseService {
     });
   }
 
-  public setParamsColConfig(config: ColumnConfig): void {
+  public setParamsColConfig(config: TableColumnConfig): void {
     this.state.paramsColConfig = config;
   }
 
-  public getParamsColConfig(): ColumnConfig | undefined {
+  public getParamsColConfig(): TableColumnConfig | undefined {
     return this.state.paramsColConfig;
   }
 
diff --git a/packages/editor/src/services/dataSource.ts b/packages/editor/src/services/dataSource.ts
index 8bbf73c9..3633c7a2 100644
--- a/packages/editor/src/services/dataSource.ts
+++ b/packages/editor/src/services/dataSource.ts
@@ -1,11 +1,10 @@
 import { reactive } from 'vue';
 import { cloneDeep, get } from 'lodash-es';
-import { Writable } from 'type-fest';
+import type { Writable } from 'type-fest';
 
-import type { EventOption } from '@tmagic/core';
-import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
+import type { DataSourceSchema, EventOption, Id, MNode, TargetOptions } from '@tmagic/core';
+import { Target, Watcher } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
-import type { DataSourceSchema, Id, MNode } from '@tmagic/schema';
 import { guid, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
diff --git a/packages/editor/src/services/dep.ts b/packages/editor/src/services/dep.ts
index 6fee3597..73ac6ac3 100644
--- a/packages/editor/src/services/dep.ts
+++ b/packages/editor/src/services/dep.ts
@@ -17,8 +17,8 @@
  */
 import { reactive } from 'vue';
 
-import { type DepExtendedData, DepTargetType, type Target, type TargetNode, Watcher } from '@tmagic/dep';
-import type { Id, MNode } from '@tmagic/schema';
+import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
+import { DepTargetType, Watcher } from '@tmagic/core';
 import { isPage } from '@tmagic/utils';
 
 import { IdleTask } from '@editor/utils/idle-task';
diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index 06bb5940..98534416 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -18,11 +18,11 @@
 
 import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
-import { Writable } from 'type-fest';
+import type { Writable } from 'type-fest';
 
-import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
-import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
+import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment, TargetOptions } from '@tmagic/core';
+import { NodeType, Target, Watcher } from '@tmagic/core';
+import { isFixed } from '@tmagic/stage';
 import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
@@ -48,7 +48,6 @@ import {
   getNodeIndex,
   getPageFragmentList,
   getPageList,
-  isFixed,
   moveItemsInContainer,
   setChildrenLayout,
   setLayout,
@@ -234,7 +233,7 @@ class Editor extends BaseService {
    * 只有容器拥有布局
    */
   public async getLayout(parent: MNode, node?: MNode | null): Promise<Layout> {
-    if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
+    if (node && typeof node !== 'function' && isFixed(node.style || {})) return Layout.FIXED;
 
     if (parent.layout) {
       return parent.layout;
@@ -1106,9 +1105,9 @@ class Editor extends BaseService {
     const newConfig = cloneDeep(dist);
 
     if (!isPop(src) && newConfig.style?.position) {
-      if (isFixed(newConfig) && !isFixed(src)) {
+      if (isFixed(newConfig.style) && !isFixed(src.style || {})) {
         newConfig.style = change2Fixed(newConfig, root);
-      } else if (!isFixed(newConfig) && isFixed(src)) {
+      } else if (!isFixed(newConfig.style) && isFixed(src.style || {})) {
         newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
       }
     }
diff --git a/packages/editor/src/services/history.ts b/packages/editor/src/services/history.ts
index 125bdf86..1a472146 100644
--- a/packages/editor/src/services/history.ts
+++ b/packages/editor/src/services/history.ts
@@ -18,7 +18,7 @@
 
 import { reactive } from 'vue';
 
-import type { MPage, MPageFragment } from '@tmagic/schema';
+import type { MPage, MPageFragment } from '@tmagic/core';
 
 import type { HistoryState, StepValue } from '@editor/type';
 import { UndoRedo } from '@editor/utils/undo-redo';
diff --git a/packages/editor/src/services/props.ts b/packages/editor/src/services/props.ts
index c0eecb05..d300d50e 100644
--- a/packages/editor/src/services/props.ts
+++ b/packages/editor/src/services/props.ts
@@ -18,11 +18,11 @@
 
 import { reactive } from 'vue';
 import { cloneDeep, mergeWith } from 'lodash-es';
-import { Writable } from 'type-fest';
+import type { Writable } from 'type-fest';
 
-import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
+import type { Id, MComponent, MNode, TargetOptions } from '@tmagic/core';
+import { Target, Watcher } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
-import type { Id, MComponent, MNode } from '@tmagic/schema';
 import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
diff --git a/packages/editor/src/services/storage.ts b/packages/editor/src/services/storage.ts
index 18d1a164..4a197d40 100644
--- a/packages/editor/src/services/storage.ts
+++ b/packages/editor/src/services/storage.ts
@@ -2,7 +2,7 @@ import serialize from 'serialize-javascript';
 import type { Writable } from 'type-fest';
 
 import type { SyncHookPlugin } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 import BaseService from './BaseService';
 
@@ -76,7 +76,7 @@ export class WebStorage extends BaseService {
 
     switch (protocol) {
       case Protocol.OBJECT:
-        return getConfig('parseDSL')(`(${item})`);
+        return getEditorConfig('parseDSL')(`(${item})`);
       case Protocol.JSON:
         return JSON.parse(item);
       case Protocol.NUMBER:
diff --git a/packages/editor/src/theme/index.scss b/packages/editor/src/theme/index.scss
index d26c45c4..3a5311f6 100644
--- a/packages/editor/src/theme/index.scss
+++ b/packages/editor/src/theme/index.scss
@@ -1,3 +1,6 @@
+@import "@tmagic/design/src/theme/index.scss";
+@import "@tmagic/table/src/theme/index.scss";
+@import "@tmagic/form/src/theme/index.scss";
 @import "./common/var.scss";
 @import "./theme.scss";
 
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index a24c714b..d2931b0c 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -18,10 +18,9 @@
 
 import type { Component } from 'vue';
 import type EventEmitter from 'events';
-import Sortable, { Options, SortableEvent } from 'sortablejs';
+import Sortable, { type Options, type SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties } from 'type-fest';
 
-import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, FormState, Input } from '@tmagic/form';
 import type {
   CodeBlockContent,
   CodeBlockDSL,
@@ -33,7 +32,16 @@ import type {
   MNode,
   MPage,
   MPageFragment,
-} from '@tmagic/schema';
+} from '@tmagic/core';
+import type {
+  ChildConfig,
+  FilterFunction,
+  FormConfig,
+  FormItem,
+  FormState,
+  Input,
+  TableColumnConfig,
+} from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
@@ -118,7 +126,7 @@ export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & Component
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
-export interface InstallOptions {
+export interface EditorInstallOptions {
   parseDSL: <T = any>(dsl: string) => T;
   [key: string]: any;
 }
@@ -445,11 +453,6 @@ export interface ComponentGroup {
   items: ComponentItem[];
 }
 
-export interface UpdateData {
-  id: Id;
-  [key: string]: any;
-}
-
 export enum LayerOffset {
   TOP = 'top',
   BOTTOM = 'bottom',
@@ -486,7 +489,7 @@ export type CodeState = {
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
   undeletableList: Id[];
-  paramsColConfig?: ColumnConfig;
+  paramsColConfig?: TableColumnConfig;
 };
 
 export type CodeRelation = {
diff --git a/packages/editor/src/utils/config.ts b/packages/editor/src/utils/config.ts
index 2e13879f..753b813c 100644
--- a/packages/editor/src/utils/config.ts
+++ b/packages/editor/src/utils/config.ts
@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { InstallOptions } from '@editor/type';
+import { EditorInstallOptions } from '@editor/type';
 
-let $TMAGIC_EDITOR: InstallOptions = {} as any;
+let $TMAGIC_EDITOR: EditorInstallOptions = {} as any;
 
-const setConfig = (option: InstallOptions): void => {
+const setEditorConfig = (option: EditorInstallOptions): void => {
   $TMAGIC_EDITOR = option;
 };
 
-const getConfig = <K extends keyof InstallOptions>(key: K): InstallOptions[K] => $TMAGIC_EDITOR[key];
+const getEditorConfig = <K extends keyof EditorInstallOptions>(key: K): EditorInstallOptions[K] => $TMAGIC_EDITOR[key];
 
-export { getConfig, setConfig };
+export { getEditorConfig, setEditorConfig };
diff --git a/packages/editor/src/utils/content-menu.ts b/packages/editor/src/utils/content-menu.ts
index 0bfa337d..d422a31b 100644
--- a/packages/editor/src/utils/content-menu.ts
+++ b/packages/editor/src/utils/content-menu.ts
@@ -1,7 +1,7 @@
 import { computed, markRaw, Ref } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
-import { Id, MContainer, NodeType } from '@tmagic/schema';
+import { Id, MContainer, NodeType } from '@tmagic/core';
 import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
diff --git a/packages/editor/src/utils/data-source/index.ts b/packages/editor/src/utils/data-source/index.ts
index 5c1aa974..46f82098 100644
--- a/packages/editor/src/utils/data-source/index.ts
+++ b/packages/editor/src/utils/data-source/index.ts
@@ -1,5 +1,5 @@
+import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/core';
 import { CascaderOption, FormConfig, FormState } from '@tmagic/form';
-import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
 import {
   DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
   dataSourceTemplateRegExp,
diff --git a/packages/editor/src/utils/editor.ts b/packages/editor/src/utils/editor.ts
index 70ef320d..1a6f910d 100644
--- a/packages/editor/src/utils/editor.ts
+++ b/packages/editor/src/utils/editor.ts
@@ -18,8 +18,8 @@
 
 import serialize from 'serialize-javascript';
 
-import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
+import { NodeType } from '@tmagic/core';
 import type StageCore from '@tmagic/stage';
 import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
@@ -81,12 +81,6 @@ export const generatePageName = (pageNameList: string[], type: NodeType.PAGE | N
 export const generatePageNameByApp = (app: MApp, type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string =>
   generatePageName(getPageNameList(type === 'page' ? getPageList(app) : getPageFragmentList(app)), type);
 
-/**
- * @param {Object} node
- * @returns {boolean}
- */
-export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
-
 export const getNodeIndex = (id: Id, parent: MContainer | MApp): number => {
   const items = parent?.items || [];
   return items.findIndex((item: MNode) => `${item.id}` === `${id}`);
diff --git a/packages/editor/src/utils/operator.ts b/packages/editor/src/utils/operator.ts
index a5564b48..61f39113 100644
--- a/packages/editor/src/utils/operator.ts
+++ b/packages/editor/src/utils/operator.ts
@@ -1,7 +1,8 @@
 import { toRaw } from 'vue';
 import { isEmpty } from 'lodash-es';
 
-import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
+import type { Id, MContainer, MNode } from '@tmagic/core';
+import { NodeType } from '@tmagic/core';
 import { calcValueByFontsize, getElById, isPage, isPageFragment } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts
index c9ac6ca6..95f140bf 100644
--- a/packages/editor/src/utils/props.ts
+++ b/packages/editor/src/utils/props.ts
@@ -17,8 +17,8 @@
  * limitations under the License.
  */
 
+import { NODE_CONDS_KEY } from '@tmagic/core';
 import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
-import { NODE_CONDS_KEY } from '@tmagic/schema';
 
 export const arrayOptions = [
   { text: '包含', value: 'include' },
diff --git a/packages/editor/src/utils/tree.ts b/packages/editor/src/utils/tree.ts
index 6cf234c6..8e1be63e 100644
--- a/packages/editor/src/utils/tree.ts
+++ b/packages/editor/src/utils/tree.ts
@@ -1,4 +1,4 @@
-import type { Id } from '@tmagic/schema';
+import type { Id } from '@tmagic/core';
 import { getKeys } from '@tmagic/utils';
 
 import type { LayerNodeStatus } from '@editor/type';
diff --git a/packages/editor/tests/unit/layouts/workspace/Stage.spec.ts b/packages/editor/tests/unit/layouts/workspace/Stage.spec.ts
index 1ccea68e..a02c33a3 100644
--- a/packages/editor/tests/unit/layouts/workspace/Stage.spec.ts
+++ b/packages/editor/tests/unit/layouts/workspace/Stage.spec.ts
@@ -18,7 +18,7 @@
 import { describe, expect, test, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import Stage from '@editor/layouts/workspace/viewer/Stage.vue';
 
diff --git a/packages/editor/tests/unit/services/editor.spec.ts b/packages/editor/tests/unit/services/editor.spec.ts
index b84838e1..ad3467dd 100644
--- a/packages/editor/tests/unit/services/editor.spec.ts
+++ b/packages/editor/tests/unit/services/editor.spec.ts
@@ -19,15 +19,15 @@
 import { beforeAll, describe, expect, test } from 'vitest';
 import { cloneDeep } from 'lodash-es';
 
-import type { MApp } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
+import type { MApp } from '@tmagic/core';
+import { NodeType } from '@tmagic/core';
 
 import editorService from '@editor/services/editor';
 import historyService from '@editor/services/history';
 import storageService from '@editor/services/storage';
-import { COPY_STORAGE_KEY, setConfig } from '@editor/utils';
+import { COPY_STORAGE_KEY, setEditorConfig } from '@editor/utils';
 
-setConfig({
+setEditorConfig({
   // eslint-disable-next-line no-eval
   parseDSL: (dsl: string) => eval(dsl),
 });
diff --git a/packages/editor/tests/unit/services/props.spec.ts b/packages/editor/tests/unit/services/props.spec.ts
index 43d9da32..e2b8173e 100644
--- a/packages/editor/tests/unit/services/props.spec.ts
+++ b/packages/editor/tests/unit/services/props.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import props from '@editor/services/props';
 
diff --git a/packages/editor/tests/unit/utils/editor.spec.ts b/packages/editor/tests/unit/utils/editor.spec.ts
index 1e050574..7fbab28d 100644
--- a/packages/editor/tests/unit/utils/editor.spec.ts
+++ b/packages/editor/tests/unit/utils/editor.spec.ts
@@ -17,7 +17,7 @@
  */
 import { describe, expect, test } from 'vitest';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import * as editor from '@editor/utils/editor';
 
@@ -60,40 +60,6 @@ describe('util form', () => {
   });
 });
 
-describe('isFixed', () => {
-  test('true', () => {
-    expect(
-      editor.isFixed({
-        type: 'text',
-        id: 1,
-        style: {
-          position: 'fixed',
-        },
-      }),
-    ).toBeTruthy();
-  });
-
-  test('false', () => {
-    expect(
-      editor.isFixed({
-        type: 'text',
-        id: 1,
-        style: {
-          position: 'absolute',
-        },
-      }),
-    ).toBeFalsy();
-
-    expect(
-      editor.isFixed({
-        type: 'text',
-        id: 1,
-        style: {},
-      }),
-    ).toBeFalsy();
-  });
-});
-
 describe('getNodeIndex', () => {
   test('能获取到', () => {
     const index = editor.getNodeIndex(1, {
diff --git a/packages/element-plus-adapter/src/index.ts b/packages/element-plus-adapter/src/index.ts
index 25e4b353..309f0488 100644
--- a/packages/element-plus-adapter/src/index.ts
+++ b/packages/element-plus-adapter/src/index.ts
@@ -61,6 +61,7 @@ import type {
   ColorPickerProps,
   ColProps,
   DatePickerProps,
+  DesignPluginOptions,
   DialogProps,
   DividerProps,
   DrawerProps,
@@ -74,7 +75,6 @@ import type {
   OptionGroupProps,
   OptionProps,
   PaginationProps,
-  PluginOptions,
   RadioButtonProps,
   RadioGroupProps,
   RadioProps,
@@ -93,7 +93,7 @@ import type {
   UploadProps,
 } from '@tmagic/design';
 
-const adapter: PluginOptions = {
+const adapter: DesignPluginOptions = {
   useZIndex,
   message: ElMessage,
   messageBox: ElMessageBox,
diff --git a/packages/form/package.json b/packages/form/package.json
index cfe1f645..589f0f11 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -41,6 +41,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@popperjs/core": "^2.11.8",
+    "dayjs": "^1.11.11",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.15.2"
   },
diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index 8ec062bc..da1542c8 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -206,7 +206,7 @@ import {
 } from '@tmagic/design';
 import { asyncLoadJs, sleep } from '@tmagic/utils';
 
-import { ColumnConfig, FormState, SortProp, TableConfig } from '../schema';
+import { FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
 import { display as displayFunc, initValue } from '../utils/form';
 
 import Container from './Container.vue';
@@ -484,7 +484,7 @@ const toggleRowSelection = (row: any, selected: boolean) => {
   tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
 };
 
-const makeConfig = (config: ColumnConfig, row: any) => {
+const makeConfig = (config: TableColumnConfig, row: any) => {
   const newConfig = cloneDeep(config);
   if (typeof config.itemsFunction === 'function') {
     newConfig.items = config.itemsFunction(row);
diff --git a/packages/form/src/containers/Tabs.vue b/packages/form/src/containers/Tabs.vue
index 6595dadb..2fb310af 100644
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@@ -73,7 +73,7 @@
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash-es';
 
-import { getConfig, TMagicBadge } from '@tmagic/design';
+import { getDesignConfig, TMagicBadge } from '@tmagic/design';
 
 import { FormState, TabConfig, TabPaneConfig } from '../schema';
 import { display as displayFunc, filterFunction } from '../utils/form';
@@ -88,8 +88,8 @@ type DiffCount = {
   [tabIndex: number]: number;
 };
 
-const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components')?.tabs;
+const tabPaneComponent = getDesignConfig('components')?.tabPane;
+const tabsComponent = getDesignConfig('components')?.tabs;
 
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;
diff --git a/packages/form/src/fields/Date.vue b/packages/form/src/fields/Date.vue
index 155319f9..571eccc6 100644
--- a/packages/form/src/fields/Date.vue
+++ b/packages/form/src/fields/Date.vue
@@ -13,9 +13,9 @@
 
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DateConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
diff --git a/packages/form/src/fields/DateTime.vue b/packages/form/src/fields/DateTime.vue
index 8e7d4eec..22d68b76 100644
--- a/packages/form/src/fields/DateTime.vue
+++ b/packages/form/src/fields/DateTime.vue
@@ -15,9 +15,9 @@
 
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DateTimeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
diff --git a/packages/form/src/fields/Daterange.vue b/packages/form/src/fields/Daterange.vue
index d737a2a4..f22d6bce 100644
--- a/packages/form/src/fields/Daterange.vue
+++ b/packages/form/src/fields/Daterange.vue
@@ -20,9 +20,9 @@
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
diff --git a/packages/form/src/fields/Select.vue b/packages/form/src/fields/Select.vue
index 609a9a86..bdb110dc 100644
--- a/packages/form/src/fields/Select.vue
+++ b/packages/form/src/fields/Select.vue
@@ -80,7 +80,7 @@
 <script lang="ts" setup>
 import { inject, nextTick, onBeforeMount, ref, watch, watchEffect } from 'vue';
 
-import { getConfig as getDesignConfig, TMagicSelect } from '@tmagic/design';
+import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
 
 import type { FieldProps, FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index bac2bcc1..a37996dd 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -91,14 +91,14 @@ export { default as MDynamicField } from './fields/DynamicField.vue';
 
 export const createForm = <T extends [] = []>(config: FormConfig | T) => config;
 
-export interface InstallOptions {
+export interface FormInstallOptions {
   [key: string]: any;
 }
 
-const defaultInstallOpt: InstallOptions = {};
+const defaultInstallOpt: FormInstallOptions = {};
 
 export default {
-  install(app: App, opt: InstallOptions = {}) {
+  install(app: App, opt: FormInstallOptions = {}) {
     const option = Object.assign(defaultInstallOpt, opt);
 
     // eslint-disable-next-line no-param-reassign
diff --git a/packages/form/src/schema.ts b/packages/form/src/schema.ts
index b28e5e9b..94c5c5f8 100644
--- a/packages/form/src/schema.ts
+++ b/packages/form/src/schema.ts
@@ -635,7 +635,7 @@ export interface PanelConfig extends FormItem, ContainerCommonConfig {
   schematic?: string;
 }
 
-export interface ColumnConfig extends FormItem {
+export interface TableColumnConfig extends FormItem {
   name?: string;
   label: string;
   width?: string | number;
@@ -648,9 +648,9 @@ export interface ColumnConfig extends FormItem {
  */
 export interface TableConfig extends FormItem {
   type: 'table' | 'groupList' | 'group-list';
-  items: ColumnConfig[];
-  tableItems?: ColumnConfig[];
-  groupItems?: ColumnConfig[];
+  items: TableColumnConfig[];
+  tableItems?: TableColumnConfig[];
+  groupItems?: TableColumnConfig[];
   enableToggleMode?: boolean;
   /** 最大行数 */
   max?: number;
diff --git a/packages/form/src/utils/form.ts b/packages/form/src/utils/form.ts
index efe56b98..0a6e1998 100644
--- a/packages/form/src/utils/form.ts
+++ b/packages/form/src/utils/form.ts
@@ -18,6 +18,8 @@
 
 /* eslint-disable no-param-reassign */
 import { toRaw } from 'vue';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
 
 import {
@@ -271,3 +273,28 @@ export const initValue = async (
 
   return valuesTmp || {};
 };
+
+export const datetimeFormatter = (
+  v: string | Date,
+  defaultValue = '-',
+  format = 'YYYY-MM-DD HH:mm:ss',
+): string | number => {
+  if (v) {
+    let time: string | number;
+    if (['x', 'timestamp'].includes(format)) {
+      time = dayjs(v).valueOf();
+    } else if ((typeof v === 'string' && v.includes('Z')) || v.constructor === Date) {
+      dayjs.extend(utc);
+      // UTC字符串时间或Date对象格式化为北京时间
+      time = dayjs(v).utcOffset(8).format(format);
+    } else {
+      time = dayjs(v).format(format);
+    }
+
+    if (time !== 'Invalid Date') {
+      return time;
+    }
+    return defaultValue;
+  }
+  return defaultValue;
+};
diff --git a/packages/form/tests/unit/utils/form.spec.ts b/packages/form/tests/unit/utils/form.spec.ts
index a71f6fba..6f321487 100644
--- a/packages/form/tests/unit/utils/form.spec.ts
+++ b/packages/form/tests/unit/utils/form.spec.ts
@@ -17,8 +17,8 @@
  */
 
 import { describe, expect, test } from 'vitest';
-import { FormState } from '@form/index';
-import { display, filterFunction, getRules, initValue } from '@form/utils/form';
+import type { FormState } from '@form/index';
+import { datetimeFormatter, display, filterFunction, getRules, initValue } from '@form/utils/form';
 
 // form state mock 数据
 const mForm: FormState = {
@@ -26,6 +26,8 @@ const mForm: FormState = {
   initValues: {},
   parentValues: {},
   values: {},
+  lastValues: {},
+  isCompare: false,
   $emit: (event: string) => event,
   setField: (prop: string, field: any) => field,
   getField: (prop: string) => prop,
@@ -306,3 +308,34 @@ describe('initValue', () => {
     expect(values.table[0].a).toBe(1);
   });
 });
+
+describe('datetimeFormatter', () => {
+  // Date会将时间转为UTC
+  const date = new Date('2021-07-17T15:37:00');
+  const dateValue = '2021-07-17 15:37:00';
+  const defaultValue = '默认值';
+
+  test('v为空且未设置默认时间', () => {
+    expect(datetimeFormatter('')).toBe('-');
+  });
+
+  test('v是字符串且未设置了默认时间', () => {
+    expect(datetimeFormatter('abc', defaultValue)).toMatch(defaultValue);
+  });
+
+  test('v是日期字符串', () => {
+    expect(datetimeFormatter(date.toISOString(), defaultValue)).toMatch(dateValue);
+  });
+
+  test('v是Date对象', () => {
+    expect(datetimeFormatter(date)).toMatch(dateValue);
+  });
+
+  test('v是UTC字符串', () => {
+    expect(datetimeFormatter(date.toUTCString())).toMatch(dateValue);
+  });
+
+  test('format是x', () => {
+    expect(datetimeFormatter(date.toISOString(), defaultValue, 'timestamp')).toBe(date.getTime());
+  });
+});
diff --git a/packages/stage/src/index.ts b/packages/stage/src/index.ts
index 00ca34f4..a18337b0 100644
--- a/packages/stage/src/index.ts
+++ b/packages/stage/src/index.ts
@@ -18,14 +18,16 @@
 
 import StageCore from './StageCore';
 
+export * from 'moveable';
 export type { GuidesOptions } from '@scena/guides';
+
 export { default as StageRender } from './StageRender';
 export { default as StageMask } from './StageMask';
 export { default as StageDragResize } from './StageDragResize';
-export * from 'moveable';
 export * from './types';
 export * from './const';
 export * from './util';
 export * from './MoveableActionsAble';
 export { default as MoveableActionsAble } from './MoveableActionsAble';
+
 export default StageCore;
diff --git a/packages/stage/src/util.ts b/packages/stage/src/util.ts
index 10a2c264..dec15ba0 100644
--- a/packages/stage/src/util.ts
+++ b/packages/stage/src/util.ts
@@ -88,13 +88,13 @@ export const getAbsolutePosition = (el: HTMLElement, { top, left }: Offset) => {
   return { left, top };
 };
 
-export const isAbsolute = (style: CSSStyleDeclaration): boolean => style.position === 'absolute';
+export const isAbsolute = (style: { position?: string }): boolean => style.position === 'absolute';
 
-export const isRelative = (style: CSSStyleDeclaration): boolean => style.position === 'relative';
+export const isRelative = (style: { position?: string }): boolean => style.position === 'relative';
 
-export const isStatic = (style: CSSStyleDeclaration): boolean => style.position === 'static';
+export const isStatic = (style: { position?: string }): boolean => style.position === 'static';
 
-export const isFixed = (style: CSSStyleDeclaration): boolean => style.position === 'fixed';
+export const isFixed = (style: { position?: string }): boolean => style.position === 'fixed';
 
 export const isFixedParent = (el: Element) => {
   let fixed = false;
diff --git a/packages/stage/tests/unit/util.spec.ts b/packages/stage/tests/unit/util.spec.ts
index 429a9aa0..d946629d 100644
--- a/packages/stage/tests/unit/util.spec.ts
+++ b/packages/stage/tests/unit/util.spec.ts
@@ -135,3 +135,23 @@ describe('getAbsolutePosition', () => {
     expect(offset.top).toBe(100);
   });
 });
+
+describe('isFixed', () => {
+  test('true', () => {
+    expect(
+      util.isFixed({
+        position: 'fixed',
+      }),
+    ).toBeTruthy();
+  });
+
+  test('false', () => {
+    expect(
+      util.isFixed({
+        position: 'absolute',
+      }),
+    ).toBeFalsy();
+
+    expect(util.isFixed({})).toBeFalsy();
+  });
+});
diff --git a/packages/table/package.json b/packages/table/package.json
index 29b03d11..e44d6922 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -52,7 +52,6 @@
   "peerDependencies": {
     "@tmagic/design": "workspace:*",
     "@tmagic/form": "workspace:*",
-    "@tmagic/utils": "workspace:*",
     "vue": "^3.4.35",
     "typescript": "*"
   },
diff --git a/packages/table/src/Table.vue b/packages/table/src/Table.vue
index 58253e22..be84b439 100644
--- a/packages/table/src/Table.vue
+++ b/packages/table/src/Table.vue
@@ -66,7 +66,7 @@
 import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import { getConfig, TMagicTable } from '@tmagic/design';
+import { getDesignConfig, TMagicTable } from '@tmagic/design';
 
 import ActionsColumn from './ActionsColumn.vue';
 import ComponentColumn from './ComponentColumn.vue';
@@ -121,7 +121,7 @@ const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
 
 const editState = ref([]);
 
-const tableColumnComponent = getConfig('components')?.tableColumn;
+const tableColumnComponent = getDesignConfig('components')?.tableColumn;
 const selectionColumn = computed(() => {
   const column = props.columns.filter((item) => item.selection);
   return column.length ? column[0] : null;
@@ -198,21 +198,3 @@ defineExpose({
   clearSelection,
 });
 </script>
-
-<style lang="scss">
-.m-table {
-  .el-button.action-btn + .el-button.action-btn {
-    margin-left: 0;
-  }
-  .keep-all {
-    word-break: keep-all;
-  }
-  .el-table .cell > div {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  .el-table__row.el-table__row--level-1 {
-    color: #999;
-  }
-}
-</style>
diff --git a/packages/table/src/index.ts b/packages/table/src/index.ts
index 36db3fbc..a7d99527 100644
--- a/packages/table/src/index.ts
+++ b/packages/table/src/index.ts
@@ -20,6 +20,8 @@ import { App } from 'vue';
 
 import Table from './Table.vue';
 
+import './theme/index.scss';
+
 export { default as MagicTable } from './Table.vue';
 export * from './schema';
 export * from './utils';
diff --git a/packages/table/src/theme/index.scss b/packages/table/src/theme/index.scss
new file mode 100644
index 00000000..f6b3fabf
--- /dev/null
+++ b/packages/table/src/theme/index.scss
@@ -0,0 +1,15 @@
+.m-table {
+  .el-button.action-btn + .el-button.action-btn {
+    margin-left: 0;
+  }
+  .keep-all {
+    word-break: keep-all;
+  }
+  .el-table .cell > div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .el-table__row.el-table__row--level-1 {
+    color: #999;
+  }
+}
diff --git a/packages/table/src/utils.ts b/packages/table/src/utils.ts
index ecc89bd1..7990f9a0 100644
--- a/packages/table/src/utils.ts
+++ b/packages/table/src/utils.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { datetimeFormatter } from '@tmagic/utils';
+import { datetimeFormatter } from '@tmagic/form';
 
 import { ColumnConfig } from './schema';
 
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 9ea99d19..e751dba9 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -10,10 +10,6 @@
       "types": "./types/index.d.ts",
       "import": "./dist/tmagic-utils.js",
       "require": "./dist/tmagic-utils.umd.cjs"
-    },
-    "./resetcss.css": {
-      "import": "./src/resetcss.css",
-      "require": "./src/resetcss.css"
     }
   },
   "files": [
@@ -33,7 +29,6 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "dayjs": "^1.11.11",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 89134869..09f942e1 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 import { cloneDeep, set as objectSet } from 'lodash-es';
 
 import type { DataSchema, DataSourceDeps, Id, MComponent, MNode, MNodeInstance } from '@tmagic/schema';
@@ -33,31 +31,6 @@ export const sleep = (ms: number): Promise<void> =>
     }, ms);
   });
 
-export const datetimeFormatter = (
-  v: string | Date,
-  defaultValue = '-',
-  format = 'YYYY-MM-DD HH:mm:ss',
-): string | number => {
-  if (v) {
-    let time: string | number;
-    if (['x', 'timestamp'].includes(format)) {
-      time = dayjs(v).valueOf();
-    } else if ((typeof v === 'string' && v.includes('Z')) || v.constructor === Date) {
-      dayjs.extend(utc);
-      // UTC字符串时间或Date对象格式化为北京时间
-      time = dayjs(v).utcOffset(8).format(format);
-    } else {
-      time = dayjs(v).format(format);
-    }
-
-    if (time !== 'Invalid Date') {
-      return time;
-    }
-    return defaultValue;
-  }
-  return defaultValue;
-};
-
 // 驼峰转换横线
 export const toLine = (name = '') => name.replace(/\B([A-Z])/g, '-$1').toLowerCase();
 
diff --git a/packages/utils/tests/unit/index.spec.ts b/packages/utils/tests/unit/index.spec.ts
index 3c95c2db..b7781a6c 100644
--- a/packages/utils/tests/unit/index.spec.ts
+++ b/packages/utils/tests/unit/index.spec.ts
@@ -22,37 +22,6 @@ import type { DataSchema } from '@tmagic/schema';
 
 import * as util from '../../src';
 
-describe('datetimeFormatter', () => {
-  // Date会将时间转为UTC
-  const date = new Date('2021-07-17T15:37:00');
-  const dateValue = '2021-07-17 15:37:00';
-  const defaultValue = '默认值';
-
-  test('v为空且未设置默认时间', () => {
-    expect(util.datetimeFormatter('')).toBe('-');
-  });
-
-  test('v是字符串且未设置了默认时间', () => {
-    expect(util.datetimeFormatter('abc', defaultValue)).toMatch(defaultValue);
-  });
-
-  test('v是日期字符串', () => {
-    expect(util.datetimeFormatter(date.toISOString(), defaultValue)).toMatch(dateValue);
-  });
-
-  test('v是Date对象', () => {
-    expect(util.datetimeFormatter(date)).toMatch(dateValue);
-  });
-
-  test('v是UTC字符串', () => {
-    expect(util.datetimeFormatter(date.toUTCString())).toMatch(dateValue);
-  });
-
-  test('format是x', () => {
-    expect(util.datetimeFormatter(date.toISOString(), defaultValue, 'timestamp')).toBe(date.getTime());
-  });
-});
-
 describe('asyncLoadJs', () => {
   const url = 'https://m.film.qq.com/magic-ui/production/1/1625056093304/magic/magic-ui.umd.min.js';
 
diff --git a/playground/package.json b/playground/package.json
index 978217a8..2e9d4e68 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -14,14 +14,9 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@tmagic/core": "1.5.0-beta.4",
-    "@tmagic/design": "1.5.0-beta.4",
     "@tmagic/editor": "1.5.0-beta.4",
     "@tmagic/element-plus-adapter": "1.5.0-beta.4",
-    "@tmagic/form": "1.5.0-beta.4",
     "@tmagic/tmagic-form-runtime": "1.1.1",
-    "@tmagic/schema": "1.5.0-beta.4",
-    "@tmagic/stage": "1.5.0-beta.4",
-    "@tmagic/utils": "1.5.0-beta.4",
     "element-plus": "^2.8.0",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.48.0",
diff --git a/playground/src/components/DeviceGroup.vue b/playground/src/components/DeviceGroup.vue
index ebd1b317..b8d1320a 100644
--- a/playground/src/components/DeviceGroup.vue
+++ b/playground/src/components/DeviceGroup.vue
@@ -9,10 +9,9 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, ref } from 'vue';
 
-import Core from '@tmagic/core';
-import { TMagicRadioButton, TMagicRadioGroup } from '@tmagic/design';
+import type Core from '@tmagic/core';
 import type { Services } from '@tmagic/editor';
-import { convertToNumber } from '@tmagic/utils';
+import { convertToNumber, TMagicRadioButton, TMagicRadioGroup } from '@tmagic/editor';
 
 import { DeviceType, uaMap } from '../const';
 
@@ -49,7 +48,7 @@ const stageContainerRect = computed(() => services?.uiService.get('stageContaine
 const calcFontsize = () => {
   if (!services) return;
 
-  const iframe = services.editorService.get('stage')?.renderer.iframe;
+  const iframe = services.editorService.get('stage')?.renderer?.iframe;
   if (!iframe?.contentWindow) return;
 
   const app: Core = (iframe.contentWindow as any).appInstance;
diff --git a/playground/src/components/NavMenu.vue b/playground/src/components/NavMenu.vue
index 28a1873a..08c16286 100644
--- a/playground/src/components/NavMenu.vue
+++ b/playground/src/components/NavMenu.vue
@@ -16,8 +16,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 
-import { TMagicButton, TMagicIcon } from '@tmagic/design';
-import { MenuButton } from '@tmagic/editor';
+import { MenuButton, TMagicButton, TMagicIcon } from '@tmagic/editor';
 
 export default defineComponent({
   name: 'nav-menu',
diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts
index fc42b8c3..a831945c 100644
--- a/playground/src/configs/dsl.ts
+++ b/playground/src/configs/dsl.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { ActionType, type MApp, NodeType } from '@tmagic/schema';
+import { ActionType, type MApp, NodeType } from '@tmagic/core';
 
 const dsl: MApp = {
   id: '1',
diff --git a/playground/src/configs/formDsl.ts b/playground/src/configs/formDsl.ts
index e0eb8615..d60c113a 100644
--- a/playground/src/configs/formDsl.ts
+++ b/playground/src/configs/formDsl.ts
@@ -1,4 +1,4 @@
-import { createForm } from '@tmagic/form';
+import { createForm } from '@tmagic/editor';
 
 export default createForm([
   {
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 1f779efe..a0690f51 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -24,19 +24,14 @@ import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
-import TMagicDesign from '@tmagic/design';
-import MagicEditor from '@tmagic/editor';
+import editorPlugin from '@tmagic/editor';
 import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
-import MagicForm from '@tmagic/form';
 
 import App from './App.vue';
 import router from './route';
 
 import 'element-plus/dist/index.css';
-import '@tmagic/design/dist/style.css';
 import '@tmagic/editor/dist/style.css';
-import '@tmagic/form/dist/style.css';
-import '@tmagic/table/dist/style.css';
 
 // @ts-ignore
 globalThis.MonacoEnvironment = {
@@ -61,7 +56,5 @@ monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
 
 const app = createApp(App);
 app.use(router);
-app.use(TMagicDesign, MagicElementPlusAdapter);
-app.use(MagicEditor);
-app.use(MagicForm);
+app.use(editorPlugin, MagicElementPlusAdapter);
 app.mount('#app');
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 34667f59..01627dec 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -46,23 +46,28 @@ import { Coin, Connection, CopyDocument, Document, DocumentCopy } from '@element
 import { cloneDeep } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
-import { TMagicDialog, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import type { MApp, MContainer, MNode } from '@tmagic/core';
+import { NodeType } from '@tmagic/core';
+import type {
+  CustomizeMoveableOptionsCallbackConfig,
+  DatasourceTypeOption,
+  MenuBarData,
+  MenuButton,
+  MoveableOptions,
+  Services,
+} from '@tmagic/editor';
 import {
+  asyncLoadJs,
+  calcValueByFontsize,
   ContentMenu,
   COPY_STORAGE_KEY,
-  type DatasourceTypeOption,
   editorService,
-  type MenuBarData,
-  type MenuButton,
-  type MoveableOptions,
   propsService,
-  type Services,
+  TMagicDialog,
   TMagicEditor,
+  tMagicMessage,
+  tMagicMessageBox,
 } from '@tmagic/editor';
-import type { MApp, MContainer, MNode } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
-import type { CustomizeMoveableOptionsCallbackConfig } from '@tmagic/stage';
-import { asyncLoadJs, calcValueByFontsize } from '@tmagic/utils';
 
 import DeviceGroup from '../components/DeviceGroup.vue';
 import componentGroupList from '../configs/componentGroupList';
@@ -122,10 +127,10 @@ const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>):
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
       const initialLeft =
-        calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
+        calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
         services.uiService.get('zoom');
       const initialTop =
-        calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
+        calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
         services.uiService.get('zoom');
       services?.editorService?.paste({ left: initialLeft, top: initialTop }, collectorOptions);
     } else {
diff --git a/playground/src/pages/Form.vue b/playground/src/pages/Form.vue
index 01311227..11a0374e 100644
--- a/playground/src/pages/Form.vue
+++ b/playground/src/pages/Form.vue
@@ -30,9 +30,7 @@ import { markRaw, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Coin } from '@element-plus/icons-vue';
 
-import { TMagicDialog, tMagicMessage } from '@tmagic/design';
-import { MenuButton } from '@tmagic/editor';
-import { MForm } from '@tmagic/form';
+import { MenuButton, MForm, TMagicDialog, tMagicMessage } from '@tmagic/editor';
 
 import NavMenu from '../components/NavMenu.vue';
 import formDsl from '../configs/formDsl';
diff --git a/playground/src/pages/FormEditor.vue b/playground/src/pages/FormEditor.vue
index 05467e6e..e46996eb 100644
--- a/playground/src/pages/FormEditor.vue
+++ b/playground/src/pages/FormEditor.vue
@@ -18,20 +18,19 @@
   </TMagicEditor>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Document } from '@element-plus/icons-vue';
 
+import { guid, type MApp, NodeType } from '@tmagic/core';
 import { MenuBarData, SideBarData, TMagicEditor, traverseNode } from '@tmagic/editor';
-import { type MApp, NodeType } from '@tmagic/schema';
 import {
   canSelect,
   COMPONENT_GROUP_LIST as componentGroupList,
   propsConfigs,
   useRuntime,
 } from '@tmagic/tmagic-form-runtime';
-import { guid } from '@tmagic/utils';
 
 import formDsl from '../configs/formDsl';
 
diff --git a/playground/src/pages/Table.vue b/playground/src/pages/Table.vue
index 30e5649e..f2c0f226 100644
--- a/playground/src/pages/Table.vue
+++ b/playground/src/pages/Table.vue
@@ -19,9 +19,8 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { tMagicMessage, TMagicTabPane, TMagicTabs } from '@tmagic/design';
-import { MenuButton, TMagicCodeEditor } from '@tmagic/editor';
-import { type ColumnConfig, MagicTable } from '@tmagic/table';
+import type { ColumnConfig } from '@tmagic/editor';
+import { MagicTable, MenuButton, TMagicCodeEditor, tMagicMessage, TMagicTabPane, TMagicTabs } from '@tmagic/editor';
 
 import NavMenu from '../components/NavMenu.vue';
 
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 043887c1..f8a582af 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -50,16 +50,16 @@ export default defineConfig({
         replacement: path.join(__dirname, '../packages/editor/src/theme/index.scss'),
       },
       {
-        find: /^@tmagic\/form\/dist\/style.css/,
+        find: /^@tmagic\/form\/src\/theme\/index.scss/,
         replacement: path.join(__dirname, '../packages/form/src/theme/index.scss'),
       },
       {
-        find: /^@tmagic\/table\/dist\/style.css/,
-        replacement: path.join(__dirname, '../packages/table/dist/style.css'),
+        find: /^@tmagic\/table\/src\/theme\/index.scss/,
+        replacement: path.join(__dirname, '../packages/table/src/theme/index.scss'),
       },
       {
-        find: /^@tmagic\/design\/dist\/style.css/,
-        replacement: path.join(__dirname, '../packages/design/dist/style.css'),
+        find: /^@tmagic\/design\/src\/theme\/index.scss/,
+        replacement: path.join(__dirname, '../packages/design/src/theme/index.scss'),
       },
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../packages/core/src/index.ts') },
       { find: /^@editor/, replacement: path.join(__dirname, '../packages/editor/src/') },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd8e3052..ae0d5593 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -174,6 +174,9 @@ importers:
       '@tmagic/data-source':
         specifier: workspace:*
         version: link:../data-source
+      '@tmagic/dep':
+        specifier: workspace:*
+        version: link:../dep
       '@tmagic/schema':
         specifier: workspace:*
         version: link:../schema
@@ -211,15 +214,6 @@ importers:
       '@tmagic/core':
         specifier: workspace:*
         version: link:../core
-      '@tmagic/dep':
-        specifier: workspace:*
-        version: link:../dep
-      '@tmagic/schema':
-        specifier: workspace:*
-        version: link:../schema
-      '@tmagic/utils':
-        specifier: workspace:*
-        version: link:../utils
       deep-state-observer:
         specifier: ^5.5.13
         version: 5.5.13
@@ -310,18 +304,12 @@ importers:
       '@tmagic/core':
         specifier: workspace:*
         version: link:../core
-      '@tmagic/dep':
-        specifier: workspace:*
-        version: link:../dep
       '@tmagic/design':
         specifier: workspace:*
         version: link:../design
       '@tmagic/form':
         specifier: workspace:*
         version: link:../form
-      '@tmagic/schema':
-        specifier: workspace:*
-        version: link:../schema
       '@tmagic/stage':
         specifier: workspace:*
         version: link:../stage
@@ -447,6 +435,9 @@ importers:
       '@tmagic/utils':
         specifier: workspace:*
         version: link:../utils
+      dayjs:
+        specifier: ^1.11.11
+        version: 1.11.12
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -567,9 +558,6 @@ importers:
       '@tmagic/form':
         specifier: workspace:*
         version: link:../form
-      '@tmagic/utils':
-        specifier: workspace:*
-        version: link:../utils
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -727,9 +715,6 @@ importers:
       '@tmagic/schema':
         specifier: workspace:*
         version: link:../schema
-      dayjs:
-        specifier: ^1.11.11
-        version: 1.11.12
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -758,30 +743,15 @@ importers:
       '@tmagic/core':
         specifier: 1.5.0-beta.4
         version: 1.5.0-beta.4(@tmagic/data-source@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/design':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
       '@tmagic/editor':
         specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/stage@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(monaco-editor@0.48.0)(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
+        version: 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(monaco-editor@0.48.0)(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
       '@tmagic/element-plus-adapter':
         specifier: 1.5.0-beta.4
         version: 1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(element-plus@2.8.1(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4)))(typescript@5.5.4)
-      '@tmagic/form':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/schema':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(typescript@5.5.4)
-      '@tmagic/stage':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
       '@tmagic/tmagic-form-runtime':
         specifier: 1.1.1
-        version: 1.1.1(xof2eodu4mh3yoyjjdd3t6myyu)
-      '@tmagic/utils':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4)
+        version: 1.1.1(@tmagic/core@1.5.0-beta.4)(@tmagic/editor@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(monaco-editor@0.48.0)(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(element-plus@2.8.1(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
       element-plus:
         specifier: ^2.8.0
         version: 2.8.1(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
@@ -1169,18 +1139,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
-      '@tmagic/data-source':
-        specifier: workspace:^
-        version: link:../../packages/data-source
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
       '@tmagic/stage':
         specifier: workspace:^
         version: link:../../packages/stage
-      '@tmagic/utils':
-        specifier: workspace:^
-        version: link:../../packages/utils
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -1212,21 +1173,12 @@ importers:
       '@tmagic/editor':
         specifier: workspace:^
         version: link:../../packages/editor
-      '@tmagic/form':
-        specifier: workspace:^
-        version: link:../../packages/form
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
-      '@tmagic/stage':
-        specifier: workspace:^
-        version: link:../../packages/stage
-      '@tmagic/utils':
-        specifier: workspace:^
-        version: link:../../packages/utils
       element-plus:
         specifier: '>=2.8.0'
         version: 2.8.1(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
+      typescript:
+        specifier: '*'
+        version: 5.5.4
       vue:
         specifier: '>=3.4.27'
         version: 3.4.35(typescript@5.5.4)
@@ -1243,9 +1195,6 @@ importers:
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
-      typescript:
-        specifier: ^5.4.5
-        version: 5.5.4
       vite:
         specifier: ^5.3.5
         version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
@@ -1258,18 +1207,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
-      '@tmagic/data-source':
-        specifier: workspace:^
-        version: link:../../packages/data-source
-      '@tmagic/schema':
-        specifier: workspace:^
-        version: link:../../packages/schema
       '@tmagic/stage':
         specifier: workspace:^
         version: link:../../packages/stage
-      '@tmagic/utils':
-        specifier: workspace:^
-        version: link:../../packages/utils
       '@vue/composition-api':
         specifier: '>=1.7.2'
         version: 1.7.2(vue@3.4.35(typescript@5.5.4))
@@ -1298,18 +1238,9 @@ importers:
       '@tmagic/core':
         specifier: 1.5.0-beta.4
         version: 1.5.0-beta.4(@tmagic/data-source@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/data-source':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/schema':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(typescript@5.5.4)
       '@tmagic/stage':
         specifier: 1.5.0-beta.4
         version: 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/utils':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4)
       '@tmagic/vue-runtime-help':
         specifier: ^0.1.2
         version: 0.1.4(@tmagic/core@1.5.0-beta.4)(@tmagic/stage@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.5.4)(vue@2.7.16)
@@ -1356,20 +1287,11 @@ importers:
       '@tmagic/core':
         specifier: 1.5.0-beta.4
         version: 1.5.0-beta.4(@tmagic/data-source@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/data-source':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/schema':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(typescript@5.5.4)
       '@tmagic/stage':
         specifier: 1.5.0-beta.4
         version: 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/utils':
-        specifier: 1.5.0-beta.4
-        version: 1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4)
       '@tmagic/vue-runtime-help':
-        specifier: ^0.1.2
+        specifier: ^0.1.3
         version: 0.1.4(@tmagic/core@1.5.0-beta.4)(@tmagic/stage@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
       axios:
         specifier: ^0.25.0
@@ -2915,18 +2837,6 @@ packages:
       typescript:
         optional: true
 
-  '@tmagic/form@1.5.0-beta.4':
-    resolution: {integrity: sha512-O3rtV3IucE1M2ciwqOBKKc1FIf9iZefvOMj+Vkn0nFX24WnhO0Jy7h6NctPSAFMth5l2WdJsaXBtTuTHw1y8Lg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@tmagic/design': 1.5.0-beta.4
-      '@tmagic/utils': 1.5.0-beta.4
-      typescript: '*'
-      vue: ^3.4.35
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@tmagic/react-runtime-help@0.0.2':
     resolution: {integrity: sha512-ZMq+1i3Lv0TMjcFsE6uLyGS4t6IlKvbo2spxBhUxOLUV/vnn+9RoYpZUiykaW8aoFt7VmXJwPbICjNep008nUw==}
     engines: {node: '>=18'}
@@ -7931,16 +7841,14 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/editor@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/stage@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(monaco-editor@0.48.0)(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
+  '@tmagic/editor@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(monaco-editor@0.48.0)(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.4.35(typescript@5.5.4))
       '@tmagic/core': 1.5.0-beta.4(@tmagic/data-source@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
       '@tmagic/dep': 1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
       '@tmagic/design': 1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/form': 1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
       '@tmagic/schema': 1.5.0-beta.4(typescript@5.5.4)
-      '@tmagic/stage': 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/table': 1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
+      '@tmagic/table': 1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
       '@tmagic/utils': 1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4)
       buffer: 6.0.3
       color: 3.2.1
@@ -7964,17 +7872,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/form@1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
-    dependencies:
-      '@element-plus/icons-vue': 2.3.1(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/design': 1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/utils': 1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4)
-      lodash-es: 4.17.21
-      sortablejs: 1.15.2
-      vue: 3.4.35(typescript@5.5.4)
-    optionalDependencies:
-      typescript: 5.5.4
-
   '@tmagic/react-runtime-help@0.0.2(@tmagic/core@1.5.0-beta.4)(@tmagic/data-source@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/stage@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.5.4)':
     dependencies:
       '@tmagic/core': 1.5.0-beta.4(@tmagic/data-source@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
@@ -8006,23 +7903,20 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/table@1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
+  '@tmagic/table@1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@tmagic/design': 1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/form': 1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
       '@tmagic/utils': 1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4)
       lodash-es: 4.17.21
       vue: 3.4.35(typescript@5.5.4)
     optionalDependencies:
       typescript: 5.5.4
 
-  '@tmagic/tmagic-form-runtime@1.1.1(xof2eodu4mh3yoyjjdd3t6myyu)':
+  '@tmagic/tmagic-form-runtime@1.1.1(@tmagic/core@1.5.0-beta.4)(@tmagic/editor@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(monaco-editor@0.48.0)(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(element-plus@2.8.1(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@tmagic/core': 1.5.0-beta.4(@tmagic/data-source@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
-      '@tmagic/editor': 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/form@1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/stage@1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(monaco-editor@0.48.0)(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
-      '@tmagic/form': 1.5.0-beta.4(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
+      '@tmagic/editor': 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/design@1.5.0-beta.4(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4)))(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(monaco-editor@0.48.0)(typescript@5.5.4)(vue@3.4.35(typescript@5.5.4))
       '@tmagic/schema': 1.5.0-beta.4(typescript@5.5.4)
-      '@tmagic/stage': 1.5.0-beta.4(@tmagic/core@1.5.0-beta.4)(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(@tmagic/utils@1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
       '@tmagic/utils': 1.5.0-beta.4(@tmagic/schema@1.5.0-beta.4(typescript@5.5.4))(typescript@5.5.4)
       element-plus: 2.8.1(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
       vue: 3.4.35(typescript@5.5.4)
diff --git a/rollup.dts.config.js b/rollup.dts.config.js
index 9d630acc..a74226a5 100644
--- a/rollup.dts.config.js
+++ b/rollup.dts.config.js
@@ -13,6 +13,8 @@ if (!existsSync('temp')) {
 
 removeScss('temp/editor/src/index.d.ts');
 removeScss('temp/form/src/index.d.ts');
+removeScss('temp/design/src/index.d.ts');
+removeScss('temp/table/src/index.d.ts');
 
 const packages = readdirSync('temp');
 const targets = process.env.TARGETS ? process.env.TARGETS.split(',') : null;
diff --git a/runtime/react-runtime-help/package.json b/runtime/react-runtime-help/package.json
index a5caafd3..61a5565f 100644
--- a/runtime/react-runtime-help/package.json
+++ b/runtime/react-runtime-help/package.json
@@ -34,15 +34,12 @@
   "peerDependencies": {
     "lodash-es": "^4.17.21",
     "@tmagic/core": "workspace:^",
-    "@tmagic/data-source": "workspace:^",
-    "@tmagic/schema": "workspace:^",
     "@tmagic/stage": "workspace:^",
-    "@tmagic/utils": "workspace:^",
     "react": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@tmagic/schema": {
+    "@tmagic/core": {
       "optional": true
     },
     "@tmagic/stage": {
diff --git a/runtime/react-runtime-help/src/hooks/use-app.ts b/runtime/react-runtime-help/src/hooks/use-app.ts
index a2140cda..9c99cd9f 100644
--- a/runtime/react-runtime-help/src/hooks/use-app.ts
+++ b/runtime/react-runtime-help/src/hooks/use-app.ts
@@ -19,8 +19,8 @@
 import { useContext, useEffect, useState } from 'react';
 
 import type TMagicApp from '@tmagic/core';
-import type { Id, MNodeInstance } from '@tmagic/schema';
-import { isDslNode } from '@tmagic/utils';
+import type { Id, MNodeInstance } from '@tmagic/core';
+import { isDslNode } from '@tmagic/core';
 
 import AppContent from '../AppContent';
 
diff --git a/runtime/react-runtime-help/src/hooks/use-dsl.ts b/runtime/react-runtime-help/src/hooks/use-dsl.ts
index 13f102a8..158c715b 100644
--- a/runtime/react-runtime-help/src/hooks/use-dsl.ts
+++ b/runtime/react-runtime-help/src/hooks/use-dsl.ts
@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
 import { cloneDeep } from 'lodash-es';
 
-import TMagicApp from '@tmagic/core';
-import type { ChangeEvent } from '@tmagic/data-source';
-import type { MNode } from '@tmagic/schema';
-import { isPage, replaceChildNode } from '@tmagic/utils';
+import type { ChangeEvent, MNode } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
+import { isPage, replaceChildNode } from '@tmagic/core';
 
 export const useDsl = (app: TMagicApp | undefined) => {
   if (!app?.page) return null;
diff --git a/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts b/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts
index e30b3bbc..ab78cc83 100644
--- a/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts
+++ b/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts
@@ -1,9 +1,9 @@
 import { cloneDeep } from 'lodash-es';
 
-import Core from '@tmagic/core';
-import type { Id, MApp } from '@tmagic/schema';
+import type { Id, MApp } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
+import { getElById, replaceChildNode } from '@tmagic/core';
 import type { Magic, RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
-import { getElById, replaceChildNode } from '@tmagic/utils';
 
 declare global {
   interface Window {
@@ -11,7 +11,7 @@ declare global {
   }
 }
 
-export const useEditorDsl = (app: Core | undefined, renderDom: () => void) => {
+export const useEditorDsl = (app: TMagicApp | undefined, renderDom: () => void) => {
   let curPageId: Id = '';
 
   const updateConfig = (root: MApp) => {
diff --git a/runtime/react/dev.vite.config.ts b/runtime/react/dev.vite.config.ts
index 8df4bdd9..7eb22943 100644
--- a/runtime/react/dev.vite.config.ts
+++ b/runtime/react/dev.vite.config.ts
@@ -29,10 +29,9 @@ export default defineConfig({
       { find: /^react$/, replacement: path.join(__dirname, 'node_modules/react/index.js') },
       { find: /^react-dom$/, replacement: path.join(__dirname, 'node_modules/react-dom/index.js') },
       {
-        find: /^@tmagic\/utils\/resetcss.css/,
-        replacement: path.join(__dirname, '../../packages/utils/src/resetcss.css'),
+        find: /^@tmagic\/core\/resetcss.css/,
+        replacement: path.join(__dirname, '../../packages/core/resetcss.css'),
       },
-      { find: /^@tmagic\/ui-react/, replacement: path.join(__dirname, '../../packages/ui-react/src/index.ts') },
       { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
       { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
diff --git a/runtime/react/page/main.tsx b/runtime/react/page/main.tsx
index f8cfcb80..65faae9f 100644
--- a/runtime/react/page/main.tsx
+++ b/runtime/react/page/main.tsx
@@ -30,7 +30,7 @@ import plugins from '../.tmagic/plugin-entry';
 
 import App from './App';
 
-import '@tmagic/utils/resetcss.css';
+import '@tmagic/core/resetcss.css';
 
 declare global {
   interface Window {
diff --git a/runtime/react/playground/main.tsx b/runtime/react/playground/main.tsx
index cdfe9abb..229c25b9 100644
--- a/runtime/react/playground/main.tsx
+++ b/runtime/react/playground/main.tsx
@@ -29,7 +29,7 @@ import plugins from '../.tmagic/plugin-entry';
 
 import App from './App';
 
-import '@tmagic/utils/resetcss.css';
+import '@tmagic/core/resetcss.css';
 
 declare global {
   interface Window {
diff --git a/runtime/tmagic-form/package.json b/runtime/tmagic-form/package.json
index 16c6b2a2..f4c15df6 100644
--- a/runtime/tmagic-form/package.json
+++ b/runtime/tmagic-form/package.json
@@ -34,19 +34,23 @@
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/editor": "workspace:^",
-    "@tmagic/form": "workspace:^",
-    "@tmagic/utils": "workspace:^",
-    "@tmagic/schema": "workspace:^",
-    "@tmagic/stage": "workspace:^",
     "element-plus": ">=2.8.0",
-    "vue": ">=3.4.27"
+    "vue": ">=3.4.27",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/core": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "^18.19.0",
     "@vitejs/plugin-vue": "^5.1.1",
     "@vue/compiler-sfc": "^3.4.27",
     "rimraf": "^3.0.2",
-    "typescript": "^5.4.5",
     "vite": "^5.3.5",
     "vue-tsc": "^2.0.19"
   }
diff --git a/runtime/tmagic-form/src/App.vue b/runtime/tmagic-form/src/App.vue
index 3047b08d..d4d82c9f 100644
--- a/runtime/tmagic-form/src/App.vue
+++ b/runtime/tmagic-form/src/App.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { watch } from 'vue';
 
-import { MForm } from '@tmagic/form';
+import { MForm } from '@tmagic/editor';
 
 import { AppProps } from './types';
 import { useFormConfig } from './useFormConfig';
diff --git a/runtime/tmagic-form/src/form-config/checkbox.ts b/runtime/tmagic-form/src/form-config/checkbox.ts
index 17d9ed7d..d14401d1 100644
--- a/runtime/tmagic-form/src/form-config/checkbox.ts
+++ b/runtime/tmagic-form/src/form-config/checkbox.ts
@@ -1,4 +1,4 @@
-import { createForm } from '@tmagic/form';
+import { createForm } from '@tmagic/editor';
 
 export default createForm([
   {
diff --git a/runtime/tmagic-form/src/form-config/common.ts b/runtime/tmagic-form/src/form-config/common.ts
index 99833d35..92fac65f 100644
--- a/runtime/tmagic-form/src/form-config/common.ts
+++ b/runtime/tmagic-form/src/form-config/common.ts
@@ -1,4 +1,4 @@
-import { createForm } from '@tmagic/form';
+import { createForm } from '@tmagic/editor';
 
 export default createForm([
   {
diff --git a/runtime/tmagic-form/src/form-config/display.ts b/runtime/tmagic-form/src/form-config/display.ts
index 08805f20..4f5ce17a 100644
--- a/runtime/tmagic-form/src/form-config/display.ts
+++ b/runtime/tmagic-form/src/form-config/display.ts
@@ -1,3 +1,3 @@
-import { createForm } from '@tmagic/form';
+import { createForm } from '@tmagic/editor';
 
 export default createForm([]);
diff --git a/runtime/tmagic-form/src/form-config/index.ts b/runtime/tmagic-form/src/form-config/index.ts
index fee18134..3fb70f71 100644
--- a/runtime/tmagic-form/src/form-config/index.ts
+++ b/runtime/tmagic-form/src/form-config/index.ts
@@ -1,4 +1,4 @@
-import type { FormConfig } from '@tmagic/form';
+import type { FormConfig } from '@tmagic/editor';
 
 import checkbox from './checkbox';
 import display from './display';
diff --git a/runtime/tmagic-form/src/form-config/number.ts b/runtime/tmagic-form/src/form-config/number.ts
index a033c78e..511b4677 100644
--- a/runtime/tmagic-form/src/form-config/number.ts
+++ b/runtime/tmagic-form/src/form-config/number.ts
@@ -1,4 +1,4 @@
-import { createForm } from '@tmagic/form';
+import { createForm } from '@tmagic/editor';
 
 export default createForm([
   {
diff --git a/runtime/tmagic-form/src/form-config/switch.ts b/runtime/tmagic-form/src/form-config/switch.ts
index 08805f20..4f5ce17a 100644
--- a/runtime/tmagic-form/src/form-config/switch.ts
+++ b/runtime/tmagic-form/src/form-config/switch.ts
@@ -1,3 +1,3 @@
-import { createForm } from '@tmagic/form';
+import { createForm } from '@tmagic/editor';
 
 export default createForm([]);
diff --git a/runtime/tmagic-form/src/form-config/text.ts b/runtime/tmagic-form/src/form-config/text.ts
index 725c754f..720fdf97 100644
--- a/runtime/tmagic-form/src/form-config/text.ts
+++ b/runtime/tmagic-form/src/form-config/text.ts
@@ -1,4 +1,4 @@
-import { createForm } from '@tmagic/form';
+import { createForm } from '@tmagic/editor';
 
 export default createForm([
   {
diff --git a/runtime/tmagic-form/src/index.ts b/runtime/tmagic-form/src/index.ts
index 06668a11..ada0d811 100644
--- a/runtime/tmagic-form/src/index.ts
+++ b/runtime/tmagic-form/src/index.ts
@@ -1,10 +1,8 @@
 import { createApp, onBeforeUnmount, Plugin } from 'vue';
 import cssStyle from 'element-plus/dist/index.css?raw';
 
-import { editorService, Layout, propsService, uiService } from '@tmagic/editor';
-import MagicForm, { type FormConfig } from '@tmagic/form';
-import type StageCore from '@tmagic/stage';
-import { injectStyle } from '@tmagic/utils';
+import type { FormConfig, StageCore } from '@tmagic/editor';
+import { editorService, formPlugin, injectStyle, Layout, propsService, uiService } from '@tmagic/editor';
 
 import commonConfig from './form-config/common';
 import App from './App.vue';
@@ -52,7 +50,7 @@ export const useRuntime = ({
       stage,
       fillConfig,
     });
-    vueApp.use(MagicForm);
+    vueApp.use(formPlugin);
     plugins.forEach((plugin) => vueApp.use(plugin));
     vueApp.mount(el);
 
diff --git a/runtime/tmagic-form/src/types.ts b/runtime/tmagic-form/src/types.ts
index 9f5316f4..97e84969 100644
--- a/runtime/tmagic-form/src/types.ts
+++ b/runtime/tmagic-form/src/types.ts
@@ -1,7 +1,6 @@
 import type { Ref } from 'vue';
 
-import { type FormConfig, MForm } from '@tmagic/form';
-import type StageCore from '@tmagic/stage';
+import type { FormConfig, MForm, StageCore } from '@tmagic/editor';
 
 export interface AppProps {
   stage: StageCore;
diff --git a/runtime/tmagic-form/src/useFormConfig.ts b/runtime/tmagic-form/src/useFormConfig.ts
index 7332c4ff..69b18603 100644
--- a/runtime/tmagic-form/src/useFormConfig.ts
+++ b/runtime/tmagic-form/src/useFormConfig.ts
@@ -1,10 +1,9 @@
 import { computed, nextTick, onBeforeUnmount, reactive, ref } from 'vue';
 
-import Core from '@tmagic/core';
-import { type FormConfig, initValue, MForm } from '@tmagic/form';
-import type { Id, MApp, MNode } from '@tmagic/schema';
-import type { RemoveData, UpdateData } from '@tmagic/stage';
-import { getElById, getNodePath, replaceChildNode } from '@tmagic/utils';
+import type { Id, MApp, MNode } from '@tmagic/core';
+import TMagicApp from '@tmagic/core';
+import type { FormConfig, MForm, RemoveData, UpdateData } from '@tmagic/editor';
+import { getElById, getNodePath, initValue, replaceChildNode } from '@tmagic/editor';
 
 import { AppProps } from './types';
 
@@ -23,7 +22,7 @@ export const useFormConfig = (props: AppProps) => {
   // @ts-ignore
   const formConfig = computed(() => props.fillConfig((config.value?.items || []) as FormConfig, mForm));
 
-  let app: Core | undefined = new Core({
+  let app: TMagicApp | undefined = new TMagicApp({
     ua: contentWindow?.navigator.userAgent,
     platform: 'editor',
   });
@@ -137,6 +136,7 @@ export const useFormConfig = (props: AppProps) => {
   contentWindow?.addEventListener('message', runtimeReadyHandler);
 
   onBeforeUnmount(() => {
+    app?.destroy();
     app = undefined;
     contentWindow?.removeEventListener('message', runtimeReadyHandler);
   });
diff --git a/runtime/vue-runtime-help/package.json b/runtime/vue-runtime-help/package.json
index 2cae2cd0..41a313e3 100644
--- a/runtime/vue-runtime-help/package.json
+++ b/runtime/vue-runtime-help/package.json
@@ -33,10 +33,7 @@
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
-    "@tmagic/data-source": "workspace:^",
-    "@tmagic/schema": "workspace:^",
     "@tmagic/stage": "workspace:^",
-    "@tmagic/utils": "workspace:^",
     "@vue/composition-api": ">=1.7.2",
     "typescript": "*",
     "vue": ">=2.0.0 || >=3.0.0"
@@ -45,7 +42,7 @@
     "@vue/composition-api": {
       "optional": true
     },
-    "@tmagic/schema": {
+    "@tmagic/core": {
       "optional": true
     },
     "@tmagic/stage": {
diff --git a/runtime/vue-runtime-help/src/hooks/use-app.ts b/runtime/vue-runtime-help/src/hooks/use-app.ts
index 04111342..8b604d90 100644
--- a/runtime/vue-runtime-help/src/hooks/use-app.ts
+++ b/runtime/vue-runtime-help/src/hooks/use-app.ts
@@ -19,8 +19,8 @@
 import { inject, onBeforeUnmount, onMounted } from 'vue-demi';
 
 import type TMagicApp from '@tmagic/core';
-import type { Id, MNodeInstance } from '@tmagic/schema';
-import { isDslNode } from '@tmagic/utils';
+import type { Id, MNodeInstance } from '@tmagic/core';
+import { isDslNode } from '@tmagic/core';
 
 interface UseAppOptions<T extends MNodeInstance = MNodeInstance> {
   config: T;
@@ -32,7 +32,7 @@ interface UseAppOptions<T extends MNodeInstance = MNodeInstance> {
 }
 
 export const useApp = ({ methods = {}, config, iteratorContainerId, iteratorIndex }: UseAppOptions) => {
-  const app: TMagicApp | undefined = inject('app');
+  const app = inject<TMagicApp>('app');
 
   const emitData = {
     config,
diff --git a/runtime/vue-runtime-help/src/hooks/use-component.ts b/runtime/vue-runtime-help/src/hooks/use-component.ts
index b0025224..d01b9fc2 100644
--- a/runtime/vue-runtime-help/src/hooks/use-component.ts
+++ b/runtime/vue-runtime-help/src/hooks/use-component.ts
@@ -18,14 +18,14 @@
 
 import { inject } from 'vue-demi';
 
-import type Core from '@tmagic/core';
-import { toLine } from '@tmagic/utils';
+import type TMagicApp from '@tmagic/core';
+import { toLine } from '@tmagic/core';
 
 interface UseComponentOptions {
   /** 组件类型 */
   componentType?: string;
   /** App 实例 */
-  app?: Core;
+  app?: TMagicApp;
 }
 
 /**
@@ -35,7 +35,7 @@ interface UseComponentOptions {
  */
 export function useComponent<Component = any>(options: string | UseComponentOptions = '') {
   let componentType: string | undefined;
-  let app: Core | undefined;
+  let app: TMagicApp | undefined;
   let component: Component | undefined;
 
   if (typeof options === 'string') {
@@ -48,7 +48,7 @@ export function useComponent<Component = any>(options: string | UseComponentOpti
     componentType = 'container';
   }
   if (!app) {
-    app = inject('app');
+    app = inject<TMagicApp>('app');
   }
 
   component = resolveComponent({ componentType, app });
diff --git a/runtime/vue-runtime-help/src/hooks/use-dsl.ts b/runtime/vue-runtime-help/src/hooks/use-dsl.ts
index 2038e47d..8c6cf1ab 100644
--- a/runtime/vue-runtime-help/src/hooks/use-dsl.ts
+++ b/runtime/vue-runtime-help/src/hooks/use-dsl.ts
@@ -1,11 +1,10 @@
 import { nextTick, onBeforeUnmount, reactive, ref } from 'vue-demi';
 
-import Core from '@tmagic/core';
-import type { ChangeEvent } from '@tmagic/data-source';
-import type { MNode } from '@tmagic/schema';
-import { isPage, replaceChildNode } from '@tmagic/utils';
+import type TMagicCore from '@tmagic/core';
+import type { ChangeEvent, MNode } from '@tmagic/core';
+import { isPage, replaceChildNode } from '@tmagic/core';
 
-export const useDsl = (app: Core | undefined) => {
+export const useDsl = (app?: TMagicCore) => {
   const pageConfig = ref(app?.page?.data || {});
 
   const updateDataHandler = (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
diff --git a/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts b/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts
index 5878f251..32a0a596 100644
--- a/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts
+++ b/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts
@@ -1,9 +1,9 @@
 import { computed, nextTick, reactive, ref, watch } from 'vue-demi';
 
-import Core from '@tmagic/core';
-import type { Id, MApp, MNode } from '@tmagic/schema';
+import type TMagicApp from '@tmagic/core';
+import type { Id, MApp, MNode } from '@tmagic/core';
+import { getElById, getNodePath, replaceChildNode } from '@tmagic/core';
 import type { Magic, RemoveData, UpdateData } from '@tmagic/stage';
-import { getElById, getNodePath, replaceChildNode } from '@tmagic/utils';
 
 declare global {
   interface Window {
@@ -11,7 +11,7 @@ declare global {
   }
 }
 
-export const useEditorDsl = (app: Core | undefined, win = window) => {
+export const useEditorDsl = (app: TMagicApp | undefined, win = window) => {
   const root = ref<MApp>();
   const curPageId = ref<Id>();
   const selectedId = ref<Id>();
diff --git a/runtime/vue2/dev.vite.config.ts b/runtime/vue2/dev.vite.config.ts
index f5fad3c5..c1d5f6a6 100644
--- a/runtime/vue2/dev.vite.config.ts
+++ b/runtime/vue2/dev.vite.config.ts
@@ -28,8 +28,8 @@ export default defineConfig({
     alias: [
       { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
       {
-        find: /^@tmagic\/utils\/resetcss.css/,
-        replacement: path.join(__dirname, '../../packages/utils/src/resetcss.css'),
+        find: /^@tmagic\/core\/resetcss.css/,
+        replacement: path.join(__dirname, '../../packages/core/resetcss.css'),
       },
       { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
diff --git a/runtime/vue2/package.json b/runtime/vue2/package.json
index 8b0d1adc..f7daeee9 100644
--- a/runtime/vue2/package.json
+++ b/runtime/vue2/package.json
@@ -20,10 +20,7 @@
   },
   "dependencies": {
     "@tmagic/core": "1.5.0-beta.4",
-    "@tmagic/data-source": "1.5.0-beta.4",
-    "@tmagic/schema": "1.5.0-beta.4",
     "@tmagic/stage": "1.5.0-beta.4",
-    "@tmagic/utils": "1.5.0-beta.4",
     "@tmagic/vue-runtime-help": "^0.1.2",
     "axios": "^0.25.0",
     "terser": "^5.31.0",
diff --git a/runtime/vue2/page/App.vue b/runtime/vue2/page/App.vue
index e3ee49ea..7865ca6f 100644
--- a/runtime/vue2/page/App.vue
+++ b/runtime/vue2/page/App.vue
@@ -6,15 +6,15 @@
 import { defineComponent, inject } from 'vue';
 
 import type { Page } from '@tmagic/core';
-import type Core from '@tmagic/core';
-import { addParamToUrl } from '@tmagic/utils';
+import type TMagicApp from '@tmagic/core';
+import { addParamToUrl } from '@tmagic/core';
 import { useComponent, useDsl } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
   name: 'App',
 
   setup() {
-    const app = inject<Core | undefined>('app');
+    const app = inject<TMagicApp>('app');
     const { pageConfig } = useDsl(app);
     const pageComponent = useComponent('page');
 
diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts
index 220353c0..bf349976 100644
--- a/runtime/vue2/page/main.ts
+++ b/runtime/vue2/page/main.ts
@@ -18,9 +18,7 @@
 
 import Vue from 'vue';
 
-import Core from '@tmagic/core';
-import { DataSourceManager, DeepObservedData, registerDataSourceOnDemand } from '@tmagic/data-source';
-import { getUrlParam } from '@tmagic/utils';
+import TMagicApp, { DataSourceManager, DeepObservedData, getUrlParam, registerDataSourceOnDemand } from '@tmagic/core';
 
 import asyncDataSources from '../.tmagic/async-datasource-entry';
 import components from '../.tmagic/comp-entry';
@@ -30,7 +28,7 @@ import request, { service } from './utils/request';
 import AppComponent from './App.vue';
 import { getLocalConfig } from './utils';
 
-import '@tmagic/utils/resetcss.css';
+import '@tmagic/core/resetcss.css';
 
 DataSourceManager.registerObservedData(DeepObservedData);
 
@@ -38,7 +36,7 @@ Vue.use(request);
 
 const dsl = ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {};
 
-const app = new Core({
+const app = new TMagicApp({
   ua: window.navigator.userAgent,
   config: dsl,
   request: service,
diff --git a/runtime/vue2/page/utils/index.ts b/runtime/vue2/page/utils/index.ts
index 2c40827f..54fbcd7a 100644
--- a/runtime/vue2/page/utils/index.ts
+++ b/runtime/vue2/page/utils/index.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { MApp } from '@tmagic/schema';
+import type { MApp } from '@tmagic/core';
 
 export const getLocalConfig = (): MApp[] => {
   const configStr = localStorage.getItem('magicDSL');
diff --git a/runtime/vue2/playground/App.vue b/runtime/vue2/playground/App.vue
index 907c7294..c6187936 100644
--- a/runtime/vue2/playground/App.vue
+++ b/runtime/vue2/playground/App.vue
@@ -5,12 +5,12 @@
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
 
-import type Core from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
 import { useComponent, useEditorDsl } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
   setup() {
-    const app = inject<Core | undefined>('app');
+    const app = inject<TMagicApp>('app');
     const { pageConfig } = useEditorDsl(app);
     const pageComponent = useComponent('page');
 
diff --git a/runtime/vue2/playground/main.ts b/runtime/vue2/playground/main.ts
index e88411e5..17819187 100644
--- a/runtime/vue2/playground/main.ts
+++ b/runtime/vue2/playground/main.ts
@@ -18,12 +18,11 @@
 
 import Vue from 'vue';
 
-import Core from '@tmagic/core';
-import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
+import TMagicApp, { DataSourceManager, DeepObservedData } from '@tmagic/core';
 
 import App from './App.vue';
 
-import '@tmagic/utils/resetcss.css';
+import '@tmagic/core/resetcss.css';
 
 DataSourceManager.registerObservedData(DeepObservedData);
 
@@ -32,7 +31,7 @@ Promise.all([
   import('../.tmagic/plugin-entry'),
   import('../.tmagic/datasource-entry'),
 ]).then(([components, plugins, dataSources]) => {
-  const app = new Core({
+  const app = new TMagicApp({
     ua: window.navigator.userAgent,
     platform: 'editor',
   });
diff --git a/runtime/vue3/dev.vite.config.ts b/runtime/vue3/dev.vite.config.ts
index 93fb1848..73f0d3f4 100644
--- a/runtime/vue3/dev.vite.config.ts
+++ b/runtime/vue3/dev.vite.config.ts
@@ -29,8 +29,8 @@ export default defineConfig({
     alias: [
       { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js') },
       {
-        find: /^@tmagic\/utils\/resetcss.css/,
-        replacement: path.join(__dirname, '../../packages/utils/src/resetcss.css'),
+        find: /^@tmagic\/core\/resetcss.css/,
+        replacement: path.join(__dirname, '../../packages/core/resetcss.css'),
       },
       { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
diff --git a/runtime/vue3/package.json b/runtime/vue3/package.json
index 27b6ec3b..ae55c30f 100644
--- a/runtime/vue3/package.json
+++ b/runtime/vue3/package.json
@@ -20,11 +20,8 @@
   },
   "dependencies": {
     "@tmagic/core": "1.5.0-beta.4",
-    "@tmagic/data-source": "1.5.0-beta.4",
-    "@tmagic/schema": "1.5.0-beta.4",
     "@tmagic/stage": "1.5.0-beta.4",
-    "@tmagic/utils": "1.5.0-beta.4",
-    "@tmagic/vue-runtime-help": "^0.1.2",
+    "@tmagic/vue-runtime-help": "^0.1.3",
     "axios": "^0.25.0",
     "vue": "^3.4.35"
   },
diff --git a/runtime/vue3/page/App.vue b/runtime/vue3/page/App.vue
index de8196ab..ec3be90e 100644
--- a/runtime/vue3/page/App.vue
+++ b/runtime/vue3/page/App.vue
@@ -4,14 +4,13 @@
 
 <script lang="ts" setup>
 import { inject } from 'vue';
-import { MPage } from 'packages/schema/types';
 
-import type { Page } from '@tmagic/core';
-import type Core from '@tmagic/core';
-import { addParamToUrl } from '@tmagic/utils';
+import type { MPage, Page } from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
+import { addParamToUrl } from '@tmagic/core';
 import { useComponent, useDsl } from '@tmagic/vue-runtime-help';
 
-const app = inject<Core | undefined>('app');
+const app = inject<TMagicApp>('app');
 const { pageConfig } = useDsl(app);
 const pageComponent = useComponent('page');
 
diff --git a/runtime/vue3/page/main.ts b/runtime/vue3/page/main.ts
index 8180a7d4..f65f428e 100644
--- a/runtime/vue3/page/main.ts
+++ b/runtime/vue3/page/main.ts
@@ -18,9 +18,7 @@
 
 import { createApp, defineAsyncComponent } from 'vue';
 
-import Core from '@tmagic/core';
-import { DataSourceManager, DeepObservedData, registerDataSourceOnDemand } from '@tmagic/data-source';
-import { getUrlParam } from '@tmagic/utils';
+import TMagicApp, { DataSourceManager, DeepObservedData, getUrlParam, registerDataSourceOnDemand } from '@tmagic/core';
 
 import components from '../.tmagic/async-comp-entry';
 import asyncDataSources from '../.tmagic/async-datasource-entry';
@@ -30,7 +28,7 @@ import request, { service } from './utils/request';
 import AppComponent from './App.vue';
 import { getLocalConfig } from './utils';
 
-import '@tmagic/utils/resetcss.css';
+import '@tmagic/core/resetcss.css';
 
 DataSourceManager.registerObservedData(DeepObservedData);
 
@@ -40,7 +38,7 @@ vueApp.use(request);
 
 const dsl = ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {};
 
-const app = new Core({
+const app = new TMagicApp({
   ua: window.navigator.userAgent,
   config: dsl,
   request: service,
diff --git a/runtime/vue3/page/utils/index.ts b/runtime/vue3/page/utils/index.ts
index 2c40827f..54fbcd7a 100644
--- a/runtime/vue3/page/utils/index.ts
+++ b/runtime/vue3/page/utils/index.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { MApp } from '@tmagic/schema';
+import type { MApp } from '@tmagic/core';
 
 export const getLocalConfig = (): MApp[] => {
   const configStr = localStorage.getItem('magicDSL');
diff --git a/runtime/vue3/playground/App.vue b/runtime/vue3/playground/App.vue
index 655535b4..326ca582 100644
--- a/runtime/vue3/playground/App.vue
+++ b/runtime/vue3/playground/App.vue
@@ -5,10 +5,10 @@
 <script lang="ts" setup>
 import { inject } from 'vue';
 
-import type Core from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
 import { useComponent, useEditorDsl } from '@tmagic/vue-runtime-help';
 
-const app = inject<Core | undefined>('app');
+const app = inject<TMagicApp>('app');
 const { pageConfig } = useEditorDsl(app);
 const pageComponent = useComponent('page');
 </script>
diff --git a/runtime/vue3/playground/main.ts b/runtime/vue3/playground/main.ts
index 2b44ea90..909e80a5 100644
--- a/runtime/vue3/playground/main.ts
+++ b/runtime/vue3/playground/main.ts
@@ -18,12 +18,11 @@
 
 import { createApp } from 'vue';
 
-import Core from '@tmagic/core';
-import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
+import TMagicApp, { DataSourceManager, DeepObservedData } from '@tmagic/core';
 
 import App from './App.vue';
 
-import '@tmagic/utils/resetcss.css';
+import '@tmagic/core/resetcss.css';
 
 DataSourceManager.registerObservedData(DeepObservedData);
 
@@ -34,7 +33,7 @@ Promise.all([
 ]).then(([components, plugins, dataSources]) => {
   const vueApp = createApp(App);
 
-  const app = new Core({
+  const app = new TMagicApp({
     ua: window.navigator.userAgent,
     platform: 'editor',
   });