feat: 变量绑定插件样式优化,并新增文本最大字符限制配置

hzd822 · hzd822 · commit 251e41361fc2 · 2023-08-15T11:06:31.000+08:00
diff --git a/src/plugin/plugin-variable-bind-dialog/index.less b/src/plugin/plugin-variable-bind-dialog/index.less
@@ -6,7 +6,15 @@
     font-weight: 700;
     margin-bottom: 8px;
     color: rgb(0, 0, 0);
+    display: flex;
+    justify-content: space-between;
+    .error-message{
+      color:rgba(255,97,96);
+      font-weight: 400;
+    }
   }
+
+
   .dialog-help-tip-input {
     height: 180px;
     border: 1px solid rgba(31, 56, 88, 0.3);
@@ -29,7 +37,7 @@
     .vs-variable-selector-inner {
       border: 1px solid rgba(31, 56, 88, 0.3);
       display: flex;
-      height: 382px;
+      height: 389px;
       border-radius: 3px;
       ul {
         list-style: none;
@@ -141,13 +149,40 @@
     width: 420px;
     padding-left: 12px;
     float: left;
+    position: relative;
 
     .event-input-container {
       margin-bottom: 20px;
     }
     textarea {
       height: 100%;
     }
+
+    .editor-type-tag {
+      width: 18px;
+      height: 18px;
+      background-color: rgba(17, 105, 247, 0.18);
+      border-radius: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 35px;
+      z-index: 100;
+      left: 17px;
+    }
+
+    .editor-context{
+      border: 1px solid rgba(31, 56, 88, 0.3) ;
+      padding: 5px 5px 0px 15px;
+      border-top-right-radius: 3px;
+      border-top-left-radius: 3px;
+    }
+
+    .editor-context-error{
+      border-color:rgba(255,97,96,0.7);
+    }
+    
   }
 }
 
@@ -191,4 +226,12 @@
 .next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label {
   color: #fff;
   background-color: #4576f5;
-}
+}
+
+.lc-code-control:hover {
+  border-color: rgba(0, 0, 0, 0);
+}
+
+.lc-code-control.ve-focused {
+  border-color: rgba(0, 0, 0, 0);
+}
diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx
@@ -43,13 +43,15 @@ const defaultEditorOption = {
     scrollbar: {
       vertical: 'auto',
       horizontal: 'auto',
+      verticalScrollbarSize:0
     },
   }
 };
 
 export default class VariableBindDialog extends Component<PluginProps> {
   state = {
     visiable: false,
+    isOverFlowMaxSize:false,
     // stateVaroableList: [],
     helpText: HelpText,
     // contextKeys: [],
@@ -63,6 +65,7 @@ export default class VariableBindDialog extends Component<PluginProps> {
     minimize: false, // 是否最小化
     autoExpandParent: true,
     expandedKeys: [],
+    maxTextSize:0, // 绑定变量最大字符数
   };
 
   private editorJsRef = React.createRef();
@@ -82,6 +85,9 @@ export default class VariableBindDialog extends Component<PluginProps> {
         this.openDialog();
       });
     });
+
+    
+
   }
 
   exportSchema = () => {
@@ -94,6 +100,8 @@ export default class VariableBindDialog extends Component<PluginProps> {
     const fieldValue = field.getValue();
     const jsCode = fieldValue?.value;
 
+    const {maxTextSize} = this.props.config?.props || {}
+
     this.setState({
       jsCode,
       // fullScreenStatus: false,
@@ -103,6 +111,9 @@ export default class VariableBindDialog extends Component<PluginProps> {
       selParentVariable: null, // 选中的父级变量
       childrenVariableList: [], // 子级变量列表
       minimize: false, // 是否最小化
+      isOverFlowMaxSize:false,
+      // 配置的最大文本长度，默认为0，不控制
+      maxTextSize:maxTextSize?maxTextSize:0
     });
   };
 
@@ -311,12 +322,24 @@ export default class VariableBindDialog extends Component<PluginProps> {
   };
 
   updateCode = (newCode) => {
+
+    let isOverFlowMaxSize = false;
+    if (this.state.maxTextSize){
+      isOverFlowMaxSize = newCode?.length>this.state.maxTextSize
+    }
+
+
     this.setState(
       {
         jsCode: newCode,
+        isOverFlowMaxSize
       },
       this.autoSave,
     );
+
+
+
+    console.log('size====',newCode?.length);
   };
 
   autoSave = () => {
@@ -362,7 +385,7 @@ export default class VariableBindDialog extends Component<PluginProps> {
   };
 
   renderBottom = () => {
-    const { jsCode } = this.state;
+    const { jsCode,isOverFlowMaxSize } = this.state;
     return (
       <div className="variable-bind-dialog-bottom">
         <div className="bottom-left-container">
@@ -374,7 +397,7 @@ export default class VariableBindDialog extends Component<PluginProps> {
         </div>
 
         <div className="bottom-right-container">
-          <Button type="primary" onClick={this.onOk}>
+          <Button type="primary" onClick={this.onOk} disabled={isOverFlowMaxSize}>
             确定
           </Button>
           &nbsp;&nbsp;
@@ -504,6 +527,15 @@ export default class VariableBindDialog extends Component<PluginProps> {
     );
   };
 
+  renderErrorMessage = () => {
+    const {isOverFlowMaxSize,maxTextSize} = this.state;
+    return (
+      isOverFlowMaxSize ? <span className='error-message'>表达式文本不能超过{maxTextSize}个字符，请换成函数调用</span> :null
+      
+    )
+  }
+
+
   render() {
     const {
       visiable,
@@ -516,6 +548,7 @@ export default class VariableBindDialog extends Component<PluginProps> {
       minimize,
       expandedKeys,
       autoExpandParent,
+      isOverFlowMaxSize
     } = this.state;
 
     const filterTreeNode = (node) => {
@@ -604,8 +637,9 @@ export default class VariableBindDialog extends Component<PluginProps> {
             </div>
 
             <div className="dialog-right-container">
-              <div className="dialog-small-title">绑定</div>
-              <div id="jsEditorDom" className="editor-context" ref={this.editorJsRef}>
+              <div className="dialog-small-title">绑定 {this.renderErrorMessage()}</div>
+              <div id="jsEditorDom" className={isOverFlowMaxSize?"editor-context editor-context-error":"editor-context"} ref={this.editorJsRef}>
+                <div className="editor-type-tag">=</div>
                 <MonacoEditor
                   value={jsCode}
                   {...defaultEditorProps}
