Finished: other picbed page

src/main/index.js

@@ -5,8 +5,8 @@ import { app, BrowserWindow, Tray, Menu, Notification, clipboard, ipcMain, globa
 import db from '../datastore'
 import pasteTemplate from './utils/pasteTemplate'
 import updateChecker from './utils/updateChecker'
+import { getPicBeds } from './utils/getPicBeds'
 import pkg from '../../package.json'
-import picBed from '../datastore/pic-bed'
 import picgoCoreIPC from './utils/picgoCoreIPC'
 /**
  * Set `__static` path to static files in production
@@ -38,7 +38,8 @@ const miniWinURL = process.env.NODE_ENV === 'development'
 function createTray () {
   const menubarPic = process.platform === 'darwin' ? `${__static}/menubar.png` : `${__static}/menubar-nodarwin.png`
   tray = new Tray(menubarPic)
-  const submenu = picBed.map(item => {
+  const picBeds = getPicBeds(app)
+  const submenu = picBeds.map(item => {
     return {
       label: item.name,
       type: 'radio',
@@ -354,7 +355,8 @@ const uploadClipboardFiles = async () => {
 
 const updateDefaultPicBed = () => {
   if (process.platform === 'darwin' || process.platform === 'win32') {
-    const types = picBed.map(item => item.type)
+    const picBeds = getPicBeds(app)
+    const types = picBeds.map(item => item.type)
     let submenuItem = contextMenu.items[2].submenu.items
     submenuItem.forEach((item, index) => {
       const result = db.read().get('picBed.current').value() === types[index]
@@ -484,6 +486,11 @@ ipcMain.on('syncPicBed', (evt) => {
   updateDefaultPicBed()
 })
 
+ipcMain.on('getPicBeds', (evt) => {
+  const picBeds = getPicBeds(app)
+  evt.sender.send('getPicBeds', picBeds)
+})
+
 const shortKeyHash = {
   upload: uploadClipboardFiles
 }

src/main/utils/getPicBeds.js

@@ -0,0 +1,26 @@
+import path from 'path'
+import db from '../../datastore'
+// eslint-disable-next-line
+const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
+
+const getPicBeds = (app) => {
+  const PicGo = requireFunc('picgo')
+  const STORE_PATH = app.getPath('userData')
+  const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
+  const picgo = new PicGo(CONFIG_PATH)
+  const picBedTypes = picgo.helper.uploader.getIdList()
+  const picBedFromDB = db.read().get('picBed.list').value() || []
+  const picBeds = picBedTypes.map(item => {
+    const visible = picBedFromDB.find(i => i.type === item) // object or undefined
+    return {
+      type: item,
+      name: picgo.helper.uploader.get(item).name || item,
+      visible: visible ? visible.visible : true
+    }
+  })
+  return picBeds
+}
+
+export {
+  getPicBeds
+}

src/main/utils/picgoCoreIPC.js

@@ -75,7 +75,7 @@ const handleGetPluginList = (ipcMain, STORE_PATH, CONFIG_PATH) => {
   })
 }
 
-const handlePluginInstall = (ipcMain, STORE_PATH, CONFIG_PATH) => {
+const handlePluginInstall = (ipcMain, CONFIG_PATH) => {
   ipcMain.on('installPlugin', (event, msg) => {
     const picgo = new PicGo(CONFIG_PATH)
     const pluginHandler = new PluginHandler(picgo)
@@ -87,7 +87,7 @@ const handlePluginInstall = (ipcMain, STORE_PATH, CONFIG_PATH) => {
   })
 }
 
-const handlePluginUninstall = (ipcMain, STORE_PATH, CONFIG_PATH) => {
+const handlePluginUninstall = (ipcMain, CONFIG_PATH) => {
   ipcMain.on('uninstallPlugin', (event, msg) => {
     const picgo = new PicGo(CONFIG_PATH)
     const pluginHandler = new PluginHandler(picgo)
@@ -99,7 +99,7 @@ const handlePluginUninstall = (ipcMain, STORE_PATH, CONFIG_PATH) => {
   })
 }
 
-const handlePluginUpdate = (ipcMain, STORE_PATH, CONFIG_PATH) => {
+const handlePluginUpdate = (ipcMain, CONFIG_PATH) => {
   ipcMain.on('updatePlugin', (event, msg) => {
     const picgo = new PicGo(CONFIG_PATH)
     const pluginHandler = new PluginHandler(picgo)
@@ -111,11 +111,21 @@ const handlePluginUpdate = (ipcMain, STORE_PATH, CONFIG_PATH) => {
   })
 }
 
+const handleGetPicBedConfig = (ipcMain, CONFIG_PATH) => {
+  ipcMain.on('getPicBedConfig', (event, type) => {
+    const picgo = new PicGo(CONFIG_PATH)
+    const config = handleConfigWithFunction(picgo.helper.uploader.get(type).config(picgo))
+    const name = picgo.helper.uploader.get(type).name || type
+    event.sender.send('getPicBedConfig', config, name)
+  })
+}
+
 export default (app, ipcMain) => {
   const STORE_PATH = app.getPath('userData')
   const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
   handleGetPluginList(ipcMain, STORE_PATH, CONFIG_PATH)
-  handlePluginInstall(ipcMain, STORE_PATH, CONFIG_PATH)
+  handlePluginInstall(ipcMain, CONFIG_PATH)
-  handlePluginUninstall(ipcMain, STORE_PATH, CONFIG_PATH)
+  handlePluginUninstall(ipcMain, CONFIG_PATH)
-  handlePluginUpdate(ipcMain, STORE_PATH, CONFIG_PATH)
+  handlePluginUpdate(ipcMain, CONFIG_PATH)
+  handleGetPicBedConfig(ipcMain, CONFIG_PATH)
 }

src/renderer/components/ConfigForm.vue

@@ -27,8 +27,22 @@
         >
           <el-option
             v-for="(choice, idx) in item.choices"
-            :label="choice.name || choice"
+            :label="choice.name || choice.value || choice"
-            :key="choice"
+            :key="choice.name || choice.value || choice"
+            :value="choice.value || choice"
+          ></el-option>
+        </el-select>
+        <el-select
+          v-else-if="item.type === 'checkbox'"
+          v-model="ruleForm[item.name]"
+          :placeholder="item.message || item.name"
+          multiple
+          collapse-tags
+        >
+          <el-option
+            v-for="(choice, idx) in item.choices"
+            :label="choice.name || choice.value || choice"
+            :key="choice.value || choice"
             :value="choice.value || choice"
           ></el-option>
         </el-select>
@@ -40,17 +54,21 @@
         >
         </el-switch>
       </el-form-item>
+      <slot></slot>
     </el-form>
   </div>
 </template>
 <script>
-import { cloneDeep } from 'lodash'
+import { cloneDeep, union } from 'lodash'
 export default {
   name: 'config-form',
   props: {
     config: Array,
     type: String,
-    name: String
+    id: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {
@@ -59,23 +77,33 @@ export default {
     }
   },
   created () {
-    this.configList = cloneDeep(this.config).map(item => {
-      const defaultValue = item.default !== undefined ? item.default : null
-      this.$set(this.ruleForm, item.name, defaultValue)
-      return item
-    })
   },
   watch: {
     config: {
       deep: true,
       handler (val) {
         this.ruleForm = Object.assign({}, {})
+        const config = this.$db.read().get(`picBed.${this.id}`).value()
+        if (val.length > 0) {
           this.configList = cloneDeep(val).map(item => {
-          const defaultValue = item.default !== undefined ? item.default : null
+            let defaultValue = item.default !== undefined
+              ? item.default : item.type === 'checkbox'
+                ? [] : null
+            if (item.type === 'checkbox') {
+              const defaults = item.choices.filter(i => {
+                return i.checked
+              }).map(i => i.value)
+              defaultValue = union(defaultValue, defaults)
+            }
+            if (config && config[item.name] !== undefined) {
+              defaultValue = config[item.name]
+            }
             this.$set(this.ruleForm, item.name, defaultValue)
             return item
           })
         }
+      },
+      immediate: true
     }
   },
   methods: {

src/renderer/layouts/SettingPage.vue

@@ -36,7 +36,7 @@
             >
               <el-menu-item
                 v-if="item.visible"
-                :index="item.type"
+                :index="`picbeds-${item.type}`"
                 :key="item.type"
               >
                 <!-- <i :class="`el-icon-ui-${item.type}`"></i> -->
@@ -168,18 +168,39 @@ export default {
       shortKey: {
         upload: db.read().get('shortKey.upload').value()
       },
-      picBed: this.$picBed
+      picBed: []
     }
   },
   created () {
     this.os = process.platform
     this.buildMenu()
+    this.getPicBeds()
+    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+      this.picBed = picBeds
+    })
   },
   methods: {
     handleSelect (index) {
+      const type = index.match(/picbeds-/)
+      if (type === null) {
         this.$router.push({
           name: index
         })
+      } else {
+        const picBed = index.replace(/picbeds-/, '')
+        if (this.$builtInPicBed.includes(picBed)) {
+          this.$router.push({
+            name: picBed
+          })
+        } else {
+          this.$router.push({
+            name: 'others',
+            query: {
+              type: picBed
+            }
+          })
+        }
+      }
     },
     minimizeWindow () {
       const window = BrowserWindow.getFocusedWindow()
@@ -244,12 +265,18 @@ export default {
     },
     openMiniWindow () {
       this.$electron.ipcRenderer.send('openMiniWindow')
+    },
+    getPicBeds () {
+      this.$electron.ipcRenderer.send('getPicBeds')
     }
   },
   beforeRouteEnter: (to, from, next) => {
     next(vm => {
       vm.defaultActive = to.name
     })
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
   }
 }
 </script>

src/renderer/main.js

@@ -8,7 +8,6 @@ import store from './store'
 import db from '../datastore/index'
 import { webFrame } from 'electron'
 import './assets/fonts/iconfont.css'
-import picBed from '../datastore/pic-bed'
 import VueLazyLoad from 'vue-lazyload'
 
 Vue.use(ElementUI)
@@ -20,7 +19,16 @@ webFrame.setLayoutZoomLevelLimits(0, 0)
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
 Vue.prototype.$db = db
-Vue.prototype.$picBed = picBed
+Vue.prototype.$builtInPicBed = [
+  'smms',
+  'weibo',
+  'imgur',
+  'qiniu',
+  'tcyun',
+  'upyun',
+  'aliyun',
+  'github'
+]
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

src/renderer/pages/Gallery.vue

@@ -16,7 +16,7 @@
                 style="width: 100%"
                 placeholder="请选择显示的图床">
                 <el-option
-                  v-for="item in $picBed"
+                  v-for="item in picBed"
                   :key="item.type"
                   :label="item.name"
                   :value="item.type">
@@ -135,7 +135,8 @@ export default {
         URL: 'URL',
         UBB: 'UBB',
         Custom: 'Custom'
-      }
+      },
+      picBed: []
     }
   },
   created () {
@@ -145,7 +146,11 @@ export default {
         this.filterList = this.getGallery()
       })
     })
+    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+      this.picBed = picBeds
+    })
     this.getPasteStyle()
+    this.getPicBeds()
   },
   computed: {
     filterList: {
@@ -158,6 +163,9 @@ export default {
     }
   },
   methods: {
+    getPicBeds () {
+      this.$electron.ipcRenderer.send('getPicBeds')
+    },
     getGallery () {
       if (this.choosedPicBed.length > 0) {
         let arr = []
@@ -335,6 +343,7 @@ export default {
   },
   beforeDestroy () {
     this.$electron.ipcRenderer.removeAllListeners('updateGallery')
+    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
   }
 }
 </script>

src/renderer/pages/MiniPage.vue

@@ -17,7 +17,6 @@
 </template>
 <script>
 import mixin from '@/utils/mixin'
-import picBed from '~/datastore/pic-bed.js'
 export default {
   name: 'mini-page',
   mixins: [mixin],
@@ -34,13 +33,13 @@ export default {
       screenX: '',
       screenY: '',
       menu: null,
-      os: ''
+      os: '',
+      picBed: []
     }
   },
   created () {
     this.os = process.platform
-  },
+    this.getPicBeds()
-  mounted () {
     this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
       if (progress !== -1) {
         this.showProgress = true
@@ -50,7 +49,12 @@ export default {
         this.showError = true
       }
     })
+    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+      this.picBed = picBeds
       this.buildMenu()
+    })
+  },
+  mounted () {
     window.addEventListener('mousedown', this.handleMouseDown, false)
     window.addEventListener('mousemove', this.handleMouseMove, false)
     window.addEventListener('mouseup', this.handleMouseUp, false)
@@ -69,6 +73,9 @@ export default {
     }
   },
   methods: {
+    getPicBeds () {
+      this.$electron.ipcRenderer.send('getPicBeds')
+    },
     onDrop (e) {
       this.dragover = false
       this.ipcSendFiles(e.dataTransfer.files)
@@ -119,7 +126,7 @@ export default {
           this.openUploadWindow()
         } else {
           let _this = this
-          const types = picBed.map(item => item.type)
+          const types = this.picBed.map(item => item.type)
           let submenuItem = this.menu.items[1].submenu.items
           submenuItem.forEach((item, index) => {
             const result = _this.$db.read().get('picBed.current').value() === types[index]
@@ -137,7 +144,7 @@ export default {
     },
     buildMenu () {
       const _this = this
-      const submenu = picBed.map(item => {
+      const submenu = this.picBed.map(item => {
         return {
           label: item.name,
           type: 'radio',
@@ -176,6 +183,7 @@ export default {
   },
   beforeDestroy () {
     this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
+    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
     window.removeEventListener('mousedown', this.handleMouseDown, false)
     window.removeEventListener('mousemove', this.handleMouseMove, false)
     window.removeEventListener('mouseup', this.handleMouseUp, false)

src/renderer/pages/PicGoSetting.vue

@@ -251,7 +251,7 @@ export default {
         uploadNotification: this.$db.read().get('settings.uploadNotification').value() || false,
         miniWindowOntop: this.$db.read().get('settings.miniWindowOntop').value() || false
       },
-      picBed: this.$picBed,
+      picBed: [],
       keyBindingVisible: false,
       customLinkVisible: false,
       checkUpdateVisible: false,
@@ -273,13 +273,20 @@ export default {
     }
   },
   created () {
+    this.getPicBeds()
+    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+      this.picBed = picBeds
       this.form.showPicBedList = this.picBed.map(item => {
         if (item.visible) {
           return item.name
         }
       })
+    })
   },
   methods: {
+    getPicBeds () {
+      this.$electron.ipcRenderer.send('getPicBeds')
+    },
     openConfigFile () {
       const { app, shell } = this.$electron.remote
       const STORE_PATH = app.getPath('userData')
@@ -391,6 +398,9 @@ export default {
       this.$db.read().set('settings.miniWindowOntop', val).write()
       this.$message('需要重启生效')
     }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
   }
 }
 </script>

src/renderer/pages/Upload.vue

@@ -3,7 +3,7 @@
     <el-row :gutter="16">
       <el-col :span="20" :offset="2">
         <div class="view-title">
-          图片上传 - {{ picBed }}
+          图片上传 - {{ picBedName }}
         </div>
         <div
           id="upload-area"
@@ -65,7 +65,8 @@ export default {
       showProgress: false,
       showError: false,
       pasteStyle: '',
-      picBed: ''
+      picBed: [],
+      picBedName: ''
     }
   },
   mounted () {
@@ -83,6 +84,11 @@ export default {
     this.$electron.ipcRenderer.on('syncPicBed', () => {
       this.getDefaultPicBed()
     })
+    this.getPicBeds()
+    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+      this.picBed = picBeds
+      this.getDefaultPicBed()
+    })
   },
   watch: {
     progress (val) {
@@ -100,6 +106,7 @@ export default {
   beforeDestroy () {
     this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
     this.$electron.ipcRenderer.removeAllListeners('syncPicBed')
+    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
   },
   methods: {
     onDrop (e) {
@@ -136,11 +143,14 @@ export default {
     },
     getDefaultPicBed () {
       const current = this.$db.read().get('picBed.current').value()
-      this.$picBed.forEach(item => {
+      this.picBed.forEach(item => {
         if (item.type === current) {
-          this.picBed = item.name
+          this.picBedName = item.name
         }
       })
+    },
+    getPicBeds () {
+      this.$electron.ipcRenderer.send('getPicBeds')
     }
   }
 }

src/renderer/pages/picbeds/Others.vue

@@ -3,55 +3,98 @@
     <el-row :gutter="16">
       <el-col :span="16" :offset="4">
         <div class="view-title">
-          Imgur图床设置
+          {{ picBedName }}设置
         </div>
-        <el-form 
+        <config-form
-          ref="imgur"
+          :config="config"
-          label-position="right"
+          type="uploader"
-          label-width="120px"
+          ref="configForm"
-          :model="form"
-          size="mini">
-          <el-form-item
-            label="设定ClientId"
-            prop="clientId"
-            :rules="{
-              required: true, message: 'ClientId不能为空', trigger: 'blur'
-            }">
-            <el-input v-model="form.clientId" placeholder="ClientId" @keyup.native.enter="confirm"></el-input>
-          </el-form-item>
-          <el-form-item
-            label="设定代理"
-            prop="proxy"
         >
-            <el-input v-model="form.proxy" placeholder="例如：http://127.0.0.1:1080" @keyup.native.enter="confirm"></el-input>
-          </el-form-item>
           <el-form-item>
             <el-button-group>
-              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="primary" @click="handleConfirm" round>确定</el-button>
               <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type">设为默认图床</el-button>
             </el-button-group>
           </el-form-item>
-        </el-form>
+        </config-form>
+
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
+import ConfigForm from '@/components/ConfigForm'
 import mixin from '@/utils/ConfirmButtonMixin'
 export default {
   name: 'OtherPicBed',
   mixins: [mixin],
+  components: {
+    ConfigForm
+  },
   data () {
     return {
-      type: ''
+      type: '',
+      config: [],
+      picBedName: ''
     }
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-      console.log(vm)
+      vm.type = to.query.type
+      vm.$electron.ipcRenderer.send('getPicBedConfig', to.query.type)
+      vm.$electron.ipcRenderer.on('getPicBedConfig', (event, config, name) => {
+        vm.config = config
+        vm.picBedName = name
       })
+    })
+  },
+  methods: {
+    async handleConfirm () {
+      const result = await this.$refs.configForm.validate()
+      if (result !== false) {
+        this.$db.read().set(`picBed.${this.type}`, result).write()
+        const successNotification = new window.Notification('设置结果', {
+          body: '设置成功'
+        })
+        successNotification.onclick = () => {
+          return true
+        }
+      }
+    },
+    setDefaultPicBed (type) {
+      this.$db.read().set('picBed.current', type).write()
+      this.defaultPicBed = type
+      this.$electron.ipcRenderer.send('updateDefaultPicBed', type)
+      const successNotification = new window.Notification('设置默认图床', {
+        body: '设置成功'
+      })
+      successNotification.onclick = () => {
+        return true
+      }
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('getPicBedConfig')
   }
 }
 </script>
 <style lang='stylus'>
+#others-view
+  .el-form
+    label  
+      line-height 22px
+      padding-bottom 0
+      color #eee
+    .el-button-group
+      width 100%
+      .el-button
+        width 50%
+    .el-input__inner
+      border-radius 19px
+    .el-radio-group
+      margin-left 25px
+    .el-switch__label
+      color #eee
+      &.is-active
+        color #409EFF
 </style>

src/renderer/utils/ConfirmButtonMixin.js

@@ -1,14 +1,13 @@
-import db from '~/datastore'
 export default {
   name: '',
   data () {
     return {
-      defaultPicBed: db.read().get('picBed.current').value()
+      defaultPicBed: this.$db.read().get('picBed.current').value()
     }
   },
   methods: {
     setDefaultPicBed (type) {
-      db.read().set('picBed.current', type).write()
+      this.$db.read().set('picBed.current', type).write()
       this.defaultPicBed = type
       this.$electron.ipcRenderer.send('updateDefaultPicBed', type)
       const successNotification = new window.Notification('设置默认图床', {