bhd-components 0.9.0 → 0.9.2

package/es2017/bhdDatePicker/index.module.less

@@ -3,35 +3,58 @@
 .bhdDatePicker {
   width: 100%;
 
-  .pickerLabel {
-    display: flex;
-    gap: 5px;
-  }
   :global {
     .bhd-picker {
-      &.hide {
-        position: absolute;
+      // table 模式下显示样式
+      &.table-date-picker {
+        * {
+          background: transparent;
+          border: none;
+        }
+        position: relative;
         top: 0;
         left: 0;
-        // z-index: -1;
-        opacity: 0;
-        // width: 0;
-        // padding: 0;
-        // height: 0;
-        // border: none;
-        // & * {
-        //   display: none !important;
-        // }
-        // .bhd-picker-range-separator {
-        //   display: none !important;
-        // }
+        border: none;
+        box-shadow: none;
+        background: transparent;
+        padding: 0;
+        margin-left: -78px;
+        cursor: pointer;
+        .bhd-picker-input {
+          &:nth-child(1) {
+            width: 78px;
+            opacity: 0;
+            & > input {
+              cursor: pointer;
+              &::placeholder {
+                display: none !important;
+                opacity: 0;
+              }
+            }
+          }
+          &:nth-child(3) {
+            display: none;
+          }
+        }
+        .bhd-picker-range-separator {
+          display: none;
+        }
+        .bhd-picker-active-bar {
+          display: none;
+        }
+        .bhd-picker-suffix {
+          color: @color-text-Tr;
+        }
+        .bhd-picker-clear {
+          display: none;
+        }
       }
     }
   }
 }
-// 额外的弹出日历样式
+// 弹出日历样式
 .bhdDatePickerPopup {
-  // 单选、范围、带额外文字
+  // 单选、范围、日程安排
   &.singlePicker,
   &.rangePicker,
   &.extraPicker {
@@ -103,6 +126,22 @@
             line-height: 32px;
           }
         }
+
+        & .bhd-picker-body {
+          position: relative;
+
+          // 设置标题背景色
+          &::before {
+            content: "";
+            width: 100%;
+            height: 32px;
+            border-radius: 4px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background-color: @color-background-filltertiary-Tr;
+          }
+        }
       }
 
       //周
@@ -245,6 +284,7 @@
           line-height: 30px;
           height: 30px;
           gap: 10px;
+          align-items: center;
 
           & .bhd-picker-now {
             color: @color-background-primary-base;
@@ -292,6 +332,9 @@
             height: 30px;
             padding: 0 16px;
             // line-height: 30px;
+            border: none;
+            box-shadow: none;
+            line-height: 21px;
 
             &:disabled,
             &.disabled {
@@ -313,10 +356,19 @@
         // }
       }
 
+      // 默认
+      .bhd-picker-cell-in-view {
+        color: @color-text-Secondary-Tr;
+      }
+
       .bhd-picker-cell-disabled.bhd-picker-cell-today
         .bhd-picker-cell-inner::before {
         border-color: @color-background-primary-base !important;
       }
+      // 禁用
+      .bhd-picker-cell-disabled {
+        color: @color-text-quaternary-Tr !important;
+      }
     }
   }
 
@@ -475,7 +527,7 @@
       }
       .bhd-picker-year-panel .bhd-picker-cell::before,
       .bhd-picker-year-panel .bhd-picker-cell::before {
-        left: 8px;
+        left: 0;
         border-radius: 4px;
       }
 
@@ -535,7 +587,7 @@
     }
   }
 
-  // 带有额外文字场景
+  // 日程安排
   &.extraPicker {
     :global {
       .extraText {
@@ -557,7 +609,7 @@
       }
       .bhd-picker-date-panel {
         width: 416px;
-        padding: 24px 24px 16px 24px;
+        padding: 16px 24px 16px 24px;
         & .bhd-picker-content {
           width: 336px;
           margin: 0 auto;
@@ -669,6 +721,10 @@
             border: none !important;
           }
         }
+        .bhd-picker-cell-in-view {
+          pointer-events: none;
+          color: @color-text-Secondary-Tr;
+        }
       }
     }
   }
@@ -738,22 +794,9 @@
     .bhd-picker-date-panel,
     .bhd-picker-time-panel {
       padding: 16px;
-      gap: 24px;
+      gap: 16px;
       & .bhd-picker-body {
         padding: 0 !important;
-        position: relative;
-
-        // 设置标题背景色
-        &::before {
-          content: "";
-          width: 100%;
-          height: 32px;
-          border-radius: 4px;
-          position: absolute;
-          top: 0;
-          left: 0;
-          background-color: @color-background-filltertiary-Tr;
-        }
       }
 
       // 设置头部圆角
@@ -769,6 +812,7 @@
         }
       }
     }
+
     // 头部
     .bhd-picker-header {
       padding: 0 !important;
@@ -813,11 +857,6 @@
       justify-content: center;
     }
 
-    // 默认
-    .bhd-picker-cell-in-view {
-      color: @color-text-Secondary-Tr !important;
-    }
-
     //当天
     .bhd-picker-cell-today {
       color: @color-background-primary-base !important;
@@ -843,9 +882,5 @@
         }
       }
     }
-    // 禁用
-    .bhd-picker-cell-disabled {
-      color: rgba(0, 0, 0, 0.25) !important;
-    }
   }
 }

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,6 @@ 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";
@@ -29,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 "./js-screen-shot/main";
 const CustomerService = (props)=>{
     let { userData , http , urllocation , onCancel , serverName , fetchEventSource , initShowType , onEvent , stepIds , stepId , screenshotAreaId , config  } = props;
     // const { bese64String, startRecord, stopRecord } = useMediaRecorder(); //语音转文字
@@ -97,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'){
         //   //获取热门推荐
@@ -107,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();
@@ -193,7 +288,7 @@ const CustomerService = (props)=>{
             if (content) {
                 content.removeEventListener("scroll", handleScroll);
             }
-        // window.removeEventListener('resize',handlerHtml2canvas)
+            window.removeEventListener('resize', handlerHtml2canvas);
         };
     }, [
         historyMessageList,
@@ -3388,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", {
@@ -3487,6 +3585,7 @@ const CustomerService = (props)=>{
             }),
             (showType == 5 || showScreenshot) && imgBese64 && /*#__PURE__*/ _jsx(ScreenshotTool, {
                 imgBese64: imgBese64,
+                screenShotType: screenShotType,
                 saveScreenshotBese64: (base64)=>{
                     newShowType.current = false;
                     setScreenshotBese64(base64);