广场帖子、专题页评论可以回复:点评论或「回复」即回复 TA,回复同样先审后发,楼里按时间排(v26110243)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-03 00:07:38 +00:00
parent c2ebad1169
commit 3f40e11c96
7 changed files with 85 additions and 42 deletions

View File

@@ -50,6 +50,7 @@
'.tc-t{margin-top:4px;font-size:14.5px;line-height:1.7;color:#1F2329;word-break:break-word}' +
'.tc-f{display:flex;justify-content:flex-end;margin-top:2px}.tc-lk{display:inline-flex;align-items:center;gap:3px;border:0;background:none;padding:2px 0;font-size:12px;color:#86909C}.tc-lk svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}' +
'.tc-lk.on{color:#F2533A}.tc-lk.on svg{fill:currentColor}' +
'.tc-rpy{border:0;background:none;padding:2px 0;margin-right:auto;font-size:12px;font-weight:600;color:#86909C}.tc-r p[data-rk],.tc-b[data-rk] .tc-t{cursor:pointer}.tc-r p.rej{color:#A0A6AE}.tc-r .tc-st{margin-top:3px}' +
'.tc-r{margin-top:6px;padding:8px 10px;border-radius:12px;background:#F7F8FA;font-size:13.5px;line-height:1.65;color:#4E5969}.tc-r p+p{margin-top:4px}.tc-r b{font-weight:600;color:#1F2329}' +
'.tc-more{display:block;width:100%;margin-top:6px;height:40px;border:0;border-radius:99px;background:#F7F8FA;color:#4E5969;font-size:13px;font-weight:600}';
var SLUG = (location.pathname.match(/\/topic\/([^\/]+)\//) || [])[1] || '';
@@ -65,7 +66,7 @@
function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); }
function related(box) {
getJSON('../_shared/idx.json?v=26110242').then(function (idx) {
getJSON('../_shared/idx.json?v=26110243').then(function (idx) {
var me = null; idx.forEach(function (x) { if (x[0] === SLUG) me = x; });
var tag = me ? me[2] : '', h = 0; for (var i = 0; i < SLUG.length; i++) h = (h * 31 + SLUG.charCodeAt(i)) >>> 0;
var rest = idx.filter(function (x) { return x[0] !== SLUG; });
@@ -87,24 +88,44 @@
var API = '/api/mp/public/mama-box/plaza';
function mine() {
var old = (st.m.cm[SLUG] || []).map(function (c) { return { t: c.t, ts: c.ts, s: c.s, st: 'local' }; });
return old.concat(RC.mine.slice().reverse().map(function (c) { return { t: c.text, ts: c.at, s: c.stage, st: c.status, why: c.reason, id: c.id }; }));
return old.concat(RC.mine.slice().reverse().map(function (c) { return { t: c.text, ts: c.at, s: c.stage, st: c.status, why: c.reason, id: c.id, parent: c.parent, to: c.parentName }; }));
}
function real() { return RC.list.filter(function (c) { return !c.parent; }).map(function (c) { return [c.nickname || '孕妈', c.avatar || '', c.stage || '', c.text, 0, [], 'r:' + c.id]; }); }
/* 11-03 用户:可以回复别人的评论。回复也先审核;楼里只有一层,回复回复也挂在同一楼,写「回复 XX」 */
var REPLY = null, MYN = '我';
function stTag(c) { return c.st === 'pending' ? '<span class="tc-st pending">审核中 · 通过后大家才能看到</span>' : c.st === 'rejected' ? '<span class="tc-st">未通过' + (c.why ? ':' + esc(c.why) : '') + '</span>' : c.st === 'local' ? '<span class="tc-st">仅自己可见</span>' : ''; }
function replies(base, k, owner) {
var L2 = (base || []).map(function (r) { return { n: r[0], t: r[3] }; })
.concat(RC.list.filter(function (c) { return c.parent === k; }).map(function (c) { return { n: c.nickname || '孕妈', t: c.text, to: c.parentName, ts: c.at }; })
.concat(mine().filter(function (c) { return c.parent === k; }).map(function (c) { return { n: MYN, me: 1, t: c.t, to: c.to, st: c.st, why: c.why, ts: c.ts }; }))
.sort(function (x, y) { return x.ts - y.ts; })); /* 预置回复在前,真实回复按时间先后 */
return L2.length ? '<div class="tc-r">' + L2.map(function (r) {
return '<p' + (r.me ? (r.st === 'rejected' ? ' class="rej"' : '') : ' data-rk="' + esc(k) + '" data-rn="' + esc(r.n) + '"') + '><b>' + esc(r.n) + '</b>' + (r.to && r.to !== owner ? ' 回复 <b>' + esc(r.to) + '</b>' : '') + '<b>:</b>' + esc(r.t) +
(r.me && r.st !== 'approved' ? '<br>' + stTag(r) : '') + '</p>';
}).join('') + '</div>' : '';
}
function real() { return RC.list.map(function (c) { return [c.nickname || '孕妈', c.avatar || '', c.stage || '', c.text, 0, [], 'r:' + c.id]; }); }
function item(c, key) {
var lk = !!st.m.lk[key];
var tag = !c.me ? '' : c.st === 'pending' ? '<span class="tc-st pending">审核中 · 通过后大家才能看到</span>' : c.st === 'rejected' ? '<span class="tc-st">未通过' + (c.why ? ':' + esc(c.why) : '') + '</span>' : c.st === 'local' ? '<span class="tc-st">仅自己可见</span>' : '';
var rk = c.me ? (c.id && c.st === 'approved' ? 'r:' + c.id : '') : key, rn = c.me ? MYN : c[0];
var tag = c.me ? stTag(c) : '';
return '<div class="tc-it' + (c.me && c.st === 'rejected' ? ' rej' : '') + '">' + (c.me ? '<span class="tc-av tc-me">我</span>' : '<img class="tc-av" src="' + esc(avP(c[1])) + '" alt="" loading="lazy">') +
'<div class="tc-b"><div class="tc-n"><b>' + esc(c.me ? '我' : c[0]) + '</b>' + (c.me ? '<i>' + esc(c.s || myStage() || '刚刚') + '</i>' : (c[2] ? '<i>' + esc(c[2]) + '</i>' : '')) + '</div>' +
'<div class="tc-b"' + (rk ? ' data-rk="' + esc(rk) + '" data-rn="' + esc(rn) + '"' : '') + '><div class="tc-n"><b>' + esc(c.me ? '我' : c[0]) + '</b>' + (c.me ? '<i>' + esc(c.s || myStage() || '刚刚') + '</i>' : (c[2] ? '<i>' + esc(c[2]) + '</i>' : '')) + '</div>' +
'<div class="tc-t">' + esc(c.me ? c.t : c[3]) + '</div>' + tag +
(!c.me && c[5] && c[5].length ? '<div class="tc-r">' + c[5].map(function (r) { return '<p><b>' + esc(r[0]) + ':</b>' + esc(r[3]) + '</p>'; }).join('') + '</div>' : '') +
'<div class="tc-f"><button type="button" class="tc-lk' + (lk ? ' on' : '') + '" data-k="' + esc(key) + '">' + HEART + '<span>' + ((c.me ? 0 : c[4]) + (lk ? 1 : 0) || '赞') + '</span></button></div></div></div>';
(rk ? replies(c.me ? [] : c[5], rk, rn) : '') +
'<div class="tc-f">' + (rk ? '<button type="button" class="tc-rpy">回复</button>' : '') + '<button type="button" class="tc-lk' + (lk ? ' on' : '') + '" data-k="' + esc(key) + '">' + HEART + '<span>' + ((c.me ? 0 : c[4]) + (lk ? 1 : 0) || '赞') + '</span></button></div></div></div>';
}
function paint() {
var my = mine().slice().reverse(), A = real().concat(L), n = A.length + my.filter(function (c) { return c.st !== 'rejected'; }).length, show = open ? A : A.slice(0, 5);
var my = mine().filter(function (c) { return !c.parent; }).reverse(), A = real().concat(L), n = A.length + my.filter(function (c) { return c.st !== 'rejected'; }).length, show = open ? A : A.slice(0, 5);
box.innerHTML = '<div class="tt-h"><b>大家怎么说</b><span>' + n + ' 条评论</span></div>' +
'<div class="tc-list">' + my.map(function (c, i) { return item({ me: 1, t: c.t, s: c.s, st: c.st, why: c.why }, 'me' + c.ts); }).join('') +
show.map(function (c, i) { return item(c, c[6] || SLUG + '#' + (i - (A.length - L.length))); }).join('') + '</div>' +
(!open && A.length > 5 ? '<button type="button" class="tc-more">展开全部 ' + n + ' 条评论</button>' : '');
[].forEach.call(box.querySelectorAll('[data-rk]'), function (el) {
el.addEventListener('click', function (e) {
if (e.target.closest('.tc-lk') || (el.classList.contains('tc-b') && e.target.closest('.tc-r'))) return;
REPLY = { k: el.dataset.rk, n: el.dataset.rn }; ta.placeholder = '回复 ' + REPLY.n + ':'; ta.focus();
});
});
var mo = box.querySelector('.tc-more'); if (mo) mo.addEventListener('click', function () { open = true; paint(); });
[].forEach.call(box.querySelectorAll('.tc-lk'), function (b) {
b.addEventListener('click', function () { var k = b.dataset.k; if (st.m.lk[k]) delete st.m.lk[k]; else st.m.lk[k] = 1; saveMe(st); paint(); });
@@ -117,7 +138,8 @@
document.body.appendChild(bar);
var sc = box.parentNode; while (sc && sc !== document.body && !/(auto|scroll)/.test(getComputedStyle(sc).overflowY)) sc = sc.parentNode;
sc = sc || document.body; sc.style.paddingBottom = (parseFloat(getComputedStyle(sc).paddingBottom) || 0) + 64 + 'px';
var ta = bar.querySelector('textarea'), bt = bar.querySelector('button');
var ta = bar.querySelector('textarea'), bt = bar.querySelector('button'), PH = ta.placeholder;
ta.addEventListener('blur', function () { setTimeout(function () { if (!ta.value.trim()) { REPLY = null; ta.placeholder = PH; } }, 150); });
ta.addEventListener('input', function () { bt.disabled = !ta.value.trim(); ta.style.height = '24px'; ta.style.height = Math.min(96, ta.scrollHeight) + 'px'; });
bt.addEventListener('click', function () {
var v = ta.value.trim(); if (!v || bt.busy) return;
@@ -126,14 +148,15 @@
bt.busy = true; bt.disabled = true;
var h1 = document.querySelector('h1');
fetch(API + '/comment?openid=' + encodeURIComponent(OID), { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ kind: 'topic', target: SLUG, title: (h1 && h1.textContent.trim()) || document.title, text: v.slice(0, 200), stage: myStage() }) })
body: JSON.stringify({ kind: 'topic', target: SLUG, title: (h1 && h1.textContent.trim()) || document.title, text: v.slice(0, 200), stage: myStage(), parent: REPLY ? REPLY.k : '', parentName: REPLY ? REPLY.n : '' }) })
.then(function (r) { return r.json(); }).then(function (j) {
bt.busy = false;
if (!j || j.code !== 200) { bt.disabled = !ta.value.trim(); toast((j && j.message) || '没发出去,稍后再试'); return; }
RC.mine.unshift(j.result);
var wasReply = !!REPLY; REPLY = null; ta.placeholder = PH;
ta.value = ''; ta.style.height = '24px'; bt.disabled = true; ta.blur(); paint();
box.scrollIntoView({ block: 'start', behavior: 'smooth' });
toast('已提交,审核通过后大家就能看到');
if (!wasReply) box.scrollIntoView({ block: 'start', behavior: 'smooth' });
toast(wasReply ? '回复已提交,审核通过后大家就能看到' : '已提交,审核通过后大家就能看到');
}).catch(function () { bt.busy = false; bt.disabled = !ta.value.trim(); toast('网络不太好,稍后再试'); });
});
function toast(m) {
@@ -143,7 +166,7 @@
}
fetch(API + '/comments?kind=topic&target=' + encodeURIComponent(SLUG) + (OID ? '&openid=' + encodeURIComponent(OID) : ''))
.then(function (r) { return r.json(); }).then(function (j) { if (j && j.code === 200) { RC = j.result; paint(); } }).catch(function () {});
getJSON('../_shared/cm/' + SLUG + '.json?v=26110242').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
getJSON('../_shared/cm/' + SLUG + '.json?v=26110243').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
}
function extras(el) {