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

增加设置板块, 允许自定义界面设置, 使用 VueUse 存储
All checks were successful
Build / build-and-test (push) Successful in 27s
Details

Browse Source 
[Style]
为主视图增加 16px 间距
更新 mdui-card 的右边距问题 (老问题了, 还是没有解决)

[Base]
引入 VueUse
分离 Axios
HTML 部分紧凑化
This commit is contained in:
UnknownMp
2025-05-23 22:41:47 +08:00
parent 3778dbe57c
commit 8d248a44ff
11 changed files with 287 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.vue
View File

@ -27,7 +27,7 @@ const route = useRoute()
const clientOnlyStore = useClientOnlyStore()
const api = useApiStore()
const themeScheme = useThemeStore()
let themeScheme = null
const mobileScreen = useMobileScreen()
const routeStore = useRouteStore()
@ -38,7 +38,7 @@ const closeDrawer = ref(true)
let progressTimer = null
onServerPrefetch(async () => {
await api.init()
})
onBeforeMount(() => {
@ -47,8 +47,8 @@ onBeforeMount(() => {
})
onMounted(async () => {
themeScheme = useThemeStore()
themeScheme.applyTheme()
await api.init()
clientOnlyStore.setClient()
new MutationObserver(() => {
if (document.documentElement.style.width.includes('calc')) {
@ -63,8 +63,8 @@ onMounted(async () => {
</script>
<template>
<header><ClientOnly>
<mdui-top-app-bar style="background-color: rgb(var(--mdui-color-primary-container));" scroll-behavior="shrink elevate">
<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>
@ -78,11 +78,10 @@ onMounted(async () => {
<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;">
<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"
@ -94,27 +93,25 @@ onMounted(async () => {
</mdui-list>
</mdui-navigation-drawer>
<template #ssr>
<ul>
<li v-for="item in routeStore.allRoutes"
<ul><li v-for="item in routeStore.allRoutes"
:key="item.path"
: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 }">
><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>
<footer></footer>
<component :is="Component" />
</RouterView>
</main><footer></footer>
</template>
<style scoped>
.active-item {
background-color: rgb(var(--mdui-color-surface-container-high));
}
.content {
margin: 16px;
}
.bottom {
position: fixed;
display: flex;