JianSu-Naming/miniprogram/pages/square/square.wxml

<!-- 灵感广场页面 - 瀑布流展示 -->
<view class="square-container">
  <!-- 顶部导航 -->
  <view class="header">
    <view class="title">灵感广场</view>
    <view class="subtitle">发现诗意，共鸣美好</view>
  </view>
  
  <!-- 筛选标签 -->
  <scroll-view class="tag-bar" scroll-x>
    <view class="tag-list">
      <view class="tag {{currentTag === '' ? 'active' : ''}}" bindtap="onTagTap" data-tag="">全部</view>
      <view class="tag {{currentTag === '清冷' ? 'active' : ''}}" bindtap="onTagTap" data-tag="清冷">清冷</view>
      <view class="tag {{currentTag === '温柔' ? 'active' : ''}}" bindtap="onTagTap" data-tag="温柔">温柔</view>
      <view class="tag {{currentTag === '古雅' ? 'active' : ''}}" bindtap="onTagTap" data-tag="古雅">古雅</view>
      <view class="tag {{currentTag === '诗意' ? 'active' : ''}}" bindtap="onTagTap" data-tag="诗意">诗意</view>
      <view class="tag {{currentTag === '自然' ? 'active' : ''}}" bindtap="onTagTap" data-tag="自然">自然</view>
    </view>
  </scroll-view>
  
  <!-- 排序切换 -->
  <view class="sort-bar">
    <view class="sort-item {{sortType === 'latest' ? 'active' : ''}}" bindtap="onSortTap" data-type="latest">最新</view>
    <view class="sort-item {{sortType === 'hot' ? 'active' : ''}}" bindtap="onSortTap" data-type="hot">热门</view>
  </view>
  
  <!-- 瀑布流列表 -->
  <view class="waterfall">
    <view class="column left">
      <view class="post-card" 
            wx:for="{{leftPosts}}" 
            wx:key="id"
            bindtap="onPostTap"
            data-post="{{item}}">
        <image class="post-image"
                 src="{{item.imageUrl}}"
                 mode="widthFix"
                 lazy-load
                 show-menu-by-longpress
                 wx:if="{{item.imageUrl}}"/>
          <view class="post-image-placeholder" wx:if="{{!item.imageUrl}}">
            <text class="placeholder-text">{{item.name}}</text>
          </view>
        <view class="post-info">
          <view class="post-name">{{item.name}}</view>
          <view class="post-origin" wx:if="{{item.origin}}">{{item.origin}}</view>
          <view class="post-footer">
            <view class="post-keyword" wx:if="{{item.keyword}}">#{{item.keyword}}</view>
            <view class="post-likes">
              <text class="like-icon">♡</text>
              <text class="like-count">{{item.likeCount || 0}}</text>
            </view>
          </view>
        </view>
        <!-- 同款跳转按钮 -->
        <view class="copy-btn" 
              catchtap="onCopyTap"
              data-keyword="{{item.keyword}}"
              data-mode="{{item.mode}}">
          <text>同款意境</text>
        </view>
      </view>
    </view>
    
    <view class="column right">
      <view class="post-card" 
            wx:for="{{rightPosts}}" 
            wx:key="id"
            bindtap="onPostTap"
            data-post="{{item}}">
        <image class="post-image"
               src="{{item.imageUrl}}"
               mode="widthFix"
               lazy-load
               show-menu-by-longpress
               wx:if="{{item.imageUrl}}"/>
        <view class="post-image-placeholder" wx:if="{{!item.imageUrl}}">
          <text class="placeholder-text">{{item.name}}</text>
        </view>
        <view class="post-info">
          <view class="post-name">{{item.name}}</view>
          <view class="post-origin" wx:if="{{item.origin}}">{{item.origin}}</view>
          <view class="post-footer">
            <view class="post-keyword" wx:if="{{item.keyword}}">#{{item.keyword}}</view>
            <view class="post-likes">
              <text class="like-icon">♡</text>
              <text class="like-count">{{item.likeCount || 0}}</text>
            </view>
          </view>
        </view>
        <!-- 同款跳转按钮 -->
        <view class="copy-btn" 
              catchtap="onCopyTap"
              data-keyword="{{item.keyword}}"
              data-mode="{{item.mode}}">
          <text>同款意境</text>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 加载更多 -->
  <view class="load-more" wx:if="{{loading}}">
    <view class="loading-dots">
      <view class="dot"></view>
      <view class="dot"></view>
      <view class="dot"></view>
    </view>
  </view>
  
  <view class="no-more" wx:if="{{!hasMore && posts.length > 0}}">
    <text>没有更多了</text>
  </view>
  
  <view class="empty" wx:if="{{!loading && posts.length === 0}}">
    <text class="empty-icon">✿</text>
    <text class="empty-text">暂无灵感，快去生成并分享吧</text>
  </view>
</view>

<!-- 帖子详情弹窗 -->
<view class="detail-mask {{showDetail ? 'show' : ''}}" bindtap="onCloseDetail">
  <view class="detail-container {{showDetail ? 'show' : ''}}" catchtap="onDetailTap">
    <image class="detail-image" src="{{selectedPost.imageUrl}}" mode="widthFix"/>
    <view class="detail-info">
      <view class="detail-name">{{selectedPost.name}}</view>
      <view class="detail-origin" wx:if="{{selectedPost.origin}}">{{selectedPost.origin}}</view>
      <view class="detail-desc" wx:if="{{selectedPost.description}}">{{selectedPost.description}}</view>
      <view class="detail-actions">
        <view class="action-btn like" bindtap="onLikeTap">
          <text class="action-icon">♡</text>
          <text class="action-text">共鸣 {{selectedPost.likeCount || 0}}</text>
        </view>
        <view class="action-btn copy" bindtap="onDetailCopyTap">
          <text class="action-text">同款意境</text>
        </view>
      </view>
    </view>
    <view class="detail-close" bindtap="onCloseDetail">×</view>
  </view>
</view>