From d8d4ee0a31490f7bb45652a87687b14a83275e3c Mon Sep 17 00:00:00 2001
From: songxinnuo <songxinnuo@example.com>
Date: Wed, 28 Oct 2026 10:44:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E6=94=B9=E6=88=90=E4=B8=89?=
 =?UTF-8?q?=E6=A0=8F=E5=AE=A2=E6=9C=8D=E5=B7=A5=E4=BD=9C=E5=8F=B0=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/admin.html | 213 ++++++++++++++++++++++++-------------------
 1 file changed, 120 insertions(+), 93 deletions(-)

diff --git a/templates/admin.html b/templates/admin.html
index 68ea4d0..f0315f5 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -3,63 +3,108 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>柏悦物流 - 管理后台</title>
+<title>柏悦物流 - 客服工作台</title>
 <style>
-body{font-family:-apple-system,"Microsoft YaHei",sans-serif;background:#f0f4fa;margin:0;padding:20px;}
-h1{color:#18479c;}
-.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
-.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
-.stat{background:linear-gradient(135deg,#e8f0ff,#fff);border-radius:10px;padding:14px;text-align:center;}
-.stat .num{font-size:24px;font-weight:bold;color:#2978e8;}
-.stat .label{font-size:12px;color:#666;}
-.layout{display:grid;grid-template-columns:220px 1fr;gap:16px;}
-#sessionList{max-height:400px;overflow-y:auto;}
-.session-item{padding:10px;border-radius:8px;cursor:pointer;margin-bottom:6px;background:#f5f8fc;font-size:13px;}
-.session-item.active{background:#2978e8;color:white;}
-.session-item .badge{background:#dc2626;color:white;border-radius:10px;padding:1px 6px;font-size:11px;margin-left:4px;}
-#chatBox{height:350px;overflow-y:auto;background:#f8fafc;border-radius:8px;padding:10px;margin-bottom:10px;}
-.msg{margin-bottom:8px;padding:6px 10px;border-radius:8px;max-width:70%;font-size:14px;}
-.cust{background:#dbeafe;margin-right:auto;}
-.agent{background:#dcfce7;margin-left:auto;}
-.btn{background:#2978e8;color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;}
-.btn:hover{background:#18479c;}
-.btn.red{background:#dc2626;}
-input[type=text]{width:75%;padding:8px;border:1px solid #ddd;border-radius:6px;}
-table{width:100%;border-collapse:collapse;font-size:13px;}
-th,td{padding:6px 10px;border-bottom:1px solid #eee;text-align:left;}
+*{box-sizing:border-box;margin:0;padding:0;}
+body{font-family:-apple-system,"Microsoft YaHei",sans-serif;background:#f0f2f5;height:100vh;display:flex;flex-direction:column;}
+.topbar{background:#fff;padding:10px 20px;display:flex;align-items:center;gap:16px;box-shadow:0 1px 4px rgba(0,0,0,0.08);z-index:10;}
+.topbar .logo{font-size:18px;font-weight:bold;color:#18479c;}
+.topbar .stats{display:flex;gap:20px;font-size:13px;color:#666;margin-left:20px;}
+.topbar .stats b{color:#2978e8;font-size:16px;}
+.topbar .status{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:#666;}
+.topbar .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;}
+.layout{flex:1;display:grid;grid-template-columns:260px 1fr 240px;overflow:hidden;}
+/* 左栏：对话列表 */
+.conv-list{background:#fff;border-right:1px solid #e8e8e8;overflow-y:auto;}
+.conv-list h3{padding:12px 14px;font-size:13px;color:#999;border-bottom:1px solid #f0f0f0;}
+.conv-item{padding:12px 14px;cursor:pointer;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;gap:10px;}
+.conv-item:hover{background:#f5f8fc;}
+.conv-item.active{background:#e8f0ff;border-left:3px solid #2978e8;}
+.conv-item .avatar{width:36px;height:36px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
+.conv-item .info{flex:1;min-width:0;}
+.conv-item .name{font-size:14px;font-weight:500;}
+.conv-item .preview{font-size:12px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.conv-item .badge{background:#dc2626;color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;}
+.queue-item{padding:10px 14px;background:#fff7ed;border-bottom:1px solid #ffedd5;}
+.queue-item .qt{font-size:13px;color:#ea580c;font-weight:500;}
+.queue-item button{margin-top:6px;width:100%;background:#ea580c;color:#fff;border:none;padding:5px;border-radius:4px;cursor:pointer;font-size:12px;}
+/* 中间：聊天 */
+.chat-area{display:flex;flex-direction:column;background:#f8fafc;}
+.chat-header{background:#fff;padding:12px 20px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;}
+.chat-header .ct{font-size:15px;font-weight:500;}
+.chat-header .close{background:#dc2626;color:#fff;border:none;padding:6px 14px;border-radius:4px;cursor:pointer;font-size:13px;}
+#chatBox{flex:1;overflow-y:auto;padding:20px;}
+.msg{margin-bottom:12px;display:flex;}
+.msg .bubble{max-width:60%;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5;overflow-wrap:break-word;}
+.msg.cust{justify-content:flex-start;}
+.msg.cust .bubble{background:#fff;border:1px solid #e8e8e8;border-top-left-radius:4px;}
+.msg.agent{justify-content:flex-end;}
+.msg.agent .bubble{background:#2978e8;color:#fff;border-top-right-radius:4px;}
+.msg .meta{font-size:11px;color:#aaa;margin-top:3px;}
+.input-bar{background:#fff;border-top:1px solid #e8e8e8;padding:12px 20px;display:flex;gap:10px;}
+.input-bar input{flex:1;border:1px solid #ddd;border-radius:6px;padding:10px 12px;font-size:14px;outline:none;}
+.input-bar input:focus{border-color:#2978e8;}
+.input-bar button{background:#2978e8;color:#fff;border:none;padding:0 20px;border-radius:6px;cursor:pointer;font-size:14px;}
+/* 右栏：客户信息+快捷回复 */
+.side{background:#fff;border-left:1px solid #e8e8e8;overflow-y:auto;}
+.side .card{padding:16px;border-bottom:1px solid #f0f0f0;}
+.side h4{font-size:13px;color:#999;margin-bottom:10px;}
+.side .info-row{font-size:13px;padding:4px 0;color:#333;}
+.side .quick{padding:8px 12px;background:#f5f8fc;border-radius:6px;margin-bottom:6px;font-size:13px;cursor:pointer;}
+.side .quick:hover{background:#e8f0ff;}
+.empty{display:flex;align-items:center;justify-content:center;height:100%;color:#bbb;font-size:14px;}
 </style>
 </head>
 <body>
-<h1>📊 柏悦物流客服后台</h1>
-<div class="grid">
-  <div class="stat"><div class="num" id="s1">-</div><div class="label">总对话数</div></div>
-  <div class="stat"><div class="num" id="s2">-</div><div class="label">总消息数</div></div>
-  <div class="stat"><div class="num" id="s3">-</div><div class="label">今日新增</div></div>
-  <div class="stat"><div class="num" id="s4">-</div><div class="label">👍</div></div>
-  <div class="stat"><div class="num" id="s5">-</div><div class="label">👎</div></div>
+<div class="topbar">
+  <div class="logo">🎧 柏悦客服工作台</div>
+  <div class="stats">
+    <span>对话 <b id="s1">-</b></span>
+    <span>消息 <b id="s2">-</b></span>
+    <span>今日 <b id="s3">-</b></span>
+    <span>👍 <b id="s4">-</b></span>
+    <span>👎 <b id="s5">-</b></span>
+  </div>
+  <div class="status"><span class="dot"></span> 在线</div>
 </div>
 
 <div class="layout">
-  <div class="card">
-    <h3>进行中对话</h3>
-    <div id="sessionList"></div>
-    <h3 style="margin-top:16px;">待接入</h3>
+  <div class="conv-list">
+    <h3>待接入</h3>
     <div id="queue"></div>
+    <h3>进行中</h3>
+    <div id="sessionList"></div>
   </div>
-  <div class="card" id="chatCard" style="display:none;">
-    <h3 id="chatTitle">对话</h3>
-    <div id="chatBox"></div>
-    <input type="text" id="replyText" placeholder="输入回复，Enter发送...">
-    <button class="btn" onclick="sendReply()">发送</button>
-    <button class="btn red" onclick="closeSession()">结束会话</button>
-  </div>
-</div>
 
-<div class="card">
-  <h3>最近对话</h3>
-  <table><thead><tr><th>ID</th><th>标题</th><th>时间</th></tr></thead><tbody id="tbl"></tbody></table>
+  <div class="chat-area" id="chatArea">
+    <div class="empty" id="emptyTip">← 选择左侧对话开始服务</div>
+    <div id="chatContent" style="display:none;flex:1;display:flex;flex-direction:column;overflow:hidden;">
+      <div class="chat-header">
+        <span class="ct" id="chatTitle">对话</span>
+        <button class="close" onclick="closeSession()">结束会话</button>
+      </div>
+      <div id="chatBox"></div>
+      <div class="input-bar">
+        <input type="text" id="replyText" placeholder="输入回复，Enter发送">
+        <button onclick="sendReply()">发送</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="side">
+    <div class="card">
+      <h4>客户信息</h4>
+      <div class="info-row" id="cInfo">选择对话后显示</div>
+    </div>
+    <div class="card">
+      <h4>快捷回复</h4>
+      <div class="quick" onclick="quickReply('您好，请问有什么可以帮您？')">您好，请问有什么可以帮您？</div>
+      <div class="quick" onclick="quickReply('请提供运单号，我帮您查询。')">请提供运单号</div>
+      <div class="quick" onclick="quickReply('已为您催促，请稍候。')">已催促，请稍候</div>
+      <div class="quick" onclick="quickReply('感谢您的咨询，祝您生活愉快！')">感谢咨询</div>
+    </div>
+  </div>
 </div>
-<a href="/">← 返回客服页</a>
 
 <script>
 var curSid = 0;
@@ -73,24 +118,13 @@ fetch("/api/admin/stats").then(function(r){return r.json()}).then(function(d){
 function loadQueue(){
   fetch("/api/human/queue").then(function(r){return r.json()}).then(function(list){
     document.getElementById("queue").innerHTML = list.length
-      ? list.map(function(x){return '<button class="btn" onclick="accept('+x.id+')">#'+x.id+' '+x.ctime+'</button>'}).join(" ")
-      : "暂无";
-    if(list.length && !sessions[list[0].id]){
-      accept(list[0].id);
-    }
+      ? list.map(function(x){return '<div class="queue-item"><div class="qt">#'+x.id+' '+x.ctime+'</div><button onclick="accept('+x.id+')">接入</button></div>'}).join("")
+      : '<div style="padding:10px 14px;font-size:12px;color:#ccc;">暂无排队</div>';
+    if(list.length && !sessions[String(list[0].id)]) accept(list[0].id);
   });
 }
 setInterval(loadQueue, 3000);
 
-// 加载已有进行中的对话
-fetch("/api/human/active").then(function(r){return r.json()}).then(function(list){
-  list.forEach(function(s){
-    sessions[String(s.id)] = {lastId:0, msgs:[], unread:0};
-  });
-  renderSessionList();
-  if(list.length && !curSid) switchSession(String(list[0].id));
-});
-
 function accept(sid){
   sid = String(sid);
   if(sessions[sid]) return;
@@ -102,46 +136,45 @@ function accept(sid){
 
 function switchSession(sid){
   curSid = String(sid);
-  document.getElementById("chatCard").style.display="block";
+  document.getElementById("emptyTip").style.display="none";
+  document.getElementById("chatContent").style.display="flex";
   document.getElementById("chatTitle").textContent="对话 #"+sid;
-  document.getElementById("chatBox").innerHTML = "";
-  sessions[sid].msgs.forEach(function(m){
-    appendMsg(m);
-  });
+  document.getElementById("cInfo").innerHTML="会话编号：#"+sid;
+  document.getElementById("chatBox").innerHTML="";
+  sessions[sid].msgs.forEach(function(m){ appendMsg(m); });
   sessions[sid].unread = 0;
-  renderSessionList();
+  renderList();
 }
 
 function appendMsg(m){
   var div=document.createElement("div");
   div.className="msg "+(m.side==="customer"?"cust":"agent");
-  div.textContent=(m.side==="customer"?"客户: ":"客服: ")+m.content;
+  div.innerHTML='<div><div class="bubble">'+m.content.replace(/</g,"&lt;")+'</div><div class="meta">'+(m.side==="customer"?"客户":"客服")+'</div></div>';
   document.getElementById("chatBox").appendChild(div);
   document.getElementById("chatBox").scrollTop=999999;
 }
 
-function renderSessionList(){
+function renderList(){
   var el=document.getElementById("sessionList");
   el.innerHTML="";
   Object.keys(sessions).forEach(function(sid){
+    var last = sessions[sid].msgs[sessions[sid].msgs.length-1];
+    var preview = last ? last.content.substring(0,20) : "等待中...";
     var unread = sessions[sid].unread || 0;
     var div=document.createElement("div");
-    div.className="session-item"+(sid==curSid?" active":"");
-    div.innerHTML="对话 #"+sid+(unread>0?'<span class="badge">'+unread+'</span>':"");
+    div.className="conv-item"+(sid==curSid?" active":"");
+    div.innerHTML='<div class="avatar">'+(sid==curSid?"🟢":"👤")+'</div><div class="info"><div class="name">对话 #'+sid+'</div><div class="preview">'+preview+'</div></div>'+(unread>0?'<span class="badge">'+unread+'</span>':"");
     div.onclick=function(){ switchSession(sid); };
     el.appendChild(div);
   });
 }
 
 function poll(){
-  // 先拉所有进行中的会话
   fetch("/api/human/active").then(function(r){return r.json()}).then(function(list){
     list.forEach(function(s){
-      if(!sessions[String(s.id)]){
-        sessions[String(s.id)] = {lastId:0, msgs:[], unread:0};
-      }
+      if(!sessions[String(s.id)]) sessions[String(s.id)] = {lastId:0, msgs:[], unread:0};
     });
-    renderSessionList();
+    renderList();
   }).then(function(){
     Object.keys(sessions).forEach(function(sid){
       fetch("/api/human/poll?sid="+parseInt(sid)+"&after="+sessions[sid].lastId)
@@ -149,21 +182,16 @@ function poll(){
       .then(function(d){
         if(d.status==="closed"){
           delete sessions[sid];
-          if(sid==curSid){ curSid=0; document.getElementById("chatCard").style.display="none"; }
-          renderSessionList();
-          return;
+          if(sid==curSid){ curSid=0; document.getElementById("chatContent").style.display="none"; document.getElementById("emptyTip").style.display="flex"; }
+          renderList(); return;
         }
         d.messages.forEach(function(m){
           sessions[sid].lastId=m.id;
           sessions[sid].msgs.push(m);
-          if(m.side==="customer" && sid!=curSid){
-            sessions[sid].unread=(sessions[sid].unread||0)+1;
-            renderSessionList();
-          }
+          if(m.side==="customer" && sid!=curSid){ sessions[sid].unread=(sessions[sid].unread||0)+1; renderList(); }
           if(sid==curSid) appendMsg(m);
         });
-      })
-      .catch(function(){});
+      }).catch(function(){});
     });
   });
 }
@@ -177,24 +205,23 @@ function sendReply(){
   document.getElementById("replyText").focus();
 }
 
+function quickReply(t){
+  document.getElementById("replyText").value=t;
+  sendReply();
+}
+
 function closeSession(){
   fetch("/api/human/close",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({sid:parseInt(curSid)})});
   delete sessions[curSid];
   curSid=0;
-  document.getElementById("chatCard").style.display="none";
-  renderSessionList();
+  document.getElementById("chatContent").style.display="none";
+  document.getElementById("emptyTip").style.display="flex";
+  renderList();
 }
 
 document.getElementById("replyText").addEventListener("keydown", function(e){
   if(e.key==="Enter"){ e.preventDefault(); sendReply(); }
 });
-
-fetch("/api/get_history").then(function(r){return r.json()}).then(function(list){
-  var tb=document.getElementById("tbl");
-  list.slice(0,20).forEach(function(c){
-    tb.innerHTML+="<tr><td>"+c.id+"</td><td>"+c.title+"</td><td>"+(c.utime||c.ctime)+"</td></tr>";
-  });
-});
 </script>
 </body>
 </html>