bee-front-components 1.0.0

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

@@ -0,0 +1,61 @@
+// 批量导出组件相关样式
+.exportBtn {
+  .flex;
+  gap: 0.04rem;
+  transition: none;
+  .btnIcon {
+    font-size: @fontSize;
+  }
+}
+
+// 导出弹窗头部样式
+.modalHeader {
+  position: relative;
+  width: 100%;
+  .headerTitle {
+    width: 100%;
+    font-size: @fontSize18;
+    // 遮挡标题底部空白区域
+    &::before {
+      z-index: 5;
+      .position(absolute, unset, -0.16rem, -0.15rem, -0.16rem);
+      content: "";
+      height: 0.15rem; // 标题的下内边距为0.16rem 需要去掉分割线的0.01rem的高度空间
+      background-color: @white;
+    }
+    // 标题底部分割线
+    &::after {
+      .position(absolute, unset, -0.16rem, -0.16rem, -0.16rem);
+      content: "";
+      height: 0.01rem;
+      background-color: @borderColor;
+    }
+  }
+}
+
+.modalContent {
+  width: 5.2rem;
+  :global {
+    .c7n-pro-modal-content.c7n-pro-modal-content {
+      .c7n-pro-modal-body.c7n-pro-modal-body {
+        padding: 0 0.16rem;
+        .c7n-card.c7n-card {
+          margin: 0;
+          .c7n-card-head,
+          .c7n-card-body {
+            margin: 0;
+          }
+        }
+      }
+      .c7n-pro-modal-footer.c7n-pro-modal-footer {
+        border-top: 0.01rem solid @borderColor;
+      }
+    }
+  }
+}
+
+.cancelBtn,
+.okBtn {
+  .flex;
+  flex: 1;
+}

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="trusted-types" />
+/// <reference types="prop-types" />
+import type { ModalProps } from "choerodon-ui/pro/lib/modal/Modal";
+interface IConfig extends ModalProps {
+    /** 弹窗宽度 */
+    width?: number | string;
+    /** 标题位置 */
+    titlePosition?: "top" | "center";
+    /** 是否显示icon图标 */
+    iconVisible?: boolean;
+    /** icon图标类别名称 icon-xxx */
+    iconName?: string;
+    /** icon图标自定义样式类名 */
+    iconClass?: string;
+    /** 主体区域内容 */
+    content?: React.ReactNode;
+}
+declare const Modal: {
+    open: (e?: IConfig) => void;
+    confirm: (e?: Omit<IConfig, "header">) => void;
+    error: (e?: Omit<IConfig, "header">) => void;
+    warning: (e?: Omit<IConfig, "header">) => void;
+};
+export { Modal };

package/lib/components/Modal/index.js

@@ -0,0 +1,191 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _Modal from "@hzero-front-ui/c7n-ui/lib/ModalPro";
+import React from "react";
+/**
+ * @name 通用Modal组件
+ * @description 基于 choerodon-ui/pro Modal组件二次封装 应用于不同场景的样式呈现
+ * @author lichen
+ */
+import classNames from "classnames";
+import { ButtonColor, FuncType } from "choerodon-ui/pro/lib/button/enum";
+import styles from "./index.module.less?modules";
+
+// 页脚区域参数
+
+// 头部区域参数
+
+// 弹窗对外暴露函数入参
+
+// 公共配置项
+const COMMON_CONFIG = {
+  width: "6rem",
+  autoCenter: true,
+  okText: "确定",
+  cancelText: "取消",
+  closable: true,
+  maskClosable: false,
+  okProps: {
+    className: styles.okBtn,
+    color: "primary",
+    funcType: "raised"
+  },
+  cancelProps: {
+    className: styles.cancelBtn,
+    color: "default",
+    funcType: "raised"
+  }
+};
+
+// 自定义头部样式
+const ModalHeader = e => /*#__PURE__*/React.createElement("div", {
+  className: styles.modalHeader
+}, (e === null || e === void 0 ? void 0 : e.titlePosition) === "top" && /*#__PURE__*/React.createElement("div", {
+  className: styles.headerTitle
+}, e === null || e === void 0 ? void 0 : e.title), !!(e !== null && e !== void 0 && e.closable) && /*#__PURE__*/React.createElement("div", {
+  className: styles.closeIcon
+}, e === null || e === void 0 ? void 0 : e.closeBtn));
+
+// 自定义主体区域内容样式
+const ModalContent = e => /*#__PURE__*/React.createElement("div", {
+  className: classNames(styles.modalContent, {
+    [styles.contentHasTitle]: (e === null || e === void 0 ? void 0 : e.titlePosition) === "center"
+  })
+}, (e === null || e === void 0 ? void 0 : e.iconVisible) && /*#__PURE__*/React.createElement("i", {
+  className: classNames("iconfont", e === null || e === void 0 ? void 0 : e.iconName, styles.icon, e === null || e === void 0 ? void 0 : e.iconClass)
+}), (e === null || e === void 0 ? void 0 : e.titlePosition) === "center" && (e === null || e === void 0 ? void 0 : e.title) && /*#__PURE__*/React.createElement("div", {
+  className: styles.title
+}, e.title), (e === null || e === void 0 ? void 0 : e.content) && /*#__PURE__*/React.createElement("div", {
+  className: styles.content
+}, e.content));
+
+// 自定义页脚区域内容样式
+const ModalFooter = e => {
+  const okButton = e === null || e === void 0 ? void 0 : e.okButton,
+    cancelButton = e === null || e === void 0 ? void 0 : e.cancelButton;
+  if (okButton === false && cancelButton === false) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.modalFooter
+  }, cancelButton !== false && (e === null || e === void 0 ? void 0 : e.cancelBtn), okButton !== false && (e === null || e === void 0 ? void 0 : e.okBtn));
+};
+
+// 判断非未定义字段即显示某元素 node --- 需要判断的元素 defNode --- 判断元素不符合条件时展示的默认元素
+function checkNodeNotUndefined(node, defNode) {
+  if (node !== undefined) {
+    return node;
+  }
+  return defNode;
+}
+
+// 合并弹窗配置属性
+function mergeModalConfig(e) {
+  const style = {
+    width: (e === null || e === void 0 ? void 0 : e.width) || COMMON_CONFIG.width
+  };
+  const config = {
+    ...COMMON_CONFIG,
+    ...e,
+    style: {
+      ...style,
+      ...(e === null || e === void 0 ? void 0 : e.style)
+    }
+  };
+  return config;
+}
+
+// 自定义弹窗对象
+const Modal = {
+  // 普通打开函数
+  open: e => {
+    const mergeConfig = mergeModalConfig({
+      titlePosition: "top",
+      ...e
+    });
+    _Modal.open({
+      header: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.header, (mergeConfig === null || mergeConfig === void 0 ? void 0 : mergeConfig.titlePosition) === "top" ? (title, closeBtn) => /*#__PURE__*/React.createElement(ModalHeader, _extends({
+        title: title,
+        closeBtn: closeBtn
+      }, mergeConfig)) : null),
+      children: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.children, /*#__PURE__*/React.createElement(ModalContent, mergeConfig)),
+      footer: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.footer, (okBtn, cancelBtn) => /*#__PURE__*/React.createElement(ModalFooter, _extends({
+        okBtn: okBtn,
+        cancelBtn: cancelBtn
+      }, mergeConfig))),
+      ...mergeConfig
+    });
+  },
+  // 通用确认函数
+  confirm: e => {
+    const mergeConfig = mergeModalConfig({
+      width: "4.8rem",
+      ...e
+    });
+    _Modal.open({
+      header: (_title, closeBtn) => /*#__PURE__*/React.createElement(ModalHeader, _extends({
+        closeBtn: closeBtn
+      }, mergeConfig)),
+      children: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.children, /*#__PURE__*/React.createElement(ModalContent, _extends({
+        iconVisible: true,
+        iconName: "icon-jingshi"
+      }, mergeConfig, {
+        titlePosition: "center",
+        iconClass: styles.confirmIcon
+      }))),
+      footer: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.footer, (okBtn, cancelBtn) => /*#__PURE__*/React.createElement(ModalFooter, _extends({
+        okBtn: okBtn,
+        cancelBtn: cancelBtn
+      }, mergeConfig))),
+      ...mergeConfig
+    });
+  },
+  // 通用错误提示函数
+  error: e => {
+    const mergeConfig = mergeModalConfig({
+      width: "4.8rem",
+      ...e
+    });
+    _Modal.open({
+      header: (_title, closeBtn) => /*#__PURE__*/React.createElement(ModalHeader, _extends({
+        closeBtn: closeBtn
+      }, mergeConfig)),
+      children: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.children, /*#__PURE__*/React.createElement(ModalContent, _extends({
+        iconVisible: true,
+        iconName: "icon-shibai"
+      }, mergeConfig, {
+        titlePosition: "center",
+        iconClass: styles.errorIcon
+      }))),
+      footer: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.footer, (okBtn, cancelBtn) => /*#__PURE__*/React.createElement(ModalFooter, _extends({
+        okBtn: okBtn,
+        cancelBtn: cancelBtn
+      }, mergeConfig))),
+      ...mergeConfig
+    });
+  },
+  // 通用告警函数
+  warning: e => {
+    const mergeConfig = mergeModalConfig({
+      width: "4.8rem",
+      ...e
+    });
+    _Modal.open({
+      header: (_title, closeBtn) => /*#__PURE__*/React.createElement(ModalHeader, _extends({
+        closeBtn: closeBtn
+      }, mergeConfig)),
+      children: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.children, /*#__PURE__*/React.createElement(ModalContent, _extends({
+        iconVisible: true,
+        iconName: "icon-jingshi"
+      }, mergeConfig, {
+        titlePosition: "center",
+        iconClass: styles.warningIcon
+      }))),
+      footer: checkNodeNotUndefined(e === null || e === void 0 ? void 0 : e.footer, (okBtn, cancelBtn) => /*#__PURE__*/React.createElement(ModalFooter, _extends({
+        okBtn: okBtn,
+        cancelBtn: cancelBtn
+      }, mergeConfig))),
+      ...mergeConfig
+    });
+  }
+};
+export { Modal };

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

@@ -0,0 +1,79 @@
+// Modal弹窗通用样式
+.modalHeader {
+  position: relative;
+  width: 100%;
+  .headerTitle {
+    .flex;
+    width: 100%;
+    font-size: @fontSize20;
+    // 遮挡标题底部空白区域
+    &::before {
+      z-index: 5;
+      .position(absolute, unset, -0.16rem, -0.15rem, -0.16rem);
+      content: "";
+      height: 0.15rem; // 标题的下内边距为0.16rem 需要去掉分割线的0.01rem的高度空间
+      background-color: @white;
+    }
+    // 标题底部分割线
+    &::after {
+      .position(absolute, unset, -0.16rem, -0.16rem, -0.16rem);
+      content: "";
+      height: 0.01rem;
+      background-color: @borderColor;
+    }
+  }
+  .closeIcon {
+    .position(absolute, 0, 0);
+    :global {
+      .c7n-pro-modal-header-button {
+        width: auto;
+      }
+      .icon-close {
+        font-size: @mediumFont;
+        color: @minorWord;
+      }
+    }
+  }
+}
+
+.modalContent {
+  width: 100%;
+  padding: 0 0.16rem;
+  &.contentHasTitle {
+    .flex(column, flex-start);
+    gap: 0.24rem;
+  }
+  .content {
+    width: 100%;
+  }
+  .icon {
+    line-height: normal;
+    font-size: @superHugeFont;
+    &.confirmIcon {
+      color: @primaryColor;
+    }
+    &.errorIcon {
+      color: @errorColor;
+    }
+    &.warningIcon {
+      color: @warnColor;
+    }
+  }
+
+  .title {
+    font-size: @fontSize20;
+    font-weight: 500;
+  }
+}
+
+.modalFooter {
+  .flex(@justify: space-between);
+  width: 100%;
+  padding: 0.08rem 0.16rem 0.16rem;
+  gap: 0.14rem;
+  .cancelBtn,
+  .okBtn {
+    .flex;
+    flex: 1;
+  }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * @name HeaderContainer - 页面通用头部容器
+ * @description 支持左侧返回按钮、居中标题、右侧自定义内容区域，适用于列表/表单等页面的统一头部布局。
+ * @param {string} title 标题
+ * @param {boolean} backVisible 是否显示返回按钮
+ * @param {string} backPath 返回目标页面路径
+ * @param {string} backTitle 返回目标页面页签标题
+ * @param {ReactNode} leftChildren 左侧区域自定义内容
+ * @param {ReactNode} leftChildren 右侧区域自定义内容
+ * @param {function} onBack 自定义返回函数
+ * @param {function} backCallback 执行默认返回操作之后的其他回调操作函数
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   title="委托报告"
+ *   onClose={() => refreshTab()}
+ *   rightChildren={<Button>导出</Button>}
+ * />
+ * ```
+ */
+import React from "react";
+interface IPageHeaderProps {
+    /** 标题 */
+    title?: string;
+    /** 是否显示返回按钮 */
+    backVisible?: boolean;
+    /** 是否刷新当前标签页 */
+    isBackRefresh?: boolean;
+    /** 返回按钮路径 */
+    backPath?: string;
+    /** 返回按钮路径 */
+    backTitle?: string;
+    /** 左侧区域自定义内容 */
+    leftChildren?: React.ReactNode;
+    /** 右侧区域自定义内容 */
+    rightChildren?: React.ReactNode;
+    /** 自定义返回函数 */
+    onBack?: () => void;
+    /** 执行默认返回操作之后的其他回调操作函数 */
+    backCallback?: () => void;
+}
+declare const PageHeader: React.FC<IPageHeaderProps>;
+export default PageHeader;

package/lib/components/PageHeader/index.js

@@ -0,0 +1,72 @@
+/**
+ * @name HeaderContainer - 页面通用头部容器
+ * @description 支持左侧返回按钮、居中标题、右侧自定义内容区域，适用于列表/表单等页面的统一头部布局。
+ * @param {string} title 标题
+ * @param {boolean} backVisible 是否显示返回按钮
+ * @param {string} backPath 返回目标页面路径
+ * @param {string} backTitle 返回目标页面页签标题
+ * @param {ReactNode} leftChildren 左侧区域自定义内容
+ * @param {ReactNode} leftChildren 右侧区域自定义内容
+ * @param {function} onBack 自定义返回函数
+ * @param {function} backCallback 执行默认返回操作之后的其他回调操作函数
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   title="委托报告"
+ *   onClose={() => refreshTab()}
+ *   rightChildren={<Button>导出</Button>}
+ * />
+ * ```
+ */
+import React from "react";
+import { FuncType } from "choerodon-ui/pro/lib/button/enum";
+import { backTab } from "../../utils/menuTab";
+import { Button } from "../Buttons";
+import styles from "./index.module.less?modules";
+const PageHeader = props => {
+  const title = props.title,
+    _props$backVisible = props.backVisible,
+    backVisible = _props$backVisible === void 0 ? true : _props$backVisible,
+    _props$isBackRefresh = props.isBackRefresh,
+    isBackRefresh = _props$isBackRefresh === void 0 ? false : _props$isBackRefresh,
+    backPath = props.backPath,
+    backTitle = props.backTitle,
+    leftChildren = props.leftChildren,
+    rightChildren = props.rightChildren,
+    onBack = props.onBack,
+    backCallback = props.backCallback;
+
+  // 点击返回按钮
+  function handleBack() {
+    // 先判断是否有自定义返回操作
+    if (typeof onBack === "function") {
+      onBack();
+      return;
+    }
+    // 执行默认返回操作 关闭当前标签页
+    backTab(backPath ? {
+      title: backTitle || "",
+      path: backPath,
+      isRefresh: isBackRefresh
+    } : undefined);
+    if (typeof backCallback === "function") {
+      backCallback();
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.headerLeft
+  }, backVisible && /*#__PURE__*/React.createElement(Button, {
+    icon: "icon-fanhui",
+    funcType: "raised",
+    onClick: handleBack
+  }, "\u8FD4\u56DE"), leftChildren), /*#__PURE__*/React.createElement("div", {
+    className: styles.titleContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: styles.headerRight
+  }, rightChildren));
+};
+export default PageHeader;

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

@@ -0,0 +1,38 @@
+.header {
+  position: relative;
+  height: 0.68rem;
+  padding: 0 0.24rem;
+  border-bottom: 0.01rem solid @borderColor;
+  .flex(@justify: space-between, @wrap: nowrap);
+  .backBtnContent {
+    .flex(@align: center, @wrap: nowrap);
+    .backIcon {
+      width: 0.24rem;
+      height: 0.24rem;
+      margin-right: 0.08rem;
+    }
+  }
+  .titleContainer {
+    padding: 0.08rem 0.2rem;
+    border-radius: 0.08rem;
+    width: 5.2rem;
+    overflow: hidden;
+    text-align: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%); /* 精准水平居中 */
+    .title {
+      font-size: 0.24rem;
+      font-weight: 500;
+      color: @primaryWord;
+      line-height: 0.24rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .headerLeft,
+  .headerRight {
+    .flex(@align: center, @wrap: nowrap);
+  }
+}

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

@@ -0,0 +1,49 @@
+/**
+ * @name PdfViewer 轻量 PDF 预览组件（基于 pdfjs-dist）
+ * @description
+ * - 多实例：每个实例独立 getDocument，各自拥有独立 worker，可左右分屏对比多份文档
+ * - 懒加载：IntersectionObserver 仅渲染可视区页面（可提前 rootMargin 预渲染），滚动顺滑
+ * - 文档级 LRU 缓存：同批次/委托单多份文档来回切换时秒开，LRU 上限避免 90+ 份大单场景内存爆炸
+ * - 联动：暴露 scrollToPage / onVisiblePageChange，可做多实例同步滚动
+ * - 缩放：右下角工具栏按钮（缩放/比例显示），或 Ctrl/Cmd + 滚轮 / 双指捏合（替代浏览器默认缩放），按锚点保持缩放前后内容位置
+ * - 定位：url 携带 #page=N 片段（如 xxx.pdf#page=3）时，文档加载完成后自动滚动到对应页
+ *
+ * @note worker 部署
+ * pdf.js 解析运行在 Web Worker 中，需要加载 pdf.worker.min.js：
+ * 请将 node_modules/pdfjs-dist/build/pdf.worker.min.js 复制到应用静态根目录（dist/），
+ * 或通过 <PdfViewer workerSrc="..." /> 指定可访问地址。
+ * 若 worker 加载失败，pdf.js 会自动降级为 fake worker（主线程解析），功能可用但会阻塞 UI。
+ */
+import React from "react";
+export declare function configurePdfWorker(src: string): void;
+export interface PdfViewerProps {
+    /** PDF 文件地址 */
+    url: string | undefined;
+    /** pdf.js worker 地址，默认同源 /pdf.worker.min.js */
+    workerSrc?: string;
+    /** 初始缩放（物理像素倍率），默认 1；挂载后由 Ctrl/Cmd+滚轮 / 双指捏合接管 */
+    scale?: number;
+    /** 滚动容器高度，默认 100% */
+    height?: number | string;
+    /** 页面间距，默认 8 */
+    gap?: number;
+    /** 是否懒加载（仅渲染可视页），默认 true */
+    lazy?: boolean;
+    /** 文档加载完成回调 */
+    onLoad?: (doc: any) => void;
+    /** 文档加载失败回调 */
+    onError?: (err: any) => void;
+    /** 当前可见页变化回调（用于多实例联动/同步滚动） */
+    onVisiblePageChange?: (pageNum: number) => void;
+    className?: string;
+}
+export interface PdfViewerRef {
+    /** 滚动到指定页（1 起） */
+    scrollToPage: (pageNum: number) => void;
+    /** 当前可见页（1 起） */
+    getCurrentPage: () => number;
+    /** 内部 PDFDocumentProxy */
+    getDocument: () => any;
+}
+declare const PdfViewer: React.ForwardRefExoticComponent<PdfViewerProps & React.RefAttributes<PdfViewerRef>>;
+export default PdfViewer;