refactor: move about into to about

components/BaseFooter.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { isClient } from '@vueuse/core'
-import { links } from '~/constants'
 
 const displayICP = ref(true)
 
@@ -16,27 +15,6 @@ const buildDate = (new Date(Number.parseInt(now) * 1000)).toLocaleDateString()
 
 <template>
   <div p="4 t-2" class="flex flex-col items-center justify-center" text="sm">
-    <div>
-      <a
-        m="2"
-        border="b-1 dashed"
-        class="inline-flex text-sm text-blue-600 dark:text-blue-400"
-        :href="links.contribute" target="_blank"
-        title="居家菜谱投稿"
-      >
-        立即投稿
-      </a>
-
-      <a
-        m="2"
-        class="inline-flex text-sm text-blue-600 dark:text-blue-400"
-        :href="links.feedback" target="_blank"
-        alt="通过兔小巢反馈"
-      >
-        立即反馈
-      </a>
-    </div>
-
     <div v-if="commitSha && buildDate" mb-2>
       <span>
         当前版本（{{ buildDate }}）:
@@ -82,4 +60,3 @@ const buildDate = (new Date(Number.parseInt(now) * 1000)).toLocaleDateString()
     </div> -->
   </div>
 </template>
-constants

components/BasketButton.vue

@@ -1,20 +1,23 @@
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
 defineProps({
   isVisible: Boolean,
 })
 
 const rStore = useRecipeStore()
+const { displayedRecipe } = storeToRefs(rStore)
 </script>
 
 <template>
   <button
-    v-show="rStore.displayedRecipe.length !== rStore.recipes.length && isVisible"
+    v-show="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">
+    <span v-if="displayedRecipe.length > 0">
       <div i-mdi-bowl-mix-outline />
     </span>
     <span v-else>

components/ChooseFood.vue

@@ -13,6 +13,8 @@ const recipeBtn = ref<HTMLButtonElement>()
 const { playAnimation } = useEmojiAnimation(recipeBtn)
 
 const gtm = useGtm()
+const recipePanel = ref()
+const { isVisible, show } = useInvisibleElement(recipePanel)
 
 function toggleStuff(item: StuffItem, category = '', _e?: Event) {
   rStore.toggleStuff(item.name)
@@ -112,5 +114,8 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
     </ToolTag>
   </div>
 
-  <RecipePanel />
+  <Transition>
+    <BasketButton ref="recipeBtn" :is-visible="isVisible" @click="show" />
+  </Transition>
+  <RecipePanel ref="recipePanel" />
 </template>

components/FeedbackActions.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { links } from '~/constants'
+</script>
+
+<template>
+  <div>
+    <a
+      m="2"
+      class="feedback-button"
+      :href="links.contribute" target="_blank"
+      title="居家菜谱投稿"
+    >
+      立即投稿
+    </a>
+
+    <a
+      m="2"
+      class="feedback-button"
+      :href="links.feedback" target="_blank"
+      alt="通过兔小巢反馈"
+    >
+      立即反馈
+    </a>
+  </div>
+</template>
+
+<style>
+.feedback-button {
+  @apply border-none inline-flex justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
+}
+</style>

components/RecipePanel.vue

@@ -1,16 +1,13 @@
 <script lang="ts" setup>
-const recipePanel = ref()
+import { storeToRefs } from 'pinia'
+
 const rStore = useRecipeStore()
 
-const { isVisible, show } = useInvisibleElement(recipePanel)
+const { displayedRecipe, selectedStuff, curTool } = storeToRefs(rStore)
 </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">
+  <div m="x-2 y-4" p="2" class="recipe-panel relative shadow transition hover:shadow-md" bg="gray-400/8">
     <h2 text="xl" font="bold" p="1">
       🍲 来看看组合出的菜谱吧！
     </h2>
@@ -23,12 +20,12 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
 
       <Transition mode="out-in">
         <div class="cook-filter-recipes">
-          <span v-if="!rStore.selectedStuff.length && !rStore.curTool" text="sm" p="2">
+          <span v-if="!selectedStuff.length && !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 v-else-if="displayedRecipe.length">
+            <DishTag v-for="item, i in displayedRecipe" :key="i" :dish="item" />
           </span>
 
           <span v-else text="sm">

components/TheBottomMenu.vue

@@ -29,9 +29,10 @@ const items: BottomMenuItem[] = [
   },
 ]
 
+const route = useRoute()
 const router = useRouter()
 
-const active = ref('/')
+const active = ref(route.path)
 function onClick(item: BottomMenuItem) {
   active.value = item.to || ''
   router.push(item.to || '/')