第一次提交

src/App.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { onMounted, onBeforeMount, onServerPrefetch, nextTick, ref, watch } from 'vue'
+import { useRouter, useRoute, RouterView } from 'vue-router'
+
+import { useApiStore } from '@/stores/api.js'
+
+import { useClientOnlyStore } from './ssr/clientOnlyStore.js'
+import { useThemeStore } from './stores/themeScheme.js'
+import { useMobileScreen } from './stores/device.js'
+import { useRouteStore } from './stores/route.js'
+
+import 'mdui/components/top-app-bar.js'
+import 'mdui/components/top-app-bar-title.js'
+import 'mdui/components/navigation-drawer.js'
+import 'mdui/components/list.js'
+import 'mdui/components/list-item.js'
+import 'mdui/components/circular-progress.js'
+import 'mdui/components/button-icon.js'
+import 'mdui/components/switch.js'
+
+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()
+const themeScheme = useThemeStore()
+const mobileScreen = useMobileScreen()
+const routeStore = useRouteStore()
+
+const drawerOpen = ref(false)
+const drawer = ref(null)
+const closeDrawer = ref(true)
+
+let progressTimer = null
+
+onServerPrefetch(async () => {
+	await api.init()
+})
+
+onBeforeMount(() => {
+	mobileScreen.reCal()
+	if(!mobileScreen.isMobile) drawerOpen.value = true
+})
+
+onMounted(async () => {
+	themeScheme.applyTheme()
+	await api.init()
+	clientOnlyStore.setClient()
+	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)
+	})
+})
+</script>
+
+<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-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>
+		<mdui-button-icon @click="themeScheme.switchMode()">
+			<mdui-icon-light-mode style="color: rgb(var(--mdui-color-on-surface-variant))"></mdui-icon-light-mode>
+		</mdui-button-icon>
+		</mdui-top-app-bar>
+	<template #ssr>
+		<h1>{{ routeStore.title }}</h1>
+    </template></ClientOnly></header>
+    <nav><ClientOnly>
+	    <mdui-navigation-drawer ref='drawer' :open="drawerOpen" close-on-overlay-click close-on-esc style="margin-top: 64px;">
+			<mdui-list style="height: 100%; background-color: rgb(var(--mdui-color-surface-variant));">
+				<KeepAlive><mdui-list-item
+					v-for="item in routeStore.allRoutes"
+					:key="item.path"
+					@click="routeStore.drawerPress(item.path); if (mobileScreen.isMobile && closeDrawer ) drawer.open = false"
+					:class="{ 'active-item' : item.path == $route.path }"
+				>{{ item.name }}</mdui-list-item></KeepAlive>
+				<div v-if="mobileScreen.isMobile" class="bottom"><mdui-switch @change="closeDrawer = $event.target.checked" :checked="closeDrawer"></mdui-switch><div style="margin-left: 8px">切换页面时关闭菜单</div></div>
+			</mdui-list>
+		</mdui-navigation-drawer>
+	<template #ssr>
+		<ul>
+			<li v-for="item in routeStore.allRoutes"
+			:key="item.path"
+			:class="{ 'active-item' : item.path == $route.path }"
+			>{{ item.name }}</li>
+		</ul>
+    </template></ClientOnly>
+    </nav>
+	<main :class="{ 'mdui-prose' : clientOnlyStore.isClient }">
+		<RouterView v-slot="{ Component }">
+	    	<component :is="Component" />
+	    </RouterView>
+	</main>
+    <footer></footer>
+</template>
+
+<style scoped>
+.active-item {
+	background-color: rgb(var(--mdui-color-surface-container-high));
+}
+
+.bottom {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  background-color: rgb(var(--mdui-color-surface-variant));
+  bottom: 16px;
+  left: 16px;
+  display: flex;
+}
+</style>

src/assets/typescale.css

@@ -0,0 +1,42 @@
+.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);
+}
+

src/components/ClientOnly.vue

@@ -0,0 +1 @@
+../ssr/ClientOnly.vue

src/components/FunAnimation.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+const frames = [`
+✋ 😭 🤚
+ \\  | /
+  ++++
+   ++
+   ++
+  /  \\`,
+`
+
+✋ 😭 🤚
+ \\ |  /
+  ++++
+  /  \\
+`]
+
+const currentFrame = ref(frames[0])
+let animationInterval = null
+let count = ref(0)
+
+onMounted(() => {
+  // 初始显示第一帧
+  currentFrame.value = frames[0]
+  // 设置动画间隔
+  animationInterval = setInterval(() => {
+    currentFrame.value = currentFrame.value === frames[0] 
+      ? frames[1] 
+      : frames[0]
+  }, 250)
+})
+onBeforeUnmount(() => {
+  // 组件卸载前清除定时器
+  if (animationInterval) {
+    clearInterval(animationInterval)
+    animationInterval = null
+  }
+})
+
+const incr = () => count.value++
+</script>
+<template>
+    <pre style="line-height:1 ;" class="no-select" @click="incr() > 5 ? $router.push('/developer') : null">
+		{{ currentFrame }}
+    </pre>
+</template>

src/entry-client.js

@@ -0,0 +1,18 @@
+import { decompress } from 'compress-json'
+import './main.css'
+import { createApp } from './main'
+
+const { app, pinia, router } = createApp()
+
+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')
+})
+

src/entry-server.js

@@ -0,0 +1,19 @@
+import { renderToWebStream, renderToString } from 'vue/server-renderer'
+import { createApp } from './main'
+
+export async function render(_url, cookies, host) {
+  const { app, pinia, router } = createApp()
+  await router.push(_url)
+  await router.isReady()
+  const ctx = {
+    cookies,
+    host,
+    initialState: {}
+  }
+  // await new Promise((resolve) => setTimeout(resolve, 0))
+  const stream = renderToWebStream(app, ctx)
+  const initialState = ctx.initialStat
+  const piniaState = pinia.state.value
+  return { stream, initialState, piniaState }
+}
+

src/main.css

@@ -0,0 +1,35 @@
+@import 'mdui/mdui.css';
+/* @import './assets/typescale.css'; */
+
+body {
+	font-family: Roboto,Noto Sans SC,PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,"Microsoft Sans Serif",WenQuanYi Micro Hei,sans-serif;
+	background-color: rgb(var(--mdui-color-background));
+	transition: opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear);
+}
+
+mdui-card {
+	width: 100%;
+	padding: 0px 16px 16px;
+}
+
+mdui-text-field {
+	margin: 8px 0px;
+}
+
+.warn {
+	background-color: rgb(var(--mdui-color-error));
+	color: rgb(var(--mdui-color-on-error));
+}
+
+.warn-text {
+	color: rgb(var(--mdui-color-error));
+}
+
+.pre-break {
+	white-space: pre-line;
+}
+
+.no-select {
+  user-select: none;
+}
+

src/main.js

@@ -0,0 +1,20 @@
+import { createSSRApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import { createSSRRouter } from './router.js'
+
+import ClientOnly from './ssr/ClientOnly.vue'
+import Hr from './ui/BetterHr.vue'
+
+export function createApp() {
+	const app = createSSRApp(App)
+	const router = createSSRRouter()
+	const pinia = createPinia()
+	app.use(pinia)
+	app.use(router)
+	app
+		.component('ClientOnly', ClientOnly)
+		.component('Hr', Hr)
+	return { app, pinia, router }
+}

src/router.js

@@ -0,0 +1,49 @@
+import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'
+
+export function createSSRRouter() {
+	const router = createRouter({
+		history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+		routes: [{
+			path: '/',
+			name: '前言',
+			component: () => import('./views/Root.vue'),
+			meta: {
+				title: "首页",
+				order: 1
+			},
+		},{
+			path: '/work/:id',
+			name: '阅读',
+			component: () => import('./views/Work.vue'),
+			meta: {
+				title: "",
+				hidden: true
+			}
+		},{
+			path: '/about',
+			name: '关于',
+			component: () => import('./views/About.vue'),
+			meta: {
+				title: "",
+				order: 2
+			},
+		},{
+			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
+			}
+		}
+	]})
+	return router
+}

src/ssr/ClientOnly.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { useClientOnlyStore } from './clientOnlyStore.js'
+const clientOnlyStore = useClientOnlyStore()
+</script>
+<template data-allow-mismatch>
+  <template v-if="clientOnlyStore.isClient" data-allow-mismatch>
+    <slot></slot>
+  </template><template v-else>
+    <slot name="ssr" data-allow-mismatch></slot>
+  </template>
+</template>
+

src/ssr/ClientOnly1.vue

@@ -0,0 +1,25 @@
+<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>
+

src/ssr/clientOnlyStore.js

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useClientOnlyStore = defineStore('ClientOnly', () => {
+	const isClient = ref(false)
+	function setClient() { isClient.value = true }
+	return {
+		isClient,
+		setClient
+	}
+})

src/ssr/useInitialState.js

@@ -0,0 +1,9 @@
+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
+    }
+  }
+}

src/stores/api.js

@@ -0,0 +1,113 @@
+import { ref, computed, watch } from 'vue'
+import { defineStore } from 'pinia'
+import { useSSRContext } from 'vue'
+import axios from 'axios'
+
+import { objectToQueryString, getCookie, setCookie } from '@/utils.js'
+
+const apiMapping = {
+	'': ['http://localhost:28001/','/api/']
+}
+
+function replaceUrl(url) {
+	return url
+		.replace('{{hostname}}',window.location.hostname)
+		.replace('{{port}}',window.location.port)
+		.replace('{{protocol}}',window.location.protocol)
+}
+
+export const useApiStore = defineStore('api', () => {
+	let host = import.meta.env.SSR ? useSSRContext().host : window.location.host
+	let entry = apiMapping[host] ? apiMapping[host] : apiMapping['']
+	let endpoint = import.meta.env.SSR ? entry[0] : replaceUrl(entry[1])
+	//console.log('Entry point:', endpoint)
+	var inited = false
+	var initializing = false
+	async function apiGet(url, data) {
+		const realURL = data 
+			? `${endpoint}${url}?${objectToQueryString(data)}`
+			: `${endpoint}${url}`
+		try {
+			let start = Date.now()
+			const response = await axios.get(realURL)
+			let stop = Date.now()
+			return {
+				status: response.status,
+				data: response.data,
+				start, stop,
+				duration: stop - start,
+				isSSR: import.meta.env.SSR
+			}
+		} catch (error) {
+			if (error.response) {
+				return {
+					status: error.response.status,
+					data: error.response.data,
+					isSSR: import.meta.env.SSR
+				}
+			} else {
+				return {
+					status: -1,
+					data: null
+				}
+			}
+		}
+	}
+	async function apiPost(url, data) {
+		const realURL = `${endpoint}${url}`;
+		try {
+			let start = Date.now()
+			const response = await axios.post(realURL, data, {
+				headers: { 'Content-Type': 'application/json' }
+			})
+			let stop = Date.now()
+			return {
+				status: response.status,
+				data: response.data,
+				start, stop,
+				duration: stop - start,
+				isSSR: import.meta.env.SSR
+			}
+		} catch (error) {
+			if (error.response) {
+				return {
+					status: error.response.status,
+					data: error.response.data,
+					isSSR: import.meta.env.SSR
+				}
+			} else {
+				return {
+					status: -1,
+					data: null
+				}
+			}
+		}
+	}
+	async function init() {
+		if (inited) return
+		if (initializing) {
+			while (initializing) {
+				await new Promise((resolve) => setTimeout(resolve, 100))
+			}
+			return
+		}
+		initializing = true
+		inited = true
+		initializing = false
+		if (!import.meta.env.SSR) {
+			console.log(`[API] Inited! endpoint: ${endpoint}`)
+		}
+	}
+	async function reInit(){
+		inited = false
+		await init()
+	}
+	async function getWork(workId) {
+		return await apiGet('work',{ workId })
+	}
+	return {
+		init,
+		reInit,
+		getWork
+	}
+})

src/stores/db.js

@@ -0,0 +1,58 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { openDB } from 'idb';
+
+export const useDB = defineStore('_db', () => {
+	const dbPromise = openDB('data', 1, {
+		upgrade(db) {
+			const bookmarkStore = db.createObjectStore('bookmarks', {
+				keyPath: 'id',
+				autoIncrement: true,
+			})
+			bookmarkStore.createIndex('by-workId', 'workId');
+		},
+	})
+	return {
+		db: dbPromise
+	}
+})
+
+export const useBookmarkStore = defineStore('bookmark', () => {
+	const db = useDB().db
+	async function getAll(workId) {
+		return (await db).getAllFromIndex('bookmarks', 'by-workId', workId);
+	}
+	async function get(id) {
+		return (await db).get('bookmarks', id);
+	}
+	async function add(workId, index, para, name ) {
+		return (await db).add('bookmarks', {
+			workId, name, para, index
+		});
+	}
+	async function del(id) {
+		(await db).delete('bookmarks', id);
+	}
+	async function delByWork(workId) {
+		(await getAll(workId)).forEach(async (item) => {
+			del(item.id)
+		})
+	}
+	async function updateName(id, name) {
+		const raw = await get(id)
+		if (raw) {
+			raw.name = name
+			console.log(name)
+			await (await db).put('bookmarks', raw);
+		}
+	}
+	return {
+		get,
+		add,
+		del,
+		getAll,
+		delByWork,
+		updateName
+	}
+})

src/stores/device.js

@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { breakpoint } from 'mdui/functions/breakpoint.js'
+import { observeResize } from 'mdui/functions/observeResize.js'
+
+export const useMobileScreen = defineStore('deviceMobileScreen', () => {
+	function _() { 
+		if (import.meta.env.SSR) { return false }
+		else { return breakpoint().down('md') ? true : false }
+	}
+	const isMobile = ref(_())
+	if (!import.meta.env.SSR) {
+		const observer = observeResize(document.body, (entry, obs) => {
+			isMobile.value = _()
+		})
+	}
+	function reCal() {
+		isMobile.value = _()
+	}
+	return {
+		isMobile,
+		reCal
+	}
+})

src/stores/route.js

@@ -0,0 +1,71 @@
+import { ref, computed, watch } from 'vue'
+import { defineStore } from 'pinia'
+import { useRouter, useRoute } from 'vue-router'
+
+export const useRouteStore = defineStore('route', () => {
+	const router = useRouter()
+	const route = useRoute()
+	const allRoutes = ref(router.getRoutes()
+		.filter(route => route.meta.hidden !== true)
+		.map(route => ({
+			path: route.path,
+			name: route.name,
+			order: route.meta.order || Number.MAX_SAFE_INTEGER
+		}))
+		.sort((a, b) => (a.order - b.order))
+	)
+	const lastFromDrawer = ref(0)
+ 	const customTitle = ref(null)
+	const title = computed(() => customTitle.value || route.meta.title || route.name)
+	function drawerPress(target) {
+		if (lastFromDrawer.value == 0) {
+			lastFromDrawer.value = 1
+			router.push(target)
+		} else {
+			router.replace(target)
+		}
+	}
+	const progress = ref(0)
+	const progressMax = ref(1)
+	const showProgress = ref(false)
+	if (!import.meta.env.SSR) {
+		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
+			}
+			progress.value = 0
+			progressMax.value = 1
+			showProgress.value = true
+			if (!progressTimer) {
+				progressTimer = setInterval(() => {
+					progress.value += progressMax.value / 10
+					if (progressMax.value <= progress.value) progressMax.value = progressMax.value * 3
+				}, 300)
+			}
+			return true
+		})
+		router.afterEach((to, from) => {
+			if (progressTimer) {
+				showProgress.value = false
+				clearInterval(progressTimer)
+				progressTimer = null
+			}
+			customTitle.value = null
+			if (!import.meta.env.SSR) window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+		})
+	}
+	return { 
+		allRoutes,
+		lastFromDrawer,
+		title,
+		drawerPress,
+		showProgress,
+		progress,
+		progressMax,
+		customTitle
+	}
+})

src/stores/themeScheme.js

@@ -0,0 +1,38 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+import { setTheme } from 'mdui/functions/setTheme.js'
+import { setColorScheme } from 'mdui/functions/setColorScheme.js'
+
+export const useThemeStore = defineStore('homePage', () => {
+	const mode = ref('auto')
+	const color = ref('#890000')
+    function setColor(target) {
+        if (color.value != target) {
+			color.value = target
+		}
+		setColorScheme(color.value)
+    }
+	function setMode(target) {
+		if (mode.value != target) {
+			mode.value = target
+		}
+		setTheme(mode.value)
+	}
+	function switchMode(callback) {
+		if (mode.value === 'auto' || mode.value === 'light') {
+			mode.value = 'dark'
+		} else {
+			mode.value = 'light'
+		}
+		setMode(mode.value)
+		if (callback) {
+			callback(mode.value)
+		}
+	}
+	function applyTheme() {
+		setColorScheme(color.value)
+		setTheme(mode.value)
+	}
+	return { setColor, setMode, switchMode, applyTheme }
+})

src/stores/workRead.js

@@ -0,0 +1,47 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { escapeAndFormatText } from '../utils.js'
+
+import { useApiStore } from '@/stores/api.js'
+
+export const useWorkReadState = defineStore('workRead', () => {
+	const api = useApiStore()
+	const id = ref(null)
+	const summary = ref(null)
+	const pesud = ref(null)
+	const title = ref(null)
+	const text = ref(null)
+	const publishedTime = ref(null)
+	const state = ref('')
+	function setData(data) {
+		id.value = data.workId
+		title.value = data.title
+		summary.value = [escapeAndFormatText(data.summary)]
+		pesud.value = data.pesud
+		text.value = data.text.split('\n\n')
+	}
+	async function loadWork(target) {
+		if (target == id.value || state.value == 'loading') return
+		state.value = 'loading'
+		const result = await api.getWork(target)
+		if (result.status == 200) {
+			setData(result.data)
+			state.value = 'ready'
+		} else {
+			id.value = target
+			state.value = import.meta.env.SSR ? 'ssrnotfound' : 'notfound'
+		}
+	}
+	return {
+		id,
+		title,
+		summary,
+		pesud,
+		text,
+		publishedTime,
+		state,
+		setData,
+		loadWork
+	}
+})

src/texts/about.md

@@ -0,0 +1,25 @@
+# 关于
+
+这是什么, 有口舍用 ?
+
+概述
+---
+一个 AO3 镜像站
+
+## 作者 (1)
+---
+- [UnknownMp](https://www.unknownmp.top)  
+  <mdui-avatar src="https://cdn.unknownmp.top/website/logo.jpg"></mdui-avatar>
+  
+
+组件库与工具链
+---
+- MDUI 2
+- Vue
+- Vite
+
+其他
+---
+本站支持 "Server Side Rendering" by Vite SSR
+
+CDN by Cloudflare (赛博佛祖😭)

src/texts/intro.md

@@ -0,0 +1,39 @@
+# 欢迎来到 AO3 Mirror! 👋👋
+
+一个基于重构渲染的 AO3 镜像站
+
+---
+
+## 这是什么🤨
+
+本网站是对 ArchiveOfOurOwn (AO3) 的一个镜像网站
+
+但是不同于直接转发所有页面内容, 本站点会先解析原始 AO3 页面内容, 然后重新组合, 这使得我们有更大的操作空间
+
+## 怎么使用🤔
+
+现在这个站点还处于测试阶段, 只有一种使用方法 *(后面会扩展)*
+
+首先你需要一个 AO3 链接  
+比如:
+
+	https://archiveofourown.org/works/114514
+
+接着将前面的部分替换为本站点的链接 (保留数字ID部分):  
+即:
+
+	https://ao3.unknownmp.top/work/114514
+
+这里的数字ID即为`114514`
+
+浏览器打开它, OK 你会用了🤓👆!
+
+---
+
+## 功能与特性 🤗
+
+- ✅ 预览
+- ✅ 书签 (本地)
+- 📝 历史记录 (本地)
+- 📝 搜索
+

src/ui/BetterHr.vue

@@ -0,0 +1,11 @@
+<script setup>import 'mdui/components/divider.js'</script>
+<template>
+	<ClientOnly><mdui-divider class='hr-divider'></mdui-divider>
+	<template #ssr><hr/></template></ClientOnly>
+</template>
+<style scoped>
+.hr-divider {
+	margin: 8px 0px;
+}
+</style>
+

src/utils.js

@@ -0,0 +1,112 @@
+import { snackbar } from 'mdui/functions/snackbar.js'
+import { alert } from 'mdui/functions/alert.js'
+
+export function mduiSnackbar(message) {
+	snackbar({
+		message: message,
+	})
+}
+
+export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
+	alert({
+		headline: title,
+		description: desc,
+		confirmText: confirmText,
+		closeOnOverlayClick: true,
+		closeOnEsc: true,
+		onConfirm: () => { if (callback) callback() }
+	})
+}
+
+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);
+}
+
+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 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;
+}
+
+export function setCookie(name, value, days = 3650) {
+	var expires = ""
+	if (days) {
+		var date = new Date()
+		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+		expires = "; expires=" + date.toUTCString()
+	}
+	document.cookie = name + "=" + value + expires + "; path=/";
+}
+
+export function objectToQueryString(obj, parentKey = '') {
+	const parts = []
+	for (let key in obj) {
+		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))
+		}
+	}
+	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}`;
+}
+
+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);
+}

src/views/About.vue

@@ -0,0 +1,19 @@
+<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/Developer.vue

@@ -0,0 +1,74 @@
+<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()
+
+const ua = ref('')
+const language = ref('')
+const platform = ref('')
+const screenSize = ref('')
+const viewportSize = ref('')
+const pixelRatio = ref(1)
+const touchSupport = ref(false)
+const visibility = ref('')
+
+onMounted(() => {
+	ua.value = navigator.userAgent
+	language.value = navigator.language
+	platform.value = navigator.platform
+	screenSize.value = `${screen.width} × ${screen.height}`
+	viewportSize.value = `${window.innerWidth} × ${window.innerHeight}`
+	pixelRatio.value = window.devicePixelRatio
+	touchSupport.value = 'ontouchstart' in window
+	visibility.value = document.visibilityState
+})
+</script>
+
+
+<template>
+	<h1 class="warn-text">注意本页面仅为测试用!</h1>
+	<blockquote>
+		当然如果你是乱点那个唐鬼小人进来的, 这就是个彩蛋? (神金
+	</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>
+</template>
+
+
+<style scoped>
+</style>

src/views/Mask.vue

@@ -0,0 +1,24 @@
+<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>

src/views/Root.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+import 'mdui/components/text-field.js'
+import 'mdui/components/button.js'
+
+import Intro from '../texts/intro.md'
+
+const router = useRouter()
+
+const src = ref('')
+const srcText = ref(null)
+const err = ref(false)
+
+function convert(from) {
+	if( Number(from) ) {
+		return {
+			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
+				}
+			}
+		}
+	}
+	return {
+		type: null,
+	}
+}
+
+function onConvert() {
+	const { id, cid } = convert(src.value)
+	if (id == null) {
+		err.value = true
+		srcText.value?.focus()
+	} else {
+		err.value = false
+		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" />
+	<Intro />
+	<br/><Hr/>
+	<section id="converter">
+		<h2>链接转换</h2>
+		<p>输入完整链接或者 ID</p>
+		<ClientOnly>
+			<mdui-text-field variant="filled" label="链接" placeholder="https://archiveofourown.org/works/114514" @input="src = $event.target.value" ref='srcText'>
+			<span  v-if='err' slot="helper" class='warn-text'>链接格式错误!</span>
+			</mdui-text-field><br/>
+			<div style="display: flex">
+				<div style="flex-grow: 1"></div>
+				<mdui-button @click='onConvert'>-></mdui-button>
+			</div>
+			{{ src }}
+		<template #ssr>
+			Padding...
+		</template></ClientOnly>
+	</section>
+</template>

src/views/Work.vue

@@ -0,0 +1,257 @@
+<script setup>
+import { ref, onMounted, onServerPrefetch, onBeforeUnmount, watch, nextTick } from 'vue'
+import { useRouter, useRoute, RouterView } 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()
+
+import { useBookmarkStore } from '../stores/db.js'
+
+import 'mdui/components/list.js'
+import 'mdui/components/list-item.js'
+import 'mdui/components/dialog.js'
+import 'mdui/components/divider.js'
+import 'mdui/components/linear-progress.js'
+import 'mdui/components/fab.js'
+import 'mdui/components/button.js'
+import 'mdui/components/dropdown.js'
+import 'mdui/components/menu.js'
+import 'mdui/components/menu-item.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)
+const content = ref(null)
+const readPercent = ref(0)
+const bookmarkDialog = ref(null)
+const bookmarks = ref([])
+const bookmarkMenu = ref(false)
+const bookmarkSelect = ref(null)
+
+let readIndex = 0
+let lastPercent = 0
+let lastCloseTimer = null
+let isObserver = null
+let bookmarkStore = null
+let paragraphs = []
+let currentParagraph = null
+
+async function addBookmark() {
+	if (currentParagraph) {
+		const id = await bookmarkStore.add(workReadState.id, readIndex, currentParagraph.textContent.slice(0,20), '')
+		bookmarks.value.push(await bookmarkStore.get(id))
+		snackbar({
+			message: `在第 ${readIndex} 段 (${readPercent.value}%) 处新建了一个书签`,
+			action: "编辑",
+			onActionClick: () => {
+			prompt({
+				headline: "修改书签",
+				description: "新名字:",
+				confirmText: "完成",
+				cancelText: "算了",
+				onConfirm: (value) => {
+					bookmarkStore.updateName(id, value)
+					bookmarks.value[bookmarks.value.length - 1].name = value
+				}
+			});
+		}})
+	}
+}
+
+async function jumpTo(index) {
+	const value = bookmarks.value[index].index
+	const target = paragraphs[value]
+	bookmarkDialog.value.open = false
+	await nextTick()
+	if (target) {
+		target.scrollIntoView({
+			behavior: 'smooth',
+			block: 'end',
+			inline: 'nearest'
+		})
+	}
+}
+
+async function delAllBookmark() {
+	confirm({
+		headline: '警告',
+		description: '这会清空所有书签! 不可恢复!',
+		confirmText: '我明白',
+		cancelText: '算了',
+		closeOnOverlayClick: true,
+		closeOnEsc: true,
+		onConfirm: () => {
+			bookmarkStore.delByWork(workReadState.id)
+			bookmarks.value = []
+			mduiSnackbar('书签清空辣!')
+		},
+	})
+}
+
+async function editBookmark() {
+	prompt({
+		headline: "修改书签",
+		description: "新名字:",
+		confirmText: "完成",
+		cancelText: "算了",
+		onConfirm: (value) => {
+			bookmarkStore.updateName(bookmarkSelect.value.bk.id, value)
+			bookmarks.value[bookmarkSelect.value.index].name = value
+		}
+	});
+}
+
+function openBookmarkMenu(bk, index) {
+	bookmarkSelect.value = { bk, index };
+	bookmarkMenu.value.open = true
+}
+
+async function deleteBookmark() {
+	if (bookmarkSelect.value) {
+		bookmarkStore.del(bookmarkSelect.value.bk.id)
+		bookmarks.value.splice(bookmarkSelect.value.index)
+		bookmarkSelect.value = null
+	}
+}
+
+onServerPrefetch(async () => {
+	await workReadState.loadWork(route.params.id)
+})
+
+onMounted(async () => {
+	bookmarkStore = useBookmarkStore()
+	if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id)
+	if (workReadState.state == 'ready') {
+		routeState.customTitle = workReadState.title
+		const paraCount = workReadState.text.length - 2
+		isObserver = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					currentParagraph = entry.target
+					readIndex = entry.target.dataset.index;
+					readPercent.value = parseInt(readIndex / paraCount * 100) 
+					if (lastPercent == 0) {
+						lastPercent = readPercent.value
+						return
+					}
+					if (Math.abs(lastPercent - readPercent.value) > 10) {
+						lastPercent = readPercent.value
+						fabExtended.value = true
+						if (lastCloseTimer) clearTimeout(lastCloseTimer)
+						lastCloseTimer = setTimeout(() => {
+							fabExtended.value = false
+							lastPercent = readPercent.value
+						}, 2000)
+					}
+				}
+			})
+		}, {
+			threshold: 0.5
+		})
+		await nextTick()
+		paragraphs = content.value?.querySelectorAll('p');
+		paragraphs?.forEach(p => isObserver.observe(p));
+		bookmarks.value = await bookmarkStore.getAll(workReadState.id)
+	}
+})
+
+onBeforeUnmount(() => {
+	isObserver.disconnect();
+})
+</script>
+
+<template>
+	<ClientOnly>
+		<template v-if="workReadState.state == 'loading'">
+			加载中...<br/>
+			<mdui-linear-progress></mdui-linear-progress>
+		</template>
+		<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
+			<h2>文章不存在...</h2>
+			是不是链接没有复制完全?<br/>
+			ID: {{workReadState.id}}<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>
+				<blockquote>
+					<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
+				</blockquote>
+				<Hr/>
+				<div ref='content'>
+					<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
+				</div>
+			</article>
+			<mdui-fab class="mdui-fab" :extended="fabExtended" @click="bookmarkDialog.open = true">
+				<mdui-icon-bookmark slot="icon"></mdui-icon-bookmark>
+				{{ readPercent }}%
+			</mdui-fab>
+			<mdui-dialog ref='bookmarkDialog' close-on-overlay-click>
+				<span slot="headline">书签</span>
+				<span slot="description">
+					共 {{ bookmarks.length }} 个
+				<br/>
+					点击跳转, 长按条目以 更新/删除
+				</span>
+				<mdui-list v-if="bookmarks.length" style="max-width: 50vh; max-height: 90vh;">
+					<mdui-list-item
+						v-for="(bk, index) in bookmarks"
+						@click="jumpTo(index)"
+						@contextmenu.prevent="openBookmarkMenu(bk, index)"
+					>
+						{{ bk.name || bk.para }}
+					</mdui-list-item>
+				</mdui-list>
+				<span v-else>还没有书签</span>
+				<mdui-dropdown ref='bookmarkMenu' trigger="manual" open-on-pointer>
+					<span slot="trigger" />
+					<mdui-menu>
+					<mdui-menu-item @click="deleteBookmark()">删除</mdui-menu-item>
+					<mdui-menu-item @click="editBookmark()">编辑</mdui-menu-item>
+					</mdui-menu>
+				</mdui-dropdown>
+				<mdui-button slot="action" @click="delAllBookmark" variant="filled">清空</mdui-button>
+				<mdui-button slot="action" @click="addBookmark" variant="text">新建</mdui-button>
+			</mdui-dialog>
+		</template>
+	<template #ssr>
+		<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
+			<h2>文章不存在...</h2>
+			是不是链接没有复制完全?<br/>
+			ID: {{workReadState.id}}<br/>
+			<a @click="$router.back()">返回</a>
+		</template>
+		<template v-if="workReadState.state == 'ready'">
+			<h1>{{ workReadState.title }}</h1>
+			<h2>{{ workReadState.pesud }}</h2>
+			<blockquote>
+				<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
+			</blockquote>
+			<Hr/>
+			<p v-for="para in workReadState.text.slice(0, 10)" :key="para">{{ para }}</p>
+		</template>
+	</template></ClientOnly>
+</template>
+
+<style scoped>
+.mdui-fab {
+    position: fixed;
+    bottom: 16px; /* 调整垂直位置 */
+    right: 16px; /* 调整水平位置 */
+    z-index: 1000; /* 确保悬浮按钮在其他内容上方 */
+    animation: slideInFromRight var(--mdui-motion-duration-medium2) var(--mdui-motion-easing-standard); /* 动画时长和缓动效果 */
+}
+</style>

src/views/fallback/NotFound.vue

@@ -0,0 +1,11 @@
+<script setup>
+import 'mdui/components/divider.js'
+</script>
+
+<template>
+	<h1>404 - 页面未找到</h1>
+	<p>抱歉，您访问的页面不存在。</p>
+	<router-link to="/">返回主页</router-link>
+	<Hr/>
+	Page of AO3 Mirror
+</template>