cfc/cfc-frontend/pages/body-detail/health-report.vue

<template>
  <view class="report-container">
    <!-- 椤堕儴瀵艰埅 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">鈥?杩斿洖</text>
      <text class="nav-title">鍋ュ悍鎶ュ憡璇︽儏</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 鎶ュ憡澶撮儴 -->
    <view class="report-header" v-if="report">
      <view class="report-type-tag">{{ reportTypeLabel }}</view>
      <view class="report-scores">
        <view class="score-item">
          <view class="score-circle-lg">
            <text class="score-num">{{ report.overallScore || '--' }}</text>
            <text class="score-unit">鍒?/text>
          </view>
          <text class="score-label">缁煎悎璇勫垎</text>
        </view>
        <view class="score-item" v-if="report.gutHealthScore">
          <view class="score-circle-lg score-circle-green">
            <text class="score-num">{{ report.gutHealthScore }}</text>
            <text class="score-unit">鍒?/text>
          </view>
          <text class="score-label">鑲犻亾鍋ュ悍</text>
        </view>
      </view>
      <view class="report-info-row" v-if="report.gutAge || report.gutType">
        <text class="info-chip" v-if="report.gutAge">鑲犻亾骞撮緞锛歿{ report.gutAge }}</text>
        <text class="info-chip" v-if="report.gutType">鑲犻亾鍒嗗瀷锛歿{ report.gutType }}</text>
      </view>
      <text class="report-date">鎶ュ憡鏃ユ湡锛歿{ formatDate(report.reportDate) }}</text>
    </view>

    <!-- ===== 璇勫垎鍙��鍖栭潰鏉?(浠呰弻缇ゆ姤鍛? ===== -->
    <view class="score-dashboard" v-if="report && report.reportType === 'gut_flora'">
      <view class="main-scores">
        <view class="main-score-item" v-for="item in mainScores" :key="item.key">
          <view class="score-ring-wrap">
            <svg width="140" height="140" viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="50" fill="none" stroke="#EEEEEE" stroke-width="8"/>
              <circle cx="60" cy="60" r="50" fill="none" v-bind:stroke="item.color" stroke-width="8" v-bind:stroke-dasharray="item.circumference" v-bind:stroke-dashoffset="item.offset" stroke-linecap="round" transform="rotate(-90 60 60)"/>
              <text x="60" y="52" text-anchor="middle" font-size="32" font-weight="bold" fill="#333">{{ item.score }}</text>
              <text x="60" y="72" text-anchor="middle" font-size="14" fill="#999">鍒?/text>
            </svg>
          </view>
          <text class="main-score-label">{{ item.label }}</text>
        </view>
      </view>
      <view class="flora-score-row" v-if="hasFloraScores">
        <view class="flora-score-item" v-for="item in floraScores" :key="item.key">
          <view class="flora-score-circle" v-bind:style="{ background: item.color }">
            <text class="flora-score-num">{{ item.score }}</text>
          </view>
          <text class="flora-score-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 鎸囨爣鍒楄〃 -->
    <view class="section">
      <view class="section-title">
        <text>鎸囨爣鏄庣粏</text>
        <text class="section-sub">鍏?{{ indicators.length }} 椤?/text>
      </view>

      <!-- 鎸夊垎绫诲垎缁?-->
      <view class="category-group" v-for="group in groupedIndicators" :key="group.name">
        <view class="category-header">
          <text class="category-name">{{ group.name }}</text>
          <text class="category-count">{{ group.items.length }}椤?/text>
        </view>
        <view class="indicator-card" v-for="ind in group.items" :key="ind._idx">
          <view class="ind-header">
            <text class="ind-name">{{ ind.indicatorName }}</text>
            <view class="ind-status" :class="ind._cls">
              <text>{{ ind._label }}</text>
            </view>
          </view>
          <view class="ind-body">
            <view class="ind-value-wrap">
              <text class="ind-value">{{ ind.indicatorValue || '--' }}</text>
              <text class="ind-unit">{{ ind.unit || '' }}</text>
            </view>
            <text class="ind-ref">鍙傝€冨€硷細{{ ind.refRange || '鏆傛棤' }}</text>
          </view>
        </view>
      </view>

      <view class="empty-indicators" v-if="indicators.length === 0 && !loading">
        <text>鏆傛棤鎸囨爣鏁版嵁</text>
      </view>
    </view>

    <!-- ===== 钀ュ吇缂轰箯鍒嗘瀽 ===== -->
    <view class="section" v-if="deficiencyRecords && deficiencyRecords.length > 0">
      <view class="section-title">
        <text>馃敩 钀ュ吇缂轰箯鍒嗘瀽</text>
        <text class="section-sub">{{ deficiencyRecords.length }}椤?/text>
      </view>
      <view class="deficiency-list">
        <view class="deficiency-card" v-for="dr in deficiencyRecords" :key="dr.nutrient">
          <view class="deficiency-header">
            <text class="deficiency-nutrient">{{ dr.nutrient }}</text>
            <view class="deficiency-type-tag" :class="'dtype-' + dr.deficiencyType">
              <text>{{ dr.deficiencyTypeLabel }}</text>
            </view>
          </view>
          <view class="deficiency-severity-row">
            <view class="severity-bar">
              <view class="severity-fill" :style="{ width: (dr.severity * 100) + '%', background: dr.severityColor }"></view>
            </view>
            <text class="severity-val">{{ dr.severity }}</text>
          </view>
          <view class="deficiency-meta" v-if="dr.indicatorName">
            <text class="meta-label">鍏宠仈鎸囨爣锛?/text>
            <text class="meta-value">{{ dr.indicatorName }} ({{ dr.indicatorValue }})</text>
          </view>
          <view class="deficiency-foods" v-if="dr.foodSuggestions">
            <text class="foods-label">鎺ㄨ崘椋熺墿锛?/text>
            <text class="foods-value">{{ dr.foodSuggestions }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ===== 椋熸潗鎺ㄨ崘 ===== -->
    <view class="section" v-if="foods && foods.length > 0">
      <view class="section-title">
        <text>馃� 椋熸潗鎺ㄨ崘</text>
        <text class="section-sub">鍏?{{ foods.length }} 椤?/text>
      </view>
      <view class="food-list">
        <view class="food-card" v-for="food in foods" :key="food.id">
          <view class="food-header">
            <text class="food-name">{{ food.name }}</text>
            <view class="food-score" :class="food.scoreClass">
              <text>{{ food.score || '--' }}</text>
            </view>
          </view>
          <view class="food-meta" v-if="food.category">
            <text class="food-category">{{ food.category }}</text>
          </view>
          <view class="food-nutrition" v-if="food.energyKj || food.protein || food.fat || food.carbs">
            <view class="nutrition-item" v-if="food.energyKj">
              <text class="n-label">鑳介噺</text>
              <text class="n-value">{{ food.energyKj }} kJ</text>
            </view>
            <view class="nutrition-item" v-if="food.protein">
              <text class="n-label">铔嬬櫧璐?/text>
              <text class="n-value">{{ food.protein }}g</text>
            </view>
            <view class="nutrition-item" v-if="food.fat">
              <text class="n-label">鑴傝偑</text>
              <text class="n-value">{{ food.fat }}g</text>
            </view>
            <view class="nutrition-item" v-if="food.carbs">
              <text class="n-label">纰虫按</text>
              <text class="n-value">{{ food.carbs }}g</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- ===== 浜旂淮闆疯揪鍥?(鑿岀兢鎶ュ憡) ===== -->
    <view class="section" v-if="report && report.reportType === 'gut_flora' && radarDimensions.length > 0">
      <view class="section-title">
        <text>浜旂淮闆疯揪鍥?/text>
      </view>
      <view class="radar-wrap">
        <canvas canvas-id="radarCanvas" id="radarCanvas" class="radar-canvas" @touchstart.prevent></canvas>
      </view>
    </view>

    <!-- 搴曢儴鍗犱綅 -->
    <view class="bottom-spacer"></view>

    <!-- 钀ュ吇鍒嗘瀽鍏ュ彛鎸夐挳 -->
    <view class="nutrition-fab" @click="goNutritionChat" v-if="report">
      <text class="fab-icon">馃�</text>
      <text class="fab-text">绮惧噯钀ュ吇鍒嗘瀽</text>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'
import { getDeficiencyAnalysis } from '@/utils/api.js'

const healthRequest = function(url, data) {
  var token = uni.getStorageSync('token')
  return new Promise(function(resolve, reject) {
    uni.request({
      url: config.API_BASE_URL + url,
      method: 'POST',
      data: data,
      header: {
        'Content-Type': 'application/json',
        'Authorization': token ? 'Bearer ' + token : ''
      },
      success: function(res) {
        if (res.data.code === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: function(err) {
        reject(err)
      }
    })
  })
}

export default {
  data() {
    return {
      childId: null,
      reportId: null,
      report: null,
      reportDetail: null,
      indicators: [],
      deficiencyRecords: [],
      foods: [],
      loading: false
    }
  },
  computed: {
    reportTypeLabel: function() {
      if (!this.report) return ''
      return this.report.reportType === 'gut_flora' ? '鑲犻亾妫€娴嬫姤鍛? : '浣撴�鎶ュ憡'
    },
    // 棰勮�绠楀垎缁勶紝姣忎釜鎸囨爣闄勫姞 _cls (CSS绫? 鍜?_label (鏄剧ず鏍囩�)
    groupedIndicators: function() {
      var result = []
      var groupMap = {}
      var idx = 0
      for (var i = 0; i < this.indicators.length; i++) {
        var ind = this.indicators[i]
        var cat = ind.category || '鍏朵粬'
        // Compute status css class
        var cls = 'status-normal'
        var label = '姝ｅ父'
        var status = ind.status || ''
        var s = status.toLowerCase()
        if (s.indexOf('鍋忛珮') !== -1 || s.indexOf('杩囬珮') !== -1 || s.indexOf('concern') !== -1) {
          cls = 'status-warning'
          label = '鍋忛珮'
        } else if (s.indexOf('鍋忎綆') !== -1 || s.indexOf('杩囦綆') !== -1 || s.indexOf('娉ㄦ剰') !== -1 || s.indexOf('warning') !== -1) {
          cls = 'status-warn'
          label = '鍋忎綆'
        } else if (s.indexOf('姝ｅ父') !== -1 || s.indexOf('normal') !== -1 || s.indexOf('浣庨�闄?) !== -1) {
          cls = 'status-normal'
          label = '姝ｅ父'
        } else if (status) {
          label = status
        }
        ind._cls = cls
        ind._label = label
        ind._idx = idx
        idx++
        // Group
        if (!groupMap[cat]) {
          groupMap[cat] = { name: cat, items: [] }
          result.push(groupMap[cat])
        }
        groupMap[cat].items.push(ind)
      }
      return result
    },
    circumference: function() {
      return Math.round(2 * Math.PI * 50)
    },
    mainScores: function() {
      if (!this.report) return []
      var items = []
      var r = this.report
      var pairs = [
        {key:'overall', label:'缁煎悎璇勫垎', score: r.overallScore, color:'#5B9BD5'},
        {key:'gut', label:'鑲犻亾鍋ュ悍', score: r.gutHealthScore, color:'#4CAF50'},
        {key:'chronic', label:'鎱㈢梾鎺у埗', score: r.chronicDiseaseScore, color:'#FF9800'},
        {key:'nutrition', label:'钀ュ吇鍧囪　', score: r.nutritionScore, color:'#2196F3'}
      ]
      var circ = Math.round(2 * Math.PI * 50)
      for (var i = 0; i < pairs.length; i++) {
        var p = pairs[i]
        var s = p.score || 0
        items.push({key: p.key, label: p.label, score: s, color: p.color, circumference: circ, offset: Math.round(circ - (s / 100) * circ)})
      }
      return items
    },
    hasFloraScores: function() {
      if (!this.report) return false
      var r = this.report
      return (r.balanceScore != null) || (r.diversityScore != null) || (r.beneficialScore != null) || (r.harmfulScore != null) || (r.coreGenusScore != null)
    },
    floraScores: function() {
      if (!this.report) return []
      var r = this.report
      var items = []
      var pairs = [
        {key:'balance', label:'鑿岀兢骞宠　', score: r.balanceScore},
        {key:'diversity', label:'鑿岀兢澶氭牱鎬?, score: r.diversityScore},
        {key:'beneficial', label:'鏈夌泭鑿?, score: r.beneficialScore},
        {key:'harmful', label:'鏈夊�鑿?, score: r.harmfulScore},
        {key:'coreGenus', label:'鏍稿績鑿屽睘', score: r.coreGenusScore}
      ]
      for (var i = 0; i < pairs.length; i++) {
        var p = pairs[i]
        if (p.score != null) {
          var s = p.score
          var color = '#4CAF50'
          if (s < 30) { color = '#F44336' }
          else if (s < 60) { color = '#FFC107' }
          items.push({key: p.key, label: p.label, score: s, color: color})
        }
      }
      return items
    },
    radarDimensions: function() {
      if (!this.report) return []
      var r = this.report
      var dims = []
      if (r.overallScore != null) dims.push({ label: '缁煎悎', value: r.overallScore })
      if (r.gutHealthScore != null) dims.push({ label: '鑲犻亾', value: r.gutHealthScore })
      if (r.nutritionScore != null) dims.push({ label: '钀ュ吇', value: r.nutritionScore })
      if (r.chronicDiseaseScore != null) dims.push({ label: '鎱㈢梾', value: r.chronicDiseaseScore })
      if (r.gutBalanceScore != null) dims.push({ label: '鑿岀兢骞宠　', value: r.gutBalanceScore })
      return dims
    }
  },
  onLoad: function(options) {
    var childId = options.childId
    var reportId = options.reportId
    this.childId = childId ? parseInt(childId) : null
    this.reportId = reportId ? parseInt(reportId) : null
    // 濡傛灉娌℃湁浼?childId锛屽皾璇曚粠 storage 璇诲彇锛堝彲鑳芥槸瀹堕暱鑷�繁鐨勶級
    if (!this.childId) {
      var savedChildId = uni.getStorageSync('currentChildId')
      if (savedChildId) this.childId = parseInt(savedChildId)
    }
    this.loadData()
  },
  onReady: function() {
    if (this.radarDimensions.length >= 3) {
      this.drawRadarChart()
    }
  },
  methods: {
    loadData: function() {
      var self = this
      uni.showLoading({ title: '鍔犺浇涓?..' })
      // Load report + indicators in parallel
      var promises = []
      if (this.reportId) {
        promises.push(healthRequest('/api/health/report/latest', { childId: this.childId }))
        promises.push(healthRequest('/api/health/indicator/list', { reportId: this.reportId }))
      } else if (this.childId) {
        promises.push(healthRequest('/api/health/report/latest', { childId: this.childId }))
      }
      Promise.all(promises.map(function(p) {
        return p.catch(function(e) { return null })
      })).then(function(results) {
        uni.hideLoading()
        if (results[0] && results[0].data) {
          self.report = results[0].data
          self.reportId = self.report.id
          self.loadDeficiencyRecords()
          // Load indicators after getting reportId
          if (self.reportId) {
            healthRequest('/api/health/indicator/list', { reportId: self.reportId }).then(function(res) {
              if (res.data) {
                self.indicators = res.data
              }
            }).catch(function(e) {
              console.log('鑾峰彇鎸囨爣澶辫触', e)
            })
            healthRequest('/api/health/report/detail', { reportId: self.reportId }).then(function(res) {
              if (res.data) {
                self.reportDetail = res.data
              }
            }).catch(function(e) {
              console.log('鑾峰彇鎶ュ憡璇︽儏澶辫触', e)
            })
            healthRequest('/api/health/foods', { reportId: self.reportId }).then(function(res) {
              if (res.data) {
                self.foods = res.data.map(function(f) {
                  f.scoreClass = self.getFoodScoreClass(f.score)
                  return f
                })
              }
            }).catch(function(e) {
              console.log('鑾峰彇椋熸潗鎺ㄨ崘澶辫触', e)
            })
          }
        }
      }).catch(function(e) {
        uni.hideLoading()
        uni.showToast({ title: '鍔犺浇澶辫触', icon: 'none' })
      })
    },
    goBack: function() {
      uni.navigateBack()
    },
    goNutritionChat: function() {
      if (!this.reportId) return
      uni.navigateTo({
        url: '/pages/ai/chat?mode=nutrition&reportId=' + this.reportId + '&firstMessage=' + encodeURIComponent('璇锋牴鎹�繖浠借弻缇ゆ�娴嬫姤鍛婏紝鍒嗘瀽鎴戝�瀛愮殑钀ュ吇鐘跺喌骞舵彁鍑哄缓璁?)
      })
    },
    loadDeficiencyRecords: function() {
      if (!this.childId) return
      var self = this
      getDeficiencyAnalysis(this.childId).then(function(res) {
          if (res.code === 200 && res.data) {
          self.deficiencyRecords = res.data.map(function(dr) {
            dr.deficiencyTypeLabel = self.getDeficiencyTypeLabel(dr.deficiencyType)
            dr.severityColor = self.getSeverityColor(dr.severity)
            return dr
          })
        }
      }).catch(function(e) {
        console.log('鑾峰彇缂轰箯鍒嗘瀽澶辫触', e)
      })
    },
    getDeficiencyTypeLabel: function(type) {
      if (type === 'deficiency') return '缂轰箯'
      if (type === 'excess') return '鍋忛珮'
      if (type === 'borderline') return '杈圭晫鍊?
      return '鏈�垎绫?
    },
    getSeverityColor: function(severity) {
      if (severity >= 0.7) return '#EF4444'
      if (severity >= 0.3) return '#F59E0B'
      return '#10B981'
    },
    drawRadarChart: function() {
      var dims = this.radarDimensions
      if (!dims || dims.length < 3) return
      var ctx = uni.createCanvasContext('radarCanvas', this)
      var cw = 300
      var ch = 300
      var cx = cw / 2
      var cy = ch / 2
      var maxR = 110
      var n = dims.length
      var angleStep = (2 * Math.PI) / n

      for (var level = 1; level <= 5; level++) {
        var r = maxR * (level / 5)
        ctx.setStrokeStyle('#E5E7EB')
        ctx.setLineWidth(1)
        ctx.beginPath()
        for (var j = 0; j < n; j++) {
          var a = j * angleStep - Math.PI / 2
          var x = cx + r * Math.cos(a)
          var y = cy + r * Math.sin(a)
          if (j === 0) ctx.moveTo(x, y)
          else ctx.lineTo(x, y)
        }
        ctx.closePath()
        ctx.stroke()
      }

      for (var k = 0; k < n; k++) {
        var a2 = k * angleStep - Math.PI / 2
        ctx.beginPath()
        ctx.moveTo(cx, cy)
        ctx.lineTo(cx + maxR * Math.cos(a2), cy + maxR * Math.sin(a2))
        ctx.setStrokeStyle('#E5E7EB')
        ctx.setLineWidth(1)
        ctx.stroke()
      }

      ctx.beginPath()
      for (var m = 0; m < n; m++) {
        var angle = m * angleStep - Math.PI / 2
        var val = dims[m].value || 0
        var rr = maxR * (val / 100)
        var px = cx + rr * Math.cos(angle)
        var py = cy + rr * Math.sin(angle)
        if (m === 0) ctx.moveTo(px, py)
        else ctx.lineTo(px, py)
      }
      ctx.closePath()
      ctx.setFillStyle('rgba(249, 115, 22, 0.2)')
      ctx.fill()
      ctx.setStrokeStyle('#F97316')
      ctx.setLineWidth(2)
      ctx.stroke()

      for (var q = 0; q < n; q++) {
        var angle3 = q * angleStep - Math.PI / 2
        var lx = cx + (maxR + 20) * Math.cos(angle3)
        var ly = cy + (maxR + 20) * Math.sin(angle3)
        ctx.setFontSize(11)
        ctx.setFillStyle('#6B7280')
        ctx.setTextAlign('center')
        ctx.setTextBaseline('middle')
        ctx.fillText(dims[q].label + ' ' + (dims[q].value || '--'), lx, ly)
      }

      ctx.draw()
    },
    getFoodScoreClass: function(score) {
      if (score == null) return 'score-unknown'
      if (score >= 80) return 'score-high'
      if (score >= 60) return 'score-mid'
      return 'score-low'
    },
    formatDate: function(dateStr) {
      if (!dateStr) return '--'
      try {
        var d = new Date(dateStr)
        var y = d.getFullYear()
        var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
        var day = ('' + d.getDate()).padStart(2, '0')
        return y + '-' + m + '-' + day
      } catch (e) {
        return dateStr
      }
    }
  }
}
</script>

<style scoped>
.report-container {
  min-height: 100vh;
  background: #f5f7fa;
}

/* ===== 瀵艰埅鏍?===== */
.nav-bar {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  z-index: 100;
}
.nav-back {
  font-size: 32rpx;
  color: #5B9BD5;
}
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.nav-placeholder {
  width: 80rpx;
}

/* ===== 鎶ュ憡澶撮儴 ===== */
.report-header {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  padding: 30rpx 24rpx;
}
.report-type-tag {
  display: inline-block;
  background: #1565C0;
  color: #fff;
  font-size: 22rpx;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.report-scores {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}
.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 60rpx;
}
.score-circle-lg {
  width: 140rpx;
  height: 140rpx;
  border-radius: 70rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.score-circle-green {
  background: #E8F5E9;
}
.score-num {
  font-size: 48rpx;
  font-weight: bold;
  color: #1565C0;
}
.score-circle-green .score-num {
  color: #2E7D32;
}
.score-unit {
  font-size: 22rpx;
  color: #64B5F6;
}
.score-circle-green .score-unit {
  color: #81C784;
}
.score-label {
  font-size: 24rpx;
  color: #666;
}
.report-info-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 16rpx;
}
.info-chip {
  background: #fff;
  color: #333;
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  margin-right: 16rpx;
}
.report-date {
  font-size: 22rpx;
  color: #888;
}

/* ===== 鎸囨爣鏄庣粏 ===== */
.section {
  margin: 20rpx 30rpx;
}
.section-title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-sub {
  font-size: 22rpx;
  color: #999;
  font-weight: normal;
  margin-left: 12rpx;
}
.category-group {
  margin-bottom: 30rpx;
}
.category-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.category-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}
.category-count {
  font-size: 22rpx;
  color: #999;
}
.indicator-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.ind-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.ind-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.ind-status {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
}
.status-normal {
  background: #E8F5E9;
  color: #2E7D32;
}
.status-warning {
  background: #FFF3E0;
  color: #E65100;
}
.status-warn {
  background: #F3E5F5;
  color: #7B1FA2;
}
.ind-body {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}
.ind-value-wrap {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.ind-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #1565C0;
}
.ind-unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 8rpx;
}
.ind-ref {
  font-size: 22rpx;
  color: #bbb;
}
.empty-indicators {
  text-align: center;
  padding: 60rpx;
  color: #999;
  font-size: 28rpx;
}

/* ===== 搴曢儴 ===== */
.bottom-spacer {
  height: 130rpx;
}

/* ===== 钀ュ吇鍒嗘瀽鍏ュ彛 FAB ===== */
.nutrition-fab {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #43A047, #66BB6A);
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  box-shadow: 0 8rpx 24rpx rgba(67, 160, 71, 0.4);
  z-index: 200;
}

.fab-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.fab-text {
  font-size: 30rpx;
  font-weight: 600;
}

.score-dashboard {
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.main-scores {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.main-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
  width: 45%;
}
.score-ring-wrap {
  margin-bottom: 8rpx;
}
.main-score-label {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}
.flora-score-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 16rpx;
  padding-top: 20rpx;
  border-top: 2rpx solid #F0F0F0;
}
.flora-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flora-score-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.flora-score-num {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
}
.flora-score-label {
  font-size: 20rpx;
  color: #888;
}

/* ===== 钀ュ吇缂轰箯鍒嗘瀽 ===== */
.deficiency-list {
  display: flex;
  flex-direction: column;
}
.deficiency-card {
  background: #FAFAFA;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 12rpx;
}
.deficiency-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.deficiency-nutrient {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.deficiency-type-tag {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  background: #FFF3E0;
  color: #E65100;
}
.dtype-deficiency {
  background: #FEE2E2;
  color: #DC2626;
}
.dtype-excess {
  background: #FFF3E0;
  color: #E65100;
}
.dtype-borderline {
  background: #FEF3C7;
  color: #D97706;
}
.dtype-unclassified {
  background: #F3F4F6;
  color: #6B7280;
}
.deficiency-severity-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8rpx;
}
.severity-bar {
  flex: 1;
  height: 12rpx;
  background: #F3F4F6;
  border-radius: 6rpx;
  overflow: hidden;
  margin-right: 16rpx;
}
.severity-fill {
  height: 100%;
  border-radius: 6rpx;
}
.severity-val {
  font-size: 24rpx;
  color: #9CA3AF;
  width: 60rpx;
  text-align: right;
}
.deficiency-meta {
  font-size: 22rpx;
  color: #6B7280;
  margin-bottom: 6rpx;
}
.deficiency-foods {
  font-size: 22rpx;
  color: #374151;
  margin-top: 8rpx;
}
.foods-label {
  color: #9CA3AF;
}
.foods-value {
  color: #2E7D32;
}

/* ===== 闆疯揪鍥?===== */
.radar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.radar-canvas {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

/* ===== 椋熸潗鎺ㄨ崘 ===== */
.food-list {
  display: flex;
  flex-direction: column;
}
.food-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.food-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.food-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.food-score {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  font-weight: 600;
}
.score-high {
  background: #DCFCE7;
  color: #16A34A;
}
.score-mid {
  background: #FEF3C7;
  color: #D97706;
}
.score-low {
  background: #FEE2E2;
  color: #DC2626;
}
.score-unknown {
  background: #F3F4F6;
  color: #6B7280;
}
.food-meta {
  margin-bottom: 8rpx;
}
.food-category {
  font-size: 22rpx;
  color: #6B7280;
  background: #F3F4F6;
  padding: 2rpx 12rpx;
  border-radius: 12rpx;
}
.food-nutrition {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 8rpx;
}
.nutrition-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100rpx;
}
.n-label {
  font-size: 20rpx;
  color: #9CA3AF;
}
.n-value {
  font-size: 24rpx;
  color: #374151;
  font-weight: 500;
}
</style>