cfc/cfc-frontend/pages/health/report-upload.vue

<template>
  <view class="upload-container">
    <!-- 说明提示 -->
    <view class="tip-banner">
      <text class="tip-icon">📋</text>
      <text class="tip-text">{{ tipText }}</text>
    </view>

    <!-- 成员归属（统一上传：后台按指纹自动识别报告类型，需指定成员以正确归属） -->
    <view class="form-section">
      <view class="member-box">
        <text class="form-label">报告属于哪位成员</text>
        <view class="member-list" v-if="familyMembers.length > 0">
          <view
            class="member-item"
            v-for="(member, mIdx) in familyMembers"
            :key="getMemberKey(member)"
            :class="member._selected ? 'member-selected' : ''"
            hover-class="member-hover"
            @click="selectMemberByIndex(mIdx)">
            <text class="member-avatar">{{ memberInitial(member) }}</text>
            <text class="member-name">{{ member.nickname || '未命名' }}</text>
          </view>
        </view>
        <text class="member-empty" v-else>暂无家庭成员，请先在家庭中添加</text>
      </view>
    </view>

    <!-- 上传方式 -->
    <view class="form-section">
      <view class="upload-methods">
        <view class="upload-card card-chat" @click="pickFromChat">
          <view class="upload-card-icon">💬</view>
          <text class="upload-card-title">从聊天选取</text>
          <text class="upload-card-desc">微信聊天中的 PDF / 图片报告</text>
        </view>
        <view class="upload-card card-photo" @click="takePhoto">
          <view class="upload-card-icon">📷</view>
          <text class="upload-card-title">拍照上传</text>
          <text class="upload-card-desc">拍摄纸质报告（PDF 报告更佳）</text>
        </view>
      </view>

      <!-- 采集中面板 -->
      <view class="collecting-panel" v-if="collecting">
        <view class="collecting-card">
          <view class="collecting-icon">
            <view class="spinner" v-if="!collectError"></view>
            <text class="collecting-fail-mark" v-else>!</text>
          </view>
          <view class="collecting-info">
            <text class="collecting-title">{{ collectError ? '采集失败' : '数据采集中' }}</text>
            <text class="collecting-file">{{ collectFileName || '报告文件' }}</text>
            <text class="collecting-hint">{{ collectError || '后台正在识别报告类型并解析，完成后自动入库' }}</text>
          </view>
        </view>
        <view class="collecting-actions">
          <view class="collecting-btn" @click="goReportList">去报告列表查看</view>
          <view class="collecting-cancel" @click="cancelCollect">取消</view>
        </view>
      </view>

      <!-- 上传中 -->
      <view class="form-item" v-if="uploading">
        <text class="form-label">上传中...</text>
        <view class="analyzing-status">
          <text class="analyzing-text">{{ uploadingText }}</text>
        </view>
      </view>

      <!-- 责任声明 -->
      <view class="form-item disclaimer-box">
        <view class="disclaimer-check" @click="toggleAgree">
          <view class="disclaimer-checkbox" :class="{ 'disclaimer-checked': agreedToTerms }">
            <text class="disclaimer-checkmark" v-if="agreedToTerms">✓</text>
          </view>
          <text class="disclaimer-label">我已阅读并同意以下声明</text>
        </view>
        <view class="disclaimer-content">
          <text class="disclaimer-text">我同意平台使用本报告数据进行分析，为我提供个性化健康解决方案；未经我授权，平台不会以任何形式将我的报告内容提供给其他任何个人或机构。</text>
        </view>
      </view>
    </view>

    <!-- 上传说明 -->
    <view class="guide-section">
      <view class="guide-header">
        <text class="guide-header-icon">📖</text>
        <text class="guide-header-title">支持的报告类型</text>
      </view>
      <view class="guide-list">
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-blue"><text class="guide-icon">📄</text></view>
          <view class="guide-info">
            <text class="guide-name">菌群检测报告</text>
            <text class="guide-desc">肠道菌群 PDF，后台采集解析菌群指标</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-purple"><text class="guide-icon">🧠</text></view>
          <view class="guide-info">
            <text class="guide-name">素质测评 A2</text>
            <text class="guide-desc">核心素养 PDF，解析认知、情绪、大五人格等</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-blue"><text class="guide-icon">📄</text></view>
          <view class="guide-info">
            <text class="guide-name">体检报告</text>
            <text class="guide-desc">血常规、尿常规、生化检验等，支持 PDF 或清晰照片</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-orange"><text class="guide-icon">👅</text></view>
          <view class="guide-info">
            <text class="guide-name">舌象照片</text>
            <text class="guide-desc">拍摄舌象照片，AI 辅助舌诊分析</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-teal"><text class="guide-icon">⚖️</text></view>
          <view class="guide-info">
            <text class="guide-name">体脂秤报告</text>
            <text class="guide-desc">拍摄体脂秤显示屏，自动提取体重、BMI、体脂率等</text>
          </view>
        </view>
      </view>
      <view class="guide-tips">
        <text class="guide-tips-title">温馨提示</text>
        <text class="guide-tips-item">· 上传后无需选择类型，后台自动识别报告种类并解析</text>
        <text class="guide-tips-item">· 请先选择报告归属成员，再上传文件</text>
        <text class="guide-tips-item">· 请确认报告清晰完整，以便准确解析</text>
        <text class="guide-tips-item">· 确认入库后将自动生成成长方案，可再分解为每日任务</text>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadReportOnly, getReportCollectStatus, getFamilyMemberList, requestReportTransfer } from '../../utils/api.js'

export default {
  data() {
    return {
      memberId: null,
      reportKind: '',
      uploadType: null, // 'tongue' | null；从 URL query reportType 读取
      familyMembers: [],
      uploading: false,
      agreedToTerms: false,
      uploadingText: '正在上传文件...',
      collectDraftId: null,
      collectTimer: null,
      collecting: false,
      collectFileName: '',
      collectError: '',
      collectPollCount: 0
    }
  },
  computed: {
    tipText: function() {
      return '上传报告后由系统自动识别类型并解析：菌群检测、素质测评 A2、体检报告等'
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId ? parseInt(options.memberId) : null
if (options.type === 'a2' || options.reportKind === 'a2') {
      this.reportKind = 'a2'
    } else if (options.type === 'gut' || options.reportKind === 'gut') {
      this.reportKind = 'gut'
    }
    if (options.reportType === 'tongue' || options.type === 'tongue') {
      this.uploadType = 'tongue'
    }
    this.loadFamilyMembers()
  },
  onUnload: function() {
    this.stopCollectPolling()
  },
  methods: {
    resolveMemberId: function(member) {
      if (!member) return null
      var raw = member.id || member.userId
      if (raw === 0 || raw === '0') return 0
      if (!raw) return null
      var id = parseInt(raw)
      return isNaN(id) ? null : id
    },
    selectMemberByIndex: function(idx) {
      var list = this.familyMembers
      if (!list || idx < 0 || idx >= list.length) return
      var id = this.resolveMemberId(list[idx])
      if (id === null) {
        uni.showToast({ title: '该成员缺少编号，无法选择', icon: 'none' })
        return
      }
      this.memberId = id
      this.markSelectedMember(id)
    },
    markSelectedMember: function(memberId) {
      var list = this.familyMembers || []
      var target = memberId === null || memberId === undefined ? null : parseInt(memberId)
      for (var i = 0; i < list.length; i++) {
        var cur = this.resolveMemberId(list[i])
        this.$set(list[i], '_selected', target !== null && !isNaN(target) && cur === target)
      }
    },
    getMemberKey: function(member) {
      var id = this.resolveMemberId(member)
      return id === null ? 'm0' : ('m' + id)
    },
    memberInitial: function(member) {
      var name = (member && member.nickname) || '?'
      return name.substring(0, 1)
    },
    loadFamilyMembers: function() {
      var self = this
      getFamilyMemberList({ visibleOnly: true }).then(function(res) {
        var list = (res && res.data) || []
        self.familyMembers = list instanceof Array ? list : []
        if (!self.memberId && self.familyMembers.length === 1) {
          self.memberId = self.resolveMemberId(self.familyMembers[0])
        }
        self.markSelectedMember(self.memberId)
      }).catch(function() {
        self.familyMembers = []
      })
    },
    ensureMember: function() {
      if (this.memberId) return true
      uni.showToast({ title: '请先选择报告所属成员', icon: 'none' })
      return false
    },
    toggleAgree: function() {
      this.agreedToTerms = !this.agreedToTerms
    },
    ensureAgreed: function(callback) {
      if (this.agreedToTerms) {
        callback()
        return
      }
      var self = this
      uni.showModal({
        title: '数据使用声明',
        content: '上传报告即代表您同意平台使用本报告数据进行分析，为您提供个性化健康解决方案；未经您授权，平台不会以任何形式将您的报告内容提供给其他任何个人或机构。点击「同意继续」即表示您已阅读并同意。',
        confirmText: '同意继续',
        cancelText: '暂不',
        success: function(res) {
          if (res.confirm) {
            self.agreedToTerms = true
            callback()
          }
        }
      })
    },
    pickFromChat: function() {
      var self = this
      if (!this.ensureMember()) return
      this.ensureAgreed(function() {
        // type='all' 的选择器默认停留在图片 tab，用户难以发现可切换选文件。
        // 改为先弹 actionSheet 让用户明确选择图片或文件，分别走对应 type。
        uni.showActionSheet({
          itemList: ['聊天中的文件（PDF等）', '聊天中的图片'],
          success: function(res) {
            if (res.tapIndex === 0) {
              self.chooseChatFile('file', '聊天文件')
            } else if (res.tapIndex === 1) {
              self.chooseChatFile('image', '聊天图片')
            }
          },
          fail: function() {
            // 用户取消，静默处理
          }
        })
      })
    },
    chooseChatFile: function(type, fallbackName) {
      var self = this
      uni.chooseMessageFile({
        count: 1,
        type: type,
        success: function(res) {
          var files = res.tempFiles
          if (files && files.length > 0) {
            self.uploadReport(files[0].path, files[0].name || fallbackName)
          }
        },
        fail: function() {
          // 用户取消或失败，静默处理
        }
      })
    },
    takePhoto: function() {
      var self = this
      if (!this.ensureMember()) return
      this.ensureAgreed(function() {
        uni.chooseImage({
          count: 1,
          sourceType: ['camera', 'album'],
          success: function(res) {
            if (res.tempFilePaths && res.tempFilePaths.length > 0) {
              self.uploadReport(res.tempFilePaths[0], '照片')
            }
          }
        })
      })
    },
    uploadReport: function(filePath, fileName) {
      if (!filePath) return
      var self = this
      self.uploading = true
      self.uploadingText = '正在上传文件...'
      uni.showLoading({ title: '上传中...' })
      
// 统一上传：舌诊照片（uploadType=tongue）走舌诊专用流程；其余 type=auto，后台指纹判定后走对应采集管道（dan_a2 → DAN入库 / 其余 → 健康报告）
      uploadReportOnly(filePath, self.uploadType || 'auto', self.memberId).then(function(res) {
        uni.hideLoading()
        self.uploading = false
        var data = res.data || {}
        // 舌诊照片：后端直接返回 recordId + 舌诊指标，不走 draft/collect 流程
        if (data.type === 'tongue' || data.recordId) {
          var tonguePayload = {
            type: 'tongue',
            recordId: data.recordId,
            indicators: data.indicators || [],
            summary: { overallAssessment: data.overallAssessment || '' }
          }
          var url = '/pages/health/report-confirm?payload=' + encodeURIComponent(JSON.stringify(tonguePayload))
          if (self.memberId) url += '&memberId=' + self.memberId
          uni.redirectTo({ url: url })
          return
        }
        // 处理重复上传：duplicate=true
        if (data.duplicate) {
          if (data.collecting) {
            self.collectDraftId = data.draftId
            self.collecting = true
            self.collectError = data.message || '该报告正在解析中，请稍候'
            self.collectFileName = fileName || '报告文件'
            self.startCollectPolling(data.draftId)
          } else if (data.crossFamily) {
            // 同一份报告已被其他家庭上传：弹窗确认后向原家庭发起转移申请，不跳详情
            self.confirmCrossFamilyTransfer(data)
            return
          } else {
            // 本家庭已完成，跳转详情
            var reportId = data.reportId
            if (reportId) {
              self.goToDetail(reportId, 'gut_flora')
            }
          }
          uni.showToast({ title: data.message || '该报告已上传过', icon: 'none', duration: 3000 })
          return
        }
        var draftId = data.draftId
        if (!draftId) {
          uni.showToast({ title: (res && res.message) || '上传失败', icon: 'none' })
          return
        }
        self.collectDraftId = draftId
        self.collecting = true
        self.collectError = ''
        self.collectFileName = fileName || '报告文件'
        self.startCollectPolling(draftId)
      }).catch(function(err) {
        uni.hideLoading()
        self.uploading = false
        var msg = (err && err.message) || '上传失败，请重试'
        uni.showToast({ title: msg, icon: 'none' })
      })
    },
    // 跨家庭重复上传：弹窗确认后向原家庭发起转移申请（原家庭同意后报告才转入本家庭）
    confirmCrossFamilyTransfer: function(data) {
      uni.showModal({
        title: '申请转移报告',
        content: '该报告已由其他家庭上传。发起申请后需对方家庭同意，报告才会转入您的家庭；同意前您无法查看该报告。是否发起申请？',
        confirmText: '发起申请',
        cancelText: '取消',
        success: function(res) {
          if (!res.confirm) return
          requestReportTransfer(data.reportId).then(function(r) {
            if (r && r.code === 200) {
              uni.showToast({ title: '申请已提交，等待对方家庭同意', icon: 'none', duration: 3000 })
            } else {
              uni.showToast({ title: (r && r.message) || '申请失败', icon: 'none' })
            }
          }).catch(function() {
            uni.showToast({ title: '申请失败，请重试', icon: 'none' })
          })
        }
      })
    },
    stopCollectPolling: function() {
      if (this.collectTimer) {
        clearInterval(this.collectTimer)
        this.collectTimer = null
      }
    },
    startCollectPolling: function(draftId) {
      var self = this
      self.stopCollectPolling()
      self.collectPollCount = 0
      self.pollCollectStatus(draftId)
      self.collectTimer = setInterval(function() {
        self.pollCollectStatus(draftId)
      }, 4000)
    },
    pollCollectStatus: function(draftId) {
      var self = this
      self.collectPollCount = (self.collectPollCount || 0) + 1
      // 约 6 分钟仍未完成：停轮询，提示去列表看进度
      if (self.collectPollCount > 90) {
        self.stopCollectPolling()
        self.collectError = '解析耗时较长，可去报告列表查看进度，无需重复上传'
        return
      }
      getReportCollectStatus(draftId).then(function(res) {
        var data = res.data || {}
        var status = data.parseStatus
        if (status === 'completed') {
          self.stopCollectPolling()
          self.collecting = false
          uni.showToast({ title: '报告已采集完成', icon: 'success', duration: 2000 })
          var reportId = data.reportId
          var reportType = data.reportType || 'gut_flora'
          setTimeout(function() {
            if (reportId) {
              // 后端指纹识别后统一入库：dan_* → DAN 报告页，其余 → 健康报告详情页
              if (reportType && reportType.indexOf('dan_') === 0) {
                uni.redirectTo({ url: '/pages/dan-assessment/report-result?reportId=' + reportId })
              } else if (reportType === 'gut_flora') {
                uni.redirectTo({ url: '/pages/health/gut-flora-detail?reportId=' + reportId })
              } else {
                uni.redirectTo({ url: '/pages/health/report-detail?reportType=' + reportType + '&reportId=' + reportId })
              }
            } else {
              uni.redirectTo({ url: '/pages/health/report-list' })
            }
          }, 600)
        } else if (status === 'failed') {
          self.stopCollectPolling()
          self.collectError = data.parseError || '报告采集失败，请重试'
          uni.showToast({ title: self.collectError, icon: 'none', duration: 3000 })
        }
      }).catch(function() {
        // 轮询失败静默，下次继续
      })
    },
    goReportList: function() {
      this.stopCollectPolling()
      uni.redirectTo({ url: '/pages/health/report-list' })
    },
    goToDetail: function(reportId, reportType) {
      var url
      if (reportType === 'gut_flora') {
        url = '/pages/health/gut-flora-detail?reportId=' + reportId
      } else {
        url = '/pages/health/report-detail?reportType=' + (reportType || 'gut_flora') + '&reportId=' + reportId
      }
      uni.redirectTo({ url: url })
    },
    cancelCollect: function() {
      this.stopCollectPolling()
      this.collecting = false
      this.collectDraftId = null
      this.collectFileName = ''
      this.collectError = ''
    }
  }
}
</script>

<style scoped>
.upload-container {
  min-height: 100vh;
  background: #F5F7FA;
  padding-bottom: env(safe-area-inset-bottom);
}

.tip-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #E3F2FD;
  margin: 20rpx 30rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
}
.tip-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.tip-text {
  font-size: 24rpx;
  color: #1565C0;
  line-height: 1.5;
}

.form-section {
  margin: 0 30rpx;
}
.member-box {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.member-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
}
.member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 20rpx;
  background: #F5F7FA;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  min-width: 120rpx;
}
.member-selected {
  background: #EDE9FE;
  border-color: #8B5CF6;
}
.member-hover {
  opacity: 0.85;
}
.member-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #8B5CF6;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  text-align: center;
  line-height: 64rpx;
  margin-bottom: 8rpx;
}
.member-name {
  font-size: 24rpx;
  color: #333;
}
.member-empty {
  font-size: 24rpx;
  color: #94A3B8;
}
.form-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.form-label {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

/* 上传方式卡片 */
.upload-methods {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-bottom: 20rpx;
}
.upload-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32rpx 12rpx;
  border-radius: 20rpx;
  text-align: center;
  min-height: 200rpx;
}
.upload-card:active {
  opacity: 0.85;
}
.upload-card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  font-size: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
.upload-card-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}
.upload-card-desc {
  font-size: 20rpx;
  color: #94A3B8;
  line-height: 1.5;
}

.card-chat {
  background: #F0F7FF;
  border: 2rpx dashed #93C5FD;
}
.card-chat .upload-card-icon {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #fff;
}

.card-photo {
  background: #FFF7ED;
  border: 2rpx solid #FED7AA;
}
.card-photo .upload-card-icon {
  background: linear-gradient(135deg, #FB923C, #EA580C);
  color: #fff;
}

/* 采集中面板 */
.collecting-panel {
  margin-bottom: 20rpx;
}
.collecting-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #FFF8E6;
  border: 1rpx solid #F5D78E;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
}
.collecting-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #F0B429;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.spinner {
  width: 28rpx;
  height: 28rpx;
  border: 4rpx solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: collecting-spin 1s linear infinite;
}
@keyframes collecting-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.collecting-fail-mark {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}
.collecting-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.collecting-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #7A5C00;
}
.collecting-file {
  font-size: 24rpx;
  color: #A08A45;
  margin-top: 6rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collecting-hint {
  font-size: 22rpx;
  color: #C0A75A;
  margin-top: 8rpx;
  line-height: 1.5;
}
.collecting-actions {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-top: 16rpx;
}
.collecting-btn {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: #5B9BD5;
  color: #fff;
  font-size: 28rpx;
  border-radius: 12rpx;
}
.collecting-cancel {
  padding: 0 24rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: #fff;
  border: 1rpx solid #D1D5DB;
  color: #666;
  font-size: 28rpx;
  border-radius: 12rpx;
}

/* 上传中状态 */
.analyzing-status {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.analyzing-text {
  font-size: 26rpx;
  color: #5B9BD5;
}

/* 责任声明 */
.disclaimer-box {
  background: #FFF8F0;
  border: 2rpx solid #FDE68A;
}
.disclaimer-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
}
.disclaimer-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 6rpx;
  border: 2rpx solid #CBD5E1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12rpx;
}
.disclaimer-checked {
  background: #5B9BD5;
  border-color: #5B9BD5;
}
.disclaimer-checkmark {
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
}
.disclaimer-label {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}
.disclaimer-content {
  background: #FFFDF5;
  border-radius: 10rpx;
  padding: 16rpx;
  margin-left: 48rpx;
}
.disclaimer-text {
  font-size: 22rpx;
  color: #92400E;
  line-height: 1.6;
}

/* 上传说明 */
.guide-section {
  margin: 0 30rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.guide-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}
.guide-header-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}
.guide-header-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.guide-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 20rpx;
}
.guide-icon-box {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.guide-icon {
  font-size: 32rpx;
}
.guide-icon-blue { background: #DBEAFE; }
.guide-icon-green { background: #DCFCE7; }
.guide-icon-orange { background: #FFEDD5; }
.guide-icon-purple { background: #EDE9FE; }
.guide-icon-teal { background: #CCFBF1; }
.guide-info {
  flex: 1;
}
.guide-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #334155;
  display: block;
  margin-bottom: 4rpx;
}
.guide-desc {
  font-size: 22rpx;
  color: #94A3B8;
  line-height: 1.5;
}
.guide-tips {
  margin-top: 8rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #F1F5F9;
}
.guide-tips-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #64748B;
  display: block;
  margin-bottom: 8rpx;
}
.guide-tips-item {
  font-size: 22rpx;
  color: #94A3B8;
  display: block;
  line-height: 1.7;
}
</style>