bhd-components 0.7.3 → 0.7.4

package/es2017/customerService/index2.module.less

@@ -108,6 +108,54 @@
           margin: 0 4px;
           margin-left: 23px;
         }
+
+        .popover_main{
+          position: relative;
+          z-index: 99;
+          .popover{
+            padding: 8px;
+            border-radius: 4px;
+            line-height: 1.5;
+            color: rgba(0, 0, 0, 0.65);
+            position: absolute;
+            border: 1px solid rgba(0, 0, 0, 0.15);
+            background-color: #fff;
+            white-space: nowrap;
+            font-size: 14px;
+            position: absolute;
+            top: 26px;
+            left: -30px;
+            display: none;
+            &::after{
+              content: "";
+              position: absolute;
+              width: 0;
+              height: 0;
+              z-index: 99;
+              border: 6px solid;
+              border-color: transparent transparent #fff transparent;
+              top: -12px;
+              left: 32px;
+            }
+            &::before{
+              content: "";
+              position: absolute;
+              z-index: 99;
+              width: 0;
+              height: 0;
+              border: 6px solid;
+              border-color: transparent transparent rgba(0, 0, 0, 0.15) transparent;
+              top: -13px;
+              left: 32px;
+            }
+          }
+          &:hover{
+            .popover{
+              display: block;
+            }
+          }
+
+        }
       }
     }
   }
@@ -199,11 +247,98 @@
               visibility: visible;
             }
           }
+          .operate_modal_bottom {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            // position: sticky;
+            bottom: 0;
+
+            .operate {
+              display: inline-block;
+              padding: 8px;
+              line-height: 1;
+              color: @color-text-tertiary-Tr;
+              i {
+                color: @color-text-tertiary-Tr;
+                font-size: 16px;
+                cursor: pointer;
+                svg {
+                  color: @color-icon-fill-Tr;
+                }
+                &:hover {
+                  svg {
+                    color: @color-data-visualization-01;
+                  }
+                }
+              }
+              .active {
+                // color: @color-background-primary-base;
+                svg {
+                  color: @color-text-primary;
+                }
+              }
+              span {
+                margin: 0 8px;
+                cursor: pointer;
+              }
+            }
+            .stop_generate {
+              // position: absolute;
+              font-size: 12px;
+              color: @color-text-tertiary-Tr;
+              display: inline-block;
+              padding: 8px 0;
+              cursor: pointer;
+              .icon {
+                display: inline-block;
+                width: 10px;
+                height: 10px;
+                border-radius: 2px;
+                background-color: @color-text-tertiary-Tr;
+                margin-right: 4px;
+              }
+              .find_teacher {
+                padding: 2px 8px;
+                border-radius: 2px;
+                background-color: @color-background-filltertiary-Tr;
+                color: @color-text-tertiary-Tr;
+                font-size: 12px;
+                line-height: 1;
+                &:hover{
+                  color: @color-text-primary;
+                }
+              }
+            }
+            .stop_generate:hover{
+              color: @color-text-primary;
+              span{
+                color: @color-text-primary;
+              }
+            }
+            .stop_findTeacher {
+              font-size: 12px;
+              color: @color-text-tertiary-Tr;
+              display: inline-block;
+              padding: 8px 0;
+              cursor: pointer;
+              span {
+                padding: 0px 8px;
+                background-color: @color-background-filltertiary-Tr;
+                color: @color-text-tertiary-Tr;
+                &:hover{
+                  color: @color-text-primary;
+                }
+              }
+            }
+
+          }
+
           .main_content {
             position: relative;
            
             .content {
-              
+              position: relative;
               max-width: 100%;
               // width: 100%;
               //以下优化ai返回的内容的样式
@@ -245,16 +380,144 @@
                 }
               }
               pre {
-                background: rgba(0, 0, 0, 0.05);
+                background: @color-background-fillquaternary;
+                border: 1px solid @color-border-secondary-Tr;
+                border-top: none;
+
                 padding: 12px;
                 line-height: 1.5;
                 margin: 4px 0;
+                border-radius: 0 0 4px 4px;
               }
+              // 最后一行操作按钮
+              .operate_modal_bottom{
+                position: relative;
+                top: 10px ;
+                &::before{
+                  content: '';
+                  display: block;
+                  width: calc(100% + 32px);
+                  height: 1px;
+                  background-color: rgba(0, 0, 0, 0.06);
+                  position: absolute;
+                  bottom: 40px;
+                  left: -16px;
+                }
+                &>p{
+                  padding: 12px 0;
+                }
+                .find_teacher{
+                  padding: 0;
+                  background-color: transparent;
+                  color: @color-text-primary;
+                }
+                .operate{
+                  :global{
+                    .anticon{
+                      display: inline-block;
+                      width: 20px;
+                      height: 20px;
+                      &:hover{
+                        background-color: @color-background-filltertiary-Tr;
+                      }
+                    }
+                  }
+                }
+              }
+
             }
             .sign{
               background-color: #1890ff;
               color: #fff;
             }
+
+            
+            // //视频摘要内容
+            // .video_abstract{
+            //   .title{
+            //     position: relative;
+            //     p{
+            //       color: #000;
+            //       font-size: 14px;
+            //       font-weight: 600;
+            //       line-height: 150%; /* 21px */
+            //       position: relative;
+            //       z-index: 2;
+            //     }
+            //     span{
+            //       display: block;
+            //       width: 56px;
+            //       height: 6px;
+            //       background-color: @color-background-primary-weak-hover;
+            //       position: absolute;
+            //       bottom: 0px;
+                  
+            //     }
+                
+            //   }
+            //   .abstract{
+            //     padding: 16px 0;
+            //     color: @color-text-Tr;
+            //     font-size: 14px;
+            //     line-height: 150%; /* 21px */
+            //     border-bottom: 1px solid @color-border-secondary-Tr;
+            //     margin-bottom: 16px;
+            //     border-width: calc(100% + 32px);
+            //     border-left: -18px;
+            //   }
+            //   .main_knowledge{
+            //     .item{
+            //       color: @color-text-Tr;
+            //       font-size: 14px;
+            //       line-height: 150%; /* 21px */
+            //       .brief_summary{
+            //         padding-right: 100px;
+            //         position: relative;
+            //         display: flex;
+            //         margin: 16px 0;
+            //         .video_time{
+            //           padding: 4px 8px;
+            //           background-color: #CCE7FF;
+            //           color: @color-text-info;
+            //           font-size: 12px;
+            //           line-height: 1;
+            //           position: absolute;
+            //           right: 0;
+            //         }
+            //         .icon{
+            //           display: inline-block;
+            //           width: 21px;
+            //           height: 21px;
+            //           margin-right: 4px;
+            //           svg{
+            //             color:@color-icon-fill-Tr;
+            //           }
+            //         }
+            //         .icon_active{
+            //           svg{
+            //             color:@color-icon-hover;
+            //           }
+            //         }
+            //       }
+            //       .brief_summary_con{
+            //         margin-top: 16px;
+            //         padding-left: 46px;
+            //         position: relative;
+            //         &::before{
+            //           content: '';
+            //           display: block;
+            //           width: 6px;
+            //           height: 6px;
+            //           border-radius: 50%;
+            //           background-color: @color-text-quaternary-Tr;
+            //           position: absolute;
+            //           left: 30px;
+            //           top: 8px;
+            //         }
+            //       }
+            //     }
+            //   }
+            // }
           }
           .operate_modal {
             // display: none;
@@ -301,110 +564,27 @@
               }
               .ask_question {
                 cursor: pointer;
-                color: @color-text-tertiary-Tr;
+                color: @color-text-primary;
                 font-size: 12px;
                 line-height: 1;
-                padding: 2px 8px;
-                background-color: @color-background-filltertiary-Tr;
-                margin-right: 16px;
-                &:hover{
-                  color: @color-text-primary;
-                }
+                // padding: 2px 8px;
+                // background-color: @color-background-filltertiary-Tr;
+                // margin-right: 16px;
+                // &:hover{
+                //   color: @color-text-primary;
+                // }
               }
             }
           }
-          .operate_modal_bottom {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            // position: sticky;
-            bottom: 0;
 
-            .operate {
-              display: inline-block;
-              padding: 8px;
-              line-height: 1;
-              color: @color-text-tertiary-Tr;
-              i {
-                color: @color-text-tertiary-Tr;
-                font-size: 16px;
-                cursor: pointer;
-                svg {
-                  color: @color-icon-fill-Tr;
-                }
-                &:hover {
-                  svg {
-                    color: @color-data-visualization-01;
-                  }
-                }
-              }
-              .active {
-                // color: @color-background-primary-base;
-                svg {
-                  color: @color-text-primary;
-                }
-              }
-              span {
-                margin: 0 8px;
-                cursor: pointer;
-              }
-            }
-            .stop_generate {
-              // position: absolute;
-              font-size: 12px;
-              color: @color-text-tertiary-Tr;
-              display: inline-block;
-              padding: 8px 0;
-              cursor: pointer;
-              .icon {
-                display: inline-block;
-                width: 10px;
-                height: 10px;
-                border-radius: 2px;
-                background-color: @color-text-tertiary-Tr;
-                margin-right: 4px;
-              }
-              .find_teacher {
-                padding: 2px 8px;
-                border-radius: 2px;
-                background-color: @color-background-filltertiary-Tr;
-                color: @color-text-tertiary-Tr;
-                font-size: 12px;
-                line-height: 1;
-                &:hover{
-                  color: @color-text-primary;
-                }
-              }
-            }
-            .stop_generate:hover{
-              color: @color-text-primary;
-              span{
-                color: @color-text-primary;
-              }
-            }
-            .stop_findTeacher {
-              font-size: 12px;
-              color: @color-text-tertiary-Tr;
-              display: inline-block;
-              padding: 8px 0;
-              cursor: pointer;
-              span {
-                padding: 0px 8px;
-                background-color: @color-background-filltertiary-Tr;
-                color: @color-text-tertiary-Tr;
-                &:hover{
-                  color: @color-text-primary;
-                }
-              }
-            }
-
-          }
         }
         .content {
           padding: 12px 16px;
           // max-width: 80%;
           display: inline-block;
           font-size: 14px;
+
+
         }
       }
       .left {
@@ -429,13 +609,123 @@
       }
 
       li .content {
-        .association_problem li {
-          color: #5991ef;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 1.8;
+        .association_problem{
+          padding-left: 0;
+          li {
+            padding-top: 16px;
+            color: #5991ef;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 1.8;
+            cursor: pointer;
+            list-style-type: none;
+          }
+        }
+
+        .img_con{
+          width: 100%;
+          text-align: center;
+          position: relative;
+          border-radius: 4px;
+          overflow: hidden;
+          display: inline-flex;
+          margin-top: 24px;
+          .mask_zoom{
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.3);
+            border-radius: 4px;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            svg{
+              font-size: 20px;
+              color: #fff;
+              cursor: pointer;
+            }
+            
+          }
+          &:hover{
+            .mask_zoom{
+              display: flex;
+            }
+          }
+        }
+       
+        .copyCode{
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          border-radius: 4px 4px 0px 0px;
+          border: 1px solid @color-border-secondary-Tr;
+          border-bottom-color: @color-border-secondary-Tr;
+          background: @color-background-fillquaternary-Tr;
+          text-align: right;
+          height: 37px;
+          line-height: 37px !important;
+          padding: 0 !important;
+          padding-right: 16px !important;
+          position: relative;
+          top: 6px;
           cursor: pointer;
-          list-style-type: none;
+          font-weight: 400 !important;
+          .icon{
+            display: none;
+          }
+          :global{
+            .copy{
+              display: block;
+            }
+          }
+          svg{
+            color: @color-text-Secondary-Tr;
+            margin-right: 8px;
+            font-size: 16px;
+            position: relative;
+            top: 2px;
+          }
+        }
+        :global{
+          .copy_success{
+            
+            .copyCode{
+              color:@color-text-primary;
+            }
+            .copy{
+              display: none;
+            }
+            .copy_success_flag{
+              display: inline-block;
+              svg{
+                color:@color-text-primary;
+              }
+            }
+          }
+        }
+        p>code{
+          border: none;
+          background-color: @color-background-fillsecondary-Tr;
+          border-radius: 2px;
+          color: #000;
+          padding: 0 2px;
+        }
+        li{
+          ::marker {
+            font-weight: 600;
+          }
+          p{
+            font-weight: 400 !important;
+            strong{
+              border-bottom: 6px solid @color-background-primary-weak-hover;
+              height: 20px;
+              display: inline-block;
+            }
+          }
+
         }
       }
       .time {
@@ -599,6 +889,24 @@
         }
       }
     }
+    .issues_list_flag {
+      position: absolute;
+      bottom: 60px;
+      margin: 0 16px;
+      // padding-bottom: 4px;
+      line-height: 1;
+      // padding-top: 24px;
+      p{
+        padding: 8px 16px;
+        background-color: #fff;
+        border-radius: 38px;
+        cursor: pointer;
+        &:hover{
+          background-color: @color-background-primary-weak;
+          color: @color-border-primary;
+        }
+      }
+    }
     .Drawer_buttom {
       display: flex;
       align-items: flex-end;
@@ -637,6 +945,94 @@
               background-color: #fff !important;
             }
           }
+          
+          .picture_layout{
+            display: flex;
+            align-items: center;
+            padding-bottom: 12px;
+            border-bottom: 1px solid @color-border-secondary-Tr;
+            margin-bottom: 12px;
+            &:hover{
+              // background-color: rgba(0, 0, 0, 0.02);
+              cursor: pointer;
+            }
+            .left{
+              width: 90px;
+              height: 60px;
+              position: relative;
+              border-radius: 4px;
+
+              img{
+                width: 100%;
+                height: 100%;
+                border-radius: 4px;
+                overflow: hidden;
+              }
+              .icon_close{
+                position: absolute;
+                top: -8px;
+                right: -8px;
+                z-index: 2;
+                span{
+                  font-size: 18px;
+                  color: rgba(0, 0, 0, 0.45);
+                }
+              }
+              .icon_zoom{
+                position: absolute;
+                background: rgba(0,0,0,0.3);
+                width: 100%;
+                height: 100%;
+                top: 0;
+                text-align: center;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                border-radius: 4px;
+                :global{
+                  .anticon{
+                    color: #fff;
+                  }
+                }
+                .anticon{
+                  color: #fff;
+                  font-size: 18px;
+                }
+              }
+              &:hover{
+                .icon_zoom{
+                  display: flex;
+                }
+              }
+            }
+            .right{
+              margin-left: 24px;
+              p{
+                display: inline-flex;
+                align-items: center;
+                padding: 2px 8px;
+                background-color: @color-background-filltertiary-Tr;
+                color: @color-text-Tr;
+                line-height: 1.5;
+                &:first-child{
+                  margin-bottom: 8px;
+                }
+                span{
+                  margin-right: 4px;
+                }
+                :global {
+                  .anticon{
+                    vertical-align: middle !important;
+                  }
+                }
+                
+                svg{
+                  color: @color-text-Tr;
+                  font-size: 20px;
+                }
+              }
+            }
+          }
         }
         & > .no_AI {
           width: 100%;
@@ -644,9 +1040,9 @@
             padding-right: 12px;
           }
         }
-        .voice {
+        .screenshot {
           position: absolute;
-          right: 18px;
+          right: 16px;
           bottom: 10px;
           color: rgba(0, 0, 0, 0.65);
           i {
@@ -656,13 +1052,13 @@
               font-size: 20px;
             }
           }
-          .voice_btn {
-            width: 32px;
-            cursor: pointer;
-            position: absolute;
-            bottom: -5px;
-            right: -10px;
-          }
+          // .voice_btn {
+          //   width: 32px;
+          //   cursor: pointer;
+          //   position: absolute;
+          //   bottom: -5px;
+          //   right: -10px;
+          // }
         }
         .disabled{
           cursor:not-allowed !important;
@@ -698,6 +1094,13 @@
 
               max-height: 36px;
               word-break: break-all;
+
+              display: flex;
+              align-items: center;
+              img{
+                margin-right: 8px;
+                width: 60px;
+              }
             }
           }
           .delete_quote {
@@ -1400,3 +1803,77 @@
   }
 }
 
+//截图功能
+.screenshot_Modal{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  width:100% !important;
+  height: 100% !important;
+  background-color: transparent !important;
+  // background-color: burlywood;
+  .ReactCrop{
+
+  }
+  :global{
+    .ReactCrop__child-wrapper{
+      position: fixed;
+      width: 100% !important;
+      height: 100% !important;
+      top: 0 !important;
+      left: 0 !important
+    }
+  }
+  :global{
+    .ReactCrop{
+      width: 100% !important;
+      height: 100% !important;
+      top: 0 !important;
+      left: 0 !important;
+    }
+
+  }
+  
+  .screenshot_Modal_btn{
+    position: fixed !important;
+    z-index: 999;
+    border-radius: 4px;
+    background: #FFF;
+    padding: 8px 12px;
+    width: 88px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    &>span{
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      border-radius: 2px;
+      text-align: center;
+      .anticon{
+        padding-top: 3.5px;
+      }
+      &:hover{
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+      svg{
+        font-size: 18px;
+        color: rgba(244, 82, 59, 1);
+      }
+
+    }
+    &>span:nth-child(2){
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      border-radius: 2px;
+      &:hover{
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+      svg{
+        color: rgba(35, 217, 195, 1);
+      }
+    }
+  }
+}