✨ Feature(custom): update i18n force update

package.json

@@ -38,7 +38,7 @@
     "@aws-sdk/lib-storage": "^3.421.0",
     "@aws-sdk/s3-request-presigner": "^3.421.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@highlightjs/vue-plugin": "^2.1.0",
+    "@highlightjs/vue-plugin": "^2.1.2",
     "@nodelib/fs.walk": "^2.0.0",
     "@octokit/rest": "^19.0.7",
     "@picgo/i18n": "^1.0.0",

public/i18n/zh-TW.yml

@@ -49,13 +49,13 @@ TOOLBOX_CHECK_PROXY_SUCCESS_TIPS: 代理設置正常
 TOOLBOX_CHECK_PROXY_NO_PROXY_TIPS: 無代理設置
 TOOLBOX_CHECK_PROXY_PROXY_IS_NOT_CORRECT: 代理設置不正確
 TOOLBOX_CHECK_PROXY_PROXY_IS_NOT_WORKING: 代理設置不可用
-TOOLBOX_CHECK_CLIPBOARD_FILE_PATH_TIPS: 剪貼板圖片臨時文件夾路徑是：${path}  
+TOOLBOX_CHECK_CLIPBOARD_FILE_PATH_TIPS: 剪貼板圖片臨時文件夾路徑是：${path}
 TOOLBOX_CHECK_CLIPBOARD_FILE_PATH_NOT_EXIST_TIPS: 剪貼板圖片臨時文件夾不存在：${path}
 TOOLBOX_CHECK_CLIPBOARD_FILE_PATH_ERROR_TIPS: 請自行創建文件夾:${path}
 MANUAL_PAGE_OPEN_TIP: 請選擇打開方式
 MANUAL_PAGE_OPEN_TIP_TITLE: Tips
 MANUAL_PAGE_OPEN_BY_BROWSER: 瀏覽器
-MANUAL_PAGE_OPEN_BY_BUILD_IN: 內置窗口s
+MANUAL_PAGE_OPEN_BY_BUILD_IN: 內置窗口
 MANUAL_PAGE_OPEN_SETTING_TIP: 選擇打開手冊方式
 
 # ---renderer i18n begin---

src/main.ts

@@ -1,27 +1,31 @@
 import { webFrame } from 'electron'
 import ElementUI from 'element-plus'
 import 'element-plus/dist/index.css'
+
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
 import { createApp } from 'vue'
 import VueLazyLoad from 'vue3-lazyload'
+
 import vue3PhotoPreview from 'vue3-photo-preview'
 import 'vue3-photo-preview/dist/index.css'
+
 import VueVideoPlayer from '@videojs-player/vue'
-import 'highlight.js/styles/atom-one-dark.css'
-import hljsVuePlugin from '@highlightjs/vue-plugin'
-import hljsCommon from 'highlight.js/lib/common'
 import 'video.js/dist/video-js.css'
 
+import 'highlight.js/styles/stackoverflow-light.css'
+import hljsVuePlugin from '@highlightjs/vue-plugin'
+import 'highlight.js/lib/common'
+
 import App from '@/App.vue'
 import router from '@/router'
+import { sendRPC, sendToMain, triggerRPC } from '@/utils/common'
 import db from '@/utils/db'
 import { T } from '@/i18n/index'
 import { store } from '@/store'
 import { initTalkingData } from '@/utils/analytic'
-import { mainMixin } from '@/utils/mainMixin'
 import { dragMixin } from '@/utils/mixin'
-import { sendRPC, sendToMain, triggerRPC } from '@/utils/common'
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 
@@ -33,7 +37,6 @@ app.config.globalProperties.triggerRPC = triggerRPC
 app.config.globalProperties.sendRPC = sendRPC
 app.config.globalProperties.sendToMain = sendToMain
 
-app.mixin(mainMixin)
 app.mixin(dragMixin)
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
@@ -45,7 +48,6 @@ app.use(router)
 app.use(store)
 app.use(vue3PhotoPreview)
 app.use(pinia)
-console.log(hljsCommon.highlightAuto('<h1>Highlight.js has been registered successfully!</h1>').value)
 app.use(hljsVuePlugin)
 app.use(VueVideoPlayer)
 app.mount('#app')

src/main/events/rpc/routes/system/app.ts

@@ -6,7 +6,7 @@ import windowManager from 'apis/app/window/windowManager'
 import { i18nManager } from '~/i18n'
 
 import { IRPCActionType, IWindowList } from '#/types/enum'
-import { GET_CURRENT_LANGUAGE, GET_LANGUAGE_LIST, SET_CURRENT_LANGUAGE } from '#/events/constants'
+import { SET_CURRENT_LANGUAGE } from '#/events/constants'
 
 export default [
   {
@@ -31,14 +31,14 @@ export default [
   {
     action: IRPCActionType.GET_LANGUAGE_LIST,
     handler: async (event: IIPCEvent) => {
-      event.sender.send(GET_LANGUAGE_LIST, i18nManager.languageList)
+      event.returnValue = i18nManager.languageList
     }
   },
   {
     action: IRPCActionType.GET_CURRENT_LANGUAGE,
     handler: async (event: IIPCEvent) => {
       const { lang, locales } = i18nManager.getCurrentLocales()
-      event.sender.send(GET_CURRENT_LANGUAGE, lang, locales)
+      event.returnValue = [lang, locales]
     }
   },
   {

src/renderer/App.vue

@@ -1,19 +1,20 @@
 <template>
-  <div id="app">
+  <div
+    id="app"
+    :key="pageReloadCount"
+  >
     <router-view />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useStore } from '@/hooks/useStore'
 import type { IConfig } from 'piclist'
-import { onBeforeMount, onMounted, onUnmounted } from 'vue'
+import { onBeforeMount } from 'vue'
 
+import { useStore } from '@/hooks/useStore'
 import { useATagClick } from '@/hooks/useATagClick'
-import bus from '@/utils/bus'
 import { getConfig } from '@/utils/dataSender'
-
+import { pageReloadCount } from '@/utils/global'
-import { FORCE_UPDATE } from '#/events/constants'
 
 useATagClick()
 const store = useStore()
@@ -25,16 +26,6 @@ onBeforeMount(async () => {
   }
 })
 
-onMounted(() => {
-  bus.on(FORCE_UPDATE, () => {
-    store?.updateForceUpdateTime()
-  })
-})
-
-onUnmounted(() => {
-  bus.off(FORCE_UPDATE)
-})
-
 </script>
 
 <script lang="ts">

src/renderer/i18n/index.ts

@@ -1,12 +1,12 @@
 import { ipcRenderer } from 'electron'
 import { ObjectAdapter, I18n } from '@picgo/i18n'
 
-import bus from '@/utils/bus'
+import { sendRPC, sendRpcSync } from '@/utils/common'
-import { sendRPC } from '@/utils/common'
 
-import { GET_CURRENT_LANGUAGE, SET_CURRENT_LANGUAGE, FORCE_UPDATE, GET_LANGUAGE_LIST } from '#/events/constants'
+import { SET_CURRENT_LANGUAGE } from '#/events/constants'
 import { builtinI18nList } from '#/i18n'
 import { IRPCActionType } from '#/types/enum'
+import { updatePageReloadCount } from '@/utils/global'
 
 export class I18nManager {
   #i18n: I18n | null = null
@@ -17,23 +17,17 @@ export class I18nManager {
     this.#getLanguageList()
     ipcRenderer.on(SET_CURRENT_LANGUAGE, (_, lang: string, locales: ILocales) => {
       this.#setLocales(lang, locales)
-      bus.emit(FORCE_UPDATE)
+      updatePageReloadCount()
     })
   }
 
   #getLanguageList () {
-    sendRPC(IRPCActionType.GET_LANGUAGE_LIST)
+    this.#i18nFileList = sendRpcSync(IRPCActionType.GET_LANGUAGE_LIST)
-    ipcRenderer.once(GET_LANGUAGE_LIST, (_, list: II18nItem[]) => {
-      this.#i18nFileList = list
-    })
   }
 
   #getCurrentLanguage () {
-    sendRPC(IRPCActionType.GET_CURRENT_LANGUAGE)
+    const [lang, locales] = sendRpcSync(IRPCActionType.GET_CURRENT_LANGUAGE)
-    ipcRenderer.once(GET_CURRENT_LANGUAGE, (_, lang: string, locales: ILocales) => {
+    this.#setLocales(lang, locales)
-      this.#setLocales(lang, locales)
-      bus.emit(FORCE_UPDATE)
-    })
   }
 
   #setLocales (lang: string, locales: ILocales) {

src/renderer/store/index.ts

@@ -1,4 +1,4 @@
-import { reactive, InjectionKey, readonly, App, UnwrapRef, ref } from 'vue'
+import { reactive, InjectionKey, readonly, App, UnwrapRef } from 'vue'
 import { saveConfig } from '@/utils/dataSender'
 import { configPaths } from '#/utils/configPaths'
 
@@ -9,7 +9,6 @@ export interface IState {
 export interface IStore {
   state: UnwrapRef<IState>
   setDefaultPicBed: (type: string) => void
-  updateForceUpdateTime: () => void
 }
 
 export const storeKey: InjectionKey<IStore> = Symbol('store')
@@ -19,8 +18,6 @@ const state: IState = reactive({
   defaultPicBed: 'smms'
 })
 
-const forceUpdateTime = ref<number>(Date.now())
-
 // methods
 const setDefaultPicBed = (type: string) => {
   saveConfig({
@@ -30,17 +27,11 @@ const setDefaultPicBed = (type: string) => {
   state.defaultPicBed = type
 }
 
-const updateForceUpdateTime = () => {
-  forceUpdateTime.value = Date.now()
-}
-
 export const store = {
   install (app: App) {
     app.provide(storeKey, {
       state: readonly(state),
-      setDefaultPicBed,
+      setDefaultPicBed
-      updateForceUpdateTime
     })
-    app.provide('forceUpdateTime', forceUpdateTime)
   }
 }

src/renderer/utils/bus.ts

@@ -1,8 +1,7 @@
 import mitt from 'mitt'
 import {
   SHOW_INPUT_BOX,
-  SHOW_INPUT_BOX_RESPONSE,
+  SHOW_INPUT_BOX_RESPONSE
-  FORCE_UPDATE
 } from '#/events/constants'
 
 type IEvent ={
@@ -11,8 +10,7 @@ type IEvent ={
     value: string
     title: string
     placeholder: string
-  },
+  }
-  [FORCE_UPDATE]: void
 }
 
 const emitter = mitt<IEvent>()

src/renderer/utils/common.ts

@@ -51,6 +51,11 @@ export function sendRPC (action: IRPCActionType, ...args: any[]): void {
   ipcRenderer.send(RPC_ACTIONS, action, data)
 }
 
+export function sendRpcSync (action: IRPCActionType, ...args: any[]) {
+  const data = getRawData(args)
+  return ipcRenderer.sendSync(RPC_ACTIONS, action, data)
+}
+
 export function invokeToMain (channel: string, ...args: any[]) {
   const data = getRawData(args)
   return ipcRenderer.invoke(channel, ...data)

src/renderer/utils/global.ts

@@ -4,13 +4,20 @@ import { IRPCActionType } from '#/types/enum'
 
 const osGlobal = ref<string>(process.platform)
 const picBedGlobal = ref<IPicBedType[]>([])
+const pageReloadCount = ref(0)
 
 async function updatePicBedGlobal () {
   picBedGlobal.value = (await triggerRPC<IPicBedType[]>(IRPCActionType.MAIN_GET_PICBED))!
 }
 
+async function updatePageReloadCount () {
+  pageReloadCount.value++
+}
+
 export {
   osGlobal,
+  pageReloadCount,
   picBedGlobal,
-  updatePicBedGlobal
+  updatePicBedGlobal,
+  updatePageReloadCount
 }

src/renderer/utils/mainMixin.ts

@@ -1,24 +0,0 @@
-import { ComponentOptions } from 'vue'
-
-import bus from '@/utils/bus'
-
-import { FORCE_UPDATE } from '#/events/constants'
-
-export const mainMixin: ComponentOptions = {
-  inject: ['forceUpdateTime'],
-
-  created () {
-    // FIXME: may be memory leak
-    this?.$watch('forceUpdateTime', (newVal: number, oldVal: number) => {
-      if (oldVal !== newVal) {
-        this?.$forceUpdate()
-      }
-    })
-  },
-
-  methods: {
-    forceUpdate () {
-      bus.emit(FORCE_UPDATE)
-    }
-  }
-}

src/universal/events/constants.ts

@@ -1,20 +1,20 @@
 export const SHOW_INPUT_BOX = 'SHOW_INPUT_BOX'
 export const SHOW_INPUT_BOX_RESPONSE = 'SHOW_INPUT_BOX_RESPONSE'
 export const TOGGLE_SHORTKEY_MODIFIED_MODE = 'TOGGLE_SHORTKEY_MODIFIED_MODE'
+// talking data
 export const TALKING_DATA_APPID = 'B743C16E2989419A9B02EDE9D1E6A530'
 export const TALKING_DATA_EVENT = 'TALKING_DATA_EVENT'
+// picgo plugin
 export const PICGO_CONFIG_PLUGIN = 'PICGO_CONFIG_PLUGIN'
 export const PICGO_HANDLE_PLUGIN_ING = 'PICGO_HANDLE_PLUGIN_ING'
 export const PICGO_HANDLE_PLUGIN_DONE = 'PICGO_HANDLE_PLUGIN_DONE'
 export const PICGO_TOGGLE_PLUGIN = 'PICGO_TOGGLE_PLUGIN'
+// picgo uploader
 export const RENAME_FILE_NAME = 'RENAME_FILE_NAME'
 export const GET_RENAME_FILE_NAME = 'GET_RENAME_FILE_NAME'
 export const SHOW_MAIN_PAGE_QRCODE = 'SHOW_MAIN_PAGE_QRCODE'
-export const FORCE_UPDATE = 'FORCE_UPDATE'
+// rpc
-export const GET_PICBEDS = 'GET_PICBEDS'
 export const RPC_ACTIONS = 'RPC_ACTIONS'
 export const RPC_ACTIONS_INVOKE = 'RPC_ACTIONS_INVOKE'
 // i18n
-export const GET_CURRENT_LANGUAGE = 'GET_CURRENT_LANGUAGE'
-export const GET_LANGUAGE_LIST = 'GET_LANGUAGE_LIST'
 export const SET_CURRENT_LANGUAGE = 'SET_CURRENT_LANGUAGE'

src/universal/types/extra-vue.d.ts

@@ -22,7 +22,6 @@ declare module 'vue' {
     triggerRPC<T> (action: import('#/types/enum').IRPCActionType, ...args: any[]): Promise<T | undefined>
     sendRPC (action: import('#/types/enum').IRPCActionType, ...args: any[]): void
     defaultPicBed: string
-    forceUpdate(): void
     sendToMain(channel: string, ...args: any[]): void
   }
   interface GlobalComponents {

yarn.lock

@@ -2070,10 +2070,10 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@highlightjs/vue-plugin@^2.1.0":
+"@highlightjs/vue-plugin@^2.1.2":
-  version "2.1.0"
+  version "2.1.2"
-  resolved "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz#b7c41e3597a46975665b10cad57882cbde1d1594"
+  resolved "https://registry.yarnpkg.com/@highlightjs/vue-plugin/-/vue-plugin-2.1.2.tgz#b7deaaa03452da659a39859437ae0c4bca037600"
-  integrity sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==
+  integrity sha512-P7s9DLBGpBsbltk3ZKuYUu9lwDCEfpttjJ5ErI6Wco6GQWIsjcSCJzCoMHgXhRUNkFDtZo7ZgeF8M10POPbDLw==
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"