优化展示

src/components/feed/RecipeCompareDialog.vue

@@ -58,7 +58,13 @@
     </div>
     <div v-else-if="compareResult.length > 0" class="table-wrapper">
       <el-table :data="compareResult" style="width: 100%" border>
-        <el-table-column prop="nutrientName" label="营养素" fixed />
+        <el-table-column label="营养素" fixed>
+          <template #default="scope">
+            <el-tooltip :content="nutrientsDescriptionMap[scope.row.nutrientName]" placement="top">
+              <span>{{ scope.row.nutrientName }}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column :label="currentRecipe.name">
           <template #default="scope">
             <span :style="{ color: scope.row.currentRecipeValue > scope.row.compareRecipeValue ? 'green' : (scope.row.currentRecipeValue < scope.row.compareRecipeValue ? 'red' : 'inherit') }">
@@ -111,7 +117,7 @@
 
 <script>
 import { ref, watch, computed } from 'vue';
-import { getRecipes, getRecipeById, getPigTypes, getPigTypeById, getRawMaterialById } from '../../api/feed';
+import { getNutrients, getRecipes, getRecipeById, getPigTypes, getPigTypeById, getRawMaterialById } from '../../api/feed';
 import { ElMessage } from 'element-plus';
 import { Check, Close } from '@element-plus/icons-vue';
 
@@ -140,6 +146,7 @@ export default {
     const compareResult = ref([]);
     const compareRecipeName = ref('');
     const pigTypeName = ref('');
+    const nutrientsDescriptionMap = ref({}); // 新增：存储营养素描述的映射
 
     const handleClose = () => {
       emit('update:visible', false);
@@ -182,6 +189,19 @@ export default {
       }
     };
 
+    // 新增：获取所有营养素列表及其描述
+    const fetchNutrientsDescriptions = async () => {
+      try {
+        const response = await getNutrients({ page_size: 999 });
+        nutrientsDescriptionMap.value = response.data.list.reduce((map, nutrient) => {
+          map[nutrient.name] = nutrient.description;
+          return map;
+        }, {});
+      } catch (err) {
+        ElMessage.error('获取营养素描述失败: ' + (err.message || '未知错误'));
+      }
+    };
+
     // 计算配方的营养成分汇总
     const calculateRecipeNutrientSummary = async (recipe) => {
       const summary = new Map();
@@ -297,6 +317,7 @@ export default {
       if (newVal) {
         fetchRecipeList();
         fetchPigTypeList();
+        fetchNutrientsDescriptions(); // 新增：在对话框显示时获取营养素描述
       }
     }, { immediate: true });
 
@@ -314,6 +335,7 @@ export default {
       handleClose,
       canCompare,
       startCompare,
+      nutrientsDescriptionMap, // 新增：返回 nutrientsDescriptionMap
     };
   },
 };