From 16d67c8a8761562f60e8bc8c5e8c1018dd917169 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 4 Oct 2026 13:58:09 +0800 Subject: [PATCH] fix(user-home): hide the old panel content while the tab skeleton loads MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 翻页 / 切 tab 是整页替换语义（author.js 最终就是 panel.innerHTML = html）， 但加载态只做了骨架的显示，旧卡片与旧页码仍留在屏上，于是先看到 「第 1 页卡片 + 脚下一摞骨架」，等接口返回才换页。 加载期收起 .aksrt-user-home__post-list 的直接子级 .posts-item 与旧翻页控件， 让骨架独占内容区；对齐参考主题 post_ajax() 的 beforeSend（replace 时 $item.remove() + find(pag).remove()）。显隐仍走纯类切换，不写 inline display。 两点刻意的收窄： - 只收直接子级 .posts-item 而非后代：骨架内层同样带 .posts-item， 后代选择器会把骨架自己也藏掉，占位就永远出不来。 - 旧页码用 :has(.post_ajax_loader) 限定：关注 / 评论面板没有骨架， 无条件隐藏会让它们加载时只剩一片空白。 Co-Authored-By: Claude Fable 5 --- assets/css/routes/user-home.css | 19 +++++++++++++++++++ .../post-visual-contract.test.cjs | 13 +++++++++++++ 2 files changed, 32 insertions(+) diff --git a/assets/css/routes/user-home.css b/assets/css/routes/user-home.css index 0d0b3f70..90a3d4a2 100644 --- a/assets/css/routes/user-home.css +++ b/assets/css/routes/user-home.css @@ -584,6 +584,25 @@ display: none; } +/* 加载期收起旧页内容：翻页 / 切 tab 是整页替换语义（author.js 最终就是 + panel.innerHTML = html），骨架必须独占内容区，而不是追加在旧卡片下方 —— + 否则先看到「第 1 页卡片 + 脚下一摞骨架」，等接口返回才换页。 + 对齐参考主题 post_ajax() 的 beforeSend：replace 时 $item.remove() + + find(pag).remove()。收 display 而非删节点，仍守住「不写 inline display」契约。 + + 只收 .aksrt-user-home__post-list 的**直接子级** .posts-item：骨架内层同样带 + .posts-item，写成后代选择器会连骨架自己一起隐藏掉。 */ +.aksrt-user-home .dashboard-panel.is-loading .aksrt-user-home__post-list > .posts-item { + display: none; +} + +/* 旧翻页控件同属被替换的旧页内容，且高亮的是旧页码，加载期一并收起。 + 用 :has() 限定「这个面板真有骨架」：关注 / 评论面板没有 .post_ajax_loader， + 无条件隐藏会让它们加载时只剩一片空白。 */ +.aksrt-user-home .dashboard-panel.is-loading:has(.post_ajax_loader) .profile-pagination { + display: none; +} + .aksrt-user-home .dashboard-panel.is-loading .post_ajax_loader { display: block; animation: aksrtFadeIn 0.2s ease both; diff --git a/tests/widget-system/post-visual-contract.test.cjs b/tests/widget-system/post-visual-contract.test.cjs index f1ef9029..9cd3c69d 100644 --- a/tests/widget-system/post-visual-contract.test.cjs +++ b/tests/widget-system/post-visual-contract.test.cjs @@ -269,6 +269,19 @@ test('related posts, author page and widgets use their dedicated renderers', () assert.match(userHomeCss, /\.aksrt-user-home \.dashboard-panel \.post_ajax_loader \{/); assert.match(userHomeCss, /\.aksrt-user-home \.dashboard-panel\.is-loading \.post_ajax_loader \{/); assert.doesNotMatch(userHomeCss, /\.dashboard-panel\.is-loading \{[\s\S]{0,80}opacity: \.6/); + + // 翻页 / 切 tab 是整页替换语义（author.js 最终就是 panel.innerHTML = html）， + // 骨架必须独占内容区。若骨架只是追加在旧卡片下方，加载期会先看到 + // 「第 1 页卡片 + 脚下一摞骨架」再换页。对齐参考主题 post_ajax() 的 + // beforeSend：replace 时 $item.remove() + find(pag).remove()。 + // 刻意不按 data-view 收窄：card 模式下真实卡片同样是直接子级 .posts-item， + // 也要一起收起，否则卡片面板旧内容不会让位。 + assert.match(userHomeCss, /\.dashboard-panel\.is-loading \.aksrt-user-home__post-list > \.posts-item \{\s*display: none;/); + // 必须收「直接子级」而非后代：骨架内层同样带 .posts-item， + // 写成后代选择器会连骨架自己一起隐藏掉，占位也就永远出不来了。 + assert.doesNotMatch(userHomeCss, /\.dashboard-panel\.is-loading \.aksrt-user-home__post-list \.posts-item \{/); + // 旧翻页控件高亮的是旧页码，同属被替换的旧页内容。 + assert.match(userHomeCss, /\.dashboard-panel\.is-loading:has\(\.post_ajax_loader\) \.profile-pagination \{\s*display: none;/); assert.match(widgets, /aksrt_render_mini_list/); assert.match(widgets, /swiper-container swiper-scroll/); });