soul/miniprogram/pages/match/match.wxml

<!--pages/match/match.wxml-->
<view class="container match-container page-transition">
  <!-- 星空背景效果 -->
  <canvas canvas-id="starCanvas" class="star-canvas"></canvas>
  
  <!-- 顶部标题 -->
  <view class="match-header">
    <view class="match-title gradient-text">寻找合作伙伴</view>
    <view class="match-subtitle">找到和你一起创业的灵魂</view>
  </view>

  <!-- 匹配状态区 -->
  <view class="match-status-area">
    <!-- 未匹配状态 -->
    <view class="match-idle" wx:if="{{!isMatching && !currentMatch}}">
      <!-- 中央大星球 -->
      <view class="center-planet" bindtap="startMatch">
        <view class="planet-gradient">
          <view class="planet-icon">
            <image class="icon-mic" src="/assets/icons/match.png" mode="aspectFit"></image>
          </view>
          <view class="planet-text">开始匹配</view>
          <view class="planet-subtitle">寻找合作伙伴</view>
        </view>
        <view class="planet-ring"></view>
      </view>

      <view class="match-tips">
        <view class="tip-item">💼 共同的创业方向</view>
        <view class="tip-item">💬 实时在线交流</view>
        <view class="tip-item">🎯 相似的商业洞察</view>
      </view>
    </view>

    <!-- 匹配中状态 -->
    <view class="match-loading" wx:if="{{isMatching}}">
      <view class="loading-planet">
        <image class="rotating-planet" src="/assets/images/planet-match.png" mode="aspectFit"></image>
        <view class="loading-rings">
          <view class="ring ring-1"></view>
          <view class="ring ring-2"></view>
          <view class="ring ring-3"></view>
        </view>
      </view>
      
      <view class="loading-text">正在寻找志同道合的书友...</view>
      <view class="loading-progress">已匹配 {{matchAttempts}} 次</view>

      <button class="btn-secondary cancel-btn" bindtap="cancelMatch">
        取消匹配
      </button>
    </view>

    <!-- 匹配成功状态 -->
    <view class="match-success" wx:if="{{currentMatch && !isMatching}}">
      <view class="success-animation">
        <view class="success-icon">✨</view>
      </view>

      <view class="match-user-card card">
        <image 
          class="user-avatar" 
          src="{{currentMatch.avatar}}" 
          mode="aspectFill"
        ></image>
        
        <view class="user-info">
          <view class="user-name">{{currentMatch.nickname}}</view>
          <view class="user-tags">
            <text class="tag" wx:for="{{currentMatch.tags}}" wx:key="*this">
              {{item}}
            </text>
          </view>
        </view>

        <view class="match-score">
          <view class="score-label">匹配度</view>
          <view class="score-value">{{currentMatch.matchScore}}%</view>
        </view>
      </view>

      <!-- 共同兴趣 -->
      <view class="common-interests card">
        <view class="interests-title">共同兴趣</view>
        <view class="interests-list">
          <view class="interest-item" wx:for="{{currentMatch.commonInterests}}" wx:key="*this">
            <text class="interest-icon">{{item.icon}}</text>
            <text class="interest-text">{{item.text}}</text>
          </view>
        </view>
      </view>

      <!-- 核心理念 -->
      <view class="core-concept card">
        <view class="concept-title">核心理念</view>
        <view class="concept-text">{{currentMatch.concept || '一个坚持长期主义的私域玩家，擅长内容结构化。'}}</view>
      </view>

      <!-- 操作按钮 -->
      <view class="match-actions">
        <button class="btn-primary action-btn" bindtap="addWechat">
          <text class="btn-icon">➕</text>
          <text>一键加好友</text>
        </button>
        <button class="btn-primary action-btn" bindtap="joinGroup">
          <text class="btn-icon">👥</text>
          <text>加入书友群</text>
        </button>
      </view>
      
      <button class="btn-secondary next-btn" bindtap="nextMatch">
        🔄 不喜欢？重新匹配
      </button>
    </view>
  </view>

  <!-- 最近匹配记录 -->
  <view class="recent-matches" wx:if="{{recentMatches.length > 0 && !isMatching}}">
    <view class="section-title">最近匹配</view>
    <scroll-view class="matches-scroll" scroll-x>
      <view class="match-item" wx:for="{{recentMatches}}" wx:key="id" bindtap="viewMatchDetail" data-id="{{item.id}}">
        <image class="match-avatar" src="{{item.avatar}}" mode="aspectFill"></image>
        <view class="match-name">{{item.nickname}}</view>
        <view class="match-time">{{item.matchTime}}</view>
      </view>
    </scroll-view>
  </view>
</view>