AMAZEHOME/cook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add random recipes localStorage

Browse Source
This commit is contained in:
YunYouJun
2023-11-13 00:31:18 +08:00
parent b2cf053446
commit 1ab402af8b
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/RandomRecipe.vue
View File

@@ -16,11 +16,12 @@ const { random, randomRecipes } = useRandomRecipe(count)
</button>
</div>
<button cursor-pointer class="inline-flex inline-flex items-center justify-center rounded-md border-none bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline" @click="random">
<div class="transition" hover="text-blue-500" i-ri-refresh-line mr-1 inline-flex />
<div>随机一下</div>
</button>
<div v-show="randomRecipes.length > 0">
<button cursor-pointer class="inline-flex inline-flex items-center justify-center rounded-md border-none bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline" @click="random">
<div class="transition" hover="text-blue-500" i-ri-refresh-line mr-1 inline-flex />
<div>随机一下</div>
</button>
<div m="t-8" flex="~ col">
<template v-for="recipe, i in randomRecipes" :key="i">
<DishTag v-if="recipe" :dish="recipe" />

8
composables/recipe.ts
View File

@@ -1,3 +1,5 @@
import { useStorage } from '@vueuse/core'
import { namespace } from '~/constants'
import type { DbRecipeItem } from '~/utils/db'
/**
@@ -5,7 +7,7 @@ import type { DbRecipeItem } from '~/utils/db'
* @param total
*/
export function useRandomRecipe(total: Ref<number>) {
const randomRecipes = ref<(DbRecipeItem | undefined)[]>([])
const randomRecipes = useStorage<(DbRecipeItem | undefined)[]>(`${namespace}:random:recipes`, [])
async function random() {
const length = await db.recipes.count()
const randomArr = generateRandomArray(length, total.value)
@@ -19,7 +21,9 @@ export function useRandomRecipe(total: Ref<number>) {
})
onMounted(() => {
random()
// 如果没有随机菜谱，就生成一次
if (randomRecipes.value.length <= 0)
random()
})
return {