@cgeui/business-components 0.0.2 → 0.0.3

package/dist/esm/NumberCard/index.css

@@ -0,0 +1,166 @@
+.catd-cpbd__number-card-box {
+  --catd-number-card-font-size-small: var(--catd-font-size-s);
+  --catd-number-card-font-size-base: var(--catd-font-size-m);
+  --catd-number-card-card-padding: 10px;
+  --catd-number-card-card-margin: 12px;
+  --catd-number-card-unit-size: var(--catd-font-size-s);
+  --catd-number-card-unit-margin: 4px;
+  --catd-number-card-img-width: 56px;
+  --catd-number-card-indicator-name-color: var(--catd-text-color-secondary);
+  --catd-number-card-indicator-name-size: 20px;
+  --catd-number-card-indicator-value-size: 26px;
+  --catd-number-card-indicator-value-font: 700;
+}
+.catd-cpbd__number-card-box[data-mode="flat"] {
+  --catd-number-card-card-padding: 10px 20px;
+}
+.catd-cpbd__number-card-box[data-mode="flat"] .catd-cpbd__number-card-item {
+  margin-left: -1px;
+  margin-bottom: 0;
+}
+.catd-cpbd__number-card-box[data-mode="flat"] .catd-cpbd__number-card-item > div {
+  background: transparent;
+  border-radius: 0;
+  position: relative;
+  margin: 0;
+}
+.catd-cpbd__number-card-box[data-mode="flat"] .catd-cpbd__number-card-item > div:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 14%;
+  bottom: 14%;
+  width: 1px;
+}
+.catd-cpbd__number-card-box[data-mode="indicator"] .catd-cpbd__number-card-item .catd-number-card-name {
+  color: var(--catd-number-card-indicator-name-color);
+  font-size: var(--catd-number-card-indicator-name-size);
+}
+.catd-cpbd__number-card-box[data-mode="indicator"] .catd-cpbd__number-card-item .catd-number-card-value {
+  font-size: var(--catd-number-card-indicator-value-size);
+  font-weight: var(--catd-number-card-indicator-value-font);
+}
+.catd-cpbd__number-card-box[data-theme="default"] {
+  --catd-number-card-bg-color-h3: var(--catd-bg-color-thirdly);
+  --catd-number-card-card-border-h1: var(--catd-component-border-color);
+}
+.catd-cpbd__number-card-box[data-theme="default"][data-mode="merge"] {
+  --catd-number-card-bg-color-h3: #f9f9fb;
+}
+.catd-cpbd__number-card-box[data-theme="default"][data-mode="flat"] .catd-cpbd__number-card-item > div:after {
+  background: var(--catd-number-card-card-border-h1);
+}
+.catd-cpbd__number-card-box[data-theme="dark"] {
+  --catd-number-card-bg-color-h3: var(--catd-bg-color-secondary);
+}
+.catd-cpbd__number-card-box[data-theme="dark"][data-mode="merge"] {
+  --catd-number-card-bg-color-h3: var(--catd-bg-color-thirdly);
+}
+.catd-cpbd__number-card-box[data-theme="dark"][data-mode="flat"] {
+  --catd-number-card-bg-color-h3: var(--catd-bg-color-thirdly);
+  --catd-number-card-card-border-h1: rgba(255, 255, 255, 0.2);
+}
+.catd-cpbd__number-card-box[data-theme="dark"][data-mode="flat"] .catd-cpbd__number-card-item > div:after {
+  background: var(--catd-number-card-card-border-h1);
+}
+.catd-cpbd__number-card-box[data-size="medium"] {
+  --catd-number-card-font-size-small: var(--catd-font-size-14);
+  --catd-number-card-font-size-base: var(--catd-font-size-24);
+  --catd-number-card-card-padding: var(--catd-padding-xl);
+  --catd-number-card-card-margin: var(--catd-margin-xxl);
+  --catd-number-card-unit-size: var(--catd-font-size-14);
+}
+.catd-cpbd__number-card-box[data-size="large"] {
+  --catd-number-card-font-size-small: var(--catd-font-size-20);
+  --catd-number-card-font-size-base: var(--catd-font-size-24);
+  --catd-number-card-card-padding: var(--catd-padding-xl);
+  --catd-number-card-card-margin: var(--catd-margin-xxl);
+}
+.catd-cpbd__number-card-box[data-wrap=false] {
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+.catd-cpbd__number-card-box[data-wrap=false] .catd-cpbd__number-card-item {
+  flex: 1;
+}
+.catd-cpbd__number-card-box {
+  margin-right: calc(-1 * (var(--catd-number-card-card-margin) / 2));
+  margin-bottom: 0;
+  margin-left: calc(-1 * (var(--catd-number-card-card-margin) / 2));
+  width: -webkit-fill-available;
+}
+.catd-cpbd__number-card-box > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  overflow: hidden;
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item {
+  width: 50%;
+  margin-bottom: var(--catd-number-card-card-margin);
+  overflow: hidden;
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item .horizontal {
+  --catd-number-card-font-size-base: var(--catd-font-size-xxl);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item .horizontal > div:first-child {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item .horizontal > div:first-child .catdfont {
+  margin-right: var(--catd-margin-xl);
+  font-size: var(--catd-font-size-30);
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item .horizontal > div:last-child {
+  margin-top: 0;
+  display: flex;
+  align-items: baseline;
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item .horizontal img {
+  width: var(--catd-number-card-img-width);
+  height: var(--catd-number-card-img-width);
+  margin-right: var(--catd-margin-xl);
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item .vertical {
+  display: flex;
+  flex-direction: column;
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item > div {
+  margin-right: calc(var(--catd-number-card-card-margin) / 2);
+  margin-left: calc(var(--catd-number-card-card-margin) / 2);
+  padding: var(--catd-number-card-card-padding);
+  border-radius: var(--catd-radius-l);
+  background: var(--catd-number-card-bg-color-h3);
+  height: 100%;
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item > div > div {
+  word-wrap: break-word;
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item > div > div:first-child {
+  font-size: var(--catd-number-card-font-size-small);
+  color: var(--catd-text-color-thirdly);
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item > div > div:last-child {
+  font-size: var(--catd-number-card-font-size-base);
+  margin-top: var(--catd-margin-xs);
+  color: var(--catd-text-color-primary);
+}
+.catd-cpbd__number-card-box .catd-cpbd__number-card-item .catd-cpbd__number-card-unit {
+  font-size: var(--catd-number-card-unit-size);
+  margin-left: var(--catd-number-card-unit-margin);
+}
+@media screen and (min-width: 1200px) {
+  .catd-cpbd__number-card-box > .catd-cpbd__number-card-item {
+    width: 33.3%;
+  }
+}
+@media screen and (min-width: 1500px) {
+  .catd-cpbd__number-card-box .catd-cpbd__number-card-item {
+    width: 25%;
+  }
+}

package/dist/esm/NumberCard/index.js

@@ -0,0 +1 @@
+export { default as NumberCard } from "./NumberCard";

package/dist/esm/NumberCard/index.less

@@ -0,0 +1,367 @@
+.catd-cpbd__number-card-box {
+  --catd-number-card-font-size-small: var(--catd-font-size-s);
+  --catd-number-card-font-size-base: var(--catd-font-size-m);
+  --catd-number-card-card-padding: 10px;
+  --catd-number-card-card-margin: 12px;
+  --catd-number-card-unit-size: var(--catd-font-size-s);
+  --catd-number-card-unit-margin: 4px;
+  --catd-number-card-img-width: 56px;
+  --catd-number-card-indicator-name-color: var(--catd-text-color-secondary);
+  --catd-number-card-indicator-name-size: 20px;
+  --catd-number-card-indicator-value-size: 26px;
+  --catd-number-card-indicator-value-font: 700;
+}
+
+.catd-cpbd__number-card-box {
+  &[data-mode='flat'] {
+    --catd-number-card-card-padding: 10px 20px;
+    .catd-cpbd__number-card-item {
+      margin-left: -1px;
+      margin-bottom: 0;
+      > div {
+        background: transparent;
+        border-radius: 0;
+        position: relative;
+        margin: 0;
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 14%;
+          bottom: 14%;
+          width: 1px;
+        }
+      }
+    }
+  }
+  &[data-mode='indicator'] {
+    .catd-cpbd__number-card-item {
+      .catd-number-card-name {
+        color: var(--catd-number-card-indicator-name-color);
+        font-size: var(--catd-number-card-indicator-name-size);
+      }
+      .catd-number-card-value {
+        font-size: var(--catd-number-card-indicator-value-size);
+        font-weight: var(--catd-number-card-indicator-value-font);
+      }
+    }
+  }
+}
+
+.catd-cpbd__number-card-box[data-theme='default'] {
+  --catd-number-card-bg-color-h3: var(--catd-bg-color-thirdly);
+  --catd-number-card-card-border-h1: var(--catd-component-border-color);
+  &[data-mode='merge'] {
+    --catd-number-card-bg-color-h3: #f9f9fb;
+  }
+  &[data-mode='flat'] {
+    .catd-cpbd__number-card-item {
+      > div {
+        &:after {
+          background: var(--catd-number-card-card-border-h1);
+        }
+      }
+    }
+  }
+}
+
+.catd-cpbd__number-card-box[data-theme='dark'] {
+  --catd-number-card-bg-color-h3: var(--catd-bg-color-secondary);
+  &[data-mode='merge'] {
+    --catd-number-card-bg-color-h3: var(--catd-bg-color-thirdly);
+  }
+  &[data-mode='flat'] {
+    --catd-number-card-bg-color-h3: var(--catd-bg-color-thirdly);
+    --catd-number-card-card-border-h1: rgba(#fff, 0.2);
+    .catd-cpbd__number-card-item {
+      > div {
+        &:after {
+          background: var(--catd-number-card-card-border-h1);
+        }
+      }
+    }
+  }
+}
+
+.catd-cpbd__number-card-box[data-size='medium'] {
+  --catd-number-card-font-size-small: var(--catd-font-size-14);
+  --catd-number-card-font-size-base: var(--catd-font-size-24);
+  --catd-number-card-card-padding: var(--catd-padding-xl);
+  --catd-number-card-card-margin: var(--catd-margin-xxl);
+  --catd-number-card-unit-size: var(--catd-font-size-14);
+}
+
+.catd-cpbd__number-card-box[data-size='large'] {
+  --catd-number-card-font-size-small: var(--catd-font-size-20);
+  --catd-number-card-font-size-base: var(--catd-font-size-24);
+  --catd-number-card-card-padding: var(--catd-padding-xl);
+  --catd-number-card-card-margin: var(--catd-margin-xxl);
+}
+
+.catd-cpbd__number-card-box[data-wrap='false'] {
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  .catd-cpbd__number-card-item {
+    flex: 1;
+  }
+}
+
+.catd-cpbd__number-card-box {
+  margin-right: calc(-1 * (var(--catd-number-card-card-margin) / 2));
+  margin-bottom: 0;
+  margin-left: calc(-1 * (var(--catd-number-card-card-margin) / 2));
+  width: -webkit-fill-available;
+  > div {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    overflow: hidden;
+  }
+  .catd-cpbd__number-card-item {
+    width: 50%;
+    margin-bottom: var(--catd-number-card-card-margin);
+    overflow: hidden;
+    .catd-number-card-vertical {
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .catd-number-card-left-box {
+        display: flex;
+        .catd-number-card-icon-box {
+          margin-right: 6px;
+        }
+        .catd-number-card-value-box {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+      }
+    }
+    .catd-number-card-horizontal {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .catd-number-card-horizontal-left {
+      width: 100%;
+      --catd-number-card-font-size-base: var(--catd-font-size-xxl);
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      > div:first-child {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        .catdfont {
+          margin-right: var(--catd-margin-xl);
+          font-size: var(--catd-font-size-30);
+        }
+      }
+      > div:last-child {
+        margin-top: 0;
+        display: flex;
+        align-items: baseline;
+      }
+      .catd-number-card-value {
+        margin-top: 0;
+      }
+      > div {
+        word-wrap: break-word;
+      }
+      img {
+        width: var(--catd-number-card-img-width);
+        height: var(--catd-number-card-img-width);
+        margin-right: var(--catd-margin-xl);
+      }
+    }
+    .vertical-horizontal-common {
+      margin-right: calc(var(--catd-number-card-card-margin) / 2);
+      margin-left: calc(var(--catd-number-card-card-margin) / 2);
+      padding: var(--catd-number-card-card-padding);
+      border-radius: var(--catd-radius-l);
+      background: var(--catd-number-card-bg-color-h3);
+      height: 100%;
+    }
+    .vertical {
+      display: flex;
+      flex-direction: column;
+      > div {
+        word-wrap: break-word;
+      }
+      .vertical-horizontal-common();
+    }
+    .horizontal {
+      .vertical-horizontal-common();
+    }
+
+    .catd-number-card-name {
+      font-size: var(--catd-number-card-font-size-small);
+      color: var(--catd-text-color-thirdly);
+      .desc-icon {
+        font-size: inherit !important;
+        color: var(--catd-text-color-thirdly) !important;
+        margin-left: var(--catd-margin-xs);
+      }
+    }
+    .catd-number-card-value {
+      font-size: var(--catd-number-card-font-size-base);
+      margin-top: var(--catd-margin-xs);
+      color: var(--catd-text-color-primary);
+    }
+
+    .catd-cpbd__number-card-unit {
+      font-size: var(--catd-number-card-unit-size);
+      margin-left: var(--catd-number-card-unit-margin);
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .catd-cpbd__number-card-box {
+    > .catd-cpbd__number-card-item {
+      width: 33.3%;
+    }
+  }
+}
+
+@media screen and (min-width: 1500px) {
+  .catd-cpbd__number-card-box {
+    .catd-cpbd__number-card-item {
+      width: 25%;
+    }
+  }
+}
+
+.card-period-basis[data-color='green-up'] {
+  .card-period-basis-content-up {
+    .card-period-basis-number {
+      color: var(--catd-green-7);
+    }
+
+    .card-period-basis-triangle {
+      border-bottom-color: var(--catd-green-7) !important;
+    }
+  }
+  .card-period-basis-content-down {
+    .card-period-basis-number {
+      color: var(--catd-error-color);
+    }
+    .card-period-basis-triangle {
+      border-top-color: var(--catd-error-color) !important;
+    }
+  }
+}
+
+.card-period-basis[data-color='green-down'] {
+  .card-period-basis-content-up {
+    .card-period-basis-number {
+      color: var(--catd-error-color);
+    }
+
+    .card-period-basis-triangle {
+      border-bottom-color: var(--catd-error-color) !important;
+    }
+  }
+  .card-period-basis-content-down {
+    .card-period-basis-number {
+      color: var(--catd-green-7);
+    }
+    .card-period-basis-triangle {
+      border-top-color: var(--catd-green-7) !important;
+    }
+  }
+}
+
+.vertical {
+  .period-basis-compare-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    .card-period-basis {
+      margin-bottom: 24px !important;
+      display: flex;
+      &:last-child {
+        margin-bottom: 0 !important;
+      }
+      .card-period-basis-title {
+        margin-right: 16px;
+      }
+      .card-period-basis-content-up {
+        margin-top: 0px;
+      }
+      .card-period-basis-content-down {
+        margin-top: 0px;
+      }
+    }
+  }
+}
+// 同环比样式
+.period-basis-compare-box {
+  align-items: center;
+  height: 100%;
+  display: flex;
+  margin-left: 20px;
+  padding-left: 20px;
+  margin-top: 0 !important;
+  border-left: 0.73px solid var(--catd-component-border-color);
+  .card-period-basis-triangle-common {
+    width: 0;
+    height: 0;
+    border-color: transparent; /* 边框颜色设置为透明 */
+    border-style: solid;
+    border-width: 4px 5px 4px 5px; /* 分别代表上、右、下、左的边框宽度 */
+  }
+  .card-period-basis {
+    margin-right: 14px;
+    margin-top: 0px !important;
+    .card-period-basis-title {
+      font-size: 14px;
+      color: var(--catd-text-color-thirdly);
+    }
+
+    .card-period-basis-content-down {
+      margin-top: 6px;
+      font-size: 14px;
+      display: flex;
+      .card-period-basis-triangle-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 8px;
+        margin: 4px;
+      }
+      .card-period-basis-triangle {
+        .card-period-basis-triangle-common();
+        margin-top: 5px;
+      }
+    }
+
+    .card-period-basis-content-up {
+      margin-top: 6px;
+      font-size: 14px;
+      display: flex;
+      .card-period-basis-triangle-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 8px;
+        margin: 4px;
+      }
+      .card-period-basis-triangle {
+        .card-period-basis-triangle-common();
+        margin-top: -4px;
+      }
+    }
+  }
+}
+.number-card-item-box {
+  display: flex;
+  margin-left: 16px;
+  padding: 14px 12px;
+  border-left: var(--catd-text-color-thirdly);
+}

package/dist/esm/NumberCard/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/NumberCard/util.js

@@ -0,0 +1,49 @@
+import { Tooltip } from '@cgeui/components';
+import { CatdIcons } from '@cgeui/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var cardPeriodBasisCompare = function cardPeriodBasisCompare(type, number, isGreenUp) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "card-period-basis",
+    "data-color": isGreenUp ? 'green-up' : 'green-down',
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "card-period-basis-title",
+      children: type === 'yearToYear' ? '同比' : '环比'
+    }), /*#__PURE__*/_jsxs("div", {
+      className: number >= 0 ? 'card-period-basis-content-up' : 'card-period-basis-content-down',
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "card-period-basis-number",
+        children: [number >= 0 ? number.toFixed(1) : Math.abs(number).toFixed(1), "%"]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "card-period-basis-triangle-box",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "card-period-basis-triangle"
+        })
+      })]
+    })]
+  });
+};
+export var renderBasisCompare = function renderBasisCompare(isShowBasisCompare, item, isGreenUp) {
+  var showMonthToMonth = (item === null || item === void 0 ? void 0 : item.monthToMonth) !== null && (item === null || item === void 0 ? void 0 : item.monthToMonth) !== undefined;
+  var showYearToYear = (item === null || item === void 0 ? void 0 : item.yearToYear) !== null && (item === null || item === void 0 ? void 0 : item.yearToYear) !== undefined;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: isShowBasisCompare && (showMonthToMonth || showYearToYear) && /*#__PURE__*/_jsxs("div", {
+      className: "period-basis-compare-box",
+      children: [showMonthToMonth ? cardPeriodBasisCompare('monthToMonth', item.monthToMonth, isGreenUp) : null, showYearToYear ? cardPeriodBasisCompare('yearToYear', item.yearToYear, isGreenUp) : null]
+    })
+  });
+};
+export var renderDescriptions = function renderDescriptions(item) {
+  return item !== null && item !== void 0 && item.description ? /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: item === null || item === void 0 ? void 0 : item.description,
+      children: /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsx(CatdIcons, {
+          iconName: "info-circle",
+          className: "desc-icon"
+        })
+      })
+    })
+  }) : '';
+};

package/dist/esm/OperationButtons/demo/basic.js

@@ -0,0 +1,81 @@
+import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { Table, message } from '@cgeui/components';
+import OperationButtons from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+var dataSource = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  key: '2',
+  name: '吴彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}];
+var items = [{
+  key: 'view',
+  title: '查看',
+  disabled: true,
+  icon: 'change'
+}, {
+  key: 'edit',
+  title: '编辑',
+  icon: /*#__PURE__*/_jsx(EditOutlined, {})
+}, {
+  key: 'copy',
+  title: '复制',
+  icon: /*#__PURE__*/_jsx(CopyOutlined, {})
+}, {
+  key: 'delete',
+  title: '删除',
+  disabled: true,
+  icon: /*#__PURE__*/_jsx(DeleteOutlined, {})
+}];
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  key: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  key: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  key: 'address'
+}, {
+  title: '操作',
+  key: 'action',
+  render: function render(text, row) {
+    return /*#__PURE__*/_jsx(OperationButtons, {
+      max: 2,
+      items: items,
+      onClick: function onClick(info) {
+        switch (info.key) {
+          case 'view':
+            message.info(info.key);
+            break;
+          case 'edit':
+            message.info(info.key);
+            break;
+          case 'copy':
+            message.info(info.key);
+            break;
+          case 'delete':
+            message.info(info.key);
+            break;
+          default:
+            break;
+        }
+      }
+    });
+  }
+}];
+var App = function App() {
+  return /*#__PURE__*/_jsx(Table, {
+    dataSource: dataSource,
+    columns: columns
+  });
+};
+export default App;