perf(ui/version_check): beautify version upgrade notice

ArtalkJS · Apr 15, 2024 · 3098a75 · 3098a75
1 parent d71ac6d
commit 3098a75
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 11 deletions.
diff --git a/ui/artalk/src/i18n/en.ts b/ui/artalk/src/i18n/en.ts
@@ -79,7 +79,7 @@ const en = {
   deleteFail: 'Delete Failed',
   reqGot: 'Request got',
   reqAborted: 'Request timed out or terminated unexpectedly',
-  updateMsg: 'Please update Artalk {name} to get the full experience',
+  updateMsg: 'Please update Artalk {name} to get the best experience!',
   currentVersion: 'Current Version',
   ignore: 'Ignore',
   open: 'Open',

diff --git a/ui/artalk/src/i18n/jp.ts b/ui/artalk/src/i18n/jp.ts
@@ -83,7 +83,7 @@ export default defineLocaleExternal(
     deleteFail: '削除に失敗しました',
     reqGot: 'リクエストが受信されました',
     reqAborted: 'リクエストがタイムアウトまたは予期せず中止されました',
-    updateMsg: '完全な体験を得るにはArtalk {name}を更新してください',
+    updateMsg: 'Artalk {name} を更新して、より良い体験をしてください！',
     currentVersion: '現在のバージョン',
     ignore: '無視',
     open: '開く',

diff --git a/ui/artalk/src/i18n/zh-CN.ts b/ui/artalk/src/i18n/zh-CN.ts
@@ -81,7 +81,7 @@ const zhCN: I18n = {
   deleteFail: '删除失败',
   reqGot: '请求响应',
   reqAborted: '请求超时或意外终止',
-  updateMsg: '请更新 Artalk {name} 以获得完整体验',
+  updateMsg: '请更新 Artalk {name} 以获得更好的体验！',
   currentVersion: '当前版本',
   ignore: '忽略',
   open: '打开',

diff --git a/ui/artalk/src/i18n/zh-TW.ts b/ui/artalk/src/i18n/zh-TW.ts
@@ -81,7 +81,7 @@ export default defineLocaleExternal('zh-TW', {
   deleteFail: '刪除失敗',
   reqGot: '請求已接收',
   reqAborted: '請求超時或意外終止',
-  updateMsg: '請更新 Artalk {name} 以獲得完整體驗',
+  updateMsg: '請更新 Artalk {name} 以獲得更好的體驗！',
   currentVersion: '當前版本',
   ignore: '忽略',
   open: '打開',

diff --git a/ui/artalk/src/plugins/version-check.ts b/ui/artalk/src/plugins/version-check.ts
@@ -21,17 +21,17 @@ function versionCheck(list: List, feVer: string, beVer: string) {
   if (sameVer) return
 
   const errEl = Utils.createElement(
-    `<div>${$t('updateMsg', { name: comp < 0 ? $t('frontend') : $t('backend') })}` +
-      `<br/><br/><span style="color: var(--at-color-meta);">` +
+    `<div class="atk-version-check-notice">${$t('updateMsg', {
+      name: comp < 0 ? $t('frontend') : $t('backend'),
+    })}<span class="atk-info">` +
       `${$t('currentVersion')}: ${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` +
-      `</span><br/><br/></div>`,
+      `</span></div>`,
   )
-  const ignoreBtn = Utils.createElement(`<span style="cursor:pointer">${$t('ignore')}</span>`)
+  const ignoreBtn = Utils.createElement(`<span class="atk-ignore-btn">${$t('ignore')}</span>`)
   ignoreBtn.onclick = () => {
-    Ui.setError(list.$el.parentElement!, null)
+    errEl.remove()
     IgnoreVersionCheck = true
-    list.ctx.fetch({ offset: 0 })
   }
   errEl.append(ignoreBtn)
-  Ui.setError(list.$el.parentElement!, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
+  list.$el.parentElement!.prepend(errEl)
 }
diff --git a/ui/artalk/src/style/main.scss b/ui/artalk/src/style/main.scss
@@ -368,6 +368,27 @@
   }
 }
 
+.atk-version-check-notice {
+  background: var(--at-color-bg-grey);
+  border-radius: $block-radius;
+  padding: 10px 20px;
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  .atk-info {
+    color: var(--at-color-meta);
+  }
+
+  .atk-ignore-btn {
+    cursor: pointer;
+    float: right;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
 .atk-layer-dialog-wrap {
   $formInputHeight: 30px;
   @extend .atk-full-layer;