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

refactor(vip): simplify user center membership summary

Browse Source 
Remove profile identity chrome from the VIP header, keep the crown watermark, and flatten the summary into one thin card while preserving membership purchase cards.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522
2026-08-04 18:34:28 +08:00
co-authored by Claude Fable 5
parent 54e0ad4026
commit 480a0bb498
3 changed files with 117 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/user-center.css
+1
View File
@@ -1,5 +1,6 @@
@import url("user-center/shell.css");
@import url("user-center/credits.css");
@import url("user-center/vip.css");
@import url("user-center/level.css");
@import url("user-center/settings.css");
@import url("revenue.css");
assets/css/routes/user-center/vip.css
+95
View File
@@ -0,0 +1,95 @@
/**
* User Center — compact membership summary.
*
* The VIP tab keeps one thin status surface; personal profile chrome and
* decorative stacked-card layers belong to the user-center header, not here.
*/
.uc-vip-summary {
position: relative;
min-width: 0;
margin: 0 0 16px;
padding: 12px 16px;
overflow: hidden;
border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08));
border-radius: var(--main-radius, var(--radius, 8px));
background: var(--surface-1, #fff);
box-shadow: none;
isolation: isolate;
}
.uc-vip-summary__watermark {
position: absolute;
top: 50%;
right: -10px;
z-index: 0;
color: currentColor;
font-size: 160px;
line-height: 1;
opacity: 0.15;
pointer-events: none;
transform: translateY(-50%);
}
.uc-vip-summary__watermark i {
font-size: inherit;
line-height: 1;
}
.uc-vip-status {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
column-gap: 16px;
row-gap: 2px;
min-width: 0;
}
.uc-vip-status__label {
padding-top: 2px;
color: var(--muted-2-color, var(--color-ink-4));
font-size: 13px;
font-weight: 600;
line-height: 1.45;
white-space: nowrap;
}
.uc-vip-status__body {
min-width: 0;
}
.uc-vip-status__main {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.uc-vip-status__main > .em16 {
margin-right: 0;
font-size: 1.2em;
line-height: 1.25;
}
.uc-vip-status__desc {
margin-top: 3px;
line-height: 1.4;
}
@media (max-width: 767px) {
.uc-vip-summary {
padding: 10px 12px;
}
.uc-vip-summary__watermark {
font-size: 110px;
opacity: 0.12;
}
.uc-vip-status {
column-gap: 12px;
}
}
inc/helpers/user-center-renderers/vip-tab.php
+21 -56
View File
@@ -25,33 +25,6 @@ $expired_level = (int) get_user_meta($user_id, 'aksrt_vip_level_expired', true);
$levels = is_array($vip_settings['levels'] ?? null) ? $vip_settings['levels'] : [];
$desc_top = (string) ($vip_settings['desc'] ?? '');
$user = get_userdata($user_id);
$display = $user ? $user->display_name : '';
$user_bio = $user ? trim((string) $user->description) : '';
if ($user_bio === '') {
$user_bio = __('这家伙很懒，什么都没有写…', 'aksrt');
}
// Avatar: zibll avatar-img avatar-md (55px fixed box).
$avatar = get_avatar($user_id, 110, '', $display, ['class' => 'avatar']);
// Name row with identity chips (zibll zib_get_user_name parity).
$name_html = '';
if (function_exists('aksrt_get_user_name')) {
$name_html = aksrt_get_user_name([
'id' => $user_id,
'class' => 'flex1 flex ac',
'vip' => true,
'follow' => false,
]);
}
if ($name_html === '') {
$name_html = esc_html($display);
if (function_exists('aksrt_render_user_identity_chips')) {
$name_html .= aksrt_render_user_identity_chips($user_id, 'card');
}
}
// Status column (zibll my_vip_box).
$status_html = '';
$btn_type = 'pay';
@@ -68,48 +41,45 @@ if ($level > 0) {
. esc_html(sprintf(__('到期时间：%s', 'aksrt'), wp_date('Y年m月d日', $expires))) . '</span>';
$btn_type = 'renew_' . $level;
}
$status_html = '<div class="uc-vip-status flex xx gap6">'
. '<div class="em09 muted-2-color">' . esc_html__('我的会员', 'aksrt') . '</div>'
. '<div class="flex ac">'
$status_html = '<div class="uc-vip-status">'
. '<div class="uc-vip-status__label">' . esc_html__('我的会员', 'aksrt') . '</div>'
. '<div class="uc-vip-status__body">'
. '<div class="uc-vip-status__main flex ac">'
. '<div class="em16 mr10 flex ac"><i class="fas fa-crown" aria-hidden="true"></i><div class="font-bold ml6">' . esc_html($lv_name) . '</div></div>'
. $badge
. '</div>'
. '<div class="muted-color em09">' . esc_html($lv_desc !== '' ? $lv_desc : __('尊享专属特权', 'aksrt')) . '</div>'
. '<div class="uc-vip-status__desc muted-color em09">' . esc_html($lv_desc !== '' ? $lv_desc : __('尊享专属特权', 'aksrt')) . '</div>'
. '</div>'
. '</div>';
} elseif ($expired_level > 0) {
$exp_label = $expires > 0
? sprintf(__('过期时间：%s', 'aksrt'), wp_date('Y年m月d日', $expires))
: __('已过期', 'aksrt');
$status_html = '<div class="uc-vip-status flex xx gap6">'
. '<div class="em09 muted-2-color">' . esc_html__('当前会员状态', 'aksrt') . '</div>'
. '<div class="flex ac">'
$status_html = '<div class="uc-vip-status">'
. '<div class="uc-vip-status__label">' . esc_html__('我的会员', 'aksrt') . '</div>'
. '<div class="uc-vip-status__body">'
. '<div class="uc-vip-status__main flex ac">'
. '<div class="em16 c-red mr10">' . esc_html__('已过期', 'aksrt') . '</div>'
. '<div class="badg c-red em09"><i class="fas fa-clock mr3" aria-hidden="true"></i>' . esc_html($exp_label) . '</div>'
. '</div>'
. ($desc_top !== '' ? '<div class="muted-color em09">' . esc_html($desc_top) . '</div>' : '')
. ($desc_top !== '' ? '<div class="uc-vip-status__desc muted-color em09">' . esc_html($desc_top) . '</div>' : '')
. '</div>'
. '</div>';
$btn_type = 'pay';
} else {
// Never opened VIP — zibll: 当前会员状态 / 未开通会员 / desc.
$status_html = '<div class="uc-vip-status flex xx gap6">'
. '<div class="em09 muted-2-color">' . esc_html__('当前会员状态', 'aksrt') . '</div>'
. '<div class="flex ac">'
$status_html = '<div class="uc-vip-status">'
. '<div class="uc-vip-status__label">' . esc_html__('我的会员', 'aksrt') . '</div>'
. '<div class="uc-vip-status__body">'
. '<div class="uc-vip-status__main flex ac">'
. '<div class="em16 c-red mr10">' . esc_html__('未开通会员', 'aksrt') . '</div>'
. '</div>'
. '<div class="muted-color em09">' . esc_html($desc_top !== '' ? $desc_top : __('开通会员，尊享专属特权', 'aksrt')) . '</div>'
. '<div class="uc-vip-status__desc muted-color em09">' . esc_html($desc_top !== '' ? $desc_top : __('开通会员，尊享专属特权', 'aksrt')) . '</div>'
. '</div>'
. '</div>';
$btn_type = 'pay';
}
// Left user box (zibll user_box).
$user_box = '<div class="flex ac uc-vip-userbox">'
. '<div class="mr20 shrink0"><div class="avatar-img avatar-md">' . $avatar . '</div></div>'
. '<div class="flex1 min-w-0">'
. '<div class="name em12 font-bold">' . $name_html . '</div>'
. '<div class="desc em09 mt6 muted-2-color text-ellipsis">' . esc_html($user_bio) . '</div>'
. '</div>'
. '</div>';
// Level cards.
$cards = '';
foreach ([1, 2] as $lv) {
@@ -175,14 +145,9 @@ if ($level <= 0 && !empty($vip_settings['points_exchange']['enabled'])) {
}
?>
<div class="uc-vip-tab" data-aksrt-vip-tab>
<div class="zib-widget flex ac gap20 user-content-myvip overflow-hidden">
<div class="vip-img abs-right" aria-hidden="true"><i class="fas fa-crown"></i></div>
<div class="flex2 hide-sm uc-vip-profile">
<?php echo $user_box; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<div class="flex4 uc-vip-state">
<?php echo $status_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<div class="uc-vip-summary" data-aksrt-vip-summary>
<div class="uc-vip-summary__watermark" aria-hidden="true"><i class="fas fa-crown"></i></div>
<?php echo $status_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<div class="uc-vip-level-cards">