tntd 2.8.22 → 2.8.24

package/lib/progress/progress.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _configProvider = require("antd/lib/config-provider");
+var _progress = _interopRequireDefault(require("antd/lib/progress"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ellipsis = _interopRequireDefault(require("../ellipsis"));
+var _icon = _interopRequireDefault(require("../icon"));
+require("./progress.less");
+var _tooltip = require("antd/lib/tooltip");
+Object.keys(_tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tooltip[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var iconMap = {
+  line: {
+    success: 'check-circle',
+    exception: 'close-circle'
+  },
+  circle: {
+    success: 'check',
+    exception: 'close'
+  }
+};
+var ifPercentBottom = function ifPercentBottom(type, percentPosition) {
+  return type === 'line' && percentPosition === 'bottom';
+};
+var percentTransform = function percentTransform(percent) {
+  return percent >= 100 ? 100 : percent <= 0 ? 0 : percent;
+};
+var themeStrokeColor = function themeStrokeColor(status, strokeColor, percent) {
+  return status !== 'success' && status !== 'exception' && !strokeColor && percent !== 100 ? 'var(--blue-5)' : '';
+};
+var Progress = function Progress(props) {
+  var className = props.className,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'line' : _props$type,
+    _props$percentPositio = props.percentPosition,
+    percentPosition = _props$percentPositio === void 0 ? 'right' : _props$percentPositio,
+    _props$percent = props.percent,
+    percent = _props$percent === void 0 ? 0 : _props$percent,
+    format = props.format,
+    size = props.size,
+    label = props.label,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 132 : _props$width,
+    status = props.status,
+    halfCircle = props.halfCircle,
+    _props$gapDegree = props.gapDegree,
+    gapDegree = _props$gapDegree === void 0 ? props.halfCircle ? 135 : props.gapDegree : _props$gapDegree,
+    strokeColor = props.strokeColor,
+    _props$strokeWidth = props.strokeWidth,
+    strokeWidth = _props$strokeWidth === void 0 ? 7 : _props$strokeWidth;
+  var _percent = percentTransform(percent);
+  var _strokeColor = themeStrokeColor(status, strokeColor, _percent);
+  return _react["default"].createElement(_configProvider.ConfigConsumer, null, function (_ref) {
+    var getPrefixCls = _ref.getPrefixCls;
+    var prefixCls = getPrefixCls('progress');
+    var CusLabelOrPercent = function CusLabelOrPercent(props) {
+      var type = props.type,
+        theme = props.theme;
+      var labelPercentClassName = (0, _classnames["default"])("".concat(prefixCls, "-percent-bottom"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-percent-bottom-").concat(size), size === 'small'), "".concat(prefixCls, "-percent-bottom-").concat(type), type === 'line'));
+      var showIcon = function showIcon(status) {
+        return _react["default"].createElement(_icon["default"], {
+          type: "".concat(iconMap[type][status]),
+          theme: theme,
+          className: (0, _classnames["default"])(_defineProperty({}, "".concat(labelPercentClassName, " ").concat(labelPercentClassName, "-").concat(status || 'success'), type === 'line'))
+        });
+      };
+      var showPercent = _react["default"].createElement("div", {
+        className: labelPercentClassName
+      }, format ? format === null || format === void 0 ? void 0 : format(_percent) : _percent + '%');
+      var displayContent;
+      if (status === 'success' || status === 'exception') {
+        displayContent = showIcon(status);
+      } else if (status === 'normal' || status === 'active') {
+        displayContent = showPercent;
+      } else {
+        // 如果状态为空
+        displayContent = _percent === 100 ? showIcon('success') : showPercent;
+      }
+      return displayContent;
+    };
+    var CusCircleAndDashboardFormat = function CusCircleAndDashboardFormat(props) {
+      var widthNum = props.widthNum;
+      return _react["default"].createElement("div", {
+        className: "".concat(prefixCls, "-cus-format")
+      }, !!label && _react["default"].createElement(_ellipsis["default"], {
+        className: "".concat(prefixCls, "-cus-format-label"),
+        title: label,
+        widthLimit: widthNum <= 64 ? widthNum : 'calc(100% - 50px)',
+        placement: widthNum <= 64 ? 'bottom' : 'top'
+      }), _react["default"].createElement(CusLabelOrPercent, {
+        type: "circle",
+        theme: "outlined"
+      }));
+    };
+    //line
+    var LineProgress = function LineProgress() {
+      return _react["default"].createElement(_progress["default"], Object.assign({
+        strokeColor: _strokeColor
+      }, props, {
+        className: (0, _classnames["default"])('tnt-progress', className, _defineProperty({}, "".concat(prefixCls, "-percent-bottom"), percentPosition === 'bottom'))
+      }));
+    };
+    //circle,dashboard (额外新增label和半圆选项)
+    var CircleAndDashboardProgress = function CircleAndDashboardProgress() {
+      var widthNum = Number(String(width).split('px').shift());
+      return _react["default"].createElement(_progress["default"], Object.assign({
+        gapDegree: gapDegree,
+        strokeColor: _strokeColor,
+        strokeWidth: strokeWidth
+      }, props, {
+        type: halfCircle ? 'dashboard' : type,
+        className: (0, _classnames["default"])('tnt-progress', "".concat(prefixCls, "-circle-progress"), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-small-circle"), widthNum <= 64 && label), "".concat(prefixCls, "-large-circle"), widthNum > 64 && label), "".concat(prefixCls, "-small-half-circle"), halfCircle && widthNum <= 64 && label), "".concat(prefixCls, "-large-half-circle"), halfCircle && widthNum > 64 && label)),
+        format: function format() {
+          return _react["default"].createElement(CusCircleAndDashboardFormat, {
+            widthNum: widthNum
+          });
+        }
+      }));
+    };
+    var progressMap = {
+      line: _react["default"].createElement(LineProgress, null),
+      circle: _react["default"].createElement(CircleAndDashboardProgress, null),
+      dashboard: _react["default"].createElement(CircleAndDashboardProgress, null)
+    };
+    return progressMap[type];
+  });
+};
+var _default = exports["default"] = Progress;

package/lib/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../src/progress/progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AAGzB,6DAAwD;AACxD,gEAA2C;AAC3C,4DAAmC;AACnC,2DAAkC;AAClC,mDAA0B;AAC1B,2BAAwB;AACxB,kDAA+B;AAO/B,MAAM,OAAO,GAAG;IACd,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,cAAc;KAC1B;IACD,MAAM,EAAE;QACN,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,OAAO;KACnB;CACF,CAAA;AACD,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,eAAuB,EAAE,EAAE;IAChE,OAAO,IAAI,KAAK,MAAM,IAAI,eAAe,KAAK,QAAQ,CAAA;AACxD,CAAC,CAAA;AACD,MAAM,gBAAgB,GAAG,CAAC,OAAe,EAAE,EAAE;IAC3C,OAAO,OAAO,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;AAC1D,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,MAAe,EAAE,WAA6B,EAAE,OAAgB,EAAE,EAAE;IAC5F,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,WAAW,IAAI,CAAC,WAAW,IAAI,OAAO,KAAK,GAAG;QACtF,CAAC,CAAC,eAAe;QACjB,CAAC,CAAC,EAAE,CAAA;AACR,CAAC,CAAA;AAED,MAAM,QAAQ,GAA8C,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EACJ,SAAS,EACT,IAAI,GAAG,MAAM,EACb,eAAe,GAAG,OAAO,EACzB,OAAO,GAAG,CAAC,EACX,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,GAAG,EACX,MAAM,EACN,UAAU,EACV,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EACpD,WAAW,EACX,WAAW,GAAG,CAAC,GAChB,GAAG,KAAK,CAAA;IACT,MAAM,QAAQ,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAA;IACpE,OAAO,CACL,8BAAC,gCAAc,QACZ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;QACpB,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;QAE1C,MAAM,iBAAiB,GAAG,CAAC,KAAqD,EAAE,EAAE;YAClF,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;YAC7B,MAAM,qBAAqB,GAAG,IAAA,oBAAU,EAAC,GAAG,SAAS,iBAAiB,EAAE;gBACtE,CAAC,GAAG,SAAS,mBAAmB,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;gBACzD,CAAC,GAAG,SAAS,mBAAmB,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,MAAM;aACzD,CAAC,CAAA;YAEF,MAAM,QAAQ,GAAG,CAAC,MAA+B,EAAE,EAAE,CAAC,CACpD,8BAAC,cAAI,IACH,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,EAChC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAU,EAAC;oBACpB,CAAC,GAAG,qBAAqB,IAAI,qBAAqB,IAAI,MAAM,IAAI,SAAS,EAAE,CAAC,EAC1E,IAAI,KAAK,MAAM;iBAClB,CAAC,GACF,CACH,CAAA;YACD,MAAM,WAAW,GAAG,CAClB,uCAAK,SAAS,EAAE,qBAAqB,IAClC,MAAM,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,GAAG,CACzC,CACP,CAAA;YAED,IAAI,cAAc,CAAA;YAClB,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,WAAW,EAAE;gBAClD,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;aAClC;iBAAM,IAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ,EAAE;gBACrD,cAAc,GAAG,WAAW,CAAA;aAC7B;iBAAM;gBACL,SAAS;gBACT,cAAc,GAAG,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAA;aACtE;YACD,OAAO,cAAc,CAAA;QACvB,CAAC,CAAA;QAED,MAAM,2BAA2B,GAAG,CAAC,KAA2B,EAAE,EAAE;YAClE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;YAC1B,OAAO,CACL,uCAAK,SAAS,EAAE,GAAG,SAAS,aAAa;gBACtC,CAAC,CAAC,KAAK,IAAI,CACV,8BAAC,kBAAQ,IACP,SAAS,EAAE,GAAG,SAAS,mBAAmB,EAC1C,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,EAC3D,SAAS,EAAE,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,GAC5C,CACH;gBACD,8BAAC,iBAAiB,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,GAAG,CAChD,CACP,CAAA;QACH,CAAC,CAAA;QAED,MAAM;QACN,MAAM,YAAY,GAAa,GAAG,EAAE,CAAC,CACnC,8BAAC,kBAAY,kBACX,WAAW,EAAE,YAAY,IACrB,KAAK,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC,cAAc,EAAE,SAAS,EAAE;gBAC/C,CAAC,GAAG,SAAS,iBAAiB,CAAC,EAAE,eAAe,KAAK,QAAQ;aAC9D,CAAC,IACF,CACH,CAAA;QAED,mCAAmC;QACnC,MAAM,0BAA0B,GAAa,GAAG,EAAE;YAChD,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,CAAA;YAC1D,OAAO,CACL,8BAAC,kBAAY,kBACX,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,WAAW,IACpB,KAAK,IACT,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EACrC,SAAS,EAAE,IAAA,oBAAU,EAAC,cAAc,EAAE,GAAG,SAAS,kBAAkB,EAAE,SAAS,EAAE;oBAC/E,CAAC,GAAG,SAAS,eAAe,CAAC,EAAE,QAAQ,IAAI,EAAE,IAAI,KAAK;oBACtD,CAAC,GAAG,SAAS,eAAe,CAAC,EAAE,QAAQ,GAAG,EAAE,IAAI,KAAK;oBACrD,CAAC,GAAG,SAAS,oBAAoB,CAAC,EAAE,UAAU,IAAI,QAAQ,IAAI,EAAE,IAAI,KAAK;oBACzE,CAAC,GAAG,SAAS,oBAAoB,CAAC,EAAE,UAAU,IAAI,QAAQ,GAAG,EAAE,IAAI,KAAK;iBACzE,CAAC,EACF,MAAM,EAAE,GAAG,EAAE,CAAC,8BAAC,2BAA2B,IAAC,QAAQ,EAAE,QAAQ,GAAI,IACjE,CACH,CAAA;QACH,CAAC,CAAA;QAED,MAAM,WAAW,GAAG;YAClB,IAAI,EAAE,8BAAC,YAAY,OAAG;YACtB,MAAM,EAAE,8BAAC,0BAA0B,OAAG;YACtC,SAAS,EAAE,8BAAC,0BAA0B,OAAG;SAC1C,CAAA;QACD,OAAO,WAAW,CAAC,IAAI,CAAC,CAAA;IAC1B,CAAC,CACc,CAClB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,QAAQ,CAAA","sourcesContent":["import React from 'react'\nimport type { ProgressProps } from 'antd/lib/progress'\nimport type { ThemeType } from 'antd/lib/icon'\nimport { ConfigConsumer } from 'antd/lib/config-provider'\nimport AntdProgress from 'antd/lib/progress'\nimport classNames from 'classnames'\nimport Ellipsis from '../ellipsis'\nimport Icon from '../icon'\nimport './progress.less'\nexport * from 'antd/lib/tooltip'\n\ninterface ExtendsProgress {\n  percentPosition?: 'bottom' | 'right'\n  label?: React.ReactNode\n  halfCircle?: boolean\n}\nconst iconMap = {\n  line: {\n    success: 'check-circle',\n    exception: 'close-circle',\n  },\n  circle: {\n    success: 'check',\n    exception: 'close',\n  },\n}\nconst ifPercentBottom = (type: string, percentPosition: string) => {\n  return type === 'line' && percentPosition === 'bottom'\n}\nconst percentTransform = (percent: number) => {\n  return percent >= 100 ? 100 : percent <= 0 ? 0 : percent\n}\n\nconst themeStrokeColor = (status?: string, strokeColor?: string | object, percent?: number) => {\n  return status !== 'success' && status !== 'exception' && !strokeColor && percent !== 100\n    ? 'var(--blue-5)'\n    : ''\n}\n\nconst Progress: React.FC<ProgressProps & ExtendsProgress> = (props) => {\n  const {\n    className,\n    type = 'line',\n    percentPosition = 'right',\n    percent = 0,\n    format,\n    size,\n    label,\n    width = 132,\n    status,\n    halfCircle,\n    gapDegree = props.halfCircle ? 135 : props.gapDegree,\n    strokeColor,\n    strokeWidth = 7,\n  } = props\n  const _percent = percentTransform(percent)\n  const _strokeColor = themeStrokeColor(status, strokeColor, _percent)\n  return (\n    <ConfigConsumer>\n      {({ getPrefixCls }) => {\n        const prefixCls = getPrefixCls('progress')\n\n        const CusLabelOrPercent = (props: { type: 'line' | 'circle'; theme?: ThemeType }) => {\n          const { type, theme } = props\n          const labelPercentClassName = classNames(`${prefixCls}-percent-bottom`, {\n            [`${prefixCls}-percent-bottom-${size}`]: size === 'small',\n            [`${prefixCls}-percent-bottom-${type}`]: type === 'line',\n          })\n\n          const showIcon = (status: 'success' | 'exception') => (\n            <Icon\n              type={`${iconMap[type][status]}`}\n              theme={theme}\n              className={classNames({\n                [`${labelPercentClassName} ${labelPercentClassName}-${status || 'success'}`]:\n                  type === 'line',\n              })}\n            />\n          )\n          const showPercent = (\n            <div className={labelPercentClassName}>\n              {format ? format?.(_percent) : _percent + '%'}\n            </div>\n          )\n\n          let displayContent\n          if (status === 'success' || status === 'exception') {\n            displayContent = showIcon(status)\n          } else if (status === 'normal' || status === 'active') {\n            displayContent = showPercent\n          } else {\n            // 如果状态为空\n            displayContent = _percent === 100 ? showIcon('success') : showPercent\n          }\n          return displayContent\n        }\n\n        const CusCircleAndDashboardFormat = (props: { widthNum: number }) => {\n          const { widthNum } = props\n          return (\n            <div className={`${prefixCls}-cus-format`}>\n              {!!label && (\n                <Ellipsis\n                  className={`${prefixCls}-cus-format-label`}\n                  title={label}\n                  widthLimit={widthNum <= 64 ? widthNum : 'calc(100% - 50px)'}\n                  placement={widthNum <= 64 ? 'bottom' : 'top'}\n                />\n              )}\n              <CusLabelOrPercent type=\"circle\" theme=\"outlined\" />\n            </div>\n          )\n        }\n\n        //line\n        const LineProgress: React.FC = () => (\n          <AntdProgress\n            strokeColor={_strokeColor}\n            {...props}\n            className={classNames('tnt-progress', className, {\n              [`${prefixCls}-percent-bottom`]: percentPosition === 'bottom',\n            })}\n          />\n        )\n\n        //circle,dashboard (额外新增label和半圆选项)\n        const CircleAndDashboardProgress: React.FC = () => {\n          const widthNum = Number(String(width).split('px').shift())\n          return (\n            <AntdProgress\n              gapDegree={gapDegree}\n              strokeColor={_strokeColor}\n              strokeWidth={strokeWidth}\n              {...props}\n              type={halfCircle ? 'dashboard' : type}\n              className={classNames('tnt-progress', `${prefixCls}-circle-progress`, className, {\n                [`${prefixCls}-small-circle`]: widthNum <= 64 && label,\n                [`${prefixCls}-large-circle`]: widthNum > 64 && label,\n                [`${prefixCls}-small-half-circle`]: halfCircle && widthNum <= 64 && label,\n                [`${prefixCls}-large-half-circle`]: halfCircle && widthNum > 64 && label,\n              })}\n              format={() => <CusCircleAndDashboardFormat widthNum={widthNum} />}\n            />\n          )\n        }\n\n        const progressMap = {\n          line: <LineProgress />,\n          circle: <CircleAndDashboardProgress />,\n          dashboard: <CircleAndDashboardProgress />,\n        }\n        return progressMap[type]\n      }}\n    </ConfigConsumer>\n  )\n}\n\nexport default Progress\n"]}

package/lib/progress/progress.less

@@ -0,0 +1,82 @@
+@import '../style/themes/index.less';
+@import '../style/mixins/index';
+@progress-prefix-cls: ~'@{ant-prefix}-progress';
+.tnt-progress.@{progress-prefix-cls} {
+    .ant-progress-text{
+    //   font-family: PingFang SC;
+      font-weight: 500;
+    }
+    .ant-progress-cus-format-label{
+      .ant-progress-cus-format-label{
+        padding-bottom: 4px;
+      }
+    }
+    &-percent-bottom{
+        .ant-progress-outer{
+          padding-right: 0;
+        }
+        .ant-progress-text{
+          width: 100%;
+          display: block;
+          text-align: right;
+          margin-left: 0;
+        }
+    }
+    &-circle-progress{
+      .@{progress-prefix-cls}-cus-format{
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    &-small-circle{
+      .ant-progress-text{
+        height: 100%;
+      }
+      .ant-progress-inner{
+        overflow:visible;
+      }
+      .tntd-ellipsis{
+        position: absolute;
+        bottom: -1.8em;
+        font-size: 0.75em;
+        // margin-bottom: 2px;
+        // color: #8B919E;
+        color:tint(@text-color, 50%);
+        font-family: Inter;
+        font-weight: 500;
+        text-align: center;
+      }
+    }
+    &-large-circle{
+      .ant-progress-text{
+        height: 100%;
+      }
+      .tntd-ellipsis{
+        font-size: 0.55em;
+        // margin-bottom: 2px;
+        color:tint(@text-color, 50%);
+        font-family: Inter;
+        font-weight: 500;
+        text-align: center;
+      }
+    }
+    &-small-half-circle{
+      .ant-progress-text{
+        height: 40%;
+      }
+      .tntd-ellipsis{
+        bottom: -1.5em;
+      }
+    }
+    &-large-half-circle{
+      .ant-progress-inner{
+        .ant-progress-text{
+          top: 42%
+        }
+      }
+    }
+}
+

package/lib/query-form/Field/Checkbox.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _checkbox = _interopRequireDefault(require("../../checkbox"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];

package/lib/query-form/Field/Composition/FieldPopover.d.ts

@@ -0,0 +1,19 @@
+declare var _default: React.ForwardRefExoticComponent<Pick<{
+    [x: string]: any;
+    visible: any;
+    setVisible: any;
+    searchText: any;
+    children: any;
+    value: any;
+    regex: any;
+    fieldItems: any;
+    propItem: any;
+    setFieldItem: any;
+    onChange: any;
+    form: any;
+    locale: any;
+    clsPrefix: any;
+}, string | number> & React.RefAttributes<any>>;
+export default _default;
+import React from "react";
+//# sourceMappingURL=FieldPopover.d.ts.map

package/lib/query-form/Field/Composition/FieldPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPopover.d.ts","sourceRoot":"","sources":["../../../../src/query-form/Field/Composition/FieldPopover.js"],"names":[],"mappings":""}

package/lib/query-form/Field/Composition/FieldPopover.js

@@ -0,0 +1,338 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _find2 = _interopRequireDefault(require("lodash/find"));
+var _filter2 = _interopRequireDefault(require("lodash/filter"));
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+var _react = _interopRequireWildcard(require("react"));
+var _empty = require("../../../empty");
+var _popover = _interopRequireDefault(require("../../../popover"));
+var _ellipsis = _interopRequireDefault(require("../../../ellipsis"));
+var _Select = _interopRequireDefault(require("./Select"));
+var _utils = require("./utils");
+var _fieldsMap = _interopRequireDefault(require("../fieldsMap"));
+require("./FieldPopover.less");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var FieldPopover = function FieldPopover(_a, ref) {
+  var visible = _a.visible,
+    setVisible = _a.setVisible,
+    searchText = _a.searchText,
+    children = _a.children,
+    value = _a.value,
+    regex = _a.regex,
+    fieldItems = _a.fieldItems,
+    propItem = _a.propItem,
+    setFieldItem = _a.setFieldItem,
+    onChange = _a.onChange,
+    form = _a.form,
+    locale = _a.locale,
+    clsPrefix = _a.clsPrefix,
+    props = __rest(_a, ["visible", "setVisible", "searchText", "children", "value", "regex", "fieldItems", "propItem", "setFieldItem", "onChange", "form", "locale", "clsPrefix"]);
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTarget = _useState2[0],
+    setSearchTarget = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    popoverContent = _useState4[0],
+    setPopoverContent = _useState4[1];
+  var onPropsClick = function onPropsClick(props) {
+    var _ref = props || {},
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'input' : _ref$type,
+      component = _ref.component;
+    var copyValue = (0, _cloneDeep2["default"])(value);
+    if (!(copyValue === null || copyValue === void 0 ? void 0 : copyValue.find(function (v) {
+      return v.key === props.name;
+    }))) {
+      copyValue.push({
+        key: props.name,
+        value: type === 'array' ? [] : undefined,
+        closable: true
+      });
+    }
+    setFieldItem(props);
+    if ((0, _utils.isInput)(type) && !component) {
+      var target = copyValue.find(function (v) {
+        return v.key === props.name;
+      });
+      onChange(target, true);
+      close();
+      return;
+    }
+    setVisible(true);
+    setPopoverContent(true);
+    onChange(copyValue);
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      onPropsClick: onPropsClick
+    };
+  });
+  var onSelectChange = function onSelectChange(v, isMultiple) {
+    var _a, _b, _c, _d;
+    var propObj = (v === null || v === void 0 ? void 0 : v.propItem) || propItem || {};
+    var fieldProps = propObj.props; // 直接搜索拿v.xx的值
+    var copyValue = (0, _cloneDeep2["default"])(value || []);
+    var index;
+    if (v === null || v === void 0 ? void 0 : v.propItem) {
+      // 模糊搜索
+      var _index = copyValue.findIndex(function (vv) {
+        var _a;
+        return vv.key === ((_a = v.propItem) === null || _a === void 0 ? void 0 : _a.name);
+      });
+      if (_index > -1) {
+        index = _index;
+      } else {
+        copyValue.push({
+          key: (_a = v.propItem) === null || _a === void 0 ? void 0 : _a.name,
+          value: isMultiple ? [] : ''
+        });
+        index = copyValue.length - 1;
+      }
+      setFieldItem(v.propItem);
+    } else {
+      // 选择值
+      index = copyValue.findIndex(function (v) {
+        return v.key === (propItem === null || propItem === void 0 ? void 0 : propItem.name);
+      });
+    }
+    if (isMultiple) {
+      if (!((_c = (_b = copyValue[index]) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length)) {
+        copyValue[index].value = [v === null || v === void 0 ? void 0 : v.value];
+      } else {
+        if (((_d = copyValue[index].value) === null || _d === void 0 ? void 0 : _d.indexOf(v.value)) > -1) {
+          copyValue[index].value = copyValue[index].value.filter(function (val) {
+            return val !== v.value;
+          });
+        } else {
+          copyValue[index].value.push(v.value);
+        }
+      }
+      // 如果是模糊搜索-展开多选项
+      if (v === null || v === void 0 ? void 0 : v.propItem) {
+        setFieldItem(v === null || v === void 0 ? void 0 : v.propItem);
+        setVisible(true);
+        setPopoverContent(true);
+      }
+    } else {
+      copyValue[index].value = v === null || v === void 0 ? void 0 : v.value;
+      close();
+    }
+    copyValue[index].closable = true;
+    onChange(copyValue, false, true);
+    (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.onChange) && fieldProps.onChange(copyValue[index].value);
+  };
+  var onFieldChange = function onFieldChange() {
+    var _a;
+    var _ref2 = propItem || {},
+      type = _ref2.type,
+      component = _ref2.component,
+      fieldProps = _ref2.props;
+    var copyValue = (0, _cloneDeep2["default"])(value);
+    var index = copyValue.findIndex(function (v) {
+      return v.key === (propItem === null || propItem === void 0 ? void 0 : propItem.name);
+    });
+    copyValue[index].value = arguments.length <= 0 ? undefined : arguments[0];
+    if (['date', 'checkbox'].includes(type) || type === 'dateRange' && ((_a = arguments.length <= 1 ? undefined : arguments[1]) === null || _a === void 0 ? void 0 : _a[1])) {
+      close();
+    }
+    copyValue[index].closable = true;
+    onChange(copyValue, false, (arguments.length <= 0 ? undefined : arguments[0]) !== undefined, type !== 'selectInput');
+    (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.onChange) && fieldProps.onChange(copyValue[index].value);
+  };
+  var close = function close() {
+    setVisible(false);
+    setTimeout(function () {
+      setFieldItem();
+      setPopoverContent(false);
+    }, 1);
+  };
+  var handleVisibleChange = function handleVisibleChange() {
+    if (!visible && !regex.test(searchText)) {
+      setVisible(true);
+    } else {
+      close();
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var bool1 = false,
+      bool2 = false;
+    if (searchText && !propItem) {
+      fieldItems === null || fieldItems === void 0 ? void 0 : fieldItems.forEach(function (v) {
+        var _ref3 = v.props || {},
+          name = _ref3.name,
+          propsTitle = _ref3.propsTitle,
+          title = _ref3.title,
+          type = _ref3.type,
+          props = _ref3.props;
+        var _propsTitle = propsTitle || title || name;
+        if ((_propsTitle === null || _propsTitle === void 0 ? void 0 : _propsTitle.indexOf(searchText)) > -1) {
+          bool1 = true;
+        }
+        var sOptions = type !== 'select' ? [] : (props === null || props === void 0 ? void 0 : props.options) || [];
+        var fieldNames = props === null || props === void 0 ? void 0 : props.fieldNames;
+        var target = sOptions === null || sOptions === void 0 ? void 0 : sOptions.find(function (item) {
+          var labelKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label';
+          var label = item instanceof Object ? item[labelKey] : item + '';
+          return (_react["default"].isValidElement(label) ? (0, _utils.formatLabel)(label) : label).indexOf(searchText) > -1;
+        });
+        if (target) {
+          bool2 = true;
+        }
+      });
+      setSearchTarget(!bool2 && !bool1 ? null : {
+        propsTitle: bool1,
+        propsValue: bool2
+      });
+    } else {
+      setSearchTarget(undefined);
+    }
+  }, [fieldItems, searchText, propItem]);
+  var renderFirstOptions = function renderFirstOptions() {
+    var firstItems = searchText ? (0, _filter2["default"])(fieldItems, function (v) {
+      var _ref4 = v.props || {},
+        name = _ref4.name,
+        propsTitle = _ref4.propsTitle,
+        title = _ref4.title;
+      var _propsTitle = propsTitle || title || name;
+      return (_propsTitle === null || _propsTitle === void 0 ? void 0 : _propsTitle.indexOf(searchText)) > -1;
+    }) : fieldItems;
+    var secondItems = searchText ? (0, _filter2["default"])(fieldItems, function (v) {
+      var _ref5 = v.props || {},
+        type = _ref5.type,
+        props = _ref5.props;
+      var _ref6 = props || {},
+        options = _ref6.options,
+        loadData = _ref6.loadData,
+        fieldNames = _ref6.fieldNames;
+      return type === 'select' && !loadData && !!(0, _find2["default"])(options, function (item) {
+        var labelKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label';
+        var label = item instanceof Object ? item[labelKey] : item + '';
+        var isReactDom = _react["default"].isValidElement(label);
+        var _label = isReactDom ? (0, _utils.formatLabel)(label) : label;
+        return (_label === null || _label === void 0 ? void 0 : _label.indexOf(searchText)) > -1;
+      });
+    }) : [];
+    return _react["default"].createElement("div", null, firstItems.length > 0 && _react["default"].createElement(_react["default"].Fragment, null, (!searchText || (searchTarget === null || searchTarget === void 0 ? void 0 : searchTarget.propsTitle)) && _react["default"].createElement("label", null, locale.propTitle), _react["default"].createElement("ul", {
+      className: "ant-select-dropdown-menu"
+    }, firstItems.map(function (v) {
+      var _ref7 = v.props || {},
+        name = _ref7.name,
+        propsTitle = _ref7.propsTitle,
+        title = _ref7.title,
+        type = _ref7.type,
+        props = _ref7.props;
+      var _propsTitle = propsTitle || title || name;
+      return _react["default"].createElement("li", {
+        className: "ant-select-dropdown-menu-item",
+        key: name,
+        value: name,
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        },
+        onClick: function onClick() {
+          onPropsClick(v.props);
+        }
+      }, _react["default"].createElement(_ellipsis["default"], {
+        widthLimit: 220,
+        title: searchText ? _react["default"].createElement("span", {
+          dangerouslySetInnerHTML: {
+            __html: (0, _utils.highlightSubstring)(_propsTitle, searchText)
+          }
+        }) : _propsTitle
+      }));
+    }))), secondItems.length > 0 && _react["default"].createElement("div", null, (searchTarget === null || searchTarget === void 0 ? void 0 : searchTarget.propsValue) && _react["default"].createElement("label", null, locale.propValue), fieldItems === null || fieldItems === void 0 ? void 0 : fieldItems.map(function (v) {
+      var _ref8 = v.props || {},
+        name = _ref8.name,
+        type = _ref8.type,
+        props = _ref8.props;
+      var target = value === null || value === void 0 ? void 0 : value.find(function (v) {
+        return v.key === name;
+      });
+      if (type === 'select') {
+        return _react["default"].createElement(_Select["default"], Object.assign({
+          key: name
+        }, props, {
+          searchText: searchText,
+          propItem: v.props,
+          onChange: onSelectChange,
+          value: target === null || target === void 0 ? void 0 : target.value
+        }));
+      }
+      return;
+    })), !firstItems.length && !secondItems.length && _react["default"].createElement(_empty.Empty, {
+      size: "mini"
+    }));
+  };
+  var renderSecondOptions = function renderSecondOptions() {
+    var _a;
+    var _ref9 = propItem || {},
+      name = _ref9.name,
+      propsTitle = _ref9.propsTitle,
+      title = _ref9.title,
+      type = _ref9.type,
+      className = _ref9.className,
+      component = _ref9.component,
+      fieldProps = _ref9.props;
+    var target = value === null || value === void 0 ? void 0 : value.find(function (v) {
+      return v.key === name;
+    });
+    var Field = component || _fieldsMap["default"][type] || function () {
+      return null;
+    };
+    return _react["default"].createElement("div", {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      className: className
+    }, _react["default"].createElement("label", null, propsTitle || title || name), type === 'select' ? _react["default"].createElement(_Select["default"], Object.assign({}, fieldProps, {
+      searchText: searchText,
+      propItem: propItem,
+      onChange: onSelectChange,
+      value: target === null || target === void 0 ? void 0 : target.value
+    })) : _react["default"].createElement("div", {
+      className: "".concat(clsPrefix, "-field-popover-content"),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, _react["default"].createElement(Field, Object.assign({
+      form: form,
+      value: target === null || target === void 0 ? void 0 : target.value
+    }, fieldProps, {
+      style: Object.assign(Object.assign({}, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style), {
+        width: ((_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style) === null || _a === void 0 ? void 0 : _a.width) || '250px'
+      }),
+      close: close,
+      onChange: onFieldChange
+    }))));
+  };
+  return _react["default"].createElement(_popover["default"], Object.assign({
+    trigger: "click",
+    visible: visible,
+    overlayClassName: "".concat(clsPrefix, "-field-popover"),
+    content: !popoverContent ? renderFirstOptions() : renderSecondOptions(),
+    onVisibleChange: handleVisibleChange
+  }, props), children);
+};
+var _default = exports["default"] = (0, _react.forwardRef)(FieldPopover);