diff --git a/frontend/src/api/system/datasource.js b/frontend/src/api/system/datasource.js
index a8deddbff8..ab1d5632d7 100644
--- a/frontend/src/api/system/datasource.js
+++ b/frontend/src/api/system/datasource.js
@@ -8,7 +8,13 @@ export function dsGrid(pageIndex, pageSize, data) {
     data
   })
 }
-
+export function listDatasource() {
+  return request({
+    url: '/datasource/list',
+    loading: true,
+    method: 'get'
+  })
+}
 export function addDs(data) {
   return request({
     url: 'datasource/add/',
@@ -40,4 +46,4 @@ export function validateDs(data) {
   })
 }
 
-export default { dsGrid, addDs, editDs, delDs, validateDs }
+export default { dsGrid, addDs, editDs, delDs, validateDs, listDatasource }
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 1349a155ad..906dbb0188 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -846,6 +846,8 @@ export default {
   },
   datasource: {
     datasource: 'Data Source',
+    please_select_left: 'Please select the data source from the left',
+    show_info: 'Data Source Info',
     create: 'Create Data Source',
     type: 'Type',
     please_choose_type: 'Please select data source type',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index ba0583b0d1..cf95db7d2d 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -846,6 +846,8 @@ export default {
   },
   datasource: {
     datasource: '數據源',
+    please_select_left: '請從左側選擇數據源',
+    show_info: '數據源信息',
     create: '新建數據源',
     type: '類型',
     please_choose_type: '請選擇數據源類型',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 11b1923e91..8e7ee2d1dd 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -846,6 +846,8 @@ export default {
   },
   datasource: {
     datasource: '数据源',
+    please_select_left: '请从左侧选择数据源',
+    show_info: '数据源信息',
     create: '新建数据源',
     type: '类型',
     please_choose_type: '请选择数据源类型',
diff --git a/frontend/src/views/system/datasource/DataHome.vue b/frontend/src/views/system/datasource/DataHome.vue
new file mode 100644
index 0000000000..a24fb7af49
--- /dev/null
+++ b/frontend/src/views/system/datasource/DataHome.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-col style="height: 100%;">
+    <el-row style="height: 100%;" class="custom-position">
+      {{ $t('datasource.please_select_left') }}
+    </el-row>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'DataHome'
+}
+</script>
+
+<style scoped>
+  .custom-position {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    flex-flow: row nowrap;
+    color: #9ea6b2;
+  }
+</style>
diff --git a/frontend/src/views/system/datasource/DsMain.vue b/frontend/src/views/system/datasource/DsMain.vue
new file mode 100644
index 0000000000..bf6f188c75
--- /dev/null
+++ b/frontend/src/views/system/datasource/DsMain.vue
@@ -0,0 +1,95 @@
+<template>
+  <de-container>
+    <de-aside-container style="padding: 20px 10px 0;">
+      <ds-tree ref="dsTree" @switch-main="switchMain" />
+    </de-aside-container>
+    <de-main-container>
+      <component :is="component" v-if="!!component" :params="param" @refresh-left-tree="refreshTree" @switch-component="switchMain" />
+    </de-main-container>
+  </de-container>
+</template>
+
+<script>
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+import DsTree from './DsTree'
+import DsForm from './form'
+import DataHome from './DataHome'
+export default {
+  name: 'DsMain',
+  components: { DeMainContainer, DeContainer, DeAsideContainer, DsTree, DataHome },
+  data() {
+    return {
+      component: DataHome,
+      param: null
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+  mounted() {
+    // this.clear()
+  },
+  methods: {
+    // 切换main区内容
+    switchMain(param) {
+      const { component, componentParam } = param
+      this.component = DataHome
+      this.param = null
+      this.$nextTick(() => {
+        switch (component) {
+          case 'DsForm':
+            this.component = DsForm
+            this.param = componentParam
+            break
+          default:
+            this.component = DataHome
+            this.param = null
+            break
+        }
+      })
+    },
+    refreshTree() {
+      this.$refs.dsTree && this.$refs.dsTree.queryTreeDatas()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .ms-aside-container {
+    height: calc(100vh - 56px);
+    padding: 0px;
+    min-width: 260px;
+    max-width: 460px;
+  }
+  .ms-main-container {
+    height: calc(100vh - 56px);
+    padding: 0px;
+  }
+
+  /*.tab-panel>>>.is-stretch{*/
+  /*  min-width: 80% !important;*/
+  /*}*/
+  /*.tab-panel>>>.el-tabs__nav-scroll {*/
+  /*  overflow: hidden;*/
+  /*  text-align: center;*/
+  /*  display: flex;*/
+  /*  align-items: center;*/
+  /*  justify-content: center;*/
+  /*}*/
+  .tab-panel>>>.el-tabs__nav-wrap{
+    padding: 0 10px;
+  }
+  .tab-panel>>>.el-tabs__nav-wrap::after {
+    height: 1px;
+  }
+  .tab-panel>>>.el-tabs__item{
+    /* width: 10px; */
+    padding: 0 10px;
+  }
+</style>
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
new file mode 100644
index 0000000000..085cacbca5
--- /dev/null
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -0,0 +1,207 @@
+<template>
+  <el-col style="padding: 0 5px 0 5px;">
+    <el-col>
+      <el-row>
+        <span class="header-title">
+          {{ $t('commons.datasource') }}
+          <el-button style="float: right;padding-right: 7px;margin-top: -8px" icon="el-icon-plus" type="text" @click="addFolder" />
+        </span>
+      </el-row>
+      <el-col class="custom-tree-container">
+        <div class="block">
+          <el-tree
+            ref="panel_list_tree"
+            :default-expanded-keys="expandedArray"
+            :data="tData"
+            node-key="id"
+            :expand-on-click-node="true"
+            @node-click="nodeClick"
+          >
+            <span slot-scope="{ node, data }" class="custom-tree-node-list father">
+              <span style="display: flex; flex: 1 1 0%; width: 0px;">
+                <span v-if="data.type !== 'folder'">
+                  <svg-icon icon-class="panel" class="ds-icon-scene" />
+                </span>
+                <span v-if="data.type === 'folder'">
+                  <i class="el-icon-folder" />
+                </span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+              </span>
+              <span class="child">
+                <span v-if="data.type ==='folder'" @click.stop>
+                  <span class="el-dropdown-link">
+                    <el-button
+                      icon="el-icon-plus"
+                      type="text"
+                      size="small"
+                      @click="addFolderWithType(data)"
+                    />
+                  </span>
+
+                </span>
+                <span v-if="data.type !=='folder'" style="margin-left: 12px;" @click.stop>
+                  <el-dropdown trigger="click" size="small" @command="clickFileMore">
+                    <span class="el-dropdown-link">
+                      <el-button
+                        icon="el-icon-more"
+                        type="text"
+                        size="small"
+                      />
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item icon="el-icon-edit" :command="beforeClickFile('edit',data,node)">
+                        {{ $t('panel.edit') }}
+                      </el-dropdown-item>
+
+                      <el-dropdown-item icon="el-icon-delete" :command="beforeClickFile('delete',data,node)">
+                        {{ $t('panel.delete') }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </span>
+              </span>
+            </span>
+          </el-tree>
+        </div>
+      </el-col>
+    </el-col>
+  </el-col>
+</template>
+<script>
+import { listDatasource, delDs } from '@/api/system/datasource'
+export default {
+  name: 'DsTree',
+  data() {
+    return {
+      expandedArray: [],
+      tData: []
+    }
+  },
+  mounted() {
+    this.queryTreeDatas()
+  },
+  methods: {
+    queryTreeDatas() {
+      listDatasource().then(res => {
+        this.tData = this.buildTree(res.data)
+      })
+    },
+    buildTree(array) {
+      const types = {}
+      const newArr = []
+      for (let index = 0; index < array.length; index++) {
+        const element = array[index]
+        if (!(element.type in types)) {
+          types[element.type] = []
+          // newArr.push(...element, ...{ children: types[element.type] })
+          newArr.push({ id: element.type, name: element.type, type: 'folder', children: types[element.type] })
+        }
+        types[element.type].push(element)
+        // newArr.children.push({ id: element.id, label: element.name })
+      }
+      return newArr
+    },
+
+    addFolder() {
+      this.switchMain('DsForm')
+    },
+    addFolderWithType(data) {
+      this.switchMain('DsForm', { type: data.id })
+    },
+    nodeClick(node, data) {
+      if (node.type === 'folder') return
+      this.showInfo(data)
+    },
+
+    clickFileMore(param) {
+      const { optType, data } = param
+      switch (optType) {
+        case 'edit':
+          this.edit(data)
+          break
+        case 'delete':
+          this._handleDelete(data)
+          break
+        default:
+          break
+      }
+    },
+    beforeClickFile(optType, data, node) {
+      return { optType, data, node }
+    },
+    edit(row) {
+      this.switchMain('DsForm', row)
+    },
+    showInfo(row) {
+      const param = { ...row.data, ...{ showModel: 'show' }}
+      this.switchMain('DsForm', param)
+    },
+    _handleDelete(datasource) {
+      this.$confirm(this.$t('datasource.delete_warning'), '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        cancelButtonText: this.$t('commons.cancel'),
+        type: 'warning'
+      }).then(() => {
+        delDs(datasource.id).then(res => {
+          this.$success(this.$t('commons.delete_success'))
+          this.queryTreeDatas()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: this.$t('commons.delete_cancelled')
+        })
+      })
+    },
+    switchMain(component, componentParam) {
+      this.$emit('switch-main', {
+        component,
+        componentParam
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.header-title {
+    font-size: 14px;
+    flex: 1;
+    color: #606266;
+    font-weight: bold;
+    display: block;
+    height: 100%;
+    /*line-height: 36px;*/
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right:8px;
+  }
+
+  .custom-tree-node-list {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding:0 8px;
+  }
+
+  .dialog-css>>>.el-dialog__body {
+    padding: 15px 20px;
+  }
+  .dialog-css >>>.el-dialog__body {
+    padding: 10px 20px 20px;
+  }
+
+  .father .child {
+    display: none;
+  }
+  .father:hover .child {
+    display: inline;
+  }
+</style>
diff --git a/frontend/src/views/system/datasource/form.vue b/frontend/src/views/system/datasource/form.vue
index b1319ba5d4..ad8cb70cb0 100644
--- a/frontend/src/views/system/datasource/form.vue
+++ b/frontend/src/views/system/datasource/form.vue
@@ -1,6 +1,10 @@
 <template>
-  <layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')" back-name="datasource">
-    <el-form ref="dsForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
+  <layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')">
+    <template v-slot:header>
+      <el-icon name="back" class="back-button" @click.native="backToList" />
+      {{ params && params.id && params.showModel && params.showModel === 'show' ? $t('datasource.show_info') : formType=='add' ? $t('datasource.create') : $t('datasource.modify') }}
+    </template>
+    <el-form ref="dsForm" :model="form" :rules="rule" size="small" :disabled="params && params.id && params.showModel && params.showModel === 'show'" label-width="auto" label-position="right">
       <el-form-item :label="$t('commons.name')" prop="name">
         <el-input v-model="form.name" autocomplete="off" />
       </el-form-item>
@@ -35,7 +39,7 @@
         <el-input v-model="form.configuration.port" autocomplete="off" />
       </el-form-item>
 
-      <el-form-item>
+      <el-form-item v-if="!(params && params.id && params.showModel && params.showModel === 'show')">
         <el-button @click="validaDatasource">{{ $t('commons.validate') }}</el-button>
         <el-button type="primary" @click="save">{{ $t('commons.save') }}</el-button>
       </el-form-item>
@@ -48,8 +52,14 @@
 import LayoutContent from '@/components/business/LayoutContent'
 import { addDs, editDs, validateDs } from '@/api/system/datasource'
 export default {
-
+  name: 'DsForm',
   components: { LayoutContent },
+  props: {
+    params: {
+      type: Object,
+      default: null
+    }
+  },
   data() {
     return {
       form: { configuration: {}},
@@ -71,13 +81,27 @@ export default {
   },
 
   created() {
-    if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
-      const row = this.$router.currentRoute.params
+    // if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
+    //   const row = this.$router.currentRoute.params
+    //   this.edit(row)
+    // } else {
+    //   this.create()
+    // }
+    if (this.params && this.params.id) {
+      const row = this.params
       this.edit(row)
     } else {
       this.create()
     }
   },
+  mounted() {
+    // if (this.params && this.params.type) {
+    //   this.form.type = this.params.type
+    //   this.$nextTick(() => {
+    //     this.changeType()
+    //   })
+    // }
+  },
   methods: {
     create() {
       this.formType = 'add'
@@ -100,6 +124,7 @@ export default {
           form.configuration = JSON.stringify(form.configuration)
           method(form).then(res => {
             this.$success(this.$t('commons.save_success'))
+            this.refreshTree()
             this.backToList()
           })
         } else {
@@ -129,8 +154,26 @@ export default {
       }
     },
     backToList() {
-      this.$router.push({ name: 'datasource' })
+      this.$emit('switch-component', { })
+      // this.$router.push({ name: 'datasource' })
+    },
+    refreshTree() {
+      this.$emit('refresh-left-tree')
     }
   }
 }
 </script>
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
+
+.back-button {
+  cursor: pointer;
+  margin-right: 10px;
+  font-weight: 600;
+
+  &:active {
+    transform: scale(0.85);
+  }
+}
+</style>
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index 35aad5728d..8dce7dc8d3 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -1,286 +1,46 @@
 <template>
-  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <complex-table
-      :data="data"
-      :columns="columns"
-
-      :search-config="searchConfig"
-      :pagination-config="paginationConfig"
-      @select="select"
-      @search="search"
-    >
-
-      <template #toolbar>
-        <!-- <fu-table-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" /> -->
-        <el-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" @click="create">{{ $t('datasource.create') }}</el-button>
-      </template>
-
-      <!-- <el-table-column type="selection" fix /> -->
-      <el-table-column prop="name" :label="$t('commons.name')" />
-      <el-table-column prop="desc" :label="$t('commons.description')" />
-      <el-table-column prop="type" :label="$t('datasource.type')">
-        <template slot-scope="scope">
-          <span v-if="scope.row.type ==='mysql'">MySQL</span>
-          <span v-if="scope.row.type ==='sqlServer'">SQL Server</span>
-        </template>
-      </el-table-column>
-      <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
-
-    </complex-table>
-
-    <!-- add datasource form -->
-    <el-dialog
-      :close-on-click-modal="false"
-      :title="formType=='add' ? $t('datasource.create') : $t('datasource.modify')"
-      :visible.sync="dialogVisible"
-      width="30%"
-      :destroy-on-close="true"
-      @closed="closeFunc"
-    >
-      <el-form ref="createDatasource" :model="form" label-position="right" label-width="100px" size="small">
-        <el-form-item
-          :label="$t('commons.name')"
-          prop="name"
-          :rules="[{required: true, message: this.$t('datasource.input_name'), trigger: 'blur'},
-                   {min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur'}]"
-        >
-          <el-input v-model="form.name" autocomplete="off" />
-        </el-form-item>
-        <el-form-item
-          :label="$t('commons.description')"
-          prop="desc"
-          :rules="[{required: true, message: this.$t('datasource.input_desc'), trigger: 'blur'},
-                   {min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'}]"
-        >
-          <el-input v-model="form.desc" autocomplete="off" type="textarea" />
-        </el-form-item>
-        <el-form-item :label="$t('datasource.type')" prop="type" :rules="{required: true, message: $t('datasource.please_choose_type'), trigger: 'change'}">
-          <el-select v-model="form.type" :placeholder="$t('datasource.please_choose_type')" class="select-width" @change="changeType()">
-            <el-option
-              v-for="item in allTypes"
-              :key="item.name"
-              :label="item.name"
-              :value="item.name"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase" :rules="{required: true, message: $t('datasource.please_input_data_base'), trigger: 'blur'}">
-          <el-input v-model="form.configuration.dataBase" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username" :rules="{required: true, message: $t('datasource.please_input_user_name'), trigger: 'blur'}">
-          <el-input v-model="form.configuration.username" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password" :rules="{required: true, message: $t('datasource.please_input_password'), trigger: 'change'}">
-          <el-input v-model="form.configuration.password" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host" :rules="{required: true, message: $t('datasource.please_input_host'), trigger: 'change'}">
-          <el-input v-model="form.configuration.host" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port" :rules="{required: true, message: $t('datasource.please_input_port'), trigger: 'change'}">
-          <el-input v-model="form.configuration.port" autocomplete="off" />
-        </el-form-item>
-
-      </el-form>
-
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="validaDatasource('createDatasource')">{{ $t('commons.validate') }}</el-button>
-        <el-button type="primary" @click="saveDatasource('createDatasource')">{{ $t('commons.confirm') }}</el-button>
-      </div>
-    </el-dialog>
-
-  </layout-content>
+  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
+    <de-main-container>
+      <ds-main />
+    </de-main-container>
+  </de-container>
 </template>
 
 <script>
-
-import LayoutContent from '@/components/business/LayoutContent'
-import ComplexTable from '@/components/business/complex-table'
-import { hasDataPermission } from '@/utils/permission'
-import { formatCondition } from '@/utils/index'
-import { dsGrid, addDs, editDs, delDs, validateDs } from '@/api/system/datasource'
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DsMain from './DsMain'
 
 export default {
-  name: 'DEDatasource',
-  components: {
-    LayoutContent,
-    ComplexTable
-  },
+  name: 'Panel',
+  components: { DeMainContainer, DeContainer, DsMain },
   data() {
     return {
-      formType: 'add',
-      dialogVisible: false,
-      data: [],
-      form: { configuration: {}},
-      allTypes: [{ name: 'mysql', type: 'jdbc' }, { name: 'sqlServer', type: 'jdbc' }],
-      rule: {
-        name: [
-          { required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
-          { min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur' }
-        ],
-        desc: [
-          { required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
-          { max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur' }
-        ]
-      },
-      header: '',
-      columns: [],
-      buttons: [
-        {
-          label: this.$t('commons.edit'), icon: 'el-icon-edit', type: 'primary', click: this.edit,
-          show: true,
-          disabled: (row) => {
-            return !hasDataPermission('manage', row.privileges)
-          }
-        }, {
-          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
-          show: true,
-          disabled: (row) => {
-            return !hasDataPermission('manage', row.privileges)
-          }
-        }
-      ],
-      searchConfig: {
-        useQuickSearch: true,
-        quickPlaceholder: this.$t('commons.search_by_name'),
-        combine: false,
-        components: [
-          { field: 'name', label: this.$t('commons.name'), component: 'FuComplexInput' },
-          {
-            field: 'type',
-            label: this.$t('datasource.type'),
-            component: 'FuComplexSelect',
-            options: [{ label: 'MySQL', value: 'mysql' }, { label: 'SQL Server', value: 'sqlServer' }],
-            multiple: false
-          }
-        //   { field: 'deptId', label: '组织', component: conditionTable }
-        ]
-      },
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
-      }
+      component: DsMain,
+      componentName: 'DsMain',
+      param: {}
     }
   },
   mounted() {
-    this.search()
+
   },
   methods: {
-    select(selection) {
-      // console.log(selection)
-    },
-    // create() {
-    //   this.formType = 'add'
-    //   this.dialogVisible = true
-    // },
-    create() {
-      this.$router.push({ name: 'datasource-form' })
-    },
-
-    // edit(row) {
-    //   this.formType = 'modify'
-    //   this.dialogVisible = true
-    //   this.form = Object.assign({}, row)
-    //   this.form.configuration = JSON.parse(this.form.configuration)
-    // },
-    edit(row) {
-      this.$router.push({ name: 'datasource-form', params: row })
-    },
-
-    _handleDelete(datasource) {
-      this.$confirm(this.$t('datasource.delete_warning'), '', {
-        confirmButtonText: this.$t('commons.confirm'),
-        cancelButtonText: this.$t('commons.cancel'),
-        type: 'warning'
-      }).then(() => {
-        delDs(datasource.id).then(res => {
-          this.$success(this.$t('commons.delete_success'))
-          this.search()
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: this.$t('commons.delete_cancelled')
-        })
-      })
-    },
-    saveDatasource(createDatasourceForm) {
-      this.$refs[createDatasourceForm].validate(valid => {
-        if (valid) {
-          const method = this.formType === 'add' ? addDs : editDs
-          this.form.configuration = JSON.stringify(this.form.configuration)
-          method(this.form).then(res => {
-            this.$success(this.$t('commons.save_success'))
-            this.search()
-            this.dialogVisible = false
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    validaDatasource(datasourceForm) {
-      this.$refs[datasourceForm].validate(valid => {
-        if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form))
-          data.configuration = JSON.stringify(data.configuration)
-
-          validateDs(data).then(res => {
-            this.$success(this.$t('datasource.validate_success'))
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    changeType() {
-      for (let i = 0; i < this.allTypes.length; i++) {
-        if (this.allTypes[i].name === this.form.type) {
-          this.form.configuration.dataSourceType = this.allTypes[i].type
-        }
-      }
-    },
-    quick_condition(condition) {
-      const result = {}
-      if (condition && condition.quick) {
-        for (const [key, value] of Object.entries(condition)) {
-          if (`${key}` === 'quick') {
-            const v_new = Object.assign({}, value)
-            v_new['field'] = 'name'
-            result['name'] = v_new
-          } else {
-            result[`${key}`] = value
-          }
-        }
-        return result
-      }
-      return Object.assign({}, condition)
-    },
-    search(condition) {
-      const temp_param = this.quick_condition(condition)
-      const temp = formatCondition(temp_param)
-      const param = temp || {}
-      const { currentPage, pageSize } = this.paginationConfig
-      dsGrid(currentPage, pageSize, param).then(response => {
-        this.data = response.data.listObject
-        this.paginationConfig.total = response.data.itemCount
-      })
-    },
-
-    closeFunc() {
-      this.formType = 'add'
-      // this.search()
-      this.form = { configuration: {}}
-      this.dialogVisible = false
-    }
 
   }
-
 }
 </script>
 
 <style scoped>
+  .ms-aside-container {
+    height: calc(100vh - 56px);
+    padding: 0px;
+    min-width: 260px;
+    max-width: 460px;
+  }
+
+  .ms-main-container {
+    height: calc(100vh - 56px);
+    padding: 0;
+  }
 
 </style>
diff --git a/frontend/src/views/system/datasource/index2.vue b/frontend/src/views/system/datasource/index2.vue
new file mode 100644
index 0000000000..35aad5728d
--- /dev/null
+++ b/frontend/src/views/system/datasource/index2.vue
@@ -0,0 +1,286 @@
+<template>
+  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
+    <complex-table
+      :data="data"
+      :columns="columns"
+
+      :search-config="searchConfig"
+      :pagination-config="paginationConfig"
+      @select="select"
+      @search="search"
+    >
+
+      <template #toolbar>
+        <!-- <fu-table-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" /> -->
+        <el-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" @click="create">{{ $t('datasource.create') }}</el-button>
+      </template>
+
+      <!-- <el-table-column type="selection" fix /> -->
+      <el-table-column prop="name" :label="$t('commons.name')" />
+      <el-table-column prop="desc" :label="$t('commons.description')" />
+      <el-table-column prop="type" :label="$t('datasource.type')">
+        <template slot-scope="scope">
+          <span v-if="scope.row.type ==='mysql'">MySQL</span>
+          <span v-if="scope.row.type ==='sqlServer'">SQL Server</span>
+        </template>
+      </el-table-column>
+      <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
+
+    </complex-table>
+
+    <!-- add datasource form -->
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="formType=='add' ? $t('datasource.create') : $t('datasource.modify')"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :destroy-on-close="true"
+      @closed="closeFunc"
+    >
+      <el-form ref="createDatasource" :model="form" label-position="right" label-width="100px" size="small">
+        <el-form-item
+          :label="$t('commons.name')"
+          prop="name"
+          :rules="[{required: true, message: this.$t('datasource.input_name'), trigger: 'blur'},
+                   {min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur'}]"
+        >
+          <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item
+          :label="$t('commons.description')"
+          prop="desc"
+          :rules="[{required: true, message: this.$t('datasource.input_desc'), trigger: 'blur'},
+                   {min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'}]"
+        >
+          <el-input v-model="form.desc" autocomplete="off" type="textarea" />
+        </el-form-item>
+        <el-form-item :label="$t('datasource.type')" prop="type" :rules="{required: true, message: $t('datasource.please_choose_type'), trigger: 'change'}">
+          <el-select v-model="form.type" :placeholder="$t('datasource.please_choose_type')" class="select-width" @change="changeType()">
+            <el-option
+              v-for="item in allTypes"
+              :key="item.name"
+              :label="item.name"
+              :value="item.name"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase" :rules="{required: true, message: $t('datasource.please_input_data_base'), trigger: 'blur'}">
+          <el-input v-model="form.configuration.dataBase" autocomplete="off" />
+        </el-form-item>
+        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username" :rules="{required: true, message: $t('datasource.please_input_user_name'), trigger: 'blur'}">
+          <el-input v-model="form.configuration.username" autocomplete="off" />
+        </el-form-item>
+        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password" :rules="{required: true, message: $t('datasource.please_input_password'), trigger: 'change'}">
+          <el-input v-model="form.configuration.password" autocomplete="off" />
+        </el-form-item>
+        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host" :rules="{required: true, message: $t('datasource.please_input_host'), trigger: 'change'}">
+          <el-input v-model="form.configuration.host" autocomplete="off" />
+        </el-form-item>
+        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port" :rules="{required: true, message: $t('datasource.please_input_port'), trigger: 'change'}">
+          <el-input v-model="form.configuration.port" autocomplete="off" />
+        </el-form-item>
+
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
+        <el-button type="primary" @click="validaDatasource('createDatasource')">{{ $t('commons.validate') }}</el-button>
+        <el-button type="primary" @click="saveDatasource('createDatasource')">{{ $t('commons.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
+  </layout-content>
+</template>
+
+<script>
+
+import LayoutContent from '@/components/business/LayoutContent'
+import ComplexTable from '@/components/business/complex-table'
+import { hasDataPermission } from '@/utils/permission'
+import { formatCondition } from '@/utils/index'
+import { dsGrid, addDs, editDs, delDs, validateDs } from '@/api/system/datasource'
+
+export default {
+  name: 'DEDatasource',
+  components: {
+    LayoutContent,
+    ComplexTable
+  },
+  data() {
+    return {
+      formType: 'add',
+      dialogVisible: false,
+      data: [],
+      form: { configuration: {}},
+      allTypes: [{ name: 'mysql', type: 'jdbc' }, { name: 'sqlServer', type: 'jdbc' }],
+      rule: {
+        name: [
+          { required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
+          { min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur' }
+        ],
+        desc: [
+          { required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
+          { max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur' }
+        ]
+      },
+      header: '',
+      columns: [],
+      buttons: [
+        {
+          label: this.$t('commons.edit'), icon: 'el-icon-edit', type: 'primary', click: this.edit,
+          show: true,
+          disabled: (row) => {
+            return !hasDataPermission('manage', row.privileges)
+          }
+        }, {
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
+          show: true,
+          disabled: (row) => {
+            return !hasDataPermission('manage', row.privileges)
+          }
+        }
+      ],
+      searchConfig: {
+        useQuickSearch: true,
+        quickPlaceholder: this.$t('commons.search_by_name'),
+        combine: false,
+        components: [
+          { field: 'name', label: this.$t('commons.name'), component: 'FuComplexInput' },
+          {
+            field: 'type',
+            label: this.$t('datasource.type'),
+            component: 'FuComplexSelect',
+            options: [{ label: 'MySQL', value: 'mysql' }, { label: 'SQL Server', value: 'sqlServer' }],
+            multiple: false
+          }
+        //   { field: 'deptId', label: '组织', component: conditionTable }
+        ]
+      },
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  mounted() {
+    this.search()
+  },
+  methods: {
+    select(selection) {
+      // console.log(selection)
+    },
+    // create() {
+    //   this.formType = 'add'
+    //   this.dialogVisible = true
+    // },
+    create() {
+      this.$router.push({ name: 'datasource-form' })
+    },
+
+    // edit(row) {
+    //   this.formType = 'modify'
+    //   this.dialogVisible = true
+    //   this.form = Object.assign({}, row)
+    //   this.form.configuration = JSON.parse(this.form.configuration)
+    // },
+    edit(row) {
+      this.$router.push({ name: 'datasource-form', params: row })
+    },
+
+    _handleDelete(datasource) {
+      this.$confirm(this.$t('datasource.delete_warning'), '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        cancelButtonText: this.$t('commons.cancel'),
+        type: 'warning'
+      }).then(() => {
+        delDs(datasource.id).then(res => {
+          this.$success(this.$t('commons.delete_success'))
+          this.search()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: this.$t('commons.delete_cancelled')
+        })
+      })
+    },
+    saveDatasource(createDatasourceForm) {
+      this.$refs[createDatasourceForm].validate(valid => {
+        if (valid) {
+          const method = this.formType === 'add' ? addDs : editDs
+          this.form.configuration = JSON.stringify(this.form.configuration)
+          method(this.form).then(res => {
+            this.$success(this.$t('commons.save_success'))
+            this.search()
+            this.dialogVisible = false
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    validaDatasource(datasourceForm) {
+      this.$refs[datasourceForm].validate(valid => {
+        if (valid) {
+          const data = JSON.parse(JSON.stringify(this.form))
+          data.configuration = JSON.stringify(data.configuration)
+
+          validateDs(data).then(res => {
+            this.$success(this.$t('datasource.validate_success'))
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    changeType() {
+      for (let i = 0; i < this.allTypes.length; i++) {
+        if (this.allTypes[i].name === this.form.type) {
+          this.form.configuration.dataSourceType = this.allTypes[i].type
+        }
+      }
+    },
+    quick_condition(condition) {
+      const result = {}
+      if (condition && condition.quick) {
+        for (const [key, value] of Object.entries(condition)) {
+          if (`${key}` === 'quick') {
+            const v_new = Object.assign({}, value)
+            v_new['field'] = 'name'
+            result['name'] = v_new
+          } else {
+            result[`${key}`] = value
+          }
+        }
+        return result
+      }
+      return Object.assign({}, condition)
+    },
+    search(condition) {
+      const temp_param = this.quick_condition(condition)
+      const temp = formatCondition(temp_param)
+      const param = temp || {}
+      const { currentPage, pageSize } = this.paginationConfig
+      dsGrid(currentPage, pageSize, param).then(response => {
+        this.data = response.data.listObject
+        this.paginationConfig.total = response.data.itemCount
+      })
+    },
+
+    closeFunc() {
+      this.formType = 'add'
+      // this.search()
+      this.form = { configuration: {}}
+      this.dialogVisible = false
+    }
+
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>