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

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

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

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

[Base]
Summary 不再使用 v-for

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

src/composables/apiRequest.js

@@ -1,6 +1,8 @@
 import { useAxios } from '@vueuse/integrations/useAxios'
 import axios from 'axios'
 
+import { objectToQueryString } from '../utils.js'
+
 function getEndpoint() {
   const apiMapping = {
     '': ['http://localhost:28001/', '/api/'],
@@ -20,7 +22,10 @@ function replaceUrl(url) {
 export function useApiRequest(method, url, data, config = {}) {
   const start = Date.now()
   const baseURL = getEndpoint()
-  const fullURL = `${baseURL}${url}`
+  // 若为 GET 请求，将 data 转为查询参数拼接到 URL 上
+  const fullURL = method === 'GET' && data
+    ? `${baseURL}${url}?${objectToQueryString(data)}`
+    : `${baseURL}${url}`
   const {
     response,
     error,

src/main.js

@@ -16,5 +16,6 @@ export function createApp() {
 		.component('Hr', Hr)
 		.component('BetterHr', Hr)
 		.component('Form', Form)
+		.component('BetterForm', Form)
 	return { app, pinia }
 }

src/router.js

@@ -39,21 +39,29 @@ export function createSSRRouter() {
 				title: '阅读',
 				hidden: true
 			}
+		},{
+			path: '/search/simple',
+			name: '搜索',
+			component: () => import('./views/SimpleSearch.vue'),
+			meta: {
+				title: '搜索',
+				order: 2
+			}
 		},{
 			path: '/settings',
 			name: '设置',
 			component: () => import('./views/Settings.vue'),
 			meta: {
 				title: '设置',
-				order: 2
+				order: 90
 			},
 		},{
 			path: '/about',
 			name: '关于',
-			component: () => import('./views/About.vue'),
+			component: () => import('./views/About.md'),
 			meta: {
 				title: '',
-				order: 3
+				order: 100
 			},
 		},{
 			path: '/developer',

src/stores/api.js

@@ -8,13 +8,13 @@ export const useApiStore = defineStore('api', () => {
 		return await execute()
 	}
 
-	async function postData(url, payload) {
-		const { execute } = useApiRequest('POST', url, payload)
+	async function workSimpleSearch(keyword, page = 1) {
+		const { execute } = useApiRequest('GET', 'search/simple', { keyword, page })
 		return await execute()
 	}
 
 	return {
 		getWork,
-		postData,
+		workSimpleSearch
 	}
 })

src/stores/search.js

@@ -0,0 +1,58 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { useApiStore } from '@/stores/api.js'
+
+export const useSimpleSearchState = defineStore('simpleSearch', () => {
+	const api = useApiStore()
+	const keyword = ref('')
+	const result = ref([])
+	const count = ref(0)
+	const pageCount = ref(0)
+	const currentPage = ref(0)
+	const state = ref(null)
+	async function load() {
+		if (pageCount.value && currentPage.value >= pageCount.value){ state.value = 'finish'; return }
+		let res = await api.workSimpleSearch(keyword.value, currentPage.value)
+		res = res.data
+		if( pageCount.value ) {
+			currentPage.value++
+			if (currentPage.value > pageCount.value) currentPage.value = pageCount.value
+		}
+		if (res.code == 0) {
+			if ( !pageCount.value )  {
+				pageCount.value = res.pageCount
+				currentPage.value = res.page
+			}
+			count.value = res.count
+			state.value = import.meta.env.SSR ? 'ssrready' : 'ready'
+			result.value.push(...res.works)
+		} else if (res.code == 1) {
+			if ( count.value ) {
+				state.value = 'finish'
+			} else {
+				currentPage.value = 0
+				state.value = 'notfound'
+			}
+		}
+	}
+	async function start(key) {
+		if (key == keyword.value) return
+		keyword.value = key
+		result.value = []
+		state.value = 'loading'
+		currentPage.value = 1
+		pageCount.value = 0
+		await load()
+	} 
+	
+	return {
+		keyword,
+		result,
+		count,
+		pageCount,
+		currentPage,
+		state,
+		load, start
+	}
+})

src/stores/workRead.js

@@ -10,7 +10,7 @@ export const useWorkReadState = defineStore('workRead', () => {
 	const id = ref(null)
 	const cid = ref(null)
 	const summary = ref(null)
-	const pesud = ref(null)
+	const pseud = ref(null)
 	const title = ref(null)
 	const text = ref(null)
 	const state = ref('')
@@ -21,11 +21,14 @@ export const useWorkReadState = defineStore('workRead', () => {
 	const category = ref([])
 	const fandom = ref([])
 	const lang = ref(null)
+	const chapters = ref([])
+	const chapterIndex = ref(null)
 	function setData(data) {
+		cid.value = data.chapterId
 		id.value = data.workId
 		title.value = data.title
-		summary.value = [escapeAndFormatText(data.summary)]
-		pesud.value = data.pesud
+		summary.value = data.summary ? escapeAndFormatText(data.summary) : null
+		pseud.value = data.pseud
 		text.value = data.text
 		publishedTime.value = data.stats.publishedTime
 		wordCount.value = data.stats.wordCount
@@ -34,11 +37,26 @@ export const useWorkReadState = defineStore('workRead', () => {
 		category.value = data.category
 		fandom.value = data.fandom
 		lang.value = data.lang
+		chapters.value = data.chapters || []
+		chapterIndex.value = data.chapterIndex ?? null
 	}
 	async function loadWork(target, targetc) {
-		if (target == id.value && targetc == cid.value || state.value == 'loading') return
+		const itarget = parseInt(target)
+		if (isNaN(itarget)) {
+			console.log('a')
+			state.value = 'errformat'
+			return
+		}
+		const itargetc = parseInt(targetc)
+		if (
+			itarget === id.value &&
+			(itargetc === cid.value || (isNaN(itargetc) && cid.value === null)) &&
+			state.value !== 'loading'
+		) return
+		id.value = itarget
+		cid.value = isNaN(itargetc) ? null : itargetc
 		state.value = 'loading'
-		const result = await api.getWork(target, targetc)
+		const result = await api.getWork(id.value, cid.value)
 		if (result.status == 200) {
 			setData(result.data)
 			state.value = 'ready'
@@ -51,7 +69,7 @@ export const useWorkReadState = defineStore('workRead', () => {
 		id, cid,
 		title,
 		summary,
-		pesud,
+		pseud,
 		text,
 		state,
 		publishedTime,
@@ -61,6 +79,8 @@ export const useWorkReadState = defineStore('workRead', () => {
 		category,
 		fandom,
 		lang,
+		chapters,
+		chapterIndex,
 		setData,
 		loadWork
 	}

src/texts/intro.md

@@ -1,9 +1,3 @@
-# 欢迎来到 AO3 Mirror! 👋👋
-
-一个基于重构渲染的 AO3 镜像站
-
----
-
 ## 这是什么🤨
 
 本网站是对 ArchiveOfOurOwn (AO3) 的一个镜像网站
@@ -45,3 +39,4 @@
 - ✅ 作品详细数据
 - 📝 搜索
 - ❌ 书签 (本地) **不再支持! [详情](/about#deprecated-feature-bookmark)**
+

src/views/About.md

@@ -1,3 +1,18 @@
+<script setup>
+import About from '../texts/about.md'
+import FunAnimation from '../components/FunAnimation.vue'
+
+import 'mdui/components/avatar.js'
+/*import { onBeforeMount, onMounted, onUnmounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
+console.log('Setup')
+onBeforeMount(() => console.log('Before mount'))
+onMounted(() => console.log('Mounted'))
+onDeactivated(() => console.log('Deactivated'))
+onActivated(() => console.log('Activated'))
+onBeforeUnmount(() => console.log('Before unmount'))
+onUnmounted(() => console.log('Unmounted'))*/
+</script>
+
 # 关于
 
 这是什么, 有口舍用 ?
@@ -43,3 +58,5 @@
 本站支持 "Server Side Rendering" by Vite SSR
 
 CDN by Cloudflare (赛博佛祖😭)
+
+<FunAnimation />

src/views/About.vue

@@ -1,19 +0,0 @@
-<script setup>
-import About from '../texts/about.md'
-import FunAnimation from '../components/FunAnimation.vue'
-
-import 'mdui/components/avatar.js'
-/*import { onBeforeMount, onMounted, onUnmounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
-console.log('Setup')
-onBeforeMount(() => console.log('Before mount'))
-onMounted(() => console.log('Mounted'))
-onDeactivated(() => console.log('Deactivated'))
-onActivated(() => console.log('Activated'))
-onBeforeUnmount(() => console.log('Before unmount'))
-onUnmounted(() => console.log('Unmounted'))*/
-</script>
-<template>
-	<About/>
-	<FunAnimation />
-</template>
-

src/views/Root.vue

@@ -9,9 +9,6 @@ import Intro from '../texts/intro.md'
 
 const router = useRouter()
 
-const err = ref(false)
-const srcText = ref(null)
-
 function convert(from) {
 	if( Number(from) ) {
 		return {
@@ -20,7 +17,6 @@ function convert(from) {
 		}
 	} else if (from.includes('https://archiveofourown.org/works/')) {
 		const sid = from.split('https://archiveofourown.org/works/')[1];
-		console.log(sid)
 		if ( sid ) {
 			const id = Number(sid)
 			if (id) {
@@ -41,16 +37,15 @@ function convert(from) {
 			}
 		}
 	}
-	return { type: null }
+	return { type: 'f', key: from }
 }
 
 function onConvert(data) {
-	const { type, id, cid } = convert(data.src)
+	const { type, id, cid, key } = convert(data.src)
 	if (type == null) {
-		err.value = true
-		srcText.value?.focus()
+	} else if ( type == 'f') {
+		router.push(`/search/simple?keyword=${encodeURIComponent(key)}`)
 	} else {
-		err.value = false
 		if (cid) router.push(`/work/${id}/${cid}`)
 		else router.push(`/work/${id}`)
 	}
@@ -60,14 +55,14 @@ function onConvert(data) {
 
 <template>
 	<img style="display: block; margin: 0px auto 10px;" height="200px" alt="logo" src="/favicon.svg" />
-	<Intro />
-	<br/><Hr/>
+	<h1>欢迎来到 AO3 Mirror! 👋👋</h1>
+	<p>一个基于重构渲染的 AO3 镜像站</p>
+	<Hr />
 	<section id="converter">
 		<h2>链接转换</h2>
-		<p>输入完整链接或者 ID</p>
+		<p>AO3 链接 或 关键词搜索</p>
 		<Form @submit="onConvert"><ClientOnly>
-			<mdui-text-field variant="filled" label="链接" name="src" placeholder="https://archiveofourown.org/works/114514" ref='srcText'>
-			<span v-if='err' slot="helper" class='warn-text'>链接格式错误!</span>
+			<mdui-text-field variant="filled" label="链接 / 关键词" name="src">
 			</mdui-text-field><br/>
 			<div style="display: flex">
 				<div style="flex-grow: 1"></div>
@@ -78,4 +73,7 @@ function onConvert(data) {
 				<input type="submit" />
 		</template></ClientOnly></Form>
 	</section>
+	<Hr/>
+	<Intro />
 </template>
+

src/views/SimpleSearch.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ref, watch, onMounted, nextTick, onServerPrefetch, onBeforeUnmount	 } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import 'mdui/components/text-field.js'
+import 'mdui/components/card.js'
+
+import { escapeAndFormatText } from '../utils.js'
+import { useSimpleSearchState } from '../stores/search.js'
+
+const route = useRoute()
+const router = useRouter()
+
+const simpleSearchState = useSimpleSearchState()
+
+const inputField = ref('')
+const label = ref(null)
+const stateLabel = {
+	'loading': '加载中',
+	'finish': '加载完成',
+	'ready': '就绪',
+	'ssrready': '就绪',
+	'notfound': '未找到',
+	'ssrnotfound': '未找到',
+}
+
+let isObserver = null
+
+onServerPrefetch(async () => {
+	if (route.query.keyword) {
+		await simpleSearchState.start(route.query.keyword)
+	}
+})
+
+onMounted(async () => {
+	watch(() => simpleSearchState.keyword, () => document.title = simpleSearchState.keyword)
+	inputField.value = route.query.keyword || ''
+	if (inputField.value && simpleSearchState != 'ssrready') simpleSearchState.start(inputField.value)
+	isObserver = new IntersectionObserver((entries) => {
+		entries.forEach((entry) => {
+			if (entry.isIntersecting) {
+				if (simpleSearchState.state == 'ready') simpleSearchState.load()
+			}
+		})
+	}, { threshold: 1 })
+	await nextTick()
+	isObserver.observe(label.value)
+})
+
+onBeforeUnmount(() => {
+	isObserver.disconnect();
+})
+
+function onSubmit(data) {
+	if (simpleSearchState) {
+		simpleSearchState.start(data.src)
+		router.replace(`/search/simple?keyword=${encodeURIComponent(data.src)}`)
+	}
+}
+
+</script>
+
+<template>
+	<h1>搜索</h1>
+	<Form @submit="onSubmit"><ClientOnly>
+		<mdui-text-field variant="filled" :value="inputField" label="链接 / 关键词" name="src">
+		</mdui-text-field><br/>
+		<div style="display: flex">
+			<div style="flex-grow: 1"></div>
+			<mdui-button type="submit">-></mdui-button>
+		</div>
+	<template #ssr>
+		<input type="text" id="src" name="src" />
+		<input type="submit" />
+	</template></ClientOnly></Form><Hr />
+	<template v-if="simpleSearchState.state == 'ready' || simpleSearchState.state == 'finish' || simpleSearchState.state == 'ssrready'">
+		<p>找到 {{ simpleSearchState.count }}</p><Hr/>
+	</template>
+	<template v-if="simpleSearchState.result" v-for="work in simpleSearchState.result" :key="work.workId">
+		<ClientOnly><mdui-card style="margin: 8px 0px;"><article>
+			<router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link>
+			<h4>{{ work.pseud }}</h4>
+			<Hr />
+			<p v-html="escapeAndFormatText(work.summary)"></p>
+		</article></mdui-card><template #ssr>
+			<router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link>
+			<h4>{{ work.pseud }}</h4>
+			<p>{{ work.summary }}</p>
+			<Hr />
+		</template></ClientOnly>
+	</template>
+	<p style="display: flex;" ref='label'>
+		{{ stateLabel[simpleSearchState.state] }} ({{ simpleSearchState.count }})
+	<span style="flex: 1;"/>
+		{{ simpleSearchState.currentPage }} / {{ simpleSearchState.pageCount }}
+	</p>
+</template>

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'">
@@ -168,14 +204,14 @@ onBeforeUnmount(() => {
 			<a @click="$router.back()">返回</a>
 		</template>
 		<template v-if="workReadState.state == 'ready'">
-			<h1>{{ workReadState.title }}</h1>
-			<h2>{{ workReadState.pesud }}</h2>
+			<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>