From bd9e33c0d8312138ddf55e73f8a24b8a2801ab38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=8C=E8=90=8C=E5=93=92=E8=B5=AB=E8=90=9D?=
 <ma_shiqing@163.com>
Date: Fri, 19 May 2023 23:44:37 +0800
Subject: [PATCH] :bug: Fix: fix config dialog bug of plugin page

---
 README.md                                     |   2 +-
 README_en.md                                  |   2 +-
 .../components/ConfigFormForPlugin.vue        | 205 ++++++++++++++++++
 src/renderer/pages/Plugin.vue                 |   4 +-
 4 files changed, 209 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/ConfigFormForPlugin.vue

diff --git a/README.md b/README.md
index f06c97b..72ae152 100644
--- a/README.md
+++ b/README.md
@@ -180,7 +180,7 @@ brew uninstall piclist
 
 [MIT](https://opensource.org/licenses/MIT)
 
-Copyright (c) 2017-present, Molunerfinn
+Copyright (c) 2017-present Molunerfinn
 
 Copyright (c) 2023-present Kuingsmile
 
diff --git a/README_en.md b/README_en.md
index ca720e4..82a4f08 100644
--- a/README_en.md
+++ b/README_en.md
@@ -178,7 +178,7 @@ This project is open source under the MIT license. Welcome everyone to use and c
 
 [MIT](https://opensource.org/licenses/MIT)
 
-Copyright (c) 2017-present, Molunerfinn
+Copyright (c) 2017-present Molunerfinn
 
 Copyright (c) 2023-present Kuingsmile
 
diff --git a/src/renderer/components/ConfigFormForPlugin.vue b/src/renderer/components/ConfigFormForPlugin.vue
new file mode 100644
index 0000000..5ed680e
--- /dev/null
+++ b/src/renderer/components/ConfigFormForPlugin.vue
@@ -0,0 +1,205 @@
+<template>
+  <div
+    id="config-form"
+    :class="props.colorMode === 'white' ? 'white' : ''"
+  >
+    <el-form
+      ref="$form"
+      label-position="left"
+      label-width="50%"
+      :model="ruleForm"
+      size="small"
+    >
+      <el-form-item
+        :label="$T('UPLOADER_CONFIG_NAME')"
+        required
+        prop="_configName"
+      >
+        <el-input
+          v-model="ruleForm._configName"
+          type="input"
+          :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')"
+        />
+      </el-form-item>
+      <!-- dynamic config -->
+      <el-form-item
+        v-for="(item, index) in configList"
+        :key="item.name + index"
+        :label="item.alias || item.name"
+        :required="item.required"
+        :prop="item.name"
+      >
+        <el-input
+          v-if="item.type === 'input' || item.type === 'password'"
+          v-model="ruleForm[item.name]"
+          type="input"
+          :placeholder="item.message || item.name"
+        />
+        <el-select
+          v-else-if="item.type === 'list' && item.choices"
+          v-model="ruleForm[item.name]"
+          :placeholder="item.message || item.name"
+        >
+          <el-option
+            v-for="choice in item.choices"
+            :key="choice.name || choice.value || choice"
+            :label="choice.name || choice.value || choice"
+            :value="choice.value || choice"
+          />
+        </el-select>
+        <el-select
+          v-else-if="item.type === 'checkbox' && item.choices"
+          v-model="ruleForm[item.name]"
+          :placeholder="item.message || item.name"
+          multiple
+          collapse-tags
+        >
+          <el-option
+            v-for="choice in item.choices"
+            :key="choice.value || choice"
+            :label="choice.name || choice.value || choice"
+            :value="choice.value || choice"
+          />
+        </el-select>
+        <el-switch
+          v-else-if="item.type === 'confirm'"
+          v-model="ruleForm[item.name]"
+          active-text="yes"
+          inactive-text="no"
+        />
+      </el-form-item>
+      <slot />
+    </el-form>
+  </div>
+</template>
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue'
+import { cloneDeep, union } from 'lodash'
+import { getConfig } from '@/utils/dataSender'
+import type { FormInstance } from 'element-plus'
+import { T as $T } from '@/i18n'
+
+interface IProps {
+  config: any[]
+  type: 'uploader' | 'transformer' | 'plugin'
+  id: string
+  colorMode?: 'white' | 'dark'
+}
+
+const props = defineProps<IProps>()
+const $form = ref<FormInstance>()
+
+const configList = ref<IPicGoPluginConfig[]>([])
+const ruleForm = reactive<IStringKeyMap>({})
+
+watch(() => props.config, (val: IPicGoPluginConfig[]) => {
+  handleConfigChange(val)
+}, {
+  deep: true,
+  immediate: true
+})
+
+function handleConfigChange (val: any) {
+  handleConfig(val)
+}
+
+async function validate (): Promise<IStringKeyMap | false> {
+  return new Promise((resolve) => {
+    $form.value?.validate((valid: boolean) => {
+      if (valid) {
+        resolve(ruleForm)
+      } else {
+        resolve(false)
+        return false
+      }
+    })
+  })
+}
+
+function getConfigType () {
+  switch (props.type) {
+    case 'plugin': {
+      return props.id
+    }
+    case 'uploader': {
+      return `picBed.${props.id}`
+    }
+    case 'transformer': {
+      return `transformer.${props.id}`
+    }
+    default:
+      return 'unknown'
+  }
+}
+
+async function handleConfig (val: IPicGoPluginConfig[]) {
+  const config = await getCurConfigFormData()
+  Object.assign(ruleForm, config)
+  if (val.length > 0) {
+    configList.value = cloneDeep(val).map((item) => {
+      let defaultValue = item.default !== undefined
+        ? item.default
+        : item.type === 'checkbox'
+          ? []
+          : null
+      if (item.type === 'checkbox') {
+        const defaults = item.choices?.filter((i: any) => {
+          return i.checked
+        }).map((i: any) => i.value) || []
+        defaultValue = union(defaultValue, defaults)
+      }
+      if (config && config[item.name] !== undefined) {
+        defaultValue = config[item.name]
+      }
+      ruleForm[item.name] = defaultValue
+      return item
+    })
+  }
+}
+
+async function getCurConfigFormData () {
+  return await getConfig<IStringKeyMap>(`${props.id}`) || {}
+}
+
+function updateRuleForm (key: string, value: any) {
+  try {
+    ruleForm[key] = value
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+defineExpose({
+  updateRuleForm,
+  validate,
+  getConfigType
+})
+</script>
+<style lang='stylus'>
+#config-form
+  .el-form
+    label
+      line-height 22px
+      padding-bottom 0
+    &-item
+      display: flex
+      justify-content space-between
+      border-bottom 1px solid darken(#eee, 50%)
+      padding-bottom 16px
+      &:last-child
+        border-bottom none
+      &__content
+        justify-content flex-end
+    .el-button-group
+      width 100%
+      .el-button
+        width 50%
+    .el-radio-group
+      margin-left 25px
+    .el-switch__label
+      &.is-active
+        color #409EFF
+  &.white
+    .el-form-item
+      border-bottom 1px solid #ddd
+</style>
diff --git a/src/renderer/pages/Plugin.vue b/src/renderer/pages/Plugin.vue
index ba503d7..50e07e6 100644
--- a/src/renderer/pages/Plugin.vue
+++ b/src/renderer/pages/Plugin.vue
@@ -202,7 +202,7 @@
 <script lang="ts" setup>
 import { Close, Download, Goods, Remove, Setting } from '@element-plus/icons-vue'
 import { T as $T } from '@/i18n/index'
-import ConfigForm from '@/components/ConfigForm.vue'
+import ConfigForm from '@/components/ConfigFormForPlugin.vue'
 import { debounce, DebouncedFunc } from 'lodash'
 import {
   ipcRenderer,
@@ -330,8 +330,8 @@ onBeforeMount(async () => {
   ipcRenderer.on(PICGO_CONFIG_PLUGIN, (evt: IpcRendererEvent, _currentType: 'plugin' | 'transformer' | 'uploader', _configName: string, _config: any) => {
     currentType.value = _currentType
     configName.value = _configName
-    dialogVisible.value = true
     config.value = _config
+    dialogVisible.value = true
   })
   ipcRenderer.on(PICGO_HANDLE_PLUGIN_ING, (evt: IpcRendererEvent, fullName: string) => {
     pluginList.value.forEach(item => {