From 7d26f9ba84b9598b320bf0696a5833e255bc399b Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Tue, 7 Nov 2023 01:06:30 +0800
Subject: [PATCH] feat: add search keyword

---
 components/common/SearchRecipe.vue | 104 +++++++++++++++++++++++++++++
 layouts/default.vue                |   3 +-
 pages/user.vue                     |   2 +-
 3 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 components/common/SearchRecipe.vue

diff --git a/components/common/SearchRecipe.vue b/components/common/SearchRecipe.vue
new file mode 100644
index 0000000..0908a91
--- /dev/null
+++ b/components/common/SearchRecipe.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+
+import { db } from '~/utils/db'
+
+const isOpen = ref(false)
+
+function closeModal() {
+  isOpen.value = false
+}
+function openModal() {
+  isOpen.value = true
+}
+
+const keyword = ref('')
+async function getFilterRecipes(keyword: string) {
+  return db.recipes.filter((recipe) => {
+    return recipe.name.includes(keyword)
+  }).toArray()
+}
+const filteredRecipes = computedAsync(async () => {
+  return await getFilterRecipes(keyword.value)
+})
+</script>
+
+<template>
+  <YlfIconButton
+    absolute right-3 top-5
+    class="icon-btn hover:text-yellow-400 !outline-none"
+    text-xl
+    title="切换" @click="openModal"
+  >
+    <div i="ri-search-line" />
+  </YlfIconButton>
+
+  <TransitionRoot appear :show="isOpen" as="template">
+    <Dialog as="div" class="relative z-10" @close="closeModal">
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div
+          class="h-full flex justify-center text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel
+              class="h-full max-w-xl w-full transform overflow-hidden bg-white p-4 text-left align-middle shadow-xl transition-all"
+              md="mt-4 rounded-2xl"
+              overflow="auto"
+              flex="~ col"
+            >
+              <DialogTitle
+                as="h3"
+                class="flex items-center justify-center text-lg font-medium leading-6 text-gray-900"
+              >
+                <div relative inline-flex flex="grow">
+                  <div
+                    i-ri-search-line
+                    class="absolute left-3 top-2 cursor-pointer text-gray-400"
+                  />
+                  <input
+                    v-model="keyword"
+                    type="text"
+                    class="w-full border border-gray-300 rounded-full text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder-gray-400"
+                    py-2 pl-10 pr-3
+                    placeholder="搜索菜谱"
+                  >
+                  <div
+                    v-if="keyword" i-ri-close-line
+                    class="absolute right-3 top-2 cursor-pointer text-gray-400"
+                    @click="keyword = ''"
+                  />
+                </div>
+                <div ml-2 inline-flex op="70" text-base @click="closeModal">
+                  取消
+                </div>
+              </DialogTitle>
+              <div flex="~ col grow" overflow="auto" class="mt-2" text-xs>
+                <DishTag v-for="item, i in filteredRecipes" :key="i" :dish="item" />
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index d6cb240..bb15084 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,8 @@
 <template>
   <main class="cook-main text-center text-gray-700 dark:text-gray-200" p="t-8 b-$cook-bottom-menu-height">
     <slot />
-    <DarkToggle absolute right-3 top-5 />
+    <DarkToggle absolute left-3 top-5 />
+    <SearchRecipe />
     <TheBottomMenu fixed bottom-0 left-0 right-0 />
   </main>
 </template>
diff --git a/pages/user.vue b/pages/user.vue
index 22a5bc2..1ebc70b 100644
--- a/pages/user.vue
+++ b/pages/user.vue
@@ -23,7 +23,7 @@ import { links } from '~/constants'
       </YlfForm>
 
       <YlfForm>
-        <YlfFormItem icon="i-ri-article-line" label="自定义菜谱" to="/cookbooks/" />
+        <YlfFormItem icon="i-ri-article-line" label="自定义菜谱 TODO" to="/cookbooks/" />
       </YlfForm>
 
       <YlfForm>