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
This commit is contained in:
1 parent
9e972f2b61
commit
50a906e07c
14 files changed
+1018
-486
No files matched your search
@@ -4126,76 +4126,41 @@ input[type=submit] {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Toast ── */
|
||||
.ying-toast-container {
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
pointer-events: none;
|
||||
/* ── Toast(Message.js / Qmsg 适配,见 assets/js/modules/toast.js)──
|
||||
组件自带样式在 css/libs/message.min.css(随 style.css 打包)。
|
||||
这里只做主题融合:跟随主题变量 + 暗色适配。 */
|
||||
.qmsg {
|
||||
border-radius: 8px;
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.ying-toast {
|
||||
padding: 9px 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
.qmsg-content {
|
||||
color: var(--text-main, #333);
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.28s ease, transform 0.28s ease;
|
||||
pointer-events: auto;
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.ying-toast--visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
[data-theme="dark"] .qmsg {
|
||||
background: #2a2e33;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.ying-toast--success {
|
||||
background: rgba(34, 197, 94, 0.88);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 32px rgba(34, 197, 94, 0.18);
|
||||
[data-theme="dark"] .qmsg-content {
|
||||
color: #d6dade;
|
||||
}
|
||||
|
||||
.ying-toast--error {
|
||||
background: rgba(239, 68, 68, 0.88);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 32px rgba(239, 68, 68, 0.18);
|
||||
[data-theme="dark"] .qmsg-close {
|
||||
color: #7a828a;
|
||||
}
|
||||
|
||||
.ying-toast--warning {
|
||||
background: rgba(245, 158, 11, 0.88);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 32px rgba(245, 158, 11, 0.18);
|
||||
}
|
||||
|
||||
.ying-toast--info {
|
||||
background: rgba(29, 61, 108, 0.85);
|
||||
color: #f0f4fb;
|
||||
box-shadow: 0 8px 32px rgba(29, 61, 108, 0.18);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .ying-toast--info {
|
||||
background: rgba(159, 196, 244, 0.22);
|
||||
color: #f3f7fd;
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
[data-theme="dark"] .qmsg-close:hover {
|
||||
color: #a8b0b8;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.ying-toast {
|
||||
.qmsg {
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user