feat: generate emojis pre

src/components/ChooseFood.vue

@@ -8,7 +8,12 @@ import { meat, staple, tools, vegetable } from '~/data/food'
 import recipeData from '~/data/recipe.json'
 import type { Recipe } from '~/types'
 import { useRecipeStore } from '~/stores/recipe'
-const recipe = ref(recipeData as Recipe)
+import { generateEmojisFromStuff } from '~/utils'
+
+(recipeData as Recipe).forEach((recipe) => {
+  recipe.emojis = generateEmojisFromStuff(recipe.stuff)
+})
+const recipe = ref<Recipe>(recipeData as Recipe)
 
 const rStore = useRecipeStore()
 const curStuff = computed(() => rStore.selectedStuff)
@@ -65,7 +70,7 @@ const clickTool = (item: StuffItem) => {
 <template>
   <div m="y-4">
     <h2 text="xl" font="bold" p="1">
-      如果有 🥬 菜菜
+      🥬 今天想吃菜
     </h2>
     <VegetableTag
       v-for="item, i in vegetable" :key="i"
@@ -85,7 +90,7 @@ const clickTool = (item: StuffItem) => {
   </div>
   <div m="y-4">
     <h2 text="xl" font="bold" p="1">
-      如果有 🥩 肉肉
+      🥩 还想吃点肉
     </h2>
     <MeatTag
       v-for="item, i in meat" :key="i"
@@ -102,7 +107,7 @@ const clickTool = (item: StuffItem) => {
   </div>
   <div m="y-4">
     <h2 text="xl" font="bold" p="1">
-      想来点 🍚 主食
+      🍚 想来点主食
     </h2>
     <StapleTag
       v-for="item, i in staple" :key="i"
@@ -119,7 +124,7 @@ const clickTool = (item: StuffItem) => {
   </div>
   <div m="t-4">
     <h2 text="xl" font="bold" p="1">
-      打算用 🍳 厨具
+      🍳 打算用厨具
     </h2>
     <ToolTag
       v-for="item, i in tools" :key="i"

src/components/DishTag.vue

@@ -1,6 +1,5 @@
 <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
@@ -16,21 +15,6 @@ 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>
@@ -40,6 +24,6 @@ const getDishName = (dish: RecipeItem) => {
     bg="blue-300 opacity-20"
     @click="triggerGtm(dish.name)"
   >
-    <span text="sm blue-700 dark:blue-200">{{ getDishName(dish) }}</span>
+    <span text="sm blue-700 dark:blue-200">{{ dish.emojis.join(' ') + ' ' + dish.name }}</span>
   </a>
 </template>

src/components/ToolTag.vue

@@ -7,8 +7,8 @@ defineProps<{
 <template>
   <span
     class="tag rounded" p="x-2"
-    :border="'~ stone-200 dark:stone-800' + (active ? 'dark:stone-200' : '')"
-    :bg="active ? 'stone-600 opacity-100' : 'stone-300 opacity-20'"
+    :border="'~ stone-200 dark:stone-600'"
+    :bg="active ? 'stone-600 opacity-100' : 'stone-300 opacity-5'"
     :text="active ? 'stone-100' : 'stone-800 dark:stone-200'"
   >
     <slot />

src/data/food.ts

@@ -68,7 +68,7 @@ export const vegetable: StuffItem[] = [
   },
   {
     name: '莴笋',
-    emoji: '🥗',
+    emoji: '🎍',
   },
   {
     name: '菌菇',

src/types/recipe.ts

@@ -13,6 +13,10 @@ export interface RecipeItem {
    * 材料
    */
   stuff: string[]
+  /**
+   * 根据材料生成
+   */
+  emojis: string[]
   /**
    * 难度
    */

src/utils/index.ts

@@ -0,0 +1,15 @@
+import { meat, staple, vegetable } from '~/data/food'
+
+export function generateEmojisFromStuff(stuff: string[]) {
+  const emojis: string[] = []
+  stuff.forEach((item) => {
+    const kinds = [vegetable, meat, staple]
+    kinds.forEach((kind) => {
+      kind.forEach((m) => {
+        if (m.name === item)
+          emojis.push(m.emoji)
+      })
+    })
+  })
+  return emojis
+}