diff --git a/backend/src/main/resources/db/migration/V35__1.11.sql b/backend/src/main/resources/db/migration/V35__1.11.sql
index 8d60fec0e5..3189f656fa 100644
--- a/backend/src/main/resources/db/migration/V35__1.11.sql
+++ b/backend/src/main/resources/db/migration/V35__1.11.sql
@@ -9,7 +9,7 @@ CREATE TABLE `de_driver` (
      `driver_class` varchar(255) DEFAULT NULL COMMENT '驱动类',
      `desc` varchar(255) DEFAULT NULL COMMENT '描述',
      PRIMARY KEY (`id`) USING BTREE
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='驱动';
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci COMMENT='驱动';
 
 
 CREATE TABLE `de_driver_details` (
@@ -19,7 +19,7 @@ CREATE TABLE `de_driver_details` (
      `version` varchar(255) DEFAULT NULL COMMENT '版本',
      `driver_class` longtext DEFAULT NULL COMMENT '驱动类',
      PRIMARY KEY (`id`) USING BTREE
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='驱动详情';
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci COMMENT='驱动详情';
 
 
 UPDATE `sys_menu` SET `sub_count` = 1 WHERE `menu_id` = 40;
@@ -43,7 +43,7 @@ CREATE TABLE `sys_log` (
   `remark` longtext COMMENT '备注信息',
   `time` bigint(13) NOT NULL COMMENT '操作时间',
   PRIMARY KEY (`id`)
-) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;
 
 SET FOREIGN_KEY_CHECKS = 1;
 
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index fafa49afef..5348297bd4 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1334,6 +1334,7 @@ export default {
     driver: 'Driver',
     please_choose_driver: 'Please choose driver',
     mgm: 'Driver',
+    exit_mgm: 'Exit Driver',
     add: 'ADD Driver',
     modify: 'Modify',
     show_info: 'Driver info',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 1b9fa015a8..21d143a8aa 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1334,6 +1334,7 @@ export default {
     driver: '驅動',
     please_choose_driver: '青選擇驅動',
     mgm: '驅動管理',
+    exit_mgm: '退出驅動管理',
     add: '添加驅動',
     modify: '修改',
     show_info: '驅動信息',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index b07eba1603..954491ad27 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1336,6 +1336,7 @@ export default {
     driver: '驱动',
     please_choose_driver: '请选择驱动',
     mgm: '驱动管理',
+    exit_mgm: '退出驱动管理',
     add: '添加驱动',
     modify: '修改',
     show_info: '驱动信息',
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index 98e9c4e011..f3e91a7156 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -1,14 +1,27 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
   <el-col class="tree-style">
     <el-col>
-      <el-row>
-        <el-tabs v-model="showView" type="card" @tab-click="changeTab">
-          <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name" />
-        </el-tabs>
+      <el-row class="title-css" v-show="showView === 'Datasource'">
+        <span class="title-text">
+          {{ $t('commons.datasource') }}
+        </span>
       </el-row>
-      <el-row>
-        <el-button icon="el-icon-plus" type="text" size="mini" style="float: left;" @click="addFolder" />
+      <el-row v-show="showView === 'Datasource'">
+        <el-button icon="el-icon-plus" type="text" size="mini" style="float: left;" @click="addFolder"> {{ $t('datasource.create') }}</el-button>
+        <el-button icon="el-icon-setting" type="text" size="mini" style="float: right;" @click="driverMgm"> {{ $t('driver.mgm') }}</el-button>
+        </el-button>
       </el-row>
+
+      <el-row class="title-css" v-show="showView === 'Driver'">
+        <template>
+          <el-icon name="back" class="back-button"  size="mini"  @click.native="dsMgm" />
+          {{$t('driver.exit_mgm')}}
+        </template>
+      </el-row>
+      <el-row v-show="showView === 'Driver'">
+        <el-button icon="el-icon-plus" type="text" size="mini" style="float: left;" @click="addFolder"> {{ $t('driver.add') }}</el-button>
+      </el-row>
+
       <el-row>
         <el-form>
           <el-form-item class="form-item">
@@ -38,16 +51,16 @@
             <span slot-scope="{ node, data }" class="custom-tree-node-list father">
               <span style="display: flex;flex: 1;width: 0;">
                 <span v-if="data.type !== 'folder' && data.status !== 'Error' && data.status !== 'Warning'">
-                  <svg-icon icon-class="datasource" class="ds-icon-scene" />
+                  <svg-icon icon-class="datasource" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.status === 'Error'">
-                  <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
+                  <svg-icon icon-class="exclamationmark" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.status === 'Warning'">
-                  <svg-icon icon-class="exclamationmark2" class="ds-icon-scene" />
+                  <svg-icon icon-class="exclamationmark2" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.type === 'folder'">
-                  <i class="el-icon-folder" />
+                  <i class="el-icon-folder"/>
                 </span>
                 <span
                   v-if=" data.status === 'Error'"
@@ -108,10 +121,10 @@
       <el-dialog v-dialogDrag :title="dialogTitle" :visible="editDriver" :show-close="false" width="50%" append-to-body>
         <el-form ref="driverForm" :model="driverForm" label-position="right" label-width="100px" :rules="rule">
           <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="driverForm.name" />
+            <el-input v-model="driverForm.name"/>
           </el-form-item>
           <el-form-item :label="$t('commons.description')">
-            <el-input v-model="driverForm.desc" />
+            <el-input v-model="driverForm.desc"/>
           </el-form-item>
           <el-form-item :label="$t('datasource.type')" prop="type">
             <el-select
@@ -142,7 +155,7 @@
 </template>
 <script>
 
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import i18n from '@/lang'
 import {
   listDatasource,
@@ -154,7 +167,7 @@ import {
   delDriver,
   listDriverByType
 } from '@/api/system/datasource'
-import { ApplicationContext } from '@/utils/ApplicationContext'
+import {ApplicationContext} from '@/utils/ApplicationContext'
 
 export default {
   name: 'DsTree',
@@ -182,11 +195,11 @@ export default {
       },
       disabledModifyType: false,
       rule: {
-        name: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
-          { min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
-        desc: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
-          { min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
-        type: [{ required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur' }]
+        name: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
+          {min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
+        desc: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
+          {min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
+        type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur'}]
       },
       editableTabs: [{
         title: i18n.t('commons.datasource'),
@@ -310,12 +323,18 @@ export default {
       }
     },
 
-    changeTab() {
+    driverMgm() {
+      this.showView = 'Driver'
+      this.expandedArray = []
+      this.tData = []
+      this.queryTreeDatas()
+    },
+    dsMgm() {
+      this.showView = 'Datasource'
       this.expandedArray = []
       this.tData = []
       this.queryTreeDatas()
     },
-
     addFolderWithType(data) {
       if (this.showView === 'Driver') {
         this.driverForm.type = data.id
@@ -324,7 +343,7 @@ export default {
         this.editDriver = true
         // this.switchMain(switchMain'DriverForm', {}, this.tData, this.dsTypes)
       } else {
-        this.switchMain('DsForm', { type: data.id }, this.tData, this.dsTypes)
+        this.switchMain('DsForm', {type: data.id}, this.tData, this.dsTypes)
       }
     },
     nodeClick(node, data) {
@@ -333,7 +352,7 @@ export default {
     },
 
     clickFileMore(param) {
-      const { optType, data } = param
+      const {optType, data} = param
       switch (optType) {
         case 'edit':
           this.edit(data)
@@ -346,13 +365,13 @@ export default {
       }
     },
     beforeClickFile(optType, data, node) {
-      return { optType, data, node }
+      return {optType, data, node}
     },
     edit(row) {
       this.switchMain('DsForm', row, this.tData, this.dsTypes)
     },
     showInfo(row) {
-      const param = { ...row.data, ...{ showModel: 'show' }}
+      const param = {...row.data, ...{showModel: 'show'}}
       if (this.showView === 'Datasource') {
         this.switchMain('DsForm', param, this.tData, this.dsTypes)
       } else {
@@ -366,7 +385,7 @@ export default {
         type: 'warning'
       }).then(() => {
         let method = delDriver
-        let parma = { type: datasource.type, id: datasource.id }
+        let parma = {type: datasource.type, id: datasource.id}
         if (this.showView === 'Datasource') {
           method = delDs
           parma = datasource.id