✨ Feature(custom): imporve page loading performance and remove duplicated init call

src/renderer/pages/Gallery.vue

@@ -74,7 +74,7 @@
                   <ChevronDownIcon :size="16" />
                 </button>
                 <div v-show="picBedDropdownOpen" class="multiselect-dropdown">
-                  <label v-for="item in picBedGlobal" :key="item.type" class="multiselect-option">
+                  <label v-for="item in picBedG" :key="item.type" class="multiselect-option">
                     <input v-model="choosedPicBed" type="checkbox" :value="item.type" />
                     {{ item.name }}
                   </label>
@@ -514,6 +514,7 @@ import { onBeforeRouteUpdate } from 'vue-router'
 import ALLApi from '@/apis/allApi'
 import VirtualScroller from '@/components/VirtualScroller.vue'
 import useConfirm from '@/hooks/useConfirm'
+import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
 import { customStrMatch, customStrReplace } from '@/manage/utils/common'
 import { getRawData } from '@/utils/common'
@@ -521,12 +522,12 @@ import { configPaths } from '@/utils/configPaths'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import $$db from '@/utils/db'
 import { IPasteStyle, IRPCActionType } from '@/utils/enum'
-import { picBedGlobal } from '@/utils/global'
 import { picBedsCanbeDeleted } from '@/utils/static'
 
 const { t } = useI18n()
 const message = useMessage()
 const { confirm } = useConfirm()
+const { picBedG } = usePicBed()
 
 type IResult<T> = T & {
   id: string

src/renderer/pages/MiniPage.vue

@@ -30,10 +30,10 @@
 import type { IConfig } from 'piclist'
 import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 
+import { osGlobal } from '@/hooks/useGlobal'
 import { isUrl } from '@/utils/common'
 import { getConfig } from '@/utils/dataSender'
 import { IRPCActionType } from '@/utils/enum'
-import { osGlobal } from '@/utils/global'
 
 const logoPath = ref('')
 const dragover = ref(false)

src/renderer/pages/PicGoSetting.vue

@@ -348,7 +348,7 @@
                   <span>{{ t('pages.settings.upload.autoImportPicBed') }}</span>
                 </div>
                 <div class="checkbox-group compact">
-                  <label v-for="item in picBedGlobal" :key="item.type" class="checkbox-option">
+                  <label v-for="item in picBedG" :key="item.type" class="checkbox-option">
                     <input
                       v-model="formOfSetting.autoImportPicBed"
                       type="checkbox"
@@ -676,7 +676,7 @@
             </div>
 
             <div class="picbed-checkbox-grid">
-              <label v-for="item in picBedGlobal" :key="item.name" class="picbed-checkbox-card">
+              <label v-for="item in picBedG" :key="item.name" class="picbed-checkbox-card">
                 <input v-model="showPicBedList" type="checkbox" :value="item.name" class="checkbox-input" />
                 <span class="checkbox-indicator" />
                 <span class="checkbox-label">{{ item.name }}</span>
@@ -696,7 +696,7 @@
             </div>
 
             <div class="picbed-checkbox-grid">
-              <label v-for="item in picBedGlobal" :key="`gallery-${item.name}`" class="picbed-checkbox-card">
+              <label v-for="item in picBedG" :key="`gallery-${item.name}`" class="picbed-checkbox-card">
                 <input v-model="galleryPicBedFilterList" type="checkbox" :value="item.type" class="checkbox-input" />
                 <span class="checkbox-indicator" />
                 <span class="checkbox-label">{{ item.name }}</span>
@@ -1747,7 +1747,7 @@
           <button class="dialog-close" @click="imageProcessDialogVisible = false">X</button>
         </div>
         <div class="dialog-content">
-          <ImageProcessSetting v-model="imageProcessDialogVisible" />
+          <ImageProcessSetting :config-id="''" />
         </div>
       </div>
     </div>
@@ -1784,6 +1784,7 @@ import { useRouter } from 'vue-router'
 
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 import useConfirm from '@/hooks/useConfirm'
+import { osGlobal, usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
 import { setCurrentLanguage } from '@/i18n'
 import { SHORTKEY_PAGE } from '@/router/config'
@@ -1792,12 +1793,13 @@ import { configPaths } from '@/utils/configPaths'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import { II18nLanguage, IRPCActionType, ISartMode } from '@/utils/enum'
 import { getLatestVersion } from '@/utils/getLatestVersion'
-import { osGlobal, picBedGlobal, updatePicBedGlobal } from '@/utils/global'
 
 const { t, locale } = useI18n()
 const $router = useRouter()
 const { confirm } = useConfirm()
 const message = useMessage()
+const { picBedG, updatePicBeds } = usePicBed()
+
 const activeName = ref<'system' | 'sync' | 'upload' | 'advanced' | 'update'>('system')
 const showPicBedList = ref<string[]>([])
 const galleryPicBedFilterList = ref<string[]>([])
@@ -2073,7 +2075,7 @@ async function initData() {
   const config = (await getConfig<IConfig>()) || ({} as IConfig)
   const settings = config.settings || {}
   const picBed = config.picBed
-  showPicBedList.value = picBedGlobal.value.filter(item => item.visible).map(item => item.name)
+  showPicBedList.value = picBedG.value.filter(item => item.visible).map(item => item.name)
   galleryPicBedFilterList.value = settings.galleryPicBedFilter || []
   formKeys.forEach(key => {
     ;(formOfSetting.value as any)[key] = settings[key] ?? formOfSetting.value[key]
@@ -2225,9 +2227,9 @@ watch(galleryPicBedFilterList, val => {
 })
 
 function handleShowPicBedListChange(val: ICheckBoxValueType[]) {
-  const list = picBedGlobal.value.map(item => ({ ...item, visible: val.includes(item.name) }))
+  const list = picBedG.value.map(item => ({ ...item, visible: val.includes(item.name) }))
   saveConfig({ [configPaths.picBed.list]: list })
-  updatePicBedGlobal()
+  updatePicBeds()
 }
 
 function handleGalleryPicBedFilterChange(val: ICheckBoxValueType[]) {

src/renderer/pages/Plugin.vue

@@ -225,6 +225,7 @@ import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, toRaw, useTemp
 import { useI18n } from 'vue-i18n'
 
 import ConfigForm from '@/components/UnifiedConfigForm.vue'
+import { usePicBed } from '@/hooks/useGlobal'
 import { getRawData, handleStreamlinePluginName } from '@/utils/common'
 import { configPaths } from '@/utils/configPaths'
 import {
@@ -235,9 +236,9 @@ import {
 } from '@/utils/constant'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import { IRPCActionType } from '@/utils/enum'
-import { updatePicBedGlobal } from '@/utils/global'
 
 const { t } = useI18n()
+const { updatePicBeds } = usePicBed()
 const searchText = ref('')
 const pluginList = ref<IPicGoPlugin[]>([])
 const config = ref<any[]>([])
@@ -332,7 +333,7 @@ const updateSuccessHandler = (plugin: string) => {
       item.ing = false
       item.hasInstall = true
     }
-    updatePicBedGlobal()
+    updatePicBeds()
   })
   handleReload()
   getPluginList()
@@ -349,7 +350,7 @@ const uninstallSuccessHandler = (plugin: string) => {
       if (item.config.uploader.name) {
         handleRestoreState('uploader', item.config.uploader.name)
       }
-      updatePicBedGlobal()
+      updatePicBeds()
     }
     return item.fullName !== plugin
   })
@@ -379,7 +380,7 @@ const picgoTogglePluginHandler = (fullName: string, enabled: boolean) => {
   const plugin = pluginList.value.find(item => item.fullName === fullName)
   if (plugin) {
     plugin.enabled = enabled
-    updatePicBedGlobal()
+    updatePicBeds()
     needReload.value = true
   }
 }

src/renderer/pages/Upload.vue

@@ -7,11 +7,11 @@
           <button
             class="provider-button"
             :title="t('pages.upload.uploadViewHint')"
-            @click="handlePicBedNameClick(picBedName, picBedConfigName)"
+            @click="handlePicBedNameClick(picBedName)"
           >
             <div class="provider-info">
               <span class="provider-name">{{ picBedName }}</span>
-              <span class="provider-config">{{ picBedConfigName || 'Default' }}</span>
+              <span class="provider-config">{{ defaultConfigNameG || 'Default' }}</span>
             </div>
             <EditIcon :size="16" class="provider-arrow" />
           </button>
@@ -144,7 +144,7 @@
             </button>
           </div>
           <div class="modal-content">
-            <ImageProcessSetting v-model="imageProcessDialogVisible" />
+            <ImageProcessSetting :config-id="PicBedId" />
           </div>
         </div>
       </div>
@@ -162,11 +162,12 @@ import {
   UploadCloudIcon,
   XIcon,
 } from 'lucide-vue-next'
-import { onBeforeMount, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
+import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
 import { PICBEDS_PAGE } from '@/router/config'
 import $bus from '@/utils/bus'
@@ -176,12 +177,12 @@ import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '@/utils/constant'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import { useDragEventListeners } from '@/utils/drag'
 import { IPasteStyle, IRPCActionType } from '@/utils/enum'
-import { picBedGlobal, updatePicBedGlobal } from '@/utils/global'
 
 useDragEventListeners()
 const $router = useRouter()
 const { t } = useI18n()
 const message = useMessage()
+const { picBedG, defaultPicBedG, defaultConfigNameG, defaultIdG, updatePicBeds } = usePicBed()
 
 const imageProcessDialogVisible = ref(false)
 const useShortUrl = ref(false)
@@ -189,11 +190,18 @@ const dragover = ref(false)
 const progress = ref(0)
 const showProgress = ref(false)
 const showError = ref(false)
-const pasteStyle = ref('')
-const picBedName = ref('')
-const picBedConfigName = ref('')
+const pasteStyle = ref(IPasteStyle.MARKDOWN)
+const PicBedId = ref('')
 const fileInput = useTemplateRef('fileInput')
 
+const picBedName = computed(() => {
+  if (!picBedG.value || picBedG.value.length === 0) {
+    return ''
+  }
+  const target = picBedG.value.find(item => item.type === defaultPicBedG.value)
+  return target ? target.name : defaultPicBedG.value
+})
+
 const pasteFormatList = ref<Record<string, string>>({
   [IPasteStyle.MARKDOWN]: '![alt](url)',
   [IPasteStyle.HTML]: '<img src="url"/>',
@@ -202,9 +210,9 @@ const pasteFormatList = ref<Record<string, string>>({
   [IPasteStyle.CUSTOM]: '',
 })
 
-watch(picBedGlobal, () => {
-  getDefaultPicBed()
-})
+function syncPicBedHandler(): void {
+  updatePicBeds()
+}
 
 let removeUploadProgressListenerCallback: () => void = () => {}
 let removeSyncPicBedListenerCallback: () => void = () => {}
@@ -219,10 +227,6 @@ function uploadProgressHandler(p: number): void {
   }
 }
 
-function syncPicBedHandler(): void {
-  getDefaultPicBed()
-}
-
 const handleImageProcess = () => {
   imageProcessDialogVisible.value = true
 }
@@ -241,21 +245,13 @@ function onProgressChange(val: number) {
   }
 }
 
-async function handlePicBedNameClick(_picBedName: string, picBedConfigName: string | undefined) {
-  const formatedpicBedConfigName = picBedConfigName || 'Default'
-  const currentPicBed = await getConfig<string>(configPaths.picBed.current)
-  const currentPicBedConfig = ((await getConfig<any[]>(`uploader.${currentPicBed}`)) as any) || {}
-  const configList = await window.electron.triggerRPC<IUploaderConfigItem>(
-    IRPCActionType.PICBED_GET_CONFIG_LIST,
-    currentPicBed,
-  )
-  const currentConfigList = configList?.configList ?? []
-  const config = currentConfigList.find((item: any) => item._configName === formatedpicBedConfigName)
+async function handlePicBedNameClick(_picBedName: string) {
+  const currentPicBedConfig = ((await getConfig<any[]>(`uploader.${defaultPicBedG.value}`)) as any) || {}
   $router.push({
     name: PICBEDS_PAGE,
     params: {
-      type: currentPicBed,
-      configId: config?._id || '',
+      type: defaultPicBedG.value,
+      configId: defaultIdG.value,
     },
     query: {
       defaultConfigId: currentPicBedConfig.defaultId || '',
@@ -400,16 +396,6 @@ function handleInputBoxValue(val: string) {
   }
 }
 
-async function getDefaultPicBed() {
-  const currentPicBed = await getConfig<string>(configPaths.picBed.current)
-  picBedGlobal.value.forEach(item => {
-    if (item.type === currentPicBed) {
-      picBedName.value = item.name
-    }
-  })
-  picBedConfigName.value = (await getConfig<string>(`picBed.${currentPicBed}._configName`)) || ''
-}
-
 async function handleChangePicBed() {
   window.electron.sendRPC(IRPCActionType.SHOW_UPLOAD_PAGE_MENU)
 }
@@ -421,13 +407,11 @@ onBeforeUnmount(() => {
 })
 
 onBeforeMount(() => {
-  updatePicBedGlobal()
-  getUseShortUrl()
-  getPasteStyle()
-  getDefaultPicBed()
   removeUploadProgressListenerCallback = window.electron.ipcRendererOn('uploadProgress', uploadProgressHandler)
   removeSyncPicBedListenerCallback = window.electron.ipcRendererOn('syncPicBed', syncPicBedHandler)
   $bus.on(SHOW_INPUT_BOX_RESPONSE, handleInputBoxValue)
+  getUseShortUrl()
+  getPasteStyle()
 })
 </script>
 

src/renderer/pages/UploaderConfigPage.vue

@@ -20,11 +20,7 @@
           </div>
         </div>
         <div class="header-actions">
-          <button
-            class="btn btn-primary btn-glow"
-            :disabled="store?.state.defaultPicBed === type"
-            @click="setDefaultPicBed(type)"
-          >
+          <button class="btn btn-primary btn-glow" :disabled="defaultPicBedG === type" @click="setDefaultPicBed(type)">
             <Star :size="16" />
             <span>{{ t('pages.uploaderConfig.setAsDefault') }}</span>
           </button>
@@ -130,8 +126,8 @@ import { useI18n } from 'vue-i18n'
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 
 import useConfirm from '@/hooks/useConfirm'
+import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
-import { useStore } from '@/hooks/useStore'
 import { PICBEDS_PAGE, UPLOADER_CONFIG_PAGE } from '@/router/config'
 import $bus from '@/utils/bus'
 import { configPaths } from '@/utils/configPaths'
@@ -144,15 +140,15 @@ const message = useMessage()
 const { confirm } = useConfirm()
 const router = useRouter()
 const route = useRoute()
+const { defaultPicBedG } = usePicBed()
 
 const type = ref('')
 const curConfigList = ref<IStringKeyMap[]>([])
 const defaultConfigId = ref('')
-const store = useStore()
 
 async function selectItem(id: string) {
   await window.electron.triggerRPC<void>(IRPCActionType.UPLOADER_SELECT, type.value, id)
-  if (store?.state.defaultPicBed === type.value) {
+  if (defaultPicBedG.value === type.value) {
     window.electron.sendRPC(
       IRPCActionType.TRAY_SET_TOOL_TIP,
       `${type.value} ${curConfigList.value.find(item => item._id === id)?._configName || ''}`,
@@ -276,7 +272,6 @@ function setDefaultPicBed(type: string) {
     [configPaths.picBed.uploader]: type,
   })
 
-  store?.setDefaultPicBed(type)
   const currentConfigName = curConfigList.value.find(item => item._id === defaultConfigId.value)?._configName
   window.electron.sendRPC(IRPCActionType.TRAY_SET_TOOL_TIP, `${type} ${currentConfigName || ''}`)
   message.success(t('pages.uploaderConfig.setSuccess'))