VIP 徽标改到姓名右侧，头图高度按实测重新校准

1. VIP 徽标位置
   原先绝对定位贴在头像右下角，会盖住头像边缘。
   改为放在姓名右侧同一行：姓名 span 用 truncate、徽标 shrink-0，
   长姓名被截断时徽标仍完整显示，不会被挤压。

2. 头图（顶部绿色背景）高度
   按需求应为「达到购买按钮一半的位置，上方全是背景」。
   基于真实结构（hero 内无可见内容，仅绝对定位装饰）重建等价 DOM 实测：
     空 hero + pb-16 + 卡片 -mt-11
     → hero 底部 Y=78、按钮中线 Y=78，差值 0px，切入卡片 50.0%
   即渐变边界正好落在「兑换 CDK」按钮中线，符合要求，故维持
   pb-16 / -mt-11 不变（上一版实测同样为 50.0%，本次复核确认）。

已截图确认徽标与姓名同行渲染正常（长姓名截断、徽标完整）。
npm run build 与 vue-tsc 均通过。

frondend/src/views/profile/ProfileView.vue

@@ -482,11 +482,13 @@ async function handleRedeemInvite() {
               <img v-show="userInfo?.avatar && !avatarFailed" :src="userInfo?.avatar" class="w-full h-full object-cover" alt="头像" @error="avatarFailed = true" />
               <span v-if="!userInfo?.avatar || avatarFailed" class="text-base font-bold" :class="isVip ? 'text-amber-800' : 'text-brand-700'">{{ userInfo?.realName?.[0] || userInfo?.username?.[0] || '?' }}</span>
             </div>
-            <div v-if="isVip" class="vip-badge absolute -right-1.5 -bottom-1 z-10 whitespace-nowrap">VIP</div>
           </div>
           <div class="min-w-0 flex-1">
             <!-- 姓名 + 会员身份 -->
-            <p class="member-title text-base font-bold tracking-tight truncate">{{ userInfo?.realName || userInfo?.username || '--' }}</p>
+            <p class="member-title text-base font-bold tracking-tight flex items-center gap-1.5 min-w-0">
+              <span class="truncate">{{ userInfo?.realName || userInfo?.username || '--' }}</span>
+              <span v-if="isVip" class="vip-badge relative shrink-0 whitespace-nowrap">VIP</span>
+            </p>
             <p class="member-sub text-xs mt-0.5 truncate">
               <template v-if="isVip">{{ vipExpireShort ? `有效期至 ${vipExpireShort}` : '会员生效中' }}<template v-if="vipDaysLeft !== null"> · 剩 {{ vipDaysLeft }} 天</template></template>
               <template v-else>开通 VIP 即可不限次数</template>