frontend/src/components/RecipeDetailOverlay.vue

@@ -18,6 +18,15 @@
 
       <!-- Card View -->
       <div v-if="viewMode === 'card'" class="detail-card-view">
+        <div class="volume-controls" style="margin-bottom:12px">
+          <button
+            v-for="(drops, ml) in volumeOptions"
+            :key="ml"
+            class="volume-btn"
+            :class="{ active: selectedVolume === ml }"
+            @click="selectedVolume = ml"
+          >{{ ml === '单次' ? '单次' : ml + 'ml' }}</button>
+        </div>
         <div ref="cardRef" class="export-card">
           <div class="export-card-name">{{ recipe.name }}</div>
           <div v-if="recipe.tags && recipe.tags.length" class="export-card-tags">
@@ -32,7 +41,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(ing, i) in recipe.ingredients" :key="i">
+              <tr v-for="(ing, i) in scaledIngredients" :key="i">
                 <td>{{ ing.oil }}</td>
                 <td>{{ ing.drops }}</td>
                 <td>{{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }}</td>
@@ -124,7 +133,7 @@
               class="volume-btn"
               :class="{ active: selectedVolume === ml }"
               @click="selectedVolume = ml"
-            >{{ ml }}ml</button>
+            >{{ ml === '单次' ? '单次' : ml + 'ml' }}</button>
           </div>
         </div>
 
@@ -175,13 +184,26 @@ const ui = useUiStore()
 const viewMode = ref('card')
 const cardRef = ref(null)
 const showTagPicker = ref(false)
-const selectedVolume = ref('5')
+const selectedVolume = ref('单次')
 
 const volumeOptions = VOLUME_DROPS
 
 // Source recipe
 const recipe = computed(() => recipesStore.recipes[props.recipeIndex] || { name: '', ingredients: [], tags: [], note: '' })
-const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
+
+function scaleIngredients(ingredients, volume) {
+  const targetDrops = VOLUME_DROPS[volume]
+  if (!targetDrops) return ingredients  // 单次：不缩放
+  const totalDrops = ingredients.reduce((sum, ing) => sum + (ing.drops || 0), 0)
+  if (totalDrops === 0) return ingredients
+  return ingredients.map(ing => ({
+    ...ing,
+    drops: Math.round(ing.drops * targetDrops / totalDrops),
+  }))
+}
+
+const scaledIngredients = computed(() => scaleIngredients(recipe.value.ingredients, selectedVolume.value))
+const priceInfo = computed(() => oilsStore.fmtCostWithRetail(scaledIngredients.value))
 
 // Editable copies
 const editName = ref('')
@@ -189,7 +211,9 @@ const editNote = ref('')
 const editTags = ref([])
 const editIngredients = ref([])
 
-const editPriceInfo = computed(() => oilsStore.fmtCostWithRetail(editIngredients.value.filter(i => i.oil)))
+const editPriceInfo = computed(() =>
+  oilsStore.fmtCostWithRetail(scaleIngredients(editIngredients.value.filter(i => i.oil), selectedVolume.value))
+)
 
 onMounted(() => {
   const r = recipe.value

frontend/src/stores/oils.js

@@ -5,6 +5,7 @@ import { api } from '../composables/useApi'
 export const DROPS_PER_ML = 18.6
 
 export const VOLUME_DROPS = {
+  '单次': null,
   '2.5': 46,
   '5': 93,
   '10': 186,