feat: add tools select

package.json

@@ -23,6 +23,9 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.20.2",
+    "@iconify-json/fe": "^1.1.1",
+    "@iconify-json/gg": "^1.1.1",
+    "@iconify-json/ic": "^1.1.2",
     "@iconify-json/mdi": "^1.1.9",
     "@iconify-json/ri": "^1.1.1",
     "@types/markdown-it-link-attributes": "^3.0.1",

pnpm-lock.yaml

@@ -3,6 +3,9 @@ lockfileVersion: 5.3
 specifiers:
   '@antfu/eslint-config': ^0.20.2
   '@gtm-support/vue-gtm': ^1.3.0
+  '@iconify-json/fe': ^1.1.1
+  '@iconify-json/gg': ^1.1.1
+  '@iconify-json/ic': ^1.1.2
   '@iconify-json/mdi': ^1.1.9
   '@iconify-json/ri': ^1.1.1
   '@types/markdown-it-link-attributes': ^3.0.1
@@ -53,6 +56,9 @@ dependencies:
 
 devDependencies:
   '@antfu/eslint-config': 0.20.2_eslint@8.13.0+typescript@4.6.3
+  '@iconify-json/fe': 1.1.1
+  '@iconify-json/gg': 1.1.1
+  '@iconify-json/ic': 1.1.2
   '@iconify-json/mdi': 1.1.9
   '@iconify-json/ri': 1.1.1
   '@types/markdown-it-link-attributes': 3.0.1
@@ -1388,6 +1394,24 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify-json/fe/1.1.1:
+    resolution: {integrity: sha512-FW5XldJ48Igz99Xvhfi3iYou0/JtvSvhTq1BHgftaxyirfMp12fNSqtYStvSA4QTSZkeHVOiAEi4TNeIEUPT7A==}
+    dependencies:
+      '@iconify/types': 1.1.0
+    dev: true
+
+  /@iconify-json/gg/1.1.1:
+    resolution: {integrity: sha512-M0DqErX7GItsiaPt9Se1JvFD5XfcCqW94CL5310dy9JunkNhnKxziNGRSwXgIc13+3bR4vaMEQeeZ+SPWyYdWA==}
+    dependencies:
+      '@iconify/types': 1.1.0
+    dev: true
+
+  /@iconify-json/ic/1.1.2:
+    resolution: {integrity: sha512-OXLXNMECrwg1N7HqG9z+p8eF9NleoV5tZvIH/W3ip3HdZsg1VbEWl0RpI9K5VJjT95xVn2n+gcAgLPD5HNAsXg==}
+    dependencies:
+      '@iconify/types': 1.1.0
+    dev: true
+
   /@iconify-json/mdi/1.1.9:
     resolution: {integrity: sha512-iZY3d7nLmEhSxLU5YBHIxVVPySqNjj6zYcf448TXGBPp2PyToITCOuLEaub0rQ9jBAPOlupQsuPX9ylBfgIJ1w==}
     dependencies:

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,
   }

unocss.config.ts

@@ -9,6 +9,15 @@ import {
   transformerVariantGroup,
 } from 'unocss'
 
+import { tools } from './src/data/foot'
+
+const safelist = 'm-auto text-left'.split(' ')
+
+tools.forEach((item) => {
+  if (item.icon)
+    safelist.push(item.icon)
+})
+
 export default defineConfig({
   shortcuts: [
     ['tag', 'text-sm cursor-pointer inline-flex justify-center items-center transition shadow hover:shadow-md'],
@@ -35,5 +44,5 @@ export default defineConfig({
     transformerDirectives(),
     transformerVariantGroup(),
   ],
-  safelist: 'prose prose-sm m-auto text-left'.split(' '),
+  safelist,
 })