refactor: move about into to about

2023-07-30 05:08:08 +08:00
parent a419c383a3
commit 2c7f3c94c6
13 changed files with 66 additions and 62 deletions
--- 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 -->

--- 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
--- 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>
--- 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>
--- a/components/FeedbackActions.vue
+++ 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>
--- 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">
--- 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 || '/')
--- 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 ！
--- 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)

 ## 说明

--- 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>
--- 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: [
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -5,4 +5,5 @@
      <ContentRenderer :value="doc" />
    </ContentDoc>
  </main>
+  <BaseFooter />
 </template>
--- 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>