bhd-components 0.8.1 → 0.9.1

package/es2017/customerService/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import "highlight.js/styles/default.css";
+import "highlight.js/styles/github.css";
 interface Service {
     type: string;
     params: any;

package/es2017/customerService/index.js

@@ -4,7 +4,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runt
 import React, { useEffect, useState, useRef } from "react";
 import { Modal, Drawer, Input, Tooltip } from "antd";
 import ViewImage from "../viewImage";
-// import html2canvas from "html2canvas";
 import cssStyle from "./index.module.less";
 import cssStyleOnline from "./index2.module.less";
 let styles = cssStyle;
@@ -20,7 +19,7 @@ import TeacherList from "./teacherList";
 import { parseDate } from "../utils/Date";
 import { Remarkable } from "remarkable";
 import hljs from "highlight.js";
-import "highlight.js/styles/default.css";
+import "highlight.js/styles/github.css";
 import { render } from "react-dom";
 import Provider from "../provider";
 const { TextArea  } = Input;
@@ -28,6 +27,9 @@ const { TextArea  } = Input;
 import knowledge_icon from "./images/knowledge_icon.png";
 // import { useMediaRecorder } from "./useMediaRecorder"; //录音使用文件
 import { readMessage, getByteLen, serverUrl, copyText, getDataTime, getQuery, resetStyles, findParent, delegate } from "./function"; //一些方法
+// import html2canvas from "html2canvas";
+// const screenShot = require('./screenShotPlugin.esm') 
+import ScreenShot from "./screenShotPlugin.esm.js";
 const CustomerService = (props)=>{
     let { userData , http , urllocation , onCancel , serverName , fetchEventSource , initShowType , onEvent , stepIds , stepId , screenshotAreaId , config  } = props;
     // const { bese64String, startRecord, stopRecord } = useMediaRecorder(); //语音转文字
@@ -96,6 +98,8 @@ const CustomerService = (props)=>{
             return ""; // use external default escaping
         }
     });
+    const [screenShotType, setScreenShotType] = useState(0) //1是 screenShotPlugin   2是html2canvas
+    ;
     useEffect(()=>{
         // if(config && config.type == 'video'){
         //   //获取热门推荐
@@ -106,33 +110,125 @@ const CustomerService = (props)=>{
         initShowType
     ]);
     useEffect(()=>{
-        //|| showScreenshot
-        if (showType == 5 || showScreenshot) {
+        function handlerHtml2canvas() {
+            console.log('kkkkkkkkkkk');
             try {
                 newShowType.current = true;
                 setImgBese64('');
-                // let dom = document.getElementById(screenshotAreaId);
-                html2canvas(screenshotAreaId, {
-                    useCORS: true,
-                    // allowTaint: true, // 污染处理
-                    scale: 1,
-                    // logging:true,
-                    ignoreElements: (element)=>{
-                        if (element.compareDocumentPosition(screenshotAreaId) === 2) return true;
-                        return false;
-                    }
-                }).then(function(canvas) {
-                    // document.body.appendChild(canvas);
-                    console.log(canvas, 99999);
-                    // var base64URL = canvas.toDataURL('image/jpeg')
-                    let base64URL = canvas.toDataURL("image/jpg", 1.0);
-                    console.log(base64URL);
-                    setImgBese64(base64URL);
-                });
+                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                    setScreenShotType(1);
+                    console.log('看看变了没有1213133');
+                    console.log('截图方式：【screenShotPlugin】', ScreenShot);
+                    const plugin = new ScreenShot({
+                        clickCutFullScreen: true,
+                        enableWebRtc: true,
+                        loadCrossImg: true,
+                        canvasWidth: window.innerWidth,
+                        canvasHeight: window.innerHeight,
+                        level: -1,
+                        hiddenToolIco: true,
+                        screenShotDom: document.body,
+                        cropBoxInfo: {
+                            x: 0,
+                            y: 0,
+                            w: window.innerWidth,
+                            h: window.innerHeight
+                        },
+                        wrcReplyTime: 500,
+                        wrcWindowMode: true,
+                        curTabState: false,
+                        hiddenScrollBar: {
+                            state: true
+                        },
+                        completeCallback: ({ base64  })=>{
+                            // console.log(
+                            //   "截图组件加载完毕调用此方法来完成框选区域的截图",
+                            //   base64
+                            // );
+                            setImgBese64(base64);
+                        },
+                        triggerCallback: ()=>{
+                            // 截图组件加载完毕调用此方法来完成框选区域的截图
+                            plugin.completeScreenshot();
+                        },
+                        cancelCallback: (err)=>{
+                            if (err.code === -1) {
+                                console.log(err);
+                                newShowType.current = false;
+                                if (saveShowType != -1) {
+                                    setShowType(saveShowType);
+                                } else {
+                                    setShowType(1);
+                                }
+                                setShowScreenshot(false);
+                                onCancel();
+                            }
+                        }
+                    });
+                } else {
+                    setScreenShotType(2);
+                    console.log('截图方式：【html2canvas】');
+                    html2canvas(screenshotAreaId, {
+                        useCORS: true,
+                        allowTaint: true,
+                        scale: 1,
+                        logging: false,
+                        // foreignObjectRendering:true,
+                        ignoreElements: (element)=>{
+                            if (element.compareDocumentPosition(screenshotAreaId) === 2) return true;
+                            return false;
+                        },
+                        windowWidth: window.innerWidth,
+                        windowHeight: window.innerHeight
+                    }).then(function(canvas) {
+                        // document.body.appendChild(canvas);
+                        // console.log(canvas,99999);
+                        // var base64URL = canvas.toDataURL('image/jpeg')
+                        let base64URL = canvas.toDataURL("image/jpg", 1.0);
+                        // console.log(base64URL);
+                        setImgBese64(base64URL);
+                    // svgNodesToRemove.forEach(item=>{
+                    //   item.remove()
+                    // })
+                    });
+                }
+            // modernScreenshot
+            // .domToPng(document.querySelector("body"))
+            // .then((dataUrl:any) => {
+            //   console.log(dataUrl);
+            //   setImgBese64(dataUrl);
+            // });
+            // domtoimage
+            // .toPng(document.body)
+            // .then(function (dataUrl:any) {
+            //   setImgBese64(dataUrl);
+            // })
+            // .catch(function (error:any) {
+            //   console.error("oops, something went wrong!", error);
+            // });
+            // //排除
+            // new screenShotPlugin({
+            //   enableWebRtc: true,
+            //   canvasWidth:window.innerWidth,
+            //   canvasHeight:window.innerHeight,
+            //   level:9999999,
+            //   completeCallback: function (info:any) {
+            //     console.log(info);
+            //     setImgBese64(info.base64);
+            //   },
+            //   closeCallback: function () {
+            //   },
+            // });
             } catch (error) {
                 console.log(error);
             }
         }
+        //|| showScreenshot
+        if (showType == 5 || showScreenshot) {
+            console.log('bbbbbbbbbbbbbb');
+            handlerHtml2canvas();
+        // window.addEventListener('resize',handlerHtml2canvas)
+        }
         if (showType != 1 && !firstLoad && pageCount > 0) {
             setFirstLoad(true);
             scrollToBottom();
@@ -192,6 +288,7 @@ const CustomerService = (props)=>{
             if (content) {
                 content.removeEventListener("scroll", handleScroll);
             }
+            window.removeEventListener('resize', handlerHtml2canvas);
         };
     }, [
         historyMessageList,
@@ -1668,11 +1765,18 @@ const CustomerService = (props)=>{
                     /*#__PURE__*/ _jsxs("div", {
                         className: styles.operate,
                         children: [
-                            /*#__PURE__*/ _jsx("i", {
+                            /*#__PURE__*/ _jsxs("i", {
+                                className: styles.popover_main,
                                 onClick: ()=>{
                                     setShowHistory(true);
                                 },
-                                children: /*#__PURE__*/ _jsx(CustomRecord, {})
+                                children: [
+                                    /*#__PURE__*/ _jsx(CustomRecord, {}),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.popover,
+                                        children: "历史记录"
+                                    })
+                                ]
                             }),
                             /*#__PURE__*/ _jsx("span", {
                                 className: styles.line
@@ -1692,20 +1796,14 @@ const CustomerService = (props)=>{
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsxs("i", {
+                            /*#__PURE__*/ _jsx("i", {
                                 className: styles.popover_main,
                                 onClick: ()=>{
                                     onEvent(serverName + serverUrl(), "click_智能问答_退出全屏", "提交");
                                     setShowType(3);
                                     setFirstLoad(false); //重启滚动条在最上方
                                 },
-                                children: [
-                                    /*#__PURE__*/ _jsx(CloseOutlined, {}),
-                                    /*#__PURE__*/ _jsx("span", {
-                                        className: styles.popover,
-                                        children: "退出全屏"
-                                    })
-                                ]
+                                children: /*#__PURE__*/ _jsx(CloseOutlined, {})
                             })
                         ]
                     })
@@ -3385,6 +3483,9 @@ const CustomerService = (props)=>{
                     }),
                     (showType == 4 || showType == 5) && /*#__PURE__*/ _jsxs("div", {
                         className: `${styles.ChatWindow_Drawer}`,
+                        style: {
+                            display: `${!showScreenshot ? "none" : "flex"}`
+                        },
                         id: "",
                         children: [
                             /*#__PURE__*/ _jsx("div", {
@@ -3484,6 +3585,7 @@ const CustomerService = (props)=>{
             }),
             (showType == 5 || showScreenshot) && imgBese64 && /*#__PURE__*/ _jsx(ScreenshotTool, {
                 imgBese64: imgBese64,
+                screenShotType: screenShotType,
                 saveScreenshotBese64: (base64)=>{
                     newShowType.current = false;
                     setScreenshotBese64(base64);

package/es2017/customerService/index.module.less

@@ -1177,8 +1177,8 @@
               max-height: 36px;
               word-break: break-all;
 
-              display: flex;
-              align-items: center;
+              //display: flex;
+              //align-items: center;
               img{
                 margin-right: 8px;
                 width: 60px;
@@ -1866,7 +1866,7 @@
   width: 417px;
   height: calc(100% - 48px);
   right: 0;
-  top: 48px;
+  top: 38px;
   border-radius: 0;
   background: transparent;
   overflow: visible;
@@ -1918,7 +1918,7 @@
   background-color: transparent !important;
   // background-color: burlywood;
   .ReactCrop{
-
+    cursor: default !important;
   }
   :global{
     .ReactCrop__child-wrapper{
@@ -1926,7 +1926,8 @@
       width: 100% !important;
       height: 100% !important;
       top: 0 !important;
-      left: 0 !important
+      left: 0 !important;
+      cursor: default !important;
     }
   }
   :global{
@@ -1935,6 +1936,7 @@
       height: 100% !important;
       top: 0 !important;
       left: 0 !important;
+      cursor: default !important;
     }
 
   }

package/es2017/customerService/index2.module.less

@@ -1175,8 +1175,8 @@
               max-height: 36px;
               word-break: break-all;
 
-              display: flex;
-              align-items: center;
+              //display: flex;
+              //align-items: center;
               img{
                 margin-right: 8px;
                 width: 60px;
@@ -1860,7 +1860,7 @@
   width: 417px;
   height: calc(100% - 48px);
   right: 0;
-  top: 48px;
+  top: 38px;
   border-radius: 0;
   background: transparent;
   overflow: visible;
@@ -1904,7 +1904,7 @@
   background-color: transparent !important;
   // background-color: burlywood;
   .ReactCrop{
-
+    cursor: default !important;
   }
   :global{
     .ReactCrop__child-wrapper{
@@ -1912,7 +1912,8 @@
       width: 100% !important;
       height: 100% !important;
       top: 0 !important;
-      left: 0 !important
+      left: 0 !important;
+      cursor: default !important;
     }
   }
   :global{
@@ -1921,6 +1922,7 @@
       height: 100% !important;
       top: 0 !important;
       left: 0 !important;
+      cursor: default !important;
     }
 
   }