Mini-Program/pages/chat/index.wxml

<view class="chat-container">
  <!-- 左侧聊天列表 -->
  <view class="chat-list">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input 
        type="text" 
        placeholder="搜索聊天" 
        class="search-input" 
        value="{{searchKeyword}}"
        bindinput="onSearchInput"
      />
    </view>
    
    <!-- 刷新提示条 -->
    <view wx:if="{{isRefreshing || refreshingMessage}}" class="refresh-tip">
      <view class="refresh-spinner"></view>
      <text class="refresh-text">{{refreshingMessage || '正在刷新...'}}</text>
    </view>
    
    <!-- 聊天列表 -->
    <scroll-view 
      scroll-y="true" 
      scroll-x="false" 
      class="chat-scroll-view"
      refresher-enabled="{{true}}"
      refresher-triggered="{{isRefreshing}}"
      refresher-default-style="black"
      refresher-background="transparent"
      bindrefresherrefresh="onPullDownRefresh"
      bindrefresherrestore="onRestore"
    >
      <view 
        wx:for="{{filteredChatList}}" 
        wx:key="id" 
        class="chat-item" 
        data-id="{{item.id}}"
        data-index="{{index}}"
        bindtap="onChatItemTap"
        bindlongpress="onChatItemLongPress"
      >
        <!-- 头像 -->
        <view class="avatar-container">
          <image src="{{item.avatar}}" class="avatar" mode="aspectFill" />
          <view wx:if="{{item.unread}}" class="unread-dot"></view>
        </view>
        
        <!-- 聊天信息 -->
        <view class="chat-info">
          <view class="chat-header">
            <text class="name">{{item.name}}</text>
            <text class="time">{{item.time}}</text>
          </view>
          <view class="chat-content">
            <text class="last-message">{{item.content}}</text>
          </view>
        </view>
      </view>
      
      <!-- 无聊天记录时显示 -->
      <view wx:if="{{chatList.length === 0}}" class="empty-state">
        <text class="empty-text">暂无聊天记录</text>
      </view>
    </scroll-view>
  </view>
</view>