perf(comments): 评论加载提速 + 骨架屏 + 友链弹窗 pjax 修复 + toast 统一 Message.js

优化： - initArtalk 加节点级幂等守卫（mount.__atkInited，失败回滚），消除 artalk.html/mypjax 多入口导致的 4× comments + 4× pv 重复请求 - fetch 包装层对无 body 的 GET/HEAD 去掉多余 content-type，消掉 Artalk 对 GET /comments 的 CORS 预检（按完整 URL 缓存，每篇文章都重付一次 RTT）。实测评论列表 +1150~1565ms → +626ms 修复： - 评论列表骨架屏改注入 .atk-list-body（原骨架在 #Comments 内，被 Artalk.init 清空），list-loaded/故障/12s 兜底移除 - 友链申请弹窗抽成 modules/friendlink.js 进 page-only bundle （原内联脚本在 #pjax-container 外，pjax 后 flApplyOpenModal 未定义） - toast 统一走本地化 Message.js/Qmsg 适配层（保留 window.Toast/showToast 旧 API）文档： - README / 架构总览更新；新增评论加载优化方案.md
2026-10-04 15:00:52 +08:00
1 parent 9e972f2b61
commit 50a906e07c
@@ -20,126 +20,10 @@

 </div>

-<script>
-/* 友链自助申请：弹窗动态挂到 document.body（评论容器带 transform 动画，
-   会把 position:fixed 劫持成相对定位，导致遮罩/表单跟着容器变形——
-   挂 body 彻底规避），遮罩用 backdrop-filter 毛玻璃（GPU 合成，不卡页面）。
-   显隐用 class 而非 hidden 属性（内联 display 会覆盖 hidden 导致关不掉）；
-   盒子必须 box-sizing:border-box（否则 width:100% + padding 溢出出横向滚动条）。 */
-(function () {
-  var BASE = '{{ $rssBase := site.Params.rssapi.base | default "https://api.200181.xyz" }}{{ $rssBase }}';
-
-  function buildModal() {
-    if (document.getElementById('flApplyMask')) return document.getElementById('flApplyMask');
-    var style = document.createElement('style');
-    style.textContent =
-      '#flApplyMask{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:16px;' +
-        'background:rgba(15,23,42,.35);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}' +
-      '#flApplyMask.on{display:flex}' +
-      '#flApplyBox{background:var(--bg-card,#fff);color:var(--text-main,#253244);border-radius:12px;max-width:420px;width:100%;' +
-        'box-sizing:border-box;padding:22px;box-shadow:0 16px 48px rgba(15,23,42,.25);max-height:88vh;overflow:auto}' +
-      '[data-theme="dark"] #flApplyBox{box-shadow:0 16px 48px rgba(0,0,0,.55)}' +
-      '#flApplyBox .fl-field{display:block;margin-bottom:10px}' +
-      '#flApplyBox .fl-label{display:block;font-size:12px;color:var(--text-muted,#8a94a6);margin-bottom:4px}' +
-      '#flApplyBox input,#flApplyBox textarea{width:100%;box-sizing:border-box;padding:8px 10px;' +
-        'border:1px solid var(--border-main,#e7e9ee);border-radius:6px;font-size:14px;' +
-        '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))}' +
-      /* 主题 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}' +
-      /* 弹窗滚动条：细一点、跟随主题色，别用系统那根粗滚动条 */
-      '#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');
-    mask.id = 'flApplyMask';
-    mask.innerHTML =
-      '<div id="flApplyBox">' +
-        '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">' +
-          '<b style="font-size:16px;display:flex;align-items:center;gap:8px">' +
-            '<span style="width:4px;height:16px;border-radius:2px;background:var(--theme-main,#07c160);display:inline-block"></span>友链自助申请</b>' +
-          '<span id="flApplyClose" style="cursor:pointer;color:var(--text-muted,#8a94a6);font-size:22px;line-height:1" title="关闭">×</span>' +
-        '</div>' +
-        '<label class="fl-field"><span class="fl-label">站点名称 *</span>' +
-          '<input id="flName" placeholder="我的小站"></label>' +
-        '<label class="fl-field"><span class="fl-label">站点链接 *</span>' +
-          '<input id="flUrl" placeholder="https://example.com"></label>' +
-        '<label class="fl-field"><span class="fl-label">图标链接（选填，留空自动为你抓取站点图标）</span>' +
-          '<input id="flIcon" placeholder="https://example.com/logo.png"></label>' +
-        '<label class="fl-field"><span class="fl-label">订阅地址（RSS/Atom）*</span>' +
-          '<input id="flFeed" placeholder="https://example.com/feed"></label>' +
-        '<label class="fl-field"><span class="fl-label">邮箱 *（接收审核结果）</span>' +
-          '<input id="flEmail" type="email" placeholder="you@example.com"></label>' +
-        '<label class="fl-field" style="margin-bottom:14px"><span class="fl-label">站点简介（选填）</span>' +
-          '<textarea id="flDesc" rows="2" style="resize:vertical"></textarea></label>' +
-        '<div id="flMsg" hidden style="font-size:13px;margin-bottom:10px"></div>' +
-        '<button id="flSubmit">提交申请</button>' +
-      '</div>';
-    document.body.appendChild(mask);
-
-    mask.addEventListener('click', function (e) { if (e.target === mask) close(); });
-    document.getElementById('flApplyClose').addEventListener('click', close);
-    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
-
-    document.getElementById('flSubmit').addEventListener('click', function () {
-      var btn = this, msg = document.getElementById('flMsg');
-      var payload = {
-        name: document.getElementById('flName').value.trim(),
-        url: document.getElementById('flUrl').value.trim(),
-        image: document.getElementById('flIcon').value.trim(),
-        feed: document.getElementById('flFeed').value.trim(),
-        email: document.getElementById('flEmail').value.trim(),
-        description: document.getElementById('flDesc').value.trim()
-      };
-      if (!payload.name || !payload.url || !payload.feed || !payload.email) {
-        msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = '请填写全部必填项'; return;
-      }
-      btn.disabled = true; btn.textContent = '提交中…';
-      msg.hidden = true;
-      fetch(BASE + '/api/link-apply', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
-      }).then(function (r) { return r.json().then(function (d) { return { code: r.status, d: d }; }); })
-        .then(function (res) {
-          if (res.code === 200 && res.d.ok) {
-            msg.hidden = false; msg.style.color = 'var(--theme-main,#07c160)'; msg.textContent = res.d.message || '申请已提交';
-            btn.textContent = '已提交 ✓';
-            setTimeout(close, 2200);
-          } else {
-            msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = res.d.error || '提交失败，请稍后再试';
-            btn.disabled = false; btn.textContent = '提交申请';
-          }
-        })
-        .catch(function () {
-          msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = '网络异常，请稍后再试';
-          btn.disabled = false; btn.textContent = '提交申请';
-        });
-    });
-    return mask;
-  }
-
-  function close() {
-    var m = document.getElementById('flApplyMask');
-    if (m) m.classList.remove('on');
-  }
-
-  /* 供置顶评论卡片调用（artalk.js 的 comment-rendered 里触发） */
-  window.flApplyOpenModal = function () {
-    buildModal().classList.add('on');
-  };
-})();
-</script>
+{{/* 友链自助申请弹窗已抽到 assets/js/modules/friendlink.js（随 page-only.js 加载）。
+     原先这段内联脚本写在 #pjax-container 外面：PJAX 只换容器内容、不会重新执行它，
+     从首页 PJAX 进留言页时 window.flApplyOpenModal 未定义 → 「申请友链」卡片点了没反应；
+     直接刷新（整页加载）才正常。抽成模块后两种进入方式行为一致。 */}}

 <script>
 /* 人机验证（自研「一键验证」）—— 服务端见 artalk-cf/src/lib/human.ts