优化展示

src/components/feed/RecipeDetailDialog.vue

@@ -1,28 +1,28 @@
 <template>
   <el-dialog
-    :model-value="visible"
+      :model-value="visible"
-    :title="`配方详情: ${recipe ? recipe.name : ''}` + (isEditing ? ' (编辑中)' : '')"
+      :title="`配方详情: ${recipe ? recipe.name : ''}` + (isEditing ? ' (编辑中)' : '')"
-    @close="handleClose"
+      @close="handleClose"
-    width="70%"
+      width="70%"
-    top="5vh"
+      top="5vh"
   >
     <div v-if="loading" class="loading-spinner">
-      <el-skeleton :rows="5" animated />
+      <el-skeleton :rows="5" animated/>
     </div>
     <div v-else-if="error" class="error-message">
-       <el-alert
+      <el-alert
           title="加载配方详情失败"
           :description="error"
           type="error"
           show-icon
           @close="error = null"
-        />
+      />
     </div>
     <el-tabs v-else v-model="activeTab">
       <el-tab-pane label="原料列表" name="ingredients">
         <div v-if="!isEditing">
           <el-table :data="ingredientDetails" style="width: 100%">
-            <el-table-column prop="name" label="原料名称" />
+            <el-table-column prop="name" label="原料名称"/>
             <el-table-column prop="percentage" label="占比">
               <template #default="scope">
                 {{ scope.row.percentage.toFixed(2) }}%
@@ -32,10 +32,11 @@
         </div>
         <div v-else>
           <el-table :data="localIngredientDetails" style="width: 100%">
-            <el-table-column prop="name" label="原料名称" />
+            <el-table-column prop="name" label="原料名称"/>
             <el-table-column label="占比">
               <template #default="scope">
-                <el-input-number v-model="scope.row.percentage" :min="0" :max="100" :step="1" :precision="2" @change="updateNutrientSummary"></el-input-number>
+                <el-input-number v-model="scope.row.percentage" :min="0" :max="100" :step="1" :precision="2"
+                                 @change="updateNutrientSummary"></el-input-number>
               </template>
             </el-table-column>
             <el-table-column label="操作">
@@ -46,7 +47,8 @@
           </el-table>
           <div class="add-ingredient-section">
             <el-select v-model="newIngredientId" placeholder="选择要添加的原料" filterable style="flex-grow: 1;">
-              <el-option v-for="item in availableRawMaterials" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              <el-option v-for="item in availableRawMaterials" :key="item.id" :label="item.name"
+                         :value="item.id"></el-option>
             </el-select>
             <el-button type="primary" @click="addIngredient" style="margin-left: 10px;">添加原料</el-button>
           </div>
@@ -54,17 +56,18 @@
       </el-tab-pane>
       <el-tab-pane label="营养成分汇总" name="nutrients">
         <el-table :data="nutrientSummary" style="width: 100%" ref="nutrientTableRef">
-          <el-table-column prop="name" label="营养素名称" />
+          <el-table-column prop="name" label="营养素名称"/>
           <el-table-column prop="value" label="总含量">
-             <template #default="scope">
+            <template #default="scope">
               {{ scope.row.value.toFixed(2) }}
             </template>
           </el-table-column>
         </el-table>
       </el-tab-pane>
     </el-tabs>
-     <template #footer>
+    <template #footer>
       <span class="dialog-footer">
+        <el-button v-if="!isEditing" @click="openAIReviewDialog">AI点评</el-button>
         <el-button v-if="!isEditing" @click="openCompareDialog">对比</el-button>
         <el-button v-if="!isEditing" @click="handleEdit">编辑配方</el-button>
         <el-button v-else @click="handleCancelEdit">取消</el-button>
@@ -73,19 +76,25 @@
       </span>
     </template>
     <RecipeCompareDialog
-      v-model:visible="compareDialogVisible"
+        v-model:visible="compareDialogVisible"
-      :current-recipe="recipe"
+        :current-recipe="recipe"
-      @close="compareDialogVisible = false"
+        @close="compareDialogVisible = false"
+    />
+    <AIRecipeReviewDialog
+        v-model:visible="aiReviewDialogVisible"
+        :recipe="recipe"
+        @cancel="aiReviewDialogVisible = false"
     />
   </el-dialog>
 </template>
 
 <script>
-import { ref, watch, nextTick, computed } from 'vue';
+import {ref, watch, nextTick, computed} from 'vue';
-import { getRawMaterialById, getRawMaterials, updateRecipe, getRecipeById } from '../../api/feed';
+import {getRawMaterialById, getRawMaterials, updateRecipe, getRecipeById} from '../../api/feed';
-import { ElMessage } from 'element-plus';
+import {ElMessage} from 'element-plus';
-import { Delete } from '@element-plus/icons-vue';
+import {Delete} from '@element-plus/icons-vue';
-import RecipeCompareDialog from './RecipeCompareDialog.vue'; // 引入对比组件
+import RecipeCompareDialog from './RecipeCompareDialog.vue';
+import AIRecipeReviewDialog from './AIRecipeReviewDialog.vue';
 
 export default {
   name: 'RecipeDetailDialog',
@@ -96,19 +105,20 @@ export default {
       default: () => null,
     },
   },
-  emits: ['update:visible', 'recipe-updated'], // 添加 recipe-updated 事件
+  emits: ['update:visible', 'recipe-updated'],
-  setup(props, { emit }) {
+  setup(props, {emit}) {
-    const isEditing = ref(false); // 控制是否处于编辑模式
+    const isEditing = ref(false);
     const activeTab = ref('ingredients');
     const loading = ref(false);
     const error = ref(null);
-    const ingredientDetails = ref([]); // 显示模式下的原料详情
+    const ingredientDetails = ref([]);
-    const localIngredientDetails = ref([]); // 编辑模式下的原料详情
+    const localIngredientDetails = ref([]);
     const nutrientSummary = ref([]);
     const nutrientTableRef = ref(null);
-    const allRawMaterials = ref([]); // 所有可用原料列表
+    const allRawMaterials = ref([]);
-    const newIngredientId = ref(null); // 待添加的新原料ID
+    const newIngredientId = ref(null);
-    const compareDialogVisible = ref(false); // 控制对比对话框的显示
+    const compareDialogVisible = ref(false);
+    const aiReviewDialogVisible = ref(false);
 
     const handleClose = () => {
       emit('update:visible', false);
@@ -118,12 +128,16 @@ export default {
       compareDialogVisible.value = true;
     };
 
+    const openAIReviewDialog = () => {
+      aiReviewDialogVisible.value = true;
+    };
+
     const calculateNutrientSummary = (ingredients) => {
       const summary = new Map();
       ingredients.forEach(ing => {
         if (ing.raw_material_nutrients) {
           ing.raw_material_nutrients.forEach(nutrient => {
-            const contribution = nutrient.value * (ing.percentage / 100); // 修正：计算时需要将百分比转换为小数
+            const contribution = nutrient.value * (ing.percentage / 100);
             if (summary.has(nutrient.nutrient_name)) {
               summary.set(nutrient.nutrient_name, summary.get(nutrient.nutrient_name) + contribution);
             } else {
@@ -132,19 +146,14 @@ export default {
           });
         }
       });
-      return Array.from(summary, ([name, value]) => ({ name, value }));
+      return Array.from(summary, ([name, value]) => ({name, value}));
     };
 
-    // 计算属性，用于过滤掉已经存在的原料
     const availableRawMaterials = computed(() => {
       const existingIngredientIds = new Set(localIngredientDetails.value.map(ing => ing.id));
       return allRawMaterials.value.filter(material => !existingIngredientIds.has(material.id));
     });
 
-    /**
-     * 获取并设置配方详情数据
-     * @param {number} recipeId - 配方ID
-     */
     const fetchAndSetRecipeDetails = async (recipeId) => {
       loading.value = true;
       error.value = null;
@@ -160,8 +169,8 @@ export default {
           percentage: latestRecipe.recipe_ingredients[index].percentage,
         }));
 
-        ingredientDetails.value = details; // 用于显示模式
+        ingredientDetails.value = details;
-        localIngredientDetails.value = JSON.parse(JSON.stringify(details)); // 用于编辑模式，深拷贝
+        localIngredientDetails.value = JSON.parse(JSON.stringify(details));
 
         nutrientSummary.value = calculateNutrientSummary(details);
 
@@ -177,12 +186,11 @@ export default {
       if (newVal && props.recipe) {
         await fetchAndSetRecipeDetails(props.recipe.id);
       } else {
-        // 重置数据
         ingredientDetails.value = [];
         localIngredientDetails.value = [];
         nutrientSummary.value = [];
         activeTab.value = 'ingredients';
-        isEditing.value = false; // 关闭对话框时重置编辑状态
+        isEditing.value = false;
       }
     });
 
@@ -196,17 +204,14 @@ export default {
       }
     });
 
-    // 实时更新营养成分汇总
     const updateNutrientSummary = () => {
       nutrientSummary.value = calculateNutrientSummary(localIngredientDetails.value);
     };
 
-    // 进入编辑模式
     const handleEdit = async () => {
       isEditing.value = true;
-      // 获取所有原料列表
       try {
-        const response = await getRawMaterials({ page_size: 999 });
+        const response = await getRawMaterials({page_size: 999});
         if (response.data && response.data.list) {
           allRawMaterials.value = response.data.list;
         }
@@ -215,29 +220,24 @@ export default {
       }
     };
 
-    // 取消编辑
     const handleCancelEdit = () => {
       isEditing.value = false;
-      // 恢复到原始数据
       localIngredientDetails.value = JSON.parse(JSON.stringify(ingredientDetails.value));
-      updateNutrientSummary(); // 重新计算营养成分
+      updateNutrientSummary();
     };
 
-    // 保存配方
     const handleSaveRecipe = async () => {
-      // 验证占比总和是否不超过100
       const totalPercentage = localIngredientDetails.value.reduce((sum, ing) => sum + ing.percentage, 0);
 
-      if (totalPercentage > 100.001) { // 允许浮点数误差
+      if (totalPercentage > 100.001) {
         ElMessage.error(`原料总占比不能超过100%，当前为${totalPercentage.toFixed(2)}%`);
         return;
       }
 
-      // 构造保存数据
       const recipeToSave = {
         id: props.recipe.id,
-        name: props.recipe.name, // 名称不变
+        name: props.recipe.name,
-        description: props.recipe.description, // 描述不变
+        description: props.recipe.description,
         recipe_ingredients: localIngredientDetails.value.map(ing => ({
           raw_material_id: ing.id,
           percentage: ing.percentage,
@@ -248,21 +248,18 @@ export default {
         await updateRecipe(recipeToSave.id, recipeToSave);
         ElMessage.success('配方更新成功');
         isEditing.value = false;
-        emit('recipe-updated'); // 通知父组件配方已更新
+        emit('recipe-updated');
-        // 重新加载配方详情以刷新显示
         await fetchAndSetRecipeDetails(props.recipe.id);
       } catch (err) {
         ElMessage.error('保存配方失败: ' + (err.message || '未知错误'));
       }
     };
 
-    // 移除原料
     const removeIngredient = (index) => {
       localIngredientDetails.value.splice(index, 1);
       updateNutrientSummary();
     };
 
-    // 添加原料
     const addIngredient = () => {
       if (!newIngredientId.value) {
         ElMessage.warning('请选择要添加的原料');
@@ -270,7 +267,7 @@ export default {
       }
       const materialToAdd = allRawMaterials.value.find(m => m.id === newIngredientId.value);
       if (materialToAdd && !localIngredientDetails.value.some(ing => ing.id === materialToAdd.id)) {
-        localIngredientDetails.value.push({ ...materialToAdd, percentage: 0 }); // 默认占比0
+        localIngredientDetails.value.push({...materialToAdd, percentage: 0});
         newIngredientId.value = null;
         updateNutrientSummary();
       } else if (localIngredientDetails.value.some(ing => ing.id === materialToAdd.id)) {
@@ -296,14 +293,17 @@ export default {
       availableRawMaterials,
       newIngredientId,
       updateNutrientSummary,
-      Delete, // 暴露 Delete 图标组件
+      Delete,
-      compareDialogVisible, // 暴露对比对话框的可见性
+      compareDialogVisible,
-      openCompareDialog, // 暴露打开对比对话框的方法
+      openCompareDialog,
+      aiReviewDialogVisible,
+      openAIReviewDialog,
     };
   },
   components: {
     Delete,
-    RecipeCompareDialog, // 注册对比组件
+    RecipeCompareDialog,
+    AIRecipeReviewDialog,
   }
 };
 </script>
@@ -313,9 +313,11 @@ export default {
   padding: 20px;
   text-align: center;
 }
+
 .dialog-footer {
   text-align: right;
 }
+
 .add-ingredient-section {
   margin-top: 20px;
   display: flex;