🐛 Fix: i18n bug

src/main.ts

@@ -32,6 +32,7 @@ app.config.globalProperties.$builtInPicBed = [
   'aliyun',
   'github'
 ]
+app.config.unwrapInjectedRef = true
 
 app.config.globalProperties.$$db = db
 app.config.globalProperties.$http = axios

src/renderer/App.vue

@@ -6,9 +6,11 @@
 
 <script lang="ts" setup>
 import { useStore } from '@/hooks/useStore'
-import { onBeforeMount } from 'vue'
+import { onBeforeMount, onMounted, onUnmounted } from 'vue'
 import { getConfig } from './utils/dataSender'
 import type { IConfig } from 'picgo'
+import bus from './utils/bus'
+import { FORCE_UPDATE } from '~/universal/events/constants'
 
 const store = useStore()
 onBeforeMount(async () => {
@@ -18,6 +20,16 @@ onBeforeMount(async () => {
   }
 })
 
+onMounted(() => {
+  bus.on(FORCE_UPDATE, () => {
+    store?.updateForceUpdateTime()
+  })
+})
+
+onUnmounted(() => {
+  bus.off(FORCE_UPDATE)
+})
+
 </script>
 
 <script lang="ts">

src/renderer/components/ConfigForm.vue

@@ -73,7 +73,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref, watch, defineExpose, toRefs } from 'vue'
+import { reactive, ref, watch, toRefs } from 'vue'
 import { cloneDeep, union } from 'lodash'
 import { getConfig } from '@/utils/dataSender'
 import { useRoute } from 'vue-router'

src/renderer/pages/Gallery.vue

@@ -549,7 +549,6 @@ async function handlePasteStyleChange (val: string) {
 }
 
 onBeforeUnmount(() => {
-  console.log('unmounted')
   ipcRenderer.removeAllListeners('updateGallery')
   ipcRenderer.removeListener(GET_PICBEDS, getPicBeds)
 })

src/renderer/pages/UploaderConfigPage.vue

@@ -112,26 +112,22 @@ onBeforeRouteUpdate((to, from, next) => {
   if (to.params.type && (to.name === UPLOADER_CONFIG_PAGE)) {
     type.value = to.params.type as string
     getCurrentConfigList()
-    console.log(type.value)
   }
   next()
 })
 
 onBeforeMount(() => {
   type.value = $route.params.type as string
-  console.log(type.value)
   getCurrentConfigList()
 })
 
 async function getCurrentConfigList () {
   const configList = await triggerRPC<IUploaderConfigItem>(IRPCActionType.GET_PICBED_CONFIG_LIST, type.value)
-  console.log(configList)
   curConfigList.value = configList?.configList ?? []
   defaultConfigId.value = configList?.defaultId ?? ''
 }
 
 function openEditPage (configId: string) {
-  console.log(configId, type.value, defaultConfigId.value)
   $router.push({
     name: PICBEDS_PAGE,
     params: {

src/renderer/pages/picbeds/index.vue

@@ -60,7 +60,6 @@ const $route = useRoute()
 const $router = useRouter()
 const $configForm = ref<InstanceType<typeof ConfigForm> | null>(null)
 type.value = $route.params.type as string
-console.log('picbed type', $route.params.type)
 
 onBeforeMount(() => {
   sendToMain('getPicBedConfig', $route.params.type)
@@ -69,7 +68,6 @@ onBeforeMount(() => {
 
 const handleConfirm = async () => {
   const result = (await $configForm.value?.validate()) || false
-  console.log(result)
   if (result !== false) {
     await triggerRPC<void>(IRPCActionType.UPDATE_UPLOADER_CONFIG, type.value, result?._id, result)
     const successNotification = new Notification($T('SETTINGS_RESULT'), {

src/renderer/store/index.ts

@@ -1,4 +1,4 @@
-import { reactive, InjectionKey, readonly, App, UnwrapRef } from 'vue'
+import { reactive, InjectionKey, readonly, App, UnwrapRef, ref } from 'vue'
 import { saveConfig } from '@/utils/dataSender'
 
 export interface IState {
@@ -8,6 +8,7 @@ export interface IState {
 export interface IStore {
   state: UnwrapRef<IState>
   setDefaultPicBed: (type: string) => void;
+  updateForceUpdateTime: () => void;
 }
 
 export const storeKey: InjectionKey<IStore> = Symbol('store')
@@ -17,6 +18,8 @@ const state: IState = reactive({
   defaultPicBed: 'smms'
 })
 
+const forceUpdateTime = ref<number>(Date.now())
+
 // methods
 const setDefaultPicBed = (type: string) => {
   saveConfig({
@@ -24,14 +27,19 @@ const setDefaultPicBed = (type: string) => {
     'picBed.uploader': type
   })
   state.defaultPicBed = type
-  console.log(state)
+}
+
+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/common.ts

@@ -22,7 +22,7 @@ export const trimValues = (obj: IStringKeyMap) => {
 /**
  * get raw data from reactive or ref
  */
-export const getRawData = (args: any) => {
+export const getRawData = (args: any): any => {
   if (Array.isArray(args)) {
     const data = args.map((item: any) => {
       if (isRef(item)) {
@@ -31,7 +31,7 @@ export const getRawData = (args: any) => {
       if (isReactive(item)) {
         return toRaw(item)
       }
-      return item
+      return getRawData(item)
     })
     return data
   }

src/renderer/utils/mainMixin.ts

@@ -1,11 +1,16 @@
-import { ComponentOptions, getCurrentInstance } from 'vue'
+import { ComponentOptions } from 'vue'
 import { FORCE_UPDATE, GET_PICBEDS } from '~/universal/events/constants'
 import bus from '~/renderer/utils/bus'
 import { ipcRenderer } from 'electron'
 export const mainMixin: ComponentOptions = {
+  inject: ['forceUpdateTime'],
+
   created () {
-    bus.on(FORCE_UPDATE, () => {
-      getCurrentInstance()?.proxy?.$forceUpdate()
+    // FIXME: may be memory leak
+    this?.$watch('forceUpdateTime', (newVal: number, oldVal: number) => {
+      if (oldVal !== newVal) {
+        this?.$forceUpdate()
+      }
     })
   },