diff --git a/frontend/src/components/canvas/components/editor/EditBar.vue b/frontend/src/components/canvas/components/editor/EditBar.vue
index 698658c3d8..471c4186f2 100644
--- a/frontend/src/components/canvas/components/editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/editor/EditBar.vue
@@ -372,7 +372,7 @@ export default {
     ])
   },
   mounted() {
-    if (navigator.platform.indexOf('Mac') == -1) {
+    if (navigator.platform.indexOf('Mac') === -1) {
       this.systemOS = 'Other'
     }
     this.initCurFields()
diff --git a/frontend/src/components/canvas/components/editor/SettingMenu.vue b/frontend/src/components/canvas/components/editor/SettingMenu.vue
index 8eebf374c9..c7b85a1cfe 100644
--- a/frontend/src/components/canvas/components/editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/editor/SettingMenu.vue
@@ -17,8 +17,7 @@
             v-if="curComponent.type != 'custom-button'"
             icon="el-icon-document-copy"
             @click.native="copy"
-          ><span>{{ $t('panel.copy') }}(<span v-show="systemOS==='Mac'"><i class="icon iconfont icon-command"
-          />+ D</span> <span v-show="systemOS!=='Mac'">Control + D</span>)</span>
+          ><span>{{ $t('panel.copy') }}(<span v-show="systemOS==='Mac'"><i class="icon iconfont icon-command" />+ D</span> <span v-show="systemOS!=='Mac'">Control + D</span>)</span>
           </el-dropdown-item>
           <el-dropdown-item
             icon="el-icon-delete"
@@ -210,7 +209,7 @@ export default {
     ])
   },
   mounted() {
-    if (navigator.platform.indexOf('Mac') == -1) {
+    if (navigator.platform.indexOf('Mac') === -1) {
       this.systemOS = 'Other'
     }
   },
diff --git a/frontend/src/components/deCustomCm/DePager.vue b/frontend/src/components/deCustomCm/DePager.vue
index 1f852d3974..9908389f55 100644
--- a/frontend/src/components/deCustomCm/DePager.vue
+++ b/frontend/src/components/deCustomCm/DePager.vue
@@ -112,9 +112,9 @@ export default {
         }
       }
 
-      //eslint-disable-next-line
+      // eslint-disable-next-line
       this.showPrevMore = showPrevMore
-      //eslint-disable-next-line
+      // eslint-disable-next-line
       this.showNextMore = showNextMore
 
       return array
diff --git a/frontend/src/components/deCustomCm/DeTextarea.vue b/frontend/src/components/deCustomCm/DeTextarea.vue
index 438312dcb8..1d8045e351 100644
--- a/frontend/src/components/deCustomCm/DeTextarea.vue
+++ b/frontend/src/components/deCustomCm/DeTextarea.vue
@@ -1,12 +1,12 @@
 <template>
   <el-input
-    v-count="value"
+    v-count="{value, maxlength}"
     :placeholder="$t('fu.search_bar.please_input')"
     show-word-limit
     :disabled="disabled"
     :value="value"
     type="textarea"
-    maxlength="200"
+    :maxlength="maxlength"
     @input="handleChange"
   />
 </template>
@@ -16,14 +16,14 @@ export default {
   directives: {
     count: {
       update: function(el, binding) {
-        const lg = binding.value?.length || 0
+        const lg = binding.value.value?.length || 0
         const count = el.querySelector('.el-input__count')
         if (!count) return
         if (!lg) {
           if (count?.classList?.contains('no-zore')) {
             count.classList.remove('no-zore')
           }
-          count.innerHTML = '0/200'
+          count.innerHTML = `0/${binding.value.maxlength || 200}`
           return
         }
         if (el.querySelector('.no-zore')) {
@@ -34,7 +34,7 @@ export default {
         const num = document.createElement('span')
         const total = document.createElement('span')
         num.style.color = '#1F2329'
-        total.innerHTML = '/200'
+        total.innerHTML = `/${binding.value.maxlength || 200}`
         num.innerHTML = lg
         if (!newCount) return
         newCount.classList.add('el-input__count', 'no-zore')
@@ -46,7 +46,11 @@ export default {
   },
   props: {
     disabled: Boolean,
-    value: String
+    value: String,
+    maxlength: {
+      type: Number,
+      default: 200
+    }
   },
   methods: {
     handleChange(val) {
diff --git a/frontend/src/utils/request.js b/frontend/src/utils/request.js
index c9baf7f7df..78536360fc 100644
--- a/frontend/src/utils/request.js
+++ b/frontend/src/utils/request.js
@@ -108,13 +108,16 @@ service.interceptors.response.use(response => {
   const headers = error.response && error.response.headers || error.response || config.headers
   config.loading && tryHideLoading(store.getters.currentPath)
 
-  let msg
+  let msg = ''
   if (error.response) {
     checkAuth(error.response)
     msg = error.response.data.message || error.response.data
   } else {
     msg = error.message
   }
+  if (msg.length > 600) {
+    msg = msg.slice(0, 600)
+  }
   !config.hideMsg && (!headers['authentication-status']) && $error(msg)
   return Promise.reject(config.url === '/dataset/table/sqlPreview' ? msg : error)
 })
diff --git a/frontend/src/views/chart/components/ChartTitleUpdate.vue b/frontend/src/views/chart/components/ChartTitleUpdate.vue
index 684ca0c194..a37a471c3e 100644
--- a/frontend/src/views/chart/components/ChartTitleUpdate.vue
+++ b/frontend/src/views/chart/components/ChartTitleUpdate.vue
@@ -380,8 +380,8 @@ export default {
         if (!viewSave) return
         viewEditSave(this.panelInfo.id, viewSave).then(() => {
           this.chart.title = this.chartTitleUpdate
-          bus.$emit('aside-set-title', this.chart.title)
         })
+        bus.$emit('title-name', this.chart.title, chartView.id)
         bus.$emit('view-in-cache', {
           type: 'styleChange',
           viewId: chartView.id,
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index a0f02eac61..920404837e 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1934,7 +1934,8 @@ export default {
   },
 
   methods: {
-    setTitle(title) {
+    setTitle(title, id) {
+      if (this.view.id !== id) return
       this.view.customStyle.text = { ...this.view.customStyle.text, title }
       this.view.title = title
       this.view.name = title
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index eb46831c15..07d9f4bd90 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -860,8 +860,8 @@ export default {
           item.dateFormat = item.dateFormatType
         }
       }
-      if(item.dateFormatType === 'custom' && !item.dateFormat){
-        return;
+      if (item.dateFormatType === 'custom' && !item.dateFormat) {
+        return
       }
       post('/dataset/field/save', item)
         .then((response) => {
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index 731aafb176..f728a0bf28 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -861,7 +861,7 @@ export default {
     },
     disableExec(task) {
       return (
-        (task.status === 'Stopped' && task.rate !== 'SIMPLE') || task.status === 'Pending' || task.status ==='Exec' || !hasDataPermission('manage', task.privileges)
+        (task.status === 'Stopped' && task.rate !== 'SIMPLE') || task.status === 'Pending' || task.status === 'Exec' || !hasDataPermission('manage', task.privileges)
       )
     },
     disableDelete(task) {
diff --git a/frontend/src/views/panel/appTemplateMarket/log/index.vue b/frontend/src/views/panel/appTemplateMarket/log/index.vue
index 307ca921e1..bff056a815 100644
--- a/frontend/src/views/panel/appTemplateMarket/log/index.vue
+++ b/frontend/src/views/panel/appTemplateMarket/log/index.vue
@@ -1,8 +1,8 @@
 <template>
   <el-row
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
     style="text-align: left"
     class="de-search-table"
-    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
   >
     <el-row class="top-operate">
       <el-col :span="12">
@@ -36,8 +36,8 @@
           icon="iconfont icon-icon-filter"
           @click="filterShow"
         >{{
-            $t('user.filter')
-          }}
+           $t('user.filter')
+         }}
           <template v-if="filterTexts.length">
             ({{ cacheCondition.length }})
           </template>
@@ -50,7 +50,7 @@
     >
       <span class="sum">{{ paginationConfig.total }}</span>
       <span class="title">{{ $t('user.result_one') }}</span>
-      <el-divider direction="vertical"/>
+      <el-divider direction="vertical" />
       <i
         v-if="showScroll"
         class="el-icon-arrow-left arrow-filter"
@@ -63,9 +63,9 @@
           class="text"
         >
           {{ ele }} <i
-          class="el-icon-close"
-          @click="clearOneFilter(index)"
-        />
+            class="el-icon-close"
+            @click="clearOneFilter(index)"
+          />
         </p>
       </div>
       <i
@@ -180,11 +180,11 @@
 
     <!--导入templatedialog-->
     <el-dialog
+      v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
       :title="$t('app_template.log_delete_tips')"
       :visible.sync="deleteConfirmDialog"
       :show-close="true"
       width="420px"
-      v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
     >
       <el-row>
         <el-checkbox
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index a9624c0e27..283db5d553 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -820,7 +820,7 @@ export default {
     bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
     bus.$off('delete-condition', this.deleteCustomComponent)
     bus.$off('current-component-change', this.asideRefresh)
-    bus.$off('aside-set-title', this.asideSetTitle)
+    bus.$off('title-name', this.asideSetTitle)
     const elx = this.$refs.rightPanel
     elx && elx.remove()
   },
@@ -851,16 +851,16 @@ export default {
       bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
       bus.$on('delete-condition', this.deleteCustomComponent)
       bus.$on('current-component-change', this.asideRefresh)
-      bus.$on('aside-set-title', this.asideSetTitle)
+      bus.$on('title-name', this.asideSetTitle)
     },
     asideRefresh() {
       if (this.$refs['chartEditRef']) {
         this.$refs['chartEditRef'].resetChartData()
       }
     },
-    asideSetTitle(val) {
+    asideSetTitle(val, id) {
       if (this.$refs['chartEditRef']) {
-        this.$refs['chartEditRef'].setTitle(val)
+        this.$refs['chartEditRef'].setTitle(val, id)
       }
     },
     deleteCustomComponent(param) {
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index 65ad1f3738..e93c0794ef 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -182,6 +182,7 @@
             >
               <deTextarea
                 v-model="form.desc"
+                :maxlength="50"
                 class="w100-textarea"
               />
             </el-form-item>
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index 78d375e5a8..23c25f6675 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -255,15 +255,15 @@
         v-dialogDrag
         :title="$t('datasource.create')"
         :visible.sync="dsTypeRelate"
-        width="1200px"
+        width="1005px"
         class="de-dialog-form none-scroll-bar"
         append-to-body
       >
-        <el-tabs v-model="tabActive">
-          <el-tab-pane
-            :label="$t('datasource.all')"
-            name="all"
-          />
+        <el-tabs
+          v-model="tabActive"
+          class="de-tabs"
+          @tab-click="handleClick"
+        >
           <el-tab-pane
             :label="$t('datasource.relational_database')"
             name="RDBMS"
@@ -278,24 +278,36 @@
           />
         </el-tabs>
         <div class="db-container">
-          <div
-            v-for="(db, index) in databaseList"
-            :key="db.type"
-            class="db-card"
-            :class="[{ marLeft: index % 4 === 0 }]"
-            @click="addDb(db)"
-          >
-            <img
-              v-if="!db.isPlugin"
-              :src="require('../../../assets/datasource/' + db.type + '.jpg')"
-              alt=""
+          <template v-for="(list, idx) in databaseList">
+            <div
+              :key="nameMap[idx]"
+              :class="typeList[idx]"
+              class="name"
+            >{{ $t(`datasource.${nameMap[idx]}`) }}</div>
+            <div
+              :key="nameMap[idx] + 'cont'"
+              class="item-container"
             >
-            <img
-              v-if="db.isPlugin"
-              :src="`/api/pluginCommon/staticInfo/${db.type}/jpg`"
-            >
-            <p class="db-name">{{ db.name }}</p>
-          </div>
+              <div
+                v-for="(db, index) in list"
+                :key="db.type"
+                class="db-card"
+                :class="[{ marLeft: index % 5 === 0 }]"
+                @click="addDb(db)"
+              >
+                <img
+                  v-if="!db.isPlugin"
+                  :src="require('../../../assets/datasource/' + db.type + '.jpg')"
+                  alt=""
+                >
+                <img
+                  v-if="db.isPlugin"
+                  :src="`/api/pluginCommon/staticInfo/${db.type}/jpg`"
+                >
+                <p class="db-name">{{ db.name }}</p>
+              </div>
+            </div>
+          </template>
         </div>
       </el-dialog>
     </el-col>
@@ -329,11 +341,14 @@ export default {
   },
   data() {
     return {
-      tabActive: 'all',
+      tabActive: 'RDBMS',
+      databaseList: [],
       currentNodeId: '',
       dsTypeRelate: false,
       expandedArray: [],
       tData: [],
+      nameMap: ['relational_database', 'non_relational_database', 'other'],
+      typeList: ['RDBMS', 'NORDBMS', 'OTHER'],
       treeLoading: false,
       dsTypes: [],
       dsTypesForDriver: [],
@@ -386,15 +401,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['user']),
-    databaseList() {
-      if (this.tabActive === 'all') {
-        return this.dsTypes
-      }
-      return this.dsTypes.filter(
-        (ele) => ele.databaseClassification === this.tabActive
-      )
-    }
+    ...mapGetters(['user'])
   },
   watch: {
     key(val) {
@@ -406,6 +413,9 @@ export default {
     this.datasourceTypes()
   },
   methods: {
+    handleClick() {
+      document.querySelector(`.${this.tabActive}`).scrollIntoView()
+    },
     createDriveOrDs() {
       if (this.showView === 'Driver') {
         this.addDriver()
@@ -478,11 +488,17 @@ export default {
     datasourceTypes() {
       listDatasourceType().then((res) => {
         this.dsTypes = res.data
+        const databaseList = [[], [], []]
         this.dsTypes.forEach((item) => {
+          const index = this.typeList.findIndex(ele => ele === item.databaseClassification)
+          if (index !== -1) {
+            databaseList[index].push(item)
+          }
           if (item.isJdbc) {
             this.dsTypesForDriver.push(item)
           }
         })
+        this.databaseList = databaseList
       })
     },
     refreshType(datasource) {
@@ -802,24 +818,38 @@ export default {
   width: 100%;
   max-height: 65vh;
   overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: -3px;
+  margin-top: 3px;
   position: relative;
   z-index: 10;
+
+  .name {
+    margin: 16px 0;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--deTextPrimary, #1F2329);
+  }
+
+  .item-container {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
   .db-card {
-    height: 193px;
-    width: 270px;
+    height: 141px;
+    width: 177.6px;
     display: flex;
     flex-wrap: wrap;
     background: #ffffff;
     border: 1px solid #dee0e3;
     border-radius: 4px;
-    margin-bottom: 24px;
-    margin-left: 22px;
+    margin-bottom: 16px;
+    margin-left: 16px;
     img {
       width: 100%;
-      height: 154.58px;
+      height: 102px;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
     }
diff --git a/frontend/src/views/system/task/DatasetTaskList.vue b/frontend/src/views/system/task/DatasetTaskList.vue
index 3c16f7d221..b48c86bbf4 100644
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@@ -36,8 +36,8 @@
           icon="iconfont icon-icon-filter"
           @click="filterShow"
         >{{
-            $t("user.filter")
-          }}
+           $t("user.filter")
+         }}
           <template v-if="filterTexts.length">
             ({{ filterTexts.length }})
           </template>
@@ -83,7 +83,7 @@
     >
       <span class="sum">{{ paginationConfig.total }}</span>
       <span class="title">{{ $t("user.result_one") }}</span>
-      <el-divider direction="vertical"/>
+      <el-divider direction="vertical" />
       <i
         v-if="showScroll"
         class="el-icon-arrow-left arrow-filter"
@@ -96,9 +96,9 @@
           class="text"
         >
           {{ ele }} <i
-          class="el-icon-close"
-          @click="clearOneFilter(index)"
-        />
+            class="el-icon-close"
+            @click="clearOneFilter(index)"
+          />
         </p>
       </div>
       <i
@@ -162,14 +162,14 @@
         >
           <template slot-scope="scope">
             <span v-if="scope.row.rate === 'SIMPLE'">{{
-                $t("dataset.execute_once")
-              }}</span>
+              $t("dataset.execute_once")
+            }}</span>
             <span v-if="scope.row.rate === 'CRON'">{{
-                $t("dataset.cron_config")
-              }}</span>
+              $t("dataset.cron_config")
+            }}</span>
             <span v-if="scope.row.rate === 'SIMPLE_CRON'">{{
-                $t("dataset.simple_cron")
-              }}</span>
+              $t("dataset.simple_cron")
+            }}</span>
           </template>
         </el-table-column>
 
@@ -197,8 +197,8 @@
               v-if="scope.row.lastExecStatus"
               :class="[`de-${scope.row.lastExecStatus}-pre`, 'de-status']"
             >{{
-                $t(`dataset.${scope.row.lastExecStatus.toLocaleLowerCase()}`)
-              }}
+               $t(`dataset.${scope.row.lastExecStatus.toLocaleLowerCase()}`)
+             }}
               <svg-icon
                 v-if="scope.row.lastExecStatus === 'Error'"
                 style="cursor: pointer;"
@@ -333,18 +333,18 @@
           secondary
           @click="show_error_massage = false"
         >{{
-            $t("dataset.close")
-          }}</deBtn>
+          $t("dataset.close")
+        }}</deBtn>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import {columnOptions} from './options'
-import {formatOrders} from '@/utils/index'
-import {datasetTaskList, post} from '@/api/dataset/dataset'
-import {hasDataPermission} from '@/utils/permission'
+import { columnOptions } from './options'
+import { formatOrders } from '@/utils/index'
+import { datasetTaskList, post } from '@/api/dataset/dataset'
+import { hasDataPermission } from '@/utils/permission'
 import GridTable from '@/components/gridTable/index.vue'
 import filterUser from './FilterUser.vue'
 import msgCfm from '@/components/msgCfm/index'
@@ -353,7 +353,7 @@ import keyEnter from '@/components/msgCfm/keyEnter.js'
 
 export default {
   name: 'DatasetTaskList',
-  components: {GridTable, filterUser},
+  components: { GridTable, filterUser },
   mixins: [msgCfm, keyEnter],
   props: {
     transCondition: {
@@ -396,7 +396,7 @@ export default {
     }
   },
   created() {
-    const {taskId, name} = this.transCondition
+    const { taskId, name } = this.transCondition
     if (taskId) {
       this.nickName = name
     }
@@ -427,7 +427,7 @@ export default {
         document.querySelector('#resize-for-filter')
       )
     },
-    layoutResize: _.debounce(function () {
+    layoutResize: _.debounce(function() {
       this.getScrollStatus()
     }, 200),
     scrollPre() {
@@ -501,7 +501,7 @@ export default {
       this.handleCurrentChange(1)
     },
     search(showLoading = true) {
-      const {taskId, name} = this.transCondition
+      const { taskId, name } = this.transCondition
       const param = {
         orders: formatOrders(this.orderConditions),
         conditions: [...this.cacheCondition]
@@ -520,7 +520,7 @@ export default {
           field: 'dataset_table_task.id'
         })
       }
-      const {currentPage, pageSize} = this.paginationConfig
+      const { currentPage, pageSize } = this.paginationConfig
       datasetTaskList(currentPage, pageSize, param, showLoading).then(
         (response) => {
           const multipleSelection = this.multipleSelection.map(ele => ele.id)
@@ -568,7 +568,7 @@ export default {
       })
     },
     changeTaskStatus(task) {
-      const {status} = task
+      const { status } = task
       if (!['Pending', 'Underway'].includes(status)) {
         return
       }
@@ -613,7 +613,7 @@ export default {
     },
     selectDataset(row) {
       if (row) {
-        const {datasetName, id, tableId} = row
+        const { datasetName, id, tableId } = row
         this.$router.push({
           path: '/task-ds-form',
           query: {
@@ -634,7 +634,7 @@ export default {
       )
     },
     disableExec(task) {
-      return ((task.status === 'Stopped' && task.rate !== 'SIMPLE') || task.status === 'Pending' || task.status ==='Exec' || !hasDataPermission('manage', task.privileges))
+      return ((task.status === 'Stopped' && task.rate !== 'SIMPLE') || task.status === 'Pending' || task.status === 'Exec' || !hasDataPermission('manage', task.privileges))
     },
     disableDelete(task) {
       return false