From 1ca9943d50864fb4e0d72a35b5a9e054eb79bdf2 Mon Sep 17 00:00:00 2001
From: YoYo <yoyo@euphon.net>
Date: Tue, 7 Apr 2026 22:04:28 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=9E=E5=8D=95=E6=AC=A1=E5=AE=B9?=
 =?UTF-8?q?=E9=87=8F=E6=97=B6=E6=BB=B4=E6=95=B0=E5=9B=9B=E8=88=8D=E4=BA=94?=
 =?UTF-8?q?=E5=85=A5=E4=B8=BA=E6=95=B4=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- VOLUME_DROPS 新增「单次」选项（值为 null，不缩放）
- 新增 scaleIngredients()，按目标容量等比缩放滴数，非单次时 Math.round 取整
- 卡片预览新增容量选择器，使用 scaledIngredients 展示缩放后的滴数及成本
- 编辑器成本合计同步反映已选容量的缩放结果

Co-Authored-By: YoYo <yoyo@euphon.net>
---
 .../src/components/RecipeDetailOverlay.vue    | 34 ++++++++++++++++---
 frontend/src/stores/oils.js                   |  1 +
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 20a4d26..a7be645 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/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
diff --git a/frontend/src/stores/oils.js b/frontend/src/stores/oils.js
index d5df3bc..0111e1a 100644
--- a/frontend/src/stores/oils.js
+++ b/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,
-- 
2.49.1