bee-front-components 1.0.0

package/config/config.ts

@@ -0,0 +1,28 @@
+import { extendParentConfig } from "@hzerojs/plugin-micro";
+
+export default extendParentConfig({
+  webpack5: {},
+  // 开启fastRefresh此配置，每次修改config文件都需要重新启动dev server
+  // fastRefresh: {},
+  hash: true,
+  hzeroMicro: {
+    microConfig: {
+      "registerRegex": "\\/.*",
+    }
+  },
+  // 如果存在发布 lib 包需求,可以解开该配置，对应 babelrc 中的内容
+  // 注意若父模块与子模块都配置了module-resolver插件,请保证数组的第三个参数不能为同一个字符串或者都为空
+  extraBabelPlugins: [
+    [
+      "module-resolver",
+      {
+        root: ["./"],
+        alias: {
+          "@": "./src",
+          "bee-components": "./src/components",
+          "bee-utils": "./src/utils",
+        },
+      },
+    ],
+  ],
+});

package/lib/components/BaseModal/index.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+export interface BaseModalRef {
+    open: (config?: Partial<BaseModalConfig>) => void;
+    close: () => void;
+}
+export interface BaseModalConfig {
+    /** 弹窗标题 */
+    title?: React.ReactNode;
+    /** 标题位置 */
+    titlePosition?: "top" | "center";
+    /** 弹窗内容 */
+    content?: React.ReactNode;
+    /** 确定按钮文本 */
+    okText?: string;
+    /** 取消按钮文本 */
+    cancelText?: string;
+    /** 弹窗宽度 */
+    width?: number | string;
+    /** 弹窗样式 */
+    style?: React.CSSProperties;
+    /** 弹窗内容样式 */
+    bodyStyle?: React.CSSProperties;
+    /** 是否显示右上角关闭按钮 */
+    closable?: boolean;
+    /** 是否可关闭遮罩层 */
+    maskClosable?: boolean | "click" | "dblclick";
+    /** 弹窗图标 */
+    icon?: string;
+    /** 是否显示图标 */
+    iconVisible?: boolean;
+    /** 图标颜色 */
+    iconColor?: string;
+    /** 图标样式 */
+    iconStyle?: React.CSSProperties;
+    /** 确定按钮点击事件 */
+    onOk?: () => Promise<boolean | undefined | void> | boolean | undefined | void;
+    /** 取消按钮点击事件 */
+    onCancel?: () => Promise<boolean | undefined | void> | boolean | undefined | void;
+}
+declare const BaseModal: React.ForwardRefExoticComponent<React.RefAttributes<BaseModalRef>>;
+export default BaseModal;

package/lib/components/BaseModal/index.js

@@ -0,0 +1,133 @@
+import _Modal from "@hzero-front-ui/c7n-ui/lib/ModalPro";
+/**
+ * @name BaseModal - 基础弹窗组件
+ * @description 基于 choerodon-ui/pro Modal.open 封装，支持顶部/居中标题、自定义图标、确认/取消回调，
+ * 通过 ref 暴露 open / close 方法控制弹窗生命周期，适用于全局提示、二次确认等场景。
+ *
+ * @example
+ * ```tsx
+ * const modalRef = useRef<BaseModalRef>(null);
+ *
+ * <BaseModal ref={modalRef} />
+ *
+ * modalRef.current?.open({
+ *   title: '确认删除？',
+ *   content: '删除后不可恢复',
+ *   onOk: async () => { await deleteData(); return true; },
+ * });
+ * ```
+ */
+import { ButtonColor, FuncType } from "choerodon-ui/pro/lib/button/enum";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { Button } from "../Buttons";
+import styles from "./index.module.less?modules";
+const BaseModal = /*#__PURE__*/forwardRef((props, ref) => {
+  // 使用 useRef 存储 modal 实例，防止组件重渲染导致实例丢失
+  const modalInstanceRef = useRef(null);
+  const open = useCallback(config => {
+    if (modalInstanceRef.current) {
+      modalInstanceRef.current.close();
+    }
+    const mergedConfig = {
+      title: "",
+      titlePosition: "center",
+      content: "",
+      okText: "确定",
+      cancelText: "取消",
+      width: 600,
+      closable: true,
+      maskClosable: false,
+      icon: "icon-jingshi",
+      iconVisible: true,
+      iconColor: "#FF4433",
+      ...config
+    };
+    const handleOk = async () => {
+      var _modalInstanceRef$cur;
+      if (mergedConfig.onOk) {
+        const res = await mergedConfig.onOk();
+        if (res === false) {
+          return;
+        }
+      }
+      (_modalInstanceRef$cur = modalInstanceRef.current) === null || _modalInstanceRef$cur === void 0 ? void 0 : _modalInstanceRef$cur.close();
+      modalInstanceRef.current = null;
+    };
+    const handleCancel = async () => {
+      var _modalInstanceRef$cur2;
+      if (mergedConfig.onCancel) {
+        const res = await mergedConfig.onCancel();
+        if (res === false) {
+          return;
+        }
+      }
+      (_modalInstanceRef$cur2 = modalInstanceRef.current) === null || _modalInstanceRef$cur2 === void 0 ? void 0 : _modalInstanceRef$cur2.close();
+      modalInstanceRef.current = null;
+    };
+    modalInstanceRef.current = _Modal.open({
+      title: "",
+      // 清空默认标题，使用自定义 header
+      header: /*#__PURE__*/React.createElement("div", {
+        className: styles.baseModalHeader
+      }, mergedConfig.titlePosition === "top" && /*#__PURE__*/React.createElement("div", {
+        className: styles.headerTitle
+      }, mergedConfig.title), mergedConfig.closable && /*#__PURE__*/React.createElement("i", {
+        className: `iconfont icon-guanbi ${styles.closeIcon}`,
+        onClick: handleCancel
+      })),
+      style: {
+        width: mergedConfig.width,
+        ...mergedConfig.style
+      },
+      className: styles.baseModal,
+      closable: mergedConfig.closable,
+      maskClosable: mergedConfig.maskClosable,
+      autoCenter: true,
+      bodyStyle: {
+        padding: "0px",
+        ...mergedConfig.bodyStyle
+      },
+      // 弹窗内容
+      children: /*#__PURE__*/React.createElement("div", {
+        className: `${styles.baseModalContent} ${mergedConfig.titlePosition === "top" ? styles.baseModalContentHasTitle : ""}`
+      }, mergedConfig.iconVisible && /*#__PURE__*/React.createElement("div", {
+        className: styles.iconContainer
+      }, /*#__PURE__*/React.createElement("i", {
+        className: `iconfont ${mergedConfig.icon} ${styles.icon}`,
+        style: {
+          color: mergedConfig.iconColor,
+          ...(mergedConfig.iconStyle || {})
+        }
+      })), mergedConfig.title && mergedConfig.titlePosition === "center" && /*#__PURE__*/React.createElement("div", {
+        className: styles.title
+      }, mergedConfig.title), /*#__PURE__*/React.createElement("div", {
+        className: styles.content
+      }, mergedConfig.content)),
+      // 底部按钮区
+      footer: /*#__PURE__*/React.createElement("div", {
+        className: styles.footerContainer
+      }, /*#__PURE__*/React.createElement(Button, {
+        color: "default",
+        funcType: "raised",
+        className: styles.cancelButton,
+        onClick: handleCancel
+      }, mergedConfig.cancelText), /*#__PURE__*/React.createElement(Button, {
+        funcType: "raised",
+        className: styles.okButton,
+        onClick: handleOk
+      }, mergedConfig.okText))
+    });
+  }, []);
+  const close = useCallback(() => {
+    if (modalInstanceRef.current) {
+      modalInstanceRef.current.close();
+      modalInstanceRef.current = null;
+    }
+  }, []);
+  useImperativeHandle(ref, () => ({
+    open,
+    close
+  }), [open, close]);
+  return null;
+});
+export default BaseModal;

package/lib/components/BaseModal/index.module.less

@@ -0,0 +1,66 @@
+.baseModal {
+  .baseModalHeader {
+    .flex(@justify: center);
+    position: relative;
+    width: 100%;
+    font-size: 0.2rem;
+    height: 0.2rem;
+    line-height: 0.2rem;
+    .closeIcon {
+      font-size: 0.34rem;
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+    }
+    .headerTitle::after {
+      content: "";
+      position: absolute;
+      left: -0.16rem;
+      right: -0.016rem;
+      bottom: -0.16rem;
+      height: 0.01rem;
+      background-color: @borderColor;
+    }
+  }
+  .baseModalContent {
+    text-align: center;
+    padding: 0.08rem 0.48rem;
+    &.baseModalContentHasTitle {
+      padding-top: 0.24rem;
+    }
+    .iconContainer {
+      margin-bottom: 0.36rem;
+    }
+    .icon {
+      font-size: 0.48rem;
+      line-height: 0.48rem;
+    }
+    .title {
+      font-size: 0.2rem;
+      margin-bottom: 0.16rem;
+      line-height: 0.2rem;
+    }
+    .content {
+      font-size: 0.2rem;
+      color: @minorWord;
+      min-height: 0.78rem;
+      line-height: 0.28rem;
+    }
+  }
+  .footerContainer {
+    .flex(@justify: space-between);
+    width: 100%;
+    padding: 0 0.32rem 0.32rem;
+    gap: 0.36rem;
+    .cancelButton,
+    .okButton {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  :global {
+    .c7n-pro-modal-header {
+      padding-bottom: 0.16rem !important;
+    }
+  }
+}

package/lib/components/Buttons/Button.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @name 可配置按钮权限按钮
+ * @param {string} className 该组件自定义类名
+ * @param {string} icon 按钮图标 同choerodon-ui的icon类型 若传icon-xxxx则使用自定义iconfont图标
+ * @param {...args} 其他剩余参数 同hzero组件中的Button使用方式
+ * @author lichen
+ */
+import React from "react";
+import type { ButtonProps } from "choerodon-ui/pro/lib/button/Button";
+interface IProps extends ButtonProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义按钮图标 */
+    icon?: string;
+}
+declare const Button: React.FC<IProps>;
+export default Button;

package/lib/components/Buttons/Button.js

@@ -0,0 +1,34 @@
+import _Button from "@hzero-front-ui/c7n-ui/lib/ButtonPro";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "icon"];
+/**
+ * @name 可配置按钮权限按钮
+ * @param {string} className 该组件自定义类名
+ * @param {string} icon 按钮图标 同choerodon-ui的icon类型 若传icon-xxxx则使用自定义iconfont图标
+ * @param {...args} 其他剩余参数 同hzero组件中的Button使用方式
+ * @author lichen
+ */
+import React, { useMemo } from "react";
+import classNames from "classnames";
+import { ButtonColor, FuncType } from "choerodon-ui/pro/lib/button/enum";
+import styles from "./index.module.less?modules";
+const Button = props => {
+  const className = props.className,
+    icon = props.icon,
+    args = _objectWithoutProperties(props, _excluded);
+  const isIconfont = useMemo(() => !!icon && icon.startsWith("icon-"), [icon]); // 判断当前icon是否为自定义iconfont图标 若是则使用自定义iconfont图标样式 否则使用choerodon-ui的icon样式
+  return isIconfont ? /*#__PURE__*/React.createElement(_Button, _extends({
+    className: classNames(styles.defaultBtn, className),
+    funcType: "flat",
+    color: "primary"
+  }, args), /*#__PURE__*/React.createElement("i", {
+    className: classNames("iconfont", styles.btnIcon, icon)
+  }), (args === null || args === void 0 ? void 0 : args.children) || null) : /*#__PURE__*/React.createElement(_Button, _extends({
+    className: classNames(styles.defaultBtn, className),
+    icon: icon,
+    funcType: "flat",
+    color: "primary"
+  }, args));
+};
+export default Button;

package/lib/components/Buttons/ButtonPermission.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @name 可配置按钮权限按钮
+ * @param {string} className 该组件自定义类名
+ * @param {string} icon 按钮图标 同choerodon-ui的icon类型 若传icon-xxxx则使用自定义iconfont图标
+ * @param {...args} 其他剩余参数 同hzero组件中的Button使用方式
+ * @author lichen
+ */
+import React from "react";
+interface IProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义按钮图标 */
+    icon?: string;
+    /** 其他属性 */
+    [key: string]: any;
+}
+declare const ButtonPermission: React.FC<IProps>;
+export default ButtonPermission;

package/lib/components/Buttons/ButtonPermission.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "icon"];
+/**
+ * @name 可配置按钮权限按钮
+ * @param {string} className 该组件自定义类名
+ * @param {string} icon 按钮图标 同choerodon-ui的icon类型 若传icon-xxxx则使用自定义iconfont图标
+ * @param {...args} 其他剩余参数 同hzero组件中的Button使用方式
+ * @author lichen
+ */
+import React, { useMemo } from "react";
+import { Button } from "components/Permission";
+import classNames from "classnames";
+import { ButtonColor } from "choerodon-ui/pro/lib/button/enum";
+import styles from "./index.module.less?modules";
+const ButtonPermission = props => {
+  const className = props.className,
+    icon = props.icon,
+    args = _objectWithoutProperties(props, _excluded);
+  const isIconfont = useMemo(() => !!icon && icon.startsWith("icon-"), [icon]); // 判断当前icon是否为自定义iconfont图标 若是则使用自定义iconfont图标样式 否则使用choerodon-ui的icon样式
+  return isIconfont ? /*#__PURE__*/React.createElement(Button, _extends({
+    className: classNames(styles.defaultBtn, className),
+    type: "c7n-pro",
+    color: "primary"
+  }, args), /*#__PURE__*/React.createElement("i", {
+    className: classNames("iconfont", styles.btnIcon, icon)
+  }), (args === null || args === void 0 ? void 0 : args.children) || null) : /*#__PURE__*/React.createElement(Button, _extends({
+    className: classNames(styles.defaultPerBtn, className),
+    type: "c7n-pro",
+    icon: icon,
+    color: "primary"
+  }, args));
+};
+export default ButtonPermission;

package/lib/components/Buttons/index.d.ts

@@ -0,0 +1,3 @@
+import Button from "./Button";
+import ButtonPermission from "./ButtonPermission";
+export { Button, ButtonPermission };

package/lib/components/Buttons/index.js

@@ -0,0 +1,3 @@
+import Button from "./Button";
+import ButtonPermission from "./ButtonPermission";
+export { Button, ButtonPermission };

package/lib/components/Buttons/index.module.less

@@ -0,0 +1,21 @@
+// 按钮通用样式
+.defaultBtn {
+  &:global(.c7n-pro-btn-wrapper.c7n-pro-btn.c7n-pro-btn-raised) {
+    .flex;
+    min-width: 0.88rem;
+    height: 0.36rem;
+    line-height: normal;
+    padding: 0 0.16rem;
+    font-size: @fontSize;
+    border-radius: @borderRadius;
+  }
+}
+
+.btnIcon {
+  font-size: @fontSize;
+  margin-right: 0.04rem;
+}
+
+.btnText {
+  font-size: @fontSize;
+}

package/lib/components/ContentHeader/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @name 详情页相关二级模块的头部标题
+ * @param {string} className 自定义类名
+ * @param {string} title 标题名称
+ * @param {string} iconName 所用的iconfont名称
+ */
+import React from "react";
+interface IProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 标题名称 */
+    title: string;
+    /** 所用的iconfont名称 */
+    iconName?: string;
+}
+declare const ContentHeader: React.FC<IProps>;
+export default ContentHeader;

package/lib/components/ContentHeader/index.js

@@ -0,0 +1,22 @@
+/**
+ * @name 详情页相关二级模块的头部标题
+ * @param {string} className 自定义类名
+ * @param {string} title 标题名称
+ * @param {string} iconName 所用的iconfont名称
+ */
+import React from "react";
+import classNames from "classnames";
+import styles from "./index.module.less?modules";
+const ContentHeader = props => {
+  const className = props.className,
+    iconName = props.iconName,
+    title = props.title;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.contentHeaderWrap, className)
+  }, iconName && /*#__PURE__*/React.createElement("i", {
+    className: classNames("iconfont", iconName, styles.contentIcon)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles.contentTitle
+  }, title || "基础信息"));
+};
+export default ContentHeader;

package/lib/components/ContentHeader/index.module.less

@@ -0,0 +1,14 @@
+// 详情页相关二级模块的头部标题组件样式
+.contentHeaderWrap {
+  .flex(@justify: flex-start);
+  gap: 0.08rem;
+  line-height: normal;
+  .contentIcon {
+    font-size: @mediumFont;
+    color: @primaryColor;
+  }
+  .contentTitle {
+    font-size: @fontSize20;
+    font-weight: 500;
+  }
+}

package/lib/components/Empty/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @name 全局空状态组件
+ * @param {string} className 该组件自定义类名
+ * @param {string} emptyContent 自定义空状态提示语
+ * @param {ReactNode} children 自定义空状态主体内容
+ */
+import React from "react";
+interface IProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义空状态提示语 */
+    emptyContent?: string;
+    /** 自定义空状态主体内容 */
+    children?: React.ReactNode;
+}
+declare const Empty: React.FC<IProps>;
+export default Empty;

package/lib/components/Empty/index.js

@@ -0,0 +1,23 @@
+/**
+ * @name 全局空状态组件
+ * @param {string} className 该组件自定义类名
+ * @param {string} emptyContent 自定义空状态提示语
+ * @param {ReactNode} children 自定义空状态主体内容
+ */
+import React from "react";
+import classNames from "classnames";
+import emptyImg from "../../assets/images/empty.png";
+import styles from "./index.module.less?modules";
+const Empty = ({
+  className,
+  emptyContent = "暂无数据",
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classNames(styles.emptyWrap, className)
+}, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+  className: styles.emptyImg,
+  src: emptyImg
+}), /*#__PURE__*/React.createElement("span", {
+  className: styles.emptyContent
+}, emptyContent)));
+export default Empty;

package/lib/components/Empty/index.module.less

@@ -0,0 +1,15 @@
+// 空状态组件样式
+.emptyWrap {
+  .flex(column);
+  gap: 0.16rem;
+  margin-top: 0.32rem;
+  .emptyImg {
+    max-width: 2.45rem;
+    max-height: 1.26rem;
+    object-fit: cover;
+  }
+  .emptyContent {
+    font-size: @fontSize;
+    color: @primaryWord;
+  }
+}

package/lib/components/ExcelExport/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @name 批量导出组件
+ * @param {string} key dom元素标识 多作为Table组件的buttons等参数数组中标识符
+ * @param {string} requestUrl 导出请求路径
+ * @param {Record<string, any>} queryParams 导出列表的筛选查询参数
+ * @param {string} icon 按钮图标 同choerodon-ui的icon类型 若传icon-xxxx则使用自定义iconfont图标
+ * @param {string} buttonText 按钮文字
+ * @param {Omit<ButtonProps, "icon">} otherButtonProps 导出按钮的其他属性
+ */
+import React from "react";
+import type { IExcelExportProps } from "hzero-front/lib/components/ExcelExportPro";
+import type { ButtonProps } from "choerodon-ui/pro/lib/button/Button";
+interface IProps extends Omit<IExcelExportProps, "buttonText" | "otherButtonProps"> {
+    /** dom元素标识 */
+    key?: string;
+    /** 导出请求路径 */
+    requestUrl: string;
+    /** 导出列表的筛选查询参数 */
+    queryParams?: Record<string, any>;
+    /** 按钮图标 同choerodon-ui的icon类型 若传icon-xxxx则使用自定义iconfont图标 */
+    icon?: string;
+    /** 按钮文字 */
+    buttonText?: string;
+    /** 导出按钮的其他属性 */
+    otherButtonProps?: Omit<ButtonProps, "icon">;
+}
+declare const ExcelExport: React.FC<IProps>;
+export default ExcelExport;

package/lib/components/ExcelExport/index.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _Icon from "choerodon-ui/lib/icon";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["key", "requestUrl", "queryParams", "icon", "buttonText", "otherButtonProps"];
+/**
+ * @name 批量导出组件
+ * @param {string} key dom元素标识 多作为Table组件的buttons等参数数组中标识符
+ * @param {string} requestUrl 导出请求路径
+ * @param {Record<string, any>} queryParams 导出列表的筛选查询参数
+ * @param {string} icon 按钮图标 同choerodon-ui的icon类型 若传icon-xxxx则使用自定义iconfont图标
+ * @param {string} buttonText 按钮文字
+ * @param {Omit<ButtonProps, "icon">} otherButtonProps 导出按钮的其他属性
+ */
+import React, { useCallback, useMemo } from "react";
+import classNames from "classnames";
+import ExcelExportPro from "components/ExcelExportPro";
+import { ButtonColor } from "choerodon-ui/pro/lib/button/enum";
+import styles from "./index.module.less?modules";
+const ExcelExport = props => {
+  const _props$key = props.key,
+    key = _props$key === void 0 ? "batchExport" : _props$key,
+    requestUrl = props.requestUrl,
+    queryParams = props.queryParams,
+    _props$icon = props.icon,
+    icon = _props$icon === void 0 ? "icon-piliangdaochu" : _props$icon,
+    _props$buttonText = props.buttonText,
+    buttonText = _props$buttonText === void 0 ? "批量导出" : _props$buttonText,
+    otherButtonProps = props.otherButtonProps,
+    args = _objectWithoutProperties(props, _excluded);
+  const isIconfont = useMemo(() => !!icon && icon.startsWith("icon-"), [icon]); // 判断当前icon是否为自定义iconfont图标 若是则使用自定义iconfont图标样式 否则使用choerodon-ui的icon样式
+
+  // 自定义导出按钮样式
+  const ExportBtn = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, isIconfont ? /*#__PURE__*/React.createElement("i", {
+    className: classNames("iconfont", styles.btnIcon, icon)
+  }) : /*#__PURE__*/React.createElement(_Icon, {
+    className: styles.btnIcon,
+    type: icon
+  }), /*#__PURE__*/React.createElement("span", null, buttonText)), [icon, buttonText]);
+  return /*#__PURE__*/React.createElement(ExcelExportPro, _extends({
+    key: key,
+    requestUrl: requestUrl,
+    queryParams: queryParams,
+    otherButtonProps: {
+      className: styles.exportBtn,
+      color: "primary",
+      ...otherButtonProps,
+      icon: ""
+    },
+    modalProps: {
+      className: styles.modalContent,
+      header: /*#__PURE__*/React.createElement("div", {
+        className: styles.modalHeader
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.headerTitle
+      }, buttonText))
+    },
+    buttonText: /*#__PURE__*/React.createElement(ExportBtn, null)
+  }, args));
+};
+export default ExcelExport;