feat: use indexDB instead of array filter

components/BasketButton.vue

@@ -1,18 +1,21 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import recipes from '~/data/recipe.json'
 
-defineProps({
+const props = defineProps({
   isVisible: Boolean,
 })
 
 const rStore = useRecipeStore()
 const { displayedRecipe } = storeToRefs(rStore)
+
+const showBasketBtn = computed(async () => {
+  return displayedRecipe.value.length !== rStore.recipesLength && props.isVisible
+})
 </script>
 
 <template>
   <button
-    v-show="displayedRecipe.length !== recipes.length && isVisible"
+    v-show="showBasketBtn"
     class="fixed z-9 inline-flex cursor-pointer items-center justify-center rounded rounded-full shadow hover:shadow-md"
     bg="green-50 dark:green-900" w="10" h="10"
     bottom="18" right="4"

components/ChooseFood.vue

@@ -9,8 +9,8 @@ const rStore = useRecipeStore()
 const { curTool } = storeToRefs(rStore)
 const curStuff = computed(() => rStore.selectedStuff)
 
-const recipeBtn = ref<HTMLButtonElement>()
-const { playAnimation } = useEmojiAnimation(recipeBtn)
+const recipeBtnRef = ref<HTMLButtonElement>()
+const { playAnimation } = useEmojiAnimation(recipeBtnRef)
 
 const gtm = useGtm()
 const recipePanelRef = ref()
@@ -44,65 +44,73 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
       <h2 opacity="90" text="base" font="bold" p="1">
         🥬 菜菜们
       </h2>
-      <VegetableTag
-        v-for="item, i in vegetable" :key="i"
-        :active="curStuff.includes(item.name)"
-        @click="toggleStuff(item, 'vegetable')"
-      >
-        <span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
-        <span v-else-if="item.image" class="inline-flex">
-          <img class="inline-flex" w="2" h="2" width="10" height="10" :src="item.image" :alt="item.name">
-        </span>
-        <span class="inline-flex" m="l-1">{{ item.name }}</span>
-      </VegetableTag>
+      <div>
+        <VegetableTag
+          v-for="item, i in vegetable" :key="i"
+          :active="curStuff.includes(item.name)"
+          @click="toggleStuff(item, 'vegetable')"
+        >
+          <span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
+          <span v-else-if="item.image" class="inline-flex">
+            <img class="inline-flex" w="2" h="2" width="10" height="10" :src="item.image" :alt="item.name">
+          </span>
+          <span class="inline-flex" m="l-1">{{ item.name }}</span>
+        </VegetableTag>
+      </div>
     </div>
     <div m="y-4">
       <h2 opacity="90" text="base" font="bold" p="1">
         🥩 肉肉们
       </h2>
-      <MeatTag
-        v-for="item, i in meat" :key="i"
-        :active="curStuff.includes(item.name)"
-        @click="toggleStuff(item, 'meat')"
-      >
-        <span>{{ item.emoji }}</span>
-        <span m="l-1">{{ item.name }}</span>
-      </MeatTag>
+      <div>
+        <MeatTag
+          v-for="item, i in meat" :key="i"
+          :active="curStuff.includes(item.name)"
+          @click="toggleStuff(item, 'meat')"
+        >
+          <span>{{ item.emoji }}</span>
+          <span m="l-1">{{ item.name }}</span>
+        </MeatTag>
+      </div>
     </div>
     <div m="y-4">
       <h2 opacity="90" text="base" font="bold" p="1">
         🍚 主食也要一起下锅吗？（不选也行）
       </h2>
-      <StapleTag
-        v-for="item, i in staple" :key="i"
-        :active="curStuff.includes(item.name)"
-        @click="toggleStuff(item, 'staple')"
-      >
-        <span>{{ item.emoji }}</span>
-        <span m="l-1">{{ item.name }}</span>
-      </StapleTag>
+      <div>
+        <StapleTag
+          v-for="item, i in staple" :key="i"
+          :active="curStuff.includes(item.name)"
+          @click="toggleStuff(item, 'staple')"
+        >
+          <span>{{ item.emoji }}</span>
+          <span m="l-1">{{ item.name }}</span>
+        </StapleTag>
+      </div>
     </div>
     <div m="t-4">
       <h2 text="xl" font="bold" p="1">
         🍳 再选一下厨具
       </h2>
-      <ToolTag
-        v-for="item, i in tools" :key="i"
-        :active="curTool === item.name"
-        @click="rStore.clickTool(item)"
-      >
-        <span v-if="item.emoji" class="inline-flex">
-          {{ item.emoji }}
-        </span>
-        <span v-else-if="item.icon" class="inline-flex">
-          <div :class="item.icon" />
-        </span>
-        <span class="inline-flex" m="l-1">{{ item.label || item.name }}</span>
-      </ToolTag>
+      <div>
+        <ToolTag
+          v-for="item, i in tools" :key="i"
+          :active="curTool === item.name"
+          @click="rStore.clickTool(item)"
+        >
+          <span v-if="item.emoji" class="inline-flex">
+            {{ item.emoji }}
+          </span>
+          <span v-else-if="item.icon" class="inline-flex">
+            <div :class="item.icon" />
+          </span>
+          <span class="inline-flex" m="l-1">{{ item.label || item.name }}</span>
+        </ToolTag>
+      </div>
     </div>
 
     <Transition>
-      <BasketButton ref="recipeBtn" :is-visible="isVisible" @click="show" />
+      <BasketButton ref="recipeBtnRef" :is-visible="isVisible" @click="show" />
     </Transition>
     <RecipePanel ref="recipePanelRef" />
   </div>

components/RecipePanel.vue

@@ -34,8 +34,8 @@ const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value
             你要先选食材或工具哦～
           </span>
 
-          <div v-else-if="displayedRecipe.length">
-            <DishTag v-for="item, i in displayedRecipe" :key="i" :dish="item" />
+          <div v-else-if="rStore.displayedRecipe.length">
+            <DishTag v-for="item, i in rStore.displayedRecipe" :key="i" :dish="item" />
           </div>
 
           <div v-else text="sm">

components/SearchFoodInput.vue

@@ -28,7 +28,7 @@ onMounted(() => {
         p="x4 y2"
         w="full"
         text="center"
-        bg="transparent"
+        bg="white dark:dark-800"
         border="~ rounded gray-200 dark:gray-700"
         class="focus:dark:gray-500"
       >