ouyangxq
805675f8db
- 拆分应用工厂、业务服务与路由，保留原有 HTTP/SSE 和存储入口 - 分离页面资源，重排客服工作台并完善响应式导航、草稿和附件交互 - 整理维护脚本、请求示例和贡献指南，移除启动脚本中的密钥配置 - 上传文件改为仅本地保留，补充隔离的后端与前端回归验证 验证：46 项 Python 测试通过，含 14 个已有子测试；12 个 Node 前端场景通过。
394 lines
17 KiB
JavaScript
394 lines
17 KiB
JavaScript
var curSid = 0;
|
|
var sessions = {};
|
|
var drafts = {};
|
|
var queueItems = [];
|
|
var accepting = new Set();
|
|
var sendingSid = "";
|
|
var closingSid = "";
|
|
var polling = false;
|
|
var listSignature = "";
|
|
var typeTimer = null;
|
|
var toolsOpen = false;
|
|
var toolsOpener = null;
|
|
var replyInput = document.getElementById("replyText");
|
|
|
|
function escapeText(value){
|
|
return String(value == null ? "" : value).replace(/[&<>"']/g, function(character){
|
|
return {"&":"&", "<":"<", ">":">", '"':""", "'":"'"}[character];
|
|
});
|
|
}
|
|
|
|
async function adminRequest(path, options){
|
|
const response = await fetch(path, options);
|
|
if(!response.ok) throw new Error("HTTP " + response.status);
|
|
const data = await response.json();
|
|
if(data && data.ok === false) throw new Error("Request rejected");
|
|
return data;
|
|
}
|
|
|
|
function postAdmin(path, data){
|
|
return adminRequest(path, {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify(data)});
|
|
}
|
|
|
|
function setReplyStatus(message, isError){
|
|
const status = document.getElementById("reply-status");
|
|
status.textContent = message || "";
|
|
status.hidden = !message;
|
|
status.classList.toggle("is-error", Boolean(isError));
|
|
}
|
|
|
|
function updateComposer(){
|
|
document.body.classList.toggle("has-active-session", Boolean(curSid));
|
|
const send = document.getElementById("reply-send");
|
|
send.disabled = !curSid || Boolean(sendingSid) || Boolean(closingSid);
|
|
send.textContent = sendingSid === curSid ? "发送中…" : "发送";
|
|
const close = document.getElementById("close-session");
|
|
close.disabled = !curSid || Boolean(sendingSid) || Boolean(closingSid);
|
|
close.textContent = closingSid === curSid ? "正在结束…" : "结束会话";
|
|
document.querySelectorAll(".quick").forEach(function(button){
|
|
button.disabled = !curSid || Boolean(sendingSid) || Boolean(closingSid);
|
|
});
|
|
}
|
|
|
|
function resizeReply(){
|
|
replyInput.style.height = "auto";
|
|
replyInput.style.height = Math.min(replyInput.scrollHeight, 180) + "px";
|
|
}
|
|
|
|
function setSessionTab(tab){
|
|
const active = tab !== "queue";
|
|
document.getElementById("sessionList").hidden = !active;
|
|
document.getElementById("queue").hidden = active;
|
|
document.getElementById("tab-active").setAttribute("aria-selected", String(active));
|
|
document.getElementById("tab-queue").setAttribute("aria-selected", String(!active));
|
|
document.getElementById("tab-active").tabIndex = active ? 0 : -1;
|
|
document.getElementById("tab-queue").tabIndex = active ? -1 : 0;
|
|
}
|
|
|
|
function setChatView(open){
|
|
document.body.classList.toggle("chat-view", Boolean(open && curSid));
|
|
}
|
|
|
|
function showSessionList(){
|
|
setChatView(false);
|
|
document.getElementById("tab-active").focus();
|
|
}
|
|
|
|
function searchTerm(){
|
|
return document.getElementById("session-search").value.trim().toLowerCase();
|
|
}
|
|
|
|
function renderQueue(){
|
|
const term = searchTerm();
|
|
const visible = queueItems.filter(function(item){
|
|
return ("#" + item.id + " " + item.ctime).toLowerCase().includes(term);
|
|
});
|
|
document.getElementById("queue-count").textContent = queueItems.length;
|
|
document.getElementById("session-browser").classList.toggle("queue-empty", queueItems.length === 0);
|
|
document.getElementById("queue").innerHTML = visible.length
|
|
? visible.map(function(item){
|
|
const sid = Number(item.id);
|
|
return '<div class="queue-item"><div class="qt">对话 #'+sid+'<small>'+escapeText(item.ctime)+'</small></div><button type="button" onclick="accept('+sid+')">接入会话 →</button></div>';
|
|
}).join("")
|
|
: '<div class="list-empty">'+(term ? "没有匹配的排队会话" : "当前没有排队会话")+'</div>';
|
|
}
|
|
|
|
async function loadQueue(){
|
|
try{
|
|
queueItems = await adminRequest("/api/human/queue");
|
|
renderQueue();
|
|
if(!curSid && queueItems.length && !sessions[String(queueItems[0].id)]){
|
|
accept(queueItems[0].id);
|
|
}
|
|
}catch(error){
|
|
document.getElementById("queue").innerHTML = '<div class="list-empty">队列暂时无法加载，稍后重试</div>';
|
|
}
|
|
}
|
|
|
|
async function loadTickets(){
|
|
const element = document.getElementById("ticketList");
|
|
try{
|
|
const list = await adminRequest("/api/tickets");
|
|
element.innerHTML = list.length ? list.map(function(ticket){
|
|
return '<div class="ticket-item">'+escapeText(ticket.content)+'<span>'+escapeText(ticket.ctime)+'</span></div>';
|
|
}).join("") : '<div class="list-empty">暂时没有客户留言</div>';
|
|
}catch(error){
|
|
element.innerHTML = '<div class="list-empty">留言暂时无法加载</div>';
|
|
}
|
|
}
|
|
|
|
async function accept(sid){
|
|
sid = String(sid);
|
|
if(sessions[sid]){ switchSession(sid); return; }
|
|
if(accepting.has(sid)) return;
|
|
accepting.add(sid);
|
|
try{
|
|
await postAdmin("/api/human/accept", {sid:Number(sid)});
|
|
if(!sessions[sid]) sessions[sid] = {lastId:0, msgs:[], unread:0};
|
|
switchSession(sid);
|
|
loadQueue();
|
|
poll();
|
|
}catch(error){
|
|
document.getElementById("queue").innerHTML = '<div class="list-empty">接入失败，请稍后重试</div>';
|
|
}finally{
|
|
accepting.delete(sid);
|
|
}
|
|
}
|
|
|
|
function switchSession(sid){
|
|
sid = String(sid);
|
|
if(!sessions[sid]) return;
|
|
if(curSid) drafts[curSid] = replyInput.value;
|
|
curSid = sid;
|
|
document.getElementById("emptyTip").style.display = "none";
|
|
document.getElementById("chatContent").style.display = "flex";
|
|
setChatView(true);
|
|
document.getElementById("chatTitle").textContent = "客户 #" + sid;
|
|
document.getElementById("chat-subtitle").textContent = "正在接待 · 人工会话";
|
|
document.getElementById("cInfo").textContent = "会话编号：#" + sid;
|
|
document.getElementById("chatBox").innerHTML = "";
|
|
sessions[sid].msgs.forEach(appendMsg);
|
|
sessions[sid].unread = 0;
|
|
replyInput.value = drafts[sid] || "";
|
|
resizeReply();
|
|
document.getElementById("chatBox").scrollTop = document.getElementById("chatBox").scrollHeight;
|
|
setReplyStatus("");
|
|
updateComposer();
|
|
renderList();
|
|
setSessionTab("active");
|
|
postAdmin("/api/human/read", {sid:Number(sid)}).catch(function(){});
|
|
}
|
|
|
|
function showEmptySession(){
|
|
curSid = 0;
|
|
clearTimeout(typeTimer);
|
|
document.getElementById("chatContent").style.display = "none";
|
|
document.getElementById("emptyTip").style.display = "flex";
|
|
document.getElementById("cInfo").textContent = "选择会话后查看客户信息";
|
|
document.getElementById("chatTitle").textContent = "会话接待";
|
|
document.getElementById("chat-subtitle").textContent = "选择一段会话，开始回复客户";
|
|
replyInput.value = "";
|
|
setReplyStatus("");
|
|
updateComposer();
|
|
setChatView(false);
|
|
}
|
|
|
|
function appendMsg(message){
|
|
const box = document.getElementById("chatBox");
|
|
const follow = box.scrollHeight - box.scrollTop - box.clientHeight < 100;
|
|
const div = document.createElement("div");
|
|
div.className = "msg " + (message.side === "customer" ? "cust" : "agent");
|
|
let content = escapeText(message.content);
|
|
content = content.replace(/\[图片\](\/uploads\/[A-Za-z0-9_.%-]+)/g, '<a href="$1" target="_blank" rel="noopener"><img src="$1" alt="客户附件" class="message-image"></a>');
|
|
content = content.replace(/\[文件\](\/uploads\/[A-Za-z0-9_.%-]+)/g, '<a href="$1" target="_blank" rel="noopener" class="message-file">↗ 查看附件</a>');
|
|
const avatar = message.side === "customer" ? "客" : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M4 14v-3a8 8 0 0 1 16 0v3M19 17a4 4 0 0 1-4 4h-3"/><rect x="2" y="11" width="4" height="7" rx="2"/><rect x="18" y="11" width="4" height="7" rx="2"/></svg>';
|
|
div.innerHTML = '<span class="message-avatar" aria-hidden="true">'+avatar+'</span><div class="message-stack"><div class="meta">'+(message.side === "customer" ? "客户" : "客服")+(message.ctime ? ' · '+escapeText(message.ctime.slice(11,16)) : '')+'</div><div class="bubble">'+content+'</div></div>';
|
|
box.appendChild(div);
|
|
if(follow || message.side === "agent") box.scrollTop = box.scrollHeight;
|
|
}
|
|
|
|
function renderList(){
|
|
const term = searchTerm();
|
|
const ids = Object.keys(sessions);
|
|
document.getElementById("active-count").textContent = ids.length;
|
|
const signature = JSON.stringify([curSid, term, ids.map(function(sid){
|
|
const session = sessions[sid];
|
|
const last = session.msgs[session.msgs.length-1];
|
|
return [sid, session.unread, last && last.id, last && last.content];
|
|
})]);
|
|
if(signature === listSignature) return;
|
|
listSignature = signature;
|
|
const element = document.getElementById("sessionList");
|
|
element.innerHTML = "";
|
|
const visible = ids.filter(function(sid){
|
|
return ("对话 #"+sid).includes(term) || sessions[sid].msgs.some(function(message){
|
|
return message.content.toLowerCase().includes(term);
|
|
});
|
|
});
|
|
if(!visible.length){
|
|
element.innerHTML = '<div class="list-empty">'+(term ? "没有匹配的进行中会话" : "暂无进行中的会话")+'</div>';
|
|
}
|
|
visible.forEach(function(sid){
|
|
const session = sessions[sid];
|
|
const last = session.msgs[session.msgs.length-1];
|
|
const preview = last ? (last.side === "agent" ? "客服：" : "") + last.content.substring(0, 36) : "等待客户消息";
|
|
const div = document.createElement("button");
|
|
div.type = "button";
|
|
div.className = "conv-item" + (sid === curSid ? " active" : "");
|
|
div.setAttribute("aria-pressed", String(sid === curSid));
|
|
div.innerHTML = '<span class="avatar">客</span><span class="info"><span class="conv-title"><span class="name">客户 #'+sid+'</span><span class="conv-time">'+(last && last.ctime ? escapeText(last.ctime.slice(11,16)) : '')+'</span></span><span class="preview">'+escapeText(preview)+'</span></span>'+(session.unread ? '<span class="badge">'+session.unread+'</span>' : '');
|
|
div.onclick = function(){ switchSession(sid); };
|
|
element.appendChild(div);
|
|
});
|
|
}
|
|
|
|
async function poll(){
|
|
if(polling) return;
|
|
polling = true;
|
|
try{
|
|
const list = await adminRequest("/api/human/active");
|
|
list.forEach(function(session){
|
|
if(!sessions[String(session.id)]) sessions[String(session.id)] = {lastId:0, msgs:[], unread:0};
|
|
});
|
|
await Promise.all(Object.keys(sessions).map(async function(sid){
|
|
const session = sessions[sid];
|
|
const state = await adminRequest("/api/human/poll?sid="+Number(sid)+"&after="+session.lastId);
|
|
if(sessions[sid] !== session) return;
|
|
if(state.status === "closed"){
|
|
delete sessions[sid];
|
|
delete drafts[sid];
|
|
if(sid === curSid) showEmptySession();
|
|
return;
|
|
}
|
|
state.messages.forEach(function(message){
|
|
if(session.msgs.some(function(existing){ return existing.id === message.id; })) return;
|
|
session.lastId = Math.max(session.lastId, message.id);
|
|
session.msgs.push(message);
|
|
if(message.side === "customer" && sid !== curSid) session.unread += 1;
|
|
if(sid === curSid) appendMsg(message);
|
|
});
|
|
}));
|
|
document.getElementById("sync-status").hidden = true;
|
|
renderList();
|
|
}catch(error){
|
|
document.getElementById("sync-status").hidden = false;
|
|
}finally{
|
|
polling = false;
|
|
}
|
|
}
|
|
|
|
async function sendReply(){
|
|
if(!curSid || sendingSid || closingSid) return;
|
|
const sid = curSid;
|
|
const draft = replyInput.value;
|
|
if(!draft.trim()) return;
|
|
drafts[sid] = draft;
|
|
sendingSid = sid;
|
|
setReplyStatus("");
|
|
updateComposer();
|
|
try{
|
|
await postAdmin("/api/human/send", {sid:Number(sid), side:"agent", content:draft.trim()});
|
|
if(drafts[sid] === draft) drafts[sid] = "";
|
|
if(curSid === sid && replyInput.value === draft){
|
|
replyInput.value = "";
|
|
resizeReply();
|
|
}
|
|
if(curSid === sid){ replyInput.focus(); setReplyStatus("已发送"); }
|
|
poll();
|
|
}catch(error){
|
|
if(curSid === sid) setReplyStatus("发送未成功，内容已保留。请确认后重试。", true);
|
|
}finally{
|
|
sendingSid = "";
|
|
updateComposer();
|
|
}
|
|
}
|
|
|
|
function quickReply(text){
|
|
if(!curSid || sendingSid || closingSid) return;
|
|
replyInput.value = text;
|
|
drafts[curSid] = text;
|
|
resizeReply();
|
|
setReplyStatus("常用回复已填入，可编辑后发送");
|
|
if(toolsOpen) setToolsOpen(false);
|
|
replyInput.focus();
|
|
}
|
|
|
|
async function closeSession(){
|
|
if(!curSid || closingSid || sendingSid) return;
|
|
const sid = curSid;
|
|
closingSid = sid;
|
|
updateComposer();
|
|
try{
|
|
await postAdmin("/api/human/close", {sid:Number(sid)});
|
|
delete sessions[sid];
|
|
delete drafts[sid];
|
|
if(curSid === sid) showEmptySession();
|
|
renderList();
|
|
}catch(error){
|
|
if(curSid === sid) setReplyStatus("结束失败，会话仍保留，请稍后重试。", true);
|
|
}finally{
|
|
closingSid = "";
|
|
updateComposer();
|
|
}
|
|
}
|
|
|
|
function setToolsOpen(open){
|
|
const opening = Boolean(open) && !toolsOpen;
|
|
toolsOpen = Boolean(open);
|
|
document.body.classList.toggle("tools-open", toolsOpen);
|
|
document.getElementById("tools-toggle").setAttribute("aria-expanded", String(toolsOpen));
|
|
document.getElementById("tools-from-list").setAttribute("aria-expanded", String(toolsOpen));
|
|
const panel = document.getElementById("service-tools");
|
|
panel.setAttribute("aria-hidden", String(!toolsOpen));
|
|
panel.toggleAttribute("inert", !toolsOpen);
|
|
if(opening){
|
|
document.getElementById("data-overview").open = false;
|
|
document.getElementById("tools-close").focus();
|
|
}
|
|
}
|
|
|
|
replyInput.addEventListener("keydown", function(event){
|
|
if(event.key === "Enter" && !event.shiftKey && !event.isComposing){
|
|
event.preventDefault();
|
|
sendReply();
|
|
}
|
|
});
|
|
replyInput.addEventListener("input", function(){
|
|
resizeReply();
|
|
if(!curSid) return;
|
|
drafts[curSid] = replyInput.value;
|
|
setReplyStatus("");
|
|
const sid = curSid;
|
|
postAdmin("/api/human/typing", {sid:Number(sid)}).catch(function(){});
|
|
clearTimeout(typeTimer);
|
|
typeTimer = setTimeout(function(){
|
|
postAdmin("/api/human/stop_typing", {sid:Number(sid)}).catch(function(){});
|
|
}, 3000);
|
|
});
|
|
document.getElementById("session-search").addEventListener("input", function(){ renderList(); renderQueue(); });
|
|
document.getElementById("sessions-back").onclick = showSessionList;
|
|
document.getElementById("tab-active").onclick = function(){ setSessionTab("active"); };
|
|
document.getElementById("tab-queue").onclick = function(){ setSessionTab("queue"); };
|
|
["tab-active", "tab-queue"].forEach(function(id){
|
|
document.getElementById(id).addEventListener("keydown", function(event){
|
|
if(!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
|
|
event.preventDefault();
|
|
const next = event.key === "Home" || (event.key !== "End" && id === "tab-queue") ? "tab-active" : "tab-queue";
|
|
setSessionTab(next === "tab-active" ? "active" : "queue");
|
|
document.getElementById(next).focus();
|
|
});
|
|
});
|
|
document.getElementById("tools-toggle").onclick = function(){ toolsOpener = "tools-toggle"; setToolsOpen(!toolsOpen); };
|
|
document.getElementById("tools-from-list").onclick = function(){ toolsOpener = "tools-from-list"; setToolsOpen(!toolsOpen); };
|
|
document.getElementById("tools-close").onclick = function(){
|
|
setToolsOpen(false);
|
|
const fromList = toolsOpener === "tools-from-list" && !document.body.classList.contains("chat-view") && window.matchMedia("(max-width: 720px)").matches;
|
|
document.getElementById(fromList ? "tools-from-list" : "tools-toggle").focus();
|
|
};
|
|
document.getElementById("tools-backdrop").onclick = document.getElementById("tools-close").onclick;
|
|
document.addEventListener("keydown", function(event){
|
|
if(event.key === "Escape" && toolsOpen) document.getElementById("tools-close").click();
|
|
if(event.key === "Escape") document.getElementById("data-overview").open = false;
|
|
if(event.key === "Tab" && toolsOpen && window.matchMedia("(max-width: 1200px)").matches){
|
|
const items = Array.from(document.getElementById("service-tools").querySelectorAll('button:not([disabled]), a[href]'));
|
|
const first = items[0], last = items[items.length-1];
|
|
if(event.shiftKey && document.activeElement === first){ event.preventDefault(); last.focus(); }
|
|
else if(!event.shiftKey && document.activeElement === last){ event.preventDefault(); first.focus(); }
|
|
}
|
|
});
|
|
window.addEventListener("resize", function(){ setToolsOpen(toolsOpen); });
|
|
adminRequest("/api/admin/stats").then(function(data){
|
|
[data.total_conv, data.total_msg, data.today_conv, data.good, data.bad].forEach(function(value, index){
|
|
document.getElementById("s"+(index+1)).textContent = value;
|
|
});
|
|
}).catch(function(){});
|
|
setToolsOpen(false);
|
|
setSessionTab("active");
|
|
updateComposer();
|
|
loadQueue();
|
|
loadTickets();
|
|
poll();
|
|
setInterval(loadQueue, 3000);
|
|
setInterval(loadTickets, 5000);
|
|
setInterval(poll, 1000);
|