feat(core): 支持自定义Node类

fix(data-source): 数据源初始化时机比注册早回出现死循环
chore: update deps
2025-04-05 19:41:40 +08:00 · 2025-04-02 17:24:02 +08:00 · 2025-04-02 17:17:30 +08:00 · 2025-03-31 20:31:29 +08:00 · 2025-03-27 16:32:44 +08:00 · 2025-03-27 16:30:51 +08:00
169 changed files with 3084 additions and 2135 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,59 @@
+## [1.5.12](https://github.com/Tencent/tmagic-editor/compare/v1.5.11...v1.5.12) (2025-03-27)
+
+
+### Bug Fixes
+
+* **design:** card没有slots时隐藏对应slot ([4ddc55a](https://github.com/Tencent/tmagic-editor/commit/4ddc55aa6de4bafb978a621ab9b69af1e0c36d78))
+* **editor:** 数据源修改后，依赖重新收集不准确 ([9c7d711](https://github.com/Tencent/tmagic-editor/commit/9c7d711c167c5e8ee1e9d8a8e89d66d245070dee))
+* **editor:** 获取关联组件的方法默认值 ([f5742c1](https://github.com/Tencent/tmagic-editor/commit/f5742c107a68389c0828de991e7f5e9745e20d67))
+* **vue-components:** button删除调试代码，text支持富文本 ([2a714ae](https://github.com/Tencent/tmagic-editor/commit/2a714ae9cc89b7c88528c8afe9270ad774d7755d))
+
+
+### Features
+
+* **cli:** 如果识别不要组件文件，则默认从npm包的default导入 ([b715a87](https://github.com/Tencent/tmagic-editor/commit/b715a87f409856ed396b3e35eb4102776329531e))
+
+
+
+## [1.5.11](https://github.com/Tencent/tmagic-editor/compare/v1.5.10...v1.5.11) (2025-03-11)
+
+
+### Bug Fixes
+
+* **dep:** 依赖收集不能过滤id/name ([0c207c7](https://github.com/Tencent/tmagic-editor/commit/0c207c7b834ae25c16038a8ca431154afb4ccda1))
+* **dep:** 数据源方法收集判断 ([72108e0](https://github.com/Tencent/tmagic-editor/commit/72108e00193698c8e7087b115f36e10216a0f386))
+
+
+### Features
+
+* **vue-runtime-help:** useDsl/useEditorDsl添加app默认参数 ([f671c67](https://github.com/Tencent/tmagic-editor/commit/f671c670db84631abb1f7d9e4fbf432637de2947))
+
+
+
+## [1.5.10](https://github.com/Tencent/tmagic-editor/compare/v1.5.9...v1.5.10) (2025-03-07)
+
+
+### Bug Fixes
+
+* **data-source:** 处理异步动态加载数据源时，初始化数据源还未加载完毕的情况 ([3c66319](https://github.com/Tencent/tmagic-editor/commit/3c66319b03c42305c66b0c6a87307fe747d9f90e))
+* **editor:** 样式配置宽度不能为负 ([775fcf5](https://github.com/Tencent/tmagic-editor/commit/775fcf5693eef051e5899aceae7873c1afa0e60c))
+* **stage:** 防止runtime重复注册 ([63fe6ec](https://github.com/Tencent/tmagic-editor/commit/63fe6ec68be444082cb16aac76d6b2fe9ee5724f))
+
+
+### Features
+
+* **core:**  hook函数调用添加node参数 ([5ba2a73](https://github.com/Tencent/tmagic-editor/commit/5ba2a73c7035d84688be0b0f1c0b4467558518c3))
+* **core, editor:** 删除公共的点击事件实现，由组件自行添加 ([c8e1cff](https://github.com/Tencent/tmagic-editor/commit/c8e1cffca9b12c124c34d75ee9187a03c6f61599))
+* **core:** app添加dsl-change事件 ([a4d021d](https://github.com/Tencent/tmagic-editor/commit/a4d021d2fb1fec113496733380d99e0f9deb132f))
+* **core:** node新增registerMethod方法，用于组件注册供其他组件通过事件配置调用 ([ff07147](https://github.com/Tencent/tmagic-editor/commit/ff0714727044c41148babcec977ca89058169501))
+* **reate-runtime-help,vue-runtime-help:** 新增组件状态hook ([6f5bb84](https://github.com/Tencent/tmagic-editor/commit/6f5bb84c04f9b4b5b2145ce6c559445563a60e6c))
+* **runtime:** vue2 h传参与vue3不一样，需要自定义render ([90abde5](https://github.com/Tencent/tmagic-editor/commit/90abde57cc01218b483c94faf29f88996fb75c20))
+* **runtime:** 支持页面切换 ([4026c0c](https://github.com/Tencent/tmagic-editor/commit/4026c0c305937b060de21ec74355a1be46e25dbf))
+* **vue-components,react-components:** 增加点击事件，使用组件状态hook ([0736646](https://github.com/Tencent/tmagic-editor/commit/0736646c63067b3b19125b356f462d658673eaa7))
+* **vue-container:** 支持自定义render ([91cde30](https://github.com/Tencent/tmagic-editor/commit/91cde30d75de866ade3f48f48b2c0d1251fe2b36))
+
+
+
 ## [1.5.9](https://github.com/Tencent/tmagic-editor/compare/v1.5.8...v1.5.9) (2025-02-20)


--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "tmagic",
  "private": true,
  "type": "module",
@ -49,22 +49,22 @@
    "@types/node": "18.19.61",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitest/coverage-v8": "^2.1.9",
    "@vue/compiler-sfc": "^3.5.13",
    "c8": "^7.14.0",
    "commitizen": "^4.3.1",
    "conventional-changelog-cli": "^4.1.0",
    "cosmiconfig": "^8.3.6",
    "cz-conventional-changelog": "^3.3.0",
-    "element-plus": "^2.9.3",
+    "element-plus": "^2.9.7",
    "enquirer": "^2.4.1",
    "eslint": "^8.57.1",
    "eslint-config-tencent": "^1.1.2",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-vue": "^9.32.0",
+    "eslint-plugin-vue": "^9.33.0",
    "execa": "^4.1.0",
    "highlight.js": "^11.11.1",
    "husky": "^7.0.4",
@ -73,19 +73,19 @@
    "minimist": "^1.2.8",
    "picocolors": "^1.1.1",
    "prettier": "^2.8.8",
-    "recast": "^0.20.5",
+    "recast": "^0.23.11",
    "rimraf": "^3.0.2",
-    "rollup": "^4.31.0",
-    "rollup-plugin-dts": "^6.1.1",
-    "semver": "^7.6.3",
+    "rollup": "^4.38.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "semver": "^7.7.1",
    "serialize-javascript": "^6.0.2",
    "shx": "^0.3.4",
-    "typescript": "^5.7.3",
-    "vite": "^6.0.10",
-    "vitepress": "^1.6.1",
-    "vitest": "^3.0.2",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.4",
+    "vitepress": "^1.6.3",
+    "vitest": "^3.1.1",
    "vue": "^3.5.13",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^2.2.8"
  },
  "config": {
    "commitizen": {
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/cli",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
@ -31,7 +31,7 @@
    "esbuild": "^0.21.5",
    "fs-extra": "^11.2.0",
    "picocolors": "^1.1.1",
-    "recast": "^0.23.9",
+    "recast": "^0.23.11",
    "tslib": "^2.8.0"
  },
  "devDependencies": {
--- a/packages/cli/src/Core.ts
+++ b/packages/cli/src/Core.ts
@ -11,11 +11,14 @@ export default class Core {
  public options: UserConfig;

  public moduleMainFilePath: ModuleMainFilePath = {
+    componentPackage: {},
    componentMap: {},
+    pluginPakcage: {},
    pluginMap: {},
    configMap: {},
    valueMap: {},
    eventMap: {},
+    datasourcePackage: {},
    datasourceMap: {},
    dsConfigMap: {},
    dsValueMap: {},
--- a/packages/cli/src/types.ts
+++ b/packages/cli/src/types.ts
@ -54,11 +54,14 @@ export interface NpmConfig {
 }

 export interface ModuleMainFilePath {
+  componentPackage: Record<string, string>;
  componentMap: Record<string, string>;
+  pluginPakcage: Record<string, string>;
  pluginMap: Record<string, string>;
  configMap: Record<string, string>;
  valueMap: Record<string, string>;
  eventMap: Record<string, string>;
+  datasourcePackage: Record<string, string>;
  datasourceMap: Record<string, string>;
  dsConfigMap: Record<string, string>;
  dsValueMap: Record<string, string>;
--- a/packages/cli/src/utils/prepareEntryFile.ts
+++ b/packages/cli/src/utils/prepareEntryFile.ts
@ -5,33 +5,84 @@ import { EntryType } from '../types';

 export const prepareEntryFile = async (app: App) => {
  const { moduleMainFilePath, options } = app;
-  const { componentFileAffix, dynamicImport, hooks, useTs = true } = options;
+  const { dynamicImport, hooks, useTs = true } = options;

  let contentMap: Record<string, string> = {
-    'comp-entry': generateContent(useTs, EntryType.COMPONENT, moduleMainFilePath.componentMap, componentFileAffix),
+    'comp-entry': generateContent(
+      useTs,
+      EntryType.COMPONENT,
+      moduleMainFilePath.componentPackage,
+      moduleMainFilePath.componentMap,
+    ),
    'async-comp-entry': generateContent(
      useTs,
      EntryType.COMPONENT,
+      moduleMainFilePath.componentPackage,
      moduleMainFilePath.componentMap,
-      componentFileAffix,
      dynamicImport,
    ),
-    'plugin-entry': generateContent(useTs, EntryType.PLUGIN, moduleMainFilePath.pluginMap),
-    'async-plugin-entry': generateContent(useTs, EntryType.PLUGIN, moduleMainFilePath.pluginMap, '', dynamicImport),
-    'config-entry': generateContent(useTs, EntryType.CONFIG, moduleMainFilePath.configMap),
-    'value-entry': generateContent(useTs, EntryType.VALUE, moduleMainFilePath.valueMap),
-    'event-entry': generateContent(useTs, EntryType.EVENT, moduleMainFilePath.eventMap),
-    'datasource-entry': generateContent(useTs, EntryType.DATASOURCE, moduleMainFilePath.datasourceMap),
+    'plugin-entry': generateContent(
+      useTs,
+      EntryType.PLUGIN,
+      moduleMainFilePath.pluginPakcage,
+      moduleMainFilePath.pluginMap,
+    ),
+    'async-plugin-entry': generateContent(
+      useTs,
+      EntryType.PLUGIN,
+      moduleMainFilePath.pluginPakcage,
+      moduleMainFilePath.pluginMap,
+      dynamicImport,
+    ),
+    'config-entry': generateContent(
+      useTs,
+      EntryType.CONFIG,
+      moduleMainFilePath.componentPackage,
+      moduleMainFilePath.configMap,
+    ),
+    'value-entry': generateContent(
+      useTs,
+      EntryType.VALUE,
+      moduleMainFilePath.componentPackage,
+      moduleMainFilePath.valueMap,
+    ),
+    'event-entry': generateContent(
+      useTs,
+      EntryType.EVENT,
+      moduleMainFilePath.componentPackage,
+      moduleMainFilePath.eventMap,
+    ),
+    'datasource-entry': generateContent(
+      useTs,
+      EntryType.DATASOURCE,
+      moduleMainFilePath.datasourcePackage,
+      moduleMainFilePath.datasourceMap,
+    ),
    'async-datasource-entry': generateContent(
      useTs,
      EntryType.DATASOURCE,
+      moduleMainFilePath.datasourcePackage,
      moduleMainFilePath.datasourceMap,
-      '',
      dynamicImport,
    ),
-    'ds-config-entry': generateContent(useTs, EntryType.DS_CONFIG, moduleMainFilePath.dsConfigMap),
-    'ds-value-entry': generateContent(useTs, EntryType.DS_VALUE, moduleMainFilePath.dsValueMap),
-    'ds-event-entry': generateContent(useTs, EntryType.DS_EVENT, moduleMainFilePath.dsEventMap),
+    'ds-config-entry': generateContent(
+      useTs,
+      EntryType.DS_CONFIG,
+      moduleMainFilePath.datasourcePackage,
+      moduleMainFilePath.dsConfigMap,
+    ),
+    'ds-value-entry': generateContent(
+      useTs,
+      EntryType.DS_VALUE,
+      moduleMainFilePath.datasourcePackage,
+      moduleMainFilePath.dsValueMap,
+    ),
+    'ds-event-entry': generateContent(
+      useTs,
+      EntryType.DS_EVENT,
+      moduleMainFilePath.datasourcePackage,
+      moduleMainFilePath.dsEventMap,
+    ),
  };

  if (typeof hooks?.beforeWriteEntry === 'function') {
@ -53,8 +104,8 @@ export const prepareEntryFile = async (app: App) => {
 export const generateContent = (
  useTs: boolean,
  type: EntryType,
+  packageMap: Record<string, string> = {},
  map: Record<string, string> = {},
-  componentFileAffix = '',
  dynamicImport = false,
 ) => {
  const list: string[] = [];
@ -62,14 +113,14 @@ export const generateContent = (

  Object.entries(map).forEach(([key, packagePath]) => {
    const name = makeCamelCase(key);
-    if (dynamicImport) {
-      list.push(
-        `'${key}': () => import('${packagePath}${packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix}')`,
-      );
+
+    if ([EntryType.CONFIG, EntryType.EVENT, EntryType.VALUE].includes(type) && packagePath === packageMap[key]) {
+      importDeclarations.push(`import { ${type} as ${name} } from '${packageMap[key]}'`);
+      list.push(`'${key}': ${name}`);
+    } else if (dynamicImport) {
+      list.push(`'${key}': () => import('${packagePath}')`);
    } else {
-      importDeclarations.push(
-        `import ${name} from '${packagePath}${packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix}'`,
-      );
+      importDeclarations.push(`import ${name} from '${packagePath}'`);
      list.push(`'${key}': ${name}`);
    }
  });
--- a/packages/cli/src/utils/resolveAppPackages.ts
+++ b/packages/cli/src/utils/resolveAppPackages.ts
@ -38,20 +38,37 @@ const getRelativePath = (str: string, base: string) => (path.isAbsolute(str) ? p

 const npmInstall = function (dependencies: Record<string, string>, cwd: string, npmConfig: NpmConfig = {}) {
  try {
-    const { client = 'npm', registry, installArgs = '' } = npmConfig;
+    const { client = 'npm', registry, installArgs = '', keepPackageJsonClean } = npmConfig;
    const install = {
      npm: 'install',
      yarn: 'add',
      pnpm: 'add',
    }[client];

-    const packages = Object.entries(dependencies)
-      .map(([name, version]) => (version ? `${name}@${version}` : name))
-      .join(' ');
+    let packages = Object.entries(dependencies);
+
+    const newPackages = Object.entries(dependencies).filter(([name]) => {
+      if (fs.existsSync(path.resolve(cwd, 'node_modules', name))) {
+        return false;
+      }
+      return true;
+    });
+
+    // keepPackageJsonClean会保留原始的package.json，这样配置的packages就不会被写入dependencies中
+    // install 时会删除不在dependencies中的依赖，所以需要install packages中配置的所有包
+    if (!keepPackageJsonClean || !newPackages.length) {
+      packages = newPackages;
+    }
+
+    if (!packages.length) {
+      return;
+    }
+
+    const packageNames = packages.map(([name, version]) => (version ? `${name}@${version}` : name)).join(' ');

    const installArgsString = `${installArgs ? ` ${installArgs}` : ''}`;
    const registryString = `${registry ? ` --registry ${registry}` : ''}`;
-    const command = `${client} ${install}${installArgsString} ${packages}${registryString}`;
+    const command = `${client} ${install}${installArgsString} ${packageNames}${registryString}`;

    execInfo(cwd);
    execInfo(command);
@ -318,25 +335,30 @@ const parseEntry = function ({ ast, package: module, indexPath }: ParseEntryOpti
  const tokens = getASTTokenByTraverse({ ast, indexPath });
  let { config, value, event, component } = tokens;

-  if (!config) {
+  if (typeof config === 'undefined') {
    info(`${module} 表单配置文件声明缺失`);
  }
-  if (!value) {
+  if (typeof value === 'undefined') {
    info(`${module} 初始化数据文件声明缺失`);
  }
-  if (!event) {
+  if (typeof event === 'undefined') {
    info(`${module} 事件声明文件声明缺失`);
  }
-  if (!component) {
-    info(`${module} 组件或数据源文件声明不合法`);
-    exit(1);
-  }

  const reg = /^.*[/\\]node_modules[/\\](.*)/;
-  [, config] = config.match(reg) || [, config];
-  [, value] = value.match(reg) || [, value];
-  [, component] = component.match(reg) || [, component];
-  [, event] = event.match(reg) || [, event];
+
+  if (config) {
+    [, config] = config.match(reg) || [, config];
+  }
+  if (value) {
+    [, value] = value.match(reg) || [, value];
+  }
+  if (component) {
+    [, component] = component.match(reg) || [, component];
+  }
+  if (event) {
+    [, event] = event.match(reg) || [, event];
+  }

  return {
    config,
@ -347,10 +369,10 @@ const parseEntry = function ({ ast, package: module, indexPath }: ParseEntryOpti
 };

 const getASTTokenByTraverse = ({ ast, indexPath }: { ast: any; indexPath: string }) => {
-  let config = '';
-  let value = '';
-  let event = '';
-  let component = '';
+  let config: string | undefined;
+  let value: string | undefined;
+  let event: string | undefined;
+  let component: string | undefined;
  const importSpecifiersMap: { [key: string]: string } = {};
  const exportSpecifiersMap: { [key: string]: string | undefined } = {};

@ -396,7 +418,11 @@ const getASTTokenByTraverse = ({ ast, indexPath }: { ast: any; indexPath: string
    visitExportDefaultDeclaration(p) {
      const { node } = p;
      const { declaration } = node as any;
-      component = path.resolve(path.dirname(indexPath), importSpecifiersMap[declaration.name]);
+
+      if (importSpecifiersMap[declaration.name]) {
+        component = path.resolve(path.dirname(indexPath), importSpecifiersMap[declaration.name]);
+      }
+
      this.traverse(p);
    },
  });
@ -405,7 +431,10 @@ const getASTTokenByTraverse = ({ ast, indexPath }: { ast: any; indexPath: string
    const exportValue = exportSpecifiersMap[exportName];
    const importValue = importSpecifiersMap[exportName];
    const connectValue = exportValue ? importSpecifiersMap[exportValue] : '';
-    const filePath = path.resolve(path.dirname(indexPath), connectValue || importValue || exportValue || '');
+
+    const fileName = connectValue || importValue || exportValue || '';
+
+    const filePath = fileName ? path.resolve(path.dirname(indexPath), fileName) : '';

    if (exportName === EntryType.VALUE) {
      value = filePath;
@ -463,7 +492,7 @@ const getDependencies = (dependencies: Record<string, string>, packagePath: stri

 const setPackages = (packages: ModuleMainFilePath, app: App, packagePath: string, cwd: string, key?: string) => {
  const { options } = app;
-  const { temp, componentFileAffix, datasoucreSuperClass } = options;
+  const { temp, componentFileAffix = '', datasoucreSuperClass } = options;

  let { name: moduleName } = splitNameVersion(packagePath);

@ -513,15 +542,45 @@ const setPackages = (packages: ModuleMainFilePath, app: App, packagePath: string

  if (!key) return;

-  if (result.type === PackageType.COMPONENT) {
+  if (result.type === PackageType.COMPONENT || !result.type) {
+    packages.componentPackage[key] = moduleName;
    // 组件
    const entry = parseEntry({ ast, package: moduleName, indexPath });

-    if (entry.component) packages.componentMap[key] = getRelativePath(entry.component, temp);
-    if (entry.config) packages.configMap[key] = getRelativePath(entry.config, temp);
-    if (entry.event) packages.eventMap[key] = getRelativePath(entry.event, temp);
-    if (entry.value) packages.valueMap[key] = getRelativePath(entry.value, temp);
+    if (entry.component) {
+      const packagePath = getRelativePath(entry.component, temp);
+      packages.componentMap[key] = `${packagePath}${
+        packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix
+      }`;
+    } else {
+      packages.componentMap[key] = moduleName;
+    }
+
+    if (typeof entry.config === 'string') {
+      if (entry.config) {
+        packages.configMap[key] = getRelativePath(entry.config, temp);
+      } else {
+        packages.configMap[key] = moduleName;
+      }
+    }
+
+    if (typeof entry.event === 'string') {
+      if (entry.event) {
+        packages.eventMap[key] = getRelativePath(entry.event, temp);
+      } else {
+        packages.eventMap[key] = moduleName;
+      }
+    }
+
+    if (typeof entry.value === 'string') {
+      if (entry.value) {
+        packages.valueMap[key] = getRelativePath(entry.value, temp);
+      } else {
+        packages.valueMap[key] = moduleName;
+      }
+    }
  } else if (result.type === PackageType.DATASOURCE) {
+    packages.datasourcePackage[key] = moduleName;
    // 数据源
    const entry = parseEntry({ ast, package: moduleName, indexPath });

@ -530,6 +589,7 @@ const setPackages = (packages: ModuleMainFilePath, app: App, packagePath: string
    if (entry.event) packages.dsEventMap[key] = getRelativePath(entry.event, temp);
    if (entry.value) packages.dsValueMap[key] = getRelativePath(entry.value, temp);
  } else if (result.type === PackageType.PLUGIN) {
+    packages.pluginPakcage[key] = moduleName;
    // 插件
    packages.pluginMap[key] = getRelativePath(moduleName, temp);
  }
@ -573,11 +633,14 @@ export const resolveAppPackages = (app: App): ModuleMainFilePath => {
  }

  const packagesMap: ModuleMainFilePath = {
+    componentPackage: {},
    componentMap: {},
    configMap: {},
    eventMap: {},
    valueMap: {},
+    pluginPakcage: {},
    pluginMap: {},
+    datasourcePackage: {},
    datasourceMap: {},
    dsConfigMap: {},
    dsEventMap: {},
--- a/packages/cli/tsconfig.build.json
+++ b/packages/cli/tsconfig.build.json
@ -7,6 +7,7 @@
    "rootDir": "./src",
    "outDir": "./lib",
    "declaration": true,
+    
    "types": ["node"],
  },
  "include": ["./src"],
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/core",
  "type": "module",
  "main": "dist/tmagic-core.umd.cjs",
--- a/packages/core/src/App.ts
+++ b/packages/core/src/App.ts
@ -49,6 +49,12 @@ export interface AppOptionsConfig {

 class App extends EventEmitter {
  [x: string]: any;
+  static nodeClassMap = new Map<string, typeof Node>();
+
+  public static registerNode<T extends typeof Node = typeof Node>(type: string, NodeClass: T) {
+    App.nodeClassMap.set(type, NodeClass);
+  }
+
  public env: Env = new Env();
  public dsl?: MApp;
  public codeDsl?: CodeBlockDSL;
@ -144,7 +150,12 @@ class App extends EventEmitter {
    this.dataSourceManager = createDataSourceManager(this, this.useMock);

    this.codeDsl = config.codeBlocks;
-    this.setPage(curPage || this.page?.data?.id);
+
+    const pageId = curPage || this.page?.data?.id;
+
+    super.emit('dsl-change', { dsl: config, curPage: pageId });
+
+    this.setPage(pageId);

    if (this.dataSourceManager) {
      const dataSourceList = Array.from(this.dataSourceManager.dataSourceMap.values());
@ -162,19 +173,22 @@ class App extends EventEmitter {
      return;
    }

-    if (pageConfig === this.page?.data) return;
-
-    this.page?.destroy();
+    if (this.page) {
+      if (pageConfig === this.page.data) return;
+      this.page.destroy();
+    }

    this.page = new Page({
      config: pageConfig,
      app: this,
    });

-    this.eventHelper?.removeNodeEvents();
-    this.page.nodes.forEach((node) => {
-      this.eventHelper?.bindNodeEvents(node);
-    });
+    if (this.eventHelper) {
+      this.eventHelper.removeNodeEvents();
+      for (const [, node] of this.page.nodes) {
+        this.eventHelper.bindNodeEvents(node);
+      }
+    }

    super.emit('page-change', this.page);
  }
--- a/packages/core/src/Env.ts
+++ b/packages/core/src/Env.ts
@ -30,7 +30,11 @@ class Env {
  isWeb = false;
  isOpenHarmony = false;

-  constructor(ua = globalThis.navigator.userAgent, options: Record<string, boolean | string> = {}) {
+  constructor(ua = globalThis.navigator?.userAgent ?? '', options: Record<string, boolean | string> = {}) {
+    if (!ua) {
+      return;
+    }
+
    this.isIphone = ua.indexOf('iPhone') >= 0;

    this.isIpad = /(iPad).*OS\s([\d_]+)/.test(ua);
--- a/packages/core/src/EventHelper.ts
+++ b/packages/core/src/EventHelper.ts
@ -32,38 +32,11 @@ import {
  type EventActionItem,
  type EventConfig,
 } from '@tmagic/schema';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getIdFromEl } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';

 import type { default as TMagicApp } from './App';
 import FlowState from './FlowState';
 import type { default as TMagicNode } from './Node';
-import { COMMON_EVENT_PREFIX, isCommonMethod, triggerCommonMethod } from './utils';
-
-const getCommonEventName = (commonEventName: string) => {
-  if (commonEventName.startsWith(COMMON_EVENT_PREFIX)) return commonEventName;
-  return `${COMMON_EVENT_PREFIX}${commonEventName}`;
-};
-
-// 点击在组件内的某个元素上，需要向上寻找到当前组件
-const getDirectComponent = (element: HTMLElement | null, app: TMagicApp): TMagicNode | undefined => {
-  if (!element) {
-    return;
-  }
-
-  const id = getIdFromEl()(element);
-
-  if (!id) {
-    return getDirectComponent(element.parentElement, app);
-  }
-
-  const node = app.getNode(
-    id,
-    element.dataset.tmagicIteratorContainerId?.split(','),
-    element.dataset.tmagicIteratorIndex?.split(',').map((i) => globalThis.parseInt(i, 10)),
-  );
-
-  return node;
-};

 export default class EventHelper extends EventEmitter {
  public app: TMagicApp;
@ -75,19 +48,11 @@ export default class EventHelper extends EventEmitter {
    super();

    this.app = app;
-
-    if (app.jsEngine === 'browser') {
-      globalThis.document.body.addEventListener('click', this.commonClickEventHandler);
-    }
  }

  public destroy() {
    this.removeNodeEvents();
    this.removeAllListeners();
-
-    if (this.app.jsEngine === 'browser') {
-      globalThis.document.body.removeEventListener('click', this.commonClickEventHandler);
-    }
  }

  public bindNodeEvents(node: TMagicNode) {
@ -243,10 +208,6 @@ export default class EventHelper extends EventEmitter {
    const toNode = this.app.getNode(to);
    if (!toNode) throw `ID为${to}的组件不存在`;

-    if (isCommonMethod(methodName)) {
-      return triggerCommonMethod(methodName, toNode);
-    }
-
    if (toNode.instance) {
      if (typeof toNode.instance[methodName] === 'function') {
        await toNode.instance[methodName](fromCpt, ...args);
@ -259,17 +220,4 @@ export default class EventHelper extends EventEmitter {
      });
    }
  }
-
-  private commonClickEventHandler = (e: MouseEvent) => {
-    if (!e.target) {
-      return;
-    }
-
-    const node = getDirectComponent(e.target as HTMLElement, this.app);
-
-    const eventName = `${getCommonEventName('click')}_${node?.data.id}`;
-    if (node?.eventKeys.has(eventName)) {
-      this.emit(node.eventKeys.get(eventName)!, node);
-    }
-  };
 }
--- a/packages/core/src/Node.ts
+++ b/packages/core/src/Node.ts
@ -32,6 +32,10 @@ interface EventCache {
  args: any[];
 }

+interface Methods {
+  [key: string]: (...args: any[]) => any;
+}
+
 export interface NodeOptions {
  config: MNode;
  page?: Page;
@ -45,7 +49,7 @@ class Node extends EventEmitter {
    [key: string]: any;
  };
  public events: EventConfig[] = [];
-  public instance?: any;
+  public instance?: any = {};
  public page?: Page;
  public parent?: Node;
  public app: TMagicApp;
@ -69,6 +73,7 @@ class Node extends EventEmitter {
    const { events, style } = data;
    this.events = events || [];
    this.style = style || {};
+    this.instance.config = data;
    this.emit('update-data', data);
  }

@ -76,6 +81,22 @@ class Node extends EventEmitter {
    this.eventQueue.push(event);
  }

+  public registerMethod(methods: Methods) {
+    if (!methods) {
+      return;
+    }
+
+    if (!this.instance) {
+      this.instance = {};
+    }
+
+    for (const [key, fn] of Object.entries(methods)) {
+      if (typeof fn === 'function') {
+        this.instance[key] = fn;
+      }
+    }
+  }
+
  public async runHookCode(hook: string, params?: Record<string, any>) {
    if (typeof this.data[hook] === 'function') {
      // 兼容旧的数据格式
@ -102,8 +123,9 @@ class Node extends EventEmitter {
      const { codeType = HookCodeType.CODE, codeId, params: itemParams = {} } = item;

      let functionContent: ((...args: any[]) => any) | string | undefined;
-      const functionParams: { app: TMagicApp; params: Record<string, any>; dataSource?: DataSource } = {
+      const functionParams: { app: TMagicApp; node: Node; params: Record<string, any>; dataSource?: DataSource } = {
        app: this.app,
+        node: this,
        params: params || itemParams,
      };

@ -136,12 +158,23 @@ class Node extends EventEmitter {
        this.listenLifeSafe();
      });

-      this.instance = instance;
+      if (instance) {
+        this.registerMethod(instance);
+        if (instance.config) {
+          this.setData(instance.config);
+        }
+      }
+
      await this.runHookCode('created');
    });

    this.once('mounted', async (instance: any) => {
-      this.instance = instance;
+      if (instance) {
+        this.registerMethod(instance);
+        if (instance.config) {
+          this.setData(instance.config);
+        }
+      }

      for (let eventConfig = this.eventQueue.shift(); eventConfig; eventConfig = this.eventQueue.shift()) {
        if (typeof instance[eventConfig.method] === 'function') {
--- a/packages/core/src/Page.ts
+++ b/packages/core/src/Page.ts
@ -18,7 +18,7 @@

 import type { Id, MComponent, MContainer, MPage, MPageFragment } from '@tmagic/schema';

-import type App from './App';
+import App from './App';
 import IteratorContainer from './IteratorContainer';
 import type { default as TMagicNode } from './Node';
 import Node from './Node';
@ -53,7 +53,7 @@ class Page extends Node {
      return;
    }

-    const node = new Node({
+    const node = new ((config.type && App.nodeClassMap.get(config.type)) || Node)({
      config,
      parent,
      page: this,
--- a/packages/core/src/utils.ts
+++ b/packages/core/src/utils.ts
@ -18,8 +18,6 @@
 import { JsEngine } from '@tmagic/schema';
 import { isNumber } from '@tmagic/utils';

-import type { default as TMagicNode } from './Node';
-
 export const style2Obj = (style: string) => {
  if (typeof style !== 'string') {
    return style;
@ -119,47 +117,7 @@ export const transformStyle = (style: Record<string, any> | string, jsEngine: Js
 export const COMMON_EVENT_PREFIX = 'magic:common:events:';
 export const COMMON_METHOD_PREFIX = 'magic:common:actions:';

-export const CommonMethod = {
-  SHOW: 'show',
-  HIDE: 'hide',
-  SCROLL_TO_VIEW: 'scrollIntoView',
-  SCROLL_TO_TOP: 'scrollToTop',
-};
-
-export const isCommonMethod = (methodName: string) => methodName.startsWith(COMMON_METHOD_PREFIX);
-
-export const triggerCommonMethod = (methodName: string, node: TMagicNode) => {
-  const { instance } = node;
-
-  if (!instance) return;
-
-  switch (methodName.replace(COMMON_METHOD_PREFIX, '')) {
-    case CommonMethod.SHOW:
-      instance.show();
-      break;
-
-    case CommonMethod.HIDE:
-      instance.hide();
-      break;
-
-    case CommonMethod.SCROLL_TO_VIEW:
-      instance.$el?.scrollIntoView({ behavior: 'smooth' });
-      break;
-
-    case CommonMethod.SCROLL_TO_TOP:
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-      break;
-
-    default:
-      break;
-  }
-};
-
 export interface EventOption {
  label: string;
  value: string;
 }
-
-export const DEFAULT_EVENTS: EventOption[] = [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }];
-
-export const DEFAULT_METHODS: EventOption[] = [];
--- a/packages/data-source/package.json
+++ b/packages/data-source/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/data-source",
  "type": "module",
  "main": "dist/tmagic-data-source.umd.cjs",
--- a/packages/data-source/src/DataSourceManager.ts
+++ b/packages/data-source/src/DataSourceManager.ts
@ -32,9 +32,16 @@ import { compiledNodeField, compliedConditions, compliedIteratorItem, createIter
 class DataSourceManager extends EventEmitter {
  private static dataSourceClassMap = new Map<string, typeof DataSource>();
  private static ObservedDataClass: ObservedDataClass = SimpleObservedData;
+  private static waitInitSchemaList = new Map<DataSourceManager, Record<string, DataSourceSchema[]>>();

  public static register<T extends typeof DataSource = typeof DataSource>(type: string, dataSource: T) {
    DataSourceManager.dataSourceClassMap.set(type, dataSource);
+    DataSourceManager.waitInitSchemaList?.forEach((listMap, app) => {
+      const list = listMap[type] || [];
+      for (let config = list.shift(); config; config = list.shift()) {
+        app.addDataSource(config);
+      }
+    });
  }

  public static getDataSourceClass(type: string) {
@ -55,6 +62,8 @@ class DataSourceManager extends EventEmitter {
  constructor({ app, useMock, initialData }: DataSourceManagerOptions) {
    super();

+    DataSourceManager.waitInitSchemaList.set(this, {});
+
    this.app = app;
    this.useMock = useMock;

@ -133,7 +142,24 @@ class DataSourceManager extends EventEmitter {
  public async addDataSource(config?: DataSourceSchema) {
    if (!config) return;

-    const DataSourceClass = DataSourceManager.dataSourceClassMap.get(config.type) || DataSource;
+    const DataSourceClass = DataSourceManager.dataSourceClassMap.get(config.type);
+
+    if (!DataSourceClass) {
+      let listMap = DataSourceManager.waitInitSchemaList.get(this);
+
+      if (!listMap) {
+        listMap = {};
+        DataSourceManager.waitInitSchemaList.set(this, listMap);
+      }
+
+      if (listMap[config.type]) {
+        listMap[config.type].push(config);
+      } else {
+        listMap[config.type] = [config];
+      }
+
+      return;
+    }

    const ds = new DataSourceClass({
      app: this.app,
@ -276,6 +302,7 @@ class DataSourceManager extends EventEmitter {
      ds.destroy();
    });
    this.dataSourceMap.clear();
+    DataSourceManager.waitInitSchemaList.delete(this);
  }

  public onDataChange(id: string, path: string, callback: (newVal: any) => void) {
@ -288,5 +315,6 @@ class DataSourceManager extends EventEmitter {
 }

 DataSourceManager.register('http', HttpDataSource as any);
+DataSourceManager.register('base', DataSource as any);

 export default DataSourceManager;
--- a/packages/dep/package.json
+++ b/packages/dep/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/dep",
  "type": "module",
  "main": "dist/tmagic-dep.umd.cjs",
--- a/packages/dep/src/Watcher.ts
+++ b/packages/dep/src/Watcher.ts
@ -222,7 +222,6 @@ export default class Watcher {
      for (const [key, value] of Object.entries(config)) {
        if (typeof value === 'undefined' || value === '') continue;

-        if (key === 'id' || key === 'name') continue;
        doCollect(key, value);
      }
    };
--- a/packages/dep/src/utils.ts
+++ b/packages/dep/src/utils.ts
@ -263,20 +263,20 @@ export const createDataSourceCondTarget = (ds: Pick<DataSourceSchema, 'id' | 'fi
    isTarget: (key: string | number, value: any) => isDataSourceCondTarget(ds, key, value),
  });

-export const createDataSourceMethodTarget = (ds: Pick<DataSourceSchema, 'id' | 'fields'>, initialDeps: DepData = {}) =>
+export const createDataSourceMethodTarget = (ds: Pick<DataSourceSchema, 'id' | 'methods'>, initialDeps: DepData = {}) =>
  new Target({
    type: DepTargetType.DATA_SOURCE_METHOD,
    id: ds.id,
    initialDeps,
    isTarget: (_key: string | number, value: any) => {
      // 使用data-source-method-select 可以配置出来
-      if (!Array.isArray(value) || !ds) {
+      if (!Array.isArray(value) || !ds?.methods) {
        return false;
      }

-      const [dsId, ...keys] = value;
+      const [dsId, methodName] = value;

-      if (dsId !== ds.id || ds.fields?.find((field) => field.name === keys[0])) {
+      if (!methodName || dsId !== ds.id || !ds.methods.find((field) => field.name === methodName)) {
        return false;
      }

--- a/packages/design/package.json
+++ b/packages/design/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/design",
  "type": "module",
  "sideEffects": [
--- a/packages/design/src/Autocomplete.vue
+++ b/packages/design/src/Autocomplete.vue
@ -42,7 +42,7 @@ const ui = getDesignConfig('components')?.autocomplete;

 const uiComponent = ui?.component || 'el-autocomplete';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<AutocompleteProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'select', 'update:modelValue']);

--- a/packages/design/src/Badge.vue
+++ b/packages/design/src/Badge.vue
@ -19,5 +19,5 @@ const props = defineProps<BadgeProps>();
 const ui = getDesignConfig('components')?.badge;
 const uiComponent = ui?.component || 'el-badge';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<BadgeProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Button.vue
+++ b/packages/design/src/Button.vue
@ -22,7 +22,7 @@ const ui = getDesignConfig('components')?.button;

 const uiComponent = ui?.component || 'el-button';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<ButtonProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['click']);

--- a/packages/design/src/Card.vue
+++ b/packages/design/src/Card.vue
@ -1,10 +1,10 @@
 <template>
  <component class="tmagic-design-card" :is="uiComponent" v-bind="uiProps">
-    <template #header>
+    <template #header v-if="$slots.header">
      <slot name="header" class="header"></slot>
    </template>

-    <template #default>
+    <template #default v-if="$slots.default">
      <slot name="default"></slot>
    </template>
  </component>
@ -26,5 +26,5 @@ const ui = getDesignConfig('components')?.card;

 const uiComponent = ui?.component || 'el-card';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<CardProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Cascader.vue
+++ b/packages/design/src/Cascader.vue
@ -25,7 +25,7 @@ const ui = getDesignConfig('components')?.cascader;

 const uiComponent = ui?.component || 'el-cascader';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<CascaderProps>(() => ui?.props(props) || props);

 const cascader = ref<any>();

--- a/packages/design/src/Checkbox.vue
+++ b/packages/design/src/Checkbox.vue
@ -6,7 +6,7 @@
    @update:modelValue="updateModelValue"
    @change="changeHandler"
  >
-    <template #default>
+    <template #default v-if="$slots.default">
      <slot></slot>
    </template>
  </component>
@ -31,7 +31,7 @@ const ui = getDesignConfig('components')?.checkbox;

 const uiComponent = ui?.component || 'el-checkbox';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<CheckboxProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/CheckboxGroup.vue
+++ b/packages/design/src/CheckboxGroup.vue
@ -26,7 +26,7 @@ const ui = getDesignConfig('components')?.checkboxGroup;

 const uiComponent = ui?.component || 'el-checkbox-group';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<CheckboxGroupProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/Col.vue
+++ b/packages/design/src/Col.vue
@ -20,5 +20,5 @@ const ui = getDesignConfig('components')?.col;

 const uiComponent = ui?.component || 'el-col';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<ColProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Collapse.vue
+++ b/packages/design/src/Collapse.vue
@ -26,7 +26,7 @@ const ui = getDesignConfig('components')?.collapse;

 const uiComponent = ui?.component || 'el-collapse';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<CollapseProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/CollapseItem.vue
+++ b/packages/design/src/CollapseItem.vue
@ -32,7 +32,7 @@ const ui = getDesignConfig('components')?.collapseItem;

 const uiComponent = ui?.component || 'el-collapse-item';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<CollapseItemProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/ColorPicker.vue
+++ b/packages/design/src/ColorPicker.vue
@ -28,7 +28,7 @@ const ui = getDesignConfig('components')?.colorPicker;

 const uiComponent = ui?.component || 'el-color-picker';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<ColorPickerProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/DatePicker.vue
+++ b/packages/design/src/DatePicker.vue
@ -27,7 +27,7 @@ const ui = getDesignConfig('components')?.datePicker;

 const uiComponent = ui?.component || 'el-date-picker';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<DatePickerProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/Dialog.vue
+++ b/packages/design/src/Dialog.vue
@ -32,7 +32,7 @@ const ui = getDesignConfig('components')?.dialog;

 const uiComponent = ui?.component || 'el-dialog';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<DialogProps>(() => ui?.props(props) || props);

 const closeHandler = (...args: any[]) => {
  emit('close', ...args);
--- a/packages/design/src/Divider.vue
+++ b/packages/design/src/Divider.vue
@ -20,5 +20,5 @@ const ui = getDesignConfig('components')?.divider;

 const uiComponent = ui?.component || 'el-divider';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<DividerProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Drawer.vue
+++ b/packages/design/src/Drawer.vue
@ -40,7 +40,7 @@ const ui = getDesignConfig('components')?.drawer;

 const uiComponent = ui?.component || 'el-drawer';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<DrawerProps>(() => ui?.props(props) || props);

 const drawer = ref<any>();

--- a/packages/design/src/Dropdown.vue
+++ b/packages/design/src/Dropdown.vue
@ -24,7 +24,7 @@ const ui = getDesignConfig('components')?.dropdown;

 const uiComponent = ui?.component || 'el-dropdown';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<DropdownProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['command']);

--- a/packages/design/src/DropdownItem.vue
+++ b/packages/design/src/DropdownItem.vue
@ -20,5 +20,5 @@ const ui = getDesignConfig('components')?.dropdownItem;

 const uiComponent = ui?.component || 'el-dropdown-item';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<DropdownItemProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Form.vue
+++ b/packages/design/src/Form.vue
@ -26,7 +26,7 @@ const ui = getDesignConfig('components')?.form;

 const uiComponent = ui?.component || 'el-form';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<FormProps>(() => ui?.props(props) || props);

 const form = ref<any>();

--- a/packages/design/src/FormItem.vue
+++ b/packages/design/src/FormItem.vue
@ -23,5 +23,5 @@ const ui = getDesignConfig('components')?.formItem;

 const uiComponent = ui?.component || 'el-form-item';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<FormItemProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Icon.vue
+++ b/packages/design/src/Icon.vue
@ -17,5 +17,5 @@ defineOptions({
 const ui = getDesignConfig('components')?.icon;
 const uiComponent = ui?.component || 'el-icon';
 const props = defineProps<IconProps>();
-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<IconProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Input.vue
+++ b/packages/design/src/Input.vue
@ -39,7 +39,7 @@ const ui = getDesignConfig('components')?.input;

 const uiComponent = ui?.component || 'el-input';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<InputProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'input', 'update:modelValue']);

--- a/packages/design/src/InputNumber.vue
+++ b/packages/design/src/InputNumber.vue
@ -25,7 +25,7 @@ const ui = getDesignConfig('components')?.inputNumber;

 const uiComponent = ui?.component || 'el-input-number';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<InputNumberProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'input', 'update:modelValue']);

--- a/packages/design/src/Option.vue
+++ b/packages/design/src/Option.vue
@ -20,5 +20,5 @@ const ui = getDesignConfig('components')?.option;

 const uiComponent = ui?.component || 'el-option';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<OptionProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/OptionGroup.vue
+++ b/packages/design/src/OptionGroup.vue
@ -20,7 +20,7 @@ const ui = getDesignConfig('components')?.optionGroup;

 const uiComponent = ui?.component || 'el-option-group';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<OptionGroupProps>(() => ui?.props(props) || props);

 const optionGroup = ref<any>();
 </script>
--- a/packages/design/src/Pagination.vue
+++ b/packages/design/src/Pagination.vue
@ -27,7 +27,7 @@ const ui = getDesignConfig('components')?.pagination;

 const uiComponent = ui?.component || 'el-pagination';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<PaginationProps>(() => ui?.props(props) || props);

 const handleSizeChange = (...args: any[]) => {
  emit('size-change', ...args);
--- a/packages/design/src/Radio.vue
+++ b/packages/design/src/Radio.vue
@ -20,5 +20,5 @@ const ui = getDesignConfig('components')?.radio;

 const uiComponent = ui?.component || 'el-radio';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<RadioProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/RadioButton.vue
+++ b/packages/design/src/RadioButton.vue
@ -20,5 +20,5 @@ const ui = getDesignConfig('components')?.radioButton;

 const uiComponent = ui?.component || 'el-radio-button';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<RadioButtonProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/RadioGroup.vue
+++ b/packages/design/src/RadioGroup.vue
@ -26,7 +26,7 @@ const ui = getDesignConfig('components')?.radioGroup;

 const uiComponent = ui?.component || 'el-radio-group';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<RadioGroupProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/Select.vue
+++ b/packages/design/src/Select.vue
@ -31,7 +31,7 @@ const ui = getDesignConfig('components')?.select;

 const uiComponent = ui?.component || 'el-select';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<SelectProps>(() => ui?.props(props) || props);

 const select = ref<any>();

--- a/packages/design/src/Step.vue
+++ b/packages/design/src/Step.vue
@ -26,5 +26,5 @@ const ui = getDesignConfig('components')?.step;

 const uiComponent = ui?.component || 'el-step';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<StepProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Steps.vue
+++ b/packages/design/src/Steps.vue
@ -20,5 +20,5 @@ const ui = getDesignConfig('components')?.steps;

 const uiComponent = ui?.component || 'el-steps';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<StepsProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Switch.vue
+++ b/packages/design/src/Switch.vue
@ -28,7 +28,7 @@ const ui = getDesignConfig('components')?.switch;

 const uiComponent = ui?.component || 'el-switch';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<SwitchProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/TabPane.vue
+++ b/packages/design/src/TabPane.vue
@ -26,5 +26,5 @@ const ui = getDesignConfig('components')?.tabPane;

 const uiComponent = ui?.component || 'el-tab-pane';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<TabPaneProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Table.vue
+++ b/packages/design/src/Table.vue
@ -33,7 +33,7 @@ const ui = getDesignConfig('components')?.table;

 const uiComponent = ui?.component || 'el-table';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<TableProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['select', 'sort-change', 'expand-change', 'cell-click']);

--- a/packages/design/src/TableColumn.vue
+++ b/packages/design/src/TableColumn.vue
@ -23,5 +23,5 @@ const ui = getDesignConfig('components')?.tableColumn;

 const uiComponent = ui?.component || 'el-table-column';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<TableColumnProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Tabs.vue
+++ b/packages/design/src/Tabs.vue
@ -30,7 +30,7 @@ const ui = getDesignConfig('components')?.tabs;

 const uiComponent = ui?.component || 'el-tabs';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<TabsProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['tab-click', 'tab-add', 'tab-remove', 'update:model-value']);

--- a/packages/design/src/Tag.vue
+++ b/packages/design/src/Tag.vue
@ -20,5 +20,5 @@ const ui = getDesignConfig('components')?.tag;

 const uiComponent = ui?.component || 'el-tag';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<TagProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/TimePicker.vue
+++ b/packages/design/src/TimePicker.vue
@ -25,7 +25,7 @@ const ui = getDesignConfig('components')?.timePicker;

 const uiComponent = ui?.component || 'el-time-picker';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<TimePickerProps>(() => ui?.props(props) || props);

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/Tooltip.vue
+++ b/packages/design/src/Tooltip.vue
@ -23,5 +23,5 @@ const ui = getDesignConfig('components')?.tooltip;

 const uiComponent = ui?.component || 'el-tooltip';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<TooltipProps>(() => ui?.props(props) || props);
 </script>
--- a/packages/design/src/Tree.vue
+++ b/packages/design/src/Tree.vue
@ -35,7 +35,7 @@ const ui = getDesignConfig('components')?.tree;

 const uiComponent = ui?.component || 'el-tree';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<TreeProps>(() => ui?.props(props) || props);

 const emit = defineEmits([
  'node-click',
--- a/packages/design/src/Upload.vue
+++ b/packages/design/src/Upload.vue
@ -29,7 +29,7 @@ const ui = getDesignConfig('components')?.upload;

 const uiComponent = ui?.component || 'el-upload';

-const uiProps = computed(() => ui?.props(props) || props);
+const uiProps = computed<UploadProps>(() => ui?.props(props) || props);

 const upload = ref<any>();

--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/editor",
  "type": "module",
  "sideEffects": [
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@ -37,7 +37,7 @@
 </template>

 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, type Ref, ref, useTemplateRef } from 'vue';

 import { useZIndex } from '@tmagic/design';

@ -73,7 +73,7 @@ const menuEl = useTemplateRef<HTMLDivElement>('menu');
 const buttonRefs = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
 const subMenuRef = useTemplateRef<any>('subMenu');
 const visible = ref(false);
-const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
+const subMenuData: Ref<(MenuButton | MenuComponent)[]> = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);

--- a/packages/editor/src/initService.ts
+++ b/packages/editor/src/initService.ts
@ -502,6 +502,7 @@ export const initServiceEvents = (
      isModifyField =
        changeRecord.propPath === 'fields' ||
        /fields.(\d)+.name/.test(changeRecord.propPath) ||
+        /fields.(\d)+.defaultValue/.test(changeRecord.propPath) ||
        /fields.(\d)+$/.test(changeRecord.propPath);

      isModifyMock = changeRecord.propPath === 'mocks';
@ -523,25 +524,35 @@ export const initServiceEvents = (
      if (Array.isArray(root?.items)) {
        depService.clearIdleTasks();

-        removeDataSourceTarget(config.id);
-        initDataSourceDepTarget(config);
-
        let collectIdlePromises: Promise<void[]>[] = [];
        if (isModifyField) {
+          depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
+          depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_COND);
+
+          depService.addTarget(createDataSourceTarget(config, reactive({})));
+          depService.addTarget(createDataSourceCondTarget(config, reactive({})));
+
          collectIdlePromises = [
            collectIdle(root.items, true, DepTargetType.DATA_SOURCE),
            collectIdle(root.items, true, DepTargetType.DATA_SOURCE_COND),
          ];
        } else if (isModifyMock) {
+          depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
+
+          depService.addTarget(createDataSourceTarget(config, reactive({})));
+
          collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE)];
        } else if (isModifyMethod) {
+          depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_METHOD);
+
+          depService.addTarget(createDataSourceMethodTarget(config, reactive({})));
+
          collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE_METHOD)];
        }
-        Promise.all(collectIdlePromises).then(() => {
-          updateDataSourceSchema();
-          updateDsData();
-          updateStageNodes(root.items);
-        });
+        Promise.all(collectIdlePromises)
+          .then(() => updateDataSourceSchema())
+          .then(() => updateDsData())
+          .then(() => updateStageNodes(root.items));
      }
    } else if (root?.dataSources) {
      updateDsData();
@ -616,20 +627,31 @@ export const initServiceEvents = (
      }
      root.dataSourceCondDeps[target.id] = target.deps;
    }
+
+    if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
+      if (!root.dataSourceMethodDeps) {
+        root.dataSourceMethodDeps = {};
+      }
+      root.dataSourceMethodDeps[target.id] = target.deps;
+    }
  };

-  const targetRemoveHandler = (id: string | number) => {
+  const targetRemoveHandler = (id: string | number, type: DepTargetType) => {
    const root = editorService.get('root');

    if (!root) return;

-    if (root.dataSourceDeps) {
+    if (root.dataSourceDeps && type === DepTargetType.DATA_SOURCE) {
      delete root.dataSourceDeps[id];
    }

-    if (root.dataSourceCondDeps) {
+    if (root.dataSourceCondDeps && type === DepTargetType.DATA_SOURCE_COND) {
      delete root.dataSourceCondDeps[id];
    }
+
+    if (root.dataSourceMethodDeps && type === DepTargetType.DATA_SOURCE_METHOD) {
+      delete root.dataSourceMethodDeps[id];
+    }
  };

  depService.on('add-target', targetAddHandler);
--- a/packages/editor/src/layouts/props-panel/PropsPanel.vue
+++ b/packages/editor/src/layouts/props-panel/PropsPanel.vue
@ -171,7 +171,7 @@ const propsPanelWidth = ref(
 );

 onMounted(() => {
-  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${propsPanelWidth.value}px`);
+  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${Math.max(propsPanelWidth.value, 0)}px`);
 });

 const widthChange = ({ deltaX }: OnDrag) => {
@ -187,7 +187,7 @@ const widthChange = ({ deltaX }: OnDrag) => {
  if (value > uiService.get('columnWidth').right) {
    value = uiService.get('columnWidth').right - 40;
  }
-  propsPanelWidth.value = value;
+  propsPanelWidth.value = Math.max(value, 0);
 };

 watch(propsPanelWidth, (value) => {
--- a/packages/editor/src/layouts/props-panel/use-style-panel.ts
+++ b/packages/editor/src/layouts/props-panel/use-style-panel.ts
@ -1,4 +1,4 @@
-import { computed, type Ref } from 'vue';
+import { computed, type Ref, watch } from 'vue';

 import { Protocol } from '@editor/services/storage';
 import { Services } from '@editor/type';
@ -21,6 +21,15 @@ export const useStylePanel = (

  const showStylePanelToggleButton = computed(() => uiService.get('frameworkRect').width >= 1280);

+  watch(
+    () => uiService.get('frameworkRect').width,
+    () => {
+      if (uiService.get('columnWidth').right < propsPanelWidth.value) {
+        toggleStylePanel(false);
+      }
+    },
+  );
+
  const toggleStylePanel = (showStylePanel: boolean) => {
    uiService.set('showStylePanel', showStylePanel);
    storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN });
--- a/packages/editor/src/services/dep.ts
+++ b/packages/editor/src/services/dep.ts
@ -28,7 +28,7 @@ import BaseService from './BaseService';

 export interface DepEvents {
  'add-target': [target: Target];
-  'remove-target': [id: string | number];
+  'remove-target': [id: string | number, type: string | DepTargetType];
  collected: [nodes: MNode[], deep: boolean];
  'ds-collected': [nodes: MNode[], deep: boolean];
 }
@ -77,7 +77,7 @@ class Dep extends BaseService {
    if (!targets) return;

    for (const target of Object.values(targets)) {
-      this.emit('remove-target', target.id);
+      this.emit('remove-target', target.id, type);
    }
  }

@ -96,7 +96,7 @@ class Dep extends BaseService {

  public removeTarget(id: Id, type: string = DepTargetType.DEFAULT) {
    this.watcher.removeTarget(id, type);
-    this.emit('remove-target', id);
+    this.emit('remove-target', id, type);
  }

  public clearTargets() {
--- a/packages/editor/src/services/events.ts
+++ b/packages/editor/src/services/events.ts
@ -19,11 +19,9 @@
 import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';

-import { DEFAULT_EVENTS, DEFAULT_METHODS, EventOption } from '@tmagic/core';
+import { type EventOption } from '@tmagic/core';
 import { toLine } from '@tmagic/utils';

-import type { ComponentGroup } from '@editor/type';
-
 import BaseService from './BaseService';

 let eventMap: Record<string, EventOption[]> = reactive({});
@ -34,20 +32,6 @@ class Events extends BaseService {
    super([]);
  }

-  public init(componentGroupList: ComponentGroup[]) {
-    componentGroupList.forEach((group) => {
-      group.items.forEach((element) => {
-        const type = toLine(element.type);
-        if (!this.getEvent(type)) {
-          this.setEvent(type, DEFAULT_EVENTS);
-        }
-        if (!this.getMethod(type)) {
-          this.setMethod(type, DEFAULT_METHODS);
-        }
-      });
-    });
-  }
-
  public setEvents(events: Record<string, EventOption[]>) {
    Object.keys(events).forEach((type: string) => {
      this.setEvent(toLine(type), events[type] || []);
@ -55,11 +39,11 @@ class Events extends BaseService {
  }

  public setEvent(type: string, events: EventOption[]) {
-    eventMap[toLine(type)] = [...DEFAULT_EVENTS, ...events];
+    eventMap[toLine(type)] = [...events];
  }

  public getEvent(type: string): EventOption[] {
-    return cloneDeep(eventMap[toLine(type)] || DEFAULT_EVENTS);
+    return cloneDeep(eventMap[toLine(type)]) || [];
  }

  public setMethods(methods: Record<string, EventOption[]>) {
@ -69,11 +53,11 @@ class Events extends BaseService {
  }

  public setMethod(type: string, method: EventOption[]) {
-    methodMap[toLine(type)] = [...DEFAULT_METHODS, ...method];
+    methodMap[toLine(type)] = [...method];
  }

  public getMethod(type: string) {
-    return cloneDeep(methodMap[toLine(type)] || DEFAULT_METHODS);
+    return cloneDeep(methodMap[toLine(type)]) || [];
  }

  public resetState() {
--- a/packages/editor/tests/unit/services/events.spec.ts
+++ b/packages/editor/tests/unit/services/events.spec.ts
@ -18,50 +18,18 @@

 import { describe, expect, test } from 'vitest';

-import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
-
 import events from '@editor/services/events';

 describe('events', () => {
-  test('init', () => {
-    events.init([
-      {
-        title: '容器',
-        items: [
-          {
-            icon: 'el-icon-folder-opened',
-            text: '组',
-            type: 'container',
-            data: {
-              id: 0,
-              reportType: 'module',
-            },
-          },
-          {
-            icon: 'el-icon-files',
-            text: '标签页(tab)',
-            type: 'tabs',
-            data: {
-              id: 0,
-              reportType: 'module',
-            },
-          },
-        ],
-      },
-    ]);
-    expect(events.getEvent('container')).toHaveLength(DEFAULT_EVENTS.length);
-    expect(events.getMethod('container')).toHaveLength(DEFAULT_METHODS.length);
-  });
-
  test('setEvent', () => {
    const event = [{ label: '点击', value: 'magic:common:events:click' }];
    events.setEvent('button', event);
-    expect(events.getEvent('button')).toHaveLength(DEFAULT_EVENTS.length + 1);
+    expect(events.getEvent('button')).toHaveLength(1);
  });

  test('setMethod', () => {
    const method = [{ label: '点击', value: 'magic:common:events:click' }];
    events.setMethod('button', method);
-    expect(events.getMethod('button')).toHaveLength(DEFAULT_METHODS.length + 1);
+    expect(events.getMethod('button')).toHaveLength(1);
  });
 });
--- a/packages/element-plus-adapter/package.json
+++ b/packages/element-plus-adapter/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/element-plus-adapter",
  "type": "module",
  "main": "dist/tmagic-element-plus-adapter.umd.cjs",
--- a/packages/form/package.json
+++ b/packages/form/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/form",
  "type": "module",
  "sideEffects": [
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/schema",
  "type": "module",
  "main": "dist/tmagic-schema.umd.cjs",
--- a/packages/stage/package.json
+++ b/packages/stage/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/stage",
  "type": "module",
  "main": "dist/tmagic-stage.umd.cjs",
--- a/packages/stage/src/StageRender.ts
+++ b/packages/stage/src/StageRender.ts
@ -56,6 +56,10 @@ export default class StageRender extends EventEmitter {
  public getMagicApi = () => ({
    onPageElUpdate: (el: HTMLElement) => this.emit('page-el-update', el),
    onRuntimeReady: (runtime: Runtime) => {
+      if (this.runtime) {
+        return;
+      }
+
      this.runtime = runtime;
      // @ts-ignore
      globalThis.runtime = runtime;
--- a/packages/table/package.json
+++ b/packages/table/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/table",
  "type": "module",
  "sideEffects": [
--- a/packages/tdesign-vue-next-adapter/package.json
+++ b/packages/tdesign-vue-next-adapter/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/tdesign-vue-next-adapter",
  "type": "module",
  "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@tmagic/ui-react",
-  "version": "1.5.9",
+  "version": "1.5.12",
  "type": "module",
  "main": "dist/tmagic-ui-react.js",
  "types": "types/index.d.ts",
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/ui",
  "type": "module",
  "main": "dist/tmagic-ui.js",
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.12",
  "name": "@tmagic/utils",
  "type": "module",
  "main": "dist/tmagic-utils.umd.cjs",
--- a/playground/package.json
+++ b/playground/package.json
@ -1,6 +1,6 @@
 {
  "name": "tmagic-playground",
-  "version": "1.5.9",
+  "version": "1.5.12",
  "type": "module",
  "private": true,
  "scripts": {
@ -13,11 +13,11 @@
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.5.9",
-    "@tmagic/editor": "1.5.9",
-    "@tmagic/element-plus-adapter": "1.5.9",
+    "@tmagic/core": "1.5.12",
+    "@tmagic/editor": "1.5.12",
+    "@tmagic/element-plus-adapter": "1.5.12",
    "@tmagic/tmagic-form-runtime": "1.1.3",
-    "element-plus": "^2.9.3",
+    "element-plus": "^2.9.7",
    "lodash-es": "^4.17.21",
    "monaco-editor": "^0.48.0",
    "serialize-javascript": "^6.0.0",
@ -29,14 +29,14 @@
    "@types/node": "^18.19.0",
    "@types/serialize-javascript": "^5.0.1",
    "@vitejs/plugin-legacy": "^6.0.0",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^5.2.3",
    "@vitejs/plugin-vue-jsx": "^4.0.1",
    "@vue/compiler-sfc": "^3.5.13",
    "sass": "^1.83.0",
    "terser": "^5.31.6",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
    "unplugin-auto-import": "^0.12.0",
    "unplugin-vue-components": "^0.22.11",
-    "vite": "^6.0.10"
+    "vite": "^6.2.4"
  }
 }
--- a/playground/src/configs/dsl.ts
+++ b/playground/src/configs/dsl.ts
@ -64,6 +64,21 @@ const dsl: MApp = {
      },
      params: [],
    },
+    code_6778: {
+      name: 'toOtherPage',
+      desc: '',
+      timing: '',
+      params: [
+        {
+          name: 'pageId',
+          extra: '',
+          type: '',
+        },
+      ],
+      content: ({ app, params }) => {
+        app.setPage(params.pageId);
+      },
+    },
  },
  items: [
    {
@ -250,6 +265,37 @@ const dsl: MApp = {
          created: [],
          displayConds: [],
        },
+        {
+          id: 'button_1cb163ad',
+          text: '前往page2',
+          multiple: true,
+          style: {
+            width: '270',
+            height: '37.5',
+            border: 0,
+            backgroundColor: '#fb6f00',
+            position: 'absolute',
+            left: 56,
+            top: 266,
+          },
+          type: 'button',
+          name: '按钮',
+          events: [
+            {
+              name: 'magic:common:events:click',
+              actions: [
+                {
+                  actionType: ActionType.CODE,
+                  codeId: 'code_6778',
+                  params: {
+                    pageId: 'page_171ff161',
+                  },
+                },
+              ],
+            },
+          ],
+          displayConds: [],
+        },
        {
          type: 'overlay',
          id: 'overlay_2159',
@ -376,6 +422,53 @@ const dsl: MApp = {
        },
      ],
    },
+    {
+      id: 'page_171ff161',
+      items: [
+        {
+          id: 'button_80ca1076',
+          text: '返回',
+          multiple: true,
+          style: {
+            width: '270',
+            height: '37.5',
+            border: 0,
+            backgroundColor: '#fb6f00',
+            position: 'absolute',
+            left: 48,
+            top: 297,
+          },
+          type: 'button',
+          name: '按钮',
+          events: [
+            {
+              name: 'magic:common:events:click',
+              actions: [
+                {
+                  actionType: ActionType.CODE,
+                  codeId: 'code_6778',
+                  params: {
+                    pageId: 'page_299',
+                  },
+                },
+              ],
+            },
+          ],
+          displayConds: [],
+        },
+      ],
+      style: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        top: 0,
+        left: 0,
+      },
+      type: NodeType.PAGE,
+      name: 'page2',
+      title: '',
+      layout: 'absolute',
+    },
  ],
  dataSources: [
    {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/react-components/button/package.json
+++ b/react-components/button/package.json
@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
  "name": "@tmagic/react-button",
  "type": "module",
  "main": "src/index.ts",
@ -14,16 +14,13 @@
    "url": "https://github.com/Tencent/tmagic-editor.git"
  },
  "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
    "@tmagic/react-runtime-help": "workspace:^",
    "react": ">=18.3.1",
    "react-dom": ">=18.3.1",
    "typescript": "*"
  },
  "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
    "typescript": {
      "optional": true
    }
--- a/react-components/button/src/Button.tsx
+++ b/react-components/button/src/Button.tsx
@ -18,8 +18,9 @@

 import React from 'react';

+import type { Id, MComponent } from '@tmagic/core';
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MComponent } from '@tmagic/schema';

 interface ButtonSchema extends Omit<MComponent, 'id'> {
  id?: Id;
@ -35,6 +36,7 @@ interface ButtonProps {
  containerIndex: number;
  iteratorIndex?: number[];
  iteratorContainerId?: Id[];
+  onClick: any;
 }

 const Page: React.FC<ButtonProps> = ({
@ -46,10 +48,16 @@ const Page: React.FC<ButtonProps> = ({
  iteratorIndex,
  iteratorContainerId,
 }) => {
-  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
+  const { app, node } = useApp({ config, iteratorIndex, iteratorContainerId });

  if (!app) return null;

+  const clickHandler = () => {
+    if (node && app) {
+      app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+    }
+  };
+
  return (
    <button
      className={className}
@ -58,6 +66,7 @@ const Page: React.FC<ButtonProps> = ({
      data-tmagic-container-index={containerIndex}
      data-tmagic-iterator-index={iteratorIndex}
      data-tmagic-iterator-container-id={iteratorContainerId}
+      onClick={clickHandler}
    >
      {config.text || ''}
    </button>
--- a/react-components/button/src/event.ts
+++ b/react-components/button/src/event.ts
@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
  methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };
--- a/react-components/container/package.json
+++ b/react-components/container/package.json
@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
  "name": "@tmagic/react-container",
  "type": "module",
  "main": "src/index.ts",
@ -14,17 +14,13 @@
    "url": "https://github.com/Tencent/tmagic-editor.git"
  },
  "peerDependencies": {
-    "@tmagic/utils": "workspace:^",
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
    "@tmagic/react-runtime-help": "workspace:^",
    "react": ">=18.3.1",
    "react-dom": ">=18.3.1",
    "typescript": "*"
  },
  "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
    "typescript": {
      "optional": true
    }
--- a/react-components/container/src/Component.tsx
+++ b/react-components/container/src/Component.tsx
@ -0,0 +1,66 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useContext } from 'react';
+
+import type TMagicApp from '@tmagic/core';
+import type { Id, MComponent } from '@tmagic/core';
+import { IS_DSL_NODE_KEY } from '@tmagic/core';
+import { AppContent, useComponentStatus, useNode } from '@tmagic/react-runtime-help';
+
+interface ComponentProps {
+  config: Omit<MComponent, 'id'>;
+  index: number;
+  iteratorIndex: number[];
+  iteratorContainerId: Id[];
+}
+
+const Container: React.FC<ComponentProps> = (props) => {
+  const app: TMagicApp | undefined = useContext(AppContent);
+
+  const node = useNode(props);
+  const MagicUiComp = app?.resolveComponent(props.config.type || 'container');
+
+  if (!MagicUiComp) return null;
+
+  if (typeof props.config.display === 'function' && props.config.display({ app, node }) === false) {
+    return null;
+  }
+
+  const { style, className } = useComponentStatus(props);
+
+  return (
+    <MagicUiComp
+      data-tmagic-id={`${props.config.id || ''}`}
+      data-container-index={props.index}
+      data-tmagic-iterator-index={props.iteratorIndex}
+      data-tmagic-iterator-container-id={props.iteratorContainerId}
+      containerIndex={props.index}
+      iteratorIndex={props.iteratorIndex}
+      iteratorContainerId={props.iteratorContainerId}
+      key={props.config.id ?? props.index}
+      config={{ ...props.config, [IS_DSL_NODE_KEY]: true }}
+      className={className}
+      style={style}
+    ></MagicUiComp>
+  );
+};
+
+Container.displayName = 'magic-ui-container-item';
+
+export default Container;
--- a/react-components/container/src/Container.tsx
+++ b/react-components/container/src/Container.tsx
@ -18,9 +18,11 @@

 import React from 'react';

+import type { Id, MContainer, MNode } from '@tmagic/core';
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MContainer, MNode } from '@tmagic/schema';
-import { IS_DSL_NODE_KEY } from '@tmagic/utils';
+
+import Component from './Component';

 interface ContainerSchema extends Omit<MContainer, 'id'> {
  id?: Id;
@ -28,71 +30,53 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
 }

 interface ContainerProps {
+  id?: Id;
  config: ContainerSchema;
  className: string;
  style: Record<string, any>;
-  id: string;
  containerIndex: number;
  iteratorIndex: number[];
  iteratorContainerId: Id[];
 }

 const Container: React.FC<ContainerProps> = ({
-  config,
  id,
-  style,
+  config,
  className,
  containerIndex,
+  style,
  iteratorIndex,
  iteratorContainerId,
 }) => {
-  const { app, display } = useApp({ config });
+  const { app, node } = useApp({ config });

  if (!app) return null;

-  const classNames = config[IS_DSL_NODE_KEY] ? [] : ['magic-ui-container'];
-  if (config.layout) {
-    classNames.push(`magic-layout-${config.layout}`);
-  }
-  if (className) {
-    classNames.push(className);
-  }
+  const clickHandler = () => {
+    if (node && app) {
+      app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+    }
+  };

  return (
    <div
-      data-tmagic-id={`${id || ''}`}
+      data-tmagic-id={`${id || config.id || ''}`}
      data-container-index={containerIndex}
      data-tmagic-iterator-index={iteratorIndex}
      data-tmagic-iterator-container-id={iteratorContainerId}
-      className={classNames.join(' ')}
-      style={config[IS_DSL_NODE_KEY] ? style : app.transformStyle(config.style || {})}
+      className={className}
+      style={style}
+      onClick={clickHandler}
    >
-      {config.items?.map((item: MNode, index: number) => {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        const MagicUiComp = app.resolveComponent(item.type || 'container');
-
-        if (!MagicUiComp) return null;
-
-        if (!display(item)) return null;
-
-        const itemClassName = [`magic-ui-${item.type}`];
-        if (item.className) {
-          itemClassName.push(item.className);
-        }
-
-        return (
-          <MagicUiComp
-            id={`${item.id || ''}`}
-            containerIndex={index}
-            iteratorIndex={iteratorIndex}
-            iteratorContainerId={iteratorContainerId}
-            key={item.id ?? index}
-            config={{ ...item, [IS_DSL_NODE_KEY]: true }}
-            className={itemClassName.join(' ')}
-            style={app.transformStyle(item.style || {})}
-          ></MagicUiComp>
-        );
-      })}
+      {config.items?.map((item: MNode, index: number) => (
+        <Component
+          key={item.id ?? index}
+          config={item}
+          index={index}
+          iteratorIndex={iteratorIndex}
+          iteratorContainerId={iteratorContainerId}
+        />
+      ))}
    </div>
  );
 };
--- a/react-components/container/src/event.ts
+++ b/react-components/container/src/event.ts
@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
  methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };
--- a/react-components/container/src/formConfig.ts
+++ b/react-components/container/src/formConfig.ts
@ -16,7 +16,7 @@
 * limitations under the License.
 */

-import { getElById } from '@tmagic/utils';
+import { getElById } from '@tmagic/core';

 export default [
  {
--- a/react-components/img/package.json
+++ b/react-components/img/package.json
@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.1.0",
  "name": "@tmagic/react-img",
  "type": "module",
  "main": "src/index.ts",
@ -14,16 +14,13 @@
    "url": "https://github.com/Tencent/tmagic-editor.git"
  },
  "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
    "@tmagic/react-runtime-help": "workspace:^",
    "react": ">=18.3.1",
    "react-dom": ">=18.3.1",
    "typescript": "*"
  },
  "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
    "typescript": {
      "optional": true
    }
--- a/react-components/img/src/Img.tsx
+++ b/react-components/img/src/Img.tsx
@ -18,8 +18,8 @@

 import React from 'react';

+import type { Id, MComponent } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MComponent } from '@tmagic/schema';

 interface ImgSchema extends Omit<MComponent, 'id'> {
  id?: Id;
--- a/react-components/img/src/event.ts
+++ b/react-components/img/src/event.ts
@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
  methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };
--- a/react-components/iterator-container/package.json
+++ b/react-components/iterator-container/package.json
@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
  "name": "@tmagic/react-iterator-container",
  "type": "module",
  "main": "src/index.ts",
@ -14,17 +14,13 @@
    "url": "https://github.com/Tencent/tmagic-editor.git"
  },
  "peerDependencies": {
-    "@tmagic/utils": "workspace:^",
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
    "@tmagic/react-runtime-help": "workspace:^",
    "react": ">=18.3.1",
    "react-dom": ">=18.3.1",
    "typescript": "*"
  },
  "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
    "typescript": {
      "optional": true
    }
--- a/react-components/iterator-container/src/IteratorContainer.tsx
+++ b/react-components/iterator-container/src/IteratorContainer.tsx
@ -1,8 +1,13 @@
 import React from 'react';

-import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
+import {
+  COMMON_EVENT_PREFIX,
+  type Id,
+  type IteratorContainer as TMagicIteratorContainer,
+  type MIteratorContainer,
+  type MNode,
+} from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MIteratorContainer, MNode } from '@tmagic/schema';

 interface IteratorContainerSchema extends Omit<MIteratorContainer, 'id'> {
  id?: Id;
@ -36,7 +41,7 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
  iteratorIndex,
  iteratorContainerId,
 }) => {
-  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
+  const { app, node } = useApp({ config, iteratorIndex, iteratorContainerId });

  let { iteratorData = [] } = config;
  const { itemConfig, dsField, items } = config;
@ -81,6 +86,12 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
    };
  });

+  const clickHandler = () => {
+    if (node && app) {
+      app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+    }
+  };
+
  return (
    <div
      className={className}
@ -89,6 +100,7 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
      data-container-index={containerIndex}
      data-iterator-index={iteratorIndex}
      data-iterator-container-id={iteratorContainerId}
+      onClick={clickHandler}
    >
      {configs.map((config: any, index: number) => (
        <MagicUiComp
--- a/react-components/iterator-container/src/event.ts
+++ b/react-components/iterator-container/src/event.ts
@ -1,4 +1,6 @@
+import { COMMON_EVENT_PREFIX } from '@tmagic/core';
+
 export default {
  methods: [],
-  events: [],
+  events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
 };
--- a/react-components/iterator-container/src/formConfig.ts
+++ b/react-components/iterator-container/src/formConfig.ts
@ -15,8 +15,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { NODE_CONDS_KEY } from '@tmagic/schema';
-import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';

 export default [
  {
--- a/react-components/overlay/package.json
+++ b/react-components/overlay/package.json
@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.1.0",
  "name": "@tmagic/react-overlay",
  "type": "module",
  "main": "src/index.ts",
@ -14,16 +14,13 @@
    "url": "https://github.com/Tencent/tmagic-editor.git"
  },
  "peerDependencies": {
-    "@tmagic/schema": "workspace:^",
+    "@tmagic/core": "workspace:^",
    "@tmagic/react-runtime-help": "workspace:^",
    "react": ">=18.3.1",
    "react-dom": ">=18.3.1",
    "typescript": "*"
  },
  "peerDependenciesMeta": {
-    "@tmagic/schema": {
-      "optional": true
-    },
    "typescript": {
      "optional": true
    }
--- a/react-components/overlay/src/Overlay.tsx
+++ b/react-components/overlay/src/Overlay.tsx
@ -18,8 +18,8 @@

 import React, { useEffect, useState } from 'react';

+import { type Id, IS_DSL_NODE_KEY, type MComponent, type MContainer, type MNode, type MPage } from '@tmagic/core';
 import { useApp } from '@tmagic/react-runtime-help';
-import type { Id, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';

 interface OverlayProps {
  config: MComponent;
@ -93,11 +93,11 @@ const Overlay: React.FC<OverlayProps> = ({

  return (
    <MagicUiComp
-      id={id}
+      data-tmagic-id={`${id || config.id || ''}`}
      containerIndex={containerIndex}
      iteratorIndex={iteratorIndex}
      iteratorContainerId={iteratorContainerId}
-      config={config}
+      config={{ ...config, [IS_DSL_NODE_KEY]: false }}
      className={className}
      style={style}
    ></MagicUiComp>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
roymondchen	18524d89fb	feat(core): 支持自定义Node类	2025-04-02 17:24:02 +08:00
roymondchen	840c2c3c7d	fix(data-source): 数据源初始化时机比注册早回出现死循环	2025-04-02 17:17:30 +08:00
roymondchen	9b546645f3	chore: update deps	2025-03-31 20:31:29 +08:00
roymondchen	38ea57c6cb	chore: update lockfile v1.5.12	2025-03-27 16:32:44 +08:00
roymondchen	c8fc2f7bfb	chore: release v1.5.12	2025-03-27 16:30:51 +08:00
roymondchen	b715a87f40	feat(cli): 如果识别不要组件文件，则默认从npm包的default导入	2025-03-27 16:25:58 +08:00
roymondchen	f17ef325b1	chore: update vite	2025-03-27 11:29:18 +08:00
roymondchen	4ddc55aa6d	fix(design): card没有slots时隐藏对应slot	2025-03-27 11:12:27 +08:00
roymondchen	2a714ae9cc	fix(vue-components): button删除调试代码，text支持富文本	2025-03-18 16:54:55 +08:00
roymondchen	d53a479b21	style(vue-runtime-help): 更新ts定义	2025-03-18 16:52:21 +08:00
roymondchen	f5742c107a	fix(editor): 获取关联组件的方法默认值	2025-03-13 14:30:28 +08:00
roymondchen	9c7d711c16	fix(editor): 数据源修改后，依赖重新收集不准确	2025-03-12 14:22:33 +08:00
roymondchen	11c027c71b	chore: update lockfile v1.5.11	2025-03-11 17:14:17 +08:00
roymondchen	16f1c47db6	chore: release v1.5.11	2025-03-11 17:12:29 +08:00
roymondchen	72108e0019	fix(dep): 数据源方法收集判断	2025-03-11 17:01:32 +08:00
roymondchen	0c207c7b83	fix(dep): 依赖收集不能过滤id/name	2025-03-10 11:32:27 +08:00
roymondchen	f671c670db	feat(vue-runtime-help): useDsl/useEditorDsl添加app默认参数	2025-03-07 14:33:13 +08:00
roymondchen	a293bd8d3f	chore: update lockfile v1.5.10	2025-03-07 11:33:33 +08:00
roymondchen	7dad6720e4	chore: release v1.5.10	2025-03-07 11:31:46 +08:00
roymondchen	402f05f3d6	test(editor): 删除eventsService.init用例	2025-03-06 20:36:10 +08:00
roymondchen	0736646c63	feat(vue-components,react-components): 增加点击事件，使用组件状态hook	2025-03-06 20:29:38 +08:00
roymondchen	8d0040da53	chore(runtime): 更新runtime-help	2025-03-06 20:22:52 +08:00
roymondchen	6f5bb84c04	feat(reate-runtime-help,vue-runtime-help): 新增组件状态hook	2025-03-06 20:20:01 +08:00
roymondchen	63fe6ec68b	fix(stage): 防止runtime重复注册	2025-03-06 20:10:52 +08:00
roymondchen	ff07147270	feat(core): node新增registerMethod方法，用于组件注册供其他组件通过事件配置调用	2025-03-06 20:08:47 +08:00
roymondchen	c8e1cffca9	feat(core, editor): 删除公共的点击事件实现，由组件自行添加	2025-03-06 20:05:49 +08:00
roymondchen	5ba2a73c70	feat(core): hook函数调用添加node参数	2025-03-04 19:11:36 +08:00
roymondchen	a4d021d2fb	feat(core): app添加dsl-change事件	2025-03-04 17:07:45 +08:00
roymondchen	3c66319b03	fix(data-source): 处理异步动态加载数据源时，初始化数据源还未加载完毕的情况	2025-03-04 17:05:05 +08:00
roymondchen	775fcf5693	fix(editor): 样式配置宽度不能为负	2025-03-04 14:09:28 +08:00
roymondchen	f5315122e4	chore(vue-components): 添加name option	2025-02-27 19:33:57 +08:00
roymondchen	90abde57cc	feat(runtime): vue2 h传参与vue3不一样，需要自定义render	2025-02-27 19:32:48 +08:00
roymondchen	91cde30d75	feat(vue-container): 支持自定义render	2025-02-27 19:31:07 +08:00
roymondchen	2114b71d47	style(vue-runtime-help): 添加UserRenderFunction定义	2025-02-27 19:28:08 +08:00
roymondchen	94d0ed1fd0	chore(playground): 恢复dsl本地存储的key	2025-02-27 11:31:20 +08:00
roymondchen	4026c0c305	feat(runtime): 支持页面切换	2025-02-26 15:20:32 +08:00