PetCommunity/miniprogram/pages/profile/profile.wxml

<view class="profile-page">
  <!-- 状态栏占位 -->
  <view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>

  <!-- 主导航栏：与胶囊等高，右侧避让胶囊，放置设置按钮 -->
  <view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
    <view class="navbar-title">我的</view>
    <view class="settings-btn" bindtap="onSettings">⚙️</view>
  </view>

  <scroll-view
    scroll-y="true"
    class="profile-scroll"
    enhanced="true"
    show-scrollbar="false"
    refresher-enabled="true"
    bindrefresherrefresh="onRefresh"
    refresher-triggered="{{refreshing}}"
  >
    <!-- 用户信息区（移除原来的 header-topbar，已移至 navbar）-->
    <view class="profile-header">
      <view class="hero-blob hb1"></view>
      <view class="hero-blob hb2"></view>

      <!-- 头像 + 基本信息 -->
      <view class="user-top">
        <view class="user-avatar-wrap">
          <view class="user-avatar" style="background: {{avatarGradient}}">
            <text class="avatar-text">{{userInfo.nickName[0] || '?'}}</text>
          </view>
          <view class="avatar-edit" bindtap="onEditAvatar">✏️</view>
        </view>
        <view class="user-meta">
          <view class="user-name-row">
            <text class="user-name">{{userInfo.nickName}}</text>
          </view>
          <text class="user-handle">{{userInfo.handle || '@' + userInfo.openid.slice(0,8)}} · {{userInfo.location || '上海'}}</text>
          <text class="user-bio">{{userInfo.bio || '还没有介绍~'}}</text>
        </view>
        <view class="edit-profile-btn" bindtap="onEditProfile">编辑</view>
      </view>

      <!-- 数据统计 -->
      <view class="stats-row">
        <view class="stat-item" bindtap="onStatTap" data-type="posts">
          <text class="stat-num">{{userInfo.stats.posts || 0}}</text>
          <text class="stat-label">动态</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item" bindtap="onStatTap" data-type="following">
          <text class="stat-num">{{userInfo.stats.friends || 0}}</text>
          <text class="stat-label">汪友</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item" bindtap="onStatTap" data-type="likes">
          <text class="stat-num">{{formattedLikes}}</text>
          <text class="stat-label">获赞</text>
        </view>
      </view>
    </view>

    <!-- 宠物档案卡 -->
    <view class="section-wrap">
      <view class="section-header">
        <text class="section-title">我的宝贝</text>
        <view class="add-pet-btn" bindtap="onAddPet">+ 添加</view>
      </view>

      <!-- 宠物卡片横滑 -->
      <scroll-view scroll-x="true" enhanced="true" show-scrollbar="false" class="pets-scroll">
        <view
          wx:for="{{userInfo.pets}}"
          wx:key="_id"
          class="pet-card"
          bindtap="onPetTap"
          data-pid="{{item._id}}"
        >
          <view class="pet-avatar" style="background: {{item.gradient || 'linear-gradient(135deg, #c9f7df, #d9d2ff)'}}">
            <text class="pet-emoji">{{item.emoji || '🐾'}}</text>
          </view>
          <view class="pet-info">
            <text class="pet-name">{{item.name}}</text>
            <text class="pet-breed">{{item.breed}} · {{item.gender === 'female' ? '女生' : '男生'}} · {{item.age}}</text>
          </view>
          <view class="pet-badge">我的宝贝</view>
        </view>

        <!-- 空态时添加宠物 -->
        <view wx:if="{{userInfo.pets.length === 0}}" class="pet-card pet-card-empty" bindtap="onAddPet">
          <view class="pet-avatar pet-avatar-add">
            <text style="font-size: 48rpx;">+</text>
          </view>
          <view class="pet-info">
            <text class="pet-name">添加宠物</text>
            <text class="pet-breed">建立您的宠物档案</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 动态网格 / 列表切换 -->
    <view class="section-wrap">
      <view class="section-header">
        <text class="section-title">全部动态</text>
        <view class="view-toggle">
          <view class="toggle-item {{postView === 'grid' ? 'active' : ''}}" bindtap="setPostView" data-v="grid">▦</view>
          <view class="toggle-item {{postView === 'list' ? 'active' : ''}}" bindtap="setPostView" data-v="list">☰</view>
        </view>
      </view>

      <!-- 网格视图 -->
      <view wx:if="{{postView === 'grid'}}" class="post-grid">
        <view
          wx:for="{{posts}}"
          wx:key="_id"
          class="grid-item"
          bindtap="onGridItemTap"
          data-id="{{item._id}}"
        >
          <image
            wx:if="{{item.images && item.images.length > 0}}"
            class="grid-img"
            src="{{item.images[0]}}"
            mode="aspectFill"
            lazy-load="true"
          />
          <view wx:else class="grid-no-img">
            <text>{{item.content.slice(0, 20)}}</text>
          </view>
        </view>

        <!-- 空态 -->
        <view wx:if="{{posts.length === 0}}" class="grid-empty">
          <text class="empty-emoji">📸</text>
          <text class="empty-tip">还没有动态，去发一条吧</text>
          <view class="btn-primary post-btn" bindtap="onGoPost">发动态</view>
        </view>
      </view>

      <!-- 列表视图 -->
      <view wx:else>
        <post-card
          wx:for="{{posts}}"
          wx:key="_id"
          post="{{item}}"
        />
      </view>
    </view>

    <view style="height: {{tabBarHeight}}px"></view>
    <view class="safe-bottom"></view>
  </scroll-view>
</view>