Partly finished: plugin system

src/main/index.js

@@ -522,6 +522,7 @@ app.on('ready', () => {
   if (process.platform === 'darwin' || process.platform === 'win32') {
     createTray()
   }
+  db.read().set('needReload', false).write()
   updateChecker()
 
   globalShortcut.register(db.read().get('settings.shortKey.upload').value(), () => {

src/main/utils/getPicBeds.js

@@ -18,6 +18,7 @@ const getPicBeds = (app) => {
       visible: visible ? visible.visible : true
     }
   })
+  picgo.cmd.program.removeAllListeners()
   return picBeds
 }
 

src/main/utils/picgoCoreIPC.js

@@ -114,9 +114,14 @@ const handlePluginUpdate = (ipcMain, 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)
+    if (picgo.helper.uploader.get(type).config) {
+      const config = handleConfigWithFunction(picgo.helper.uploader.get(type).config(picgo))
+      event.sender.send('getPicBedConfig', config, name)
+    } else {
+      event.sender.send('getPicBedConfig', [], name)
+    }
+    picgo.cmd.program.removeAllListeners()
   })
 }
 

src/renderer/layouts/SettingPage.vue

@@ -56,7 +56,9 @@
         <i class="el-icon-info setting-window" @click="openDialog"></i>
       </el-col>
       <el-col :span="19" :offset="5" style="height: 428px">
-        <router-view></router-view>
+        <transition name="picgo-fade" mode="out-in">
+          <router-view :key="$route.params ? $route.params.type : $route.path"></router-view>
+        </transition>
       </el-col>
     </el-row>
     <el-dialog
@@ -174,10 +176,8 @@ export default {
   created () {
     this.os = process.platform
     this.buildMenu()
-    this.getPicBeds()
+    this.$electron.ipcRenderer.send('getPicBeds')
-    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+    this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
-      this.picBed = picBeds
-    })
   },
   methods: {
     handleSelect (index) {
@@ -195,7 +195,7 @@ export default {
         } else {
           this.$router.push({
             name: 'others',
-            query: {
+            params: {
               type: picBed
             }
           })
@@ -266,8 +266,8 @@ export default {
     openMiniWindow () {
       this.$electron.ipcRenderer.send('openMiniWindow')
     },
-    getPicBeds () {
+    getPicBeds (event, picBeds) {
-      this.$electron.ipcRenderer.send('getPicBeds')
+      this.picBed = picBeds
     }
   },
   beforeRouteEnter: (to, from, next) => {
@@ -276,11 +276,19 @@ export default {
     })
   },
   beforeDestroy () {
-    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
   }
 }
 </script>
 <style lang='stylus'>
+.picgo-fade
+  &-enter,
+  &-leave,
+  &-leave-active
+    opacity 0
+  &-enter-active,
+  &-leave-active
+    transition opacity 100ms linear
 .view-title
   color #eee
   font-size 20px

src/renderer/pages/Gallery.vue

@@ -146,9 +146,8 @@ export default {
         this.filterList = this.getGallery()
       })
     })
-    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+    this.$electron.ipcRenderer.send('getPicBeds')
-      this.picBed = picBeds
+    this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
-    })
     this.getPasteStyle()
     this.getPicBeds()
   },
@@ -163,8 +162,8 @@ export default {
     }
   },
   methods: {
-    getPicBeds () {
+    getPicBeds (event, picBeds) {
-      this.$electron.ipcRenderer.send('getPicBeds')
+      this.picBed = picBeds
     },
     getGallery () {
       if (this.choosedPicBed.length > 0) {
@@ -343,7 +342,7 @@ export default {
   },
   beforeDestroy () {
     this.$electron.ipcRenderer.removeAllListeners('updateGallery')
-    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
   }
 }
 </script>

src/renderer/pages/MiniPage.vue

@@ -39,7 +39,6 @@ export default {
   },
   created () {
     this.os = process.platform
-    this.getPicBeds()
     this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
       if (progress !== -1) {
         this.showProgress = true
@@ -49,10 +48,8 @@ export default {
         this.showError = true
       }
     })
-    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+    this.$electron.ipcRenderer.send('getPicBeds')
-      this.picBed = picBeds
+    this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
-      this.buildMenu()
-    })
   },
   mounted () {
     window.addEventListener('mousedown', this.handleMouseDown, false)
@@ -73,8 +70,9 @@ export default {
     }
   },
   methods: {
-    getPicBeds () {
+    getPicBeds (event, picBeds) {
-      this.$electron.ipcRenderer.send('getPicBeds')
+      this.picBed = picBeds
+      this.buildMenu()
     },
     onDrop (e) {
       this.dragover = false
@@ -183,7 +181,7 @@ export default {
   },
   beforeDestroy () {
     this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
-    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
     window.removeEventListener('mousedown', this.handleMouseDown, false)
     window.removeEventListener('mousemove', this.handleMouseMove, false)
     window.removeEventListener('mouseup', this.handleMouseUp, false)

src/renderer/pages/PicGoSetting.vue

@@ -273,19 +273,17 @@ export default {
     }
   },
   created () {
-    this.getPicBeds()
+    this.$electron.ipcRenderer.send('getPicBeds')
-    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+    this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
+  },
+  methods: {
+    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
@@ -348,6 +346,7 @@ export default {
         return item
       })
       this.$db.read().set('picBed.list', list).write()
+      this.$electron.ipcRenderer.send('getPicBeds')
     },
     handleAutoStartChange (val) {
       this.$db.read().set('settings.autoStart', val).write()
@@ -400,7 +399,7 @@ export default {
     }
   },
   beforeDestroy () {
-    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
   }
 }
 </script>

src/renderer/pages/Plugin.vue

@@ -69,6 +69,9 @@
         </div>
       </el-col>
     </el-row>
+    <el-row v-show="needReload" class="reload-mask" :class="{ 'cut-width': pluginList.length > 6 }">
+      <el-button type="primary" @click="reloadApp" size="mini" round>重启以生效</el-button>
+    </el-row>
     <el-dialog
       :visible.sync="dialogVisible"
       :modal-append-to-body="false"
@@ -107,7 +110,8 @@ export default {
       configName: '',
       dialogVisible: false,
       pluginNameList: [],
-      loading: true
+      loading: true,
+      needReload: false
     }
   },
   computed: {
@@ -152,7 +156,9 @@ export default {
           item.ing = false
           item.hasInstall = true
         }
+        this.getPicBeds()
       })
+      this.handleReload()
       this.getPluginList()
     })
     this.$electron.ipcRenderer.on('uninstallSuccess', (evt, plugin) => {
@@ -160,11 +166,12 @@ export default {
       this.pluginList = this.pluginList.filter(item => {
         if (item.name === plugin) { // restore Uploader & Transformer after uninstalling
           if (item.config.transformer.name) {
-            this.handleRestoreState('transformer')
+            this.handleRestoreState('transformer', item.config.transformer.name)
           }
           if (item.config.uploader.name) {
-            this.handleRestoreState('uploader')
+            this.handleRestoreState('uploader', item.config.uploader.name)
           }
+          this.getPicBeds()
         }
         return item.name !== plugin
       })
@@ -172,6 +179,7 @@ export default {
     })
     this.getPluginList()
     this.getSearchResult = debounce(this.getSearchResult, 50)
+    this.needReload = this.$db.read().get('needReload').value()
   },
   methods: {
     buildContextMenu (plugin) {
@@ -182,6 +190,7 @@ export default {
         click () {
           _this.$db.read().set(`plugins.picgo-plugin-${plugin.name}`, true).write()
           plugin.enabled = true
+          _this.getPicBeds()
         }
       }, {
         label: '禁用插件',
@@ -189,6 +198,13 @@ export default {
         click () {
           _this.$db.read().set(`plugins.picgo-plugin-${plugin.name}`, false).write()
           plugin.enabled = false
+          _this.getPicBeds()
+          if (plugin.config.transformer.name) {
+            _this.handleRestoreState('transformer', plugin.config.transformer.name)
+          }
+          if (plugin.config.uploader.name) {
+            _this.handleRestoreState('uploader', plugin.config.uploader.name)
+          }
         }
       }, {
         label: '卸载插件',
@@ -221,6 +237,9 @@ export default {
     getPluginList () {
       this.$electron.ipcRenderer.send('getPluginList')
     },
+    getPicBeds () {
+      this.$electron.ipcRenderer.send('getPicBeds')
+    },
     installPlugin (item) {
       item.ing = true
       this.$electron.ipcRenderer.send('installPlugin', item.name)
@@ -245,6 +264,16 @@ export default {
       this.$electron.remote.app.relaunch()
       this.$electron.remote.app.exit(0)
     },
+    handleReload () {
+      this.$db.read().set('needReload', true).write()
+      this.needReload = true
+      const successNotification = new window.Notification('更新成功', {
+        body: '请点击此通知重启应用以生效'
+      })
+      successNotification.onclick = () => {
+        this.reloadApp()
+      }
+    },
     cleanSearch () {
       this.searchText = ''
     },
@@ -301,12 +330,19 @@ export default {
       }
     },
     // restore Uploader & Transformer
-    handleRestoreState (item) {
+    handleRestoreState (item, name) {
       if (item === 'uploader') {
-        this.$db.set('picBed.current', 'smms')
+        const current = this.$db.read().get('picBed.current').value()
+        console.log(name)
+        if (current === name) {
+          this.$db.read().set('picBed.current', 'smms').write()
+        }
       }
       if (item === 'transformer') {
-        this.$db.set('picBed.transformer', 'path')
+        const current = this.$db.read().get('picBed.transformer').value()
+        if (current === name) {
+          this.$db.read().set('picBed.transformer', 'path').write()
+        }
       }
     },
     openHomepage (url) {
@@ -433,4 +469,13 @@ export default {
         &:hover
           background: #1B9EF3
           color #fff
+  .reload-mask
+    position absolute
+    width calc(100% - 40px)
+    bottom -320px
+    text-align center
+    background rgba(0,0,0,0.4)
+    padding 10px 0
+    &.cut-width
+      width calc(100% - 48px)
 </style>

src/renderer/pages/Upload.vue

@@ -84,11 +84,8 @@ export default {
     this.$electron.ipcRenderer.on('syncPicBed', () => {
       this.getDefaultPicBed()
     })
-    this.getPicBeds()
+    this.$electron.ipcRenderer.send('getPicBeds')
-    this.$electron.ipcRenderer.on('getPicBeds', (event, picBeds) => {
+    this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
-      this.picBed = picBeds
-      this.getDefaultPicBed()
-    })
   },
   watch: {
     progress (val) {
@@ -106,7 +103,7 @@ export default {
   beforeDestroy () {
     this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
     this.$electron.ipcRenderer.removeAllListeners('syncPicBed')
-    this.$electron.ipcRenderer.removeAllListeners('getPicBeds')
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
   },
   methods: {
     onDrop (e) {
@@ -149,8 +146,9 @@ export default {
         }
       })
     },
-    getPicBeds () {
+    getPicBeds (event, picBeds) {
-      this.$electron.ipcRenderer.send('getPicBeds')
+      this.picBed = picBeds
+      this.getDefaultPicBed()
     }
   }
 }

src/renderer/pages/picbeds/Others.vue

@@ -6,6 +6,7 @@
           {{ picBedName }}设置
         </div>
         <config-form
+          v-if="config.length > 0"
           :config="config"
           type="uploader"
           ref="configForm"
@@ -17,7 +18,10 @@
             </el-button-group>
           </el-form-item>
         </config-form>
-
+        <div v-else class="single">
+          <div class="notice">暂无配置项</div>
+          <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type" size="mini">设为默认图床</el-button>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -38,15 +42,10 @@ export default {
       picBedName: ''
     }
   },
-  beforeRouteEnter (to, from, next) {
+  created () {
-    next(vm => {
+    this.type = this.$route.params.type
-      vm.type = to.query.type
+    this.$electron.ipcRenderer.send('getPicBedConfig', this.$route.params.type)
-      vm.$electron.ipcRenderer.send('getPicBedConfig', to.query.type)
+    this.$electron.ipcRenderer.on('getPicBedConfig', this.getPicBeds)
-      vm.$electron.ipcRenderer.on('getPicBedConfig', (event, config, name) => {
-        vm.config = config
-        vm.picBedName = name
-      })
-    })
   },
   methods: {
     async handleConfirm () {
@@ -71,10 +70,14 @@ export default {
       successNotification.onclick = () => {
         return true
       }
+    },
+    getPicBeds (event, config, name) {
+      this.config = config
+      this.picBedName = name
     }
   },
   beforeDestroy () {
-    this.$electron.ipcRenderer.removeAllListeners('getPicBedConfig')
+    this.$electron.ipcRenderer.removeListener('getPicBedConfig', this.getPicBeds)
   }
 }
 </script>
@@ -97,4 +100,10 @@ export default {
       color #eee
       &.is-active
         color #409EFF
+  .notice
+    color #eee
+    text-align center
+    margin-bottom 10px
+  .single
+    text-align center
 </style>

src/renderer/router/index.js

@@ -71,7 +71,7 @@ export default new Router({
           name: 'imgur'
         },
         {
-          path: 'others',
+          path: 'others/:type',
           component: require('@/pages/picbeds/Others').default,
           name: 'others'
         },