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

[UX] 在路由加载时如果有新的路由请求直接拦截取消 (beforeEach 路由守卫)
2025-05-31 19:05:56 +08:00
parent 7c46970dfe
commit 3a6d10c2ec
21 changed files with 242 additions and 446 deletions
--- a/index.html
+++ b/index.html
@ -1,9 +1,17 @@
 <!doctype html>
-<html>
+<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
+    <title>AO3 Mirror</title>
+    <meta name="description" content="ArchiveOfOurOwn 镜像站, 使用 Vue 3 与 MDUI 2 重写界面, 优化 UI/UX" />
+    <meta name="author" content="UnknownMp" />
+    <meta property="og:title" content="AO3 Mirror">
+    <meta property="og:description" content="ArchiveOfOurOwn 镜像站">
+    <meta property="og:image" content="https://cdn.unknownmp.top/website/ao3mirror.svg">
+    <meta property="og:url" content="https://ao3.unknownmp.top">
+    <meta property="og:type" content="website">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg" href="/favicon.svg">
+    <link rel="icon" type="image/svg" href="/favicon.svg" />
    <!--app-head-->
  </head>
  <body>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,6 +1,8 @@
 <script setup>
-import { onMounted, onBeforeMount, onServerPrefetch, nextTick, ref, watch } from 'vue'
-import { useRouter, useRoute, RouterView } from 'vue-router'
+import 'mdui/mdui.css'
+import './main.scss'
+
+import { onMounted, onBeforeMount, nextTick, ref, watch } from 'vue'

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

@ -22,9 +24,6 @@ import '@mdui/icons/arrow-back.js'
 import '@mdui/icons/light-mode.js'
 import '@mdui/icons/menu.js'

-const router = useRouter()
-const route = useRoute()
-
 const clientOnlyStore = useClientOnlyStore()
 const api = useApiStore()
 let themeScheme = null
@ -35,26 +34,17 @@ const drawerOpen = ref(false)
 const drawer = ref(null)
 const closeDrawer = ref(true)

-let progressTimer = null
-
-onServerPrefetch(async () => {
-
-})
-
 onBeforeMount(() => {
+	themeScheme = useThemeStore()
 	mobileScreen.reCal()
 	if(!mobileScreen.isMobile) drawerOpen.value = true
 })

 onMounted(async () => {
-	themeScheme = useThemeStore()
 	themeScheme.applyTheme()
 	clientOnlyStore.setClient()
-	new MutationObserver(() => {
-	  if (document.documentElement.style.width.includes('calc')) {
-		document.documentElement.style.width = '';
-	  }
-	}).observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
+	new MutationObserver(() => { if (document.documentElement.style.width.includes('calc')) document.documentElement.style.width = '' })
+	.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
 	watch(() => mobileScreen.isMobile, (newV, oldV) => {
 		if( oldV && !newV ) nextTick(() => drawer.value.open = true)
 		if( !oldV && newV ) nextTick(() => drawer.value.open = false)
@ -65,12 +55,7 @@ onMounted(async () => {
 <template>
 	<header><ClientOnly>
 		<mdui-top-app-bar style="background-color: rgb(var(--mdui-color-primary-container));" scroll-behavior="shrink elevate">
-		<mdui-button-icon @click="drawer.open = !drawer.open">
-			<mdui-icon-menu></mdui-icon-menu>
-		</mdui-button-icon>
-		<!--<mdui-button-icon @click="$router.back()" v-if="$route.path != '/'">
-			<mdui-icon-arrow-back></mdui-icon-arrow-back>
-		</mdui-button-icon>-->
+		<mdui-button-icon @click="drawer.open = !drawer.open"><mdui-icon-menu></mdui-icon-menu></mdui-button-icon>
 		<mdui-top-app-bar-title style="color: rgb(var(--mdui-color-on-surface-variant))">{{ routeStore.title }}</mdui-top-app-bar-title>
 		<mdui-circular-progress v-if="routeStore.showProgress" :value='routeStore.progress' :max='routeStore.progressMax'></mdui-circular-progress>
 		<div style="flex-grow: 1"></div>
@ -98,10 +83,8 @@ onMounted(async () => {
 			:class="{ 'active-item' : item.path == $route.path }"
 			><a :href="item.path">{{ item.name }}</a></li></ul>
 	</template></ClientOnly></nav>
-	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient , 'content' : clientOnlyStore.isClient}">
-		<RouterView v-slot="{ Component }">
-			<component :is="Component" />
-		</RouterView>
+	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient , 'content' : clientOnlyStore.isClient }">
+		<RouterView />
 	</main><footer></footer>
 </template>

--- a/src/assets/typescale.css
+++ b/src/assets/typescale.css
@ -1,42 +0,0 @@
-.typescale-body-large {
-	line-height: var(--mdui-typescale-body-large-line-height);
-	font-size: var(--mdui-typescale-body-large-size);
-	letter-spacing: var(--mdui-typescale-body-large-tracking);
-	font-weight: var(--mdui-typescale-body-large-weight);
-}
-
-.typescale-body-small {
-	line-height: var(--mdui-typescale-body-small-line-height);
-	font-size: var(--mdui-typescale-body-small-size);
-	letter-spacing: var(--mdui-typescale-body-small-tracking);
-	font-weight: var(--mdui-typescale-body-small-weight);
-}
-
-.typescale-label-small {
-	line-height: var(--mdui-typescale-label-small-line-height);
-	font-size: var(--mdui-typescale-label-small-size);
-	letter-spacing: var(--mdui-typescale-label-small-tracking);
-	font-weight: var(--mdui-typescale-label-small-weight);
-}
-
-.typescale-headline-small {
-	line-height: var(--mdui-typescale-headline-small-line-height);
-	font-size: var(--mdui-typescale-headline-small-size);
-	letter-spacing: var(--mdui-typescale-headline-small-tracking);
-	font-weight: var(--mdui-typescale-headline-small-weight);
-}
-
-.typescale-headline-large {
-	line-height: var(--mdui-typescale-headline-large-line-height);
-	font-size: var(--mdui-typescale-headline-large-size);
-	letter-spacing: var(--mdui-typescale-headline-large-tracking);
-	font-weight: var(--mdui-typescale-headline-large-weight);
-}
-
-.typescale-headline-medium {
-	line-height: var(--mdui-typescale-headline-medium-line-height);
-	font-size: var(--mdui-typescale-headline-medium-size);
-	letter-spacing: var(--mdui-typescale-headline-medium-tracking);
-	font-weight: var(--mdui-typescale-headline-medium-weight);
-}
-
--- a/src/entry-client.js
+++ b/src/entry-client.js
@ -1,5 +1,4 @@
 import { decompress } from 'compress-json'
-import './main.scss'

 import { createApp } from './main'
 import { createSSRRouter } from './router.js'
@ -9,15 +8,7 @@ const router = createSSRRouter()

 app.use(router)

-if (window.__PINIA_STATE__) {
-  pinia.state.value = decompress(window.__PINIA_STATE__)
-}
+if (window.__PINIA_STATE__) pinia.state.value = decompress(window.__PINIA_STATE__)

-if (window.__INITIAL_STATE__) {
-  window.__INITIAL_STATE__ = decompress(window.__INITIAL_STATE__)
-}
-
-router.isReady().then(() => {
-  app.mount('#app')
-})
+router.isReady().then(() => app.mount('#app'))

--- a/src/entry-server.js
+++ b/src/entry-server.js
@ -4,25 +4,20 @@ import { createApp } from './main'
 import { createSSRRouter } from './router.js'

 export async function getRoute(_url) {
-  const router = createSSRRouter()
-  await router.push(_url)
-  await router.isReady()
-  const route = router.currentRoute.value.matched[0]
-  const code = route.meta.code || 200
-  return { router, code }
+	const router = createSSRRouter()
+	await router.push(_url)
+	await router.isReady()
+	const route = router.currentRoute.value.matched[0]
+	const code = route.meta.code || 200
+	return { router, code }
 }

 export async function render(router, cookies, host) {
-  const { app, pinia } = createApp()
-  
-  app.use(router)
-  const ctx = {
-    cookies,
-    host,
-    initialState: {}
-  }
-  const stream = renderToWebStream(app, ctx)
-  const piniaState = pinia.state.value
-  return { stream, piniaState }
+	const { app, pinia } = createApp()
+	app.use(router)
+	const ctx = { cookies, host }
+	const stream = renderToWebStream(app, ctx)
+	const piniaState = pinia.state.value
+	return { stream, piniaState }
 }

--- a/src/main.scss
+++ b/src/main.scss
@ -1,12 +1,7 @@
-@import 'mdui/mdui.css';
-// @import './assets/typescale.css';
-
-// 字体配置
 $font-family: Roboto, Noto Sans SC, PingFang SC, Lantinghei SC,
  Microsoft Yahei, Hiragino Sans GB, "Microsoft Sans Serif",
  WenQuanYi Micro Hei, sans-serif;

-// MDUI 变量简写
 $bg-color: rgb(var(--mdui-color-background));
 $error-color: rgb(var(--mdui-color-error));
 $on-error-color: rgb(var(--mdui-color-on-error));
@ -14,7 +9,7 @@ $transition-duration: var(--mdui-motion-duration-short2);
 $transition-easing: var(--mdui-motion-easing-linear);

 html {
-  scroll-padding-top: 64px; /* 等于顶栏高度 */
+  scroll-padding-top: 64px;
 }

 body {
@ -27,7 +22,7 @@ pre {
  overflow-x: auto;
  overflow-y: hidden;
 }
-// MDUI 组件样式
+
 mdui-card {
  width: 100%;
  padding: 8px;
@ -37,7 +32,6 @@ mdui-text-field {
  margin: 8px 0;
 }

-// 警告样式
 .warn {
  background-color: $error-color;
  color: $on-error-color;
@ -47,7 +41,6 @@ mdui-text-field {
  color: $error-color;
 }

-// 通用工具类
 .pre-break {
  white-space: pre-line;
 }
--- a/src/router.js
+++ b/src/router.js
@ -1,86 +1,80 @@
 import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'

-export function createSSRRouter() {
-	const router = createRouter({
-		history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
-		scrollBehavior(to, from, savedPosition) {
-			if (savedPosition) {
-				return savedPosition
-			} else if (to.hash) {
-				return {
-					el: to.hash,
-					behavior: 'smooth',
-				}
-			} else {
-				return { top: 0 }
+export const createSSRRouter = () => createRouter({
+	history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+	scrollBehavior(to, from, savedPosition) {
+		if (savedPosition) return savedPosition
+		else if (to.hash) {
+			return {
+				el: to.hash,
+				behavior: 'smooth',
 			}
+		} else return { top: 0 }
+	},
+	routes: [{
+		path: '/',
+		name: '前言',
+		component: () => import('./views/Root.vue'),
+		meta: {
+			title: '首页',
+			order: 1
 		},
-		routes: [{
-			path: '/',
-			name: '前言',
-			component: () => import('./views/Root.vue'),
-			meta: {
-				title: '首页',
-				order: 1
-			},
-		},{
-			path: '/work/:id',
-			name: 'work',
-			component: () => import('./views/Work.vue'),
-			meta: {
-				title: '阅读',
-				hidden: true
-			}
-		},{
-			path: '/work/:id/:cid',
-			name: 'workChapter',
-			component: () => import('./views/Work.vue'),
-			meta: {
-				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: 90
-			},
-		},{
-			path: '/about',
-			name: '关于',
-			component: () => import('./views/About.md'),
-			meta: {
-				title: '',
-				order: 100
-			},
-		},{
-			path: '/developer',
-			name: '开发人员选项',
-			component: () => import('./views/Developer.vue'),
-			meta: {
-				title: '',
-				hidden: true
-			},
-		},{
-			path: '/:catchAll(.*)',
-			name: 'NotFound',
-			component: () => import('./views/fallback/NotFound.vue'),
-			meta: {
-				title: '页面未找到',
-				hidden: true,
-				code: 404
-			}
+	},{
+		path: '/work/:id',
+		name: 'work',
+		component: () => import('./views/Work.vue'),
+		meta: {
+			title: '阅读',
+			hidden: true
 		}
-	]})
-	return router
-}
+	},{
+		path: '/work/:id/:cid',
+		name: 'workChapter',
+		component: () => import('./views/Work.vue'),
+		meta: {
+			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: 90
+		},
+	},{
+		path: '/about',
+		name: '关于',
+		component: () => import('./views/About.md'),
+		meta: {
+			title: '',
+			order: 100
+		},
+	},{
+		path: '/developer',
+		name: '开发人员选项',
+		component: () => import('./views/Developer.vue'),
+		meta: {
+			title: '',
+			hidden: true
+		},
+	},{
+		path: '/:catchAll(.*)',
+		name: 'NotFound',
+		component: () => import('./views/fallback/NotFound.vue'),
+		meta: {
+			title: '页面未找到',
+			hidden: true,
+			code: 404
+		}
+	}
+]})
--- a/src/ssr/ClientOnly.vue
+++ b/src/ssr/ClientOnly.vue
@ -2,11 +2,11 @@
 import { useClientOnlyStore } from './clientOnlyStore.js'
 const clientOnlyStore = useClientOnlyStore()
 </script>
-<template data-allow-mismatch>
-  <template v-if="clientOnlyStore.isClient" data-allow-mismatch>
+<template>
+  <template v-if="clientOnlyStore.isClient">
    <slot></slot>
  </template><template v-else>
-    <slot name="ssr" data-allow-mismatch></slot>
+    <slot name="ssr"></slot>
  </template>
 </template>

--- a/src/ssr/ClientOnly1.vue
+++ b/src/ssr/ClientOnly1.vue
@ -1,25 +0,0 @@
-<script setup>
-import { ref, onMounted, useSlots } from 'vue'
-
-const isClient = ref(false)
-const slots = useSlots()
-
-onMounted(() => {
-  isClient.value = true
-})
-/*
-USe:
-<ClientOnly>
-	<template #ssr>
-		SSR Content
-	</template>
-	Real Content
-</ClientOnly>
-*/
-</script>
-
-<template data-allow-mismatch>
-  <template v-if="isClient" data-allow-mismatch><slot></slot></template>
-  <template v-else><slot name="ssr" data-allow-mismatch></slot></template>
-</template>
-
--- a/src/ssr/useInitialState.js
+++ b/src/ssr/useInitialState.js
@ -1,9 +0,0 @@
-export function getInitialState(key) {
-  if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
-    if (window.__INITIAL_STATE__[key] !== undefined) {
-      let value = window.__INITIAL_STATE__[key]
-      delete window.__INITIAL_STATE__[key]
-      return value
-    }
-  }
-}
--- a/src/stores/api.js
+++ b/src/stores/api.js
@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { useApiRequest } from '../composables/apiRequest'
+import { useApiRequest } from '../composables/apiRequest.js'

 export const useApiStore = defineStore('api', () => {
 	async function getWork(workId, chapterId) {
--- a/src/stores/appSetting.js
+++ b/src/stores/appSetting.js
@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
-import { reactive } from 'vue'
-import { useStorage, watchWithFilter, debounceFilter } from '@vueuse/core'
+import { useStorage } from '@vueuse/core'

 const CURRENT_VERSION = 1

--- a/src/stores/route.js
+++ b/src/stores/route.js
@ -21,9 +21,7 @@ export const useRouteStore = defineStore('route', () => {
 		if (lastFromDrawer.value == 0) {
 			lastFromDrawer.value = 1
 			router.push(target)
-		} else {
-			router.replace(target)
-		}
+		} else router.replace(target)
 	}
 	const progress = ref(0)
 	const progressMax = ref(1)
@ -32,11 +30,9 @@ export const useRouteStore = defineStore('route', () => {
 		watch(title, title => document.title = title)
 		let progressTimer = null
 		router.beforeEach((to, from) => {
-			if (lastFromDrawer.value == 2) {
-				lastFromDrawer.value = 0
-			} else if (lastFromDrawer.value == 1) {
-				lastFromDrawer.value = 2
-			}
+			if (showProgress.value) return false
+			if (lastFromDrawer.value == 2) lastFromDrawer.value = 0
+			else if (lastFromDrawer.value == 1) lastFromDrawer.value = 2
 			progress.value = 0
 			progressMax.value = 1
 			showProgress.value = true
--- a/src/ui/Form.vue
+++ b/src/ui/Form.vue
@ -1,9 +1,3 @@
-<template>
-  <form @submit="handleSubmit">
-    <slot></slot>
-  </form>
-</template>
-
 <script setup>
 import { ref } from 'vue'

@ -18,3 +12,9 @@ function handleSubmit(event) {
 }
 </script>

+<template>
+  <form @submit="handleSubmit">
+    <slot></slot>
+  </form>
+</template>
+
--- a/src/utils.js
+++ b/src/utils.js
@ -1,11 +1,7 @@
 import { snackbar } from 'mdui/functions/snackbar.js'
 import { alert } from 'mdui/functions/alert.js'

-export function mduiSnackbar(message) {
-	snackbar({
-		message: message,
-	})
-}
+export const mduiSnackbar = (message) => snackbar({ message })

 export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
 	alert({
@ -19,50 +15,44 @@ export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
 }

 export function getQueryVariable(variable) {
-    var query = window.location.search.substring(1);
-    var vars = query.split("&")
-    for (var i=0;i<vars.length;i++) {
-        var pair = vars[i].split("=")
-        if(pair[0] == variable){return pair[1]}
-    }
-    return(null);
+	var query = window.location.search.substring(1)
+	var vars = query.split("&")
+	for (var i=0;i<vars.length;i++) {
+		var pair = vars[i].split("=")
+		if(pair[0] == variable){return pair[1]}
+	}
+	return null
 }

-export const escapeHtml = (text) =>
-    text
-      .replace(/&/g, "&amp;") // 转义 &
-      .replace(/</g, "&lt;") // 转义 <
-      .replace(/>/g, "&gt;") // 转义 >
-      .replace(/"/g, "&quot;") // 转义 "
-      .replace(/'/g, "&#39;"); // 转义 '
+export const escapeHtml = (text) => text
+	.replace(/&/g, "&amp;") // 转义 &
+	.replace(/</g, "&lt;") // 转义 <
+	.replace(/>/g, "&gt;") // 转义 >
+	.replace(/"/g, "&quot;") // 转义 "
+	.replace(/'/g, "&#39;"); // 转义 '

-export function escapeAndFormatText(input) {
-  let escapedText = escapeHtml(input);
-  escapedText = escapedText.replace(/ /g, "&nbsp;");
-  escapedText = escapedText.replace(/\t/g, "&emsp;&emsp;");
-  escapedText = escapedText.replace(/\n/g, "<br/>");
-  return escapedText;
-}
+export const escapeAndFormatText = (text) => escapeHtml(text)
+	.replace(/ /g, "&nbsp;")
+	.replace(/\t/g, "&emsp;&emsp;")
+	.replace(/\n/g, "<br/>")

 export function getCookie(name) {
 	const cookieArr = document.cookie.split(";")
 	for (let i = 0; i < cookieArr.length; i++) {
 		const cookiePair = cookieArr[i].trim()
-		if (cookiePair.startsWith(name + "=")) {
-			return cookiePair.substring(name.length + 1);
-		}
-  }
-  return null;
+		if (cookiePair.startsWith(name + "=")) return cookiePair.substring(name.length + 1)
+	}
+	return null
 }

 export function setCookie(name, value, days = 3650) {
 	var expires = ""
 	if (days) {
 		var date = new Date()
-		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
 		expires = "; expires=" + date.toUTCString()
 	}
-	document.cookie = name + "=" + value + expires + "; path=/";
+	document.cookie = name + "=" + value + expires + "; path=/"
 }

 export function objectToQueryString(obj, parentKey = '') {
@ -71,42 +61,37 @@ export function objectToQueryString(obj, parentKey = '') {
 		if (!Object.prototype.hasOwnProperty.call(obj, key)) continue
 		let value = obj[key]
 		let newKey = parentKey ? `${parentKey}[${key}]` : key
-		if (typeof value === 'object' && value !== null) {
-			parts.push(objectToQueryString(value, newKey))
-		} else {
-			parts.push(encodeURIComponent(newKey) + '=' + encodeURIComponent(value))
-		}
+		if (typeof value === 'object' && value !== null) parts.push(objectToQueryString(value, newKey))
+		else parts.push(encodeURIComponent(newKey) + '=' + encodeURIComponent(value))
 	}
 	return parts.join('&')
 }

 export function formatUnixTimestamp(unixTimestamp, timeZone) {
-    const date = new Date(unixTimestamp * 1000); // 将 UNIX 时间戳转换为毫秒
-    const options = {
-        timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone, // 使用指定时区或浏览器本地时区
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-        hour12: false, // 24小时制
-    };
-    const formatter = new Intl.DateTimeFormat('en-US', options);
-    const parts = formatter.formatToParts(date);
-    const formatMap = {};
-    parts.forEach(({ type, value }) => {
-        formatMap[type] = value;
-    });
-    return `${formatMap.year}-${formatMap.month}-${formatMap.day} ${formatMap.hour}:${formatMap.minute}:${formatMap.second}`;
+	const date = new Date(unixTimestamp * 1000)
+	const options = {
+		timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit',
+		second: '2-digit',
+		hour12: false,
+	}
+	const formatter = new Intl.DateTimeFormat('en-US', options)
+	const parts = formatter.formatToParts(date)
+	const formatMap = {}
+	parts.forEach(({ type, value }) => { formatMap[type] = value })
+	return `${formatMap.year}-${formatMap.month}-${formatMap.day} ${formatMap.hour}:${formatMap.minute}:${formatMap.second}`
 }

 export function isMobileDeviceByUA() {
-  const ua = navigator.userAgent || navigator.vendor || window.opera;
-  return /android/i.test(ua) ||
-         /iphone/i.test(ua) ||
-         /ipod/i.test(ua) ||
-         /ipad/i.test(ua) ||
-         /blackberry/i.test(ua) ||
-         /windows phone/i.test(ua);
+	const ua = navigator.userAgent || navigator.vendor || window.opera
+	return /android/i.test(ua) ||
+		/iphone/i.test(ua) ||
+		/ipod/i.test(ua) ||
+		/ipad/i.test(ua) ||
+		/blackberry/i.test(ua) ||
+		/windows phone/i.test(ua)
 }
--- 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>