feat(i18n): add message prompt for switching language

Author: XPoet

src/App.vue

@@ -12,16 +12,14 @@ import zhTW from 'element-plus/lib/locale/lang/zh-tw'
 import en from 'element-plus/lib/locale/lang/en'
 import setThemeMode from '@/utils/set-theme-mode'
 import { useStore } from '@/stores'
-import { getRegionByIP, setWindowTitle, throttle } from '@/utils'
+import { getLanguageByRegion, getRegionByIP, setWindowTitle, throttle } from '@/utils'
 import { ElementPlusSizeEnum, LanguageEnum } from '@/common/model'
 import MainContainer from '@/views/main-container/main-container.vue'
 import router from '@/router'
 
 const instance = getCurrentInstance()
 const store = useStore()
-
 const userSettings = computed(() => store.getters.getUserSettings).value
-
 const elementPlusSize = ref<ElementPlusSizeEnum>(ElementPlusSizeEnum.default)
 const elementPlusLocale = ref(zhCN) // zhCN | zhTW | en
 
@@ -61,22 +59,52 @@ const setLanguage = (language: LanguageEnum) => {
   setWindowTitle(router.currentRoute.value.meta.title as string)
 }
 
-const autoSetLanguage = () => {
+const initSetLanguage = () => {
+  // 初始化设置
+  setLanguage(userSettings.language)
+
+  // 根据 IP 自动设置
   getRegionByIP().then((region) => {
-    if (region === 'CN') {
-      store.dispatch('SET_USER_SETTINGS', {
-        language: LanguageEnum.zhCN
-      })
-    } else if (region === 'HK' || region === 'TW') {
-      store.dispatch('SET_USER_SETTINGS', {
-        language: LanguageEnum.zhTW
+    const language = getLanguageByRegion(region)
+
+    if (language !== userSettings.language) {
+      const confirmTxt = instance?.proxy?.$t(`confirm`, language)
+      const cancelTxt = instance?.proxy?.$t(`cancel`, language)
+      const msgTxt = instance?.proxy?.$t(`toggle-language-msg`, language, {
+        region: instance?.proxy?.$t(`region.${region}`, language),
+        language: instance?.proxy?.$t(`language.${language}`, language)
       })
-    } else {
-      store.dispatch('SET_USER_SETTINGS', {
-        language: LanguageEnum.en
+
+      const msgInstance = ElMessage({
+        customClass: 'toggle-language-message',
+        duration: 0,
+        offset: 20,
+        message: `<div class="content-box">
+                    <span class="msg">${msgTxt}</span>
+                    <spna class="btn-box">
+                      <span class="confirm btn">${confirmTxt}</span>
+                      <span class="cancel btn">${cancelTxt}</span>
+                    </spna>
+                  </div>`,
+        dangerouslyUseHTMLString: true
       })
+
+      document
+        .querySelector('.toggle-language-message .content-box .confirm')
+        ?.addEventListener('click', () => {
+          setLanguage(language)
+          store.dispatch('SET_USER_SETTINGS', {
+            language
+          })
+          msgInstance.close()
+        })
+
+      document
+        .querySelector('.toggle-language-message .content-box .cancel')
+        ?.addEventListener('click', () => {
+          msgInstance.close()
+        })
     }
-    setLanguage(userSettings.language)
   })
 }
 
@@ -90,7 +118,7 @@ const init = () => {
   )
 
   setThemeMode()
-  autoSetLanguage()
+  initSetLanguage()
 }
 
 watch(

src/locales/en.json

@@ -6,6 +6,7 @@
   "delete": "Delete",
   "reset": "Reset",
   "confirm": "Confirm",
+  "cancel": "Cancel",
   "author": "Author",
   "document": "Document",
   "shortcut_key": "Shortcut key",
@@ -217,5 +218,20 @@
     "text_2": "We suggest adding our website to your browser bookmarks for easy future access.",
     "text_3": "If PicX is helpful to you, please consider donating to the author to support open source development.",
     "text_4": "Disclaimer: Do not upload images that violate the laws in your local jurisdiction. The author is not responsible for any consequences arising from such actions."
-  }
+  },
+  "region": {
+    "CN": "Mainland China",
+    "HK": "Hong Kong, China",
+    "MO": "Macao, China",
+    "TW": "Taiwan, China",
+    "SG": "Singapore",
+    "JP": "Japan",
+    "US": "United States"
+  },
+  "language": {
+    "zh-CN": "Simplified Chinese",
+    "zh-TW": "Traditional Chinese",
+    "en": "English"
+  },
+  "toggle-language-msg": "We detected that your IP is located in {region}. Do you want to switch to {language}?"
 }

src/locales/zh-CN.json

@@ -6,6 +6,7 @@
   "delete": "删除",
   "reset": "重置",
   "confirm": "确认",
+  "cancel": "取消",
   "author": "作者",
   "document": "文档",
   "shortcut_key": "快捷键",
@@ -219,5 +220,20 @@
     "text_2": "建议将本站添加到浏览器收藏夹，方便下次使用。",
     "text_3": "如果 PicX 对你有帮助，欢迎赞赏作者，支持开源。",
     "text_4": "郑重声明：请勿使用 PicX 上传违反你当地法律的图片，所造成的一切后果与作者无关。"
-  }
+  },
+  "region": {
+    "CN": "中国大陆",
+    "HK": "中国香港",
+    "MO": "中国澳门",
+    "TW": "中国台湾",
+    "SG": "新加坡",
+    "JP": "日本",
+    "US": "美国"
+  },
+  "language": {
+    "zh-CN": "中文简体",
+    "zh-TW": "中文繁体",
+    "en": "英文"
+  },
+  "toggle-language-msg": "检测到你的 IP 所属地为{region}，是否切换{language}？"
 }

src/locales/zh-TW.json

@@ -6,6 +6,7 @@
   "delete": "刪除",
   "reset": "重置",
   "confirm": "確認",
+  "cancel": "取消",
   "author": "作者",
   "document": "文檔",
   "shortcut_key": "快捷鍵",
@@ -219,5 +220,20 @@
     "text_2": "建議將本站添加到瀏覽器收藏夾，方便下次使用。",
     "text_3": "如果 PicX 對你有幫助，歡迎贊賞作者，支持開源。",
     "text_4": "鄭重聲明：請勿使用 PicX 上傳違反你當地法律的圖片，所造成的一切後果與作者無關。"
-  }
+  },
+  "region": {
+    "CN": "中國大陸",
+    "HK": "中國香港",
+    "MO": "中国澳门",
+    "TW": "中國臺灣",
+    "SG": "新加坡",
+    "JP": "日本",
+    "US": "美國"
+  },
+  "language": {
+    "zh-CN": "中文簡體",
+    "zh-TW": "中文繁體",
+    "en": "英文"
+  },
+  "toggle-language-msg": "檢測到你的 IP 所屬地為{region}，是否切換{language}？"
 }

src/styles/base.styl

@@ -194,3 +194,58 @@ li {
 }
 
 
+.toggle-language-message {
+  box-sizing border-box
+  background var(--background-color)
+  border-radius 3rem
+  box-shadow var(--el-box-shadow-light)
+
+  .el-icon {
+    display none
+  }
+
+  .content-box {
+    line-height 2
+
+    .btn-box {
+      margin-left 6rem
+    }
+
+    .btn {
+      margin-left 2rem
+      padding 2rem 4rem
+      font-size 12rem
+      border-style solid
+      border-width 1rem
+      border-radius 4rem
+      cursor pointer
+    }
+
+    .confirm {
+      color var(--el-color-primary)
+      background var(--el-color-primary-light-9)
+      border-color var(--el-color-primary-light-5)
+
+      &:hover {
+        color var(--el-color-white)
+        background var(--el-color-primary)
+        border-color var(--el-color-primary)
+      }
+    }
+
+    .cancel {
+      color var(--el-color-info)
+      background var(--el-color-info-light-9)
+      border-color var(--el-color-info-light-5)
+
+      &:hover {
+        color var(--el-color-white)
+        background var(--el-color-info)
+        border-color var(--el-color-info)
+      }
+    }
+  }
+}
+
+
+

src/utils/system.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { LanguageEnum } from '@/common/model'
 
 /**
  * 判断系统是否是黑暗模式
@@ -47,3 +48,17 @@ export const getRegionByIP = async (): Promise<'CN' | 'HK' | 'TW' | 'SG' | 'US'>
     return Promise.resolve('CN')
   }
 }
+
+/**
+ * 根据地区编码获取语言枚举
+ * @param region
+ */
+export const getLanguageByRegion = (region: string): LanguageEnum => {
+  if (region === 'CN') {
+    return LanguageEnum.zhCN
+  }
+  if (region === 'HK' || region === 'TW' || region === 'MO') {
+    return LanguageEnum.zhTW
+  }
+  return LanguageEnum.en
+}