bhd-components 0.9.0 → 0.9.2

package/es2017/customerService/screenshotTool.d.ts

@@ -2,6 +2,7 @@
 import "react-image-crop/dist/ReactCrop.css";
 interface data {
     imgBese64: string;
+    screenShotType: number;
     saveScreenshotBese64: (bese64: string) => void;
     cancelScreenshot: () => void;
 }

package/es2017/customerService/screenshotTool.js

@@ -1,29 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
-import React, { useState, forwardRef } from "react";
+import React, { useState, forwardRef, useEffect } from "react";
 import ReactCrop, { centerCrop, makeAspectCrop } from "react-image-crop";
 import { CloseOutlined } from "@ant-design/icons";
 import { CustomDuihao } from "../icons/index";
 import "react-image-crop/dist/ReactCrop.css";
 import styles from "./index.module.less";
 const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
-    let { imgBese64 , saveScreenshotBese64 , cancelScreenshot  } = props;
+    let { imgBese64 , screenShotType , saveScreenshotBese64 , cancelScreenshot  } = props;
     const [crop, setCrop] = useState();
     const [completedCrop, setCompletedCrop] = useState();
     const [aspect, setAspect] = useState(16 / 9);
+    const [devicePixelRatio, setDevicePixelRatio] = useState(1);
+    const [isFirst, setIsFirst] = useState(true);
     const [btnPosition, setBtnPosition] = useState({
         top: 0,
         left: 0
     });
     const [showBtn, setShowBtn] = useState(false);
+    useEffect(()=>{
+        setDevicePixelRatio(screenShotType === 1 ? window.devicePixelRatio || 1 : 1);
+    }, [
+        screenShotType
+    ]);
     function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
         return centerCrop(makeAspectCrop({
-            unit: '%',
+            unit: "%",
             width: 30
         }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
     }
     function onImageLoad(e) {
         if (aspect) {
-            // console.log(aspect,e,'dlvkdfmvlkdfmvdfkl');
+            console.log(aspect, e, "dlvkdfmvlkdfmvdfkl");
             //   const { width, height } = e.currentTarget
             const width = 100;
             const height = 100 * (9 / 16);
@@ -35,17 +42,17 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
     }
     function saveImage() {
         // 创建一个新的canvas元素
-        var canvas = document.createElement('canvas');
-        var context = canvas.getContext('2d');
+        var canvas = document.createElement("canvas");
+        var context = canvas.getContext("2d");
         // 加载要操作的图片
         var image = new Image();
         image.src = imgBese64; // 将'your_image_url'替换为你自己的图片URL
         // 等待图片加载完成后再进行操作
         image.onload = function() {
-            var x = completedCrop.x; // 起始点x坐标
-            var y = completedCrop.y; // 起始点y坐标
-            var width = completedCrop.width; // 需要裁剪的区域宽度
-            var height = completedCrop.height; // 需要裁剪的区域高度
+            var x = parseInt((completedCrop.x * devicePixelRatio).toString()); // 起始点x坐标
+            var y = parseInt((completedCrop.y * devicePixelRatio).toString()); // 起始点y坐标
+            var width = parseInt((completedCrop.width * devicePixelRatio).toString()); // 需要裁剪的区域宽度
+            var height = parseInt((completedCrop.height * devicePixelRatio).toString()); // 需要裁剪的区域高度
             // 设置canvas大小与裁剪区域相同
             canvas.width = width;
             canvas.height = height;
@@ -66,6 +73,8 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
         let y = e.y;
         let h = e.height;
         let w = e.width;
+        // 新方案使用
+        //旧方案改成 let top = y + h + (isFirst ? 21 : 8);
         let top = y + h + 8;
         let left = x + w - 88;
         if (top + 42 > window.innerHeight) {
@@ -76,6 +85,7 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
             left
         });
         setShowBtn(true);
+        setIsFirst(false);
     };
     return /*#__PURE__*/ _jsxs("div", {
         className: styles.screenshot_Modal,
@@ -101,9 +111,7 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
                 minWidth: 100,
                 children: /*#__PURE__*/ _jsx("img", {
                     alt: "Crop me",
-                    style: {
-                        display: 'none'
-                    },
+                    // style={{display:'none'}}
                     src: imgBese64,
                     onLoad: onImageLoad
                 })
@@ -119,8 +127,8 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
                         onClick: cancelScreenshot,
                         children: /*#__PURE__*/ _jsx(CloseOutlined, {
                             style: {
-                                position: 'relative',
-                                top: '1px'
+                                position: "relative",
+                                top: "1px"
                             }
                         })
                     }),

package/es2017/theme/variable.less

@@ -76,6 +76,8 @@
 @Gray-09: #262626;
 @Gray-10: #000000;
 
+
+
 /* 变量色值 */
 
 /* "color-background-layout": {
@@ -143,6 +145,16 @@
 
 @color-background-quinary: @Gray-01;
 
+
+/* 
+"color-background-Mask-Tr": {
+    "value": "{Gray-Tr-06}",
+    "type": "color",
+    "description": "蒙层颜色"
+  },
+*/
+
+@color-background-Mask-Tr:@Gray-Tr-06;
 /* 
   "color-background-primary-base": {
     "value": "{Red-06}",
@@ -246,6 +258,13 @@
     "description": "二级边框色"
   }, */
 @color-border-secondary-Tr: @Gray-Tr-04;
+
+/*  "color-border-tertiary": {
+    "value": "{Gray-01}",
+    "type": "color",
+    "description": "三级边框色"
+  }, */
+@color-border-tertiary:@Gray-01;
 /*   "color-border-primary": {
     "value": "{Red-06}",
     "type": "color",
@@ -525,6 +544,14 @@
     }
 */
 @color-icon-error: @Orange-06;
+/* 
+ "color-icon-base": {
+      "value": "$Blue-06",
+      "type": "color",
+      "description": "图标，一级填充色"
+    }
+*/
+@color-icon-base: @Blue-06;
 /* 
  "color-icon-fill": {
       "value": "$Gray-08",

package/esm/bhdDatePicker/index.d.ts

@@ -9,7 +9,6 @@ interface BhdDatePickerProps {
     [key: string]: any;
     kind: "single" | "range" | "extra";
     useType?: string;
-    label?: React.ReactNode;
     extraItems?: BhdDateExtraPicker[];
     extraReadonly?: boolean;
 }