Fix critical bugs: oil prices ¥0.00, ingredient field mapping

- oils store: change Map to plain object for Vue reactivity
- recipes store: map `oil_name` from API (was only mapping `oil`/`name`)
- OilReference: fix .get() calls to bracket access
- Add price-display.cy.js regression test (3 tests)
- Add visual-check.cy.js for screenshot verification

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

frontend/src/stores/oils.js

@@ -13,16 +13,16 @@ export const VOLUME_DROPS = {
 }
 
 export const useOilsStore = defineStore('oils', () => {
-  const oils = ref(new Map())
-  const oilsMeta = ref(new Map())
+  const oils = ref({})
+  const oilsMeta = ref({})
 
   // Getters
   const oilNames = computed(() =>
-    [...oils.value.keys()].sort((a, b) => a.localeCompare(b, 'zh'))
+    Object.keys(oils.value).sort((a, b) => a.localeCompare(b, 'zh'))
   )
 
   function pricePerDrop(name) {
-    return oils.value.get(name) || 0
+    return oils.value[name] || 0
   }
 
   function calcCost(ingredients) {
@@ -33,7 +33,7 @@ export const useOilsStore = defineStore('oils', () => {
 
   function calcRetailCost(ingredients) {
     return ingredients.reduce((sum, ing) => {
-      const meta = oilsMeta.value.get(ing.oil)
+      const meta = oilsMeta.value[ing.oil]
       if (meta && meta.retailPrice && meta.dropCount) {
         return sum + (meta.retailPrice / meta.dropCount) * ing.drops
       }
@@ -58,17 +58,17 @@ export const useOilsStore = defineStore('oils', () => {
   // Actions
   async function loadOils() {
     const data = await api.get('/api/oils')
-    const newOils = new Map()
-    const newMeta = new Map()
+    const newOils = {}
+    const newMeta = {}
     for (const oil of data) {
       const ppd = oil.drop_count ? oil.bottle_price / oil.drop_count : 0
-      newOils.set(oil.name, ppd)
-      newMeta.set(oil.name, {
+      newOils[oil.name] = ppd
+      newMeta[oil.name] = {
         bottlePrice: oil.bottle_price,
         dropCount: oil.drop_count,
         retailPrice: oil.retail_price ?? null,
         isActive: oil.is_active ?? true,
-      })
+      }
     }
     oils.value = newOils
     oilsMeta.value = newMeta
@@ -86,8 +86,8 @@ export const useOilsStore = defineStore('oils', () => {
 
   async function deleteOil(name) {
     await api.delete(`/api/oils/${encodeURIComponent(name)}`)
-    oils.value.delete(name)
-    oilsMeta.value.delete(name)
+    delete oils.value[name]
+    delete oilsMeta.value[name]
   }
 
   return {

frontend/src/stores/recipes.js

@@ -19,7 +19,7 @@ export const useRecipesStore = defineStore('recipes', () => {
       note: r.note ?? '',
       tags: r.tags ?? [],
       ingredients: (r.ingredients ?? []).map((ing) => ({
-        oil: ing.oil ?? ing.name,
+        oil: ing.oil_name ?? ing.oil ?? ing.name,
         drops: ing.drops,
       })),
     }))

frontend/src/views/OilReference.vue

@@ -247,7 +247,7 @@ const recipesWithOil = computed(() => {
 })
 
 function getMeta(name) {
-  return oils.oilsMeta.get(name)
+  return oils.oilsMeta[name]
 }
 
 function getDropsForOil(recipe, oilName) {
@@ -280,7 +280,7 @@ async function addOil() {
 
 function editOil(name) {
   editingOilName.value = name
-  const meta = oils.oilsMeta.get(name)
+  const meta = oils.oilsMeta[name]
   editBottlePrice.value = meta?.bottlePrice || 0
   editDropCount.value = meta?.dropCount || 0
   editRetailPrice.value = meta?.retailPrice || null