@chaoswise/business 0.0.9 → 0.0.11

package/lib/PropertyControlViewer/components/TagShowMoreList/index.less

@@ -1,104 +1,106 @@
-.wrapper {
-  height: 28px;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
+.form-properties-box {
+  .wrapper {
+    height: 28px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
 
-  .wrapper-inner {
-    float: left;
-    height: 20px;
-    line-height: 20px;
-    margin-right: 8px;
-    background: #fafafa;
-    border: 1px solid #d9d9d9;
-    border-radius: 2px;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    .wrapper-inner {
+      float: left;
+      height: 20px;
+      line-height: 20px;
+      margin-right: 8px;
+      background: #fafafa;
+      border: 1px solid #d9d9d9;
+      border-radius: 2px;
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  .wrapper-inner:last-child {
-    margin-right: 0;
+    .wrapper-inner:last-child {
+      margin-right: 0;
+    }
+
+    .wrapper-inner-fixed {
+      float: left;
+      height: 20px;
+      line-height: 20px;
+      margin-right: 2px;
+      padding: 0px 6px;
+      background: #fafafa;
+      border: 1px solid #d9d9d9;
+      border-radius: 2px;
+      cursor: pointer;
+    }
+
+    &.edit-wrapper {
+      .wrapper-inner {
+        height: 28px;
+        line-height: 28px;
+      }
+
+      .wrapper-inner-fixed {
+        height: 28px;
+        line-height: 28px;
+      }
+    }
   }
 
-  .wrapper-inner-fixed {
-    float: left;
-    height: 20px;
-    line-height: 20px;
-    margin-right: 2px;
-    padding: 0px 6px;
-    background: #fafafa;
-    border: 1px solid #d9d9d9;
-    border-radius: 2px;
-    cursor: pointer;
+  .@{ant-prefix}-popover-inner-content:nth-child(4n) {
+    margin-right: 0px;
   }
 
-  &.edit-wrapper {
-    .wrapper-inner {
-      height: 28px;
-      line-height: 28px;
-    }
+  .inner {
+    max-width: 220px;
+    font-size: 12px;
 
-    .wrapper-inner-fixed {
+    .@{ant-prefix}-popover-inner-content {
+      // float: left;
+      // max-width: 85px;
       height: 28px;
       line-height: 28px;
+      background: #fafafa;
+      border: 1px solid #d9d9d9;
+      border-radius: 2px;
+      // padding: 0 6px;
+      margin-bottom: 2px;
+      cursor: pointer;
+      // overflow: hidden;
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
     }
   }
-}
-
-.ant-popover-inner-content:nth-child(4n) {
-  margin-right: 0px;
-}
 
-.inner {
-  max-width: 220px;
-  font-size: 12px;
-
-  .ant-popover-inner-content {
-    // float: left;
-    // max-width: 85px;
-    height: 28px;
-    line-height: 28px;
-    background: #fafafa;
-    border: 1px solid #d9d9d9;
-    border-radius: 2px;
-    // padding: 0 6px;
-    margin-bottom: 2px;
-    cursor: pointer;
-    // overflow: hidden;
-    // text-overflow: ellipsis;
-    // white-space: nowrap;
+  .inner:after {
+    /*伪元素是行内元素 正常浏览器清除浮动方法*/
+    content: "";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
   }
-}
 
-.inner:after {
-  /*伪元素是行内元素 正常浏览器清除浮动方法*/
-  content: "";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
 
-
-.ellipsis-box {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .ellipsis-box {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
 
-.tag-ci-detail-avatar {
-  color: #fff;
-  background-color: #008dff;
-  margin-right: 8px;
-  font-size: 10px !important;
-  margin-top: -2px;
-}
+  .tag-ci-detail-avatar {
+    color: #fff;
+    background-color: #008dff;
+    margin-right: 8px;
+    font-size: 10px !important;
+    margin-top: -2px;
+  }
 
   .tag-wrapper-inner {
     .@{ant-prefix}-popover-inner-content {
       padding: 8px !important;
     }
-  }
+  }
+}

package/lib/PropertyControlViewer/index.less

@@ -1,117 +1,34 @@
-.simpleColBox {
-  height: 100%;
-  width: 100%;
+.form-properties-box {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: 24px
-}
-
-.form_box {
-    .cw-form-item-label-horizontal {
-      >label {
-        width: 100%;
 
-        .cw-form-item-typography-label {
-          word-break: break-all !important;
-          flex: 1;
-        }
-      }
-    }
-
-    .@{ant-prefix}-checkbox-wrapper+.@{ant-prefix}-checkbox-wrapper {
-      margin-right: 8px;
-      margin-left: 0px;
-    }
+  .@{ant-prefix}-form-item {
+    padding-bottom: 0px !important;
+    margin-bottom: 16px !important;
   }
 
-.attrDetailLabel {
-  display: flex;
-  width: 100%;
-  margin-bottom: 24px;
-
-  .name {
-    width: 85px;
-    margin-right: 6px;
-    display: flex;
-    justify-content: space-between;
-    // align-items: center;
-    .label {
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      word-wrap: break-word;
-      word-break: break-all;
-      width: 95%;
-    }
-    .symbol {
-      flex: 1;
-    }
+  .@{ant-prefix}-collapse {
+    width: 100%;
   }
 
-  .content {
-    flex: 1;
-  }
-}
-
-.CHECKBOX_form {
-    .@{ant-prefix}-form-item-control {
-      align-items: center !important;
-      display: flex !important;
-    }
-}
-
-.RACK_UNIT_form {
-  height: 28px !important;
-}
-
-.form-box-label-uni-icon {
-  padding-left: 10px;
-}
-
-.form-box-label-question-icon {
-  padding-left: 6px;
-}
-
-.form-properties-box {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
+  .CM-DB-form-item-box:last-child {
     .@{ant-prefix}-form-item {
-      padding-bottom: 0px !important;
-      margin-bottom: 16px !important;
-    }
-
-    .@{ant-prefix}-collapse {
-      width: 100%;
+      margin-bottom: 0 !important;
     }
   }
 
-.form-properties-box {
-    .CM-DB-form-item-box:last-child {
-      .@{ant-prefix}-form-item {
-        margin-bottom: 0 !important;
-      }
-    }
-}
-
-.table-label {
-    .@{ant-prefix}-form-item-label {
-      width: 100% !important;
-      margin-bottom: 6px;
-
-      & label::after {
-        display: none;
-      }
-    }
+  .@{ant-prefix}-typography {
+    margin-bottom: 0 !important;
+  }
 
+  .view_table {
     .@{ant-prefix}-form-item-control-wrapper {
-      display: none;
+      width: calc(100% - 110px);
     }
-}
+  }
 
-.form-box {
+  .form_box {
     .cw-form-item-label-horizontal {
       >label {
         width: 100%;
@@ -123,69 +40,67 @@
       }
     }
 
-    .@{ant-prefix}-checkbox-wrapper {
+    .@{ant-prefix}-checkbox-wrapper+.@{ant-prefix}-checkbox-wrapper {
       margin-right: 8px;
-      margin-left: 0px !important;
+      margin-left: 0px;
     }
+  }
 
-    .@{ant-prefix}-form-item-control-wrapper {
-      width: calc(100% - 110px);
-      overflow: hidden;
-
-      .@{ant-prefix}-form-item-children {
-        width: 100%;
-        display: inline-block;
-
-        .@{ant-prefix}-switch {
-          max-width: 100%;
+  .attrDetailLabel {
+    display: flex;
+    width: 100%;
+    margin-bottom: 24px;
+
+    .name {
+      width: 85px;
+      margin-right: 6px;
+      display: flex;
+      justify-content: space-between;
+
+      // align-items: center;
+      .label {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-wrap: break-word;
+        word-break: break-all;
+        width: 95%;
+      }
 
-          .switchLabelBox {
-            max-width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-        }
+      .symbol {
+        flex: 1;
       }
     }
-}
-
-
-.ciunitbitmap-content-box {
-  max-width: 320px;
-  display: flex;
-
-  .ciunitbitmap-modal-icon-box {
-    width: 24px;
-    height: 24px;
-    background-color: rgb(230, 247, 255);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 
-    .ciunitbitmap-modal-icon {
-      font-size: 12px;
-      color: rgb(25, 133, 255);
+    .content {
+      flex: 1;
     }
   }
 
-  .ciunitbitmap-content-text {
-    margin-left: 6px;
+  .ciunitbitmap-content-box {
+    max-width: 320px;
     display: flex;
-    align-items: center;
-  }
-}
 
-
-.form-properties-view-box {
-    .@{ant-prefix}-typography {
-      margin-bottom: 0 !important;
+    .ciunitbitmap-modal-icon-box {
+      width: 24px;
+      height: 24px;
+      background-color: rgb(230, 247, 255);
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .ciunitbitmap-modal-icon {
+        font-size: 12px;
+        color: rgb(25, 133, 255);
+      }
     }
 
-  .view_table {
-      .@{ant-prefix}-form-item-control-wrapper {
-        width: calc(100% - 110px);
-      }
+    .ciunitbitmap-content-text {
+      margin-left: 6px;
+      display: flex;
+      align-items: center;
+    }
   }
 }

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.9",
+  "version": "0.0.11",
   "description": "业务组件库",
   "keywords": [
     "ui",
@@ -104,5 +104,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "gitHead": "60181c1fdb22f05a1d323960462760a08c4769c0"
 }