test: add recipe mode & component render

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'"