perf(modal): unify cancellable frontend modal flows

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-05 02:04:55 +08:00
co-authored by Claude Fable 5
parent 25ce1d8f43
commit 5375ad6429
36 changed files with 2623 additions and 1806 deletions
+121 -296
View File
@@ -17,6 +17,11 @@ class Badges {
public const META_WEAR = 'aksrt_wear_badge';
private static $instance = null;
private static ?array $dictionary_cache = null;
/** @var array<int,array{owned_map:array<string,string>,owned:list<string>,wear:string}> */
private static array $user_context_cache = [];
/** @var array<string,array<string,mixed>> */
private static array $list_cache = [];
private function __construct() {}
@@ -32,6 +37,25 @@ class Badges {
add_action('aksrt_badge_granted', [$this, 'on_badge_granted_notify'], 10, 3);
}
private static function clear_context(int $user_id = 0): void {
if ($user_id > 0) {
unset(self::$user_context_cache[$user_id]);
foreach (array_keys(self::$list_cache) as $key) {
if (strpos($key, $user_id . ':') === 0) {
unset(self::$list_cache[$key]);
}
}
do_action('aksrt_badges_changed', $user_id);
return;
}
self::$user_context_cache = [];
self::$list_cache = [];
}
public static function invalidate_cache(int $user_id = 0): void {
self::clear_context($user_id);
}
/**
* Notify user when a badge is granted (zibll user_add_medal message).
*/
@@ -66,220 +90,8 @@ class Badges {
}
/**
* REST response for the badge list modal.
* Register the canonical JSON badge routes.
*/
public function rest_modal_list(\WP_REST_Request $request) {
$user_id = absint($request->get_param('id'));
if ($user_id <= 0 || !get_userdata($user_id)) {
return new \WP_Error('aksrt_badge_user_missing', __('用户不存在', 'aksrt'), ['status' => 404]);
}
return new \WP_REST_Response(['html' => self::render_info_modal_html($user_id)], 200);
}
/**
* REST response for a single badge modal.
*/
public function rest_modal_single(\WP_REST_Request $request) {
$slug = sanitize_key((string) $request->get_param('slug'));
$user_id = absint($request->get_param('id'));
if ($slug === '') {
return new \WP_Error('aksrt_badge_missing', __('徽章不存在', 'aksrt'), ['status' => 404]);
}
return new \WP_REST_Response(['html' => self::render_single_modal_html($slug, $user_id)], 200);
}
/**
* Badge list modal HTML.
*
* Head (avatar + owner + worn medal) and category-grouped medal card grid.
*/
public static function render_info_modal_html(int $user_id): string {
$user = get_userdata($user_id);
if (!$user) {
return '<div class="medal-modal"><p class="medal-modal__empty">' . esc_html__('用户不存在', 'aksrt') . '</p></div>';
}
$current = get_current_user_id();
$is_self = $current > 0 && $current === $user_id;
$display = $is_self ? __('我', 'aksrt') : $user->display_name;
$avatar = function_exists('aksrt_get_avatar_url')
? aksrt_get_avatar_url($user_id, ['size' => 80])
: get_avatar_url($user_id, ['size' => 80]);
$data = self::list_for_user($user_id, $is_self || self::can_manually_set($current));
$categories = is_array($data['categories'] ?? null) ? $data['categories'] : [];
$wear = (string) ($data['wear'] ?? '');
$map = self::get_dictionary_map();
// Head slot: worn medal icon with tooltip, or an empty-state tag (zibll).
$wear_slot = '';
if ($wear !== '' && isset($map[$wear])) {
$wear_label = (string) ($map[$wear]['label'] ?? $wear);
$wear_icon = (string) ($map[$wear]['icon_url'] ?? '');
if ($wear_icon !== '') {
$wear_slot = '<img class="medal-icon img-icon ml3" src="' . esc_url($wear_icon) . '" title="' . esc_attr(sprintf(__('当前佩戴:%s', 'aksrt'), $wear_label)) . '" alt="' . esc_attr($wear_label) . '" />';
}
} elseif ((int) ($data['count'] ?? 0) === 0) {
$wear_slot = '<span class="badg badg-sm c-red ml6">' . esc_html__('暂无徽章', 'aksrt') . '</span>';
}
$html = '<div class="medal-modal">';
$html .= '<button type="button" class="aksrt-modal-runtime__close" data-aksrt-modal-close aria-label="' . esc_attr__('关闭', 'aksrt') . '">&times;</button>';
$html .= '<div class="medal-modal__head">';
$html .= '<img class="medal-modal__avatar" src="' . esc_url((string) $avatar) . '" alt="" width="42" height="42" />';
$html .= '<div class="medal-modal__title"><span class="em09">' . esc_html(sprintf(__('%s的徽章', 'aksrt'), $display)) . '</span>' . $wear_slot . '</div>';
$html .= '</div>';
$html .= '<div class="medal-modal__scroll mini-scrollbar">';
if (!$categories) {
$html .= '<div class="empty-state empty-state--sm">'
. '<div class="empty-state__icon"><i class="fas fa-award" aria-hidden="true"></i></div>'
. '<div class="empty-state__title">' . esc_html__('暂无徽章', 'aksrt') . '</div>'
. '<div class="empty-state__desc">' . esc_html__('积极参与社区互动即可获得徽章', 'aksrt') . '</div>'
. '</div>';
} else {
foreach ($categories as $cat) {
$html .= '<div class="medal-cat-box">';
$html .= '<div class="medal-cat-head"><b class="medal-cat-name">' . esc_html((string) ($cat['cat_name'] ?? '')) . '</b></div>';
$html .= '<div class="medal-list-box">';
foreach ((array) ($cat['items'] ?? []) as $item) {
$html .= self::render_card_link($user_id, is_array($item) ? $item : []);
}
$html .= '</div></div>';
}
}
$html .= '</div>';
// Footer: quick jump to my own badges while browsing someone else (zibll).
if (!$is_self && $current > 0) {
$my_url = rest_url('aksrt/v1/users/' . $current . '/badges/modal');
$html .= '<div class="medal-modal__buts">';
$html .= '<a class="but c-blue" href="' . esc_url($my_url) . '" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($my_url) . '" data-aksrt-modal-class="full-sm" data-aksrt-modal-mobile-bottom="true"><i class="fas fa-medal" aria-hidden="true"></i> ' . esc_html__('查看我的徽章', 'aksrt') . '</a>';
$html .= '</div>';
}
$html .= '</div>';
return $html;
}
/**
* Single medal card inside the list grid; deep-links to the detail modal.
*
* @param array{slug?:string,label?:string,icon_url?:string,owned?:bool,wear?:bool} $item
*/
protected static function render_card_link(int $user_id, array $item): string {
$slug = (string) ($item['slug'] ?? '');
$label = (string) ($item['label'] ?? $slug);
$icon = (string) ($item['icon_url'] ?? '');
$owned = !empty($item['owned']);
$wear = !empty($item['wear']);
if ($slug === '') {
return '';
}
$icon_html = $icon !== ''
? '<img class="medal-icon img-icon" src="' . esc_url($icon) . '" alt="' . esc_attr($label) . '" loading="lazy" decoding="async" />'
: '<span class="medal-icon medal-icon--fa"><i class="fas fa-award" aria-hidden="true"></i></span>';
$card = '<div class="medal-card' . ($owned ? ' is-has' : ' no-has') . ($wear ? ' is-wear' : '') . '">';
$card .= $icon_html;
$card .= '<div class="medal-card__name">' . esc_html($label) . '</div>';
if ($wear) {
$card .= '<div class="medal-card__wear">' . esc_html__('佩戴中', 'aksrt') . '</div>';
}
$card .= '</div>';
$url = rest_url('aksrt/v1/users/' . $user_id . '/badges/' . rawurlencode($slug) . '/modal');
return '<a class="medal-list" href="' . esc_url($url) . '" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($url) . '" data-aksrt-modal-class="modal-mini" data-aksrt-modal-mobile-bottom="true">' . $card . '</a>';
}
/**
* Single badge detail modal (zibll zib_get_single_medal_info_modal parity).
*
* medal-background.svg backdrop + large icon + name + desc + obtain time,
* with wear action for the owner and a back link into the list modal.
*/
public static function render_single_modal_html(string $slug, int $user_id = 0): string {
$map = self::get_dictionary_map();
$slug = sanitize_key($slug);
if ($slug === '' || !isset($map[$slug])) {
return '<div class="medal-modal medal-modal--single"><p class="medal-modal__empty">' . esc_html__('徽章不存在', 'aksrt') . '</p></div>';
}
$item = $map[$slug];
$current = get_current_user_id();
$is_self = $user_id > 0 && $current === $user_id;
$owned_map = $user_id > 0 ? self::get_owned_map($user_id) : [];
$has = isset($owned_map[$slug]);
$is_wear = $has && self::get_wear($user_id) === $slug;
$label = (string) ($item['label'] ?? $slug);
$desc = (string) ($item['desc'] ?? '');
$icon = (string) ($item['icon_url'] ?? '');
$bg = get_template_directory_uri() . '/assets/img/medal/medal-background.svg';
$icon_html = $icon !== ''
? '<img class="medal-icon img-icon" src="' . esc_url($icon) . '" alt="' . esc_attr($label) . '" loading="lazy" decoding="async" />'
: '<span class="medal-icon medal-icon--fa lg"><i class="fas fa-award" aria-hidden="true"></i></span>';
// Obtain state line (self only, zibll).
$state = '';
if ($is_self) {
$state = $has
? '<div class="medal-single-state c-blue">' . esc_html(sprintf(__('%s 获得', 'aksrt'), (string) $owned_map[$slug])) . '</div>'
: '<div class="medal-single-state c-yellow">' . esc_html__('暂未获得', 'aksrt') . '</div>';
}
$html = '<div class="medal-modal medal-modal--single">';
$html .= '<button type="button" class="aksrt-modal-runtime__close" data-aksrt-modal-close aria-label="' . esc_attr__('关闭', 'aksrt') . '">&times;</button>';
$html .= '<div class="medal-single-card">';
$html .= '<div class="medal-single-bg"><img class="fit-cover" src="' . esc_url($bg) . '" alt="" /></div>';
$html .= '<div class="medal-single-main">' . $icon_html;
$html .= '<div class="medal-single-name">' . esc_html($label) . '</div>';
if ($desc !== '') {
$html .= '<div class="medal-single-desc muted-2-color">' . esc_html($desc) . '</div>';
}
$html .= $state . '</div></div>';
if ($is_self && $has && !$is_wear) {
$html .= '<div class="medal-modal__actions"><button type="button" class="but jb-blue btn-block radius" data-aksrt-badge-wear="' . esc_attr($slug) . '">' . esc_html__('佩戴此徽章', 'aksrt') . '</button></div>';
} elseif ($is_self && $is_wear) {
$html .= '<div class="medal-modal__actions"><span class="badg btn-block c-blue">' . esc_html__('当前佩戴此徽章', 'aksrt') . '</span></div>';
}
// Back to the full badge list modal.
if ($user_id > 0) {
$back_url = rest_url('aksrt/v1/users/' . $user_id . '/badges/modal');
$html .= '<a class="medal-modal__back muted-2-color em09" href="' . esc_url($back_url) . '" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($back_url) . '" data-aksrt-modal-class="full-sm" data-aksrt-modal-mobile-bottom="true"><i class="fas fa-angle-left" aria-hidden="true"></i> ' . esc_html__('返回徽章列表', 'aksrt') . '</a>';
}
$html .= '</div>';
return $html;
}
/**
* Declarative modal runtime trigger for a user's badge list.
*/
public static function get_info_link(int $user_id, string $class = '', ?string $text = null): string {
if ($user_id <= 0 || !self::enabled()) {
return '';
}
if ($text === null) {
$text = __('徽章明细', 'aksrt');
}
if (!function_exists('aksrt_get_modal_link')) {
return '';
}
$url = rest_url('aksrt/v1/users/' . $user_id . '/badges/modal');
return aksrt_get_modal_link([
'tag' => 'a',
'class' => trim('user-medal-info ' . $class),
'text' => $text,
'url' => $url,
'data_class' => 'full-sm',
'height' => 240,
'mobile_bottom' => true,
]);
}
public function register_routes(): void {
register_rest_route('aksrt/v1', '/users/(?P<id>\d+)/badges', [
'methods' => 'GET',
@@ -294,29 +106,14 @@ class Badges {
],
]);
register_rest_route('aksrt/v1', '/users/(?P<id>\d+)/badges/modal', [
'methods' => 'GET',
'callback' => [$this, 'rest_modal_list'],
'permission_callback' => '__return_true',
'args' => [
'id' => [
'type' => 'integer',
'required' => true,
'sanitize_callback' => 'absint',
],
],
]);
register_rest_route('aksrt/v1', '/users/(?P<id>\d+)/badges/(?P<slug>[a-z0-9_-]+)/modal', [
'methods' => 'GET',
'callback' => [$this, 'rest_modal_single'],
'permission_callback' => '__return_true',
register_rest_route('aksrt/v1', '/users/me/badges/wear', [
'methods' => 'POST',
'callback' => [$this, 'rest_wear'],
'permission_callback' => static function () {
return is_user_logged_in();
},
'args' => [
'id' => [
'type' => 'integer',
'required' => true,
'sanitize_callback' => 'absint',
],
'slug' => [
'type' => 'string',
'required' => true,
@@ -325,19 +122,16 @@ class Badges {
],
]);
register_rest_route('aksrt/v1', '/users/me/badges/wear', [
'methods' => 'POST',
'callback' => [$this, 'rest_wear'],
'permission_callback' => static function () {
return is_user_logged_in();
},
]);
register_rest_route('aksrt/v1', '/users/(?P<id>\d+)/badges/grant', [
'methods' => 'POST',
'callback' => [$this, 'rest_grant'],
'permission_callback' => [$this, 'rest_can_manually_set'],
'args' => [
'slug' => [
'type' => 'string',
'required' => true,
'sanitize_callback' => 'sanitize_key',
],
'id' => [
'type' => 'integer',
'required' => true,
@@ -351,6 +145,11 @@ class Badges {
'callback' => [$this, 'rest_revoke'],
'permission_callback' => [$this, 'rest_can_manually_set'],
'args' => [
'slug' => [
'type' => 'string',
'required' => true,
'sanitize_callback' => 'sanitize_key',
],
'id' => [
'type' => 'integer',
'required' => true,
@@ -384,8 +183,11 @@ class Badges {
* @return list<array{slug:string,label:string,tone:string,desc:string,icon_url:string}>
*/
public static function get_dictionary(): array {
if (self::$dictionary_cache !== null) {
return self::$dictionary_cache;
}
if (!class_exists('\AKSRT\Settings\Settings')) {
return [];
return self::$dictionary_cache = [];
}
$settings = \AKSRT\Settings\Settings::get_user_identity_settings();
$dict = is_array($settings['badge']['dictionary'] ?? null) ? $settings['badge']['dictionary'] : [];
@@ -403,13 +205,17 @@ class Badges {
'icon_url' => (string) ($item['icon_url'] ?? ''),
];
}
return $out;
return self::$dictionary_cache = $out;
}
/**
* @return array<string,array{slug:string,label:string,tone:string,desc:string,icon_url:string}>
*/
public static function get_dictionary_map(): array {
static $map = null;
if ($map !== null) {
return $map;
}
$map = [];
foreach (self::get_dictionary() as $item) {
$map[$item['slug']] = $item;
@@ -417,29 +223,48 @@ class Badges {
return $map;
}
/** @return array{owned_map:array<string,string>,owned:list<string>,wear:string} */
private static function user_context(int $user_id): array {
if ($user_id <= 0) {
return ['owned_map' => [], 'owned' => [], 'wear' => ''];
}
if (isset(self::$user_context_cache[$user_id])) {
return self::$user_context_cache[$user_id];
}
$raw = get_user_meta($user_id, self::META_OWNED, true);
$raw = is_array($raw) ? $raw : [];
$map = self::get_dictionary_map();
$owned_map = [];
foreach ($raw as $slug => $time) {
$slug = sanitize_key((string) $slug);
if ($slug === '' || !isset($map[$slug])) {
continue;
}
$owned_map[$slug] = is_string($time) ? $time : '';
}
$owned = array_keys($owned_map);
$wear = sanitize_key((string) get_user_meta($user_id, self::META_WEAR, true));
if ($wear === '') {
$wear = $owned[0] ?? '';
} elseif (!in_array($wear, $owned, true)) {
$wear = '';
}
return self::$user_context_cache[$user_id] = [
'owned_map' => $owned_map,
'owned' => $owned,
'wear' => $wear,
];
}
/**
* Owned badge map: slug => grant time (`Y-m-d H:i:s`), newest first.
*
* @return array<string,string>
*/
public static function get_owned_map(int $user_id): array {
if ($user_id <= 0) {
return [];
}
$raw = get_user_meta($user_id, self::META_OWNED, true);
if (!is_array($raw)) {
return [];
}
$map = self::get_dictionary_map();
$out = [];
foreach ($raw as $slug => $time) {
$slug = sanitize_key((string) $slug);
if ($slug === '' || !isset($map[$slug])) {
continue;
}
$out[$slug] = is_string($time) ? $time : '';
}
return $out;
return self::user_context($user_id)['owned_map'];
}
/**
@@ -448,7 +273,7 @@ class Badges {
* @return list<string>
*/
public static function get_owned(int $user_id): array {
return array_keys(self::get_owned_map($user_id));
return self::user_context($user_id)['owned'];
}
/**
@@ -478,23 +303,11 @@ class Badges {
if ($wear !== '' && !isset($clean[$wear])) {
delete_user_meta($user_id, self::META_WEAR);
}
self::clear_context($user_id);
}
public static function get_wear(int $user_id): string {
if ($user_id <= 0) {
return '';
}
$wear = sanitize_key((string) get_user_meta($user_id, self::META_WEAR, true));
if ($wear === '') {
// zibll alias.
$wear = sanitize_key((string) get_user_meta($user_id, 'wear_medal', true));
}
$owned = self::get_owned($user_id);
if ($wear === '') {
// Default to newest/first owned badge when unset (zibll behavior).
return $owned[0] ?? '';
}
return in_array($wear, $owned, true) ? $wear : '';
return self::user_context($user_id)['wear'];
}
/**
@@ -517,6 +330,7 @@ class Badges {
return new \WP_Error('aksrt_badge_not_owned', __('尚未获得该徽章', 'aksrt'), ['status' => 403]);
}
update_user_meta($user_id, self::META_WEAR, $slug);
self::clear_context($user_id);
return true;
}
@@ -600,13 +414,15 @@ class Badges {
$public = self::public_display();
$viewer = get_current_user_id();
$is_self = $viewer > 0 && $viewer === $user_id;
$can_see = $include_private
|| $public
|| $is_self
|| self::can_manually_set($viewer);
$is_manager = self::can_manually_set($viewer);
$cache_key = $user_id . ':' . ($include_private ? 'private' : 'public') . ':' . $viewer . ':' . (int) $enabled . ':' . (int) $public;
if (array_key_exists($cache_key, self::$list_cache)) {
return self::$list_cache[$cache_key];
}
$can_see = $include_private || $public || $is_self || $is_manager;
if (!$enabled || !$can_see || $user_id <= 0) {
return [
return self::$list_cache[$cache_key] = [
'enabled' => $enabled,
'public_display' => $public,
'is_self' => $is_self,
@@ -623,9 +439,11 @@ class Badges {
$medal = is_array($settings['medal'] ?? null) ? $settings['medal'] : [];
$catalog = is_array($medal['categories'] ?? null) ? $medal['categories'] : [];
$owned_map = self::get_owned_map($user_id);
$wear = self::get_wear($user_id);
$show_unearned = $include_private || $is_self || self::can_manually_set($viewer);
$context = self::user_context($user_id);
$owned_map = $context['owned_map'];
$wear = $context['wear'];
$show_private = $include_private || $is_self || $is_manager;
$show_unearned = $show_private;
$categories = [];
foreach ($catalog as $cat) {
@@ -652,7 +470,7 @@ class Badges {
'icon_url' => (string) ($row['icon'] ?? ''),
'owned' => $has,
'wear' => $has && $slug === $wear,
'time' => $has ? (string) $owned_map[$slug] : '',
'time' => $has && $show_private ? (string) $owned_map[$slug] : '',
];
// Owned first within each category (zibll is-has / no-has order).
if ($has) {
@@ -671,7 +489,7 @@ class Badges {
];
}
return [
return self::$list_cache[$cache_key] = [
'enabled' => true,
'public_display' => $public,
'is_self' => $is_self,
@@ -690,7 +508,8 @@ class Badges {
return new \WP_Error('aksrt_badge_user', __('用户不存在', 'aksrt'), ['status' => 404]);
}
$data = self::list_for_user($user_id);
return rest_ensure_response(['success' => true, 'data' => $data]);
$response = rest_ensure_response(['success' => true, 'data' => $data]);
return self::rest_no_store($response);
}
public function rest_wear(\WP_REST_Request $request) {
@@ -698,16 +517,16 @@ class Badges {
if (!is_array($params)) {
$params = $request->get_params();
}
$slug = sanitize_key((string) ($params['slug'] ?? $params['name'] ?? ''));
$slug = sanitize_key((string) ($params['slug'] ?? ''));
$result = self::wear(get_current_user_id(), $slug);
if (is_wp_error($result)) {
return $result;
}
return rest_ensure_response([
return self::rest_no_store(rest_ensure_response([
'success' => true,
'data' => self::list_for_user(get_current_user_id(), true),
'message' => __('已佩戴徽章', 'aksrt'),
]);
]));
}
public function rest_grant(\WP_REST_Request $request) {
@@ -719,16 +538,16 @@ class Badges {
if (!is_array($params)) {
$params = $request->get_params();
}
$slug = sanitize_key((string) ($params['slug'] ?? $params['name'] ?? ''));
$slug = sanitize_key((string) ($params['slug'] ?? ''));
$result = self::grant($user_id, $slug, get_current_user_id());
if (is_wp_error($result)) {
return $result;
}
return rest_ensure_response([
return self::rest_no_store(rest_ensure_response([
'success' => true,
'data' => self::list_for_user($user_id, true),
'message' => __('已授予徽章', 'aksrt'),
]);
]));
}
public function rest_revoke(\WP_REST_Request $request) {
@@ -740,16 +559,22 @@ class Badges {
if (!is_array($params)) {
$params = $request->get_params();
}
$slug = sanitize_key((string) ($params['slug'] ?? $params['name'] ?? ''));
$slug = sanitize_key((string) ($params['slug'] ?? ''));
$result = self::revoke($user_id, $slug, get_current_user_id());
if (is_wp_error($result)) {
return $result;
}
return rest_ensure_response([
return self::rest_no_store(rest_ensure_response([
'success' => true,
'data' => self::list_for_user($user_id, true),
'message' => __('已收回徽章', 'aksrt'),
]);
]));
}
private static function rest_no_store(\WP_REST_Response $response): \WP_REST_Response {
$response->header('Cache-Control', 'no-store, private');
$response->header('Pragma', 'no-cache');
return $response;
}