优化展示

src/components/feed/RecipeDetailDialog.vue

@@ -76,7 +76,7 @@
 
 <script>
 import { ref, watch, nextTick, computed } from 'vue';
-import { getRawMaterialById, getRawMaterials, updateRecipe } from '../../api/feed';
+import { getRawMaterialById, getRawMaterials, updateRecipe, getRecipeById } from '../../api/feed';
 import { ElMessage } from 'element-plus';
 import { Delete } from '@element-plus/icons-vue';
 
@@ -129,30 +129,41 @@ export default {
       return allRawMaterials.value.filter(material => !existingIngredientIds.has(material.id));
     });
 
+    /**
+     * 获取并设置配方详情数据
+     * @param {number} recipeId - 配方ID
+     */
+    const fetchAndSetRecipeDetails = async (recipeId) => {
+      loading.value = true;
+      error.value = null;
+      try {
+        const recipeResponse = await getRecipeById(recipeId);
+        const latestRecipe = recipeResponse.data;
+
+        const rawMaterialPromises = latestRecipe.recipe_ingredients.map(ing => getRawMaterialById(ing.raw_material_id));
+        const rawMaterialResponses = await Promise.all(rawMaterialPromises);
+
+        const details = rawMaterialResponses.map((res, index) => ({
+          ...res.data,
+          percentage: latestRecipe.recipe_ingredients[index].percentage,
+        }));
+
+        ingredientDetails.value = details; // 用于显示模式
+        localIngredientDetails.value = JSON.parse(JSON.stringify(details)); // 用于编辑模式，深拷贝
+
+        nutrientSummary.value = calculateNutrientSummary(details);
+
+      } catch (err) {
+        console.error("加载配方详情失败:", err);
+        error.value = err.message || '未知错误';
+      } finally {
+        loading.value = false;
+      }
+    };
+
     watch(() => props.visible, async (newVal) => {
       if (newVal && props.recipe) {
-        loading.value = true;
+        await fetchAndSetRecipeDetails(props.recipe.id);
-        error.value = null;
-        try {
-          const rawMaterialPromises = props.recipe.recipe_ingredients.map(ing => getRawMaterialById(ing.raw_material_id));
-          const rawMaterialResponses = await Promise.all(rawMaterialPromises);
-
-          const details = rawMaterialResponses.map((res, index) => ({
-            ...res.data,
-            percentage: props.recipe.recipe_ingredients[index].percentage,
-          }));
-
-          ingredientDetails.value = details; // 用于显示模式
-          localIngredientDetails.value = JSON.parse(JSON.stringify(details)); // 用于编辑模式，深拷贝
-
-          nutrientSummary.value = calculateNutrientSummary(details);
-
-        } catch (err) {
-          console.error("加载配方详情失败:", err);
-          error.value = err.message || '未知错误';
-        } finally {
-          loading.value = false;
-        }
       } else {
         // 重置数据
         ingredientDetails.value = [];
@@ -226,6 +237,8 @@ export default {
         ElMessage.success('配方更新成功');
         isEditing.value = false;
         emit('recipe-updated'); // 通知父组件配方已更新
+        // 重新加载配方详情以刷新显示
+        await fetchAndSetRecipeDetails(props.recipe.id);
       } catch (err) {
         ElMessage.error('保存配方失败: ' + (err.message || '未知错误'));
       }