feat: add history

pages/recipes/collect.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'child',
+  title: '我的收藏',
+})
+</script>
+
+<template>
+  <div>
+    施工中...
+  </div>
+</template>

pages/recipes/history.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import { recipeHistories } from '~/composables/store/history'
+
+definePageMeta({
+  layout: 'child',
+  title: '历史记录',
+})
+
+// todo
+// clear one history
+function clearAllHistory() {
+  recipeHistories.value = []
+}
+</script>
+
+<template>
+  <div pt-2>
+    <div
+      text="blue-900 dark:blue-200"
+      bg="blue-300 op-20 hover:(blue-800 op-20) dark:hover:(blue-200 op-20)"
+      class="inline-flex items-center justify-center border border-transparent rounded-md px-4 py-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
+      @click="clearAllHistory"
+    >
+      <div i-ri-eraser-line />
+      <span class="ml-1">清空记录</span>
+    </div>
+
+    <div flex="~ col">
+      <div v-for="history in recipeHistories" :key="history.recipe.name" mt-2>
+        <StapleTag :active="false">
+          {{ dayjs(history.time).format('YYYY-MM-DD HH:mm:ss') }}
+        </StapleTag>
+        <DishTag :dish="history.recipe" />
+      </div>
+    </div>
+  </div>
+</template>

pages/user.vue

@@ -8,6 +8,12 @@ import { links } from '~/constants'
       我的
     </CommonHeader>
 
+    <div mt-4 gap="3" grid="~ cols-3" px-2>
+      <YlfIconItem to="/recipes/history" icon="i-ri-history-line" label="历史记录" />
+      <YlfIconItem to="/recipes/collect" icon="i-ri-star-line" label="我的收藏" />
+      <YlfIconItem to="/cookbooks" icon="i-ri-article-line" label="自定义菜谱" />
+    </div>
+
     <div
       class="mx-auto max-w-md w-full"
       px-2
@@ -22,9 +28,9 @@ import { links } from '~/constants'
         <YlfFormItem icon="i-ri-settings-line" label="设置" to="/settings" />
       </YlfForm>
 
-      <YlfForm>
+      <!-- <YlfForm>
         <YlfFormItem icon="i-ri-article-line" label="自定义菜谱 TODO" to="/cookbooks/" />
-      </YlfForm>
+      </YlfForm> -->
 
       <YlfForm>
         <YlfFormItem icon="i-ri-question-line" label="帮助" to="/help" />