@ztocwst/rc-pro-materials 0.1.23 → 0.1.25

package/es/components/z-agg-block/index.d.ts

@@ -0,0 +1,3 @@
+import ZAggBlock from './z-agg-block';
+export type { TypeAggBlockProps } from './z-agg-block';
+export default ZAggBlock;

package/es/components/z-agg-block/index.js

@@ -0,0 +1,2 @@
+import ZAggBlock from "./z-agg-block";
+export default ZAggBlock;

package/es/components/z-agg-block/index.less

@@ -0,0 +1,126 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+.pointer-block-wrap {
+  box-shadow: 0px 4px 16px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 16px;
+  overflow: hidden;
+
+  &.animate:hover {
+    transform: scale(1.05);
+    transition: all 0.3s ease-in;
+  }
+}
+
+.pointer-block-title {
+  display: flex;
+  // color: #487ffb;
+  // color: @primary-color;
+  color: var(--ant-primary-color, @primary-color);
+
+  .ant-typography {
+    color: inherit;
+  }
+}
+
+.pointer-block-title-l {
+  flex: 1;
+
+  .title {
+    font-size: 16px;
+  }
+
+  .sub-title {
+    font-size: 24px;
+  }
+
+  img {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.pointer-block-content {
+  margin-top: 10px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(1, 1fr);
+
+  .z-pointer-block.animate:hover {
+    box-shadow: 0 4px 16px 2px rgba(0, 0, 0, 0.1);
+    transform: scale(1.05);
+    transition: all 0.3s ease-in;
+  }
+
+  // 流程指标块
+  &.process .z-pointer-block,
+  &.process > * {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: -6px;
+      // left: -20px;
+      left: 0;
+      display: inline-block;
+      width: 104%;
+      height: 1px;
+      background: #e5e5e5;
+      content: '';
+    }
+
+    &:first-child::before {
+      left: 0;
+    }
+
+    &::after {
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background: #fff;
+      // border: 2px solid @primary-color;
+      border: 2px solid var(--ant-primary-color, @primary-color);
+      border-radius: 50%;
+      content: '';
+    }
+  }
+
+  // 纵向
+  &.vertical .z-pointer-block,
+  &.vertical > * {
+    &::before {
+      position: absolute;
+      // top: -20px;
+      top: 0;
+      left: -6px;
+      display: inline-block;
+      width: 1px;
+      height: 110%;
+      background: #e5e5e5;
+      content: '';
+    }
+
+    &:first-child::before {
+      top: 0;
+      left: -6px;
+    }
+
+    &::after {
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background: #fff;
+      // border: 2px solid @primary-color;
+      border: 2px solid var(--ant-primary-color, @primary-color);
+      border-radius: 50%;
+      content: '';
+    }
+  }
+}

package/es/components/z-agg-block/z-agg-block.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import './index.less';
+import { TypeZPointerBlockProps } from '../z-pointer-block';
+export interface TypeAggBlockProps {
+    /** 背景色 */
+    color?: {
+        start: string;
+        end: string;
+    };
+    /** 标题 */
+    title?: React.ReactNode;
+    /** 副标题 */
+    subTitle?: React.ReactNode;
+    /** 额外附属配置 */
+    extra?: React.ReactNode;
+    style?: React.CSSProperties;
+    /** 流程指标 */
+    process?: boolean;
+    /** 方向:横向 | 纵向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 一行几列 */
+    column?: number;
+    items?: TypeZPointerBlockProps[] | React.ReactNode;
+    onClick?: (item: any) => void;
+}
+declare const ZAggBlock: React.FC<TypeAggBlockProps>;
+export default ZAggBlock;

package/es/components/z-agg-block/z-agg-block.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["color", "title", "subTitle", "extra", "process", "direction", "column", "onClick"];
+import React from 'react';
+import classnames from 'classnames';
+import "./index.less";
+import ZPointerBlock from "../z-pointer-block";
+var ZAggBlock = function ZAggBlock(_ref) {
+  var _rest$items;
+  var color = _ref.color,
+    title = _ref.title,
+    subTitle = _ref.subTitle,
+    extra = _ref.extra,
+    process = _ref.process,
+    direction = _ref.direction,
+    column = _ref.column,
+    _onClick = _ref.onClick,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('pointer-block-wrap', {
+      animate: !!_onClick
+    }),
+    style: _extends({
+      background: "linear-gradient(180deg, " + ((color === null || color === void 0 ? void 0 : color.start) || '#eaf0ff') + " 0%, " + ((color === null || color === void 0 ? void 0 : color.end) || '#fafeff') + " 100%)"
+    }, rest.style || {}),
+    onClick: function onClick() {
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(rest.items);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pointer-block-title"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pointer-block-title-l"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "sub-title"
+  }, subTitle)), /*#__PURE__*/React.createElement("div", {
+    className: "pointer-block-title-r"
+  }, extra)), /*#__PURE__*/React.createElement("div", {
+    className: classnames('pointer-block-content', {
+      process: !!process,
+      vertical: direction === 'vertical'
+    }),
+    style: {
+      gridTemplateColumns: "repeat(" + (column || 1) + ", 1fr)"
+    }
+  }, /*#__PURE__*/React.isValidElement(rest.items) ? rest.items : (_rest$items = rest.items) === null || _rest$items === void 0 ? void 0 : _rest$items.map(function (e, index) {
+    if ( /*#__PURE__*/React.isValidElement(e)) {
+      // todo 统一处理点击事件
+      return e;
+    }
+    return /*#__PURE__*/React.createElement(ZPointerBlock, _extends({
+      key: index
+    }, e));
+  })));
+};
+export default ZAggBlock;

package/es/components/z-pointer-block/index.d.ts

@@ -0,0 +1,3 @@
+import ZPointerBlock from './z-pointer-block';
+export type { TypeZPointerBlockProps } from './z-pointer-block';
+export default ZPointerBlock;

package/es/components/z-pointer-block/index.js

@@ -0,0 +1,2 @@
+import ZPointerBlock from "./z-pointer-block";
+export default ZPointerBlock;

package/es/components/z-pointer-block/index.less

@@ -0,0 +1,15 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+.z-pointer-block {
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  min-width: 100px;
+
+  .icon {
+    // color: @primary-color;
+    color: var(--ant-primary-color, @primary-color);
+  }
+}

package/es/components/z-pointer-block/z-pointer-block.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import './index.less';
+export interface TypeZPointerBlockProps {
+    /** 标题 */
+    title: string | React.ReactNode;
+    /** 值 */
+    value: string;
+    /** 图标 */
+    icon?: React.ReactNode;
+    align?: 'top' | 'middle' | 'bottom';
+    style?: React.CSSProperties;
+    onClick?: (item?: any) => void;
+}
+declare const ZPointerBlock: (props: TypeZPointerBlockProps) => import("react").JSX.Element;
+export default ZPointerBlock;

package/es/components/z-pointer-block/z-pointer-block.js

@@ -0,0 +1,36 @@
+import _Row from "antd/es/row";
+import _Col from "antd/es/col";
+import _Statistic from "antd/es/statistic";
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.less";
+import classnames from 'classnames';
+var ZPointerBlock = function ZPointerBlock(props) {
+  var style = props.style,
+    title = props.title,
+    value = props.value,
+    icon = props.icon,
+    align = props.align,
+    _onClick = props.onClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('z-pointer-block', {
+      // 聚合指标里可点击时添加css动效
+      animate: !!_onClick
+    }),
+    style: _extends({}, style),
+    onClick: function onClick() {
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(props);
+    }
+  }, /*#__PURE__*/React.createElement(_Row, {
+    align: align,
+    gutter: 8
+  }, /*#__PURE__*/React.createElement(_Col, {
+    flex: 1
+  }, /*#__PURE__*/React.createElement(_Statistic, {
+    title: title,
+    value: value,
+    groupSeparator: ""
+  })), icon ? /*#__PURE__*/React.createElement(_Col, {
+    className: "icon"
+  }, icon) : null));
+};
+export default ZPointerBlock;

package/es/components/z-ranking-list/index.less

@@ -1,3 +1,6 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .ranking-list .ant-table .ant-table-thead > tr > th {
   border-bottom: none;
   font-size: 13px;
@@ -33,7 +36,8 @@
 
     &.highlight {
       color: #fff;
-      background: #1890ff;
+      // background: #1890ff;
+      background: var(--ant-primary-color, @primary-color);
     }
   }
 

package/es/index.d.ts

@@ -29,3 +29,7 @@ export { default as ZAuth } from './components/z-auth';
 export type { TypeAuthProps } from './components/z-auth';
 export { default as ZProProvider } from './components/z-pro-provider';
 export type { TypeZProProviderProps } from './components/z-pro-provider';
+export { default as ZPointerBlock } from './components/z-pointer-block';
+export type { TypeZPointerBlockProps } from './components/z-pointer-block';
+export { default as ZAggBlock } from './components/z-agg-block';
+export type { TypeAggBlockProps } from './components/z-agg-block';

package/es/index.js

@@ -16,6 +16,10 @@ export { default as ZSingleFactory } from "./components/z-singleFactory";
 export { default as ZRcEditTable } from "./components/z-editTable";
 export { default as ZAuth } from "./components/z-auth";
 export { default as ZProProvider } from "./components/z-pro-provider";
+// 普通指标块
+export { default as ZPointerBlock } from "./components/z-pointer-block";
+// 聚合指标
+export { default as ZAggBlock } from "./components/z-agg-block";
 
 // const bizCssPrefix = 'bizpack';
 

package/es/style.js

@@ -4,8 +4,12 @@ import 'antd/lib/table/style';
 import 'antd/lib/typography/style';
 import 'antd/lib/config-provider/style';
 import 'antd/es/config-provider/style';
+import 'antd/lib/row/style';
+import 'antd/lib/col/style';
 import 'antd/es/statistic/style';
 import 'antd/es/progress/style';
 import 'antd/es/table/style';
 import 'antd/es/typography/style';
+import 'antd/es/row/style';
+import 'antd/es/col/style';
 import './index.scss';

package/lib/components/z-agg-block/index.d.ts

@@ -0,0 +1,3 @@
+import ZAggBlock from './z-agg-block';
+export type { TypeAggBlockProps } from './z-agg-block';
+export default ZAggBlock;

package/lib/components/z-agg-block/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _zAggBlock = _interopRequireDefault(require("./z-agg-block"));
+var _default = _zAggBlock["default"];
+exports["default"] = _default;

package/lib/components/z-agg-block/index.less

@@ -0,0 +1,126 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+.pointer-block-wrap {
+  box-shadow: 0px 4px 16px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 16px;
+  overflow: hidden;
+
+  &.animate:hover {
+    transform: scale(1.05);
+    transition: all 0.3s ease-in;
+  }
+}
+
+.pointer-block-title {
+  display: flex;
+  // color: #487ffb;
+  // color: @primary-color;
+  color: var(--ant-primary-color, @primary-color);
+
+  .ant-typography {
+    color: inherit;
+  }
+}
+
+.pointer-block-title-l {
+  flex: 1;
+
+  .title {
+    font-size: 16px;
+  }
+
+  .sub-title {
+    font-size: 24px;
+  }
+
+  img {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.pointer-block-content {
+  margin-top: 10px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(1, 1fr);
+
+  .z-pointer-block.animate:hover {
+    box-shadow: 0 4px 16px 2px rgba(0, 0, 0, 0.1);
+    transform: scale(1.05);
+    transition: all 0.3s ease-in;
+  }
+
+  // 流程指标块
+  &.process .z-pointer-block,
+  &.process > * {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: -6px;
+      // left: -20px;
+      left: 0;
+      display: inline-block;
+      width: 104%;
+      height: 1px;
+      background: #e5e5e5;
+      content: '';
+    }
+
+    &:first-child::before {
+      left: 0;
+    }
+
+    &::after {
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background: #fff;
+      // border: 2px solid @primary-color;
+      border: 2px solid var(--ant-primary-color, @primary-color);
+      border-radius: 50%;
+      content: '';
+    }
+  }
+
+  // 纵向
+  &.vertical .z-pointer-block,
+  &.vertical > * {
+    &::before {
+      position: absolute;
+      // top: -20px;
+      top: 0;
+      left: -6px;
+      display: inline-block;
+      width: 1px;
+      height: 110%;
+      background: #e5e5e5;
+      content: '';
+    }
+
+    &:first-child::before {
+      top: 0;
+      left: -6px;
+    }
+
+    &::after {
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background: #fff;
+      // border: 2px solid @primary-color;
+      border: 2px solid var(--ant-primary-color, @primary-color);
+      border-radius: 50%;
+      content: '';
+    }
+  }
+}

package/lib/components/z-agg-block/z-agg-block.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import './index.less';
+import { TypeZPointerBlockProps } from '../z-pointer-block';
+export interface TypeAggBlockProps {
+    /** 背景色 */
+    color?: {
+        start: string;
+        end: string;
+    };
+    /** 标题 */
+    title?: React.ReactNode;
+    /** 副标题 */
+    subTitle?: React.ReactNode;
+    /** 额外附属配置 */
+    extra?: React.ReactNode;
+    style?: React.CSSProperties;
+    /** 流程指标 */
+    process?: boolean;
+    /** 方向:横向 | 纵向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 一行几列 */
+    column?: number;
+    items?: TypeZPointerBlockProps[] | React.ReactNode;
+    onClick?: (item: any) => void;
+}
+declare const ZAggBlock: React.FC<TypeAggBlockProps>;
+export default ZAggBlock;

package/lib/components/z-agg-block/z-agg-block.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.less");
+var _zPointerBlock = _interopRequireDefault(require("../z-pointer-block"));
+var _excluded = ["color", "title", "subTitle", "extra", "process", "direction", "column", "onClick"];
+var ZAggBlock = function ZAggBlock(_ref) {
+  var _rest$items;
+  var color = _ref.color,
+    title = _ref.title,
+    subTitle = _ref.subTitle,
+    extra = _ref.extra,
+    process = _ref.process,
+    direction = _ref.direction,
+    column = _ref.column,
+    _onClick = _ref.onClick,
+    rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('pointer-block-wrap', {
+      animate: !!_onClick
+    }),
+    style: (0, _extends2["default"])({
+      background: "linear-gradient(180deg, " + ((color === null || color === void 0 ? void 0 : color.start) || '#eaf0ff') + " 0%, " + ((color === null || color === void 0 ? void 0 : color.end) || '#fafeff') + " 100%)"
+    }, rest.style || {}),
+    onClick: function onClick() {
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(rest.items);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pointer-block-title"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pointer-block-title-l"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sub-title"
+  }, subTitle)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pointer-block-title-r"
+  }, extra)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('pointer-block-content', {
+      process: !!process,
+      vertical: direction === 'vertical'
+    }),
+    style: {
+      gridTemplateColumns: "repeat(" + (column || 1) + ", 1fr)"
+    }
+  }, /*#__PURE__*/_react["default"].isValidElement(rest.items) ? rest.items : (_rest$items = rest.items) === null || _rest$items === void 0 ? void 0 : _rest$items.map(function (e, index) {
+    if ( /*#__PURE__*/_react["default"].isValidElement(e)) {
+      // todo 统一处理点击事件
+      return e;
+    }
+    return /*#__PURE__*/_react["default"].createElement(_zPointerBlock["default"], (0, _extends2["default"])({
+      key: index
+    }, e));
+  })));
+};
+var _default = ZAggBlock;
+exports["default"] = _default;

package/lib/components/z-pointer-block/index.d.ts

@@ -0,0 +1,3 @@
+import ZPointerBlock from './z-pointer-block';
+export type { TypeZPointerBlockProps } from './z-pointer-block';
+export default ZPointerBlock;

package/lib/components/z-pointer-block/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _zPointerBlock = _interopRequireDefault(require("./z-pointer-block"));
+var _default = _zPointerBlock["default"];
+exports["default"] = _default;

package/lib/components/z-pointer-block/index.less

@@ -0,0 +1,15 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+.z-pointer-block {
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  min-width: 100px;
+
+  .icon {
+    // color: @primary-color;
+    color: var(--ant-primary-color, @primary-color);
+  }
+}

package/lib/components/z-pointer-block/z-pointer-block.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import './index.less';
+export interface TypeZPointerBlockProps {
+    /** 标题 */
+    title: string | React.ReactNode;
+    /** 值 */
+    value: string;
+    /** 图标 */
+    icon?: React.ReactNode;
+    align?: 'top' | 'middle' | 'bottom';
+    style?: React.CSSProperties;
+    onClick?: (item?: any) => void;
+}
+declare const ZPointerBlock: (props: TypeZPointerBlockProps) => import("react").JSX.Element;
+export default ZPointerBlock;

package/lib/components/z-pointer-block/z-pointer-block.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _row = _interopRequireDefault(require("antd/lib/row"));
+var _col = _interopRequireDefault(require("antd/lib/col"));
+var _statistic = _interopRequireDefault(require("antd/lib/statistic"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("./index.less");
+var _classnames = _interopRequireDefault(require("classnames"));
+var ZPointerBlock = function ZPointerBlock(props) {
+  var style = props.style,
+    title = props.title,
+    value = props.value,
+    icon = props.icon,
+    align = props.align,
+    _onClick = props.onClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])('z-pointer-block', {
+      // 聚合指标里可点击时添加css动效
+      animate: !!_onClick
+    }),
+    style: (0, _extends2["default"])({}, style),
+    onClick: function onClick() {
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(props);
+    }
+  }, /*#__PURE__*/React.createElement(_row["default"], {
+    align: align,
+    gutter: 8
+  }, /*#__PURE__*/React.createElement(_col["default"], {
+    flex: 1
+  }, /*#__PURE__*/React.createElement(_statistic["default"], {
+    title: title,
+    value: value,
+    groupSeparator: ""
+  })), icon ? /*#__PURE__*/React.createElement(_col["default"], {
+    className: "icon"
+  }, icon) : null));
+};
+var _default = ZPointerBlock;
+exports["default"] = _default;