From 480a0bb4986783df22faa769b7caebc3739954a0 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Tue, 4 Aug 2026 18:34:28 +0800
Subject: [PATCH] refactor(vip): simplify user center membership summary

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>
---
 assets/css/routes/user-center.css             |  1 +
 assets/css/routes/user-center/vip.css         | 95 +++++++++++++++++++
 inc/helpers/user-center-renderers/vip-tab.php | 77 ++++-----------
 3 files changed, 117 insertions(+), 56 deletions(-)
 create mode 100644 assets/css/routes/user-center/vip.css

diff --git a/assets/css/routes/user-center.css b/assets/css/routes/user-center.css
index 62e4b3ea..eb7baa91 100644
--- a/assets/css/routes/user-center.css
+++ b/assets/css/routes/user-center.css
@@ -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");
diff --git a/assets/css/routes/user-center/vip.css b/assets/css/routes/user-center/vip.css
new file mode 100644
index 00000000..13105834
--- /dev/null
+++ b/assets/css/routes/user-center/vip.css
@@ -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;
+  }
+}
diff --git a/inc/helpers/user-center-renderers/vip-tab.php b/inc/helpers/user-center-renderers/vip-tab.php
index d8a09781..42019cbc 100644
--- a/inc/helpers/user-center-renderers/vip-tab.php
+++ b/inc/helpers/user-center-renderers/vip-tab.php
@@ -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">