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

<view class="container">
  <!-- 意境感加载页 -->
  <view class="loading-container {{isLoading ? 'visible' : ''}}">
    <view class="loading-content">
      <view class="loading-circle"></view>
      <text class="loading-text">{{loadingQuote}}</text>
      <text class="loading-subtext">见素正在感悟...</text>
    </view>
  </view>

  <!-- 顶部标题 -->
  <view class="header" wx:if="{{!isLoading}}">
    <view class="back-btn" bindtap="onBack">←</view>
    <view class="header-title">见素 · {{modeName}} · {{keyword}}</view>
    <view class="header-spacer"></view>
  </view>

  <view class="card-stack" wx:if="{{!isLoading && nameList.length > 0}}">
    <view
      class="card-container"
      style="transform: translateX({{translateX}}px) rotate({{rotate}}deg); transition: {{transition}};"
      bindtouchstart="onTouchStart"
      bindtouchmove="onTouchMove"
      bindtouchend="onTouchEnd"
      bindtransitionend="onTransitionEnd"
    >
      <view class="card {{isFlipped ? 'flipped' : ''}}">
         <!-- 正面：名字与诗词 -->
        <view class="card-face front" bindtap="onFlip">
          <text class="name">{{nameList[currentIndex].name}}</text>
          <view class="poem-container">
            <text class="poem">{{nameList[currentIndex].origin}}</text>
          </view>
        </view>
        <!-- 反面：故事化解读 -->
        <view class="card-face back" bindtap="onFlip">
          <view class="desc-container">
            <text class="desc">{{nameList[currentIndex].description}}</text>
          </view>
          <view class="analysis-container">
            <view class="tone-tag">声韵：{{nameList[currentIndex].tone}}</view>
            <view class="score-tag">见素评分：{{nameList[currentIndex].score}}</view>
            <view class="save-btn" catchtap="onSavePoster">
              <text class="save-icon">＋</text>
              <text>存为海报</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 海报生成区域 (使用 snapshot 组件) -->
  <view class="poster-modal {{showPoster ? 'visible' : ''}}" bindtap="closePoster">
    <view class="poster-content" catchtap="preventBubble">
      <view class="poster-close" bindtap="closePoster">×</view>
      
      <!-- snapshot 目标区域 -->
      <view class="poster-capture-area" id="posterArea">
        <view class="poster-bg">
          <!-- 大字竖排 -->
          <view class="poster-name-vertical">
            <text wx:for="{{posterNameChars}}" wx:key="index">{{item}}</text>
          </view>
          
          <!-- 出处 -->
          <view class="poster-origin">{{nameList[currentIndex].origin}}</view>
          
          <!-- 印章 -->
          <view class="poster-seal">见素</view>
          
          <!-- 底部信息 -->
          <view class="poster-footer">
            <view class="poster-desc">{{nameList[currentIndex].description}}</view>
            <view class="poster-qrcode">
              <text class="qrcode-text">扫码起名</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="poster-actions">
        <view class="poster-btn save-btn" bindtap="savePoster">
          <text>保存到相册</text>
        </view>
        <view class="poster-btn share-btn" bindtap="sharePoster">
          <text>分享给好友</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 底部操作栏 -->
  <view class="action-bar" wx:if="{{!isLoading && nameList.length > 0}}">
    <view class="action-btn dislike-btn" bindtap="onDislike">
      <text class="action-icon">×</text>
    </view>
    <view class="action-btn like-btn" bindtap="onLike">
      <text class="action-icon">♥</text>
    </view>
  </view>

  <!-- 空状态 -->
  <view class="empty-state" wx:if="{{!isLoading && nameList.length === 0}}">
    <text>暂无灵感，请重试</text>
    <button bindtap="onLoad" style="margin-top: 20px; font-weight: 300;">重新感悟</button>
  </view>

  <!-- 收藏锦囊 -->
  <view class="collection-bag" bindtap="toggleCollectionView">
    <text class="bag-icon">囊</text>
    <view class="collection-count">{{collectedNames.length}}</view>
  </view>

  <!-- 收藏列表浮层 -->
  <view class="collection-overlay {{showCollection ? 'visible' : ''}}" bindtap="toggleCollectionView">
    <view class="collection-content" catchtap>
      <view class="collection-title">见素锦囊</view>
      <scroll-view scroll-y class="collection-scroll">
        <view class="collection-item" wx:for="{{collectedNames}}" wx:key="name">
          <view>
            <view class="item-name">{{item.name}}</view>
            <view class="item-origin">{{item.origin}}</view>
          </view>
          <view class="delete-btn" data-name="{{item.name}}" catchtap="onDeleteCollected">×</view>
        </view>
        <view wx:if="{{collectedNames.length === 0}}" class="collection-empty">
          锦囊空空，静待灵感。
        </view>
      </scroll-view>
    </view>
  </view>
</view>