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

feat(frontend): 菌群详情页标签增加分类数量统计,列表人群/检出/丰度/正常单行展示

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Sisyphus 1 месяц назад
Родитель
Сommit
5c7c6d492f
1 измененных файлов с 40 добавлено и 22 удалено
  1. 40 22
      cfc-frontend/pages/health/gut-flora-species-detail.vue

+ 40 - 22
cfc-frontend/pages/health/gut-flora-species-detail.vue

@@ -6,7 +6,7 @@
       <view class="tab-item" v-for="(tab, idx) in tabs" :key="idx"
             :class="'tab-' + (selectedTab === tab.key ? 'active' : '')"
             @tap="selectedTab = tab.key">
-        <text>{{ tab.label }}</text>
+        <text>{{ tab.label }} <text class="tab-count">{{ tabCounts[tab.key] }}</text></text>
       </view>
     </view>
 
@@ -22,8 +22,10 @@
           <text class="flora-level-tag" v-if="item.level && item.level !== 'GENUS'">{{ item.level }}</text>
         </view>
         <view class="flora-details" v-if="!isEditing">
-          <text class="detail-text">丰度 {{ item.bacteriaValue || '--' }} | 正常 {{ item.normalRange || '--' }}</text>
-          <text class="detail-text">人群 {{ item.populationLevel || '--' }} | 检出 {{ item.detectionRate || '--' }}</text>
+          <text class="detail-item">人群 {{ item.populationLevel || '--' }}</text>
+          <text class="detail-item">检出 {{ item.detectionRate || '--' }}</text>
+          <text class="detail-item">丰度 {{ item.bacteriaValue || '--' }}</text>
+          <text class="detail-item">正常 {{ item.normalRange || '--' }}</text>
         </view>
         <view class="flora-edit-row" v-if="isEditing">
           <text class="edit-label">丰度:</text>
@@ -83,9 +85,35 @@ export default {
     }
   },
   computed: {
+    /** 每个查询标签对应的菌群数量 */
+    tabCounts: function() {
+      var self = this
+      var counts = {}
+      for (var i = 0; i < this.tabs.length; i++) {
+        var key = this.tabs[i].key
+        counts[key] = self._getTabList(key).length
+      }
+      return counts
+    },
     filteredFlora: function() {
+      return this._getTabList(this.selectedTab)
+    }
+  },
+  onLoad: function(options) {
+    this.reportId = options.reportId ? parseInt(options.reportId) : null
+    if (options.tab) {
+      this.selectedTab = options.tab
+    }
+    if (this.reportId) {
+      this.loadData()
+    }
+  },
+  methods: {
+    goBack: function() { uni.navigateBack() },
+    /** 按 tabKey 过滤菌群列表(filteredFlora 与 tabCounts 共用) */
+    _getTabList: function(tabKey) {
       var list = this.isEditing ? this.editFlora : this.gutFlora
-      if (this.selectedTab === 'all') return list
+      if (tabKey === 'all') return list
       // 中文 category 映射到英文 tab key(兼容旧数据)
       var catToTab = {
         'core': 'core', '核心菌': 'core', '核心菌属': 'core',
@@ -95,13 +123,13 @@ export default {
         'pathogen_genus': 'pathogen_genus', '病原菌属': 'pathogen_genus',
         'pathogen_detection': 'pathogen_detection', '病原菌': 'pathogen_detection', '致病菌': 'pathogen_detection'
       }
-      if (this.selectedTab === 'probiotic') {
+      if (tabKey === 'probiotic') {
         return this.isEditing
           ? this.editFlora.filter(function(i) { return (catToTab[i.category] || i.category) === 'probiotic' })
           : this.probioticSpecies
       }
       // Taxonomy tabs: filter by category='taxonomy' + level
-      if (this.selectedTab.indexOf('taxonomy_') === 0) {
+      if (tabKey.indexOf('taxonomy_') === 0) {
         var levelMap = {
           'taxonomy_phylum': 'PHYLUM',
           'taxonomy_class': 'CLASS',
@@ -110,32 +138,20 @@ export default {
           'taxonomy_genus': 'GENUS',
           'taxonomy_species': 'SPECIES'
         }
-        var targetLevel = levelMap[this.selectedTab]
+        var targetLevel = levelMap[tabKey]
         return list.filter(function(item) {
           return item.category === 'taxonomy' && item.level === targetLevel
         })
       }
       // Other category tabs
-      var targetTab = catToTab[this.selectedTab]
+      var targetTab = catToTab[tabKey]
       if (targetTab) {
         return list.filter(function(item) {
           return (catToTab[item.category] || item.category) === targetTab
         })
       }
       return []
-    }
-  },
-  onLoad: function(options) {
-    this.reportId = options.reportId ? parseInt(options.reportId) : null
-    if (options.tab) {
-      this.selectedTab = options.tab
-    }
-    if (this.reportId) {
-      this.loadData()
-    }
-  },
-  methods: {
-    goBack: function() { uni.navigateBack() },
+    },
     /** 中文状态 → CSS安全英文 */
     _cssForStatus: function(s) {
       var map = { '偏高': 'high', '过多': 'excess', '偏低': 'low', '缺乏': 'deficient', '不足': 'insufficient' }
@@ -237,6 +253,7 @@ export default {
 .tabs { background: #fff; padding: 10rpx 20rpx; display: flex; flex-wrap: wrap; border-bottom: 1rpx solid #eee; }
 .tab-item { display: inline-block; padding: 12rpx 24rpx; margin: 6rpx; border-radius: 30rpx; font-size: 24rpx; background: #f0f0f0; color: #666; }
 .tab-active { background: #4A9BD7; color: #fff; }
+.tab-count { font-size: 20rpx; opacity: 0.7; margin-left: 6rpx; }
 .content { padding: 20rpx 30rpx; height: calc(100vh - 200rpx); }
 .flora-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; }
 .flora-header { display: flex; align-items: center; margin-bottom: 10rpx; }
@@ -249,7 +266,8 @@ export default {
 .arrow-up { color: #C62828; font-size: 22rpx; }
 .arrow-down { color: #E65100; font-size: 22rpx; }
 .flora-level-tag { padding: 2rpx 12rpx; background: #E3F2FD; border-radius: 16rpx; font-size: 20rpx; color: #4A9BD7; }
-.detail-text { font-size: 24rpx; color: #999; display: block; line-height: 1.8; }
+.flora-details { display: flex; align-items: center; }
+.detail-item { flex: 1; font-size: 22rpx; color: #999; text-align: center; white-space: nowrap; }
 .flora-edit-row { display: flex; align-items: center; gap: 12rpx; flex-wrap: wrap; }
 .edit-label { font-size: 26rpx; color: #666; }
 .edit-input { border: 1rpx solid #ddd; border-radius: 8rpx; padding: 8rpx 12rpx; font-size: 26rpx; width: 140rpx; }