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" />