|
|
@ -56,7 +56,7 @@ onMounted(async () => {
|
|
|
|
if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id, route.params.cid)
|
|
|
|
if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id, route.params.cid)
|
|
|
|
if (workReadState.state == 'ready') {
|
|
|
|
if (workReadState.state == 'ready') {
|
|
|
|
routeState.customTitle = workReadState.title
|
|
|
|
routeState.customTitle = workReadState.title
|
|
|
|
if (parseInt(route.params.cid) != workReadState.cid) {
|
|
|
|
if (workReadState.cid !== null && parseInt(route.params.cid) != workReadState.cid) {
|
|
|
|
router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
|
|
|
|
router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -89,7 +89,6 @@ onMounted(async () => {
|
|
|
|
paragraphs = content.value?.querySelectorAll('p');
|
|
|
|
paragraphs = content.value?.querySelectorAll('p');
|
|
|
|
paragraphs?.forEach(p => isObserver.observe(p));
|
|
|
|
paragraphs?.forEach(p => isObserver.observe(p));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log(workReadState.chapterStat)
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
onBeforeUnmount(() => {
|
|
|
@ -163,9 +162,13 @@ async function switchWorkWithIndex(target) {
|
|
|
|
</dd></template>
|
|
|
|
</dd></template>
|
|
|
|
</dl>
|
|
|
|
</dl>
|
|
|
|
</mdui-card>
|
|
|
|
</mdui-card>
|
|
|
|
<template v-if="workReadState.chapters">
|
|
|
|
<template v-if="workReadState.cid">
|
|
|
|
<p>第 {{ workReadState.chapterIndex + 1 }} / {{ workReadState.chapters.length }} 章: {{ workReadState.chapters[workReadState.chapterIndex].title }}</p>
|
|
|
|
<h4>第 {{ workReadState.chapterIndex + 1 }} / {{ workReadState.chapters.length }} 章: {{ workReadState.chapters[workReadState.chapterIndex].title }}</h4>
|
|
|
|
<mdui-button variant='filled' @click="chapterDialog.open = true">章节列表</mdui-button>
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
|
|
|
<mdui-button variant="filled" v-if="workReadState.chapterIndex != 0" @click="switchWorkWithIndex(workReadState.chapterIndex - 1)">上一章</mdui-button>
|
|
|
|
|
|
|
|
<mdui-button variant='elevated' @click="chapterDialog.open = true" style="margin: 0px 16px;">章节列表</mdui-button>
|
|
|
|
|
|
|
|
<mdui-button variant="filled" v-if="workReadState.chapterIndex != workReadState.chapters.length - 1" @click="switchWorkWithIndex(workReadState.chapterIndex + 1)">下一章</mdui-button>
|
|
|
|
|
|
|
|
</div><br/>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<blockquote v-if="workReadState.summary">
|
|
|
|
<blockquote v-if="workReadState.summary">
|
|
|
|
<p v-html='workReadState.summary'></p>
|
|
|
|
<p v-html='workReadState.summary'></p>
|
|
|
@ -174,7 +177,7 @@ async function switchWorkWithIndex(target) {
|
|
|
|
<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
|
|
|
|
<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
|
|
|
|
</article>
|
|
|
|
</article>
|
|
|
|
</article><Hr/>
|
|
|
|
</article><Hr/>
|
|
|
|
<p style="display: flex;" v-if="workReadState.chapters">
|
|
|
|
<p style="display: flex;" v-if="workReadState.cid">
|
|
|
|
<mdui-button variant="filled" v-if="workReadState.chapterIndex != 0" @click="switchWorkWithIndex(workReadState.chapterIndex - 1)">上一章</mdui-button>
|
|
|
|
<mdui-button variant="filled" v-if="workReadState.chapterIndex != 0" @click="switchWorkWithIndex(workReadState.chapterIndex - 1)">上一章</mdui-button>
|
|
|
|
<span style="flex: 1;"/>
|
|
|
|
<span style="flex: 1;"/>
|
|
|
|
{{ workReadState.chapterIndex + 1 }} / {{ workReadState.chapters.length }}
|
|
|
|
{{ workReadState.chapterIndex + 1 }} / {{ workReadState.chapters.length }}
|
|
|
@ -193,7 +196,11 @@ async function switchWorkWithIndex(target) {
|
|
|
|
<br/>
|
|
|
|
<br/>
|
|
|
|
点击跳转
|
|
|
|
点击跳转
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<mdui-list><mdui-list-item v-for="(chapter,index) in workReadState.chapters" :key="chapter.chapterId" @click="switchWorkWithIndex(index)">
|
|
|
|
<mdui-list><mdui-list-item
|
|
|
|
|
|
|
|
v-for="(chapter,index) in workReadState.chapters"
|
|
|
|
|
|
|
|
:key="chapter.chapterId" @click="switchWorkWithIndex(index)"
|
|
|
|
|
|
|
|
:class="{ 'active-item' : index === workReadState.chapterIndex }"
|
|
|
|
|
|
|
|
>
|
|
|
|
{{index + 1}}. {{ chapter.title }}
|
|
|
|
{{index + 1}}. {{ chapter.title }}
|
|
|
|
</mdui-list-item></mdui-list>
|
|
|
|
</mdui-list-item></mdui-list>
|
|
|
|
</mdui-dialog>
|
|
|
|
</mdui-dialog>
|
|
|
@ -250,6 +257,9 @@ async function switchWorkWithIndex(target) {
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
.active-item {
|
|
|
|
|
|
|
|
background-color: rgb(var(--mdui-color-secondary-container-light));
|
|
|
|
|
|
|
|
}
|
|
|
|
.mdui-fab {
|
|
|
|
.mdui-fab {
|
|
|
|
position: fixed;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 16px; /* 调整垂直位置 */
|
|
|
|
bottom: 16px; /* 调整垂直位置 */
|
|
|
|