From 3098a75a0529b39bb5b1232c97947ff1282641bf Mon Sep 17 00:00:00 2001
From: qwqcode <qwqcode@gmail.com>
Date: Mon, 15 Apr 2024 15:05:42 +0800
Subject: [PATCH] perf(ui/version_check): beautify version upgrade notice

---
 ui/artalk/src/i18n/en.ts               |  2 +-
 ui/artalk/src/i18n/jp.ts               |  2 +-
 ui/artalk/src/i18n/zh-CN.ts            |  2 +-
 ui/artalk/src/i18n/zh-TW.ts            |  2 +-
 ui/artalk/src/plugins/version-check.ts | 14 +++++++-------
 ui/artalk/src/style/main.scss          | 21 +++++++++++++++++++++
 6 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/ui/artalk/src/i18n/en.ts b/ui/artalk/src/i18n/en.ts
index d448734a7..cb98113f3 100644
--- 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
index aeba9984d..5373155f4 100644
--- 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
index 579ea12e2..70dda4da9 100644
--- 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
index 8d590008d..2d4ecf4b3 100644
--- 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
index e4488e043..3eb090351 100644
--- 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
index f661217ee..370033f67 100644
--- 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;