miniprogramme/components/message-action-menu/message-action-menu.wxml

<!-- ✨ 消息操作菜单组件 -->
<view class="message-action-menu" wx:if="{{visible}}" bindtap="onMaskTap">
  <!-- 背景遮罩 -->
  <view class="menu-mask"></view>
  
  <!-- 菜单内容 -->
  <view class="menu-content" catchtap="stopPropagation">
    <!-- 表情回应区域 -->
    <view class="reactions-section" wx:if="{{showReactions}}">
      <view class="reactions-title">
        <text class="title-text">添加表情回应</text>
      </view>
      
      <view class="reactions-grid">
        <view class="reaction-item"
              wx:for="{{commonEmojis}}"
              wx:key="index"
              bindtap="onReactionTap"
              data-emoji="{{item}}">
          <text class="reaction-emoji">{{item}}</text>
        </view>
        
        <!-- 更多表情按钮 -->
        <view class="reaction-item more-emoji" bindtap="showMoreEmojis">
          <text class="more-icon">➕</text>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮区域 -->
    <view class="actions-section">
      <!-- 引用回复 -->
      <view class="action-item" 
            wx:if="{{actions.quote}}"
            bindtap="onActionTap"
            data-action="quote">
        <view class="action-icon">
          <text class="icon-text">💬</text>
        </view>
        <text class="action-text">引用</text>
      </view>
      
      <!-- 转发 -->
      <view class="action-item"
            wx:if="{{actions.forward}}"
            bindtap="onActionTap"
            data-action="forward">
        <view class="action-icon">
          <text class="icon-text">📤</text>
        </view>
        <text class="action-text">转发</text>
      </view>
      
      <!-- 收藏 -->
      <view class="action-item"
            wx:if="{{actions.favorite}}"
            bindtap="onActionTap"
            data-action="favorite">
        <view class="action-icon">
          <text class="icon-text">{{message.favorited ? '⭐' : '☆'}}</text>
        </view>
        <text class="action-text">{{message.favorited ? '取消收藏' : '收藏'}}</text>
      </view>
      
      <!-- 多选 -->
      <view class="action-item"
            wx:if="{{actions.multiSelect}}"
            bindtap="onActionTap"
            data-action="multiSelect">
        <view class="action-icon">
          <text class="icon-text">📋</text>
        </view>
        <text class="action-text">多选</text>
      </view>
      
      <!-- 复制 -->
      <view class="action-item"
            wx:if="{{actions.copy && message.msgType === 'text'}}"
            bindtap="onActionTap"
            data-action="copy">
        <view class="action-icon">
          <text class="icon-text">📄</text>
        </view>
        <text class="action-text">复制</text>
      </view>
      
      <!-- 撤回 -->
      <view class="action-item"
            wx:if="{{actions.recall && canRecall}}"
            bindtap="onActionTap"
            data-action="recall">
        <view class="action-icon">
          <text class="icon-text">🔄</text>
        </view>
        <text class="action-text">撤回</text>
      </view>
      
      <!-- 删除 -->
      <view class="action-item danger"
            wx:if="{{actions.delete}}"
            bindtap="onActionTap"
            data-action="delete">
        <view class="action-icon">
          <text class="icon-text">🗑️</text>
        </view>
        <text class="action-text">删除</text>
      </view>
      
      <!-- 举报 -->
      <view class="action-item danger"
            wx:if="{{actions.report && !isOwnMessage}}"
            bindtap="onActionTap"
            data-action="report">
        <view class="action-icon">
          <text class="icon-text">⚠️</text>
        </view>
        <text class="action-text">举报</text>
      </view>
    </view>
    
    <!-- 消息信息区域 -->
    <view class="message-info-section" wx:if="{{showMessageInfo}}">
      <view class="info-item">
        <text class="info-label">发送时间:</text>
        <text class="info-value">{{formatTime(message.timestamp)}}</text>
      </view>
      
      <view class="info-item" wx:if="{{message.editedAt}}">
        <text class="info-label">编辑时间:</text>
        <text class="info-value">{{formatTime(message.editedAt)}}</text>
      </view>
      
      <view class="info-item" wx:if="{{message.msgType !== 'text'}}">
        <text class="info-label">消息类型:</text>
        <text class="info-value">{{getMessageTypeText(message.msgType)}}</text>
      </view>
      
      <view class="info-item" wx:if="{{message.size}}">
        <text class="info-label">文件大小:</text>
        <text class="info-value">{{formatFileSize(message.size)}}</text>
      </view>
    </view>
  </view>
</view>

<!-- 表情选择器弹窗 -->
<view class="emoji-picker-modal" wx:if="{{showEmojiPicker}}" bindtap="closeEmojiPicker">
  <view class="emoji-picker-content" catchtap="stopPropagation">
    <view class="emoji-picker-header">
      <text class="picker-title">选择表情</text>
      <view class="close-btn" bindtap="closeEmojiPicker">
        <text class="close-icon">✕</text>
      </view>
    </view>
    
    <view class="emoji-categories">
      <view class="category-tab {{currentEmojiCategory === 'recent' ? 'active' : ''}}"
            bindtap="switchEmojiCategory"
            data-category="recent">
        <text class="tab-text">最近</text>
      </view>
      <view class="category-tab {{currentEmojiCategory === 'smileys' ? 'active' : ''}}"
            bindtap="switchEmojiCategory"
            data-category="smileys">
        <text class="tab-text">笑脸</text>
      </view>
      <view class="category-tab {{currentEmojiCategory === 'gestures' ? 'active' : ''}}"
            bindtap="switchEmojiCategory"
            data-category="gestures">
        <text class="tab-text">手势</text>
      </view>
      <view class="category-tab {{currentEmojiCategory === 'hearts' ? 'active' : ''}}"
            bindtap="switchEmojiCategory"
            data-category="hearts">
        <text class="tab-text">爱心</text>
      </view>
    </view>
    
    <scroll-view class="emoji-grid-container" scroll-y="true">
      <view class="emoji-grid">
        <view class="emoji-grid-item"
              wx:for="{{currentEmojiList}}"
              wx:key="index"
              bindtap="onEmojiSelect"
              data-emoji="{{item}}">
          <text class="grid-emoji">{{item}}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</view>