kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(user-home): add reference tab loading skeletons

Browse Source
This commit is contained in:
kate522
2026-10-04 19:40:24 +08:00
parent 4c6b02a6b9
commit 5a17b399a0
7 changed files with 166 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/user-home.css
+62
View File
@@ -516,6 +516,53 @@
text-align: center;
}
.aksrt-user-home .dashboard-panel .uh-follow__list--placeholder {
display: none;
}
.aksrt-user-home .dashboard-panel.is-loading .uh-follow__list--placeholder {
display: block;
}
.aksrt-user-home .dashboard-panel.is-loading .uh-follow__subtabs,
.aksrt-user-home .dashboard-panel.is-loading .uh-follow__list:not(.uh-follow__list--placeholder),
.aksrt-user-home .dashboard-panel.is-loading .uh-pagination,
.aksrt-user-home .dashboard-panel.is-loading .profile-empty {
display: none;
}
.aksrt-user-home .dashboard-panel.is-load-error .uh-follow__list--placeholder {
display: block;
}
.aksrt-user-home .uh-panel-load-error {
display: none;
margin: 12px 0;
color: var(--color-ink-4);
font-size: 13px;
text-align: center;
grid-column: 1 / -1;
}
.aksrt-user-home .dashboard-panel.is-load-error .uh-panel-load-error {
display: block;
}
.aksrt-user-home .uh-panel-load-error button {
margin-left: 8px;
padding: 0;
border: 0;
color: var(--color-primary);
background: transparent;
font: inherit;
cursor: pointer;
}
.aksrt-user-home .uh-follow__placeholder {
display: inline-flex;
margin: 5px 8px;
}
.aksrt-user-home .uh-follow__pagination {
margin-top: 16px;
text-align: center;
@@ -608,6 +655,21 @@
animation: aksrtFadeIn 0.2s ease both;
}
.aksrt-user-home .dashboard-panel.is-load-error .post_ajax_loader {
display: block;
}
.aksrt-user-home .dashboard-panel.is-load-error .aksrt-user-home__post-list[data-view="list"] > .post_ajax_loader {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.aksrt-user-home .dashboard-panel.is-load-error .placeholder {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.aksrt-user-home .dashboard-panel .post_ajax_loader .placeholder {
animation: none;
assets/js/author.js
+22 -1
View File
@@ -97,6 +97,7 @@
trigger.setAttribute('aria-busy', 'true');
trigger.textContent = '加载中…';
}
panel.classList.remove('is-load-error');
panel.classList.add('is-loading');
var url = restBase.replace(/\/$/, '') + '/user-home/panel/' + userId + '/' + encodeURIComponent(name)
@@ -117,10 +118,14 @@
} else {
panel.innerHTML = payload.data.html;
}
panel.dataset.panelLoaded = 'true';
if (window.jQuery) jQuery(document).trigger('post_ajax.ed', [panel]);
if (typeof window.auto_fun === 'function') window.auto_fun();
});
}).catch(function (error) {
if (panel.dataset.panelLoaded === 'false') {
panel.classList.add('is-load-error');
}
if (appendComments && trigger && trigger.isConnected) {
trigger.disabled = false;
trigger.removeAttribute('aria-busy');
@@ -141,7 +146,12 @@
tabs.forEach(function (tab) {
tab.addEventListener('click', function () {
switchTo(tab.getAttribute('data-tab'));
var name = tab.getAttribute('data-tab');
switchTo(name);
var panel = panels[name] && panels[name].panel;
if (panel && panel.dataset.panelLoaded === 'false') {
loadPanelBody(panel, name, 1, 'followers').catch(notifyLoadError);
}
});
});
@@ -161,6 +171,17 @@
return;
}
var retryBtn = target.closest('[data-uh-retry]');
if (retryBtn) {
event.preventDefault();
var retryPanel = retryBtn.closest('.dashboard-panel');
if (!retryPanel) return;
var retryName = panelNameOf(retryPanel);
if (!retryName) return;
loadPanelBody(retryPanel, retryName, 1, 'followers').catch(notifyLoadError);
return;
}
var commentsNext = target.closest('[data-uh-comments-next]');
if (commentsNext) {
event.preventDefault();
inc/helpers/aksrt-user-home.php
+17
View File
@@ -190,6 +190,23 @@ if (!function_exists('aksrt_render_user_home_pagination')) {
}
}
if (!function_exists('aksrt_get_user_home_follow_placeholder')) {
/**
* Skeleton cards used while the public home follow panel is loading.
* Mirrors zib_get_author_tab_loader('follow').
*/
function aksrt_get_user_home_follow_placeholder(): string {
$item = '<div class="author-minicard radius8 flex ac uh-follow__placeholder" aria-hidden="true">'
. '<div class="avatar-img mr10"><div class="avatar placeholder"></div></div>'
. '<div class="flex1"><div class="placeholder k1 mb6"></div>'
. '<i><i class="placeholder s1"></i><i class="placeholder s1 ml10"></i></i></div></div>';
return '<div class="uh-follow__list uh-follow__list--placeholder" role="status" aria-label="' . esc_attr__('正在加载', 'aksrt') . '">'
. str_repeat($item, 6)
. '</div>';
}
}
if (!function_exists('aksrt_capture_user_home_panel')) {
/**
* 捕获公开用户主页面板 body（templates/parts/user-home/panel-{tab}.php）。
templates/pages/page-user-home.php
+7 -2
View File
@@ -71,9 +71,14 @@ require_once AKSRT_DIR . '/templates/parts/user-shared-helpers.php';
if (!locate_template(['templates/parts/user-home/panel-' . $panel_tab . '.php'], false, false)) {
continue;
}
$defer_panel = in_array($panel_tab, ['favorites', 'follow'], true) && $panel_tab !== $active_tab;
$panel_context = $ctx;
if ($defer_panel) {
$panel_context['placeholder_only'] = true;
}
?>
<div id="panel-<?php echo esc_attr($panel_tab); ?>" class="dashboard-panel<?php echo $panel_tab === $active_tab ? ' is-active' : ''; ?>" role="tabpanel"<?php echo $panel_tab !== $active_tab ? ' hidden' : ''; ?>>
<?php get_template_part('templates/parts/user-home/panel', $panel_tab, $ctx); ?>
<div id="panel-<?php echo esc_attr($panel_tab); ?>" class="dashboard-panel<?php echo $panel_tab === $active_tab ? ' is-active' : ''; ?>" role="tabpanel" data-panel-loaded="<?php echo $defer_panel ? 'false' : 'true'; ?>"<?php echo $panel_tab !== $active_tab ? ' hidden' : ''; ?>>
<?php get_template_part('templates/parts/user-home/panel', $panel_tab, $panel_context); ?>
</div>
<?php endforeach; ?>
</div>
templates/parts/user-home/panel-favorites.php
+22 -3
View File
@@ -14,15 +14,34 @@ defined('ABSPATH') || exit;
$args = is_array($args ?? null) ? $args : [];
extract($args, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_extract
if (!empty($favorite_post_ids)) :
$user_home_render_config = aksrt_resolve_post_list_render_config([
$user_home_render_config = aksrt_resolve_post_list_render_config([
'context' => 'author',
'overrides' => [
'no_author' => true,
'no_margin' => true,
],
]);
]);
if (!empty($placeholder_only)) {
$placeholder_mode = (string) ($user_home_render_config['mode'] ?? 'list');
$placeholder_html = function_exists('aksrt_render_placeholder')
? aksrt_render_placeholder($placeholder_mode, 4)
: '';
?>
<div class="posts-row ajaxpager aksrt-user-home__post-list" data-view="<?php echo esc_attr($placeholder_mode); ?>">
<div class="post_ajax_loader" role="status" aria-label="<?php esc_attr_e('正在加载', 'aksrt'); ?>">
<?php echo $placeholder_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- 固定文章骨架由 aksrt_render_placeholder() 输出。 ?>
</div>
<div class="uh-panel-load-error" role="alert">
<span><?php esc_html_e('加载失败，请重试', 'aksrt'); ?></span>
<button type="button" data-uh-retry><?php esc_html_e('重试', 'aksrt'); ?></button>
</div>
</div>
<?php
return;
}
if (!empty($favorite_post_ids)) :
$favorites_query = new WP_Query([
'post_type' => 'post',
'post_status' => 'publish',
templates/parts/user-home/panel-follow.php
+12
View File
@@ -21,6 +21,17 @@ extract($args, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_ext
$follow_page = max(1, (int) ($follow_page ?? 1));
$follow_sub = in_array($follow_sub ?? 'followers', ['following', 'followers'], true) ? $follow_sub : 'followers';
if (!empty($placeholder_only)) :
?>
<?php echo aksrt_get_user_home_follow_placeholder(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- 固定骨架由本主题 helper 输出。 ?>
<div class="uh-panel-load-error" role="alert">
<span><?php esc_html_e('加载失败，请重试', 'aksrt'); ?></span>
<button type="button" data-uh-retry><?php esc_html_e('重试', 'aksrt'); ?></button>
</div>
<?php
return;
endif;
$follow_instance = class_exists('\AKSRT\User\Follow') ? \AKSRT\User\Follow::get_instance() : null;
$following_count = $follow_instance ? (int) $follow_instance->get_following_count((int) $user_id) : 0;
$follower_count = $follow_instance ? (int) $follow_instance->get_follower_count((int) $user_id) : 0;
@@ -63,3 +74,4 @@ $total_pages = max(1, (int) ($list['total_pages'] ?? 1));
aksrt_render_profile_empty($svg_empty_follow ?? $svg_empty_post ?? '', $empty_msg);
?>
<?php endif; ?>
<?php echo aksrt_get_user_home_follow_placeholder(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- 固定骨架由本主题 helper 输出。 ?>
tests/widget-system/post-visual-contract.test.cjs
+19 -1
View File
@@ -570,16 +570,24 @@ test('public user home stays param-free and swaps panels via REST fragments', ()
// Shell mounts panel wrappers from the tab registry with a user id hook.
assert.match(shell, /data-user-id="<\?php echo \(int\) \$user_id; \?>">/);
assert.match(shell, /get_template_part\('templates\/parts\/user-home\/panel', \$panel_tab, \$ctx\)/);
assert.match(shell, /in_array\(\$panel_tab, \['favorites', 'follow'\], true\) && \$panel_tab !== \$active_tab/);
assert.match(shell, /data-panel-loaded="<\?php echo \$defer_panel \? 'false' : 'true'; \?>"/);
assert.match(shell, /get_template_part\('templates\/parts\/user-home\/panel', \$panel_tab, \$panel_context\)/);
// Follow panel: button-driven sub-tabs, pagination without URL building.
assert.match(follow, /data-uh-sub="followers"/);
assert.match(follow, /data-uh-sub="following"/);
assert.match(follow, /aksrt_render_user_home_pagination\(\$total_pages, \$follow_page\)/);
assert.match(ctx, /function aksrt_get_user_home_follow_placeholder\(\): string[\s\S]*?author-minicard radius8 flex ac uh-follow__placeholder[\s\S]*?placeholder k1 mb6[\s\S]*?placeholder s1/);
assert.match(ctx, /str_repeat\(\$item, 6\)/);
assert.match(follow, /aksrt_get_user_home_follow_placeholder\(\)/);
assert.match(follow, /data-uh-retry[\s\S]*?重试/);
assert.doesNotMatch(follow, /add_query_arg|\$_GET|paginate_links/);
assert.match(comments, /data-uh-comments-next=/);
assert.match(favorites, /aksrt_render_user_home_pagination\(/);
assert.match(favorites, /if \(!empty\(\$placeholder_only\)\)[\s\S]*?aksrt_render_placeholder\(\$placeholder_mode, 4\)/);
assert.match(favorites, /data-uh-retry[\s\S]*?重试/);
assert.doesNotMatch(comments + favorites, /add_query_arg|\$_GET/);
// REST fragment endpoint serves public panel bodies.
@@ -593,6 +601,16 @@ test('public user home stays param-free and swaps panels via REST fragments', ()
assert.match(authorJs, /data-uh-sub/);
assert.match(authorJs, /post_ajax\.ed/);
assert.match(authorJs, /window\.auto_fun\(\)/);
assert.match(authorJs, /panel\.dataset\.panelLoaded === 'false'[\s\S]*?loadPanelBody\(panel, name, 1, 'followers'\)/);
assert.match(authorJs, /target\.closest\('\[data-uh-retry\]'\)[\s\S]*?loadPanelBody\(retryPanel, retryName, 1, 'followers'\)/);
assert.match(authorJs, /panel\.dataset\.panelLoaded = 'true'/);
assert.match(authorJs, /panel\.classList\.add\('is-load-error'\)/);
const userHomeCss = read('assets/css/routes/user-home.css');
assert.match(userHomeCss, /dashboard-panel\.is-loading \.uh-follow__list--placeholder\s*\{\s*display: block;/);
assert.match(userHomeCss, /dashboard-panel\.is-loading \.uh-follow__subtabs,[\s\S]*?dashboard-panel\.is-loading \.uh-follow__list:not\(\.uh-follow__list--placeholder\),[\s\S]*?dashboard-panel\.is-loading \.uh-pagination,[\s\S]*?dashboard-panel\.is-loading \.profile-empty\s*\{\s*display: none;/);
assert.match(userHomeCss, /dashboard-panel\.is-load-error \.uh-follow__list--placeholder\s*\{\s*display: block;/);
assert.match(userHomeCss, /dashboard-panel\.is-load-error \.post_ajax_loader\s*\{\s*display: block;/);
assert.match(userHomeCss, /dashboard-panel\.is-load-error \.uh-panel-load-error\s*\{\s*display: block;/);
// 翻页拿子分组只读**当前面板内**的 is-active 子页签，不读 panel.dataset：
// uhSub 是粉丝面板私有状态，写满所有面板会互相串味 —— 先点过粉丝子页签，