Просмотр исходного кода

feat: add cognitive impact annotations to gut flora indicators on wisdom page

- Map each gut flora indicator to its primary cognitive function (dopamine→focus, glutamate→memory, tryptophan→sleep/memory, butyrate→brain health)
- Display impact label below each indicator name in 肠胃与认知 section
- Fix value display bug: backend uses indicatorValue, frontend was reading broken ind.value
- Add indicatorBarWidth() and formatIndicatorValue() helper methods
- Add CSS for new gut-indicator-impact label
E2E Test Bot 23 часов назад
Родитель
Сommit
443180c1f6
1 измененных файлов с 54 добавлено и 12 удалено
  1. 54 12
      cfc-frontend/pages/wisdom-detail/index.vue

+ 54 - 12
cfc-frontend/pages/wisdom-detail/index.vue

@@ -145,17 +145,18 @@
       <text class="gut-cog-subtitle">肠脑轴 · 肠道菌群,影响学习与思维</text>
       <template v-if="cognitionGutIndicators && cognitionGutIndicators.length > 0">
         <view class="gut-indicator-list">
-          <view class="gut-indicator-item" v-for="ind in cognitionGutIndicators" :key="ind.id">
-            <view class="gut-indicator-left">
-              <text class="gut-indicator-name">{{ ind.indicatorName || ind.name }}</text>
-            </view>
-            <view class="gut-indicator-bar-track">
-              <view class="gut-indicator-bar-fill" :style="{ width: (ind.value || 0) + '%', background: indicatorColor(ind.status) }"></view>
-            </view>
-            <text class="gut-indicator-value">{{ ind.value }}{{ ind.unit || '%' }}</text>
-            <text :class="['gut-indicator-status', 'status-' + (ind.status || 'normal')]">{{ statusLabel(ind.status) }}</text>
-          </view>
-        </view>
+           <view class="gut-indicator-item" v-for="ind in cognitionGutIndicators" :key="ind.id">
+             <view class="gut-indicator-left">
+               <text class="gut-indicator-name">{{ ind.indicatorName || ind.name }}</text>
+               <text class="gut-indicator-impact" v-if="cognitiveImpactLabel(ind.indicatorName || ind.name)">影响{{ cognitiveImpactLabel(ind.indicatorName || ind.name) }}</text>
+             </view>
+             <view class="gut-indicator-bar-track">
+               <view class="gut-indicator-bar-fill" :style="{ width: indicatorBarWidth(ind), background: indicatorColor(ind.status) }"></view>
+             </view>
+             <text class="gut-indicator-value">{{ formatIndicatorValue(ind) }}{{ ind.unit || '%' }}</text>
+             <text :class="['gut-indicator-status', 'status-' + (ind.status || 'normal')]">{{ statusLabel(ind.status) }}</text>
+           </view>
+         </view>
       </template>
       <view class="gut-empty" v-else>
         <text class="gut-empty-icon">📄</text>
@@ -569,6 +570,20 @@ export default {
         self.cognitionGutIndicators = []
       })
     },
+    // 认知影响映射:指标名 → 影响的认知功能
+    cognitiveImpactLabel: function(name) {
+      if (!name) return ''
+      if (name.indexOf('多巴胺') !== -1 || name.indexOf('Dopamine') !== -1) return '专注力'
+      if (name.indexOf('谷氨酸') !== -1 || name.indexOf('Glutamate') !== -1) return '学习记忆'
+      if (name.indexOf('乙酰胆碱') !== -1) return '记忆力'
+      if (name.indexOf('色氨酸') !== -1 || name.indexOf('Tryptophan') !== -1) return '睡眠·记忆'
+      if (name.indexOf('丁酸') !== -1 || name.indexOf('Butyrate') !== -1) return '脑健康'
+      if (name.indexOf('丙酸') !== -1 || name.indexOf('Propionate') !== -1) return '脑健康'
+      if (name.indexOf('乙酸') !== -1 || name.indexOf('Acetate') !== -1) return '脑健康'
+      if (name.indexOf('组胺') !== -1 || name.indexOf('Histamine') !== -1) return '注意力·觉醒'
+      if (name.indexOf('短链脂肪酸') !== -1) return '脑健康'
+      return ''
+    },
     indicatorColor: function(status) {
       if (status === 'abnormal' || status === '偏高' || status === '偏低' || status === '过高' || status === '缺乏') return '#EF4444'
       if (status === 'warning' || status === '注意' || status === '不足') return '#F59E0B'
@@ -582,6 +597,25 @@ export default {
       if (status === '缺乏' || status === '不足') return '偏低'
       return status || '正常'
     },
+    // 指标值展示:后端字段为 indicatorValue,兼容数值型(如 0.32)
+    formatIndicatorValue: function(ind) {
+      if (!ind) return ''
+      var v = ind.value !== undefined && ind.value !== null ? ind.value : ind.indicatorValue
+      if (v === undefined || v === null || v === '') return ''
+      return String(v)
+    },
+    // 指标条宽度:将指标值归一化为 0-100 百分比(仅对纯数字有效,否则按状态给默认宽度)
+    indicatorBarWidth: function(ind) {
+      var raw = ind.value !== undefined && ind.value !== null ? ind.value : ind.indicatorValue
+      var n = parseFloat(raw)
+      if (!isNaN(n) && n >= 0 && n <= 100) return n + '%'
+      if (!isNaN(n) && n > 100) return '100%'
+      // 非数值(如 "偏低"/"未检出"),按状态给默认可视化宽度
+      var st = ind.status || ''
+      if (st === '偏低' || st === '缺乏' || st === '不足' || st === 'abnormal') return '30%'
+      if (st === '过高' || st === '过多' || st === 'warning') return '75%'
+      return '55%'
+    },
     goReportUpload: function() {
       uni.navigateTo({ url: '/pages/health/report-upload' })
     },
@@ -941,12 +975,20 @@ export default {
   gap: 12rpx;
 }
 .gut-indicator-left {
-  width: 80rpx;
+  width: 110rpx;
   flex-shrink: 0;
 }
 .gut-indicator-name {
   font-size: 22rpx;
   color: #666;
+  font-weight: 500;
+  display: block;
+}
+.gut-indicator-impact {
+  font-size: 18rpx;
+  color: #6366F1;
+  display: block;
+  margin-top: 2rpx;
 }
 .gut-indicator-bar-track {
   flex: 1;