From 94a9ff500746dd668b0554b28c3d7376e9e115ab Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sun, 20 Aug 2023 04:59:14 +0800
Subject: [PATCH] feat: show custom cookbook

---
 components/TheBottomMenu.vue               |  5 +--
 components/common/BackBtn.vue              | 13 ++++++
 components/{ => common}/DarkToggle.vue     |  8 +++-
 components/cookbook/CookbookCard.vue       | 31 +++++++++++++++
 components/cookbook/CookbookDetail.vue     | 27 +++++++++++++
 components/cookbook/NewCookbookCard.vue    | 18 +++++++++
 components/recipe/RecipeTable.vue          | 46 ++++++++++++++++++++++
 components/recipe/RecipeTableItem.vue      | 31 +++++++++++++++
 components/{common => ylf}/YlfForm.vue     |  7 ++--
 components/{common => ylf}/YlfFormItem.vue |  0
 components/ylf/YlfIconButton.vue           | 16 ++++++++
 components/{common => ylf}/YlfSwitch.vue   |  0
 layouts/child.vue                          | 22 +++++++++++
 layouts/default.vue                        |  2 +-
 pages/about.vue                            |  5 +++
 pages/cookbooks/index.vue                  | 25 ++++++++++++
 pages/cookbooks/new.vue                    |  5 +++
 pages/recipes/index.vue                    | 12 ++++++
 pages/recipes/new.vue                      |  5 +++
 pages/settings.vue                         | 25 +++++++++++-
 pages/user.vue                             | 15 +++----
 types/cookbook.ts                          | 22 +++++++++++
 types/index.ts                             |  1 +
 uno.config.ts                              |  1 -
 utils/cookbook.ts                          | 11 ++++++
 25 files changed, 333 insertions(+), 20 deletions(-)
 create mode 100644 components/common/BackBtn.vue
 rename components/{ => common}/DarkToggle.vue (71%)
 create mode 100644 components/cookbook/CookbookCard.vue
 create mode 100644 components/cookbook/CookbookDetail.vue
 create mode 100644 components/cookbook/NewCookbookCard.vue
 create mode 100644 components/recipe/RecipeTable.vue
 create mode 100644 components/recipe/RecipeTableItem.vue
 rename components/{common => ylf}/YlfForm.vue (67%)
 rename components/{common => ylf}/YlfFormItem.vue (100%)
 create mode 100644 components/ylf/YlfIconButton.vue
 rename components/{common => ylf}/YlfSwitch.vue (100%)
 create mode 100644 layouts/child.vue
 create mode 100644 pages/about.vue
 create mode 100644 pages/cookbooks/index.vue
 create mode 100644 pages/cookbooks/new.vue
 create mode 100644 pages/recipes/index.vue
 create mode 100644 pages/recipes/new.vue
 create mode 100644 types/cookbook.ts
 create mode 100644 utils/cookbook.ts

diff --git a/components/TheBottomMenu.vue b/components/TheBottomMenu.vue
index 03e8d1e..9d8768a 100644
--- a/components/TheBottomMenu.vue
+++ b/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>
diff --git a/components/common/BackBtn.vue b/components/common/BackBtn.vue
new file mode 100644
index 0000000..0780af9
--- /dev/null
+++ b/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>
diff --git a/components/DarkToggle.vue b/components/common/DarkToggle.vue
similarity index 71%
rename from components/DarkToggle.vue
rename to components/common/DarkToggle.vue
index fdc7d4f..3be487c 100644
--- a/components/DarkToggle.vue
+++ b/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>
diff --git a/components/cookbook/CookbookCard.vue b/components/cookbook/CookbookCard.vue
new file mode 100644
index 0000000..3bcb463
--- /dev/null
+++ b/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>
diff --git a/components/cookbook/CookbookDetail.vue b/components/cookbook/CookbookDetail.vue
new file mode 100644
index 0000000..df51e32
--- /dev/null
+++ b/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>
diff --git a/components/cookbook/NewCookbookCard.vue b/components/cookbook/NewCookbookCard.vue
new file mode 100644
index 0000000..3c4c44e
--- /dev/null
+++ b/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>
diff --git a/components/recipe/RecipeTable.vue b/components/recipe/RecipeTable.vue
new file mode 100644
index 0000000..674d664
--- /dev/null
+++ b/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>
diff --git a/components/recipe/RecipeTableItem.vue b/components/recipe/RecipeTableItem.vue
new file mode 100644
index 0000000..a933d97
--- /dev/null
+++ b/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>
diff --git a/components/common/YlfForm.vue b/components/ylf/YlfForm.vue
similarity index 67%
rename from components/common/YlfForm.vue
rename to components/ylf/YlfForm.vue
index c2419ca..73e055f 100644
--- a/components/common/YlfForm.vue
+++ b/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-bottom: 1px solid var(--ylf-c-border);
+  border: 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;
     }
diff --git a/components/common/YlfFormItem.vue b/components/ylf/YlfFormItem.vue
similarity index 100%
rename from components/common/YlfFormItem.vue
rename to components/ylf/YlfFormItem.vue
diff --git a/components/ylf/YlfIconButton.vue b/components/ylf/YlfIconButton.vue
new file mode 100644
index 0000000..6e41e03
--- /dev/null
+++ b/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>
diff --git a/components/common/YlfSwitch.vue b/components/ylf/YlfSwitch.vue
similarity index 100%
rename from components/common/YlfSwitch.vue
rename to components/ylf/YlfSwitch.vue
diff --git a/layouts/child.vue b/layouts/child.vue
new file mode 100644
index 0000000..62a96c7
--- /dev/null
+++ b/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>
diff --git a/layouts/default.vue b/layouts/default.vue
index ac551b2..7c246d4 100644
--- a/layouts/default.vue
+++ b/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>
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 0000000..a7b8be0
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    关于
+  </div>
+</template>
diff --git a/pages/cookbooks/index.vue b/pages/cookbooks/index.vue
new file mode 100644
index 0000000..9b529fa
--- /dev/null
+++ b/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>
diff --git a/pages/cookbooks/new.vue b/pages/cookbooks/new.vue
new file mode 100644
index 0000000..5617f6e
--- /dev/null
+++ b/pages/cookbooks/new.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    新建 Cookbook
+  </div>
+</template>
diff --git a/pages/recipes/index.vue b/pages/recipes/index.vue
new file mode 100644
index 0000000..927d357
--- /dev/null
+++ b/pages/recipes/index.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'child',
+  title: '菜谱 - ?',
+})
+</script>
+
+<template>
+  <div>
+    asd
+  </div>
+</template>
diff --git a/pages/recipes/new.vue b/pages/recipes/new.vue
new file mode 100644
index 0000000..bc6b2ab
--- /dev/null
+++ b/pages/recipes/new.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    新建 Recipe
+  </div>
+</template>
diff --git a/pages/settings.vue b/pages/settings.vue
index c2bab97..ccfbf6b 100644
--- a/pages/settings.vue
+++ b/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>
diff --git a/pages/user.vue b/pages/user.vue
index 2561e47..22a5bc2 100644
--- a/pages/user.vue
+++ b/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>
 
diff --git a/types/cookbook.ts b/types/cookbook.ts
new file mode 100644
index 0000000..8383b47
--- /dev/null
+++ b/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
+}
diff --git a/types/index.ts b/types/index.ts
index 93b0aba..c82c7c2 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -1 +1,2 @@
+export * from './cookbook'
 export * from './recipe'
diff --git a/uno.config.ts b/uno.config.ts
index 5679724..c479814 100644
--- a/uno.config.ts
+++ b/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(),
diff --git a/utils/cookbook.ts b/utils/cookbook.ts
new file mode 100644
index 0000000..52f11e8
--- /dev/null
+++ b/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',
+}