🐛 Fix: can't add new config for picbed

ISSUES CLOSED: #1184

src/main/events/picgoCoreIPC.ts

@@ -29,7 +29,8 @@ import {
   OPEN_WINDOW,
   GET_LANGUAGE_LIST,
   SET_CURRENT_LANGUAGE,
-  GET_CURRENT_LANGUAGE
+  GET_CURRENT_LANGUAGE,
+  GET_PICBED_CONFIG
 } from '#/events/constants'
 
 import { GalleryDB } from 'apis/core/datastore'
@@ -223,14 +224,14 @@ const handleNPMError = (): IDispose => {
 }
 
 const handleGetPicBedConfig = () => {
-  ipcMain.on('getPicBedConfig', (event: IpcMainEvent, type: string) => {
+  ipcMain.on(GET_PICBED_CONFIG, (event: IpcMainEvent, type: string) => {
     const name = picgo.helper.uploader.get(type)?.name || type
     if (picgo.helper.uploader.get(type)?.config) {
       const _config = picgo.helper.uploader.get(type)!.config!(picgo)
       const config = handleConfigWithFunction(_config)
-      event.sender.send('getPicBedConfig', config, name)
+      event.sender.send(GET_PICBED_CONFIG, config, name)
     } else {
-      event.sender.send('getPicBedConfig', [], name)
+      event.sender.send(GET_PICBED_CONFIG, [], name)
     }
   })
 }

src/renderer/components/ConfigForm.vue

@@ -45,13 +45,7 @@ const $route = useRoute()
 const $form = ref<IFormInstance>()
 const configList = ref<IPicGoPluginConfig[]>([])
 const formModel = reactive<IStringKeyMap>({})
-
-watch(toRefs(props.config), (val: IPicGoPluginConfig[]) => {
-  handleConfig(val)
-}, {
-  deep: true,
-  immediate: true
-})
+const isUploader = props.type === 'uploader'
 
 async function validate (): Promise<IStringKeyMap | false> {
   const res = await $form.value?.validate() || false
@@ -74,14 +68,13 @@ function getConfigType () {
   }
 }
 
-const isUploader = props.type === 'uploader'
-
 const handleConfigForm = useConfigForm()
 
 async function handleConfig (inputConfig: IPicGoPluginConfig[]) {
   const currentConfig = await getCurConfigFormData()
+  const resetConfig = isUploader && !$route.params.configId
   Object.assign(formModel, currentConfig)
-  configList.value = handleConfigForm(inputConfig, formModel, currentConfig)
+  configList.value = handleConfigForm(inputConfig, formModel, currentConfig, resetConfig)
 }
 
 async function getCurConfigFormData () {
@@ -101,6 +94,13 @@ async function resetConfig () {
   Object.assign(formModel, config)
 }
 
+watch(toRefs(props.config), (val: IPicGoPluginConfig[]) => {
+  handleConfig(val)
+}, {
+  deep: true,
+  immediate: true
+})
+
 defineExpose({
   validate,
   getConfigType,

src/renderer/hooks/useConfigForm.ts

@@ -4,13 +4,15 @@ import { cloneDeep, union } from 'lodash'
  * @param configList origin config list
  * @param formModel el-form form model for default value
  * @param currentConfig current config
+ * @param resetConfigForm reset form model -> clear default value
  * @returns transformed config list
  */
 export const useConfigForm = () => {
-  return (configList: IPicGoPluginConfig[], formModel: IStringKeyMap, currentConfig?: IStringKeyMap) => {
+  return (configList: IPicGoPluginConfig[], formModel: IStringKeyMap, currentConfig?: IStringKeyMap, resetConfigForm?: boolean) => {
     if (configList.length > 0) {
       return cloneDeep(configList).map((item) => {
         // if (!configId) return item
+        if (resetConfigForm) return item
         let defaultValue = item.default !== undefined
           ? item.default
           : item.type === 'checkbox'

src/renderer/pages/picbeds/index.vue

@@ -43,16 +43,17 @@
 </template>
 <script lang="ts" setup>
 import { IRPCActionType } from '~/universal/types/enum'
-import { ref, onBeforeUnmount, onBeforeMount } from 'vue'
+import { ref, onBeforeMount } from 'vue'
 import { T as $T } from '@/i18n/index'
 import { sendToMain, triggerRPC } from '@/utils/dataSender'
 import { useRoute, useRouter } from 'vue-router'
 import ConfigForm from '@/components/ConfigForm.vue'
 // import mixin from '@/utils/ConfirmButtonMixin'
 import {
-  ipcRenderer,
   IpcRendererEvent
 } from 'electron'
+import { GET_PICBED_CONFIG } from '~/universal/events/constants'
+import { useIPCOn } from '@/hooks/useIPC'
 const type = ref('')
 const config = ref<IPicGoPluginConfig[]>([])
 const picBedName = ref('')
@@ -61,9 +62,10 @@ const $router = useRouter()
 const $configForm = ref<InstanceType<typeof ConfigForm> | null>(null)
 type.value = $route.params.type as string
 
+useIPCOn(GET_PICBED_CONFIG, getPicBeds)
+
 onBeforeMount(() => {
-  sendToMain('getPicBedConfig', $route.params.type)
-  ipcRenderer.on('getPicBedConfig', getPicBeds)
+  sendToMain(GET_PICBED_CONFIG, $route.params.type)
 })
 
 const handleConfirm = async () => {
@@ -85,10 +87,6 @@ function getPicBeds (event: IpcRendererEvent, _config: IPicGoPluginConfig[], nam
   picBedName.value = name
 }
 
-onBeforeUnmount(() => {
-  ipcRenderer.removeListener('getPicBedConfig', getPicBeds)
-})
-
 </script>
 <script lang="ts">
 export default {

src/universal/events/constants.ts

@@ -36,6 +36,7 @@ export const FORCE_UPDATE = 'FORCE_UPDATE'
 export const OPEN_WINDOW = 'OPEN_WINDOW'
 export const GET_PICBEDS = 'GET_PICBEDS'
 export const RPC_ACTIONS = 'RPC_ACTIONS'
+export const GET_PICBED_CONFIG = 'GET_PICBED_CONFIG'
 // i18n
 export const GET_CURRENT_LANGUAGE = 'GET_CURRENT_LANGUAGE'
 export const GET_LANGUAGE_LIST = 'GET_LANGUAGE_LIST'