feat: add emojis for recipe

src/components/DishTag.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useGtm } from '@gtm-support/vue-gtm'
+import { meat, staple, vegetable } from '~/data/food'
 import type { RecipeItem } from '~/types'
 defineProps<{
   dish: RecipeItem
@@ -15,6 +16,21 @@ const triggerGtm = (val: string) => {
     label: '跳转菜谱',
   })
 }
+
+const getDishName = (dish: RecipeItem) => {
+  const name = dish.name
+  const emojis: string[] = []
+  dish.stuff.forEach((item) => {
+    const kinds = [vegetable, meat, staple]
+    kinds.forEach((kind) => {
+      kind.forEach((m) => {
+        if (m.name === item)
+          emojis.push(m.emoji)
+      })
+    })
+  })
+  return `${emojis.join(' ')} ${name}`
+}
 </script>
 
 <template>
@@ -24,6 +40,6 @@ const triggerGtm = (val: string) => {
     bg="blue-300 opacity-20"
     @click="triggerGtm(dish.name)"
   >
-    <span text="sm blue-700 dark:blue-200">{{ dish.name }}</span>
+    <span text="sm blue-700 dark:blue-200">{{ getDishName(dish) }}</span>
   </a>
 </template>