Created
January 12, 2022 07:20
-
-
Save xieyuheng/7b99f6ee022dca7177cecd1b8f8bca3d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="max-w-3xl mx-auto"> | |
<PageError | |
v-if="error" | |
:error="error" | |
:subtitle="config.lang.zh ? '书籍 >_<' : 'Books >_<'" | |
/> | |
<div v-else-if="!state" class="px-4 py-6 font-sans text-xl text-gray-500"> | |
<div v-if="config.lang.zh" class="font-bold">书籍加载中⋯⋯</div> | |
<div v-else class="font-bold">Loading book ...</div> | |
<LinkInfo class="py-4" :link="link" /> | |
</div> | |
<BookContents v-else-if="frontMatter === 'contents'" :state="state" /> | |
<BookPage v-else-if="state.link.path" :state="state" /> | |
<BookTitlePage v-else :state="state" /> | |
</div> | |
</template> | |
<script setup lang="ts"> | |
import { ref, computed, watch, onErrorCaptured } from "vue" | |
import { useMeta } from "vue-meta" | |
import { Link } from "../../models/link" | |
import { BookState as State } from "./book-state" | |
import { config } from "../../states/config" | |
import LinkInfo from "../../components/link-info/LinkInfo.vue" | |
import PageError from "../../layouts/page-layout/PageError.vue" | |
import BookTitlePage from "./BookTitlePage.vue" | |
import BookContents from "./BookContents.vue" | |
import BookPage from "./BookPage.vue" | |
const props = defineProps<{ | |
link: string | |
frontMatter?: string | |
backMatter?: string | |
}>() | |
const state = ref<State | null>(null) | |
const error = ref<unknown | null>(null) | |
const link = computed(() => Link.parse(props.link)) | |
onErrorCaptured((e, component, info) => { | |
error.value = e | |
return false | |
}) | |
watch( | |
link, | |
async () => { | |
try { | |
await updateState(link.value) | |
} catch (e) { | |
error.value = e | |
} | |
}, | |
{ immediate: true } | |
) | |
async function updateState(link: Link): Promise<void> { | |
if ( | |
state.value && | |
state.value.link.root().format() === link.root().format() | |
) { | |
state.value.link = link | |
} else { | |
state.value = await State.build(link) | |
} | |
state.value.saveHistory() | |
} | |
const meta = computed(() => { | |
return state.value ? { title: state.value.title } : {} | |
}) | |
useMeta(meta) | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment