评论徽章DOM/尺寸统一(拆badge-wrap+单一类名)、修复main.css!important劫持徽章尺寸、友链卡片挂到comment级与输入框对齐、卡片动效+打字机、申请弹窗按钮错位与滚动条修复

themes/Ying/assets/css/main.css

@@ -4607,19 +4607,15 @@ input[type=submit] {
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
+/* 评论徽章（博主/置顶等）的尺寸与配色统一由 layouts/partials/artalk.html 里的
+   .atk-cmt-badge 规则管理。这里保留兼容但不再强制 padding/font-size，避免
+   !important 覆盖导致博主/置顶徽章比其他徽章高 2px、宽 2px。 */
 .atk-pinned-badge {
-    background-color: var(--text-highlight-color) !important;
-    color: #fff !important;
-    border-radius: 3px !important;
-    font-size: 12px !important;
-    padding: 1px 5px !important;
+    border-radius: 3px;
 }
 
 .atk-badge {
-    background-color: #999 !important; /* 普通徽章颜色 */
-    color: #fff !important;
-    border-radius: 3px !important;
-    padding: 1px 5px !important;
+    border-radius: 3px;
 }
 
 /* Emoticons & Images */

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

@@ -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, '&lt;') + '</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();

themes/Ying/layouts/page/comment.html

@@ -46,10 +46,19 @@
         'background:var(--bg-input,#fff);color:inherit;font-family:inherit}' +
       '#flApplyBox input:focus,#flApplyBox textarea:focus{outline:none;border-color:var(--theme-main,#07c160);' +
         'box-shadow:0 0 0 3px var(--theme-main-20,rgba(7,193,96,.2))}' +
-      '#flSubmit{width:100%;background:var(--theme-main,#07c160);border:none;color:#fff;padding:10px;' +
-        'border-radius:6px;font-size:14px;cursor:pointer;transition:filter .2s}' +
+      /* 主题 main.css 有一条全局 button 归一化规则（margin-left:23%; margin-top:10px;
+         border:1px solid; background:#222），会把提交按钮推右溢出弹窗 → 这里用 id 选择器压过它 */
+      '#flSubmit{display:block;width:100%;margin:0;background:var(--theme-main,#07c160);border:none;color:#fff;' +
+        'padding:11px 0;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:filter .2s}' +
       '#flSubmit:hover{filter:brightness(1.06)}' +
-      '#flSubmit:disabled{opacity:.6;cursor:default}';
+      '#flSubmit:disabled{opacity:.6;cursor:default}' +
+      /* 弹窗滚动条：细一点、跟随主题色，别用系统那根粗滚动条 */
+      '#flApplyBox{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(140,150,160,.45) transparent}' +
+      '#flApplyBox::-webkit-scrollbar{width:6px;height:6px}' +
+      '#flApplyBox::-webkit-scrollbar-track{background:transparent}' +
+      '#flApplyBox::-webkit-scrollbar-thumb{background:rgba(140,150,160,.45);border-radius:3px}' +
+      '[data-theme="dark"] #flApplyBox{scrollbar-color:rgba(200,205,212,.35) transparent}' +
+      '[data-theme="dark"] #flApplyBox::-webkit-scrollbar-thumb{background:rgba(200,205,212,.35)}';
     document.head.appendChild(style);
 
     mask = document.createElement('div');

themes/Ying/layouts/partials/artalk.html

@@ -15,24 +15,30 @@
         border-color: var(--frame-dark-color);
         background: transparent;
     }
-    /* ================= 评论徽章规格 =================
-       几何完全沿用原设计：inline-block + margin-left:4px + padding 0 6px
-       + 12px/500 字重 + line-height:18px + 1px 描边 + 3px 圆角。
-       注意：不要覆盖 Artalk 自带的 margin-right:6px，否则徽章会挤在一起。 */
-    .atk-comment>.atk-main>.atk-header .atk-badge,
-    .atk-comment>.atk-main>.atk-header .atk-pinned-badge,
-    .atk-comment>.atk-main>.atk-header .atk-title-badge,
-    .atk-comment>.atk-main>.atk-header .atk-link-badge,
-    .atk-comment>.atk-main>.atk-header .atk-feed-badge,
-    .atk-comment>.atk-main>.atk-header .atk-rank-badge {
-        display: inline-block;
-        margin-left: 4px;
-        padding: 0 6px;
-        font-size: 12px;
-        font-weight: 500;
-        border-radius: 3px;
-        line-height: 18px;
-        vertical-align: middle;
+    /* ================= 评论徽章统一规格（单一来源） =================
+       几何沿用原设计：inline-block + margin-left:4px + padding 0 6px + 12px/500
+       + line-height:18px + 1px 描边 + 3px 圆角。
+       artalk.js 会把所有徽章（博主/置顶/头衔/友链/友圈/官职）都挂上 .atk-cmt-badge
+       并拆掉 Artalk 的 .atk-badge-wrap 包装层，所以几何只在这里定义一次，
+       不会再出现两种 DOM / 两种尺寸。各类型只保留配色差异。
+       注：margin-right 清零是为了不叠加 Artalk 给"非最后一个徽章"的 6px 右间距
+       （否则 徽章→徽章 间距一宽一窄，看起来不齐）。 */
+    .atk-comment .atk-cmt-badge,
+    .atk-comment .atk-badge,
+    .atk-comment .atk-pinned-badge,
+    .atk-comment .atk-title-badge,
+    .atk-comment .atk-link-badge,
+    .atk-comment .atk-feed-badge,
+    .atk-comment .atk-rank-badge {
+        display: inline-block !important;
+        margin-left: 4px !important;
+        margin-right: 0 !important;
+        padding: 0 6px !important;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        border-radius: 3px !important;
+        line-height: 18px !important;
+        vertical-align: middle !important;
         pointer-events: none;
         white-space: nowrap;
     }
@@ -50,37 +56,24 @@
         color: #6b7280;
         background: rgba(107,114,128,0.08);
         border: 1px solid rgba(107,114,128,0.15);
-        font-weight: 600;
     }
     .atk-title-badge {
-        font-weight: 600;
         color: #b8860b;
         background: rgba(184,134,11,0.08);
         border: 1px solid rgba(184,134,11,0.22);
     }
-    /* 博主(.atk-badge)：浅底描边（与友链/友圈/官职同风格）
+    /* 博主(.atk-badge)：实底 —— 白字 + 浅黑底
        （!important 是为了盖掉 Artalk 写在元素上的内联背景色） */
-    .atk-comment>.atk-main>.atk-header .atk-badge {
-        border: 1px solid rgba(55,65,81,0.18);
-        font-weight: 600;
-        color: #374151 !important;
-        background: rgba(55,65,81,0.06) !important;
+    .atk-comment .atk-badge {
+        border: 1px solid #333333;
+        color: #ffffff !important;
+        background: #333333 !important;
     }
-    [data-theme="dark"] .atk-comment>.atk-main>.atk-header .atk-badge {
-        border-color: rgba(229,231,235,0.2);
-        color: #e5e7eb !important;
-        background: rgba(229,231,235,0.08) !important;
-    }
-    /* 置顶徽章：浅底红字描边（与友链/友圈同风格，比实底红更协调、不刺眼） */
-    .atk-comment>.atk-main>.atk-header .atk-pinned-badge {
-        border: 1px solid rgba(217,83,79,0.18);
-        color: #d9534f !important;
-        background: rgba(217,83,79,0.08) !important;
-    }
-    [data-theme="dark"] .atk-comment>.atk-main>.atk-header .atk-pinned-badge {
-        border-color: rgba(217,83,79,0.28);
-        color: #f0918d !important;
-        background: rgba(217,83,79,0.14) !important;
+    /* 置顶徽章：实底 —— 白字 + 浅红底（比 #d9534f / #ff6262 更浅，不刺眼） */
+    .atk-comment .atk-pinned-badge {
+        border: 1px solid #e05a5a;
+        color: #ffffff !important;
+        background: #e05a5a !important;
     }
     /* ---- 暗色模式配色 ---- */
     [data-theme="dark"] .atk-link-badge {
@@ -103,6 +96,51 @@
         background: rgba(251,191,36,0.12);
         border-color: rgba(251,191,36,0.2);
     }
+    /* ================= 友链申请入口卡片 =================
+       PJAX 下每次切页评论区都会重建卡片 → 入场动画与打字机自然重播；
+       打字机定时器在 artalk.js 里会检测卡片是否还在文档中（切页后自动停）。 */
+    .atk-fl-card {
+        animation: flApplyIn .5s cubic-bezier(.22, 1, .36, 1) both;
+    }
+    @keyframes flApplyIn {
+        from { opacity: 0; transform: translateY(12px) scale(.98); }
+        to   { opacity: 1; transform: none; }
+    }
+    .atk-fl-card:hover {
+        border-color: var(--theme-main-30, rgba(7,193,96,.3)) !important;
+    }
+    /* 打字机光标 */
+    .atk-fl-card .atk-fl-caret {
+        display: inline-block;
+        width: 1px;
+        height: 1em;
+        margin-left: 2px;
+        vertical-align: -2px;
+        background: currentColor;
+        animation: flCaret .9s steps(1, end) infinite;
+    }
+    @keyframes flCaret {
+        0%, 49%   { opacity: 1; }
+        50%, 100% { opacity: 0; }
+    }
+    /* 申请友链按钮：轻微上浮 + 主题色投影 */
+    .atk-fl-card .atk-fl-btn {
+        transition: transform .2s ease, box-shadow .2s ease;
+    }
+    .atk-fl-card:hover .atk-fl-btn {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px var(--theme-main-20, rgba(7,193,96,.2));
+    }
+    .atk-fl-card .atk-fl-btn:active {
+        transform: translateY(0);
+    }
+    /* 尊重系统"减弱动态效果"：只关掉入场动画和按钮位移，
+       打字机与光标保留（打字机是文字渐显，不属于会造成不适的位移类动效） */
+    @media (prefers-reduced-motion: reduce) {
+        .atk-fl-card { animation: none; }
+        .atk-fl-card .atk-fl-btn { transition: none; }
+        .atk-fl-card:hover .atk-fl-btn { transform: none; box-shadow: none; }
+    }
     .atk-main {
         backface-visibility: hidden;
         will-change: transform;