feat: 参考比例选择器 + 建议纯精油滴数

- 容量下方加参考比例行：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

@@ -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; }