feat: add filter input

src/components.d.ts

@@ -19,6 +19,8 @@ declare module '@vue/runtime-core' {
     ReloadPrompt: typeof import('./components/ReloadPrompt.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Search: typeof import('./components/Search.vue')['default']
+    SearchFood: typeof import('./components/SearchFood.vue')['default']
     StapleTag: typeof import('./components/tags/StapleTag.vue')['default']
     Switch: typeof import('./components/Switch.vue')['default']
     ToggleMode: typeof import('./components/ToggleMode.vue')['default']

src/components/ChooseFood.vue

@@ -5,7 +5,7 @@ import type { StuffItem } from '~/data/food'
 import { meat, staple, tools, vegetable } from '~/data/food'
 import recipeData from '~/data/recipe.json'
 import type { Recipe, RecipeItem } from '~/types'
-import { useRecipeStore } from '~/stores/recipe'
+import { useRecipeStore } from '~/store/recipe'
 
 import { useInvisibleElement } from '~/composables/helper'
 import { useEmojiAnimation } from '~/composables/animation'
@@ -161,6 +161,8 @@ const randomRecipe = ref<RecipeItem>(generateRandomRecipe())
 
     <!-- <Switch /> -->
     <div class="cook-recipes" p="2">
+      <SearchFood />
+
       <Transition mode="out-in">
         <div class="cook-filter-recipes">
           <span v-if="!curStuff.length && !curTool" text="sm" p="2">

src/components/InstallPwa.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useAppStore } from '~/stores/app'
+import { useAppStore } from '~/store/app'
 const app = useAppStore()
 
 const install = () => {

src/components/SearchFood.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { useRecipeStore } from "~/store/recipe";
+const rStore = useRecipeStore()
+
+const clearKeyword = () => {
+  rStore.keyword = ''
+}
+</script>
+
+<template>
+  <div m="auto b-2" max-w="500px">
+    <div relative text-xs>
+      <div v-show="rStore.keyword" cursor="pointer" absolute right-2 inline-flex justify="center" items-center h="full" opacity="70" @click="clearKeyword">
+        <div i-ri-close-line />
+      </div>
+      <input
+        id="input"
+        v-model="rStore.keyword"
+        placeholder="关键字过滤"
+        aria-label="搜索关键字"
+        type="text"
+        autocomplete="false"
+        p="x4 y2"
+        w="full"
+        text="center"
+        bg="transparent"
+        border="~ rounded gray-200 dark:gray-700"
+        class="focus:(dark:gray-500)"
+      >
+      <label class="hidden" for="input">快速搜索</label>
+    </div>
+  </div>
+</template>

src/components/ToggleMode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { SearchMode } from '~/stores/recipe'
-import { useRecipeStore } from '~/stores/recipe'
+import type { SearchMode } from '~/store/recipe'
+import { useRecipeStore } from '~/store/recipe'
 
 const rStore = useRecipeStore()
 

src/composables/recipe.ts

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia'
 import { useGtm } from '@gtm-support/vue-gtm'
 import type { Recipe } from '~/types'
 
-import { useRecipeStore } from '~/stores/recipe'
+import { useRecipeStore } from '~/store/recipe'
 import type { StuffItem } from '~/data/food'
 
 export function useRecipe(recipe: Ref<Recipe>) {
@@ -15,6 +15,12 @@ export function useRecipe(recipe: Ref<Recipe>) {
 
   // 默认严格模式
   const displayedRecipe = computed(() => {
+    // if keyword exist, return result directly
+    const keyword = rStore.keyword
+    if (keyword) {
+      return recipe.value.filter(item => item.name.includes(keyword))
+    }
+
     if (curMode.value === 'strict') {
       return recipe.value.filter((item) => {
         const stuffFlag = curStuff.value.every(stuff => item.stuff.includes(stuff))

src/pages/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { links } from '~/constants';
-import { useRecipeStore } from '~/stores/recipe'
+import { useRecipeStore } from '~/store/recipe'
 const rStore = useRecipeStore()
 
 </script>

src/store/recipe.ts

@@ -10,6 +10,11 @@ const namespace = 'cook'
 export type SearchMode = 'survival' | 'loose' | 'strict'
 
 export const useRecipeStore = defineStore('recipe', () => {
+  /**
+   * 搜索关键字
+   */
+  const keyword = ref('')
+
   // can not exported
   const curStuff = useStorage(`${namespace}:stuff`, new Set<string>())
   // const curTools = ref(new Set<string>())
@@ -59,6 +64,7 @@ export const useRecipeStore = defineStore('recipe', () => {
   }
 
   return {
+    keyword,
     curTool,
     curMode,
     selectedStuff,

src/styles/index.scss

@@ -13,6 +13,10 @@ html.dark {
   background: #121212;
 }
 
+input:focus {
+  outline: none;
+}
+
 #nprogress {
   pointer-events: none;
 }

src/utils/pwa.ts

@@ -1,5 +1,5 @@
 import { isClient } from '@vueuse/core'
-import { useAppStore } from '~/stores/app'
+import { useAppStore } from '~/store/app'
 
 /**
  * https://web.dev/customize-install/#detect-install