feat: 新增数据源

.eslintrc.js

@@ -53,7 +53,7 @@ module.exports = {
           ["^(react|vue|vite)", "^@?\\w"],
           ["^(@tmagic)(/.*|$)"],
           // Internal packages.
-          ["^(@|@editor)(/.*|$)"],
+          ["^(@|@editor|@data-source)(/.*|$)"],
           // Side effect imports.
           ["^\\u0000"],
           // Parent imports. Put `..` last.

.gitignore

@@ -29,3 +29,4 @@ coverage
 
 auto-imports.d.ts
 components.d.ts
+docs/.vitepress/cache/deps

docs/.vitepress/config.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import { defineConfig, DefaultTheme } from 'vitepress'
+import { defineConfig } from 'vitepress'
 
 export default defineConfig({
   title: 'tmagic-editor',
@@ -14,6 +14,10 @@ export default defineConfig({
   themeConfig: {
     logo: './favicon.png',
 
+    search: {
+      provider: 'local'
+    },
+
     socialLinks: [
       { icon: 'github', link: 'https://github.com/Tencent/tmagic-editor' }
     ],

package.json

@@ -76,9 +76,9 @@
     "serialize-javascript": "^6.0.0",
     "shx": "^0.3.4",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
-    "vitepress": "1.0.0-alpha.29",
+    "vitepress": "1.0.0-beta.1",
-    "vitest": "^0.30.0",
+    "vitest": "^0.31.1",
     "vue": "^3.2.37"
   },
   "config": {

packages/cli/package.json

@@ -26,7 +26,7 @@
     "cac": "^6.7.12",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.3",
-    "esbuild": "^0.15.5",
+    "esbuild": "^0.17.19",
     "fs-extra": "^10.1.0",
     "recast": "^0.21.1",
     "tslib": "^2.4.0"

packages/core/package.json

@@ -36,7 +36,9 @@
     "vue"
   ],
   "dependencies": {
+    "@tmagic/data-source": "1.2.15",
     "@tmagic/schema": "1.2.15",
+    "@tmagic/utils": "1.2.15",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21"
   },

packages/core/src/App.ts

@@ -18,8 +18,14 @@
 
 import { EventEmitter } from 'events';
 
-import { has, isEmpty } from 'lodash-es';
+import { cloneDeep, has, isEmpty, template } from 'lodash-es';
 
+import {
+  createDataSourceManager,
+  DataSourceManager,
+  DataSourceManagerData,
+  RequestFunction,
+} from '@tmagic/data-source';
 import {
   ActionType,
   CodeBlockDSL,
@@ -29,7 +35,9 @@ import {
   EventConfig,
   Id,
   MApp,
+  MNode,
 } from '@tmagic/schema';
+import { compiledNode } from '@tmagic/utils';
 
 import Env from './Env';
 import { bindCommonEventListener, isCommonMethod, triggerCommonMethod } from './events';
@@ -45,6 +53,7 @@ interface AppOptionsConfig {
   designWidth?: number;
   curPage?: Id;
   transformStyle?: (style: Record<string, any>) => Record<string, any>;
+  request?: RequestFunction;
 }
 
 interface EventCache {
@@ -57,6 +66,7 @@ class App extends EventEmitter {
   public env: Env = new Env();
   public dsl?: MApp;
   public codeDsl?: CodeBlockDSL;
+  public dataSourceManager?: DataSourceManager;
 
   public page?: Page;
 
@@ -88,11 +98,7 @@ class App extends EventEmitter {
     }
 
     if (options.config) {
-      let pageId = options.curPage;
+      this.setConfig(options.config, options.curPage, options.request);
-      if (!pageId && options.config.items.length) {
-        pageId = options.config.items[0].id;
-      }
-      this.setConfig(options.config, pageId);
     }
 
     bindCommonEventListener(this);
@@ -156,8 +162,25 @@ class App extends EventEmitter {
    * @param config dsl跟节点
    * @param curPage 当前页面id
    */
-  public setConfig(config: MApp, curPage?: Id) {
+  public setConfig(config: MApp, curPage?: Id, request?: RequestFunction) {
     this.dsl = config;
+
+    if (!curPage && config.items.length) {
+      curPage = config.items[0].id;
+    }
+
+    if (this.dataSourceManager) {
+      this.dataSourceManager.destroy();
+    }
+
+    this.dataSourceManager = createDataSourceManager(
+      config,
+      (node: MNode, content: DataSourceManagerData) => this.compiledNode(node, content),
+      {
+        request,
+      },
+    );
+
     this.codeDsl = config.codeBlocks;
     this.setPage(curPage || this.page?.data?.id);
   }
@@ -196,9 +219,7 @@ class App extends EventEmitter {
 
     super.emit('page-change', this.page);
 
-    if (this.platform !== 'magic') {
+    this.bindEvents();
-      this.bindEvents();
-    }
   }
 
   public deletePage() {
@@ -258,31 +279,6 @@ class App extends EventEmitter {
     return super.emit(name, node, ...args);
   }
 
-  /**
-   * 事件联动处理函数
-   * @param eventConfig 事件配置
-   * @param fromCpt 触发事件的组件
-   * @param args 事件参数
-   */
-  public async eventHandler(eventConfig: EventConfig | DeprecatedEventConfig, fromCpt: any, args: any[]) {
-    if (has(eventConfig, 'actions')) {
-      // EventConfig类型
-      const { actions } = eventConfig as EventConfig;
-      for (const actionItem of actions) {
-        if (actionItem.actionType === ActionType.COMP) {
-          // 组件动作
-          await this.compActionHandler(actionItem as CompItemConfig, fromCpt, args);
-        } else if (actionItem.actionType === ActionType.CODE) {
-          // 执行代码块
-          await this.codeActionHandler(actionItem as CodeItemConfig);
-        }
-      }
-    } else {
-      // 兼容DeprecatedEventConfig类型 组件动作
-      await this.compActionHandler(eventConfig as DeprecatedEventConfig, fromCpt, args);
-    }
-  }
-
   /**
    * 执行代码块动作
    * @param eventConfig 代码动作的配置
@@ -325,6 +321,18 @@ class App extends EventEmitter {
     }
   }
 
+  public compiledNode(node: MNode, content: DataSourceManagerData, sourceId?: Id) {
+    return compiledNode(
+      (str: string) =>
+        template(str, {
+          escape: /\{\{([\s\S]+?)\}\}/g,
+        })(content),
+      cloneDeep(node),
+      this.dsl?.dataSourceDeps,
+      sourceId,
+    );
+  }
+
   public destroy() {
     this.removeAllListeners();
     this.page = undefined;
@@ -334,6 +342,31 @@ class App extends EventEmitter {
     }
   }
 
+  /**
+   * 事件联动处理函数
+   * @param eventConfig 事件配置
+   * @param fromCpt 触发事件的组件
+   * @param args 事件参数
+   */
+  private async eventHandler(eventConfig: EventConfig | DeprecatedEventConfig, fromCpt: any, args: any[]) {
+    if (has(eventConfig, 'actions')) {
+      // EventConfig类型
+      const { actions } = eventConfig as EventConfig;
+      for (const actionItem of actions) {
+        if (actionItem.actionType === ActionType.COMP) {
+          // 组件动作
+          await this.compActionHandler(actionItem as CompItemConfig, fromCpt, args);
+        } else if (actionItem.actionType === ActionType.CODE) {
+          // 执行代码块
+          await this.codeActionHandler(actionItem as CodeItemConfig);
+        }
+      }
+    } else {
+      // 兼容DeprecatedEventConfig类型 组件动作
+      await this.compActionHandler(eventConfig as DeprecatedEventConfig, fromCpt, args);
+    }
+  }
+
   private addEventToMap(event: EventCache) {
     if (this.eventQueueMap[event.eventConfig.to]) {
       this.eventQueueMap[event.eventConfig.to].push(event);

packages/core/src/index.ts

@@ -23,5 +23,7 @@ import './resetcss.css';
 export * from './events';
 
 export { default as Env } from './Env';
+export { default as Page } from './Page';
+export { default as Node } from './Node';
 
 export default App;

packages/core/vite.config.ts

@@ -27,7 +27,10 @@ export default defineConfig({
     alias:
       process.env.NODE_ENV === 'production'
         ? []
-        : [{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../schema/src/index.ts') }],
+        : [
+            { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../schema/src/index.ts') },
+            { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../data-source/src/index.ts') },
+          ],
   },
 
   build: {

packages/data-source/.npmignore

@@ -0,0 +1,31 @@
+.babelrc
+.eslintrc
+.editorconfig
+node_modules
+.DS_Store
+examples
+tests
+.code.yml
+reports
+tsconfig.build.json
+tsconfig.json
+vite.config.ts
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/data-source/package.json

@@ -0,0 +1,47 @@
+{
+  "version": "1.2.15",
+  "name": "@tmagic/data-source",
+  "type": "module",
+  "sideEffects": [
+    "dist/*"
+  ],
+  "main": "dist/tmagic-data-source.umd.cjs",
+  "module": "dist/tmagic-data-source.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/tmagic-data-source.js",
+      "require": "./dist/tmagic-data-source.umd.cjs"
+    },
+    "./*": "./*"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "clear:type": "rimraf ./types"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "keywords": [
+    "data-source"
+  ],
+  "dependencies": {
+    "@tmagic/utils": "1.2.15",
+    "@tmagic/schema": "1.2.15",
+    "events": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/events": "^3.0.0",
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^15.12.4",
+    "tsc-alias": "^1.8.5",
+    "typescript": "^4.7.4",
+    "vite": "^3.1.3"
+  }
+}

packages/data-source/src/DataSourceManager.ts

@@ -0,0 +1,115 @@
+/*
+ * 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 EventEmitter from 'events';
+
+import { DataSourceSchema } from '@tmagic/schema';
+
+import { DataSource, HttpDataSource } from './data-sources';
+import type { DataSourceManagerData, DataSourceManagerOptions, HttpDataSourceSchema, RequestFunction } from './types';
+
+class DataSourceManager extends EventEmitter {
+  public static dataSourceClassMap = new Map<string, typeof DataSource>();
+  public static registe(type: string, dataSource: typeof DataSource) {
+    DataSourceManager.dataSourceClassMap.set(type, dataSource);
+  }
+
+  public dataSourceMap = new Map<string, DataSource>();
+
+  public data: DataSourceManagerData = {};
+
+  private request?: RequestFunction;
+
+  constructor(options: DataSourceManagerOptions) {
+    super();
+
+    if (options.httpDataSourceOptions?.request) {
+      this.request = options.httpDataSourceOptions.request;
+    }
+
+    options.dataSourceConfigs.forEach((config) => {
+      this.addDataSource(config);
+    });
+  }
+
+  public get(id: string) {
+    return this.dataSourceMap.get(id);
+  }
+
+  public addDataSource(config?: DataSourceSchema) {
+    if (!config) return;
+
+    let ds: DataSource;
+    if (config.type === 'http') {
+      ds = new HttpDataSource({
+        schema: config as HttpDataSourceSchema,
+        request: this.request,
+      });
+    } else {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      const DataSourceClass = DataSourceManager.dataSourceClassMap.get(config.type) || DataSource;
+
+      ds = new DataSourceClass({
+        schema: config,
+      });
+    }
+
+    this.dataSourceMap.set(config.id, ds);
+
+    this.data[ds.id] = ds.data;
+
+    ds.init().then(() => {
+      this.data[ds.id] = ds.data;
+    });
+
+    ds.on('change', () => {
+      Object.assign(this.data[ds.id], ds.data);
+
+      this.emit('change', ds.id);
+    });
+  }
+
+  public removeDataSource(id: string) {
+    this.get(id)?.destroy();
+    delete this.data[id];
+    this.dataSourceMap.delete(id);
+  }
+
+  public updateSchema(schemas: DataSourceSchema[]) {
+    schemas.forEach((schema) => {
+      const ds = this.dataSourceMap.get(schema.id);
+      if (!ds) {
+        return;
+      }
+      ds.setFields(schema.fields);
+      ds.updateDefaultData();
+      this.data[ds.id] = ds.data;
+    });
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+    this.data = {};
+    this.dataSourceMap.forEach((ds) => {
+      ds.destroy();
+    });
+    this.dataSourceMap = new Map();
+  }
+}
+
+export default DataSourceManager;

packages/data-source/src/createDataSourceManager.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 type { MApp, MNode } from '@tmagic/schema';
+import { getDepNodeIds, getNodes, replaceChildNode } from '@tmagic/utils';
+
+import DataSourceManager from './DataSourceManager';
+import type { DataSourceManagerData, HttpDataSourceOptions } from './types';
+
+/**
+ * 创建数据源管理器
+ * @param dsl DSL
+ * @param httpDataSourceOptions http 数据源配置
+ * @returns DataSourceManager
+ */
+export const createDataSourceManager = (
+  dsl: MApp,
+  compiledNode = (node: MNode, _content: DataSourceManagerData) => node,
+  httpDataSourceOptions?: Partial<HttpDataSourceOptions>,
+) => {
+  if (!dsl?.dataSources) return;
+
+  const dataSourceManager = new DataSourceManager({
+    dataSourceConfigs: dsl.dataSources,
+    httpDataSourceOptions,
+  });
+
+  if (dsl.dataSources && dsl.dataSourceDeps) {
+    getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items).forEach((node) => {
+      replaceChildNode(compiledNode(node, dataSourceManager.data), dsl!.items);
+    });
+  }
+
+  dataSourceManager.on('change', (sourceId: string) => {
+    const dep = dsl.dataSourceDeps?.[sourceId];
+    if (!dep) return;
+    dataSourceManager.emit('update-data', getNodes(Object.keys(dep), dsl.items), sourceId);
+  });
+
+  return dataSourceManager;
+};

packages/data-source/src/data-sources/Base.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 EventEmitter from 'events';
+
+import type { DataSchema } from '@tmagic/schema';
+
+import type { DataSourceOptions } from '@data-source/types';
+import { getDefaultValueFromFields } from '@data-source/util';
+
+/**
+ * 静态数据源
+ */
+export default class DataSource extends EventEmitter {
+  public type = 'base';
+
+  public id: string;
+
+  public isInit = false;
+
+  public data: Record<string, any> = {};
+
+  private fields: DataSchema[] = [];
+
+  constructor(options: DataSourceOptions) {
+    super();
+
+    this.id = options.schema.id;
+    this.setFields(options.schema.fields);
+
+    this.updateDefaultData();
+  }
+
+  public setFields(fields: DataSchema[]) {
+    this.fields = fields;
+  }
+
+  public setData(data: Record<string, any>) {
+    // todo: 校验数据，看是否符合 schema
+    this.data = data;
+    this.emit('change');
+  }
+
+  public getDefaultData() {
+    return getDefaultValueFromFields(this.fields);
+  }
+
+  public updateDefaultData() {
+    this.setData(this.getDefaultData());
+  }
+
+  public async init() {
+    this.isInit = true;
+  }
+
+  public destroy() {
+    this.data = {};
+    this.fields = [];
+    this.removeAllListeners();
+  }
+}

packages/data-source/src/data-sources/Http.ts

@@ -0,0 +1,130 @@
+/*
+ * 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 { getValueByKeyPath } from '@tmagic/utils';
+
+import { HttpDataSourceOptions, HttpDataSourceSchema, HttpOptions, RequestFunction } from '@data-source/types';
+
+import DataSource from './Base';
+
+/**
+ * 将json对象转换为urlencoded字符串
+ * @param data json对象
+ * @returns string
+ */
+const urlencoded = (data: Record<string, string | number | boolean | null | undefined>) =>
+  Object.entries(data).reduce((prev, [key, value]) => {
+    let v = value;
+    if (typeof value === 'object') {
+      v = JSON.stringify(value);
+    }
+    if (typeof value !== 'undefined') {
+      return `${prev}${prev ? '&' : ''}${globalThis.encodeURIComponent(key)}=${globalThis.encodeURIComponent(`${v}`)}`;
+    }
+    return prev;
+  }, '');
+
+/**
+ * 浏览器端请求
+ * 如果未有自定义的request方法，则使用浏览器的fetch方法
+ * @param options 请求参数
+ */
+const webRequest = async (options: HttpOptions) => {
+  const { url, method = 'GET', headers = {}, params = {}, data = {}, ...config } = options;
+  const query = urlencoded(params);
+  let body: string = JSON.stringify(data);
+  if (headers['Content-Type']?.includes('application/x-www-form-urlencoded')) {
+    body = urlencoded(data);
+  }
+
+  const response = await globalThis.fetch(query ? `${url}?${query}` : url, {
+    method,
+    headers,
+    body: method === 'GET' ? undefined : body,
+    ...config,
+  });
+
+  return response.json();
+};
+
+/**
+ * Http 数据源
+ * @description 通过 http 请求获取数据
+ */
+export default class HttpDataSource extends DataSource {
+  public type = 'http';
+
+  public isLoading = false;
+  public error?: Error;
+  public schema: HttpDataSourceSchema;
+  public httpOptions: HttpOptions;
+
+  private fetch?: RequestFunction;
+
+  constructor(options: HttpDataSourceOptions) {
+    const { options: httpOptions, ...dataSourceOptions } = options.schema;
+
+    super({
+      schema: dataSourceOptions,
+    });
+
+    this.schema = options.schema;
+    this.httpOptions = httpOptions;
+
+    if (typeof options.request === 'function') {
+      this.fetch = options.request;
+    } else if (typeof globalThis.fetch === 'function') {
+      this.fetch = webRequest;
+    }
+  }
+
+  public async init() {
+    if (this.schema.autoFetch) {
+      await this.request(this.httpOptions);
+    }
+
+    super.init();
+  }
+
+  public async request(options: HttpOptions) {
+    const res = await this.fetch?.({
+      ...this.httpOptions,
+      ...options,
+    });
+
+    if (this.schema.responseOptions?.dataPath) {
+      const data = getValueByKeyPath(this.schema.responseOptions.dataPath, res);
+      this.setData(data);
+    } else {
+      this.setData(res);
+    }
+  }
+
+  public get(options: Partial<HttpOptions> & { url: string }) {
+    return this.request({
+      ...options,
+      method: 'GET',
+    });
+  }
+
+  public post(options: Partial<HttpOptions> & { url: string }) {
+    return this.request({
+      ...options,
+      method: 'POST',
+    });
+  }
+}

packages/data-source/src/data-sources/index.ts

@@ -0,0 +1,2 @@
+export { default as DataSource } from './Base';
+export { default as HttpDataSource } from './Http';

packages/data-source/src/index.ts

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+export { default as DataSourceManager } from './DataSourceManager';
+export * from './data-sources';
+export * from './createDataSourceManager';
+export * from './util';
+export * from './types';

packages/data-source/src/types.ts

@@ -0,0 +1,40 @@
+import { DataSourceSchema } from '@tmagic/schema';
+
+export interface DataSourceOptions {
+  schema: DataSourceSchema;
+}
+
+export type Method = 'get' | 'GET' | 'delete' | 'DELETE' | 'post' | 'POST' | 'put' | 'PUT';
+
+export type RequestFunction = (options: HttpOptions) => Promise<any>;
+
+export interface HttpOptions {
+  url: string;
+  params?: Record<string, string>;
+  data?: Record<string, any>;
+  headers?: Record<string, string>;
+  method?: Method;
+}
+
+export interface HttpDataSourceSchema extends DataSourceSchema {
+  type: 'http';
+  options: HttpOptions;
+  responseOptions?: {
+    dataPath?: string;
+  };
+  autoFetch?: boolean;
+}
+
+export interface HttpDataSourceOptions {
+  schema: HttpDataSourceSchema;
+  request?: RequestFunction;
+}
+
+export interface DataSourceManagerOptions {
+  dataSourceConfigs: DataSourceSchema[];
+  httpDataSourceOptions?: Partial<HttpDataSourceOptions>;
+}
+
+export interface DataSourceManagerData {
+  [key: string]: Record<string, any>;
+}

packages/data-source/src/util.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 type { DataSchema } from '@tmagic/schema';
+
+export const getDefaultValueFromFields = (fields: DataSchema[]) => {
+  const data: Record<string, any> = {};
+
+  const defaultValue: Record<string, any> = {
+    string: '',
+    object: {},
+    array: [],
+    boolean: false,
+    number: 0,
+    null: null,
+    any: undefined,
+  };
+
+  fields.forEach((field) => {
+    if (typeof field.defaultValue !== 'undefined') {
+      data[field.name] = field.defaultValue;
+    } else if (field.type === 'object') {
+      data[field.name] = field.fields ? getDefaultValueFromFields(field.fields) : {};
+    } else if (field.type) {
+      data[field.name] = defaultValue[field.type];
+    } else {
+      data[field.name] = undefined;
+    }
+  });
+  return data;
+};

packages/data-source/tests/DataSource.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from 'vitest';
+
+import { DataSource } from '@data-source/index';
+
+describe('DataSource', () => {
+  test('instance', () => {
+    const ds = new DataSource({
+      schema: {
+        type: 'base',
+        id: '1',
+        fields: [{ name: 'name' }],
+      },
+    });
+
+    expect(ds).toBeInstanceOf(DataSource);
+    expect(ds.data).toHaveProperty('name');
+  });
+
+  test('init', () => {
+    const ds = new DataSource({
+      schema: {
+        type: 'base',
+        id: '1',
+        fields: [{ name: 'name' }],
+      },
+    });
+
+    ds.init();
+
+    expect(ds.isInit).toBeTruthy();
+  });
+});

packages/data-source/tests/DataSourceMenager.spec.ts

@@ -0,0 +1,81 @@
+import { describe, expect, test } from 'vitest';
+
+import { DataSource, DataSourceManager } from '@data-source/index';
+
+describe('DataSourceManager', () => {
+  const dsm = new DataSourceManager({
+    dataSourceConfigs: [
+      {
+        type: 'base',
+        id: '1',
+        fields: [{ name: 'name' }],
+      },
+      {
+        type: 'http',
+        id: '2',
+        fields: [{ name: 'name' }],
+      },
+    ],
+    httpDataSourceOptions: {
+      request: () => Promise.resolve(),
+    },
+  });
+
+  test('instance', () => {
+    expect(dsm).toBeInstanceOf(DataSourceManager);
+    expect(dsm.dataSourceMap.get('1')).toBeInstanceOf(DataSource);
+    expect(dsm.dataSourceMap.get('2')?.type).toBe('http');
+  });
+
+  test('registe', () => {
+    class TestDataSource extends DataSource {}
+
+    DataSourceManager.registe('test', TestDataSource);
+    expect(DataSourceManager.dataSourceClassMap.get('test')).toBe(TestDataSource);
+  });
+
+  test('get', () => {
+    const ds = dsm.get('1');
+    expect(ds).toBeInstanceOf(DataSource);
+  });
+
+  test('removeDataSource', () => {
+    dsm.removeDataSource('1');
+    const ds = dsm.get('1');
+    expect(ds).toBeUndefined();
+  });
+
+  test('updateSchema', () => {
+    const dsm = new DataSourceManager({
+      dataSourceConfigs: [
+        {
+          type: 'base',
+          id: '1',
+          fields: [{ name: 'name' }],
+        },
+      ],
+      httpDataSourceOptions: {
+        request: () => Promise.resolve(),
+      },
+    });
+
+    dsm.updateSchema([
+      {
+        type: 'base',
+        id: '1',
+        fields: [{ name: 'name1' }],
+      },
+    ]);
+    const ds = dsm.get('1');
+    expect(ds).toBeInstanceOf(DataSource);
+  });
+
+  test('destroy', () => {
+    dsm.destroy();
+    expect(dsm.dataSourceMap.size).toBe(0);
+  });
+
+  test('addDataSource error', () => {
+    expect(dsm.addDataSource()).toBeUndefined();
+  });
+});

packages/data-source/tests/createDataSourceManager.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test } from 'vitest';
+
+import { MApp, MNode, NodeType } from '@tmagic/schema';
+
+import { createDataSourceManager, DataSourceManager } from '@data-source/index';
+
+const dsl: MApp = {
+  type: NodeType.ROOT,
+  id: 'app_1',
+  items: [
+    {
+      type: NodeType.PAGE,
+      id: 'page_1',
+      items: [
+        {
+          type: 'text',
+          id: 61705611,
+          text: '{{ds_bebcb2d5.text}}',
+        },
+      ],
+    },
+  ],
+  dataSourceDeps: {
+    ds_bebcb2d5: {
+      61705611: {
+        name: '文本',
+        keys: ['text'],
+      },
+    },
+  },
+  dataSources: [
+    {
+      id: 'ds_bebcb2d5',
+      type: 'http',
+      fields: [
+        {
+          name: 'text',
+        },
+      ],
+    },
+  ],
+};
+
+describe('createDataSourceManager', () => {
+  test('instance', () => {
+    const manager = createDataSourceManager(dsl, (node: MNode) => node, {});
+    expect(manager).toBeInstanceOf(DataSourceManager);
+  });
+});

packages/data-source/tests/utils.spec.ts

@@ -0,0 +1,78 @@
+import { describe, expect, test } from 'vitest';
+
+import { DataSchema } from '@tmagic/schema';
+
+import * as util from '@data-source/util';
+
+describe('getDefaultValueFromFields', () => {
+  test('最简单', () => {
+    const fileds = [
+      {
+        name: 'name',
+      },
+    ];
+    const data = util.getDefaultValueFromFields(fileds);
+    expect(data).toHaveProperty('name');
+  });
+
+  test('默认值为string', () => {
+    const fileds = [
+      {
+        name: 'name',
+        defaultValue: 'name',
+      },
+    ];
+    const data = util.getDefaultValueFromFields(fileds);
+    expect(data.name).toBe('name');
+  });
+
+  test('type 为 object', () => {
+    const fileds: DataSchema[] = [
+      {
+        type: 'object',
+        name: 'name',
+      },
+    ];
+    const data = util.getDefaultValueFromFields(fileds);
+    expect(data.name).toEqual({});
+  });
+
+  test('type 为 array', () => {
+    const fileds: DataSchema[] = [
+      {
+        type: 'array',
+        name: 'name',
+      },
+    ];
+    const data = util.getDefaultValueFromFields(fileds);
+    expect(data.name).toEqual([]);
+  });
+
+  test('type 为 null', () => {
+    const fileds: DataSchema[] = [
+      {
+        type: 'null',
+        name: 'name',
+      },
+    ];
+    const data = util.getDefaultValueFromFields(fileds);
+    expect(data.name).toBeNull();
+  });
+
+  test('object 嵌套', () => {
+    const fileds: DataSchema[] = [
+      {
+        type: 'object',
+        name: 'name',
+        fields: [
+          {
+            name: 'key',
+            defaultValue: 'key',
+          },
+        ],
+      },
+    ];
+    const data = util.getDefaultValueFromFields(fileds);
+    expect(data.name.key).toBe('key');
+  });
+});

packages/data-source/tsconfig.build.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./types",
+    "paths": {
+      "@data-source/*": ["src/*"],
+    },
+  },
+  "include": [
+		"src"
+	],
+}

packages/data-source/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../..",
+  },
+}

packages/data-source/vite.config.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 path from 'path';
+
+import { defineConfig } from 'vite';
+
+import pkg from './package.json';
+
+export default defineConfig({
+  resolve: {
+    alias:
+      process.env.NODE_ENV === 'production'
+        ? [{ find: /^@data-source/, replacement: path.join(__dirname, './src') }]
+        : [
+            { find: /^@data-source/, replacement: path.join(__dirname, './src') },
+            { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../schema/src/index.ts') },
+          ],
+  },
+
+  build: {
+    cssCodeSplit: false,
+    sourcemap: true,
+    minify: false,
+    target: 'esnext',
+
+    lib: {
+      entry: 'src/index.ts',
+      name: 'TMagicDataSource',
+      fileName: 'tmagic-data-source',
+    },
+
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external(id: string) {
+        return Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id));
+      },
+    },
+  },
+});

packages/design/package.json

@@ -48,7 +48,7 @@
     "@vue/test-utils": "^2.0.0",
     "rimraf": "^3.0.2",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.2.0"
   }

packages/design/src/Autocomplete.vue

@@ -0,0 +1,85 @@
+<template>
+  <component
+    class="tmagic-design-auto-complete"
+    ref="autocomplete"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @select="selectHandler"
+    @update:modelValue="updateModelValue"
+  >
+    <template #defalut="{ item }" v-if="$slots.defalut">
+      <slot name="defalut" :item="item"></slot>
+    </template>
+    <template #prepend v-if="$slots.prepend">
+      <slot name="prepend"></slot>
+    </template>
+    <template #append v-if="$slots.append">
+      <slot name="append"></slot>
+    </template>
+    <template #prefix v-if="$slots.prefix">
+      <slot name="prefix"></slot>
+    </template>
+    <template #suffix v-if="$slots.suffix">
+      <slot name="suffix"></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts" name="TMAutocomplete">
+import { computed, ref, watchEffect } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: string;
+  placeholder?: string;
+  label?: string;
+  clearable?: boolean;
+  disabled?: boolean;
+  triggerOnFocus?: boolean;
+  valueKey?: string;
+  debounce?: number;
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+  fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
+}>();
+
+const uiComponent = getConfig('components').autocomplete;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'select', 'update:modelValue']);
+
+const changeHandler = (...args: any[]) => {
+  emit('change', ...args);
+};
+
+const selectHandler = (...args: any[]) => {
+  emit('select', ...args);
+};
+
+const updateModelValue = (...args: any[]) => {
+  emit('update:modelValue', ...args);
+};
+
+const autocomplete = ref<any>();
+const input = ref<HTMLInputElement>();
+const inputRef = ref<any>();
+
+watchEffect(() => {
+  inputRef.value = autocomplete.value?.inputRef;
+  input.value = autocomplete.value?.inputRef.input;
+});
+
+defineExpose({
+  inputRef,
+  input,
+
+  blur: () => {
+    autocomplete.value?.blur();
+  },
+  focus: () => {
+    autocomplete.value?.focus();
+  },
+});
+</script>

packages/design/src/defaultAdapter.ts

@@ -5,6 +5,11 @@ export default {
       props: (props: any) => props,
     },
 
+    autocomplete: {
+      component: 'el-autocomplete',
+      props: (props: any) => props,
+    },
+
     button: {
       component: 'el-button',
       props: (props: any) => props,

packages/design/src/index.ts

@@ -7,6 +7,7 @@ export * from './type';
 export * from './config';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
+export { default as TMagicAutocomplete } from './Autocomplete.vue';
 export { default as TMagicBadge } from './Badge.vue';
 export { default as TMagicButton } from './Button.vue';
 export { default as TMagicCard } from './Card.vue';

packages/editor/package.json

@@ -51,6 +51,7 @@
     "@tmagic/form": "1.2.15",
     "@tmagic/schema": "1.2.15",
     "@tmagic/stage": "1.2.15",
+    "@tmagic/table": "1.2.15",
     "@tmagic/utils": "1.2.15",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
@@ -80,7 +81,7 @@
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.11"
   }

packages/editor/src/Editor.vue

@@ -73,6 +73,7 @@ import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
 import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
+import dataSourceService from './services/dataSource';
 import depService from './services/dep';
 import editorService from './services/editor';
 import eventsService from './services/events';
@@ -110,6 +111,7 @@ export default defineComponent({
       storageService,
       codeBlockService,
       depService,
+      dataSourceService,
     };
 
     initServiceEvents(props, emit, services);

packages/editor/src/components/CodeDraftEditor.vue

@@ -13,13 +13,13 @@
         {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
       >
       <TMagicButton type="primary" class="button" @click="saveAndClose">确认</TMagicButton>
-      <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
+      <TMagicButton class="button" @click="close">关闭</TMagicButton>
     </div>
     <div class="m-editor-content-bottom" v-else>
       <TMagicButton type="primary" class="button" @click="toggleFullScreen">
         {{ isFullScreen ? '退出全屏' : '全屏' }}</TMagicButton
       >
-      <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
+      <TMagicButton class="button" @click="close">关闭</TMagicButton>
     </div>
   </div>
 </template>

packages/editor/src/editorProps.ts

@@ -79,6 +79,11 @@ export default {
     default: () => ({}),
   },
 
+  dataScourceConfigs: {
+    type: Object as PropType<Record<string, FormConfig>>,
+    default: () => ({}),
+  },
+
   /** 画布中组件选中框的移动范围 */
   moveableOptions: {
     type: [Object, Function] as PropType<

packages/editor/src/fields/DataSourceFields.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="m-editor-data-source-fields">
+    <MagicTable :data="model[name]" :columns="filedColumns"></MagicTable>
+
+    <div class="m-editor-data-source-fields-footer">
+      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
+    </div>
+
+    <MFormDialog
+      ref="addDialog"
+      :title="filedTitle"
+      :config="dataSourceFieldsConfig"
+      :values="fieldValues"
+      :parentValues="model[name]"
+      @submit="fieldChange"
+    ></MFormDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
+import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
+import { MagicTable } from '@tmagic/table';
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-fields';
+    };
+    model: any;
+    prop: string;
+    disabled: boolean;
+    name: string;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(['change']);
+
+const addDialog = ref<InstanceType<typeof MFormDialog>>();
+const fieldValues = ref<Record<string, any>>({});
+const filedTitle = ref('');
+
+const newHandler = () => {
+  if (!addDialog.value) return;
+  fieldValues.value = {};
+  filedTitle.value = '新增属性';
+  addDialog.value.dialogVisible = true;
+};
+
+const fieldChange = ({ index, ...value }: Record<string, any>) => {
+  if (!addDialog.value) return;
+
+  if (index > -1) {
+    props.model[props.name][index] = value;
+  } else {
+    props.model[props.name].push(value);
+  }
+
+  addDialog.value.dialogVisible = false;
+
+  emit('change', props.model[props.name]);
+};
+
+const filedColumns = [
+  {
+    label: '属性名称',
+    prop: 'title',
+  },
+  {
+    label: '属性key',
+    prop: 'name',
+  },
+  {
+    label: '属性描述',
+    prop: 'desc',
+  },
+  {
+    label: '操作',
+    fixed: 'right',
+    actions: [
+      {
+        text: '编辑',
+        handler: (row: Record<string, any>, index: number) => {
+          if (!addDialog.value) return;
+          fieldValues.value = {
+            ...row,
+            index,
+          };
+          filedTitle.value = `编辑${row.title}`;
+          addDialog.value.dialogVisible = true;
+        },
+      },
+      {
+        text: '删除',
+        buttonType: 'danger',
+        handler: async (row: Record<string, any>, index: number) => {
+          await tMagicMessageBox.confirm(`确定删除${row.title}(${row.name})?`, '提示');
+          props.model[props.name].splice(index, 1);
+          emit('change', props.model[props.name]);
+        },
+      },
+    ],
+  },
+];
+
+const dataSourceFieldsConfig: FormConfig = [
+  { name: 'index', type: 'hidden', filter: 'number', defaultValue: -1 },
+  {
+    name: 'type',
+    text: '数据类型',
+    type: 'select',
+    defaultValue: 'string',
+    options: [
+      { text: '字符串', value: 'string' },
+      { text: '数字', value: 'number' },
+      { text: '布尔值', value: 'boolean' },
+      { text: '对象', value: 'object' },
+      { text: '数组', value: 'array' },
+      { text: 'null', value: 'null' },
+      { text: 'any', value: 'any' },
+    ],
+  },
+  {
+    name: 'name',
+    text: '字段名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入字段名称',
+      },
+      {
+        validator: ({ value, callback }, { model, parent }) => {
+          const index = parent.findIndex((item: Record<string, any>) => item.name === value);
+          if ((model.index === -1 && index > -1) || (model.index > -1 && index > -1 && index !== model.index)) {
+            return callback(`属性key（${value}）已存在`);
+          }
+          callback();
+        },
+      },
+    ],
+  },
+  {
+    name: 'title',
+    text: '展示名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入展示名称',
+      },
+    ],
+  },
+  {
+    name: 'description',
+    text: '描述',
+  },
+  {
+    name: 'defaultValue',
+    text: '默认值',
+  },
+  {
+    name: 'enable',
+    text: '是否可用',
+    type: 'switch',
+    defaultValue: true,
+  },
+  {
+    name: 'fields',
+    type: 'data-source-fields',
+    defaultValue: [],
+    display: (formState: FormState | undefined, { model }: any) => model.type === 'object',
+  },
+];
+</script>

packages/editor/src/fields/DataSourceInput.vue

@@ -0,0 +1,342 @@
+<template>
+  <component
+    v-if="!disabled && isFocused"
+    :is="getConfig('components').autocomplete.component"
+    class="tmagic-design-auto-complete"
+    ref="autocomplete"
+    v-model="state"
+    v-bind="
+      getConfig('components').autocomplete.props({
+        disabled,
+        size,
+        fetchSuggestions: querySearch,
+        triggerOnFocus: false,
+        clearable: true,
+      })
+    "
+    style="width: 100%"
+    @blur="blurHandler"
+    @change="changeHandler"
+    @input="inputHandler"
+    @select="selectHandler"
+  >
+    <template #suffix>
+      <Icon :icon="Coin" />
+    </template>
+    <template #default="{ item }">
+      <div style="display: flex; flex-direction: column; line-height: 1.2em">
+        <div>{{ item.text }}</div>
+        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ item.value }}</span>
+      </div>
+    </template>
+  </component>
+  <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+    <div
+      :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`"
+      :contenteditable="!disabled"
+      style="justify-content: left"
+    >
+      <template v-for="(item, index) in displayState">
+        <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
+        <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, ref, watchEffect } from 'vue';
+import { Coin } from '@element-plus/icons-vue';
+
+import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-input';
+      name: string;
+      text: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: 'large' | 'default' | 'small';
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<(e: 'change', value: string) => void>();
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const autocomplete = ref<InstanceType<typeof TMagicAutocomplete>>();
+const isFocused = ref(false);
+const state = ref('');
+const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
+
+const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
+
+watchEffect(() => {
+  state.value = props.model[props.name] || '';
+});
+
+const mouseupHandler = async () => {
+  isFocused.value = true;
+  await nextTick();
+  autocomplete.value?.focus();
+};
+
+const blurHandler = () => {
+  isFocused.value = false;
+
+  displayState.value = [];
+
+  const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+  let index = 0;
+  for (const match of matches) {
+    if (typeof match.index === 'undefined') break;
+
+    displayState.value.push({
+      type: 'text',
+      value: state.value.substring(index, match.index),
+    });
+    let dsText = '';
+    let ds: DataSourceSchema | undefined;
+    let fields: DataSchema[] | undefined;
+    match[1].split('.').forEach((item, index) => {
+      if (index === 0) {
+        ds = dataSources.value.find((ds) => ds.id === item);
+        dsText += ds?.title || item;
+        fields = ds?.fields;
+        return;
+      }
+
+      const field = fields?.find((field) => field.name === item);
+      fields = field?.fields;
+      dsText += `.${field?.title || item}`;
+    });
+    displayState.value.push({
+      type: 'var',
+      value: dsText,
+    });
+    index = match.index + match[0].length;
+  }
+
+  if (index < state.value.length) {
+    displayState.value.push({
+      type: 'text',
+      value: state.value.substring(index),
+    });
+  }
+};
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
+
+let inputText = '';
+
+const inputHandler = (v: string) => {
+  if (!v) {
+    inputText = v;
+  }
+};
+
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+/**
+ * 光标位置是不是}
+ * @param selectionStart 光标位置
+ */
+const isRightCurlyBracket = (selectionStart = 0) => {
+  const lastChar = inputText.substring(selectionStart - 1, selectionStart);
+  return lastChar === '}';
+};
+
+/**
+ * 获取光标位置
+ */
+const getSelectionStart = () => {
+  let selectionStart = input.value?.selectionStart || 0;
+
+  // 输入法可能会自动补全}，如果当前光标前面一个字符是}，则光标前移一位
+  if (isRightCurlyBracket(selectionStart)) {
+    selectionStart -= 1;
+  }
+
+  return selectionStart;
+};
+
+/**
+ * 当前输入的是{
+ * @param leftCurlyBracketIndex {字符索引
+ */
+const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
+  leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+
+/**
+ * 当前输入的是.
+ * @param leftCurlyBracketIndex .字符索引
+ */
+const curCharIsDot = (dotIndex: number) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
+
+/**
+ * @param leftCurlyBracketIndex 左大括号字符索引
+ * @param cb 建议的方法
+ */
+const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (data: { value: string }[]) => void) => {
+  let result: DataSourceSchema[] = [];
+
+  if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+    // 当前输入的是{
+    result = dataSources.value;
+  } else if (leftCurlyBracketIndex > -1) {
+    // 当前输入的是{xx
+    const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
+    result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
+  }
+
+  cb(
+    result.map((ds) => ({
+      value: ds.id,
+      text: ds.title,
+      type: 'dataSource',
+    })),
+  );
+};
+
+/**
+ * 字段提示
+ * @param queryString 当前输入框内的字符串
+ * @param leftAngleIndex {字符索引
+ * @param dotIndex .字符索引
+ * @param cb 建议回调
+ */
+const fieldQuerySearch = (
+  queryString: string,
+  leftAngleIndex: number,
+  dotIndex: number,
+  cb: (data: { value: string }[]) => void,
+) => {
+  let result: DataSchema[] = [];
+
+  const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+  // 可能是xx.xx.xx，存在链式调用
+  const keys = dsKey.split('.');
+  // 最前的是数据源id
+  const ds = dataSources.value.find((ds) => ds.id === keys.shift());
+  if (!ds) {
+    return;
+  }
+
+  let fields = ds.fields || [];
+
+  // 后面这些事字段
+  let key = keys.shift();
+  while (key) {
+    for (const field of fields) {
+      if (field.name === key) {
+        fields = field.fields || [];
+        key = keys.shift();
+        break;
+      }
+    }
+  }
+
+  if (curCharIsDot(dotIndex)) {
+    // 当前输入的是.
+    result = fields || [];
+  } else if (dotIndex > -1) {
+    const queryName = queryString.substring(dotIndex + 1).toLowerCase();
+    result =
+      fields.filter(
+        (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
+      ) || [];
+  }
+
+  cb(
+    result.map((field) => ({
+      value: field.name,
+      text: field.title,
+      type: 'field',
+    })),
+  );
+};
+
+/**
+ * 数据源提示
+ * @param queryString 当前输入框内的字符串
+ * @param cb 建议回调
+ */
+const querySearch = (queryString: string, cb: (data: { value: string }[]) => void) => {
+  inputText = queryString;
+
+  const selectionStart = getSelectionStart();
+
+  const curQueryString = queryString.substring(0, selectionStart);
+
+  const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
+  const dsKeyStringLastIndex = curQueryString.lastIndexOf('{');
+
+  const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
+
+  if (isFieldTip) {
+    fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
+  } else {
+    dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
+  }
+};
+
+/**
+ * 选择建议
+ * @param value 建议值
+ * @param type 建议类型，是数据源还是字段
+ */
+const selectHandler = async ({ value, type }: { value: string; type: 'dataSource' | 'field' }) => {
+  const isDataSource = type === 'dataSource';
+  const selectionStart = input.value?.selectionStart || 0;
+  let startText = inputText.substring(0, selectionStart);
+
+  const dotIndex = startText.lastIndexOf('.');
+  const leftCurlyBracketIndex = startText.lastIndexOf('{');
+
+  const endText = inputText.substring(selectionStart);
+
+  let suggestText = value;
+
+  if (isDataSource) {
+    if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+      startText = startText.substring(0, leftCurlyBracketIndex + 1);
+    }
+
+    // 当前光标后一位是否为}，不是的话需要补上
+    if (!isRightCurlyBracket(selectionStart + 1)) {
+      suggestText = `${suggestText}}`;
+    }
+    suggestText = `{${suggestText}}`;
+  } else if (!curCharIsDot(dotIndex)) {
+    startText = startText.substring(0, dotIndex + 1);
+  }
+
+  state.value = `${startText}${suggestText}${endText}`;
+
+  await nextTick();
+
+  // 由于选择数据源时会在后面补全}}, 所以光标要前移2位
+  let newSelectionStart = 0;
+  if (isDataSource) {
+    newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+  } else {
+    newSelectionStart = dotIndex + suggestText.length + 1;
+  }
+  input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+};
+</script>

packages/editor/src/fields/KeyValue.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="m-fields-key-value">
+    <div class="m-fields-key-value-item" v-for="(item, index) in records" :key="index">
+      <TMagicInput
+        placeholder="key"
+        v-model="records[index][0]"
+        :disabled="disabled"
+        :size="size"
+        @change="keyChangeHandler"
+      ></TMagicInput>
+      <span class="m-fileds-key-value-delimiter">:</span>
+      <TMagicInput
+        placeholder="value"
+        v-model="records[index][1]"
+        :disabled="disabled"
+        :size="size"
+        @change="valueChangeHandler"
+      ></TMagicInput>
+
+      <TMagicButton
+        class="m-fileds-key-value-delete"
+        type="danger"
+        :size="size"
+        circle
+        plain
+        :icon="Delete"
+        @click="deleteHandler(index)"
+      ></TMagicButton>
+    </div>
+
+    <TMagicButton type="primary" :size="size" plain :icon="Plus" @click="addHandler">添加</TMagicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import { Delete, Plus } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicInput } from '@tmagic/design';
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'key-value';
+      name: string;
+      text: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: 'large' | 'default' | 'small';
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<(e: 'change', value: Record<string, any>) => void>();
+
+const records = ref<[string, string][]>([]);
+
+watchEffect(() => {
+  records.value = Object.entries(props.model[props.name] || {});
+});
+
+const getValue = () => {
+  const record: Record<string, string> = {};
+  records.value.forEach(([key, value]) => {
+    if (key) {
+      record[key] = value;
+    }
+  });
+  return record;
+};
+
+const keyChangeHandler = () => {
+  emit('change', getValue());
+};
+
+const valueChangeHandler = () => {
+  emit('change', getValue());
+};
+
+const addHandler = () => {
+  records.value.push(['', '']);
+};
+
+const deleteHandler = (index: number) => {
+  records.value.splice(index, 1);
+};
+</script>

packages/editor/src/index.ts

@@ -21,7 +21,10 @@ import Code from './fields/Code.vue';
 import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
+import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceInput from './fields/DataSourceInput.vue';
 import EventSelect from './fields/EventSelect.vue';
+import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setConfig } from './utils/config';
@@ -40,6 +43,7 @@ export { default as propsService } from './services/props';
 export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
+export { default as dataSourceService } from './services/dataSource';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';
@@ -47,7 +51,10 @@ export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPa
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
+export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
+export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
@@ -74,5 +81,8 @@ export default {
     app.component('m-fields-code-select', CodeSelect);
     app.component('m-fields-code-select-col', CodeSelectCol);
     app.component('m-fields-event-select', EventSelect);
+    app.component('m-fields-data-source-fields', DataSourceFields);
+    app.component('m-fields-key-value', KeyValue);
+    app.component('m-fields-data-source-input', DataSourceInput);
   },
 };

packages/editor/src/initService.ts

@@ -1,10 +1,13 @@
 import type { ExtractPropTypes } from 'vue';
 import { onUnmounted, toRaw, watch } from 'vue';
+import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
-import type { CodeBlockContent, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import { getNodes } from '@tmagic/utils';
 
-import { createCodeBlockTarget } from './utils/dep';
+import type { Target } from './services/dep';
+import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
 import editorProps from './editorProps';
 import type { Services } from './type';
 
@@ -107,8 +110,85 @@ export const initServiceState = (
 export const initServiceEvents = (
   props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>,
   emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void,
-  { editorService, codeBlockService, depService }: Services,
+  { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
+  const getApp = () => {
+    const stage = editorService.get('stage');
+    return stage?.renderer.runtime?.getApp?.();
+  };
+
+  const updateDataSoucreSchema = () => {
+    const root = editorService.get('root');
+
+    if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
+  };
+
+  const upateNodeWhenDataSourceChange = (nodes: MNode[]) => {
+    const root = editorService.get('root');
+    const stage = editorService.get('stage');
+
+    if (!root || !stage) return;
+
+    const app = getApp();
+
+    if (!app) return;
+
+    if (app.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    updateDataSoucreSchema();
+
+    nodes.forEach((node) => {
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        if (dep[node.id]) {
+          stage.update({
+            config: cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: cloneDeep(root),
+          });
+        }
+      });
+    });
+  };
+
+  const targetAddHandler = (target: Target) => {
+    if (target.type !== 'data-source') return;
+
+    const root = editorService.get('root');
+    if (!root) return;
+
+    if (!root.dataSourceDeps) {
+      root.dataSourceDeps = {};
+    }
+
+    root.dataSourceDeps[target.id] = target.deps;
+  };
+
+  const targetRemoveHandler = (id: string | number) => {
+    const root = editorService.get('root');
+    if (!root?.dataSourceDeps) return;
+
+    delete root.dataSourceDeps[id];
+  };
+
+  const depUpdateHandler = (node: MNode) => {
+    upateNodeWhenDataSourceChange([node]);
+  };
+
+  const collectedHandler = (nodes: MNode[]) => {
+    upateNodeWhenDataSourceChange(nodes);
+  };
+
+  depService.on('add-target', targetAddHandler);
+  depService.on('remove-target', targetRemoveHandler);
+  depService.on('dep-update', depUpdateHandler);
+  depService.on('collected', collectedHandler);
+
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
     let node;
@@ -131,8 +211,10 @@ export const initServiceEvents = (
     }
 
     value.codeBlocks = value.codeBlocks || {};
+    value.dataSources = value.dataSources || [];
 
     codeBlockService.setCodeDsl(value.codeBlocks);
+    dataSourceService.set('dataSources', value.dataSources);
 
     depService.removeTargets('code-block');
 
@@ -140,10 +222,15 @@ export const initServiceEvents = (
       depService.addTarget(createCodeBlockTarget(id, code));
     });
 
+    value.dataSources.forEach((ds) => {
+      depService.addTarget(createDataSourceTarget(ds.id, ds));
+    });
+
     if (value && Array.isArray(value.items)) {
       depService.collect(value.items, true);
     } else {
       depService.clear();
+      delete value.dataSourceDeps;
     }
   };
 
@@ -185,7 +272,39 @@ export const initServiceEvents = (
   codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
   codeBlockService.on('remove', codeBlockRemoveHandler);
 
+  const dataSourceAddHandler = (config: DataSourceSchema) => {
+    depService.addTarget(createDataSourceTarget(config.id, config));
+    getApp()?.dataSourceManager?.addDataSource(config);
+  };
+
+  const dataSourceUpdateHandler = (config: DataSourceSchema) => {
+    if (config.title) {
+      depService.getTarget(config.id)!.name = config.title;
+    }
+    const root = editorService.get('root');
+
+    const targets = depService.getTargets('data-source');
+
+    const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
+
+    upateNodeWhenDataSourceChange(nodes);
+  };
+
+  const dataSourceRemoveHandler = (id: string) => {
+    depService.removeTarget(id);
+    getApp()?.dataSourceManager?.removeDataSource(id);
+  };
+
+  dataSourceService.on('add', dataSourceAddHandler);
+  dataSourceService.on('update', dataSourceUpdateHandler);
+  dataSourceService.on('remove', dataSourceRemoveHandler);
+
   onUnmounted(() => {
+    depService.off('add-target', targetAddHandler);
+    depService.off('remove-target', targetRemoveHandler);
+    depService.off('dep-update', depUpdateHandler);
+    depService.off('collected', collectedHandler);
+
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);
     editorService.off('add', nodeAddHandler);
@@ -194,5 +313,9 @@ export const initServiceEvents = (
 
     codeBlockService.off('addOrUpdate', codeBlockAddOrUpdateHandler);
     codeBlockService.off('remove', codeBlockRemoveHandler);
+
+    dataSourceService.off('add', dataSourceAddHandler);
+    dataSourceService.off('update', dataSourceUpdateHandler);
+    dataSourceService.off('remove', dataSourceRemoveHandler);
   });
 };

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -8,7 +8,7 @@
   >
     <component
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent.props({ name: config.text })"
+      v-bind="tabPaneComponent.props({ name: config.text, lazy: config.lazy })"
       :is="tabPaneComponent.component"
       :key="config.$key || index"
     >
@@ -85,7 +85,7 @@
 
 <script lang="ts" setup name="MEditorSidebar">
 import { computed, ref, watch } from 'vue';
-import { Coin, EditPen, Files } from '@element-plus/icons-vue';
+import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import { getConfig } from '@tmagic/design';
 
@@ -94,16 +94,17 @@ import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor
 import { SideBarData } from '@editor/type';
 
 import CodeBlockList from './code-block/CodeBlockList.vue';
+import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
 const props = withDefaults(
   defineProps<{
-    data?: SideBarData;
+    data: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
   }>(),
   {
-    data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
+    data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block', 'data-source'] }),
   },
 );
 
@@ -117,7 +118,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     'component-list': {
       $key: 'component-list',
       type: 'component',
-      icon: Coin,
+      icon: Goods,
       text: '组件',
       component: ComponentListPanel,
       slots: {},
@@ -125,7 +126,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     layer: {
       $key: 'layer',
       type: 'component',
-      icon: Files,
+      icon: List,
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,
@@ -141,6 +142,14 @@ const getItemConfig = (data: SideItem): SideComponent => {
       component: CodeBlockList,
       slots: {},
     },
+    'data-source': {
+      $key: 'data-source',
+      type: 'component',
+      icon: Coin,
+      text: '数据源',
+      component: DataSourceListPanel,
+      slots: {},
+    },
   };
 
   return typeof data === 'string' ? map[data] : data;

packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -0,0 +1,84 @@
+<template>
+  <TMagicDrawer
+    v-model="visible"
+    :title="title"
+    :close-on-press-escape="true"
+    :append-to-body="true"
+    :show-close="true"
+    :close-on-click-modal="true"
+    :size="size"
+  >
+    <MForm ref="form" :config="dataSourceConfig" :init-values="initValues" @change="changeHandler"></MForm>
+
+    <template #footer>
+      <div>
+        <TMagicButton type="primary" @click="submitHandler">确定</TMagicButton>
+        <TMagicButton @click="hide">关闭</TMagicButton>
+      </div>
+    </template>
+  </TMagicDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watchEffect } from 'vue';
+
+import { TMagicButton, TMagicDrawer, tMagicMessage } from '@tmagic/design';
+import { MForm } from '@tmagic/form';
+
+import type { Services } from '@editor/type';
+
+const props = defineProps<{
+  title?: string;
+  values: any;
+}>();
+
+const type = ref('base');
+
+const emit = defineEmits(['submit']);
+
+const services = inject<Services>('services');
+
+const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
+const dataSourceConfig = computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
+
+const form = ref<InstanceType<typeof MForm>>();
+
+const initValues = ref({});
+
+watchEffect(() => {
+  initValues.value = props.values;
+  type.value = props.values.type || 'base';
+});
+
+const changeHandler = (value: Record<string, any>) => {
+  if (value.type === type.value) {
+    return;
+  }
+  type.value = value.type || 'base';
+  initValues.value = value;
+};
+
+const submitHandler = async () => {
+  try {
+    const values = await form.value?.submitForm();
+    emit('submit', values);
+  } catch (error: any) {
+    tMagicMessage.error(error.message);
+  }
+};
+
+const visible = ref(false);
+
+const hide = () => {
+  visible.value = false;
+};
+
+defineExpose({
+  show() {
+    visible.value = true;
+  },
+
+  hide,
+});
+</script>

packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -0,0 +1,130 @@
+<template>
+  <TMagicScrollbar class="data-source-list-panel m-editor-dep-list-panel">
+    <div class="search-wrapper">
+      <SearchInput @search="filterTextChangeHandler"></SearchInput>
+      <TMagicButton type="primary" size="small" @click="addHandler">新增</TMagicButton>
+    </div>
+
+    <!-- 数据源列表 -->
+    <TMagicTree
+      ref="tree"
+      class="magic-editor-layer-tree"
+      node-key="id"
+      empty-text="暂无代码块"
+      default-expand-all
+      :expand-on-click-node="false"
+      :data="list"
+      :highlight-current="true"
+    >
+      <template #default="{ data }">
+        <div :id="data.id" class="list-container">
+          <div class="list-item">
+            <Icon v-if="data.type === 'code'" class="codeIcon" :icon="Coin"></Icon>
+            <Icon v-if="data.type === 'node'" class="compIcon" :icon="Aim"></Icon>
+            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+              >{{ data.name }}（{{ data.id }}）</span
+            >
+            <!-- 右侧工具栏 -->
+            <div class="right-tool" v-if="data.type === 'code'">
+              <TMagicTooltip effect="dark" content="编辑" placement="bottom">
+                <Icon class="edit-icon" :icon="Edit" @click.stop="editHandler(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom">
+                <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <slot name="data-source-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+            </div>
+          </div>
+        </div>
+      </template>
+    </TMagicTree>
+
+    <DataSourceConfigPanel
+      ref="editDialog"
+      :values="dataSourceValues"
+      :title="typeof dataSourceValues.id !== 'undefined' ? `编辑${dataSourceValues.title}` : '新增'"
+      @submit="submitDataSourceHandler"
+    ></DataSourceConfigPanel>
+  </TMagicScrollbar>
+</template>
+
+<script setup lang="ts" name="MEditorDataSourceListPanel">
+import { computed, inject, ref } from 'vue';
+import { Aim, Close, Coin, Edit } from '@element-plus/icons-vue';
+
+import { TMagicButton, tMagicMessageBox, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { DataSourceSchema } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import type { Services } from '@editor/type';
+
+import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
+
+const services = inject<Partial<Services>>('services', {});
+const { dataSourceService, depService } = inject<Services>('services') || {};
+
+const list = computed(() =>
+  Object.values(depService?.targets['data-source'] || {}).map((target) => ({
+    id: target.id,
+    name: target.name,
+    type: 'code',
+    children: Object.entries(target.deps).map(([id, dep]) => ({
+      name: dep.name,
+      type: 'node',
+      id,
+      children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
+    })),
+  })),
+);
+
+const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
+
+const dataSourceValues = ref<Record<string, any>>({});
+
+const addHandler = () => {
+  if (!editDialog.value) return;
+
+  dataSourceValues.value = {};
+
+  editDialog.value.show();
+};
+
+const editHandler = (id: string) => {
+  if (!editDialog.value || !services) return;
+
+  dataSourceValues.value = {
+    ...dataSourceService?.getDataSourceById(id),
+  };
+
+  editDialog.value.show();
+};
+
+const removeHandler = async (id: string) => {
+  await tMagicMessageBox.confirm('确定删除?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+
+  dataSourceService?.remove(id);
+};
+
+const submitDataSourceHandler = (value: DataSourceSchema) => {
+  if (!services) return;
+
+  if (value.id) {
+    dataSourceService?.update(value);
+  } else {
+    dataSourceService?.add(value);
+  }
+
+  editDialog.value?.hide();
+};
+
+const tree = ref<InstanceType<typeof TMagicTree>>();
+
+const filterTextChangeHandler = (val: string) => {
+  tree.value?.filter(val);
+};
+</script>

packages/editor/src/services/codeBlock.ts

@@ -23,7 +23,6 @@ import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
 import type { CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
-import { info } from '@editor/utils/logger';
 
 import BaseService from './BaseService';
 
@@ -55,7 +54,6 @@ class CodeBlock extends BaseService {
    */
   public async setCodeDsl(codeDsl: CodeBlockDSL): Promise<void> {
     this.state.codeDsl = codeDsl;
-    info('[code-block]:code-dsl-change', this.state.codeDsl);
     this.emit('code-dsl-change', this.state.codeDsl);
   }
 

packages/editor/src/services/dataSource.ts

@@ -0,0 +1,90 @@
+import { reactive } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { FormConfig } from '@tmagic/form';
+import { DataSourceSchema } from '@tmagic/schema';
+import { guid } from '@tmagic/utils';
+
+import { getFormConfig } from '@editor/utils/data-source';
+
+import BaseService from './BaseService';
+
+interface State {
+  dataSources: DataSourceSchema[];
+  configs: Record<string, FormConfig>;
+}
+
+type StateKey = keyof State;
+class DataSource extends BaseService {
+  private state = reactive<State>({
+    dataSources: [],
+    configs: {},
+  });
+
+  public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
+    this.state[name] = value;
+  }
+
+  public get<K extends StateKey>(name: K): State[K] {
+    return this.state[name];
+  }
+
+  public getFormConfig(type = 'base') {
+    return getFormConfig(type, this.get('configs'));
+  }
+
+  public setFormConfig(type: string, config: FormConfig) {
+    this.get('configs')[type] = config;
+  }
+
+  public add(config: DataSourceSchema) {
+    const newConfig = {
+      ...config,
+      id: this.createId(),
+    };
+
+    this.get('dataSources').push(newConfig);
+
+    this.emit('add', newConfig);
+  }
+
+  public update(config: DataSourceSchema) {
+    const dataSources = this.get('dataSources');
+
+    const index = dataSources.findIndex((ds) => ds.id === config.id);
+
+    dataSources[index] = cloneDeep(config);
+
+    this.emit('update', config);
+  }
+
+  public remove(id: string) {
+    const dataSources = this.get('dataSources');
+    const index = dataSources.findIndex((ds) => ds.id === id);
+    dataSources.splice(index, 1);
+
+    this.emit('remove', id);
+  }
+
+  public getDataSourceById(id: string) {
+    return this.get('dataSources').find((ds) => ds.id === id);
+  }
+
+  public resetState() {
+    this.set('dataSources', []);
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+    this.resetState();
+    this.removeAllPlugins();
+  }
+
+  private createId(): string {
+    return `ds_${guid()}`;
+  }
+}
+
+export type DataSourceService = DataSource;
+
+export default new DataSource();

packages/editor/src/services/dep.ts

@@ -267,6 +267,8 @@ export class Watcher extends EventEmitter {
         });
       });
     });
+
+    this.emit('collected', nodes, deep);
   }
 
   /**
@@ -299,6 +301,7 @@ export class Watcher extends EventEmitter {
 
         if (target.isTarget(key, value)) {
           target.updateDep(node, fullKey);
+          this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {
           value.forEach((item, index) => {
             collectTarget(item, `${fullKey}.${index}`);

packages/editor/src/theme/data-source-fields.scss

@@ -0,0 +1,13 @@
+.m-editor-data-source-fields {
+  width: 100%;
+
+  .tmagic-design-table {
+    width: 100%;
+  }
+
+  .m-editor-data-source-fields-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+  }
+}

packages/editor/src/theme/data-source.scss

@@ -0,0 +1,17 @@
+.data-source-list-panel {
+  .list-container {
+    .list-item {
+      .codeIcon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+      }
+
+      .compIcon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+      }
+    }
+  }
+}

packages/editor/src/theme/key-value.scss

@@ -0,0 +1,13 @@
+.m-fields-key-value-item {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.m-fileds-key-value-delimiter {
+  margin: 0 10px;
+}
+
+.m-fileds-key-value-delete {
+  margin-left: 10px;
+}

packages/editor/src/theme/theme.scss

@@ -17,3 +17,6 @@
 @import "./layout.scss";
 @import "./breadcrumb.scss";
 @import "./dep-list.scss";
+@import "./data-source.scss";
+@import "./data-source-fields.scss";
+@import "./key-value.scss";

packages/editor/src/type.ts

@@ -30,6 +30,7 @@ import type {
 
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
+import { DataSourceService } from './services/dataSource';
 import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -56,6 +57,7 @@ export interface Services {
   uiService: UiService;
   codeBlockService: CodeBlockService;
   depService: DepService;
+  dataSourceService: DataSourceService;
 }
 
 export interface StageOptions {
@@ -264,7 +266,7 @@ export interface SideComponent extends MenuComponent {
  * layer: 已选组件树
  * code-block: 代码块
  */
-export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
+export type SideItem = 'component-list' | 'layer' | 'code-block' | 'data-source' | SideComponent;
 
 /** 工具栏 */
 export interface SideBarData {

packages/editor/src/utils/data-source/formConfigs/base.ts

@@ -0,0 +1,32 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'id',
+    type: 'hidden',
+  },
+  {
+    name: 'type',
+    text: '类型',
+    type: 'select',
+    options: [
+      { text: '基础', value: 'base' },
+      { text: 'HTTP', value: 'http' },
+    ],
+    defaultValue: 'base',
+  },
+  {
+    name: 'title',
+    text: '名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  },
+  {
+    name: 'description',
+    text: '描述',
+  },
+] as FormConfig;

packages/editor/src/utils/data-source/formConfigs/http.ts

@@ -0,0 +1,50 @@
+import { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'autoFetch',
+    text: '自动请求',
+    type: 'switch',
+    defaultValue: true,
+  },
+  {
+    type: 'fieldset',
+    name: 'options',
+    legend: 'HTTP 配置',
+    items: [
+      {
+        name: 'url',
+        text: 'URL',
+      },
+      {
+        name: 'method',
+        text: 'Method',
+        type: 'select',
+        options: [
+          { text: 'GET', value: 'GET' },
+          { text: 'POST', value: 'POST' },
+          { text: 'PUT', value: 'PUT' },
+          { text: 'DELETE', value: 'DELETE' },
+        ],
+      },
+      {
+        name: 'params',
+        type: 'key-value',
+        defaultValue: {},
+        text: '参数',
+      },
+      {
+        name: 'data',
+        type: 'key-value',
+        defaultValue: {},
+        text: '请求体',
+      },
+      {
+        name: 'headers',
+        type: 'key-value',
+        defaultValue: {},
+        text: '请求头',
+      },
+    ],
+  },
+] as FormConfig;

packages/editor/src/utils/data-source/index.ts

@@ -0,0 +1,31 @@
+import { FormConfig } from '@tmagic/form';
+
+import BaseFormConfig from './formConfigs/base';
+import HttpFormConfig from './formConfigs/http';
+
+const fillConfig = (config: FormConfig): FormConfig => [
+  ...BaseFormConfig,
+  ...config,
+  {
+    type: 'panel',
+    title: '数据定义',
+    items: [
+      {
+        name: 'fields',
+        type: 'data-source-fields',
+        defaultValue: [],
+      },
+    ],
+  },
+];
+
+export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
+  switch (type) {
+    case 'base':
+      return fillConfig([]);
+    case 'http':
+      return fillConfig(HttpFormConfig);
+    default:
+      return fillConfig(configs[type] || []);
+  }
+};

packages/editor/src/utils/dep.ts

@@ -1,6 +1,6 @@
 import { isEmpty } from 'lodash-es';
 
-import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
+import { CodeBlockContent, DataSourceSchema, HookType, Id } from '@tmagic/schema';
 
 import { Target } from '@editor/services/dep';
 import type { HookData } from '@editor/type';
@@ -19,3 +19,11 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
       return false;
     },
   });
+
+export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
+  new Target({
+    type: 'data-source',
+    id,
+    name: ds.title || `${id}`,
+    isTarget: (key: string | number, value: any) => typeof value === 'string' && value.includes(`${id}`),
+  });

packages/element-plus-adapter/src/index.ts

@@ -1,4 +1,5 @@
 import {
+  ElAutocomplete,
   ElBadge,
   ElButton,
   ElCard,
@@ -51,6 +52,11 @@ const adapter: any = {
   message: ElMessage,
   messageBox: ElMessageBox,
   components: {
+    autocomplete: {
+      component: ElAutocomplete,
+      props: (props: any) => props,
+    },
+
     badge: {
       component: ElBadge,
       props: (props: any) => props,

packages/form/package.json

@@ -56,7 +56,7 @@
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.2.0"
   }

packages/form/src/fields/Select.vue

@@ -29,6 +29,7 @@
 import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
+import { getValueByKeyPath } from '@tmagic/utils';
 
 import { FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
 import { getConfig } from '../utils/config';
@@ -157,12 +158,9 @@ const getOptions = async () => {
     });
   }
 
-  const optionsData = root.split('.').reduce((accumulator, currentValue: any) => accumulator[currentValue], res);
+  const optionsData = getValueByKeyPath(root, res);
 
-  const resTotal = globalThis.parseInt(
+  const resTotal = globalThis.parseInt(getValueByKeyPath(totalKey, res), 10);
-    totalKey.split('.').reduce((accumulator, currentValue: any) => accumulator[currentValue], res),
-    10,
-  );
   if (resTotal > 0) {
     total.value = resTotal;
   }
@@ -283,9 +281,7 @@ const getInitOption = async () => {
     });
   }
 
-  let initData = (initRoot || root)
+  let initData = getValueByKeyPath(initRoot || root, res);
-    .split('.')
-    .reduce((accumulator, currentValue: any) => accumulator[currentValue], res);
   if (initData) {
     if (!Array.isArray(initData)) {
       initData = [initData];

packages/form/tests/unit/fields/Time.spec.ts

@@ -57,7 +57,6 @@ describe('Time', () => {
     await input.setValue('12:00:00');
 
     const value = await (wrapper.vm as any).submitForm();
-    console.log(value.time);
     expect(value.time).toMatch('12:00:00');
   });
 });

packages/schema/src/index.ts

@@ -32,6 +32,10 @@ export enum ActionType {
   CODE = 'code',
 }
 
+export interface DataSourceDeps {
+  [dataSourceId: string | number]: Dep;
+}
+
 /** 事件类型(已废弃，后续不建议继续使用) */
 export interface DeprecatedEventConfig {
   /** 待触发的事件名称 */
@@ -106,6 +110,10 @@ export interface MApp extends MComponent {
   items: MPage[];
   /** 代码块 */
   codeBlocks?: CodeBlockDSL;
+
+  dataSources?: DataSourceSchema[];
+
+  dataSourceDeps?: DataSourceDeps;
 }
 
 export interface CodeBlockDSL {
@@ -140,3 +148,41 @@ export enum HookType {
   /** 代码块钩子标识 */
   CODE = 'code',
 }
+
+export interface DataSchema {
+  type?: 'null' | 'boolean' | 'object' | 'array' | 'number' | 'string' | 'any';
+  /** 键名 */
+  name: string;
+  /** 展示名称 */
+  title?: string;
+  /** 实体描述，鼠标hover时展示 */
+  description?: string;
+  /** 默认值 */
+  defaultValue?: any;
+  /** 是否可用 */
+  enable?: boolean;
+  /** type === 'object' || type === 'array' */
+  fields?: DataSchema[];
+}
+
+export interface DataSourceSchema {
+  /** 数据源类型，根据类型来实例化；例如http则使用new HttpDataSource */
+  type: string;
+  /** 实体ID */
+  id: string;
+  /** 实体名称，用于关联时展示 */
+  title?: string;
+  /** 实体描述，鼠标hover时展示 */
+  description?: string;
+  /** 字段列表 */
+  fields: DataSchema[];
+  /** 扩展字段 */
+  [key: string]: any;
+}
+
+export interface Dep {
+  [nodeId: Id]: {
+    name: string;
+    keys: Id[];
+  };
+}

packages/table/package.json

@@ -53,7 +53,7 @@
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.2.0"
   }

packages/ui-react/src/button/formConfig.ts

@@ -20,6 +20,7 @@ export default [
   {
     name: 'text',
     text: '文本',
+    type: 'data-source-input',
   },
   {
     name: 'multiple',

packages/ui-react/src/img/formConfig.ts

@@ -24,5 +24,6 @@ export default [
   {
     text: '链接',
     name: 'url',
+    type: 'data-source-input',
   },
 ];

packages/ui-react/src/qrcode/formConfig.ts

@@ -20,5 +20,6 @@ export default [
   {
     text: '链接',
     name: 'url',
+    type: 'data-source-input',
   },
 ];

packages/ui-react/src/text/Text.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 
 import type { MComponent } from '@tmagic/schema';
 
@@ -27,15 +27,13 @@ interface TextProps {
 }
 
 const Text: React.FC<TextProps> = ({ config }) => {
-  const { app, ref } = useApp({ config });
+  const { app } = useApp({ config });
 
   if (!app) return null;
 
-  const [displayText] = useState(config.text);
-
   return (
-    <div ref={ref} className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
+    <div className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
-      {displayText}
+      {config.text}
     </div>
   );
 };

packages/ui-react/src/text/formConfig.ts

@@ -20,6 +20,7 @@ export default [
   {
     name: 'text',
     text: '文本',
+    type: 'data-source-input',
   },
   {
     name: 'multiple',

packages/ui-vue2/package.json

@@ -22,7 +22,7 @@
     "vue": "^2.7.4"
   },
   "devDependencies": {
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
     "vue-template-compiler": "^2.7.4"
   }
 }

packages/ui-vue2/src/button/formConfig.ts

@@ -20,5 +20,6 @@ export default [
   {
     text: '文本',
     name: 'text',
+    type: 'data-source-input',
   },
 ];

packages/ui-vue2/src/img/src/formConfig.ts

@@ -24,5 +24,6 @@ export default [
   {
     text: '链接',
     name: 'url',
+    type: 'data-source-input',
   },
 ];

packages/ui-vue2/src/qrcode/src/formConfig.ts

@@ -20,5 +20,6 @@ export default [
   {
     text: '链接',
     name: 'url',
+    type: 'data-source-input',
   },
 ];

packages/ui-vue2/src/text/formConfig.ts

@@ -20,6 +20,7 @@ export default [
   {
     name: 'text',
     text: '文本',
+    type: 'data-source-input',
   },
   {
     name: 'multiple',

packages/ui/src/button/src/formConfig.ts

@@ -20,5 +20,6 @@ export default [
   {
     text: '文本',
     name: 'text',
+    type: 'data-source-input',
   },
 ];

packages/ui/src/img/src/formConfig.ts

@@ -20,9 +20,11 @@ export default [
   {
     text: '图片',
     name: 'src',
+    type: 'data-source-input',
   },
   {
     text: '链接',
     name: 'url',
+    type: 'data-source-input',
   },
 ];

packages/ui/src/qrcode/src/formConfig.ts

@@ -20,5 +20,6 @@ export default [
   {
     text: '链接',
     name: 'url',
+    type: 'data-source-input',
   },
 ];

packages/ui/src/text/src/formConfig.ts

@@ -20,6 +20,7 @@ export default [
   {
     name: 'text',
     text: '文本',
+    type: 'data-source-input',
   },
   {
     name: 'multiple',

packages/utils/src/index.ts

@@ -19,7 +19,7 @@
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 
-import type { MComponent, MNode } from '@tmagic/schema';
+import type { DataSourceDeps, Id, MComponent, MNode } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 
 export * from './dom';
@@ -72,7 +72,7 @@ export const emptyFn = (): any => undefined;
  * @param {Array} data 要查找的根容器节点
  * @return {Array} 组件在data中的子孙路径
  */
-export const getNodePath = (id: number | string, data: MNode[] = []): MNode[] => {
+export const getNodePath = (id: Id, data: MNode[] = []): MNode[] => {
   const path: MNode[] = [];
 
   const get = function (id: number | string, data: MNode[]): MNode | null {
@@ -81,7 +81,7 @@ export const getNodePath = (id: number | string, data: MNode[] = []): MNode[] =>
     }
 
     for (let i = 0, l = data.length; i < l; i++) {
-      const item: any = data[i];
+      const item = data[i];
 
       path.push(item);
       if (`${item.id}` === `${id}`) {
@@ -156,3 +156,134 @@ export const guid = (digit = 8): string =>
     const v = c === 'x' ? r : (r & 0x3) | 0x8;
     return v.toString(16);
   });
+
+export const getValueByKeyPath: any = (keys: string, value: Record<string | number, any>) => {
+  const path = keys.split('.');
+  const pathLength = path.length;
+
+  return path.reduce((accumulator, currentValue: any, currentIndex: number) => {
+    if (Object.prototype.toString.call(accumulator) === '[object Object]' || Array.isArray(accumulator)) {
+      return accumulator[currentValue];
+    }
+
+    if (pathLength - 1 === currentIndex) {
+      return undefined;
+    }
+
+    return {};
+  }, value);
+};
+
+export const getNodes = (ids: Id[], data: MNode[] = []): MNode[] => {
+  const nodes: MNode[] = [];
+
+  const get = function (ids: Id[], data: MNode[]) {
+    if (!Array.isArray(data)) {
+      return;
+    }
+
+    for (let i = 0, l = data.length; i < l; i++) {
+      const item = data[i];
+      const index = ids.findIndex((id: Id) => `${id}` === `${item.id}`);
+
+      if (index > -1) {
+        ids.slice(index, 1);
+        nodes.push(item);
+      }
+
+      if (item.items) {
+        get(ids, item.items);
+      }
+    }
+  };
+
+  get(ids, data);
+
+  return nodes;
+};
+
+export const getDepKeys = (dataSourceDeps: DataSourceDeps = {}, nodeId: Id) =>
+  Array.from(
+    Object.values(dataSourceDeps).reduce((prev, cur) => {
+      (cur[nodeId]?.keys || []).forEach((key) => prev.add(key));
+      return prev;
+    }, new Set<Id>()),
+  );
+
+export const getDepNodeIds = (dataSourceDeps: DataSourceDeps = {}) =>
+  Array.from(
+    Object.values(dataSourceDeps).reduce((prev, cur) => {
+      Object.keys(cur).forEach((id) => {
+        prev.add(id);
+      });
+      return prev;
+    }, new Set<string>()),
+  );
+
+/**
+ * 将新节点更新到data或者parentId对应的节点的子节点中
+ * @param newNode 新节点
+ * @param data 需要修改的数据
+ * @param parentId 父节点 id
+ */
+export const replaceChildNode = (newNode: MNode, data?: MNode[], parentId?: Id) => {
+  const path = getNodePath(newNode.id, data);
+  const node = path.pop();
+  let parent = path.pop();
+
+  if (parentId) {
+    parent = getNodePath(parentId, data).pop();
+  }
+
+  if (!node) throw new Error('未找到目标节点');
+  if (!parent) throw new Error('未找到父节点');
+
+  const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
+  parent.items.splice(index, 1, newNode);
+};
+
+export const compiledNode = (
+  compile: (template: string) => string,
+  node: MNode,
+  dataSourceDeps: DataSourceDeps = {},
+  sourceId?: Id,
+) => {
+  let keys: Id[] = [];
+  if (!sourceId) {
+    keys = getDepKeys(dataSourceDeps, node.id);
+  } else {
+    const dep = dataSourceDeps[sourceId];
+    keys = dep?.[node.id].keys || [];
+  }
+
+  const keyPrefix = '__magic__';
+
+  keys.forEach((key) => {
+    const keyPath = `${key}`.split('.');
+    const keyPathLength = keyPath.length;
+    keyPath.reduce((accumulator, currentValue: any, currentIndex) => {
+      if (keyPathLength - 1 === currentIndex) {
+        if (typeof accumulator[`${keyPrefix}${currentValue}`] === 'undefined') {
+          accumulator[`${keyPrefix}${currentValue}`] = accumulator[currentValue];
+        }
+
+        try {
+          accumulator[currentValue] = compile(accumulator[`${keyPrefix}${currentValue}`]);
+        } catch (e) {
+          console.error(e);
+          accumulator[currentValue] = '';
+        }
+
+        return accumulator;
+      }
+
+      if (Object.prototype.toString.call(accumulator) === '[object Object]' || Array.isArray(accumulator)) {
+        return accumulator[currentValue];
+      }
+
+      return {};
+    }, node);
+  });
+
+  return node;
+};

packages/utils/tests/unit/index.spec.ts

@@ -257,6 +257,26 @@ describe('isPop', () => {
   });
 });
 
+describe('isPage', () => {
+  test('true', () => {
+    expect(
+      util.isPage({
+        type: 'page',
+        id: 1,
+      }),
+    ).toBeTruthy();
+  });
+
+  test('false', () => {
+    expect(
+      util.isPage({
+        type: 'pop1',
+        id: 1,
+      }),
+    ).toBeFalsy();
+  });
+});
+
 describe('getHost', () => {
   test('正常', () => {
     const host = util.getHost('https://film.qq.com/index.html');
@@ -280,3 +300,293 @@ describe('isSameDomain', () => {
     expect(flag).toBeTruthy();
   });
 });
+
+describe('guid', () => {
+  test('获取id', () => {
+    const id = util.guid();
+    const id1 = util.guid();
+    expect(typeof id).toBe('string');
+    expect(id === id1).toBeFalsy();
+  });
+});
+
+describe('getValueByKeyPath', () => {
+  test('key', () => {
+    const value = util.getValueByKeyPath('a', {
+      a: 1,
+    });
+
+    expect(value).toBe(1);
+  });
+
+  test('keys', () => {
+    const value = util.getValueByKeyPath('a.b', {
+      a: {
+        b: 1,
+      },
+    });
+
+    expect(value).toBe(1);
+  });
+
+  test('error', () => {
+    const value = util.getValueByKeyPath('a.b.c.d', {
+      a: {},
+    });
+
+    expect(value).toBeUndefined();
+
+    const value1 = util.getValueByKeyPath('a.b.c', {
+      a: {},
+    });
+
+    expect(value1).toBeUndefined();
+  });
+});
+
+describe('getNodes', () => {
+  test('获取id', () => {
+    const root = [
+      {
+        id: 1,
+        type: 'container',
+        items: [
+          {
+            id: 11,
+            items: [
+              {
+                id: 111,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 2,
+        type: 'container',
+        items: [
+          {
+            id: 22,
+            items: [
+              {
+                id: 222,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 3,
+        type: 'container',
+        items: {
+          id: 33,
+          items: [
+            {
+              id: 333,
+            },
+          ],
+        },
+      },
+    ];
+    const nodes = util.getNodes([22, 111, 2], root);
+    expect(nodes.length).toBe(3);
+  });
+});
+
+describe('getDepKeys', () => {
+  test('get keys', () => {
+    const keys = util.getDepKeys(
+      {
+        ds_bebcb2d5: {
+          61705611: {
+            name: '文本',
+            keys: ['text'],
+          },
+        },
+      },
+      61705611,
+    );
+    expect(keys).toEqual(['text']);
+  });
+});
+
+describe('getDepNodeIds', () => {
+  test('get node ids', () => {
+    const ids = util.getDepNodeIds({
+      ds_bebcb2d5: {
+        61705611: {
+          name: '文本',
+          keys: ['text'],
+        },
+      },
+    });
+    expect(ids).toEqual(['61705611']);
+  });
+});
+
+describe('replaceChildNode', () => {
+  test('replace', () => {
+    const root = [
+      {
+        id: 1,
+        text: '',
+        type: 'container',
+        items: [
+          {
+            id: 11,
+            text: '',
+            items: [
+              {
+                id: 111,
+                text: '',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 2,
+        type: 'container',
+        text: '',
+        items: [
+          {
+            id: 22,
+            text: '',
+            items: [
+              {
+                id: 222,
+                text: '',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    expect(root[1].items[0].items[0].text).toBe('');
+    util.replaceChildNode(
+      {
+        id: 222,
+        text: '文本',
+      },
+      root,
+    );
+    expect(root[1].items[0].items[0].text).toBe('文本');
+  });
+
+  test('replace whith parent', () => {
+    const root = [
+      {
+        id: 1,
+        text: '',
+        type: 'container',
+        items: [
+          {
+            id: 11,
+            text: '',
+            items: [
+              {
+                id: 111,
+                text: '',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 2,
+        type: 'container',
+        text: '',
+        items: [
+          {
+            id: 22,
+            text: '',
+            items: [
+              {
+                id: 222,
+                text: '',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    expect(root[1].items[0].items[0].text).toBe('');
+    util.replaceChildNode(
+      {
+        id: 222,
+        text: '文本',
+      },
+      root,
+      22,
+    );
+    expect(root[1].items[0].items[0].text).toBe('文本');
+  });
+});
+
+describe('compiledNode', () => {
+  test('compiled', () => {
+    const node = util.compiledNode(
+      (_str: string) => '123',
+      {
+        id: 61705611,
+        type: 'text',
+        text: '456',
+      },
+      {
+        ds_bebcb2d5: {
+          61705611: {
+            name: '文本',
+            keys: ['text'],
+          },
+        },
+      },
+    );
+
+    expect(node.text).toBe('123');
+  });
+
+  test('compile with source id', () => {
+    const node = util.compiledNode(
+      (_str: string) => '123',
+      {
+        id: 61705611,
+        type: 'text',
+        text: '456',
+      },
+      {
+        ds_bebcb2d5: {
+          61705611: {
+            name: '文本',
+            keys: ['text'],
+          },
+        },
+      },
+      'ds_bebcb2d5',
+    );
+
+    expect(node.text).toBe('123');
+  });
+
+  test('compile error', () => {
+    const node = util.compiledNode(
+      (_str: string) => {
+        throw new Error('error');
+      },
+      {
+        id: 61705611,
+        type: 'text',
+        text: '456',
+      },
+      {
+        ds_bebcb2d5: {
+          61705611: {
+            name: '文本',
+            keys: ['text'],
+          },
+        },
+      },
+    );
+
+    expect(node.text).toBe('');
+  });
+});

playground/package.json

@@ -31,7 +31,7 @@
     "@babel/preset-env": "^7.21.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-legacy": "^4.0.3",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.37",
@@ -40,7 +40,7 @@
     "typescript": "^5.0.4",
     "unplugin-auto-import": "^0.12.0",
     "unplugin-vue-components": "^0.22.11",
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
     "vue-tsc": "^1.2.0"
   }
 }

playground/src/configs/dsl.ts

@@ -208,7 +208,7 @@ export default {
             fontWeight: '',
           },
           name: '按钮',
-          text: '打开弹窗',
+          text: '{{ds_b64c92b5.text}}',
           multiple: true,
           events: [
             {
@@ -334,4 +334,29 @@ export default {
       ],
     },
   ],
+  dataSources: [
+    {
+      id: 'ds_b64c92b5',
+      type: 'base',
+      title: 'button',
+      description: '按钮',
+      fields: [
+        {
+          type: 'string',
+          name: 'text',
+          title: '按钮文案',
+          description: '',
+          defaultValue: '打开弹窗',
+        },
+      ],
+    },
+  ],
+  dataSourceDeps: {
+    ds_b64c92b5: {
+      button_430: {
+        name: '按钮',
+        keys: ['text'],
+      },
+    },
+  },
 };

playground/vite.config.ts

@@ -58,6 +58,8 @@ export default defineConfig({
       { find: /^@tmagic\/stage/, replacement: path.join(__dirname, '../packages/stage/src/index.ts') },
       { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../packages/utils/src/index.ts') },
       { find: /^@tmagic\/design/, replacement: path.join(__dirname, '../packages/design/src/index.ts') },
+      { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../packages/data-source/src/index.ts') },
+      { find: /^@data-source/, replacement: path.join(__dirname, '../packages/data-source/src') },
       {
         find: /^@tmagic\/element-plus-adapter/,
         replacement: path.join(__dirname, '../packages/element-plus-adapter/src/index.ts'),

runtime/react/dev.vite.config.ts

@@ -31,6 +31,8 @@ export default defineConfig({
       { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
       { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
+      { find: /^@data-source/, replacement: path.join(__dirname, '../../packages/data-source/src') },
+      { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../../packages/data-source/src/index.ts') },
     ],
   },
 

runtime/react/package.json

@@ -28,6 +28,7 @@
     "@tmagic/stage": "1.2.15",
     "@tmagic/utils": "1.2.15",
     "axios": "^0.25.0",
+    "lodash-es": "^4.17.21",
     "terser": "^5.14.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -38,9 +39,10 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.4",
+    "@types/lodash-es": "^4.17.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
-    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-legacy": "^4.0.3",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "recast": "^0.20.4",
     "typescript": "^5.0.4",

runtime/react/page/App.tsx

@@ -16,22 +16,32 @@
  * limitations under the License.
  */
 
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
+import { cloneDeep } from 'lodash-es';
 
 import Core from '@tmagic/core';
-import type { MPage } from '@tmagic/schema';
+import type { MNode } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
+import { replaceChildNode } from '@tmagic/utils';
 
 function App() {
   const app = useContext<Core | undefined>(AppContent);
 
-  if (!app?.page?.data) {
+  if (!app?.page) return null;
-    return null;
+
-  }
+  const [config, setConfig] = useState(app.page.data);
+
+  app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string) => {
+    nodes.forEach((node) => {
+      const newNode = app.compiledNode(node, app.dataSourceManager?.data || {}, sourceId);
+      replaceChildNode(newNode, [config]);
+      setConfig(cloneDeep(config));
+    });
+  });
 
   const MagicUiPage = app.resolveComponent('page');
 
-  return <MagicUiPage config={app?.page?.data as MPage}></MagicUiPage>;
+  return <MagicUiPage config={config}></MagicUiPage>;
 }
 
 export default App;

runtime/react/playground/main.tsx

@@ -18,11 +18,13 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { cloneDeep } from 'lodash-es';
 
 import Core from '@tmagic/core';
 import type { MApp } from '@tmagic/schema';
 import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
 import { AppContent } from '@tmagic/ui-react';
+import { replaceChildNode } from '@tmagic/utils';
 
 import components from '../.tmagic/comp-entry';
 import plugins from '../.tmagic/plugin-entry';
@@ -75,12 +77,10 @@ const operations = {
   },
 
   updateRootConfig(root: MApp) {
-    console.log('update root config', root);
     app?.setConfig(root);
   },
 
   updatePageId(id: string) {
-    console.log('update page id', id);
     curPageId = id;
     app?.setPage(curPageId);
     renderDom();
@@ -91,7 +91,6 @@ const operations = {
   },
 
   select(id: string) {
-    console.log('select config', id);
     const el = document.getElementById(id);
     if (el) return el;
     // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
@@ -103,22 +102,19 @@ const operations = {
   },
 
   add({ root }: UpdateData) {
-    console.log('add config', root);
     updateConfig(root);
   },
 
-  update({ root }: UpdateData) {
+  update({ config, root }: UpdateData) {
-    console.log('update config', root);
+    replaceChildNode(app.compiledNode(config, app.dataSourceManager?.data || {}), root.items);
-    updateConfig(root);
+    updateConfig(cloneDeep(root));
   },
 
   sortNode({ root }: SortEventData) {
-    console.log('sort config', root);
     root && updateConfig(root);
   },
 
   remove({ root }: RemoveData) {
-    console.log('remove config', root);
     updateConfig(root);
   },
 };

runtime/vue2/dev.vite.config.ts

@@ -29,6 +29,8 @@ export default defineConfig({
       { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
       { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
+      { find: /^@data-source/, replacement: path.join(__dirname, '../../packages/data-source/src') },
+      { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../../packages/data-source/src/index.ts') },
       { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
     ],
   },

runtime/vue2/package.json

@@ -39,8 +39,8 @@
     "rollup": "^2.25.0",
     "rollup-plugin-external-globals": "^0.6.1",
     "sass": "^1.35.1",
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
-    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-legacy": "^4.0.3",
     "@vitejs/plugin-vue2": "^2.2.0",
     "vue-template-compiler": "^2.7.4"
   }

runtime/vue2/page/App.vue

@@ -6,6 +6,8 @@
 import { defineComponent, inject, reactive } from 'vue';
 
 import Core from '@tmagic/core';
+import { MNode } from '@tmagic/schema';
+import { replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
@@ -14,6 +16,13 @@ export default defineComponent({
     const app = inject<Core | undefined>('app');
     const pageConfig = reactive(app?.page?.data || {});
 
+    app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string) => {
+      nodes.forEach((node) => {
+        const newNode = app.compiledNode(node, app.dataSourceManager?.data || {}, sourceId);
+        replaceChildNode(reactive(newNode), [pageConfig as MNode]);
+      });
+    });
+
     return {
       pageConfig,
     };

runtime/vue2/playground/App.vue

@@ -8,7 +8,7 @@ import { computed, defineComponent, inject, nextTick, reactive, ref, watch } fro
 import Core from '@tmagic/core';
 import type { Id, MApp, MNode } from '@tmagic/schema';
 import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
-import { getNodePath } from '@tmagic/utils';
+import { getNodePath, replaceChildNode } from '@tmagic/utils';
 
 declare global {
   interface Window {
@@ -41,19 +41,16 @@ export default defineComponent({
       },
 
       updateRootConfig(config: MApp) {
-        console.log('update config', config);
         root.value = config;
         app?.setConfig(config, curPageId.value);
       },
 
       updatePageId(id: Id) {
-        console.log('update page id', id);
         curPageId.value = id;
         app?.setPage(id);
       },
 
       select(id: Id) {
-        console.log('select config', id);
         selectedId.value = id;
 
         if (app?.getPage(id)) {
@@ -67,8 +64,6 @@ export default defineComponent({
       },
 
       add({ config, parentId }: UpdateData) {
-        console.log('add config', config);
-
         if (!root.value) throw new Error('error');
         if (!selectedId.value) throw new Error('error');
         if (!parentId) throw new Error('error');
@@ -91,24 +86,15 @@ export default defineComponent({
       },
 
       update({ config, parentId }: UpdateData) {
-        console.log('update config', config);
+        if (!root.value || !app) throw new Error('error');
 
-        if (!root.value) throw new Error('error');
+        const newNode = app.compiledNode(config, app.dataSourceManager?.data || {});
+        replaceChildNode(reactive(newNode), [root.value], parentId);
 
-        const node = getNodePath(config.id, [root.value]).pop();
+        const nodeInstance = app.page?.getNode(config.id);
-        if (!node) throw new Error('未找到目标节点');
-
-        if (!parentId) throw new Error('error');
-        const parent = getNodePath(parentId, [root.value]).pop();
-        if (!parent) throw new Error('未找到父节点');
-
-        const nodeInstance = app?.page?.getNode(config.id);
         if (nodeInstance) {
           nodeInstance.setData(config);
         }
-
-        const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
-        parent.items.splice(index, 1, reactive(config));
       },
 
       remove({ id, parentId }: RemoveData) {

runtime/vue3/dev.vite.config.ts

@@ -30,6 +30,8 @@ export default defineConfig({
       { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js') },
       { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
+      { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../../packages/data-source/src/index.ts') },
+      { find: /^@data-source/, replacement: path.join(__dirname, '../../packages/data-source/src') },
       { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
     ],
   },

runtime/vue3/package.json

@@ -33,7 +33,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.21.4",
     "@types/node": "^15.12.4",
-    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-legacy": "^4.0.3",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.37",
@@ -44,7 +44,7 @@
     "sass": "^1.35.1",
     "terser": "^5.14.2",
     "typescript": "^4.3.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.8",
     "vue-tsc": "^1.2.0"
   }
 }

runtime/vue3/page/App.vue

@@ -6,6 +6,8 @@
 import { defineComponent, inject, reactive } from 'vue';
 
 import Core from '@tmagic/core';
+import { MNode } from '@tmagic/schema';
+import { replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
@@ -14,6 +16,13 @@ export default defineComponent({
     const app = inject<Core | undefined>('app');
     const pageConfig = reactive(app?.page?.data || {});
 
+    app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string) => {
+      nodes.forEach((node) => {
+        const newNode = app.compiledNode(node, app.dataSourceManager?.data || {}, sourceId);
+        replaceChildNode(reactive(newNode), [pageConfig as MNode]);
+      });
+    });
+
     return {
       pageConfig,
     };

runtime/vue3/playground/App.vue

@@ -2,13 +2,13 @@
   <magic-ui-page v-if="pageConfig" :key="pageConfig.id" :config="pageConfig"></magic-ui-page>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, inject, nextTick, reactive, ref, watch } from 'vue';
+import { computed, inject, nextTick, reactive, ref, watch } from 'vue';
 
 import Core from '@tmagic/core';
 import type { Id, MApp, MNode } from '@tmagic/schema';
 import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
-import { getNodePath } from '@tmagic/utils';
+import { getNodePath, replaceChildNode } from '@tmagic/utils';
 
 declare global {
   interface Window {
@@ -16,123 +16,101 @@ declare global {
   }
 }
 
-export default defineComponent({
+const app = inject<Core | undefined>('app');
-  setup() {
-    const app = inject<Core | undefined>('app');
 
-    const root = ref<MApp>();
+const root = ref<MApp>();
-    const curPageId = ref<Id>();
+const curPageId = ref<Id>();
-    const selectedId = ref<Id>();
+const selectedId = ref<Id>();
 
-    const pageConfig = computed(
+const pageConfig = computed(
-      () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
+  () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
-    );
+);
 
-    watch(pageConfig, async () => {
+watch(pageConfig, async () => {
-      await nextTick();
+  await nextTick();
-      const page = document.querySelector<HTMLElement>('.magic-ui-page');
+  const page = document.querySelector<HTMLElement>('.magic-ui-page');
-      page && window.magic.onPageElUpdate(page);
+  page && window.magic.onPageElUpdate(page);
-    });
+});
 
-    window.magic?.onRuntimeReady({
+window.magic?.onRuntimeReady({
-      getApp() {
+  getApp() {
-        return app;
+    return app;
-      },
+  },
 
-      updateRootConfig(config: MApp) {
+  updateRootConfig(config: MApp) {
-        console.log('update config', config);
+    root.value = config;
-        root.value = config;
+    app?.setConfig(config, curPageId.value);
-        app?.setConfig(config, curPageId.value);
+  },
-      },
 
-      updatePageId(id: Id) {
+  updatePageId(id: Id) {
-        console.log('update page id', id);
+    curPageId.value = id;
-        curPageId.value = id;
+    app?.setPage(id);
-        app?.setPage(id);
+  },
-      },
 
-      select(id: Id) {
+  select(id: Id) {
-        console.log('select config', id);
+    selectedId.value = id;
-        selectedId.value = id;
 
-        if (app?.getPage(id)) {
+    if (app?.getPage(id)) {
-          this.updatePageId?.(id);
+      this.updatePageId?.(id);
-        }
+    }
 
-        const el = document.getElementById(`${id}`);
+    const el = document.getElementById(`${id}`);
-        if (el) return el;
+    if (el) return el;
-        // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
+    // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-        return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
+    return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
-      },
+  },
 
-      add({ config, parentId }: UpdateData) {
+  add({ config, parentId }: UpdateData) {
-        console.log('add config', config);
+    if (!root.value) throw new Error('error');
+    if (!selectedId.value) throw new Error('error');
+    if (!parentId) throw new Error('error');
 
-        if (!root.value) throw new Error('error');
+    const parent = getNodePath(parentId, [root.value]).pop();
-        if (!selectedId.value) throw new Error('error');
+    if (!parent) throw new Error('未找到父节点');
-        if (!parentId) throw new Error('error');
 
-        const parent = getNodePath(parentId, [root.value]).pop();
+    if (config.type !== 'page') {
-        if (!parent) throw new Error('未找到父节点');
+      const parentNode = app?.page?.getNode(parent.id);
+      parentNode && app?.page?.initNode(config, parentNode);
+    }
 
-        if (config.type !== 'page') {
+    if (parent.id !== selectedId.value) {
-          const parentNode = app?.page?.getNode(parent.id);
+      const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
-          parentNode && app?.page?.initNode(config, parentNode);
+      parent.items?.splice(index + 1, 0, config);
-        }
+    } else {
+      // 新增节点添加到配置中
+      parent.items?.push(config);
+    }
+  },
 
-        if (parent.id !== selectedId.value) {
+  update({ config, parentId }: UpdateData) {
-          const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
+    if (!root.value || !app) throw new Error('error');
-          parent.items?.splice(index + 1, 0, config);
-        } else {
-          // 新增节点添加到配置中
-          parent.items?.push(config);
-        }
-      },
 
-      update({ config, parentId }: UpdateData) {
+    const newNode = app.compiledNode(config, app.dataSourceManager?.data || {});
-        console.log('update config', config);
+    replaceChildNode(reactive(newNode), [root.value], parentId);
 
-        if (!root.value) throw new Error('error');
+    const nodeInstance = app.page?.getNode(config.id);
-        const node = getNodePath(config.id, [root.value]).pop();
+    if (nodeInstance) {
+      nodeInstance.setData(config);
+    }
+  },
 
-        if (!parentId) throw new Error('error');
+  remove({ id, parentId }: RemoveData) {
-        const parent = getNodePath(parentId, [root.value]).pop();
+    if (!root.value) throw new Error('error');
 
-        if (!node) throw new Error('未找到目标节点');
+    const node = getNodePath(id, [root.value]).pop();
-        if (!parent) throw new Error('未找到父节点');
+    if (!node) throw new Error('未找到目标元素');
 
-        const nodeInstance = app?.page?.getNode(config.id);
+    const parent = getNodePath(parentId, [root.value]).pop();
-        if (nodeInstance) {
+    if (!parent) throw new Error('未找到父元素');
-          nodeInstance.setData(config);
-        }
 
-        const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
+    if (node.type === 'page') {
-        parent.items.splice(index, 1, reactive(config));
+      app?.deletePage();
-      },
+    } else {
+      app?.page?.deleteNode(node.id);
+    }
 
-      remove({ id, parentId }: RemoveData) {
+    const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
-        if (!root.value) throw new Error('error');
+    parent.items.splice(index, 1);
-
-        const node = getNodePath(id, [root.value]).pop();
-        if (!node) throw new Error('未找到目标元素');
-
-        const parent = getNodePath(parentId, [root.value]).pop();
-        if (!parent) throw new Error('未找到父元素');
-
-        if (node.type === 'page') {
-          app?.deletePage();
-        } else {
-          app?.page?.deleteNode(node.id);
-        }
-
-        const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
-        parent.items.splice(index, 1);
-      },
-    });
-
-    return {
-      pageConfig,
-    };
   },
 });
 </script>

tsconfig.json

@@ -20,6 +20,8 @@
       // 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
       "@tmagic/*": ["packages/*/src"],
       "@editor/*": ["packages/editor/src/*"],
+      "@form/*": ["packages/form/src/*"],
+      "@data-source/*": ["packages/data-source/src/*"],
     },
     "types": [
       "node",

vitest.config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
       './packages/form/tests/unit/utils/**',
       './packages/stage/tests/**',
       './packages/utils/tests/**',
+      './packages/data-source/tests/**',
     ],
     environment: 'jsdom',
   },
@@ -29,11 +30,13 @@ export default defineConfig({
     alias: {
       '@editor': r('./packages/editor/src'),
       '@form': r('./packages/form/src'),
+      '@data-source': r('./packages/data-source/src'),
       '@tmagic/core': r('./packages/core/src'),
       '@tmagic/utils': r('./packages/utils/src'),
       '@tmagic/editor': r('./packages/editor/src'),
       '@tmagic/stage': r('./packages/stage/src'),
       '@tmagic/schema': r('./packages/schema/src'),
+      '@tmagic/data-source': r('./packages/data-source/src'),
     },
   },
 });