feat: show custom cookbook

pages/about.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    关于
+  </div>
+</template>

pages/cookbooks/index.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'child',
+  title: '自定义菜谱',
+})
+
+const route = useRoute()
+const id = computed(() => route.query.id)
+</script>
+
+<template>
+  <div>
+    <h3>
+      开发中，敬请期待
+    </h3>
+
+    <div grid="~ cols-3" gap="4" p="4">
+      <CookbookCard :cookbook="defaultCookbook">
+        默认菜谱
+      </CookbookCard>
+
+      <NewCookbookCard />
+    </div>
+  </div>
+</template>

pages/cookbooks/new.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    新建 Cookbook
+  </div>
+</template>

pages/recipes/index.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'child',
+  title: '菜谱 - ?',
+})
+</script>
+
+<template>
+  <div>
+    asd
+  </div>
+</template>

pages/recipes/new.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    新建 Recipe
+  </div>
+</template>

pages/settings.vue

@@ -1,7 +1,28 @@
+<script lang="ts" setup>
+const app = useAppStore()
+
+definePageMeta({
+  layout: 'child',
+})
+</script>
+
 <template>
   <div>
-    <button>
+    <CommonHeader>
       设置
-    </button>
+    </CommonHeader>
+
+    <div
+      class="mx-auto max-w-md w-full"
+      px-2
+      text-left
+    >
+      <YlfForm>
+        <YlfFormItem label="离开网页后保留选中数据">
+          <YlfSwitch v-model="app.settings.keepLocalData" />
+        </YlfFormItem>
+        <YlfFormItem label="更多设置，敬请期待" />
+      </YlfForm>
+    </div>
   </div>
 </template>

pages/user.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { links } from '~/constants'
-
-const app = useAppStore()
 </script>
 
 <template>
@@ -12,6 +10,7 @@ const app = useAppStore()
 
     <div
       class="mx-auto max-w-md w-full"
+      px-2
       text-left
     >
       <YlfForm>
@@ -20,14 +19,16 @@ const app = useAppStore()
       </YlfForm>
 
       <YlfForm>
-        <YlfFormItem label="离开网页后保留选中数据">
-          <YlfSwitch v-model="app.settings.keepLocalData" />
-        </YlfFormItem>
-        <YlfFormItem label="更多设置，敬请期待" />
+        <YlfFormItem icon="i-ri-settings-line" label="设置" to="/settings" />
       </YlfForm>
 
       <YlfForm>
-        <YlfFormItem label="关于" to="/help" />
+        <YlfFormItem icon="i-ri-article-line" label="自定义菜谱" to="/cookbooks/" />
+      </YlfForm>
+
+      <YlfForm>
+        <YlfFormItem icon="i-ri-question-line" label="帮助" to="/help" />
+        <YlfFormItem icon="i-ri-information-line" label="关于" to="/help" />
       </YlfForm>
     </div>