From 7d8677666b94ab509e35bc89478d78b1d190db50 Mon Sep 17 00:00:00 2001 From: YunYouJun Date: Sun, 30 Jul 2023 04:13:06 +0800 Subject: [PATCH] feat: add faq items --- components/BasketButton.vue | 24 +++++ components/ChooseFood.vue | 68 +------------- components/FAQItem.vue | 25 +++++ components/RecipePanel.vue | 53 +++++++++++ components/TheBottomMenu.vue | 51 ++++++++++ components/{ => content}/AboutMe.vue | 0 .../{Menu.vue => content/AboutMenu.vue} | 10 +- composables/helper.ts | 4 +- composables/recipe.ts | 81 ---------------- composables/store/recipe.ts | 68 ++++++++++++++ content/about.md | 6 +- content/help.md | 38 -------- layouts/default.vue | 5 +- nuxt.config.ts | 3 + package.json | 2 + pages/[...slug].vue | 2 +- pages/help.vue | 92 +++++++++++++++++++ pages/settings.vue | 7 ++ pages/user.vue | 7 ++ pnpm-lock.yaml | 19 ++++ styles/markdown.scss | 29 ++++++ vercel.json | 7 -- 22 files changed, 394 insertions(+), 207 deletions(-) create mode 100644 components/BasketButton.vue create mode 100644 components/FAQItem.vue create mode 100644 components/RecipePanel.vue create mode 100644 components/TheBottomMenu.vue rename components/{ => content}/AboutMe.vue (100%) rename components/{Menu.vue => content/AboutMenu.vue} (80%) delete mode 100644 composables/recipe.ts delete mode 100644 content/help.md create mode 100644 pages/help.vue create mode 100644 pages/settings.vue create mode 100644 pages/user.vue delete mode 100644 vercel.json diff --git a/components/BasketButton.vue b/components/BasketButton.vue new file mode 100644 index 0000000..84ed7a2 --- /dev/null +++ b/components/BasketButton.vue @@ -0,0 +1,24 @@ + + + diff --git a/components/ChooseFood.vue b/components/ChooseFood.vue index 52ab864..d194cca 100644 --- a/components/ChooseFood.vue +++ b/components/ChooseFood.vue @@ -3,16 +3,12 @@ import { storeToRefs } from 'pinia' import type { StuffItem } from '~/data/food' import { meat, staple, tools, vegetable } from '~/data/food' -import { useInvisibleElement } from '~/composables/helper' import { useEmojiAnimation } from '~/composables/animation' -import { useRecipe } from '~/composables/recipe' const rStore = useRecipeStore() const { curTool } = storeToRefs(rStore) const curStuff = computed(() => rStore.selectedStuff) -const { displayedRecipe, clickTool } = useRecipe(rStore.recipes) - const recipeBtn = ref() const { playAnimation } = useEmojiAnimation(recipeBtn) @@ -35,30 +31,9 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) { action: item.name, }) } - -const recipePanel = ref() -const { isVisible, show } = useInvisibleElement(recipePanel) diff --git a/components/FAQItem.vue b/components/FAQItem.vue new file mode 100644 index 0000000..1b0c133 --- /dev/null +++ b/components/FAQItem.vue @@ -0,0 +1,25 @@ + + + diff --git a/components/RecipePanel.vue b/components/RecipePanel.vue new file mode 100644 index 0000000..14c2c34 --- /dev/null +++ b/components/RecipePanel.vue @@ -0,0 +1,53 @@ + + + diff --git a/components/TheBottomMenu.vue b/components/TheBottomMenu.vue new file mode 100644 index 0000000..105ecb8 --- /dev/null +++ b/components/TheBottomMenu.vue @@ -0,0 +1,51 @@ + + + diff --git a/components/AboutMe.vue b/components/content/AboutMe.vue similarity index 100% rename from components/AboutMe.vue rename to components/content/AboutMe.vue diff --git a/components/Menu.vue b/components/content/AboutMenu.vue similarity index 80% rename from components/Menu.vue rename to components/content/AboutMenu.vue index 50aefca..b2632b9 100644 --- a/components/Menu.vue +++ b/components/content/AboutMenu.vue @@ -1,11 +1,5 @@ diff --git a/composables/helper.ts b/composables/helper.ts index 8e8e589..ddaffbb 100644 --- a/composables/helper.ts +++ b/composables/helper.ts @@ -1,12 +1,12 @@ +import type { MaybeComputedElementRef } from '@vueuse/core' import { isClient, useElementBounding } from '@vueuse/core' -import type { Ref } from 'vue' /** * trigger show invisible element * @param target * @returns */ -export function useInvisibleElement(target: Ref) { +export function useInvisibleElement(target: MaybeComputedElementRef) { const { top } = useElementBounding(target) const isVisible = computed(() => { diff --git a/composables/recipe.ts b/composables/recipe.ts deleted file mode 100644 index 02a071c..0000000 --- a/composables/recipe.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { storeToRefs } from 'pinia' -import type { Recipes } from '~/types' - -import type { StuffItem } from '~/data/food' -import { useRecipeStore } from '~/composables/store/recipe' - -export function useRecipe(recipe: Recipes) { - const gtm = useGtm() - - const rStore = useRecipeStore() - const { curMode, curTool } = storeToRefs(rStore) - const curStuff = computed(() => rStore.selectedStuff) - - // 默认严格模式 - const displayedRecipe = computed(() => { - // if keyword exist, return result directly - const keyword = rStore.keyword - if (keyword) - return recipe.filter(item => item.name.includes(keyword)) - - if (curMode.value === 'strict') { - return recipe.filter((item) => { - const stuffFlag = curStuff.value.every(stuff => item.stuff.includes(stuff)) - const toolFlag = item.tools?.includes(curTool.value) - return curTool.value ? (stuffFlag && toolFlag) : stuffFlag - }) - } - else if (curMode.value === 'loose') { - return recipe.filter((item) => { - const stuffFlag = curStuff.value.some(stuff => item.stuff.includes(stuff)) - const toolFlag = item.tools?.includes(curTool.value) - - // 同时存在 厨具和材料，则同时判断 - if (curTool.value && curStuff.value.length) { - return stuffFlag && toolFlag - } - else { - if (curStuff.value.length) - return stuffFlag - else if (curTool.value) - return toolFlag - - return false - } - }) - } - // survival - else { - return recipe.filter((item) => { - const stuffFlag = item.stuff.every(stuff => curStuff.value.includes(stuff)) - const toolFlag = item.tools?.includes(curTool.value) - return curTool.value ? (stuffFlag && toolFlag) : stuffFlag - }) - } - }) - - /** - * toggle tool - * @param item - */ - const clickTool = (item: StuffItem) => { - const value = item.name - rStore.toggleTools(value) - - gtm?.trackEvent({ - event: 'click', - category: `tool_${value}`, - action: 'click_tool', - label: '工具', - }) - gtm?.trackEvent({ - event: 'click_tool', - action: item.name, - }) - } - - return { - displayedRecipe, - clickTool, - } -} diff --git a/composables/store/recipe.ts b/composables/store/recipe.ts index a7b8a32..bffb826 100644 --- a/composables/store/recipe.ts +++ b/composables/store/recipe.ts @@ -3,6 +3,7 @@ import { useStorage } from '@vueuse/core' import type { RecipeItem, Recipes } from '~/types' import recipeData from '~/data/recipe.json' +import type { StuffItem } from '~/data/food' const namespace = 'cook' @@ -80,6 +81,69 @@ export const useRecipeStore = defineStore('recipe', () => { const randomRecipe = ref(generateRandomRecipe(recipes)) + const gtm = useGtm() + + // 默认严格模式 + const displayedRecipe = computed(() => { + if (keyword.value) + return recipes.filter(item => item.name.includes(keyword.value)) + + if (curMode.value === 'strict') { + return recipes.filter((item) => { + const stuffFlag = selectedStuff.value.every(stuff => item.stuff.includes(stuff)) + const toolFlag = item.tools?.includes(curTool.value) + return curTool.value ? (stuffFlag && toolFlag) : stuffFlag + }) + } + else if (curMode.value === 'loose') { + return recipes.filter((item) => { + const stuffFlag = selectedStuff.value.some(stuff => item.stuff.includes(stuff)) + const toolFlag = item.tools?.includes(curTool.value) + + // 同时存在 厨具和材料，则同时判断 + if (curTool.value && selectedStuff.value.length) { + return stuffFlag && toolFlag + } + else { + if (selectedStuff.value.length) + return stuffFlag + else if (curTool.value) + return toolFlag + + return false + } + }) + } + // survival + else { + return recipes.filter((item) => { + const stuffFlag = item.stuff.every(stuff => selectedStuff.value.includes(stuff)) + const toolFlag = item.tools?.includes(curTool.value) + return curTool.value ? (stuffFlag && toolFlag) : stuffFlag + }) + } + }) + + /** + * toggle tool + * @param item + */ + const clickTool = (item: StuffItem) => { + const value = item.name + toggleTools(value) + + gtm?.trackEvent({ + event: 'click', + category: `tool_${value}`, + action: 'click_tool', + label: '工具', + }) + gtm?.trackEvent({ + event: 'click_tool', + action: item.name, + }) + } + return { recipes, @@ -98,6 +162,10 @@ export const useRecipeStore = defineStore('recipe', () => { setMode, addStuff, + + // useRecipe + displayedRecipe, + clickTool, } }) diff --git a/content/about.md b/content/about.md index cff8b5e..f40b608 100644 --- a/content/about.md +++ b/content/about.md @@ -2,6 +2,8 @@ title: 关于 --- +:AboutMenu + ### **🍜 好的，今天我们来做菜！** > 希望大家吃的开心！ @@ -54,11 +56,11 @@ Hello，我是云游君。 此外，我也会继续尝试做一些有趣或有用的东西，并分享给大家。 你也可以在这些地方找到我。 - +:AboutMe 对了，给微信公众号「云游君」发送「做菜」也可以快速找到这个网址。 -## [**赞助者**](https://sponsors.yunyoujun.cn) +## 赞助者 也非常感谢至今以来的所有赞助者们！ diff --git a/content/help.md b/content/help.md deleted file mode 100644 index 7385b80..0000000 --- a/content/help.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: 帮助 ---- - -- 相关链接 - - [居家菜谱投稿](https://docs.qq.com/form/page/DWk9GWW9oTmlXZU9V) - - [晒晒你的菜](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=dmeahc) - - [反馈建议](https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS?tab=snaau2) -- 网站相关 - - 故障/新功能反馈：[Issues](https://github.com/YunYouJun/cook/issues) - - 交流/建议/分享：[Discussions](https://github.com/YunYouJun/cook/issues) - -## **模式说明** - -- 模糊匹配：展示所有含当前选中任意食材的菜谱 -- 精准匹配：展示所有含当前选中所有食材的菜谱 -- 生存模式：展示当前选中食材即可制作的所有菜谱 - -## **友情提示** - -- 点击首页最上方的大锅图标，可清空所选食材和工具。 - - - - -## FAQ - -### 页面无法点击、资源加载失败？ - -> 试试「无痕模式」是否正常？ - -1. 清除 Cookie（点击浏览器网址前方的 🔒 图标，找到 Cookie 并清除） -2. 🔒 图标，网站数据（清除） -3. 强制刷新缓存 - - Windows: `Ctrl + F5` - - macOS: `Cmd + Shift + R` - -
diff --git a/layouts/default.vue b/layouts/default.vue index cf5a5a9..1c41bbe 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,7 +1,8 @@ diff --git a/nuxt.config.ts b/nuxt.config.ts index f88c9dc..ef02a66 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -14,7 +14,10 @@ export default defineNuxtConfig({ '@nuxtjs/color-mode', '@vite-pwa/nuxt', '@nuxt/content', + '@zadigetvoltaire/nuxt-gtm', + + '@yunlefun/vue/nuxt', ], experimental: { diff --git a/package.json b/package.json index 398be26..95b4969 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "devDependencies": { "@antfu/eslint-config": "^0.39.8", + "@headlessui/vue": "^1.7.15", "@iconify-json/carbon": "^1.1.18", "@iconify-json/fe": "^1.1.6", "@iconify-json/gg": "^1.1.5", @@ -40,6 +41,7 @@ "@vite-pwa/nuxt": "^0.1.0", "@vue/test-utils": "^2.4.1", "@vueuse/nuxt": "^10.2.1", + "@yunlefun/vue": "^0.0.7", "@zadigetvoltaire/nuxt-gtm": "^0.0.13", "consola": "^3.2.3", "cross-env": "^7.0.3", diff --git a/pages/[...slug].vue b/pages/[...slug].vue index 83caa52..b27d348 100644 --- a/pages/[...slug].vue +++ b/pages/[...slug].vue @@ -1,5 +1,5 @@