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) translateY({{translateY}}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">
          <!-- 音符按钮 -->
          <view class="music-btn {{currentAmbience !== 'silent' ? 'active' : ''}}" catchtap="onMusicTap">♪</view>
          <!-- 音频菜单 -->
          <view class="music-menu {{showMusicMenu ? 'show' : ''}}" catchtap="onMenuTap">
            <view class="menu-item {{currentAmbience === 'silent' ? 'active' : ''}}" data-type="silent" catchtap="onAmbienceChange">
              <text class="menu-icon">🔇</text>
              <text class="menu-text">静音</text>
            </view>
            <view class="menu-item {{currentAmbience === 'wind' ? 'active' : ''}}" data-type="wind" catchtap="onAmbienceChange">
              <text class="menu-icon">🎐</text>
              <text class="menu-text">风铃</text>
            </view>
            <view class="menu-item {{currentAmbience === 'rain' ? 'active' : ''}}" data-type="rain" catchtap="onAmbienceChange">
              <text class="menu-icon">🌧</text>
              <text class="menu-text">雨落</text>
            </view>
            <view class="menu-item {{currentAmbience === 'guqin' ? 'active' : ''}}" data-type="guqin" catchtap="onAmbienceChange">
              <text class="menu-icon">🎵</text>
              <text class="menu-text">古琴</text>
            </view>
            <view class="menu-item {{currentAmbience === 'white' ? 'active' : ''}}" data-type="white" catchtap="onAmbienceChange">
              <text class="menu-icon">🌫</text>
              <text class="menu-text">白噪音</text>
            </view>
            <view class="menu-item {{currentAmbience === 'forest' ? 'active' : ''}}" data-type="forest" catchtap="onAmbienceChange">
              <text class="menu-icon">🌲</text>
              <text class="menu-text">森林</text>
            </view>
            <view class="menu-item {{currentAmbience === 'stream' ? 'active' : ''}}" data-type="stream" catchtap="onAmbienceChange">
              <text class="menu-icon">💧</text>
              <text class="menu-text">溪流</text>
            </view>
          </view>
          <text class="name" bindlongpress="onNameLongPress">{{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="ai-btn" catchtap="onAskAI">
              <text class="ai-icon">✦</text>
              <text>问问 AI</text>
            </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 square-btn" bindtap="shareToSquare">
          <text>分享到广场</text>
        </view>
        <view class="poster-btn share-btn" bindtap="sharePoster">
          <text>分享给好友</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 结语卡片：灵感耗尽或加载失败时显示 -->
  <view class="ending-card {{showEndingCard ? 'show' : ''}}" wx:if="{{showEndingCard}}">
    <view class="ending-ink"></view>
    <text class="ending-hint">此间灵感暂歇</text>
    <text class="ending-subhint">或寻他处，或待重来</text>
    <view class="ending-actions">
      <view class="ending-btn square-btn" bindtap="onGoToSquare">
        <text>进入灵感广场</text>
      </view>
      <view class="ending-btn back-btn" bindtap="onBack">
        <text>返回重试</text>
      </view>
    </view>
  </view>

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

  <!-- 空状态：和结语卡片样式一致 -->
  <view class="ending-card {{!isLoading && nameList.length === 0 ? 'show' : ''}}" wx:if="{{!isLoading && nameList.length === 0}}">
    <view class="ending-ink"></view>
    <text class="ending-hint">此间灵感暂歇</text>
    <text class="ending-subhint">或寻他处，或待重来</text>
    <view class="ending-actions">
      <view class="ending-btn square-btn" bindtap="onGoToSquare">
        <text>进入灵感广场</text>
      </view>
      <view class="ending-btn back-btn" bindtap="onBack">
        <text>返回重试</text>
      </view>
    </view>
  </view>

  <!-- 收藏锦囊：始终显示 -->
  <view class="collection-bag" bindtap="toggleCollectionView">
    <text class="bag-icon">囊</text>
    <view class="collection-count" wx:if="{{collectedNames.length > 0}}">{{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 class="char-detail-modal {{showCharDetail ? 'visible' : ''}}" bindtap="closeCharDetail">
    <view class="char-detail-content" catchtap="preventBubble">
      <view class="char-detail-close" bindtap="closeCharDetail">×</view>
      
      <!-- 磨砂玻璃背景 -->
      <view class="char-detail-glass"></view>

      <!-- 篆书背景装饰 -->
      <view class="char-seal-bg">
        <text class="seal-char seal-1">{{selectedChar}}</text>
        <text class="seal-char seal-2">{{selectedChar}}</text>
        <text class="seal-char seal-3">{{selectedChar}}</text>
      </view>

      <!-- 大字展示 -->
      <view class="char-display">
        <text class="char-big">{{selectedChar}}</text>
        <text class="char-pinyin" wx:if="{{charDetailData}}">{{charDetailData.pinyin}}</text>
      </view>
      
      <!-- 字源信息 -->
      <scroll-view class="char-info-scroll" scroll-y wx:if="{{charDetailData}}">
        <!-- 基础信息 -->
        <view class="char-info-section">
          <view class="char-info-item">
            <text class="char-label">部首</text>
            <text class="char-value">{{charDetailData.radical || '未知'}}</text>
          </view>
          <view class="char-info-item">
            <text class="char-label">笔画</text>
            <text class="char-value">{{charDetailData.strokes || '未知'}}画</text>
          </view>
          <view class="char-info-item">
            <text class="char-label">五行</text>
            <text class="char-value">{{charDetailData.wuxing || '未知'}}</text>
          </view>
        </view>
        
        <!-- 本义 -->
        <view class="char-section">
          <view class="char-section-title">本义</view>
          <text class="char-section-text">{{charDetailData.meaning || '暂无解析'}}</text>
        </view>
        
        <!-- 起名意象 -->
        <view class="char-section">
          <view class="char-section-title">起名意象</view>
          <text class="char-section-text">{{charDetailData.imagery || '暂无解析'}}</text>
        </view>
        
        <!-- 诗词典故 -->
        <view class="char-section" wx:if="{{charDetailData.poetry}}">
          <view class="char-section-title">诗词典故</view>
          <text class="char-section-text poetry">{{charDetailData.poetry}}</text>
        </view>
      </scroll-view>

      <!-- 加载中 -->
      <view class="char-loading" wx:if="{{!charDetailData}}">
        <text>正在溯源...</text>
      </view>
    </view>
  </view>

  <!-- 问问 AI 弹窗 -->
  <view class="ai-modal {{showAIModal ? 'show' : ''}}" bindtap="closeAIModal">
    <view class="ai-modal-content" catchtap="preventBubble">
      <!-- 磨砂玻璃背景 -->
      <view class="ai-modal-glass"></view>

      <!-- 关闭按钮 -->
      <view class="ai-modal-close" bindtap="closeAIModal">×</view>

      <!-- 标题 -->
      <view class="ai-modal-header">
        <text class="ai-modal-title">AI 深度解析</text>
        <text class="ai-modal-subtitle">{{nameList[currentIndex].name}}</text>
      </view>

      <!-- 输入框 -->
      <view class="ai-input-section">
        <text class="ai-input-label">你想了解这个名字在什么场景下的暗示？</text>
        <input class="ai-context-input" placeholder="例如：从事艺术行业、出国留学、创业..." value="{{aiContext}}" bindinput="onAIContextInput" />
      </view>

      <!-- 解析结果 -->
      <scroll-view class="ai-result-scroll" scroll-y wx:if="{{aiExplanation}}">
        <text class="ai-explanation">{{aiExplanation}}</text>
      </scroll-view>

      <!-- 加载中 -->
      <view class="ai-loading" wx:if="{{aiLoading}}">
        <text>正在思考...</text>
      </view>

      <!-- 操作按钮 -->
      <view class="ai-actions" wx:if="{{!aiLoading}}">
        <view class="ai-action-btn" bindtap="requestAIExplanation">
          <text>{{aiExplanation ? '重新解析' : '开始解析'}}</text>
        </view>
      </view>
    </view>
  </view>
</view>