oil-formula-calculator/frontend/src/components/RecipeCard.vue

<template>
  <div class="recipe-card" @click="$emit('click', index)">
    <div class="recipe-card-name">{{ recipe.name }} <span v-if="volumeLabel" class="recipe-card-volume">{{ volumeLabel }}</span></div>
    <div v-if="visibleTags.length" class="recipe-card-tags">
      <span v-for="tag in visibleTags" :key="tag" class="tag" :class="{ 'tag-reviewed': tag === '已审核' }">{{ tag }}</span>
    </div>
    <div class="recipe-card-oils">{{ oilNames }}</div>
    <div class="recipe-card-bottom">
      <div class="recipe-card-price">💰 {{ priceInfo.cost }}</div>
      <button
        class="fav-btn"
        :class="{ favorited: isFav }"
        @click.stop="$emit('toggle-fav', recipe._id)"
        :title="isFav ? '取消收藏' : '收藏'"
      >{{ isFav ? '★' : '☆' }}</button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useOilsStore } from '../stores/oils'
import { useRecipesStore, EDITOR_ONLY_TAGS } from '../stores/recipes'
import { useAuthStore } from '../stores/auth'

const props = defineProps({
  recipe: { type: Object, required: true },
  index: { type: Number, required: true },
})

defineEmits(['click', 'toggle-fav'])

const oilsStore = useOilsStore()
const recipesStore = useRecipesStore()
const auth = useAuthStore()

const visibleTags = computed(() => {
  if (!props.recipe.tags) return []
  if (!auth.canEdit) return []
  const tags = [...props.recipe.tags]
  return tags.sort((a, b) => a.localeCompare(b, 'zh'))
})

const oilNames = computed(() =>
  [...props.recipe.ingredients].sort((a, b) => a.oil.localeCompare(b.oil, 'zh')).map(i => i.oil).join('、')
)
const priceInfo = computed(() => oilsStore.fmtCostWithRetail(props.recipe.ingredients))
const isFav = computed(() => recipesStore.isFavorite(props.recipe))

const volumeLabel = computed(() => {
  // Priority 1: stored volume from editor selection
  const vol = props.recipe.volume
  if (vol) {
    if (vol === 'single') return '单次'
    if (vol === 'custom') return ''
    if (/^\d+$/.test(vol)) return `${vol}ml`
    return vol
  }
  // Priority 2: calculate from ingredients
  const ings = props.recipe.ingredients || []
  const coco = ings.find(i => i.oil === '椰子油')
  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`
  }
  // Priority 3: sum portion products as ml
  let totalMl = 0
  let hasProduct = false
  for (const ing of ings) {
    if (!oilsStore.isPortionUnit(ing.oil)) continue
    hasProduct = true
    totalMl += ing.drops || 0
  }
  if (hasProduct && totalMl > 0) return `${Math.round(totalMl)}ml`
  return ''
})
</script>

<style scoped>
.recipe-card {
  background: white;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
  border: 2px solid transparent;
  transition: all 0.2s;
}

.recipe-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(90, 60, 30, 0.15);
  border-color: #c8ddc9;
}

.recipe-card-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 600;
  color: #2c2416;
  margin-bottom: 8px;
}

.recipe-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #eef4ee;
  color: #5a7d5e;
}

.tag-reviewed {
  background: #e3f2fd;
  color: #1565c0;
}

.recipe-card-oils {
  font-size: 12px;
  color: #9a8570;
  line-height: 1.7;
}

.recipe-card-volume {
  font-size: 10px;
  color: #b0aab5;
  font-weight: 400;
  margin-left: 4px;
}

.recipe-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.recipe-card-price {
  font-size: 13px;
  color: #5a7d5e;
  font-weight: 600;
}

.fav-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #d4cfc7;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.2s;
}

.fav-btn.favorited {
  color: #f5a623;
}

.fav-btn:hover {
  color: #f5a623;
}
</style>