@pisell/materials 6.0.15 → 6.0.17

package/es/components/dataSourceComponents/fields/Input/WithMode.less

@@ -0,0 +1,96 @@
+/* 扫描线动画 */
+@keyframes scanAnimation {
+  0% {
+    top: calc(50% - 100px);
+  }
+  50% {
+    top: calc(50% + 100px);
+  }
+  100% {
+    top: calc(50% - 100px);
+  }
+}
+
+/* 扫描全屏容器 */
+.pisell-scan-fullscreen {
+  position: fixed ;
+  top: 0 ;
+  left: 0 ;
+  width: 100vw ;
+  height: 100vh ;
+  background-color: #000 ;
+  z-index: 9999 ;
+  overflow: hidden ;
+}
+
+/* 视频元素 */
+.scan-video {
+  width: 100% ;
+  height: 100% ;
+  object-fit: cover ;
+  object-position: center ;
+}
+.pisell-lowcode-input-group-addon{
+    background-color: var(--Primary-600, #7F56D9);
+}
+/* 扫码按钮 */
+.scan-button {
+  color: #722ED1;
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+/* 关闭按钮 - 左上角 */
+.scan-close-left {
+  position: fixed ;
+  top: 15px ;
+  left: 15px ;
+  z-index: 9999 ;
+  font-size: 24px ;
+  color: #fff ;
+  cursor: pointer ;
+  background-color: rgba(255, 255, 255, 0.15) ;
+  width: 40px ;
+  height: 40px ;
+  display: flex ;
+  align-items: center ;
+  justify-content: center ;
+  border-radius: 50% ;
+}
+
+/* 上传按钮 - 右下角 */
+.scan-upload {
+  position: fixed ;
+  right: 20px ;
+  bottom: 30px ;
+  width: 50px ;
+  height: 50px ;
+  display: flex ;
+  align-items: center ;
+  justify-content: center ;
+  z-index: 9999 ;
+  font-size: 24px ;
+  color: #fff ;
+  background-color: rgba(255, 255, 255, 0.15) ;
+  border-radius: 50% ;
+  cursor: pointer ;
+}
+
+/* 隐藏的文件输入框 */
+.scan-file-input {
+  display: none;
+}
+
+/* iconfont通用样式 */
+.scan-icon {
+  font-size: 24px;
+  color: #fff;
+}
+
+/* 扫码按钮的扫码图标 */
+.scan-button-icon {
+  font-size: 24px;
+  color: #722ED1;
+} 

package/es/components/dataSourceComponents/fields/Input/type.d.ts

@@ -4,4 +4,5 @@ import { ModeType } from "../../dataSourceForm/type";
 export interface InputProps extends AntInputProps {
     renderMode: ModeType;
     innerRef: Ref<any>;
+    enableQRScanner?: boolean;
 }

package/es/components/dataSourceComponents/fields/Upload/index.js

@@ -17,7 +17,7 @@ var Upload = withFormItem(UploadWithMode, {
           var _checkFileCount = checkFileCount({
               minCount: props.minCount || 0,
               maxCount: props.maxCount || DEFAULT_MAX_COUNT,
-              valueLength: value.length,
+              valueLength: (value === null || value === void 0 ? void 0 : value.length) || 0,
               multiple: !!props.multiple
             }),
             success = _checkFileCount.success,

package/es/components/dataSourceComponents/fields/index.d.ts

@@ -60,7 +60,7 @@ declare const formFieldMap: {
     FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 };
-declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
+declare const getFieldComponent: (fieldComponent: string) => import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<any> | (import("react").FC<{}> & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;

package/es/components/iconfont/index.d.ts

@@ -2,6 +2,7 @@ import { IconComponentProps } from '@ant-design/icons/es/components/Icon';
 import React from 'react';
 interface IconFontProps extends IconComponentProps {
     type: string;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
 }
 declare const IconFont: React.FC<IconFontProps>;
 export default IconFont;

package/es/components/iconfont/index.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { createFromIconfontCN } from '@ant-design/icons';
 import React from 'react';
 var MyIcon = createFromIconfontCN({
-  scriptUrl: 'https://static.pisellcdn.com/pisell2/iconfont_1.0.js' // 在 iconfont.cn 上生成
+  scriptUrl: 'https://static.pisellcdn.com/pisell2iconfont1.3.js' // 在 iconfont.cn 上生成
 });
 
 var IconFont = function IconFont(props) {

package/es/components/table/Table/utils.d.ts

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
+}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

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

@@ -5,7 +5,7 @@ export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
     showTotal: (total: number, range: [number, number]) => string;
-    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
     responsive: boolean;
     size: string;
 };

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.js

@@ -113,33 +113,35 @@ var useTableProps = (props) => {
     });
     openDrawer(item);
   });
-  const handleDelete = (0, import_ahooks.useMemoizedFn)(async (record, softDelete) => {
-    try {
-      registerValueVariable == null ? void 0 : registerValueVariable(componentId, {
-        currentRecord: { ...record }
-      });
-      setTimeout(async () => {
-        if (softDelete) {
-          const deleteTime = (0, import_dayjs.default)().format("YYYY-MM-DD HH:mm:ss");
-          await (update == null ? void 0 : update.runAsync({
-            ...record,
-            deleted_at: deleteTime
-          }));
-        } else {
-          await (destroy == null ? void 0 : destroy.runAsync(record.id));
-        }
-        refreshData();
+  const handleDelete = (0, import_ahooks.useMemoizedFn)(
+    async (record, softDelete) => {
+      try {
+        registerValueVariable == null ? void 0 : registerValueVariable(componentId, {
+          currentRecord: { ...record }
+        });
+        setTimeout(async () => {
+          if (softDelete) {
+            const deleteTime = (0, import_dayjs.default)().format("YYYY-MM-DD HH:mm:ss");
+            await (update == null ? void 0 : update.runAsync({
+              ...record,
+              deleted_at: deleteTime
+            }));
+          } else {
+            await (destroy == null ? void 0 : destroy.runAsync(record.id));
+          }
+          refreshData();
+          (0, import_pisellToast.default)({
+            content: (0, import_locales.getText)("pisell-action-delete-success")
+          });
+        });
+      } catch (error) {
+        console.error(error);
         (0, import_pisellToast.default)({
-          content: (0, import_locales.getText)("pisell-action-delete-success")
+          content: (0, import_locales.getText)("pisell-action-delete-failed")
         });
-      });
-    } catch (error) {
-      console.error(error);
-      (0, import_pisellToast.default)({
-        content: (0, import_locales.getText)("pisell-action-delete-failed")
-      });
+      }
     }
-  });
+  );
   const actionsColumns = (0, import_react.useMemo)(() => {
     if (!show) {
       return [];
@@ -189,8 +191,11 @@ var useTableProps = (props) => {
                 onClick: handleClick,
                 type: type === "link" ? "link" : "default",
                 style: type === "link" ? {
-                  padding: "0"
-                } : {}
+                  padding: "0",
+                  height: "auto"
+                } : {
+                  height: "auto"
+                }
               },
               label
             );

package/lib/components/dataSourceComponents/fields/Input/WithMode.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { InputProps } from './type';
+import './WithMode.less';
 declare const InputWithMode: React.FC<InputProps & import("../../dataSourceForm/utils").WithModeProps>;
 export default InputWithMode;

package/lib/components/dataSourceComponents/fields/Input/WithMode.js

@@ -34,10 +34,392 @@ __export(WithMode_exports, {
 module.exports = __toCommonJS(WithMode_exports);
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
+var import_library = require("@zxing/library");
+var import_iconfont = __toESM(require("./../../../../components/iconfont"));
 var import_ReadPretty = __toESM(require("./ReadPretty"));
 var import_utils = require("../../dataSourceForm/utils");
+var import_WithMode = require("./WithMode.less");
 var Input = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { ...props, ref: props.innerRef || void 0 });
+  const { enableQRScanner, value: propValue, onChange, ...restProps } = props;
+  const [inputValue, setInputValue] = (0, import_react.useState)(propValue || "");
+  (0, import_react.useEffect)(() => {
+    if (propValue !== void 0 && propValue !== inputValue) {
+      setInputValue(propValue);
+    }
+  }, [propValue]);
+  const [scanVisible, setScanVisible] = (0, import_react.useState)(false);
+  const [uploading, setUploading] = (0, import_react.useState)(false);
+  const videoRef = (0, import_react.useRef)(null);
+  const fileInputRef = (0, import_react.useRef)(null);
+  const codeReaderRef = (0, import_react.useRef)(null);
+  const setValue = (value) => {
+    console.log("设置输入框值:", value);
+    setInputValue(value);
+    if (typeof onChange === "function") {
+      try {
+        const syntheticEvent = {
+          target: { value },
+          currentTarget: { value },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          }
+        };
+        onChange(syntheticEvent);
+      } catch (err) {
+        console.error("调用onChange失败:", err);
+      }
+    }
+  };
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  };
+  const handleScanClick = () => {
+    setScanVisible(true);
+  };
+  const handleScanClose = () => {
+    var _a;
+    setScanVisible(false);
+    (_a = codeReaderRef.current) == null ? void 0 : _a.reset();
+    if (videoRef.current && videoRef.current.srcObject) {
+      const stream = videoRef.current.srcObject;
+      const tracks = stream.getTracks();
+      tracks.forEach((track) => {
+        track.stop();
+      });
+      videoRef.current.srcObject = null;
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    return () => {
+      var _a;
+      (_a = codeReaderRef.current) == null ? void 0 : _a.reset();
+    };
+  }, []);
+  const handleUploadClick = () => {
+    var _a;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleFileChange = async (event) => {
+    const files = event.target.files;
+    if (!files || files.length === 0)
+      return;
+    setUploading(true);
+    try {
+      const file = files[0];
+      if (!file.type.startsWith("image/")) {
+        import_antd.message.error("请上传图片文件");
+        setUploading(false);
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        if (!e.target || !e.target.result)
+          return;
+        try {
+          const img = document.createElement("img");
+          img.style.position = "absolute";
+          img.style.top = "-9999px";
+          img.style.left = "-9999px";
+          const canvas = document.createElement("canvas");
+          canvas.style.position = "absolute";
+          canvas.style.top = "-9999px";
+          canvas.style.left = "-9999px";
+          document.body.appendChild(img);
+          document.body.appendChild(canvas);
+          await new Promise((resolve, reject) => {
+            var _a;
+            img.onload = resolve;
+            img.onerror = reject;
+            img.src = ((_a = e.target) == null ? void 0 : _a.result) || "";
+          });
+          try {
+            const hints = /* @__PURE__ */ new Map();
+            hints.set(2, true);
+            if (!codeReaderRef.current) {
+              codeReaderRef.current = new import_library.BrowserMultiFormatReader(hints, 500);
+            }
+            let result;
+            try {
+              result = await codeReaderRef.current.decodeFromImageElement(img);
+            } catch (directError) {
+              console.log("直接解码失败，尝试预处理图像...");
+              const width = img.naturalWidth || img.width;
+              const height = img.naturalHeight || img.height;
+              canvas.width = width;
+              canvas.height = height;
+              const ctx = canvas.getContext("2d");
+              if (!ctx)
+                throw new Error("无法创建Canvas上下文");
+              ctx.drawImage(img, 0, 0, width, height);
+              const imageData = ctx.getImageData(0, 0, width, height);
+              const data = imageData.data;
+              for (let i = 0; i < data.length; i += 4) {
+                data[i] = data[i] < 128 ? 0 : 255;
+                data[i + 1] = data[i + 1] < 128 ? 0 : 255;
+                data[i + 2] = data[i + 2] < 128 ? 0 : 255;
+              }
+              ctx.putImageData(imageData, 0, 0);
+              try {
+                const dataUrl = canvas.toDataURL("image/png");
+                const canvasImg = document.createElement("img");
+                document.body.appendChild(canvasImg);
+                await new Promise((resolve, reject) => {
+                  canvasImg.onload = resolve;
+                  canvasImg.onerror = reject;
+                  canvasImg.src = dataUrl;
+                });
+                result = await codeReaderRef.current.decodeFromImageElement(canvasImg);
+                document.body.removeChild(canvasImg);
+              } catch (canvasError) {
+                console.log("Canvas增强解码失败，尝试最后方法...");
+                const newImg = document.createElement("img");
+                document.body.appendChild(newImg);
+                await new Promise((resolve, reject) => {
+                  newImg.onload = resolve;
+                  newImg.onerror = reject;
+                  newImg.src = canvas.toDataURL("image/png");
+                });
+                result = await codeReaderRef.current.decodeFromImageElement(newImg);
+                document.body.removeChild(newImg);
+              }
+            }
+            if (result && result.getText) {
+              const text = result.getText();
+              setValue(text);
+              handleScanClose();
+            } else {
+              throw new Error("未能获取有效的二维码文本");
+            }
+          } catch (decodeError) {
+            console.error("二维码识别失败", decodeError);
+            import_antd.message.error("无法识别二维码，请上传清晰的二维码图片");
+          } finally {
+            if (document.body.contains(img)) {
+              document.body.removeChild(img);
+            }
+            if (document.body.contains(canvas)) {
+              document.body.removeChild(canvas);
+            }
+          }
+        } catch (imgError) {
+          console.error("图片加载失败", imgError);
+          import_antd.message.error("图片加载失败");
+        } finally {
+          setUploading(false);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+        }
+      };
+      reader.onerror = () => {
+        import_antd.message.error("读取文件失败");
+        setUploading(false);
+      };
+      reader.readAsDataURL(file);
+    } catch (error) {
+      console.error("处理图片出错", error);
+      setUploading(false);
+      import_antd.message.error("处理图片时出错");
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (scanVisible && videoRef.current) {
+      initCamera();
+    }
+  }, [scanVisible]);
+  const initCamera = async () => {
+    try {
+      if (codeReaderRef.current) {
+        try {
+          codeReaderRef.current.reset();
+        } catch (err) {
+          console.log("重置之前的实例出错", err);
+        }
+      }
+      codeReaderRef.current = new import_library.BrowserMultiFormatReader(void 0, 100);
+      console.log("创建二维码阅读器实例成功");
+      const constraints = {
+        video: {
+          facingMode: "environment"
+        }
+      };
+      console.log("正在请求摄像头权限...");
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      console.log("获取摄像头流成功");
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        await new Promise((resolve) => {
+          if (!videoRef.current) {
+            resolve();
+            return;
+          }
+          videoRef.current.onloadedmetadata = () => {
+            if (!videoRef.current)
+              return;
+            console.log("视频元数据加载完成");
+            videoRef.current.play().then(() => {
+              console.log("视频开始播放成功");
+              resolve();
+            }).catch((err) => {
+              console.error("视频播放失败", err);
+              import_antd.message.error("摄像头播放失败");
+              resolve();
+            });
+          };
+          setTimeout(resolve, 3e3);
+        });
+        console.log("准备开始扫描...");
+        if (codeReaderRef.current && videoRef.current) {
+          try {
+            codeReaderRef.current.decodeFromVideoDevice(
+              null,
+              videoRef.current,
+              (result, error) => {
+                if (result) {
+                  const text = result.getText();
+                  console.log("扫描成功:", text);
+                  try {
+                    setValue(text);
+                    setTimeout(() => handleScanClose(), 500);
+                  } catch (e) {
+                    console.error("设置值出错", e);
+                    handleScanClose();
+                  }
+                }
+              }
+            );
+            console.log("扫描器初始化完成，等待二维码...");
+          } catch (e) {
+            console.error("初始化扫描器失败", e);
+            import_antd.message.error("初始化二维码扫描失败");
+            handleScanClose();
+          }
+        }
+      } else {
+        throw new Error("视频元素不存在");
+      }
+    } catch (err) {
+      console.error("摄像头初始化错误", err);
+      import_antd.message.error("无法启动摄像头，请确保已授权");
+      handleScanClose();
+    }
+  };
+  const scanSuffix = enableQRScanner ? /* @__PURE__ */ import_react.default.createElement(
+    import_iconfont.default,
+    {
+      type: "pisell2-scan2",
+      className: "scan-button-icon",
+      style: { fontSize: 24, color: "#fff", cursor: "pointer" },
+      onClick: handleScanClick
+    }
+  ) : null;
+  const fullscreenStyle = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+    backgroundColor: "#000",
+    zIndex: 9999,
+    overflow: "hidden",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  };
+  const videoContainerStyle = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  };
+  const videoStyle = {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  };
+  const closeButtonStyle = {
+    position: "fixed",
+    top: 20,
+    left: 20,
+    zIndex: 9999,
+    fontSize: 24,
+    color: "#fff",
+    cursor: "pointer",
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+    width: 44,
+    height: 44,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%"
+  };
+  const uploadButtonStyle = {
+    position: "fixed",
+    right: 30,
+    bottom: 60,
+    width: 88,
+    height: 88,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    fontSize: 48,
+    color: "#fff",
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+    borderRadius: "50%",
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      ...restProps,
+      ref: props.innerRef || void 0,
+      addonAfter: scanSuffix,
+      value: inputValue,
+      onChange: handleInputChange
+    }
+  ), scanVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-scan-fullscreen", style: fullscreenStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: videoContainerStyle }, /* @__PURE__ */ import_react.default.createElement(
+    "video",
+    {
+      ref: videoRef,
+      className: "scan-video",
+      style: videoStyle,
+      autoPlay: true,
+      playsInline: true,
+      muted: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(
+    import_iconfont.default,
+    {
+      type: "pisell2-arrow-left",
+      className: "scan-close-left",
+      style: closeButtonStyle,
+      onClick: handleScanClose
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_iconfont.default,
+    {
+      type: "pisell2-image-01",
+      className: "scan-upload",
+      style: uploadButtonStyle,
+      onClick: handleUploadClick
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      type: "file",
+      ref: fileInputRef,
+      onChange: handleFileChange,
+      accept: "image/*",
+      className: "scan-file-input",
+      style: { display: "none" }
+    }
+  )));
 };
 var InputWithMode = (0, import_utils.withMode)(Input, import_ReadPretty.default);
 var WithMode_default = InputWithMode;