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

CHANGELOG.md

@@ -1,3 +1,20 @@
+## [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)
 
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "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",
+    "@vitejs/plugin-vue": "^5.2.3",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@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": "^4.38.0",
-    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-dts": "^6.2.1",
-    "semver": "^7.6.3",
+    "semver": "^7.7.1",
     "serialize-javascript": "^6.0.2",
     "shx": "^0.3.4",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
-    "vite": "^6.0.10",
+    "vite": "^6.2.4",
-    "vitepress": "^1.6.1",
+    "vitepress": "^1.6.3",
-    "vitest": "^3.0.2",
+    "vitest": "^3.1.1",
     "vue": "^3.5.13",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^2.2.8"
   },
   "config": {
     "commitizen": {

packages/cli/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "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": {

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: {},

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

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),
+    'plugin-entry': generateContent(
-    'async-plugin-entry': generateContent(useTs, EntryType.PLUGIN, moduleMainFilePath.pluginMap, '', dynamicImport),
+      useTs,
-    'config-entry': generateContent(useTs, EntryType.CONFIG, moduleMainFilePath.configMap),
+      EntryType.PLUGIN,
-    'value-entry': generateContent(useTs, EntryType.VALUE, moduleMainFilePath.valueMap),
+      moduleMainFilePath.pluginPakcage,
-    'event-entry': generateContent(useTs, EntryType.EVENT, moduleMainFilePath.eventMap),
+      moduleMainFilePath.pluginMap,
-    'datasource-entry': generateContent(useTs, EntryType.DATASOURCE, moduleMainFilePath.datasourceMap),
+    ),
+    '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-config-entry': generateContent(
-    'ds-value-entry': generateContent(useTs, EntryType.DS_VALUE, moduleMainFilePath.dsValueMap),
+      useTs,
-    'ds-event-entry': generateContent(useTs, EntryType.DS_EVENT, moduleMainFilePath.dsEventMap),
+      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(
+    if ([EntryType.CONFIG, EntryType.EVENT, EntryType.VALUE].includes(type) && packagePath === packageMap[key]) {
-        `'${key}': () => import('${packagePath}${packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix}')`,
+      importDeclarations.push(`import { ${type} as ${name} } from '${packageMap[key]}'`);
-      );
+      list.push(`'${key}': ${name}`);
+    } else if (dynamicImport) {
+      list.push(`'${key}': () => import('${packagePath}')`);
     } else {
-      importDeclarations.push(
+      importDeclarations.push(`import ${name} from '${packagePath}'`);
-        `import ${name} from '${packagePath}${packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix}'`,
-      );
       list.push(`'${key}': ${name}`);
     }
   });

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)
+    let packages = Object.entries(dependencies);
-      .map(([name, version]) => (version ? `${name}@${version}` : name))
+
-      .join(' ');
+    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];
+  if (config) {
-  [, component] = component.match(reg) || [, component];
+    [, config] = config.match(reg) || [, config];
-  [, event] = event.match(reg) || [, event];
+  }
+  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 config: string | undefined;
-  let value = '';
+  let value: string | undefined;
-  let event = '';
+  let event: string | undefined;
-  let component = '';
+  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.component) {
-    if (entry.config) packages.configMap[key] = getRelativePath(entry.config, temp);
+      const packagePath = getRelativePath(entry.component, temp);
-    if (entry.event) packages.eventMap[key] = getRelativePath(entry.event, temp);
+      packages.componentMap[key] = `${packagePath}${
-    if (entry.value) packages.valueMap[key] = getRelativePath(entry.value, temp);
+        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: {},

packages/cli/tsconfig.build.json

@@ -7,6 +7,7 @@
     "rootDir": "./src",
     "outDir": "./lib",
     "declaration": true,
+    
     "types": ["node"],
   },
   "include": ["./src"],

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/core",
   "type": "module",
   "main": "dist/tmagic-core.umd.cjs",

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;

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

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,

packages/data-source/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/data-source",
   "type": "module",
   "main": "dist/tmagic-data-source.umd.cjs",

packages/data-source/src/DataSourceManager.ts

@@ -32,11 +32,12 @@ 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, DataSourceSchema[]>();
+  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((list, app) => {
+    DataSourceManager.waitInitSchemaList?.forEach((listMap, app) => {
+      const list = listMap[type] || [];
       for (let config = list.shift(); config; config = list.shift()) {
         app.addDataSource(config);
       }
@@ -61,7 +62,7 @@ class DataSourceManager extends EventEmitter {
   constructor({ app, useMock, initialData }: DataSourceManagerOptions) {
     super();
 
-    DataSourceManager.waitInitSchemaList.set(this, []);
+    DataSourceManager.waitInitSchemaList.set(this, {});
 
     this.app = app;
     this.useMock = useMock;
@@ -144,7 +145,19 @@ class DataSourceManager extends EventEmitter {
     const DataSourceClass = DataSourceManager.dataSourceClassMap.get(config.type);
 
     if (!DataSourceClass) {
-      DataSourceManager.waitInitSchemaList.get(this)?.push(config);
+      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;
     }
 

packages/dep/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/dep",
   "type": "module",
   "main": "dist/tmagic-dep.umd.cjs",

packages/design/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/design",
   "type": "module",
   "sideEffects": [

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

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>

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

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>

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

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

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

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>

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

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

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

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

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

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>

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

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

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>

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

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>

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>

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

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

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>

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>

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

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>

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>

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

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

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>

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>

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

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>

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

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>

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

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>

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

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>

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

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

packages/editor/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [

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

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(() => {
+        Promise.all(collectIdlePromises)
-          updateDataSourceSchema();
+          .then(() => updateDataSourceSchema())
-          updateDsData();
+          .then(() => updateDsData())
-          updateStageNodes(root.items);
+          .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);

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

packages/editor/src/services/events.ts

@@ -57,7 +57,7 @@ class Events extends BaseService {
   }
 
   public getMethod(type: string) {
-    return cloneDeep(methodMap[toLine(type)]);
+    return cloneDeep(methodMap[toLine(type)]) || [];
   }
 
   public resetState() {

packages/element-plus-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/element-plus-adapter",
   "type": "module",
   "main": "dist/tmagic-element-plus-adapter.umd.cjs",

packages/form/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [

packages/schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/schema",
   "type": "module",
   "main": "dist/tmagic-schema.umd.cjs",

packages/stage/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",

packages/table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [

packages/tdesign-vue-next-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",

packages/ui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmagic/ui-react",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "type": "module",
   "main": "dist/tmagic-ui-react.js",
   "types": "types/index.d.ts",

packages/ui/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/ui",
   "type": "module",
   "main": "dist/tmagic-ui.js",

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.12",
   "name": "@tmagic/utils",
   "type": "module",
   "main": "dist/tmagic-utils.umd.cjs",

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmagic-playground",
-  "version": "1.5.11",
+  "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.11",
+    "@tmagic/core": "1.5.12",
-    "@tmagic/editor": "1.5.11",
+    "@tmagic/editor": "1.5.12",
-    "@tmagic/element-plus-adapter": "1.5.11",
+    "@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"
   }
 }

runtime/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-react",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "type": "module",
   "private": true,
   "scripts": {
@@ -19,21 +19,21 @@
     "build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
   },
   "dependencies": {
-    "@tmagic/core": "1.5.11",
+    "@tmagic/core": "1.5.12",
     "@tmagic/react-runtime-help": "0.1.0",
-    "@tmagic/stage": "1.5.11",
+    "@tmagic/stage": "1.5.12",
     "axios": "^0.25.0",
     "terser": "^5.31.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.5.11",
+    "@tmagic/cli": "1.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
-    "vite": "^6.0.10"
+    "vite": "^6.2.4"
   }
 }

runtime/vue-runtime-help/src/hooks/use-component.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { inject } from 'vue-demi';
+import { ConcreteComponent, inject } from 'vue-demi';
 
 import type TMagicApp from '@tmagic/core';
 import { toLine } from '@tmagic/core';
@@ -33,10 +33,12 @@ interface UseComponentOptions {
  * @param options 若为字符串则为组件类型，若为对象则为参数选项
  * @returns 得到的组件，若未找到则返回带 magic-ui- 前缀的组件类型
  */
-export function useComponent<Component = any>(options: string | UseComponentOptions = '') {
+export function useComponent<C extends ConcreteComponent = ConcreteComponent>(
+  options: string | UseComponentOptions = '',
+) {
   let componentType: string | undefined;
   let app: TMagicApp | undefined;
-  let component: Component | undefined;
+  let component: C | undefined;
 
   if (typeof options === 'string') {
     componentType = options;
@@ -47,21 +49,17 @@ export function useComponent<Component = any>(options: string | UseComponentOpti
   if (!componentType || componentType === '') {
     componentType = 'container';
   }
+
   if (!app) {
     app = inject<TMagicApp>('app');
   }
 
-  component = resolveComponent({ componentType, app });
+  component = app?.resolveComponent(componentType);
+
   if (!component && !componentType.startsWith('magic-ui-')) {
     componentType = `magic-ui-${toLine(componentType)}`;
-    component = resolveComponent({ componentType, app });
+    component = app?.resolveComponent(componentType);
   }
 
   return component ?? componentType;
 }
-
-type resolveComponentOptions = Required<Pick<UseComponentOptions, 'componentType'>> & UseComponentOptions;
-
-function resolveComponent<Component = any>({ componentType, app }: resolveComponentOptions): Component | undefined {
-  return app?.resolveComponent(componentType);
-}

runtime/vue-runtime-help/src/hooks/use-dsl.ts

@@ -9,10 +9,10 @@ export const useDsl = (app = inject<TMagicApp>('app')) => {
     throw new Error('useDsl must be used after MagicApp is created');
   }
 
-  const pageConfig = ref(app.page?.data || {});
+  const pageConfig = ref<MNode | undefined>(app.page?.data);
 
   app.on('page-change', () => {
-    pageConfig.value = app.page?.data || {};
+    pageConfig.value = app.page?.data;
   });
 
   const updateDataHandler = (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {

runtime/vue2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue2",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "type": "module",
   "private": true,
   "scripts": {
@@ -19,21 +19,21 @@
     "build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
   },
   "dependencies": {
-    "@tmagic/core": "1.5.11",
+    "@tmagic/core": "1.5.12",
-    "@tmagic/stage": "1.5.11",
+    "@tmagic/stage": "1.5.12",
     "@tmagic/vue-runtime-help": "^1.1.0",
     "axios": "^0.25.0",
     "terser": "^5.31.6",
     "vue": "^2.7.16"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.5.11",
+    "@tmagic/cli": "1.5.12",
     "@types/events": "^3.0.0",
     "axios": "^0.27.2",
-    "rollup": "^4.31.0",
+    "rollup": "^4.38.0",
     "rollup-plugin-external-globals": "^0.10.0",
     "sass": "^1.83.0",
-    "vite": "^6.0.10",
+    "vite": "^6.2.4",
     "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-vue2": "^2.3.1",
     "vue-template-compiler": "^2.7.4"

runtime/vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue3",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "type": "module",
   "private": true,
   "scripts": {
@@ -19,24 +19,24 @@
     "build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
   },
   "dependencies": {
-    "@tmagic/core": "1.5.11",
+    "@tmagic/core": "1.5.12",
-    "@tmagic/stage": "1.5.11",
+    "@tmagic/stage": "1.5.12",
     "@tmagic/vue-runtime-help": "^1.1.0",
     "axios": "^0.25.0",
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.5.11",
+    "@tmagic/cli": "1.5.12",
     "@types/node": "^18.19.0",
     "@vitejs/plugin-legacy": "^6.0.0",
-    "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue": "5.2.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/compiler-sfc": "^3.5.13",
-    "rollup": "^4.31.0",
+    "rollup": "^4.38.0",
     "rollup-plugin-external-globals": "^0.10.0",
     "sass": "^1.83.0",
     "terser": "^5.31.6",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
-    "vite": "^6.0.10"
+    "vite": "^6.2.4"
   }
 }

vue-components/button/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.1",
+  "version": "0.1.2",
   "name": "@tmagic/vue-button",
   "type": "module",
   "main": "src/index.ts",

vue-components/button/src/index.vue

@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { defineComponent, type PropType } from 'vue-demi';
 
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { useApp, useComponentStatus } from '@tmagic/vue-runtime-help';
+import { useApp } from '@tmagic/vue-runtime-help';
 
 interface ButtonSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -36,10 +36,6 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { setStatus } = inject<ReturnType<typeof useComponentStatus>>('componentStatusStore')!;
-
-    setStatus('disabled');
-
     const { app, node } = useApp(props);
 
     const clickHandler = () => {

vue-components/text/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "0.1.1",
   "name": "@tmagic/vue-text",
   "type": "module",
   "main": "src/index.ts",

vue-components/text/src/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <p @click="clickHandler">
+  <p @click="clickHandler" v-html="config.text"></p>
-    <slot>{{ config.text }}</slot>
-  </p>
 </template>
 
 <script lang="ts">