From ffee917cff8c8ee387ead37fed8a440f34e93a1b Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Fri, 10 Apr 2026 13:31:52 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=82=E8=80=83=E6=AF=94=E4=BE=8B?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=20+=20=E5=BB=BA=E8=AE=AE=E7=BA=AF?=
 =?UTF-8?q?=E7=B2=BE=E6=B2=B9=E6=BB=B4=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 容量下方加参考比例行：3-10,12,15,20，默认6
- 选择后实时提示"纯精油约X滴"
- 单次模式根据椰子油滴数/比例计算
- 非单次根据总容量/(1+比例)计算

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/RecipeManager.vue | 30 ++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/src/views/RecipeManager.vue b/frontend/src/views/RecipeManager.vue
index 67444ae..c2b9fa7 100644
--- a/frontend/src/views/RecipeManager.vue
+++ b/frontend/src/views/RecipeManager.vue
@@ -213,6 +213,16 @@
             <input v-model.number="formCustomVolume" type="number" min="1" class="drops-sm" placeholder="ml" />
             <span style="font-size:12px;color:#999">ml</span>
           </div>
+          <div class="ratio-row">
+            <span class="ratio-label">参考比例 1:</span>
+            <div class="ratio-options">
+              <button v-for="n in [3,4,5,6,7,8,9,10,12,15,20]" :key="n"
+                class="ratio-btn" :class="{ active: formDilution === n }"
+                @click="formDilution = n"
+              >{{ n }}</button>
+            </div>
+            <span class="ratio-hint">纯精油约 {{ suggestedEoDrops }} 滴</span>
+          </div>
         </div>
 
         <!-- Ingredients table (essential oils only, coconut at bottom) -->
@@ -418,6 +428,15 @@ const cocoActualDrops = computed(() => {
 
 const cocoFillMl = computed(() => Math.round(cocoActualDrops.value / DROPS_PER_ML))
 
+const suggestedEoDrops = computed(() => {
+  if (formVolume.value === 'single') {
+    const cocoDrops = formCocoRow.value ? (formCocoRow.value.drops || 10) : 10
+    return Math.round(cocoDrops / formDilution.value)
+  }
+  const total = targetTotalDrops.value || 0
+  return Math.round(total / (1 + formDilution.value))
+})
+
 const recipeSummaryText = computed(() => {
   const eo = eoTotalDrops.value
   const coco = cocoActualDrops.value
@@ -1495,6 +1514,17 @@ watch(() => recipeStore.recipes, () => {
 .volume-btn.active { background: #e8f5e9; border-color: #7ec6a4; color: #2e7d5a; font-weight: 600; }
 .volume-btn:hover { border-color: #7ec6a4; }
 .custom-volume-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
+.ratio-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
+.ratio-label { font-size: 12px; color: #3e3a44; font-weight: 500; white-space: nowrap; }
+.ratio-options { display: flex; gap: 4px; flex-wrap: wrap; }
+.ratio-btn {
+  padding: 3px 8px; border: 1px solid #e5e4e7; border-radius: 6px; background: #fff;
+  font-size: 11px; cursor: pointer; font-family: inherit; color: #6b6375; min-width: 28px; text-align: center;
+}
+.ratio-btn.active { background: #e8f5e9; border-color: #7ec6a4; color: #2e7d5a; font-weight: 600; }
+.ratio-btn:hover { border-color: #7ec6a4; }
+.ratio-hint { font-size: 12px; color: #4a9d7e; font-weight: 500; white-space: nowrap; }
+
 .coco-row { background: #f8faf8; }
 .coco-label { font-weight: 600; color: #4a9d7e; font-size: 13px; }
 .coco-fill { font-size: 12px; color: #4a9d7e; font-weight: 500; }