feat: add history

components/common/SearchRecipe.vue

@@ -61,14 +61,14 @@ const filteredRecipes = computedAsync(async () => {
             leave-to="opacity-0 scale-95"
           >
             <DialogPanel
-              class="h-full max-w-xl w-full transform overflow-hidden bg-white p-4 text-left align-middle shadow-xl transition-all"
+              class="h-full max-w-xl w-full transform overflow-hidden bg-white p-4 text-left align-middle shadow-xl transition-all dark:bg-dark-600"
               md="mt-4 rounded-2xl"
               overflow="auto"
               flex="~ col"
             >
               <DialogTitle
                 as="h3"
-                class="flex items-center justify-center text-lg font-medium leading-6 text-gray-900"
+                class="flex items-center justify-center text-lg font-medium leading-6"
               >
                 <div relative inline-flex flex="grow">
                   <div
@@ -78,9 +78,10 @@ const filteredRecipes = computedAsync(async () => {
                   <input
                     v-model="keyword"
                     type="text"
-                    class="w-full border border-gray-300 rounded-full text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder-gray-400"
-                    py-2 pl-10 pr-3
+                    class="w-full rounded-full bg-transparent text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder-gray-400"
+                    border="~ rounded-full gray-300 op-50 focus:border-blue-500"
                     placeholder="搜索菜谱"
+                    autofocus py-2 pl-10 pr-3
                   >
                   <div
                     v-if="keyword" i-ri-close-line

components/tags/DishTag.vue

@@ -3,6 +3,7 @@ import type { DbRecipeItem } from '~/utils/db'
 import { tools } from '~/data/food'
 import type { RecipeItem } from '~/types'
 import { getEmojisFromStuff } from '~/utils'
+import { recipeHistories } from '~/composables/store/history'
 
 const props = defineProps<{
   dish: RecipeItem | DbRecipeItem
@@ -10,16 +11,21 @@ const props = defineProps<{
 
 const gtm = useGtm()
 
-function triggerGtm(val: string) {
+function triggerGtm(dish: RecipeItem) {
+  recipeHistories.value.push({
+    recipe: dish,
+    time: Date.now(),
+  })
+
   gtm?.trackEvent({
     event: 'click',
-    category: `dish_${val}`,
+    category: `dish_${dish.name}`,
     action: 'click_recipe',
     label: '跳转菜谱',
   })
   gtm?.trackEvent({
     event: 'click_dish',
-    action: val,
+    action: dish.name,
   })
 }
 
@@ -34,7 +40,7 @@ const dishLabel = computed(() => {
     :href="dish.link || `https://www.bilibili.com/video/${dish.bv}`" target="_blank" class="dish-tag rounded tag" p="x-2"
     border="~ blue-200 dark:blue-800"
     bg="blue-300 opacity-20"
-    @click="triggerGtm(dish.name)"
+    @click="triggerGtm(dish)"
   >
     <span m="r-1" class="inline-flex items-center justify-center" text="sm blue-700 dark:blue-200">
       {{ dishLabel }}

components/ylf/YlfFormItem.vue

@@ -16,11 +16,11 @@ defineProps<{
     :is="to ? NuxtLink : 'div'"
     :to="to"
     class="ylf-form-item"
-    w-full flex cursor-pointer items-center justify-between p-3
+    w-full flex cursor-pointer items-center justify-between p-2
     hover:bg-gray-100
     dark:hover:bg-dark-400
   >
-    <div v-if="label" class="text-md" inline-flex items-center justify-center>
+    <div v-if="label" class="text-sm" inline-flex items-center justify-center>
       <div v-if="icon" :class="icon" mr-2 inline-flex />
       <span>{{ label }}</span>
     </div>

components/ylf/YlfIconItem.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+defineProps<{
+  icon: string
+  label: string
+  to: string
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    :to="to"
+    flex="~ col"
+    border="~ solid dark:$ylf-c-border"
+    bg="$ylf-c-bg-alt"
+    class="inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium decoration-none hover-bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 dark:hover:bg-dark-400"
+  >
+    <div :class="icon" inline-flex text-lg />
+    <div mt-2 inline-flex text-xs>
+      {{ label }}
+    </div>
+  </NuxtLink>
+</template>