feat: show custom cookbook

components/TheBottomMenu.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { BottomMenuItem } from '@yunlefun/vue'
-import { ref } from 'vue'
 
 const items: BottomMenuItem[] = [
   {
@@ -38,9 +37,7 @@ const items: BottomMenuItem[] = [
 const route = useRoute()
 const router = useRouter()
 
-const active = ref(route.path)
 function onClick(item: BottomMenuItem) {
-  active.value = item.to || ''
   router.push(item.to || '/')
 }
 </script>
@@ -51,7 +48,7 @@ function onClick(item: BottomMenuItem) {
       v-for="item in items"
       :key="item.to"
       :item="item"
-      :active="active === item.to"
+      :active="route.path === item.to"
       @click="onClick"
     />
   </YlfBottomMenu>

components/common/BackBtn.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+const router = useRouter()
+function back() {
+  router.back()
+}
+</script>
+
+<template>
+  <YlfIconButton
+    icon="i-ri-arrow-left-s-line"
+    @click="back"
+  />
+</template>

components/common/DarkToggle.vue

@@ -15,7 +15,11 @@ function toggleDark() {
 </script>
 
 <template>
-  <button class="mx-2 icon-btn hover:text-yellow-400 !outline-none" title="切换" @click="toggleDark()">
+  <YlfIconButton
+    class="icon-btn hover:text-yellow-400 !outline-none"
+    text-xl
+    title="切换" @click="toggleDark()"
+  >
     <div i="ri-sun-line dark:ri-moon-line" />
-  </button>
+  </YlfIconButton>
 </template>

components/cookbook/CookbookCard.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { Cookbook } from '~/types'
+
+defineProps<{
+  cookbook: Cookbook
+}>()
+
+const showDetail = ref(false)
+</script>
+
+<template>
+  <button
+    class="bg-$c-bg-alt"
+    h-36 w-full inline-flex cursor-pointer items-center justify-center shadow
+    @click="showDetail = true"
+  >
+    <slot />
+  </button>
+
+  <CookbookDetail
+    v-if="showDetail"
+    absolute bottom-17 left-2 right-2 top-2 z-1 overflow-hidden shadow
+    :cookbook="cookbook"
+  >
+    <YlfIconButton
+      icon="i-ri-close-line"
+      class="absolute right-2 top-2"
+      @click="showDetail = false"
+    />
+  </CookbookDetail>
+</template>

components/cookbook/CookbookDetail.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { Cookbook } from '~/types'
+
+const props = defineProps<{
+  cookbook: Cookbook
+}>()
+
+const recipes = ref<Cookbook['recipes']>(props.cookbook.recipes)
+onMounted(async () => {
+  recipes.value = (await import('../../data/recipe.json')).default
+})
+</script>
+
+<template>
+  <div class="bg-$c-bg-alt" flex="~ col">
+    <h3 mt-4 font-bold>
+      {{ cookbook.title }}
+    </h3>
+    <sub op="90" my-3>
+      {{ cookbook.description }}
+    </sub>
+    <div mx-auto mt-2 p-0 border="1px" overflow-y="scroll">
+      <RecipeTable h="full" :recipes="recipes" />
+    </div>
+    <slot />
+  </div>
+</template>

components/cookbook/NewCookbookCard.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'child',
+  title: '新建食谱书',
+})
+</script>
+
+<template>
+  <NuxtLink
+    class="bg-$c-bg-alt"
+    h-36 w-full inline-flex cursor-pointer items-center justify-center shadow
+    to="/cookbooks/new"
+  >
+    <slot>
+      <div i-ri-add-line />
+    </slot>
+  </NuxtLink>
+</template>

components/recipe/RecipeTable.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { Recipes } from 'types'
+
+defineProps<{
+  recipes: Recipes
+}>()
+</script>
+
+<template>
+  <table
+    class="recipe-table bg-$c-bg"
+    overflow="auto" h="full"
+  >
+    <thead>
+      <tr>
+        <th />
+        <th>
+          名称
+        </th>
+        <th>
+          工具
+        </th>
+        <th>
+          材料
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <RecipeTableItem
+        v-for="(recipe, i) in recipes"
+        :key="recipe.name"
+        :index="i" :recipe="recipe"
+      />
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss">
+.recipe-table {
+  font-size: 0.8rem;
+}
+
+tr, th, td {
+  border: 1px solid black;
+}
+</style>

components/recipe/RecipeTableItem.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { RecipeItem } from 'types'
+
+defineProps<{
+  index: number
+  recipe: RecipeItem
+}>()
+</script>
+
+<template>
+  <tr>
+    <td>
+      {{ index }}
+    </td>
+    <td>
+      <a
+        class="text-blue-500" font-bold
+        :href="recipe.link || `https://www.bilibili.com/video/${recipe.bv}`"
+        target="_blank"
+      >
+        {{ recipe.name }}
+      </a>
+    </td>
+    <td>
+      {{ recipe.tools.join('、') }}
+    </td>
+    <td>
+      {{ recipe.stuff.join('、') }}
+    </td>
+  </tr>
+</template>

components/ylf/YlfForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ylf-form" flex="~ col">
+  <div class="ylf-form" flex="~ col" rounded-md>
     <slot />
   </div>
 </template>
@@ -8,13 +8,14 @@
 .ylf-form {
   background-color: var(--ylf-c-bg-alt);
 
-  border-top: 1px solid var(--ylf-c-border);
+  border: 1px solid var(--ylf-c-border);
-  border-bottom: 1px solid var(--ylf-c-border);
 
   margin: 10px 0;
+  overflow: hidden;
 
   .ylf-form-item {
     border-bottom: 1px solid var(--ylf-c-border);
+
     &:last-child {
       border-bottom: none;
     }

components/ylf/YlfIconButton.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{
+  icon?: string
+}>()
+</script>
+
+<template>
+  <button
+    class="ylf-icon-button hover:(bg-blue-300 bg-opacity-20)"
+    h-10 w-10 inline-flex items-center justify-center rounded-full
+  >
+    <slot>
+      <div v-if="icon" text-xl :class="icon" />
+    </slot>
+  </button>
+</template>

layouts/child.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+defineProps<{
+  title?: string
+}>()
+
+const route = useRoute()
+</script>
+
+<template>
+  <main class="text-center text-gray-700 dark:text-gray-200" p="t-5 b-15">
+    <div flex items-center justify-between>
+      <BackBtn ml-3 />
+      <h2 flex items-center justify-center text-lg>
+        {{ route.meta.title }}
+      </h2>
+      <DarkToggle mr-3 />
+    </div>
+
+    <slot />
+    <TheBottomMenu fixed bottom-0 left-0 right-0 />
+  </main>
+</template>

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="text-center text-gray-700 dark:text-gray-200" p="t-8 b-15">
     <slot />
-    <DarkToggle absolute right-5 top-5 />
+    <DarkToggle absolute right-3 top-5 />
     <TheBottomMenu fixed bottom-0 left-0 right-0 />
   </main>
 </template>

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="离开网页后保留选中数据">
+        <YlfFormItem icon="i-ri-settings-line" label="设置" to="/settings" />
-          <YlfSwitch v-model="app.settings.keepLocalData" />
-        </YlfFormItem>
-        <YlfFormItem label="更多设置，敬请期待" />
       </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>
 

types/cookbook.ts

@@ -0,0 +1,22 @@
+import type { Recipes } from './recipe'
+
+export interface Cookbook {
+  /**
+   * 菜谱 ID，自定义，唯一标识符
+   */
+  id: string
+  cover?: string
+  /**
+   * 菜谱名称
+   */
+  title: string
+  description: string
+  author: string | string[]
+  /**
+   * 菜谱
+   */
+  recipes: Recipes[]
+
+  createdAt: string
+  updatedAt: string
+}

types/index.ts

@@ -1 +1,2 @@
+export * from './cookbook'
 export * from './recipe'

uno.config.ts

@@ -21,7 +21,6 @@ export default defineConfig({
   shortcuts: [
     ['tag', 'text-sm cursor-pointer inline-flex justify-center items-center transition shadow hover:shadow-md'],
     ['btn', 'text-sm px-4 py-1 rounded inline-block bg-blue-600 text-white cursor-pointer hover:bg-blue-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-blue-600'],
   ],
   presets: [
     presetUno(),

utils/cookbook.ts

@@ -0,0 +1,11 @@
+import type { Cookbook } from '~/types'
+
+export const defaultCookbook: Cookbook = {
+  id: 'default',
+  title: '默认菜谱',
+  description: '记录了一些特殊时期常用的菜谱',
+  author: [''],
+  recipes: [],
+  updatedAt: '',
+  createdAt: '2021-04-04',
+}