bhd-components 0.10.31 → 0.10.33

package/esm/customerService/index.module.less

@@ -200,6 +200,10 @@
             width: 6px;
             height: 4px;
         }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background-color: rgba(181, 184, 198, 0.8);
+        }
       }
       .left {
         .head_sculpture {
@@ -498,7 +502,67 @@
                 margin: 4px 0;
                 margin-bottom: 8px;
                 border-radius: 0 0 4px 4px;
+                &.mermaid{
+                  text-align: center;
+                  border-top: 1px solid rgba(0, 0, 0, 0.06);
+                  border-radius: 4px;
+                  margin: 0;
+                  svg{
+                    height: auto;
+                    width: 100%;
+                    
+                    :global{
+                      .messageText {
+                        stroke: none !important;
+                      }
+                    }
+                  }
+                }
               }
+              .maskZoomBox{
+                position: relative;
+                display: inline-block;    
+                max-width: 100%;
+                padding: 0 !important;
+                >img{
+                  max-width: 100%;
+                }
+                .zoomBox{
+                  width: 20px;
+                  height: 20px;
+                  font-size: 20px;
+                  color: #fff;
+                  display: none;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translate(-50%, -50%);
+                  z-index: 2;
+                  cursor: pointer;
+                }
+                &::after{
+                  content: '';
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                  background-color: rgba(0, 0, 0, .3);
+                  border-radius: 4px;
+                  display: none;
+                  align-items: center;
+                  justify-content: center;
+                  z-index: 1;
+                }
+                &:hover{
+                  &::after{
+                    display: flex;
+                  }
+                  .zoomBox{
+                    display: block;
+                  }
+                }
+              }        
               // 最后一行操作按钮
               .operate_modal_bottom{
                 position: relative;
@@ -863,6 +927,9 @@
             position: relative;
             top: 2px;
           }
+          &:has(+ pre.mermaid) {
+            display: none !important;
+          }
         }
         :global{
           .copy_success{
@@ -1063,6 +1130,11 @@
         border-radius: 4px;
         background-color: #f4f4f4;
       }
+      &.mermaid{
+        background: #fafafa !important;
+        color: #111;
+        text-align: center;
+      }
     }
   }
   //隐藏聊天头像
@@ -1155,8 +1227,9 @@
     .Drawer_buttom {
       display: flex;
       align-items: flex-end;
-      margin-bottom: 12px;
+      // margin-bottom: 12px;
       padding: 0 16px;
+      padding-bottom: 12px;
       .input_wrap {
         // display: flex;
         align-items: flex-end;
@@ -2164,3 +2237,45 @@
 strong {
   font-weight: bold !important;
 }
+
+.viewMedia_Modal {
+  :global {
+    .bhd-modal {
+      width: 100% !important;
+      height: 100% !important;
+      min-height: 600px;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      max-width: none;
+      .bhd-modal-content {
+        width: 100%;
+        height: 100%;
+        background: transparent;
+        box-shadow: none;
+        border-radius: none;
+        .bhd-modal-body {
+          width: 100%;
+          height: 100%;
+          padding: 0px;
+        }
+      }
+    }
+    .bhd-modal-close-x{
+      color: #fff !important;
+    }
+  }
+}
+.viewMemaid{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > *{
+    background: #fafafa;
+    padding: 10px;
+  }
+  
+}

package/esm/customerService/index2.module.less

@@ -197,6 +197,10 @@
             width: 6px;
             height: 4px;
         }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background-color: rgba(181, 184, 198, 0.8);
+        }
       }
       .left {
         .head_sculpture {
@@ -491,7 +495,69 @@
                 margin: 4px 0;
                 margin-bottom: 8px;
                 border-radius: 0 0 4px 4px;
-              }
+                &.mermaid{
+                  text-align: center;
+                  border-top: 1px solid rgba(0, 0, 0, 0.06);
+                  border-radius: 4px;
+                  margin:0;
+
+                  svg{
+                    height: auto;
+                    width: 100%;
+                    :global{
+                      .messageText {
+                        stroke: none !important;
+                      }
+                    }
+                  }
+                }
+              }              
+              
+              .maskZoomBox{
+                position: relative;
+                display: inline-block;
+                max-width: 100%;               
+                padding: 0 !important;
+                >img{
+                  max-width: 100%;
+                }
+                .zoomBox{
+                  width: 20px;
+                  height: 20px;
+                  font-size: 20px;
+                  color: #fff;
+                  display: none;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translate(-50%, -50%);
+                  z-index: 2;
+                  cursor: pointer;
+                }
+                &::after{
+                  content: '';
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                  background-color: rgba(0, 0, 0, .3);
+                  border-radius: 4px;
+                  display: none;
+                  align-items: center;
+                  justify-content: center;
+                  z-index: 1;
+                }
+                &:hover{
+                  &::after{
+                    display: flex;
+                  }
+                  .zoomBox{
+                    display: block;
+                  }
+                }
+              }   
+              
               // 最后一行操作按钮
               .operate_modal_bottom{
                 position: relative;
@@ -856,6 +922,9 @@
             position: relative;
             top: 2px;
           }
+          &:has(+ pre.mermaid) {
+            display: none !important;
+          }
         }
         :global{
           .copy_success{
@@ -1054,6 +1123,11 @@
         border-radius: 4px;
         background-color: #f4f4f4;
       }
+      &.mermaid{
+        background: #fafafa !important;
+        color: #111;
+        text-align: center;
+      }
     }
   }
   //隐藏聊天头像
@@ -1146,8 +1220,9 @@
     .Drawer_buttom {
       display: flex;
       align-items: flex-end;
-      margin-bottom: 12px;
+      // margin-bottom: 12px;
       padding: 0 16px;
+      padding-bottom: 12px;
       .input_wrap {
         // display: flex;
         align-items: flex-end;

package/esm/customerService/viewMemaid.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function ViewMemaid(props: any): React.JSX.Element;
+export default ViewMemaid;

package/esm/customerService/viewMemaid.js

@@ -0,0 +1,75 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import React, { useEffect } from "react";
+import styles from "./index.module.less";
+import { Modal } from "antd";
+// @ts-ignore
+import mermaid from "mermaid";
+mermaid.initialize({
+    startOnLoad: false,
+    theme: "default",
+    securityLevel: "loose",
+    fontFamily: "Arial, sans-serif",
+    flowchart: {
+        htmlLabels: true,
+        curve: "basis"
+    }
+});
+function ViewMemaid(props) {
+    var visible = props.visible, className = props.className, _props_getContainer = props.getContainer, getContainer = _props_getContainer === void 0 ? function() {
+        return document.body;
+    } : _props_getContainer, _props_onCancel = props.onCancel, onCancel = _props_onCancel === void 0 ? function() {} : _props_onCancel, content = props.content;
+    var _React_useState = _sliced_to_array(React.useState(content), 2), contentText = _React_useState[0], setContentText = _React_useState[1];
+    useEffect(function() {
+        var _dom;
+        var dom = document.getElementById(content);
+        console.log("dom", dom, content);
+        setContentText(((_dom = dom) === null || _dom === void 0 ? void 0 : _dom.textContent) || "");
+        var timer = setTimeout(/*#__PURE__*/ _async_to_generator(function() {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            mermaid.init({
+                                querySelector: ".".concat(styles.viewMemaid),
+                                suppressErrors: true
+                            }, ".".concat(styles.viewMemaid))
+                        ];
+                    case 1:
+                        _state.sent();
+                        clearTimeout(timer);
+                        return [
+                            2
+                        ];
+                }
+            });
+        }), 100);
+    }, [
+        content
+    ]);
+    return /*#__PURE__*/ _jsx(Modal, {
+        transitionName: "",
+        maskTransitionName: "",
+        title: null,
+        footer: null,
+        closable: true,
+        centered: true,
+        // destroyOnClose
+        open: visible,
+        keyboard: false,
+        onCancel: onCancel,
+        maskStyle: {
+            background: "rgba(0, 0, 0, 0.65)"
+        },
+        wrapClassName: "".concat(styles.viewMedia_Modal, " ").concat(className || ""),
+        getContainer: getContainer,
+        children: visible && /*#__PURE__*/ _jsx("div", {
+            className: styles.viewMemaid,
+            children: contentText
+        })
+    });
+}
+export default ViewMemaid;

package/esm/typings.d.ts

@@ -10,4 +10,4 @@ declare global {
     interface window {
         appendDom: ()=>void
     }
-  }
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bhd-components",
-  "version": "0.10.31",
+  "version": "0.10.33",
   "description": "组件功能描述",
   "config": {
     "commitizen": {
@@ -42,7 +42,8 @@
   "scripts": {
     "start:large-memory": "node --max-old-space-size=8192 node_modules/.bin/ice-pkg start",
     "start": "ice-pkg start",
-    "build": "ice-pkg build",
+    "build:1": "ice-pkg build",
+    "build":"node --max-old-space-size=8192 node_modules/.bin/ice-pkg build",
     "build:esm": "cross-env NODE_TYPE=esm ice-pkg build",
     "build:online": "cross-env NODE_TYPE=online ice-pkg build ",
     "build:online_dev": "cross-env NODE_TYPE=online_dev ice-pkg build ",
@@ -76,6 +77,7 @@
     "html2canvas": "^1.4.1",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
+    "mermaid": "^8.14.0",
     "raw-loader": "^4.0.2",
     "react-cropper": "^2.3.3",
     "react-image-crop": "^11.0.5",