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)
### Improvements
- ページロードエラーページにリロードボタンを追加
### Bugfixes

View File

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

View File

@ -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 {