refactor(frontend): ページ内でdocument.titleを直接操作させない, タイポ修正 など (taiyme#288) (#14778)
Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com>
This commit is contained in:
parent
2250e521e4
commit
58419e1621
|
@ -5,10 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header>
|
||||
<MkPageHeader/>
|
||||
</template>
|
||||
<MKSpacer v-if="!instance.disableRegistration || !($i && ($i.isAdmin || $i.policies.canInvite))" :contentMax="1200">
|
||||
<template #header><MkPageHeader/></template>
|
||||
<MkSpacer v-if="!instance.disableRegistration || !($i && ($i.isAdmin || $i.policies.canInvite))" :contentMax="1200">
|
||||
<div :class="$style.root">
|
||||
<img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
|
||||
<div :class="$style.text">
|
||||
|
@ -16,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
{{ i18n.ts.nothing }}
|
||||
</div>
|
||||
</div>
|
||||
</MKSpacer>
|
||||
</MkSpacer>
|
||||
<MkSpacer v-else :contentMax="800">
|
||||
<div class="_gaps_m" style="text-align: center;">
|
||||
<div v-if="resetCycle && inviteLimit">{{ i18n.tsx.inviteLimitResetCycle({ time: resetCycle, limit: inviteLimit }) }}</div>
|
||||
|
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MKSpacer v-if="!(typeof error === 'undefined')" :contentMax="1200">
|
||||
<MkSpacer v-if="error != null" :contentMax="1200">
|
||||
<div :class="$style.root">
|
||||
<img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
|
||||
<p :class="$style.text">
|
||||
|
@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
{{ i18n.ts.nothing }}
|
||||
</p>
|
||||
</div>
|
||||
</MKSpacer>
|
||||
</MkSpacer>
|
||||
<MkSpacer v-else-if="list" :contentMax="700" :class="$style.main">
|
||||
<div v-if="list" class="members _margin">
|
||||
<div :class="$style.member_text">{{ i18n.ts.members }}</div>
|
||||
|
@ -50,7 +50,7 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const list = ref<Misskey.entities.UserList | null>(null);
|
||||
const error = ref();
|
||||
const error = ref<unknown | null>(null);
|
||||
const users = ref<Misskey.entities.UserDetailed[]>([]);
|
||||
|
||||
function fetchList(): void {
|
||||
|
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
|
||||
<MKSpacer v-if="!(typeof error === 'undefined')" :contentMax="1200">
|
||||
<MkSpacer v-if="error != null" :contentMax="1200">
|
||||
<div :class="$style.root">
|
||||
<img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
|
||||
<p :class="$style.text">
|
||||
|
@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</MKSpacer>
|
||||
</MkSpacer>
|
||||
<MkSpacer v-else-if="tab === 'users'" :contentMax="1200">
|
||||
<div class="_gaps_s">
|
||||
<div v-if="role">{{ role.description }}</div>
|
||||
|
@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</MkSpacer>
|
||||
<MkSpacer v-else-if="tab === 'timeline'" :contentMax="700">
|
||||
<MkTimeline v-if="visible" ref="timeline" src="role" :role="props.role"/>
|
||||
<MkTimeline v-if="visible" ref="timeline" src="role" :role="props.roleId"/>
|
||||
<div v-else-if="!visible" class="_fullinfo">
|
||||
<img :src="infoImageUrl" class="_ghost"/>
|
||||
<div>{{ i18n.ts.nothing }}</div>
|
||||
|
@ -47,23 +47,24 @@ import { instanceName } from '@@/js/config.js';
|
|||
import { serverErrorImageUrl, infoImageUrl } from '@/instance.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
role: string;
|
||||
roleId: string;
|
||||
initialTab?: string;
|
||||
}>(), {
|
||||
initialTab: 'users',
|
||||
});
|
||||
|
||||
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
|
||||
const tab = ref(props.initialTab);
|
||||
const role = ref<Misskey.entities.Role>();
|
||||
const error = ref();
|
||||
const role = ref<Misskey.entities.Role | null>(null);
|
||||
const error = ref<string | null>(null);
|
||||
const visible = ref(false);
|
||||
|
||||
watch(() => props.role, () => {
|
||||
watch(() => props.roleId, () => {
|
||||
misskeyApi('roles/show', {
|
||||
roleId: props.role,
|
||||
roleId: props.roleId,
|
||||
}).then(res => {
|
||||
role.value = res;
|
||||
document.title = `${role.value.name} | ${instanceName}`;
|
||||
error.value = null;
|
||||
visible.value = res.isExplorable && res.isPublic;
|
||||
}).catch((err) => {
|
||||
if (err.code === 'NO_SUCH_ROLE') {
|
||||
|
@ -71,7 +72,6 @@ watch(() => props.role, () => {
|
|||
} else {
|
||||
error.value = i18n.ts.somethingHappened;
|
||||
}
|
||||
document.title = `${error.value} | ${instanceName}`;
|
||||
});
|
||||
}, { immediate: true });
|
||||
|
||||
|
@ -79,7 +79,7 @@ const users = computed(() => ({
|
|||
endpoint: 'roles/users' as const,
|
||||
limit: 30,
|
||||
params: {
|
||||
roleId: props.role,
|
||||
roleId: props.roleId,
|
||||
},
|
||||
}));
|
||||
|
||||
|
@ -94,7 +94,7 @@ const headerTabs = computed(() => [{
|
|||
}]);
|
||||
|
||||
definePageMetadata(() => ({
|
||||
title: role.value ? role.value.name : i18n.ts.role,
|
||||
title: role.value ? role.value.name : (error.value ?? i18n.ts.role),
|
||||
icon: 'ti ti-badge',
|
||||
}));
|
||||
</script>
|
||||
|
|
|
@ -217,7 +217,7 @@ const routes: RouteDef[] = [{
|
|||
component: page(() => import('@/pages/theme-editor.vue')),
|
||||
loginRequired: true,
|
||||
}, {
|
||||
path: '/roles/:role',
|
||||
path: '/roles/:roleId',
|
||||
component: page(() => import('@/pages/role.vue')),
|
||||
}, {
|
||||
path: '/user-tags/:tag',
|
||||
|
|
Loading…
Reference in New Issue