Partly finished: weibo picbed

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>

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>