diff --git a/backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java b/backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java
index c04b3fc470..a234522869 100644
--- a/backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java
+++ b/backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java
@@ -41,7 +41,7 @@ public class DatasourceController {
         return PageUtils.setPageInfo(page, datasourceService.gridQuery(request));
     }
 
-    @GetMapping("/delete/{datasourceID}")
+    @PostMapping("/delete/{datasourceID}")
     public void deleteDatasource(@PathVariable(value = "datasourceID") String datasourceID) {
         datasourceService.deleteDatasource(datasourceID);
     }
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 0a5f5ddeab..e827dbefcf 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -187,12 +187,20 @@ export default {
     },
     // 设置侧边栏的显示和隐藏
     setSidebarHide(route) {
-      if (!route.children || route.children.length === 1) {
+    //   if (!route.children || route.children.length === 1) {
+      if (!route.children || this.showChildLength(route) === 1) {
         this.$store.dispatch('app/toggleSideBarHide', true)
       } else {
         this.$store.dispatch('app/toggleSideBarHide', false)
       }
     },
+    // 获取非隐藏子路由的个数
+    showChildLength(route) {
+      if (!route || !route.children) {
+        return 0
+      }
+      return route.children.filter(kid => !kid.hidden).length
+    },
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
diff --git a/frontend/src/views/system/datasource/form.vue b/frontend/src/views/system/datasource/form.vue
new file mode 100644
index 0000000000..151babff7b
--- /dev/null
+++ b/frontend/src/views/system/datasource/form.vue
@@ -0,0 +1,135 @@
+<template>
+  <layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')" back-name="数据源1">
+    <el-form ref="dsForm" :model="form" :rules="rule" size="small" 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>
+      <el-form-item :label="$t('commons.description')" prop="desc">
+
+        <el-input v-model="form.desc" autocomplete="off" type="textarea" />
+      </el-form-item>
+      <el-form-item :label="$t('datasource.type')" prop="type">
+        <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-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase">
+        <el-input v-model="form.configuration.dataBase" autocomplete="off" />
+      </el-form-item>
+      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username">
+        <el-input v-model="form.configuration.username" autocomplete="off" />
+      </el-form-item>
+      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password">
+        <el-input v-model="form.configuration.password" autocomplete="off" />
+      </el-form-item>
+      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host">
+        <el-input v-model="form.configuration.host" autocomplete="off" />
+      </el-form-item>
+      <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port">
+        <el-input v-model="form.configuration.port" autocomplete="off" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button type="primary" @click="validaDatasource">{{ $t('commons.validate') }}</el-button>
+        <el-button @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from '@/components/business/LayoutContent'
+import { addDs, editDs, validateDs } from '@/api/system/datasource'
+export default {
+
+  components: { LayoutContent },
+  data() {
+    return {
+      form: { configuration: {}},
+      rule: {
+        name: [{ required: true, message: this.$t('datasource.input_name'), trigger: 'blur' },
+          { min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur' }],
+        desc: [{ required: true, message: this.$t('datasource.input_desc'), trigger: 'blur' },
+          { min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur' }],
+        type: [{ required: true, message: this.$t('datasource.please_choose_type'), trigger: 'change' }],
+
+        'configuration.dataBase': [{ required: true, message: this.$t('datasource.please_input_data_base'), trigger: 'blur' }],
+        'configuration.username': [{ required: true, message: this.$t('datasource.please_input_user_name'), trigger: 'blur' }],
+        'configuration.password': [{ required: true, message: this.$t('datasource.please_input_password'), trigger: 'change' }],
+        'configuration.host': [{ required: true, message: this.$t('datasource.please_input_host'), trigger: 'change' }],
+        'configuration.port': [{ required: true, message: this.$t('datasource.please_input_port'), trigger: 'change' }]
+      },
+      allTypes: [{ name: 'mysql', type: 'jdbc' }, { name: 'sqlServer', type: 'jdbc' }]
+    }
+  },
+
+  created() {
+    if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
+      const row = this.$router.currentRoute.params
+      this.edit(row)
+    } else {
+      this.create()
+    }
+  },
+  methods: {
+    create() {
+      this.formType = 'add'
+    },
+    edit(row) {
+      this.formType = 'modify'
+      this.form = Object.assign({}, row)
+      this.form.configuration = JSON.parse(this.form.configuration)
+    },
+
+    reset() {
+      this.$refs.dsForm.resetFields()
+    },
+    save() {
+      this.$refs.dsForm.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.backToList()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    validaDatasource() {
+      this.$refs.dsForm.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
+        }
+      }
+    },
+    backToList() {
+      this.$router.push({ name: '数据源1' })
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index f6f63e7702..6ae8bed3b2 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -125,7 +125,7 @@ export default {
           label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
           show: checkPermission(['datasource:edit'])
         }, {
-          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
           show: checkPermission(['datasource:del'])
         }
       ],
@@ -161,16 +161,22 @@ export default {
     select(selection) {
       console.log(selection)
     },
+    // create() {
+    //   this.formType = 'add'
+    //   this.dialogVisible = true
+    // },
     create() {
-      this.formType = 'add'
-      this.dialogVisible = true
+      this.$router.push({ name: '数据源表单' })
     },
 
+    // edit(row) {
+    //   this.formType = 'modify'
+    //   this.dialogVisible = true
+    //   this.form = Object.assign({}, row)
+    //   this.form.configuration = JSON.parse(this.form.configuration)
+    // },
     edit(row) {
-      this.formType = 'modify'
-      this.dialogVisible = true
-      this.form = Object.assign({}, row)
-      this.form.configuration = JSON.parse(this.form.configuration)
+      this.$router.push({ name: '数据源表单', params: row })
     },
 
     _handleDelete(datasource) {