feat: 新增数据源

2025-04-05 07:27:09 +08:00 · 2023-05-29 11:33:44 +08:00 · 2023-05-29 11:33:44 +08:00 · aac478eebc
commit aac478eebc
parent d0ec2fd588
94 changed files with 3601 additions and 765 deletions
--- a/.eslintrc.js
+++ b/.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.
--- a/.gitignore
+++ b/.gitignore
@ -29,3 +29,4 @@ coverage

 auto-imports.d.ts
 components.d.ts
+docs/.vitepress/cache/deps
--- a/docs/.vitepress/config.ts
+++ b/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' }
    ],
--- a/package.json
+++ b/package.json
@ -76,9 +76,9 @@
    "serialize-javascript": "^6.0.0",
    "shx": "^0.3.4",
    "typescript": "^5.0.4",
-    "vite": "^4.2.1",
-    "vitepress": "1.0.0-alpha.29",
-    "vitest": "^0.30.0",
+    "vite": "^4.3.8",
+    "vitepress": "1.0.0-beta.1",
+    "vitest": "^0.31.1",
    "vue": "^3.2.37"
  },
  "config": {
--- a/packages/cli/package.json
+++ b/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"
--- a/packages/core/package.json
+++ b/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"
  },
--- a/packages/core/src/App.ts
+++ b/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;
-      if (!pageId && options.config.items.length) {
-        pageId = options.config.items[0].id;
-      }
-      this.setConfig(options.config, pageId);
+      this.setConfig(options.config, options.curPage, options.request);
    }

    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);
--- a/packages/core/src/index.ts
+++ b/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;
--- a/packages/core/vite.config.ts
+++ b/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: {
--- a/packages/data-source/.npmignore
+++ b/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?
--- a/packages/data-source/package.json
+++ b/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"
+  }
+}
--- a/packages/data-source/src/DataSourceManager.ts
+++ b/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;
--- a/packages/data-source/src/createDataSourceManager.ts
+++ b/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;
+};
--- a/packages/data-source/src/data-sources/Base.ts
+++ b/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();
+  }
+}
--- a/packages/data-source/src/data-sources/Http.ts
+++ b/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',
+    });
+  }
+}
--- a/packages/data-source/src/data-sources/index.ts
+++ b/packages/data-source/src/data-sources/index.ts
@ -0,0 +1,2 @@
+export { default as DataSource } from './Base';
+export { default as HttpDataSource } from './Http';
--- a/packages/data-source/src/index.ts
+++ b/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';
--- a/packages/data-source/src/types.ts
+++ b/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>;
+}
--- a/packages/data-source/src/util.ts
+++ b/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;
+};
--- a/packages/data-source/tests/DataSource.spec.ts
+++ b/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();
+  });
+});
--- a/packages/data-source/tests/DataSourceMenager.spec.ts
+++ b/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();
+  });
+});
--- a/packages/data-source/tests/createDataSourceManager.spec.ts
+++ b/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);
+  });
+});
--- a/packages/data-source/tests/utils.spec.ts
+++ b/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');
+  });
+});
--- a/packages/data-source/tsconfig.build.json
+++ b/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"
+	],
+}
--- a/packages/data-source/tsconfig.json
+++ b/packages/data-source/tsconfig.json
@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../..",
+  },
+}
--- a/packages/data-source/vite.config.ts
+++ b/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));
+      },
+    },
+  },
+});
--- a/packages/design/package.json
+++ b/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"
  }
--- a/packages/design/src/Autocomplete.vue
+++ b/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>
--- a/packages/design/src/defaultAdapter.ts
+++ b/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,
--- a/packages/design/src/index.ts
+++ b/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';
--- a/packages/editor/package.json
+++ b/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"
  }
--- a/packages/editor/src/Editor.vue
+++ b/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);
--- a/packages/editor/src/components/CodeDraftEditor.vue
+++ b/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>
--- a/packages/editor/src/editorProps.ts
+++ b/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<
--- a/packages/editor/src/fields/DataSourceFields.vue
+++ b/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>
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/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>
--- a/packages/editor/src/fields/KeyValue.vue
+++ b/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>
--- a/packages/editor/src/index.ts
+++ b/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);
  },
 };
--- a/packages/editor/src/initService.ts
+++ b/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);
  });
 };
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/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;
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
+++ b/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>
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/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>
--- a/packages/editor/src/services/codeBlock.ts
+++ b/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);
  }

--- a/packages/editor/src/services/dataSource.ts
+++ b/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();
--- a/packages/editor/src/services/dep.ts
+++ b/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}`);
--- a/packages/editor/src/theme/data-source-fields.scss
+++ b/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;
+  }
+}
--- a/packages/editor/src/theme/data-source.scss
+++ b/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;
+      }
+    }
+  }
+}
--- a/packages/editor/src/theme/key-value.scss
+++ b/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;
+}
--- a/packages/editor/src/theme/theme.scss
+++ b/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";
--- a/packages/editor/src/type.ts
+++ b/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 {
--- a/packages/editor/src/utils/data-source/formConfigs/base.ts
+++ b/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;
--- a/packages/editor/src/utils/data-source/formConfigs/http.ts
+++ b/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;
--- a/packages/editor/src/utils/data-source/index.ts
+++ b/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] || []);
+  }
+};
--- a/packages/editor/src/utils/dep.ts
+++ b/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}`),
+  });
--- a/packages/element-plus-adapter/src/index.ts
+++ b/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,
--- a/packages/form/package.json
+++ b/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"
  }
--- a/packages/form/src/fields/Select.vue
+++ b/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(
-    totalKey.split('.').reduce((accumulator, currentValue: any) => accumulator[currentValue], res),
-    10,
-  );
+  const resTotal = globalThis.parseInt(getValueByKeyPath(totalKey, res), 10);
  if (resTotal > 0) {
    total.value = resTotal;
  }
@ -283,9 +281,7 @@ const getInitOption = async () => {
    });
  }

-  let initData = (initRoot || root)
-    .split('.')
-    .reduce((accumulator, currentValue: any) => accumulator[currentValue], res);
+  let initData = getValueByKeyPath(initRoot || root, res);
  if (initData) {
    if (!Array.isArray(initData)) {
      initData = [initData];
--- a/packages/form/tests/unit/fields/Time.spec.ts
+++ b/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');
  });
 });
--- a/packages/schema/src/index.ts
+++ b/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[];
+  };
+}
--- a/packages/table/package.json
+++ b/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"
  }
--- a/packages/ui-react/src/button/formConfig.ts
+++ b/packages/ui-react/src/button/formConfig.ts
@ -20,6 +20,7 @@ export default [
  {
    name: 'text',
    text: '文本',
+    type: 'data-source-input',
  },
  {
    name: 'multiple',
--- a/packages/ui-react/src/img/formConfig.ts
+++ b/packages/ui-react/src/img/formConfig.ts
@ -24,5 +24,6 @@ export default [
  {
    text: '链接',
    name: 'url',
+    type: 'data-source-input',
  },
 ];
--- a/packages/ui-react/src/qrcode/formConfig.ts
+++ b/packages/ui-react/src/qrcode/formConfig.ts
@ -20,5 +20,6 @@ export default [
  {
    text: '链接',
    name: 'url',
+    type: 'data-source-input',
  },
 ];
--- a/packages/ui-react/src/text/Text.tsx
+++ b/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 || ''}`}>
-      {displayText}
+    <div className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
+      {config.text}
    </div>
  );
 };
--- a/packages/ui-react/src/text/formConfig.ts
+++ b/packages/ui-react/src/text/formConfig.ts
@ -20,6 +20,7 @@ export default [
  {
    name: 'text',
    text: '文本',
+    type: 'data-source-input',
  },
  {
    name: 'multiple',
--- a/packages/ui-vue2/package.json
+++ b/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"
  }
 }
--- a/packages/ui-vue2/src/button/formConfig.ts
+++ b/packages/ui-vue2/src/button/formConfig.ts
@ -20,5 +20,6 @@ export default [
  {
    text: '文本',
    name: 'text',
+    type: 'data-source-input',
  },
 ];
--- a/packages/ui-vue2/src/img/src/formConfig.ts
+++ b/packages/ui-vue2/src/img/src/formConfig.ts
@ -24,5 +24,6 @@ export default [
  {
    text: '链接',
    name: 'url',
+    type: 'data-source-input',
  },
 ];
--- a/packages/ui-vue2/src/qrcode/src/formConfig.ts
+++ b/packages/ui-vue2/src/qrcode/src/formConfig.ts
@ -20,5 +20,6 @@ export default [
  {
    text: '链接',
    name: 'url',
+    type: 'data-source-input',
  },
 ];
--- a/packages/ui-vue2/src/text/formConfig.ts
+++ b/packages/ui-vue2/src/text/formConfig.ts
@ -20,6 +20,7 @@ export default [
  {
    name: 'text',
    text: '文本',
+    type: 'data-source-input',
  },
  {
    name: 'multiple',
--- a/packages/ui/src/button/src/formConfig.ts
+++ b/packages/ui/src/button/src/formConfig.ts
@ -20,5 +20,6 @@ export default [
  {
    text: '文本',
    name: 'text',
+    type: 'data-source-input',
  },
 ];
--- a/packages/ui/src/img/src/formConfig.ts
+++ b/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',
  },
 ];
--- a/packages/ui/src/qrcode/src/formConfig.ts
+++ b/packages/ui/src/qrcode/src/formConfig.ts
@ -20,5 +20,6 @@ export default [
  {
    text: '链接',
    name: 'url',
+    type: 'data-source-input',
  },
 ];
--- a/packages/ui/src/text/src/formConfig.ts
+++ b/packages/ui/src/text/src/formConfig.ts
@ -20,6 +20,7 @@ export default [
  {
    name: 'text',
    text: '文本',
+    type: 'data-source-input',
  },
  {
    name: 'multiple',
--- a/packages/utils/src/index.ts
+++ b/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;
+};
--- a/packages/utils/tests/unit/index.spec.ts
+++ b/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('');
+  });
+});
--- a/playground/package.json
+++ b/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"
  }
 }
--- a/playground/src/configs/dsl.ts
+++ b/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'],
+      },
+    },
+  },
 };
--- a/playground/vite.config.ts
+++ b/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'),
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/runtime/react/dev.vite.config.ts
+++ b/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') },
    ],
  },

--- a/runtime/react/package.json
+++ b/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",
--- a/runtime/react/page/App.tsx
+++ b/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) {
-    return null;
-  }
+  if (!app?.page) 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;
--- a/runtime/react/playground/main.tsx
+++ b/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) {
-    console.log('update config', root);
-    updateConfig(root);
+  update({ config, root }: UpdateData) {
+    replaceChildNode(app.compiledNode(config, app.dataSourceManager?.data || {}), root.items);
+    updateConfig(cloneDeep(root));
  },

  sortNode({ root }: SortEventData) {
-    console.log('sort config', root);
    root && updateConfig(root);
  },

  remove({ root }: RemoveData) {
-    console.log('remove config', root);
    updateConfig(root);
  },
 };
--- a/runtime/vue2/dev.vite.config.ts
+++ b/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') },
    ],
  },
--- a/runtime/vue2/package.json
+++ b/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",
-    "@vitejs/plugin-legacy": "^4.0.2",
+    "vite": "^4.3.8",
+    "@vitejs/plugin-legacy": "^4.0.3",
    "@vitejs/plugin-vue2": "^2.2.0",
    "vue-template-compiler": "^2.7.4"
  }
--- a/runtime/vue2/page/App.vue
+++ b/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,
    };
--- a/runtime/vue2/playground/App.vue
+++ b/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();
-        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);
+        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) {
--- a/runtime/vue3/dev.vite.config.ts
+++ b/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') },
    ],
  },
--- a/runtime/vue3/package.json
+++ b/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"
  }
 }
--- a/runtime/vue3/page/App.vue
+++ b/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,
    };
--- a/runtime/vue3/playground/App.vue
+++ b/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">
-import { computed, defineComponent, inject, nextTick, reactive, ref, watch } from 'vue';
+<script lang="ts" setup>
+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({
-  setup() {
-    const app = inject<Core | undefined>('app');
+const app = inject<Core | undefined>('app');

-    const root = ref<MApp>();
-    const curPageId = ref<Id>();
-    const selectedId = ref<Id>();
+const root = ref<MApp>();
+const curPageId = ref<Id>();
+const selectedId = ref<Id>();

-    const pageConfig = computed(
-      () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
-    );
+const pageConfig = computed(
+  () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
+);

-    watch(pageConfig, async () => {
-      await nextTick();
-      const page = document.querySelector<HTMLElement>('.magic-ui-page');
-      page && window.magic.onPageElUpdate(page);
-    });
+watch(pageConfig, async () => {
+  await nextTick();
+  const page = document.querySelector<HTMLElement>('.magic-ui-page');
+  page && window.magic.onPageElUpdate(page);
+});

-    window.magic?.onRuntimeReady({
-      getApp() {
-        return app;
-      },
+window.magic?.onRuntimeReady({
+  getApp() {
+    return app;
+  },

-      updateRootConfig(config: MApp) {
-        console.log('update config', config);
-        root.value = config;
-        app?.setConfig(config, curPageId.value);
-      },
+  updateRootConfig(config: MApp) {
+    root.value = config;
+    app?.setConfig(config, curPageId.value);
+  },

-      updatePageId(id: Id) {
-        console.log('update page id', id);
-        curPageId.value = id;
-        app?.setPage(id);
-      },
+  updatePageId(id: Id) {
+    curPageId.value = id;
+    app?.setPage(id);
+  },

-      select(id: Id) {
-        console.log('select config', id);
-        selectedId.value = id;
+  select(id: Id) {
+    selectedId.value = id;

-        if (app?.getPage(id)) {
-          this.updatePageId?.(id);
-        }
+    if (app?.getPage(id)) {
+      this.updatePageId?.(id);
+    }

-        const el = document.getElementById(`${id}`);
-        if (el) return el;
-        // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-        return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
-      },
+    const el = document.getElementById(`${id}`);
+    if (el) return el;
+    // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
+    return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
+  },

-      add({ config, parentId }: UpdateData) {
-        console.log('add config', config);
+  add({ config, parentId }: UpdateData) {
+    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');
-        if (!selectedId.value) throw new Error('error');
-        if (!parentId) throw new Error('error');
+    const parent = getNodePath(parentId, [root.value]).pop();
+    if (!parent) throw new Error('未找到父节点');

-        const parent = getNodePath(parentId, [root.value]).pop();
-        if (!parent) throw new Error('未找到父节点');
+    if (config.type !== 'page') {
+      const parentNode = app?.page?.getNode(parent.id);
+      parentNode && app?.page?.initNode(config, parentNode);
+    }

-        if (config.type !== 'page') {
-          const parentNode = app?.page?.getNode(parent.id);
-          parentNode && app?.page?.initNode(config, parentNode);
-        }
+    if (parent.id !== selectedId.value) {
+      const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
+      parent.items?.splice(index + 1, 0, config);
+    } else {
+      // 新增节点添加到配置中
+      parent.items?.push(config);
+    }
+  },

-        if (parent.id !== selectedId.value) {
-          const index = parent.items?.findIndex((child: MNode) => child.id === selectedId.value);
-          parent.items?.splice(index + 1, 0, config);
-        } else {
-          // 新增节点添加到配置中
-          parent.items?.push(config);
-        }
-      },
+  update({ config, parentId }: UpdateData) {
+    if (!root.value || !app) throw new Error('error');

-      update({ config, parentId }: UpdateData) {
-        console.log('update config', config);
+    const newNode = app.compiledNode(config, app.dataSourceManager?.data || {});
+    replaceChildNode(reactive(newNode), [root.value], parentId);

-        if (!root.value) throw new Error('error');
-        const node = getNodePath(config.id, [root.value]).pop();
+    const nodeInstance = app.page?.getNode(config.id);
+    if (nodeInstance) {
+      nodeInstance.setData(config);
+    }
+  },

-        if (!parentId) throw new Error('error');
-        const parent = getNodePath(parentId, [root.value]).pop();
+  remove({ id, parentId }: RemoveData) {
+    if (!root.value) throw new Error('error');

-        if (!node) throw new Error('未找到目标节点');
-        if (!parent) throw new Error('未找到父节点');
+    const node = getNodePath(id, [root.value]).pop();
+    if (!node) throw new Error('未找到目标元素');

-        const nodeInstance = app?.page?.getNode(config.id);
-        if (nodeInstance) {
-          nodeInstance.setData(config);
-        }
+    const parent = getNodePath(parentId, [root.value]).pop();
+    if (!parent) throw new Error('未找到父元素');

-        const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
-        parent.items.splice(index, 1, reactive(config));
-      },
+    if (node.type === 'page') {
+      app?.deletePage();
+    } else {
+      app?.page?.deleteNode(node.id);
+    }

-      remove({ id, parentId }: RemoveData) {
-        if (!root.value) throw new Error('error');
-
-        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,
-    };
+    const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
+    parent.items.splice(index, 1);
  },
 });
 </script>
--- a/tsconfig.json
+++ b/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",
--- a/vitest.config.ts
+++ b/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'),
    },
  },
 });