feat(wechat-auto-reply): 白名单改选人弹窗(可搜索多选)，解决不知道 wxid

/whitelist 添加改为弹窗：默认列会话过的联系人/群(带昵称)，搜索框查全量通讯录，复选框多选批量入库。新增 /api/contacts(会话列表) + /api/contacts/search(全量搜)， /api/whitelist POST 支持批量 items。白名单存储/显示昵称+wxid/群id+类型。真机验证 33 条默认列表、搜索、批量加(added:2)全通。viewer 改动全文见 wechat-viewer-changes.md。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

feat(wechat-auto-reply): 白名单改选人弹窗(可搜索多选)，解决不知道 wxid
/whitelist 添加改为弹窗：默认列会话过的联系人/群(带昵称)，搜索框查全量通讯录，复选框多选批量入库。新增 /api/contacts(会话列表) + /api/contacts/search(全量搜)， /api/whitelist POST 支持批量 items。白名单存储/显示昵称+wxid/群id+类型。真机验证 33 条默认列表、搜索、批量加(added:2)全通。viewer 改动全文见 wechat-viewer-changes.md。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
yibo
1 parent acdcc2b3
Showing 2 changed files with 99 additions and 37 deletions
wechat_plain/scripts/auto-reply/viewer_templates/whitelist.html
wechat_plain/scripts/auto-reply/wechat-viewer-changes.md
@@ -4,66 +4,121 @@
 <style>
 body{overflow-y:auto!important;height:auto!important;}
 .wl-container{max-width:760px;margin:0 auto;padding:20px;}
-.wl-header h1{font-size:20px;color:#2c3e50;margin-bottom:6px;}
-.wl-hint{font-size:12px;color:#888;margin-bottom:16px;line-height:1.5;}
-.add-box{background:white;border-radius:8px;padding:14px 16px;margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,0.05);display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
-.add-box input{border:1px solid #cfd8e3;border-radius:6px;padding:8px 10px;font-size:13px;}
-.add-box input.wxid{flex:1;min-width:180px;}
-.add-box input.name{width:140px;}
-.btn-add{background:#27ae60;color:white;border:none;border-radius:6px;padding:8px 16px;font-size:13px;cursor:pointer;}
+.wl-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
+.wl-header h1{font-size:20px;color:#2c3e50;}
+.btn-add{background:#27ae60;color:white;border:none;border-radius:6px;padding:8px 16px;font-size:14px;cursor:pointer;}
+.wl-hint{font-size:12px;color:#888;margin:8px 0 16px;line-height:1.5;}
 .wl-card{background:white;border-radius:8px;padding:12px 16px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,0.05);display:flex;align-items:center;gap:10px;}
-.kb{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;}
+.kb{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;flex-shrink:0;}
 .kb.contact{background:#d6eaf8;color:#1a5276}.kb.group{background:#fdebd0;color:#b9770e}
 .wl-name{font-weight:600;font-size:14px;}
-.wl-wxid{font-size:11px;color:#999;}
-.btn-del{margin-left:auto;background:#e74c3c;color:white;border:none;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;}
+.wl-wxid{font-size:11px;color:#999;word-break:break-all;}
+.btn-del{margin-left:auto;background:#e74c3c;color:white;border:none;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;flex-shrink:0;}
 .empty-state{text-align:center;padding:50px 20px;color:#999;}
+/* modal */
+.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;}
+.modal-mask.show{display:flex;align-items:center;justify-content:center;}
+.modal{background:white;border-radius:12px;width:92%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;}
+.modal-hd{padding:14px 18px;border-bottom:1px solid #eee;display:flex;align-items:center;gap:10px;}
+.modal-hd h3{font-size:16px;flex:1;}
+.modal-hd .x{background:none;border:none;font-size:22px;color:#999;cursor:pointer;}
+.modal-search{padding:10px 18px;border-bottom:1px solid #f0f0f0;}
+.modal-search input{width:100%;box-sizing:border-box;border:1px solid #cfd8e3;border-radius:8px;padding:9px 12px;font-size:14px;}
+.modal-body{flex:1;overflow-y:auto;padding:6px 0;}
+.pick-row{display:flex;align-items:center;gap:10px;padding:9px 18px;cursor:pointer;}
+.pick-row:hover{background:#f5f8fb;}
+.pick-row input{width:17px;height:17px;flex-shrink:0;}
+.pick-row .nm{font-size:14px;flex:1;}
+.pick-row .kb2{font-size:9px;padding:1px 6px;border-radius:8px;flex-shrink:0;}
+.kb2.contact{background:#d6eaf8;color:#1a5276}.kb2.group{background:#fdebd0;color:#b9770e}
+.modal-ft{padding:12px 18px;border-top:1px solid #eee;display:flex;align-items:center;gap:10px;}
+.modal-ft .cnt{font-size:13px;color:#666;flex:1;}
+.btn-confirm{background:#27ae60;color:white;border:none;border-radius:8px;padding:9px 20px;font-size:14px;cursor:pointer;}
+.btn-confirm:disabled{opacity:.5;cursor:not-allowed;}
+.loading{text-align:center;padding:30px;color:#999;}
 </style>
 <div class="wl-container">
-<div class="wl-header"><h1>⭐ 回复白名单</h1></div>
-<div class="wl-hint">在白名单里的联系人 / 群，其消息可被<b>自动回复</b>（仍受敏感词等安全规则拦截，命中会转人工审批）。不在名单里的一律进「自动回复审批」等你手动发。<br>群 id 以 <code>@chatroom</code> 结尾会自动识别为群。</div>
-<div class="add-box">
-<input class="wxid" id="wxid" placeholder="wxid 或 群id(xxx@chatroom)">
-<input class="name" id="name" placeholder="备注名(可选)">
-<button class="btn-add" onclick="add()">➕ 添加</button>
-</div>
+<div class="wl-header"><h1>⭐ 回复白名单</h1><button class="btn-add" onclick="openPicker()">➕ 添加</button></div>
+<div class="wl-hint">白名单里的联系人 / 群，消息可被<b>自动回复</b>（仍受敏感词等安全规则拦截，命中转人工）。不在名单里的一律进「自动回复审批」等你手动发。</div>
 <div id="list"></div>
 </div>
+
+<!-- 选人弹窗 -->
+<div class="modal-mask" id="mask">
+  <div class="modal">
+    <div class="modal-hd"><h3>选择联系人 / 群</h3><button class="x" onclick="closePicker()">×</button></div>
+    <div class="modal-search"><input id="q" placeholder="搜索昵称 / 备注 / 群名..." oninput="onSearch()"></div>
+    <div class="modal-body" id="picklist"><div class="loading">加载中...</div></div>
+    <div class="modal-ft"><span class="cnt" id="cnt">已选 0</span>
+      <button class="btn-confirm" id="btnConfirm" onclick="confirmAdd()" disabled>添加所选</button></div>
+  </div>
+</div>
+
 <script>
 function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+var selected={};      // wxid -> {wxid,name,kind}
+var searchTimer=null;
+
 function load(){
   var el=document.getElementById('list');
   fetch('/api/whitelist').then(function(r){return r.json()}).then(function(j){
     if(!j.ok){el.innerHTML='<div class="empty-state">加载失败</div>';return;}
     if(!j.data.length){el.innerHTML='<div class="empty-state"><p>白名单为空 — 当前所有回复都会进人工审批</p></div>';return;}
     var h='';
-    for(var i=0;i<j.data.length;i++){
-      var t=j.data[i];
-      h+='<div class="wl-card">';
-      h+='<span class="kb '+t.kind+'">'+(t.kind==='group'?'群':'联系人')+'</span>';
-      h+='<span class="wl-name">'+esc(t.name||'(未命名)')+'</span>';
-      h+='<span class="wl-wxid">'+esc(t.wxid)+'</span>';
-      h+='<button class="btn-del" onclick="del('+t.id+')">删除</button>';
-      h+='</div>';
+    for(var i=0;i<j.data.length;i++){var t=j.data[i];
+      h+='<div class="wl-card"><span class="kb '+t.kind+'">'+(t.kind==='group'?'群':'联系人')+'</span>';
+      h+='<div><div class="wl-name">'+esc(t.name||'(未命名)')+'</div><div class="wl-wxid">'+esc(t.wxid)+'</div></div>';
+      h+='<button class="btn-del" onclick="del('+t.id+')">删除</button></div>';
     }
     el.innerHTML=h;
   });
 }
-function add(){
-  var wxid=document.getElementById('wxid').value.trim();
-  var name=document.getElementById('name').value.trim();
-  if(!wxid){alert('请输入 wxid 或群id');return;}
-  fetch('/api/whitelist',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({wxid:wxid,name:name})})
-    .then(function(r){return r.json()}).then(function(j){
-      if(j.ok){document.getElementById('wxid').value='';document.getElementById('name').value='';load();}
-      else{alert('失败: '+(j.error||''));}
-    });
+function del(id){fetch('/api/whitelist/'+id+'/delete',{method:'POST'}).then(function(r){return r.json()}).then(function(j){if(j.ok)load();else alert('失败');});}
+
+function openPicker(){
+  selected={};updateCnt();
+  document.getElementById('q').value='';
+  document.getElementById('mask').classList.add('show');
+  fetchList('/api/contacts');
+}
+function closePicker(){document.getElementById('mask').classList.remove('show');}
+function onSearch(){
+  clearTimeout(searchTimer);
+  var q=document.getElementById('q').value.trim();
+  searchTimer=setTimeout(function(){
+    fetchList(q?('/api/contacts/search?q='+encodeURIComponent(q)):'/api/contacts');
+  },250);
 }
-function del(id){
-  fetch('/api/whitelist/'+id+'/delete',{method:'POST'}).then(function(r){return r.json()}).then(function(j){
-    if(j.ok){load();}else{alert('失败: '+(j.error||''));}
+function fetchList(url){
+  var el=document.getElementById('picklist');el.innerHTML='<div class="loading">加载中...</div>';
+  fetch(url).then(function(r){return r.json()}).then(function(j){
+    if(!j.ok){el.innerHTML='<div class="loading">加载失败: '+esc(j.error)+'</div>';return;}
+    if(!j.data.length){el.innerHTML='<div class="loading">无结果</div>';return;}
+    var h='';
+    for(var i=0;i<j.data.length;i++){var t=j.data[i];
+      var ck=selected[t.wxid]?'checked':'';
+      h+='<label class="pick-row"><input type="checkbox" '+ck+
+         ' onchange="toggle(this,'+esc(JSON.stringify(t)).replace(/"/g,'&quot;')+')">'+
+         '<span class="nm">'+esc(t.name)+'</span>'+
+         '<span class="kb2 '+t.kind+'">'+(t.kind==='group'?'群':'联系人')+'</span></label>';
+    }
+    el.innerHTML=h;
   });
 }
+function toggle(cb,t){if(cb.checked)selected[t.wxid]=t;else delete selected[t.wxid];updateCnt();}
+function updateCnt(){
+  var n=Object.keys(selected).length;
+  document.getElementById('cnt').textContent='已选 '+n;
+  document.getElementById('btnConfirm').disabled=(n===0);
+}
+function confirmAdd(){
+  var items=Object.keys(selected).map(function(k){return selected[k];});
+  if(!items.length)return;
+  fetch('/api/whitelist',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({items:items})})
+    .then(function(r){return r.json()}).then(function(j){
+      if(j.ok){closePicker();load();}else{alert('失败: '+(j.error||''));}
+    });
+}
 load();
 </script>
 {% endblock %}
@@ -31,6 +31,13 @@ CREATE TABLE reply_queue (        -- 策略判定后落地
 | `GET /api/replies?status=` | 队列列表（pending / sent / auto_sent / cancelled / 全部） |
 | `POST /api/reply/<id>/send` | 用（可编辑的）草稿发到会话 → `send_text_via_hook(talker,text)` → 标 sent/failed |
 | `POST /api/reply/<id>/cancel` | 标 cancelled |
+| `GET /api/contacts` | 弹窗默认列表：会话过的联系人+群（排除公众号），去重带昵称，最近排序 |
+| `GET /api/contacts/search?q=` | 按名字/wxid 搜全量 rcontact+群（`wechat_db.search_talker`） |
+| `POST /api/whitelist`（升级） | 支持批量 `{items:[{wxid,name,kind}]}`（弹窗多选） |
+
+**白名单选人弹窗（2026-07-10 升级）**：`/whitelist` 页「添加」不再手填 wxid，改为弹窗：
+默认列出你会话过的联系人/群（带昵称），顶部搜索框可查全量通讯录/群，复选框**多选**，
+【添加所选】批量入库。白名单列表显示 昵称 + wxid/群id + 类型徽章。解决「不知道 wxid」的问题。
  
 发送复用 `~/.hermes/event_bus/wechat_hook_send.py` 的 `send_text_via_hook`（LSPosed 内部 API 广播 `SEND_MSG_INTERNAL`）。