feat: fix path

static/css/common.css

@@ -234,6 +234,25 @@
     background-color: #cde0ff;
     color: #000;
 }
+.msg-bubble-wrap {
+    display: inline-flex;
+    align-items: flex-end;
+    gap: 4px;
+}
+.msg-status-icon {
+    flex-shrink: 0;
+    font-size: 12px;
+    line-height: 1;
+    margin-bottom: 1px;
+}
+.msg-status-sending {
+    color: #999;
+}
+.msg-status-failed {
+    color: #ff4d4f;
+    cursor: pointer;
+    font-size: 15px;
+}
 a{color: #07a9fe;text-decoration: none;}
 
 

static/css/dark-mode.css

@@ -51,6 +51,10 @@ body.dark-mode .chatBoxMe .chatContent {
     border: 1px solid #246153 !important;
 }
 
+/* 消息发送状态 */
+body.dark-mode .msg-status-sending { color: #7a9e9e; }
+body.dark-mode .msg-status-failed { color: #ff6b6b; }
+
 /* 时间戳 */
 body.dark-mode .chatTime {
     color: #A0BFBF !important;

static/templates/chat_page.html

@@ -111,7 +111,11 @@
                             </div>
                         </div>
                         <div class="kefuMe" v-if="v.is_kefu==false" style="display: flex;justify-content: flex-end;">
-                            <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
+                            <div class="chatContent chatContent2 replyContentBtn msg-bubble-wrap" :class="{'msg-bubble-failed': v.status=='failed'}">
+                                <span v-html="v.content"></span>
+                                <span class="msg-status-icon msg-status-sending" v-if="v.status=='sending'"><i class="el-icon-loading"></i></span>
+                                <span class="msg-status-icon msg-status-failed" v-if="v.status=='failed'" @click.stop="resendMessage(v)" title="发送失败，点击重试"><i class="el-icon-warning"></i></span>
+                            </div>
                             <el-avatar style="margin-left:10px;flex-shrink: 0;" :size="36" :src="v.avator"></el-avatar>
                         </div>
                         <div class="clear"></div>
@@ -145,7 +149,7 @@
                     <el-input :rows="2" type="textarea" resize="none" class="visitorEditorArea" @focus="scrollBottom;showIconBtns=false" @blur="scrollBottom;showIconBtns=false" v-model="messageContent" v-on:keyup.enter.native="chatToUser">
                     </el-input>
                     <div class="btn-box">
-<el-button type="primary" size="mini" class="visitorEditorBtn" :loading="sendDisabled" :disabled="sendDisabled||messageContent==''" v-on:click="chatToUser();showIconBtns=false"><{ sendDisabled ? '发送中...' : '发送' }></el-button>
+<el-button type="primary" size="mini" class="visitorEditorBtn" :disabled="messageContent==''" v-on:click="chatToUser();showIconBtns=false">发送</el-button>
                     </div>
                 </div>
             </div>
@@ -349,7 +353,6 @@
                     });
                     return;
                 }
-                this.sendDisabled=true;
                 let _this=this;
 
                 let content = {}
@@ -359,6 +362,7 @@
                 content.is_kefu = false;
                 content.time = _this.getNowDate();
                 content.show_time=false;
+                content.status = 'sending';
                 _this.msgList.push(content);
                 _this.scrollBottom();
 
@@ -368,22 +372,37 @@
                 mes.from_id = this.visitor.visitor_id;
                 mes.to_id = this.visitor.to_id;
                 mes.content = this.messageContent;
+                content._rawMsg = Object.assign({}, mes);
+                this.messageContent = ""
                 $.post("/aicss/2/message",mes,function(res){
-                    _this.sendDisabled=false;
                     if(res.code!=200){
-                        _this.msgList.pop();
-                        _this.$message({
-                            message: res.msg,
-                            type: 'error'
-                        });
+                        _this.$set(content, 'status', 'failed');
                         return;
                     }
-                    _this.messageContent = "";
+                    _this.$set(content, 'status', 'sent');
                     clearInterval(_this.timer);
                     _this.sendSound();
+                }).fail(function(){
+                    _this.$set(content, 'status', 'failed');
                 });
 
             },
+            resendMessage:function(msg) {
+                if(msg.status !== 'failed') return;
+                let _this = this;
+                _this.$set(msg, 'status', 'sending');
+                let mes = msg._rawMsg;
+                $.post("/aicss/2/message", mes, function(res){
+                    if(res.code!=200){
+                        _this.$set(msg, 'status', 'failed');
+                        return;
+                    }
+                    _this.$set(msg, 'status', 'sent');
+                    _this.sendSound();
+                }).fail(function(){
+                    _this.$set(msg, 'status', 'failed');
+                });
+            },
             OnClose:function() {
                 console.log("ws:onclose");
                 this.focusSendConn=true;