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)"
+      :active="curStuff.includes(item.name)"
-      @click="rStore.toggleStuff(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)"
+      :active="curStuff.includes(item.name)"
-      @click="rStore.toggleStuff(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)"
+      :active="curStuff.includes(item.name)"
-      @click="rStore.toggleStuff(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>
+    <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>

src/data/foot.ts

@@ -11,6 +11,10 @@ export interface StuffItem {
    * 图片链接
    */
   image?: string
+  /**
+   * 别名，譬如：西红柿/番茄
+   */
+  alias?: string
 }
 
 /**
@@ -40,6 +44,7 @@ export const vegetable: StuffItem[] = [
   {
     name: '番茄',
     emoji: '🍅',
+    alias: '西红柿',
   },
   {
     name: '芹菜',

src/pages/about.md

@@ -3,8 +3,6 @@ title: 关于
 ---
 
 <div class="text-center">
-  <!-- You can use Vue components inside markdown -->
-  <div i-ri-information-line class="text-4xl -mb-6 m-auto" />
   <h3>关于</h3>
 </div>
 

src/stores/recipe.ts

@@ -2,8 +2,11 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 
 export const useRecipeStore = defineStore('recipe', () => {
   const curStuff = ref(new Set<string>())
+  const selectedStuff = computed(() => Array.from(curStuff.value))
 
   function toggleStuff(name: string) {
+    if (!curStuff)
+      return
     if (curStuff.value.has(name))
       curStuff.value.delete(name)
     else
@@ -11,7 +14,7 @@ export const useRecipeStore = defineStore('recipe', () => {
   }
 
   return {
-    curStuff,
+    selectedStuff,
     toggleStuff,
   }
 })

src/styles/index.scss

@@ -12,3 +12,14 @@ a {
   padding: 2px 4px;
   // border: 1px solid var(--c-text);
 }
+
+/* we will explain what these classes do next! */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}