友链申请卡片重设计(头像+昵称+徽章+主题色) + 弹窗横向滚动条/显隐bug修复

themes/Ying/assets/js/modules/artalk.js

@@ -712,29 +712,52 @@ artalk.on('comment-rendered', function(node) {
         el2.style.cursor = 'pointer';
         el2.title = '点击申请友链';
 
-        // 隐藏评论常规元素（昵称行/页脚操作），整条变成一张卡片
+        // 先取原评论的头像 / 昵称 / 官方徽章（博主），再隐藏常规元素
+        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');
+        var nickText = String(d2.nick || '博主');
+
+        // 隐藏评论常规元素（头像列/昵称行/页脚操作），整条变成一张卡片
         var hd = el2.querySelector('.atk-header');
         var ft = el2.querySelector('.atk-footer');
+        var av0 = el2.querySelector('.atk-avatar');
+        var meta = el2.querySelector('.atk-meta');
         if (hd) hd.style.display = 'none';
         if (ft) ft.style.display = 'none';
-        var meta = el2.querySelector('.atk-meta');
+        if (av0) av0.style.display = 'none';
         if (meta) meta.style.display = 'none';
 
         var main = el2.querySelector('.atk-main') || el2;
+        main.style.marginLeft = '0'; // 卡片占满整行，原头像列不再占位（修复错位）
+
         var contentEl = main.querySelector('.atk-content');
         var card = document.createElement('div');
         card.className = 'atk-fl-apply';
-        card.style.cssText = 'display:flex;align-items:center;gap:12px;padding:16px 18px;margin:6px 0;' +
-            'background:linear-gradient(135deg,rgba(47,158,99,.08),rgba(47,158,99,.02));' +
-            'border:1px dashed rgba(47,158,99,.45);border-radius:10px;transition:border-color .2s,transform .2s;';
+        card.style.cssText = 'display:flex;align-items:center;gap:12px;padding:14px 16px;margin:6px 0 2px;' +
+            'background:var(--bg-card,#fff);border:1px solid var(--theme-main-30,rgba(7,193,96,.3));' +
+            'border-radius:10px;transition:border-color .2s,box-shadow .2s;';
         card.innerHTML =
-            '<span style="flex:none;width:40px;height:40px;border-radius:10px;background:rgba(47,158,99,.12);' +
-              'display:flex;align-items:center;justify-content:center;font-size:20px">🔗</span>' +
+            '<img src="' + avatarSrc + '" alt="" referrerpolicy="no-referrer" style="flex:none;width:44px;height:44px;' +
+              'border-radius:8px;object-fit:cover;box-shadow:0 0 0 2px var(--theme-main-20,rgba(7,193,96,.2))">' +
             '<span style="flex:1;min-width:0">' +
-              '<span style="display:block;font-size:15px;font-weight:600;color:#2f9e63">友链自助申请</span>' +
-              '<span style="display:block;font-size:12px;color:#8a8e98;margin-top:2px">想和我交换友链？点这里填写申请，审核结果会邮件通知你</span>' +
+              '<span style="display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-main,#333)">' +
+                '<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + nickText.replace(/</g, '&lt;') + '</span>' +
+              '</span>' +
+              '<span style="display:block;font-size:13px;margin-top:3px;color:var(--text-desc,#777);line-height:1.5">' +
+                '<b style="color:var(--theme-main,#07c160);font-weight:600">友链自助申请</b>' +
+                '<span style="color:var(--text-muted,#999)"> · </span>想和我交换友链？点这里填写申请，审核结果会邮件通知你' +
+              '</span>' +
             '</span>' +
-            '<span style="flex:none;color:#2f9e63;font-size:18px">›</span>';
+            '<span style="flex:none;color:var(--theme-main,#07c160);font-size:20px;line-height:1">›</span>';
+        // 昵称行追加官方徽章（博主），样式与评论区徽章一致
+        if (sysBadge) {
+            var bw = sysBadge.cloneNode(true);
+            bw.style.marginLeft = '2px';
+            var nickRow = card.querySelector('span > span');
+            nickRow.appendChild(bw);
+        }
         if (contentEl) {
             contentEl.innerHTML = '';
             contentEl.appendChild(card);
@@ -746,8 +769,14 @@ artalk.on('comment-rendered', function(node) {
         el2.addEventListener('click', function () {
             if (window.flApplyOpenModal) window.flApplyOpenModal();
         });
-        el2.addEventListener('mouseenter', function () { card.style.borderColor = 'rgba(47,158,99,.8)'; });
-        el2.addEventListener('mouseleave', function () { card.style.borderColor = 'rgba(47,158,99,.45)'; });
+        el2.addEventListener('mouseenter', function () {
+            card.style.borderColor = 'var(--theme-main,#07c160)';
+            card.style.boxShadow = '0 2px 12px var(--theme-main-20,rgba(7,193,96,.2))';
+        });
+        el2.addEventListener('mouseleave', function () {
+            card.style.borderColor = 'var(--theme-main-30,rgba(7,193,96,.3))';
+            card.style.boxShadow = 'none';
+        });
     } catch (e) { /* 卡片化失败不影响评论 */ }
 });