✨ Feature: add i18n for en

src/main.ts

@@ -10,10 +10,14 @@ import mainMixin from './renderer/utils/mainMixin'
 import bus from '@/utils/bus'
 import { initTalkingData } from './renderer/utils/analytics'
 import db from './renderer/utils/db'
-import { T } from '#/i18n/index'
+import { T, i18n } from '#/i18n/index'
+import { handleURLParams } from '@/utils/beforeOpen'
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 
+// do here before vue init
+handleURLParams()
+
 Vue.config.productionTip = false
 Vue.prototype.$builtInPicBed = [
   'smms',
@@ -28,6 +32,7 @@ Vue.prototype.$$db = db
 Vue.prototype.$http = axios
 Vue.prototype.$bus = bus
 Vue.prototype.$T = T
+Vue.prototype.$i18n = i18n
 
 Vue.use(ElementUI)
 Vue.use(VueLazyLoad)

src/main/apis/app/window/windowList.ts

@@ -10,9 +10,19 @@ import { CREATE_APP_MENU } from '@core/bus/constants'
 import db from '~/main/apis/core/datastore'
 import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
 import { app } from 'electron'
+import { i18n } from '~/universal/i18n'
+import { URLSearchParams } from 'url'
 
 const windowList = new Map<IWindowList, IWindowListItem>()
 
+const handleWindowParams = (windowURL: string) => {
+  const [baseURL, hash = ''] = windowURL.split('#')
+  const search = new URLSearchParams()
+  const lang = i18n.getLanguage()
+  search.append('lang', lang)
+  return `${baseURL}?${search.toString()}#${hash}`
+}
+
 windowList.set(IWindowList.TRAY_WINDOW, {
   isValid: process.platform !== 'linux',
   multiple: false,
@@ -35,7 +45,7 @@ windowList.set(IWindowList.TRAY_WINDOW, {
     }
   },
   callback (window) {
-    window.loadURL(TRAY_WINDOW_URL)
+    window.loadURL(handleWindowParams(TRAY_WINDOW_URL))
     window.on('blur', () => {
       window.hide()
     })
@@ -76,7 +86,7 @@ windowList.set(IWindowList.SETTING_WINDOW, {
     return options
   },
   callback (window, windowManager) {
-    window.loadURL(SETTING_WINDOW_URL)
+    window.loadURL(handleWindowParams(SETTING_WINDOW_URL))
     window.on('closed', () => {
       bus.emit(TOGGLE_SHORTKEY_MODIFIED_MODE, false)
       if (process.platform === 'linux') {
@@ -118,7 +128,7 @@ windowList.set(IWindowList.MINI_WINDOW, {
     return obj
   },
   callback (window) {
-    window.loadURL(MINI_WINDOW_URL)
+    window.loadURL(handleWindowParams(MINI_WINDOW_URL))
   }
 })
 
@@ -149,7 +159,7 @@ windowList.set(IWindowList.RENAME_WINDOW, {
     return options
   },
   async callback (window, windowManager) {
-    window.loadURL(RENAME_WINDOW_URL)
+    window.loadURL(handleWindowParams(RENAME_WINDOW_URL))
     const currentWindow = windowManager.getAvailableWindow()
     if (currentWindow && currentWindow.isVisible()) {
     // bounds: { x: 821, y: 75, width: 800, height: 450 }

src/main/events/ipcList.ts

@@ -27,7 +27,8 @@ import {
   OPEN_URL,
   RELOAD_APP,
   SHOW_PLUGIN_PAGE_MENU,
-  SET_MINI_WINDOW_POS
+  SET_MINI_WINDOW_POS,
+  CHANGE_LANGUAGE
 } from '#/events/constants'
 import {
   uploadClipboardFiles,
@@ -37,7 +38,7 @@ import picgoCoreIPC from './picgoCoreIPC'
 import { handleCopyUrl } from '~/main/utils/common'
 import { buildMainPageMenu, buildMiniPageMenu, buildPluginPageMenu, buildUploadPageMenu } from './remotes/menu'
 import path from 'path'
-import { T } from '~/universal/i18n'
+import { i18n, T } from '~/universal/i18n'
 
 const STORE_PATH = app.getPath('userData')
 
@@ -223,6 +224,10 @@ export default {
       const window = BrowserWindow.getFocusedWindow()
       window?.setBounds(pos)
     })
+    ipcMain.on(CHANGE_LANGUAGE, (evt: IpcMainEvent, lang: string) => {
+      lang = lang || 'zh-CN'
+      i18n.setLanguage(lang)
+    })
   },
   dispose () {}
 }

src/main/events/picgoCoreIPC.ts

@@ -81,9 +81,11 @@ const getPluginList = (): IPicGoPlugin[] => {
     const pluginPKG = requireFunc(path.join(pluginPath, 'package.json'))
     const uploaderName = plugin.uploader || ''
     const transformerName = plugin.transformer || ''
-    let menu: IGuiMenuItem[] = []
+    let menu: Omit<IGuiMenuItem, 'handle'>[] = []
     if (plugin.guiMenu) {
-      menu = plugin.guiMenu(picgo)
+      menu = plugin.guiMenu(picgo).map(item => ({
+        label: item.label
+      }))
     }
     let gui = false
     if (pluginPKG.keywords && pluginPKG.keywords.length > 0) {
@@ -127,6 +129,8 @@ const getPluginList = (): IPicGoPlugin[] => {
 const handleGetPluginList = () => {
   ipcMain.on('getPluginList', (event: IpcMainEvent) => {
     const list = getPluginList()
+    // here can just send JS Object not function
+    // or will cause [Failed to serialize arguments] error
     event.sender.send('pluginList', list)
   })
 }

src/main/lifeCycle/index.ts

@@ -35,6 +35,7 @@ import { privacyManager } from '~/main/utils/privacyManager'
 import logger from 'apis/core/picgo/logger'
 import picgo from 'apis/core/picgo'
 import fixPath from './fixPath'
+import { initI18n } from '~/main/utils/handleI18n'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
@@ -61,6 +62,7 @@ class LifeCycle {
     // fix the $PATH in macOS & linux
     fixPath()
     beforeOpen()
+    initI18n()
     ipcList.listen()
     busEventList.listen()
     updateShortKeyFromVersion212(db, db.get('settings.shortKey'))

src/main/utils/handleI18n.ts

@@ -0,0 +1,6 @@
+import db from '~/main/apis/core/datastore'
+import { i18n } from '#/i18n'
+export const initI18n = () => {
+  const currentLanguage = db.get('settings.language') || 'zh-CN'
+  i18n.setLanguage(currentLanguage)
+}

src/renderer/pages/PicGoSetting.vue

@@ -11,6 +11,24 @@
           label-width="10"
           size="small"
         >
+          <el-form-item
+            :label="$T('SETTINGS_CHOOSE_LANGUAGE')"
+          >
+            <!-- <el-button type="primary" round size="mini" @click="openFile('data.json')">{{ $T('SETTINGS_CLICK_TO_OPEN') }}</el-button> -->
+            <el-select
+              v-model="currentLanguage"
+              size="mini"
+              style="width: 100%"
+              @change="handleLanguageChange"
+              :placeholder="$T('SETTINGS_CHOOSE_LANGUAGE')">
+              <el-option
+                v-for="item in languageList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item
             :label="$T('SETTINGS_OPEN_CONFIG_FILE')"
           >
@@ -350,12 +368,12 @@
 import keyDetect from '@/utils/key-binding'
 import pkg from 'root/package.json'
 import { IConfig } from 'picgo'
-import { PICGO_OPEN_FILE, OPEN_URL } from '#/events/constants'
+import { PICGO_OPEN_FILE, OPEN_URL, CHANGE_LANGUAGE } from '#/events/constants'
 import {
   ipcRenderer
 } from 'electron'
 import { Component, Vue } from 'vue-property-decorator'
-import { T } from '~/universal/i18n'
+import { T, languageList } from '~/universal/i18n'
 // import db from '#/datastore'
 const releaseUrl = 'https://api.github.com/repos/Molunerfinn/PicGo/releases/latest'
 const releaseUrlBackup = 'https://cdn.jsdelivr.net/gh/Molunerfinn/PicGo@latest/package.json'
@@ -383,9 +401,16 @@ export default class extends Vue {
     logLevel: ['all'],
     autoCopyUrl: true,
     checkBetaUpdate: true,
-    useBuiltinClipboard: false
+    useBuiltinClipboard: false,
+    language: 'zh-CN'
   }
 
+  languageList = languageList.map(item => ({
+    label: item,
+    value: item
+  }))
+
+  currentLanguage = 'zh-CN'
   picBed: IPicBedType[] = []
   logFileVisible = false
   keyBindingVisible = false
@@ -459,7 +484,8 @@ export default class extends Vue {
       this.form.autoCopyUrl = settings.autoCopy === undefined ? true : settings.autoCopy
       this.form.checkBetaUpdate = settings.checkBetaUpdate === undefined ? true : settings.checkBetaUpdate
       this.form.useBuiltinClipboard = settings.useBuiltinClipboard === undefined ? false : settings.useBuiltinClipboard
-
+      this.form.language = settings.language ?? 'zh-CN'
+      this.currentLanguage = settings.language ?? 'zh-CN'
       this.customLink.value = settings.customLink || '$url'
       this.shortKey.upload = settings.shortKey.upload
       this.proxy = picBed.proxy || ''
@@ -725,6 +751,15 @@ export default class extends Vue {
     return false
   }
 
+  handleLanguageChange (val: string) {
+    this.$i18n.setLanguage(val)
+    this.forceUpdate()
+    ipcRenderer.send(CHANGE_LANGUAGE, val)
+    this.saveConfig({
+      'settings.language': val
+    })
+  }
+
   goConfigPage () {
     ipcRenderer.send(OPEN_URL, 'https://picgo.github.io/PicGo-Doc/zh/guide/config.html#picgo设置')
   }

src/renderer/utils/beforeOpen.ts

@@ -0,0 +1,10 @@
+import { i18n } from '~/universal/i18n'
+
+export const handleURLParams = () => {
+  const url = new URL(location.href)
+  const search = new URLSearchParams(url.search)
+  if (search.has('lang')) {
+    const lang = search.get('lang') || 'zh-CN'
+    i18n.setLanguage(lang)
+  }
+}

src/renderer/utils/mainMixin.ts

@@ -1,9 +1,15 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { ipcRenderer, IpcRendererEvent } from 'electron'
-import { PICGO_SAVE_CONFIG, PICGO_GET_CONFIG } from '#/events/constants'
+import { PICGO_SAVE_CONFIG, PICGO_GET_CONFIG, FORCE_UPDATE } from '#/events/constants'
 import { uuid } from 'uuidv4'
 @Component
 export default class extends Vue {
+  created () {
+    this.$bus.$on(FORCE_UPDATE, () => {
+      this.$forceUpdate()
+    })
+  }
+
   // support string key + value or object config
   saveConfig (config: IObj | string, value?: any) {
     if (typeof config === 'string') {
@@ -27,4 +33,8 @@ export default class extends Vue {
       ipcRenderer.send(PICGO_GET_CONFIG, key, callbackId)
     })
   }
+
+  forceUpdate () {
+    this.$bus.$emit(FORCE_UPDATE)
+  }
 }

src/universal/events/constants.ts

@@ -31,3 +31,5 @@ export const SET_MINI_WINDOW_POS = 'SET_MINI_WINDOW_POS'
 export const RENAME_FILE_NAME = 'RENAME_FILE_NAME'
 export const SHOW_MAIN_PAGE_QRCODE = 'SHOW_MAIN_PAGE_QRCODE'
 export const SHOW_MAIN_PAGE_DONATION = 'SHOW_MAIN_PAGE_DONATION'
+export const FORCE_UPDATE = 'FORCE_UPDATE'
+export const CHANGE_LANGUAGE = 'CHANGE_LANGUAGE'