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

feat(forum): multi-tab topic widget lazy REST load

Browse Source 
SSR first tab; other tabs fetch /forum/frontend/widgets/topics
on switch, with shared list markup and styles.
This commit is contained in:
kate522
2026-07-19 02:27:18 +08:00
parent 5cb6928b1e
commit d479723814
2 changed files with 142 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/widget-batch5.css
+58
View File
@@ -718,3 +718,61 @@
.aksrt-badge-modal__card { padding: 12px 8px 8px; }
.aksrt-badge-modal__actions { margin-top: 12px; }
.aksrt-author-hero__badges { margin-top: 8px; }
/* Forum tab topics (batch6) */
.aksrt-ftab__nav {
display: flex;
gap: 6px;
list-style: none;
margin: 0 0 10px;
padding: 0;
overflow-x: auto;
}
.aksrt-ftab__btn {
border: 0;
background: var(--surface-2, #f3f4f6);
border-radius: 999px;
padding: 5px 12px;
font-size: 13px;
cursor: pointer;
color: inherit;
}
.aksrt-ftab__btn.is-active {
background: var(--color-primary, #3b82f6);
color: #fff;
}
.aksrt-ftab__panel { display: none; }
.aksrt-ftab__panel.is-active { display: block; }
.aksrt-ftab__empty { font-size: 13px; color: var(--muted-2-color, #999); padding: 8px 0; }
.aksrt-ftopic-list { list-style: none; margin: 0; padding: 0; }
.aksrt-ftopic-list__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 0;
border-bottom: 1px dashed var(--color-line, #eee);
font-size: 13px;
}
.aksrt-ftopic-list__item:last-child { border-bottom: 0; }
.aksrt-ftopic-list__link {
color: inherit;
text-decoration: none;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aksrt-ftopic-list__views { color: var(--muted-2-color, #999); font-size: 12px; flex-shrink: 0; }
.aksrt-ftopic-list__meta {
display: flex;
gap: 8px;
font-size: 11px;
color: var(--muted-2-color, #999);
margin-top: 4px;
}
.aksrt-ftopic-list.is-detail .aksrt-ftopic-list__item {
flex-direction: column;
align-items: flex-start;
}
src/AKSRT/Widgets/WidgetForumTabTopics.php
+84 -88
View File
@@ -1,6 +1,6 @@
<?php
/**
* Multi-tab forum topic lists (zibll zib_bbs_widget_ui_tab_posts lite).
* Multi-tab forum topic lists (zibll zib_bbs_widget_ui_tab_posts lite + lazy REST).
*
* @package AKSRT
*/
@@ -16,7 +16,7 @@ class WidgetForumTabTopics extends \WP_Widget {
'aksrt_forum_tab_topics',
esc_html__('论坛 - 多栏目帖子', 'aksrt'),
[
'description' => esc_html__('热门/最新/精华等栏目切换的帖子列表。', 'aksrt'),
'description' => esc_html__('热门/最新/精华等栏目切换的帖子列表（懒加载）。', 'aksrt'),
'classname' => 'widget_aksrt_forum_tab_topics',
]
);
@@ -36,6 +36,7 @@ class WidgetForumTabTopics extends \WP_Widget {
}
$count = max(1, min(20, (int) ($instance['count'] ?? 6)));
$uid = 'aksrt-ftab-' . esc_attr($this->id);
$rest = rest_url('aksrt/v1/forum/frontend/widgets/topics');
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$title = apply_filters('widget_title', (string) ($instance['title'] ?? ''), $instance, $this->id_base);
@@ -43,32 +44,60 @@ class WidgetForumTabTopics extends \WP_Widget {
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
echo '<div class="aksrt-ftab" id="' . $uid . '">';
echo '<div class="aksrt-ftab" id="' . $uid . '" data-rest="' . esc_url($rest) . '" data-count="' . esc_attr((string) $count) . '">';
echo '<ul class="aksrt-ftab__nav" role="tablist">';
foreach ($tabs as $i => $tab) {
$cls = $i === 0 ? ' is-active' : '';
echo '<li><button type="button" class="aksrt-ftab__btn' . esc_attr($cls) . '" data-index="' . (int) $i . '">' . esc_html($tab['title']) . '</button></li>';
echo '<li><button type="button" class="aksrt-ftab__btn' . esc_attr($cls) . '" data-index="' . (int) $i . '" data-orderby="' . esc_attr($tab['orderby']) . '">' . esc_html($tab['title']) . '</button></li>';
}
echo '</ul>';
foreach ($tabs as $i => $tab) {
$cls = $i === 0 ? ' is-active' : '';
echo '<div class="aksrt-ftab__panel' . esc_attr($cls) . '" data-index="' . (int) $i . '">';
$this->render_list($tab, $count);
$loaded = $i === 0 ? '1' : '0';
echo '<div class="aksrt-ftab__panel' . esc_attr($cls) . '" data-index="' . (int) $i . '" data-loaded="' . esc_attr($loaded) . '">';
if ($i === 0) {
$payload = WidgetForumTopicLists::query_payload([
'count' => $count,
'orderby' => $tab['orderby'],
'style' => 'mini',
'paginate' => 'none',
], 1);
echo $payload['html']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
} else {
echo '<div class="post_ajax_loader" data-aksrt-ajax-loader></div>';
}
echo '</div>';
}
echo '</div>';
?>
<script>
(function(){
var root=document.getElementById(<?php echo wp_json_encode($uid); ?>);
if(!root||root._aksrtFtab)return; root._aksrtFtab=1;
var rest=root.getAttribute('data-rest')||'';
var count=root.getAttribute('data-count')||'6';
var btns=[].slice.call(root.querySelectorAll('.aksrt-ftab__btn'));
var panels=[].slice.call(root.querySelectorAll('.aksrt-ftab__panel'));
function load(panel, orderby){
if(!panel||panel.getAttribute('data-loaded')==='1'||!rest)return;
var qs=new URLSearchParams({page:'1',count:count,orderby:orderby||'date',style:'mini',paginate:'none'});
var url=rest+(rest.indexOf('?')>-1?'&':'?')+qs.toString();
panel.classList.add('is-ajax-loading');
fetch(url,{credentials:'same-origin',headers:{Accept:'application/json','X-WP-Nonce':(window.aksrtData&&aksrtData.restNonce)||''}})
.then(function(r){return r.json()}).then(function(j){
var d=(j&&j.data)||j||{};
var html=d.html||'';
panel.innerHTML=html||'<p class="aksrt-ftab__empty">暂无内容</p>';
panel.setAttribute('data-loaded','1');
panel.classList.remove('is-ajax-loading');
}).catch(function(){panel.classList.remove('is-ajax-loading');});
}
function go(i){
btns.forEach(function(b,idx){b.classList.toggle('is-active',idx===i);});
panels.forEach(function(p,idx){p.classList.toggle('is-active',idx===i);});
var btn=btns[i], panel=panels[i];
if(btn&&panel) load(panel, btn.getAttribute('data-orderby')||'date');
}
btns.forEach(function(b){ b.addEventListener('click', function(){ go(parseInt(b.getAttribute('data-index')||'0',10)); }); });
})();
@@ -78,105 +107,72 @@ class WidgetForumTabTopics extends \WP_Widget {
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
/**
* @param array{title:string,orderby:string} $tab
*/
private function render_list(array $tab, int $count): void {
$query = [
'post_type' => 'aksrt_forum_topic',
'post_status' => 'publish',
'posts_per_page' => $count,
'order' => 'DESC',
];
switch ($tab['orderby']) {
case 'views':
$query['meta_key'] = '_aksrt_views';
$query['orderby'] = 'meta_value_num';
break;
case 'comments':
$query['orderby'] = 'comment_count';
break;
case 'essence':
$query['meta_query'] = [[
'key' => '_aksrt_essence',
'value' => '1',
]];
$query['orderby'] = 'date';
break;
default:
$query['orderby'] = 'date';
}
$q = new \WP_Query($query);
if (!$q->have_posts()) {
echo '<p class="aksrt-ftab__empty">' . esc_html__('暂无内容', 'aksrt') . '</p>';
wp_reset_postdata();
return;
}
echo '<ul class="aksrt-ftopic-list is-mini">';
while ($q->have_posts()) {
$q->the_post();
$views = (int) get_post_meta(get_the_ID(), '_aksrt_views', true);
echo '<li class="aksrt-ftopic-list__item">';
echo '<a class="aksrt-ftopic-list__link" href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a>';
echo '<span class="aksrt-ftopic-list__views">' . esc_html((string) $views) . '</span>';
echo '</li>';
}
echo '</ul>';
wp_reset_postdata();
}
/**
* @param mixed $raw
* @return array<int, array{title:string,orderby:string}>
* @return list<array{title:string,orderby:string}>
*/
private function normalize_tabs($raw): array {
if (is_string($raw)) {
$decoded = json_decode($raw, true);
$raw = is_array($decoded) ? $decoded : [];
}
if (!is_array($raw)) {
return [];
}
$out = [];
foreach ($raw as $row) {
if (!is_array($row)) {
continue;
if (is_string($raw)) {
foreach (array_filter(explode("\n", $raw)) as $line) {
$parts = array_map('trim', explode('|', $line));
if ($parts[0] === '') {
continue;
}
$out[] = [
'title' => $parts[0],
'orderby' => sanitize_key($parts[1] ?? 'date'),
];
}
$title = sanitize_text_field((string) ($row['title'] ?? ''));
if ($title === '') {
continue;
}
$orderby = sanitize_key((string) ($row['orderby'] ?? 'date'));
if (!in_array($orderby, ['date', 'views', 'comments', 'essence'], true)) {
$orderby = 'date';
}
$out[] = ['title' => $title, 'orderby' => $orderby];
if (count($out) >= 6) {
break;
return $out;
}
if (is_array($raw)) {
foreach ($raw as $tab) {
if (!is_array($tab)) {
continue;
}
$title = trim((string) ($tab['title'] ?? ''));
if ($title === '') {
continue;
}
$out[] = [
'title' => $title,
'orderby' => sanitize_key((string) ($tab['orderby'] ?? 'date')),
];
}
}
return $out;
}
public function form($instance): void {
$tabs = is_string($instance['tabs'] ?? null)
? (string) $instance['tabs']
: wp_json_encode($this->normalize_tabs($instance['tabs'] ?? []), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
$defaults = [
'title' => __('论坛栏目', 'aksrt'),
'count' => 6,
'tabs' => "最新|date\n热门|views\n精华|essence",
];
$instance = wp_parse_args($instance, $defaults);
$tabs_val = $instance['tabs'];
if (is_array($tabs_val)) {
$lines = [];
foreach ($tabs_val as $t) {
$lines[] = ($t['title'] ?? '') . '|' . ($t['orderby'] ?? 'date');
}
$tabs_val = implode("\n", $lines);
}
?>
<p>
<label><?php esc_html_e('标题', 'aksrt'); ?>
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name('title')); ?>" value="<?php echo esc_attr((string) ($instance['title'] ?? '')); ?>">
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name('title')); ?>" value="<?php echo esc_attr((string) $instance['title']); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('栏目 JSON', 'aksrt'); ?>
<textarea class="widefat" rows="5" name="<?php echo esc_attr($this->get_field_name('tabs')); ?>" placeholder='[{"title":"最新","orderby":"date"},{"title":"热门","orderby":"views"},{"title":"精华","orderby":"essence"}]'><?php echo esc_textarea((string) $tabs); ?></textarea>
</label>
<small><?php esc_html_e('orderby: date|views|comments|essence', 'aksrt'); ?></small>
</p>
<p>
<label><?php esc_html_e('每栏数量', 'aksrt'); ?>
<input class="tiny-text" type="number" min="1" max="20" name="<?php echo esc_attr($this->get_field_name('count')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['count'] ?? 6))); ?>">
<input class="tiny-text" type="number" min="1" max="20" name="<?php echo esc_attr($this->get_field_name('count')); ?>" value="<?php echo esc_attr((string) $instance['count']); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('栏目（每行: 标题|排序 date/views/essence/comments）', 'aksrt'); ?>
<textarea class="widefat" rows="4" name="<?php echo esc_attr($this->get_field_name('tabs')); ?>"><?php echo esc_textarea((string) $tabs_val); ?></textarea>
</label>
</p>
<?php
@@ -185,8 +181,8 @@ class WidgetForumTabTopics extends \WP_Widget {
public function update($new_instance, $old_instance): array {
return [
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
'tabs' => $this->normalize_tabs($new_instance['tabs'] ?? []),
'count' => max(1, min(20, (int) ($new_instance['count'] ?? 6))),
'tabs' => sanitize_textarea_field((string) ($new_instance['tabs'] ?? '')),
];
}
}