refactor(client): Refine routing (#8846)
This commit is contained in:
@@ -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 {
|
||||
|
Reference in New Issue
Block a user