miniprogramme/pages/social/friends/friends.wxml

<!-- 好友页面 - 简洁现代设计 -->
<view class="friends-container">
  
  <!-- 导航栏 -->
  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <view class="nav-left">
        <text class="nav-title">好友</text>
        <text class="nav-subtitle">{{totalFriendsCount}} 位联系人</text>
      </view>
      <view class="nav-actions">
        
        <view class="nav-btn" bindtap="addFriend">
          <text class="nav-icon">➕</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view class="content-area" scroll-y="true" style="top: {{navBarHeight}}px;">
    
    <!-- 搜索栏 -->
    <view class="search-section" wx:if="{{searchKeyword}}">
      <view class="search-bar">
        <input class="search-input"
               placeholder="搜索好友"
               value="{{searchKeyword}}"
               bindinput="onSearchInput"
               bindconfirm="clearSearch" />
        <view class="search-clear" bindtap="clearSearch">
          <text class="clear-icon">✕</text>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="function-section">
      <view class="function-item" bindtap="openNewFriends">
        <view class="function-icon new-friends">
          <text class="icon-text">👥</text>
          <view class="badge" wx:if="{{newFriendRequests > 0}}">{{newFriendRequests}}</view>
        </view>
        <view class="function-info">
          <text class="function-title">新的朋友</text>
          <text class="function-desc" wx:if="{{newFriendRequests > 0}}">{{newFriendRequests}} 个新请求</text>
          <text class="function-desc" wx:else>暂无新请求</text>
        </view>
        <text class="function-arrow">›</text>
      </view>
      
      <view class="function-item" bindtap="openGroupChats">
        <view class="function-icon groups">
          <text class="icon-text">👨‍👩‍👧‍👦</text>
        </view>
        <view class="function-info">
          <text class="function-title">群聊</text>
          <text class="function-desc">查看群聊列表</text>
        </view>
        <text class="function-arrow">›</text>
      </view>
    </view>

    <!-- 好友列表 -->
    <view class="friends-section" wx:if="{{filteredFriends.length > 0}}">
      <view class="section-header">
        <text class="section-title">联系人</text>
      </view>
      
      <view class="friends-list">
        <view class="friend-item"
              wx:for="{{filteredFriends}}"
              wx:key="customId"
              bindtap="openFriendProfile"
              data-friend="{{item}}">
          
          <!-- 头像 -->
          <view class="friend-avatar">
            <image wx:if="{{item.avatar}}"
                   src="{{item.avatar}}"
                   class="avatar-img"
                   mode="aspectFill" />
            <view wx:else class="avatar-placeholder">
              <text class="avatar-text">{{item.nickname.charAt(0)}}</text>
            </view>
            <view class="online-dot {{item.isOnline ? 'online' : ''}}"></view>
          </view>
          
          <!-- 信息 -->
          <view class="friend-info">
            <text class="friend-name">{{item.remark || item.nickname}}</text>
            <text class="friend-status">{{item.personalSignature || (item.isOnline ? '在线' : '离线')}}</text>
          </view>
          
          <!-- 操作按钮 -->
          <view class="friend-actions">
            <view class="action-btn" bindtap="sendMessage" data-friend="{{item}}">
              <text class="action-icon">💬</text>
            </view>
            <view class="action-btn" bindtap="videoCall" data-friend="{{item}}">
              <text class="action-icon">📹</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{!loading && filteredFriends.length === 0}}">
      <view class="empty-icon">👥</view>
      <text class="empty-title">还没有好友</text>
      <text class="empty-desc">点击右上角 ➕ 添加好友</text>
      <view class="empty-btn" bindtap="addFriend">
        <text class="btn-text">添加好友</text>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" wx:if="{{loading}}">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

  </scroll-view>
</view>