feat: add tools select

src/components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     StapleTag: typeof import('./components/StapleTag.vue')['default']
+    ToolTag: typeof import('./components/ToolTag.vue')['default']
     VegetableTag: typeof import('./components/VegetableTag.vue')['default']
   }
 }

src/components/ChooseFood.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
 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 { meat, staple, tools, vegetable } from '~/data/foot'
 import recipeData from '~/data/recipe.json'
 import type { Recipe } from '~/types'
 import { useRecipeStore } from '~/stores/recipe'
@@ -11,14 +12,19 @@ const recipe = ref(recipeData as Recipe)
 
 const rStore = useRecipeStore()
 const curStuff = computed(() => rStore.selectedStuff)
+const { curTool } = storeToRefs(rStore)
 
 const strict = ref(false)
 const displayedRecipe = computed(() => {
   return recipe.value.filter((item) => {
-    if (strict.value)
-      return curStuff.value.every(stuff => item.stuff.includes(stuff))
-    else
-      return curStuff.value.some(stuff => item.stuff.includes(stuff))
+    if (strict.value) {
+      const stuffFlag = curStuff.value.every(stuff => item.stuff.includes(stuff))
+      return curTool.value ? stuffFlag && item.tools?.includes(curTool.value) : stuffFlag
+    }
+    else {
+      const stuffFlag = curStuff.value.some(stuff => item.stuff.includes(stuff))
+      return stuffFlag || item.tools?.includes(curTool.value)
+    }
   })
 })
 
@@ -92,6 +98,26 @@ const toggleStuff = (item: StuffItem) => {
       </span>
     </StapleTag>
   </div>
+  <div m="y-4">
+    <h2 text="xl" font="bold" p="1">
+      🔧 工具
+    </h2>
+    <ToolTag
+      v-for="item, i in tools" :key="i"
+      :active="curTool === item.name"
+      @click="curTool = item.name"
+    >
+      <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.name
+        }}
+      </span>
+    </ToolTag>
+  </div>
   <div p="2 y-3" m="2" class="transition shadow hover:shadow-md" bg="gray-400/8">
     <h2 text="xl" font="bold" p="1">
       📄 菜谱

src/components/ToolTag.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="tag rounded" p="x-2"
+    border="~ stone-200 dark:stone-800"
+    :bg="active ? 'stone-500 opacity-90' : 'stone-300 opacity-20'"
+    :text="active ? 'stone-100' : 'stone-800 dark:stone-200'"
+  >
+    <slot />
+  </span>
+</template>

src/data/foot.ts

@@ -15,6 +15,10 @@ export interface StuffItem {
    * 别名，譬如：西红柿/番茄
    */
   alias?: string
+  /**
+   * 图标名称
+   */
+  icon?: string
 }
 
 /**
@@ -148,3 +152,26 @@ export const staple: StuffItem[] = [
     emoji: '🍜',
   },
 ]
+
+export const tools: StuffItem[] = [
+  {
+    name: '烤箱',
+    emoji: '',
+    icon: 'i-mdi-toaster-oven',
+  },
+  {
+    name: '空气炸锅',
+    emoji: '',
+    icon: 'i-fe-frying-pan',
+  },
+  {
+    name: '微波炉',
+    emoji: '',
+    icon: 'i-ic-outline-microwave',
+  },
+  {
+    name: '电饭煲',
+    emoji: '',
+    icon: 'i-gg-smart-home-cooker',
+  },
+]

src/stores/recipe.ts

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