feat: 指标输入框颜色标注异常 + ?帮助按钮弹窗显示指标说明

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

@@ -171,8 +171,9 @@
           <view class="indicator-group-body" v-if="groupExpandList[gIdx]">
             <view class="indicator-item" v-for="(ind, idx) in group.items" :key="idx">
               <view class="ind-header">
-                <input class="ind-name" v-model="ind.indicatorName" />
-                <input class="ind-value" v-model="ind.indicatorValue" />
+                <text class="ind-help-btn" @click.stop="showHelp(ind)">?</text>
+                <input class="ind-name" :class="'ind-name-' + (ind.status || 'normal')" v-model="ind.indicatorName" />
+                <input class="ind-value" :class="'ind-value-' + (ind.status || 'normal')" v-model="ind.indicatorValue" />
               </view>
               <view class="ind-detail" v-if="ind.unit || ind.refRange">
                 <text class="ind-ref" v-if="ind.refRange">参考: {{ ind.refRange }}</text>
@@ -192,6 +193,38 @@
         </view>
       </view>
 
+      <!-- 指标帮助弹窗 -->
+      <view class="help-overlay" v-if="showHelpPopup" @click="closeHelp">
+        <view class="help-popup" @click.stop>
+          <view class="help-popup-header">
+            <text class="help-popup-title">{{ helpData.name }}</text>
+            <text class="help-popup-close" @click="closeHelp">✕</text>
+          </view>
+          <view class="help-popup-body">
+            <view class="help-row">
+              <text class="help-label">当前值</text>
+              <text class="help-value">{{ helpData.value }}</text>
+            </view>
+            <view class="help-row" v-if="helpData.refRange">
+              <text class="help-label">参考范围</text>
+              <text class="help-value">{{ helpData.refRange }}</text>
+            </view>
+            <view class="help-row">
+              <text class="help-label">状态</text>
+              <text class="help-value" :class="'help-status-' + (helpData.status || 'normal')">{{ statusText(helpData.status) }}</text>
+            </view>
+            <view class="help-desc" v-if="helpData.description">
+              <text class="help-desc-label">说明</text>
+              <text class="help-desc-text">{{ helpData.description }}</text>
+            </view>
+            <view class="help-desc" v-else>
+              <text class="help-desc-label">说明</text>
+              <text class="help-desc-text">{{ getDefaultDescription(helpData.name, helpData.status) }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
       <!-- 肠道菌群 -->
       <view class="card" v-if="payload.gutFlora && payload.gutFlora.length">
         <view class="card-title">肠道菌群 ({{ payload.gutFlora.length }})</view>
@@ -281,7 +314,10 @@ export default {
       creatingMember: false,
       createdMemberId: null,
       // 指标分组折叠状态（按分组下标，默认全部折叠）
-      groupExpandList: []
+      groupExpandList: [],
+      // 指标帮助弹窗
+      showHelpPopup: false,
+      helpData: { name: '', value: '', refRange: '', status: '', description: '' }
     }
   },
   computed: {
@@ -478,8 +514,38 @@ export default {
       if (status === 'high') return '偏高'
       if (status === 'low') return '偏低'
       if (status === 'abnormal') return '异常'
+      if (status === '缺乏') return '缺乏'
+      if (status === '偏低') return '偏低'
+      if (status === '不足') return '不足'
+      if (status === '正常') return '正常'
+      if (status === '注意') return '注意'
+      if (status === '高风险') return '高风险'
+      if (status === '低风险') return '低风险'
+      if (status === '未检出') return '未检出'
       return '正常'
     },
+    showHelp(ind) {
+      this.helpData = {
+        name: ind.indicatorName || ind.name || '',
+        value: ind.indicatorValue || ind.value || '',
+        refRange: ind.refRange || ind.normalRange || '',
+        status: ind.status || 'normal',
+        description: ind.description || ind.symptoms || ''
+      }
+      this.showHelpPopup = true
+    },
+    closeHelp() {
+      this.showHelpPopup = false
+    },
+    getDefaultDescription(name, status) {
+      if (!status || status === 'normal') return '该指标处于正常范围内，无需特别关注。'
+      if (status === 'high' || status === '偏高') return '该指标偏高，建议咨询专业医生或营养师进行进一步评估。'
+      if (status === 'low' || status === '偏低') return '该指标偏低，建议咨询专业医生或营养师进行进一步评估。'
+      if (status === '缺乏' || status === '不足') return '该指标不足，建议通过饮食或补充剂适当补充。'
+      if (status === 'abnormal') return '该指标异常，建议咨询专业医生进行详细检查。'
+      if (status === '注意') return '该指标需要关注，建议定期监测并咨询专业人士。'
+      return '请参考专业医生的建议进行解读。'
+    },
     riskLevelText(level) {
       if (level === 'high') return '高风险'
       if (level === 'medium' || level === 'moderate') return '中风险'
@@ -852,6 +918,121 @@ export default {
 .status-low { background: #E3F2FD; color: #1565C0; }
 .status-abnormal { background: #FFEBEE; color: #C62828; }
 
+/* ===== 指标帮助按钮 ===== */
+.ind-help-btn {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  background: #E2E8F0;
+  color: #64748B;
+  font-size: 24rpx;
+  font-weight: bold;
+  text-align: center;
+  line-height: 36rpx;
+  flex-shrink: 0;
+}
+.ind-help-btn:active {
+  background: #CBD5E1;
+}
+
+/* ===== 指标输入框颜色状态 ===== */
+.ind-name-normal, .ind-value-normal {
+  background: #fff;
+}
+.ind-name-high, .ind-value-high,
+.ind-name-low, .ind-value-low,
+.ind-name-abnormal, .ind-value-abnormal,
+.ind-name-缺乏, .ind-value-缺乏,
+.ind-name-偏低, .ind-value-偏低,
+.ind-name-不足, .ind-value-不足,
+.ind-name-注意, .ind-value-注意 {
+  background: #FFF0F0;
+  color: #C62828;
+}
+
+/* ===== 指标帮助弹窗 ===== */
+.help-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.help-popup {
+  width: 580rpx;
+  max-height: 70vh;
+  background: #fff;
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+.help-popup-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28rpx 30rpx;
+  border-bottom: 2rpx solid #F0F0F0;
+}
+.help-popup-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+  flex: 1;
+}
+.help-popup-close {
+  font-size: 32rpx;
+  color: #999;
+  padding: 8rpx;
+}
+.help-popup-body {
+  padding: 24rpx 30rpx;
+}
+.help-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+.help-label {
+  font-size: 26rpx;
+  color: #94A3B8;
+  width: 140rpx;
+  flex-shrink: 0;
+}
+.help-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  flex: 1;
+}
+.help-status-normal { color: #2E7D32; }
+.help-status-high { color: #C62828; }
+.help-status-low { color: #1565C0; }
+.help-status-abnormal { color: #C62828; }
+.help-desc {
+  margin-top: 8rpx;
+  padding: 20rpx;
+  background: #F8FAFB;
+  border-radius: 12rpx;
+}
+.help-desc-label {
+  display: block;
+  font-size: 24rpx;
+  color: #94A3B8;
+  margin-bottom: 8rpx;
+}
+.help-desc-text {
+  display: block;
+  font-size: 26rpx;
+  color: #333;
+  line-height: 1.6;
+}
+
 .flora-item {
   display: flex;
   flex-direction: row;