diff --git a/packages/vision-polyfill/package.json b/packages/vision-polyfill/package.json
index 569c60e6d..c3622c862 100644
--- a/packages/vision-polyfill/package.json
+++ b/packages/vision-polyfill/package.json
@@ -21,6 +21,7 @@
     "@ali/lowcode-plugin-undo-redo": "^0.8.6",
     "@ali/lowcode-plugin-zh-en": "^0.8.8",
     "@ali/lowcode-setters": "^0.8.8",
+    "@ali/ve-datapool-pane": "^6.4.3",
     "@ali/ve-i18n-util": "^2.0.2",
     "@ali/ve-icons": "^4.1.9",
     "@ali/ve-less-variables": "2.0.3",
@@ -28,6 +29,7 @@
     "@ali/ve-trunk-pane": "^5.1.0-beta.14",
     "@ali/ve-utils": "^1.1.0",
     "@ali/vu-css-style": "^1.1.3",
+    "@ali/vu-legao-design-fetch-context": "^1.0.3",
     "@ali/vu-logger": "^1.0.7",
     "@ali/vu-style-sheet": "^2.4.0",
     "@alifd/next": "^1.19.12",
@@ -45,6 +47,6 @@
     "build-plugin-moment-locales": "^0.1.0",
     "build-plugin-react-app": "^1.1.2",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "monaco-editor-webpack-plugin":"^1.9.0"
+    "monaco-editor-webpack-plugin": "^1.9.0"
   }
 }
diff --git a/packages/vision-polyfill/src/demo/index.ts b/packages/vision-polyfill/src/demo/index.ts
index d6410841d..15bb6f45f 100644
--- a/packages/vision-polyfill/src/demo/index.ts
+++ b/packages/vision-polyfill/src/demo/index.ts
@@ -3,6 +3,8 @@ import { createElement } from 'react';
 import { Button } from '@alifd/next';
 import Engine, { Panes } from '@ali/visualengine';
 import getTrunkPane from '@ali/ve-trunk-pane';
+import datapoolPane from '@ali/ve-datapool-pane';
+import fetchContext from '@ali/vu-legao-design-fetch-context';
 import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import loadUrls from './loader';
 import { upgradeAssetsBundle } from './upgrade-assets';
@@ -93,6 +95,7 @@ skeleton.add({
 });
 
 initTrunkPane();
+initDataPoolPane();
 Engine.init();
 
 load();
@@ -105,6 +108,7 @@ async function load() {
 }
 
 const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore'];
+
 async function loadAssets() {
   const legaoAssets = await editor.utils.get('./legao-assets.json');
 
@@ -172,3 +176,65 @@ async function initTrunkPane() {
   const TrunkPane = getTrunkPane(config);
   Panes.add(TrunkPane);
 }
+
+// 数据源面板
+function initDataPoolPane() {
+  const dpConfigs = {};
+
+  if (!dpConfigs) {
+    return;
+  }
+
+  fetchContext.create('DataPoolPaneAPI', {
+    saveGlobalConfig: {
+      url: 'query/appConfig/saveGlobalConfig.json',
+      method: 'POST',
+    },
+    saveOrUpdateAppDataPool: {
+      url: 'query/appDataPool/saveOrUpdateAppDataPool.json',
+      method: 'POST',
+    },
+    batchSaveOrUpdateAppDataPool: {
+      url: 'query/appDataPool/batchSaveOrUpdateAppDataPool.json',
+      method: 'POST'
+    },
+    listAppDataPool: {
+      url: 'query/appDataPool/listAppDataPool.json',
+      method: 'GET',
+    },
+    getAppDataPool: {
+      url: 'query/appDataPool/getAppDataPool.json',
+      method: 'POST',
+    },
+    getEpaasApiInApp: {
+      url: 'query/formdesign/getEpaasApiInApp.jsonp',
+      method: 'GET',
+    },
+    getFormListOrder: {
+      url: 'query/formdesign/getFormListOrder.json',
+      method: 'GET',
+    },
+    // 实时修改 effectForm
+    operateAppDpBind: {
+      url: 'query/appDataPool/operateAppDpBind.json',
+      method: 'POST',
+    },
+    // 校验全局数据源是否被其他页面修改
+    checkAppDataPoolModified: {
+      url: 'query/appDataPool/checkAppDataPoolModified.json',
+      method: 'POST',
+    },
+  });
+
+  const props = {
+    enableGateService: true,
+    enableGlobalFitConfig: true,
+    enableOneAPIService: true,
+    formUuid: 'xxx',
+    api: fetchContext.api.DataPoolPaneAPI,
+  };
+
+  Panes.add(datapoolPane, {
+    props,
+  });
+}
diff --git a/packages/vision-polyfill/src/panes.ts b/packages/vision-polyfill/src/panes.ts
index 268bc2d75..aa60b5554 100644
--- a/packages/vision-polyfill/src/panes.ts
+++ b/packages/vision-polyfill/src/panes.ts
@@ -67,7 +67,18 @@ function upgradeConfig(config: OldPaneConfig): IWidgetBaseConfig & { area: strin
   if (type === 'dock') {
     newConfig.type = 'PanelDock';
     newConfig.area = 'left';
-    const { contents, hideTitleBar, tip, width, maxWidth, height, maxHeight, position, menu, isAction } = config;
+    newConfig.props.description = description || title;
+    const {
+      contents,
+      hideTitleBar,
+      tip,
+      width,
+      maxWidth,
+      height,
+      maxHeight,
+      menu,
+      isAction
+    } = config;
     if (menu) {
       newConfig.props.title = menu;
     }