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">
      <view class="user-avatar">
        <text>我</text>
      </view>
      <text class="user-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">
          <view class="avatar-square">
            <text>{{item.user[0]}}</text>
          </view>
        </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.length > 0}}" class="post-images-grid grid-{{item.images.length === 1 ? '1' : (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="{{tools.resolvePath(img)}}" data-urls="{{item.images}}">
              <t-image 
                src="{{tools.resolvePath(img)}}" 
                mode="aspectFill" 
                width="100%" 
                height="100%" 
                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="#576b95" />
              <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">
                <text class="comment-user">{{comment.user}}：</text>
                <text class="comment-content">{{comment.content}}</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="fab" bindtap="goToCreatePost">
    <t-icon name="add" size="48rpx" color="#fff" />
  </view>

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