refactor: use nuxt compatiable 4 folder

app/components/RecipePanel.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
+const rStore = useRecipeStore()
+
+const { selectedStuff, curTool } = storeToRefs(rStore)
+
+const showSearchInput = ref(false)
+
+const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value)
+</script>
+
+<template>
+  <div
+    class="recipe-panel relative shadow transition hover:shadow-md"
+    m="x-2 y-4" p="2"
+    bg="gray-400/8"
+  >
+    <RecipePanelTitle />
+
+    <ToggleMode />
+
+    <button absolute right-4 top-4 @click="showSearchInput = !showSearchInput">
+      <div v-if="!showSearchInput" i-ri-search-line />
+      <div v-else i-ri-search-fill />
+    </button>
+
+    <div class="cook-recipes" p="2">
+      <SearchFoodInput v-if="showSearchInput" />
+
+      <Transition mode="out-in">
+        <span v-if="showTooltip" text="sm" p="2">
+          你要先选食材或工具哦～
+        </span>
+
+        <div
+          v-else-if="rStore.isSearching"
+          relative flex items-center justify-center p-6
+          text-xl
+        >
+          <div class="magnifying-glass" i-ri-search-line inline-flex />
+        </div>
+
+        <div v-else-if="rStore.displayedRecipe.length">
+          <DishTag v-for="item, i in rStore.displayedRecipe" :key="i" :dish="item" />
+        </div>
+
+        <div v-else text="sm">
+          <span>还没有完美匹配的菜谱呢……</span>
+          <br>
+          <span>大胆尝试一下，或者</span>
+          <a href="#" @click="rStore.reset()">
+            <strong>换个组合</strong>
+          </a>
+          <span>？</span>
+          <br>
+          <div m="t-1">
+            <span>欢迎来</span>
+            <a class="text-blue-600 font-bold dark:text-blue-400" href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=uykkic" target="_blank">这里</a>
+            <span>反馈新的菜谱！</span>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style>
+@keyframes circle-rotate {
+  from {
+    transform: rotate(0turn) translateY(60%) rotate(1turn);
+  }
+  to {
+    transform: rotate(1turn) translateY(60%) rotate(0turn);
+  }
+}
+
+.magnifying-glass {
+  margin: auto;
+  animation: circle-rotate 4s linear infinite;
+}
+</style>