diff --git a/packages/frontend/src/pages/install-extentions.vue b/packages/frontend/src/pages/install-extentions.vue index 9674b522a..811769984 100644 --- a/packages/frontend/src/pages/install-extentions.vue +++ b/packages/frontend/src/pages/install-extentions.vue @@ -94,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { ref, computed, onMounted, nextTick } from 'vue'; +import { ref, computed, onActivated, onDeactivated, nextTick } from 'vue'; import MkLoading from '@/components/global/MkLoading.vue'; import MkButton from '@/components/MkButton.vue'; import FormSection from '@/components/form/section.vue'; @@ -120,9 +120,8 @@ const errorKV = ref<{ description: '', }); -const urlParams = new URLSearchParams(window.location.search); -const url = urlParams.get('url'); -const hash = urlParams.get('hash'); +const url = ref<string | null>(null); +const hash = ref<string | null>(null); const data = ref<{ type: 'plugin' | 'theme'; @@ -152,7 +151,7 @@ function goToMisskey(): void { } async function fetch() { - if (!url || !hash) { + if (!url.value || !hash.value) { errorKV.value = { title: i18n.ts._externalResourceInstaller._errors._invalidParams.title, description: i18n.ts._externalResourceInstaller._errors._invalidParams.description, @@ -161,8 +160,8 @@ async function fetch() { return; } const res = await os.api('fetch-external-resources', { - url, - hash, + url: url.value, + hash: hash.value, }).catch((err) => { switch (err.id) { case 'bb774091-7a15-4a70-9dc5-6ac8cf125856': @@ -240,7 +239,7 @@ async function fetch() { description: i18n.ts._theme.alreadyInstalled, }; break; - + default: errorKV.value = { title: i18n.ts._externalResourceInstaller._errors._themeParseFailed.title, @@ -297,10 +296,17 @@ async function install() { } } -onMounted(() => { +onActivated(() => { + const urlParams = new URLSearchParams(window.location.search); + url.value = urlParams.get('url'); + hash.value = urlParams.get('hash'); fetch(); }); +onDeactivated(() => { + uiPhase.value = 'fetching'; +}); + const headerActions = computed(() => []); const headerTabs = computed(() => []);