refactor(client): Refine routing (#8846)

This commit is contained in:
syuilo
2022-06-20 17:38:49 +09:00
committed by GitHub
parent 30a39a296d
commit 699f24f3dc
149 changed files with 6312 additions and 6670 deletions

View File

@@ -1,46 +1,42 @@
<template>
<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
<div class="header">
<div class="title">
<MkA v-if="narrow" to="/settings">{{ $ts.settings }}</MkA>
<template v-else>{{ $ts.settings }}</template>
</div>
<div v-if="childInfo" class="subtitle">{{ childInfo.title }}</div>
</div>
<div class="body">
<div v-if="!narrow || initialPage == null" class="nav">
<div class="baaadecd">
<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkSuperMenu :def="menuDef" :grid="initialPage == null"></MkSuperMenu>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
<div class="body">
<div v-if="!narrow || initialPage == null" class="nav">
<div class="baaadecd">
<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkSuperMenu :def="menuDef" :grid="initialPage == null"></MkSuperMenu>
</div>
</div>
</div>
<div v-if="!(narrow && initialPage == null)" class="main">
<div class="bkzroven">
<component :is="component" :ref="el => pageChanged(el)" :key="initialPage" v-bind="pageProps"/>
<div v-if="!(narrow && initialPage == null)" class="main">
<div class="bkzroven">
<component :is="component" :key="initialPage" v-bind="pageProps"/>
</div>
</div>
</div>
</div>
</div>
</MkSpacer>
</MkSpacer>
</mkstickycontainer>
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { computed, defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue';
import { i18n } from '@/i18n';
import MkInfo from '@/components/ui/info.vue';
import MkSuperMenu from '@/components/ui/super-menu.vue';
import { scroll } from '@/scripts/scroll';
import { signout } from '@/account';
import { signout , $i } from '@/account';
import { unisonReload } from '@/scripts/unison-reload';
import * as symbols from '@/symbols';
import { instance } from '@/instance';
import { $i } from '@/account';
import { MisskeyNavigator } from '@/scripts/navigate';
import { useRouter } from '@/router';
import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
const props = defineProps<{
initialPage?: string
}>();
const props = withDefaults(defineProps<{
initialPage?: string;
}>(), {
});
const indexInfo = {
title: i18n.ts.settings,
@@ -52,7 +48,7 @@ const INFO = ref(indexInfo);
const el = ref<HTMLElement | null>(null);
const childInfo = ref(null);
const nav = new MisskeyNavigator();
const router = useRouter();
const narrow = ref(false);
const NARROW_THRESHOLD = 600;
@@ -189,7 +185,7 @@ const menuDef = computed(() => [{
signout();
},
danger: true,
},],
}],
}]);
const pageProps = ref({});
@@ -242,7 +238,7 @@ watch(component, () => {
watch(() => props.initialPage, () => {
if (props.initialPage == null && !narrow.value) {
nav.push('/settings/profile');
router.push('/settings/profile');
} else {
if (props.initialPage == null) {
INFO.value = indexInfo;
@@ -252,7 +248,7 @@ watch(() => props.initialPage, () => {
watch(narrow, () => {
if (props.initialPage == null && !narrow.value) {
nav.push('/settings/profile');
router.push('/settings/profile');
}
});
@@ -261,7 +257,7 @@ onMounted(() => {
narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
if (props.initialPage == null && !narrow.value) {
nav.push('/settings/profile');
router.push('/settings/profile');
}
});
@@ -271,38 +267,23 @@ onUnmounted(() => {
const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
const pageChanged = (page) => {
if (page == null) {
provideMetadataReceiver((info) => {
if (info == null) {
childInfo.value = null;
} else {
childInfo.value = page[symbols.PAGE_INFO];
childInfo.value = info;
}
};
defineExpose({
[symbols.PAGE_INFO]: INFO,
});
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata(INFO);
</script>
<style lang="scss" scoped>
.vvcocwet {
> .header {
display: flex;
margin-bottom: 24px;
font-size: 1.3em;
font-weight: bold;
> .title {
display: block;
width: 34%;
}
> .subtitle {
flex: 1;
min-width: 0;
}
}
> .body {
> .nav {
.baaadecd {