<view class="custom-tab-bar">
  <view class="bar-row">
    <!-- 左侧椭圆身份按钮 -->
    <view class="role-switch-btn" catchtap="toggleRolePicker">
      <image class="role-switch-icon" src="/images/role-switch.png" mode="aspectFit" />
      <text class="role-switch-text">切换身份</text>
    </view>
    
    <!-- 右侧纯黑闪光胶囊 -->
    <view class="tab-capsule">
      <block wx:for="{{tabList}}" wx:key="index">
        <view class="tab-item {{selectedIndex === index ? 'active' : ''}}"
              data-path="{{item.pagePath}}"
              data-index="{{index}}"
              catchtap="switchTab">
          <!-- 🔥 根据页面路径判断是否显示角标，不再写死 index -->
          <view class="badge-container" wx:if="{{item.pagePath === 'pages/xiaoxi/xiaoxi' && badgeText}}">
            <view class="tab-badge">{{badgeText}}</view>
          </view>
          <image class="tab-icon" src="{{selectedIndex === index ? item.selectedIconPath : item.iconPath}}" mode="aspectFit" />
          <text class="tab-text">{{item.text}}</text>
        </view>
      </block>
    </view>
  </view>

  <!-- 身份选择弹窗 -->
  <view wx:if="{{showRolePicker}}" class="picker-mask" catchtap="toggleRolePicker"></view>
  <view wx:if="{{showRolePicker}}" class="picker-panel">
    <view class="picker-header">
      <text class="picker-title">切换身份</text>
      <text class="picker-close" catchtap="toggleRolePicker">✕</text>
    </view>
    <block wx:for="{{availableRoles}}" wx:key="key">
      <view class="role-option {{currentRole === item.key ? 'active' : ''}}"
            data-role="{{item.key}}" catchtap="selectRole">
        <text>{{item.name}}</text>
        <text wx:if="{{currentRole === item.key}}" class="check-mark">✓</text>
      </view>
    </block>
  </view>
</view>