sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

enhance(client): ネストしたルーティングに対応

Browse Source
This commit is contained in:
syuilo
2022-07-20 19:59:27 +09:00
parent 17afbc3c46
commit 66f1aaf5f7
9 changed files with 391 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/client/src/pages/_empty_.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div></div>
</template>
<script lang="ts" setup>
import { } from 'vue';
</script>

99
packages/client/src/pages/admin/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
<div v-if="!narrow || initialPage == null" class="nav">
<div v-if="!narrow || currentPage?.route.name == null" class="nav">
<MkSpacer :content-max="700" :margin-min="16">
<div class="lxpfedzu">
<div class="banner">
@ -12,12 +12,12 @@
<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkInfo v-if="noEmailServer" warn class="info">{{ $ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkSuperMenu :def="menuDef" :grid="initialPage == null"></MkSuperMenu>
<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
</div>
</MkSpacer>
</div>
<div v-if="!(narrow && initialPage == null)" class="main">
<component :is="component" :key="initialPage" v-bind="pageProps"/>
<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
<RouterView/>
</div>
</div>
</template>
@ -44,15 +44,10 @@ const indexInfo = {
hideHeader: true,
};
const props = defineProps<{
initialPage?: string,
}>();
provide('shouldOmitHeaderTitle', false);
let INFO = $ref(indexInfo);
let childInfo = $ref(null);
let page = $ref(props.initialPage);
let narrow = $ref(false);
let view = $ref(null);
let el = $ref(null);
@ -61,6 +56,7 @@ let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instan
let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha;
let noEmailServer = !instance.enableEmail;
let thereIsUnresolvedAbuseReport = $ref(false);
let currentPage = $computed(() => router.currentRef.value.child);
os.api('admin/abuse-user-reports', {
state: 'unresolved',
@ -94,47 +90,47 @@ const menuDef = $computed(() => [{
icon: 'fas fa-tachometer-alt',
text: i18n.ts.dashboard,
to: '/admin/overview',
active: props.initialPage === 'overview',
active: currentPage?.route.name === 'overview',
}, {
icon: 'fas fa-users',
text: i18n.ts.users,
to: '/admin/users',
active: props.initialPage === 'users',
active: currentPage?.route.name === 'users',
}, {
icon: 'fas fa-laugh',
text: i18n.ts.customEmojis,
to: '/admin/emojis',
active: props.initialPage === 'emojis',
active: currentPage?.route.name === 'emojis',
}, {
icon: 'fas fa-globe',
text: i18n.ts.federation,
to: '/about#federation',
active: props.initialPage === 'federation',
active: currentPage?.route.name === 'federation',
}, {
icon: 'fas fa-clipboard-list',
text: i18n.ts.jobQueue,
to: '/admin/queue',
active: props.initialPage === 'queue',
active: currentPage?.route.name === 'queue',
}, {
icon: 'fas fa-cloud',
text: i18n.ts.files,
to: '/admin/files',
active: props.initialPage === 'files',
active: currentPage?.route.name === 'files',
}, {
icon: 'fas fa-broadcast-tower',
text: i18n.ts.announcements,
to: '/admin/announcements',
active: props.initialPage === 'announcements',
active: currentPage?.route.name === 'announcements',
}, {
icon: 'fas fa-audio-description',
text: i18n.ts.ads,
to: '/admin/ads',
active: props.initialPage === 'ads',
active: currentPage?.route.name === 'ads',
}, {
icon: 'fas fa-exclamation-circle',
text: i18n.ts.abuseReports,
to: '/admin/abuses',
active: props.initialPage === 'abuses',
active: currentPage?.route.name === 'abuses',
}],
}, {
title: i18n.ts.settings,
@ -142,47 +138,47 @@ const menuDef = $computed(() => [{
icon: 'fas fa-cog',
text: i18n.ts.general,
to: '/admin/settings',
active: props.initialPage === 'settings',
active: currentPage?.route.name === 'settings',
}, {
icon: 'fas fa-envelope',
text: i18n.ts.emailServer,
to: '/admin/email-settings',
active: props.initialPage === 'email-settings',
active: currentPage?.route.name === 'email-settings',
}, {
icon: 'fas fa-cloud',
text: i18n.ts.objectStorage,
to: '/admin/object-storage',
active: props.initialPage === 'object-storage',
active: currentPage?.route.name === 'object-storage',
}, {
icon: 'fas fa-lock',
text: i18n.ts.security,
to: '/admin/security',
active: props.initialPage === 'security',
active: currentPage?.route.name === 'security',
}, {
icon: 'fas fa-globe',
text: i18n.ts.relays,
to: '/admin/relays',
active: props.initialPage === 'relays',
active: currentPage?.route.name === 'relays',
}, {
icon: 'fas fa-share-alt',
text: i18n.ts.integration,
to: '/admin/integrations',
active: props.initialPage === 'integrations',
active: currentPage?.route.name === 'integrations',
}, {
icon: 'fas fa-ban',
text: i18n.ts.instanceBlocking,
to: '/admin/instance-block',
active: props.initialPage === 'instance-block',
active: currentPage?.route.name === 'instance-block',
}, {
icon: 'fas fa-ghost',
text: i18n.ts.proxyAccount,
to: '/admin/proxy-account',
active: props.initialPage === 'proxy-account',
active: currentPage?.route.name === 'proxy-account',
}, {
icon: 'fas fa-cogs',
text: i18n.ts.other,
to: '/admin/other-settings',
active: props.initialPage === 'other-settings',
active: currentPage?.route.name === 'other-settings',
}],
}, {
title: i18n.ts.info,
@ -190,55 +186,12 @@ const menuDef = $computed(() => [{
icon: 'fas fa-database',
text: i18n.ts.database,
to: '/admin/database',
active: props.initialPage === 'database',
active: currentPage?.route.name === 'database',
}],
}]);
const component = $computed(() => {
if (props.initialPage == null) return null;
switch (props.initialPage) {
case 'overview': return defineAsyncComponent(() => import('./overview.vue'));
case 'users': return defineAsyncComponent(() => import('./users.vue'));
case 'emojis': return defineAsyncComponent(() => import('./emojis.vue'));
//case 'federation': return defineAsyncComponent(() => import('../federation.vue'));
case 'queue': return defineAsyncComponent(() => import('./queue.vue'));
case 'files': return defineAsyncComponent(() => import('./files.vue'));
case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));
case 'ads': return defineAsyncComponent(() => import('./ads.vue'));
case 'database': return defineAsyncComponent(() => import('./database.vue'));
case 'abuses': return defineAsyncComponent(() => import('./abuses.vue'));
case 'settings': return defineAsyncComponent(() => import('./settings.vue'));
case 'email-settings': return defineAsyncComponent(() => import('./email-settings.vue'));
case 'object-storage': return defineAsyncComponent(() => import('./object-storage.vue'));
case 'security': return defineAsyncComponent(() => import('./security.vue'));
case 'relays': return defineAsyncComponent(() => import('./relays.vue'));
case 'integrations': return defineAsyncComponent(() => import('./integrations.vue'));
case 'instance-block': return defineAsyncComponent(() => import('./instance-block.vue'));
case 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.vue'));
case 'other-settings': return defineAsyncComponent(() => import('./other-settings.vue'));
}
});
watch(component, () => {
pageProps = {};
nextTick(() => {
scroll(el, { top: 0 });
});
}, { immediate: true });
watch(() => props.initialPage, () => {
if (props.initialPage == null && !narrow) {
router.push('/admin/overview');
} else {
if (props.initialPage == null) {
INFO = indexInfo;
}
}
});
watch(narrow, () => {
if (props.initialPage == null && !narrow) {
if (currentPage?.route.name == null && !narrow) {
router.push('/admin/overview');
}
});
@ -247,7 +200,7 @@ onMounted(() => {
ro.observe(el);
narrow = el.offsetWidth < NARROW_THRESHOLD;
if (props.initialPage == null && !narrow) {
if (currentPage?.route.name == null && !narrow) {
router.push('/admin/overview');
}
});

144
packages/client/src/pages/settings/index.vue
View File

@ -4,15 +4,15 @@
<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 v-if="!narrow || currentPage?.route.name == 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>
<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
</div>
</div>
<div v-if="!(narrow && initialPage == null)" class="main">
<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
<div class="bkzroven">
<component :is="component" :key="initialPage" v-bind="pageProps"/>
<RouterView/>
</div>
</div>
</div>
@ -22,7 +22,7 @@
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue';
import { computed, defineAsyncComponent, inject, nextTick, onActivated, 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';
@ -34,11 +34,6 @@ import { useRouter } from '@/router';
import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
import * as os from '@/os';
const props = withDefaults(defineProps<{
initialPage?: string;
}>(), {
});
const indexInfo = {
title: i18n.ts.settings,
icon: 'fas fa-cog',
@ -50,12 +45,14 @@ const childInfo = ref(null);
const router = useRouter();
const narrow = ref(false);
let narrow = $ref(false);
const NARROW_THRESHOLD = 600;
let currentPage = $computed(() => router.currentRef.value.child);
const ro = new ResizeObserver((entries, observer) => {
if (entries.length === 0) return;
narrow.value = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
});
const menuDef = computed(() => [{
@ -64,42 +61,42 @@ const menuDef = computed(() => [{
icon: 'fas fa-user',
text: i18n.ts.profile,
to: '/settings/profile',
active: props.initialPage === 'profile',
active: currentPage?.route.name === 'profile',
}, {
icon: 'fas fa-lock-open',
text: i18n.ts.privacy,
to: '/settings/privacy',
active: props.initialPage === 'privacy',
active: currentPage?.route.name === 'privacy',
}, {
icon: 'fas fa-laugh',
text: i18n.ts.reaction,
to: '/settings/reaction',
active: props.initialPage === 'reaction',
active: currentPage?.route.name === 'reaction',
}, {
icon: 'fas fa-cloud',
text: i18n.ts.drive,
to: '/settings/drive',
active: props.initialPage === 'drive',
active: currentPage?.route.name === 'drive',
}, {
icon: 'fas fa-bell',
text: i18n.ts.notifications,
to: '/settings/notifications',
active: props.initialPage === 'notifications',
active: currentPage?.route.name === 'notifications',
}, {
icon: 'fas fa-envelope',
text: i18n.ts.email,
to: '/settings/email',
active: props.initialPage === 'email',
active: currentPage?.route.name === 'email',
}, {
icon: 'fas fa-share-alt',
text: i18n.ts.integration,
to: '/settings/integration',
active: props.initialPage === 'integration',
active: currentPage?.route.name === 'integration',
}, {
icon: 'fas fa-lock',
text: i18n.ts.security,
to: '/settings/security',
active: props.initialPage === 'security',
active: currentPage?.route.name === 'security',
}],
}, {
title: i18n.ts.clientSettings,
@ -107,32 +104,32 @@ const menuDef = computed(() => [{
icon: 'fas fa-cogs',
text: i18n.ts.general,
to: '/settings/general',
active: props.initialPage === 'general',
active: currentPage?.route.name === 'general',
}, {
icon: 'fas fa-palette',
text: i18n.ts.theme,
to: '/settings/theme',
active: props.initialPage === 'theme',
active: currentPage?.route.name === 'theme',
}, {
icon: 'fas fa-bars',
text: i18n.ts.navbar,
to: '/settings/navbar',
active: props.initialPage === 'navbar',
active: currentPage?.route.name === 'navbar',
}, {
icon: 'fas fa-bars-progress',
text: i18n.ts.statusbar,
to: '/settings/statusbars',
active: props.initialPage === 'statusbars',
to: '/settings/statusbar',
active: currentPage?.route.name === 'statusbar',
}, {
icon: 'fas fa-music',
text: i18n.ts.sounds,
to: '/settings/sounds',
active: props.initialPage === 'sounds',
active: currentPage?.route.name === 'sounds',
}, {
icon: 'fas fa-plug',
text: i18n.ts.plugins,
to: '/settings/plugin',
active: props.initialPage === 'plugin',
active: currentPage?.route.name === 'plugin',
}],
}, {
title: i18n.ts.otherSettings,
@ -140,37 +137,37 @@ const menuDef = computed(() => [{
icon: 'fas fa-boxes',
text: i18n.ts.importAndExport,
to: '/settings/import-export',
active: props.initialPage === 'import-export',
active: currentPage?.route.name === 'import-export',
}, {
icon: 'fas fa-volume-mute',
text: i18n.ts.instanceMute,
to: '/settings/instance-mute',
active: props.initialPage === 'instance-mute',
active: currentPage?.route.name === 'instance-mute',
}, {
icon: 'fas fa-ban',
text: i18n.ts.muteAndBlock,
to: '/settings/mute-block',
active: props.initialPage === 'mute-block',
active: currentPage?.route.name === 'mute-block',
}, {
icon: 'fas fa-comment-slash',
text: i18n.ts.wordMute,
to: '/settings/word-mute',
active: props.initialPage === 'word-mute',
active: currentPage?.route.name === 'word-mute',
}, {
icon: 'fas fa-key',
text: 'API',
to: '/settings/api',
active: props.initialPage === 'api',
active: currentPage?.route.name === 'api',
}, {
icon: 'fas fa-bolt',
text: 'Webhook',
to: '/settings/webhook',
active: props.initialPage === 'webhook',
active: currentPage?.route.name === 'webhook',
}, {
icon: 'fas fa-ellipsis-h',
text: i18n.ts.other,
to: '/settings/other',
active: props.initialPage === 'other',
active: currentPage?.route.name === 'other',
}],
}, {
items: [{
@ -198,77 +195,24 @@ const menuDef = computed(() => [{
}],
}]);
const pageProps = ref({});
const component = computed(() => {
if (props.initialPage == null) return null;
switch (props.initialPage) {
case 'accounts': return defineAsyncComponent(() => import('./accounts.vue'));
case 'profile': return defineAsyncComponent(() => import('./profile.vue'));
case 'privacy': return defineAsyncComponent(() => import('./privacy.vue'));
case 'reaction': return defineAsyncComponent(() => import('./reaction.vue'));
case 'drive': return defineAsyncComponent(() => import('./drive.vue'));
case 'notifications': return defineAsyncComponent(() => import('./notifications.vue'));
case 'mute-block': return defineAsyncComponent(() => import('./mute-block.vue'));
case 'word-mute': return defineAsyncComponent(() => import('./word-mute.vue'));
case 'instance-mute': return defineAsyncComponent(() => import('./instance-mute.vue'));
case 'integration': return defineAsyncComponent(() => import('./integration.vue'));
case 'security': return defineAsyncComponent(() => import('./security.vue'));
case '2fa': return defineAsyncComponent(() => import('./2fa.vue'));
case 'api': return defineAsyncComponent(() => import('./api.vue'));
case 'webhook': return defineAsyncComponent(() => import('./webhook.vue'));
case 'webhook/new': return defineAsyncComponent(() => import('./webhook.new.vue'));
case 'webhook/edit': return defineAsyncComponent(() => import('./webhook.edit.vue'));
case 'apps': return defineAsyncComponent(() => import('./apps.vue'));
case 'other': return defineAsyncComponent(() => import('./other.vue'));
case 'general': return defineAsyncComponent(() => import('./general.vue'));
case 'email': return defineAsyncComponent(() => import('./email.vue'));
case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
case 'navbar': return defineAsyncComponent(() => import('./navbar.vue'));
case 'statusbars': return defineAsyncComponent(() => import('./statusbars.vue'));
case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
case 'plugin': return defineAsyncComponent(() => import('./plugin.vue'));
case 'plugin/install': return defineAsyncComponent(() => import('./plugin.install.vue'));
case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
}
return null;
});
watch(component, () => {
pageProps.value = {};
nextTick(() => {
scroll(el.value, { top: 0 });
});
}, { immediate: true });
watch(() => props.initialPage, () => {
if (props.initialPage == null && !narrow.value) {
router.push('/settings/profile');
} else {
if (props.initialPage == null) {
INFO.value = indexInfo;
}
}
});
watch(narrow, () => {
if (props.initialPage == null && !narrow.value) {
router.push('/settings/profile');
}
watch($$(narrow), () => {
});
onMounted(() => {
ro.observe(el.value);
narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
if (props.initialPage == null && !narrow.value) {
router.push('/settings/profile');
narrow = el.value.offsetWidth < NARROW_THRESHOLD;
if (!narrow && currentPage?.route.name == null) {
router.replace('/settings/profile');
}
});
onActivated(() => {
narrow = el.value.offsetWidth < NARROW_THRESHOLD;
if (!narrow && currentPage?.route.name == null) {
router.replace('/settings/profile');
}
});

0
packages/client/src/pages/settings/statusbars.statusbar.vue → packages/client/src/pages/settings/statusbar.statusbar.vue
View File

2
packages/client/src/pages/settings/statusbars.vue → packages/client/src/pages/settings/statusbar.vue
View File

@ -12,7 +12,7 @@
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import XStatusbar from './statusbars.statusbar.vue';
import XStatusbar from './statusbar.statusbar.vue';
import FormRadios from '@/components/form/radios.vue';
import FormFolder from '@/components/form/folder.vue';
import FormButton from '@/components/ui/button.vue';