feat(mmp): 领取进度/过期状态，并展示红包与领取人ID

状态优先显示已全部领取或已领取N/M，未领完才附加已过期；列表与最高最低补全 activityId、receiverId。

debug-server/mmp_page.html

@@ -96,6 +96,7 @@
     .pkt.active { background: #fff7ed; box-shadow: inset 3px 0 0 #ea580c; }
     .pkt-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
     .pkt-name { font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .pkt-uid { font-size: 11px; color: #9ca3af; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Consolas, monospace; }
     .pkt-money {
       font-size: 15px; font-weight: 800; color: var(--money);
       font-variant-numeric: tabular-nums; white-space: nowrap;
@@ -104,9 +105,11 @@
     .pkt-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .badge {
       display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 700; flex-shrink: 0;
+      max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
     .badge.done { background: var(--best-bg); color: var(--done); }
     .badge.open { background: var(--worst-bg); color: var(--open); }
+    .badge.expired { background: #f3f4f6; color: #6b7280; }
     .pkt-luck {
       margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
     }
@@ -366,6 +369,14 @@
     }
     function money(v){ const n=Number(v); return Number.isFinite(n)?n.toFixed(2):String(v??'-'); }
     function shortId(id){ const s=String(id||''); return (s.length>=8&&s.indexOf('-')>0)?s.slice(0,8):(s.slice(0,16)||'-'); }
+    function formatHiLo(prefix, row){
+      if(!row) return prefix + ' -';
+      const nick = row.nickname || row.bestNick || '-';
+      const amt = row.amountText || row.bestAmount || (row.amount!=null ? money(row.amount) : '');
+      const uid = row.userId || '';
+      if(uid) return `${prefix} ${esc(nick)} ${esc(amt)}<div class="pkt-uid">ID ${esc(uid)}</div>`;
+      return `${prefix} ${esc(nick)} ${esc(amt)}`.trim();
+    }
     function hiLo(p){
       return {
         hi: p&&p.finished?'手气最佳':'目前最高',
@@ -407,19 +418,35 @@
         const div=document.createElement('div');
         div.className='pkt'+(p.packetId===activeId?' active':'');
         div.onclick=()=>{ activeId=p.packetId; renderList(); };
-        const badge=p.finished?'<span class="badge done">已领完</span>':'<span class="badge open">领取中</span>';
-        const hiShort = p.finished ? '最佳' : '最高';
-        const loShort = p.finished ? '最差' : '最低';
-        const bestLine = `${hiShort} ${esc(p.bestNick||'-')} ${esc(p.bestAmount||'')}`.trim();
+        const label = p.statusLabel || (p.finished ? '已领完' : '领取中');
+        const fully = label.indexOf('已全部领取') >= 0;
+        const expired = label.indexOf('已过期') >= 0;
+        const badgeClass = fully ? 'done' : (expired ? 'expired' : 'open');
+        const badge=`<span class="badge ${badgeClass}">${esc(label)}</span>`;
+        const hiShort = p.finished || fully ? '最佳' : '最高';
+        const loShort = p.finished || fully ? '最差' : '最低';
+        const best = (p.leaderboard && p.leaderboard[0]) || null;
+        const worst = (p.leaderboard && p.leaderboard.length > 1)
+          ? p.leaderboard[p.leaderboard.length - 1] : null;
+        const bestLine = formatHiLo(hiShort, best || {nickname:p.bestNick, amountText:p.bestAmount, userId:p.bestUserId});
         const worstLine = (p.claimantCount||0)<=1
           ? `${loShort} -`
-          : `${loShort} ${esc(p.worstNick||'-')} ${esc(p.worstAmount||'')}`.trim();
+          : formatHiLo(loShort, worst || {nickname:p.worstNick, amountText:p.worstAmount, userId:p.worstUserId});
+        const timeLine = p.expiresAt
+          ? `${esc(p.issuedAt||'时间未知')} · 到期 ${esc(p.expiresAt)}`
+          : esc(p.issuedAt||'时间未知');
+        const countLine = (p.totalCount > 0)
+          ? `${p.claimedCount||p.claimantCount||0}/${p.totalCount}人`
+          : `${p.claimantCount||0}人`;
         div.innerHTML=`
           <div class="pkt-row">
-            <div class="pkt-name">${esc(p.sender||p.title||'红包')}</div>
+            <div style="min-width:0;flex:1">
+              <div class="pkt-name">${esc(p.sender||p.title||'红包')}</div>
+              ${p.packetId ? `<div class="pkt-uid">ID ${esc(p.packetId)}</div>` : ''}
+            </div>
             <div class="pkt-money">${money(p.sumClaimed??p.total??0)}</div>
           </div>
-          <div class="pkt-meta">${badge}<span>${p.claimantCount||0}人 · ${esc(p.issuedAt||'时间未知')}</span><span class="pkt-id">${esc(shortId(p.packetId))}</span></div>
+          <div class="pkt-meta">${badge}<span>${countLine} · ${timeLine}</span></div>
           <div class="pkt-luck">
             <div class="mini best">${bestLine}</div>
             <div class="mini worst">${worstLine}</div>
@@ -437,21 +464,42 @@
       const parts=[];
       if(p.packetId) parts.push('ID '+p.packetId);
       if(p.issuedAt) parts.push('发放 '+p.issuedAt);
+      if(p.expiresAt) parts.push('到期 '+p.expiresAt);
       if(p.via) parts.push(p.via);
       sub.textContent = parts.join(' · ');
       cPeople.textContent = p.claimantCount || 0;
       cSum.textContent = money(p.sumClaimed ?? 0);
       cTotal.textContent = p.total || '-';
-      cStatus.innerHTML = p.finished ? '<span class="badge done">已领完</span>' : '<span class="badge open">领取中</span>';
+      cStatus.innerHTML = (()=>{
+        const label = p.statusLabel || (p.finished ? '已领完' : '领取中');
+        const fully = label.indexOf('已全部领取') >= 0;
+        const expired = label.indexOf('已过期') >= 0;
+        const cls = fully ? 'done' : (expired ? 'expired' : 'open');
+        return `<span class="badge ${cls}">${esc(label)}</span>`;
+      })();
       luckBestLab.textContent = labels.hi;
       luckWorstLab.textContent = labels.lo;
-      luckBestName.textContent = p.bestNick || '-';
-      luckBestAmt.textContent = p.bestAmount ? ('RM ' + p.bestAmount) : '-';
-      if((p.claimantCount||0)<=1){
-        luckWorstName.textContent='-'; luckWorstAmt.textContent='-';
+      const best = (p.leaderboard && p.leaderboard[0]) || null;
+      const worst = (p.leaderboard && p.leaderboard.length > 1)
+        ? p.leaderboard[p.leaderboard.length - 1] : null;
+      if(best){
+        luckBestName.innerHTML = best.userId
+          ? `${esc(best.nickname||'-')}<div class="pkt-uid">ID ${esc(best.userId)}</div>`
+          : esc(best.nickname||p.bestNick||'-');
+        luckBestAmt.textContent = best.amountText ? ('RM ' + best.amountText)
+          : (p.bestAmount ? ('RM ' + p.bestAmount) : '-');
       } else {
-        luckWorstName.textContent = p.worstNick || '-';
-        luckWorstAmt.textContent = p.worstAmount ? ('RM ' + p.worstAmount) : '-';
+        luckBestName.textContent = p.bestNick || '-';
+        luckBestAmt.textContent = p.bestAmount ? ('RM ' + p.bestAmount) : '-';
+      }
+      if(worst && (p.claimantCount||0)>1){
+        luckWorstName.innerHTML = worst.userId
+          ? `${esc(worst.nickname||'-')}<div class="pkt-uid">ID ${esc(worst.userId)}</div>`
+          : esc(worst.nickname||p.worstNick||'-');
+        luckWorstAmt.textContent = worst.amountText ? ('RM ' + worst.amountText)
+          : (p.worstAmount ? ('RM ' + p.worstAmount) : '-');
+      } else {
+        luckWorstName.textContent='-'; luckWorstAmt.textContent='-';
       }
       const rows=p.leaderboard||[];
       board.innerHTML='';