From 2db9fee8afec9d089c33b56aa3f0ffa94336ff83 Mon Sep 17 00:00:00 2001 From: YunYouJun Date: Sun, 30 Jul 2023 20:13:20 +0800 Subject: [PATCH] feat: add user about page --- components/CommonHeader.vue | 5 + components/RandomRecipe.vue | 27 +- components/RecipePanel.vue | 28 +- components/TheBottomMenu.vue | 18 +- composables/count.ts | 20 + composables/recipe.ts | 17 +- composables/store/recipe.ts | 20 +- content/about.md | 64 --- content/wechat.md | 7 - layouts/default.vue | 2 +- nuxt.config.ts | 1 - package.json | 1 - pages/[...slug].vue | 9 - pages/help.vue | 53 +- pages/index.vue | 3 +- pages/random.vue | 10 + pages/user.vue | 84 ++- pnpm-lock.yaml | 1029 ---------------------------------- uno.config.ts | 12 +- utils/random.ts | 17 +- 20 files changed, 236 insertions(+), 1191 deletions(-) create mode 100644 components/CommonHeader.vue create mode 100644 composables/count.ts delete mode 100644 content/about.md delete mode 100644 content/wechat.md delete mode 100644 pages/[...slug].vue create mode 100644 pages/random.vue diff --git a/components/CommonHeader.vue b/components/CommonHeader.vue new file mode 100644 index 0000000..7a23e04 --- /dev/null +++ b/components/CommonHeader.vue @@ -0,0 +1,5 @@ + diff --git a/components/RandomRecipe.vue b/components/RandomRecipe.vue index 52125a1..8d8cff4 100644 --- a/components/RandomRecipe.vue +++ b/components/RandomRecipe.vue @@ -1,15 +1,28 @@ diff --git a/components/RecipePanel.vue b/components/RecipePanel.vue index d7c258d..33ea60c 100644 --- a/components/RecipePanel.vue +++ b/components/RecipePanel.vue @@ -34,6 +34,14 @@ const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value 你要先选食材或工具哦～ +
+
+
+
@@ -55,10 +63,22 @@ const showTooltip = computed(() => !selectedStuff.value.length && !curTool.value
- -
- - + + diff --git a/components/TheBottomMenu.vue b/components/TheBottomMenu.vue index a6e0067..03e8d1e 100644 --- a/components/TheBottomMenu.vue +++ b/components/TheBottomMenu.vue @@ -12,14 +12,14 @@ const items: BottomMenuItem[] = [ { icon: 'i-ri-compass-2-line', activeIcon: 'i-ri-compass-2-fill', - title: '关于', - to: '/about', + title: '吃什么', + to: '/random', }, // { - // icon: 'i-ri-user-line', - // activeIcon: 'i-ri-user-fill', - // title: '我的', - // to: '/user', + // icon: 'i-ri-compass-2-line', + // activeIcon: 'i-ri-compass-2-fill', + // title: '吃什么', + // to: '/about', // }, { icon: 'i-ri-question-line', @@ -27,6 +27,12 @@ const items: BottomMenuItem[] = [ title: '帮助', to: '/help', }, + { + icon: 'i-ri-user-line', + activeIcon: 'i-ri-user-fill', + title: '我的', + to: '/user', + }, ] const route = useRoute() diff --git a/composables/count.ts b/composables/count.ts new file mode 100644 index 0000000..5cbe792 --- /dev/null +++ b/composables/count.ts @@ -0,0 +1,20 @@ +import { useStorage } from '@vueuse/core' + +export function useCount() { + const count = useStorage('count', 5) + + function inc() { + count.value += 1 + } + function dec() { + if (count.value <= 1) + return + count.value -= 1 + } + + return { + count, + inc, + dec, + } +} diff --git a/composables/recipe.ts b/composables/recipe.ts index ddc36cf..afe8ddd 100644 --- a/composables/recipe.ts +++ b/composables/recipe.ts @@ -1,12 +1,21 @@ import recipeData from '~/data/recipe.json' import type { RecipeItem, Recipes } from '~/types' -export function useRandomRecipe() { - const randomRecipe = ref() +/** + * 随机几道菜 + * @param total + * @returns + */ +export function useRandomRecipe(total: Ref) { + const randomRecipes = ref([]) function random() { - randomRecipe.value = generateRandomRecipe(recipeData as Recipes) + randomRecipes.value = generateRandomRecipe(recipeData as Recipes, total.value) } + watch(total, () => { + random() + }) + onMounted(() => { random() }) @@ -14,6 +23,6 @@ export function useRandomRecipe() { return { random, - randomRecipe, + randomRecipes, } } diff --git a/composables/store/recipe.ts b/composables/store/recipe.ts index 3b0b185..f70c76c 100644 --- a/composables/store/recipe.ts +++ b/composables/store/recipe.ts @@ -70,25 +70,26 @@ export const useRecipeStore = defineStore('recipe', () => { curStuff.value.add(name) } + const isSearching = ref(false) /** * 搜索菜谱 * @returns */ async function searchRecipes() { - if (keyword.value) { - const result = await db.recipes.filter(item => item.name.includes(keyword.value)).toArray() - return result - } + isSearching.value = true + let result: RecipeItem[] = [] + if (keyword.value) + result = await db.recipes.filter(item => item.name.includes(keyword.value)).toArray() if (curMode.value === 'strict') { - return await db.recipes.filter((item) => { + result = await db.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 }).toArray() } else if (curMode.value === 'loose') { - return await db.recipes.filter((item) => { + result = await db.recipes.filter((item) => { const stuffFlag = selectedStuff.value.some(stuff => item.stuff.includes(stuff)) const toolFlag = Boolean(item.tools?.includes(curTool.value)) @@ -108,12 +109,15 @@ export const useRecipeStore = defineStore('recipe', () => { } // survival else { - return await db.recipes.filter((item) => { + result = await db.recipes.filter((item) => { const stuffFlag = item.stuff.every(stuff => selectedStuff.value.includes(stuff)) const toolFlag = item.tools?.includes(curTool.value) return Boolean(curTool.value ? (stuffFlag && toolFlag) : stuffFlag) }).toArray() } + + isSearching.value = false + return result } // 默认严格模式 @@ -159,6 +163,8 @@ export const useRecipeStore = defineStore('recipe', () => { curMode, selectedStuff, + isSearching, + clearKeyWord: () => { keyword.value = '' }, toggleStuff, toggleTools, diff --git a/content/about.md b/content/about.md deleted file mode 100644 index d4597a8..0000000 --- a/content/about.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 关于 ---- - -:AboutMenu - -### **🍜 好的，今天我们来做菜！** - -> 希望大家吃的开心！ - -
-- 代码仓库： -
YunYouJun/cook -
- -
- -
-- 菜谱主要视频来源： - -
- 隔离食用手册大全 - -
- -相关使用请查看 帮助。 - -## **致谢** - -感谢以下小伙伴为本项目提供的数据支持和 QA ！ - -- [Runny](https://weibo.com/runny) -- 山竹太凉 -- leo -- 麒麟 -- 晴方啾 -- 课代表阿伟 - -## **关于我** - -Hello，我是云游君。 - -很高兴能在这里与你相遇，也很希望这个网站可以真的帮助到你。 - -同时，我也以我或许不值一提的脸面保证它会以免费开源的形式维护运营下去。 - -此外，我也会继续尝试做一些有趣或有用的东西，并分享给大家。 -你也可以在这些地方找到我。 - -:AboutMe - -对了，给微信公众号「云游君」发送「做菜」也可以快速找到这个网址。 - -## 赞助者 - -也非常感谢至今以来的所有赞助者们！ - -如果觉得我的[小项目们](https://sponsors.yunyoujun.cn/projects)还算有趣的话，要不要考虑[赞助](https://sponsors.yunyoujun.cn/)我？ - -我会将其公开在[账簿](https://sponsors.yunyoujun.cn/account)中，并投入在周边的服务器、域名、CDN 等费用上。 - - - - diff --git a/content/wechat.md b/content/wechat.md deleted file mode 100644 index 7f31f2d..0000000 --- a/content/wechat.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 微信公众号 ---- - -我的个人微信公众号「云游君」，会分享一些生活和写的[小玩具们](https://sponsors.yunyoujun.cn/projects)。 - -![微信公众号 - 云游君](https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/about/white-qrcode-and-search.jpg) diff --git a/layouts/default.vue b/layouts/default.vue index 68761e7..2fd79e6 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,5 +1,5 @@