From 2c7f3c94c6c09b0f3e83ce1ceccdd2af94f82aa3 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sun, 30 Jul 2023 05:08:08 +0800
Subject: [PATCH] refactor: move about into to about

---
 README.md                      |  3 +--
 components/BaseFooter.vue      | 23 -----------------------
 components/BasketButton.vue    |  7 +++++--
 components/ChooseFood.vue      |  7 ++++++-
 components/FeedbackActions.vue | 31 +++++++++++++++++++++++++++++++
 components/RecipePanel.vue     | 17 +++++++----------
 components/TheBottomMenu.vue   |  3 ++-
 content/about.md               | 13 ++-----------
 data/README.md                 |  3 +--
 layouts/default.vue            |  1 -
 nuxt.config.ts                 |  3 +--
 pages/[...slug].vue            |  1 +
 pages/help.vue                 | 16 +++++++++-------
 13 files changed, 66 insertions(+), 62 deletions(-)
 create mode 100644 components/FeedbackActions.vue

diff --git a/README.md b/README.md
index 08e942e..9a6485c 100644
--- a/README.md
+++ b/README.md
@@ -29,8 +29,7 @@
 
 - 相关链接
   - [居家菜谱投稿](https://docs.qq.com/form/page/DWk9GWW9oTmlXZU9V)
-  - [晒晒你的菜](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=dmeahc)
-  - [反馈建议](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=snaau2)
+  - [反馈建议分享-兔小巢](https://support.qq.com/products/507827)
 
 <!-- ### Features -->
 
diff --git a/components/BaseFooter.vue b/components/BaseFooter.vue
index 2c9fba7..79cdb29 100644
--- a/components/BaseFooter.vue
+++ b/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
diff --git a/components/BasketButton.vue b/components/BasketButton.vue
index 84ed7a2..f394aca 100644
--- a/components/BasketButton.vue
+++ b/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>
diff --git a/components/ChooseFood.vue b/components/ChooseFood.vue
index d194cca..04a5c46 100644
--- a/components/ChooseFood.vue
+++ b/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>
diff --git a/components/FeedbackActions.vue b/components/FeedbackActions.vue
new file mode 100644
index 0000000..b69add0
--- /dev/null
+++ b/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>
diff --git a/components/RecipePanel.vue b/components/RecipePanel.vue
index 14c2c34..2c4cc39 100644
--- a/components/RecipePanel.vue
+++ b/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">
diff --git a/components/TheBottomMenu.vue b/components/TheBottomMenu.vue
index 105ecb8..a6e0067 100644
--- a/components/TheBottomMenu.vue
+++ b/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 || '/')
diff --git a/content/about.md b/content/about.md
index f40b608..d4597a8 100644
--- a/content/about.md
+++ b/content/about.md
@@ -9,14 +9,14 @@ title: 关于
 > 希望大家吃的开心！
 
 <div class="inline-flex justify-center items-center">
-  代码仓库：<a class="inline-flex items-center justify-center" href="https://github.com/YunYouJun/cook" target="_blank">
+- 代码仓库：<a class="inline-flex items-center justify-center" href="https://github.com/YunYouJun/cook" target="_blank">
   <div m="r-1" inline-flex i-ri-github-line></div>YunYouJun/cook</a>
 </div>
 
 <br />
 
 <div class="inline-flex justify-center items-center">
-菜谱主要视频来源：
+- 菜谱主要视频来源：
 <a class="inline-flex items-center text-sm text-blue-600 dark:text-blue-400" href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS" target="_blank">
   <div m="r-1" inline-flex i-ri-bilibili-line></div>
   <span class="inline-flex">隔离食用手册大全</span>
@@ -25,15 +25,6 @@ title: 关于
 
 相关使用请查看 <router-link to="/help">帮助</router-link>。
 
-### 小程序版本
-
-~~本页面为网页版本，小程序版本请在微信搜索「来做菜」。~~
-
-因不可抗力，小程序因跳转 B 站视频而被判定为导流违规下架。
-将不再提供小程序版本。
-
-<!-- ![微信小程序版本](/search-cook.png) -->
-
 ## **致谢**
 
 感谢以下小伙伴为本项目提供的数据支持和 QA ！
diff --git a/data/README.md b/data/README.md
index c47a2b7..890f7dc 100644
--- a/data/README.md
+++ b/data/README.md
@@ -5,8 +5,7 @@
 > 下载为 `csv` 转换使用
 
 - [新菜谱反馈](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=uykkic)
-- [晒晒你的菜](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=dmeahc)
-- [反馈建议](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=snaau2)
+- [反馈建议分享-兔小巢](https://support.qq.com/products/507827)
 
 ## 说明
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 1c41bbe..68761e7 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,6 @@
 <template>
   <main class="text-center text-gray-700 dark:text-gray-200" p="b-15">
     <slot />
-    <BaseFooter />
     <DarkToggle absolute right-5 top-5 />
     <TheBottomMenu fixed bottom-0 left-0 right-0 />
   </main>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ef02a66..0cc2848 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -56,8 +56,7 @@ export default defineNuxtConfig({
     head: {
       viewport: 'width=device-width,initial-scale=1',
       link: [
-        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
-        { rel: 'icon', type: 'image/svg+xml', href: '/nuxt.svg' },
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
         { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
       ],
       meta: [
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index b27d348..6675030 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -5,4 +5,5 @@
       <ContentRenderer :value="doc" />
     </ContentDoc>
   </main>
+  <BaseFooter />
 </template>
diff --git a/pages/help.vue b/pages/help.vue
index c8dac5a..016dfcb 100644
--- a/pages/help.vue
+++ b/pages/help.vue
@@ -1,11 +1,10 @@
-<script lang="ts" setup>
-</script>
-
 <template>
   <div class="w-full px-2 pt-8">
     <h1 text-2xl font="bold" my="4">
       帮助
     </h1>
+    <FeedbackActions />
+
     <div class="mx-auto max-w-md w-full rounded-2xl bg-white p-2" text-left>
       <FAQItem title="什么是模式？">
         <ul>
@@ -21,6 +20,11 @@
         </div>
       </FAQItem>
 
+      <FAQItem title="是否有微信小程序?">
+        因不可抗力（小程序因跳转 B 站视频而被判定为导流违规）下架。
+        将不再提供小程序版本。
+      </FAQItem>
+
       <FAQItem title="是否有 APP?">
         <b>暂时没有开发 APP 的计划。</b>
         <br>
@@ -65,10 +69,7 @@
                 <a href="https://docs.qq.com/form/page/DWk9GWW9oTmlXZU9V" target="_blank">居家菜谱投稿</a>
               </li>
               <li>
-                <a href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=dmeahc" target="_blank">晒晒你的菜</a>
-              </li>
-              <li>
-                <a href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=snaau2" target="_blank">反馈建议</a>
+                <a href="https://support.qq.com/products/507827" target="_blank">反馈建议分享（兔小巢）</a>
               </li>
             </ul>
           </li>
@@ -89,4 +90,5 @@
       </FAQItem>
     </div>
   </div>
+  <BaseFooter mt-4 />
 </template>