diff --git a/frontend/src/components/deCustomCm/deBtn.vue b/frontend/src/components/deCustomCm/deBtn.vue
index f950e9f85d..55df2934bb 100644
--- a/frontend/src/components/deCustomCm/deBtn.vue
+++ b/frontend/src/components/deCustomCm/deBtn.vue
@@ -1,6 +1,7 @@
 <template>
   <button
     class="de-button"
+    type="button"
     :disabled="buttonDisabled || loading"
     :class="[
       type ? 'de-button--' + type : '',
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index c0b4fcbf8f..a6c8791745 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -19,7 +19,10 @@
       style="cursor: default;display: block;"
     >
       <div style="padding:6px 4px 0;margin: 0;">
-        <chart-title-update :chart-info="chartInfo" />
+        <chart-title-update
+          :title-class="title_class"
+          :chart-info="chartInfo"
+        />
         <title-remark
           v-if="remarkCfg.show"
           style="text-shadow: none!important;margin-left: 4px;"
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 7fced189dd..1bc6849579 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -19,7 +19,10 @@
       style="cursor: default;display: block;"
     >
       <div style="padding:6px 4px 0;margin: 0;">
-        <chart-title-update :chart-info="chartInfo" />
+        <chart-title-update
+          :title-class="title_class"
+          :chart-info="chartInfo"
+        />
         <title-remark
           v-if="remarkCfg.show"
           style="text-shadow: none!important;margin-left: 4px;"
diff --git a/frontend/src/views/chart/components/ChartTitleUpdate.vue b/frontend/src/views/chart/components/ChartTitleUpdate.vue
index 6470e26293..684ca0c194 100644
--- a/frontend/src/views/chart/components/ChartTitleUpdate.vue
+++ b/frontend/src/views/chart/components/ChartTitleUpdate.vue
@@ -1,17 +1,33 @@
 <template>
-  <el-input
+  <div
     v-if="chartTitleEditer"
-    ref="chartTitle"
-    v-model.lazy="chartTitleUpdate"
     v-clickoutside="lostFocus"
-    clearable
-    type="text"
-    class="chart-input-title"
-    @blur="changeEditStatus"
-  />
+    class="ipnut-wrap"
+  >
+    <input
+      ref="chartTitle"
+      v-model="chartTitleUpdate"
+      type="text"
+      :style="inputStyle"
+      class="chart-input-title"
+      @blur="changeEditStatus"
+    >
+    <i
+      v-if="showClose"
+      class="el-icon-circle-close"
+      @mousedown.prevent
+      @click="chartTitleUpdate = ''"
+    />
+  </div>
   <p
     v-else
-    style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;min-width: 30px"
+    style="
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+      display: inline;
+      min-width: 30px;
+    "
     @click.stop="handleTitleEditer"
   >{{ chart.title }}</p>
 </template>
@@ -32,13 +48,18 @@ export default {
     chartInfo: {
       type: Object,
       default: () => {}
+    },
+    titleClass: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {
     return {
       chartTitleEditer: false,
       chartTitleUpdate: '',
-      chart: {}
+      chart: {},
+      showClose: false
     }
   },
   computed: {
@@ -48,6 +69,10 @@ export default {
     ...mapState(['mobileLayoutStatus', 'previewVisible']),
     panelInfo() {
       return this.$store.state.panel.panelInfo
+    },
+    inputStyle() {
+      const { fontSize, color, fontWeight, fontStyle, fontFamily } = this.titleClass
+      return { fontSize, color, fontWeight, fontStyle, fontFamily, height: fontSize }
     }
   },
   watch: {
@@ -58,6 +83,9 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    chartTitleUpdate(val) {
+      this.showClose = !!val
     }
   },
   methods: {
@@ -274,13 +302,17 @@ export default {
     },
     lostFocus() {
       this.chartTitleEditer = false
+      this.showClose = false
     },
     handleTitleEditer() {
       if (
         this.mainActiveName !== 'PanelEdit' ||
         this.mobileLayoutStatus ||
         this.previewVisible
-      ) { return }
+      ) {
+        return
+      }
+      this.showClose = true
       this.chartTitleEditer = true
       this.chartTitleUpdate = this.chart.title
       this.$nextTick(() => {
@@ -322,15 +354,38 @@ export default {
           ? JSON.parse(chartView.customFilter)
           : {}
         chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {}
+        chartView.customStyle.text.title = this.chartTitleUpdate
+
+        this.$store.commit('recordViewEdit', {
+          viewId: this.chart.id,
+          hasEdit: true
+        })
+        const view = JSON.parse(JSON.stringify(chartView))
+        view.xaxis = JSON.stringify(chartView.xaxis)
+        view.viewFields = JSON.stringify(chartView.viewFields)
+        view.xaxisExt = JSON.stringify(chartView.xaxisExt)
+        view.yaxis = JSON.stringify(chartView.yaxis)
+        view.yaxisExt = JSON.stringify(chartView.yaxisExt)
+        view.extStack = JSON.stringify(chartView.extStack)
+        view.drillFields = JSON.stringify(chartView.drillFields)
+        view.extBubble = JSON.stringify(chartView.extBubble)
+        view.customAttr = JSON.stringify(chartView.customAttr)
+        view.customStyle = JSON.stringify(chartView.customStyle)
+        view.customFilter = JSON.stringify(chartView.customFilter)
+        view.senior = JSON.stringify(chartView.senior)
+        view.title = this.chartTitleUpdate
+        view.name = this.chartTitleUpdate
+        view.stylePriority = chartView.stylePriority
         const viewSave = this.buildParam(chartView, true, 'chart', false, false)
         if (!viewSave) return
         viewEditSave(this.panelInfo.id, viewSave).then(() => {
           this.chart.title = this.chartTitleUpdate
           bus.$emit('aside-set-title', this.chart.title)
         })
-        this.$store.commit('recordViewEdit', {
-          viewId: this.chart.id,
-          hasEdit: true
+        bus.$emit('view-in-cache', {
+          type: 'styleChange',
+          viewId: chartView.id,
+          viewInfo: view
         })
       })
     }
@@ -339,7 +394,17 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep.chart-input-title {
+.ipnut-wrap {
+  min-width: 20%;
+  max-width: 50%;
+  display: flex;
+  align-items: center;
+  i {
+    cursor: pointer;
+    font-size: 12px;
+  }
+}
+.chart-input-title {
   word-break: break-word;
   font: 12px / 1.231 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
     'Microsoft YaHei', 'PingFang SC', sans-serif, 'Segoe UI Symbol';
@@ -352,31 +417,16 @@ export default {
   line-height: 26px;
   padding-left: 10px;
   padding-right: 10px;
-  background: transparent;
+  position: relative;
   outline: none;
+  z-index: 5;
+  color: #182b50;
+  font-weight: 400;
+  font-family: inherit;
+  border: none;
+  background: transparent;
   border-width: 0px 0px 1px;
   border-image: initial;
   border-bottom: 1px solid rgb(200, 203, 204);
-  z-index: 2;
-  height: 21px;
-  min-width: 20%;
-  max-width: 50%;
-  .el-input__inner {
-    height: 21px;
-    font-size: 12px;
-    color: #182b50;
-    font-weight: 400;
-    font-family: inherit;
-    border-radius: 0;
-    border: none;
-    line-height: 21px;
-    background: transparent;
-  }
-
-  .el-input__suffix {
-    .el-input__icon {
-      line-height: 21px;
-    }
-  }
 }
 </style>
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index 0ebe162b6a..08881845ae 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -11,7 +11,10 @@
       style="cursor: default;display: block;"
     >
       <div>
-        <chart-title-update :chart-info="chartInfo" />
+        <chart-title-update
+          :title-class="title_class"
+          :chart-info="chartInfo"
+        />
         <title-remark
           v-if="chart.render && chart.render === 'antv' && remarkCfg.show"
           style="text-shadow: none!important;margin-left: 4px;"
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index 693d747dc2..bc76b5a5d2 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -18,7 +18,10 @@
       style="cursor: default;display: block;"
     >
       <div>
-        <chart-title-update :chart-info="chartInfo" />
+        <chart-title-update
+          :title-class="title_class"
+          :chart-info="chartInfo"
+        />
         <title-remark
           v-if="chart.render && chart.render === 'antv' && remarkCfg.show"
           style="text-shadow: none!important;margin-left: 4px;"
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 7a4a1e141c..beac5191aa 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1854,11 +1854,11 @@ export default {
   },
 
   methods: {
-    setTitle(val) {
-      this.chart.name = val
-      this.chart.title = val
-      this.view.name = val
-      this.view.title = val
+    setTitle(title) {
+      this.view.customStyle.text = { ...this.view.customStyle.text, title }
+      this.view.title = title
+      this.view.name = title
+      this.calcStyle()
     },
     resetChartData() {
       this.getChart(this.param.id)
diff --git a/frontend/src/views/dataset/common/DatasetDetail.vue b/frontend/src/views/dataset/common/DatasetDetail.vue
index d2415b5528..9e1980578a 100644
--- a/frontend/src/views/dataset/common/DatasetDetail.vue
+++ b/frontend/src/views/dataset/common/DatasetDetail.vue
@@ -270,12 +270,12 @@ export default {
     }
     .info-title {
       font-size: 12px;
-      color: var(--deTextPrimary, #1f2329);
       margin-bottom: 4px !important;
+      color: var(--deTextSecondary, #646a73);
     }
     .info-content {
       font-size: 14px;
-      color: var(--deTextSecondary, #646a73);
+      color: var(--deTextPrimary, #1f2329);
     }
   }
 
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 6fd2df8ed9..c53f5b1d72 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -172,6 +172,7 @@ export default {
       this.currentPage.show = parseInt(this.form.row)
       this.currentPage.pageSize = parseInt(this.form.row)
       this.currentPage.page = 1
+      this.$refs.setCount?.doClose()
       this.$emit('reSearch', { form: this.form, page: this.currentPage })
     },
     pageChange(val) {
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index a553b902a4..a82a49ac07 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -8,6 +8,7 @@
         <span
           class="title-text"
           style="line-height: 26px"
+          :title="table.name"
         >
           {{ table.name }}
         </span>
@@ -396,6 +397,11 @@ export default {
       font-weight: 500;
       margin-right: 8px;
       color: var(--deTextPrimary, #1f2329);
+      display: inline-block;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 50%;
     }
 
     .de-tag {
diff --git a/frontend/src/views/system/log/FilterUser.vue b/frontend/src/views/system/log/FilterUser.vue
index 512098c640..494e64d8b6 100644
--- a/frontend/src/views/system/log/FilterUser.vue
+++ b/frontend/src/views/system/log/FilterUser.vue
@@ -67,20 +67,19 @@
         </div>
       </div>
     </div>
-    <div class="foot">
-      <el-button
-        class="btn normal"
+    <div class="de-foot">
+      <deBtn
+        secondary
         @click="reset"
       >{{
         $t("commons.reset")
-      }}</el-button>
-      <el-button
+      }}</deBtn>
+      <deBtn
         type="primary"
-        class="btn"
         @click="search"
       >{{
         $t("commons.adv_search.search")
-      }}</el-button>
+      }}</deBtn>
     </div>
   </el-drawer>
 </template>