sundynix-plant-mp/pages/community/index.wxml

<wxs src="../../utils/tools.wxs" module="tools" />
<view class="community-page">
  <!-- Header with User Info -->
  <view class="community-header">
    <view class="user-info">
      <image class="header-avatar" src="{{userInfo.avatar && userInfo.avatar.url ? userInfo.avatar.url : userInfo.avatar}}" mode="aspectFill" />
      <text class="user-name">{{userInfo.nickname || userInfo.name || '花友'}}</text>
    </view>
  </view>

  <!-- Posts Feed -->
  <scroll-view 
    scroll-y 
    class="moments-feed" 
    enhanced="{{true}}" 
    show-scrollbar="{{false}}"
    bindtap="hideActionPopup"
  >
    <block wx:if="{{displayedPosts.length > 0}}">
      <view wx:for="{{displayedPosts}}" wx:key="id" class="moment-post">
        <!-- Avatar -->
        <view class="post-avatar">
            <image class="avatar-square" src="{{item.avatar}}" mode="aspectFill" />
        </view>

        <!-- Content -->
        <view class="post-content">
          <text class="post-user-name">{{item.user}}</text>
          <text class="post-text">{{item.content}}</text>

          <!-- Image Grid -->
          <view wx:if="{{item.images && item.images.length > 0}}" class="post-images-grid grid-{{item.images.length === 1 ? '1' : (item.images.length === 2 || item.images.length === 4 ? '2' : '3')}}">
            <view wx:for="{{item.images}}" wx:for-item="img" wx:key="*this" class="post-image-item" catchtap="previewImage" data-url="{{img}}" data-urls="{{item.images}}">
              <image 
                src="{{img}}" 
                mode="aspectFill" 
                style="width: 100%; height: 100%; display: block;"
                lazy-load
              />
            </view>
          </view>

          <!-- Meta: Time + Action -->
          <view class="post-meta">
            <text class="post-time">{{item.time}}</text>
            
            <!-- Action Button & Popup Container -->
            <view class="action-container">
              <!-- WeChat Style Popup -->
              <view class="action-popup {{activePostId === item.id ? 'show' : ''}}" catchtap="stopPropagation">
                <view class="popup-btn like-btn" catchtap="likePost" data-id="{{item.id}}">
                  <t-icon name="heart" size="32rpx" color="#fff" />
                  <text>{{item.likedByMe ? '取消' : '赞'}}</text>
                </view>
                <view class="popup-divider"></view>
                <view class="popup-btn comment-btn" catchtap="showCommentInput" data-id="{{item.id}}">
                  <t-icon name="chat" size="32rpx" color="#fff" />
                  <text>评论</text>
                </view>
              </view>
              
              <!-- Trigger Button -->
              <view class="action-btn" catchtap="toggleActionPopup" data-id="{{item.id}}">
                <view class="action-dot"></view>
                <view class="action-dot"></view>
              </view>
            </view>
          </view>

          <!-- Likes & Comments Box -->
          <view wx:if="{{item.likes.length > 0 || item.comments.length > 0}}" class="likes-comments-box">
            <!-- Likes -->
            <view wx:if="{{item.likes.length > 0}}" class="likes-section">
              <t-icon name="heart-filled" size="28rpx" color="#FA5151" />
              <view class="likes-list">
                <text wx:for="{{item.likes}}" wx:for-item="liker" wx:key="*this" class="like-name">{{liker}}{{index < item.likes.length - 1 ? '，' : ''}}</text>
              </view>
            </view>

            <!-- Divider -->
            <view wx:if="{{item.likes.length > 0 && item.comments.length > 0}}" class="divider"></view>

            <!-- Comments -->
            <view wx:if="{{item.comments.length > 0}}" class="comments-section">
              <view 
                wx:for="{{item.comments}}" 
                wx:for-item="comment" 
                wx:key="id" 
                class="comment-item"
                wx:if="{{index < 3 || item.isExpanded}}"
              >
                <text class="comment-user">{{comment.user}}：</text>
                <text class="comment-content">{{comment.content}}</text>
              </view>
              
              <!-- Expand/Collapse Button -->
              <view 
                wx:if="{{item.comments.length > 3}}" 
                class="comment-expand-btn" 
                catchtap="toggleCommentExpand" 
                data-id="{{item.id}}"
              >
                <text>{{item.isExpanded ? '收起' : '展开更多'}}</text>
              </view>
            </view>
          </view>

        </view>
      </view>
    </block>

    <!-- Empty State -->
    <view wx:else class="empty-feed">
      <view class="empty-icon">
        <t-icon name="chat" size="80rpx" color="#ccc" />
      </view>
      <text class="empty-text">暂无相关动态</text>
      <text class="empty-hint">快来发布第一条动态吧</text>
    </view>
    
    <!-- Bottom Spacer -->
    <view style="height: 160rpx;"></view>
  </scroll-view>

  <!-- Floating Action Button -->
  <view class="floating-add-btn" bindtap="goToCreatePost">
    <t-icon name="add" size="40rpx" color="#FFF" />
    <text>发布动态</text>
  </view>

  <!-- Comment Input Mask -->
  <view 
    class="comment-input-mask" 
    wx:if="{{showCommentBar}}" 
    bindtap="hideCommentBar"
    catchtouchmove="stopPropagation"
  ></view>

  <!-- Comment Input Bar (WeChat Style) -->
  <view class="comment-input-bar {{showCommentBar ? 'show' : ''}}">
    <view class="comment-input-content">
      <input 
        class="comment-input" 
        placeholder="评论..." 
        value="{{commentText}}"
        bindinput="onCommentInput"
        bindconfirm="submitComment"
        focus="{{showCommentBar}}"
        confirm-type="send"
        adjust-position="{{true}}"
        cursor-spacing="20"
      />
      <view class="send-btn {{commentText ? 'active' : ''}}" bindtap="submitComment">
        <text>发送</text>
      </view>
    </view>
  </view>
</view>