feat: 含护肤品的配方卡片显示容量（从备注提取ml/克，否则显示"调配"）

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/RecipeCard.vue

@@ -50,11 +50,21 @@ const isFav = computed(() => recipesStore.isFavorite(props.recipe))
 const volumeLabel = computed(() => {
   const ings = props.recipe.ingredients || []
   const coco = ings.find(i => i.oil === '椰子油')
-  if (!coco || !coco.drops) return ''
-  const totalDrops = ings.reduce((s, i) => s + (i.drops || 0), 0)
-  const ml = totalDrops / 18.6
-  if (ml <= 2) return '单次'
-  return `${Math.round(ml)}ml`
+  if (coco && coco.drops) {
+    const totalDrops = ings.reduce((s, i) => s + (i.drops || 0), 0)
+    const ml = totalDrops / 18.6
+    if (ml <= 2) return '单次'
+    return `${Math.round(ml)}ml`
+  }
+  // Non-coconut: check if has portion product, extract volume from note
+  const hasPortion = ings.some(i => oilsStore.isPortionUnit(i.oil))
+  if (hasPortion) {
+    const note = props.recipe.note || ''
+    const m = note.match(/(\d+)\s*(ml|毫升|克|g)/i)
+    if (m) return `${m[1]}${m[2].toLowerCase()}`
+    return '调配'
+  }
+  return ''
 })
 </script>