AMAZEHOME/cook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show custom cookbook

Browse Source
This commit is contained in:
YunYouJun
2023-08-20 04:59:14 +08:00
parent 98123b0039
commit 94a9ff5007
25 changed files with 333 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/TheBottomMenu.vue
View File

@@ -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>

13
components/common/BackBtn.vue Normal file
View File

@@ -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>

8
components/DarkToggle.vue → components/common/DarkToggle.vue
View File

@@ -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>

31
components/cookbook/CookbookCard.vue Normal file
View File

@@ -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>

27
components/cookbook/CookbookDetail.vue Normal file
View File

@@ -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>

18
components/cookbook/NewCookbookCard.vue Normal file
View File

@@ -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>

46
components/recipe/RecipeTable.vue Normal file
View File

@@ -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>

31
components/recipe/RecipeTableItem.vue Normal file
View File

@@ -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>

7
components/common/YlfForm.vue → components/ylf/YlfForm.vue
View File

@@ -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;
}

0
components/common/YlfFormItem.vue → components/ylf/YlfFormItem.vue
View File

16
components/ylf/YlfIconButton.vue Normal file
View File

@@ -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>

0
components/common/YlfSwitch.vue → components/ylf/YlfSwitch.vue
View File

22
layouts/child.vue Normal file
View File

@@ -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>

2
layouts/default.vue
View File

@@ -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>

5
pages/about.vue Normal file
View File

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

25
pages/cookbooks/index.vue Normal file
View File

@@ -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>

5
pages/cookbooks/new.vue Normal file
View File

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

12
pages/recipes/index.vue Normal file
View File

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

5
pages/recipes/new.vue Normal file
View File

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

25
pages/settings.vue
View File

@@ -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>

15
pages/user.vue
View File

@@ -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>

22
types/cookbook.ts Normal file
View File

@@ -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
}

1
types/index.ts
View File

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

1
uno.config.ts
View File

@@ -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(),

11
utils/cookbook.ts Normal file
View File

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