修整了代码, 移除不必要导入, 使代码紧凑

[UX] 在路由加载时如果有新的路由请求直接拦截取消 (beforeEach 路由守卫)
2025-05-31 19:05:56 +08:00
parent 7c46970dfe
commit 3a6d10c2ec
21 changed files with 242 additions and 446 deletions
--- a/src/views/Developer.vue
+++ b/src/views/Developer.vue
@ -1,11 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'

 import { useApiStore } from '@/stores/api.js'
 import { useRouteStore } from '../stores/route.js'

-const router = useRouter()
 const api = useApiStore()
 const routeStore = useRouteStore()

@ -30,45 +28,33 @@ onMounted(() => {
 })
 </script>

-
 <template>
 	<h1 class="warn-text">注意本页面仅为测试用!</h1>
 	<blockquote>
 		当然如果你是乱点那个唐鬼小人进来的, 这就是个彩蛋? (神金
-	</blockquote>
-	<Hr />
+	</blockquote><Hr />
 	<section>
 		<h2>页面信息</h2>
 		<h3>可见路由信息:</h3>
 		<pre>{{ routeStore.allRoutes }}</pre>
-	</section>
-	<Hr />
-	<ClientOnly>
-		<section>
-			<h2>浏览器信息</h2>
-			<dl>
-				<dt>User-Agent:</dt>
-				<dd>{{ ua }}</dd>
-				<dt>语言:</dt>
-				<dd>{{ language }}</dd>
-				<dt>平台:</dt>
-				<dd>{{ platform }}</dd>
-				<dt>屏幕尺寸:</dt>
-				<dd>{{ screenSize }}</dd>
-				<dt>视口尺寸:</dt>
-				<dd>{{ viewportSize }}</dd>
-				<dt>像素比:</dt>
-				<dd>{{ pixelRatio }}</dd>
-				<dt>是否触屏设备:</dt>
-				<dd>{{ touchSupport ? '是' : '否' }}</dd>
-				<dt>页面可见性状态:</dt>
-				<dd>{{ visibility }}</dd>
-			</dl>
-		</section>
-		<Hr />
-	</ClientOnly>
+	</section><Hr />
+	<ClientOnly><section>
+		<h2>浏览器信息</h2><dl>
+		<dt>User-Agent:</dt>
+		<dd>{{ ua }}</dd>
+		<dt>语言:</dt>
+		<dd>{{ language }}</dd>
+		<dt>平台:</dt>
+		<dd>{{ platform }}</dd>
+		<dt>屏幕尺寸:</dt>
+		<dd>{{ screenSize }}</dd>
+		<dt>视口尺寸:</dt>
+		<dd>{{ viewportSize }}</dd>
+		<dt>像素比:</dt>
+		<dd>{{ pixelRatio }}</dd>
+		<dt>是否触屏设备:</dt>
+		<dd>{{ touchSupport ? '是' : '否' }}</dd>
+		<dt>页面可见性状态:</dt>
+		<dd>{{ visibility }}</dd>
+	</dl></section><Hr /></ClientOnly>
 </template>
-
-
-<style scoped>
-</style>
--- a/src/views/Mask.vue
+++ b/src/views/Mask.vue
@ -1,24 +0,0 @@
-<script setup>
-import { ref, onMounted, onServerPrefetch, onBeforeMount} from 'vue'
-import { useRouter, useRoute, RouterView } from 'vue-router'
-const router = useRouter()
-import { useApiStore } from '@/stores/api.js'
-const api = useApiStore()
-
-onServerPrefetch(async () => {
-	// Load data
-})
-onBeforeMount(() => {
-	// Re apply data
-})
-onMounted(() => {
-	// Render other
-})
-</script>
-
-<template>
-	Padding! No content cause hydration mismatch!
-</template>
-
-<style scoped>
-</style>
--- a/src/views/Root.vue
+++ b/src/views/Root.vue
@ -10,29 +10,23 @@ import Intro from '../texts/intro.md'
 const router = useRouter()

 function convert(from) {
-	if( Number(from) ) {
-		return {
-			type: 's',
-			id: Number(from)
-		}
-	} else if (from.includes('https://archiveofourown.org/works/')) {
+	if( Number(from) ) {return {
+		type: 's',
+		id: Number(from)
+	}} else if (from.includes('https://archiveofourown.org/works/')) {
 		const sid = from.split('https://archiveofourown.org/works/')[1];
 		if ( sid ) {
 			const id = Number(sid)
-			if (id) {
-				return {
-					type: 's',
-					id
-				}
-			} else {
+			if (id) { return {
+				type: 's',
+				id
+			}} else {
 				const splited = sid.split('/chapters/')
 				const id = Number(splited[0])
 				const cid = Number(splited[1])
-				if (id && cid) {
-					return {
-						type: 'c',
-						id, cid
-					}
+				if (id && cid) return {
+					type: 'c',
+					id, cid
 				}
 			}
 		}
@ -42,22 +36,19 @@ function convert(from) {

 function onConvert(data) {
 	const { type, id, cid, key } = convert(data.src)
-	if (type == null) {
-	} else if ( type == 'f') {
-		router.push(`/search/simple?keyword=${encodeURIComponent(key)}`)
-	} else {
+	if (type == null) return
+	else if ( type == 'f') router.push(`/search/simple?keyword=${encodeURIComponent(key)}`)
+	else {
 		if (cid) router.push(`/work/${id}/${cid}`)
 		else router.push(`/work/${id}`)
 	}
 }
-
 </script>

 <template>
 	<img style="display: block; margin: 0px auto 10px;" height="200px" alt="logo" src="/favicon.svg" />
 	<h1>欢迎来到 AO3 Mirror! 👋👋</h1>
-	<p>一个基于重构渲染的 AO3 镜像站</p>
-	<Hr />
+	<p>一个基于重构渲染的 AO3 镜像站</p><Hr />
 	<section id="converter">
 		<h2>链接转换</h2>
 		<p>AO3 链接 或 关键词搜索</p>
@ -67,13 +58,11 @@ function onConvert(data) {
 			<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" />
+		</div><template #ssr>
+			<input type="text" id="src" name="src" />
+			<input type="submit" />
 		</template></ClientOnly></Form>
-	</section>
-	<Hr/>
+	</section><Hr/>
 	<Intro />
 </template>

--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@ -11,25 +11,21 @@ let appSetting = null
 onBeforeMount(() => {
 	appSetting = useAppSettingStore()
 })
-
 </script>

 <template>
-	<h1>设置</h1>
-	<Hr />
-	<ClientOnly><div class="settings">
-		<section><mdui-card>
-			<h2>界面</h2><Hr />
-			<div>自动黑暗模式<div style="flex: 1;"/>
-			<mdui-switch :checked="appSetting.value.autoTheme"
-			@change="e => appSetting.value.autoTheme = e.target.checked">
-			</mdui-switch></div>
-			<div v-if="!appSetting.value.autoTheme">默认黑暗模式<div style="flex: 1;"/>
-			<mdui-switch :checked="appSetting.value.darkTheme"
-			@change="e => appSetting.value.darkTheme = e.target.checked">
-			</mdui-switch></div>
-		</mdui-card></section>
-	</div></ClientOnly>
+	<h1>设置</h1><Hr />
+	<ClientOnly><div class="settings"><section><mdui-card>
+		<h2>界面</h2><Hr />
+		<div>自动黑暗模式<div style="flex: 1;"/>
+		<mdui-switch :checked="appSetting.value.autoTheme"
+		@change="e => appSetting.value.autoTheme = e.target.checked">
+		</mdui-switch></div>
+		<div v-if="!appSetting.value.autoTheme">默认黑暗模式<div style="flex: 1;"/>
+		<mdui-switch :checked="appSetting.value.darkTheme"
+		@change="e => appSetting.value.darkTheme = e.target.checked">
+		</mdui-switch></div>
+	</mdui-card></section></div></ClientOnly>
 </template>

 <style scoped>
--- a/src/views/SimpleSearch.vue
+++ b/src/views/SimpleSearch.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, nextTick, onServerPrefetch, onBeforeUnmount	 } from 'vue'
+import { ref, watch, onMounted, nextTick, onServerPrefetch, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'

 import 'mdui/components/text-field.js'
@ -26,11 +26,7 @@ const stateLabel = {

 let isObserver = null

-onServerPrefetch(async () => {
-	if (route.query.keyword) {
-		await simpleSearchState.start(route.query.keyword)
-	}
-})
+onServerPrefetch(async () => { if (route.query.keyword) await simpleSearchState.start(route.query.keyword) })

 onMounted(async () => {
 	watch(() => simpleSearchState.keyword, () => document.title = simpleSearchState.keyword)
@ -38,18 +34,14 @@ onMounted(async () => {
 	if (inputField.value && simpleSearchState != 'ssrready') simpleSearchState.start(inputField.value)
 	isObserver = new IntersectionObserver((entries) => {
 		entries.forEach((entry) => {
-			if (entry.isIntersecting) {
-				if (simpleSearchState.state == 'ready' || simpleSearchState.state == 'ssrready') setTimeout(simpleSearchState.load,400)
-			}
+			if (entry.isIntersecting) if (simpleSearchState.state == 'ready' || simpleSearchState.state == 'ssrready') setTimeout(simpleSearchState.load,400)
 		})
 	}, { threshold: 1 })
 	await nextTick()
 	isObserver.observe(label.value)
 })

-onBeforeUnmount(() => {
-	isObserver.disconnect();
-})
+onBeforeUnmount(() => isObserver.disconnect())

 function onSubmit(data) {
 	if (simpleSearchState) {
@ -57,7 +49,6 @@ function onSubmit(data) {
 		router.replace(`/search/simple?keyword=${encodeURIComponent(data.src)}`)
 	}
 }
-
 </script>

 <template>
@ -79,14 +70,12 @@ function onSubmit(data) {
 	<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 />
+			<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 />
+			<p>{{ work.summary }}</p><Hr />
 		</template></ClientOnly>
 	</template>
 	<p style="display: flex;" ref='label'>
--- a/src/views/Work.vue
+++ b/src/views/Work.vue
@ -1,14 +1,14 @@
 <script setup>
-import { ref, onMounted, onServerPrefetch, onBeforeUnmount, watch, nextTick } from 'vue'
-import { useRouter, useRoute, RouterView } from 'vue-router'
+import { ref, onMounted, onBeforeUnmount, onServerPrefetch, watch, nextTick } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 const router = useRouter()
 const route = useRoute()

 import { useWorkReadState } from '@/stores/workRead.js'
-const workReadState = useWorkReadState()
-
 import { useRouteStore } from '@/stores/route.js'
+
 const routeState = useRouteStore()
+const workReadState = useWorkReadState()

 import 'mdui/components/list.js'
 import 'mdui/components/list-item.js'
@ -23,10 +23,6 @@ import 'mdui/components/card.js'

 import '@mdui/icons/bookmark.js'

-import { confirm } from 'mdui/functions/confirm.js'
-import { snackbar } from 'mdui/functions/snackbar.js'
-import { prompt } from 'mdui/functions/prompt.js'
-
 import { mduiSnackbar } from '../utils.js'

 const fabExtended = ref(false)
@ -47,9 +43,7 @@ const categoryName = {
 	fm: '女/男'
 }

-onServerPrefetch(async () => {
-	await workReadState.loadWork(route.params.id, route.params.cid)
-})
+onServerPrefetch(async () => await workReadState.loadWork(route.params.id, route.params.cid))

 onMounted(async () => {
 	watch(() => workReadState.state, (value) => { if (value == 'ready') routeState.customTitle = workReadState.title })
@ -58,7 +52,7 @@ onMounted(async () => {
 		routeState.customTitle = workReadState.title
 		if (workReadState.cid !== null && parseInt(route.params.cid) != workReadState.cid) {
 			router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
-			return;
+			return
 		}
 		const paraCount = workReadState.text.length - 1
 		isObserver = new IntersectionObserver((entries) => {
@ -86,17 +80,15 @@ onMounted(async () => {
 			threshold: 0.5
 		})
 		await nextTick()
-		paragraphs = content.value?.querySelectorAll('p');
-		paragraphs?.forEach(p => isObserver.observe(p));
+		paragraphs = content.value?.querySelectorAll('p')
+		paragraphs?.forEach(p => isObserver.observe(p))
 	}
 })

-onBeforeUnmount(() => {
-	if(isObserver) isObserver.disconnect();
-})
+onBeforeUnmount(() => { if(isObserver) isObserver.disconnect() })

 async function switchWorkWithIndex(target) {
-	workReadState.loadWork(workReadState.id,workReadState.chapters[target].chapterId);
+	workReadState.loadWork(workReadState.id,workReadState.chapters[target].chapterId)
 	router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
 }
 </script>