Added: config form

src/main/utils/picgoCoreIPC.js

@@ -4,6 +4,22 @@ import path from 'path'
 const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
 const PicGo = requireFunc('picgo')
 
+// get uploader or transformer config
+const getConfig = (name, type, ctx) => {
+  let config = []
+  if (name === '') {
+    return config
+  } else {
+    const handler = ctx.helper[type].get(name)
+    if (handler) {
+      if (handler.config) {
+        config = handler.config(ctx)
+      }
+    }
+    return config
+  }
+}
+
 export default (app, ipcMain) => {
   const STORE_PATH = app.getPath('userData')
   const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
@@ -13,15 +29,29 @@ export default (app, ipcMain) => {
     const pluginList = picgo.pluginLoader.getList()
     const list = []
     for (let i in pluginList) {
+      const plugin = picgo.pluginLoader.getPlugin(pluginList[i])
       const pluginPath = path.join(STORE_PATH, `/node_modules/${pluginList[i]}`)
       const pluginPKG = requireFunc(path.join(pluginPath, 'package.json'))
+      const uploaderName = plugin.uploader || ''
+      const transformerName = plugin.transformer || ''
       const obj = {
-        name: pluginList[i],
+        name: pluginList[i].replace(/picgo-plugin-/, ''),
         author: pluginPKG.author,
         description: pluginPKG.description,
         logo: path.join(pluginPath, 'logo.png').split(path.sep).join('/'),
         config: {
-          plugin: picgo.pluginLoader.getPlugin(pluginList[i]).config ? picgo.pluginLoader.getPlugin(pluginList[i]).config(picgo) : []
+          plugin: {
+            name: pluginList[i].replace(/picgo-plugin-/, ''),
+            config: plugin.config ? plugin.config(picgo) : []
+          },
+          uploader: {
+            name: uploaderName,
+            config: getConfig(uploaderName, 'uploader', picgo)
+          },
+          transformer: {
+            name: transformerName,
+            config: getConfig(uploaderName, 'transformer', picgo)
+          }
         },
         enabled: picgo.getConfig(`plugins.${pluginList[i]}`)
       }

src/renderer/components/ConfigForm.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="config-form">
+    <el-form
+      label-position="right"
+      label-width="120px"
+      :model="ruleForm"
+      ref="form"
+      size="mini"
+    >
+      <el-form-item
+        v-for="(item, index) in configList"
+        :key="index"
+        :label="item.name"
+        :required="item.required"
+        :prop="item.name"
+      >
+        <el-input
+          v-if="item.type === 'input' || item.type === 'password'"
+          :type="item.type === 'password' ? 'password' : 'input'"
+          v-model="ruleForm[item.name]"
+          :placeholder="item.message || item.name"
+        ></el-input>
+        <el-select
+          v-else-if="item.type === 'list'"
+          v-model="ruleForm[item.name]"
+          :placeholder="item.message || item.name"
+        >
+          <el-option
+            v-for="(choice, idx) in item.choices"
+            :label="choice.name || choice"
+            :key="choice"
+            :value="choice.value || choice"
+          ></el-option>
+        </el-select>
+        <el-switch
+          v-else-if="item.type === 'confirm'"
+          v-model="ruleForm[item.name]"
+          active-text="yes"
+          inactive-text="no"
+        >
+        </el-switch>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  name: 'config-form',
+  props: {
+    config: Array,
+    type: String,
+    name: String
+  },
+  data () {
+    return {
+      configList: [],
+      ruleForm: {}
+    }
+  },
+  created () {
+    this.configList = JSON.parse(JSON.stringify(this.config)).map(item => {
+      const defaultValue = item.default !== undefined ? item.default : null
+      this.$set(this.ruleForm, item.name, defaultValue)
+      return item
+    })
+  },
+  mounted () {
+    console.log(this.$refs.form)
+  },
+  methods: {
+    validate () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          console.log(this.ruleForm)
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+#config-form
+  .el-form
+    label
+      line-height 22px
+      padding-bottom 0
+    .el-button-group
+      width 100%
+      .el-button
+        width 50%
+    .el-input__inner
+      border-radius 19px
+    .el-radio-group
+      margin-left 25px
+    .el-switch__label
+      &.is-active
+        color #409EFF
+</style>

src/renderer/components/SettingView/Plugin.vue

@@ -39,16 +39,42 @@
         </div>
       </el-col>
     </el-row>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :modal-append-to-body="false"
+      :title="`配置${configName}`"
+      width="70%"
+    >
+      <config-form
+        :config="config"
+        :type="currentType"
+        :name="configName"
+        ref="configForm"
+      >
+      </config-form>
+      <span slot="footer">
+        <el-button @click="dialogVisible = false" round>取消</el-button>
+        <el-button type="primary" @click="handleConfirmConfig" round>确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
+import ConfigForm from '../ConfigForm'
 export default {
   name: 'plugin',
+  components: {
+    ConfigForm
+  },
   data () {
     return {
       searchText: '',
       pluginList: [],
-      menu: null
+      menu: null,
+      config: [],
+      currentType: '',
+      configName: '',
+      dialogVisible: false
     }
   },
   created () {
@@ -72,7 +98,7 @@ export default {
         label: '启用插件',
         enabled: !plugin.enabled,
         click () {
-          _this.$db.read().set(`plugins.${plugin.name}`, true).write()
+          _this.$db.read().set(`plugins.picgo-plugin-${plugin.name}`, true).write()
           plugin.enabled = true
           plugin.reload = true
         }
@@ -80,11 +106,26 @@ export default {
         label: '禁用插件',
         enabled: plugin.enabled,
         click () {
-          _this.$db.read().set(`plugins.${plugin.name}`, false).write()
+          _this.$db.read().set(`plugins.picgo-plugin-${plugin.name}`, false).write()
           plugin.enabled = false
           plugin.reload = true
         }
       }]
+      for (let i in plugin.config) {
+        if (plugin.config[i].config.length > 0) {
+          const obj = {
+            label: `配置${i} - ${plugin.config[i].name}`,
+            click () {
+              _this.configType = i
+              _this.configName = plugin.config[i].name
+              _this.dialogVisible = true
+              _this.config = plugin.config[i].config
+              console.log(plugin.config[i].config)
+            }
+          }
+          menu.push(obj)
+        }
+      }
       this.menu = this.$electron.remote.Menu.buildFromTemplate(menu)
       this.menu.popup(this.$electron.remote.getCurrentWindow())
     },
@@ -94,6 +135,10 @@ export default {
     reloadApp () {
       this.$electron.remote.app.relaunch()
       this.$electron.remote.app.exit(0)
+    },
+    handleConfirmConfig () {
+      console.log(this.$refs.configForm)
+      this.$refs.configForm.validate()
     }
   }
 }
@@ -138,6 +183,8 @@ export default {
       font-size 16px
       height 22px
       line-height 22px
+      // font-weight 600
+      font-weight 600
     &__desc
       font-size 14px
       height 21px

yarn.lock

@@ -359,8 +359,8 @@ async-exit-hook@^2.0.1:
   resolved "https://registry.yarnpkg.com/async-exit-hook/-/async-exit-hook-2.0.1.tgz#8bd8b024b0ec9b1c01cccb9af9db29bd717dfaf3"
 
 async-validator@~1.8.1:
-  version "1.8.2"
+  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.2.tgz#b77597226e96242f8d531c0d46ae295f62422ba4"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
   dependencies:
     babel-runtime "6.x"
 
@@ -3049,8 +3049,8 @@ electron@1.8.8:
     extract-zip "^1.0.3"
 
 element-ui@^2.0.5:
-  version "2.4.3"
+  version "2.4.7"
-  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.4.3.tgz#17a09ba6332b17a90002d86070697dcdb88fe0a5"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.4.7.tgz#073b404222815c08ba2e68b39ec8e6ff7b7b13e0"
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"