feat: add help page & update desc

src/components/AboutMe.vue

@@ -11,8 +11,47 @@ const copyright = {
   author: '云游君',
   authorUrl: 'https://www.yunyoujun.cn',
 }
+
+const links = [
+  {
+    type: 'github',
+    label: 'GitHub: YunYouJun',
+    href: 'https://github.com/YunYouJun',
+  },
+  {
+    type: 'telegram',
+    label: 'Telegram Channel',
+    href: 'https://t.me/elpsycn',
+  },
+  {
+    type: 'weibo',
+    label: '微博：机智的云游君',
+    href: 'http://weibo.com/jizhideyunyoujun',
+  },
+  {
+    type: 'twitter',
+    label: 'Twitter: YunYouJun',
+    href: 'https://twitter.com/YunYouJun',
+  },
+  {
+    type: 'wechat',
+    label: '微信公众号：云游君',
+    href: '/wechat',
+    target: '_self',
+  },
+  {
+    type: 'bilibili',
+    label: '云游君Official',
+    href: 'https://space.bilibili.com/1579790',
+  },
+  {
+    type: 'blog',
+    label: '博客：yunyoujun.cn',
+    href: 'http://www.yunyoujun.cn',
+  },
+]
 </script>
 
 <template>
-  <vue-about-me :is-dark="isDark" :copyright="copyright" />
+  <vue-about-me :is-dark="isDark" :copyright="copyright" :links="links" />
 </template>

src/components/ChooseFood.vue

@@ -224,10 +224,15 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
     </ToolTag>
   </div>
 
-  <div ref="recipePanel" m="2 t-4" p="2" class="transition shadow hover:shadow-md" bg="gray-400/8">
+  <div ref="recipePanel" m="2 t-4" p="2" class="relative transition shadow hover:shadow-md" bg="gray-400/8">
     <h2 text="xl" font="bold" p="1">
       🍲 来看看组合出的菜谱吧！
     </h2>
+
+    <!-- <div class="absolute left-5 top-5 icon-btn">
+      <div i-ri-compass-line />
+    </div> -->
+
     <Switch />
     <div p="2">
       <Transition mode="out-in">

src/components/Menu.vue

@@ -12,12 +12,12 @@ import { toggleDark } from '~/composables'
       <div i="ri-sun-line dark:ri-moon-line" />
     </button>
 
-    <RouterLink class="icon-btn mx-2 hover:text-blue-400" to="/about" title="关于">
-      <div i-ri-information-line />
+    <RouterLink class="icon-btn mx-2 hover:text-orange-400" to="/help" title="帮助">
+      <div i-ri-question-line />
     </RouterLink>
 
-    <RouterLink class="icon-btn mx-2 hover:text-green-400" to="/wechat" title="微信公众号 - 云游君">
-      <div i-ri-wechat-2-line />
+    <RouterLink class="icon-btn mx-2 hover:text-blue-400" to="/about" title="关于">
+      <div i-ri-information-line />
     </RouterLink>
 
     <a class="icon-btn mx-2 hover:text-pink-400" rel="noreferrer" href="https://space.bilibili.com/1579790" target="_blank" title="BiliBili">

src/main.ts

@@ -4,7 +4,6 @@ import { setupLayouts } from 'virtual:generated-layouts'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
-import './styles/main.css'
 import './styles/css-vars.scss'
 import './styles/index.scss'
 import 'uno.css'

src/modules/pwa.ts

@@ -5,7 +5,7 @@ export const install: UserModule = ({ isClient, router }) => {
   if (!isClient)
     return
 
-  router.isReady().then(async() => {
+  router.isReady().then(async () => {
     const { registerSW } = await import('virtual:pwa-register')
     registerSW({ immediate: true })
   })

src/modules/toast.ts

@@ -0,0 +1,9 @@
+import Toast from 'vue-toastification'
+import type { UserModule } from '~/types'
+
+import 'vue-toastification/dist/index.css'
+
+export const install: UserModule = ({ app }) => {
+  // add google tag manager, and add GA4 in gtag
+  app.use(Toast)
+}

src/pages/about.md

@@ -11,7 +11,7 @@ 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 />YunYouJun/cook</a>
 </div>
 
@@ -25,9 +25,6 @@ title: 关于
 </a>
 </div>
 
-- 如果您发现了任何「故障」或希望有某个「新功能」，可前往 [Issues](https://github.com/YunYouJun/cook/issues)。
-- 如果您有任何想要交流的内容，包括但不局限于建议/反馈/分享等，可前往 [Discussions](https://github.com/YunYouJun/cook/issues)。
-
 ## **致谢**
 
 感谢以下小伙伴为本项目提供的数据支持和 QA ！
@@ -39,9 +36,31 @@ title: 关于
 - 晴方啾
 - 课代表阿伟
 
-## **友情提示**
+## **关于我**
 
-- 点击首页最上方的大锅图标，可以清空所选食材和工具。（本来想当作彩蛋，但是感觉还挺实用的。）
-- 本项目支持 PWA，使用浏览器打开时，可将其添加到主屏幕以获得近原生 APP 的体验。
+Hello，我是云游君。
+
+很高兴能在这里与你相遇，也很希望这个网站可以真的帮助到你。
+
+同时，我也以我或许不值一提的脸面保证它会以免费开源的形式维护运营下去。
+
+此外，我也会继续尝试做一些有趣或有用的东西，并分享给大家。
+你也可以在这些地方找到我。
 
 <AboutMe />
+
+对了，给微信公众号「云游君」发送「做菜」也可以快速找到这个网址。
+
+## [**赞助者**](https://sponsors.yunyoujun.cn)
+
+也非常感谢至今以来的所有赞助者们！
+
+如果觉得我的[小项目们](https://sponsors.yunyoujun.cn/projects)还算有趣的话，要不要考虑[赞助](https://sponsors.yunyoujun.cn/)我？
+
+我会将其公开在[账簿](https://sponsors.yunyoujun.cn/account)中，并投入在周边的服务器、域名、CDN 等费用上。
+
+<p align="center">
+  <a href="https://sponsors.yunyoujun.cn">
+    <img src='https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg'/>
+  </a>
+</p>

src/pages/help.md

@@ -0,0 +1,23 @@
+---
+title: 帮助
+---
+
+<h3 text="center" font="serif black">
+使用帮助
+</h3>
+
+- 故障/新功能反馈：[Issues](https://github.com/YunYouJun/cook/issues)
+- 交流/建议/分享：[Discussions](https://github.com/YunYouJun/cook/issues)
+
+## **模式说明**
+
+- 模糊匹配：展示所有含当前选中任意食材的菜谱
+- 精准匹配：展示所有含当前选中所有食材的菜谱
+- 生存模式：展示当前选中食材可制作的所有菜谱
+
+## **友情提示**
+
+- 点击首页最上方的大锅图标，可清空所选食材和工具。
+- 本项目支持 PWA，使用浏览器打开时，可将其添加到主屏幕以获得近原生 APP 的体验。
+
+<br />

src/stores/recipe.ts

@@ -2,6 +2,11 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 
 const namespace = 'cook'
 
+/**
+ * survival: 生存模式
+ */
+type CookMode = 'survival' | ''
+
 export const useRecipeStore = defineStore('recipe', () => {
   const strict = useStorage(`${namespace}:strict`, false)
 
@@ -13,6 +18,8 @@ export const useRecipeStore = defineStore('recipe', () => {
   // const selectedTools = computed(() => Array.from(curTools.value))
   // const selectedTools = ref('')
 
+  const mode = ref<CookMode>('')
+
   function toggleStuff(name: string) {
     if (!curStuff)
       return

src/styles/animation.scss

@@ -0,0 +1,38 @@
+/* we will explain what these classes do next! */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+// scrollbar
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: rgba(122, 122, 122, 0.3);
+
+  &:window-inactive {
+    background-color: rgba(122, 122, 122, 0.3);
+  }
+
+  &:hover {
+    background-color: rgba(122, 122, 122, 0.7);
+  }
+
+  &:active {
+    background-color: rgba(122, 122, 122, 0.9);
+  }
+}

src/styles/index.scss

@@ -1,5 +1,33 @@
+@import './animation.scss';
 @import './markdown.scss';
 
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #121212;
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(13,148,136);
+  opacity: 0.75;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
 html {
   color: var(--c-text);
   background-color: var(--c-bg);
@@ -23,47 +51,11 @@ button {
   }
 }
 
+hr {opacity: 0.1;}
+
 .tag {
   margin: 4px;
   padding: 2px 4px;
   // border: 1px solid var(--c-text);
 }
 
-/* we will explain what these classes do next! */
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-
-// scrollbar
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 2px;
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background-color: rgba(122, 122, 122, 0.3);
-
-  &:window-inactive {
-    background-color: rgba(122, 122, 122, 0.3);
-  }
-
-  &:hover {
-    background-color: rgba(122, 122, 122, 0.7);
-  }
-
-  &:active {
-    background-color: rgba(122, 122, 122, 0.9);
-  }
-}

src/styles/main.css

@@ -1,26 +0,0 @@
-html,
-body,
-#app {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-html.dark {
-  background: #121212;
-}
-
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  background: rgb(13,148,136);
-  opacity: 0.75;
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-}