sundynix-plant-mp/pages/wiki/identify/index.wxml

<!--pages/wiki/identify/index.wxml-->
<view class="identify-page">

  <!-- Loading State -->
  <view wx:if="{{isLoading}}" class="state-container">
    <view class="state-card">
      <view class="loading-image-wrap">
        <image src="{{imagePath}}" mode="aspectFill" class="loading-preview" bindtap="previewImage" />
        <view class="scan-line"></view>
      </view>
      <view class="loading-info">
        <view class="loading-dots">
          <view class="dot dot1"></view>
          <view class="dot dot2"></view>
          <view class="dot dot3"></view>
        </view>
        <text class="state-title">正在识别中...</text>
        <text class="state-hint">AI 正在分析植物特征</text>
      </view>
    </view>
  </view>

  <!-- Error State -->
  <view wx:elif="{{hasError}}" class="state-container">
    <view class="state-card">
      <view class="error-icon-wrap">
        <t-icon name="close-circle" size="96rpx" color="#EF5350" />
      </view>
      <text class="state-title">识别失败</text>
      <text class="state-hint">请检查网络连接后重试</text>
      <view class="state-actions">
        <view class="action-btn primary" bindtap="handleRetry">
          <t-icon name="refresh" size="32rpx" color="#fff" />
          <text>重新识别</text>
        </view>
        <view class="action-btn outline" bindtap="handleReselect">
          <t-icon name="arrow-left" size="32rpx" color="#558B2F" />
          <text>返回重选</text>
        </view>
      </view>
    </view>
  </view>

  <!-- Results State -->
  <scroll-view wx:else scroll-y class="results-scroll" enhanced show-scrollbar="{{false}}">
    
    <!-- Hero Section: Image + Top Result -->
    <view class="hero-section">
      <image src="{{imagePath}}" mode="aspectFill" class="hero-image" bindtap="previewImage" />
      <view class="hero-gradient"></view>
      
      <view wx:if="{{topResult}}" class="hero-overlay">
        <view class="hero-badge">
          <t-icon name="check-circle" size="28rpx" color="#fff" />
          <text>匹配度 {{topResult.percent}}%</text>
        </view>
        <text class="hero-plant-name">{{topResult.name}}</text>
      </view>
    </view>

    <!-- Top Result Detail Card -->
    <view wx:if="{{topResult}}" class="detail-card-wrapper">
      <view class="detail-card">
        <view class="detail-card-header">
          <view class="result-rank best">1</view>
          <view class="result-name-area">
            <text class="result-main-name">{{topResult.name}}</text>
            <text class="confidence-text">置信度 {{topResult.percent}}%</text>
          </view>
        </view>

        <!-- Confidence Bar -->
        <view class="confidence-bar-wrap">
          <view class="confidence-bar-bg">
            <view class="confidence-bar-fill" style="width: {{topResult.percent}}%;"></view>
          </view>
        </view>

        <text wx:if="{{topResult.description}}" class="result-description">{{topResult.description}}</text>
        
        <view class="detail-card-actions">
          <view class="action-btn primary" bindtap="searchInWiki" data-name="{{topResult.name}}">
            <t-icon name="search" size="32rpx" color="#fff" />
            <text>在百科中搜索</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Other Results -->
    <view wx:if="{{results.length > 1}}" class="other-section">
      <text class="section-title">其他可能的结果</text>
      <view class="other-list">
        <view 
          wx:for="{{results}}" 
          wx:key="index" 
          wx:if="{{index > 0}}" 
          class="other-item"
          bindtap="searchInWiki"
          data-name="{{item.name}}"
        >
          <view class="result-rank normal">{{index + 1}}</view>
          <view class="other-item-info">
            <text class="other-item-name">{{item.name}}</text>
            <view class="mini-bar-wrap">
              <view class="mini-bar-bg">
                <view class="mini-bar-fill" style="width: {{item.percent > 1 ? item.percent : 1}}%;"></view>
              </view>
              <text class="mini-bar-text">{{item.percent}}%</text>
            </view>
          </view>
          <t-icon name="chevron-right" size="36rpx" color="#D1D5DB" />
        </view>
      </view>
    </view>

    <!-- Bottom Actions -->
    <view class="bottom-section">
      <view class="action-btn outline full" bindtap="handleReselect">
        <t-icon name="refresh" size="32rpx" color="#558B2F" />
        <text>重新识别</text>
      </view>
    </view>

    <view style="height: 80rpx;"></view>
  </scroll-view>
</view>