AI助手、信息中心调整优化

src/main/resources/static/css/base/base.pc.css

@@ -556,7 +556,128 @@ iframe{width:320px !important;height: 280px !important}
 }
 /*采美AI助手弹窗样式*/
 .el-drawer__header{ margin-bottom: 10px !important; }
-.cm_ai_container{ width: 100%;height: 100%;display: flex;flex-direction: column; box-sizing: border-box;padding:0 15px; background-image: radial-gradient(circle at 14% 85%,#e7ecf7 0,rgba(231,236,247,0) 37%),radial-gradient(circle at 3.4% 3.7%,rgba(245,237,241,.5) 0,rgba(245,237,241,0) 28%),radial-gradient(circle at 100% 18%,#e8ebea 0,hsla(160,7%,92%,0) 30%),linear-gradient(180deg,#f5f4f6,#e6ebf7);}
+.cm_ai_container_body{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+}
+.cm_ai_container_records{
+    width: 240px;
+    box-shadow: 1px 0 20px rgba(0,0,0,.02);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    position: absolute;
+    flex: 0 0 auto;
+    background-image: linear-gradient(180deg,#f0edf7 .03%,#ebeaf5 32.19%,#e8e8f3 68.86%,#e4eaf7 99.12%);
+}
+.cm_ai_container_records .cm_ai_records_btn{
+    height: 48px;
+    line-height: 16px;
+    cursor: pointer;
+    flex-shrink: 0;
+    padding: 16px 0;
+    box-sizing: border-box;
+    margin-bottom: 12px;
+    background-color: rgba(255, 91, 0, 0.05);
+    text-align: center;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    color: #ff5b00 !important;
+    opacity: 1 ;
+}
+.cm_ai_container_records .cm_ai_records_btn.disabled{
+    cursor: not-allowed;
+    opacity: 0.7 ;
+}
+.cm_ai_container_records .cm_ai_records_btn.show:hover{
+    background-color: rgba(255, 91, 0, 0.1);
+}
+.cm_ai_container_records .cm_ai_records_btn .cm_ai_add{
+    width: 16px;
+    height: 16px;
+    display: flex;
+    background: url("/img/base/icon-aiAdd@2x.png") no-repeat;
+    background-size: cover;
+    margin-right: 3px;
+}
+.cm_ai_container_records .cm_ai_records_list{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.cm_ai_container_records .cm_ai_records_item{
+    display: flex;
+    align-items: flex-start;
+    height: 62px;
+    padding: 14px 10px;
+    gap: 8px;
+    box-sizing: border-box;
+    flex-direction: column;
+    justify-content: space-between;
+    cursor: pointer;
+}
+.cm_ai_container_records .cm_ai_records_item:hover{
+    border-radius: 9px;
+    background: hsla(0, 0%, 100%, .5);
+}
+.cm_ai_container_records .cm_ai_records_item .content{
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 14px;
+    color: #50525c;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+.cm_ai_container_records .cm_ai_records_item .time{
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 12px;
+    color: #848691;
+}
+.cm_ai_container_records .cm_ai_records_user{
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    height: 72px;
+    padding: 0 22px;
+    font-size: 14px;
+    cursor: pointer;
+    border-top: 1px solid hsla(210, 3%, 87%, .5);
+}
+.cm_ai_container_records .cm_ai_records_user .avatar{
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    overflow: hidden;
+}
+.cm_ai_container_records .cm_ai_records_user .name{
+    margin-left: 8px;
+}
+.cm_ai_container_main{
+    width: calc(100% - 240px);
+    height: 100%;
+    margin-left: 240px;
+    background-image: radial-gradient(circle at 14% 85%,#e7ecf7 0,rgba(231,236,247,0) 37%),radial-gradient(circle at 3.4% 3.7%,rgba(245,237,241,.5) 0,rgba(245,237,241,0) 28%),radial-gradient(circle at 100% 18%,#e8ebea 0,hsla(160,7%,92%,0) 30%),linear-gradient(180deg,#f5f4f6,#e6ebf7);
+}
+.cm_ai_container{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding:0 30px;
+}
 .cm_ai_content{
     width: 100%;
     height: auto;
@@ -564,8 +685,8 @@ iframe{width:320px !important;height: 280px !important}
     box-shadow: 0 16px 20px 0 rgba(174,167,223,.2);
     border-radius: 8px;
     box-sizing: border-box;
-    padding: 9px 10px 24px 10px;
-    margin:10px 0;
+    padding: 10px;
+    margin:10px 0 20px 0;
     position: relative;
 }
 .cm_ai_header{ width: 100%;height: 24px;box-sizing: border-box;justify-content: left;align-items: center;display: inline-flex;}
@@ -585,6 +706,7 @@ iframe{width:320px !important;height: 280px !important}
 .cm_ai_content .cm_ai_input textarea{
     width: 100%;
     max-height: 106px !important;
+    min-height: 60px !important;
     font-size: 14px;
     line-height: 1.5715;
     background-color: transparent;
@@ -599,17 +721,25 @@ iframe{width:320px !important;height: 280px !important}
 .cm_ai_content .cm_ai_input textarea:focus {
     outline: none;
 }
+.cm_ai_content .cm_ai_button_main{
+    position: relative;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    width: 100%;
+    height: 32px;
+    margin-top: 4px;
+}
 .cm_ai_content .cm_ai_button{
-    width: 40px;
-    height: 24px;
-    position: absolute;
-    right: 6px;
-    bottom: 6px;
-    border-radius: 16px;
+    width: 66px;
+    height: 32px;
+    border-radius: 4px;
     background-image: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
     display: inline-flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
     transition: all .16s;
     cursor: pointer;
 }
@@ -617,11 +747,8 @@ iframe{width:320px !important;height: 280px !important}
     opacity: 0.5;
 }
 .cm_ai_content .cm_ai_button .cm_ai_icon{
-    width: 16px;
-    height: 16px;
-    margin: 0 auto;
-    display: block;
     transition: all .16s;
+    color: #FFFFFF;
 }
 .cm_ai_content .cm_ai_button:hover{
     transform: scale(1.05);
@@ -644,9 +771,27 @@ iframe{width:320px !important;height: 280px !important}
     box-sizing: border-box;
     padding-left:36px;
     position: relative;
+    display: flex;
+    justify-content: flex-start;
     margin: 10px 0;
 }
-.cm_ai_answer .cm_ai_html_icon{
+.cm_ai_answer.user{
+    padding-left:0px;
+    padding-right:36px;
+    justify-content: flex-end;
+}
+.cm_ai_answer.user .cm_ai_html_icon{
+    width: 32px;
+    height: 32px;
+    border-radius: 20px;
+    background-color: #FFFFFF;
+    position: absolute;
+    right: 0;
+    top: 0;
+    box-sizing: border-box;
+    padding: 5px;
+}
+.cm_ai_answer.chat .cm_ai_html_icon{
     width: 32px;
     height: 32px;
     border-radius: 20px;
@@ -667,13 +812,23 @@ iframe{width:320px !important;height: 280px !important}
     display: block;
 }
 .cm_ai_answer .cm_ai_html{
-    width: 100%;
+    width: auto;
     min-height: 50px;
-    border-radius: 8px;
+    border-radius: 0 16px 16px 16px;
     line-height: 1.5715;
     background-color: #FFFFFF;
     box-sizing: border-box;
     padding: 10px;
+    font-size: 16px;
+    color: #666666;
+}
+.cm_ai_answer .cm_ai_html.user{
+    min-height: 50px;
+    margin-bottom: 0;
+    border-radius: 16px 16px 0 16px;
+    background-color: rgba(255, 91, 0, 0.1);
+    font-size: 16px;
+    color: #333333;
 }
 .cm_ai_answer .cm_ai_html .cm_ai_html_loading{
     width: 60px;
@@ -704,7 +859,3 @@ iframe{width:320px !important;height: 280px !important}
     text-decoration-color: #ff5b00;
     color: #ff5b00;
 }
-.cm_ai_answer .cm_ai_html.user{
-    min-height: 50px;
-    margin-bottom: 10px;
-}

src/main/resources/static/css/caimei-chat/chats.css

@@ -4,7 +4,7 @@
     height: 100%;
     background: #FFFFFF;
     }
-    #globalHead{width: 100%;height: auto;position: fixed;top: 0;left: 0;z-index: 1999;box-shadow: 3px 3px 5px rgba(0,0,0,.1);}
+    #globalHead{ width: 100%;height: auto;position: fixed;top: 0;left: 0;z-index: 1999;box-shadow: 3px 3px 5px rgba(0,0,0,.1);display: none;}
     #globalHead .baseHeadTop{ display: none; }
     #globalHead .baseTopNav{ display: none; }
     #globalHead .hotKey{ display: none; }
@@ -16,139 +16,322 @@
     height: 100%;
     }
     /*采美AI助手弹窗样式*/
-    .cm_ai_container{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding:78px 30px 30px 30px;
-    background-image: radial-gradient(circle at 14% 85%,#e7ecf7 0,rgba(231,236,247,0) 37%),radial-gradient(circle at 3.4% 3.7%,rgba(245,237,241,.5) 0,rgba(245,237,241,0) 28%),radial-gradient(circle at 100% 18%,#e8ebea 0,hsla(160,7%,92%,0) 30%),linear-gradient(180deg,#f5f4f6,#e6ebf7);
-    }
-    .cm_ai_content{
-    width: 800px;
-    height: auto;
-    margin: 0 auto;
-    background-color: #FFFFFF;
-    box-shadow: 0 16px 20px 0 rgba(174,167,223,.2);
-    border-radius: 8px;
-    box-sizing: border-box;
-    padding: 9px 10px 24px 10px;
-    position: relative;
-    }
+     .cm_ai_container_body{
+         width: 100%;
+         height: 100%;
+         box-sizing: border-box;
+         position: relative;
+         display: flex;
+     }
+     .cm_ai_container_records{
+         width: 300px;
+         box-shadow: 1px 0 20px rgba(0,0,0,.02);
+         display: flex;
+         flex-direction: column;
+         height: 100%;
+         box-sizing: border-box;
+         padding: 10px 24px;
+         position: absolute;
+         flex: 0 0 auto;
+         background-image: linear-gradient(180deg,#f0edf7 .03%,#ebeaf5 32.19%,#e8e8f3 68.86%,#e4eaf7 99.12%);
+     }
+     .cm_ai_container_records .cm_ai_records_btn{
+         height: 48px;
+         line-height: 16px;
+         cursor: pointer;
+         flex-shrink: 0;
+         padding: 16px 0;
+         box-sizing: border-box;
+         margin-bottom: 12px;
+         background-color: rgba(255, 91, 0, 0.05);
+         text-align: center;
+         border-radius: 8px;
+         display: flex;
+         justify-content: center;
+         color: #ff5b00 !important;
+         opacity: 1 ;
+     }
+     .cm_ai_container_records .cm_ai_records_btn.disabled{
+         cursor: not-allowed;
+         opacity: 0.7 ;
+     }
+     .cm_ai_container_records .cm_ai_records_btn.show:hover{
+         background-color: rgba(255, 91, 0, 0.1);
+     }
+     .cm_ai_container_records .cm_ai_records_btn .cm_ai_add{
+         width: 16px;
+         height: 16px;
+         display: flex;
+         background: url("/img/base/icon-aiAdd@2x.png") no-repeat;
+         background-size: cover;
+         margin-right: 3px;
+     }
+     .cm_ai_container_records .cm_ai_records_list{
+         flex: 1;
+         display: flex;
+         flex-direction: column;
+         overflow: hidden;
+     }
+     .cm_ai_container_records .cm_ai_records_item{
+         display: flex;
+         align-items: flex-start;
+         height: 62px;
+         padding: 14px 10px;
+         gap: 8px;
+         box-sizing: border-box;
+         flex-direction: column;
+         justify-content: space-between;
+         cursor: pointer;
+     }
+     .cm_ai_container_records .cm_ai_records_item:hover{
+         border-radius: 9px;
+         background: hsla(0, 0%, 100%, .5);
+     }
+     .cm_ai_container_records .cm_ai_records_item .content{
+         font-size: 14px;
+         font-weight: 500;
+         line-height: 14px;
+         color: #50525c;
+         display: -webkit-box;
+         text-overflow: ellipsis;
+         overflow: hidden;
+         word-break: break-all;
+         -webkit-line-clamp: 1;
+         -webkit-box-orient: vertical;
+     }
+     .cm_ai_container_records .cm_ai_records_item .time{
+         font-size: 12px;
+         font-weight: 400;
+         line-height: 12px;
+         color: #848691;
+     }
+     .cm_ai_container_records .cm_ai_records_user{
+         flex-shrink: 0;
+         display: flex;
+         align-items: center;
+         height: 72px;
+         padding: 0 22px;
+         font-size: 14px;
+         cursor: pointer;
+         border-top: 1px solid hsla(210, 3%, 87%, .5);
+     }
+     .cm_ai_container_records .cm_ai_records_user .avatar{
+         width: 24px;
+         height: 24px;
+         border-radius: 100%;
+         overflow: hidden;
+     }
+     .cm_ai_container_records .cm_ai_records_user .name{
+         margin-left: 8px;
+     }
+     .cm_ai_container_main{
+         width: calc(100% - 300px);
+         height: 100%;
+         margin-left: 300px;
+         background-image: radial-gradient(circle at 14% 85%,#e7ecf7 0,rgba(231,236,247,0) 37%),radial-gradient(circle at 3.4% 3.7%,rgba(245,237,241,.5) 0,rgba(245,237,241,0) 28%),radial-gradient(circle at 100% 18%,#e8ebea 0,hsla(160,7%,92%,0) 30%),linear-gradient(180deg,#f5f4f6,#e6ebf7);
+     }
+     .cm_ai_container{
+         width: 100%;
+         height: 100%;
+         display: flex;
+         flex-direction: column;
+         box-sizing: border-box;
+         padding:0 15px;
+         position: relative;
+     }
+     .cm_ai_mall_header{
+         box-sizing: border-box;
+         position: absolute;
+         left: 0;
+         top: 0;
+         right: 0;
+         display: flex;
+         align-items: center;
+         justify-content: space-between;
+         height: 64px;
+         width: 100%;
+         padding: 0 24px;
+         background-image: linear-gradient(360deg,#f0edf7 .03%,#ebeaf5 32.19%,#e8e8f3 68.86%,#e4eaf7 99.12%);
+         -webkit-backdrop-filter: blur(20px);
+         backdrop-filter: blur(20px);
+         z-index: 99;
+     }
+     .cm_ai_mall_header .cm_ai_logo{
+         display: flex;
+         align-items: center;
+         flex: 0 0 auto;
+     }
+     .cm_ai_mall_header .cm_ai_logo .logo{
+         width: 120px;
+         height: auto;
+     }
+     .cm_ai_mall_header .cm_ai_extra{
+         flex: none;
+     }
+     .cm_ai_mall_header .cm_ai_extra .index{
+         color: #1e1f24;
+         cursor: pointer;
+     }
+     .cm_ai_mall_header .cm_ai_extra .index:hover{
+         color: #ff5b00;
+     }
+     .cm_ai_content{
+         width: 850px;
+         height: auto;
+         background-color: #FFFFFF;
+         box-shadow: 0 16px 20px 0 rgba(174,167,223,.2);
+         border-radius: 8px;
+         box-sizing: border-box;
+         padding: 10px;
+         margin:0px auto 20px;
+         position: relative;
+     }
     .cm_ai_header{ width: 100%;height: 24px;box-sizing: border-box;justify-content: left;align-items: center;display: inline-flex;}
     .cm_ai_header .cm_ai_icon{ width: 24px;height: 24px;box-sizing: border-box;margin-right: 5px }
     .cm_ai_header .cm_ai_icon img{ width: 24px;height: 24px;display: block; }
     .cm_ai_header .cm_ai_text{line-height: 24px;font-size: 14px;color: #ff5b00;font-weight: 600; }
     .cm_ai_content .cm_ai_input{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    min-height: 60px;
-    padding: 0 ;
-    overflow: hidden;
-    box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        min-height: 60px;
+        padding: 0 ;
+        overflow: hidden;
+        box-sizing: border-box;
     }
     .cm_ai_content .cm_ai_input textarea{
-    width: 100%;
-    max-height: 106px !important;
-    font-size: 14px;
-    line-height: 1.5715;
-    background-color: transparent;
-    border: none;
-    box-shadow: none;
-    overflow: auto;
-    scrollbar-width:none;
-    resize: none;
-    box-sizing: border-box;
-    padding-left: 4px;
+        width: 100%;
+        max-height: 106px !important;
+        min-height: 60px !important;
+        font-size: 14px;
+        line-height: 1.5715;
+        background-color: transparent;
+        border: none;
+        box-shadow: none;
+        overflow: auto;
+        scrollbar-width:none;
+        resize: none;
+        box-sizing: border-box;
+        padding-left: 4px;
     }
     .cm_ai_content .cm_ai_input textarea:focus {
-    outline: none;
-    }
-    .cm_ai_content .cm_ai_button{
-    width: 40px;
-    height: 24px;
-    position: absolute;
-    right: 6px;
-    bottom: 6px;
-    border-radius: 16px;
-    background-image: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    transition: all .16s;
-    cursor: pointer;
-    }
-    .cm_ai_content .cm_ai_button.none{
-    opacity: 0.5;
-    }
-    .cm_ai_content .cm_ai_button .cm_ai_icon{
-    width: 14px;
-    height: 14px;
-    margin: 0 auto;
-    display: block;
-    transition: all .16s;
+        outline: none;
     }
+     .cm_ai_content .cm_ai_button_main{
+         position: relative;
+         right: 0;
+         bottom: 0;
+         display: flex;
+         flex-direction: row-reverse;
+         justify-content: space-between;
+         width: 100%;
+         height: 32px;
+         margin-top: 4px;
+     }
+     .cm_ai_content .cm_ai_button{
+         width: 66px;
+         height: 32px;
+         border-radius: 4px;
+         background-image: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
+         display: inline-flex;
+         align-items: center;
+         justify-content: center;
+         transition: all .16s;
+         cursor: pointer;
+     }
+     .cm_ai_content .cm_ai_button.none{
+         opacity: 0.5;
+     }
+     .cm_ai_content .cm_ai_button .cm_ai_icon{
+         transition: all .16s;
+         color: #FFFFFF;
+     }
     .cm_ai_content .cm_ai_button:hover{
-    transform: scale(1.05);
+        transform: scale(1.05);
     }
     .cm_ai_content .cm_ai_button:hover .cm_ai_icon{
-    transform: scale(1.05);
+        transform: scale(1.05);
     }
     .cm_ai_answer_main{
-    width: 800px;
-    min-height: 600px;
-    margin: 0 auto;
-    overflow-y: auto;
-    flex: 9;
-    padding: 10px 0 0 0;
-    margin-bottom: 15px;
+        width: 850px;
+        min-height: 600px;
+        margin: 0 auto 15px;
+        overflow-y: auto;
+        flex: 9;
+        padding: 64px 0 0 0;
     }
     .cm_ai_answer_main::-webkit-scrollbar{
-    display: none;
+        display: none;
     }
     .cm_ai_answer{
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    padding-left:36px;
-    position: relative;
+        width: 100%;
+        height: auto;
+        box-sizing: border-box;
+        padding-left:36px;
+        position: relative;
+        display: flex;
+        justify-content: flex-start;
     }
-    .cm_ai_answer .cm_ai_html_icon{
-    width: 32px;
-    height: 32px;
-    border-radius: 20px;
-    background-color: #FFFFFF;
-    position: absolute;
-    left: 0;
-    top: 0;
-    box-sizing: border-box;
-    padding: 5px;
+    .cm_ai_answer.user{
+         padding-left:0px;
+         padding-right:36px;
+         justify-content: flex-end;
+    }
+    .cm_ai_answer.user .cm_ai_html_icon{
+        width: 32px;
+        height: 32px;
+        border-radius: 20px;
+        background-color: #FFFFFF;
+        position: absolute;
+        right: 0;
+        top: 0;
+        box-sizing: border-box;
+        padding: 5px;
+    }
+    .cm_ai_answer.chat .cm_ai_html_icon{
+        width: 32px;
+        height: 32px;
+        border-radius: 20px;
+        background-color: #FFFFFF;
+        position: absolute;
+        left: 0;
+        top: 0;
+        box-sizing: border-box;
+        padding: 5px;
     }
     .cm_ai_answer .cm_ai_html_icon.user{
-    background-color: rgba(255,91,0,0.1);
+        background-color: rgba(255,91,0,0.1);
     }
     .cm_ai_answer .cm_ai_html_icon img{
-    width: 22px;
-    height: 22px;
-    border-radius: 20px;
-    display: block;
+        width: 22px;
+        height: 22px;
+        border-radius: 20px;
+        display: block;
     }
     .cm_ai_answer .cm_ai_html{
-     width: 100%;
-     min-height: 50px;
-     border-radius: 8px;
-     line-height: 1.5715;
-     background-color: #FFFFFF;
-     box-sizing: border-box;
-     padding: 10px;
-    }
+         width: auto;
+         min-height: 50px;
+         border-radius: 0 16px 16px 16px;
+         line-height: 1.5715;
+         background-color: #FFFFFF;
+         box-sizing: border-box;
+         padding: 10px;
+         font-size: 16px;
+         color: #666666;
+     }
+     .cm_ai_answer .cm_ai_html.user{
+         min-height: 50px;
+         margin-bottom: 0;
+         border-radius: 16px 16px 0 16px;
+         background-color: rgba(255, 91, 0, 0.1);
+         font-size: 16px;
+         color: #333333;
+     }
     .cm_ai_answer .cm_ai_html .cm_ai_html_loading{
-    width: 60px;
+        width: 60px;
     }
-     .cm_ai_answer .cm_ai_link{
+    .cm_ai_answer .cm_ai_link{
          width: 100%;
          min-height: 100px;
          border-radius: 8px;
@@ -174,10 +357,6 @@
          text-decoration-color: #ff5b00;
          color: #ff5b00;
      }
-    .cm_ai_answer .cm_ai_html.user{
-    min-height: 50px;
-    margin-bottom: 10px;
-    }
     footer{display: none;}
     #scrollTop .item .phone{ display: none; }
     #scrollTop .item .Iphone{ display: none; }
@@ -186,177 +365,231 @@
 
 /*移动端**/
  @media screen and (max-width:768px){
-  html,body{
-    height: 100%;
-    background: #FFFFFF;
-  }
-  .baseHeadCenter{ height: 14vw;}
-  .baseHeadCenter .searchBox{display: none;}
-  #caimei-chat-content{
-   height: 100%;
-  }
-  /*采美AI助手弹窗样式*/
-  .cm_ai_container{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding:14vw 3vw 0 3vw;
-    background-image: radial-gradient(circle at 14% 85%,#e7ecf7 0,rgba(231,236,247,0) 37%),radial-gradient(circle at 3.4% 3.7%,rgba(245,237,241,.5) 0,rgba(245,237,241,0) 28%),radial-gradient(circle at 100% 18%,#e8ebea 0,hsla(160,7%,92%,0) 30%),linear-gradient(180deg,#f5f4f6,#e6ebf7);
-    overflow: auto;
-  }
-  .cm_ai_content{
-    width: 100%;
-    height: auto;
-    background-color: #FFFFFF;
-    box-shadow: 0 16px 20px 0 rgba(174,167,223,.2);
-    border-radius: 8px;
-    box-sizing: border-box;
-    padding: 9px 10px 24px 10px;
-    margin:15px 0;
-    position: relative;
-  }
-  .cm_ai_header{ width: 100%;height: 24px;box-sizing: border-box;justify-content: left;align-items: center;display: inline-flex;}
-  .cm_ai_header .cm_ai_icon{ width: 24px;height: 24px;box-sizing: border-box;margin-right: 5px }
-  .cm_ai_header .cm_ai_icon img{ width: 24px;height: 24px;display: block; }
-  .cm_ai_header .cm_ai_text{line-height: 24px;font-size: 14px;color: #ff5b00;font-weight: 600; }
-  .cm_ai_content .cm_ai_input{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    min-height: 60px;
-    padding: 0 ;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-  .cm_ai_content .cm_ai_input textarea{
-    width: 100%;
-    max-height: 106px !important;
-    font-size: 14px;
-    line-height: 1.5715;
-    background-color: transparent;
-    border: none;
-    box-shadow: none;
-    overflow: auto;
-    scrollbar-width:none;
-    resize: none;
-    box-sizing: border-box;
-    padding-left: 4px;
-  }
-  .cm_ai_content .cm_ai_input textarea:focus {
-   outline: none;
-  }
-  .cm_ai_content .cm_ai_button{
-    width: 40px;
-    height: 24px;
-    position: absolute;
-    right: 6px;
-    bottom: 6px;
-    border-radius: 16px;
-    background-image: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    transition: all .16s;
-    cursor: pointer;
-  }
-  .cm_ai_content .cm_ai_button.none{
-    opacity: 0.5;
-  }
-  .cm_ai_content .cm_ai_button .cm_ai_icon{
-    width: 16px;
-    height: 16px;
-    margin: 0 auto;
-    display: block;
-    transition: all .16s;
-  }
-  .cm_ai_content .cm_ai_button:hover{
-    transform: scale(1.05);
-  }
-  .cm_ai_content .cm_ai_button:hover .cm_ai_icon{
-    transform: scale(1.05);
-  }
-  .cm_ai_answer_main{
-    width: 100%;
-    min-height: 100vw;
-    overflow-y: auto;
-    flex: 9;
-    padding: 2vw 0 0 0;
-  }
-  .cm_ai_answer_main::-webkit-scrollbar{
-    display: none;
-  }
-  .cm_ai_answer{
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    padding-left:36px;
-    position: relative;
-    margin: 10px 0;
-  }
-  .cm_ai_answer .cm_ai_html_icon{
-    width: 32px;
-    height: 32px;
-    border-radius: 20px;
-    background-color: #FFFFFF;
-    position: absolute;
-    left: 0;
-    top: 0;
-    box-sizing: border-box;
-    padding: 5px;
-  }
-  .cm_ai_answer .cm_ai_html_icon.user{
-    background-color: rgba(255,91,0,0.1);
-  }
-  .cm_ai_answer .cm_ai_html_icon img{
-    width: 22px;
-    height: 22px;
-    border-radius: 20px;
-    display: block;
-  }
-  .cm_ai_answer .cm_ai_html{
-    width: 100%;
-    min-height: 50px;
-    border-radius: 8px;
-    line-height: 1.5715;
-    background-color: #FFFFFF;
-    box-sizing: border-box;
-    padding: 10px;
-  }
-  .cm_ai_answer .cm_ai_html .cm_ai_html_loading{
-      width: 60px;
-  }
-  .cm_ai_answer .cm_ai_link{
-    width: 100%;
-    min-height: 100px;
-    border-radius: 8px;
-    line-height: 1.5715;
-    background-color: #FFFFFF;
-    box-sizing: border-box;
-    margin: 10px 0 0 0;
-  }
-  .cm_ai_answer .cm_ai_link .cm_ai_link_p{
-    line-height: 22px;
-    font-size: 14px;
-    color: #666666;
-  }
-  .cm_ai_answer .cm_ai_link .cm_ai_link_a{
-    width: 100%;
-    line-height: 22px;
-    font-size: 14px;
-    color: #999999;
-    display: inline-block;
-    text-decoration: underline;
-  }
- .cm_ai_answer .cm_ai_link .cm_ai_link_a:hover{
-     text-decoration-color: #666666;
-     color: #666666;
- }
-  .cm_ai_answer .cm_ai_html.user{
-    min-height: 50px;
-    margin-bottom: 10px;
-  }
-  footer{display: none;}
+    html,body{
+        height: 100%;
+        background: #FFFFFF;
+    }
+     #globalHead{ display: none;}
+    .baseHeadCenter{ height: 14vw;}
+    .baseHeadCenter .searchBox{display: none;}
+    /*采美AI助手弹窗样式*/
+     #caimei-chat-content,.cm_ai_container_body,.cm_ai_container_main{
+         width: 100%;
+         height: 100%;
+         position: relative;
+     }
+    .cm_ai_container_records{
+         display: none;
+    }
+    .cm_ai_container{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        padding:0 3vw 0 3vw;
+        background-image: radial-gradient(circle at 14% 85%,#e7ecf7 0,rgba(231,236,247,0) 37%),radial-gradient(circle at 3.4% 3.7%,rgba(245,237,241,.5) 0,rgba(245,237,241,0) 28%),radial-gradient(circle at 100% 18%,#e8ebea 0,hsla(160,7%,92%,0) 30%),linear-gradient(180deg,#f5f4f6,#e6ebf7);
+        overflow: auto;
+        position: relative;
+    }
+     .cm_ai_mall_header{
+         box-sizing: border-box;
+         position: absolute;
+         left: 0;
+         top: 0;
+         right: 0;
+         display: flex;
+         align-items: center;
+         justify-content: space-between;
+         height: 14vw;
+         width: 100%;
+         padding: 0 3vw;
+         background-image: linear-gradient(360deg,#f0edf7 .03%,#ebeaf5 32.19%,#e8e8f3 68.86%,#e4eaf7 99.12%);
+         -webkit-backdrop-filter: blur(20px);
+         backdrop-filter: blur(20px);
+         z-index: 99;
+     }
+     .cm_ai_mall_header .cm_ai_logo{
+         display: flex;
+         align-items: center;
+         flex: 0 0 auto;
+     }
+     .cm_ai_mall_header .cm_ai_logo .logo{
+         width: 26vw;
+         height: auto;
+     }
+     .cm_ai_mall_header .cm_ai_extra{
+         flex: none;
+     }
+     .cm_ai_mall_header .cm_ai_extra .index{
+         color: #1e1f24;
+         cursor: pointer;
+     }
+    .cm_ai_content{
+        width: 100%;
+        height: auto;
+        background-color: #FFFFFF;
+        box-shadow: 0 16px 20px 0 rgba(174,167,223,.2);
+        border-radius: 8px;
+        box-sizing: border-box;
+        padding: 10px;
+        margin:15px 0;
+        position: relative;
+    }
+    .cm_ai_header{ width: 100%;height: 24px;box-sizing: border-box;justify-content: left;align-items: center;display: inline-flex;}
+    .cm_ai_header .cm_ai_icon{ width: 24px;height: 24px;box-sizing: border-box;margin-right: 5px }
+    .cm_ai_header .cm_ai_icon img{ width: 24px;height: 24px;display: block; }
+    .cm_ai_header .cm_ai_text{line-height: 24px;font-size: 14px;color: #ff5b00;font-weight: 600; }
+    .cm_ai_content .cm_ai_input{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        min-height: 60px;
+        padding: 5px 0;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+    .cm_ai_content .cm_ai_input textarea{
+        width: 100%;
+        max-height: 106px !important;
+        min-height: 60px !important;
+        font-size: 14px;
+        line-height: 1.5715;
+        background-color: transparent;
+        border: none;
+        box-shadow: none;
+        overflow: auto;
+        scrollbar-width:none;
+        resize: none;
+        box-sizing: border-box;
+        padding-left: 4px;
+    }
+    .cm_ai_content .cm_ai_input textarea:focus {
+        outline: none;
+    }
+    .cm_ai_content .cm_ai_button_main{
+         position: relative;
+         right: 0;
+         bottom: 0;
+         display: flex;
+         flex-direction: row-reverse;
+         justify-content: space-between;
+         width: 100%;
+         height: 32px;
+         margin-top: 4px;
+     }
+     .cm_ai_content .cm_ai_button{
+         width: 66px;
+         height: 32px;
+         border-radius: 4px;
+         background-image: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
+         display: inline-flex;
+         align-items: center;
+         justify-content: center;
+         transition: all .16s;
+         cursor: pointer;
+     }
+     .cm_ai_content .cm_ai_button.none{
+         opacity: 0.5;
+     }
+     .cm_ai_content .cm_ai_button .cm_ai_icon{
+         transition: all .16s;
+         color: #FFFFFF;
+     }
+    .cm_ai_content .cm_ai_button:hover{
+        transform: scale(1.05);
+    }
+    .cm_ai_content .cm_ai_button:hover .cm_ai_icon{
+        transform: scale(1.05);
+    }
+    .cm_ai_answer_main{
+        width: 100%;
+        min-height: 100vw;
+        overflow-y: auto;
+        flex: 9;
+        padding: 14vw 0 0 0;
+    }
+    .cm_ai_answer_main::-webkit-scrollbar{
+        display: none;
+    }
+    .cm_ai_answer{
+        width: 100%;
+        height: auto;
+        box-sizing: border-box;
+        position: relative;
+        margin: 10px 0;
+        display: flex;
+        justify-content: flex-start;
+    }
+    .cm_ai_answer.user{
+        justify-content: flex-end;
+    }
+    .cm_ai_answer .cm_ai_html_icon{
+        width: 32px;
+        height: 32px;
+        border-radius: 20px;
+        background-color: #FFFFFF;
+        position: absolute;
+        left: 0;
+        top: 0;
+        box-sizing: border-box;
+        padding: 5px;
+        display: none;
+    }
+    .cm_ai_answer .cm_ai_html_icon.user{
+        background-color: rgba(255,91,0,0.1);
+    }
+    .cm_ai_answer .cm_ai_html_icon img{
+        width: 22px;
+        height: 22px;
+        border-radius: 20px;
+        display: block;
+    }
+    .cm_ai_answer .cm_ai_html{
+        min-height: 50px;
+        border-radius: 0 16px 16px 16px;
+        line-height: 1.5715;
+        background-color: #FFFFFF;
+        box-sizing: border-box;
+        padding: 10px;
+    }
+    .cm_ai_answer .cm_ai_html.user{
+         min-height: 50px;
+         border-radius: 16px 16px 0 16px;
+         background-color: rgba(255, 91, 0, 0.1);
+         font-size: 16px;
+         color: #666666;
+    }
+    .cm_ai_answer .cm_ai_html .cm_ai_html_loading{
+        width: 60px;
+    }
+    .cm_ai_answer .cm_ai_link{
+        width: 100%;
+        min-height: 100px;
+        border-radius: 8px;
+        line-height: 1.5715;
+        background-color: #FFFFFF;
+        box-sizing: border-box;
+        margin: 10px 0 0 0;
+    }
+    .cm_ai_answer .cm_ai_link .cm_ai_link_p{
+        line-height: 22px;
+        font-size: 14px;
+        color: #666666;
+    }
+    .cm_ai_answer .cm_ai_link .cm_ai_link_a{
+        width: 100%;
+        line-height: 22px;
+        font-size: 14px;
+        color: #999999;
+        display: inline-block;
+        text-decoration: underline;
+    }
+    .cm_ai_answer .cm_ai_link .cm_ai_link_a:hover{
+         text-decoration-color: #666666;
+         color: #666666;
+    }
+
+    footer{display: none;}
 }

src/main/resources/static/js/base.js

@@ -318,7 +318,7 @@ var globalHead = new Vue({
                 // 获取头部通知消息数量
                 var timerClubCount = setInterval(function(){
                     _self.getAuthClubCount(_self.userData.clubId);
-                }, 1000*120);
+                }, 1000*600);
             }
         }
         // 信息中心

src/main/resources/static/js/caimei-chat/chats.js

@@ -4,38 +4,15 @@
 const cmChats = new Vue({
     el:"#caimei-chat-content",
     mixins: [cmAiMixins],
-    data: {
+    data() {
 
     },
     computed: {
 
     },
     methods: {
-        openFullScreen2() {
-            const _this = this
-            const loading = this.$loading({
-                lock: true,
-                text: 'Loading',
-                spinner: 'el-icon-loading',
-                background: 'rgba(255, 255, 255, 1)'
-            });
-            setTimeout(() => {
-                _this.isLoading = true
-                loading.close();
-            }, 1000);
-            setTimeout(() => {
-            }, 1100);
-        },
-        getVoteList(){
-            const _self = this;
-            PublicApi.getVoteList({},function (response) {//列表初始化
-                if(response.code===0){
-                    console.log('111111111',response.data)
-                    const data = response.data
-                    _self.voteList = data.voteList // 供应商
-                    _self.categoryList = data.categoryList // 品类
-                }
-            })
+        handleClickIndex(){// 跳转首页
+            window.open('/index.html')
         }
     },
     created () {
@@ -43,12 +20,13 @@ const cmChats = new Vue({
     },
     mounted () {
         if(globalUserData){
-            this.chatParams.userId = globalUserData.userId;
+            this.clubName = globalUserData.name
+            this.chatParams.userId = this.chatHistoryParams.userId = globalUserData.userId;
             this.chatParams.question = ''
+            this.getChatHistory()
         }else{
             window.location.href = '/login.html'
         }
-        // this.openFullScreen2()
     }
 });
 

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -681,7 +681,12 @@ var PublicApi = {
                 callback(res);
             });
         },
-        userNewChat: function (params, callback) {//分配协销
+        /**
+         * @采美AI助手-提问
+         * @param:userId 用户userId
+         * @param:question 问题码
+         */
+        userNewChat: function (params, callback) {
             Http.AjaxService({
                 url: '/user/chat/new/chat',
                 type:'get',
@@ -691,6 +696,56 @@ var PublicApi = {
             }).then(function (res) {
                 callback(res);
             });
+        },
+        /**
+         * @采美AI助手-提问
+         * @param:chatId 记录ID
+         * @param:userId 用户userId
+         * @param:question 问题码
+         */
+        userSecondChat: function (params, callback) {
+            Http.AjaxService({
+                url: '/user/chat/second/chat',
+                type:'get',
+                data:params,
+                json:false,
+                isHost:true
+            }).then(function (res) {
+                callback(res);
+            });
+        },
+        /**
+         * @采美AI助手-提问记录
+         * @param:userId 用户userId
+         * @param:pageNum 每页页码
+         * @param:pageSize 条数
+         */
+        userNewChatHistory: function (params, callback) {
+            Http.AjaxService({
+                url: '/user/chat/chat/history',
+                type:'get',
+                data:params,
+                json:false,
+                isHost:true
+            }).then(function (res) {
+                callback(res);
+            });
+        },
+        /**
+         * @采美AI助手-提问记录详情
+         * @param:userId 用户userId
+         * @param:chatId 记录Id
+         */
+        userNewChatDetail: function (params, callback) {
+            Http.AjaxService({
+                url: '/user/chat/history/detail',
+                type:'get',
+                data:params,
+                json:false,
+                isHost:true
+            }).then(function (res) {
+                callback(res);
+            });
         }
 };
 

src/main/resources/static/js/mixins/cmAiMixins.js

@@ -4,15 +4,30 @@ var cmAiMixins = function () {
         data() {
             return {
                 isAiDrawer: false,
-                textarea: '',
                 isLoading: false,
                 chatParams:{
                     userId:'',
                     question:''
-                }
+                },
+                chatHistoryParams:{
+                    userId:'',
+                    pageNum:1,
+                    pageSize:10
+                },
+                chatHistory:[],
+                questionTextarea:'',
+                probeChatId:0,
+                probeIndex:0,
+                clubName:''
+            }
+        },
+        computed: {
+            disabled(){
+                return !this.probeIndex
             }
         },
         methods: {
+            // 关闭弹窗
             handleClose(done) {
                 this.$confirm('确认退出AI助手？')
                     .then(_ => {
@@ -23,44 +38,40 @@ var cmAiMixins = function () {
                     })
                     .catch(_ => {});
             },
+            // 显示弹窗
             handleShowAiDrawer(){
                 if(globalUserData){
                     this.isAiDrawer = true
-                    this.chatParams.userId = globalUserData.userId;
+                    this.clubName = globalUserData.name
+                    this.chatParams.userId = this.chatHistoryParams.userId = globalUserData.userId;
                     this.chatParams.question = ''
+                    this.getChatHistory()
                 }else{
                     window.location.href = '/login.html'
                 }
-
+            },
+            //新建对话
+            handleCreatedChat(){
+                if(this.isLoading){ return; }
+                const answerContainer = document.getElementById('cm_ai_answer')
+                answerContainer.innerHTML = ''
+                this.probeIndex = 0
+                this.questionTextarea = ''
+                this.chatParams.question = ''
             },
             // 检查是否按下了回车键执行AI搜索
             handleKeyDown(event){
                 if (event.key === 'Enter') {
                     // 阻止默认的换行行为（可选，根据你的需求来决定是否需要）
                     event.preventDefault();
-                    // 在这里执行你想要的逻辑
-                    console.log('回车键被按下，当前文本:', this.textarea);
+                    console.log('回车键被按下，当前文本:', this.questionTextarea);
                     // 或者发送数据到服务器等
                     this.handleAskQuestion()
                 }
             },
-            getUserNewChats(){
-                const _this = this;
-                return new Promise((resolve, reject) => {
-                    alert('202020')
-                    PublicApi.userNewChat(_this.chatParams, function(response) {
-                        alert('10101010')
-                        if (response.code === 0) {
-                            alert('00000000')
-                            resolve(response.data)
-                            alert('11111111')
-                        } else {
-                            reject(new Error('Failed to fetch new chats'));
-                        }
-                    });
-                });
-            },
+            // 发送按钮点击事件
             handleAskQuestion(){
+                this.chatParams.question = this.questionTextarea
                 if(this.isLoading){ return; }
                 if (!this.chatParams.question){
                     this.$message({
@@ -76,10 +87,25 @@ var cmAiMixins = function () {
                 console.log('isLoading',this.isLoading)
                 this.handleCreateChartHtml(answerContent)
             },
+            // 初始化cm_ai_answer
+            handleCreatedInfoHtml(){
+                // 创建一个新的div元素，并设置其类名为'cm_ai_answer'
+                const answerElement = document.createElement('div');
+                answerElement.className = 'cm_ai_answer chat';
+                // 创建第一个子元素，包含图标
+                const iconDivStr ='<div class="cm_ai_html_icon chat"><img src="/img/base/icon-aiUser@2x.png"></div>'
+                // 创建第二个子元素，用于显示内容
+                const contentUserStr =`<div class="cm_ai_html chat"><h1>Hi，我是采美AI助手</h1>我是您的AI助手，欢迎向我提出您的疑问，我会根据你给出的问题提供相对应的回答~</div>`
+                answerElement.innerHTML += iconDivStr
+                answerElement.innerHTML += contentUserStr
+                // 最后，将answerElement添加到页面的某个现有元素中，例如body
+                answerContent.appendChild(answerElement);
+            },
+            // 创建用户html
             handleCreateUserHtml(question,answerContent){
                 // 创建一个新的div元素，并设置其类名为'cm_ai_answer'
                 const answerElement = document.createElement('div');
-                answerElement.className = 'cm_ai_answer';
+                answerElement.className = 'cm_ai_answer user';
                 // 创建第一个子元素，包含图标
                 const iconDivStr ='<div class="cm_ai_html_icon user"><img src="/img/base/icon-aiUser@2x.png"></div>'
                 // 创建第二个子元素，用于显示内容
@@ -89,11 +115,12 @@ var cmAiMixins = function () {
                 // 最后，将answerElement添加到页面的某个现有元素中，例如body
                 answerContent.appendChild(answerElement);
             },
+            // 生成
             handleCreateChartHtml(answerContent){
                 const _this = this;
                 // 创建一个新的div元素，并设置其类名为'cm_ai_answer'
                 const answerElement = document.createElement('div');
-                answerElement.className = 'cm_ai_answer';
+                answerElement.className = 'cm_ai_answer chat';
                 // 创建第一个子元素，包含图标
                 const iconDivStr ='<div class="cm_ai_html_icon"><img src="/img/base/icon-ai@1x.png"></div>'
                 const loadingImgStr ='<img class="cm_ai_html_loading" src="/img/base/loading.gif">'
@@ -108,54 +135,77 @@ var cmAiMixins = function () {
                 // 最后，将answerElement添加到页面的某个现有元素中，例如body
                 answerContent.appendChild(answerElement);
                 setTimeout(()=>{
-                   _this.handleCreatedResponse(contentHtml,answerContent)
+                    if(this.probeIndex === 0){
+                        _this.handleGetUserNewChats(contentHtml,answerContent)
+                    }else{
+                        _this.handleGetUserSecondChat(contentHtml,answerContent)
+                    }
                 },250)
             },
-            async handleCreatedResponse(contentHtml,answerContent){
-                const _this = this;
+            // 初次调用
+            async handleGetUserNewChats(contentHtml,answerContent){
                 try {
-                    const data = await _this.getUserNewChats()
-                    const aiResponseLines = data.result
-                    const search_results = data.search_info ? data.search_info.search_results : null
-                    const aiResponsText = aiResponseLines
-                        .replace(/\\n\\n/g, '') // 替换换行符
-                        .replace(/\* \*\*([^<]+?)\*\*/g, ''); // 替换加粗部分
-                    console.log('aiResponsText',aiResponsText)
-                    console.log('search_info',search_results)
-                    document.querySelector('img.cm_ai_html_loading').remove()
-                    // 打字函数
-                    let currentIndex = 0
-                    const speed = 30
-                    function typeEffect() {
-                        // 如果已经显示完所有字符，则停止
-                        if (currentIndex < aiResponsText.length) {
-                            // 逐个字符添加到打字效果的元素中
-                            contentHtml.innerHTML += aiResponsText.charAt(currentIndex)
-                            // 更新索引
-                            currentIndex++
-                            // 递归调用，直到显示完所有字符
-                            setTimeout(typeEffect, speed)
-                            // 滚动到容器底部（如果内容超出了可视区域）
-                            answerContent.scrollTop = answerContent.scrollHeight;
-                        }else{
-                            // 如果有推荐信息源的话执行
-                            if(search_results){
-                                _this.handleCreateChartLink(contentHtml,search_results)
-                            }
-                            _this.isLoading = false
-                        }
-                    }
-                    // 开始打字效果
-                    typeEffect()
+                    this.questionTextarea = ''
+                    const data = await this.getUserNewChats(this.chatParams)
+                    this.probeChatId = data.chatId
+                    this.handleResponseHtml(data,contentHtml,answerContent)
                 } catch (error) {
                     console.error('Error fetching new chats:', error);
                 }
             },
+            // 调用追问
+            async handleGetUserSecondChat(contentHtml,answerContent){
+                try {
+                    this.questionTextarea = ''
+                    const data = await this.getUserSecondChat({chatId:this.probeChatId,...this.chatParams})
+                    this.handleResponseHtml(data,contentHtml,answerContent)
+                } catch (error) {
+                    console.error('Error fetching new chats:', error);
+                }
+            },
+            // 数据显示
+            handleResponseHtml(data,contentHtml,answerContent){
+                const _this = this;
+                // 替换换行符 ,替换加粗部分
+                const aiResponsText = data.result.replace(/\\n\\n/g, '').replace(/\* \*\*([^<]+?)\*\*/g, '');
+                // console.log('aiResponsText',aiResponsText)
+                // console.log('search_info',search_results)
+                document.querySelector('img.cm_ai_html_loading').remove()
+                // 打字函数
+                let currentIndex = 0
+                const speed = 30
+                function typeEffect() {
+                    // 如果已经显示完所有字符，则停止
+                    if (currentIndex < aiResponsText.length) {
+                        // 逐个字符添加到打字效果的元素中
+                        contentHtml.innerHTML += aiResponsText.charAt(currentIndex)
+                        // 更新索引
+                        currentIndex++
+                        // 递归调用，直到显示完所有字符
+                        setTimeout(typeEffect, speed)
+                        // 滚动到容器底部（如果内容超出了可视区域）
+                        answerContent.scrollTop = answerContent.scrollHeight;
+                    }else{
+                        // 如果有推荐信息源的话执行
+                        if(data.search_info){
+                            _this.handleCreateChartLink(contentHtml,data.search_info.search_results)
+                        }
+                        _this.probeIndex++
+                        _this.getChatHistory()
+                        _this.isLoading = false
+                        // 滚动到容器底部（如果内容超出了可视区域）
+                        answerContent.scrollTop = answerContent.scrollHeight;
+                    }
+                }
+                // 开始打字效果
+                typeEffect()
+            },
+            // 参考信息源渲染
             handleCreateChartLink(contentHtml,search_results){
                 const contentLink = document.createElement('div')
                 contentLink.className = 'cm_ai_link'
                 // 创建第二个子元素，用于显示内容
-                const linkPstr = `<p class="cm_ai_link_p" target="_blank">参考${search_results.length}条信息源</p>`
+                const linkPstr = `<p class="cm_ai_link_p">参考${search_results.length}条信息源</p>`
                 contentLink.innerHTML += linkPstr
                 contentHtml.appendChild(contentLink)
                 // 循环插入信息源内容，可跳转链接
@@ -165,24 +215,94 @@ var cmAiMixins = function () {
                     contentLink.innerHTML += linkStr
                 });
             },
-            // 图像加载后的处理函数
-            adjustScrollIfNeeded(element,container) {
-                // 等待DOM更新（可选，但在某些情况下可能需要）
-                requestAnimationFrame(() => {
-                    // 计算元素相对于容器的顶部位置
-                    const offsetTop = element.offsetTop;
-                    const containerRect = container.getBoundingClientRect();
-                    const visibleHeight = containerRect.bottom - containerRect.top; // 容器的可视高度
-                    // 检查元素是否在可视区域内
-                    // 如果不在，则调整容器的scrollTop
-                    console.log('element-offsetTop',offsetTop)
-                    console.log('container-containerRect',containerRect)
-                    console.log('visibleHeight',visibleHeight)
-                    if (offsetTop < container.scrollTop || offsetTop + element.offsetHeight > container.scrollTop + visibleHeight) {
-                        // 这里我们简单地将scrollTop设置为新内容的顶部
-                        // 但你可以根据需要调整这个逻辑，比如保持元素居中或靠近容器顶部/底部
-                        container.scrollTop = offsetTop;
+            // 查询记录
+            async getChatHistory(){
+                const data = await this.userNewChatHistory(this.chatHistoryParams)
+                console.log('chatHistory',data)
+                this.chatHistory = data
+            },
+            // 查询详情
+            async handleChatDetail(chatId){
+                try{
+                    const list = await this.userNewChatDetail({ userId:this.chatParams.userId,chatId:chatId })
+                    this.handleCreateDetailHtml(list)
+                } catch (error) {
+                    console.error('Error fetching new chats:', error);
+                }
+            },
+            // 渲染记录详情html
+            handleCreateDetailHtml(list){
+                console.log('Detail',list)
+                const answerContent = document.getElementById('cm_ai_answer')
+                answerContent.innerHTML = ''
+                // 初始化一个空的字符串来存储构建的 HTML
+                let htmlContent = '';
+                // 循环处理 list 数组
+                list.forEach(item => {
+                    // 根据 identity 的值构建不同的 HTML 结构
+                    let iconSrc, className;
+                    if (item.identity === 0) {
+                        iconSrc = '/img/base/icon-aiUser@2x.png';
+                        className = 'user';
+                    } else {
+                        iconSrc = '/img/base/icon-ai@1x.png';
+                        className = 'chat'; // 如果不需要特别的类名，这里可以留空
                     }
+
+                    // 拼接 HTML 字符串
+                    htmlContent += `<div class="cm_ai_answer ${className}"><div class="cm_ai_html_icon ${className}"><img src="${iconSrc}"></div>  
+                                    <div class="cm_ai_html ${className}">${item.message}</div></div>`;
+                });
+                // 将构建好的 HTML 字符串设置到 answerContent 中
+                answerContent.innerHTML = htmlContent;
+                answerContent.scrollTop = answerContent.scrollHeight;
+            },
+            // 查询详情
+            userNewChatDetail(params){// 查询详情
+                return new Promise((resolve, reject) => {
+                    PublicApi.userNewChatDetail(params, function(response) {
+                        if (response.code === 0) {
+                            resolve(response.data)
+                        } else {
+                            reject(new Error('Failed to fetch new chats'));
+                        }
+                    });
+                });
+            },
+            // 查询记录
+            userNewChatHistory(params){
+                return new Promise((resolve, reject) => {
+                    PublicApi.userNewChatHistory(params, function(response) {
+                        if (response.code === 0) {
+                            resolve(response.data)
+                        } else {
+                            reject(new Error('Failed to fetch new chats'));
+                        }
+                    });
+                });
+            },
+            // 查询获取问题结果
+            getUserNewChats(params){
+                return new Promise((resolve, reject) => {
+                    PublicApi.userNewChat(params, function(response) {
+                        if (response.code === 0) {
+                            resolve(response.data)
+                        } else {
+                            reject(new Error('Failed to fetch new chats'));
+                        }
+                    });
+                });
+            },
+            // 追问
+            getUserSecondChat(params){
+                return new Promise((resolve, reject) => {
+                    PublicApi.userSecondChat(params, function(response) {
+                        if (response.code === 0) {
+                            resolve(response.data)
+                        } else {
+                            reject(new Error('Failed to fetch new chats'));
+                        }
+                    });
                 });
             }
         }

src/main/resources/templates/caimei-chat/chats.html

@@ -13,35 +13,55 @@
   <!-- 引用头部 -->
   <template th:replace="components/header"></template>
   <div id="caimei-chat-content" v-cloak>
-      <div class="cm_ai_container">
-          <div class="cm_ai_answer_main" id="cm_ai_answer">
-<!--                    <div class="cm_ai_answer">-->
-<!--                      <div class="cm_ai_html_icon user">-->
-<!--                        <img src="/img/base/icon-aiUser@2x.png">-->
-<!--                      </div>-->
-<!--                      <div class="cm_ai_html user" id="cm_ai_htmlcontent_user"></div>-->
-<!--                    </div>-->
-<!--                    <div class="cm_ai_answer">-->
-<!--                      <div class="cm_ai_html_icon">-->
-<!--                        <img src="/img/base/icon-ai@1x.png">-->
-<!--                      </div>-->
-<!--                      <div class="cm_ai_html" id="cm_ai_htmlcontent"></div>-->
-<!--                      <div class="cm_ai_link">-->
-<!--                          <a href="" class="cm_ai_link_a"></a>-->
-<!--                      </div>-->
-<!--                    </div>-->
-          </div>
-          <div class="cm_ai_content">
-              <div class="cm_ai_header">
-                  <div class="cm_ai_icon"><img src="/img/base/icon-ai@1x.png" alt="采美AI助手"></div>
-                  <div class="cm_ai_text">采美AI助手</div>
+      <div class="cm_ai_container_body">
+          <div class="cm_ai_container_records">
+              <div class="cm_ai_records_btn" :class="disabled ? 'disabled' : 'show'" @click="handleCreatedChat">
+                  <i class="cm_ai_add"></i>
+                  <span>新建对话</span>
+              </div>
+              <div class="cm_ai_records_list">
+                  <div class="cm_ai_records_item" v-for="(chat, index) in chatHistory" :key="index" @click="handleChatDetail(chat.id)">
+                      <span class="content" v-text="chat.firstQuestion"></span>
+                      <span class="time" v-text="chat.addTime"></span>
+                  </div>
               </div>
-              <div class="cm_ai_input">
-                  <textarea class="cm_ai_textarea" v-model="chatParams.question" placeholder="请输入您想了解的内容" @keydown="handleKeyDown"></textarea>
+              <div class="cm_ai_records_user">
+                  <div class="avatar">
+                      <img src="/img/base/icon-aiUser@2x.jpg">
+                  </div>
+                  <div class="name" v-text="clubName"></div>
               </div>
-              <div class="cm_ai_button" :class="isLoading ? 'none' : ''" @click="handleAskQuestion">
-                  <img v-if="isLoading" class="cm_ai_icon" src="/img/base/icon-loading.gif">
-                  <img v-else class="cm_ai_icon" src="/img/base/icon-aiBtn@2x.png">
+          </div>
+          <div class="cm_ai_container_main">
+              <div class="cm_ai_container">
+                  <div class="cm_ai_mall_header">
+                      <div class="cm_ai_logo">
+                          <div class="logo">
+                              <img src="/img/base/logo.png">
+                          </div>
+                      </div>
+                      <div class="cm_ai_extra" @click="handleClickIndex">
+                        <div class="index">商城首页</div>
+                      </div>
+                  </div>
+                  <!--提问回答element-->
+                  <div class="cm_ai_answer_main" id="cm_ai_answer"></div>
+                  <!--提问文本框-->
+                  <div class="cm_ai_content">
+                      <div class="cm_ai_header">
+                          <div class="cm_ai_icon"><img src="/img/base/icon-ai@1x.png" alt="采美AI助手"></div>
+                          <div class="cm_ai_text">采美AI助手</div>
+                      </div>
+                      <div class="cm_ai_input">
+                          <textarea class="cm_ai_textarea" v-model="questionTextarea" placeholder="请输入您想了解的内容" @keydown="handleKeyDown"></textarea>
+                      </div>
+                      <div class="cm_ai_button_main">
+                          <div class="cm_ai_button" :class="isLoading ? 'none' : ''" @click="handleAskQuestion">
+                              <i v-if="isLoading"  class="cm_ai_icon el-icon-loading"></i>
+                              <i v-else  class="cm_ai_icon el-icon-position">发送</i>
+                          </div>
+                      </div>
+                  </div>
               </div>
           </div>
       </div>

src/main/resources/templates/components/drawer-ai.html

@@ -1,31 +1,43 @@
-<el-drawer title="采美AI助手" :visible.sync="isAiDrawer" direction="ltr" size="40%" :before-close="handleClose">
-  <div class="cm_ai_container">
-
-    <div class="cm_ai_answer_main" id="cm_ai_answer">
-<!--      <div class="cm_ai_answer">-->
-<!--        <div class="cm_ai_html_icon user">-->
-<!--          <img src="/img/base/icon-aiUser@2x.png">-->
-<!--        </div>-->
-<!--        <div class="cm_ai_html user" id="cm_ai_htmlcontent_user"></div>-->
-<!--      </div>-->
-<!--      <div class="cm_ai_answer">-->
-<!--        <div class="cm_ai_html_icon">-->
-<!--          <img src="/img/base/icon-ai@1x.png">-->
-<!--        </div>-->
-<!--        <div class="cm_ai_html" id="cm_ai_htmlcontent"></div>-->
-<!--      </div>-->
-    </div>
-    <div class="cm_ai_content">
-      <div class="cm_ai_header">
-        <div class="cm_ai_icon"><img src="/img/base/icon-ai@1x.png" alt="采美AI助手"></div>
-        <div class="cm_ai_text">采美AI助手</div>
+<el-drawer title="采美AI助手" :visible.sync="isAiDrawer" direction="ltr" size="60%" :before-close="handleClose">
+  <div class="cm_ai_container_body">
+    <div class="cm_ai_container_records">
+      <div class="cm_ai_records_btn" :class="disabled ? 'disabled' : 'show'" @click="handleCreatedChat">
+        <i class="cm_ai_add"></i>
+        <span>新建对话</span>
+      </div>
+      <div class="cm_ai_records_list">
+        <div class="cm_ai_records_item" v-for="(chat, index) in chatHistory" :key="index" @click="handleChatDetail(chat.id)">
+          <span class="content" v-text="chat.firstQuestion"></span>
+          <span class="time" v-text="chat.addTime"></span>
+        </div>
       </div>
-      <div class="cm_ai_input">
-        <textarea class="cm_ai_textarea" v-model="chatParams.question" placeholder="请输入您想了解的内容" @keydown="handleKeyDown"  ></textarea>
+      <div class="cm_ai_records_user">
+        <div class="avatar">
+          <img src="/img/base/icon-aiUser@2x.jpg">
+        </div>
+        <div class="name" v-text="clubName"></div>
       </div>
-      <div class="cm_ai_button" :class="isLoading ? 'none' : ''" @click="handleAskQuestion">
-        <img v-if="isLoading" class="cm_ai_icon" src="/img/base/icon-loading.gif">
-        <img v-else class="cm_ai_icon" src="/img/base/icon-aiBtn@2x.png">
+    </div>
+    <div class="cm_ai_container_main">
+      <div class="cm_ai_container">
+        <!--提问回答element-->
+        <div class="cm_ai_answer_main" id="cm_ai_answer"></div>
+        <!--提问文本框-->
+        <div class="cm_ai_content">
+          <div class="cm_ai_header">
+            <div class="cm_ai_icon"><img src="/img/base/icon-ai@1x.png" alt="采美AI助手"></div>
+            <div class="cm_ai_text">采美AI助手</div>
+          </div>
+          <div class="cm_ai_input">
+            <textarea class="cm_ai_textarea" v-model="questionTextarea" placeholder="请输入您想了解的内容" @keydown="handleKeyDown"></textarea>
+          </div>
+          <div class="cm_ai_button_main">
+            <div class="cm_ai_button" :class="isLoading ? 'none' : ''" @click="handleAskQuestion">
+              <i v-if="isLoading"  class="cm_ai_icon el-icon-loading"></i>
+              <i v-else  class="cm_ai_icon el-icon-position">发送</i>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>