优化展示

src/components/feed/NutrientEditor.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="nutrient-editor">
-    <el-form label-width="200px" style="max-height: 300px; overflow-y: auto;">
+    <el-form label-width="250px" style="max-height: 400px; overflow-y: auto;">
       <el-form-item v-for="(nutrient, index) in localNutrients" :key="index" :label="nutrient.nutrient_name">
-        <el-input-number v-model="nutrient.value" :min="0" controls-position="right" style="width: 150px;"></el-input-number>
+        <el-input-number v-model="nutrient.value" :min="0" controls-position="right" style="width: 200px;"></el-input-number>
         <el-button type="danger" @click="removeNutrient(index)" style="margin-left: 10px;">
           <el-icon><Delete /></el-icon>
         </el-button>
@@ -10,7 +10,7 @@
     </el-form>
 
     <div class="add-nutrient-section">
-      <el-select v-model="newNutrientId" placeholder="选择要添加的营养素" filterable style="width: 250px;">
+      <el-select v-model="newNutrientId" placeholder="选择要添加的营养素" filterable style="flex-grow: 1;">
         <el-option v-for="item in availableNutrients" :key="item.id" :label="item.name" :value="item.id"></el-option>
       </el-select>
       <el-button type="primary" @click="addNutrient" style="margin-left: 10px;">添加</el-button>

src/components/feed/PigNutrientRequirementsEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pig-nutrient-requirements-editor">
-    <el-form style="max-height: 300px; overflow-y: auto;">
+    <el-form label-width="250px" style="max-height: 300px; overflow-y: auto;">
       <el-form-item v-for="(req, index) in localNutrientRequirements" :key="req.nutrient_id" :label="req.nutrient_name">
         <div class="nutrient-input-group">
           <el-input-number
@@ -30,7 +30,7 @@
     </el-form>
 
     <div class="add-nutrient-section">
-      <el-select v-model="newNutrientId" placeholder="选择要添加的营养素" filterable style="width: 250px;">
+      <el-select v-model="newNutrientId" placeholder="选择要添加的营养素" filterable style="flex-grow: 1;">
         <el-option v-for="item in availableNutrients" :key="item.id" :label="item.name" :value="item.id"></el-option>
       </el-select>
       <el-button type="primary" @click="addNutrientRequirement" style="margin-left: 10px;">添加</el-button>
@@ -167,14 +167,12 @@ export default {
 }
 /* 确保 el-form-item 的标签不换行 */
 .el-form-item {
-  display: flex; /* 使用 flex 布局 */
+  /* 移除 display: flex; 因为 label-width 会处理对齐 */
 }
 .el-form-item__label {
   white-space: nowrap; /* 强制不换行 */
-  flex-shrink: 0; /* 防止收缩 */
+  /* 移除 flex-shrink: 0; 和 min-width: 150px; 因为 label-width 会处理宽度 */
   text-align: right; /* 标签右对齐 */
-  /* 可以根据需要调整一个最小宽度，但通常 flex-shrink: 0 配合内容自适应就足够 */
-  min-width: 150px; /* 示例：给一个最小宽度，确保对齐效果 */
 }
 .nutrient-input-group {
   display: flex;