feat: fix new Set store & add alias judge

src/components/ChooseFood.vue

@@ -2,6 +2,7 @@
 import MeatTag from './MeatTag.vue'
 import StapleTag from './StapleTag.vue'
 import DishTag from './DishTag.vue'
+import type { StuffItem } from '~/data/foot'
 import { meat, staple, vegetable } from '~/data/foot'
 import recipeData from '~/data/recipe.json'
 import type { Recipe } from '~/types'
@@ -9,12 +10,19 @@ import { useRecipeStore } from '~/stores/recipe'
 const recipe = ref(recipeData as Recipe)
 
 const rStore = useRecipeStore()
+const curStuff = computed(() => rStore.selectedStuff)
 
 const displayedRecipe = computed(() => {
   return recipe.value.filter((item) => {
-    return Array.from(rStore.curStuff).some(stuff => item.stuff.includes(stuff))
+    return curStuff.value.some(stuff => item.stuff.includes(stuff))
   })
 })
+
+const toggleStuff = (item: StuffItem) => {
+  rStore.toggleStuff(item.name)
+  if (item.alias)
+    rStore.toggleStuff(item.alias)
+}
 </script>
 
 <template>
@@ -24,11 +32,11 @@ const displayedRecipe = computed(() => {
     </h2>
     <VegetableTag
       v-for="item, i in vegetable" :key="i"
-      :active="rStore.curStuff.has(item.name)"
-      @click="rStore.toggleStuff(item.name)"
+      :active="curStuff.includes(item.name)"
+      @click="toggleStuff(item)"
     >
       <span v-if="item.emoji">{{ item.emoji }}</span>
-      <img v-else-if="item.image" class="inline-flex" w="3" :src="item.image">
+      <img v-else-if="item.image" class="inline-flex" width="12" w="3" :src="item.image">
       <span m="l-1">
         {{
           item.name
@@ -42,8 +50,8 @@ const displayedRecipe = computed(() => {
     </h2>
     <MeatTag
       v-for="item, i in meat" :key="i"
-      :active="rStore.curStuff.has(item.name)"
-      @click="rStore.toggleStuff(item.name)"
+      :active="curStuff.includes(item.name)"
+      @click="toggleStuff(item)"
     >
       <span>{{ item.emoji }}</span>
       <span m="l-1">
@@ -59,8 +67,8 @@ const displayedRecipe = computed(() => {
     </h2>
     <StapleTag
       v-for="item, i in staple" :key="i"
-      :active="rStore.curStuff.has(item.name)"
-      @click="rStore.toggleStuff(item.name)"
+      :active="curStuff.includes(item.name)"
+      @click="toggleStuff(item)"
     >
       <span>{{ item.emoji }}</span>
       <span m="l-1">
@@ -75,6 +83,17 @@ const displayedRecipe = computed(() => {
     <h2 text="xl" font="bold" p="1">
       📄 菜谱
     </h2>
-    <DishTag v-for="item, i in displayedRecipe" :key="i" :dish="item" />
+    <Transition mode="out-in">
+      <div v-if="displayedRecipe.length">
+        <DishTag v-for="item, i in displayedRecipe" :key="i" :dish="item" />
+      </div>
+      <p v-else p="2">
+        😢 还没有这样的食谱呢……
+        <br>
+        <a class="text-sm text-blue-500" href="https://docs.qq.com/sheet/DZUpJS0tQZm1YYWlt" target="_blank">
+          隔离食用手册大全
+        </a>
+      </p>
+    </Transition>
   </div>
 </template>