@signalplus/params-about 1.0.27-alpha → 1.0.28-alpha

package/index.d.ts

@@ -92,6 +92,7 @@ interface ParamFormProps {
     groupEditable?: boolean;
     onChange?(data: ParamFormData): void;
     onSubmit?(data: ParamFormData): any;
+    onModalWidthChange?(width: number): any;
 }
 declare class ParamForm extends PureComponent<ParamFormProps> {
     ref: React.RefObject<any>;
@@ -110,12 +111,13 @@ declare class ParamFormModalEl extends PureComponent<ParamFormProps & Required<P
     state: {
         visible: boolean;
         pending: boolean;
+        width: number;
     };
     get isEdit(): boolean;
     onShow: () => void;
     onHide: () => void;
     onSubmit: () => any;
-    width: string | null;
+    handleModalWidthChange: (width: number) => void;
     render(): JSX.Element;
 }
 declare class ParamFormModal {
@@ -139,6 +141,7 @@ interface ParamValueEditorProps {
     initialValues: ParamValueEditorData;
     onChange?(data: ParamValueEditorData): void;
     onSubmit?(data: ParamValueEditorData): any;
+    onModalWidthChange(width: number): void;
 }
 declare class ParamValueEditor extends PureComponent<ParamValueEditorProps> {
     ref: React.RefObject<any>;
@@ -158,10 +161,12 @@ declare class ParamValueEditorModalEl extends PureComponent<ParamValueEditorProp
     state: {
         visible: boolean;
         pending: boolean;
+        width: number;
     };
     onShow: () => void;
     onHide: () => void;
     onSubmit: () => any;
+    handleModalWidthChange: (width: number) => void;
     render(): JSX.Element;
 }
 declare class ParamValueEditorModal {

package/lib/es/index.js

@@ -1,7 +1,7 @@
 /**
  * Bundle of @signalplus/params-about
- * Generated: 2025-10-15
- * Version: 1.0.27-alpha
+ * Generated: 2026-09-23
+ * Version: 1.0.28-alpha
  * License: MIT
  * Author: 2631541504@qq.com
  */
@@ -561,7 +561,7 @@ var Num = /*#__PURE__*/function (_PureComponent) {
         className: "param-number-val"
       }, this.state.tempValue || 'N/A') : /*#__PURE__*/React.createElement("input", {
         style: {
-          width: this.props.isPercentage ? 50 : 90
+          width: this.props.singleWidth || this.props.isPercentage ? 50 : 90
         },
         className: "param-number-val",
         type: "text",
@@ -629,12 +629,13 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
         }, this.props.className),
         style: this.props.style
       }, this.props.readonly ? '(' : '', /*#__PURE__*/React.createElement(Num, {
-        placeholder: 'Min',
+        placeholder: this.props.minName || 'Min',
         value: (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.min,
         onChange: this.onChange.bind(null, 'min'),
         isPercentage: this.props.isPercentage,
         readonly: this.props.readonly,
-        onBlur: this.props.onBlur
+        onBlur: this.props.onBlur,
+        singleWidth: this.props.singleWidth
       }), /*#__PURE__*/React.createElement("span", {
         className: "param-number-range-sep",
         style: this.props.readonly ? {
@@ -642,12 +643,13 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
           marginRight: 4
         } : undefined
       }, this.props.readonly ? ',' : '~'), /*#__PURE__*/React.createElement(Num, {
-        placeholder: 'Max',
+        placeholder: this.props.maxName || 'Max',
         value: (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.max,
         onChange: this.onChange.bind(null, 'max'),
         isPercentage: this.props.isPercentage,
         readonly: this.props.readonly,
-        onBlur: this.props.onBlur
+        onBlur: this.props.onBlur,
+        singleWidth: this.props.singleWidth
       }), this.props.readonly ? ')' : '');
     }
   }]);
@@ -1445,7 +1447,8 @@ var InstrumentsValueList = /*#__PURE__*/function (_PureComponent) {
       var _this$props$value,
           _this2 = this;
 
-      this.value = this.props.value || [];
+      // Keep the editable placeholder local instead of mutating the parent's array.
+      this.value = _toConsumableArray(this.props.value || []);
       if (!this.value.length && !this.props.readonly) this.value.push({
         instrument: ''
       });
@@ -1663,7 +1666,8 @@ var TextValueList = /*#__PURE__*/function (_PureComponent) {
       var _this$props$value,
           _this2 = this;
 
-      this.value = this.props.value || [];
+      // Keep the editable placeholder local instead of mutating the parent's array.
+      this.value = _toConsumableArray(this.props.value || []);
       if (!this.value.length && !this.props.readonly) this.value.push({
         key: ''
       });
@@ -2433,7 +2437,8 @@ var TenorBucketHandlerList = /*#__PURE__*/function (_PureComponent) {
       var _this$props$value,
           _this2 = this;
 
-      this.value = this.props.value || [];
+      // Keep the editable placeholder local instead of mutating the parent's array.
+      this.value = _toConsumableArray(this.props.value || []);
       if (!this.value.length && !this.props.readonly) this.value.push({
         key: ''
       });
@@ -2504,6 +2509,118 @@ var TenorBucketHandlerList = /*#__PURE__*/function (_PureComponent) {
   return TenorBucketHandlerList;
 }(PureComponent);
 
+var NumRangeFromTo = /*#__PURE__*/function (_PureComponent) {
+  _inherits(NumRangeFromTo, _PureComponent);
+
+  var _super = _createSuper(NumRangeFromTo);
+
+  function NumRangeFromTo() {
+    var _this;
+
+    _classCallCheck(this, NumRangeFromTo);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (key, val) {
+      var _this$props$onChange, _this$props;
+
+      var value = _objectSpread2({}, _this.props.value);
+
+      value[key] = val;
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value);
+    });
+
+    return _this;
+  }
+
+  _createClass(NumRangeFromTo, [{
+    key: "render",
+    value: function render() {
+      var _this$props$value, _this$props$value2;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('param-number-range', {
+          readonly: this.props.readonly
+        }, this.props.className),
+        style: this.props.style
+      }, this.props.readonly ? '(' : '', /*#__PURE__*/React.createElement(Num, {
+        placeholder: 'From',
+        value: (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.from,
+        onChange: this.onChange.bind(null, 'from'),
+        isPercentage: this.props.isPercentage,
+        readonly: this.props.readonly,
+        onBlur: this.props.onBlur
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "param-number-range-sep",
+        style: this.props.readonly ? {
+          marginLeft: 0,
+          marginRight: 4
+        } : undefined
+      }, this.props.readonly ? ',' : '~'), /*#__PURE__*/React.createElement(Num, {
+        placeholder: 'To',
+        value: (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.to,
+        onChange: this.onChange.bind(null, 'to'),
+        isPercentage: this.props.isPercentage,
+        readonly: this.props.readonly,
+        onBlur: this.props.onBlur
+      }), this.props.readonly ? ')' : '');
+    }
+  }]);
+
+  return NumRangeFromTo;
+}(PureComponent);
+
+function hasRangeOverlap(range1, range2) {
+  var _range1$min, _range1$max, _range2$min, _range2$max;
+
+  var min1 = (_range1$min = range1.min) !== null && _range1$min !== void 0 ? _range1$min : -Infinity;
+  var max1 = (_range1$max = range1.max) !== null && _range1$max !== void 0 ? _range1$max : Infinity;
+  var min2 = (_range2$min = range2.min) !== null && _range2$min !== void 0 ? _range2$min : -Infinity;
+  var max2 = (_range2$max = range2.max) !== null && _range2$max !== void 0 ? _range2$max : Infinity; // 边界相等不算重叠，所以用严格比较
+
+  return min1 < max2 && min2 < max1;
+}
+/**
+ * 检查VegaRules数组是否合法
+ */
+
+
+function validateVegaRules(rules) {
+  for (var i = 0; i < rules.length; i++) {
+    var _currentRule$optionTy;
+
+    var currentRule = rules[i];
+    var currentType = (_currentRule$optionTy = currentRule.optionType) !== null && _currentRule$optionTy !== void 0 ? _currentRule$optionTy : 'Both'; // 默认按Both处理
+
+    for (var j = i + 1; j < rules.length; j++) {
+      var _compareRule$optionTy;
+
+      var compareRule = rules[j];
+      var compareType = (_compareRule$optionTy = compareRule.optionType) !== null && _compareRule$optionTy !== void 0 ? _compareRule$optionTy : 'Both'; // 检查是否需要比较这两个规则
+
+      var shouldCompare = false;
+
+      if (currentType === 'Both' || compareType === 'Both') {
+        // 任意一个是Both，就需要比较
+        shouldCompare = true;
+      } else if (currentType === compareType) {
+        // 类型相同（都是Call或都是Put），需要比较
+        shouldCompare = true;
+      } // 类型不同（一个Call一个Put），不需要比较
+
+
+      if (shouldCompare && hasRangeOverlap(currentRule.deltaRange, compareRule.deltaRange)) {
+        return false; // 发现重叠，不合法
+      }
+    }
+  }
+
+  return true; // 没有发现重叠，合法
+}
 var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
   _inherits(ExpiryVegaAlphaByEdgeList, _PureComponent);
 
@@ -2526,7 +2643,7 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
       var _item$vegaRules, _item$expiry;
 
       var vegaRulesValid = item.vegaRules ? (_item$vegaRules = item.vegaRules) === null || _item$vegaRules === void 0 ? void 0 : _item$vegaRules.find(function (it) {
-        return it.deltaRange.min || it.deltaRange.max || it.bidEdgeRange.min || it.bidEdgeRange.max || it.askEdgeRange.min || it.askEdgeRange.max;
+        return it.deltaRange.min || it.deltaRange.max || it.bidEdgeSpan.from || it.bidEdgeSpan.to || it.askEdgeSpan.from || it.askEdgeSpan.to;
       }) : true;
       return !((_item$expiry = item.expiry) === null || _item$expiry === void 0 ? void 0 : _item$expiry.trim()) && !item.vegaTarget && !!vegaRulesValid;
     });
@@ -2545,13 +2662,13 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
             min: undefined,
             max: undefined
           },
-          bidEdgeRange: {
-            min: undefined,
-            max: undefined
+          bidEdgeSpan: {
+            from: undefined,
+            to: undefined
           },
-          askEdgeRange: {
-            min: undefined,
-            max: undefined
+          askEdgeSpan: {
+            from: undefined,
+            to: undefined
           },
           allowTaker: false,
           disable: false
@@ -2560,38 +2677,38 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
 
       if (key) {
         if (subKey && typeof k === 'number') {
-          if (subKey === 'optionType') {
-            // console.log('changeValue==========================', value, i, val, key, k, subKey);
-            if (val === 'Both') {
-              value[i].vegaRules = [_objectSpread2(_objectSpread2({}, value[i].vegaRules[k]), {}, {
-                optionType: 'Both'
-              })];
-            } else {
-              var _value$i$vegaRules;
-
-              if (((_value$i$vegaRules = value[i].vegaRules) === null || _value$i$vegaRules === void 0 ? void 0 : _value$i$vegaRules.length) <= 1) value[i].vegaRules = [_objectSpread2(_objectSpread2({}, value[i].vegaRules[k]), {}, {
-                optionType: val
-              }), {
-                optionType: val === 'Call' ? 'Put' : 'Call',
-                deltaRange: {
-                  min: undefined,
-                  max: undefined
-                },
-                bidEdgeRange: {
-                  min: undefined,
-                  max: undefined
-                },
-                askEdgeRange: {
-                  min: undefined,
-                  max: undefined
-                },
-                allowTaker: false,
-                disable: false
-              }];else value[i].vegaRules[k][subKey] = val;
-            }
-          } else {
-            value[i].vegaRules[k][subKey] = val;
-          }
+          // if (subKey === 'optionType') {
+          //   // console.log('changeValue==========================', value, i, val, key, k, subKey);
+          //   if (val === 'Both') {
+          //     value[i].vegaRules = [{ ...value[i].vegaRules[k], optionType: 'Both' }];
+          //   } else {
+          //     if (value[i].vegaRules?.length <= 1)
+          //       value[i].vegaRules = [
+          //         { ...value[i].vegaRules[k], optionType: val },
+          //         {
+          //           optionType: val === 'Call' ? 'Put' : 'Call',
+          //           deltaRange: {
+          //             min: undefined,
+          //             max: undefined,
+          //           },
+          //           bidEdgeSpan: {
+          //             from: undefined,
+          //             to: undefined,
+          //           },
+          //           askEdgeSpan: {
+          //             from: undefined,
+          //             to: undefined,
+          //           },
+          //           allowTaker: false,
+          //           disable: false,
+          //         },
+          //       ];
+          //     else value[i].vegaRules[k][subKey] = val as never;
+          //   }
+          // } else {
+          //   value[i].vegaRules[k][subKey] = val as never;
+          // }
+          value[i].vegaRules[k][subKey] = val;
         } else {
           value[i][key] = val;
         }
@@ -2616,13 +2733,13 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
             min: undefined,
             max: undefined
           },
-          bidEdgeRange: {
-            min: undefined,
-            max: undefined
+          bidEdgeSpan: {
+            from: undefined,
+            to: undefined
           },
-          askEdgeRange: {
-            min: undefined,
-            max: undefined
+          askEdgeSpan: {
+            from: undefined,
+            to: undefined
           },
           allowTaker: false,
           disable: false
@@ -2632,16 +2749,52 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
       (_this$props$onBlur = (_this$props3 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props3);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onDel", function (i) {
+    _defineProperty(_assertThisInitialized(_this), "onAddRule", function (i, k) {
       var _this$props$onChange3, _this$props4, _this$props$onBlur2, _this$props5;
 
       var value = _toConsumableArray(_this.value);
 
-      value.splice(i, 1);
-      (_this$props$onChange3 = (_this$props4 = _this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props4, value.length === 1 && _this.isEmptyItem(value[0]) ? [] : value);
+      value[i].vegaRules.splice(k + 1, 0, {
+        optionType: undefined,
+        deltaRange: {
+          min: undefined,
+          max: undefined
+        },
+        bidEdgeSpan: {
+          from: undefined,
+          to: undefined
+        },
+        askEdgeSpan: {
+          from: undefined,
+          to: undefined
+        },
+        allowTaker: false,
+        disable: false
+      });
+      (_this$props$onChange3 = (_this$props4 = _this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props4, value);
       (_this$props$onBlur2 = (_this$props5 = _this.props).onBlur) === null || _this$props$onBlur2 === void 0 ? void 0 : _this$props$onBlur2.call(_this$props5);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onDel", function (i) {
+      var _this$props$onChange4, _this$props6, _this$props$onBlur3, _this$props7;
+
+      var value = _toConsumableArray(_this.value);
+
+      value.splice(i, 1);
+      (_this$props$onChange4 = (_this$props6 = _this.props).onChange) === null || _this$props$onChange4 === void 0 ? void 0 : _this$props$onChange4.call(_this$props6, value.length === 1 && _this.isEmptyItem(value[0]) ? [] : value);
+      (_this$props$onBlur3 = (_this$props7 = _this.props).onBlur) === null || _this$props$onBlur3 === void 0 ? void 0 : _this$props$onBlur3.call(_this$props7);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDelRule", function (i, k) {
+      var _this$props$onChange5, _this$props8, _this$props$onBlur4, _this$props9;
+
+      var value = _toConsumableArray(_this.value);
+
+      value[i].vegaRules.splice(k, 1);
+      (_this$props$onChange5 = (_this$props8 = _this.props).onChange) === null || _this$props$onChange5 === void 0 ? void 0 : _this$props$onChange5.call(_this$props8, value.length === 1 && _this.isEmptyItem(value[0]) ? [] : value);
+      (_this$props$onBlur4 = (_this$props9 = _this.props).onBlur) === null || _this$props$onBlur4 === void 0 ? void 0 : _this$props$onBlur4.call(_this$props9);
+    });
+
     return _this;
   }
 
@@ -2664,13 +2817,13 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
             min: undefined,
             max: undefined
           },
-          bidEdgeRange: {
-            min: undefined,
-            max: undefined
+          bidEdgeSpan: {
+            from: undefined,
+            to: undefined
           },
-          askEdgeRange: {
-            min: undefined,
-            max: undefined
+          askEdgeSpan: {
+            from: undefined,
+            to: undefined
           },
           allowTaker: false,
           disable: false
@@ -2689,44 +2842,98 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
         }, it.expiry, /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike(it.vegaTarget) ? it.vegaTarget : '-', /*#__PURE__*/React.createElement("span", null, "/"), it.vegaRules.map(function ($it, $i) {
           return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
             key: $i
-          }, !isNullLike($it.optionType) ? $it.optionType : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.deltaRange.min) && !isNullLike($it.deltaRange.max) ? "(".concat($it.deltaRange.min, ", ").concat($it.deltaRange.max, ")") : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.bidEdgeRange.min) && !isNullLike($it.bidEdgeRange.max) ? "(".concat(NumCvt.show($it.bidEdgeRange.min, true), "%, ").concat(NumCvt.show($it.bidEdgeRange.max, true), "%)") : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.askEdgeRange.min) && !isNullLike($it.askEdgeRange.max) ? "(".concat(NumCvt.show($it.askEdgeRange.min, true), "%, ").concat(NumCvt.show($it.askEdgeRange.max, true), "%)") : '-', /*#__PURE__*/React.createElement("span", null, "/"), typeof $it.allowTaker === 'boolean' ? $it.allowTaker.toString().toUpperCase() : '-', /*#__PURE__*/React.createElement("span", null, "/"), typeof $it.disable === 'boolean' ? $it.disable.toString().toUpperCase() : '-'), /*#__PURE__*/React.createElement("br", null));
+          }, !isNullLike($it.optionType) ? $it.optionType : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.deltaRange.min) && !isNullLike($it.deltaRange.max) ? "(".concat($it.deltaRange.min, ", ").concat($it.deltaRange.max, ")") : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.bidEdgeSpan.from) && !isNullLike($it.bidEdgeSpan.to) ? "(".concat(NumCvt.show($it.bidEdgeSpan.from, true), "%, ").concat(NumCvt.show($it.bidEdgeSpan.to, true), "%)") : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.askEdgeSpan.from) && !isNullLike($it.askEdgeSpan.to) ? "(".concat(NumCvt.show($it.askEdgeSpan.from, true), "%, ").concat(NumCvt.show($it.askEdgeSpan.to, true), "%)") : '-', /*#__PURE__*/React.createElement("span", null, "/"), typeof $it.allowTaker === 'boolean' ? $it.allowTaker.toString().toUpperCase() : '-', /*#__PURE__*/React.createElement("span", null, "/"), typeof $it.disable === 'boolean' ? $it.disable.toString().toUpperCase() : '-'), /*#__PURE__*/React.createElement("br", null));
         })), /*#__PURE__*/React.createElement("br", null));
       }) : '-' : /*#__PURE__*/React.createElement("div", {
         className: "param-expiries-limit-inputs",
         style: {
-          gridTemplateColumns: '110px 100px auto auto'
+          display: 'flex',
+          flexDirection: 'column',
+          width: 1150
         }
       }, /*#__PURE__*/React.createElement("div", {
-        className: "param-number-range readonly"
+        style: {
+          display: 'flex',
+          width: '100%',
+          gap: 8
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 100
+        }
       }, "Expiry"), /*#__PURE__*/React.createElement("div", {
-        className: "param-number-range readonly"
+        style: {
+          width: 80
+        }
       }, "Vega Target"), /*#__PURE__*/React.createElement("div", {
-        className: "param-number-range readonly"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "param-number-range readonly"
-      }), this.value.map(function (it, i) {
+        style: {
+          width: 120,
+          paddingLeft: 18
+        }
+      }, "Both/Call/Put"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 160
+        }
+      }, "Delta Range"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 210
+        }
+      }, "Bid Edge Range"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 210
+        }
+      }, "Ask Edge Range"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 74
+        }
+      }, "Allow Taker"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 60
+        }
+      }, "Disable")), this.value.map(function (it, i) {
         var _this2$props$value, _this2$props$value$i;
 
-        return /*#__PURE__*/React.createElement(React.Fragment, {
-          key: i
+        return /*#__PURE__*/React.createElement("div", {
+          key: i,
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%'
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            width: '100%',
+            alignItems: 'flex-start',
+            gap: 8
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: 100,
+            marginRight: 0
+          }
         }, /*#__PURE__*/React.createElement(Expiries, {
           style: {
-            width: 110,
-            minWidth: 0,
-            position: 'relative',
-            top: i > 0 ? -30 : 0
+            width: 100,
+            minWidth: 0
           },
           multiple: false,
           options: _this2.props.options,
           value: [it.expiry || ''],
           onChange: function onChange(val) {
             return _this2.onChange(i, val[0], 'expiry');
-          } // calcDisabled={(expiry) =>
-          //   this.value.some((item) => item !== it && item.expiry === expiry)
-          // }
-          ,
-          onBlur: _this2.props.onBlur
-        }), /*#__PURE__*/React.createElement(Num, {
+          },
+          onBlur: _this2.props.onBlur,
+          calcDisabled: function calcDisabled(option) {
+            return !!_this2.value.find(function (vega) {
+              return vega.expiry === option;
+            });
+          }
+        })), /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: 80
+          }
+        }, /*#__PURE__*/React.createElement(Num, {
           value: (_this2$props$value = _this2.props.value) === null || _this2$props$value === void 0 ? void 0 : (_this2$props$value$i = _this2$props$value[i]) === null || _this2$props$value$i === void 0 ? void 0 : _this2$props$value$i.vegaTarget,
           onChange: function onChange(val) {
             return _this2.onChange(i, val, 'vegaTarget');
@@ -2735,46 +2942,66 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
           readonly: _this2.props.readonly,
           onBlur: _this2.props.onBlur,
           style: {
-            height: 30,
-            position: 'relative',
-            top: i > 0 ? -30 : 0
+            height: 30
+          },
+          singleWidth: 50
+        })), /*#__PURE__*/React.createElement("div", {
+          style: {
+            flex: 1,
+            minWidth: 734
           }
-        }), /*#__PURE__*/React.createElement("div", {
-          className: "param-expiries-limit-inputs",
+        }, /*#__PURE__*/React.createElement("div", {
           style: {
-            position: 'relative',
-            top: -30,
-            width: 734,
-            gridTemplateColumns: 'auto auto auto auto auto auto'
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8
           }
         }, it.vegaRules.map(function (rule, k) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, i === 0 && k === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-            className: "param-number-range readonly"
-          }, "Call/Put/Call"), /*#__PURE__*/React.createElement("div", {
-            className: "param-number-range readonly"
-          }, "Delta Range"), /*#__PURE__*/React.createElement("div", {
-            className: "param-number-range readonly"
-          }, "Bid Edge Range"), /*#__PURE__*/React.createElement("div", {
-            className: "param-number-range readonly"
-          }, "Ask Edge Range"), /*#__PURE__*/React.createElement("div", {
-            className: "param-number-range readonly"
-          }, "Allow Taker"), /*#__PURE__*/React.createElement("div", {
-            className: "param-number-range readonly"
-          }, "Disabled")) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(TextSelector, {
+          var _it$vegaRules;
+
+          return /*#__PURE__*/React.createElement("div", {
+            key: k,
+            style: {
+              display: 'flex',
+              width: '100%',
+              alignItems: 'center',
+              gap: 8
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            style: {
+              display: 'flex',
+              width: 120,
+              height: 30,
+              alignItems: 'center'
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "param-arr-ops",
+            style: {
+              visibility: k === ((_it$vegaRules = it.vegaRules) === null || _it$vegaRules === void 0 ? void 0 : _it$vegaRules.length) - 1 ? 'visible' : 'hidden'
+            }
+          }, /*#__PURE__*/React.createElement(PlusOutlined, {
+            className: "param-arr-ops-add",
+            onClick: _this2.onAddRule.bind(null, i, k),
+            style: {
+              width: 18
+            }
+          })), /*#__PURE__*/React.createElement(TextSelector, {
             style: {
               width: 88,
-              minWidth: 0,
               padding: '0 10px',
-              height: 30
+              height: '30px !important'
             },
             multiple: false,
             value: [rule.optionType || ''],
             onChange: function onChange(val) {
               return _this2.onChange(i, val[0], 'vegaRules', k, 'optionType');
-            } // onBlur={this.props.onBlur}
-            ,
+            },
             options: ['Both', 'Call', 'Put']
-          }), /*#__PURE__*/React.createElement(NumRange, {
+          })), /*#__PURE__*/React.createElement("div", {
+            style: {
+              width: 160
+            }
+          }, /*#__PURE__*/React.createElement(NumRange, {
             value: {
               min: rule.deltaRange.min,
               max: rule.deltaRange.max
@@ -2782,32 +3009,41 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
             onChange: function onChange(val) {
               return _this2.onChange(i, val, 'vegaRules', k, 'deltaRange');
             },
-            onBlur: _this2.props.onBlur
-          }), /*#__PURE__*/React.createElement(NumRange, {
+            onBlur: _this2.props.onBlur,
+            singleWidth: 50
+          })), /*#__PURE__*/React.createElement("div", {
+            style: {
+              width: 210
+            }
+          }, /*#__PURE__*/React.createElement(NumRangeFromTo, {
             value: {
-              min: rule.bidEdgeRange.min,
-              max: rule.bidEdgeRange.max
+              from: rule.bidEdgeSpan.from,
+              to: rule.bidEdgeSpan.to
             },
             onChange: function onChange(val) {
-              return _this2.onChange(i, val, 'vegaRules', k, 'bidEdgeRange');
+              return _this2.onChange(i, val, 'vegaRules', k, 'bidEdgeSpan');
             },
             isPercentage: true,
             onBlur: _this2.props.onBlur
-          }), /*#__PURE__*/React.createElement(NumRange, {
+          })), /*#__PURE__*/React.createElement("div", {
+            style: {
+              width: 210
+            }
+          }, /*#__PURE__*/React.createElement(NumRangeFromTo, {
             value: {
-              min: rule.askEdgeRange.min,
-              max: rule.askEdgeRange.max
+              from: rule.askEdgeSpan.from,
+              to: rule.askEdgeSpan.to
             },
             onChange: function onChange(val) {
-              return _this2.onChange(i, val, 'vegaRules', k, 'askEdgeRange');
+              return _this2.onChange(i, val, 'vegaRules', k, 'askEdgeSpan');
             },
             isPercentage: true,
             onBlur: _this2.props.onBlur
-          }), /*#__PURE__*/React.createElement("div", {
+          })), /*#__PURE__*/React.createElement("div", {
             style: {
-              width: 74,
-              position: 'relative',
-              top: 4
+              display: 'flex',
+              justifyContent: 'center',
+              width: 74
             }
           }, /*#__PURE__*/React.createElement(Checkbox, {
             checked: rule.allowTaker,
@@ -2816,33 +3052,40 @@ var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
             }
           })), /*#__PURE__*/React.createElement("div", {
             style: {
-              width: 74,
+              display: 'flex',
+              justifyContent: 'center',
               position: 'relative',
-              top: 4
+              width: 60
             }
           }, /*#__PURE__*/React.createElement(Checkbox, {
             checked: rule.disable,
             onChange: function onChange(e) {
               return _this2.onChange(i, e.target.checked, 'vegaRules', k, 'disable');
             }
-          })));
-        })), /*#__PURE__*/React.createElement("div", {
-          className: "param-arr-ops"
-        }, /*#__PURE__*/React.createElement(PlusOutlined, {
-          className: "param-arr-ops-add",
-          onClick: _this2.onAdd.bind(null, i),
+          }), /*#__PURE__*/React.createElement("div", {
+            className: "param-arr-ops",
+            style: {
+              position: 'absolute',
+              right: -80,
+              top: -4,
+              visibility: k === 0 ? 'hidden' : 'visible'
+            }
+          }, /*#__PURE__*/React.createElement(DeleteOutlined, {
+            className: "param-arr-ops-del",
+            onClick: _this2.onDelRule.bind(null, i, k)
+          }))));
+        }))), /*#__PURE__*/React.createElement("div", {
+          className: "param-arr-ops",
           style: {
-            position: 'relative',
-            top: i > 0 ? -30 : 0
+            width: 60
           }
+        }, /*#__PURE__*/React.createElement(PlusOutlined, {
+          className: "param-arr-ops-add",
+          onClick: _this2.onAdd.bind(null, i)
         }), /*#__PURE__*/React.createElement(DeleteOutlined, {
           className: "param-arr-ops-del",
-          onClick: _this2.onDel.bind(null, i),
-          style: {
-            position: 'relative',
-            top: i > 0 ? -30 : 0
-          }
-        })));
+          onClick: _this2.onDel.bind(null, i)
+        }))));
       })));
     }
   }]);
@@ -2856,6 +3099,10 @@ function emptyErrText(index, key) {
   return "The ".concat(index + 1).concat(index === 0 ? 'st' : index === 1 ? 'nd' : index === 2 ? 'rd' : 'th', " item: ").concat(key ? key + ' ' : '', "should not be empty");
 }
 
+function zeroErrText(index, key, type, canZero) {
+  return "The ".concat(index + 1).concat(index === 0 ? 'st' : index === 1 ? 'nd' : index === 2 ? 'rd' : 'th', " item: ").concat(key ? key + ' ' : '', "should be ").concat(type === 'min' ? canZero ? '<=' : '<' : canZero ? '>=' : '>', " 0");
+}
+
 var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig, ParamType.ParamGroup, {
   name: '参数组',
   Comp: function Comp() {
@@ -3185,6 +3432,10 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
         return emptyErrText(i, 'vegaTarget');
       }
 
+      if (Number(val.vegaTarget) === 0) {
+        return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: vega target can not be 0");
+      }
+
       var $$val = val.vegaRules || [];
 
       for (var k = 0; k < $$val.length; k++) {
@@ -3198,24 +3449,75 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
           return emptyErrText(i, "delta range's min");
         }
 
+        if (Number(vegaRule.deltaRange.min) < 0 || Number(vegaRule.deltaRange.min) > 1) {
+          // return zeroErrText(i, "delta range's min", 'max', true);
+          return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: delta range's min only support 0 ~ 1");
+        }
+
         if (isEmpty(vegaRule.deltaRange.max)) {
           return emptyErrText(i, "delta range's max");
         }
 
-        if (isEmpty(vegaRule.bidEdgeRange.min)) {
-          return emptyErrText(i, "bid edge range's min");
+        if (Number(vegaRule.deltaRange.max) < 0 || Number(vegaRule.deltaRange.max) > 1) {
+          // return zeroErrText(i, "delta range's max", 'max', true);
+          return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: delta range's max only support 0 ~ 1");
+        }
+
+        if (Number(vegaRule.deltaRange.max) <= Number(vegaRule.deltaRange.min)) {
+          // return zeroErrText(i, "delta range's max", 'max', true);
+          return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: delta range's max should be > min");
+        }
+
+        if (isEmpty(vegaRule.bidEdgeSpan.from)) {
+          return emptyErrText(i, "bid edge range's from");
         }
 
-        if (isEmpty(vegaRule.bidEdgeRange.max)) {
-          return emptyErrText(i, "bid edge range's max");
+        if (isEmpty(vegaRule.bidEdgeSpan.to)) {
+          return emptyErrText(i, "bid edge range's to");
         }
 
-        if (isEmpty(vegaRule.askEdgeRange.min)) {
-          return emptyErrText(i, "ask edge range's min");
+        if (isEmpty(vegaRule.askEdgeSpan.from)) {
+          return emptyErrText(i, "ask edge range's from");
+        }
+
+        if (isEmpty(vegaRule.askEdgeSpan.to)) {
+          return emptyErrText(i, "ask edge range's to");
+        }
+
+        if (Number(val.vegaTarget) > 0) {
+          if (Number(vegaRule.bidEdgeSpan.from) < 0) {
+            return zeroErrText(i, "bid edge range's from", 'max', true);
+          }
+
+          if (Number(vegaRule.bidEdgeSpan.to) < 0) {
+            return zeroErrText(i, "bid edge range's to", 'max', true);
+          }
+
+          if (Number(vegaRule.askEdgeSpan.from) < 0) {
+            return zeroErrText(i, "ask edge range's from", 'max', true);
+          }
+
+          if (Number(vegaRule.askEdgeSpan.to) < 0) {
+            return zeroErrText(i, "ask edge range's to", 'max', true);
+          }
         }
 
-        if (isEmpty(vegaRule.askEdgeRange.max)) {
-          return emptyErrText(i, "ask edge range's max");
+        if (Number(val.vegaTarget) < 0) {
+          if (Number(vegaRule.bidEdgeSpan.from) > 0) {
+            return zeroErrText(i, "bid edge range's from", 'min', true);
+          }
+
+          if (Number(vegaRule.bidEdgeSpan.to) > 0) {
+            return zeroErrText(i, "bid edge range's to", 'min', true);
+          }
+
+          if (Number(vegaRule.askEdgeSpan.from) > 0) {
+            return zeroErrText(i, "ask edge range's from", 'min', true);
+          }
+
+          if (Number(vegaRule.askEdgeSpan.to) > 0) {
+            return zeroErrText(i, "ask edge range's to", 'min', true);
+          }
         }
       } // if (expiries.includes(val.expiry)) {
       //   return `The ${i + 1} ${
@@ -3226,13 +3528,15 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
       // }
 
 
+      var hasOverRange = validateVegaRules($$val);
+      if (!hasOverRange) return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: delta range overlap");
       expiries.push(val.expiry);
     }
 
     return '';
   },
   sort: 18,
-  modalWidth: 1280
+  modalWidth: 1300
 }), _ParamTypeConfig);
 function paramValidator(val, values, enableEmpty) {
   var _config$validator;
@@ -3402,10 +3706,11 @@ var ParamForm = /*#__PURE__*/function (_PureComponent) {
       (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, $data);
 
       if ('valueType' in changed) {
-        var _this$ref$current$get, _this$ref$current, _this$props$initialVa;
+        var _this$ref$current$get, _this$ref$current, _this$props$initialVa, _this$props$onModalWi, _this$props2, _config$modalWidth;
 
         var config = ParamTypeConfig[(_this$ref$current$get = (_this$ref$current = _this.ref.current) === null || _this$ref$current === void 0 ? void 0 : _this$ref$current.getFieldValue('valueType')) !== null && _this$ref$current$get !== void 0 ? _this$ref$current$get : (_this$props$initialVa = _this.props.initialValues) === null || _this$props$initialVa === void 0 ? void 0 : _this$props$initialVa.valueType];
-        localStorage.setItem('__editParamModalWidth', String(config.modalWidth) || '0');
+        localStorage.setItem('__editParamModalWidth', config.modalWidth ? String(config.modalWidth) : '740');
+        (_this$props$onModalWi = (_this$props2 = _this.props).onModalWidthChange) === null || _this$props$onModalWi === void 0 ? void 0 : _this$props$onModalWi.call(_this$props2, (_config$modalWidth = config.modalWidth) !== null && _config$modalWidth !== void 0 ? _config$modalWidth : 740);
 
         _this.forceUpdate();
       }
@@ -3424,7 +3729,6 @@ var ParamForm = /*#__PURE__*/function (_PureComponent) {
 
       var valueType = (_this$ref$current$get2 = (_this$ref$current2 = this.ref.current) === null || _this$ref$current2 === void 0 ? void 0 : _this$ref$current2.getFieldValue('valueType')) !== null && _this$ref$current$get2 !== void 0 ? _this$ref$current$get2 : (_this$props$initialVa2 = this.props.initialValues) === null || _this$props$initialVa2 === void 0 ? void 0 : _this$props$initialVa2.valueType;
       var config = ParamTypeConfig[valueType];
-      localStorage.setItem('__editParamModalWidth', String(config.modalWidth) || '0');
       return [{
         label: '所属分组',
         name: 'parentId',
@@ -3567,12 +3871,16 @@ var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
 
     _defineProperty(_assertThisInitialized(_this4), "state", {
       visible: false,
-      pending: false
+      pending: false,
+      width: 740
     });
 
     _defineProperty(_assertThisInitialized(_this4), "onShow", function () {
+      var _this4$props$initialV, _ParamTypeConfig$_thi, _this4$props$initialV2;
+
       return _this4.setState({
-        visible: true
+        visible: true,
+        width: ((_this4$props$initialV = _this4.props.initialValues) === null || _this4$props$initialV === void 0 ? void 0 : _this4$props$initialV.valueType) ? (_ParamTypeConfig$_thi = ParamTypeConfig[(_this4$props$initialV2 = _this4.props.initialValues) === null || _this4$props$initialV2 === void 0 ? void 0 : _this4$props$initialV2.valueType]) === null || _ParamTypeConfig$_thi === void 0 ? void 0 : _ParamTypeConfig$_thi.modalWidth : 740
       });
     });
 
@@ -3604,7 +3912,11 @@ var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this4), "width", localStorage.getItem('__editParamModalWidth'));
+    _defineProperty(_assertThisInitialized(_this4), "handleModalWidthChange", function (width) {
+      _this4.setState({
+        width: width
+      });
+    });
 
     return _this4;
   }
@@ -3621,10 +3933,11 @@ var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
     value: function render() {
       return /*#__PURE__*/React.createElement(Modal, {
         key: String(this.state.visible),
-        width: Number(this.width) || 740,
+        width: this.state.width || 740,
         closable: false,
         title: !this.isEdit ? '新增参数' : '修改参数',
         visible: this.state.visible,
+        destroyOnClose: true,
         footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
           onClick: this.onHide
         }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
@@ -3634,7 +3947,8 @@ var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
         }, "\u786E\u8BA4"))
       }, /*#__PURE__*/React.createElement(ParamForm, Object.assign({}, this.props, {
         ref: this.ref,
-        onSubmit: undefined
+        onSubmit: undefined,
+        onModalWidthChange: this.handleModalWidthChange
       })));
     }
   }]);
@@ -3689,9 +4003,18 @@ var ParamValueEditor = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "ref", React.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (changed, data) {
-      var _this$props$onChange, _this$props;
+      var _this$props$onChange, _this$props2;
 
-      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, data);
+      if ('valueType' in changed) {
+        var _this$ref$current$get, _this$ref$current, _this$props$onModalWi, _this$props, _config$modalWidth;
+
+        var config = ParamTypeConfig[(_this$ref$current$get = (_this$ref$current = _this.ref.current) === null || _this$ref$current === void 0 ? void 0 : _this$ref$current.getFieldValue('valueType')) !== null && _this$ref$current$get !== void 0 ? _this$ref$current$get : _this.props.valueType];
+        (_this$props$onModalWi = (_this$props = _this.props).onModalWidthChange) === null || _this$props$onModalWi === void 0 ? void 0 : _this$props$onModalWi.call(_this$props, (_config$modalWidth = config.modalWidth) !== null && _config$modalWidth !== void 0 ? _config$modalWidth : 740);
+
+        _this.forceUpdate();
+      }
+
+      (_this$props$onChange = (_this$props2 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, data);
     });
 
     return _this;
@@ -3819,12 +4142,14 @@ var ParamValueEditorModalEl = /*#__PURE__*/function (_PureComponent2) {
 
     _defineProperty(_assertThisInitialized(_this3), "state", {
       visible: false,
-      pending: false
+      pending: false,
+      width: 740
     });
 
     _defineProperty(_assertThisInitialized(_this3), "onShow", function () {
       return _this3.setState({
-        visible: true
+        visible: true,
+        width: ParamTypeConfig[_this3.props.valueType].modalWidth || 740
       });
     });
 
@@ -3856,6 +4181,12 @@ var ParamValueEditorModalEl = /*#__PURE__*/function (_PureComponent2) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this3), "handleModalWidthChange", function (width) {
+      _this3.setState({
+        width: width
+      });
+    });
+
     return _this3;
   }
 
@@ -3864,10 +4195,11 @@ var ParamValueEditorModalEl = /*#__PURE__*/function (_PureComponent2) {
     value: function render() {
       return /*#__PURE__*/React.createElement(Modal, {
         key: String(this.state.visible),
-        width: 740,
+        width: this.state.width,
         title: 'Edit Value',
         closable: false,
         visible: this.state.visible,
+        destroyOnClose: true,
         footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
           onClick: this.onHide
         }, "Cancel"), /*#__PURE__*/React.createElement(Button, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalplus/params-about",
-  "version": "1.0.27-alpha",
+  "version": "1.0.28-alpha",
   "description": "A description for the module",
   "main": "./lib/umd/index.js",
   "module": "./lib/es/index.js",
@@ -89,5 +89,8 @@
     "dayjs": "^1.11.0",
     "lodash-es": "^4.17.21",
     "react-global-comp": "^2.0.1"
+  },
+  "dependencies": {
+    "@signalplus/params-about": "1.0.26-alpha18"
   }
 }