🚧 WIP: add support for URL uploading

package.json

@@ -3,8 +3,8 @@
   "version": "2.2.2",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service electron:serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service electron:build",
     "lint": "vue-cli-service lint",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",

src/main.ts

@@ -8,6 +8,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import VueLazyLoad from 'vue-lazyload'
 import axios from 'axios'
 import mainMixin from './renderer/utils/mainMixin'
+import bus from '@/utils/bus'
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 webFrame.setLayoutZoomLevelLimits(0, 0)
@@ -25,6 +26,7 @@ Vue.prototype.$builtInPicBed = [
 ]
 Vue.prototype.$db = db
 Vue.prototype.$http = axios
+Vue.prototype.$bus = bus
 
 Vue.use(ElementUI)
 Vue.use(VueLazyLoad)

src/main/apis/gui/index.ts

@@ -12,6 +12,9 @@ import {
   getWindowId,
   getSettingWindowId
 } from '~/main/apis/bus'
+import {
+  SHOW_INPUT_BOX
+} from '~/universal/events/constants'
 
 class GuiApi implements IGuiApi {
   private windowId: number = -1
@@ -40,9 +43,9 @@ class GuiApi implements IGuiApi {
   }) {
     await this.showSettingWindow()
     this.getWebcontentsByWindowId(this.settingWindowId)
-      .send('showInputBox', options)
+      .send(SHOW_INPUT_BOX, options)
     return new Promise<string>((resolve, reject) => {
-      ipcMain.once('showInputBox', (event: Event, value: string) => {
+      ipcMain.once(SHOW_INPUT_BOX, (event: Event, value: string) => {
         resolve(value)
       })
     })

src/renderer/components/InputBoxDialog.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-dialog
+    :title="inputBoxOptions.title || '输入框'"
+    :visible.sync="showInputBoxVisible"
+    :modal-append-to-body="false"
+    @close="handleInputBoxClose"
+  >
+    <el-input
+      v-model="inputBoxValue"
+      :placeholder="inputBoxOptions.placeholder"></el-input>
+    <span slot="footer">
+      <el-button @click="showInputBoxVisible = false" round>取消</el-button>
+      <el-button type="primary" @click="showInputBoxVisible = false" round>确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { remote, ipcRenderer, IpcRendererEvent } from 'electron'
+import {
+  SHOW_INPUT_BOX,
+  SHOW_INPUT_BOX_RESPONSE
+} from '~/universal/events/constants'
+@Component({
+  name: 'input-box-dialog'
+})
+export default class extends Vue {
+  inputBoxValue = ''
+  showInputBoxVisible = false
+  inputBoxOptions = {
+    title: '',
+    placeholder: ''
+  }
+  created () {
+    ipcRenderer.on(SHOW_INPUT_BOX, this.ipcEventHandler)
+    this.$bus.$on(SHOW_INPUT_BOX, this.initInputBoxValue)
+  }
+  ipcEventHandler (evt: IpcRendererEvent, options: IShowInputBoxOption) {
+    this.initInputBoxValue(options)
+  }
+  initInputBoxValue (options: IShowInputBoxOption) {
+    this.inputBoxValue = ''
+    this.inputBoxOptions.title = options.title || ''
+    this.inputBoxOptions.placeholder = options.placeholder || ''
+    this.showInputBoxVisible = true
+  }
+  handleInputBoxClose () {
+    // TODO: RPCServer
+    ipcRenderer.send(SHOW_INPUT_BOX, this.inputBoxValue)
+    this.$bus.$emit(SHOW_INPUT_BOX_RESPONSE, this.inputBoxValue)
+  }
+  beforeDestroy () {
+    ipcRenderer.removeListener(SHOW_INPUT_BOX, this.ipcEventHandler)
+    this.$bus.$off(SHOW_INPUT_BOX)
+  }
+}
+</script>
+<style lang='stylus'>
+</style>

src/renderer/layouts/SettingPage.vue

@@ -120,20 +120,7 @@
         <el-button type="primary" @click="confirmCustomLink">确定</el-button>
       </span>
     </el-dialog>
-    <el-dialog
+    <input-box-dialog />
-      :title="inputBoxOptions.title || '输入框'"
-      :visible.sync="showInputBoxVisible"
-      :modal-append-to-body="false"
-      @close="handleInputBoxClose"
-    >
-      <el-input
-        v-model="inputBoxValue"
-        :placeholder="inputBoxOptions.placeholder"></el-input>
-      <span slot="footer">
-        <el-button @click="showInputBoxVisible = false" round>取消</el-button>
-        <el-button type="primary" @click="showInputBoxVisible = false" round>确定</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 <script lang="ts">
@@ -143,6 +130,7 @@ import keyDetect from '@/utils/key-binding'
 import { remote, ipcRenderer, IpcRendererEvent } from 'electron'
 import db from '#/datastore'
 import mixin from '@/utils/mixin'
+import InputBoxDialog from '@/components/InputBoxDialog.vue'
 const { Menu, dialog, BrowserWindow } = remote
 const customLinkRule = (rule: string, value: string, callback: (arg0?: Error) => void) => {
   if (!/\$url/.test(value)) {
@@ -153,7 +141,10 @@ const customLinkRule = (rule: string, value: string, callback: (arg0?: Error) =>
 }
 @Component({
   name: 'setting-page',
-  mixins: [mixin]
+  mixins: [mixin],
+  components: {
+    InputBoxDialog
+  }
 })
 export default class extends Vue {
   version = process.env.NODE_ENV === 'production' ? pkg.version : 'Dev'
@@ -175,24 +166,11 @@ export default class extends Vue {
     upload: db.get('shortKey.upload')
   }
   picBed: IPicBedType[] = []
-  // for showInputBox
-  showInputBoxVisible = false
-  inputBoxValue = ''
-  inputBoxOptions = {
-    title: '',
-    placeholder: ''
-  }
   created () {
     this.os = process.platform
     this.buildMenu()
     ipcRenderer.send('getPicBeds')
     ipcRenderer.on('getPicBeds', this.getPicBeds)
-    ipcRenderer.on('showInputBox', (evt: IpcRendererEvent, options: IShowInputBoxOption) => {
-      this.inputBoxValue = ''
-      this.inputBoxOptions.title = options.title || ''
-      this.inputBoxOptions.placeholder = options.placeholder || ''
-      this.showInputBoxVisible = true
-    })
   }
   handleSelect (index: string) {
     const type = index.match(/picbeds-/)
@@ -279,9 +257,6 @@ export default class extends Vue {
   getPicBeds (event: IpcRendererEvent, picBeds: IPicBedType[]) {
     this.picBed = picBeds
   }
-  handleInputBoxClose () {
-    ipcRenderer.send('showInputBox', this.inputBoxValue)
-  }
   beforeRouteEnter (to: any, from: any, next: any) {
     next((vm: this) => {
       vm.defaultActive = to.name
@@ -289,7 +264,6 @@ export default class extends Vue {
   }
   beforeDestroy () {
     ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
-    ipcRenderer.removeAllListeners('showInputBox')
   }
 }
 </script>

src/renderer/pages/Upload.vue

@@ -48,7 +48,8 @@
             <div class="paste-style__text">
               快捷上传
             </div>
-            <el-button type="primary" round size="mini" @click="uploadClipboardFiles" class="paste-upload">剪贴板图片上传</el-button>
+            <el-button type="primary" round size="mini" @click="uploadClipboardFiles" class="quick-upload">剪贴板</el-button>
+            <el-button type="primary" round size="mini" @click="uploadURLFiles" class="quick-upload">URL</el-button>
           </div>
         </div>
       </el-col>
@@ -62,6 +63,10 @@ import {
   IpcRendererEvent,
   remote
 } from 'electron'
+import {
+  SHOW_INPUT_BOX,
+  SHOW_INPUT_BOX_RESPONSE
+} from '~/universal/events/constants'
 const { Menu } = remote
 @Component({
   name: 'upload'
@@ -92,6 +97,7 @@ export default class extends Vue {
     })
     ipcRenderer.send('getPicBeds')
     ipcRenderer.on('getPicBeds', this.getPicBeds)
+    this.$bus.$on(SHOW_INPUT_BOX_RESPONSE, this.handleInputBoxValue)
   }
   @Watch('progress')
   onProgressChange (val: number) {
@@ -141,6 +147,22 @@ export default class extends Vue {
   uploadClipboardFiles () {
     ipcRenderer.send('uploadClipboardFilesFromUploadPage')
   }
+  uploadURLFiles () {
+    this.$bus.$emit(SHOW_INPUT_BOX, {
+      title: '请输入URL',
+      placeholder: 'http://或者https://开头'
+    })
+  }
+  handleInputBoxValue (val: string) {
+    if (val === '') return false
+    if (val.includes('http://') || val.includes('https://')) {
+      ipcRenderer.send('uploadChoosedFiles', {
+        path: val
+      })
+    } else {
+      this.$message.error('请输入合法的URL')
+    }
+  }
   getDefaultPicBed () {
     const current: string = this.$db.get('picBed.current')
     this.picBed.forEach(item => {
@@ -239,8 +261,8 @@ export default class extends Vue {
     .el-radio-button__inner
       border-left none
       border-radius 0 14px 14px 0
-  .paste-upload
+  .quick-upload
-    width 100%
+    width 46%
   .el-icon-caret-bottom
     cursor pointer
 </style>

src/renderer/utils/bus.ts

@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()

src/universal/events/constants.ts

@@ -0,0 +1,2 @@
+export const SHOW_INPUT_BOX = 'SHOW_INPUT_BOX'
+export const SHOW_INPUT_BOX_RESPONSE = 'SHOW_INPUT_BOX_RESPONSE'

src/universal/types/extra-vue.d.ts

@@ -8,6 +8,7 @@ declare module 'vue/types/vue' {
     $db: typeof db
     $http: typeof axios
     $builtInPicBed: string[]
+    $bus: Vue
     letPicGoSaveData(data: IObj): void
   }
 }