<!-- 个人中心 - 全新极简温暖主题 -->
<view class="profile-page">
  
  <!-- 沉浸式头部区域 -->
  <view class="header-section">
    <!-- 装饰背景 -->
    <view class="header-bg-shape"></view>
    
    <!-- 用户信息块 -->
    <view class="user-info-box">
      <view class="avatar-container">
        <image wx:if="{{userInfo && userInfo.avatarId}}" src="{{userInfo.avatar.url || ''}}" class="avatar-img" mode="aspectFill" />
        <text wx:else class="avatar-emoji">😊</text>
      </view>
      
      <view class="user-details">
        <view class="name-line">
          <text class="user-name">{{userInfo.nickName || userInfo.name || '你好，收听者'}}</text>
          <view wx:if="{{isVip}}" class="vip-badge">
            <text class="vip-badge-icon">👑</text>
            <text class="vip-badge-text">VIP会员</text>
          </view>
        </view>
        <text class="user-id">今日也要元气满满哦</text>
      </view>
    </view>
  </view>

  <!-- 内容区 -->
  <view class="content-section">
    
    <!-- VIP 专属引导卡片 (若未开通) -->
    <view wx:if="{{!isVip}}" class="vip-promo-card tap-active" bindtap="onMenuTap" data-id="vip">
      <view class="promo-left">
        <text class="promo-icon">✨</text>
        <view class="promo-text">
          <text class="promo-title">开通全频道会员</text>
          <text class="promo-desc">畅听无阻 · 专属标识 · 尊贵体验</text>
        </view>
      </view>
      <view class="promo-right">
        <text class="promo-btn">立即开通</text>
      </view>
    </view>

    <!-- 菜单列表卡片 -->
    <view class="menu-list-card">
      <view
        wx:for="{{menuItems}}"
        wx:key="id"
        class="menu-row tap-active"
        bindtap="onMenuTap"
        data-id="{{item.id}}"
      >
        <view class="menu-left">
          <view class="menu-icon-box {{item.id === 'vip' ? 'is-vip-icon' : ''}}">
            <text class="menu-emoji">{{item.icon}}</text>
          </view>
          <text class="menu-title">{{item.label}}</text>
        </view>
        <view class="menu-right">
          <text class="menu-status {{item.highlight ? 'highlight-text' : ''}}">{{item.desc}}</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>

  </view>

  <!-- 底部留白以防遮挡播放器 -->
  <view class="bottom-spacer"></view>
  <global-player />
</view>
