支持带章节作品 网站功能基本完善 🥳

[UX]
增加对格式错误的链接检测
在搜索或者切换章节时地址栏和标题会跟着变动

[UI]
不再使用 mdui-collapse 作为作品信息容器
SSR 时作品文段渲染增加到 20 行

[Fix]
SSR 时 Category 与 Fandom 标识错误

[Base]
Summary 不再使用 v-for

[NewBug]
在搜索不到东西时会显示搜索完成, 推断是状态转移不完全

src/views/Work.vue

@@ -19,8 +19,6 @@ import 'mdui/components/button.js'
 import 'mdui/components/dropdown.js'
 import 'mdui/components/menu.js'
 import 'mdui/components/menu-item.js'
-import 'mdui/components/collapse.js'
-import 'mdui/components/collapse-item.js'
 import 'mdui/components/card.js'
 
 import '@mdui/icons/bookmark.js'
@@ -41,6 +39,7 @@ let lastCloseTimer = null
 let isObserver = null
 let paragraphs = []
 let currentParagraph = null
+const chapterDialog = ref(null)
 
 const categoryName = {
 	mm: "男/男",
@@ -48,21 +47,25 @@ const categoryName = {
 	fm: '女/男'
 }
 
-
 onServerPrefetch(async () => {
 	await workReadState.loadWork(route.params.id, route.params.cid)
 })
 
 onMounted(async () => {
+	watch(() => workReadState.state, (value) => { if (value == 'ready') routeState.customTitle = workReadState.title })
 	if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id, route.params.cid)
 	if (workReadState.state == 'ready') {
 		routeState.customTitle = workReadState.title
+		if (parseInt(route.params.cid) != workReadState.cid) {
+			router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
+			return;
+		}
 		const paraCount = workReadState.text.length - 1
 		isObserver = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting) {
 					currentParagraph = entry.target
-					readIndex = entry.target.dataset.index;
+					readIndex = entry.target.dataset.index	
 					readPercent.value = parseInt(readIndex / paraCount * 100)
 					if (lastPercent == 0) {
 						lastPercent = readPercent.value
@@ -89,8 +92,13 @@ onMounted(async () => {
 })
 
 onBeforeUnmount(() => {
-	isObserver.disconnect();
+	if(isObserver) isObserver.disconnect();
 })
+
+async function switchWorkWithIndex(target) {
+	workReadState.loadWork(workReadState.id,workReadState.chapters[target].chapterId);
+	router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
+}
 </script>
 
 <template>
@@ -108,14 +116,20 @@ onBeforeUnmount(() => {
 			</template>
 			<a @click="$router.back()">返回</a>
 		</template>
+		<template v-if="workReadState.state == 'errformat'">
+			 <h2>路径格式错误</h2>
+			ID: {{ $route.params.id }}<br/>
+			<template v-if="$route.params.id">
+				CID: {{ $route.params.id }}
+			</template><br/>
+			 <a @click="$router.back()">返回</a>
+		</template>
 		<template v-if="workReadState.state == 'ready'">
 			<article>
 				<h1 style="margin: auto">{{ workReadState.title }}</h1>
 				<h4>{{ workReadState.pesud }}</h4>
-				<mdui-card style="margin: 8px; padding: 0px;"><mdui-collapse acc>
-					<mdui-collapse-item value="info"><mdui-list-item class="infoblockhead" slot="header">
-						作品信息
-					</mdui-list-item><div class="infoblock"><dl>
+				<mdui-card style="margin: 8px; padding: 16px;">
+					<strong>作品信息</strong><dl>
 						<template v-if="workReadState.category"><dt>分类</dt><ul>
 							<li v-for="item in workReadState.category" :key="item">
 							{{ categoryName[item] }}</li>
@@ -127,10 +141,8 @@ onBeforeUnmount(() => {
 						<dt>语言</dt><dd>
 							{{ workReadState.lang }}
 						</dd>
-					</dl></div></mdui-collapse-item>
-					<mdui-collapse-item value="stats"><mdui-list-item class="infoblockhead" slot="header">
-						作品状态
-					</mdui-list-item><div class="infoblock"><dl>
+					</dl><Hr/>
+					<strong>作品状态</strong><dl>
 						<dt>发布时间</dt><dd>
 							{{ workReadState.publishedTime.year }} -
 							{{ workReadState.publishedTime.month }} -
@@ -142,20 +154,44 @@ onBeforeUnmount(() => {
 						<dt>点击</dt><dd>
 							{{ workReadState.hitCount }}
 						</dd>
-					</dl></div></mdui-collapse-item>
-				</mdui-collapse></mdui-card>
-				<blockquote>
-					<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
+					</dl>
+				</mdui-card>
+				<template v-if="workReadState.chapters">
+					<p>第 {{ workReadState.chapterIndex + 1 }} / {{ workReadState.chapters.length }} 章: {{ workReadState.chapters[workReadState.chapterIndex].title }}</p>
+					<mdui-button variant='filled' @click="chapterDialog.open = true">章节列表</mdui-button>
+				</template>
+				<blockquote v-if="workReadState.summary">
+					<p v-html='workReadState.summary'></p>
 				</blockquote>
 				<Hr />
 				<article ref='content'>
 					<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
 				</article>
 			</article>
+			<Hr/>
+			<p style="display: flex;" v-if="workReadState.chapters">
+				<mdui-button variant="filled" v-if="workReadState.chapterIndex != 0" @click="switchWorkWithIndex(workReadState.chapterIndex - 1)">上一章</mdui-button>
+				<span style="flex: 1;"/>
+				{{ workReadState.chapterIndex + 1 }} / {{ workReadState.chapters.length }}
+				<span style="flex: 1;"/>
+				<mdui-button variant="filled" v-if="workReadState.chapterIndex != workReadState.chapters.length - 1" @click="switchWorkWithIndex(workReadState.chapterIndex + 1)">下一章</mdui-button>
+			</p>
+			<div style="height: 64px" />
 			<mdui-fab class="mdui-fab" :extended="fabExtended">
 				<mdui-icon-bookmark slot="icon"></mdui-icon-bookmark>
 				{{ readPercent }}%
 			</mdui-fab>
+			<mdui-dialog ref='chapterDialog' close-on-overlay-click>
+				<span slot="headline">章节列表</span>
+				<span slot="description">
+					共 {{ workReadState.chapters.length }} 个
+				<br/>
+					点击跳转
+				</span>
+				<mdui-list><mdui-list-item v-for="(chapter,index) in workReadState.chapters" :key="chapter.chapterId" @click="switchWorkWithIndex(index)">
+					{{index + 1}}. {{ chapter.title }}
+				</mdui-list-item></mdui-list>
+			</mdui-dialog>
 		</template>
 	<template #ssr>
 		<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
@@ -171,11 +207,11 @@ onBeforeUnmount(() => {
 			<h2>{{ workReadState.title }}</h2>
 			<h4>{{ workReadState.pesud }}</h4>
 			<dl>
-				<template v-if="workReadState.category"><dt>作品圈</dt><ul>
+				<template v-if="workReadState.category"><dt>分类</dt><ul>
 					<li v-for="item in workReadState.category" :key="item">
 					{{ categoryName[item] }}</li>
 				</ul></template>
-				<template v-if="workReadState.fandom"><dt>原著</dt><ul>
+				<template v-if="workReadState.fandom"><dt>作品圈</dt><ul>
 					<li v-for="item in workReadState.fandom" :key="item">
 					{{ item }}</li>
 				</ul></template>
@@ -195,11 +231,11 @@ onBeforeUnmount(() => {
 				</dd>
 			</dl>
 			<Hr />
-			<blockquote>
-				<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
+			<template v-if="workReadState.summary"><blockquote>
+				<p v-html='workReadState.summary'></p>
 			</blockquote>
-			<Hr/>
-			<article><p v-for="para in workReadState.text.slice(0, 10)" :key="para">{{ para }}</p></article>
+			<Hr /></template>
+			<article><p v-for="para in workReadState.text.slice(0, 20)" :key="para">{{ para }}</p></article>
 		</template>
 	</template></ClientOnly>
 </template>
@@ -212,12 +248,4 @@ onBeforeUnmount(() => {
     z-index: 1000; /* 确保悬浮按钮在其他内容上方 */
     animation: slideInFromRight var(--mdui-motion-duration-medium2) var(--mdui-motion-easing-standard); /* 动画时长和缓动效果 */
 }
-
-.infoblock {
-	margin: 8px 16px;
-}
-
-.infoblockhead {
-	background-color: rgb(var(--mdui-color-primary-container));
-}
 </style>