kate522
7d78a33a9d
The username and e-mail entries under the profile header rendered as plain grey text on a solid icon. The reference makes each one a bordered pill that copies its own value on click, drawn with the outline glyphs. Both entries now carry `.but` plus `data-clipboard-tag` / `data-clipboard-text` so the existing frontend clipboard runtime (assets/js/runtime/libs/clipboard.js) picks them up and toasts "用户名已复制". Icons move from `fas` to `far`, which is the FA5 equivalent of the reference's `fa-user-o` / `fa-envelope-o`. Geometry follows `.author-header .user-identity > .but/.badg` exactly: padding 2px 6px, margin 5px 6px 0 0, 12px type, 1.4 line height, and the meta row gets the reference's 520px max width. medal.css already carried its own approximation of this pill (2px 8px 2px 0, .3em .6em, 1.44) for the medal entry; it now uses the same numbers so the two entries line up. The base rule lives in layout.css rather than medal.css because the medal module is only enqueued when badges are enabled, and the header must keep its shape either way. Verification: rendered the real header through a PHP stub and measured the computed styles in the browser — padding 2px 6px, margin 5px 6px 0 0, 12px / 16.8px, 23px tall, both entries carrying the right clipboard payload. Added user-center-header-meta-contract.test.cjs to pin the markup and geometry; 864 widget/navigation tests pass.
107 lines
5.6 KiB
PHP
107 lines
5.6 KiB
PHP
<?php
|
|
/**
|
|
* User center profile header part.
|
|
*
|
|
* @package Jio
|
|
*/
|
|
|
|
defined('ABSPATH') || exit;
|
|
|
|
$context = is_array($args['context'] ?? null) ? $args['context'] : [];
|
|
extract($context, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_extract
|
|
?>
|
|
<div class="uc-header">
|
|
<div class="uc-header__cover">
|
|
<img id="jio-cover-img" class="uc-header__cover-img" src="<?php echo esc_url($user_background_url); ?>" alt="">
|
|
<div class="uc-header__cover-mask"></div>
|
|
<div class="jio-cover-menu" data-jio-menu>
|
|
<button type="button" class="jio-cover-menu__trigger" aria-haspopup="true" aria-expanded="false" aria-label="<?php esc_attr_e('个人主页操作', 'jio'); ?>">
|
|
<i class="fa fas fa-ellipsis-h" aria-hidden="true"></i>
|
|
</button>
|
|
<div class="jio-cover-menu__panel" role="menu" hidden>
|
|
<a role="menuitem" href="<?php echo esc_url(jio_get_user_home_url()); ?>"><i class="fa fas fa-home" aria-hidden="true"></i><?php esc_html_e('我的主页', 'jio'); ?></a>
|
|
<?php if ($allow_bg_upload) : ?>
|
|
<button type="button" role="menuitem" id="jio-upload-bg-btn"><i class="fa fas fa-image" aria-hidden="true"></i><span><?php esc_html_e('修改背景图', 'jio'); ?></span></button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<?php if ($allow_bg_upload) : ?><input type="file" id="jio-bg-file-input" accept="image/jpeg,image/png,image/webp,image/gif" hidden><?php endif; ?>
|
|
</div>
|
|
<div class="uc-header__content">
|
|
<div class="uc-header__avatar">
|
|
<?php echo jio_get_avatar_html($user_id, 120, ['id' => 'jio-user-avatar-image', 'alt' => $target_user->display_name, 'loading' => 'eager']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
|
<?php if ($show_avatar_edit) : ?>
|
|
<button type="button" id="jio-upload-avatar-btn" class="uc-header__avatar-upload" title="<?php esc_attr_e('更换头像', 'jio'); ?>" aria-label="<?php esc_attr_e('更换头像', 'jio'); ?>">
|
|
<i class="fa fas fa-camera" aria-hidden="true"></i>
|
|
<span><?php esc_html_e('更换头像', 'jio'); ?></span>
|
|
</button>
|
|
<input type="file" id="jio-avatar-file-input" accept="image/jpeg,image/png,image/webp,image/gif" hidden>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="uc-header__info">
|
|
<h1 class="uc-header__name">
|
|
<?php echo esc_html($target_user->display_name); ?>
|
|
<?php if (function_exists('jio_render_user_identity_chips')) : ?>
|
|
<?php echo jio_render_user_identity_chips((int) $user_id, 'author', ['include_vip' => true, 'skip_badges' => true]); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
|
<?php endif; ?>
|
|
</h1>
|
|
<div class="uc-header__meta desc user-identity flex ac hh">
|
|
<?php
|
|
// 治理状态入口：用户中心「封禁」元信息，
|
|
// 点击打开查看禁封状态弹窗 → 申诉弹窗。
|
|
if (function_exists('jio_get_user_ban_info_link')) {
|
|
echo jio_get_user_ban_info_link((int) $user_id); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- helper escapes internally.
|
|
}
|
|
?>
|
|
<?php if (function_exists('jio_render_user_medal_entry')) : ?>
|
|
<?php echo jio_render_user_medal_entry((int) $user_id, 'user-center', true); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
|
<?php endif; ?>
|
|
<span class="uc-header__meta-item but" data-clipboard-tag="<?php esc_attr_e('用户名', 'jio'); ?>" data-clipboard-text="<?php echo esc_attr($target_user->user_login); ?>" title="<?php esc_attr_e('点击复制用户名', 'jio'); ?>">
|
|
<i class="fa far fa-user" aria-hidden="true"></i><?php echo esc_html($target_user->user_login); ?>
|
|
</span>
|
|
<?php if ($target_user->user_email) : ?>
|
|
<span class="uc-header__meta-item but" data-clipboard-tag="<?php esc_attr_e('邮箱', 'jio'); ?>" data-clipboard-text="<?php echo esc_attr($target_user->user_email); ?>" title="<?php esc_attr_e('点击复制邮箱', 'jio'); ?>">
|
|
<i class="fa far fa-envelope" aria-hidden="true"></i><?php echo esc_html($target_user->user_email); ?>
|
|
</span>
|
|
<?php endif; ?>
|
|
<?php
|
|
// IP 归属地由扩展设置统一控制。
|
|
$uc_city = function_exists('jio_get_user_city_badge_html')
|
|
? jio_get_user_city_badge_html((int) $user_id, 'user_center', 'badg')
|
|
: '';
|
|
if ($uc_city !== '') {
|
|
echo $uc_city; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<div class="uc-header__actions">
|
|
<?php if (!empty($signin_enabled)) : ?>
|
|
<span data-jio-signin>
|
|
<?php if (!empty($signin_signed_today)) : ?>
|
|
<?php echo jio_get_user_checkin_details_link('btn btn-sm uc-header__signin-btn is-done', '<i class="fa fas fa-calendar-check" aria-hidden="true"></i><span>' . esc_html__('已签到', 'jio') . '</span>'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
|
<?php else : ?>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm uc-header__signin-btn"
|
|
data-signin-btn
|
|
data-signin-done-label="<?php esc_attr_e('已签到', 'jio'); ?>"
|
|
>
|
|
<i class="fa fas fa-calendar-check" aria-hidden="true"></i>
|
|
<span data-signin-label><?php esc_html_e('签到', 'jio'); ?></span>
|
|
</button>
|
|
<?php endif; ?>
|
|
</span>
|
|
<?php endif; ?>
|
|
<?php if (!empty($messages_url)) : ?>
|
|
<a href="<?php echo esc_url($messages_url); ?>" class="btn-ghost btn-sm btn-icon uc-header__message-btn" aria-label="<?php esc_attr_e('消息通知', 'jio'); ?>" title="<?php esc_attr_e('消息通知', 'jio'); ?>">
|
|
<i class="fa fas fa-bell" aria-hidden="true"></i>
|
|
<?php if ($notification_unread_count > 0) : ?>
|
|
<span class="uc-header__action-badge"><?php echo esc_html((string) $notification_unread_count); ?></span>
|
|
<?php endif; ?>
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|