Partly finished: weibo picbed

2025-01-22 22:28:14 -05:00 · 2017-11-28 23:56:15 +08:00 · 2017-11-28 23:56:15 +08:00 · 4dd6586cb4
commit 4dd6586cb4
parent 3814125986
9 changed files with 318 additions and 50 deletions
--- a/src/main/index.js
+++ b/src/main/index.js
@ -2,7 +2,8 @@

 import { weiboUpload } from './utils/weiboUpload.js'
 import { app, BrowserWindow, Tray, Menu, Notification, clipboard, ipcMain } from 'electron'
-import db from '../datastore/index'
+import db from '../datastore'
+import pasteTemplate from './utils/pasteTemplate'
 /**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
@ -29,7 +30,7 @@ function createTray () {
      label: 'Quit'
    },
    {
-      label: 'Open setting Window',
+      label: '打开详细窗口',
      click () {
        if (settingWindow === null) {
          createSettingWindow()
@ -38,6 +39,26 @@ function createTray () {
          settingWindow.focus()
        }
      }
+    },
+    {
+      label: '选择默认图床',
+      type: 'submenu',
+      submenu: [
+        {
+          label: '微博图床',
+          type: 'radio',
+          checked: db.read().get('picBed.current').value() === 'weibo'
+        },
+        {
+          label: '七牛图床',
+          type: 'radio',
+          checked: db.read().get('picBed.current').value() === 'qiniu',
+          click () {
+            db.read().set('picBed.current', 'qiniu')
+              .write()
+          }
+        }
+      ]
    }
  ])
  tray.on('right-click', () => {
@ -69,9 +90,10 @@ function createTray () {
  })

  tray.on('drop-files', async (event, files) => {
-    const imgs = await weiboUpload(files, 'imgFromPath')
+    const pasteStyle = db.read().get('picBed.pasteStyle') || 'markdown'
+    const imgs = await weiboUpload(files, 'imgFromPath', window.webContents)
    for (let i in imgs) {
-      clipboard.writeText(imgs[i].imgUrl)
+      clipboard.writeText(pasteTemplate(pasteStyle, imgs[i].imgUrl))
      const notification = new Notification({
        title: '上传成功',
        body: imgs[i].imgUrl,
@ -81,7 +103,6 @@ function createTray () {
        notification.show()
      }, i * 100)
    }
-    console.log('drag-files')
    window.webContents.send('dragFiles', imgs)
  })
  toggleWindow()
@ -160,15 +181,6 @@ const toggleWindow = () => {
  }
 }

-// const toggleSettingWindow = () => {
-//   if (settingWindow.isVisible()) {
-//     settingWindow.hide()
-//   } else {
-//     settingWindow.show()
-//     settingWindow.focus()
-//   }
-// }
-
 const showWindow = () => {
  const position = getWindowPosition()
  window.setPosition(position.x, position.y, false)
@ -177,8 +189,9 @@ const showWindow = () => {
 }

 ipcMain.on('uploadClipboardFiles', async (evt, file) => {
-  const img = await weiboUpload(file, 'imgFromClipboard')
-  clipboard.writeText(img[0].imgUrl)
+  const img = await weiboUpload(file, 'imgFromClipboard', window.webContents)
+  const pasteStyle = db.read().get('picBed.pasteStyle') || 'markdown'
+  clipboard.writeText(pasteTemplate(pasteStyle, img[0].imgUrl))
  const notification = new Notification({
    title: '上传成功',
    body: img[0].imgUrl,
@ -187,8 +200,26 @@ ipcMain.on('uploadClipboardFiles', async (evt, file) => {
  notification.show()
  clipboard.clear()
  window.webContents.send('clipboardFiles', [])
-  window.webContents.send('uploadClipboardFiles', img)
-  console.log('clipboard-upload')
+  window.webContents.send('uploadFiles', img)
+})
+
+ipcMain.on('uploadChoosedFiles', async (evt, files) => {
+  const imgs = await weiboUpload(files, 'imgFromUploader', settingWindow.webContents)
+  const pasteStyle = db.read().get('picBed.pasteStyle') || 'markdown'
+  let pasteText = ''
+  for (let i in imgs) {
+    pasteText += pasteTemplate(pasteStyle, imgs[i].imgUrl) + '\r\n'
+    const notification = new Notification({
+      title: '上传成功',
+      body: imgs[i].imgUrl,
+      icon: files[i].path
+    })
+    setTimeout(() => {
+      notification.show()
+    }, i * 100)
+  }
+  clipboard.writeText(pasteText)
+  window.webContents.send('uploadFiles', imgs)
 })

 app.on('ready', () => {
--- a/src/main/utils/img2base64.js
+++ b/src/main/utils/img2base64.js
@ -29,7 +29,26 @@ const imgFromClipboard = (file) => {
  return result
 }

+const imgFromUploader = async (files) => {
+  console.log(files)
+  let results = []
+  await Promise.all(files.map(async item => {
+    let buffer = await fs.readFile(item.path)
+    let base64Image = Buffer.from(buffer, 'binary').toString('base64')
+    let fileName = item.name
+    let imgSize = sizeOf(item.path)
+    results.push({
+      base64Image,
+      fileName,
+      width: imgSize.width,
+      height: imgSize.height
+    })
+  }))
+  return results
+}
+
 export {
  imgFromPath,
-  imgFromClipboard
+  imgFromClipboard,
+  imgFromUploader
 }
--- a/src/main/utils/pasteTemplate.js
+++ b/src/main/utils/pasteTemplate.js
@ -0,0 +1,9 @@
+export default (style, url) => {
+  const tpl = {
+    'markdown': `![](${url})`,
+    'HTML': `<img src="${url}"/>`,
+    'URL': url,
+    'UBB': `[IMG]${url}[/IMG]`
+  }
+  return tpl[style]
+}
--- a/src/main/utils/weiboUpload.js
+++ b/src/main/utils/weiboUpload.js
@ -20,35 +20,39 @@ function postOptions (formData) {
  }
 }

-const weiboUpload = async function (img, type) {
+const weiboUpload = async function (img, type, webContents) {
  try {
+    webContents.send('uploadProgress', 0)
    const formData = {
      username: db.read().get('picBed.weibo.username').value(),
      password: db.read().get('picBed.weibo.password').value()
    }
+    const quality = db.read().get('picBed.weibo.quality').value()
    const options = postOptions(formData)
    const res = await rp(options)
+    webContents.send('uploadProgress', 30)
    if (res.body.retcode === 20000000) {
      for (let i in res.body.data.crossdomainlist) {
        await rp.get(res.body.data.crossdomainlist[i])
      }
+      webContents.send('uploadProgress', 60)
      const imgList = await img2Base64[type](img)
-      let resText = []
      for (let i in imgList) {
        let result = await rp.post(UPLOAD_URL, {
          formData: {
            b64_data: imgList[i].base64Image
          }
        })
-        resText.push(result.replace(/<.*?\/>/, '').replace(/<(\w+).*?>.*?<\/\1>/, ''))
-      }
-      for (let i in imgList) {
-        const resTextJson = JSON.parse(resText[i])
-        imgList[i]['imgUrl'] = `https://ws1.sinaimg.cn/large/${resTextJson.data.pics.pic_1.pid}`
+        result = result.replace(/<.*?\/>/, '').replace(/<(\w+).*?>.*?<\/\1>/, '')
        delete imgList[i].base64Image
+        const resTextJson = JSON.parse(result)
+        imgList[i]['imgUrl'] = `https://ws1.sinaimg.cn/${quality}/${resTextJson.data.pics.pic_1.pid}`
+        imgList[i]['type'] = 'weibo'
      }
+      webContents.send('uploadProgress', 100)
      return imgList
    } else {
+      webContents.send('uploadProgress', -1)
      const notification = new Notification({
        title: '上传失败！',
        body: res.body.msg
@ -56,7 +60,12 @@ const weiboUpload = async function (img, type) {
      notification.show()
    }
  } catch (err) {
-    console.log('This is error', err, err.name === 'RequestError')
+    webContents.send('uploadProgress', -1)
+    const notification = new Notification({
+      title: '上传失败！',
+      body: '服务端出错，请重试'
+    })
+    notification.show()
    throw new Error(err)
  }
 }
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@ -17,4 +17,7 @@
    margin 0
    height 100%
    font-family "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
+  #app
+    overflow-x hidden
+    user-select none
 </style>
--- a/src/renderer/components/SettingView/Upload.vue
+++ b/src/renderer/components/SettingView/Upload.vue
@ -1,17 +1,169 @@
 <template>
  <div id="upload-view">
-    upload
+    <el-row :gutter="16">
+      <el-col :span="16" :offset="4">
+        <div class="view-title">
+          图片上传
+        </div>
+        <div
+          id="upload-area"
+          :class="{ 'is-dragover': dragover }" @drop.prevent="onDrop" @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
+        >
+          <div id="upload-dragger" @click="openUplodWindow">
+            <i class="el-icon-upload"></i>
+            <div class="upload-dragger__text">
+              将文件拖到此处，或 <span>点击上传</span>
+            </div>
+            <input type="file" id="file-uploader" @change="onChange" multiple>
+          </div>
+        </div>
+        <el-progress 
+          :percentage="progress" 
+          :show-text="false" 
+          class="upload-progress"
+          :class="{ 'show': showProgress }"
+          :status="showError ? 'exception' : ''"
+        ></el-progress>
+        <div class="paste-style">
+          <div class="paste-style__text">
+            链接格式
+          </div>
+          <el-radio-group v-model="pasteStyle" size="mini"
+            @change="handlePasteStyleChange"
+          >
+            <el-radio-button label="markdown">
+              Markdown
+            </el-radio-button>
+            <el-radio-button label="HTML">          </el-radio-button>
+            <el-radio-button label="URL">           </el-radio-button>
+            <el-radio-button label="UBB">            </el-radio-button>
+          </el-radio-group>
+        </div>
+      </el-col>
+    </el-row>
  </div>
 </template>
 <script>
+import mixin from '../mixin'
 export default {
  name: 'upload',
+  mixins: [mixin],
  data () {
    return {
-      msg: '123'
+      dragover: false,
+      progress: 0,
+      showProgress: false,
+      showError: false,
+      pasteStyle: ''
+    }
+  },
+  mounted () {
+    this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
+      if (progress !== -1) {
+        this.showProgress = true
+        this.progress = progress
+      } else {
+        this.progress = 100
+        this.showError = true
+      }
+    })
+    this.getPasteStyle()
+  },
+  watch: {
+    progress (val) {
+      if (val === 100) {
+        setTimeout(() => {
+          this.showProgress = false
+          this.showError = false
+        }, 1000)
+        setTimeout(() => {
+          this.progress = 0
+        }, 1200)
+      }
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
+  },
+  methods: {
+    onDrop (e) {
+      this.dragover = false
+      this.ipcSendFiles(e.dataTransfer.files)
+    },
+    openUplodWindow () {
+      document.getElementById('file-uploader').click()
+    },
+    onChange (e) {
+      this.ipcSendFiles(e.target.files)
+      document.getElementById('file-uploader').value = ''
+    },
+    ipcSendFiles (files) {
+      let sendFiles = []
+      Array.from(files).forEach((item, index) => {
+        let obj = {
+          name: item.name,
+          path: item.path
+        }
+        sendFiles.push(obj)
+      })
+      this.$electron.ipcRenderer.send('uploadChoosedFiles', sendFiles)
+    },
+    getPasteStyle () {
+      this.pasteStyle = this.$db.get('picBed.pasteStyle').value() || 'markdown'
+    },
+    handlePasteStyleChange (val) {
+      this.$db.set('picBed.pasteStyle', val)
+        .write()
    }
  }
 }
 </script>
 <style lang='stylus'>
+.view-title
+  color #eee
+  font-size 20px
+  text-align center
+  margin 20px auto
+#upload-view
+  #upload-area
+    height 220px
+    border 2px dashed #dddddd
+    border-radius 8px
+    text-align center
+    color #dddddd
+    cursor pointer
+    transition all .2s ease-in-out
+    #upload-dragger
+      height 100%
+    &.is-dragover,
+    &:hover
+      border 2px dashed #A4D8FA
+      background-color rgba(164, 216, 250, 0.3)
+      color #fff
+    i
+      font-size 66px
+      margin 50px 0 16px
+      line-height 66px
+    span
+      color #409EFF
+  #file-uploader
+    display none
+  .upload-progress
+    margin-top 20px
+    opacity 0
+    transition all .2s ease-in-out
+    &.show
+      opacity 1
+    .el-progress-bar__inner
+      transition all .2s ease-in-out
+  .paste-style
+    text-align center
+    margin-top 16px
+    &__text
+      font-size 12px
+      color #eeeeee
+      margin-bottom 4px
+  .el-radio-button:first-child
+    .el-radio-button__inner
+      border-left none
 </style>
--- a/src/renderer/components/SettingView/Weibo.vue
+++ b/src/renderer/components/SettingView/Weibo.vue
@ -16,7 +16,7 @@
            :rules="{
              required: true, message: '用户名不能为空', trigger: 'blur'
            }">
-            <el-input v-model="form.username" placeholder="用户名"></el-input>
+            <el-input v-model="form.username" placeholder="用户名" @keyup.native.enter="confirm('weiboForm')"></el-input>
          </el-form-item>
          <el-form-item
            label="设定密码"
@ -24,7 +24,14 @@
            :rules="{
              required: true, message: '密码不能为空', trigger: 'blur'
            }">
-            <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
+            <el-input v-model="form.password" type="password" @keyup.native.enter="confirm('weiboForm')" placeholder="密码"></el-input>
+          </el-form-item>
+          <el-form-item label="* 图片质量">
+            <el-radio-group v-model="quality">
+              <el-radio label="thumbnail">缩略图</el-radio>
+              <el-radio label="mw690">中等尺寸</el-radio>
+              <el-radio label="large">原图</el-radio>
+            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="confirm('weiboForm')">确定</el-button>
@ -35,22 +42,25 @@
  </div>
 </template>
 <script>
+import mixin from '../mixin'
 export default {
  name: 'weibo',
+  mixins: [mixin],
  data () {
    return {
      form: {
        username: '',
        password: ''
-      }
+      },
+      quality: 'large'
    }
  },
  created () {
-    const account = this.$db.get('picBed.weibo').value()
-    console.log(account)
-    if (account) {
-      this.form.username = account.username
-      this.form.password = account.password
+    const config = this.$db.get('picBed.weibo').value()
+    if (config) {
+      this.form.username = config.username
+      this.form.password = config.password
+      this.quality = config.quality || 'large'
    }
  },
  methods: {
@ -59,13 +69,15 @@ export default {
        if (valid) {
          this.$db.set('picBed.weibo', {
            username: this.form.username,
-            password: this.form.password
+            password: this.form.password,
+            quality: this.quality
          }).write()
-          console.log(this.$db.get('picBed.weibo').value())
-          this.$message({
-            type: 'success',
-            message: '设置成功'
+          const successNotification = new window.Notification('设置结果', {
+            body: '设置成功'
          })
+          successNotification.onclick = () => {
+            return true
+          }
        } else {
          return false
        }
@ -77,12 +89,12 @@ export default {
 <style lang='stylus'>
 .el-message
  left 60%
+.view-title
+  color #eee
+  font-size 20px
+  text-align center
+  margin 20px auto
 #weibo-view
-  .view-title
-    color #eee
-    font-size 20px
-    text-align center
-    margin 20px auto
  .el-form
    label  
      line-height 22px
@ -90,5 +102,9 @@ export default {
      color #eee
    .el-button
      width 100%
-      margin-top 10px  
+      border-radius 19px
+    .el-input__inner
+      border-radius 19px
+    .el-radio-group
+      margin-left 25px
 </style>
--- a/src/renderer/components/TrayPage.vue
+++ b/src/renderer/components/TrayPage.vue
@ -1,5 +1,6 @@
 <template>
  <div id="tray-page">
+    <!-- <div class="header-arrow"></div> -->
    <div class="content">
      <div class="wait-upload-img" v-if="clipboardFiles.length > 0">
        <div class="list-title">等待上传</div>
@ -55,6 +56,11 @@
        this.files = this.$db.get('uploaded').slice().reverse().slice(0, 5).value()
      })
    },
+    beforeDestroy () {
+      this.$electron.ipcRenderer.removeAllListeners('dragFiles')
+      this.$electron.ipcRenderer.removeAllListeners('clipboardFiles')
+      this.$electron.ipcRenderer.removeAllListeners('uploadClipboardFiles')
+    },
    methods: {
      getData () {
        this.files = this.$db.get('uploaded').slice().reverse().slice(0, 5).value()
@ -117,8 +123,6 @@
    position absolute
    top 0px
    width 100%
-    // padding-top 10px
-    // background-color rgba(255,255,255, 1)
  .img-list
    padding 16px 8px
    display flex
--- a/src/renderer/components/mixin.js
+++ b/src/renderer/components/mixin.js
@ -0,0 +1,25 @@
+export default {
+  mounted () {
+    this.disableDragEvent()
+  },
+  methods: {
+    disableDragEvent () {
+      window.addEventListener('dragenter', this.disableDrag, false)
+      window.addEventListener('dragover', this.disableDrag)
+      window.addEventListener('drop', this.disableDrag)
+    },
+    disableDrag (e) {
+      const dropzone = document.getElementById('upload-area')
+      if (dropzone === null || !dropzone.contains(e.target)) {
+        e.preventDefault()
+        e.dataTransfer.effectAllowed = 'none'
+        e.dataTransfer.dropEffect = 'none'
+      }
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('dragenter', this.disableDrag, false)
+    window.removeEventListener('dragover', this.disableDrag)
+    window.removeEventListener('drop', this.disableDrag)
+  }
+}