Merge branch 'dev' of github.com:dataease/dataease into dev

2025-02-25 12:03:05 +08:00 · 2022-07-26 16:37:56 +08:00 · 2022-07-26 16:37:56 +08:00 · d0906e6f6c
commit d0906e6f6c
parent b55ba54f36 fa78502c4f
52 changed files with 1423 additions and 371 deletions
--- a/backend/src/main/java/io/dataease/plugins/server/RowPermissionsTreeController.java
+++ b/backend/src/main/java/io/dataease/plugins/server/RowPermissionsTreeController.java
@ -5,14 +5,18 @@ import com.github.pagehelper.PageHelper;
 import io.dataease.auth.annotation.DePermission;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.ResourceAuthLevel;
+import io.dataease.commons.exception.DEException;
 import io.dataease.commons.utils.PageUtils;
 import io.dataease.commons.utils.Pager;
+import io.dataease.i18n.Translator;
 import io.dataease.plugins.common.request.permission.DataSetRowPermissionsTreeDTO;
 import io.dataease.plugins.common.request.permission.DatasetRowPermissionsTreeRequest;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.auth.service.RowPermissionTreeService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.bind.annotation.*;

 import java.util.List;
@ -27,6 +31,14 @@ public class RowPermissionsTreeController {
    @ApiOperation("保存")
    @PostMapping("save")
    public void save(@RequestBody DataSetRowPermissionsTreeDTO request) {
+        if (StringUtils.isEmpty(request.getAuthTargetType())) {
+            DEException.throwException(Translator.get("i18n_row_permission_type_error"));
+        }
+        if (!StringUtils.equalsIgnoreCase(request.getAuthTargetType(), "sysParams")) {
+            if (ObjectUtils.isEmpty(request.getAuthTargetId())) {
+                DEException.throwException(Translator.get("i18n_row_permission_id"));
+            }
+        }
        RowPermissionTreeService rowPermissionTreeService = SpringContextUtil.getBean(RowPermissionTreeService.class);
        rowPermissionTreeService.save(request);
    }
--- a/backend/src/main/java/io/dataease/service/sys/SysUserService.java
+++ b/backend/src/main/java/io/dataease/service/sys/SysUserService.java
@ -73,6 +73,7 @@ public class SysUserService {

    @Transactional
    public int save(SysUserCreateRequest request) {
+        request.setUsername(request.getUsername().trim());
        checkUsername(request);
        checkEmail(request);
        checkNickName(request);
--- a/backend/src/main/resources/db/migration/V38__1.13.sql
+++ b/backend/src/main/resources/db/migration/V38__1.13.sql
@ -82,3 +82,18 @@ ADD COLUMN `update_time` bigint(13) NULL COMMENT '更新时间' AFTER `update_by
 ALTER TABLE `sys_task_email`
 ADD COLUMN `view_ids` varchar(255) NULL COMMENT '视图ID集合' AFTER `task_id`;

+UPDATE `sys_menu`
+SET
+    `permission` = 'user:add,user:del,user:edit'
+WHERE
+        `menu_id` = 35;
+UPDATE `sys_menu`
+SET
+    `permission` = 'datasource:read'
+WHERE
+        `menu_id` = 39;
+UPDATE `sys_menu`
+SET
+    `permission` = 'user:editPwd'
+WHERE
+        `menu_id` = 51;
--- a/backend/src/main/resources/i18n/messages_en_US.properties
+++ b/backend/src/main/resources/i18n/messages_en_US.properties
@ -195,3 +195,6 @@ I18N_EMAIL_CONFIG_ERROR=Email config error
 I18N_EMAIL_HOST_ERROR=Email host can not be empty
 I18N_EMAIL_PORT_ERROR=Email port can not be empty
 I18N_EMAIL_ACCOUNT_ERROR=Email account can not be empty
+
+i18n_row_permission_type_error=Row permission type can not be empty
+i18n_row_permission_id=Row permission type is Dept/Role/User,name can not be empty
--- a/backend/src/main/resources/i18n/messages_zh_CN.properties
+++ b/backend/src/main/resources/i18n/messages_zh_CN.properties
@ -197,3 +197,6 @@ I18N_EMAIL_CONFIG_ERROR=邮件配置错误
 I18N_EMAIL_HOST_ERROR=邮件主机不能为空
 I18N_EMAIL_PORT_ERROR=邮件端口不能为空
 I18N_EMAIL_ACCOUNT_ERROR=邮件账号不能为空
+
+i18n_row_permission_type_error=行权限类型不能为空
+i18n_row_permission_id=行权限类型为组织/角色/用户时，名称不能为空
--- a/backend/src/main/resources/i18n/messages_zh_TW.properties
+++ b/backend/src/main/resources/i18n/messages_zh_TW.properties
@ -193,3 +193,6 @@ I18N_EMAIL_CONFIG_ERROR=郵件配置錯誤
 I18N_EMAIL_HOST_ERROR=郵件主機不能為空
 I18N_EMAIL_PORT_ERROR=郵件端口不能為空
 I18N_EMAIL_ACCOUNT_ERROR=郵件賬號不能為空
+
+i18n_row_permission_type_error=行權限類型不能為空
+i18n_row_permission_id=行權限類型為組織/角色/用戶時，名稱不能為空
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@ -11,10 +11,12 @@
      <de-out-widget
        v-if="config.type==='custom'"
        :id="'component' + config.id"
+        ref="deOutWidget"
        class="component-custom"
        :style="getComponentStyleDefault(config.style)"
        style="overflow: hidden"
        :out-style="config.style"
+        :is-relation="isRelation"
        :element="config"
        :in-screen="inScreen"
        :edit-mode="'preview'"
@ -103,6 +105,10 @@ export default {
      type: String,
      required: false,
      default: 'NotProvided'
+    },
+    isRelation: {
+      type: Boolean,
+      default: false
    }
  },
  data() {
@ -150,7 +156,7 @@ export default {
      return style
    },
    componentActiveFlag() {
-      return (this.curComponent && this.config === this.curComponent && !this.previewVisible && this.showPosition.includes('multiplexing') && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
+      return (this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
    },
    curGap() {
      return (this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0
@ -247,6 +253,13 @@ export default {
    },
    closePreview() {
      this.previewVisible = false
+    },
+    getCondition() {
+      if (this.$refs.deOutWidget && this.$refs.deOutWidget.getCondition) {
+        return this.$refs.deOutWidget.getCondition()
+      } else {
+        return null
+      }
    }
  }
 }
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@ -24,10 +24,12 @@
        <ComponentWrapper
          v-for="(item, index) in componentDataInfo"
          :key="index"
+          ref="viewWrapperChild"
          :config="item"
          :search-count="searchCount"
          :in-screen="inScreen"
          :terminal="terminal"
+          :is-relation="relationFilterIds.includes(item.id)"
          :filters="filterMap[item.propValue && item.propValue.viewId]"
          :screen-shot="screenShot"
          :canvas-style-data="canvasStyleData"
@ -80,7 +82,7 @@ import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
 import bus from '@/utils/bus'
-import { buildFilterMap } from '@/utils/conditionUtil'
+import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
 import { hasDataPermission } from '@/utils/permission'
 const erd = elementResizeDetectorMaker()

@ -171,7 +173,8 @@ export default {
      showChartTableInfo: {},
      showChartInfoType: 'details',
      // 布局展示 1.pc pc端布局 2.mobile 移动端布局
-      terminal: 'pc'
+      terminal: 'pc',
+      buttonFilterMap: null
    }
  },
  created() {
@ -255,9 +258,29 @@ export default {
    ...mapState([
      'isClickComponent'
    ]),
+
+    searchButtonInfo() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      return result
+    },
    filterMap() {
-      const map = buildFilterMap(this.componentData)
-      return map
+      const result = buildFilterMap(this.componentData)
+      if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            result[key] = filters
+          }
+        }
+      }
+      return result
+    },
+    buttonExist() {
+      return this.searchButtonInfo && this.searchButtonInfo.buttonExist
+    },
+    relationFilterIds() {
+      return this.buttonExist && this.searchButtonInfo.relationFilterIds || []
    }
  },
  watch: {
@ -283,14 +306,101 @@ export default {
    if (this.terminal === 'mobile') {
      this.initMobileCanvas()
    }
+    bus.$on('trigger-search-button', this.triggerSearchButton)
  },
  beforeDestroy() {
    erd.uninstall(this.$refs.canvasInfoTemp)
    erd.uninstall(this.$refs.canvasInfoMain)
    clearInterval(this.timer)
    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
+    bus.$on('trigger-search-button', this.triggerSearchButton)
  },
  methods: {
+    triggerSearchButton() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      this.searchButtonInfo.autoTrigger = result.autoTrigger
+      this.searchButtonInfo.filterMap = result.filterMap
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+
+      this.componentData.forEach(component => {
+        if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
+          component.filters = this.buttonFilterMap[component.propValue.viewId]
+        }
+      })
+    },
+    buildButtonFilterMap(panelItems) {
+      const result = {
+        buttonExist: false,
+        relationFilterIds: [],
+        autoTrigger: true,
+        filterMap: {
+
+        }
+      }
+      if (!panelItems || !panelItems.length) return result
+      let sureButtonItem = null
+      result.buttonExist = panelItems.some(item => {
+        if (item.type === 'custom-button' && item.serviceName === 'buttonSureWidget') {
+          sureButtonItem = item
+          return true
+        }
+      })
+
+      if (!result.buttonExist) return result
+
+      const customRange = sureButtonItem.options.attrs.customRange
+      result.autoTrigger = sureButtonItem.options.attrs.autoTrigger
+      const allFilters = panelItems.filter(item => item.type === 'custom')
+
+      const matchFilters = customRange && allFilters.filter(item => sureButtonItem.options.attrs.filterIds.includes(item.id)) || allFilters
+
+      result.relationFilterIds = matchFilters.map(item => item.id)
+
+      let viewKeyMap = buildViewKeyMap(panelItems)
+      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap)
+      result.filterMap = viewKeyMap
+      return result
+    },
+    buildViewKeyFilters(panelItems, result) {
+      const refs = this.$refs
+      if (!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result
+      panelItems.forEach((element) => {
+        if (element.type !== 'custom') {
+          return true
+        }
+
+        const index = this.getComponentIndex(element.id)
+        if (index < 0) {
+          return true
+        }
+        let param = null
+        const wrapperChild = refs['viewWrapperChild'][index]
+        param = wrapperChild.getCondition && wrapperChild.getCondition()
+        const condition = formatCondition(param)
+        const vValid = valueValid(condition)
+        const filterComponentId = condition.componentId
+        Object.keys(result).forEach(viewId => {
+          const vidMatch = viewIdMatch(condition.viewIds, viewId)
+          const viewFilters = result[viewId]
+          let j = viewFilters.length
+          while (j--) {
+            const filter = viewFilters[j]
+            if (filter.componentId === filterComponentId) {
+              viewFilters.splice(j, 1)
+            }
+          }
+          vidMatch && vValid && viewFilters.push(condition)
+        })
+      })
+      return result
+    },
+    getComponentIndex(id) {
+      for (let index = 0; index < this.componentData.length; index++) {
+        const item = this.componentData[index]
+        if (item.id === id) return index
+      }
+      return -1
+    },
    _isMobile() {
      const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      this.terminal = flag ? 'mobile' : 'pc'
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@ -5,7 +5,7 @@
        <slot name="icon" />
        <el-dropdown-menu v-if="curComponent">
          <el-dropdown-item v-if="editFilter.includes(curComponent.type)" icon="el-icon-edit-outline" @click.native="edit">{{ $t('panel.edit') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
+          <el-dropdown-item v-if="curComponent.type != 'custom-button'" icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
          <el-dropdown-item icon="el-icon-delete" @click.native="deleteComponent">{{ $t('panel.delete') }}</el-dropdown-item>
          <el-dropdown-item v-if="!curComponent.auxiliaryMatrix">
            <el-dropdown placement="right-start">
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -68,6 +68,7 @@
        :style="getComponentStyleDefault(item.style)"
        :prop-value="item.propValue"
        :element="item"
+        :is-relation="searchButtonInfo && searchButtonInfo.buttonExist && searchButtonInfo.relationFilterIds.includes(item.id)"
        :out-style="getShapeStyleInt(item.style)"
        :active="item === curComponent"
        :h="getShapeStyleIntDeDrag(item.style,'height')"
@ -207,7 +208,7 @@ import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import DragShadow from '@/components/DeDrag/shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
-import { buildFilterMap } from '@/utils/conditionUtil'
+import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
 // 挤占式画布
 import _ from 'lodash'
 import $ from 'jquery'
@ -929,7 +930,9 @@ export default {
      yourList: [],
      linkJumpSetVisible: false,
      linkJumpSetViewId: null,
-      editShow: false
+      editShow: false,
+      buttonFilterMap: null,
+      autoTrigger: true
    }
  },
  computed: {
@ -1003,9 +1006,25 @@ export default {
      'curCanvasScale',
      'batchOptStatus'
    ]),
+
+    searchButtonInfo() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      return result
+    },
    filterMap() {
-      return buildFilterMap(this.componentData)
+      const result = buildFilterMap(this.componentData)
+      if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            result[key] = filters
          }
+        }
+      }
+      return result
+    }
+
  },
  watch: {
    customStyle: {
@ -1043,6 +1062,29 @@ export default {
        this.initMatrix()
      },
      deep: true
+    },
+    autoTrigger: {
+      handler(val, old) {
+        if (val === old) return
+        const result = buildFilterMap(this.componentData)
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+              filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            }
+
+            this.filterMap[key] = filters
+
+            this.componentData.forEach(item => {
+              if (item.type === 'view' && item.propValue.viewId === key) {
+                item.filters = filters
+              }
+            })
+          }
+        }
+      },
+      deep: true
    }
  },

@ -1055,6 +1097,8 @@ export default {
    eventBus.$on('startMoveIn', this.startMoveIn)
    eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
    bus.$on('onRemoveLastItem', this.removeLastItem)
+    bus.$on('trigger-search-button', this.triggerSearchButton)
+    bus.$on('refresh-button-info', this.refreshButtonInfo)

    // 矩阵定位调试模式
    if (this.psDebug) {
@ -1068,10 +1112,107 @@ export default {
    eventBus.$off('startMoveIn', this.startMoveIn)
    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
    bus.$off('onRemoveLastItem', this.removeLastItem)
+    bus.$off('trigger-search-button', this.triggerSearchButton)
+    bus.$off('refresh-button-info', this.refreshButtonInfo)
  },
  created() {
  },
  methods: {
+    refreshButtonInfo() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      this.searchButtonInfo.buttonExist = result.buttonExist
+      this.searchButtonInfo.relationFilterIds = result.relationFilterIds
+      this.searchButtonInfo.filterMap = result.filterMap
+      this.searchButtonInfo.autoTrigger = result.autoTrigger
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+    },
+    triggerSearchButton() {
+      this.refreshButtonInfo()
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+
+      this.componentData.forEach(component => {
+        if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
+          component.filters = this.buttonFilterMap[component.propValue.viewId]
+        }
+      })
+
+      // this.$store.commit('addViewFilter', param)
+    },
+    buildButtonFilterMap(panelItems) {
+      const result = {
+        buttonExist: false,
+        relationFilterIds: [],
+        autoTrigger: true,
+        filterMap: {}
+      }
+      if (!panelItems || !panelItems.length) return result
+      let sureButtonItem = null
+      result.buttonExist = panelItems.some(item => {
+        if (item.type === 'custom-button' && item.serviceName === 'buttonSureWidget') {
+          sureButtonItem = item
+          return true
+        }
+      })
+
+      if (!result.buttonExist) return result
+
+      const customRange = sureButtonItem.options.attrs.customRange
+      result.autoTrigger = sureButtonItem.options.attrs.autoTrigger
+      this.autoTrigger = result.autoTrigger
+
+      const allFilters = panelItems.filter(item => item.type === 'custom')
+
+      const matchFilters = customRange && allFilters.filter(item => sureButtonItem.options.attrs.filterIds.includes(item.id)) || allFilters
+
+      result.relationFilterIds = matchFilters.map(item => item.id)
+
+      let viewKeyMap = buildViewKeyMap(panelItems)
+      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap)
+      result.filterMap = viewKeyMap
+      return result
+    },
+    buildViewKeyFilters(panelItems, result) {
+      const refs = this.$refs
+      if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result
+      const len = this.$refs['wrapperChild'].length
+      panelItems.forEach((element) => {
+        if (element.type !== 'custom') {
+          return true
+        }
+
+        let param = null
+        const index = this.getComponentIndex(element.id)
+        if (index < 0 || index >= len) {
+          return true
+        }
+        const wrapperChild = refs['wrapperChild'][index]
+        if (!wrapperChild || !wrapperChild.getCondition) return true
+        param = wrapperChild.getCondition && wrapperChild.getCondition()
+        const condition = formatCondition(param)
+        const vValid = valueValid(condition)
+        const filterComponentId = condition.componentId
+        Object.keys(result).forEach(viewId => {
+          const vidMatch = viewIdMatch(condition.viewIds, viewId)
+          const viewFilters = result[viewId]
+          let j = viewFilters.length
+          while (j--) {
+            const filter = viewFilters[j]
+            if (filter.componentId === filterComponentId) {
+              viewFilters.splice(j, 1)
+            }
+          }
+          vidMatch && vValid && viewFilters.push(condition)
+        })
+      })
+      return result
+    },
+    getComponentIndex(id) {
+      for (let index = 0; index < this.componentData.length; index++) {
+        const item = this.componentData[index]
+        if (item.id === id) return index
+      }
+      return -1
+    },
    pluginEditHandler({ e, id }) {
      let index = -1
      for (let i = 0; i < this.componentData.length; i++) {
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@ -30,6 +30,7 @@
                ref="deOutWidget"
                class="component-custom"
                :out-style="element.style"
+                :is-relation="isRelation"
                :element="element"
                :in-draw="inDraw"
                :in-screen="inScreen"
@ -72,6 +73,10 @@ export default {
      type: String,
      require: false,
      default: 'edit'
+    },
+    isRelation: {
+      type: Boolean,
+      default: false
    }
  },
  data() {
@ -152,6 +157,12 @@ export default {
          alignItems: 'center'
        }
      }
+    },
+    getCondition() {
+      if (this.$refs && this.$refs['deOutWidget'] && this.$refs['deOutWidget'].getCondition) {
+        return this.$refs['deOutWidget'].getCondition()
+      }
+      return null
    }
  }
 }
--- a/frontend/src/components/gridTable/index.vue
+++ b/frontend/src/components/gridTable/index.vue
@ -169,6 +169,15 @@ export default {
    }
  }

+  .el-table::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    border-top: 1px solid rgba(31, 35, 41, 0.15);;
+  }
+
  ::v-deep .el-table__fixed-body-wrapper {
    tr {
        background-color: var(--TableBG, #ffffff) !important;
--- a/frontend/src/components/widget/DeWidget/DeButton.vue
+++ b/frontend/src/components/widget/DeWidget/DeButton.vue
@ -1,17 +1,20 @@
 <template>

  <el-button
-    v-if="options!== null && options.attrs!==null"
-    :type="options.attrs.type"
-    :round="options.attrs.round"
-    :plain="options.attrs.plain"
+    v-if="element.options!== null && element.options.attrs!==null"
+    :type="element.options.attrs.type"
+    :round="element.options.attrs.round"
+    :plain="element.options.attrs.plain"
    :size="size"
+    class="de-search-button"
+    @click="triggerSearch"
  >
-    {{ options.value }}
+    {{ element.options.value }}
  </el-button>
 </template>

 <script>
+import bus from '@/utils/bus'
 export default {

  props: {
@ -27,17 +30,23 @@ export default {
  },
  data() {
    return {
-      options: null,
      operator: 'eq',
      values: null
    }
  },
  created() {
-    this.options = this.element.options
+  },
+  methods: {
+    triggerSearch() {
+      bus.$emit('trigger-search-button')
+    }
  }
 }
 </script>

 <style lang="scss" scoped>
-
+.de-search-button {
+  height: 100%;
+  width: 100%;
+}
 </style>
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@ -46,7 +46,11 @@ export default {
      required: false,
      default: true
    },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
  },
  data() {
    return {
@ -170,14 +174,18 @@ export default {
    search() {
      this.setCondition()
    },
-    setCondition() {
+    getCondition() {
      const param = {
        component: this.element,
        value: this.formatFilterValue(),
        operator: this.operator
      }
      param.value = this.formatValues(param.value)
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
    },
    dateChange(value) {
      if (!this.inDraw) {
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@ -31,7 +31,11 @@ export default {
      type: Boolean,
      default: true
    },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
  },
  data() {
    return {
@ -91,13 +95,17 @@ export default {
      }
      this.setCondition()
    },
-    setCondition() {
+    getCondition() {
      const param = {
        component: this.element,
        value: !this.value ? [] : Array.isArray(this.value) ? this.value : [this.value],
        operator: this.operator
      }
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
    },
    setEdit() {
      this.canEdit = true
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@ -29,7 +29,11 @@ export default {
      type: Boolean,
      default: true
    },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
  },

  data() {
@ -194,33 +198,53 @@ export default {
        })
      })
    },
-    setCondition() {
+    getCondition() {
      const param = {
        component: this.element,
-        // value: !this.values ? [] : Array.isArray(this.values) ? this.values : [this.values],
        value: [this.form.min, this.form.max],
        operator: this.operator
      }
+      if (this.form.min && this.form.max) {
+        return param
+      }
+      if (!this.form.min && !this.form.max) {
+        param.value = []
+        return param
+      }
+      if (this.form.min) {
+        param.value = [this.form.min]
+        param.operator = 'ge'
+        return param
+      }
+      if (this.form.max) {
+        param.value = [this.form.max]
+        param.operator = 'le'
+        return param
+      }
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()

      if (this.form.min && this.form.max) {
-        this.inDraw && this.$store.commit('addViewFilter', param)
+        !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
        return
      }
      if (!this.form.min && !this.form.max) {
        param.value = []
-        this.inDraw && this.$store.commit('addViewFilter', param)
+        !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
        return
      }
      if (this.form.min) {
        param.value = [this.form.min]
        param.operator = 'ge'
-        this.inDraw && this.$store.commit('addViewFilter', param)
+        !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
        return
      }
      if (this.form.max) {
        param.value = [this.form.max]
        param.operator = 'le'
-        this.inDraw && this.$store.commit('addViewFilter', param)
+        !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
        return
      }
    },
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@ -58,7 +58,11 @@ export default {
      required: false,
      default: true
    },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
  },
  data() {
    return {
@ -276,14 +280,17 @@ export default {
        this.handleElTagStyle()
      })
    },
-
-    setCondition() {
+    getCondition() {
      const param = {
        component: this.element,
        value: this.formatFilterValue(),
        operator: this.operator
      }
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
    },
    formatFilterValue() {
      if (this.value === null) return []
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@ -58,7 +58,11 @@ export default {
      required: false,
      default: true
    },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
  },
  data() {
    return {
@ -273,14 +277,17 @@ export default {
      }
      this.setCondition()
    },
-
-    setCondition() {
+    getCondition() {
      const param = {
        component: this.element,
        value: this.formatFilterValue(),
        operator: this.operator
      }
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
    },
    formatFilterValue() {
      if (this.value === null) return []
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@ -47,7 +47,11 @@ export default {
      required: false,
      default: true
    },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
  },
  data() {
    return {
@ -279,7 +283,7 @@ export default {
      this.setCondition()
    },

-    setCondition() {
+    getCondition() {
      const val = this.formatFilterValue()

      const param = {
@ -288,7 +292,12 @@ export default {
        operator: this.operator,
        isTree: true
      }
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
    },
    formatFilterValue() {
      const SEPARATOR = '-de-'
--- a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
@ -2,7 +2,7 @@ import { WidgetService } from '../service/WidgetService'

 const leftPanel = {
  icon: 'iconfont icon-chaxunsousuo',
-  label: '查询按钮',
+  label: 'desearchbutton.label',
  defaultClass: 'time-filter'
 }

@ -24,7 +24,8 @@ const drawPanel = {
      round: false,
      plain: true,
      customRange: false,
-      filterIds: []
+      filterIds: [],
+      autoTrigger: true
    },
    value: '查询'
  },
--- a/frontend/src/directive/index.js
+++ b/frontend/src/directive/index.js
@ -64,6 +64,36 @@ export const bottom2TopDrag = {
  }
 }

+const closePress =  {
+  inserted: function (el) {
+    el.querySelector('.el-drawer__close-btn').onmousedown = function (e) {
+      e.currentTarget.style.background = '#d2d3d4';
+    }
+    el.querySelector('.el-drawer__close-btn').onmouseup = function (e) {
+      e.currentTarget.style.background = 'none';
+    }
+  }
+}
+
+// const btnPress =  {
+//   inserted: function (el) {
+//     el.onmousedown = function () {
+//       el.style.background = '#EFF0F1';
+//     }
+//     el.onmouseenter = function () {
+//       el.style.background = '#F5F6F7 !important';
+//     }
+//     el.onmouseleave = function () {
+//       el.style.background = 'none';
+//     }
+//     el.onmouseup = function () {
+//       el.style.background = 'none';
+//     }
+//   }
+// }
+
+// #EFF0F1
+
 export default {
  install(Vue) {
    // Vue.directive('data-permission', dataPermission)
@ -71,6 +101,8 @@ export default {
    Vue.directive('left-to-right-drag', left2RightDrag)
    Vue.directive('right-to-left-drag', right2LeftDrag)
    Vue.directive('bottom-to-top-drag', bottom2TopDrag)
+    Vue.directive('closePress', closePress)
+    // Vue.directive('btnPress', btnPress)
  }
 }

--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -1173,7 +1173,16 @@ export default {
    conditions_can_not_empty: 'Conditions can not be empty，if unnecessary，please delete the field',
    remark: 'Remark',
    remark_edit: 'Edit Remark',
-    remark_bg_color: 'Background Fill'
+    remark_bg_color: 'Background Fill',
+    quota_font_family: 'Value Font Family',
+    quota_text_style: 'Value Style',
+    quota_letter_space: 'Value Letter Space',
+    dimension_font_family: 'Name Font Family',
+    dimension_text_style: 'Name Style',
+    dimension_letter_space: 'Name Letter Space',
+    font_family: 'Font Family',
+    letter_space: 'Letter Space',
+    font_shadow: 'Font Shadow'
  },
  dataset: {
    parse_filed: 'Parse Field',
@ -2047,6 +2056,15 @@ export default {
    min_out_max: 'The min value must be less than the max value',
    max_out_min: 'The max value must be more than the min value'
  },
+  desearchbutton: {
+    label: 'Search Button',
+    text: 'Text',
+    auto_trigger: 'Auto Trigger',
+    range: 'Ranger',
+    relative: 'Relation',
+    auto_trigger_tip: 'Automatically trigger once when entering the preview page',
+    range_tip: 'Default association all filter components'
+  },
  denumberselect: {
    label: 'Number selector',
    placeholder: 'Please select'
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -1172,7 +1172,16 @@ export default {
    conditions_can_not_empty: '字段的條件不能為空，若無條件，請直接刪除該字段',
    remark: '備註',
    remark_edit: '編輯備註',
-    remark_bg_color: '背景填充'
+    remark_bg_color: '背景填充',
+    quota_font_family: '值字體',
+    quota_text_style: '值樣式',
+    quota_letter_space: '值字間距',
+    dimension_font_family: '名稱字體',
+    dimension_text_style: '名稱樣式',
+    dimension_letter_space: '名稱字間距',
+    font_family: '字體',
+    letter_space: '字間距',
+    font_shadow: '字體陰影'
  },
  dataset: {
    parse_filed: '解析字段',
@ -2058,6 +2067,15 @@ export default {
    min_out_max: '最小值必須小於最大值',
    max_out_min: '最大值必須大於最小值'
  },
+  desearchbutton: {
+    label: '查詢按鈕',
+    text: '名稱',
+    auto_trigger: '自動觸發',
+    range: '控製範圍',
+    relative: '關聯組件',
+    auto_trigger_tip: '進入預覽頁面自動觸發一次',
+    range_tip: '默認關聯全部過濾組件'
+  },
  denumberselect: {
    label: '數字下拉',
    placeholder: '請選擇'
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -1174,7 +1174,16 @@ export default {
    conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
    remark: '备注',
    remark_edit: '编辑备注',
-    remark_bg_color: '背景填充'
+    remark_bg_color: '背景填充',
+    quota_font_family: '值字体',
+    quota_text_style: '值样式',
+    quota_letter_space: '值字间距',
+    dimension_font_family: '名称字体',
+    dimension_text_style: '名称样式',
+    dimension_letter_space: '名称字间距',
+    font_family: '字体',
+    letter_space: '字间距',
+    font_shadow: '字体阴影'
  },
  dataset: {
    parse_filed: '解析字段',
@ -2068,6 +2077,15 @@ export default {
    min_out_max: '最小值必须小于最大值',
    max_out_min: '最大值必须大于最小值'
  },
+  desearchbutton: {
+    label: '查询按钮',
+    text: '名称',
+    auto_trigger: '自动触发',
+    range: '控制范围',
+    relative: '关联组件',
+    auto_trigger_tip: '进入预览页面自动触发一次',
+    range_tip: '默认关联全部过滤组件'
+  },
  denumberselect: {
    label: '数字下拉',
    placeholder: '请选择'
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@ -1,12 +1,13 @@
 <template>
  <!-- <div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}"> -->
-  <div :class="{ 'has-logo': showLogo }">
+  <div :class="{ 'has-logo': showLogo }" class="de-sidebar-container">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
      :unique-opened="false"
      :collapse-transition="false"
+      class="de-el-menu"
      mode="vertical"
    >
      <sidebar-item
@ -31,7 +32,7 @@
 </template>

 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import Logo from "./Logo";
 import SidebarItem from "./SidebarItem";
 import variables from "@/styles/variables.scss";
@ -39,9 +40,11 @@ import path from "path";
 import { isExternal } from "@/utils/validate";
 export default {
  components: { SidebarItem, Logo },
-
  computed: {
    ...mapGetters(["sidebar"]),
+    ...mapState({
+      isCollapse: state => state.isCollapse,
+    }),
    routes() {
      // return this.$router.options.routes
      if (this.isCollapse) {
@ -67,14 +70,9 @@ export default {
      return variables;
    },
  },
-  data() {
-    return {
-      isCollapse: false,
-    };
-  },
  methods: {
    changeSideWidth() {
-      this.isCollapse = !this.isCollapse;
+      this.$store.commit('setIsCollapse', !this.isCollapse);
      this.$emit("changeSideWidth", this.isCollapse ? "70px" : "");
    },
    resolvePath(routePath) {
@ -113,9 +111,18 @@ export default {
 </script>

 <style lang="scss" scoped>
+.de-sidebar-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.de-el-menu {
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
 .sidebar-collapse-btn {
  height: 48px;
-  position: fixed;
+  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #1f232926;
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@ -175,13 +175,13 @@ export default {
  }
  .le-aside-container {
      .sidebar-container {
-        width: 100% !important;
-        position: initial !important;
-        height: calc(100vh - 80px) !important;
-        overflow-x: hidden !important;
-        overflow-y: auto !important;
+        width: 100%;
+        position: relative !important;
+        height: 100%;
+        top: 0 !important;
        background-color: var(--SiderBG) !important;
      }
+      overflow: hidden;
  }
  .full-height {
    height: 100vh !important;
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -23,6 +23,8 @@ import './utils/dialog'
 import DeComplexInput from '@/components/business/condition-table/DeComplexInput'
 import DeComplexSelect from '@/components/business/condition-table/DeComplexSelect'
 import DeViewSelect from '@/components/DeViewSelect'
+import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
+import TitleRemark from '@/views/chart/view/TitleRemark'
 import '@/components/canvas/custom-component' // 注册自定义组件

 import '@/utils/DateUtil'
@ -90,6 +92,8 @@ Vue.component('Treeselect', Treeselect)
 Vue.component('DeComplexInput', DeComplexInput)
 Vue.component('DeComplexSelect', DeComplexSelect)
 Vue.component('DeViewSelect', DeViewSelect)
+Vue.component('RemarkEditor', RemarkEditor)
+Vue.component('TitleRemark', TitleRemark)
 Vue.config.productionTip = false

 import vueToPdf from 'vue-to-pdf'
--- a/frontend/src/permission.js
+++ b/frontend/src/permission.js
@ -189,10 +189,20 @@ const filterRouter = routers => {
  })
 }
 const hasPermission = (router, user_permissions) => {
-  // 菜单要求权限 但是当前用户权限没有包含菜单权限
-  if (router.permission && !user_permissions.includes(router.permission)) {
+  // 判断是否有符合权限 eg. user:read,user:delete
+  if (router.permission && router.permission.indexOf(',') > -1) {
+    const permissions = router.permission.split(',')
+    const permissionsFilter = permissions.filter(permission => {
+      return user_permissions.includes(permission)
+    })
+    if (!permissionsFilter || permissionsFilter.length === 0) {
      return false
    }
+  } else if (router.permission && !user_permissions.includes(router.permission)) {
+    // 菜单要求权限 但是当前用户权限没有包含菜单权限
+    return false
+  }
+
  if (!filterLic(router)) {
    return false
  }
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@ -108,6 +108,8 @@ const data = {
      y: 600
    },
    scrollAutoMove: 0,
+    // 系统管理菜单是否收缩
+    isCollapse: false,
    // 视图是否编辑记录
    panelViewEditInfo: {},
    // 仪表板视图明细
@ -151,7 +153,9 @@ const data = {
    setEditMode(state, mode) {
      state.editMode = mode
    },
-
+    setIsCollapse(state, isCollapse) {
+      state.isCollapse = isCollapse
+    },
    setCanvasStyle(state, style) {
      if (style) {
        style['selfAdaption'] = true
@ -239,6 +243,7 @@ const data = {
        return newItem
      })
    },
+
    addViewFilter(state, data) {
      const condition = formatCondition(data)
      const vValid = valueValid(condition)
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@ -111,8 +111,8 @@ div:focus {
 }

 .de-button-dialog {
-  min-width: 250px !important;
-  width: 30% !important;
+  min-width: 200px !important;
+  width: 27% !important;

  .el-dialog__header {
    padding: 10px 20px !important;
--- a/frontend/src/utils/conditionUtil.js
+++ b/frontend/src/utils/conditionUtil.js
@ -51,8 +51,8 @@ export const formatLinkageCondition = obj => {
  return condition
 }

-export const buildFilterMap = panelItems => {
-  const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
+export const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
+export const buildViewKeyMap = panelItems => {
  const result = {}
  panelItems.forEach(element => {
    if (element.type === 'view') {
@ -66,12 +66,18 @@ export const buildFilterMap = panelItems => {
      })
    }
  })
-  panelItems.forEach(element => {
+  return result
+}
+
+export const buildViewKeyFilters = (panelItems, result) => {
+  panelItems.forEach((element, index) => {
    if (element.type !== 'custom') {
      return true
    }
+
+    let param = null
    const widget = ApplicationContext.getService(element.serviceName)
-    const param = widget.getParam(element)
+    param = widget.getParam(element)
    const condition = formatCondition(param)
    const vValid = valueValid(condition)
    const filterComponentId = condition.componentId
@ -90,3 +96,9 @@ export const buildFilterMap = panelItems => {
  })
  return result
 }
+export const buildFilterMap = panelItems => {
+  let result = buildViewKeyMap(panelItems)
+
+  result = buildViewKeyFilters(panelItems, result)
+  return result
+}
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@ -61,6 +61,16 @@ export const DEFAULT_SIZE = {
  spaceSplit: 10,
  dimensionShow: true,
  quotaShow: true,
+  quotaFontFamily: 'Microsoft YaHei',
+  quotaFontIsBolder: false,
+  quotaFontIsItalic: false,
+  quotaLetterSpace: '0',
+  quotaFontShadow: false,
+  dimensionFontFamily: 'Microsoft YaHei',
+  dimensionFontIsBolder: false,
+  dimensionFontIsItalic: false,
+  dimensionLetterSpace: '0',
+  dimensionFontShadow: false,
  scatterSymbol: 'circle',
  scatterSymbolSize: 20,
  treemapWidth: 80,
@ -147,7 +157,10 @@ export const DEFAULT_TITLE_STYLE = {
  isBolder: true,
  remarkShow: false,
  remark: '',
-  remarkBackgroundColor: '#ffffffff'
+  remarkBackgroundColor: '#ffffffff',
+  fontFamily: 'Microsoft YaHei',
+  letterSpace: '0',
+  fontShadow: false
 }

 export const DEFAULT_TITLE_STYLE_DARK = {
@ -157,7 +170,13 @@ export const DEFAULT_TITLE_STYLE_DARK = {
  hPosition: 'left',
  vPosition: 'top',
  isItalic: false,
-  isBolder: true
+  isBolder: true,
+  remarkShow: false,
+  remark: '',
+  remarkBackgroundColor: '#ffffffff',
+  fontFamily: 'Microsoft YaHei',
+  letterSpace: '0',
+  fontShadow: false
 }

 export const DEFAULT_LEGEND_STYLE = {
@ -968,3 +987,24 @@ export const BASE_ECHARTS_SELECT = {
    shadowBlur: 2
  }
 }
+
+export const CHART_FONT_FAMILY = [
+  { name: '微软雅黑', value: 'Microsoft YaHei' },
+  { name: '宋体', value: 'SimSun' },
+  { name: '黑体', value: 'SimHei' },
+  { name: '楷体', value: 'KaiTi' }
+]
+
+export const CHART_FONT_LETTER_SPACE = [
+  { name: '0px', value: '0' },
+  { name: '1px', value: '1' },
+  { name: '2px', value: '2' },
+  { name: '3px', value: '3' },
+  { name: '4px', value: '4' },
+  { name: '5px', value: '5' },
+  { name: '6px', value: '6' },
+  { name: '7px', value: '7' },
+  { name: '8px', value: '8' },
+  { name: '9px', value: '9' },
+  { name: '10px', value: '10' }
+]
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@ -66,7 +66,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -108,7 +111,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -153,7 +159,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -175,8 +184,16 @@ export const TYPE_CONFIGS = [
      ],
      'size-selector-ant-v': [
        'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
        'dimensionShow',
        'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
        'spaceSplit'
      ],
      'title-selector-ant-v': [
@ -187,7 +204,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -209,8 +229,16 @@ export const TYPE_CONFIGS = [
      ],
      'size-selector-ant-v': [
        'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
        'dimensionShow',
        'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
        'spaceSplit'
      ],
      'title-selector-ant-v': [
@ -221,7 +249,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -261,7 +292,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -299,7 +333,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -368,7 +405,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -445,7 +485,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -522,7 +565,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -598,7 +644,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -667,7 +716,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -735,7 +787,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -811,7 +866,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -866,7 +924,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -921,7 +982,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -977,7 +1041,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -1030,7 +1097,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -1070,7 +1140,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -1138,7 +1211,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -1188,7 +1264,10 @@ export const TYPE_CONFIGS = [
        'hPosition',
        'isItalic',
        'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ],
      'legend-selector-ant-v': [
        'show',
@ -1295,8 +1374,16 @@ export const TYPE_CONFIGS = [
      ],
      'size-selector': [
        'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
        'dimensionShow',
        'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
        'spaceSplit'
      ],
      'title-selector': [
@ -1305,9 +1392,11 @@ export const TYPE_CONFIGS = [
        'fontSize',
        'color',
        'hPosition',
-        'vPosition',
        'isItalic',
-        'isBolder'
+        'isBolder',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
@ -1329,8 +1418,16 @@ export const TYPE_CONFIGS = [
      ],
      'size-selector': [
        'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
        'dimensionShow',
        'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
        'spaceSplit'
      ],
      'title-selector': [
@ -1340,7 +1437,10 @@ export const TYPE_CONFIGS = [
        'color',
        'hPosition',
        'isItalic',
-        'isBolder'
+        'isBolder',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
      ]
    }
  },
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@ -4,7 +4,7 @@
    <span v-if="chart.type && antVRenderStatus" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
      <div>
        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
      </div>
    </span>
    <div :id="chartId" style="width: 100%;overflow: hidden;" :style="{height:chartHeight}" />
@ -27,6 +27,7 @@ import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
 import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
 import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'

 export default {
  name: 'ChartComponentG2',
@ -322,6 +323,10 @@ export default {
          this.title_class.textAlign = customStyle.text.hPosition
          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
        }
        if (customStyle.background) {
          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@ -4,7 +4,7 @@
    <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
      <div>
        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
      </div>
    </span>
    <div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
@ -40,6 +40,7 @@ import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'

 export default {
  name: 'ChartComponentS2',
@ -322,6 +323,10 @@ export default {
          if (this.$refs.title) {
            this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
          }
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
        }
        if (customStyle.background) {
          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@ -16,6 +16,11 @@
              @input="inputOnInput($event)"
            />
          </el-form-item>
+          <el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
+            <el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
+              <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@ -42,6 +47,14 @@
            <el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
            <el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
          </el-form-item>
+          <el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
+            <el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
+              <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+            <el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+          </el-form-item>
        </div>
      </el-form>
    </el-col>
@ -49,7 +62,7 @@
 </template>

 <script>
-import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
 import { mapState } from 'vuex'

@ -77,7 +90,9 @@ export default {
      titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
      fontSize: [],
      isSetting: false,
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
    }
  },
  watch: {
@ -108,6 +123,10 @@ export default {
        }
        if (customStyle.text) {
          this.titleForm = customStyle.text
+
+          this.titleForm.fontFamily = this.titleForm.fontFamily ? this.titleForm.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.titleForm.letterSpace = this.titleForm.letterSpace ? this.titleForm.letterSpace : DEFAULT_TITLE_STYLE.letterSpace
+          this.titleForm.fontShadow = this.titleForm.fontShadow ? this.titleForm.fontShadow : DEFAULT_TITLE_STYLE.fontShadow
        }
        if (!this.batchOptStatus) {
          this.titleForm.title = this.chart.title
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@ -16,6 +16,11 @@
              @input="inputOnInput($event)"
            />
          </el-form-item>
+          <el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
+            <el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
+              <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@ -35,7 +40,14 @@
            <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
            <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
          </el-form-item>
-        </div>
+          <el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
+            <el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
+              <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+            <el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+          </el-form-item>

          <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
            <el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
@ -54,6 +66,7 @@
              <el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
            </el-form-item>
          </span>
+        </div>
      </el-form>
    </el-col>

@ -78,14 +91,12 @@
 </template>

 <script>
-import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
 import { mapState } from 'vuex'
-import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'

 export default {
  name: 'TitleSelectorAntV',
-  components: { RemarkEditor },
  props: {
    param: {
      type: Object,
@ -110,7 +121,9 @@ export default {
      isSetting: false,
      predefineColors: COLOR_PANEL,
      showEditRemark: false,
-      tmpRemark: ''
+      tmpRemark: '',
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
    }
  },
  computed: {
@ -144,6 +157,10 @@ export default {
          this.titleForm.remarkShow = this.titleForm.remarkShow ? this.titleForm.remarkShow : DEFAULT_TITLE_STYLE.remarkShow
          this.titleForm.remark = this.titleForm.remark ? this.titleForm.remark : DEFAULT_TITLE_STYLE.remark
          this.titleForm.remarkBackgroundColor = this.titleForm.remarkBackgroundColor ? this.titleForm.remarkBackgroundColor : DEFAULT_TITLE_STYLE.remarkBackgroundColor
+
+          this.titleForm.fontFamily = this.titleForm.fontFamily ? this.titleForm.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.titleForm.letterSpace = this.titleForm.letterSpace ? this.titleForm.letterSpace : DEFAULT_TITLE_STYLE.letterSpace
+          this.titleForm.fontShadow = this.titleForm.fontShadow ? this.titleForm.fontShadow : DEFAULT_TITLE_STYLE.fontShadow
        }
        if (!this.batchOptStatus) {
          this.titleForm.title = this.chart.title
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@ -3,7 +3,7 @@
    <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
      <div>
        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
      </div>
    </span>
    <div
@ -30,6 +30,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'

 export default {
  name: 'LabelNormal',
@ -157,8 +158,21 @@ export default {
        if (customAttr.size) {
          this.dimensionShow = customAttr.size.dimensionShow
          this.quotaShow = customAttr.size.quotaShow
+
          this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
+          this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
+          this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
+          this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
+          this.label_class.textShadow = customAttr.size.dimensionFontShadow ? '2px 2px 4px' : 'none'
+
          this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
+          this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
+          this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
+          this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
+          this.label_content_class.textShadow = customAttr.size.quotaFontShadow ? '2px 2px 4px' : 'none'
+
          if (!this.dimensionShow) {
            this.label_space.marginTop = '0px'
          } else {
@ -175,6 +189,10 @@ export default {
          this.title_class.textAlign = customStyle.text.hPosition
          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
        }
        if (customStyle.background) {
          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
@ -247,7 +265,7 @@ export default {
      } catch (err) {
        yAxis = JSON.parse(JSON.stringify(this.chart.yaxis))
      }
-      const f = yAxis[0]
+      const f = (yAxis && yAxis.length > 0) ? yAxis[0] : null
      if (f && f.formatterCfg) {
        const v = valueFormatter(value, f.formatterCfg)
        this.result = v.includes('NaN') ? value : v
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@ -4,7 +4,7 @@
    <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
      <div>
        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
      </div>
    </span>
    <div
@ -31,6 +31,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'

 export default {
  name: 'LabelNormalText',
@ -172,8 +173,21 @@ export default {
        if (customAttr.size) {
          this.dimensionShow = customAttr.size.dimensionShow
          this.quotaShow = customAttr.size.quotaShow
+
          this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
+          this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
+          this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
+          this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
+          this.label_class.textShadow = customAttr.size.dimensionFontShadow ? '2px 2px 4px' : 'none'
+
          this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
+          this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
+          this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
+          this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
+          this.label_content_class.textShadow = customAttr.size.quotaFontShadow ? '2px 2px 4px' : 'none'
+
          if (!this.dimensionShow) {
            this.label_space.marginTop = '0px'
          } else {
@ -190,6 +204,10 @@ export default {
          this.title_class.textAlign = customStyle.text.hPosition
          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
        }
        if (customStyle.background) {
          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@ -132,12 +132,30 @@
          <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeEndAngle')" />
        </el-form-item>
        <!--gauge-end-->
-        <!--text&label-end-->
+        <!--text&label-start-->
        <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
          </el-select>
        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('dimensionShow')" />
        <el-form-item v-show="showProperty('dimensionShow')" :label="$t('chart.dimension_show')" class="form-item">
          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
        </el-form-item>
@ -146,6 +164,24 @@
            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
          </el-select>
        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('spaceSplit')" />
        <el-form-item v-show="showProperty('spaceSplit')" :label="$t('chart.space_split')" class="form-item">
          <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
        </el-form-item>
@ -265,7 +301,7 @@
 </template>

 <script>
-import { DEFAULT_SIZE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
 export default {
  name: 'SizeSelector',
  props: {
@ -312,7 +348,9 @@ export default {
        { name: '50' + this.$t('chart.table_page_size_unit'), value: '50' },
        { name: '100' + this.$t('chart.table_page_size_unit'), value: '100' }
      ],
-      fontSize: []
+      fontSize: [],
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
    }
  },
  watch: {
@ -352,6 +390,17 @@ export default {

          this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
          this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
+
+          this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
+          this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
+          this.sizeForm.quotaLetterSpace = this.sizeForm.quotaLetterSpace ? this.sizeForm.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace
+          this.sizeForm.quotaFontShadow = this.sizeForm.quotaFontShadow ? this.sizeForm.quotaFontShadow : DEFAULT_SIZE.quotaFontShadow
+          this.sizeForm.dimensionFontFamily = this.sizeForm.dimensionFontFamily ? this.sizeForm.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.sizeForm.dimensionFontIsBolder = this.sizeForm.dimensionFontIsBolder ? this.sizeForm.dimensionFontIsBolder : DEFAULT_SIZE.dimensionFontIsBolder
+          this.sizeForm.dimensionFontIsItalic = this.sizeForm.dimensionFontIsItalic ? this.sizeForm.dimensionFontIsItalic : DEFAULT_SIZE.dimensionFontIsItalic
+          this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
+          this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
        }
      }
    },
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@ -321,11 +321,30 @@
      <!--gauge-end-->

      <el-form ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+        <!--text&label-start-->
        <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
          </el-select>
        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('dimensionShow')" />
        <el-form-item
          v-show="showProperty('dimensionShow')"
          :label="$t('chart.dimension_show')"
@ -346,6 +365,24 @@
            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
          </el-select>
        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('spaceSplit')" />
        <el-form-item
          v-show="showProperty('spaceSplit')"
          :label="$t('chart.space_split')"
@ -433,7 +470,7 @@
 </template>

 <script>
-import { DEFAULT_SIZE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'

 export default {
  name: 'SizeSelectorAntV',
@ -482,7 +519,9 @@ export default {
        { name: this.$t('chart.table_align_left'), value: 'left' },
        { name: this.$t('chart.table_align_center'), value: 'center' },
        { name: this.$t('chart.table_align_right'), value: 'right' }
-      ]
+      ],
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
    }
  },
  watch: {
@ -530,6 +569,17 @@ export default {
          this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign

          this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
+
+          this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
+          this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
+          this.sizeForm.quotaLetterSpace = this.sizeForm.quotaLetterSpace ? this.sizeForm.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace
+          this.sizeForm.quotaFontShadow = this.sizeForm.quotaFontShadow ? this.sizeForm.quotaFontShadow : DEFAULT_SIZE.quotaFontShadow
+          this.sizeForm.dimensionFontFamily = this.sizeForm.dimensionFontFamily ? this.sizeForm.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.sizeForm.dimensionFontIsBolder = this.sizeForm.dimensionFontIsBolder ? this.sizeForm.dimensionFontIsBolder : DEFAULT_SIZE.dimensionFontIsBolder
+          this.sizeForm.dimensionFontIsItalic = this.sizeForm.dimensionFontIsItalic ? this.sizeForm.dimensionFontIsItalic : DEFAULT_SIZE.dimensionFontIsItalic
+          this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
+          this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
        }
      }
    },
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -1478,7 +1478,9 @@ export default {
        this.view.resultCount = '1000'
      }
      if (switchType) {
-        this.view.senior.threshold.tableThreshold = []
+        this.view.senior.threshold = {
+          tableThreshold: []
+        }
      }
      if (switchType && (this.view.type === 'table-info' || this.chart.type === 'table-info') && this.view.xaxis.length > 0) {
        this.$message({
--- a/frontend/src/views/chart/view/TitleRemark.vue
+++ b/frontend/src/views/chart/view/TitleRemark.vue
@ -33,6 +33,32 @@ export default {
  padding: 10px;
  border-radius: 4px;
 }
+::-webkit-scrollbar {
+  width: 0px!important;
+  height: 0px!important;
+}
+::v-deep ol {
+  display: block!important;
+  list-style-type: decimal;
+  margin-block-start: 1em!important;
+  margin-block-end: 1em!important;
+  margin-inline-start: 0px!important;
+  margin-inline-end: 0px!important;
+  padding-inline-start: 40px!important;
+}
+::v-deep ul {
+  display: block!important;
+  list-style-type: disc;
+  margin-block-start: 1em!important;
+  margin-block-end: 1em!important;
+  margin-inline-start: 0px!important;
+  margin-inline-end: 0px!important;
+  padding-inline-start: 40px!important;
+}
+::v-deep li {
+  display: list-item!important;
+  text-align: -webkit-match-parent!important;
+}
 </style>
 <style>
 .el-popover.remark-pop{
--- a/frontend/src/views/panel/LinkJumpSet/index.vue
+++ b/frontend/src/views/panel/LinkJumpSet/index.vue
@ -13,7 +13,7 @@
          </el-row>
          <el-tree
            ref="linkJumpInfoTree"
-            :data="linkJumpInfoArray"
+            :data="linkJumpInfoXArray"
            node-key="sourceFieldId"
            highlight-current
            :props="treeProp"
@ -295,6 +295,7 @@ export default {
      },
      linkJump: null,
      linkJumpInfoArray: [],
+      linkJumpInfoXArray: [],
      mapJumpInfoArray: {},
      panelList: [],
      linkJumpInfo: null,
@ -358,7 +359,9 @@ export default {
  methods: {
    init() {
      const chartDetails = JSON.parse(this.panelViewDetailsInfo[this.viewId])
-      const checkStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt
+      const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt
+      const checkJumpStr = chartDetails.type.includes('table') ? checkAllAxisStr : chartDetails.xaxis + chartDetails.xaxisExt
+
      // 获取可关联的仪表板
      groupTree({}).then(rsp => {
        this.panelList = rsp.data
@ -367,10 +370,14 @@ export default {
      queryWithViewId(this.panelInfo.id, this.viewId).then(rsp => {
        this.linkJump = rsp.data
        this.linkJumpInfoArray = []
+        this.linkJumpInfoXArray = []
        this.linkJump.linkJumpInfoArray.forEach(linkJumpInfo => {
-          if (checkStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
+          if (checkJumpStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
            this.mapJumpInfoArray[linkJumpInfo.sourceFieldId] = linkJumpInfo
            this.linkJumpInfoArray.push(linkJumpInfo)
+            this.linkJumpInfoXArray.push(linkJumpInfo)
+          } else if (checkAllAxisStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
+            this.linkJumpInfoArray.push(linkJumpInfo)
          }
        })
        this.linkJumpInfoArray.forEach(linkJumpInfo => {
@ -523,9 +530,9 @@ export default {
        on.forEach(itm => {
          const ele = itm.slice(1, -1)
          if (name2Auto) {
-            name2Auto.push(nameIdMap[ele])
+            name2Auto.push(nameIdMap[itm])
          }
-          name2Id = name2Id.replace(ele, nameIdMap[ele])
+          name2Id = name2Id.replace(itm, '[' + nameIdMap[ele] + ']')
        })
      }
      return name2Id
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -254,7 +254,6 @@
        @cancel-handler="cancelHandler"
      />

-
    </el-dialog>

    <el-dialog
@ -653,6 +652,7 @@ export default {
    bus.$off('component-dialog-style', this.componentDialogStyle)
    bus.$off('previewFullScreenClose', this.previewFullScreenClose)
    bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
+    bus.$off('delete-condition', this.deleteCustomComponent)
    const elx = this.$refs.rightPanel
    elx && elx.remove()
  },
@ -673,6 +673,19 @@ export default {
      bus.$on('component-dialog-style', this.componentDialogStyle)
      bus.$on('previewFullScreenClose', this.previewFullScreenClose)
      bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
+      bus.$on('delete-condition', this.deleteCustomComponent)
+    },
+    deleteCustomComponent(param) {
+      param && param.componentId && this.componentData.forEach(com => {
+        if (com.type === 'custom-button' && com.options.attrs.filterIds) {
+          const filterIds = com.options.attrs.filterIds
+          let len = filterIds.length
+          while (len--) {
+            if (param.componentId === filterIds[len]) { filterIds.splice(len, 1) }
+          }
+          com.options.attrs.filterIds = filterIds
+        }
+      })
    },
    loadMultiplexingViewTree() {
      queryPanelMultiplexingViewTree().then(res => {
@ -1158,6 +1171,7 @@ export default {
      this.$store.commit('setComponentWithId', this.currentFilterCom)
      this.$store.commit('recordSnapshot', 'sureFilter')
      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
+      bus.$emit('refresh-button-info')
      this.closeButton()
    },
    cancelHandler() {
--- a/frontend/src/views/panel/filter/ButtonDialog.vue
+++ b/frontend/src/views/panel/filter/ButtonDialog.vue
@ -1,26 +1,29 @@
 <template>
  <div>
-    <el-form size="mini" ref="form" :model="form" label-width="100px">
-      <el-form-item label="名称">
-        <el-input v-model="currentElement.options.value"></el-input>
+    <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="80px">
+      <el-form-item :label="$t('desearchbutton.text')" prop="text">
+        <el-input v-model="currentElement.options.value" maxlength="10" show-word-limit />
      </el-form-item>

-      
-      <el-form-item label="自定义范围">
-        <el-switch v-model="myAttrs.customRange" @change="customRangeChange"></el-switch>
-        <el-link style="margin-left: 10px;" type="warning" disabled>默认关联全部过滤组件</el-link>
+      <el-form-item :label="$t('desearchbutton.auto_trigger')">
+        <el-switch v-model="myAttrs.autoTrigger" @change="autoTriggerChange" />
+        <el-link style="margin-left: 10px;" type="info" disabled>{{ $t('desearchbutton.auto_trigger_tip') }}</el-link>
      </el-form-item>

-      <el-form-item label="关联组件" v-if="myAttrs.customRange">
-        <el-select style="width: 300px;" multiple clearable v-model="myAttrs.filterIds" placeholder="请选择活动区域">
-          <el-option  v-for="(filter, index) in filters" :key="filter.id" :label="filter.showName" :value="filter.id" />
+      <el-form-item :label="$t('desearchbutton.range')">
+        <el-switch v-model="myAttrs.customRange" @change="customRangeChange" />
+        <el-link style="margin-left: 10px;" type="warning" disabled>{{ $t('desearchbutton.range_tip') }}</el-link>
+      </el-form-item>
+
+      <el-form-item v-if="myAttrs.customRange" :label="$t('desearchbutton.relative')">
+        <el-select v-model="myAttrs.filterIds" style="width: 280px;" multiple clearable>
+          <el-option v-for="(filter, index) in filters" :key="filter.id + index" :label="filter.showName" :value="filter.id" />
        </el-select>
      </el-form-item>

-      
      <el-form-item>
-        <el-button type="primary" @click="sure">确定</el-button>
-        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="sure">{{ $t('commons.confirm') }}</el-button>
+        <el-button @click="cancel">{{ $t('commons.cancel') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
@ -35,7 +38,7 @@ export default {
  props: {
    widgetInfo: {
      type: Object,
-      default: null,
+      default: null
    },
    element: {
      type: Object,
@ -49,14 +52,15 @@ export default {
      },
      currentElement: null,
      widget: null,
-      myAttrs: null
+      myAttrs: null,
+      rules: {
+        text: [
+          { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
+        ]
+      }
    }
  },
-  created() {
-    this.widget = this.widgetInfo
-    this.currentElement = JSON.parse(JSON.stringify(this.element))
-    this.myAttrs = this.currentElement.options.attrs
-  },
+
  computed: {

    ...mapState([
@ -65,7 +69,6 @@ export default {
    filters() {
      const datas = this.componentData.filter(item => item.type === 'custom')
      datas.forEach(item => {
-
        const serviceName = item.serviceName
        const widget = ApplicationContext.getService(serviceName)
        const showName = widget.initLeftPanel().label
@ -82,6 +85,14 @@ export default {
      return datas
    }
  },
+  watch: {
+
+  },
+  created() {
+    this.widget = this.widgetInfo
+    this.currentElement = JSON.parse(JSON.stringify(this.element))
+    this.myAttrs = this.currentElement.options.attrs
+  },
  methods: {
    sure() {
      this.$emit('sure-handler')
@ -94,6 +105,9 @@ export default {
    },
    customRangeChange(val) {
      this.myAttrs.filterIds = []
+    },
+    autoTriggerChange(val) {
+
    }
  }
 }
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@ -9,7 +9,7 @@
          v-for="(widget, index) in item"
          :key="widget.widgetName+index"
          :data-id="widget.widgetName"
-          draggable
+          :draggable="widget.widgetName !== 'buttonSureWidget' || !searchButtonExist"
          :data-index="index"
          :class="'filter-widget '+ (widget.defaultClass || '')"
        >
@ -27,7 +27,7 @@

 <script>
 import { ApplicationContext } from '@/utils/ApplicationContext'
-import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
+import { deepCopy } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 export default {
@ -35,16 +35,11 @@ export default {
  data() {
    return {
      panelInfo: this.$store.state.panel.panelInfo,
-      //   widgetSubjects: {
-      //     '文本过滤组件': [
-      //       'mySelectWidget'
-      //     ]
-      //   }
+
      widgetSubjects: {
        '时间过滤组件': [
          'timeYearWidget',
          'timeMonthWidget',
-          //   'timeQuarterWidget',
          'timeDateWidget',
          'timeDateRangeWidget'

@ -69,22 +64,44 @@ export default {
  computed: {
    ...mapState([
      'canvasStyleData',
-      'curCanvasScale'
-    ])
+      'curCanvasScale',
+      'componentData'
+    ]),
+    searchButtonExist() {
+      return this.componentData && this.componentData.some(component => component.type === 'custom-button' && component.serviceName === 'buttonSureWidget')
+    }
+  },
+  watch: {
+    searchButtonExist(val, old) {
+      if (val === old) return
+      if (val) {
+        this.widgetSubjects['按钮'][0].widgetName = 'buttonSureWidget'
+        this.widgetSubjects['按钮'][0].defaultClass = 'button-disable-filter'
+      } else {
+        this.widgetSubjects['按钮'][0].widgetName = 'buttonSureWidget'
+        this.widgetSubjects['按钮'][0].defaultClass = 'time-filter'
+      }
+    }
  },
  created() {
+    this.init()
+  },
+
+  methods: {
+    init() {
      for (const key in this.widgetSubjects) {
        const widgetNames = this.widgetSubjects[key]
        this.widgetSubjects[key] = widgetNames.map(widgetName => {
          const widget = ApplicationContext.getService(widgetName)
          const result = { widgetName: widgetName }
          Object.assign(result, widget.getLeftPanel())
+          if (this.searchButtonExist && widgetName === 'buttonSureWidget') {
+            result.defaultClass = 'button-disable-filter'
+          }
          return result
        })
      }
    },
-
-  methods: {
    handleDragStart(ev) {
      // 记录拖拽信息
      const dragComponentInfo = deepCopy(ApplicationContext.getService(ev.target.dataset.id).getDrawPanel())
@ -171,6 +188,16 @@ export default {
    overflow: hidden;
  }

+  .button-disable-filter {
+    background-color: #ecf5ff;
+    .filter-widget-icon {
+        color: #8cc5ff;
+    }
+    .filter-widget-text {
+        color: var(--TextActive, #8cc5ff);
+    }
+  }
+
  .time-filter {
    background-color: rgba(54,133,242,.1);
    .filter-widget-icon {
--- a/frontend/src/views/system/datasource/ApiHttpRequestForm.vue
+++ b/frontend/src/views/system/datasource/ApiHttpRequestForm.vue
@ -391,4 +391,9 @@ export default {
  float: right;
  margin-right: 45px;
 }
+
+::v-deep .el-tabs__nav-wrap::after,
+::v-deep .el-tabs__active-bar {
+  height: 1px !important;
+}
 </style>
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@ -407,6 +407,7 @@
      :visible.sync="edit_api_item"
      custom-class="api-datasource-drawer"
      size="840px"
+      v-closePress
      :before-close="closeEditItem"
      direction="rtl"
    >
@ -463,7 +464,7 @@
          </el-form-item>

          <div v-loading="loading">
-            <div class="row-rules">
+            <div class="row-rules mr40">
              <span>{{ $t("datasource.req_param") }}</span>
            </div>
            <!-- HTTP 请求参数 -->
@ -981,7 +982,6 @@ export default {
    },
    closeEditItem() {
      this.active = 0;
-      console.log(1, this.$refs.apiItem);
      this.$refs.apiItem.clearValidate();
      this.edit_api_item = false;
    },
@ -1122,14 +1122,30 @@ export default {
 <style lang="scss">
 .api-datasource-drawer {
  .el-drawer__header {
-    padding: 24px;
+    padding: 16px 24px;
    margin: 0;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #1f2329;
+    position: relative;
    border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
  }
  .el-drawer__body {
    padding: 0 24px 81px 24px;
@ -1144,7 +1160,7 @@ export default {
    font-weight: 500;
    line-height: 22px;
    padding-left: 10px;
-    margin: 24px 0;
+    margin: 24px 0 16px 0;

    &::before {
      content: "";
@ -1161,8 +1177,10 @@ export default {
  .input-with-select {
    .el-input-group__prepend {
      background-color: #fff;
+      border-color: #bbbfc4;
      .el-select {
        width: 84px !important;
+        color: #1f2329;
      }
    }
  }
@ -1215,6 +1233,7 @@ export default {
      line-height: 22px;
      text-align: center;
      color: #1f2329;
+      margin-top: 4px;
    }

    .is-process {
@ -1244,6 +1263,18 @@ export default {
    margin-left: 0 !important;
  }

+  .el-form-item {
+    margin-bottom: 28px;
+  }
+
+  .el-form-item__label {
+    padding-bottom: 8px;
+  }
+
+  .mr40 {
+    margin-top: 40px;
+  }
+
  .btn {
    border-radius: 4px;
    padding: 5px 26px 5px 26px;
--- a/frontend/src/views/system/user/filterUser.vue
+++ b/frontend/src/views/system/user/filterUser.vue
@ -4,6 +4,7 @@
    :visible.sync="userDrawer"
    custom-class="user-drawer"
    size="680px"
+    v-closePress
    direction="rtl"
  >
    <div class="filter">
@ -24,7 +25,7 @@
          @click="activeDeptChange(ele.id)"
          :class="[activeDept.includes(ele.id) ? 'active' : '']"
          :key="ele.id"
-          v-for="ele in selectDepts"
+          v-for="ele in selectDeptsCahe"
          >{{ ele.label }}</span>
        <el-popover
          placement="bottom"
@ -42,7 +43,7 @@
              :load="loadNode"
              :lazy="true"
              :expand-on-click-node="false"
-              :data="depts"
+              :data="deptsComputed"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
@ -54,8 +55,6 @@
              popper-class="tree-select"
              multiple
              :placeholder="$t('commons.please_select')"
-              @change="changeRole"
-              @remove-tag="changeRole"
              value-key="id"
            >
            <el-option
@ -77,7 +76,7 @@
          @click="activeRoleChange(ele.id)"
          :class="[activeRole.includes(ele.id) ? 'active' : '']"
          :key="ele.id"
-          v-for="ele in rolesValue"
+          v-for="ele in rolesValueCopy"
          >{{ ele.name }}</span
        >
        <el-popover
@ -96,7 +95,7 @@
            value-key="id"
          >
            <el-option
-              v-for="item in roles"
+              v-for="item in rolesComputed"
              :key="item.name"
              :label="item.name"
              :value="item"
@ -126,7 +125,8 @@ import { getDeptTree, treeByDeptId } from "@/api/system/dept";
 export default {
  data() {
    return {
-      value: [],
+      roleCahe: [],
+      deptCahe: [],
      roles: [],
      status: [{
        id: 1,
@ -140,6 +140,7 @@ export default {
      activeRole: [],
      depts: [],
      selectDepts: [],
+      selectDeptsCahe: [],
      activeDept: [],
      defaultProps: {
        children: "children",
@ -149,6 +150,17 @@ export default {
      userDrawer: false
    };
  },
+  computed: {
+    rolesComputed() {
+      return this.roles.filter(ele => !this.activeRole.includes(ele.id))
+    },
+    rolesValueCopy() {
+      return this.roleCahe.filter(ele => this.activeRole.includes(ele.id))
+    },
+    deptsComputed() {
+      return this.depts.filter(ele => !this.activeDept.includes(ele.id))
+    }
+  },
  mounted() {
    this.initRoles();
  },
@ -156,37 +168,53 @@ export default {
    // 获取弹窗内部门数据
    treeByDeptId() {
      treeByDeptId(0).then((res) => {
-        this.depts = res.data || [];
+        this.depts =  (res.data || []).map(ele =>  {
+        return {
+            ...ele,
+            leaf: !ele.hasChildren,
+          }
+        })
      });
    },
    changeRole() {
-      const roles = this.rolesValue.map((item) => item.id);
-      this.activeRole = this.activeRole.filter((ele) => roles.includes(ele));
+      if (this.roleCahe.length > this.rolesValue.length + this.activeRole.length) {
+        this.roleCahe = this.roleCahe.filter(ele => this.rolesValue.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
+        return;
+      }
+      const roleIdx = this.rolesValue.findIndex(ele => !this.roleCahe.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
+      if (roleIdx === -1) return
+      this.activeRole.push(this.rolesValue[roleIdx].id)
+      this.roleCahe.push(this.rolesValue[roleIdx]);
+      this.rolesValue.splice(roleIdx, 1)
    },
    activeRoleChange(id) {
      const roleIndex = this.activeRole.findIndex((ele) => ele === id);
      if (roleIndex === -1) {
        this.activeRole.push(id);
+        this.rolesValue = this.rolesValue.filter((ele) => ele.id !== id);
      } else {
        this.activeRole.splice(roleIndex, 1);
+        const role = this.roleCahe.find((ele) => ele.id === id);
+        this.rolesValue.push(role);
      }
    },
    handleNodeClick({ id, label }) {
-      const deptIndex = this.selectDepts.findIndex((ele) => ele.id === id);
-      if (deptIndex === -1) {
-        this.selectDepts.push({ id, label });
-      } else {
-        this.selectDepts.splice(deptIndex, 1);
-        this.changeDepts();
+      const deptIdx = this.selectDepts.findIndex((ele) => ele.id === id);
+      if (deptIdx !== -1) {
+        this.selectDepts.splice(deptIdx, 1);
+        this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
+        this.deptCahe = this.deptCahe.filter(ele => ele.id !== id)
+        return;
      }
+      this.activeDept.push(id)
+      this.selectDeptsCahe.push({ id, label });
+      this.deptCahe.push({ id, label });
    },
    activeDeptChange(id) {
-        const deptIndex = this.activeDept.findIndex((ele) => ele === id);
-      if (deptIndex === -1) {
-        this.activeDept.push(id);
-      } else {
-        this.activeDept.splice(deptIndex, 1);
-      }
+      const dept = this.deptCahe.find((ele) => ele.id === id)
+      this.selectDepts.push(dept);
+      this.activeDept = this.activeDept.filter(ele => ele !== id)
+      this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
    },
    statusChange(id) {
        const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
@ -206,8 +234,9 @@ export default {
        return;
      }
      getDeptTree(node.data.id).then((res) => {
+        const filterDept = (res.data || []).filter(ele => !this.activeDept.includes(ele.deptId))
        resolve(
-          res.data.map((dept) => {
+          filterDept.map((dept) => {
            return this.normalizer(dept);
          })
        );
@ -227,7 +256,21 @@ export default {
    },
    search() {
      this.userDrawer = false;
-      this.$emit('search', this.formatCondition())
+      this.$emit('search', this.formatCondition(), this.formatText())
+    },
+    formatText() {
+      const params = [];
+      if (this.activeStatus.length) {
+        let str = `状态:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label  + '、' +  pre, '')}`;
+        params.push(str.slice(0, str.length - 1 ))
+      }
+      if (this.activeDept.length) {
+        params.push(`组织:${this.selectDeptsCahe.reduce((pre,next) =>  pre.label  + '、' + next.label)}`)
+      }
+      if (this.activeRole.length) {
+        params.push(`角色:${this.rolesValueCopy.reduce((pre,next) => pre.label  + '、' +  next.labele)}`)
+      }
+      return params;
    },
    formatCondition() {
      const fildMap = {'r.role_id': this.activeRole, 'd.dept_id': this.activeDept, 'u.enabled': this.activeStatus}
@ -259,16 +302,33 @@ export default {
 <style lang="scss">
 .user-drawer {
  .el-drawer__header {
-    padding: 16px 21px 16px 24px;
+   padding: 16px 24px;
+    margin: 0;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
-    letter-spacing: 0px;
-    text-align: left;
    color: #1f2329;
+    position: relative;
+    box-sizing: border-box;
+    height: 57px;
+    mix-blend-mode: normal;
    border-bottom: 1px solid rgba(187, 191, 196, 0.5);
-    margin: 0;
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
  }

  .el-drawer__body {
@ -351,8 +411,9 @@ export default {
 }
 .tree-select {
  .el-select-dropdown__empty,
+  .el-scrollbar__wrap,
  .popper__arrow {
-    display: none;
+    display: none !important;
  }
 }

--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@ -26,9 +26,12 @@
        </el-input>
        <el-button
          class="normal btn"
-          icon="el-icon-setting"
+          icon="iconfont icon-icon-filter"
          @click="filterShow"
-          >筛选</el-button
+          >筛选<template v-if="filterTexts.length">
+            ({{ filterTexts.length }})
+          </template>
+          </el-button
        >
        <el-dropdown trigger="click" :hide-on-click="false">
          <el-button class="normal btn" icon="el-icon-setting"
@ -54,7 +57,18 @@
        </el-dropdown>
      </el-col>
    </el-row>
-    <div class="table-container">
+    <div class="filter-texts" v-if="filterTexts.length">
+      <span class="sum">{{ paginationConfig.total }}</span>
+      <span class="title">个结果</span>
+       <el-divider direction="vertical"></el-divider>
+      <p class="text" v-for="ele in filterTexts" :key="ele">{{ ele }} <i class="el-icon-close"></i></p>
+      <el-button
+          type="text"
+          icon="el-icon-delete"
+          @click="clearFilter"
+          >{{ $t("user.create") }}</el-button>
+    </div>
+    <div class="table-container" :class="[filterTexts.length ? 'table-container-filter' : '']">
      <grid-table
        v-if="canLoadDom"
        v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
@ -160,7 +174,7 @@
              width="321"
              :ref="'initPwd' + scope.row.userId"
              popper-class="reset-pwd"
-              trigger="hover"
+              trigger="click"
            >
              <i class="el-icon-warning"></i>
              <div class="tips">是否恢复为初始密码?</div>
@ -207,44 +221,6 @@
        </el-table-column>
      </grid-table>
    </div>
-    <el-dialog
-      :close-on-click-modal="false"
-      :title="$t('member.edit_password')"
-      :visible.sync="editPasswordVisible"
-      width="30%"
-      :destroy-on-close="true"
-      left
-      @close="handleClose"
-    >
-      <el-form
-        ref="editPasswordForm"
-        :model="ruleForm"
-        label-position="right"
-        label-width="120px"
-        :rules="rule"
-        class="demo-ruleForm"
-        @keypress.enter.native="editUserPassword('editPasswordForm')"
-      >
-        <el-form-item :label="$t('member.new_password')" prop="newPassword">
-          <el-input
-            v-model="ruleForm.newPassword"
-            type="password"
-            autocomplete="off"
-            show-password
-          />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="editPasswordVisible = false">{{
-          $t("commons.cancel")
-        }}</el-button>
-        <el-button
-          type="primary"
-          @click="editUserPassword('editPasswordForm')"
-          >{{ $t("commons.confirm") }}</el-button
-        >
-      </div>
-    </el-dialog>
    <keep-alive>
      <filterUser ref="filterUser" @search="filterDraw" ></filterUser>
    </keep-alive>
@ -310,8 +286,8 @@ export default {
        total: 0,
      },
      data: [],
+      filterTexts: [],
      dialogVisible: false,
-      editPasswordVisible: false,
      form: {
        roles: [
          {
@ -376,6 +352,9 @@ export default {
    document.removeEventListener('keypress', this.entryKey)
  },
  methods: {
+    clearFilter() {
+
+    },
    entryKey (event) {
      const keyCode = event.keyCode
      if (keyCode === 13) {
@ -438,8 +417,9 @@ export default {
      this.paginationConfig.currentPage = currentPage;
      this.search();
    },
-    filterDraw(condition) {
+    filterDraw(condition, filterTexts = []) {
      this.cacheCondition = condition;
+      this.filterTexts = filterTexts;
      this.initSearch()
    },
    search() {
@ -467,11 +447,6 @@ export default {
    edit(row) {
      this.$refs.userEditer.init(row);
    },
-    editPassword(row) {
-      this.editPasswordVisible = true;
-      const tempForm = Object.assign({}, row);
-      this.ruleForm = { userId: tempForm.userId };
-    },
    del(row) {
      this.$confirm(this.$t("确定删除该用户吗？"), "", {
        confirmButtonText: this.$t("commons.delete"),
@ -499,23 +474,6 @@ export default {
        customClass: "de-message-success de-message",
      });
    },
-    editUserPassword(editPasswordForm) {
-      this.$refs[editPasswordForm].validate((valid) => {
-        if (valid) {
-          editPassword(this.ruleForm).then((res) => {
-            this.$success(this.$t("commons.modify_success"));
-            this.editPasswordVisible = false;
-            this.initSearch();
-            this.user &&
-              this.user.userId &&
-              this.user.userId === editPasswordForm.userId &&
-              window.location.reload();
-          });
-        } else {
-          return false;
-        }
-      });
-    },
    handleClose() {
      this.depts = null;
      this.formType = "add";
@ -566,12 +524,57 @@ export default {
    margin: 0 -2px 0 4px;
  }
 }
+
+.table-container-filter {
+  height: calc(100% - 110px);
+}
+.filter-texts {
+  display: flex;
+  align-items: center;
+  margin: 17px 0;
+  font-family: 'PingFang SC';
+  font-weight: 400;
+
+  .sum {
+    color: #1F2329;;
+  }
+
+  .title {
+    color: #999999;
+    margin-left: 8px;
+  }
+
+  .text {
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 1px 22px 1px 6px;
+    display: flex;
+    align-items: center;
+    color: #0C296E;
+    font-size: 14px;
+    line-height: 22px;
+    background: rgba(51, 112, 255, 0.1);
+    border-radius: 2px;
+    margin: 0;
+    margin-right: 8px;
+    position: relative;
+    i {
+      position: absolute;
+      right: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+}
 .top-operate {
  margin-bottom: 16px;

  .btn {
    border-radius: 4px;
-    padding: 5px 12px 5px 12px;
+    padding: 5px 12px;
    //styleName: 中文/桌面端/正文 14 22 Regular;
    font-family: PingFang SC;
    font-size: 14px;
@ -581,6 +584,11 @@ export default {
    text-align: center;
    border: none;
    box-sizing: border-box;
+
+
+    ::v-deep span {
+      margin-left: 5px;
+    }
  }

  .normal {
@ -602,6 +610,9 @@ export default {

  .name-email-search {
    width: 240px;
+    ::v-deep input {
+      border-color: #bbbfc4;
+    }
  }
 }
 </style>
--- a/frontend/src/views/system/user/userEditer.vue
+++ b/frontend/src/views/system/user/userEditer.vue
@ -99,18 +99,39 @@
            :label="$t('commons.organization')"
            prop="deptId"
          >
-            <treeselect
-              ref="deptTreeSelect"
+            <el-popover
+            placement="bottom"
+            popper-class="user-popper dept"
+            width="384"
+            trigger="click"
+          >
+            <el-tree
+              v-if="dialogVisible"
+              :load="loadNode"
+              :lazy="true"
+              :expand-on-click-node="false"
+              :data="depts"
+              :props="defaultProps"
+              @node-click="handleNodeClick"
+            ></el-tree>
+
+            <el-select
+              ref="roleSelect"
              v-model="form.deptId"
-              :options="depts"
-              :load-options="loadDepts"
-              :auto-load-root-options="false"
-              :placeholder="$t('user.choose_org')"
-              :no-children-text="$t('commons.treeselect.no_children_text')"
-              :no-options-text="$t('commons.treeselect.no_options_text')"
-              :no-results-text="$t('commons.treeselect.no_results_text')"
-              @open="filterData"
+              clearable
+              slot="reference"
+              class="form-gender-select"
+              popper-class="tree-select"
+              :placeholder="$t('commons.please_select')"
+            >
+            <el-option
+              v-for="item in selectDepts"
+              :key="item.label"
+              :label="item.label"
+              :value="item.id"
            />
+            </el-select>
+            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
@ -170,16 +191,15 @@ import { PHONE_REGEX } from "@/utils/validate";
 import { getDeptTree, treeByDeptId } from "@/api/system/dept";
 import { addUser, editUser, allRoles } from "@/api/system/user";
 import { pluginLoaded, defaultPwd } from "@/api/user";
-import {
-  LOAD_CHILDREN_OPTIONS,
-  LOAD_ROOT_OPTIONS,
-} from "@riophae/vue-treeselect";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
-  components: { Treeselect },
  data() {
    return {
+      defaultProps: {
+        children: "children",
+        label: "label",
+        isLeaf: "leaf",
+      },
+      selectDepts: [],
      form: {
        roles: [
          {
@ -302,7 +322,7 @@ export default {
        phonePrefix: "+86",
        roleIds: [2],
      },
-      depts: null,
+      depts: [],
      roles: [],
      roleDatas: [],
      userRoles: [],
@ -331,7 +351,6 @@ export default {
      }
    },
    create() {
-      this.depts = null;
      this.formType = "add";
      this.form = Object.assign({}, this.defaultForm);
    },
@ -342,7 +361,8 @@ export default {
        this.create();
        return;
      }
-      this.depts = null;
+      const { deptId:id, deptName:label }  = row.dept;
+      this.selectDepts = [{id, label}]
      this.formType = "modify";
      this.dialogVisible = true;
      this.form = Object.assign({}, row);
@ -354,59 +374,54 @@ export default {
      if (!this.form.phonePrefix) {
        this.form.phonePrefix = '+86';
      }
-      this.initDeptTree();
    },
    initRoles() {
      allRoles().then((res) => {
        this.roles = res.data;
      });
    },
-    initDeptTree() {
-      treeByDeptId(this.form.deptId || 0).then((res) => {
-        const results = res.data.map((node) => {
-          if (node.hasChildren && !node.children) {
-            node.children = null;
-            // delete node.children
-          }
-          return node;
-        });
-        this.depts = results;
-      });
-    },
-    // 获取弹窗内部门数据
-    loadDepts({ action, parentNode, callback }) {
-      if (action === "LOAD_ROOT_OPTIONS" && !this.form.deptId) {
-        const _self = this;
-        treeByDeptId(0).then((res) => {
-          const results = res.data.map((node) => {
-            if (node.hasChildren && !node.children) {
-              node.children = null;
-            }
-            return node;
-          });
-          _self.depts = results;
-          callback();
-        });
+    handleNodeClick({ id, label }) {
+      const [ dept ] = this.selectDepts;
+      if (!dept || dept.id !== id) {
+        this.selectDepts = [{ id, label }];
+        this.form.deptId = id
+        return
      }

-      if (action === "LOAD_CHILDREN_OPTIONS") {
-        const _self = this;
-        getDeptTree(parentNode.id).then((res) => {
-          parentNode.children = res.data.map(function (obj) {
-            return _self.normalizer(obj);
-          });
-          callback();
-        });
+      if (dept.id === id) {
+        this.selectDepts = [];
+        this.form.deptId = null
      }
    },
-    normalizer(node) {
-      if (node.hasChildren) {
-        node.children = null;
+    // 获取弹窗内部门数据
+    treeByDeptId() {
+      treeByDeptId(0).then((res) => {
+        this.depts =  (res.data || []).map(ele =>  {
+        return {
+            ...ele,
+            leaf: !ele.hasChildren,
          }
+        })
+      });
+    },
+      loadNode(node, resolve) {
+      if (!this.depts.length) {
+        this.treeByDeptId();
+        return;
+      }
+      getDeptTree(node.data.id).then((res) => {
+        resolve(
+          res.data.map((dept) => {
+            return this.normalizer(dept);
+          })
+        );
+      });
+    },
+    normalizer(node) {
      return {
        id: node.deptId,
        label: node.name,
-        children: node.children,
+        leaf: !node.hasChildren,
      };
    },
    deleteTag(value) {
@ -428,6 +443,7 @@ export default {
      );
    },
    reset() {
+      this.depts = [];
      this.$refs.createUserForm.resetFields();
      this.dialogVisible = false;
    },
@ -446,21 +462,6 @@ export default {
        }
      });
    },
-    filterData(instanceId) {
-      this.$refs.roleSelect &&
-        this.$refs.roleSelect.blur &&
-        this.$refs.roleSelect.blur();
-      if (!this.depts) {
-        return;
-      }
-      const results = this.depts.map((node) => {
-        if (node.hasChildren) {
-          node.children = null;
-        }
-        return node;
-      });
-      this.depts = results;
-    },
    onCopy(e) {
      this.$success(this.$t("commons.copy_success"));
    },
@ -571,8 +572,22 @@ export default {
  .form-gender-select {
    width: 100%;
  }
-
-  .btn {
 }
+
+</style>
+<style lang="scss">
+.tree-select {
+  display: none !important;
+}
+.user-popper {
+  background: transparent;
+  padding: 0;
+  .popper__arrow {
+    display: none;
+  }
+}
+.user-popper.dept {
+  height: 300px;
+  overflow: auto;
 }
 </style>