From b526aae2d02641c486c4e291214709f3ac45ad6e Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sun, 30 Jul 2023 20:59:52 +0800
Subject: [PATCH] feat: dynamic import recipe.json

---
 components/RandomRecipe.vue |  4 +++-
 components/tags/DishTag.vue |  3 ++-
 composables/db.ts           |  4 +---
 composables/recipe.ts       | 13 ++++++++-----
 pages/random.vue            |  2 +-
 utils/db.ts                 |  7 ++++---
 utils/random.ts             | 16 +++++++---------
 7 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/RandomRecipe.vue b/components/RandomRecipe.vue
index 8d8cff4..78257aa 100644
--- a/components/RandomRecipe.vue
+++ b/components/RandomRecipe.vue
@@ -22,7 +22,9 @@ const { random, randomRecipes } = useRandomRecipe(count)
       <div>随机一下</div>
     </button>
     <div m="t-8" flex="~ col">
-      <DishTag v-for="recipe, i in randomRecipes" :key="i" :dish="recipe" />
+      <template v-for="recipe, i in randomRecipes" :key="i">
+        <DishTag v-if="recipe" :dish="recipe" />
+      </template>
     </div>
   </div>
 </template>
diff --git a/components/tags/DishTag.vue b/components/tags/DishTag.vue
index 93ad4ec..e8a57ad 100644
--- a/components/tags/DishTag.vue
+++ b/components/tags/DishTag.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
+import type { DbRecipeItem } from 'utils/db'
 import { tools } from '~/data/food'
 import type { RecipeItem } from '~/types'
 import { getEmojisFromStuff } from '~/utils'
 
 const props = defineProps<{
-  dish: RecipeItem
+  dish: RecipeItem | DbRecipeItem
 }>()
 
 const gtm = useGtm()
diff --git a/composables/db.ts b/composables/db.ts
index 7d8f97b..1368987 100644
--- a/composables/db.ts
+++ b/composables/db.ts
@@ -5,13 +5,11 @@ export function useIndexedDB() {
   const dbUpdated = useStorage(`${namespace}:lastDbUpdated`, lastDbUpdated)
 
   return {
-    // db,
-    // initDb,
     init: async () => {
       const count = await db.recipes.count()
       if (!count || dbUpdated.value !== lastDbUpdated) {
+        await initDb()
         dbUpdated.value = lastDbUpdated
-        initDb()
       }
     },
   }
diff --git a/composables/recipe.ts b/composables/recipe.ts
index afe8ddd..0f09ecf 100644
--- a/composables/recipe.ts
+++ b/composables/recipe.ts
@@ -1,5 +1,4 @@
-import recipeData from '~/data/recipe.json'
-import type { RecipeItem, Recipes } from '~/types'
+import type { DbRecipeItem } from 'utils/db'
 
 /**
  * 随机几道菜
@@ -7,9 +6,13 @@ import type { RecipeItem, Recipes } from '~/types'
  * @returns
  */
 export function useRandomRecipe(total: Ref<number>) {
-  const randomRecipes = ref<RecipeItem[]>([])
-  function random() {
-    randomRecipes.value = generateRandomRecipe(recipeData as Recipes, total.value)
+  const randomRecipes = ref<(DbRecipeItem | undefined)[]>([])
+  async function random() {
+    const length = await db.recipes.count()
+    const randomArr = generateRandomArray(length, total.value)
+    const result = await db.recipes.bulkGet(randomArr)
+    if (result)
+      randomRecipes.value = result.filter(item => !!item)
   }
 
   watch(total, () => {
diff --git a/pages/random.vue b/pages/random.vue
index 8e9fd75..a06e59b 100644
--- a/pages/random.vue
+++ b/pages/random.vue
@@ -4,7 +4,7 @@
       今天吃什么
     </CommonHeader>
     <div flex flex-grow flex-col items-center justify-center>
-      <RandomRecipe mt-8 />
+      <RandomRecipe />
     </div>
   </div>
 </template>
diff --git a/utils/db.ts b/utils/db.ts
index 1677256..394cebd 100644
--- a/utils/db.ts
+++ b/utils/db.ts
@@ -1,7 +1,6 @@
 import type { Table } from 'dexie'
 import Dexie from 'dexie'
 
-import recipeData from '../data/recipe.json'
 import type { RecipeItem } from '~/types'
 
 export interface DbRecipeItem extends RecipeItem {
@@ -21,8 +20,10 @@ export class MySubClassedDexie extends Dexie {
 
 export const db = new MySubClassedDexie()
 
-export function initDb() {
-  db.recipes.bulkPut(
+export async function initDb() {
+  const { default: recipeData } = await import('../data/recipe.json')
+
+  return db.recipes.bulkPut(
     (recipeData as RecipeItem[]).map((item, i) => ({
       id: i,
       ...item,
diff --git a/utils/random.ts b/utils/random.ts
index 2db3c46..3cc8341 100644
--- a/utils/random.ts
+++ b/utils/random.ts
@@ -1,19 +1,17 @@
-import type { RecipeItem, Recipes } from '../types'
-
 /**
- * 生成随机菜谱，默认一道
+ * 生成随机数组
  * @param recipes
  * @returns
  */
-export function generateRandomRecipe(recipes: Recipes, total = 1) {
-  const randomRecipes: RecipeItem[] = []
+export function generateRandomArray(length: number, total = 1) {
+  const randomArr: number[] = []
   for (let i = 0; i < total; i++) {
-    const randomIndex = Math.floor(Math.random() * recipes.length)
-    if (randomRecipes.includes(recipes[randomIndex])) {
+    const randomIndex = Math.floor(Math.random() * length)
+    if (randomArr.includes(randomIndex)) {
       i--
       continue
     }
-    randomRecipes.push(recipes[randomIndex])
+    randomArr.push(randomIndex)
   }
-  return randomRecipes
+  return randomArr
 }