bee-front-components 1.0.0

package/lib/components/Scanner/index.js

@@ -0,0 +1,318 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * @name 扫码工具
+ * @description 用于通过扫码枪或摄像头识别二维码中的相关信息
+ * @param {ScannerMode} mode 扫码识别类型
+ * @param {boolean} enabled 是否启用扫码组件功能
+ * @param {boolean} closeAfterScan 是否在扫码成功后自动关闭摄像头 默认true
+ * @param {number} keyboardInterval 扫码枪单次输入最大间隔，单位ms 默认 50ms
+ * @param {number} minLength 扫码枪最小字符长度 默认为1
+ * @param {string} cameraTitle 摄像头标题
+ * @param {boolean} showScanArea 是否显示扫码框
+ * @param {boolean} continuous 扫码成功后是否允许继续扫描
+ * @param {boolean} showButton 是否显示扫码按钮 仅camera或auto模式有效
+ * @param {string} buttonText 扫码按钮文字
+ * @param {string} scanerTip 扫码提示文字
+ * @param {function} onScan 扫码成功回调
+ * @param {function} onError 扫码异常回调
+ * @param {function} onClose 摄像头关闭回调
+ * @author lichen
+ */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import classNames from "classnames";
+import { BrowserQRCodeReader } from "@zxing/browser";
+import { ButtonColor, FuncType } from "choerodon-ui/pro/lib/button/enum";
+import { ButtonPermission } from "../Buttons";
+import { getDefaultScannerMode } from "./utils/device";
+import { useKeyboardScanner } from "./hooks/useKeyboardScanner";
+import styles from "./index.module.less?modules";
+
+// 扫码识别类型 分别对应不同扫码设备
+export let ScannerMode = /*#__PURE__*/function (ScannerMode) {
+  ScannerMode["auto"] = "auto";
+  ScannerMode["keyboard"] = "keyboard";
+  ScannerMode["camera"] = "camera";
+  return ScannerMode;
+}({});
+
+// 组件入参
+
+// 同一个二维码实例标识
+
+const Scanner = props => {
+  const _props$mode = props.mode,
+    mode = _props$mode === void 0 ? "auto" : _props$mode,
+    _props$enabled = props.enabled,
+    enabled = _props$enabled === void 0 ? true : _props$enabled,
+    _props$closeAfterScan = props.closeAfterScan,
+    closeAfterScan = _props$closeAfterScan === void 0 ? true : _props$closeAfterScan,
+    _props$keyboardInterv = props.keyboardInterval,
+    keyboardInterval = _props$keyboardInterv === void 0 ? 50 : _props$keyboardInterv,
+    _props$minLength = props.minLength,
+    minLength = _props$minLength === void 0 ? 1 : _props$minLength,
+    _props$showButton = props.showButton,
+    showButton = _props$showButton === void 0 ? true : _props$showButton,
+    _props$buttonText = props.buttonText,
+    buttonText = _props$buttonText === void 0 ? "扫一扫" : _props$buttonText,
+    _props$cameraTitle = props.cameraTitle,
+    cameraTitle = _props$cameraTitle === void 0 ? "扫描二维码" : _props$cameraTitle,
+    _props$scanerTip = props.scanerTip,
+    scanerTip = _props$scanerTip === void 0 ? "可通过扫码枪进行扫码录入" : _props$scanerTip,
+    _props$showScanArea = props.showScanArea,
+    showScanArea = _props$showScanArea === void 0 ? true : _props$showScanArea,
+    _props$continuous = props.continuous,
+    continuous = _props$continuous === void 0 ? false : _props$continuous,
+    onScan = props.onScan,
+    onError = props.onError,
+    onClose = props.onClose;
+  const actualMode = useMemo(() => mode === "auto" ? getDefaultScannerMode() : mode, [mode]); // 当前实际应用的扫码方式
+
+  const lastScanRef = useRef(null); // 防抖标识 避免摄像头连续识别同一个二维码，重复触发onScan
+  const videoRef = useRef(null); // 摄像头video DOM实例
+  const readerRef = useRef(null); // ZXing BrowserQRCodeReader扫描器实例
+  const controlsRef = useRef(null); // ZXing解码控制器，用于停止摄像头解码
+
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    cameraOpen = _useState2[0],
+    setCameraOpen = _useState2[1]; // 摄像头是否开启
+  const _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cameraLoading = _useState4[0],
+    setCameraLoading = _useState4[1]; // 摄像头进程是否加载中
+  const _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cameraError = _useState6[0],
+    setCameraError = _useState6[1]; // 当前进程遇到的错误信息提示
+
+  // 释放摄像头资源
+  const releaseCameraResource = useCallback(() => {
+    try {
+      var _controlsRef$current;
+      // 停止ZXing解码器，停止帧循环解析
+      (_controlsRef$current = controlsRef.current) === null || _controlsRef$current === void 0 ? void 0 : _controlsRef$current.stop();
+    } catch {
+      // 停止解码器发生异常，卸载场景无需抛出，静默忽略
+    } finally {
+      // 无论stop是否抛错，强制关闭摄像头媒体流
+      const video = videoRef.current;
+      if (video !== null && video !== void 0 && video.srcObject) {
+        const stream = video.srcObject;
+        stream.getTracks().forEach(track => track.stop());
+        video.srcObject = null;
+      }
+      // 清空实例引用，释放内存
+      controlsRef.current = null;
+      readerRef.current = null;
+    }
+  }, []);
+
+  // 关闭扫码进程
+  const handleCloseCamera = useCallback(() => {
+    releaseCameraResource(); // 释放媒体资源
+    setCameraLoading(false);
+    setCameraOpen(false);
+    if (typeof onClose === "function") {
+      onClose();
+    }
+  }, [releaseCameraResource, onClose]);
+
+  // 统一处理扫码结果
+  const handleScan = useCallback(rawValue => {
+    const value = rawValue === null || rawValue === void 0 ? void 0 : rawValue.trim();
+    if (!value) {
+      return;
+    }
+
+    // 若1秒内重复识别同一个二维码则直接忽略
+    const now = Date.now();
+    if (lastScanRef !== null && lastScanRef !== void 0 && lastScanRef.current) {
+      const currentScanRef = lastScanRef.current;
+      if ((currentScanRef === null || currentScanRef === void 0 ? void 0 : currentScanRef.value) === value && now - (currentScanRef === null || currentScanRef === void 0 ? void 0 : currentScanRef.time) < 1000) {
+        return;
+      }
+    }
+    lastScanRef.current = {
+      value,
+      time: now
+    };
+    if (typeof onScan === "function") {
+      onScan(value);
+    }
+
+    // 摄像头模式下默认扫码成功就关闭
+    if (actualMode === "camera" && closeAfterScan && !continuous) {
+      handleCloseCamera();
+    }
+  }, [actualMode, closeAfterScan, continuous, onScan]);
+
+  // 启动摄像头扫码进程
+  const startCamera = useCallback(async () => {
+    var _navigator, _navigator$mediaDevic, _window;
+    // 总开关关闭则直接退出 不启动摄像头 如果正在 loading，直接返回，防止多次点击重复拉起摄像头
+    if (!enabled || cameraLoading) return;
+
+    // 校验浏览器是否具备媒体设备API，部分老旧浏览器无navigator.mediaDevices
+    if (!((_navigator = navigator) !== null && _navigator !== void 0 && (_navigator$mediaDevic = _navigator.mediaDevices) !== null && _navigator$mediaDevic !== void 0 && _navigator$mediaDevic.getUserMedia)) {
+      const error = new Error("当前浏览器不支持摄像头访问，请使用支持摄像头功能的浏览器。");
+      setCameraError(error.message);
+      onError === null || onError === void 0 ? void 0 : onError(error);
+      return;
+    }
+
+    // 浏览器安全上下文校验 getUserMedia仅允许https和localhost http环境会直接拒绝摄像头权限
+    if (!((_window = window) !== null && _window !== void 0 && _window.isSecureContext)) {
+      const error = new Error("摄像头功能需要HTTPS环境");
+      setCameraError(error.message);
+      onError === null || onError === void 0 ? void 0 : onError(error);
+      return;
+    }
+    // 重置上一次的错误信息，开启loading，打开摄像头弹窗
+    setCameraError("");
+    setCameraLoading(true);
+    setCameraOpen(true);
+  }, [enabled, handleScan, onError]);
+
+  // 监听弹窗打开，DOM渲染完成之后，初始化摄像头
+  useEffect(() => {
+    // 弹窗打开，loading=true，并且video已经挂载
+    const initCamera = async () => {
+      if (!cameraOpen || !cameraLoading || !videoRef.current) return;
+      try {
+        const reader = new BrowserQRCodeReader();
+        readerRef.current = reader;
+        const constraints = {
+          video: {
+            facingMode: {
+              ideal: "environment"
+            },
+            width: {
+              ideal: 1280
+            },
+            height: {
+              ideal: 720
+            }
+          },
+          audio: false
+        };
+        const controls = await (reader === null || reader === void 0 ? void 0 : reader.decodeFromConstraints(constraints, videoRef.current, result => {
+          // result为空 代表当前帧未识别到二维码，直接跳过
+          if (!result) return;
+          // 获取二维码原始文本，交给统一扫码结果处理器
+          const value = result === null || result === void 0 ? void 0 : result.getText();
+          handleScan(value);
+        }));
+        controlsRef.current = controls;
+      } catch (error) {
+        let message = "摄像头启动失败，请检查浏览器摄像头权限。";
+        if (error instanceof DOMException) {
+          switch (error.name) {
+            case "NotAllowedError":
+              message = "摄像头权限被拒绝，请在浏览器设置中允许访问摄像头。";
+              break;
+            case "NotFoundError":
+              message = "未找到可用的摄像头设备。";
+              break;
+            case "NotReadableError":
+              message = "摄像头正在被其他应用占用，请关闭其他使用摄像头的程序后重试。";
+              break;
+            case "SecurityError":
+              message = "浏览器安全策略禁止访问摄像头，请检查 HTTPS 配置。";
+              break;
+            default:
+              message = (error === null || error === void 0 ? void 0 : error.message) || message;
+          }
+        }
+        setCameraError(message);
+        onError === null || onError === void 0 ? void 0 : onError(error instanceof Error ? error : new Error(message));
+      } finally {
+        setCameraLoading(false);
+      }
+    };
+    initCamera();
+  }, [cameraOpen, cameraLoading, handleScan, onError]);
+
+  // 组件卸载时释放摄像头资源
+  useEffect(() => {
+    return () => {
+      releaseCameraResource();
+    };
+  }, [releaseCameraResource]);
+
+  // 根据传入参数的可用状态执行关闭进程操作
+  useEffect(() => {
+    if (!enabled && cameraOpen) {
+      handleCloseCamera();
+    }
+  }, [enabled, cameraOpen, handleCloseCamera]);
+
+  // 调用自定义hook 触发扫码枪扫描逻辑
+  useKeyboardScanner({
+    enabled: enabled && actualMode === "keyboard" && !cameraOpen,
+    minLength,
+    maxInterval: keyboardInterval,
+    onScan: handleScan
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showButton && /*#__PURE__*/React.createElement(React.Fragment, null, actualMode === "camera" ? /*#__PURE__*/React.createElement(ButtonPermission, {
+    icon: "icon-saoyisao",
+    disabled: !enabled,
+    funcType: "raised",
+    onClick: startCamera
+  }, buttonText) : /*#__PURE__*/React.createElement(ButtonPermission, {
+    className: styles.scanTip,
+    funcType: "link",
+    color: "red"
+  }, scanerTip)), actualMode === "camera" && cameraOpen && /*#__PURE__*/React.createElement("div", {
+    className: styles.mask,
+    role: "dialog"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.modal
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.title
+  }, cameraTitle), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.close,
+    onClick: handleCloseCamera
+  }, "\xD7")), /*#__PURE__*/React.createElement("div", {
+    className: styles.camera
+  }, /*#__PURE__*/React.createElement("video", {
+    ref: videoRef,
+    className: styles.video,
+    autoPlay: true,
+    muted: true,
+    playsInline: true
+  }), showScanArea && /*#__PURE__*/React.createElement("div", {
+    className: styles.area
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.corner, styles.topLeft)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.corner, styles.topRight)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.corner, styles.bottomLeft)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.corner, styles.bottomRight)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.line
+  })), cameraLoading && /*#__PURE__*/React.createElement("div", {
+    className: styles.loading
+  }, "\u6B63\u5728\u542F\u52A8\u6444\u50CF\u5934..."), cameraError && /*#__PURE__*/React.createElement("div", {
+    className: styles.error
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.errorText
+  }, cameraError), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.retry,
+    onClick: startCamera
+  }, "\u91CD\u8BD5"))), /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.tip
+  }, "\u8BF7\u5C06\u4E8C\u7EF4\u7801\u653E\u5165\u626B\u63CF\u6846\u5185"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.cancel,
+    onClick: handleCloseCamera
+  }, "\u53D6\u6D88")))));
+};
+export default Scanner;

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

@@ -0,0 +1,264 @@
+// 扫码组件样式
+.scanTip {
+  font-size: @smallFont;
+  color: @errorColor;
+  pointer-events: none;
+}
+/** 遮罩层 */
+.mask {
+  z-index: 9999;
+  .position(fixed, 0, 0, 0, 0);
+  .flex;
+  padding: 0.2rem;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+/** 扫码框弹窗 */
+.modal {
+  position: relative;
+  overflow: hidden;
+  .flex(column, stretch, stretch);
+  width: 7.2rem;
+  max-height: 90vh;
+  border-radius: 0.08rem;
+  background-color: black;
+}
+
+/* =========================
+ * 顶部
+ * ========================= */
+
+.header {
+  .flex(@justify: space-between);
+  height: 0.52rem;
+  flex-shrink: 0;
+  padding: 0 0.16rem;
+  color: @white;
+  background-color: @primaryWord;
+}
+
+.title {
+  font-size: 0.16rem;
+  font-weight: 500;
+}
+
+.close {
+  .flex;
+  width: 0.32rem;
+  height: 0.32rem;
+  line-height: 1;
+  padding: 0;
+  font-size: @hugeFont;
+  border: none;
+  color: @white;
+  background-color: transparent;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+/* =========================
+ * 摄像头
+ * ========================= */
+
+.camera {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: black;
+}
+
+.video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* =========================
+ * 扫描框
+ * ========================= */
+
+.area {
+  .position(absolute, 50%, @left: 50%);
+  width: 60%;
+  max-width: 3.6rem;
+  aspect-ratio: 1;
+  transform: translate(-50%, -50%);
+}
+
+.corner {
+  position: absolute;
+  width: 0.3rem;
+  height: 0.3rem;
+  border-color: @white;
+  border-style: solid;
+}
+
+.topLeft {
+  top: 0;
+  left: 0;
+  border-width: 0.03rem 0 0 0.03rem;
+}
+
+.topRight {
+  top: 0;
+  right: 0;
+  border-width: 0.03rem 0.03rem 0 0;
+}
+
+.bottomLeft {
+  bottom: 0;
+  left: 0;
+  border-width: 0 0 0.03rem 0.03rem;
+}
+
+.bottomRight {
+  right: 0;
+  bottom: 0;
+  border-width: 0 0.03rem 0.03rem 0;
+}
+
+.line {
+  .position(absolute, 0, @left: 0);
+  width: 100%;
+  height: 0.02rem;
+  background: @primaryColor;
+  box-shadow: 0 0 0.08rem rgba(@primaryColor, 0.8);
+  animation: scan 2s linear infinite;
+}
+
+@keyframes scan {
+  0% {
+    top: 0;
+  }
+
+  50% {
+    top: calc(100% - 0.02rem);
+  }
+
+  100% {
+    top: 0;
+  }
+}
+
+/* =========================
+ * Loading
+ * ========================= */
+
+.loading {
+  .position(absolute, 50%, @left: 50%);
+  padding: 0.12rem 0.2rem;
+  color: @white;
+  font-size: @fontSize;
+  border-radius: 0.04rem;
+  background-color: rgba(0, 0, 0, 0.65);
+  transform: translate(-50%, -50%);
+}
+
+/* =========================
+ * 错误
+ * ========================= */
+
+.error {
+  .position(absolute, 50%, @left: 50%);
+  width: 80%;
+  box-sizing: border-box;
+  padding: 0.2rem;
+  border-radius: 0.06rem;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: @white;
+  background-color: rgba(0, 0, 0, 0.82);
+}
+
+.errorText {
+  font-size: @fontSize;
+  line-height: 1.6;
+}
+
+.retry {
+  height: 0.36rem;
+  margin-top: 0.16rem;
+  padding: 0 0.2rem;
+  font-size: @fontSize;
+  color: @white;
+  background-color: @primaryColor;
+  border: none;
+  border-radius: 0.04rem;
+  cursor: pointer;
+  &:hover {
+    background: @hoverPrimaryColor;
+  }
+}
+
+/* =========================
+ * 底部
+ * ========================= */
+
+.footer {
+  .flex(@justify: space-between);
+  gap: 0.16rem;
+  box-sizing: border-box;
+  min-height: 0.64rem;
+  padding: 0.12rem 0.16rem;
+  font-size: @fontSize;
+  color: @white;
+  background-color: @primaryWord;
+}
+
+.tip {
+  color: @lightWord;
+}
+
+.cancel {
+  height: 0.36rem;
+  flex-shrink: 0;
+  padding: 0 0.2rem;
+  border: 0.01rem solid @minorWord;
+  font-size: @fontSize;
+  color: @white;
+  background-color: @labelWord;
+  border-radius: 0.04rem;
+  cursor: pointer;
+  &:hover {
+    background-color: @minorWord;
+  }
+}
+
+/* =========================
+ * Pad
+ * ========================= */
+
+@media (max-width: 7.68rem) {
+  .mask {
+    align-items: stretch;
+    padding: 0;
+  }
+
+  .modal {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border-radius: 0;
+  }
+
+  .camera {
+    flex: 1;
+    aspect-ratio: auto;
+  }
+
+  .area {
+    width: 70%;
+  }
+
+  .footer {
+    padding-bottom: max(
+      0.12rem,
+      env(safe-area-inset-bottom)
+    );
+  }
+}

package/lib/components/Scanner/utils/device.d.ts

@@ -0,0 +1,2 @@
+export declare function isMobileDevice(): boolean;
+export declare function getDefaultScannerMode(): "keyboard" | "camera";

package/lib/components/Scanner/utils/device.js

@@ -0,0 +1,18 @@
+// 判断当前是否为移动端设备
+export function isMobileDevice() {
+  var _navigator, _navigator2, _navigator3;
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  const userAgent = ((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.userAgent) || "";
+
+  // iPadOS 13+ 有可能伪装成 Mac 通过MacIntel来识别
+  const isIPad = /iPad/i.test(userAgent) || ((_navigator2 = navigator) === null || _navigator2 === void 0 ? void 0 : _navigator2.platform) === "MacIntel" && ((_navigator3 = navigator) === null || _navigator3 === void 0 ? void 0 : _navigator3.maxTouchPoints) > 1;
+  const isMobile = /Android|iPhone|iPod|Windows Phone|Mobile/i.test(userAgent);
+  return isIPad || isMobile;
+}
+
+// 获取当前默认使用的扫码类别 keyboard为扫码枪 camera为调用摄像头
+export function getDefaultScannerMode() {
+  return isMobileDevice() ? "camera" : "keyboard";
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @name 状态标签页组件
+ * @param {IStatusTabProps} props 组件属性
+ * @param {string} lookupCode 状态枚举值
+ * @param {string} currentStatus 当前状态
+ * @param {function} onChange 状态切换回调
+ * @author chuzhengyang
+ */
+import React from "react";
+export declare const organizationId: any;
+interface IStatusItem {
+    /** 排序标识 */
+    orderSeq: number;
+    /** 枚举中文表述 */
+    meaning: string;
+    /** 枚举值 */
+    value: string;
+    /** 可用标识 */
+    enabledFlag: number;
+    /** 数量 */
+    count?: number;
+}
+interface IStatusTabProps {
+    /** 状态枚举值，与 statusList 互斥 */
+    lookupCode?: string;
+    /** 直接传入状态列表，与 lookupCode 互斥 */
+    statusList?: IStatusItem[];
+    /** 当前状态 */
+    currentStatus: string;
+    /** 查询数量url */
+    queryCountUrl?: string;
+    /** 状态切换回调 */
+    onChange: (key: string) => void;
+}
+declare const StatusTab: React.FC<IStatusTabProps>;
+export default StatusTab;