refactor: 将data-source,dep,schema,utils收敛到core，将form,table,stage,design,util收敛到editor

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

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

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 [];
 

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

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

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

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

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

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

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

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

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

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

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

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);
   });
 });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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>

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

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

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

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

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

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>

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

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

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

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>

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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 };

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);
   },
 };

packages/design/src/theme/index.scss

@@ -0,0 +1 @@
+@import "./popover.scss";

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);
+}

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;

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"

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

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

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

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

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,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);
         }

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

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

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

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

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

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

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);
       }
     });
   }

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

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

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