refactor: minify recipe.json by remove emojis and get it dynamically

src/components/BaseFooter.vue

@@ -8,7 +8,7 @@ onBeforeMount(() => {
     displayICP.value = ['cook.yunyoujun.cn', 'localhost', '127.0.0.1'].includes(window.location.hostname)
 })
 
-const commitSha = import.meta.env.CF_PAGES_COMMIT_SHA || ''
+const commitSha = import.meta.env.VITE_COMMIT_REF || ''
 const now = import.meta.env.VITE_APP_BUILD_TIME
 const buildDate = (new Date(parseInt(now) * 1000)).toLocaleDateString()
 </script>

src/components/ChooseFood.vue

@@ -5,7 +5,6 @@ import type { StuffItem } from '~/data/food'
 import { meat, staple, tools, vegetable } from '~/data/food'
 import recipeData from '~/data/recipe.json'
 import type { Recipe, RecipeItem } from '~/types'
-import { useRecipeStore } from '~/store/recipe'
 
 import { useInvisibleElement } from '~/composables/helper'
 import { useEmojiAnimation } from '~/composables/animation'

src/components/tags/DishTag.vue

@@ -2,7 +2,9 @@
 import { useGtm } from '@gtm-support/vue-gtm'
 import { tools } from '~/data/food'
 import type { RecipeItem } from '~/types'
-defineProps<{
+import { getEmojisFromStuff } from '~/utils'
+
+const props = defineProps<{
   dish: RecipeItem
 }>()
 
@@ -20,6 +22,11 @@ const triggerGtm = (val: string) => {
     action: val,
   })
 }
+
+const dishLabel = computed(() => {
+  const emojis = getEmojisFromStuff(props.dish.stuff)
+  return `${props.dish.tags?.includes('杂烩') ? '🍲' : emojis.join(' ')} ${props.dish.name}`
+})
 </script>
 
 <template>
@@ -30,7 +37,7 @@ const triggerGtm = (val: string) => {
     @click="triggerGtm(dish.name)"
   >
     <span m="r-1" class="inline-flex justify-center items-center" text="sm blue-700 dark:blue-200">
-      {{ `${dish.tags?.includes('杂烩') ? '🍲' : dish.emojis.join(' ')} ${dish.name}` }}
+      {{ dishLabel }}
     </span>
     <span v-for="tool, i in tools" :key="i" inline-flex>
       <div v-if="dish.tools?.includes(tool.name)" :class="tool.icon" />

src/data/food.ts

@@ -85,7 +85,6 @@ export const vegetable: StuffItem[] = [
   {
     name: '包菜',
     emoji: '🥗',
-    // image: '/images/cabbage-dog.jpg',
   },
   {
     name: '白菜',

src/modules/toast.ts

@@ -1,9 +1,9 @@
-import Toast from 'vue-toastification'
+// import Toast from 'vue-toastification'
 import type { UserModule } from '~/types'
 
-import 'vue-toastification/dist/index.css'
+// import 'vue-toastification/dist/index.css'
 
 export const install: UserModule = ({ app }) => {
   // add google tag manager, and add GA4 in gtag
-  app.use(Toast)
+  // app.use(Toast)
 }

src/types/recipe.ts

@@ -20,7 +20,7 @@ export interface RecipeItem {
   /**
    * 根据材料生成
    */
-  emojis: string[]
+  emojis?: string[]
   /**
    * 难度
    */

src/utils/index.ts

@@ -1,20 +1,17 @@
 import { meat, staple, vegetable } from '~/data/food'
 
+const foodItems = [...vegetable, ...meat, ...staple]
+const foodEmojiMap = new Map()
+foodItems.forEach((item) => {
+  foodEmojiMap.set(item.name, item.emoji)
+})
+
 /**
- * 从材料生成 Emoji
+ * get emojis from stuff name array
  * @param stuff
  * @returns
  */
-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)
-      })
-    })
-  })
+export function getEmojisFromStuff(stuff: string[]) {
+  const emojis: string[] = stuff.map(name => foodEmojiMap.get(name)).filter(item => !!item)
   return emojis
 }