feat: adjust tool & stuff logic when not strict

src/components/ChooseFood.vue

@@ -14,25 +14,36 @@ import { useInvisibleElement } from '~/composables/helper'
 const recipe = ref<Recipe>(recipeData as Recipe)
 
 const rStore = useRecipeStore()
-const { strict } = storeToRefs(rStore)
+const { strict, curTool } = storeToRefs(rStore)
 const curStuff = computed(() => rStore.selectedStuff)
-const curTools = computed(() => rStore.selectedTools)
 
 // 默认严格模式
 const displayedRecipe = computed(() => {
-  return recipe.value.filter((item) => {
+  const recipes = recipe.value.filter((item) => {
     if (strict.value) {
       const stuffFlag = curStuff.value.every(stuff => item.stuff.includes(stuff))
-      // const toolFlag = curTools.value.every(tool => item.tools?.includes(tool))
+      const toolFlag = item.tools?.includes(curTool.value)
-      const toolFlag = curTools.value.some(tool => item.tools?.includes(tool))
+      return curTool.value ? stuffFlag && toolFlag : stuffFlag
-      return curTools.value.length ? stuffFlag && toolFlag : stuffFlag
     }
     else {
       const stuffFlag = curStuff.value.some(stuff => item.stuff.includes(stuff))
-      const toolFlag = curTools.value.every(tool => item.tools?.includes(tool))
+      const toolFlag = item.tools?.includes(curTool.value)
-      return curTools.value.length ? stuffFlag && toolFlag : stuffFlag
+
+      // 同时存在 厨具和材料，则同时判断
+      if (curTool.value && curStuff.value.length) {
+        return stuffFlag && toolFlag
+      }
+      else {
+        if (curStuff.value.length)
+          return stuffFlag
+        else if (curTool.value)
+          return toolFlag
+
+        return false
+      }
     }
   })
+  return recipes
 })
 
 const { x, y } = usePointer()
@@ -190,7 +201,7 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
     </h2>
     <ToolTag
       v-for="item, i in tools" :key="i"
-      :active="curTools.includes(item.name)"
+      :active="curTool === item.name"
       @click="clickTool(item)"
     >
       <span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
@@ -212,7 +223,7 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
     <Switch />
     <Transition mode="out-in">
       <div p="2">
-        <span v-if="!curStuff.length && !curTools.length" text="sm" p="2">
+        <span v-if="!curStuff.length && !curTool" text="sm" p="2">
           你要先选食材或工具哦～
         </span>
 

src/stores/recipe.ts

@@ -4,10 +4,12 @@ export const useRecipeStore = defineStore('recipe', () => {
   const strict = ref(false)
 
   const curStuff = ref(new Set<string>())
-  const curTools = ref(new Set<string>())
+  // const curTools = ref(new Set<string>())
+  const curTool = ref('')
 
   const selectedStuff = computed(() => Array.from(curStuff.value))
-  const selectedTools = computed(() => Array.from(curTools.value))
+  // const selectedTools = computed(() => Array.from(curTools.value))
+  // const selectedTools = ref('')
 
   function toggleStuff(name: string) {
     if (!curStuff)
@@ -19,12 +21,14 @@ export const useRecipeStore = defineStore('recipe', () => {
   }
 
   function toggleTools(name: string) {
-    if (!curTools)
+    if (curTool.value === name)
-      return
+      curTool.value = ''
-    if (curTools.value.has(name))
-      curTools.value.delete(name)
     else
-      curTools.value.add(name)
+      curTool.value = name
+    // if (curTools.value.has(name))
+    //   curTools.value.delete(name)
+    // else
+    //   curTools.value.add(name)
   }
 
   /**
@@ -32,12 +36,13 @@ export const useRecipeStore = defineStore('recipe', () => {
    */
   function reset() {
     curStuff.value.clear()
-    curTools.value.clear()
+    // curTools.value.clear()
+    curTool.value = ''
   }
 
   return {
     strict,
-    selectedTools,
+    curTool,
     selectedStuff,
     toggleStuff,
     toggleTools,