From 19d531922df3d1dda6d3e887a72e6d39798408a7 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sat, 2 Oct 2021 16:36:25 +0900 Subject: [PATCH] =?UTF-8?q?enhance:=20=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=AD?= =?UTF-8?q?=E3=83=BC=E3=83=89=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=81=AB=E3=83=AA=E3=83=AD=E3=83=BC=E3=83=89=E3=83=9C?= =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=20(#7835)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip * modify page load error page * add changelog * サーバーが死んでるエラーを追加 * add MkLoading --- CHANGELOG.md | 1 + locales/ja-JP.yml | 2 ++ src/client/pages/_error_.vue | 38 +++++++++++++++++++++++++++++++++--- 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index db271cdd41..8b6c357c4f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## 12.x.x (unreleased) ### Improvements +- ページロードエラーページにリロードボタンを追加 ### Bugfixes diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index f5f859b9ff..06b10ba278 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -81,6 +81,8 @@ somethingHappened: "問題が発生しました" retry: "再試行" pageLoadError: "ページの読み込みに失敗しました。" pageLoadErrorDescription: "これは通常、ネットワークまたはブラウザキャッシュが原因です。キャッシュをクリアするか、しばらく待ってから再度試してください。" +serverIsDead: "サーバーの応答がありません。しばらく待ってから再度試してください。" +youShouldUpgradeClient: "このページを表示するためには、リロードして新しいバージョンのクライアントをご利用ください。" enterListName: "リスト名を入力" privacy: "プライバシー" makeFollowManuallyApprove: "フォローを承認制にする" diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue index 1d67d9b14d..d1cefad8dd 100644 --- a/src/client/pages/_error_.vue +++ b/src/client/pages/_error_.vue @@ -1,9 +1,16 @@ <template> +<MkLoading v-if="!loaded" /> <transition :name="$store.state.animation ? 'zoom' : ''" appear> - <div class="mjndxjch"> + <div class="mjndxjch" v-show="loaded"> <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> <p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p> - <p>{{ $ts.pageLoadErrorDescription }}</p> + <p v-if="version === meta.version">{{ $ts.pageLoadErrorDescription }}</p> + <p v-else-if="serverIsDead">{{ $ts.serverIsDead }}</p> + <template v-else> + <p>{{ $ts.newVersionOfClientAvailable }}</p> + <p>{{ $ts.youShouldUpgradeClient }}</p> + <MkButton @click="reload" class="button primary">{{ $ts.reload }}</MkButton> + </template> <p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p> <p v-if="error" class="error">ERROR: {{ error }}</p> </div> @@ -14,6 +21,9 @@ import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; import * as symbols from '@client/symbols'; +import { version } from '@client/config'; +import * as os from '@client/os'; +import { unisonReload } from '@client/scripts/unison-reload'; export default defineComponent({ components: { @@ -30,8 +40,30 @@ export default defineComponent({ title: this.$ts.error, icon: 'fas fa-exclamation-triangle' }, + loaded: false, + serverIsDead: false, + meta: {} as any, + version, }; }, + created() { + os.api('meta', { + detail: false + }).then(meta => { + this.loaded = true; + this.serverIsDead = false; + this.meta = meta; + localStorage.setItem('v', meta.version); + }, () => { + this.loaded = true; + this.serverIsDead = true; + }); + }, + methods: { + reload() { + unisonReload(); + }, + }, }); </script> @@ -45,7 +77,7 @@ export default defineComponent({ } > .button { - margin: 0 auto; + margin: 8px auto; } > img {