refactor(frontend): 上传报告入口统一为 ReportUploadCard 组件

cfc-frontend/components/report-upload-card.vue

@@ -0,0 +1,93 @@
+<template>
+  <view class="report-upload-card" @click="handleClick">
+    <view class="report-upload-left">
+      <text class="report-upload-icon">{{ icon }}</text>
+    </view>
+    <view class="report-upload-right">
+      <text class="report-upload-title">{{ title }}</text>
+      <text class="report-upload-desc">{{ desc }}</text>
+      <view class="report-upload-tags" v-if="tags && tags.length > 0">
+        <text class="tag" v-for="(t, idx) in tags" :key="idx">{{ t }}</text>
+      </view>
+    </view>
+    <text class="report-upload-arrow">›</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ReportUploadCard',
+  props: {
+    title: { type: String, default: '上传健康报告' },
+    desc: { type: String, default: '上传体检报告或肠道检测报告，解读分析，获取个性化营养方案' },
+    tags: { type: Array, default: function() { return ['体检报告', '肠道检测', '解读'] } },
+    icon: { type: String, default: '📋' }
+  },
+  methods: {
+    handleClick: function() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.report-upload-card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
+  border-radius: 20rpx;
+  padding: 28rpx 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.report-upload-left {
+  width: 100rpx;
+  height: 100rpx;
+  background: rgba(255,255,255,0.7);
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+}
+.report-upload-icon {
+  font-size: 52rpx;
+}
+.report-upload-right {
+  flex: 1;
+}
+.report-upload-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #2E7D32;
+  display: block;
+  margin-bottom: 6rpx;
+}
+.report-upload-desc {
+  font-size: 22rpx;
+  color: #558B2F;
+  line-height: 1.5;
+  display: block;
+  margin-bottom: 10rpx;
+}
+.report-upload-tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10rpx;
+}
+.report-upload-tags .tag {
+  font-size: 20rpx;
+  color: #33691E;
+  background: rgba(255,255,255,0.6);
+  padding: 4rpx 14rpx;
+  border-radius: 20rpx;
+}
+.report-upload-arrow {
+  font-size: 40rpx;
+  color: #A5D6A7;
+  margin-left: 12rpx;
+}
+</style>

cfc-frontend/pages/body-detail/index.vue

@@ -80,21 +80,7 @@
       </view>
 
       <!-- 上传报告入口 -->
-      <view class="nutrition-report-card" @click="goToUploadReport">
-        <view class="nutrition-report-left">
-          <text class="nutrition-icon-large">📋</text>
-        </view>
-        <view class="nutrition-report-right">
-          <text class="nutrition-title">上传健康报告</text>
-          <text class="nutrition-desc">上传体检报告或肠道检测报告，解读分析，获取个性化营养方案</text>
-          <view class="nutrition-report-tags">
-            <text class="tag">体检报告</text>
-            <text class="tag">肠道检测</text>
-            <text class="tag">解读</text>
-          </view>
-        </view>
-        <text class="nutrition-arrow">›</text>
-      </view>
+      <ReportUploadCard @click="goToUploadReport" />
 
       </view>
 
@@ -116,10 +102,11 @@ import DimensionSubDims from '../../components/DimensionSubDims.vue'
 import FloatingAvatar from '../../components/AIFloatingAvatar.vue'
 import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
 import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
+import ReportUploadCard from '../../components/report-upload-card.vue'
 import { getVisibleSections, getEnergyOverview, getChildren, getFamilyEnergySandbox, getEnergySandbox, getFamilyMemberList, getDimensionOverview } from '../../utils/api.js'
 
 export default {
-  components: { TabTransition, PageBanner, FamilyEnergyBar, RadarChart, DimensionSubDims, FloatingAvatar, FamilyMemberStrip, DimensionIntroCard },
+  components: { TabTransition, PageBanner, FamilyEnergyBar, RadarChart, DimensionSubDims, FloatingAvatar, FamilyMemberStrip, DimensionIntroCard, ReportUploadCard },
   data() {
     return {
       isLoggedIn: false,
@@ -652,65 +639,6 @@ export default {
 .nutrition-section {
   margin-top: 20rpx;
 }
-.nutrition-report-card {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
-  border-radius: 20rpx;
-  padding: 28rpx 24rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
-}
-.nutrition-report-left {
-  width: 100rpx;
-  height: 100rpx;
-  background: rgba(255,255,255,0.7);
-  border-radius: 20rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 20rpx;
-  flex-shrink: 0;
-}
-.nutrition-icon-large {
-  font-size: 52rpx;
-}
-.nutrition-report-right {
-  flex: 1;
-}
-.nutrition-title {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #2E7D32;
-  display: block;
-  margin-bottom: 6rpx;
-}
-.nutrition-desc {
-  font-size: 22rpx;
-  color: #558B2F;
-  line-height: 1.5;
-  display: block;
-  margin-bottom: 10rpx;
-}
-.nutrition-report-tags {
-  display: flex;
-  flex-direction: row;
-  gap: 10rpx;
-}
-.nutrition-report-tags .tag {
-  font-size: 20rpx;
-  color: #33691E;
-  background: rgba(255,255,255,0.6);
-  padding: 4rpx 14rpx;
-  border-radius: 20rpx;
-}
-.nutrition-arrow {
-  font-size: 40rpx;
-  color: #A5D6A7;
-  margin-left: 12rpx;
-}
-
 .nutrition-links {
   margin-bottom: 20rpx;
 }

cfc-frontend/pages/health-main/index.vue

@@ -192,14 +192,11 @@
       </view>
 
       <view class="section section-data-collect">
-        <view class="data-card" @click="goPage('/pages/health/report-upload')">
-          <view class="data-card-icon" style="background:rgba(249,115,22,0.12)"><text>📋</text></view>
-          <view class="data-card-info">
-            <text class="data-card-title">上传健康报告</text>
-            <text class="data-card-desc">体检/肠道/舌诊报告 · 解读</text>
-          </view>
-          <text class="data-card-arrow">›</text>
-        </view>
+        <ReportUploadCard
+          title="上传健康报告"
+          desc="体检/肠道/舌诊报告 · 解读"
+          :tags="['体检报告', '肠道检测', '舌诊']"
+          @click="goPage('/pages/health/report-upload')" />
 
         <view class="data-card data-card-assessment">
           <view class="data-card-head">
@@ -266,9 +263,10 @@ import PageBanner from '../../components/PageBanner.vue'
 import LoginGuideCard from '../../components/LoginGuideCard.vue'
 import RadarChart from '../../components/RadarChart.vue'
 import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
+import ReportUploadCard from '../../components/report-upload-card.vue'
 
 export default {
-  components: { PageBanner, LoginGuideCard, RadarChart, ArticleBookshelf },
+  components: { PageBanner, LoginGuideCard, RadarChart, ArticleBookshelf, ReportUploadCard },
   data() {
     return {
       isLoggedIn: false,
@@ -615,11 +613,6 @@ export default {
 .dc-title { font-size: 32rpx; font-weight: bold; color: #333; }
 .section-data-collect { margin: 8rpx 24rpx; }
 .data-card { display: flex; align-items: center; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.data-card-icon { width: 88rpx; height: 88rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; font-size: 40rpx; }
-.data-card-info { flex: 1; }
-.data-card-title { font-size: 28rpx; font-weight: bold; color: #333; display: block; margin-bottom: 6rpx; }
-.data-card-desc { font-size: 22rpx; color: #999; }
-.data-card-arrow { font-size: 36rpx; color: #ccc; }
 .data-card-assessment { flex-direction: column; align-items: stretch; padding: 24rpx; }
 .data-card-head { display: flex; align-items: center; margin-bottom: 16rpx; }
 .data-card-subtitle { font-size: 22rpx; color: #999; margin-left: 12rpx; }

cfc-frontend/pages/index-home/index.vue

@@ -169,14 +169,11 @@
     <DailyTaskCard />
     <!-- 报告上传 -->
     <view class="section">
-      <view class="action-card" @click="goToUploadReport">
-        <text class="action-icon">📷</text>
-        <view class="action-info">
-          <text class="action-title">上传报告</text>
-          <text class="action-desc">体检报告 · 菌群检测 · 认知测评 · 心理测评 · 情绪打卡</text>
-        </view>
-        <text class="action-arrow">›</text>
-      </view>
+      <ReportUploadCard
+        title="上传报告"
+        desc="体检报告 · 菌群检测 · 认知测评 · 心理测评 · 情绪打卡"
+        :tags="['体检报告', '菌群检测', '认知测评', '心理测评', '情绪打卡']"
+        @click="goToUploadReport" />
     </view>
 
     <!-- 推荐文章 -->
@@ -360,6 +357,7 @@ import DimensionProducts from '../../components/DimensionProducts.vue'
 import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
 import FamilyChallengeCard from '../../components/FamilyChallengeCard.vue'
 import DailyTaskCard from '../../components/daily-task-card.vue'
+import ReportUploadCard from '../../components/report-upload-card.vue'
 import IntentPicker from '../../components/intent-picker.vue'
 import JourneyCard from '../../components/journey-card.vue'
 import { acceptParentInvite, productList, getActivityList, getFeaturedArticles, getFamilyEnergySandbox, getFamilyMemberList, getChildren, getChallengeList, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge, getTodayTasks, completeTask as completeTaskApi, getTodayParentTasks, completeParentTask as completeParentTaskApi, getTaskHistory, getNotices, getNotificationList, getUserIntent, chooseUserIntent } from '../../utils/api.js'
@@ -377,6 +375,7 @@ export default {
     ArticleBookshelf,
     FamilyChallengeCard,
     DailyTaskCard,
+    ReportUploadCard,
     IntentPicker,
     JourneyCard
   },