Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

nezha-fronted/src/components/charts/chart.scss

@@ -629,3 +629,9 @@
 .rich-text-container .ql-container.ql-snow {
   border: unset !important;
 }
+.rich-text-screen-container .ql-container.ql-snow {
+  border: unset !important;
+}
+.chart-text-preview .ql-container.ql-snow {
+  border: unset !important;
+}

nezha-fronted/src/components/charts/chartPreview.vue

@@ -162,7 +162,11 @@
       <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart"></chart-alert-list>
 
       <template v-if="chart.type==='text'">
-          <div v-html="chart.param.text" id="chartTextPreview"></div>
+          <div  id="chartTextPreview" class="chart-text-preview">
+            <el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
+              <div style="height: 100%;" v-html="chart.param.text" ></div>
+            </el-scrollbar>
+          </div>
       </template>
 
       <loading  ref="loadingPreview"></loading>

nezha-fronted/src/components/charts/richTextEditor.vue

@@ -1,6 +1,7 @@
 <template>
-    <div >
+    <div style="position: relative" class="rich-text-editor" :class="{'rich-text-editor-error':tooLong}">
       <div :id="id" class="editor-core" ref="editor" style="height:350px;"></div>
+      <div class="text-too-long" v-if="tooLong">{{$t('validate.tooLong')}}</div>
     </div>
 </template>
 
@@ -29,6 +30,8 @@
             ]
           }
         },
+        maxLength:0,//记录最大长度
+        tooLong:false,
       }
     },
     created() {
@@ -47,14 +50,31 @@
               }
             }
           })
+          this.quill.on('text-change',function(delta, oldDelta, source){
+            let length=$self.getHtml().length;
+            if(length>60000){
+              $self.quill.deleteText($self.maxLength-1,$self.quill.getText().length-1,'api')
+              $self.tooLong=true;
+            }else{
+              $self.maxLength=$self.quill.getText().length;
+              $self.tooLong=false;
+            }
+          })
           this.$nextTick(()=>{
             this.$emit('after-init')
           })
         }
       },
       getHtml:function(){
-        let html=this.quill.root.innerHTML;
-        return `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${html}</div></div>`;
+        let html=`<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${this.quill.root.innerHTML}</div></div>`;
+        return html;
+      },
+      getContent:function(){
+        if(this.tooLong){
+          return false;
+        }else{
+          return this.getHtml();
+        }
       },
       guid() {
         function S4() {
@@ -84,7 +104,26 @@
   .ql-editor{
     overflow: auto;
   }
-  .ql-tooltip{
-
+  .text-too-long{
+    color: #F56C6C;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 4px;
+    position: absolute;
+    top: 100%;
+    left: 0;
   }
+  .rich-text-editor-error  {
+    border: 1px solid #F56C6C;
+  }
+  .rich-text-editor-error .ql-container.ql-snow {
+    border: unset !important
+  }
+
+  .rich-text-editor-error .ql-toolbar.ql-snow{
+    border-top: unset !important;
+    border-left: unset !important;
+    border-right: unset !important;
+  }
+
 </style>

nezha-fronted/src/components/common/language/cn.js

@@ -363,7 +363,8 @@ const cn = {
     usize: "必须是(1 - 49)的数字",
     url: "不合法的URL",
     uSize: "必须是(1 - 47)的数字",
-    requiredIdc:'机房为必选项'
+    requiredIdc:'机房为必选项',
+    tooLong:"文本太长"
   },
   search: {
     searchTip: "点击或回车执行搜索",

nezha-fronted/src/components/common/language/en.js

@@ -366,7 +366,8 @@ const en = {
     uSize:'Must be number(1 - 47)',
     requiredIdc:'dc is required',
     key:'Invalid key',
-    repeat:'Repeat'
+    repeat:'Repeat',
+    tooLong:'Too long content',
   },
   search: {
     searchTip: 'Enter to search',//'点击或回车执行搜索'

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -565,7 +565,7 @@
               });
             }
           } else {
-            console.log('error submit!!');
+            console.error('error submit!!');
             return false;
           }
         });
@@ -895,13 +895,17 @@
             });
           }else{
             this.$refs.chartForm.validate((valid) => {
+              let text=this.$refs.richTextEditor.getContent();
+              if(!text){
+                valid=false;
+              }
               const params = {
                 title: this.editChart.title,//this.editChart
                 span: this.editChart.span,
                 height: this.editChart.height,
                 type: this.editChart.type,
                 param:{
-                  text:this.$refs.richTextEditor.getHtml()
+                  text:text
                 },
                 sync: this.editChart.sync
               };
@@ -1286,6 +1290,10 @@
           });
         }else{
           this.$refs.chartForm.validate((valid) => {
+            let text=this.$refs.richTextEditor.getContent();
+            if(!text){
+              valid=false;
+            }
             const params = {
               title: this.editChart.title,//this.editChart
               span: this.editChart.span,
@@ -1293,7 +1301,7 @@
               type: this.editChart.type,
               unit:this.editChart.unit,
               param:{
-                text:this.$refs.richTextEditor.getHtml()
+                text:text
               }
             };