feat: add user about page

components/CommonHeader.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1 text-2xl font="bold" my="4">
+    <slot />
+  </h1>
+</template>

components/RandomRecipe.vue

@@ -1,15 +1,28 @@
 <script lang="ts" setup>
-const { random, randomRecipe } = useRandomRecipe()
+const { count, inc, dec } = useCount()
+const { random, randomRecipes } = useRandomRecipe(count)
 </script>
 
 <template>
-  <div v-show="randomRecipe">
-    <div class="inline-flex items-center justify-center">
-      <div>今天吃什么？</div>
-      <div class="transition" hover="text-blue-500" i-ri-refresh-line inline-block cursor-pointer @click="random" />
+  <div inline-flex m="y-3">
+    <button rounded-full p-2 btn @click="dec()">
+      <div i-carbon-subtract />
+    </button>
+    <div font="mono" w="15" m-auto inline-block>
+      {{ count }}
     </div>
-    <div m="t-2">
-      <DishTag v-if="randomRecipe" :dish="randomRecipe" />
+    <button rounded-full p-2 btn @click="inc()">
+      <div i-carbon-add />
+    </button>
+  </div>
+
+  <div v-show="randomRecipes.length > 0">
+    <button cursor-pointer class="inline-flex inline-flex items-center justify-center rounded-md border-none bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline" @click="random">
+      <div class="transition" hover="text-blue-500" i-ri-refresh-line mr-1 inline-flex />
+      <div>随机一下</div>
+    </button>
+    <div m="t-8" flex="~ col">
+      <DishTag v-for="recipe, i in randomRecipes" :key="i" :dish="recipe" />
     </div>
   </div>
 </template>

components/RecipePanel.vue

@@ -34,6 +34,14 @@ const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value
             你要先选食材或工具哦～
           </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>
@@ -55,10 +63,22 @@ const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value
           </div>
         </div>
       </Transition>
-
-      <hr m="y-2">
-
-      <RandomRecipe />
     </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>

components/TheBottomMenu.vue

@@ -12,14 +12,14 @@ const items: BottomMenuItem[] = [
   {
     icon: 'i-ri-compass-2-line',
     activeIcon: 'i-ri-compass-2-fill',
-    title: '关于',
-    to: '/about',
+    title: '吃什么',
+    to: '/random',
   },
   // {
-  //   icon: 'i-ri-user-line',
-  //   activeIcon: 'i-ri-user-fill',
-  //   title: '我的',
-  //   to: '/user',
+  //   icon: 'i-ri-compass-2-line',
+  //   activeIcon: 'i-ri-compass-2-fill',
+  //   title: '吃什么',
+  //   to: '/about',
   // },
   {
     icon: 'i-ri-question-line',
@@ -27,6 +27,12 @@ const items: BottomMenuItem[] = [
     title: '帮助',
     to: '/help',
   },
+  {
+    icon: 'i-ri-user-line',
+    activeIcon: 'i-ri-user-fill',
+    title: '我的',
+    to: '/user',
+  },
 ]
 
 const route = useRoute()