fix(user): align badge modals with reference theme

This commit is contained in:
kate522 committed 2026-10-29 17:38:10 +08:00
1 parent 8e9d3a7e49
commit 1c501ff713
17 files changed
+931 -313

No files matched your search

+60 -41
View File
@@ -372,7 +372,7 @@ class Badges {
$owned_map = $context['owned_map'];
$wear = $context['wear'];
$show_private = $include_private || $is_self || $is_manager;
$show_unearned = $show_private;
$show_unearned = $include_private || $is_self;
$categories = [];
foreach ($catalog as $cat) {
@@ -380,6 +380,7 @@ class Badges {
$rows = is_array($cat['items'] ?? null) ? $cat['items'] : [];
$has_rows = [];
$no_rows = [];
$all_rows = [];
foreach ($rows as $row) {
if (!is_array($row)) {
continue;
@@ -402,6 +403,7 @@ class Badges {
'time' => $has && $show_private ? (string) $owned_map[$slug] : '',
'get_type' => sanitize_key((string) ($row['get_type'] ?? 'manually_add')),
];
$all_rows[] = $item;
// Owned first within each category (legacy is-has / no-has order).
if ($has) {
$has_rows[] = $item;
@@ -409,7 +411,7 @@ class Badges {
$no_rows[] = $item;
}
}
$items = array_merge($has_rows, $no_rows);
$items = $include_private ? $all_rows : array_merge($has_rows, $no_rows);
if (!$items) {
continue;
}
@@ -453,11 +455,12 @@ class Badges {
return isset($_REQUEST['slug']) ? sanitize_key(wp_unslash((string) $_REQUEST['slug'])) : '';
}
private static function icon_html(array $item, string $class = 'img-icon medal-icon'): string {
private static function icon_html(array $item, string $class = 'img-icon medal-icon', string $title = ''): string {
$icon = esc_url((string) ($item['icon_url'] ?? ''));
$label = esc_attr((string) ($item['label'] ?? __('徽章', 'aksrt')));
if ($icon !== '') {
return '<img src="' . $icon . '" class="' . esc_attr($class) . '" alt="' . $label . '" decoding="async">';
$tooltip = $title !== '' ? ' data-toggle="tooltip" title="' . esc_attr($title) . '"' : '';
return '<img src="' . $icon . '" class="' . esc_attr($class) . '" alt="' . $label . '" decoding="async"' . $tooltip . '>';
}
return '<span class="medal-icon medal-icon--fa"><i class="fa fas fa-trophy" aria-hidden="true"></i></span>';
}
@@ -472,20 +475,31 @@ class Badges {
}
private static function modal_header(int $user_id, string $text): string {
$avatar = function_exists('aksrt_get_avatar_html') ? aksrt_get_avatar_html($user_id, 42, ['class' => 'medal-modal__avatar']) : get_avatar($user_id, 42);
return '<div class="medal-modal__head">' . $avatar . '<div class="medal-modal__title">' . $text . '</div></div>';
$avatar = aksrt_get_avatar_box($user_id, 'avatar-img', false, false);
return '<div class="modal-colorful-header colorful-bg c-blue">' . self::modal_close()
. '<div class="colorful-make"></div><div class="text-center"><div class="em2x">' . $avatar
. '</div><div class="mt10 em12 padding-w10">' . $text . '</div></div></div>';
}
private static function modal_close(): string {
return '<button type="button" class="close" data-aksrt-modal-close aria-label="' . esc_attr__('关闭', 'aksrt')
. '"><svg class="ic-close" aria-hidden="true"><use xlink:href="#icon-close"></use></svg></button>';
}
private static function modal_empty(string $text): string {
return aksrt_get_null($text, 30, 'null-2.svg');
}
private static function modal_info_html(int $user_id): string {
$user = get_userdata($user_id);
if (!$user) return '<div class="medal-modal__empty">' . esc_html__('用户不存在', 'aksrt') . '</div>';
if (!self::enabled()) return '<div class="medal-modal__empty">' . esc_html__('徽章系统未启用', 'aksrt') . '</div>';
if (!$user) return self::modal_empty(__('用户不存在', 'aksrt'));
if (!self::enabled()) return self::modal_empty(__('徽章系统未启用', 'aksrt'));
$data = self::list_for_user($user_id);
$name = $user_id === get_current_user_id() ? __('我的徽章', 'aksrt') : sprintf(__('%s的徽章', 'aksrt'), $user->display_name);
$name = '<span class="em09">' . esc_html($user_id === get_current_user_id() ? __('我的徽章', 'aksrt') : sprintf(__('%s的徽章', 'aksrt'), $user->display_name)) . '</span>';
$wear = self::item_by_slug($data, (string) ($data['wear'] ?? ''));
if ($wear) $name .= self::icon_html($wear, 'img-icon medal-icon ml3');
elseif (!(int) ($data['count'] ?? 0)) $name .= '<span class="badg-sm badg c-red ml6">' . esc_html__('暂无徽章', 'aksrt') . '</span>';
$html = '<div class="medal-modal">' . self::modal_header($user_id, '<span class="em09">' . wp_kses_post($name) . '</span>') . '<div class="mini-scrollbar scroll-y max-vh5 medal-modal__scroll">';
if ($wear) $name .= self::icon_html($wear, 'img-icon medal-icon ml3', sprintf(__('当前佩戴:%s', 'aksrt'), $wear['label']));
else $name .= '<span class="em09 ml6"><span class="badg-sm badg c-red">' . esc_html__('暂无徽章', 'aksrt') . '</span></span>';
$html = '<div class="modal-body">' . self::modal_header($user_id, $name) . '<div class="mini-scrollbar scroll-y max-vh5">';
$has = false;
foreach ((array) ($data['categories'] ?? []) as $category) {
$cards = '';
@@ -494,41 +508,43 @@ class Badges {
$has = true;
$card = '<div class="medal-card' . (!empty($item['owned']) ? ' is-has' : ' no-has') . '">' . self::icon_html($item) . '<div class="muted-color px12 mt6">' . esc_html((string) $item['label']) . '</div></div>';
$url = add_query_arg(['action' => 'aksrt_single_medal_info_modal', 'name' => $item['slug'], 'user_id' => $user_id], admin_url('admin-ajax.php'));
$cards .= '<div class="medal-list"><a class="single-medal-info aksrt-modal-link" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($url) . '" data-aksrt-modal-class="aksrt-badge-modal aksrt-badge-modal--single" data-aksrt-modal-mobile-bottom="true" data-aksrt-modal-cache="false" href="' . esc_url($url) . '">' . $card . '</a></div>';
$cards .= '<div class="medal-list"><a class="single-medal-info aksrt-modal-link" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($url) . '" data-aksrt-modal-class="aksrt-badge-modal aksrt-badge-modal--single" data-aksrt-modal-loading="spinner" data-aksrt-modal-swipe-close="true" data-aksrt-modal-height="201" data-aksrt-modal-new="true" data-aksrt-modal-mobile-bottom="true" data-aksrt-modal-cache="false" href="' . esc_url($url) . '">' . $card . '</a></div>';
}
if ($cards) $html .= '<div class="medal-cat-box muted-box mb20"><div class="mb20"><b class="medal-cat-name">' . esc_html((string) $category['cat_name']) . '</b></div><div class="medal-list-box">' . $cards . '</div></div>';
if ($cards) $html .= '<div class="medal-cat-box muted-box mb20"><div class="mb20"><b class="medal-cat-name">' . esc_html((string) $category['cat_name']) . '</b></div><div class="medal-list-box flex at hh">' . $cards . '</div></div>';
}
if (!$has) $html .= '<div class="medal-modal__empty">' . esc_html__('暂无徽章', 'aksrt') . '</div>';
if (!$has) $html .= self::modal_empty(__('暂无徽章', 'aksrt'));
$html .= '</div>';
$buttons = '';
if ($user_id !== get_current_user_id()) {
$mine = add_query_arg(['action' => 'aksrt_user_medal_info_modal', 'id' => get_current_user_id()], admin_url('admin-ajax.php'));
$grant = add_query_arg(['action' => 'aksrt_user_medal_manually_add_modal', 'id' => $user_id], admin_url('admin-ajax.php'));
$buttons = '';
if (get_current_user_id()) $buttons .= '<a class="but aksrt-modal-link" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($mine) . '" data-aksrt-modal-class="aksrt-badge-modal aksrt-badge-modal--overview" data-aksrt-modal-cache="false" href="' . esc_url($mine) . '">' . esc_html__('查看我的徽章', 'aksrt') . '</a>';
if (self::can_manually_set()) $buttons .= '<a class="but c-blue aksrt-modal-link" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($grant) . '" data-aksrt-modal-class="aksrt-badge-modal aksrt-badge-modal--grant" data-aksrt-modal-cache="false" href="' . esc_url($grant) . '">' . esc_html__('授予徽章', 'aksrt') . '</a>';
if ($buttons !== '') $html .= '<div class="medal-modal__buts">' . $buttons . '</div>';
if (get_current_user_id()) $buttons .= '<a class="but c-blue-2 aksrt-modal-link" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($mine) . '" data-aksrt-modal-class="aksrt-badge-modal aksrt-badge-modal--overview" data-aksrt-modal-loading="spinner" data-aksrt-modal-swipe-close="true" data-aksrt-modal-height="240" data-aksrt-modal-mobile-bottom="true" data-aksrt-modal-cache="false" href="' . esc_url($mine) . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-medal-color"></use></svg>' . esc_html__('查看我的徽章', 'aksrt') . '</a>';
}
if (self::can_manually_set()) {
$grant = add_query_arg(['action' => 'aksrt_user_medal_manually_add_modal', 'id' => $user_id], admin_url('admin-ajax.php'));
$buttons .= '<a class="but c-green aksrt-modal-link" data-aksrt-modal="remote" data-aksrt-modal-url="' . esc_url($grant) . '" data-aksrt-modal-class="aksrt-badge-modal aksrt-badge-modal--grant" data-aksrt-modal-loading="spinner" data-aksrt-modal-swipe-close="true" data-aksrt-modal-height="240" data-aksrt-modal-mobile-bottom="true" data-aksrt-modal-cache="false" href="' . esc_url($grant) . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-add-ring"></use></svg>' . esc_html__('授予徽章', 'aksrt') . '</a>';
}
if ($buttons !== '') $html .= '<div class="modal-buts but-average">' . $buttons . '</div>';
$html .= '</div>';
return $html;
}
private static function modal_single_html(int $user_id, string $slug): string {
if (!$user_id || !get_userdata($user_id)) return '<div class="medal-modal__empty">' . esc_html__('用户不存在', 'aksrt') . '</div>';
if (!self::enabled()) return '<div class="medal-modal__empty">' . esc_html__('徽章系统未启用', 'aksrt') . '</div>';
if (!$user_id || !get_userdata($user_id)) return self::modal_empty(__('用户不存在', 'aksrt'));
if (!self::enabled()) return self::modal_empty(__('徽章系统未启用', 'aksrt'));
$data = self::list_for_user($user_id);
$item = self::item_by_slug($data, $slug);
if (!$item) return '<div class="medal-modal__empty">' . esc_html__('参数传入错误或没有此徽章', 'aksrt') . '</div>';
if (!$item) return self::modal_empty(__('参数传入错误或没有此徽章', 'aksrt'));
$state = '';
if (!empty($item['owned']) && !empty($item['time'])) $state = '<div class="c-blue px12 mt10">' . esc_html(sprintf(__('%s 获得', 'aksrt'), $item['time'])) . '</div>';
elseif (empty($item['owned'])) $state = '<div class="c-yellow px12 mt20">' . esc_html__('暂未获得', 'aksrt') . '</div>';
$html = '<div class="medal-modal medal-modal--single"><div class="medal-single-card"><div class="medal-single-bg"><img src="' . esc_url(get_theme_file_uri('/assets/img/medal/medal-background.svg')) . '" alt=""></div><div class="relative">' . self::icon_html($item) . '<div class="mt20">' . esc_html($item['label']) . '</div><div class="muted-2-color px12 mt10">' . esc_html($item['desc']) . '</div>' . $state . '</div></div>';
if ($user_id === get_current_user_id()) {
if (!empty($item['owned']) && !empty($item['time'])) $state = '<div class="c-blue px12 mt10">' . esc_html(sprintf(__('%s 获得', 'aksrt'), $item['time'])) . '</div>';
elseif (empty($item['owned'])) $state = '<div class="c-yellow px12 mt20">' . esc_html__('暂未获得', 'aksrt') . '</div>';
}
$html = '<div class="modal-body">' . self::modal_close() . '<div class="box-body medal-card mb20 mt20 medal-single-card relative"><div class="medal-single-bg"><img class="fit-cover" src="' . esc_url(get_theme_file_uri('/assets/img/medal/medal-background.svg')) . '" alt=""></div><div class="relative">' . self::icon_html($item) . '<div class="mt20">' . esc_html($item['label']) . '</div><div class="muted-2-color px12 mt10">' . esc_html($item['desc']) . '</div>' . $state . '</div></div>';
if ($user_id === get_current_user_id() && !empty($item['owned'])) {
if (!empty($item['wear'])) $html .= '<div class="box-body"><span class="badg btn-block c-blue">' . esc_html__('当前佩戴此徽章', 'aksrt') . '</span></div>';
else $html .= '<div class="box-body"><a href="javascript:;" class="but btn-block radius jb-blue aksrt-badge-action" data-aksrt-badge-action="wear" data-slug="' . esc_attr($slug) . '">' . esc_html__('佩戴此徽章', 'aksrt') . '</a></div>';
} elseif ($user_id !== get_current_user_id() && self::can_manually_set() && !empty($item['owned'])) {
} elseif ($user_id !== get_current_user_id() && self::can_manually_set() && !empty($item['owned']) && ($item['get_type'] ?? '') === 'manually_add') {
$html .= '<div class="box-body"><a href="javascript:;" class="but btn-block radius c-red aksrt-badge-action" data-aksrt-badge-action="revoke" data-user-id="' . (int) $user_id . '" data-slug="' . esc_attr($slug) . '">' . esc_html__('收回此徽章', 'aksrt') . '</a></div>';
} elseif ($user_id !== get_current_user_id() && self::can_manually_set() && empty($item['owned']) && (($item['get_type'] ?? '') === 'manually_add')) {
$html .= '<div class="box-body"><a href="javascript:;" class="but btn-block radius c-blue aksrt-badge-action" data-aksrt-badge-action="grant" data-user-id="' . (int) $user_id . '" data-slug="' . esc_attr($slug) . '">' . esc_html__('授予此徽章', 'aksrt') . '</a></div>';
}
return $html . '</div>';
}
@@ -536,12 +552,16 @@ class Badges {
public function ajax_info_modal(): void { echo self::modal_info_html(self::ajax_user_id()); exit; }
public function ajax_single_modal(): void { echo self::modal_single_html(absint($_REQUEST['user_id'] ?? 0), sanitize_key(wp_unslash((string) ($_REQUEST['name'] ?? '')))); exit; }
public function ajax_grant_modal(): void {
$user_id = self::ajax_user_id();
if (!$user_id || !get_userdata($user_id)) { echo '<div class="medal-modal__empty">' . esc_html__('用户不存在', 'aksrt') . '</div>'; exit; }
if (!self::enabled()) { echo '<div class="medal-modal__empty">' . esc_html__('徽章系统未启用', 'aksrt') . '</div>'; exit; }
if (!self::can_manually_set()) { echo '<div class="medal-modal__empty">' . esc_html__('您没有此权限', 'aksrt') . '</div>'; exit; }
echo self::modal_grant_html(self::ajax_user_id());
exit;
}
private static function modal_grant_html(int $user_id): string {
if (!$user_id || !get_userdata($user_id)) return self::modal_empty(__('用户不存在', 'aksrt'));
if (!self::enabled()) return self::modal_empty(__('徽章系统未启用', 'aksrt'));
if (!self::can_manually_set()) return self::modal_empty(__('您没有此权限', 'aksrt'));
$data = self::list_for_user($user_id, true);
$html = '<div class="medal-modal">' . self::modal_header($user_id, '<span class="em09">' . sprintf(__('为%s授予新的徽章', 'aksrt'), esc_html(get_the_author_meta('display_name', $user_id))) . '</span>') . '<div class="mini-scrollbar scroll-y max-vh5 medal-modal__scroll">';
$html = '<div class="modal-body">' . self::modal_header($user_id, '<span class="em09">' . sprintf(__('为%s授予新的徽章', 'aksrt'), '<span class="focus-color">' . esc_html(get_the_author_meta('display_name', $user_id)) . '</span>') . '</span>') . '<div class="mini-scrollbar scroll-y max-vh5">';
$has = false;
foreach ((array) ($data['categories'] ?? []) as $category) {
$cards = '';
@@ -550,13 +570,12 @@ class Badges {
$has = true;
$action = !empty($item['owned']) ? 'revoke' : 'grant';
$label = $action === 'revoke' ? __('收回', 'aksrt') : __('授予', 'aksrt');
$cards .= '<div class="medal-grant-item"><div class="medal-card">' . self::icon_html($item) . '<div class="mt6 em09">' . esc_html($item['label']) . '</div><div class="muted-2-color px12 mt6">' . esc_html($item['desc']) . '</div></div><a href="javascript:;" class="but btn-block radius px12 c-' . ($action === 'revoke' ? 'red' : 'blue') . ' mt6 aksrt-badge-action" data-aksrt-badge-action="' . esc_attr($action) . '" data-user-id="' . (int) $user_id . '" data-slug="' . esc_attr($item['slug']) . '">' . esc_html($label) . '</a></div>';
$cards .= '<div class="medal-list flex xx jsb"><div class="medal-card">' . self::icon_html($item) . '<div class="mt6 em09">' . esc_html($item['label']) . '</div><div class="muted-2-color px12 mt6">' . esc_html($item['desc']) . '</div></div><a href="javascript:;" class="but btn-block radius px12 c-' . ($action === 'revoke' ? 'red' : 'blue') . ' mt6 aksrt-badge-action" data-aksrt-badge-action="' . esc_attr($action) . '" data-user-id="' . (int) $user_id . '" data-slug="' . esc_attr($item['slug']) . '">' . esc_html($label) . '</a></div>';
}
if ($cards) $html .= '<div class="medal-cat-box muted-box mb20"><div class="mb20"><b class="medal-cat-name">' . esc_html($category['cat_name']) . '</b></div><div class="medal-list-box medal-list-box--grant">' . $cards . '</div></div>';
if ($cards) $html .= '<div class="medal-cat-box muted-box mb20"><div class="mb20"><b class="medal-cat-name">' . esc_html($category['cat_name']) . '</b></div><div class="medal-list-box flex hh">' . $cards . '</div></div>';
}
if (!$has) $html .= '<div class="medal-modal__empty">' . esc_html__('暂无可授予的徽章', 'aksrt') . '</div>';
echo $html . '</div></div>';
exit;
if (!$has) $html .= self::modal_empty(__('暂无可授予的徽章', 'aksrt'));
return $html . '</div></div>';
}
private function ajax_mutation(string $operation): void {
@@ -573,8 +592,8 @@ class Badges {
if ($operation === 'revoke' && empty($item['owned'])) self::ajax_error(__('用户未获得该徽章', 'aksrt'));
$result = $operation === 'wear' ? self::wear($user_id, $slug) : ($operation === 'grant' ? self::grant($user_id, $slug, get_current_user_id()) : self::revoke($user_id, $slug, get_current_user_id()));
if (is_wp_error($result)) self::ajax_error($result->get_error_message());
$message = ['wear' => __('已佩戴徽章', 'aksrt'), 'grant' => __('已授予徽章', 'aksrt'), 'revoke' => __('已收回徽章', 'aksrt')][$operation];
wp_send_json_success(['message' => $message, 'reload' => true]);
$message = sprintf(['wear' => __('已佩戴徽章【%s】', 'aksrt'), 'grant' => __('已授予徽章【%s】', 'aksrt'), 'revoke' => __('已收回徽章【%s】', 'aksrt')][$operation], esc_html($item['label']));
wp_send_json_success(['message' => $message]);
}
public function ajax_wear(): void { $this->ajax_mutation('wear'); }
public function ajax_grant(): void { $this->ajax_mutation('grant'); }