评论徽章DOM/尺寸统一(拆badge-wrap+单一类名)、修复main.css!important劫持徽章尺寸、友链卡片挂到comment级与输入框对齐、卡片动效+打字机、申请弹窗按钮错位与滚动条修复
Deploy to Production / pre-check (push) Successful in 58s
Deploy to Production / build (push) Successful in 3m56s
Deploy to Production / deploy-edgeone (push) Canceled after 1m23s
Deploy to Production / finalize (push) Canceled after 0s
Deploy to Production / notify-failure (push) Canceled after 0s
Deploy to Production / pre-check (push) Successful in 58s
Deploy to Production / build (push) Successful in 3m56s
Deploy to Production / deploy-edgeone (push) Canceled after 1m23s
Deploy to Production / finalize (push) Canceled after 0s
Deploy to Production / notify-failure (push) Canceled after 0s
This commit is contained in:
zqlit committed
1 parent
87c47d13c9
commit
98126cafe6
4 files changed
+161
-73
No files matched your search
@@ -672,8 +672,10 @@ artalk.on('comment-rendered', function(node) {
|
||||
var linkMatch = matchBadge(linkMap, host, nickLower);
|
||||
var feedMatch = matchBadge(feedMap, host, nickLower);
|
||||
|
||||
// 官方系统徽章（博主等）由 Artalk 渲染在 .atk-badge-wrap，把它挪进
|
||||
// 昵称元素内，保证视觉顺序：系统徽章 > 头衔 > 友链 > 友圈 > 官职
|
||||
// 系统徽章（博主/置顶）由 Artalk 渲染在 .atk-badge-wrap 里，头衔/友链/友圈/官职
|
||||
// 则是直接插进昵称的 —— 两套 DOM 会导致尺寸与垂直对齐都不一致。这里把包装层
|
||||
// 拆掉，让所有徽章都成为昵称的直接子元素，视觉顺序：
|
||||
// 系统徽章 > 头衔 > 友链 > 友圈 > 官职
|
||||
var badgeWrap = el.querySelector('.atk-badge-wrap');
|
||||
if (badgeWrap && badgeWrap.parentNode !== nickEl) nickEl.appendChild(badgeWrap);
|
||||
|
||||
@@ -691,6 +693,20 @@ artalk.on('comment-rendered', function(node) {
|
||||
if (data.rank_count != null) tip += ' (' + data.rank_count + '条评论)';
|
||||
injectBadge(nickEl, 'atk-rank-badge', data.rank_name, tip, data.rank_color || '', data.rank_bg || '');
|
||||
}
|
||||
|
||||
// 5) 拆掉 .atk-badge-wrap 包装层：把 博主/置顶 提成昵称的直接子元素（保持原顺序）
|
||||
var wrap = nickEl.querySelector('.atk-badge-wrap');
|
||||
if (wrap && wrap.parentNode) {
|
||||
var wrapParent = wrap.parentNode;
|
||||
while (wrap.firstChild) wrapParent.insertBefore(wrap.firstChild, wrap);
|
||||
wrapParent.removeChild(wrap);
|
||||
}
|
||||
// 6) 所有徽章挂同一个类，几何样式（尺寸/内边距/圆角/字重/对齐）只由
|
||||
// .atk-cmt-badge 一处定义，从此不会有"两种徽章尺寸不一致"的问题
|
||||
var allBadges = nickEl.querySelectorAll(
|
||||
'.atk-badge, .atk-pinned-badge, .atk-title-badge, .atk-link-badge, .atk-feed-badge, .atk-rank-badge'
|
||||
);
|
||||
for (var bi = 0; bi < allBadges.length; bi++) allBadges[bi].classList.add('atk-cmt-badge');
|
||||
} catch (e) { /* 徽章注入失败不影响评论 */ }
|
||||
|
||||
// ── 友链申请入口卡片：评论内容就是约定 URL（https://usj.cc/link-apply）时，
|
||||
@@ -716,7 +732,9 @@ artalk.on('comment-rendered', function(node) {
|
||||
var avImg = el2.querySelector('.atk-avatar img');
|
||||
var avatarSrc = avImg ? avImg.getAttribute('src') : '';
|
||||
var nickEl2 = el2.querySelector('.atk-nick');
|
||||
var sysBadge = (nickEl2 || el2).querySelector('.atk-badge-wrap');
|
||||
// wrap 已在上面拆掉，博主徽章现在是昵称的直接子元素
|
||||
var sysBadge = (nickEl2 || el2).querySelector('.atk-badge') ||
|
||||
el2.querySelector('.atk-badge');
|
||||
var nickText = String(d2.nick || '博主');
|
||||
|
||||
// 隐藏评论常规元素（头像列/昵称行/页脚操作），整条变成一张卡片
|
||||
@@ -730,40 +748,67 @@ artalk.on('comment-rendered', function(node) {
|
||||
if (meta) meta.style.display = 'none';
|
||||
|
||||
var main = el2.querySelector('.atk-main') || el2;
|
||||
main.style.marginLeft = '0'; // 卡片占满整行，原头像列不再占位（修复错位）
|
||||
|
||||
var contentEl = main.querySelector('.atk-content');
|
||||
// 卡片挂在 .atk-comment 这一级，而不是塞进 .atk-content 里：
|
||||
// .atk-main 被主题锁了 margin-left:34px !important（头像缩进），塞在里面
|
||||
// 卡片永远比评论输入框窄一圈；提到 .atk-comment 这一级就能和输入框同宽对齐。
|
||||
var commentEl = el2.querySelector('.atk-comment') || main.parentElement || el2;
|
||||
if (main && main !== el2) main.style.display = 'none'; // 常规内容整块隐藏
|
||||
|
||||
var FL_DESC = '想和我交换友链？点击申请，审核结果会邮件通知你';
|
||||
var card = document.createElement('div');
|
||||
card.className = 'atk-fl-apply';
|
||||
card.className = 'atk-fl-card'; // 独立类名：容器用的是 atk-fl-apply 做标记
|
||||
// 跟随评论列表原生观感：白底 + 细边框，只有按钮带主题色
|
||||
card.style.cssText = 'display:flex;align-items:center;gap:12px;padding:12px 14px;margin:2px 0;' +
|
||||
'background:var(--bg-card,#fff);border:1px solid var(--border-main,#eeeeee);' +
|
||||
'border-radius:10px;transition:border-color .2s,background .2s;';
|
||||
card.innerHTML =
|
||||
'<img src="' + avatarSrc + '" alt="" referrerpolicy="no-referrer" style="flex:none;width:40px;height:40px;' +
|
||||
'border-radius:6px;object-fit:cover">' +
|
||||
'<img class="uk-animation-scale-up" src="' + avatarSrc + '" alt="" referrerpolicy="no-referrer" ' +
|
||||
'style="flex:none;width:40px;height:40px;border-radius:6px;object-fit:cover">' +
|
||||
'<span style="flex:1;min-width:0">' +
|
||||
'<span style="display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-main,#333)">' +
|
||||
'<span style="display:flex;align-items:center;gap:0;font-size:14px;font-weight:600;color:var(--text-main,#333)">' +
|
||||
'<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + nickText.replace(/</g, '<') + '</span>' +
|
||||
'</span>' +
|
||||
'<span style="display:block;font-size:13px;margin-top:2px;color:var(--text-desc,#777);line-height:1.5">想和我交换友链？点击申请，审核结果会邮件通知你</span>' +
|
||||
'<span style="display:block;font-size:13px;margin-top:2px;color:var(--text-desc,#777);line-height:1.5">' +
|
||||
'<span class="atk-fl-typed"></span><i class="atk-fl-caret"></i>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'<span style="flex:none;background:var(--theme-main-20,rgba(7,193,96,.2));color:var(--theme-main,#07c160);' +
|
||||
'font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;white-space:nowrap">申请友链</span>';
|
||||
'<span class="atk-fl-btn" style="flex:none;background:var(--theme-main-20,rgba(7,193,96,.2));color:var(--theme-main,#07c160);' +
|
||||
'font-size:13px;font-weight:600;padding:6px 14px;border-radius:5px;white-space:nowrap">申请友链</span>';
|
||||
// 昵称行追加官方徽章（博主），样式与评论区徽章一致
|
||||
if (sysBadge) {
|
||||
var bw = sysBadge.cloneNode(true);
|
||||
bw.style.marginLeft = '2px';
|
||||
bw.style.marginLeft = '0';
|
||||
var nickRow = card.querySelector('span > span');
|
||||
nickRow.appendChild(bw);
|
||||
}
|
||||
if (contentEl) {
|
||||
contentEl.innerHTML = '';
|
||||
contentEl.appendChild(card);
|
||||
contentEl.style.cursor = 'pointer';
|
||||
} else {
|
||||
main.appendChild(card);
|
||||
}
|
||||
// 卡片直接挂在评论节点（.atk-comment）下：宽度与评论输入框一致
|
||||
if (contentEl) contentEl.innerHTML = '';
|
||||
commentEl.appendChild(card);
|
||||
|
||||
// ── 打字机效果（PJAX 安全：卡片被移除/替换时定时器自动停止） ──
|
||||
// 注意：不要用 prefers-reduced-motion 跳过打字 —— Windows 关闭"动画效果"
|
||||
// 或部分浏览器默认就会报告 reduce，会导致效果完全不出现。这里始终打字。
|
||||
try {
|
||||
var typedEl = card.querySelector('.atk-fl-typed');
|
||||
var caretEl = card.querySelector('.atk-fl-caret');
|
||||
var alive = function () { return card.isConnected !== undefined ? card.isConnected : document.body.contains(card); };
|
||||
if (typedEl) {
|
||||
var ti = 0;
|
||||
setTimeout(function () {
|
||||
if (!alive()) return;
|
||||
var timer = setInterval(function () {
|
||||
if (!alive()) { clearInterval(timer); return; } // PJAX 切页后自动停止
|
||||
ti += 1;
|
||||
typedEl.textContent = FL_DESC.slice(0, ti);
|
||||
if (ti >= FL_DESC.length) {
|
||||
clearInterval(timer);
|
||||
if (caretEl) caretEl.style.display = 'none';
|
||||
}
|
||||
}, 42);
|
||||
}, 320); // 等入场动画播完再打字，观感更自然
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
el2.addEventListener('click', function () {
|
||||
if (window.flApplyOpenModal) window.flApplyOpenModal();
|
||||
|
||||
Reference in new issue
Block a user