refactor: merge dev

backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java

@@ -45,4 +45,5 @@ public class ChartViewDTO extends ChartViewWithBLOBs {
     private long totalPage;
     private long totalItems;
     private int datasetMode;
+    private String datasourceType;
 }

backend/src/main/java/io/dataease/provider/query/oracle/OracleQueryProvider.java

@@ -405,7 +405,7 @@ public class OracleQueryProvider extends QueryProvider {
     }
 
     @Override
-    public String getSQLWithPage(boolean isTable, String table, List<ChartViewFieldDTO> orgXAxis, List<ChartFieldCustomFilterDTO> OrgFeldCustomFilter, List<DataSetRowPermissionsTreeDTO> rowPermissionsTree, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds, ChartViewWithBLOBs view, PageInfo pageInfo) {
+    public String getSQLWithPage(boolean isTable, String table, List<ChartViewFieldDTO> orgXAxis, List<ChartFieldCustomFilterDTO> OrgFieldCustomFilter, List<DataSetRowPermissionsTreeDTO> rowPermissionsTree, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds, ChartViewWithBLOBs view, PageInfo pageInfo) {
         List<ChartViewFieldDTO> xAxis = new ArrayList<>();
         orgXAxis.forEach(chartViewFieldDTO -> {
             xAxis.add(chartViewFieldDTO);
@@ -416,7 +416,7 @@ public class OracleQueryProvider extends QueryProvider {
 
 
         List<ChartFieldCustomFilterDTO> fieldCustomFilter = new ArrayList<>();
-        for (ChartFieldCustomFilterDTO chartFieldCustomFilterDTO : OrgFeldCustomFilter) {
+        for (ChartFieldCustomFilterDTO chartFieldCustomFilterDTO : OrgFieldCustomFilter) {
             fieldCustomFilter.add(chartFieldCustomFilterDTO);
         }
         ChartFieldCustomFilterDTO chartFieldCustomFilterDTO = new ChartFieldCustomFilterDTO();

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -302,6 +302,8 @@ public class ChartViewService {
             DatasetTable datasetTable = dataSetTableService.get(view.getTableId());
             if (ObjectUtils.isNotEmpty(datasetTable)) {
                 view.setDatasetMode(datasetTable.getMode());
+                Datasource datasource = datasourceService.get(datasetTable.getDataSourceId());
+                view.setDatasourceType(datasource != null ? datasource.getType() : null);
             }
             // 如果是从仪表板获取视图数据，则仪表板的查询模式，查询结果的数量，覆盖视图对应的属性
             if (CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -2865,7 +2865,10 @@ public class DataSetTableService {
                 tree = gson.fromJson(request.getExpressionTree(), DatasetRowPermissionsTreeObj.class);
                 permissionsTreeService.getField(tree);
             }
-            Map<String, Object> previewData = getPreviewData(request, 1, 100000, null, tree);
+            Datasource datasource = datasourceService.get(request.getDataSourceId());
+            int pageSize = (datasource != null && StringUtils.equalsIgnoreCase(datasource.getType(), "es")) ? 10000 : 100000;
+            request.setRow(String.valueOf(pageSize));
+            Map<String, Object> previewData = getPreviewData(request, 1, pageSize, null, tree);
             List<DatasetTableField> fields = (List<DatasetTableField>) previewData.get("fields");
             List<Map<String, Object>> data = (List<Map<String, Object>>) previewData.get("data");
             // 构建Excel数据格式

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

@@ -222,6 +222,10 @@ public class PanelGroupService {
 
         } else {
             // 更新
+            if (StringUtils.isBlank(request.getPid())) {
+                PanelGroupWithBLOBs panel = panelGroupMapper.selectByPrimaryKey(request.getId());
+                request.setPid(panel.getPid());
+            }
             if (StringUtils.isNotEmpty(request.getName())) {
                 checkPanelName(request.getName(), request.getPid(), PanelConstants.OPT_TYPE_UPDATE, request.getId(), request.getNodeType());
             }

backend/src/main/resources/application.properties

@@ -1,8 +1,6 @@
 spring.profiles.active=@profiles.active@
 spring.application.name=dataease
-
 server.port=8081
-
 # Hikari
 spring.datasource.type=com.zaxxer.hikari.HikariDataSource
 spring.datasource.hikari.minimum-idle=5
@@ -13,7 +11,6 @@ spring.datasource.hikari.pool-name=DatebookHikariCP
 spring.datasource.hikari.max-lifetime=1800000
 spring.datasource.hikari.connection-timeout=30000
 spring.datasource.hikari.connection-test-query=SELECT 1
-
 # mybatis
 mybatis.configuration.cache-enabled=true
 mybatis.configuration.lazy-loading-enabled=false
@@ -23,7 +20,6 @@ mybatis.configuration.use-column-label=true
 mybatis.configuration.auto-mapping-behavior=full
 mybatis.configuration.default-statement-timeout=25000
 mybatis.configuration.map-underscore-to-camel-case=true
-
 # knife4j
 knife4j.enable=true
 knife4j.setting.enableFooter=false
@@ -34,14 +30,10 @@ knife4j.setting.enableDocumentManage=false
 knife4j.setting.enableSearch=false
 knife4j.setting.enableOpenApi=false
 knife4j.setting.enableAfterScript=false
-
 version=@project.version@
-
 logging.file.path=/opt/dataease/logs/${spring.application.name}
-
 # view
 spring.resources.static-locations=classpath:/templates/,classpath:/static/
-
 # flyway enable
 spring.flyway.enabled=true
 spring.flyway.baseline-on-migrate=true
@@ -50,11 +42,9 @@ spring.flyway.table=dataease_version
 spring.flyway.baseline-version=0
 spring.flyway.encoding=UTF-8
 spring.flyway.validate-on-migrate=false
+spring.flyway.placeholderReplacement=false
 spring.kafka.listener.missing-topics-fatal=false
-spring.flyway.placeholder-replacement=false
-
 spring.messages.basename=i18n/messages
-
 # quartz
 quartz.enabled=true
 quartz.scheduler-name=deServerJob
@@ -78,15 +68,11 @@ spring.cache.ehcache.config=classpath:/ehcache/ehcache.xml
 pagehelper.PageRowBounds=true
 #excel\u7B49\u7528\u6237\u4E0A\u4F20\u6587\u4EF6\u8DEF\u5F84
 upload.file.path=/opt/dataease/data/kettle/
-
 dataease.sqlinjection.whitelists=/dataset/table/sqlPreview,/dataset/table/update,/dataset/field/multFieldValues,/dataset/field/linkMultFieldValues
-
-
 #\u5F00\u542F\u538B\u7F29 \u63D0\u9AD8\u54CD\u5E94\u901F\u5EA6 \u51CF\u5C11\u5E26\u5BBD\u538B\u529B
 server.compression.enabled=true
 server.compression.mime-types=application/javascript,text/css,application/json,application/xml,text/html,text/xml,text/plain
 server.compression.min-response-size=1024
-
 #\u4E0B\u9762\u7684\u914D\u7F6E\u65B0\u589E\u5230/opt/dataease/conf/dataease/properties
 #\u7F13\u5B58\u7C7B\u578B
 ##spring.cache.type=redis
@@ -96,25 +82,19 @@ server.compression.min-response-size=1024
 #spring.redis.lettuce.pool.max-active=8
 #spring.redis.lettuce.pool.max-wait=-1
 #spring.redis.lettuce.pool.max-idle=8
-
 #\u5355\u673A\u6A21\u5F0Fredis\u914D\u7F6E
 #spring.redis.database=0
 #spring.redis.host=192.168.0.110
 #spring.redis.port=6379
 #spring.redis.password=DataEase_ZNB@REDIS
-
 #\u54E8\u5175\u6A21\u5F0Fredis\u914D\u7F6E
 #spring.redis.sentinel.master=mymaster
 #spring.redis.sentinel.nodes=192.168.0.110:26379,192.168.0.110:26380,192.168.0.110:26381
 #spring.redis.sentinel.password=
-
 #cluster\u6A21\u5F0Fredis\u914D\u7F6E
 #spring.redis.cluster.nodes=192.168.0.110:7001,192.168.0.110:7002,192.168.0.110:7003,192.168.0.110:7004,192.168.0.110:7005,192.168.0.110:7006
 #spring.redis.cluster.max-redirects=3
 #spring.redis.password=DataEase_ZNB@REDIS
-
-
-
 server.servlet.context-parameters.configurationStrategy=SYSTEM_PROPERTIES
 server.servlet.session.cookie.http-only=true
 server.servlet.session.tracking-modes=cookie

frontend/src/components/canvas/DeCanvas.vue

@@ -8,7 +8,6 @@
     @mouseup="deselectCurComponent"
     @scroll="canvasScroll"
   >
-    <slot name="optBar" />
     <de-editor
       :ref="editorRefName"
       :canvas-style-data="canvasStyleData"

frontend/src/components/canvas/components/TextAttr.vue

@@ -24,7 +24,7 @@
           >
             <el-tooltip :content="item.tooltip">
               <span style="float: left;">
-                <i :class="item.icon" />
+                <i :class="item.icon"/>
               </span>
             </el-tooltip>
           </el-radio-button>
@@ -47,7 +47,7 @@
               :value="item.value"
             >
               <span style="float: left;">
-                <i :class="item.icon" />
+                <i :class="item.icon"/>
               </span>
               <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
             </el-option>
@@ -100,7 +100,7 @@
       </div>
 
       <el-tooltip
-        v-if="attrShow('fontSize')"
+        v-if="attrShow('activeFontSize')"
         :content="$t('panel.active_font_size')"
       >
         <i
@@ -257,7 +257,7 @@
               @click="goColor"
             />
           </el-tooltip>
-          <div :style="letterDivColor" />
+          <div :style="letterDivColor"/>
           <el-color-picker
             ref="colorPicker"
             v-model="styleInfo.color"
@@ -279,7 +279,7 @@
               @click="goBoardColor"
             />
           </el-tooltip>
-          <div :style="boardDivColor" />
+          <div :style="boardDivColor"/>
           <el-color-picker
             ref="boardColorPicker"
             v-model="styleInfo.borderColor"
@@ -302,7 +302,7 @@
               @click="goBackgroundColor"
             />
           </el-tooltip>
-          <div :style="backgroundDivColor" />
+          <div :style="backgroundDivColor"/>
           <el-color-picker
             ref="backgroundColorPicker"
             v-model="styleInfo.backgroundColor"
@@ -318,7 +318,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.video_info')">
-          <VideoLinks :link-info="curComponent.videoLinks" />
+          <VideoLinks :link-info="curComponent.videoLinks"/>
         </el-tooltip>
       </div>
 
@@ -327,7 +327,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.stream_media_info')">
-          <StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
+          <StreamMediaLinks :link-info="curComponent.streamMediaLinks"/>
         </el-tooltip>
       </div>
 
@@ -336,7 +336,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
       >
         <el-tooltip :content="$t('panel.web_addr')">
-          <FrameLinks :link-info="curComponent.frameLinks" />
+          <FrameLinks :link-info="curComponent.frameLinks"/>
         </el-tooltip>
       </div>
       <div
@@ -356,7 +356,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
       >
         <el-tooltip :content="$t('panel.tab_inner_style')">
-          <tab-style :style-info="styleInfo" />
+          <tab-style :style-info="styleInfo"/>
         </el-tooltip>
       </div>
 
@@ -465,7 +465,7 @@ export default {
       mainWidthOffset: 600,
       initFontSize: 12,
       initActiveFontSize: 18,
-      miniFontSize: 0,
+      miniFontSize: 12,
       maxFontSize: 128,
       textAlignOptions: [
         {

frontend/src/components/canvas/components/editor/DeEditor.vue

@@ -121,7 +121,7 @@
       :canvas-id="canvasId"
     />
     <!-- 右击菜单 -->
-    <ContextMenu />
+    <ContextMenu/>
 
     <!-- 对齐标线 -->
     <span
@@ -1567,8 +1567,8 @@ export default {
       infoBox.moveItem = item
       infoBox.moveItemIndex = index
 
-      infoBox.orignX = 0 // 克隆对象原始X位置
+      infoBox.originX = 0 // 克隆对象原始X位置
-      infoBox.orignY = 0
+      infoBox.originY = 0
       infoBox.startX = 0
       infoBox.startY = 0
 

frontend/src/components/canvas/components/editor/Preview.vue

@@ -189,7 +189,8 @@ export default {
   },
   data() {
     return {
-      canvasInfoTemp: 'preview-temp-canvas-main',
+      mainHeightCount: null,
+      userInfo: null,
       previewMainDomId: 'preview-main-' + this.canvasId,
       previewDomId: 'preview-' + this.canvasId,
       previewRefId: 'preview-ref-' + this.canvasId,
@@ -230,6 +231,9 @@ export default {
     }
   },
   computed: {
+    screenShotStatues() {
+      return this.exporting || this.screenShot || this.backScreenShot
+    },
     mainActiveName() {
       return this.$store.state.panel.mainActiveName
     },
@@ -345,6 +349,18 @@ export default {
         this.canvasStyleDataInit()
       },
       deep: true
+    },
+    mainHeight: {
+      handler(newVal, oldVla) {
+        const _this = this
+        _this.$nextTick(() => {
+          if (_this.screenShotStatues) {
+            _this.initWatermark('preview-temp-canvas-main')
+          } else {
+            _this.initWatermark()
+          }
+        })
+      }
     }
   },
   created() {
@@ -377,12 +393,16 @@ export default {
     bus.$off('trigger-reset-button', this.triggerResetButton)
   },
   methods: {
-    initWatermark() {
+    initWatermark(waterDomId = 'preview-main-canvas-main') {
       if (this.panelInfo.watermarkInfo && this.canvasId === 'canvas-main') {
-        userLoginInfo().then(res => {
+        if (this.userInfo) {
-          const userInfo = res.data
+          activeWatermark(this.panelInfo.watermarkInfo.settingContent, this.userInfo, waterDomId, this.canvasId, this.panelInfo.watermarkOpen)
-          activeWatermark(this.panelInfo.watermarkInfo.settingContent, userInfo, 'preview-main-canvas-main', this.canvasId, this.panelInfo.watermarkOpen)
+        } else {
-        })
+          userLoginInfo().then(res => {
+            this.userInfo = res.data
+            activeWatermark(this.panelInfo.watermarkInfo.settingContent, this.userInfo, waterDomId, this.canvasId, this.panelInfo.watermarkOpen)
+          })
+        }
       }
     },
     isMainCanvas() {
@@ -606,6 +626,7 @@ export default {
             _this.$nextTick(() => {
               // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
               _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
+              _this.mainHeightCount = tempCanvas.scrollHeight
               this.$emit('mainHeightChange', _this.mainHeight)
             })
           })

frontend/src/components/canvas/components/editor/SettingMenu.vue

@@ -5,7 +5,7 @@
         trigger="click"
         @mouseup="handleMouseUp"
       >
-        <slot name="icon" />
+        <slot name="icon"/>
         <el-dropdown-menu v-if="curComponent">
           <el-dropdown-item
             v-if="editFilter.includes(curComponent.type)"
@@ -33,7 +33,7 @@
           <el-dropdown-item v-if="!curComponent.auxiliaryMatrix">
             <el-dropdown placement="right-start">
               <span class="el-icon-copy-document">
-                {{ $t('panel.level') }} <i class="el-icon-arrow-right el-icon--right" />
+                {{ $t('panel.level') }} <i class="el-icon-arrow-right el-icon--right"/>
               </span>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item
@@ -87,14 +87,14 @@
             v-if="curComponent.type != 'custom-button'"
             @click.native="hyperlinksSet"
           >
-            <i class="icon iconfont icon-font icon-chaolianjie1" />
+            <i class="icon iconfont icon-font icon-chaolianjie1"/>
             {{ $t('panel.hyperlinks') }}
           </el-dropdown-item>
           <el-dropdown-item
-            v-if="curComponent.type !== 'user-view' && !curComponent.auxiliaryMatrix"
+            v-if="curComponent.type !== 'view' && !curComponent.auxiliaryMatrix"
             @click.native="positionAdjust"
           >
-            <i class="el-icon-map-location" />
+            <i class="el-icon-map-location"/>
             {{ $t('panel.position_adjust') }}
           </el-dropdown-item>
         </el-dropdown-menu>

frontend/src/components/canvas/customComponent/UserView.vue

@@ -574,6 +574,9 @@ export default {
       const updateParams = { 'id': this.chart.id }
       if (param.custom === 'customAttr') {
         const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
+        if (!sourceCustomAttr[param.property]) {
+          this.$set(sourceCustomAttr, param.property, {})
+        }
         sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
         this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
         this.chart.customAttr = this.sourceCustomAttrStr
@@ -650,7 +653,12 @@ export default {
     },
     clearPanelLinkage(param) {
       if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
-        this.$refs[this.element.propValue.id].reDrawView()
+        try {
+          this.$refs[this.element.propValue.id].reDrawView()
+        } catch (e) {
+          console.error('reDrawView-error：', this.element.propValue.id)
+        }
+
       }
     },
     bindPluginEvent() {

frontend/src/components/canvas/store/copy.js

@@ -88,6 +88,8 @@ export default {
           component.style.width = width
           component.style.height = height
         }
+        component['canvasId'] = 'canvas-main'
+        component['canvasPid'] = '0'
         state.copyData = {
           data: component,
           index: index

frontend/src/components/canvas/tools/watermark.js

@@ -71,7 +71,7 @@ export function watermark(settings, domId) {
       mask_div.style.left = x + 'px'
       mask_div.style.top = y + 'px'
       mask_div.style.overflow = 'hidden'
-      mask_div.style.zIndex = '9999'
+      mask_div.style.zIndex = '10'
       // 让水印不遮挡页面的点击事件
       mask_div.style.pointerEvents = 'none'
       mask_div.style.opacity = defaultSettings.watermark_alpha
@@ -124,7 +124,7 @@ export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, w
   if (watermarkForm.type === 'custom') {
     watermark_txt = watermarkForm.content
     watermark_txt = watermark_txt.replaceAll('${ip}', userLoginInfo.ip)
-    watermark_txt = watermark_txt.replaceAll('${userName}', userLoginInfo.userInfo.userName)
+    watermark_txt = watermark_txt.replaceAll('${username}', userLoginInfo.userInfo.username)
     watermark_txt = watermark_txt.replaceAll('${nickName}', userLoginInfo.userInfo.nickName)
     watermark_txt = watermark_txt.replaceAll('${time}', getNow())
     watermark_width = watermark_txt.length * watermarkForm.watermark_fontsize * 0.75
@@ -138,7 +138,7 @@ export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, w
     watermark_txt = getNow()
     watermark_width = 200
   } else {
-    watermark_txt = userLoginInfo.userInfo.userName
+    watermark_txt = userLoginInfo.userInfo.username
   }
   const settings = {
     watermark_txt: watermark_txt,

frontend/src/components/deDrag/PointShadow.vue

@@ -64,10 +64,6 @@ export default {
     this.init()
   },
   beforeDestroy() {
-    // const targetComponent = document.getElementById(this.componentCanvasId)
-    // const domId = 'dragContent-' + this.curComponent.id
-    // console.log('domId='+domId)
-    // document.getElementById(domId).appendChild(targetComponent)
   },
   methods: {
     init() {

frontend/src/components/widget/deWidget/DeTabs.vue

@@ -202,7 +202,7 @@
     </el-dialog>
 
     <text-attr
-      v-if="showAttr && curComponent.canvasId === activeCanvasId"
+      v-if="showAttr && curComponent.canvasId === activeCanvasId" && isEdit
       :canvas-id="curComponent.canvasId"
       :scroll-left="scrollLeft"
       :scroll-top="scrollTop"
@@ -483,7 +483,6 @@ export default {
     canvasScroll(scrollInfo) {
       this.scrollLeft = scrollInfo.scrollLeft + 50
       this.scrollTop = scrollInfo.scrollTop + 10
-      console.log('scrollInfo=' + JSON.stringify(scrollInfo))
       bus.$emit('onScroll')
     },
     tabCanvasComponentData(tabName) {

frontend/src/lang/en.js

@@ -651,6 +651,7 @@ export default {
     input_password: 'Please input a password',
     input_phone: 'Please enter the phone number',
     input_roles: 'Please select role',
+    user_name_pattern_error: 'IDs can only contain alphanumeric underscores and - and start with a letter!',
     special_characters_are_not_supported: 'Special characters are not supported',
     mobile_number_format_is_incorrect: 'Incorrect format of mobile phone number',
     email_format_is_incorrect: 'The mailbox format is incorrect',
@@ -1883,6 +1884,7 @@ export default {
     back_parent: 'Back to previous'
   },
   panel: {
+    position_adjust_component: 'Position adjust',
     active_font_size: 'Active font size',
     carousel: 'Carousel',
     switch_time: 'Switch time',

frontend/src/lang/tw.js

@@ -652,6 +652,7 @@ export default {
     input_roles: '請選擇角色',
     select_users: '請選擇用戶',
     select_gender: '請選擇性別',
+    user_name_pattern_error: 'ID只能包含字母数字下划线以及-并以字母开头！',
     special_characters_are_not_supported: '不支持特殊字符',
     mobile_number_format_is_incorrect: '手機號碼格式不正確',
     email_format_is_incorrect: '郵箱格式不正確',
@@ -1883,6 +1884,7 @@ export default {
     back_parent: '返回上一級'
   },
   panel: {
+    position_adjust_component: '位置調整',
     active_font_size: '激活字體大小',
     carousel: '輪播',
     switch_time: '切換時間',

frontend/src/lang/zh.js

@@ -651,6 +651,7 @@ export default {
     input_roles: '请选择角色',
     select_users: '请选择用户',
     select_gender: '请选择性别',
+    user_name_pattern_error: 'ID只能包含字母数字下划线以及-并以字母开头！',
     special_characters_are_not_supported: '不支持特殊字符',
     mobile_number_format_is_incorrect: '手机号码格式不正确',
     email_format_is_incorrect: '邮箱格式不正确',
@@ -1883,6 +1884,7 @@ export default {
     back_parent: '返回上一级'
   },
   panel: {
+    position_adjust_component: '位置调整',
     active_font_size: '激活字体大小',
     carousel: '轮播',
     switch_time: '切换时间',

frontend/src/styles/theme/dark.scss

@@ -23,7 +23,7 @@ $--background-color-base: #171b22;
 
 
 /* 定义全局变量 */
-:root{
+:root {
   --BgSelectColor: #ffffff;
   --SelectColor: #fff;
   --BrSelectColor: #fff;
@@ -40,10 +40,6 @@ $--background-color-base: #171b22;
   --RangeColor: #fff;
   --BrRangeColor: #fff;
 
-  --BgSerachColor: #ffffff;
-  --SerachColor: #fff;
-  --BrSerachColor: #fff;
-
   --BgSelectGridColor: #ffffff;
   --SelectGridColor: #fff;
   --BrSelectGridColor: #fff;
@@ -51,7 +47,7 @@ $--background-color-base: #171b22;
 
 // 与CSS原生变量映射
 #app {
-  --Main:#2681ff;
+  --Main: #2681ff;
   --MainBG: #171b22;
   --ContentBG: #1b2a32;
   --TextActive: #FFFFFF;
@@ -72,13 +68,12 @@ $--background-color-base: #171b22;
 
   --TableBG: #21333b;
   --TableColor: #acbac3;
-//   --TableBorder: .05rem solid #495865;
+  //   --TableBorder: .05rem solid #495865;
   --TableBorderColor: #495865;
 
   --background-color-base: #171b22;
 
 
-  
 }
 
 

frontend/src/views/chart/chart/chart.js

@@ -1107,3 +1107,5 @@ export const CHART_FONT_LETTER_SPACE = [
   { name: '9px', value: '9' },
   { name: '10px', value: '10' }
 ]
+
+export const NOT_SUPPORT_PAGE_DATASET = ['kylin', 'sqlServer', 'es', 'presto', 'ds_doris', 'StarRocks']

frontend/src/views/chart/chart/line/line_antv.js

@@ -89,8 +89,13 @@ export function baseLineOptionAntV(plot, container, chart, action) {
   }
   // custom color
   options.color = antVCustomColor(chart)
-  const emptyDataStrategy = chart.senior ? JSON.parse(chart.senior)?.functionCfg.emptyDataStrategy : 'breakLine'
+  if (chart.senior) {
-  handleEmptyDataStrategy(emptyDataStrategy, chart, data, options)
+    let emptyDataStrategy = JSON.parse(chart.senior)?.functionCfg?.emptyDataStrategy
+    if (!emptyDataStrategy) {
+      emptyDataStrategy = 'breakLine'
+    }
+    handleEmptyDataStrategy(emptyDataStrategy, chart, data, options)
+  }
   // 开始渲染
   if (plot) {
     plot.destroy()

frontend/src/views/chart/chart/util.js

@@ -1681,6 +1681,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'tooltip-selector-ant-v': [
@@ -3422,12 +3423,10 @@ export function handleEmptyDataStrategy(strategy, chart, data, options) {
   const multiDimension = yaxis?.length >= 2 || extAxis?.length > 0
   switch (strategy) {
     case 'breakLine': {
+      options.connectNulls = false
       if (multiDimension) {
         // 多维度线条断开
-        handleBreakLineMultiDimension(chart, data, options)
+        handleBreakLineMultiDimension(chart, data)
-      } else {
-        // 单维度线条断开
-        options.connectNulls = false
       }
       break
     }
@@ -3446,8 +3445,7 @@ export function handleEmptyDataStrategy(strategy, chart, data, options) {
   }
 }
 
-function handleBreakLineMultiDimension(chart, data, options) {
+function handleBreakLineMultiDimension(chart, data) {
-  options.connectNulls = false
   const dimensionInfoMap = new Map()
   const subDimensionSet = new Set()
   for (let i = 0; i < data.length; i++) {
@@ -3464,15 +3462,18 @@ function handleBreakLineMultiDimension(chart, data, options) {
   let insertCount = 0
   dimensionInfoMap.forEach((dimensionInfo, field) => {
     if (dimensionInfo.set.size < subDimensionSet.size) {
-      const toBeFillDimension = [...subDimensionSet].filter(item => !dimensionInfo.set.has(item))
+      let subInsertIndex = 0
-      toBeFillDimension.forEach(dimension => {
+      subDimensionSet.forEach(dimension => {
-        data.splice(dimensionInfo.index + insertCount, 0, {
+        if (!dimensionInfo.set.has(dimension)) {
-          field,
+          data.splice(dimensionInfo.index + insertCount + subInsertIndex, 0, {
-          value: null,
+            field,
-          category: dimension
+            value: null,
-        })
+            category: dimension
+          })
+        }
+        subInsertIndex++
       })
-      insertCount += toBeFillDimension.size
+      insertCount += subDimensionSet.size - dimensionInfo.set.size
     }
   })
 }

frontend/src/views/chart/components/ChartComponent.vue

@@ -57,6 +57,7 @@ import { reverseColor } from '../chart/common/common'
 import MapController from './map/MapController.vue'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
+
 export default {
   name: 'ChartComponent',
   components: {
@@ -180,16 +181,18 @@ export default {
       this.currentSeriesId = seriesId
     },
     reDrawView() {
-      this.myChart.dispatchAction({
+      if (this.linkageActiveParam) {
-        type: 'unselect',
+        this.myChart.dispatchAction({
-        seriesIndex: this.linkageActiveParam.seriesIndex,
+          type: 'unselect',
-        name: this.linkageActiveParam.name
+          seriesIndex: this.linkageActiveParam.seriesIndex,
-      })
+          name: this.linkageActiveParam.name
-      this.myChart.dispatchAction({
+        })
-        type: 'downplay',
+        this.myChart.dispatchAction({
-        seriesIndex: this.linkageActiveParam.seriesIndex,
+          type: 'downplay',
-        name: this.linkageActiveParam.name
+          seriesIndex: this.linkageActiveParam.seriesIndex,
-      })
+          name: this.linkageActiveParam.name
+        })
+      }
       this.linkageActiveParam = null
     },
     linkageActive() {

frontend/src/views/chart/components/ChartComponentS2.vue

@@ -92,7 +92,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'
+import { DEFAULT_TITLE_STYLE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { mapState } from 'vuex'
 
@@ -234,7 +234,7 @@ export default {
         const attr = JSON.parse(this.chart.customAttr)
         this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
         data = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        if (this.chart.datasetMode === 0) {
+        if (this.chart.datasetMode === 0 && !NOT_SUPPORT_PAGE_DATASET.includes(this.chart.datasourceType)) {
           if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && this.chart.totalItems > this.currentPage.pageSize) {
             this.currentPage.show = this.chart.totalItems
             this.showPage = true
@@ -455,7 +455,7 @@ export default {
     },
     pageChange(val) {
       this.currentPage.pageSize = val
-      if (this.chart.datasetMode === 0) {
+      if (this.chart.datasetMode === 0 && !NOT_SUPPORT_PAGE_DATASET.includes(this.chart.datasourceType)) {
         this.$emit('onPageChange', this.currentPage)
       } else {
         this.initData()
@@ -465,7 +465,7 @@ export default {
 
     pageClick(val) {
       this.currentPage.page = val
-      if (this.chart.datasetMode === 0) {
+      if (this.chart.datasetMode === 0 && !NOT_SUPPORT_PAGE_DATASET.includes(this.chart.datasourceType)) {
         this.$emit('onPageChange', this.currentPage)
       } else {
         this.initData()

frontend/src/views/chart/components/table/TableNormal.vue

@@ -79,7 +79,7 @@
 <script>
 import { hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
-import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
+import { DEFAULT_COLOR_CASE, DEFAULT_SIZE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import { mapState } from 'vuex'
 
 export default {
@@ -238,7 +238,7 @@ export default {
         }
 
         data = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        if (this.chart.datasetMode === 0) {
+        if (this.chart.datasetMode === 0 && !NOT_SUPPORT_PAGE_DATASET.includes(this.chart.datasourceType)) {
           if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && this.chart.totalItems > this.currentPage.pageSize) {
             this.currentPage.show = this.chart.totalItems
             this.showPage = true
@@ -444,7 +444,7 @@ export default {
 
     pageChange(val) {
       this.currentPage.pageSize = val
-      if (this.chart.datasetMode === 0) {
+      if (this.chart.datasetMode === 0 && !NOT_SUPPORT_PAGE_DATASET.includes(this.chart.datasourceType)) {
         this.$emit('onPageChange', this.currentPage)
       } else {
         this.init()
@@ -453,7 +453,7 @@ export default {
 
     pageClick(val) {
       this.currentPage.page = val
-      if (this.chart.datasetMode === 0) {
+      if (this.chart.datasetMode === 0 && !NOT_SUPPORT_PAGE_DATASET.includes(this.chart.datasourceType)) {
         this.$emit('onPageChange', this.currentPage)
       } else {
         this.init()

frontend/src/views/chart/view/ChartEdit.vue

@@ -192,7 +192,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools" />
+                                <i class="el-icon-s-tools"/>
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -267,7 +267,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools" />
+                                <i class="el-icon-s-tools"/>
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -362,7 +362,7 @@
                           style="padding: 6px;"
                         >
                           {{ $t('chart.change_chart_type') }}
-                          <i class="el-icon-caret-bottom" />
+                          <i class="el-icon-caret-bottom"/>
                         </el-button>
                       </el-popover>
                     </span>
@@ -490,8 +490,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                          $t('chart.drag_block_table_data_column')
+                            $t('chart.drag_block_table_data_column')
-                        }}</span>
+                          }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_type_axis') }}</span>
@@ -499,18 +499,18 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_label') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                          $t('chart.drag_block_funnel_split')
+                            $t('chart.drag_block_funnel_split')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                          $t('chart.drag_block_radar_label')
+                            $t('chart.drag_block_radar_label')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
                         <span v-else-if="view.type && view.type.includes('treemap')">{{
-                          $t('chart.drag_block_treemap_label')
+                            $t('chart.drag_block_treemap_label')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                          $t('chart.drag_block_word_cloud_label')
+                            $t('chart.drag_block_word_cloud_label')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
@@ -633,8 +633,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                          $t('chart.drag_block_table_data_column')
+                            $t('chart.drag_block_table_data_column')
-                        }}</span>
+                          }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_value_axis') }}</span>
@@ -642,30 +642,30 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_angel') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                          $t('chart.drag_block_funnel_width')
+                            $t('chart.drag_block_funnel_width')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                          $t('chart.drag_block_radar_length')
+                            $t('chart.drag_block_radar_length')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type.includes('gauge')">{{
-                          $t('chart.drag_block_gauge_angel')
+                            $t('chart.drag_block_gauge_angel')
-                        }}</span>
+                          }}</span>
                         <span
                           v-else-if="view.type && view.type.includes('text')"
                         >{{ $t('chart.drag_block_label_value') }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                         <span v-else-if="view.type && view.type.includes('tree')">{{
-                          $t('chart.drag_block_treemap_size')
+                            $t('chart.drag_block_treemap_size')
-                        }}</span>
+                          }}</span>
                         <span v-else-if="view.type && view.type === 'chart-mix'">{{
-                          $t('chart.drag_block_value_axis_main')
+                            $t('chart.drag_block_value_axis_main')
-                        }}</span>
+                          }}</span>
                         <span
                           v-else-if="view.type && view.type === 'liquid'"
                         >{{ $t('chart.drag_block_progress') }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                          $t('chart.drag_block_word_cloud_size')
+                            $t('chart.drag_block_word_cloud_size')
-                        }}</span>
+                          }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span>{{ $t('chart.quota') }}</span>
                         <i
@@ -1116,7 +1116,20 @@
           class="padding-tab"
           style="width: 350px;"
         >
-          <position-adjust />
+          <div class="attr-style theme-border-class">
+            <el-collapse
+              v-model="positionActiveNames"
+              class="style-collapse"
+            >
+              <el-collapse-item
+                :title="$t('panel.position_adjust_component')"
+                :name="'positionAdjust'"
+              >
+                <position-adjust/>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+
         </el-tab-pane>
 
       </el-tabs>
@@ -1268,7 +1281,7 @@
       width="800px"
       class="dialog-css"
     >
-      <quota-filter-editor :item="quotaItem" />
+      <quota-filter-editor :item="quotaItem"/>
       <div
         slot="footer"
         class="dialog-footer"
@@ -1295,7 +1308,7 @@
       width="800px"
       class="dialog-css"
     >
-      <dimension-filter-editor :item="dimensionItem" />
+      <dimension-filter-editor :item="dimensionItem"/>
       <div
         slot="footer"
         class="dialog-footer"
@@ -1713,6 +1726,7 @@ export default {
   },
   data() {
     return {
+      positionActiveNames: 'positionAdjust',
       loading: false,
       table: {},
       dimension: [],

frontend/src/views/dataset/data/components/filterFiled.vue

@@ -90,7 +90,7 @@
               size="mini"
               controls-position="right"
             />
-            <div class="de-bottom-line" />
+            <div class="de-bottom-line short" />
           </template>
           <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
             <el-input
@@ -334,12 +334,12 @@ export default {
     initNameEnumName() {
       const { name, enumValue, fieldId } = this.item
       if (!name && fieldId) {
-        this.checklist = enumValue.split(',')
+        this.checklist = [...new Set(enumValue.split(',') || [])]
       }
       if (!name && !fieldId) return
       this.initEnumOptions()
       this.activeName = this.item.name
-      this.checklist = enumValue.split(',')
+      this.checklist = [...new Set(enumValue.split(',') || [])]
     },
     cancelKeyDow() {
       if (!this.showTextArea && !this.keydownCanceled) {
@@ -420,14 +420,17 @@ export default {
       })
     },
     addFields() {
-      const list = this.textareaValue.split('\n').reduce((pre, next) => {
+      let list = this.textareaValue.split('\n').reduce((pre, next) => {
         const str = next.trim()
         if (!str) return pre
-        pre.add(str)
+        pre.push(str)
         return pre
-      }, new Set([]))
+      }, [])
-      if (list.size) {
+      if (list.length) {
-        this.checklist = [...this.checklist, ...list]
+        if (list.length > 500) {
+          list = list.slice(0, 500)
+        }
+        this.checklist = [...new Set([...this.checklist, ...list])]
       }
       this.showTextArea = false
     },
@@ -438,6 +441,7 @@ export default {
       } else {
         this.delChecks(index)
       }
+      this.checklist = [...new Set(this.checklist)]
     },
     handleClickOutside() {
       this.showTextArea = false
@@ -553,6 +557,11 @@ export default {
     z-index: 10;
   }
 
+  .short {
+    width: 83px;
+    right: 22px;
+  }
+
   ::v-deep.el-input-number.is-controls-right .el-input__inner {
     padding-right: 20px;
   }

frontend/src/views/panel/edit/ComponentWait.vue

@@ -1,6 +1,7 @@
 <template>
   <el-row class="component-wait">
     <el-tabs
+      style="padding-left: 10px"
       v-model="activeName"
     >
       <el-tab-pane
@@ -35,7 +36,7 @@
       class="component-wait-main"
       style="padding:10px"
     >
-      <mobile-background-selector />
+      <mobile-background-selector/>
     </el-row>
   </el-row>
 </template>

frontend/src/views/panel/edit/index.vue

@@ -165,11 +165,12 @@
               v-show=" show &&showIndex===1"
               :canvas-id="canvasId"
             />
-            <subject-setting v-show=" show &&showIndex===2" />
+            <subject-setting v-show=" show &&showIndex===2"/>
-            <assist-component v-show=" show &&showIndex===3" />
+            <assist-component v-show=" show &&showIndex===3"/>
           </div>
         </el-drawer>
         <!--PC端画布区域-->
+        <canvas-opt-bar v-if="!previewVisible&&!mobileLayoutStatus"/>
         <de-canvas
           v-if="!previewVisible&&!mobileLayoutStatus"
           ref="canvasMainRef"
@@ -181,7 +182,7 @@
           :canvas-pid="'0'"
           @canvasScroll="canvasScroll"
         >
-          <canvas-opt-bar slot="optBar" />
+
         </de-canvas>
         <!--移动端画布区域 保持宽高比2.5-->
         <el-row
@@ -197,7 +198,7 @@
               :style="customCanvasMobileStyle"
               class="this_mobile_canvas"
             >
-              <el-row class="this_mobile_canvas_top" />
+              <el-row class="this_mobile_canvas_top"/>
               <el-row class="this_mobile_canvas_inner_top">
                 {{ panelInfo.name }}
               </el-row>
@@ -206,6 +207,7 @@
                 class="this_mobile_canvas_main"
                 :style="mobileCanvasStyle"
               >
+                <canvas-opt-bar v-if="!previewVisible&&mobileLayoutStatus"/>
                 <de-canvas
                   v-if="!previewVisible&&mobileLayoutStatus"
                   ref="canvasMainRef"
@@ -215,7 +217,6 @@
                   :canvas-pid="'0'"
                   :mobile-layout-status="true"
                 >
-                  <canvas-opt-bar slot="optBar" />
                 </de-canvas>
               </el-row>
               <el-row class="this_mobile_canvas_inner_bottom">
@@ -245,14 +246,14 @@
                   />
                 </el-col>
               </el-row>
-              <el-row class="this_mobile_canvas_bottom" />
+              <el-row class="this_mobile_canvas_bottom"/>
             </div>
           </el-col>
           <el-col
             :span="16"
             class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
           >
-            <component-wait />
+            <component-wait/>
           </el-col>
         </el-row>
       </de-main-container>
@@ -270,7 +271,7 @@
           />
         </div>
         <div v-if="showBatchViewToolsAside">
-          <chart-style-batch-set />
+          <chart-style-batch-set/>
         </div>
         <div v-if="!showViewToolsAside&&!showBatchViewToolsAside">
           <el-row style="height: 40px">
@@ -283,10 +284,16 @@
                 @click="changeRightDrawOpen(false)"
               />
             </el-tooltip>
-            <span style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px">{{ $t('panel.position_adjust') }}</span>
+            <span v-if="curComponent&&!curComponent.auxiliaryMatrix"
+                  style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px"
+            >{{ $t('panel.position_adjust') }}</span>
           </el-row>
           <el-row>
-            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix" />
+            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix"/>
+            <div v-else class="view-selected-message-class">
+              <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px"
+              >{{ $t('panel.select_view') }}</span>
+            </div>
           </el-row>
         </div>
       </div>
@@ -445,7 +452,8 @@
           />
         </el-col>
         <el-col :span="21">
-          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
+          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px"
+          >{{ $t('panel.panel_cache_use_tips') }}</span>
         </el-col>
       </el-row>
       <div
@@ -970,11 +978,11 @@ export default {
     showPanel(type) {
       if (this.showIndex === -1 || this.showIndex === type) {
         this.$nextTick(() => {
-          if (this.show) {
+            if (this.show) {
-            this.showIndex === -1
+              this.showIndex === -1
+            }
+            this.show = !this.show
           }
-          this.show = !this.show
-        }
         )
       }
       this.showIndex = type

frontend/src/views/panel/list/PanelList.vue

@@ -174,7 +174,7 @@
                   />
                 </span>
                 <span v-if="data.nodeType === 'folder'">
-                  <svg-icon icon-class="scene" />
+                  <svg-icon icon-class="scene"/>
                 </span>
                 <span
                   :class="data.status"
@@ -211,7 +211,7 @@
                       <el-dropdown-item
                         :command="beforeClickEdit('folder', 'new', data, node)"
                       >
-                        <svg-icon icon-class="scene" />
+                        <svg-icon icon-class="scene"/>
                         <span style="margin-left: 5px">{{ $t('panel.groupAdd') }}</span>
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -334,7 +334,7 @@
             :label="$t('commons.name')"
             prop="name"
           >
-            <el-input v-model="groupForm.name" />
+            <el-input v-model="groupForm.name"/>
           </el-form-item>
         </el-form>
         <div
@@ -345,8 +345,8 @@
             size="mini"
             @click="close()"
           >{{
-            $t('panel.cancel')
+              $t('panel.cancel')
-          }}
+            }}
           </el-button>
           <el-button
             type="primary"
@@ -422,8 +422,8 @@
             size="mini"
             @click="closeMoveGroup()"
           >{{
-            $t('dataset.cancel')
+              $t('dataset.cancel')
-          }}
+            }}
           </el-button>
           <el-button
             :disabled="groupMoveConfirmDisabled"
@@ -729,8 +729,8 @@ export default {
             optType: 'rename',
             titlePre: this.$t('commons.edit'),
             panelInfo: {
-              id: param.data.id,
               pid: param.data.pid,
+              id: param.data.id,
               name: param.data.name,
               nodeType: param.type
             }

frontend/src/views/system/user/UserEditer.vue

@@ -264,7 +264,7 @@ export default {
           },
           {
             required: true,
-            pattern: '^[^\u4e00-\u9fa5]+$',
+            pattern: '^[a-zA-Z][a-zA-Z0-9_-]*$',
             message: this.$t('user.special_characters_are_not_supported'),
             trigger: 'blur'
           }
@@ -281,11 +281,8 @@ export default {
             message: this.$t('commons.input_limit', [2, 50]),
             trigger: 'blur'
           },
-          {
+          { required: true, validator: this.validateNickname, trigger: 'blur' }
-            required: true,
+
-            message: this.$t('user.special_characters_are_not_supported'),
-            trigger: 'blur'
-          }
         ],
         phone: [
           {
@@ -411,6 +408,17 @@ export default {
         callback()
       }
     },
+    validateNickname(rule, value, callback) {
+      const pattern = "[\\u00A0\\s\"`~!@#$%^&*()+=|{}':;',\\[\\].<>/?~！@#￥%……&*（）——+|{}【】‘；：”“'。，、？]"
+      const regep = new RegExp(pattern)
+
+      if (regep.test(value)) {
+        const msg = this.$t('user.special_characters_are_not_supported')
+        callback(new Error(msg))
+      } else {
+        callback()
+      }
+    },
     create() {
       this.formType = 'add'
       this.form = Object.assign({}, JSON.parse(JSON.stringify(this.defaultForm)))