what-to-eat/apps/web/app/pages/help.vue

<script setup lang="ts">
// help
import { links } from '~/constants'

const faqs = [
  {
    q: '怎么用这个网站找菜？',
    a: '在左边挑几样手边的食材，右边会实时列出能做的菜。缺料少的排在最前面，点一道菜就能看需要哪些食材、怎么做，然后一键跳到 B 站搜做法。',
  },
  {
    q: '「齐全 / 差一种 / 差两种」是什么意思？',
    a: '这是按缺料数量分组。齐全表示菜谱里记的食材你全有；差一种、差两种表示只差一两样，常备调料（油盐酱醋这些）也算作已有。',
  },
  {
    q: '匹配范围三个选项怎么选？',
    a: '「全部推荐」最宽松，差两种也能出现；「用上所有已选」要求你选的每一样都出现在菜里；「只看食材齐全」则只给出一点不差的菜。在设置页可以改默认值。',
  },
  {
    q: '为什么搜「西红柿」能搜到「番茄」？',
    a: '菜谱记录里的食材名不统一，同一个东西有多个叫法。系统里维护了一份别名表（西红柿＝番茄、鸡翅＝鸡肉、泡面＝方便面），搜任意一个都能命中。',
  },
  {
    q: '收藏和历史存在哪？',
    a: '存在这台设备的浏览器本地存储里，不上传服务器。换个浏览器或清了浏览器数据就没了，可以在设置页导出后再导入到另一台设备。',
  },
  {
    q: '菜谱里的用量和调味在哪看？',
    a: '这个站只记录每道菜用到哪些食材、什么厨具、什么做法，具体用量和调味步骤以原视频为准。点「去 B 站搜做法」就能找到对应的视频。',
  },
]

const openIndex = ref<number | null>(0)

function toggle(index: number) {
  openIndex.value = openIndex.value === index ? null : index
}
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button default-href="/my" />
        </ion-buttons>
        <ion-title>帮助</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="w-full">
      <div class="ledger-desktop-block">
        <PageHead title="帮助" subtitle="用之前想知道的几件事" />

        <div class="ledger-menu-grid">
          <section class="ledger-section">
            <div class="ledger-section-head">
              <h2>常见问题</h2>
            </div>
            <div class="ledger-card">
              <div
                v-for="(item, index) in faqs"
                :key="item.q"
                class="ledger-faq-item"
                :class="{ 'is-open': openIndex === index }"
              >
                <button type="button" class="ledger-faq-q" @click="toggle(index)">
                  <span>{{ item.q }}</span>
                  <span class="chev"><ion-icon :icon="ioniconsChevronDownOutline" aria-hidden="true" /></span>
                </button>
                <div v-show="openIndex === index" class="ledger-faq-a">
                  {{ item.a }}
                </div>
              </div>
            </div>
          </section>

          <section class="ledger-section">
            <div class="ledger-section-head">
              <h2>三步上手</h2>
            </div>
            <div class="ledger-card ledger-card-pad">
              <div class="ledger-stack">
                <div class="ledger-step">
                  <span class="ico">1</span>
                  <div>
                    <b>报出你有的东西</b>
                    <span>番茄、鸡蛋、土豆……点一下就加进去，搜索框也能直接打字。</span>
                  </div>
                </div>
                <div class="ledger-step">
                  <span class="ico">2</span>
                  <div>
                    <b>看右边的结果</b>
                    <span>按缺料多少分组，缺一样的那组通常就是今晚的答案。</span>
                  </div>
                </div>
                <div class="ledger-step">
                  <span class="ico">3</span>
                  <div>
                    <b>点进去看做法</b>
                    <span>确认还缺什么，然后去 B 站搜同名的视频。</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="ledger-section-head">
              <h2>还没解决？</h2>
            </div>
            <div class="ledger-menu">
              <NuxtLink to="/about">
                <span class="ico"><ion-icon :icon="ioniconsInformationCircleOutline" aria-hidden="true" /></span>
                <span class="label">看看这个项目</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </NuxtLink>
              <a :href="links.githubIssue" target="_blank" rel="noopener">
                <span class="ico"><ion-icon :icon="ioniconsChatbubbleEllipsesOutline" aria-hidden="true" /></span>
                <span class="label">反馈问题</span>
                <span class="chev"><ion-icon :icon="ioniconsChevronForwardOutline" aria-hidden="true" /></span>
              </a>
            </div>
          </section>
        </div>
      </div>

      <div class="ledger-mobile-only">
        <div class="mx-auto max-w-md w-full rounded-2xl p-2" text-left>
          <FAQItem title="未来计划？">
            计划增加新功能，如自定义菜谱，与使用其他用户分享的菜谱。
          </FAQItem>

          <FAQItem title="什么是模式？">
            <ul>
              <li><b>模糊匹配</b>：展示所有含当前选中任意食材的菜谱</li>
              <li><b>精准匹配</b>：展示所有含当前选中所有食材的菜谱</li>
              <li><b>生存模式</b>：展示当前选中食材即可制作的所有菜谱</li>
            </ul>
          </FAQItem>

          <FAQItem title="如何快速清空所选食材和工具?">
            <div inline-flex items-center justify-center>
              点击顶部 <div i-mdi-pot-steam-outline mx-1 inline-block /> 图标即可。
            </div>
          </FAQItem>

          <FAQItem title="是否有微信小程序?">
            因不可抗力（小程序因跳转 B 站视频而被判定为导流违规）下架。
            将不再提供小程序版本。
            <br>
            <br>
            搜索微信公众号<b>「云游君」</b>并发送<b>「做菜」</b>，也可以快速找到本网站。
          </FAQItem>

          <FAQItem title="是否有 APP?">
            <b>正在开发中，尽请期待。</b>
          </FAQItem>

          <FAQItem title="未来是否会收费？">
            该项目将以免费开源的形式运营。
            <br>
            您可以考虑赞助本项目，以支持我们的开发。
            我会将其投入在周边的服务器、域名、CDN 等费用上。
            <ul mt-1>
              <li>
                <a href="https://afdian.net/a/yunyoujun" target="_blank">爱发电赞助</a>
              </li>
              <li>
                <a href="https://sponsors.yunyoujun.cn/" target="_blank">我要直接打钱！</a>
              </li>
            </ul>
          </FAQItem>

          <FAQItem title="页面无法点击、资源加载失败？">
            <blockquote>
              试试「无痕模式」是否正常？
            </blockquote>
            <br>
            <ol>
              <li>
                <b>清除 Cookie</b>
                <ol>
                  <li>
                    点击浏览器网址前方的 🔒 图标
                  </li>
                  <li>
                    点击「Cookie」并清除
                  </li>
                </ol>
              </li>
              <li>
                <b>强制刷新缓存</b>
                <ul>
                  <li>Windows: <code>Ctrl + F5</code></li>
                  <li>macOS: <code>Cmd + Shift + R</code></li>
                </ul>
              </li>
            </ol>
          </FAQItem>

          <hr h="1" my="4" bg-black>

          <HelpAbout />

          <FAQItem title="关于我">
            <div text-left>
              我的个人微信公众号「云游君」，会分享一些生活和写的<a href="https://sponsors.yunyoujun.cn/projects" target="_blank">
                小玩具们
              </a>。

              <a inline-flex py-4 href="https://cdn.yunyoujun.cn/img/about/white-qrcode-and-search.jpg" target="_blank">
                <img src="https://cdn.yunyoujun.cn/img/about/white-qrcode-and-search.jpg">
              </a>
            </div>
            <AboutMe />
          </FAQItem>

          <FAQItem title="致谢">
            <p>
              感谢以下小伙伴为本项目提供的数据支持和 QA ！
            </p>

            <ul mt-2 text-left text-sm>
              <li>
                <a href="https://weibo.com/runny" target="_blank">Runny</a>
              </li>
              <li>
                麒麟
              </li>
              <li>
                晴方啾
              </li>
              <li>
                课代表阿伟
              </li>
            </ul>
          </FAQItem>

          <FAQItem title="赞助者们">
            <div>
              感谢至今以来所有的<a href="https://afdian.net/a/yunyoujun" class="text-purple" target="_blank">赞助者</a>们，你们的支持是我持续维护和开发新项目的动力！
            </div>
            <div pt-2>
              <a href="https://sponsors.yunyoujun.cn" target="_blank">
                <img src="https://sponsors.yunyoujun.cn/sponsors.svg">
              </a>
            </div>
          </FAQItem>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>