AO3-Mirror/ao3-mirror-ssr
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: AO3-Mirror:v1.2.2
Branches Tags
AO3-Mirror:main
AO3-Mirror:v1.2.6 AO3-Mirror:v1.2.5 AO3-Mirror:v1.2.4 AO3-Mirror:v1.2.3 AO3-Mirror:v1.2.2 AO3-Mirror:v1.2.1-rc1 AO3-Mirror:v1.2.1 AO3-Mirror:v1.2.0 AO3-Mirror:v1.1.1-rc1 AO3-Mirror:v1.1.1 AO3-Mirror:v1.1.0 AO3-Mirror:v1.0.9-rc1 AO3-Mirror:v1.0.9 AO3-Mirror:v1.0.8-rc1 AO3-Mirror:v1.0.8 AO3-Mirror:v1.0.7 AO3-Mirror:v1.0.6 AO3-Mirror:v1.0.5 AO3-Mirror:v1.0.4 AO3-Mirror:v1.0.3-rc1 AO3-Mirror:v1.0.3 AO3-Mirror:v1.0.2 AO3-Mirror:v1.0.1 AO3-Mirror:v1.0.0-rc1 AO3-Mirror:v1.0.0
..
compare: AO3-Mirror:v1.2.4
Branches Tags
AO3-Mirror:main
AO3-Mirror:v1.2.6 AO3-Mirror:v1.2.5 AO3-Mirror:v1.2.4 AO3-Mirror:v1.2.3 AO3-Mirror:v1.2.2 AO3-Mirror:v1.2.1-rc1 AO3-Mirror:v1.2.1 AO3-Mirror:v1.2.0 AO3-Mirror:v1.1.1-rc1 AO3-Mirror:v1.1.1 AO3-Mirror:v1.1.0 AO3-Mirror:v1.0.9-rc1 AO3-Mirror:v1.0.9 AO3-Mirror:v1.0.8-rc1 AO3-Mirror:v1.0.8 AO3-Mirror:v1.0.7 AO3-Mirror:v1.0.6 AO3-Mirror:v1.0.5 AO3-Mirror:v1.0.4 AO3-Mirror:v1.0.3-rc1 AO3-Mirror:v1.0.3 AO3-Mirror:v1.0.2 AO3-Mirror:v1.0.1 AO3-Mirror:v1.0.0-rc1 AO3-Mirror:v1.0.0

3 Commits
v1.2.2 ... v1.2.4

Author SHA1 Message Date
UnknownMp
b1804ae060 [BugFix] 修复章节列表暗色显示问题
All checks were successful
Build / build-and-test (push) Successful in 37s
Details 
[Base]
增加 robots.txt
 2025-06-03 17:45:33 +08:00
UnknownMp
78fe779c93 小优化和 A11Y 调整 2025-05-31 23:50:23 +08:00
UnknownMp
3a6d10c2ec 修整了代码, 移除不必要导入, 使代码紧凑
All checks were successful
Build / build-and-test (push) Successful in 29s
Details 
[UX]
在路由加载时如果有新的路由请求直接拦截取消 (beforeEach 路由守卫)
 2025-05-31 19:11:20 +08:00
22 changed files with 250 additions and 455 deletions
Expand all files Collapse all files

12
index.html
View File

@ -1,9 +1,17 @@
<!doctype html> <!doctype html>
<html> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <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" /> <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--> <!--app-head-->
</head> </head>
<body> <body>

3
public/robots.txt Normal file
View File

@ -0,0 +1,3 @@
Sitemap: https://ao3.unknownmp.top/sitemap.xml
User-agent: *
Disallow: /assets/

43
src/App.vue
View File

@ -1,6 +1,8 @@
<script setup> <script setup>
import { onMounted, onBeforeMount, onServerPrefetch, nextTick, ref, watch } from 'vue' import 'mdui/mdui.css'
import { useRouter, useRoute, RouterView } from 'vue-router' import './main.scss'
import { onMounted, onBeforeMount, nextTick, ref, watch } from 'vue'
import { useApiStore } from '@/stores/api.js' import { useApiStore } from '@/stores/api.js'
@ -22,39 +24,27 @@ import '@mdui/icons/arrow-back.js'
import '@mdui/icons/light-mode.js' import '@mdui/icons/light-mode.js'
import '@mdui/icons/menu.js' import '@mdui/icons/menu.js'
const router = useRouter()
const route = useRoute()
const clientOnlyStore = useClientOnlyStore() const clientOnlyStore = useClientOnlyStore()
const api = useApiStore()
let themeScheme = null
const mobileScreen = useMobileScreen()
const routeStore = useRouteStore() const routeStore = useRouteStore()
const api = useApiStore()
const mobileScreen = useMobileScreen()
let themeScheme = null
const drawerOpen = ref(false) const drawerOpen = ref(false)
const drawer = ref(null) const drawer = ref(null)
const closeDrawer = ref(true) const closeDrawer = ref(true)
let progressTimer = null
onServerPrefetch(async () => {
})
onBeforeMount(() => { onBeforeMount(() => {
themeScheme = useThemeStore()
mobileScreen.reCal() mobileScreen.reCal()
if(!mobileScreen.isMobile) drawerOpen.value = true if(!mobileScreen.isMobile) drawerOpen.value = true
}) })
onMounted(async () => { onMounted(async () => {
themeScheme = useThemeStore()
themeScheme.applyTheme() themeScheme.applyTheme()
clientOnlyStore.setClient() clientOnlyStore.setClient()
new MutationObserver(() => { new MutationObserver(() => { if (document.documentElement.style.width.includes('calc')) document.documentElement.style.width = '' })
if (document.documentElement.style.width.includes('calc')) { .observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
document.documentElement.style.width = '';
}
}).observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
watch(() => mobileScreen.isMobile, (newV, oldV) => { watch(() => mobileScreen.isMobile, (newV, oldV) => {
if( oldV && !newV ) nextTick(() => drawer.value.open = true) if( oldV && !newV ) nextTick(() => drawer.value.open = true)
if( !oldV && newV ) nextTick(() => drawer.value.open = false) if( !oldV && newV ) nextTick(() => drawer.value.open = false)
@ -65,12 +55,7 @@ onMounted(async () => {
<template> <template>
<header><ClientOnly> <header><ClientOnly>
<mdui-top-app-bar style="background-color: rgb(var(--mdui-color-primary-container));" scroll-behavior="shrink elevate"> <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-button-icon @click="drawer.open = !drawer.open"><mdui-icon-menu></mdui-icon-menu></mdui-button-icon>
<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-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> <mdui-circular-progress v-if="routeStore.showProgress" :value='routeStore.progress' :max='routeStore.progressMax'></mdui-circular-progress>
<div style="flex-grow: 1"></div> <div style="flex-grow: 1"></div>
@ -98,10 +83,8 @@ onMounted(async () => {
:class="{ 'active-item' : item.path == $route.path }" :class="{ 'active-item' : item.path == $route.path }"
><a :href="item.path">{{ item.name }}</a></li></ul> ><a :href="item.path">{{ item.name }}</a></li></ul>
</template></ClientOnly></nav> </template></ClientOnly></nav>
<main :class="{ 'mdui-prose' : clientOnlyStore.isClient , 'content' : clientOnlyStore.isClient}"> <main :class="{ 'mdui-prose' : clientOnlyStore.isClient , 'content' : clientOnlyStore.isClient }">
<RouterView v-slot="{ Component }"> <RouterView />
<component :is="Component" />
</RouterView>
</main><footer></footer> </main><footer></footer>
</template> </template>

42
src/assets/typescale.css
View File

@ -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);
}

13
src/entry-client.js
View File

@ -1,5 +1,4 @@
import { decompress } from 'compress-json' import { decompress } from 'compress-json'
import './main.scss'
import { createApp } from './main' import { createApp } from './main'
import { createSSRRouter } from './router.js' import { createSSRRouter } from './router.js'
@ -9,15 +8,7 @@ const router = createSSRRouter()
app.use(router) app.use(router)
if (window.__PINIA_STATE__) { if (window.__PINIA_STATE__) pinia.state.value = decompress(window.__PINIA_STATE__)
pinia.state.value = decompress(window.__PINIA_STATE__)
}
if (window.__INITIAL_STATE__) { router.isReady().then(() => app.mount('#app'))
window.__INITIAL_STATE__ = decompress(window.__INITIAL_STATE__)
}
router.isReady().then(() => {
app.mount('#app')
})

29
src/entry-server.js
View File

@ -4,25 +4,20 @@ import { createApp } from './main'
import { createSSRRouter } from './router.js' import { createSSRRouter } from './router.js'
export async function getRoute(_url) { export async function getRoute(_url) {
const router = createSSRRouter() const router = createSSRRouter()
await router.push(_url) await router.push(_url)
await router.isReady() await router.isReady()
const route = router.currentRoute.value.matched[0] const route = router.currentRoute.value.matched[0]
const code = route.meta.code || 200 const code = route.meta.code || 200
return { router, code } return { router, code }
} }
export async function render(router, cookies, host) { export async function render(router, cookies, host) {
const { app, pinia } = createApp() const { app, pinia } = createApp()
app.use(router)
app.use(router) const ctx = { cookies, host }
const ctx = { const stream = renderToWebStream(app, ctx)
cookies, const piniaState = pinia.state.value
host, return { stream, piniaState }
initialState: {}
}
const stream = renderToWebStream(app, ctx)
const piniaState = pinia.state.value
return { stream, piniaState }
} }

15
src/main.scss
View File

@ -1,33 +1,25 @@
@import 'mdui/mdui.css';
// @import './assets/typescale.css';
// 字体配置
$font-family: Roboto, Noto Sans SC, PingFang SC, Lantinghei SC, $font-family: Roboto, Noto Sans SC, PingFang SC, Lantinghei SC,
Microsoft Yahei, Hiragino Sans GB, "Microsoft Sans Serif", Microsoft Yahei, Hiragino Sans GB, "Microsoft Sans Serif",
WenQuanYi Micro Hei, sans-serif; WenQuanYi Micro Hei, sans-serif;
// MDUI 变量简写
$bg-color: rgb(var(--mdui-color-background)); $bg-color: rgb(var(--mdui-color-background));
$error-color: rgb(var(--mdui-color-error)); $error-color: rgb(var(--mdui-color-error));
$on-error-color: rgb(var(--mdui-color-on-error)); $on-error-color: rgb(var(--mdui-color-on-error));
$transition-duration: var(--mdui-motion-duration-short2);
$transition-easing: var(--mdui-motion-easing-linear);
html { html {
scroll-padding-top: 64px; /* 等于顶栏高度 */ scroll-padding-top: 64px;
} }
body { body {
font-family: $font-family; font-family: $font-family;
background-color: $bg-color; background-color: $bg-color;
transition: opacity $transition-duration $transition-easing;
} }
pre { pre {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
} }
// MDUI 组件样式
mdui-card { mdui-card {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
@ -37,7 +29,6 @@ mdui-text-field {
margin: 8px 0; margin: 8px 0;
} }
// 警告样式
.warn { .warn {
background-color: $error-color; background-color: $error-color;
color: $on-error-color; color: $on-error-color;
@ -47,7 +38,6 @@ mdui-text-field {
color: $error-color; color: $error-color;
} }
// 通用工具类
.pre-break { .pre-break {
white-space: pre-line; white-space: pre-line;
} }
@ -55,4 +45,3 @@ mdui-text-field {
.no-select { .no-select {
user-select: none; user-select: none;
} }

156
src/router.js
View File

@ -1,86 +1,80 @@
import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router' import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'
export function createSSRRouter() { export const createSSRRouter = () => createRouter({
const router = createRouter({ history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(), scrollBehavior(to, from, savedPosition) {
scrollBehavior(to, from, savedPosition) { if (savedPosition) return savedPosition
if (savedPosition) { else if (to.hash) {
return savedPosition return {
} else if (to.hash) { el: to.hash,
return { behavior: 'smooth',
el: to.hash,
behavior: 'smooth',
}
} else {
return { top: 0 }
} }
} else return { top: 0 }
},
routes: [{
path: '/',
name: '前言',
component: () => import('./views/Root.vue'),
meta: {
title: '首页',
order: 1
}, },
routes: [{ },{
path: '/', path: '/work/:id',
name: '前言', name: 'work',
component: () => import('./views/Root.vue'), component: () => import('./views/Work.vue'),
meta: { meta: {
title: '首页', title: '阅读',
order: 1 hidden: true
},
},{
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
}
} }
]}) },{
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
}
}
]})

6
src/ssr/ClientOnly.vue
View File

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

25
src/ssr/ClientOnly1.vue
View File

@ -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>

9
src/ssr/useInitialState.js
View File

@ -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
}
}
}

2
src/stores/api.js
View File

@ -1,5 +1,5 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { useApiRequest } from '../composables/apiRequest' import { useApiRequest } from '../composables/apiRequest.js'
export const useApiStore = defineStore('api', () => { export const useApiStore = defineStore('api', () => {
async function getWork(workId, chapterId) { async function getWork(workId, chapterId) {

3
src/stores/appSetting.js
View File

@ -1,6 +1,5 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { reactive } from 'vue' import { useStorage } from '@vueuse/core'
import { useStorage, watchWithFilter, debounceFilter } from '@vueuse/core'
const CURRENT_VERSION = 1 const CURRENT_VERSION = 1

12
src/stores/route.js
View File

@ -21,9 +21,7 @@ export const useRouteStore = defineStore('route', () => {
if (lastFromDrawer.value == 0) { if (lastFromDrawer.value == 0) {
lastFromDrawer.value = 1 lastFromDrawer.value = 1
router.push(target) router.push(target)
} else { } else router.replace(target)
router.replace(target)
}
} }
const progress = ref(0) const progress = ref(0)
const progressMax = ref(1) const progressMax = ref(1)
@ -32,11 +30,9 @@ export const useRouteStore = defineStore('route', () => {
watch(title, title => document.title = title) watch(title, title => document.title = title)
let progressTimer = null let progressTimer = null
router.beforeEach((to, from) => { router.beforeEach((to, from) => {
if (lastFromDrawer.value == 2) { if (showProgress.value) return false
lastFromDrawer.value = 0 if (lastFromDrawer.value == 2) lastFromDrawer.value = 0
} else if (lastFromDrawer.value == 1) { else if (lastFromDrawer.value == 1) lastFromDrawer.value = 2
lastFromDrawer.value = 2
}
progress.value = 0 progress.value = 0
progressMax.value = 1 progressMax.value = 1
showProgress.value = true showProgress.value = true

12
src/ui/Form.vue
View File

@ -1,9 +1,3 @@
<template>
<form @submit="handleSubmit">
<slot></slot>
</form>
</template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
@ -18,3 +12,9 @@ function handleSubmit(event) {
} }
</script> </script>
<template>
<form @submit="handleSubmit">
<slot></slot>
</form>
</template>

111
src/utils.js
View File

@ -1,11 +1,7 @@
import { snackbar } from 'mdui/functions/snackbar.js' import { snackbar } from 'mdui/functions/snackbar.js'
import { alert } from 'mdui/functions/alert.js' import { alert } from 'mdui/functions/alert.js'
export function mduiSnackbar(message) { export const mduiSnackbar = (message) => snackbar({ message })
snackbar({
message: message,
})
}
export function mduiAlert(title,desc,callback = null,confirmText = "OK") { export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
alert({ alert({
@ -19,50 +15,44 @@ export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
} }
export function getQueryVariable(variable) { export function getQueryVariable(variable) {
var query = window.location.search.substring(1); var query = window.location.search.substring(1)
var vars = query.split("&") var vars = query.split("&")
for (var i=0;i<vars.length;i++) { for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=") var pair = vars[i].split("=")
if(pair[0] == variable){return pair[1]} if(pair[0] == variable){return pair[1]}
} }
return(null); return null
} }
export const escapeHtml = (text) => export const escapeHtml = (text) => text
text .replace(/&/g, "&amp;") // 转义 &
.replace(/&/g, "&amp;") // 转义 & .replace(/</g, "&lt;") // 转义 <
.replace(/</g, "&lt;") // 转义 < .replace(/>/g, "&gt;") // 转义 >
.replace(/>/g, "&gt;") // 转义 > .replace(/"/g, "&quot;") // 转义 "
.replace(/"/g, "&quot;") // 转义 " .replace(/'/g, "&#39;"); // 转义 '
.replace(/'/g, "&#39;"); // 转义 '
export function escapeAndFormatText(input) { export const escapeAndFormatText = (text) => escapeHtml(text)
let escapedText = escapeHtml(input); .replace(/ /g, "&nbsp;")
escapedText = escapedText.replace(/ /g, "&nbsp;"); .replace(/\t/g, "&emsp;&emsp;")
escapedText = escapedText.replace(/\t/g, "&emsp;&emsp;"); .replace(/\n/g, "<br/>")
escapedText = escapedText.replace(/\n/g, "<br/>");
return escapedText;
}
export function getCookie(name) { export function getCookie(name) {
const cookieArr = document.cookie.split(";") const cookieArr = document.cookie.split(";")
for (let i = 0; i < cookieArr.length; i++) { for (let i = 0; i < cookieArr.length; i++) {
const cookiePair = cookieArr[i].trim() const cookiePair = cookieArr[i].trim()
if (cookiePair.startsWith(name + "=")) { if (cookiePair.startsWith(name + "=")) return cookiePair.substring(name.length + 1)
return cookiePair.substring(name.length + 1); }
} return null
}
return null;
} }
export function setCookie(name, value, days = 3650) { export function setCookie(name, value, days = 3650) {
var expires = "" var expires = ""
if (days) { if (days) {
var date = new Date() 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() expires = "; expires=" + date.toUTCString()
} }
document.cookie = name + "=" + value + expires + "; path=/"; document.cookie = name + "=" + value + expires + "; path=/"
} }
export function objectToQueryString(obj, parentKey = '') { export function objectToQueryString(obj, parentKey = '') {
@ -71,42 +61,37 @@ export function objectToQueryString(obj, parentKey = '') {
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue if (!Object.prototype.hasOwnProperty.call(obj, key)) continue
let value = obj[key] let value = obj[key]
let newKey = parentKey ? `${parentKey}[${key}]` : key let newKey = parentKey ? `${parentKey}[${key}]` : key
if (typeof value === 'object' && value !== null) { if (typeof value === 'object' && value !== null) parts.push(objectToQueryString(value, newKey))
parts.push(objectToQueryString(value, newKey)) else parts.push(encodeURIComponent(newKey) + '=' + encodeURIComponent(value))
} else {
parts.push(encodeURIComponent(newKey) + '=' + encodeURIComponent(value))
}
} }
return parts.join('&') return parts.join('&')
} }
export function formatUnixTimestamp(unixTimestamp, timeZone) { export function formatUnixTimestamp(unixTimestamp, timeZone) {
const date = new Date(unixTimestamp * 1000); // 将 UNIX 时间戳转换为毫秒 const date = new Date(unixTimestamp * 1000)
const options = { const options = {
timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone, // 使用指定时区或浏览器本地时区 timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone,
year: 'numeric', year: 'numeric',
month: '2-digit', month: '2-digit',
day: '2-digit', day: '2-digit',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
second: '2-digit', second: '2-digit',
hour12: false, // 24小时制 hour12: false,
}; }
const formatter = new Intl.DateTimeFormat('en-US', options); const formatter = new Intl.DateTimeFormat('en-US', options)
const parts = formatter.formatToParts(date); const parts = formatter.formatToParts(date)
const formatMap = {}; const formatMap = {}
parts.forEach(({ type, value }) => { parts.forEach(({ type, value }) => { formatMap[type] = value })
formatMap[type] = value; return `${formatMap.year}-${formatMap.month}-${formatMap.day} ${formatMap.hour}:${formatMap.minute}:${formatMap.second}`
});
return `${formatMap.year}-${formatMap.month}-${formatMap.day} ${formatMap.hour}:${formatMap.minute}:${formatMap.second}`;
} }
export function isMobileDeviceByUA() { export function isMobileDeviceByUA() {
const ua = navigator.userAgent || navigator.vendor || window.opera; const ua = navigator.userAgent || navigator.vendor || window.opera
return /android/i.test(ua) || return /android/i.test(ua) ||
/iphone/i.test(ua) || /iphone/i.test(ua) ||
/ipod/i.test(ua) || /ipod/i.test(ua) ||
/ipad/i.test(ua) || /ipad/i.test(ua) ||
/blackberry/i.test(ua) || /blackberry/i.test(ua) ||
/windows phone/i.test(ua); /windows phone/i.test(ua)
} }

56
src/views/Developer.vue
View File

@ -1,11 +1,9 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useApiStore } from '@/stores/api.js' import { useApiStore } from '@/stores/api.js'
import { useRouteStore } from '../stores/route.js' import { useRouteStore } from '../stores/route.js'
const router = useRouter()
const api = useApiStore() const api = useApiStore()
const routeStore = useRouteStore() const routeStore = useRouteStore()
@ -30,45 +28,33 @@ onMounted(() => {
}) })
</script> </script>
<template> <template>
<h1 class="warn-text">注意本页面仅为测试用!</h1> <h1 class="warn-text">注意本页面仅为测试用!</h1>
<blockquote> <blockquote>
当然如果你是乱点那个唐鬼小人进来的, 这就是个彩蛋? (神金 当然如果你是乱点那个唐鬼小人进来的, 这就是个彩蛋? (神金
</blockquote> </blockquote><Hr />
<Hr />
<section> <section>
<h2>页面信息</h2> <h2>页面信息</h2>
<h3>可见路由信息:</h3> <h3>可见路由信息:</h3>
<pre>{{ routeStore.allRoutes }}</pre> <pre>{{ routeStore.allRoutes }}</pre>
</section> </section><Hr />
<Hr /> <ClientOnly><section>
<ClientOnly> <h2>浏览器信息</h2><dl>
<section> <dt>User-Agent:</dt>
<h2>浏览器信息</h2> <dd>{{ ua }}</dd>
<dl> <dt>语言:</dt>
<dt>User-Agent:</dt> <dd>{{ language }}</dd>
<dd>{{ ua }}</dd> <dt>平台:</dt>
<dt>语言:</dt> <dd>{{ platform }}</dd>
<dd>{{ language }}</dd> <dt>屏幕尺寸:</dt>
<dt>平台:</dt> <dd>{{ screenSize }}</dd>
<dd>{{ platform }}</dd> <dt>视口尺寸:</dt>
<dt>屏幕尺寸:</dt> <dd>{{ viewportSize }}</dd>
<dd>{{ screenSize }}</dd> <dt>像素比:</dt>
<dt>视口尺寸:</dt> <dd>{{ pixelRatio }}</dd>
<dd>{{ viewportSize }}</dd> <dt>是否触屏设备:</dt>
<dt>像素比:</dt> <dd>{{ touchSupport ? '是' : '否' }}</dd>
<dd>{{ pixelRatio }}</dd> <dt>页面可见性状态:</dt>
<dt>是否触屏设备:</dt> <dd>{{ visibility }}</dd>
<dd>{{ touchSupport ? '是' : '否' }}</dd> </dl></section><Hr /></ClientOnly>
<dt>页面可见性状态:</dt>
<dd>{{ visibility }}</dd>
</dl>
</section>
<Hr />
</ClientOnly>
</template> </template>
<style scoped>
</style>

24
src/views/Mask.vue
View File

@ -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>

51
src/views/Root.vue
View File

@ -10,29 +10,23 @@ import Intro from '../texts/intro.md'
const router = useRouter() const router = useRouter()
function convert(from) { function convert(from) {
if( Number(from) ) { if( Number(from) ) {return {
return { type: 's',
type: 's', id: Number(from)
id: Number(from) }} else if (from.includes('https://archiveofourown.org/works/')) {
}
} else if (from.includes('https://archiveofourown.org/works/')) {
const sid = from.split('https://archiveofourown.org/works/')[1]; const sid = from.split('https://archiveofourown.org/works/')[1];
if ( sid ) { if ( sid ) {
const id = Number(sid) const id = Number(sid)
if (id) { if (id) { return {
return { type: 's',
type: 's', id
id }} else {
}
} else {
const splited = sid.split('/chapters/') const splited = sid.split('/chapters/')
const id = Number(splited[0]) const id = Number(splited[0])
const cid = Number(splited[1]) const cid = Number(splited[1])
if (id && cid) { if (id && cid) return {
return { type: 'c',
type: 'c', id, cid
id, cid
}
} }
} }
} }
@ -42,22 +36,19 @@ function convert(from) {
function onConvert(data) { function onConvert(data) {
const { type, id, cid, key } = convert(data.src) const { type, id, cid, key } = convert(data.src)
if (type == null) { if (type == null) return
} else if ( type == 'f') { else if ( type == 'f') router.push(`/search/simple?keyword=${encodeURIComponent(key)}`)
router.push(`/search/simple?keyword=${encodeURIComponent(key)}`) else {
} else {
if (cid) router.push(`/work/${id}/${cid}`) if (cid) router.push(`/work/${id}/${cid}`)
else router.push(`/work/${id}`) else router.push(`/work/${id}`)
} }
} }
</script> </script>
<template> <template>
<img style="display: block; margin: 0px auto 10px;" height="200px" alt="logo" src="/favicon.svg" /> <img style="display: block; margin: 0px auto 10px;" height="200px" width="200px" alt="logo" src="/favicon.svg" />
<h1>欢迎来到 AO3 Mirror! 👋👋</h1> <h1>欢迎来到 AO3 Mirror! 👋👋</h1>
<p>一个基于重构渲染的 AO3 镜像站</p> <p>一个基于重构渲染的 AO3 镜像站</p><Hr />
<Hr />
<section id="converter"> <section id="converter">
<h2>链接转换</h2> <h2>链接转换</h2>
<p>AO3 链接 或 关键词搜索</p> <p>AO3 链接 或 关键词搜索</p>
@ -67,13 +58,11 @@ function onConvert(data) {
<div style="display: flex"> <div style="display: flex">
<div style="flex-grow: 1"></div> <div style="flex-grow: 1"></div>
<mdui-button type="submit">-></mdui-button> <mdui-button type="submit">-></mdui-button>
</div> </div><template #ssr>
<template #ssr> <input type="text" id="src" name="src" />
<input type="text" id="src" name="src" /> <input type="submit" />
<input type="submit" />
</template></ClientOnly></Form> </template></ClientOnly></Form>
</section> </section><Hr/>
<Hr/>
<Intro /> <Intro />
</template> </template>

28
src/views/Settings.vue
View File

@ -11,25 +11,21 @@ let appSetting = null
onBeforeMount(() => { onBeforeMount(() => {
appSetting = useAppSettingStore() appSetting = useAppSettingStore()
}) })
</script> </script>
<template> <template>
<h1>设置</h1> <h1>设置</h1><Hr />
<Hr /> <ClientOnly><div class="settings"><section><mdui-card>
<ClientOnly><div class="settings"> <h2>界面</h2><Hr />
<section><mdui-card> <div>自动黑暗模式<div style="flex: 1;"/>
<h2>界面</h2><Hr /> <mdui-switch :checked="appSetting.value.autoTheme"
<div>自动黑暗模式<div style="flex: 1;"/> @change="e => appSetting.value.autoTheme = e.target.checked">
<mdui-switch :checked="appSetting.value.autoTheme" </mdui-switch></div>
@change="e => appSetting.value.autoTheme = e.target.checked"> <div v-if="!appSetting.value.autoTheme">默认黑暗模式<div style="flex: 1;"/>
</mdui-switch></div> <mdui-switch :checked="appSetting.value.darkTheme"
<div v-if="!appSetting.value.autoTheme">默认黑暗模式<div style="flex: 1;"/> @change="e => appSetting.value.darkTheme = e.target.checked">
<mdui-switch :checked="appSetting.value.darkTheme" </mdui-switch></div>
@change="e => appSetting.value.darkTheme = e.target.checked"> </mdui-card></section></div></ClientOnly>
</mdui-switch></div>
</mdui-card></section>
</div></ClientOnly>
</template> </template>
<style scoped> <style scoped>

23
src/views/SimpleSearch.vue
View File

@ -1,5 +1,5 @@
<script setup> <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 { useRoute, useRouter } from 'vue-router'
import 'mdui/components/text-field.js' import 'mdui/components/text-field.js'
@ -26,11 +26,7 @@ const stateLabel = {
let isObserver = null let isObserver = null
onServerPrefetch(async () => { onServerPrefetch(async () => { if (route.query.keyword) await simpleSearchState.start(route.query.keyword) })
if (route.query.keyword) {
await simpleSearchState.start(route.query.keyword)
}
})
onMounted(async () => { onMounted(async () => {
watch(() => simpleSearchState.keyword, () => document.title = simpleSearchState.keyword) watch(() => simpleSearchState.keyword, () => document.title = simpleSearchState.keyword)
@ -38,18 +34,14 @@ onMounted(async () => {
if (inputField.value && simpleSearchState != 'ssrready') simpleSearchState.start(inputField.value) if (inputField.value && simpleSearchState != 'ssrready') simpleSearchState.start(inputField.value)
isObserver = new IntersectionObserver((entries) => { isObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) if (simpleSearchState.state == 'ready' || simpleSearchState.state == 'ssrready') setTimeout(simpleSearchState.load,400)
if (simpleSearchState.state == 'ready' || simpleSearchState.state == 'ssrready') setTimeout(simpleSearchState.load,400)
}
}) })
}, { threshold: 1 }) }, { threshold: 1 })
await nextTick() await nextTick()
isObserver.observe(label.value) isObserver.observe(label.value)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => isObserver.disconnect())
isObserver.disconnect();
})
function onSubmit(data) { function onSubmit(data) {
if (simpleSearchState) { if (simpleSearchState) {
@ -57,7 +49,6 @@ function onSubmit(data) {
router.replace(`/search/simple?keyword=${encodeURIComponent(data.src)}`) router.replace(`/search/simple?keyword=${encodeURIComponent(data.src)}`)
} }
} }
</script> </script>
<template> <template>
@ -79,14 +70,12 @@ function onSubmit(data) {
<template v-if="simpleSearchState.result" v-for="work in simpleSearchState.result" :key="work.workId"> <template v-if="simpleSearchState.result" v-for="work in simpleSearchState.result" :key="work.workId">
<ClientOnly><mdui-card style="margin: 8px 0px;"><article> <ClientOnly><mdui-card style="margin: 8px 0px;"><article>
<router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link> <router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link>
<h4>{{ work.pseud }}</h4> <h4>{{ work.pseud }}</h4><Hr />
<Hr />
<p v-html="escapeAndFormatText(work.summary)"></p> <p v-html="escapeAndFormatText(work.summary)"></p>
</article></mdui-card><template #ssr> </article></mdui-card><template #ssr>
<router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link> <router-link :to="`/work/${work.workId}`"><h3>{{ work.title }}</h3></router-link>
<h4>{{ work.pseud }}</h4> <h4>{{ work.pseud }}</h4>
<p>{{ work.summary }}</p> <p>{{ work.summary }}</p><Hr />
<Hr />
</template></ClientOnly> </template></ClientOnly>
</template> </template>
<p style="display: flex;" ref='label'> <p style="display: flex;" ref='label'>

30
src/views/Work.vue
View File

@ -1,14 +1,14 @@
<script setup> <script setup>
import { ref, onMounted, onServerPrefetch, onBeforeUnmount, watch, nextTick } from 'vue' import { ref, onMounted, onBeforeUnmount, onServerPrefetch, watch, nextTick } from 'vue'
import { useRouter, useRoute, RouterView } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
import { useWorkReadState } from '@/stores/workRead.js' import { useWorkReadState } from '@/stores/workRead.js'
const workReadState = useWorkReadState()
import { useRouteStore } from '@/stores/route.js' import { useRouteStore } from '@/stores/route.js'
const routeState = useRouteStore() const routeState = useRouteStore()
const workReadState = useWorkReadState()
import 'mdui/components/list.js' import 'mdui/components/list.js'
import 'mdui/components/list-item.js' import 'mdui/components/list-item.js'
@ -23,10 +23,6 @@ import 'mdui/components/card.js'
import '@mdui/icons/bookmark.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' import { mduiSnackbar } from '../utils.js'
const fabExtended = ref(false) const fabExtended = ref(false)
@ -47,9 +43,7 @@ const categoryName = {
fm: '女/男' fm: '女/男'
} }
onServerPrefetch(async () => { onServerPrefetch(async () => await workReadState.loadWork(route.params.id, route.params.cid))
await workReadState.loadWork(route.params.id, route.params.cid)
})
onMounted(async () => { onMounted(async () => {
watch(() => workReadState.state, (value) => { if (value == 'ready') routeState.customTitle = workReadState.title }) watch(() => workReadState.state, (value) => { if (value == 'ready') routeState.customTitle = workReadState.title })
@ -58,7 +52,7 @@ onMounted(async () => {
routeState.customTitle = workReadState.title routeState.customTitle = workReadState.title
if (workReadState.cid !== null && parseInt(route.params.cid) != workReadState.cid) { if (workReadState.cid !== null && parseInt(route.params.cid) != workReadState.cid) {
router.replace(`/work/${workReadState.id}/${workReadState.cid}`) router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
return; return
} }
const paraCount = workReadState.text.length - 1 const paraCount = workReadState.text.length - 1
isObserver = new IntersectionObserver((entries) => { isObserver = new IntersectionObserver((entries) => {
@ -86,17 +80,15 @@ onMounted(async () => {
threshold: 0.5 threshold: 0.5
}) })
await nextTick() await nextTick()
paragraphs = content.value?.querySelectorAll('p'); paragraphs = content.value?.querySelectorAll('p')
paragraphs?.forEach(p => isObserver.observe(p)); paragraphs?.forEach(p => isObserver.observe(p))
} }
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => { if(isObserver) isObserver.disconnect() })
if(isObserver) isObserver.disconnect();
})
async function switchWorkWithIndex(target) { 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}`) router.replace(`/work/${workReadState.id}/${workReadState.cid}`)
} }
</script> </script>
@ -258,7 +250,7 @@ async function switchWorkWithIndex(target) {
<style scoped> <style scoped>
.active-item { .active-item {
background-color: rgb(var(--mdui-color-secondary-container-light)); background-color: rgb(var(--mdui-color-secondary-container));
} }
.mdui-fab { .mdui-fab {
position: fixed; position: fixed;