Finished: other picbed page

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
-  },
-  mounted () {
+    this.getPicBeds()
     this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
       if (progress !== -1) {
         this.showProgress = true
@@ -50,7 +49,12 @@ export default {
         this.showError = true
       }
     })
-    this.buildMenu()
+    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.form.showPicBedList = this.picBed.map(item => {
-      if (item.visible) {
-        return item.name
-      }
+    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 
-          ref="imgur"
-          label-position="right"
-          label-width="120px"
-          :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>
+        <config-form
+          :config="config"
+          type="uploader"
+          ref="configForm"
+        >
           <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>