From 1ab402af8b0c0db6fef6c5a86251505b979f6ef9 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Mon, 13 Nov 2023 00:31:18 +0800
Subject: [PATCH] feat: add random recipes localStorage

---
 components/RandomRecipe.vue | 9 +++++----
 composables/recipe.ts       | 8 ++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/RandomRecipe.vue b/components/RandomRecipe.vue
index 78257aa..2912240 100644
--- a/components/RandomRecipe.vue
+++ b/components/RandomRecipe.vue
@@ -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" />
diff --git a/composables/recipe.ts b/composables/recipe.ts
index 2fd0764..b9e1d2e 100644
--- a/composables/recipe.ts
+++ b/composables/recipe.ts
@@ -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 {