Initial Commit

pages/message/message.wxml

@@ -0,0 +1,108 @@
+<!--消息页面 - Telegram风格设计-->
+<view class="telegram-container {{themeClass}} {{isThemeTransitioning ? 'theme-transitioning' : ''}}">
+  <!-- 顶部导航 -->
+  <view class="telegram-header">
+    <view class="header-content">
+      <text class="header-title">消息</text>
+      <view class="header-actions">
+        <view class="header-btn" bindtap="showSearchBar"><text class="header-icon">🔍</text></view>
+  <view class="header-btn" bindtap="markAllRead"><text class="header-icon">✔️</text></view>
+        <view class="header-btn" bindtap="startNewChat"><text class="header-icon">➕</text></view>
+      </view>
+    </view>
+  </view>
+  <!-- 搜索栏 -->
+  <view class="search-section" wx:if="{{showSearch}}">
+    <view class="search-bar">
+      <text class="search-icon">🔍</text>
+      <input class="search-input"
+             placeholder="搜索聊天记录"
+             value="{{searchKeyword}}"
+             bindinput="onSearchInput"
+             focus="{{showSearch}}" />
+      <view class="search-cancel" bindtap="hideSearchBar">
+        <text class="cancel-text">取消</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- Telegram风格内容：始终展示会话列表（filteredConversations会随搜索实时过滤） -->
+  <scroll-view class="telegram-content" scroll-y="true"
+               refresher-enabled="true"
+               refresher-triggered="{{refreshing}}"
+               bindrefresherrefresh="onRefresh">
+    <view class="conversations-section">
+      <view class="conversation-item {{item.isPinned ? 'pinned' : ''}} {{item.isMuted ? 'muted' : ''}}"
+            wx:for="{{filteredConversations}}"
+            wx:key="conversationId"
+            bindtap="openChat"
+            bindlongtap="showConversationOptions"
+            data-conversation="{{item}}">
+
+        <!-- 头像 -->
+        <view class="conversation-avatar">
+          <image wx:if="{{item.avatar}}"
+                 src="{{item.avatar}}"
+                 class="avatar-image"
+                 mode="aspectFill" />
+          <view wx:else class="avatar-placeholder">
+            <text class="avatar-text">{{item.name.charAt(0)}}</text>
+          </view>
+
+      <!-- 在线状态角标（仅单聊显示） -->
+      <view wx:if="{{item.type === 'single' || item.chatType === 0}}"
+        class="presence-indicator {{item.isOnline ? 'online' : 'offline'}}"></view>
+
+          <!-- 未读消息徽章 -->
+          <view class="unread-badge" wx:if="{{item.unreadCount > 0}}">
+            <text class="unread-count">{{item.unreadCount > 99 ? '99+' : item.unreadCount}}</text>
+          </view>
+
+          <!-- 置顶标识 -->
+          <view class="pin-indicator" wx:if="{{item.isPinned}}">
+            <text class="pin-icon">📌</text>
+          </view>
+        </view>
+
+        <!-- 会话信息 -->
+        <view class="conversation-info">
+          <view class="conversation-header">
+            <text class="conversation-name">{{item.name}}</text>
+            <view class="conversation-meta">
+              <text class="conversation-time">{{item.lastMessageTime}}</text>
+              <text class="mute-icon" wx:if="{{item.isMuted}}">🔇</text>
+            </view>
+          </view>
+
+          <view class="conversation-preview">
+            <text class="last-message">{{item.lastMessage}}</text>
+            <view class="message-indicators">
+              <!-- 消息状态指示器 -->
+              <text class="status-indicator" wx:if="{{item.messageStatus === 'sent'}}">✓</text>
+              <text class="status-indicator read" wx:if="{{item.messageStatus === 'read'}}">✓✓</text>
+            </view>
+          </view>
+        </view>
+      </view>
+  </view>
+
+  <!-- 空状态 -->
+  <view class="empty-state" wx:if="{{!loading && filteredConversations.length === 0}}">
+      <text class="empty-icon">💬</text>
+      <text class="empty-title">暂无聊天</text>
+      <text class="empty-subtitle">开始一段新的对话吧</text>
+    </view>
+
+  </scroll-view>
+
+  <!-- 主题切换悬浮按钮 -->
+  <view class="theme-toggle" bindtap="toggleTheme" style="position:fixed; left:24rpx; top: {{statusBarHeight+20}}rpx; width:64rpx; height:64rpx; border-radius:32rpx; background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; z-index:800; color:var(--text-primary);">
+    <text>{{themeClass === 'theme-dark' ? '🌙' : '☀️'}}</text>
+  </view>
+
+  <!-- 主题切换径向遮罩动画 -->
+  <view wx:if="{{showThemeOverlay}}" class="theme-overlay">
+    <view class="theme-overlay-circle {{overlayPlaying ? 'play' : ''}}" style="width: {{overlayDiameter}}px; height: {{overlayDiameter}}px; left: {{overlayLeft}}px; top: {{overlayTop}}px;"></view>
+  </view>
+
+</view>