toor
7408591fac
新增 ledger.css 设计令牌与桌面端布局，AppRail 左导航、PageHead 桌面页头、ResultsColumn 常驻结果栏；做菜/菜谱/发现/我的/设置/帮助/关于各页做桌面窄屏双形态适配，窄屏仍走原有底部标签栏与弹层交互。
253 lines
9.6 KiB
Vue
253 lines
9.6 KiB
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>
|