goder/ai-css
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:update chat

Browse Source
This commit is contained in:
leeliforever 2026-03-04 20:36:17 +08:00
parent 3673aa2cb2
commit 26dd2212c2
3 changed files with 51 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/css/common.css
View File

@ -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;}

4
static/css/dark-mode.css
View File

@ -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;

38
static/templates/chat_page.html
View File

@ -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,23 +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("/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("/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;