test: add recipe mode & component render

src/auto-imports.d.ts

@@ -107,6 +107,7 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
@@ -154,6 +155,7 @@ declare global {
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useHead: typeof import('@vueuse/head')['useHead']
   const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']

src/components.d.ts

@@ -1,6 +1,6 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
+// Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {

src/components/ChooseFood.vue

@@ -160,27 +160,29 @@ const randomRecipe = ref<RecipeItem>(generateRandomRecipe())
     <ToggleMode />
 
     <!-- <Switch /> -->
-    <div p="2">
+    <div class="cook-recipes" p="2">
       <Transition mode="out-in">
-        <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>
-            反馈新的菜谱！
+        <div class="cook-filter-recipes">
+          <span v-if="!curStuff.length && !curTool" text="sm" p="2">
+            你要先选食材或工具哦～
           </span>
-        </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">

src/components/tags/DishTag.vue

@@ -24,7 +24,7 @@ const triggerGtm = (val: string) => {
 
 <template>
   <a
-    :href="dish.link || `https://www.bilibili.com/video/${dish.bv}`" target="_blank" class="tag rounded" p="x-2"
+    :href="dish.link || `https://www.bilibili.com/video/${dish.bv}`" target="_blank" class="dish-tag tag rounded" p="x-2"
     border="~ blue-200 dark:blue-800"
     bg="blue-300 opacity-20"
     @click="triggerGtm(dish.name)"

src/components/tags/MeatTag.vue

@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <span
-    class="tag rounded" p="x-2"
+    class="meat-tag tag rounded" p="x-2"
     border="~ red-200 dark:red-800"
     :bg="active ? 'red-500 opacity-90' : 'red-300 opacity-20'"
     :text="active ? 'red-100' : 'red-800 dark:red-200'"

src/components/tags/VegetableTag.vue

@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <span
-    class="tag rounded" p="x-2"
+    class="vegetable-tag tag rounded" p="x-2"
     border="~ green-200 dark:green-800"
     :bg="active ? 'green-600 opacity-90' : 'green-300 opacity-20'"
     :text="active ? 'green-100' : 'green-800 dark:green-200'"

src/stores/recipe.ts

@@ -54,6 +54,7 @@ export const useRecipeStore = defineStore('recipe', () => {
   }
 
   return {
+    curStuff,
     curTool,
     curMode,
     selectedStuff,