@chaoswise/business 0.0.10 → 0.0.11

package/lib/AggregateSearch/components/CloseAllIcon/index.js

@@ -1,6 +1,13 @@
+import _Icon from "@chaoswise/ui/lib/Antd/Icon";
 import React from "react";
-import CloseAllIconSvg from "./assets/Close-Circle-Fill.svg";
-var CloseAllIcon = function CloseAllIcon() {
-  return /*#__PURE__*/React.createElement(CloseAllIconSvg, null);
+import "./index.less";
+var CloseAllIcon = function CloseAllIcon(_ref) {
+  var onClickCloseAll = _ref.onClickCloseAll;
+  return /*#__PURE__*/React.createElement(_Icon, {
+    type: "close-circle",
+    theme: "filled",
+    onClick: onClickCloseAll,
+    className: "close-all-icon"
+  });
 };
 export default CloseAllIcon;

package/lib/AggregateSearch/components/CloseAllIcon/index.less

@@ -0,0 +1,11 @@
+.close-all-icon{
+    display: block;
+    position: absolute;
+    right: 45px;
+    top: 7px;
+    color: rgba(0,0,0,0.25);
+    cursor: pointer;
+    &:hover{
+        color: @text-color-secondary;
+    }
+}

package/lib/AggregateSearch/components/DropDown/index.js

@@ -421,7 +421,8 @@ var DropDown = function DropDown(props) {
     className: "list-title"
   }, "\u6807\u7B7E\u641C\u7D22"), /*#__PURE__*/React.createElement(_Spin, {
     spinning: keyLoading,
-    tip: "\u52A0\u8F7D\u4E2D..."
+    tip: "\u52A0\u8F7D\u4E2D...",
+    size: "small"
   }, !dropDownKeyListEmpty ? keyList.map(function (record, index) {
     var value = record.value,
       des = record.des;
@@ -431,18 +432,23 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         keyOption === null || keyOption === void 0 || keyOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: keyIcon,
       alt: ""
-    }), highLight(value, keyOptionValue)), /*#__PURE__*/React.createElement("span", null, des));
+    }), highLight(value, keyOptionValue)), /*#__PURE__*/React.createElement("span", {
+      className: "list-title-des-wrapper"
+    }, des));
   }) : /*#__PURE__*/React.createElement("div", {
     className: "empty"
   }, "\u6682\u65E0\u6570\u636E\uFF0C\u63D0\u4EA4\u641C\u7D22\u540E\u641C\u7D22\u5173\u952E\u5B57"))), valueOptionValueNotEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "list-title"
   }, "Value"), /*#__PURE__*/React.createElement(_Spin, {
     spinning: valueLoading,
-    tip: "\u52A0\u8F7D\u4E2D..."
+    tip: "\u52A0\u8F7D\u4E2D...",
+    size: "small"
   }, !dropDownValueListEmpty ? valueList.map(function (record, index) {
     var value = record.value,
       des = record.des;
@@ -452,11 +458,15 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         valueOption === null || valueOption === void 0 || valueOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: valueIcon,
       alt: ""
-    }), highLight(value, valueOptionValue === null || valueOptionValue === void 0 ? void 0 : valueOptionValue.value)), /*#__PURE__*/React.createElement("span", null, des));
+    }), highLight(value, valueOptionValue === null || valueOptionValue === void 0 ? void 0 : valueOptionValue.value)), /*#__PURE__*/React.createElement("span", {
+      className: "list-title-des-wrapper"
+    }, des));
   }) : /*#__PURE__*/React.createElement("div", {
     className: "empty"
   }, "\u6682\u65E0\u6570\u636E\uFF0C\u63D0\u4EA4\u641C\u7D22\u540E\u641C\u7D22\u5173\u952E\u5B57"))), matchOption.isShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -470,11 +480,15 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         matchOption === null || matchOption === void 0 || matchOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: combinedIcon,
       alt: ""
-    }), value), /*#__PURE__*/React.createElement("span", null, des));
+    }), value), /*#__PURE__*/React.createElement("span", {
+      className: "list-title-des-wrapper"
+    }, des));
   })), combinedOption.isShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "list-title"
   }, "\u7EC4\u5408\u7B26\u53F7"), (combinedOption.list || DEFAULT_COMBINED_OPTION_LIST).map(function (record, index) {
@@ -486,16 +500,21 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         combinedOption === null || combinedOption === void 0 || combinedOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: combinedIcon,
       alt: ""
-    }), value), /*#__PURE__*/React.createElement("span", null, des));
+    }), value), /*#__PURE__*/React.createElement("span", {
+      className: "list-title-des-wrapper"
+    }, des));
   })), historyOptionValueNotEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "list-title"
   }, "\u641C\u7D22\u5386\u53F2"), /*#__PURE__*/React.createElement(_Spin, {
     spinning: historyLoading,
-    tip: "\u52A0\u8F7D\u4E2D..."
+    tip: "\u52A0\u8F7D\u4E2D...",
+    size: "small"
   }, !dropDownListHistoryEmpty ? historyList.map(function (record, index) {
     var id = record.id,
       value = record.value,
@@ -506,12 +525,14 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         historyOption === null || historyOption === void 0 || historyOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: timeCircleIcon,
       alt: ""
     }), highLight(value, historyOptionValue)), /*#__PURE__*/React.createElement("span", {
-      className: "des"
+      className: "list-title-des-wrapper des"
     }, des), /*#__PURE__*/React.createElement("span", {
       className: "action"
     }, /*#__PURE__*/React.createElement(CopyToClipboard, {
@@ -540,7 +561,13 @@ var DropDown = function DropDown(props) {
     className: "empty"
   }, "\u6682\u65E0\u6570\u636E\uFF0C\u63D0\u4EA4\u641C\u7D22\u540E\u641C\u7D22\u5173\u952E\u5B57")))), /*#__PURE__*/React.createElement("div", {
     className: "desc"
-  }, /*#__PURE__*/React.createElement(_TooltipText, null, "\u5168\u6587\u68C0\u7D22\uFF1Ahello world \u5B8C\u5168\u5339\u914D\uFF1A\u201Chello world\u201D \u901A\u914D\u7B26\uFF1A* \uFF1F \u5173\u8054\u641C\u7D22\uFF1Astatus:(error OR warning) AND NOT service:\u201Cservice_a\u201D"), /*#__PURE__*/React.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(_TooltipText, null, /*#__PURE__*/React.createElement("span", null, "\u5168\u6587\u68C0\u7D22\uFF1Ahello world"), /*#__PURE__*/React.createElement("span", {
+    className: "desc-margin-32"
+  }, "\u5B8C\u5168\u5339\u914D\uFF1A\"hello world\""), /*#__PURE__*/React.createElement("span", {
+    className: "desc-margin-32"
+  }, "\u901A\u914D\u7B26\uFF1A*?"), /*#__PURE__*/React.createElement("span", {
+    className: "desc-margin-32"
+  }, "\u5173\u8054\u641C\u7D22\uFF1Astatus:(error OR warning) AND NOT service:\u201Cservice_a\u201D")), /*#__PURE__*/React.createElement(_Button, {
     type: "link",
     onClick: onHelpClick
   }, "\u5E2E\u52A9\u6587\u6863")));
@@ -551,9 +578,9 @@ var DropDown = function DropDown(props) {
       return node;
     },
     overlayStyle: {
-      top: height,
+      top: Number(height + 2),
       left: 0
-    }
+    } // 2是边框高度
   }, children);
 };
 export default DropDown;

package/lib/AggregateSearch/components/DropDown/index.less

@@ -6,20 +6,20 @@
   .aggregate-drop-down {
     width: 100%;
     max-height: 380px;
-    padding: 4px 0;
+    // padding: 4px 0;
     overflow: auto;
     justify-content: center;
     align-items: center;
 
-    .ant-spin-nested-loading {
+    .@{ant-prefix}-spin-nested-loading {
 
-      .ant-spin {
+      .@{ant-prefix}-spin {
         display: flex;
         align-items: center;
         justify-content: center;
 
-        .ant-spin-dot-spin,
-        .ant-spin-text {
+        .@{ant-prefix}-spin-dot-spin,
+        .@{ant-prefix}-spin-text {
           position: relative;
           margin: 0;
           padding: 0;
@@ -27,11 +27,11 @@
           left: 0;
         }
 
-        .ant-spin-dot-spin {
-          font-size: 18px;
-        }
+        // .ant-spin-dot-spin {
+        //   font-size: 18px;
+        // }
 
-        .ant-spin-text {
+        .@{ant-prefix}-spin-text {
           width: auto;
           margin-left: 4px;
         }
@@ -42,8 +42,19 @@
       line-height: 32px;
       background-color: rgba(0, 0, 0, 0.02);
       padding: 0 10px;
+      color: @text-color-show;
+    }
+    .list-title-target-wrapper{
+      display: flex;
+      align-items: center;
+    }
+    .list-title-des-wrapper{
+      color: @text-color-secondary;
     }
 
+    .list-title:not(:first-child){
+      margin-top: 8px;
+    }
     .list {
       &:hover {
         cursor: pointer;
@@ -54,7 +65,8 @@
         }
 
         .action {
-          display: block;
+          display: flex;
+          align-items: center;
         }
       }
 
@@ -62,10 +74,9 @@
       display: flex;
       justify-content: space-between;
       padding: 0 10px;
-
+      align-items: center;
       .action {
         display: none;
-
         .pre-icon {
           &:nth-child(2) {
             margin-right: 0;
@@ -75,8 +86,8 @@
 
       .pre-icon {
         margin-right: 8px;
-        height: 16px;
-        width: 16px;
+        // height: 16px;
+        // width: 16px;
       }
     }
 
@@ -94,7 +105,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-
+    margin-top: 8px;
+    color: @text-color-show;
+    .desc-margin-32{
+      margin-left: 32px;
+    }
     .ant-btn-link {
       margin-left: 10px;
     }

package/lib/AggregateSearch/components/SwitchBtn/index.less

@@ -1,14 +1,19 @@
 .aggregate-search-switch-btn {
-  border: @border-width-base @border-style-base @input-border-color;
-  border-left: none;
-  min-height: 28px;
+  // border: @border-width-base @border-style-base @input-border-color;
+  // border-left: none;
+  border-left: @border-width-base @border-style-base @input-border-color;
+  min-height: 26px;
   cursor: pointer;
   background: rgba(0, 0, 0, 0.02);
   border-radius: 0 2px 2px 0;
   display: flex;
-  padding: 0 10px;
+  padding: 0 9px;
   align-items: flex-start;
   align-self: stretch; // 使得高度和父元素一致
+  width: 35px;
+  &:hover{
+    border-left-color: @input-hover-border-color;
+  }
   img{
     transform: translateY(8px);
   }

package/lib/AggregateSearch/index.js

@@ -15,6 +15,8 @@ import SwitchBtn from "./components/SwitchBtn";
 import DropDown from "./components/DropDown";
 import "./index.less";
 import useDropDown from "./hooks/useDropDown";
+import CloseAllIcon from "./components/CloseAllIcon";
+import classnames from "classnames";
 var AggregateSearch = function AggregateSearch(_ref) {
   var _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
@@ -162,11 +164,11 @@ var AggregateSearch = function AggregateSearch(_ref) {
           case 3:
             checkRes = _context6.sent;
             if (checkRes) {
-              container.current.classList.add("syntax-error");
-              container.current.setAttribute("data-error", checkRes.msg);
+              containerWrapperRef.current.classList.add("syntax-error");
+              containerWrapperRef.current.setAttribute("data-error", checkRes.msg);
             } else {
-              container.current.classList.remove("syntax-error");
-              container.current.removeAttribute("data-error");
+              containerWrapperRef.current.classList.remove("syntax-error");
+              containerWrapperRef.current.removeAttribute("data-error");
             }
             return _context6.abrupt("return");
           case 6:
@@ -262,8 +264,8 @@ var AggregateSearch = function AggregateSearch(_ref) {
       container.current.innerText = container.current.innerText;
     } else {
       // 移除错误提示
-      container.current.classList.remove("syntax-error");
-      container.current.removeAttribute("data-error");
+      containerWrapperRef.current.classList.remove("syntax-error");
+      containerWrapperRef.current.removeAttribute("data-error");
     }
     handleValueChange(container.current.innerText, mode);
   };
@@ -319,7 +321,9 @@ var AggregateSearch = function AggregateSearch(_ref) {
     },
     containerWrapperRef: containerWrapperRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: "aggregate-search-wrapper",
+    className: classnames("aggregate-search-wrapper", {
+      "aggregate-search-text-wrapper": curMode === "text"
+    }),
     ref: containerWrapperRef
   }, /*#__PURE__*/React.createElement("div", {
     spellCheck: false,
@@ -343,6 +347,12 @@ var AggregateSearch = function AggregateSearch(_ref) {
     onInput: onInput,
     onFocus: onFocus,
     onKeyDown: onKeyDown
+  }), /*#__PURE__*/React.createElement(CloseAllIcon, {
+    onClickCloseAll: function onClickCloseAll() {
+      container.current.innerText = "";
+      handleValueChange("");
+      onChange("");
+    }
   }), /*#__PURE__*/React.createElement(SwitchBtn, {
     onChange: onModeChange,
     mode: mode || selMode

package/lib/AggregateSearch/index.less

@@ -21,32 +21,38 @@
   align-items: flex-start;
   white-space: pre-wrap;
   position: relative;
+  border: @border-width-base @border-style-base @input-border-color;
+  border-radius: @border-radius-base;
+  // 聚焦样式修改
+  &:focus-within {
+    .active();
+  }
+  &:hover {
+    .hover();
+  }
+
+  // 取消默认聚焦样式
+  &:focus-visible {
+    outline: none;
+  }
   .aggregate-search-input {
     position: relative;
     padding: 0 10px;
+    padding-right: 30px;
     flex: 1;
-    min-height: 28px;
+    min-height: 26px;
     line-height: 26px;
-    border: @border-width-base @border-style-base @input-border-color;
-    border-radius: @border-radius-base 0 0 @border-radius-base;
-
-    // 聚焦样式修改
-    &:focus {
-      .active();
-    }
-
-    // 取消默认聚焦样式
-    &:focus-visible {
-      outline: none;
-    }
-
+    // border-radius: @border-radius-base 0 0 @border-radius-base;
+    outline: none;
     &:empty:before {
       content: attr(data-placeholder);
       font-size: 12px;
       color: rgba(0, 0, 0, 0.45);
       line-height: 20px;
     }
-
+    &:empty + .close-all-icon{
+      display: none;
+    }
     &:not(.syntax-error):focus:before { // 需要排除掉syntax-error的样式不然报错内容丢失
       content: ""; // 不能为none，否则placeholder不显示
     }
@@ -56,20 +62,19 @@
       background: #FFFFFF;
       border: @border-width-base @border-style-base #E3E3E3;
       border-radius: 2px;
-      height: 18px;
-      line-height: 16px;
+      height: 20px;
+      line-height: 18px;
       display: inline-block;
       margin-right: 2px;
-      padding-right: 6px;
-      // margin-top: -1px;
+      padding-right: 5px;
 
       .tag-con {
         display: inline-block;
-        height: 16px;
-        line-height: 16px;
+        height: 18px;
+        line-height: 18px;
 
         &:first-child {
-          padding-left: 6px;
+          padding-left:5px;
         }
       }
 
@@ -78,7 +83,7 @@
       }
 
       .tag-con-key-last {
-        padding-right: 4px;
+        padding-right: 2px;
       }
 
       .tag-con-keyword {
@@ -91,12 +96,20 @@
 
       .tag-con-match {
         color: #FA8C16;
+        padding-left: 2px;
       }
       &:not(.syntax-error):has(.tag-con-keyword_AND_OR:only-child){
         border-color: transparent;
       }
     }
   }
+  &.aggregate-search-text-wrapper{
+    .aggregate-search-input{
+      line-height: 20px;
+      padding-top: 3px;
+      padding-bottom: 3px;
+    }
+  }
 }
 
 
@@ -111,7 +124,7 @@
       content: attr(data-error);
       position: absolute;
       white-space: nowrap;
-      bottom: 28px;
+      bottom: 26px;
       left: -1px;
       height: 20px;
       line-height: 20px;

package/lib/Watermark/index.js

@@ -1,6 +1,6 @@
 import _Watermark from "@chaoswise/ui/lib/Watermark";
 import _message from "@chaoswise/ui/lib/message";
-var _excluded = ["fetchWatermark"];
+var _excluded = ["type", "fetchWatermark", "densityConfig"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -25,15 +25,23 @@ import "./index.less";
 
 // 疏密类型
 var DENSITY = {
+  // 稀疏
   sparse: 1,
+  // 标准
   standard: 2,
+  // 密集
   dense: 3
 };
 
-// 疏密值
-var DENSITY_VALUE = _defineProperty(_defineProperty(_defineProperty({}, DENSITY.sparse, [100, 200]), DENSITY.standard, [80, 160]), DENSITY.dense, [60, 120]);
+// 疏密值-web端
+var DENSITY_CONFIG_DESKTOP = _defineProperty(_defineProperty(_defineProperty({}, DENSITY.sparse, [100, 200]), DENSITY.standard, [80, 160]), DENSITY.dense, [60, 120]);
+
+// 疏密值-mobile端
+var DENSITY_CONFIG_MOBILE = _defineProperty(_defineProperty(_defineProperty({}, DENSITY.sparse, [200, 400]), DENSITY.standard, [160, 320]), DENSITY.dense, [120, 240]);
 var WatermarkCom = function WatermarkCom(_ref) {
-  var _ref$fetchWatermark = _ref.fetchWatermark,
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "desktop" : _ref$type,
+    _ref$fetchWatermark = _ref.fetchWatermark,
     fetchWatermark = _ref$fetchWatermark === void 0 ? /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -53,6 +61,8 @@ var WatermarkCom = function WatermarkCom(_ref) {
         }
       }, _callee);
     })) : _ref$fetchWatermark,
+    _ref$densityConfig = _ref.densityConfig,
+    densityConfig = _ref$densityConfig === void 0 ? {} : _ref$densityConfig,
     rest = _objectWithoutProperties(_ref, _excluded);
   var watermarkRef = useRef();
   var _useState = useState(false),
@@ -63,6 +73,17 @@ var WatermarkCom = function WatermarkCom(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     watermarkProps = _useState4[0],
     setWatermarkProps = _useState4[1];
+  var getGapValue = useCallback(function (density) {
+    if (Object.keys(densityConfig).length > 0) {
+      return densityConfig[density];
+    } else {
+      if (type === "desktop") {
+        return DENSITY_CONFIG_DESKTOP[density];
+      } else {
+        return DENSITY_CONFIG_MOBILE[density];
+      }
+    }
+  }, [densityConfig, type]);
   useEffect(function () {
     var fetchWatermarkFn = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
@@ -98,8 +119,7 @@ var WatermarkCom = function WatermarkCom(_ref) {
                   fontSize: size
                 },
                 rotate: rotation,
-                gap: DENSITY_VALUE[density],
-                width: null
+                gap: getGapValue(density)
               };
               setVisible(!!status);
               setWatermarkProps(props);
@@ -136,10 +156,20 @@ var WatermarkCom = function WatermarkCom(_ref) {
     className: visible ? "portal-watermark" : "portal-watermark-hidden"
   }, /*#__PURE__*/React.createElement(_Watermark, _extends({}, watermarkProps, rest)));
 };
-WatermarkCom.propTypes = _defineProperty({
+WatermarkCom.propTypes = {
+  /**
+   * 水印类型，可选值为 desktop、mobile 或者不设
+   */
+  type: PropTypes.string,
   /**
    * 获取水印的信息，需要返回promise，async(value)=>({})，默认地址：/douc/api/v1/watermark/query
    */
   fetchWatermark: PropTypes.func
-}, "其他属性", PropTypes.object);
+  /**
+   * 水印展示密度配置，默认支持三种模式，1: 稀疏，2: 标准 3: 密集，具体相关配置可以通过{1: [xx, yy]} 进行改写，其中xx为x方向间距，yy为y方向间距，单位为px，
+   * 可按需进行配置，此配置会覆盖 type 配置
+   */
+  // densityConfig: PropTypes.object,
+};
+
 export default WatermarkCom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaoswise/business",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "业务组件库",
   "keywords": [
     "ui",
@@ -105,5 +105,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "gitHead": "5fe209921911217d8936eb4c50323a70dc954282"
+  "gitHead": "60181c1fdb22f05a1d323960462760a08c4769c0"
 }