feat: add filter input

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()