feat: add user about page

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,
+  }
+}

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<RecipeItem>()
+/**
+ * 随机几道菜
+ * @param total
+ * @returns
+ */
+export function useRandomRecipe(total: Ref<number>) {
+  const randomRecipes = ref<RecipeItem[]>([])
   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,
   }
 }

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,