enhance: ページロードエラーページにリロードボタンを追加 (#7835)

* wip

* modify page load error page

* add changelog

* サーバーが死んでるエラーを追加

* add MkLoading
This commit is contained in:
tamaina 2021-10-02 16:36:25 +09:00 committed by GitHub
parent 9109ae02a7
commit 19d531922d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 3 deletions

View File

@ -2,6 +2,7 @@
## 12.x.x (unreleased) ## 12.x.x (unreleased)
### Improvements ### Improvements
- ページロードエラーページにリロードボタンを追加
### Bugfixes ### Bugfixes

View File

@ -81,6 +81,8 @@ somethingHappened: "問題が発生しました"
retry: "再試行" retry: "再試行"
pageLoadError: "ページの読み込みに失敗しました。" pageLoadError: "ページの読み込みに失敗しました。"
pageLoadErrorDescription: "これは通常、ネットワークまたはブラウザキャッシュが原因です。キャッシュをクリアするか、しばらく待ってから再度試してください。" pageLoadErrorDescription: "これは通常、ネットワークまたはブラウザキャッシュが原因です。キャッシュをクリアするか、しばらく待ってから再度試してください。"
serverIsDead: "サーバーの応答がありません。しばらく待ってから再度試してください。"
youShouldUpgradeClient: "このページを表示するためには、リロードして新しいバージョンのクライアントをご利用ください。"
enterListName: "リスト名を入力" enterListName: "リスト名を入力"
privacy: "プライバシー" privacy: "プライバシー"
makeFollowManuallyApprove: "フォローを承認制にする" makeFollowManuallyApprove: "フォローを承認制にする"

View File

@ -1,9 +1,16 @@
<template> <template>
<MkLoading v-if="!loaded" />
<transition :name="$store.state.animation ? 'zoom' : ''" appear> <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"/> <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><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><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
<p v-if="error" class="error">ERROR: {{ error }}</p> <p v-if="error" class="error">ERROR: {{ error }}</p>
</div> </div>
@ -14,6 +21,9 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import MkButton from '@client/components/ui/button.vue'; import MkButton from '@client/components/ui/button.vue';
import * as symbols from '@client/symbols'; 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({ export default defineComponent({
components: { components: {
@ -30,8 +40,30 @@ export default defineComponent({
title: this.$ts.error, title: this.$ts.error,
icon: 'fas fa-exclamation-triangle' 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> </script>
@ -45,7 +77,7 @@ export default defineComponent({
} }
> .button { > .button {
margin: 0 auto; margin: 8px auto;
} }
> img { > img {