feat: add faq items

components/BasketButton.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineProps({
+  isVisible: Boolean,
+})
+
+const rStore = useRecipeStore()
+</script>
+
+<template>
+  <button
+    v-show="rStore.displayedRecipe.length !== rStore.recipes.length && isVisible"
+    class="fixed z-9 inline-flex cursor-pointer items-center justify-center rounded rounded-full shadow hover:shadow-md"
+    bg="green-50 dark:green-900" w="10" h="10"
+    bottom="18" right="4"
+    text="green-600 dark:green-300"
+  >
+    <span v-if="rStore.displayedRecipe.length">
+      <div i-mdi-bowl-mix-outline />
+    </span>
+    <span v-else>
+      <div i-mdi-bowl-outline />
+    </span>
+  </button>
+</template>

components/ChooseFood.vue

@@ -3,16 +3,12 @@ import { storeToRefs } from 'pinia'
 import type { StuffItem } from '~/data/food'
 import { meat, staple, tools, vegetable } from '~/data/food'
 
-import { useInvisibleElement } from '~/composables/helper'
 import { useEmojiAnimation } from '~/composables/animation'
-import { useRecipe } from '~/composables/recipe'
 
 const rStore = useRecipeStore()
 const { curTool } = storeToRefs(rStore)
 const curStuff = computed(() => rStore.selectedStuff)
 
-const { displayedRecipe, clickTool } = useRecipe(rStore.recipes)
-
 const recipeBtn = ref<HTMLButtonElement>()
 const { playAnimation } = useEmojiAnimation(recipeBtn)
 
@@ -35,30 +31,9 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
     action: item.name,
   })
 }
-
-const recipePanel = ref()
-const { isVisible, show } = useInvisibleElement(recipePanel)
 </script>
 
 <template>
-  <Transition>
-    <button
-      v-show="displayedRecipe.length !== rStore.recipes.length && isVisible"
-      ref="recipeBtn"
-      class="fixed z-9 inline-flex cursor-pointer items-center justify-center rounded rounded-full shadow hover:shadow-md"
-      bg="green-50 dark:green-900" w="10" h="10" bottom="4" right="4"
-      text="green-600 dark:green-300"
-      @click="show"
-    >
-      <span v-if="displayedRecipe.length">
-        <div i-mdi-bowl-mix-outline />
-      </span>
-      <span v-else>
-        <div i-mdi-bowl-outline />
-      </span>
-    </button>
-  </Transition>
-
   <h2 m="t-4" text="xl" font="bold" p="1">
     🥘 先选一下食材
   </h2>
@@ -123,7 +98,7 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
     <ToolTag
       v-for="item, i in tools" :key="i"
       :active="curTool === item.name"
-      @click="clickTool(item)"
+      @click="rStore.clickTool(item)"
     >
       <span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
       <span v-else-if="item.icon" class="inline-flex">
@@ -137,44 +112,5 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
     </ToolTag>
   </div>
 
-  <div ref="recipePanel" m="2 t-4" p="2" class="relative shadow transition hover:shadow-md" bg="gray-400/8">
-    <h2 text="xl" font="bold" p="1">
-      🍲 来看看组合出的菜谱吧！
-    </h2>
-
-    <ToggleMode />
-
-    <!-- <Switch /> -->
-    <div class="cook-recipes" p="2">
-      <SearchFoodInput />
-
-      <Transition mode="out-in">
-        <div class="cook-filter-recipes">
-          <span v-if="!curStuff.length && !curTool" text="sm" p="2">
-            你要先选食材或工具哦～
-          </span>
-
-          <span v-else-if="displayedRecipe.length">
-            <DishTag v-for="item, i in displayedRecipe" :key="i" :dish="item" />
-          </span>
-
-          <span v-else text="sm">
-            还没有完美匹配的菜谱呢……
-            <br>
-            大胆尝试一下，或者<a href="#" @click="rStore.reset()">
-              <strong>换个组合</strong></a>？
-            <br>
-            <span m="t-1">欢迎来
-              <a class="font-bold text-blue-600 dark:text-blue-400" href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=uykkic" target="_blank">这里</a>
-              反馈新的菜谱！
-            </span>
-          </span>
-        </div>
-      </Transition>
-
-      <hr m="y-2">
-
-      <RandomRecipe />
-    </div>
-  </div>
+  <RecipePanel />
 </template>

components/FAQItem.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <Disclosure v-slot="{ open }" as="div" class="mt-2">
+    <DisclosureButton
+      class="w-full flex justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
+    >
+      <span>{{ title }}</span>
+      <div
+        i-ri-arrow-drop-up-line
+        :class="open ? 'rotate-180 transform' : ''"
+        class="h-5 w-5 text-purple-500"
+      />
+    </DisclosureButton>
+    <DisclosurePanel class="px-2 pb-2 pt-4 text-sm text-gray-500">
+      <slot />
+    </DisclosurePanel>
+  </Disclosure>
+</template>

components/RecipePanel.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+const recipePanel = ref()
+const rStore = useRecipeStore()
+
+const { isVisible, show } = useInvisibleElement(recipePanel)
+</script>
+
+<template>
+  <Transition>
+    <BasketButton :is-visible="isVisible" @click="show" />
+  </Transition>
+
+  <div ref="recipePanel" m="2 t-4" p="2" class="recipe-panel relative shadow transition hover:shadow-md" bg="gray-400/8">
+    <h2 text="xl" font="bold" p="1">
+      🍲 来看看组合出的菜谱吧！
+    </h2>
+
+    <ToggleMode />
+
+    <!-- <Switch /> -->
+    <div class="cook-recipes" p="2">
+      <SearchFoodInput />
+
+      <Transition mode="out-in">
+        <div class="cook-filter-recipes">
+          <span v-if="!rStore.selectedStuff.length && !rStore.curTool" text="sm" p="2">
+            你要先选食材或工具哦～
+          </span>
+
+          <span v-else-if="rStore.displayedRecipe.length">
+            <DishTag v-for="item, i in rStore.displayedRecipe" :key="i" :dish="item" />
+          </span>
+
+          <span v-else text="sm">
+            还没有完美匹配的菜谱呢……
+            <br>
+            大胆尝试一下，或者<a href="#" @click="rStore.reset()">
+              <strong>换个组合</strong></a>？
+            <br>
+            <span m="t-1">欢迎来
+              <a class="font-bold text-blue-600 dark:text-blue-400" href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=uykkic" target="_blank">这里</a>
+              反馈新的菜谱！
+            </span>
+          </span>
+        </div>
+      </Transition>
+
+      <hr m="y-2">
+
+      <RandomRecipe />
+    </div>
+  </div>
+</template>

components/TheBottomMenu.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { BottomMenuItem } from '@yunlefun/vue'
+import { ref } from 'vue'
+
+const items: BottomMenuItem[] = [
+  {
+    icon: 'i-ri-home-line',
+    activeIcon: 'i-ri-home-fill',
+    title: '首页',
+    to: '/',
+  },
+  {
+    icon: 'i-ri-compass-2-line',
+    activeIcon: 'i-ri-compass-2-fill',
+    title: '关于',
+    to: '/about',
+  },
+  // {
+  //   icon: 'i-ri-user-line',
+  //   activeIcon: 'i-ri-user-fill',
+  //   title: '我的',
+  //   to: '/user',
+  // },
+  {
+    icon: 'i-ri-question-line',
+    activeIcon: 'i-ri-question-fill',
+    title: '帮助',
+    to: '/help',
+  },
+]
+
+const router = useRouter()
+
+const active = ref('/')
+function onClick(item: BottomMenuItem) {
+  active.value = item.to || ''
+  router.push(item.to || '/')
+}
+</script>
+
+<template>
+  <YlfBottomMenu shadow-2xl>
+    <YlfBottomMenuItem
+      v-for="item in items"
+      :key="item.to"
+      :item="item"
+      :active="active === item.to"
+      @click="onClick"
+    />
+  </YlfBottomMenu>
+</template>

components/content/AboutMenu.vue

@@ -1,11 +1,5 @@
 <template>
-  <nav text-xl p="t-6">
-    <NuxtLink class="mx-2 icon-btn" to="/" title="首页">
-      <div i-ri-home-2-line />
-    </NuxtLink>
-
-    <DarkToggle />
-
+  <div>
     <NuxtLink class="mx-2 icon-btn hover:text-orange-400" to="/help" title="帮助">
       <div i-ri-question-line />
     </NuxtLink>
@@ -21,5 +15,5 @@
     <a class="hover:text-black-400 mx-2 icon-btn" rel="noreferrer" href="https://github.com/YunYouJun/cook" target="_blank" title="GitHub">
       <div i-ri-github-line />
     </a>
-  </nav>
+  </div>
 </template>