项目初始化

miniprogram/pages/chat/chat.wxml

@@ -0,0 +1,95 @@
+<view class="message-container">
+  <!-- 搜索栏 -->
+  <view class="search-bar">
+    <view class="search-input">
+      <icon type="search" size="16" color="#999"></icon>
+      <input placeholder="搜索聊天记录" placeholder-class="placeholder-style"/>
+    </view>
+  </view>
+
+  <!-- 消息列表 - 不按日期分组 -->
+  <scroll-view class="message-list" scroll-y>
+    <!-- 消息项1 - 个人聊天（有未读） -->
+    <view class="message-item" bindtap="goToChat">
+      <view class="avatar-container">
+        <image class="avatar" src="https://picsum.photos/id/64/200/200" mode="cover"></image>
+        <view class="unread-dot"></view>
+      </view>
+      <view class="message-content">
+        <view class="content-top">
+          <text class="username">王小明</text>
+          <text class="time">10:23</text>
+        </view>
+        <view class="content-bottom">
+          <text class="last-message">我们明天上午9点在公司楼下集合吧</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 消息项2 - 群聊 -->
+    <view class="message-item" bindtap="goToChat">
+      <view class="avatar-container">
+        <image class="avatar" src="https://picsum.photos/id/26/200/200" mode="cover"></image>
+      </view>
+      <view class="message-content">
+        <view class="content-top">
+          <text class="username">产品研发群</text>
+          <text class="time">昨天</text>
+        </view>
+        <view class="content-bottom">
+          <text class="last-message"><text class="sender">李设计</text>：新的UI稿已经上传到群文件了</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 消息项3 - 系统通知 -->
+    <view class="message-item" bindtap="goToChat">
+      <view class="avatar-container">
+        <image class="avatar" src="https://picsum.photos/id/91/200/200" mode="cover"></image>
+        <view class="unread-count">3</view>
+      </view>
+      <view class="message-content">
+        <view class="content-top">
+          <text class="username">系统通知</text>
+          <text class="time">周一</text>
+        </view>
+        <view class="content-bottom">
+          <text class="last-message">您有3条新的系统通知待查看</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 消息项4 - 个人聊天 -->
+    <view class="message-item" bindtap="goToChat">
+      <view class="avatar-container">
+        <image class="avatar" src="https://picsum.photos/id/65/200/200" mode="cover"></image>
+      </view>
+      <view class="message-content">
+        <view class="content-top">
+          <text class="username">张小红</text>
+          <text class="time">09-12</text>
+        </view>
+        <view class="content-bottom">
+          <text class="last-message">上次你说的那个电影资源能发我一下吗？</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 消息项5 - 服务号消息 -->
+    <view class="message-item" bindtap="goToChat">
+      <view class="avatar-container">
+        <image class="avatar" src="https://picsum.photos/id/62/200/200" mode="cover"></image>
+      </view>
+      <view class="message-content">
+        <view class="content-top">
+          <text class="username">生活服务号</text>
+          <text class="time">09-10</text>
+        </view>
+        <view class="content-bottom">
+          <text class="last-message">您订阅的服务已更新，点击查看详情</text>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</view>
+