AI助手优化

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

@@ -124,18 +124,22 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadCenter,.baseTopNav{width:100%;background:#FFF}
 .baseHeadCenter .wrap{height: 100px;box-sizing: border-box;padding: 10px 0;}
 .baseHeadCenter .logo{float:left;width:228px;height:76px;margin-right:75px;}
-.baseHeadCenter .searchBox{width:668px;float:left}
-.baseHeadCenter .search{width:100%;height:44px;line-height:44px;border:2px solid #FF5B00;position:relative;border-radius: 10px;}
+.baseHeadCenter .searchBox{width:720px;float:left}
+.baseHeadCenter .search{width:84%;height:44px;line-height:44px;border:2px solid #FF5B00;position:relative;border-radius: 10px;}
 .baseHeadCenter .search:before{content:'';position:absolute;left:90px;top:12px;height:20px;border-right:2px solid #e1e1e1}
 .baseHeadCenter .search .jqSelect{width:80px;height:44px;line-height:44px;border:none;text-align: center;}
 .baseHeadCenter .search .jqSelect:before{right:4px}
 .baseHeadCenter .search .jqSelect ul{z-index:999;}
-.baseHeadCenter .keyword{width:86%;height:44px;line-height:44px;text-indent:15px;position:absolute;right:0;top:0;border:none;outline:none;border-radius: 22px;}
+.baseHeadCenter .keyword{width:86%;height:44px;box-sizing: border-box;padding-right: 78px; line-height:44px;text-indent:15px;position:absolute;right:0;top:0;border:none;outline:none;border-radius: 22px;}
 .baseHeadCenter .keyword:focus{outline:none;border:none}
 .baseHeadCenter .searchBtn{position: absolute;right: 3px;top: 3px;font-size: 14px;padding: 0 22px;height: 38px;line-height: 38px;text-align: center;background: #ff5b00;border-radius: 8px;color: #FFFFFF;font-weight: bold;}
-.baseHeadCenter .hotKey{color:#50607A;font-size:12px;line-height:36px;box-sizing: border-box;padding-left: 24px;}
+.baseHeadCenter .hotKey{color:#50607A;font-size:12px;line-height:36px;box-sizing: border-box;padding-left: 0;}
 .baseHeadCenter .hotKey .word{padding:0 8px;font-style:normal;cursor:pointer;}
 .baseHeadCenter .hotKey .word:hover{color:#FF5B00}
+.baseHeadCenter .searchAi-pc{height: 42px;position: absolute;right: -110px;letter-spacing:1px; padding: 0 15px;border: 1px solid #e0e0e0;border-radius: 4px;display: flex;justify-content: center;font-size: 18px;font-weight: 600;cursor: pointer;line-height: 42px;top: 0;align-items: center; }
+.baseHeadCenter .searchAi-pc:hover{background-color: #f7f7f7;}
+.baseHeadCenter .searchAi-pc img{ width: 24px;height: 24px;display: block;}
+.baseHeadCenter .searchAi-pc .ai-tips{position: absolute;top: -8px;right: -20px;height: 16px;line-height: 16px;color: #fff;letter-spacing:normal;background: linear-gradient(98deg, #1ceaf7, #196eff);font-size: 12px;z-index: 999;transform: scale(0.85);padding: 1px 2px;border-radius: 2px;display: inline-block;}
 .baseHeadCenter .searchAi{ display: none; }
 /*优化供应商登录位置*/
 /*.baseHeadCenter .wechat_qrcode{width: 270px;height: 100%;float: left;margin-left: 33px; padding: 10px 0; box-sizing: border-box;}*/
@@ -191,8 +195,8 @@ iframe{width:320px !important;height: 280px !important}
 /*    background: url(/img/supplier-login/PC.png);*/
 /*    background-position: -249px 185px;*/
 /*}*/
-.baseHeadCenter .wechat_qrcode{width: 180px;height: 100%;float: left;margin-left: 33px;}
-.baseHeadCenter .wechat_qrcode .q_item{width: 60px;height: 100%;float: left;margin: 0 15px;position: relative;cursor: pointer;}
+.baseHeadCenter .wechat_qrcode{width: auto;height: 100%;float: right;}
+.baseHeadCenter .wechat_qrcode .q_item{width: 60px;height: 100%;float: left;margin-left: 16px;position: relative;cursor: pointer;}
 .baseHeadCenter .wechat_qrcode .q_item:hover .q_item_code{display: block;}
 .baseHeadCenter .wechat_qrcode .q_item p{font-size: 12px;color: #909090;line-height: 20px;text-align: center;}
 .baseHeadCenter .wechat_qrcode .q_item_icon{width: 48px;height: 48px;border: 1px solid #ffe6dc;border-radius: 2px;margin: 0 auto;}

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

@@ -165,6 +165,9 @@
          width: 120px;
          height: auto;
      }
+     .cm_ai_mall_header .cm_ai_menu {
+         display: none;
+     }
      .cm_ai_content{
          width: 850px;
          height: auto;
@@ -393,6 +396,111 @@
     .cm_ai_container_records{
          display: none;
     }
+     .cm_ai_h5_records{
+         width: 100%;
+         box-shadow: 1px 0 20px rgba(0,0,0,.02);
+         display: flex;
+         flex-direction: column;
+         height: 100%;
+         box-sizing: border-box;
+         padding: 3vw 4vw;
+         position: absolute;
+         flex: 0 0 auto;
+         background-image: linear-gradient(180deg,#f0edf7 .03%,#ebeaf5 32.19%,#e8e8f3 68.86%,#e4eaf7 99.12%);
+     }
+     .cm_ai_h5_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_h5_records .cm_ai_records_btn.disabled{
+         cursor: not-allowed;
+         opacity: 0.7 ;
+     }
+     .cm_ai_h5_records .cm_ai_records_btn.show:hover{
+         background-color: rgba(255, 91, 0, 0.1);
+     }
+     .cm_ai_h5_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_h5_records .cm_ai_records_list{
+         flex: 1;
+         display: flex;
+         flex-direction: column;
+         overflow: hidden;
+         box-sizing: border-box;
+     }
+     .cm_ai_h5_records .cm_ai_records_item{
+         display: flex;
+         align-items: flex-start;
+         height: 12vw;
+         padding: 2vw 2.5vw;
+         margin: 1.5vw 0;
+         box-sizing: border-box;
+         flex-direction: row;
+         justify-content: space-between;
+         cursor: pointer;
+         background-color: rgba(255,255,255,0.2);
+         border-radius: 3vw;
+     }
+     .cm_ai_h5_records .cm_ai_records_item:hover{
+         border-radius: 9px;
+         background: hsla(0, 0%, 100%, .5);
+     }
+     .cm_ai_h5_records .cm_ai_records_item .content{
+         width: 20vw;
+         font-size: 3.6vw;
+         font-weight: 500;
+         line-height: 8vw;
+         color: #50525c;
+         display: -webkit-box;
+         text-overflow: ellipsis;
+         overflow: hidden;
+         word-break: break-all;
+         -webkit-line-clamp: 1;
+         -webkit-box-orient: vertical;
+     }
+     .cm_ai_h5_records .cm_ai_records_item .time{
+         font-size: 3.2vw;
+         font-weight: 400;
+         line-height: 8vw;
+         color: #848691;
+     }
+     .cm_ai_h5_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_h5_records .cm_ai_records_user .avatar{
+         width: 24px;
+         height: 24px;
+         border-radius: 100%;
+         overflow: hidden;
+     }
+     .cm_ai_h5_records .cm_ai_records_user .name{
+         margin-left: 8px;
+     }
     .cm_ai_container{
         width: 100%;
         height: 100%;
@@ -419,7 +527,7 @@
          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;
+         z-index: 2;
      }
      .cm_ai_mall_header .cm_ai_logo{
          display: flex;
@@ -430,11 +538,23 @@
          width: 26vw;
          height: auto;
      }
+     .cm_ai_mall_header .cm_ai_menu{
+         width: 6vw;
+         height: 14vw;
+         box-sizing: border-box;
+         float: right;
+         padding: 4vw 0;
+     }
+     .cm_ai_mall_header .cm_ai_menu img{
+         width: 6vw;
+         height: 6vw;
+         display: block;
+     }
     .cm_ai_content{
         width: 100%;
         height: auto;
         background-color: #FFFFFF;
-        box-shadow: 0 16px 20px 0 rgba(174,167,223,.2);
+        box-shadow: 0 16px 20px 0 rgba(174,167,223,.4);
         border-radius: 9vw;
         box-sizing: border-box;
         padding:2vw 3vw;
@@ -616,6 +736,6 @@
          text-decoration-color: #666666;
          color: #666666;
     }
-
+    .el-drawer__header{ display: none !important; }
     footer{display: none;}
 }

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

@@ -54,6 +54,7 @@ if(localStorage.getItem('userInfo')){
 // 头部
 const globalHead = new Vue({
     el: '#globalHead',
+    mixins: [cmAiMixins],
     data: {
         loginStatus: false,
         userData: {},
@@ -367,7 +368,6 @@ const globalHead = new Vue({
 // 底部
 const globalFot = new Vue({
     el: '#globalFot',
-    mixins: [cmAiMixins],
     data: {
         isShowIcon: true,
     },

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

@@ -5,13 +5,51 @@ const cmChats = new Vue({
     el:"#caimei-chat-content",
     mixins: [cmAiMixins],
     data() {
-
+        return {
+            isChatDrawer:false
+        }
     },
     computed: {
 
     },
     methods: {
-
+        handleChatShow(){
+            if(globalUserData){
+                this.isChatDrawer  =true
+                console.log('11111111',this.isChatDrawer)
+            }else{
+                window.location.href = '/login.html'
+            }
+        },
+        handleChatClose(){
+            this.isChatDrawer  =false
+        },
+        //新建对话
+        handleChatCreated() {
+            if (this.isLoading) {
+                return;
+            }
+            const answerContent = document.getElementById('cm_ai_answer')
+            answerContent.innerHTML = ''
+            this.probeIndex = 0
+            this.probeChatId = ''
+            this.questionTextarea = ''
+            this.chatParams.question = ''
+            this.isChatDrawer  =false
+            this.handleCreatedInfoHtml()
+        },
+        // 查询详情
+        async handleChatDetails(chatId) {
+            try {
+                this.probeIndex = 1
+                this.probeChatId = chatId
+                const list = await this.userNewChatDetail({userId: this.chatParams.userId, chatId: chatId})
+                this.handleCreateDetailHtml(list)
+                this.isChatDrawer  =false
+            } catch (error) {
+                console.log('Error fetching new chats:', error);
+            }
+        },
     },
     created () {
 

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

@@ -63,6 +63,7 @@ var cmAiMixins = function() {
                 this.probeChatId = ''
                 this.questionTextarea = ''
                 this.chatParams.question = ''
+                this.handleCreatedInfoHtml()
             },
             // 检查是否按下了回车键执行AI搜索
             handleKeyDown(event) {

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

@@ -40,6 +40,9 @@
                               <img src="/img/base/logo.png">
                           </a>
                       </div>
+                      <div class="cm_ai_menu" @click="handleChatShow" >
+                          <img src="/img/base/icon-aiMore@2x.png">
+                      </div>
                   </div>
                   <!--提问回答element-->
                   <div class="cm_ai_answer_main" id="cm_ai_answer"></div>
@@ -58,6 +61,29 @@
               </div>
           </div>
       </div>
+      <!--  H5提问记录  -->
+      <el-drawer :visible.sync="isChatDrawer" direction="ltr" :withHeader="false" size="68%" :before-close="handleChatClose">
+          <div class="cm_ai_container_body">
+              <div class="cm_ai_h5_records">
+                  <div class="cm_ai_records_btn" :class="disabled ? 'disabled' : 'show'" @click="handleChatCreated">
+                      <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="handleChatDetails(chat.id)">
+                          <span class="content" v-text="chat.firstQuestion"></span>
+                          <span class="time" v-text="chat.addTime"></span>
+                      </div>
+                  </div>
+                  <div class="cm_ai_records_user" v-if="chatParams.userId">
+                      <div class="avatar">
+                          <img src="/img/base/icon-aiUser@2x.jpg">
+                      </div>
+                      <div class="name" v-text="clubName"></div>
+                  </div>
+              </div>
+          </div>
+      </el-drawer>
   </div>
   <template th:replace="components/foot-link"></template>
   <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>

src/main/resources/templates/components/footer.html

@@ -119,12 +119,11 @@
                 </div>
             </div>
         </div>
-        <div class="item">
-            <span class="aiItem" @click="handleShowAiDrawer">Ai助手</span>
-        </div>
+<!--        <div class="item">-->
+<!--            <span class="aiItem" @click="handleShowAiDrawer">Ai助手</span>-->
+<!--        </div>-->
         <div class="item">
             <span class="toTop icon mIcon">TOP</span>
         </div>
     </div>
-    <template th:replace="components/drawer-ai"></template>
 </footer>

src/main/resources/templates/components/header.html

@@ -80,8 +80,6 @@
                 <template v-if="loginStatus">
                     <a class="mUserIcon mIcon superVip" href="/user/member.html" v-if="!isPC && userIdentity != 3" title="超级会员" rel="nofollow"></a>
                     <a href="/shopping/cart.html" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" v-if="!isPC && userIdentity != 3" title="购物车" rel="nofollow"></a>
-<!--                    <a v-if="userIdentity===3" @click="goMsgLinkFn('/supplier/message/list.html')" href="javascript:void(0);" :class="loginStatus?'mNotice H5-icon':'mNotice H5-icon toLogin'" title="消息" rel="nofollow"></a>-->
-<!--                    <a v-else @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0);" :class="loginStatus?'mNotice H5-icon':'mNotice H5-icon toLogin'" title="消息" rel="nofollow"></a>-->
                     <a @click="showGlobalMenu()" class="mUserIcon mIcon" href="javascript:void(0);" title="个人中心" rel="nofollow"></a>
                 </template>
                 <template v-else>
@@ -102,11 +100,16 @@
                         <select>
                             <option value="0">商品</option>
                             <option value="1">供应商</option>
-<!--                            <option value="2">项目仪器</option>-->
+                            <!--<option value="2">项目仪器</option>-->
                         </select>
                     </div>
                     <input class="keyword" type="text" placeholder="请输入搜索关键词" maxlength="30" />
                     <a class="searchBtn" href="javascript:void(0);">搜索</a>
+                    <div class="searchAi-pc" v-if="isPC" @click="handleShowAiDrawer">
+                        <img src="/img/base/icon-aiPc@2x.png" alt="采美Ai助手">
+                        助手
+                        <span class="ai-tips">智能推荐</span>
+                    </div>
                 </div>
                 <!--                <div class="supplierH5" v-if="!isPC && (userIdentity !== 4 && userIdentity !== 2)">-->
                 <!--                    <a class="mIcon supplier_H5" href="/supplier-login/index.html" title="供应商服务" rel="nofollow"></a>-->
@@ -117,7 +120,7 @@
                         <em class="word" th:text="${word}"></em>
                     </span>
                 </div>
-                <div class="searchAi">
+                <div class="searchAi"  v-if="!isPC">
                     <a href="/chats.html">
                         <img src="/img/base/icon-ai@1x.png" alt="采美Ai助手">
                     </a>
@@ -274,6 +277,7 @@
             </div>
         </div>
     </div>
+    <template th:replace="components/drawer-ai"></template>
     <input type="hidden" th:value="${siteEnv}" id="siteEnv">
     <input type="hidden" th:value="${coreServer}" id="coreServer">
     <input type="hidden" th:value="${agent}" id="userAgent">