2.0.5

.electron-vue/build.js

@@ -12,7 +12,7 @@ const Multispinner = require('multispinner')
 
 const mainConfig = require('./webpack.main.config')
 const rendererConfig = require('./webpack.renderer.config')
-const webConfig = require('./webpack.web.config')
+// const webConfig = require('./webpack.web.config')
 
 const doneLog = chalk.bgGreen.white(' DONE ') + ' '
 const errorLog = chalk.bgRed.white(' ERROR ') + ' '
@@ -72,6 +72,7 @@ function build () {
 
 function pack (config) {
   return new Promise((resolve, reject) => {
+    config.mode = 'production'
     webpack(config, (err, stats) => {
       if (err) reject(err.stack || err)
       else if (stats.hasErrors()) {
@@ -97,19 +98,20 @@ function pack (config) {
   })
 }
 
-function web () {
-  del.sync(['dist/web/*', '!.gitkeep'])
-  webpack(webConfig, (err, stats) => {
-    if (err || stats.hasErrors()) console.log(err)
+// function web () {
+//   del.sync(['dist/web/*', '!.gitkeep'])
+//   webConfig.mode = 'production'
+//   webpack(webConfig, (err, stats) => {
+//     if (err || stats.hasErrors()) console.log(err)
 
-    console.log(stats.toString({
-      chunks: false,
-      colors: true
-    }))
+//     console.log(stats.toString({
+//       chunks: false,
+//       colors: true
+//     }))
 
-    process.exit()
-  })
-}
+//     process.exit()
+//   })
+// }
 
 function greeting () {
   const cols = process.stdout.columns

.electron-vue/dev-runner.js

@@ -41,21 +41,21 @@ function logStats (proc, data) {
 function startRenderer () {
   return new Promise((resolve, reject) => {
     rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
-
+    rendererConfig.mode = 'development'
     const compiler = webpack(rendererConfig)
-    hotMiddleware = webpackHotMiddleware(compiler, { 
-      log: false, 
-      heartbeat: 2500 
+    hotMiddleware = webpackHotMiddleware(compiler, {
+      log: false,
+      heartbeat: 2500
     })
 
-    compiler.plugin('compilation', compilation => {
-      compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
+    compiler.hooks.compilation.tap('compilation', compilation => {
+      compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
         hotMiddleware.publish({ action: 'reload' })
         cb()
       })
     })
 
-    compiler.plugin('done', stats => {
+    compiler.hooks.done.tap('done', stats => {
       logStats('Renderer', stats)
     })
 
@@ -80,10 +80,10 @@ function startRenderer () {
 function startMain () {
   return new Promise((resolve, reject) => {
     mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
-
+    mainConfig.mode = 'development'
     const compiler = webpack(mainConfig)
 
-    compiler.plugin('watch-run', (compilation, done) => {
+    compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
       logStats('Main', chalk.white.bold('compiling...'))
       hotMiddleware.publish({ action: 'compiling' })
       done()
@@ -114,8 +114,20 @@ function startMain () {
 }
 
 function startElectron () {
-  electronProcess = spawn(electron, ['--inspect=5858', path.join(__dirname, '../dist/electron/main.js')])
+  var args = [
+    '--inspect=5858',
+    path.join(__dirname, '../dist/electron/main.js')
+  ]
 
+  // detect yarn or npm and process commandline args accordingly
+  if (process.env.npm_execpath.endsWith('yarn.js')) {
+    args = args.concat(process.argv.slice(3))
+  } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
+    args = args.concat(process.argv.slice(2))
+  }
+
+  electronProcess = spawn(electron, args)
+  
   electronProcess.stdout.on('data', data => {
     electronLog(data, 'blue')
   })

.electron-vue/webpack.docs.config.js

@@ -1,9 +1,11 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
 const webpack = require('webpack')
 
 module.exports = {
+  mode: 'development',
   context: path.resolve(__dirname, '../docs'),
   entry: './main.js',
   output: {
@@ -28,12 +30,20 @@ module.exports = {
           }
         }
       },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'stylus-loader'
+        ]
+      },
+      {
+        test: /\.pug$/, loader: "pug-plain-loader"
+      },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader'
-        })
+        use: ['vue-style-loader', 'css-loader']
       },
       {
         test: /\.html$/,
@@ -85,28 +95,24 @@ module.exports = {
     ]
   },
   plugins: [
+    new VueLoaderPlugin(),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, '../docs/template.html')
     }),
-    new ExtractTextPlugin("styles.css")
+    new MiniCssExtractPlugin({filename: 'styles.css'}),
   ]
 }
 
 if (process.env.NODE_ENV === 'production') {
   // module.exports.devtool = '#source-map'
   // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.mode = 'production'
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
     })

.electron-vue/webpack.main.config.js

@@ -6,14 +6,14 @@ const path = require('path')
 const { dependencies } = require('../package.json')
 const webpack = require('webpack')
 
-const babelMinifyWebpackPlugin = require('babel-minify-webpack-plugin')
+const BabiliWebpackPlugin = require('babili-webpack-plugin')
 
 let mainConfig = {
   entry: {
     main: path.join(__dirname, '../src/main/index.js')
   },
   externals: [
-    // ...Object.keys(dependencies || {})
+    ...Object.keys(dependencies || {})
   ],
   module: {
     rules: [
@@ -73,7 +73,7 @@ if (process.env.NODE_ENV !== 'production') {
  */
 if (process.env.NODE_ENV === 'production') {
   mainConfig.plugins.push(
-    new babelMinifyWebpackPlugin(),
+    new BabiliWebpackPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"'
     })

.electron-vue/webpack.renderer.config.js

@@ -8,8 +8,9 @@ const webpack = require('webpack')
 
 const BabiliWebpackPlugin = require('babili-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 
 /**
  * List of node_modules to include in webpack bundle
@@ -41,12 +42,21 @@ let rendererConfig = {
           }
         }
       },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'stylus-loader'
+        ]
+      },
+      {
+        test: /\.less$/,
+        use: ['vue-style-loader', 'css-loader', 'less-loader']
+      },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader'
-        })
+        use: ['vue-style-loader', 'css-loader']
       },
       {
         test: /\.html$/,
@@ -69,7 +79,9 @@ let rendererConfig = {
             extractCSS: process.env.NODE_ENV === 'production',
             loaders: {
               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-              scss: 'vue-style-loader!css-loader!sass-loader'
+              scss: 'vue-style-loader!css-loader!sass-loader',
+              less: 'vue-style-loader!css-loader!less-loader',
+              stylus: 'vue-style-loader!css-loader!stylus-loader'
             }
           }
         }
@@ -109,7 +121,8 @@ let rendererConfig = {
     __filename: process.env.NODE_ENV !== 'production'
   },
   plugins: [
-    new ExtractTextPlugin('styles.css'),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({filename: 'styles.css'}),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: path.resolve(__dirname, '../src/index.ejs'),
@@ -133,7 +146,10 @@ let rendererConfig = {
   resolve: {
     alias: {
       '@': path.join(__dirname, '../src/renderer'),
-      'vue$': 'vue/dist/vue.esm.js'
+      'vue$': 'vue/dist/vue.esm.js',
+      'utils': path.join(__dirname, '../src/renderer/utils'),
+      '~': path.join(__dirname, '../src'),
+      'root': path.join(__dirname, '../')
     },
     extensions: ['.js', '.vue', '.json', '.css', '.node']
   },

.eslintignore

@@ -1,4 +1,4 @@
 test/unit/coverage/**
 test/unit/*.js
 test/e2e/*.js
-dist/
+dist/

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,30 @@
+<!--
+PicGo Issue 模板
+请依照该模板来提交，否则将会被关闭。
+**提问之前请注意你看过FAQ、配置手册以及那些被关闭的issues。否则同样的提问也会被关闭！**
+-->
+
+## 问题类型
+
+<!-- 你要提交的是Bug Report还是Feature Request？-->
+
+## PicGo的相关信息
+
+<!-- 版本、所在平台（Mac或者Windows） -->
+
+## 问题重现
+
+<!-- 如果是Bug Report请填写本项 -->
+<!-- 请附上相关截图 -->
+
+## 功能请求
+
+<!-- 如果是Feature Request请填写本项 -->
+<!-- 详细描述你所预想的功能或者是现有功能的改进。 -->
+
+---
+
+<!-- 
+  最后，喜欢PicGo的话不妨给它点个star~
+  如果可以的话，请我喝杯咖啡？首页有赞助二维码，谢谢你的支持！ 
+ -->

.gitignore

@@ -3,6 +3,7 @@ dist/electron/*
 dist/web/*
 build/*
 !build/icons
+!build/installer.nsh
 coverage
 node_modules/
 npm-debug.log

.travis.yml

@@ -7,7 +7,7 @@ language: c
 matrix:
   include:
   - os: osx
-  # - os: linux
+  - os: linux
     env: CC=clang CXX=clang++ npm_config_clang=1
     compiler: clang
 cache:
@@ -25,11 +25,11 @@ before_install:
 - mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
   "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
   | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
-# - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
+- if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
 install:
 #- export DISPLAY=':99.0'
 #- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
-- nvm install 8.9
+- nvm install 10
 - curl -o- -L https://yarnpkg.com/install.sh | bash
 - source ~/.bashrc
 - npm install -g xvfb-maybe

.vscode/launch.json

@@ -4,14 +4,34 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Launch",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceRoot}/src/main/index.dev.js",
+      "env": {
+        "DEBUG_ENV": "debug"
+      },
+      "stopOnEntry": false,
+      "args": [],
+      "cwd": "${workspaceRoot}",
+                      // this points to the electron task runner
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "runtimeArgs": [
+        "--nolazy"
+      ],
+      "sourceMaps": true
+    },
     {
       "name": "Attach",
       "type": "node",
       "request": "attach",
       "port": 5858,
-      "sourceMaps": false,
+      "sourceMaps": true,
+      "restart": true,
       "outFiles": [],
       "localRoot": "${workspaceRoot}",
+      "protocol": "inspector",
       "remoteRoot": null
     }
   ]

FAQ.md

@@ -0,0 +1,58 @@
+## 常见问题
+
+> 在使用PicGo期间你会遇到很多问题，不过很多问题其实之前就有人提问过，也被解决，所以你可以先看看[使用文档](https://github.com/Molunerfinn/PicGo/wiki/%E8%AF%A6%E7%BB%86%E7%AA%97%E5%8F%A3%E7%9A%84%E4%BD%BF%E7%94%A8#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BF%AB%E6%8D%B7%E9%94%AE)，这份FAQ，以及那些被关闭的[issues](https://github.com/Molunerfinn/PicGo/issues?q=is%3Aissue+is%3Aclosed)，应该能找到答案。
+
+## 1.七牛图床上传图片成功后无法显示或图片无`http://`前缀
+
+通常是你的七牛图床配置里的`设定访问网址`没有加上`http://`或者`https//`头。
+
+参考：[issue#79](https://github.com/Molunerfinn/PicGo/issues/79)
+
+## 2.能否支持图床远端同步删除
+
+不能。有些图床（比如微博图床、SM.MS、Imgur等）不支持后台管理，为了架构统一不支持远端删除。
+
+## 3.能否支持上传视频文件
+
+目前不能。2.0版本出来后将会支持插件系统，届时如果有人开发了相应的插件理论可以支持任意文件上传。
+
+## 4.微博图床上传之后无法显示预览图
+
+通常是挂了全局代理导致的。
+
+参考：[issue36](https://github.com/Molunerfinn/PicGo/issues/36)
+
+## 5.能否支持某某某图床
+
+截止v1.6，PicGo支持了如下图床：
+
+- `微博图床` v1.0
+- `七牛图床` v1.0
+- `腾讯云COS v4\v5版本` v1.1 & v1.5.0
+- `又拍云` v1.2.0
+- `GitHub` v1.5.0
+- `SM.MS` v1.5.1
+- `阿里云OSS` v1.6.0
+- `Imgur` v1.6.0
+
+所以本体内将不会再支持其他图床。待2.0版本出来支持插件系统后可以由其他开发者开发相应的图床插件用以支持其他图床。
+
+## 6.一个图床设置多个信息
+
+不能。因为目前的架构只支持一个图床一份信息。
+
+## 7.v2.0版本有什么新功能
+
+在不改变PicGo现有使用界面和使用习惯的基础上，将会重构整个底层`传输->转换->上传`的架构，使其能够支持插件系统，方便其他开发者基于PicGo的底层进行二次开发。
+
+理论上有了插件系统之后，其他开发者能够支持如下功能：
+
+1. 能够实现上传前图片压缩
+2. 能够通过图片url实现上传图片 -> 更深入地可以批量地实现图床的迁移
+3. 能够支持其他图床甚至是自己的图床
+
+等等。
+
+届时底层架构将会独立出来成为一个独立的npm包，能够直接在命令行里调用。
+
+目前开发进度可以参考[PicGo-Core](https://github.com/Molunerfinn/PicGo-Core)。

README.md

@@ -3,7 +3,7 @@
 > 图片上传+管理新体验 
 
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/12621342/33876119-85a5148e-df5f-11e7-8843-46224e595d52.png" alt="">
+  <img src="https://raw.githubusercontent.com/Molunerfinn/test/master/picgo/New%20LOGO-150.png" alt="">
 </p>
 <p align="center">
   <a href="https://github.com/feross/standard">
@@ -22,27 +22,58 @@
 
 ## 应用说明
 
-PicGo目前支持了`微博图床`，`七牛图床`，`腾讯云COS`，`又拍云`。未来将支持更多图床。
+**PicGo在上传图片之后自动会将图片链接复制到你的剪贴板里，可选5种复制的链接格式。**
 
-暂时只支持macOS系统，未来将支持windows和linux。
+PicGo目前支持了
 
-点击此处下载[应用](https://github.com/Molunerfinn/PicGo/releases)，macOS用户请下载最新版本的`dmg`文件。
+- `微博图床` v1.0
+- `七牛图床` v1.0
+- `腾讯云COS v4\v5版本` v1.1 & v1.5.0
+- `又拍云` v1.2.0
+- `GitHub` v1.5.0
+- `SM.MS` v1.5.1
+- `阿里云OSS` v1.6.0
+- `Imgur` v1.6.0
 
-如果第一次使用，请参考应用使用[手册](https://github.com/Molunerfinn/PicGo/wiki)。
+**本体不再增加默认的图床支持。你可以自行开发第三方图床插件。详见[PicGo-Core](https://picgo.github.io/PicGo-Core-Doc/)**。
 
-![](https://user-images.githubusercontent.com/12621342/34242857-d177930a-e658-11e7-9688-7405851dd5e5.gif)
+第三方插件以及使用了PicGo底层的应用可以在[Awesome-PicGo](https://github.com/PicGo/Awesome-PicGo)看到。欢迎贡献！
+
+支持macOS、windows 64位（>= v1.3.1），linux（>= v1.6.0）。
+
+支持快捷键`command+shift+p`（macOS）或者`control+shift+p`（windows\linux）用以支持快捷上传剪贴板里的图片（第一张）。
+PicGo支持自定义快捷键，使用方法见[配置手册](https://picgo.github.io/PicGo-Doc/zh/guide/config.html)。
+
+开发进度可以查看[Projects](https://github.com/Molunerfinn/PicGo/projects)，会同步更新开发进度。
+
+**如果第一次使用，请参考应用使用[快速上手](https://picgo.github.io/PicGo-Doc/zh/guide/getting-started.html)。遇到问题了还可以看看[FAQ](https://github.com/Molunerfinn/PicGo/blob/dev/FAQ.md)以及被关闭的[issues](https://github.com/Molunerfinn/PicGo/issues?q=is%3Aissue+is%3Aclosed)。**
+
+## 下载安装
+
+macOS用户请下载最新版本的`dmg`文件，windows用户请下载最新版本的`exe`文件，linux用户请下载`AppImage`文件。
+
+点击此处下载[应用](https://github.com/Molunerfinn/PicGo/releases)。
+
+**如果你是Arch类的Linux用户，可以直接通过`aurman -S picgo-appimage`来安装PicGo。感谢@houbaron的贡献！**
+
+## 应用截图
+
+![](https://raw.githubusercontent.com/Molunerfinn/test/master/picgo/picgo-2.0.gif)
 
 ![picgo-menubar](https://user-images.githubusercontent.com/12621342/34242310-b5056510-e655-11e7-8568-60ffd4f71910.gif)
 
 ## 开发说明
 
-> 目前仅针对Mac平台。Windows和Linux平台并未测试。
+> 目前仅针对Mac、Windows。Linux平台并未测试。
 
 如果你想要学习、开发、修改或自行构建PicGo，可以依照下面的指示：
 
+> 如果想学习Electron-vue的开发，可以查看我写的系列教程——[Electron-vue开发实战](https://molunerfinn.com/tags/Electron-vue/)
+
 1. 你需要有node、git环境。需要了解npm的相关知识。
 2. `git clone https://github.com/Molunerfinn/PicGo.git` 并进入项目
 3. `npm install` 下载依赖
+4. Mac需要有Xcode环境，Windows需要有VS环境。
 
 ### 开发模式
 
@@ -66,9 +97,13 @@ npm run build
 
 只需第一次构建的时候指定一下国内源即可。后续构建不需要特地指定。二进制文件下载在`~/.electron/`目录下。如果想要更新`electron`构建版本，可以删除`~/.electron/`目录，然后重新运行上一步，让`electron-builder`去下载最新的`electron`二进制文件。
 
+## 其他相关
+
+- [vs-picgo](https://github.com/Spades-S/vs-picgo)：picgo的VSCode版。
+
 ## 赞助
 
-如果你喜欢PicGo并且它对你确实有帮助，欢迎给我打赏一杯咖啡的钱哈~
+如果你喜欢PicGo并且它对你确实有帮助，欢迎给我打赏一杯咖啡哈~
 
 支付宝：
 
@@ -82,4 +117,4 @@ npm run build
 
 [MIT](http://opensource.org/licenses/MIT)
 
-Copyright (c) 2017 Molunerfinn
+Copyright (c) 2017 - 2019 Molunerfinn

appveyor.yml

@@ -21,13 +21,12 @@ init:
 
 install:
   - ps: Install-Product node 8 x64
-  - choco install yarn --ignore-dependencies
   - git reset --hard HEAD
-  - yarn
+  - npm install
   - node --version
 
 build_script:
   #- yarn test
-  - yarn build
+  - npm run release
 
 test: off

build/installer.nsh

@@ -0,0 +1,8 @@
+ !macro preInit
+    SetRegView 64
+    WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\PicGo"
+    WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\PicGo"
+    SetRegView 32
+    WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\PicGo"
+    WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\PicGo"
+ !macroend

docs/APP.vue

@@ -4,11 +4,16 @@
       .mask
       img.logo(src="~icons/256x256.png", alt="PicGo")
       h1.title PicGo
+        small(v-if="version") {{ version }}
       h2.desc 图片上传+管理新体验
-      button.download(@click="goLink('https://github.com/Molunerfinn/picgo/releases')") 免费下载Mac版
-      button.download(@click="goLink('https://github.com/Molunerfinn/picgo')") 在github上查看
+      button.download(@click="goLink('https://github.com/Molunerfinn/picgo/releases')") 免费下载
+      button.download(@click="goLink('https://picgo.github.io/PicGo-Doc/zh/guide/')") 查看文档
       h3.desc
         | 基于#[a(href="https://github.com/SimulatedGREG/electron-vue" target="_blank") electron-vue]开发
+      h3.desc
+        | 支持macOS,Windows,Linux
+      h3.desc
+        | 支持插件系统，让PicGo更强大
     #container.container-fluid
       .row.ex-width
         img.gallery.col-xs-10.col-xs-offset-1.col-md-offset-2.col-md-8(src="https://ws1.sinaimg.cn/large/8700af19gy1fmayjwttnbj218g0p0q4e")
@@ -21,18 +26,25 @@
             .display-list__desc {{ item.desc }}
       .row.ex-width.info
         .col-xs-10.col-xs-offset-1
-          | ©2017 #[a(href="https://github.com/Molunerfinn" target="_blank") Molunerfinn]
+          | ©2017 - {{ year }} #[a(href="https://github.com/Molunerfinn" target="_blank") Molunerfinn]
 </template>
 <script>
 export default {
   name: '',
   data () {
     return {
+      version: '',
+      year: new Date().getFullYear(),
       itemList: [
         {
           url: 'https://ws1.sinaimg.cn/large/8700af19ly1fma907llb5j20m30ed46a',
           title: '精致设计',
-          desc: 'macOS系统下，支持拖拽至menubar图标实现上传。menubar app 窗口显示最新上传的5张图片以及剪贴板里的图片。点击图片自动将上传的链接复制到剪贴板。'
+          desc: 'macOS系统下，支持拖拽至menubar图标实现上传。menubar app 窗口显示最新上传的5张图片以及剪贴板里的图片。点击图片自动将上传的链接复制到剪贴板。（Windows平台不支持）'
+        },
+        {
+          url: 'https://i.loli.net/2018/07/11/5b45768fb1276.png',
+          title: 'Mini小窗',
+          desc: 'Windows以及Linux系统下提供一个mini悬浮窗用于用户拖拽上传，节约你宝贵的桌面空间。'
         },
         {
           url: 'https://ws1.sinaimg.cn/large/8700af19ly1fmd56zm2nej218g0p0teb',
@@ -42,19 +54,32 @@ export default {
         {
           url: 'https://ws1.sinaimg.cn/large/8700af19ly1fmd5ck9m0wj20lr0cxmzs',
           title: '可选图床',
-          desc: '目前支持微博图床和七牛图床。未来将支持更多。方便不同图床的上传需求。'
+          desc: '默认支持微博图床、七牛图床、腾讯云COS、又拍云、GitHub、SM.MS、阿里云OSS、Imgur。方便不同图床的上传需求。2.0版本开始更可以自己开发插件实现其他图床的上传需求。'
         },
         {
           url: 'https://ws1.sinaimg.cn/large/8700af19gy1fmayjwttnbj218g0p0q4e',
           title: '多样链接',
-          desc: '支持4种剪贴板链接格式，让你的文本编辑游刃有余。'
+          desc: '支持5种默认剪贴板链接格式，包括一种自定义格式，让你的文本编辑游刃有余。'
+        },
+        {
+          url: 'https://i.loli.net/2019/01/12/5c39a2f60a32a.png',
+          title: '插件系统',
+          desc: '2.0版本开始支持插件系统，让PicGo发挥无限潜能，成为一个极致的效率工具。'
         }
       ]
     }
   },
+  created () {
+    this.getVersion()
+  },
   methods: {
     goLink (link) {
       window.open(link, '_blank')
+    },
+    async getVersion () {
+      const release = 'https://api.github.com/repos/Molunerfinn/PicGo/releases/latest'
+      const res = await this.$http.get(release)
+      this.version = res.data.name
     }
   }
 }
@@ -98,6 +123,10 @@ h1
     font-size 36px
     font-weight 300
     margin 10px auto
+    text-align center
+    small
+      margin-left 10px
+      font-size 14px
   .desc
     font-weight 400
     margin 20px auto 10px
@@ -172,6 +201,8 @@ h1
       text-decoration none
       color #fff
 @media (max-width: 768px)
+  #header
+    padding 10vh
   #container
     .display-list
       &__item

docs/main.js

@@ -1,6 +1,9 @@
 import Vue from 'vue'
 import App from './APP.vue'
 import 'melody.css'
+import axios from 'axios'
+
+Vue.prototype.$http = axios
 
 new Vue({
   render: h => h(App)

package.json

@@ -1,11 +1,12 @@
 {
   "name": "picgo",
-  "version": "1.2.1",
+  "version": "2.0.5",
   "author": "Molunerfinn <marksz@teamsz.xyz>",
   "description": "Easy to upload your pic & copy to write",
   "license": "MIT",
   "main": "./dist/electron/main.js",
   "scripts": {
+    "render": "webpack-dev-server --hot --colors --config .electron-vue/webpack.renderer.config.js --port 9080 --content-base app/dist",
     "build": "node .electron-vue/build.js && electron-builder",
     "release": "node .electron-vue/build.js && electron-builder",
     "build:dir": "node .electron-vue/build.js && electron-builder --dir",
@@ -29,7 +30,7 @@
   },
   "build": {
     "productName": "PicGo",
-    "appId": "org.simulatedgreg.electron-vue",
+    "appId": "com.molunerfinn.picgo",
     "directories": {
       "output": "build"
     },
@@ -58,27 +59,35 @@
       }
     },
     "win": {
-      "icon": "build/icons/icon.ico"
+      "icon": "build/icons/icon.ico",
+      "target": "nsis"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true
     },
     "linux": {
-      "icon": "build/icons"
+      "icon": "build/icons/"
     }
   },
   "dependencies": {
     "axios": "^0.16.1",
-    "element-ui": "^2.0.5",
+    "dateformat": "^3.0.3",
+    "element-ui": "^2.4.11",
+    "fix-path": "^2.1.0",
     "fs-extra": "^4.0.2",
     "image-size": "^0.6.1",
+    "keycode": "^2.1.9",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
     "md5": "^2.2.1",
     "melody.css": "^1.0.2",
+    "picgo": "^1.2.8",
     "qiniu": "^7.1.1",
-    "request": "^2.83.0",
-    "request-promise": "^4.2.2",
     "vue": "^2.3.3",
     "vue-electron": "^1.0.6",
     "vue-gallery": "^1.2.4",
+    "vue-lazyload": "^1.2.6",
     "vue-router": "^2.5.3",
     "vuex": "^2.3.1"
   },
@@ -86,7 +95,6 @@
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
-    "babel-minify-webpack-plugin": "^0.2.0",
     "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
@@ -101,22 +109,21 @@
     "css-loader": "^0.28.4",
     "del": "^3.0.0",
     "devtron": "^1.4.0",
-    "electron": "^1.7.5",
-    "electron-builder": "^19.19.1",
+    "electron": "4.0.2",
+    "electron-builder": "^20.38.4",
     "electron-debug": "^1.4.0",
     "electron-devtools-installer": "^2.2.0",
     "eslint": "^4.4.1",
     "eslint-config-standard": "^10.2.1",
     "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.9.0",
+    "eslint-loader": "^2.1.1",
     "eslint-plugin-html": "^3.1.1",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-node": "^5.1.1",
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-standard": "^3.0.1",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
-    "html-webpack-plugin": "^2.30.1",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "inject-loader": "^3.0.0",
     "karma": "^1.3.0",
     "karma-chai": "^0.1.0",
@@ -126,24 +133,27 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.31",
     "karma-webpack": "^2.0.1",
+    "mini-css-extract-plugin": "0.4.0",
     "mocha": "^3.0.2",
     "multispinner": "^0.2.1",
     "node-loader": "^0.6.0",
     "pug": "^2.0.0-rc.4",
     "pug-loader": "^2.3.0",
+    "pug-plain-loader": "^1.0.0",
     "require-dir": "^0.3.0",
     "spectron": "^3.7.1",
-    "style-loader": "^0.18.2",
+    "style-loader": "^0.23.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "url-loader": "^0.5.9",
+    "url-loader": "^1.1.2",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^13.0.5",
-    "vue-style-loader": "^3.0.1",
+    "vue-loader": "^15.4.2",
+    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.4.2",
-    "webpack": "^3.5.2",
-    "webpack-dev-server": "^2.7.1",
-    "webpack-hot-middleware": "^2.18.2",
-    "webpack-merge": "^4.1.0"
+    "webpack": "^4.15.1",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-hot-middleware": "^2.22.2",
+    "webpack-merge": "^4.1.3"
   }
 }

src/datastore/index.js

@@ -5,6 +5,13 @@ import path from 'path'
 import fs from 'fs-extra'
 import { remote, app } from 'electron'
 
+if (process.env.NODE_ENV !== 'development') {
+  global.__static = path.join(__dirname, '/static').replace(/\\/g, '\\\\')
+}
+if (process.env.DEBUG_ENV === 'debug') {
+  global.__static = path.join(__dirname, '../../static').replace(/\\/g, '\\\\')
+}
+
 const APP = process.type === 'renderer' ? remote.app : app
 const STORE_PATH = APP.getPath('userData')
 
@@ -29,4 +36,46 @@ if (!db.has('picBed').value()) {
   }).write()
 }
 
+if (!db.has('settings.shortKey').value()) {
+  db.set('settings.shortKey', {
+    upload: 'CommandOrControl+Shift+P'
+  }).write()
+}
+
+// init generate clipboard image files
+let clipboardFiles = getClipboardFiles()
+if (!fs.pathExistsSync(path.join(STORE_PATH, 'windows.ps1'))) {
+  clipboardFiles.forEach(item => {
+    fs.copyFileSync(item.origin, item.dest)
+  })
+} else {
+  clipboardFiles.forEach(item => {
+    diffFilesAndUpdate(item.origin, item.dest)
+  })
+}
+
+function diffFilesAndUpdate (filePath1, filePath2) {
+  let file1 = fs.readFileSync(filePath1)
+  let file2 = fs.readFileSync(filePath2)
+
+  if (!file1.equals(file2)) {
+    fs.copyFileSync(filePath1, filePath2)
+  }
+}
+
+function getClipboardFiles () {
+  let files = [
+    '/linux.sh',
+    '/mac.applescript',
+    '/windows.ps1'
+  ]
+
+  return files.map(item => {
+    return {
+      origin: path.join(__static, item),
+      dest: path.join(STORE_PATH, item)
+    }
+  })
+}
+
 export default db

src/datastore/pic-bed.js

@@ -0,0 +1,56 @@
+import db from './index'
+
+let picBed = [
+  {
+    type: 'weibo',
+    name: '微博图床',
+    visible: true
+  },
+  {
+    type: 'qiniu',
+    name: '七牛图床',
+    visible: true
+  },
+  {
+    type: 'tcyun',
+    name: '腾讯云COS',
+    visible: true
+  },
+  {
+    type: 'upyun',
+    name: '又拍云图床',
+    visible: true
+  },
+  {
+    type: 'github',
+    name: 'GitHub图床',
+    visible: true
+  },
+  {
+    type: 'smms',
+    name: 'SM.MS图床',
+    visible: true
+  },
+  {
+    type: 'aliyun',
+    name: '阿里云OSS',
+    visible: true
+  },
+  {
+    type: 'imgur',
+    name: 'Imgur图床',
+    visible: true
+  }
+]
+
+let picBedFromDB = db.read().get('picBed.list').value() || []
+let oldLength = picBedFromDB.length
+let newLength = picBed.length
+
+if (oldLength !== newLength) {
+  for (let i = oldLength; i < newLength; i++) {
+    picBedFromDB.push(picBed[i])
+  }
+}
+
+export default picBedFromDB

src/main/index.dev.js

@@ -7,9 +7,6 @@
 
 /* eslint-disable */
 
-// Set environment for development
-process.env.NODE_ENV = 'development'
-
 // Install `electron-debug` with `devtron`
 require('electron-debug')({ showDevTools: false })
 
@@ -24,4 +21,4 @@ require('electron').app.on('ready', () => {
 })
 
 // Require `main` process to boot app
-require('./index')
+require('./index')

src/main/index.js

@@ -1,11 +1,14 @@
 'use strict'
 
-import uploader from './utils/uploader.js'
+import Uploader from './utils/uploader.js'
 import { app, BrowserWindow, Tray, Menu, Notification, clipboard, ipcMain, globalShortcut, dialog } from 'electron'
 import db from '../datastore'
 import pasteTemplate from './utils/pasteTemplate'
 import updateChecker from './utils/updateChecker'
+import { getPicBeds } from './utils/getPicBeds'
 import pkg from '../../package.json'
+import picgoCoreIPC from './utils/picgoCoreIPC'
+import fixPath from 'fix-path'
 /**
  * Set `__static` path to static files in production
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
@@ -13,29 +16,45 @@ import pkg from '../../package.json'
 if (process.env.NODE_ENV !== 'development') {
   global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
 }
+if (process.env.DEBUG_ENV === 'debug') {
+  global.__static = require('path').join(__dirname, '../../static').replace(/\\/g, '\\\\')
+}
 
 let window
 let settingWindow
+let miniWindow
 let tray
 let menu
+let contextMenu
 const winURL = process.env.NODE_ENV === 'development'
   ? `http://localhost:9080`
   : `file://${__dirname}/index.html`
 const settingWinURL = process.env.NODE_ENV === 'development'
   ? `http://localhost:9080/#setting/upload`
   : `file://${__dirname}/index.html#setting/upload`
+const miniWinURL = process.env.NODE_ENV === 'development'
+  ? `http://localhost:9080/#mini-page`
+  : `file://${__dirname}/index.html#mini-page`
 
-const uploadFailed = () => {
-  const notification = new Notification({
-    title: '上传失败',
-    body: '请检查你的图床配置！'
+// fix the $PATH in macOS
+fixPath()
+
+function createContextMenu () {
+  const picBeds = getPicBeds(app)
+  const submenu = picBeds.map(item => {
+    return {
+      label: item.name,
+      type: 'radio',
+      checked: db.read().get('picBed.current').value() === item.type,
+      click () {
+        db.read().set('picBed.current', item.type).write()
+        if (settingWindow) {
+          settingWindow.webContents.send('syncPicBed')
+        }
+      }
+    }
   })
-  notification.show()
-}
-
-function createTray () {
-  tray = new Tray(`${__static}/menubar.png`)
-  const contextMenu = Menu.buildFromTemplate([
+  contextMenu = Menu.buildFromTemplate([
     {
       label: '关于',
       click () {
@@ -56,75 +75,81 @@ function createTray () {
           settingWindow.show()
           settingWindow.focus()
         }
+        if (miniWindow) {
+          miniWindow.hide()
+        }
       }
     },
     {
       label: '选择默认图床',
       type: 'submenu',
-      submenu: [
-        {
-          label: '微博图床',
-          type: 'radio',
-          checked: db.read().get('picBed.current').value() === 'weibo',
-          click () {
-            db.read().set('picBed.current', 'weibo')
-              .write()
-          }
-        },
-        {
-          label: '七牛图床',
-          type: 'radio',
-          checked: db.read().get('picBed.current').value() === 'qiniu',
-          click () {
-            db.read().set('picBed.current', 'qiniu')
-              .write()
-          }
-        },
-        {
-          label: '腾讯云COS',
-          type: 'radio',
-          checked: db.read().get('picBed.current').value() === 'tcyun',
-          click () {
-            db.read().set('picBed.current', 'tcyun')
-              .write()
-          }
-        },
-        {
-          label: '又拍云图床',
-          type: 'radio',
-          checked: db.read().get('picBed.current').value() === 'upyun',
-          click () {
-            db.read().set('picBed.current', 'upyun')
-              .write()
-          }
-        }
-      ]
+      submenu
+    },
+    {
+      label: '打开更新助手',
+      type: 'checkbox',
+      checked: db.get('settings.showUpdateTip').value(),
+      click () {
+        const value = db.read().get('settings.showUpdateTip').value()
+        db.read().set('settings.showUpdateTip', !value).write()
+      }
+    },
+    {
+      label: '重启应用',
+      click () {
+        app.relaunch()
+        app.exit(0)
+      }
     },
     {
       role: 'quit',
       label: '退出'
     }
   ])
+}
+
+function createTray () {
+  const menubarPic = process.platform === 'darwin' ? `${__static}/menubar.png` : `${__static}/menubar-nodarwin.png`
+  tray = new Tray(menubarPic)
   tray.on('right-click', () => {
-    window.hide()
+    if (window) {
+      window.hide()
+    }
+    createContextMenu()
     tray.popUpContextMenu(contextMenu)
   })
-  tray.on('click', () => {
-    let img = clipboard.readImage()
-    let obj = []
-    if (!img.isEmpty()) {
-      // 从剪贴板来的图片默认转为png
-      const imgUrl = 'data:image/png;base64,' + Buffer.from(img.toPNG(), 'binary').toString('base64')
-      obj.push({
-        width: img.getSize().width,
-        height: img.getSize().height,
-        imgUrl
-      })
+  tray.on('click', (event, bounds) => {
+    if (process.platform === 'darwin') {
+      let img = clipboard.readImage()
+      let obj = []
+      if (!img.isEmpty()) {
+        // 从剪贴板来的图片默认转为png
+        const imgUrl = 'data:image/png;base64,' + Buffer.from(img.toPNG(), 'binary').toString('base64')
+        obj.push({
+          width: img.getSize().width,
+          height: img.getSize().height,
+          imgUrl
+        })
+      }
+      toggleWindow(bounds)
+      setTimeout(() => {
+        window.webContents.send('clipboardFiles', obj)
+      }, 0)
+    } else {
+      if (window) {
+        window.hide()
+      }
+      if (settingWindow === null) {
+        createSettingWindow()
+        settingWindow.show()
+      } else {
+        settingWindow.show()
+        settingWindow.focus()
+      }
+      if (miniWindow) {
+        miniWindow.hide()
+      }
     }
-    toggleWindow()
-    setTimeout(() => {
-      window.webContents.send('clipboardFiles', obj)
-    }, 0)
   })
 
   tray.on('drag-enter', () => {
@@ -136,11 +161,12 @@ function createTray () {
   })
 
   tray.on('drop-files', async (event, files) => {
-    const pasteStyle = db.read().get('picBed.pasteStyle').value() || 'markdown'
-    const imgs = await uploader(files, 'imgFromPath', window.webContents)
+    const pasteStyle = db.read().get('settings.pasteStyle').value() || 'markdown'
+    const imgs = await new Uploader(files, window.webContents).upload()
     if (imgs !== false) {
       for (let i in imgs) {
-        clipboard.writeText(pasteTemplate(pasteStyle, imgs[i].imgUrl))
+        const url = imgs[i].url || imgs[i].imgUrl
+        clipboard.writeText(pasteTemplate(pasteStyle, url))
         const notification = new Notification({
           title: '上传成功',
           body: imgs[i].imgUrl,
@@ -149,16 +175,18 @@ function createTray () {
         setTimeout(() => {
           notification.show()
         }, i * 100)
+        db.read().get('uploaded').insert(imgs[i]).write()
       }
       window.webContents.send('dragFiles', imgs)
-    } else {
-      uploadFailed()
     }
   })
   // toggleWindow()
 }
 
 const createWindow = () => {
+  if (process.platform !== 'darwin' && process.platform !== 'win32') {
+    return
+  }
   window = new BrowserWindow({
     height: 350,
     width: 196, // 196
@@ -182,13 +210,50 @@ const createWindow = () => {
   window.on('blur', () => {
     window.hide()
   })
+}
 
-  createSettingWindow()
-  createMenu()
+const createMiniWidow = () => {
+  if (miniWindow) {
+    return false
+  }
+  let obj = {
+    height: 64,
+    width: 64,
+    show: true,
+    frame: false,
+    fullscreenable: false,
+    skipTaskbar: true,
+    resizable: false,
+    transparent: true,
+    icon: `${__static}/logo.png`,
+    webPreferences: {
+      backgroundThrottling: false
+    }
+  }
+
+  if (process.platform === 'linux') {
+    obj.transparent = false
+  }
+
+  if (process.platform === 'darwin') {
+    obj.show = false
+  }
+
+  if (db.read().get('settings.miniWindowOntop').value()) {
+    obj.alwaysOnTop = true
+  }
+
+  miniWindow = new BrowserWindow(obj)
+
+  miniWindow.loadURL(miniWinURL)
+
+  miniWindow.on('closed', () => {
+    miniWindow = null
+  })
 }
 
 const createSettingWindow = () => {
-  settingWindow = new BrowserWindow({
+  const options = {
     height: 450,
     width: 800,
     show: false,
@@ -196,20 +261,34 @@ const createSettingWindow = () => {
     center: true,
     fullscreenable: false,
     resizable: false,
-    title: 'Pic',
+    title: 'PicGo',
     vibrancy: 'ultra-dark',
     transparent: true,
     titleBarStyle: 'hidden',
     webPreferences: {
-      backgroundThrottling: false
+      backgroundThrottling: false,
+      webSecurity: false
     }
-  })
+  }
+  if (process.platform !== 'darwin') {
+    options.show = false
+    options.frame = false
+    options.backgroundColor = '#3f3c37'
+    options.transparent = false
+    options.icon = `${__static}/logo.png`
+  }
+  settingWindow = new BrowserWindow(options)
 
   settingWindow.loadURL(settingWinURL)
 
   settingWindow.on('closed', () => {
     settingWindow = null
+    if (process.platform === 'linux') {
+      app.quit()
+    }
   })
+  createMenu()
+  createMiniWidow()
 }
 
 const createMenu = () => {
@@ -238,68 +317,65 @@ const createMenu = () => {
   }
 }
 
-const getWindowPosition = () => {
-  const windowBounds = window.getBounds()
-  const trayBounds = tray.getBounds()
-  const x = Math.round(trayBounds.x + (trayBounds.width / 2) - (windowBounds.width / 2))
-  const y = Math.round(trayBounds.y + trayBounds.height - 10)
-
-  return {
-    x,
-    y
-  }
-}
-
-const toggleWindow = () => {
+const toggleWindow = (bounds) => {
   if (window.isVisible()) {
     window.hide()
   } else {
-    showWindow()
+    showWindow(bounds)
   }
 }
 
-const showWindow = () => {
-  const position = getWindowPosition()
-  window.setPosition(position.x, position.y, false)
+const showWindow = (bounds) => {
+  window.setPosition(bounds.x - 98 + 11, bounds.y, false)
   window.webContents.send('updateFiles')
   window.show()
   window.focus()
 }
 
 const uploadClipboardFiles = async () => {
-  let img = clipboard.readImage()
-  let uploadImg = null
-  if (!img.isEmpty()) {
-    // 从剪贴板来的图片默认转为png
-    const imgUrl = 'data:image/png;base64,' + Buffer.from(img.toPNG(), 'binary').toString('base64')
-    uploadImg = {
-      width: img.getSize().width,
-      height: img.getSize().height,
-      imgUrl
-    }
-  }
-  img = await uploader(uploadImg, 'imgFromClipboard', window.webContents)
-  if (img !== false) {
-    const pasteStyle = db.read().get('picBed.pasteStyle').value() || 'markdown'
-    clipboard.writeText(pasteTemplate(pasteStyle, img[0].imgUrl))
-    const notification = new Notification({
-      title: '上传成功',
-      body: img[0].imgUrl,
-      icon: img[0].imgUrl
-    })
-    notification.show()
-    window.webContents.send('clipboardFiles', [])
-    window.webContents.send('uploadFiles', img)
+  let win
+  if (miniWindow.isVisible()) {
+    win = miniWindow
   } else {
-    uploadFailed()
+    win = settingWindow || window
+  }
+  let img = await new Uploader(undefined, win.webContents).upload()
+  if (img !== false) {
+    if (img.length > 0) {
+      const pasteStyle = db.read().get('settings.pasteStyle').value() || 'markdown'
+      const url = img[0].url || img[0].imgUrl
+      clipboard.writeText(pasteTemplate(pasteStyle, url))
+      const notification = new Notification({
+        title: '上传成功',
+        body: img[0].imgUrl,
+        icon: img[0].imgUrl
+      })
+      notification.show()
+      db.read().get('uploaded').insert(img[0]).write()
+      window.webContents.send('clipboardFiles', [])
+      window.webContents.send('uploadFiles', img)
+      if (settingWindow) {
+        settingWindow.webContents.send('updateGallery')
+      }
+    } else {
+      const notification = new Notification({
+        title: '上传不成功',
+        body: '你剪贴板最新的一条记录不是图片哦'
+      })
+      notification.show()
+    }
   }
 }
 
+picgoCoreIPC(app, ipcMain)
+
+// from macOS tray
 ipcMain.on('uploadClipboardFiles', async (evt, file) => {
-  const img = await uploader(file, 'imgFromClipboard', window.webContents)
+  const img = await new Uploader(undefined, window.webContents).upload()
   if (img !== false) {
-    const pasteStyle = db.read().get('picBed.pasteStyle').value() || 'markdown'
-    clipboard.writeText(pasteTemplate(pasteStyle, img[0].imgUrl))
+    const pasteStyle = db.read().get('settings.pasteStyle').value() || 'markdown'
+    const url = img[0].url || img[0].imgUrl
+    clipboard.writeText(pasteTemplate(pasteStyle, url))
     const notification = new Notification({
       title: '上传成功',
       body: img[0].imgUrl,
@@ -307,20 +383,28 @@ ipcMain.on('uploadClipboardFiles', async (evt, file) => {
       icon: img[0].imgUrl
     })
     notification.show()
+    db.read().get('uploaded').insert(img[0]).write()
     window.webContents.send('clipboardFiles', [])
-    window.webContents.send('uploadFiles', img)
-  } else {
-    uploadFailed()
+    if (settingWindow) {
+      settingWindow.webContents.send('updateGallery')
+    }
   }
+  window.webContents.send('uploadFiles')
+})
+
+ipcMain.on('uploadClipboardFilesFromUploadPage', () => {
+  uploadClipboardFiles()
 })
 
 ipcMain.on('uploadChoosedFiles', async (evt, files) => {
-  const imgs = await uploader(files, 'imgFromUploader', settingWindow.webContents)
+  const input = files.map(item => item.path)
+  const imgs = await new Uploader(input, evt.sender).upload()
   if (imgs !== false) {
-    const pasteStyle = db.read().get('picBed.pasteStyle').value() || 'markdown'
+    const pasteStyle = db.read().get('settings.pasteStyle').value() || 'markdown'
     let pasteText = ''
     for (let i in imgs) {
-      pasteText += pasteTemplate(pasteStyle, imgs[i].imgUrl) + '\r\n'
+      const url = imgs[i].url || imgs[i].imgUrl
+      pasteText += pasteTemplate(pasteStyle, url) + '\r\n'
       const notification = new Notification({
         title: '上传成功',
         body: imgs[i].imgUrl,
@@ -329,34 +413,110 @@ ipcMain.on('uploadChoosedFiles', async (evt, files) => {
       setTimeout(() => {
         notification.show()
       }, i * 100)
+      db.read().get('uploaded').insert(imgs[i]).write()
     }
     clipboard.writeText(pasteText)
     window.webContents.send('uploadFiles', imgs)
-  } else {
-    uploadFailed()
+    if (settingWindow) {
+      settingWindow.webContents.send('updateGallery')
+    }
   }
 })
 
-const isSecondInstance = app.makeSingleInstance(() => {
+ipcMain.on('updateShortKey', (evt, oldKey) => {
+  globalShortcut.unregisterAll()
+  for (let key in oldKey) {
+    globalShortcut.register(db.read().get('settings.shortKey').value()[key], () => {
+      return shortKeyHash[key]()
+    })
+  }
+  const notification = new Notification({
+    title: '操作成功',
+    body: '你的快捷键已经修改成功'
+  })
+  notification.show()
+})
+
+ipcMain.on('updateCustomLink', (evt, oldLink) => {
+  const notification = new Notification({
+    title: '操作成功',
+    body: '你的自定义链接格式已经修改成功'
+  })
+  notification.show()
+})
+
+ipcMain.on('autoStart', (evt, val) => {
+  app.setLoginItemSettings({
+    openAtLogin: val
+  })
+})
+
+ipcMain.on('openSettingWindow', (evt) => {
+  if (!settingWindow) {
+    createSettingWindow()
+  } else {
+    settingWindow.show()
+  }
+  miniWindow.hide()
+})
+
+ipcMain.on('openMiniWindow', (evt) => {
+  if (!miniWindow) {
+    createMiniWidow()
+  }
+  miniWindow.show()
+  miniWindow.focus()
+  settingWindow.hide()
+})
+
+//  from mini window
+ipcMain.on('syncPicBed', (evt) => {
+  if (settingWindow) {
+    settingWindow.webContents.send('syncPicBed')
+  }
+})
+
+ipcMain.on('getPicBeds', (evt) => {
+  const picBeds = getPicBeds(app)
+  evt.sender.send('getPicBeds', picBeds)
+  evt.returnValue = picBeds
+})
+
+const shortKeyHash = {
+  upload: uploadClipboardFiles
+}
+
+const gotTheLock = app.requestSingleInstanceLock()
+
+if (!gotTheLock) {
+  app.quit()
+} else {
   if (settingWindow) {
     if (settingWindow.isMinimized()) {
       settingWindow.restore()
     }
     settingWindow.focus()
   }
-})
+}
 
-if (isSecondInstance) {
-  console.log('is 2')
-  app.quit()
+if (process.platform === 'win32') {
+  app.setAppUserModelId(pkg.build.appId)
+}
+
+if (process.env.XDG_CURRENT_DESKTOP && process.env.XDG_CURRENT_DESKTOP.includes('Unity')) {
+  process.env.XDG_CURRENT_DESKTOP = 'Unity'
 }
 
 app.on('ready', () => {
   createWindow()
-  createTray()
+  createSettingWindow()
+  if (process.platform === 'darwin' || process.platform === 'win32') {
+    createTray()
+  }
+  db.read().set('needReload', false).write()
   updateChecker()
 
-  globalShortcut.register('CommandOrControl+Shift+P', () => {
+  globalShortcut.register(db.read().get('settings.shortKey.upload').value(), () => {
     uploadClipboardFiles()
   })
 })
@@ -368,15 +528,22 @@ app.on('window-all-closed', () => {
 })
 
 app.on('activate', () => {
-  if (window === null || settingWindow === null) {
+  if (window === null) {
     createWindow()
   }
+  if (settingWindow === null) {
+    createSettingWindow()
+  }
 })
 
 app.on('will-quit', () => {
   globalShortcut.unregisterAll()
 })
 
+app.setLoginItemSettings({
+  openAtLogin: db.read().get('settings.autoStart').value() || false
+})
+
 /**
  * Auto Updater
  *

src/main/utils/getPicBeds.js

@@ -0,0 +1,27 @@
+import path from 'path'
+import db from '../../datastore'
+// eslint-disable-next-line
+const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
+
+const getPicBeds = (app) => {
+  const PicGo = requireFunc('picgo')
+  const STORE_PATH = app.getPath('userData')
+  const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
+  const picgo = new PicGo(CONFIG_PATH)
+  const picBedTypes = picgo.helper.uploader.getIdList()
+  const picBedFromDB = db.read().get('picBed.list').value() || []
+  const picBeds = picBedTypes.map(item => {
+    const visible = picBedFromDB.find(i => i.type === item) // object or undefined
+    return {
+      type: item,
+      name: picgo.helper.uploader.get(item).name || item,
+      visible: visible ? visible.visible : true
+    }
+  })
+  picgo.cmd.program.removeAllListeners()
+  return picBeds
+}
+
+export {
+  getPicBeds
+}

src/main/utils/guiApi.js

@@ -0,0 +1,105 @@
+import {
+  dialog,
+  BrowserWindow,
+  clipboard,
+  Notification
+} from 'electron'
+import db from '../../datastore'
+import Uploader from './uploader'
+import pasteTemplate from './pasteTemplate'
+const WEBCONTENTS = Symbol('WEBCONTENTS')
+const IPCMAIN = Symbol('IPCMAIN')
+const PICGO = Symbol('PICGO')
+
+class GuiApi {
+  constructor (ipcMain, webcontents, picgo) {
+    this[WEBCONTENTS] = webcontents
+    this[IPCMAIN] = ipcMain
+    this[PICGO] = picgo
+  }
+
+  /**
+   * for plugin showInputBox
+   * @param {object} options
+   * return type is string or ''
+   */
+  showInputBox (options) {
+    if (options === undefined) {
+      options = {
+        title: '',
+        placeholder: ''
+      }
+    }
+    this[WEBCONTENTS].send('showInputBox', options)
+    return new Promise((resolve, reject) => {
+      this[IPCMAIN].once('showInputBox', (event, value) => {
+        resolve(value)
+      })
+    })
+  }
+
+  /**
+   * for plugin show file explorer
+   * @param {object} options
+   */
+  showFileExplorer (options) {
+    if (options === undefined) {
+      options = {}
+    }
+    return new Promise((resolve, reject) => {
+      dialog.showOpenDialog(BrowserWindow.fromWebContents(this[WEBCONTENTS]), options, filename => {
+        resolve(filename)
+      })
+    })
+  }
+
+  /**
+   * for plugin to upload file
+   * @param {array} input
+   */
+  async upload (input) {
+    const imgs = await new Uploader(input, this[WEBCONTENTS], this[PICGO]).upload()
+    if (imgs !== false) {
+      const pasteStyle = db.read().get('settings.pasteStyle').value() || 'markdown'
+      let pasteText = ''
+      for (let i in imgs) {
+        const url = imgs[i].url || imgs[i].imgUrl
+        pasteText += pasteTemplate(pasteStyle, url) + '\r\n'
+        const notification = new Notification({
+          title: '上传成功',
+          body: imgs[i].imgUrl,
+          icon: imgs[i].imgUrl
+        })
+        setTimeout(() => {
+          notification.show()
+        }, i * 100)
+        db.read().get('uploaded').insert(imgs[i]).write()
+      }
+      clipboard.writeText(pasteText)
+      this[WEBCONTENTS].send('uploadFiles', imgs)
+      this[WEBCONTENTS].send('updateGallery')
+      return imgs
+    }
+    return []
+  }
+
+  /**
+   * For notification
+   * @param {Object} options
+   */
+  showNotification (options) {
+    if (options === undefined) {
+      options = {
+        title: '',
+        body: ''
+      }
+    }
+    const notification = new Notification({
+      title: options.title,
+      body: options.body
+    })
+    notification.show()
+  }
+}
+
+export default GuiApi

src/main/utils/img2base64.js

@@ -1,57 +0,0 @@
-import fs from 'fs-extra'
-import path from 'path'
-import sizeOf from 'image-size'
-
-const imgFromPath = async (imgPath) => {
-  let results = []
-  await Promise.all(imgPath.map(async item => {
-    let buffer = await fs.readFile(item)
-    let base64Image = Buffer.from(buffer, 'binary').toString('base64')
-    let fileName = path.basename(item)
-    let imgSize = sizeOf(item)
-    results.push({
-      base64Image,
-      fileName,
-      width: imgSize.width,
-      height: imgSize.height
-    })
-  }))
-  return results
-}
-
-const imgFromClipboard = (file) => {
-  let result = []
-  if (file !== null) {
-    const today = new Date().toLocaleString().replace(/[ ]+/g, '-').replace(/\/+/g, '-')
-    result.push({
-      base64Image: file.imgUrl.replace(/^data\S+,/, ''),
-      fileName: `${today}.png`,
-      width: file.width,
-      height: file.height
-    })
-  }
-  return result
-}
-
-const imgFromUploader = async (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,
-  imgFromUploader
-}

src/main/utils/pasteTemplate.js

@@ -1,9 +1,13 @@
+import db from '../../datastore'
+
 export default (style, url) => {
+  const customLink = db.read().get('settings.customLink').value() || '$url'
   const tpl = {
     'markdown': `![](${url})`,
     'HTML': `<img src="${url}"/>`,
     'URL': url,
-    'UBB': `[IMG]${url}[/IMG]`
+    'UBB': `[IMG]${url}[/IMG]`,
+    'Custom': customLink.replace(/\$url/g, url)
   }
   return tpl[style]
 }

src/main/utils/picgoCoreIPC.js

@@ -0,0 +1,174 @@
+import path from 'path'
+import GuiApi from './guiApi'
+
+// eslint-disable-next-line
+const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
+const PicGo = requireFunc('picgo')
+const PluginHandler = requireFunc('picgo/dist/lib/PluginHandler').default
+
+// get uploader or transformer config
+const getConfig = (name, type, ctx) => {
+  let config = []
+  if (name === '') {
+    return config
+  } else {
+    const handler = ctx.helper[type].get(name)
+    if (handler) {
+      if (handler.config) {
+        config = handler.config(ctx)
+      }
+    }
+    return config
+  }
+}
+
+const handleConfigWithFunction = config => {
+  for (let i in config) {
+    if (typeof config[i].default === 'function') {
+      config[i].default = config[i].default()
+    }
+    if (typeof config[i].choices === 'function') {
+      config[i].choices = config[i].choices()
+    }
+  }
+  return config
+}
+
+const handleGetPluginList = (ipcMain, STORE_PATH, CONFIG_PATH) => {
+  ipcMain.on('getPluginList', event => {
+    const picgo = new PicGo(CONFIG_PATH)
+    const pluginList = picgo.pluginLoader.getList()
+    const list = []
+    for (let i in pluginList) {
+      const plugin = picgo.pluginLoader.getPlugin(pluginList[i])
+      const pluginPath = path.join(STORE_PATH, `/node_modules/${pluginList[i]}`)
+      const pluginPKG = requireFunc(path.join(pluginPath, 'package.json'))
+      const uploaderName = plugin.uploader || ''
+      const transformerName = plugin.transformer || ''
+      let menu = []
+      if (plugin.guiMenu) {
+        menu = plugin.guiMenu(picgo)
+      }
+      let gui = false
+      if (pluginPKG.keywords && pluginPKG.keywords.length > 0) {
+        if (pluginPKG.keywords.includes('picgo-gui-plugin')) {
+          gui = true
+        }
+      }
+      const obj = {
+        name: pluginList[i].replace(/picgo-plugin-/, ''),
+        author: pluginPKG.author.name || pluginPKG.author,
+        description: pluginPKG.description,
+        logo: 'file://' + path.join(pluginPath, 'logo.png').split(path.sep).join('/'),
+        version: pluginPKG.version,
+        gui,
+        config: {
+          plugin: {
+            name: pluginList[i].replace(/picgo-plugin-/, ''),
+            config: plugin.config ? handleConfigWithFunction(plugin.config(picgo)) : []
+          },
+          uploader: {
+            name: uploaderName,
+            config: handleConfigWithFunction(getConfig(uploaderName, 'uploader', picgo))
+          },
+          transformer: {
+            name: transformerName,
+            config: handleConfigWithFunction(getConfig(uploaderName, 'transformer', picgo))
+          }
+        },
+        enabled: picgo.getConfig(`picgoPlugins.${pluginList[i]}`),
+        homepage: pluginPKG.homepage ? pluginPKG.homepage : '',
+        guiMenu: menu,
+        ing: false
+      }
+      list.push(obj)
+    }
+    event.sender.send('pluginList', list)
+    picgo.cmd.program.removeAllListeners()
+  })
+}
+
+const handlePluginInstall = (ipcMain, CONFIG_PATH) => {
+  ipcMain.on('installPlugin', (event, msg) => {
+    const picgo = new PicGo(CONFIG_PATH)
+    const pluginHandler = new PluginHandler(picgo)
+    picgo.on('installSuccess', notice => {
+      event.sender.send('installSuccess', notice.body[0].replace(/picgo-plugin-/, ''))
+    })
+    pluginHandler.install([msg])
+    picgo.cmd.program.removeAllListeners()
+  })
+}
+
+const handlePluginUninstall = (ipcMain, CONFIG_PATH) => {
+  ipcMain.on('uninstallPlugin', (event, msg) => {
+    const picgo = new PicGo(CONFIG_PATH)
+    const pluginHandler = new PluginHandler(picgo)
+    picgo.on('uninstallSuccess', notice => {
+      event.sender.send('uninstallSuccess', notice.body[0].replace(/picgo-plugin-/, ''))
+    })
+    pluginHandler.uninstall([msg])
+    picgo.cmd.program.removeAllListeners()
+  })
+}
+
+const handlePluginUpdate = (ipcMain, CONFIG_PATH) => {
+  ipcMain.on('updatePlugin', (event, msg) => {
+    const picgo = new PicGo(CONFIG_PATH)
+    const pluginHandler = new PluginHandler(picgo)
+    picgo.on('updateSuccess', notice => {
+      event.sender.send('updateSuccess', notice.body[0].replace(/picgo-plugin-/, ''))
+    })
+    pluginHandler.update([msg])
+    picgo.cmd.program.removeAllListeners()
+  })
+}
+
+const handleGetPicBedConfig = (ipcMain, CONFIG_PATH) => {
+  ipcMain.on('getPicBedConfig', (event, type) => {
+    const picgo = new PicGo(CONFIG_PATH)
+    const name = picgo.helper.uploader.get(type).name || type
+    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()
+  })
+}
+
+const handlePluginActions = (ipcMain, CONFIG_PATH) => {
+  ipcMain.on('pluginActions', (event, name, label) => {
+    const picgo = new PicGo(CONFIG_PATH)
+    const plugin = picgo.pluginLoader.getPlugin(`picgo-plugin-${name}`)
+    const guiApi = new GuiApi(ipcMain, event.sender, picgo)
+    if (plugin.guiMenu && plugin.guiMenu(picgo).length > 0) {
+      const menu = plugin.guiMenu(picgo)
+      menu.forEach(item => {
+        if (item.label === label) {
+          item.handle(picgo, guiApi)
+        }
+      })
+    }
+  })
+}
+
+const handleRemoveFiles = (ipcMain, CONFIG_PATH) => {
+  ipcMain.on('removeFiles', (event, files) => {
+    const picgo = new PicGo(CONFIG_PATH)
+    picgo.emit('remove', files)
+  })
+}
+
+export default (app, ipcMain) => {
+  const STORE_PATH = app.getPath('userData')
+  const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
+  handleGetPluginList(ipcMain, STORE_PATH, CONFIG_PATH)
+  handlePluginInstall(ipcMain, CONFIG_PATH)
+  handlePluginUninstall(ipcMain, CONFIG_PATH)
+  handlePluginUpdate(ipcMain, CONFIG_PATH)
+  handleGetPicBedConfig(ipcMain, CONFIG_PATH)
+  handlePluginActions(ipcMain, CONFIG_PATH)
+  handleRemoveFiles(ipcMain, CONFIG_PATH)
+}

src/main/utils/qiniuUpload.js

@@ -1,78 +0,0 @@
-import request from 'request-promise'
-import * as img2Base64 from './img2base64'
-import db from '../../datastore/index'
-import * as qiniu from 'qiniu'
-import { Notification } from 'electron'
-
-function postOptions (fileName, token, imgBase64) {
-  const area = selectArea(db.read().get('picBed.qiniu.area').value() || 'z0')
-  const base64FileName = Buffer.from(fileName, 'utf-8').toString('base64').replace(/\+/g, '-').replace(/\//g, '_')
-  return {
-    method: 'POST',
-    url: `http://upload${area}.qiniu.com/putb64/-1/key/${base64FileName}`,
-    headers: {
-      Authorization: `UpToken ${token}`,
-      contentType: 'application/octet-stream'
-    },
-    body: imgBase64
-  }
-}
-
-function selectArea (area) {
-  return area === 'z0' ? '' : '-' + area
-}
-
-function getToken () {
-  const accessKey = db.read().get('picBed.qiniu.accessKey').value()
-  const secretKey = db.read().get('picBed.qiniu.secretKey').value()
-  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
-  const options = {
-    scope: db.read().get('picBed.qiniu.bucket').value()
-  }
-  const putPolicy = new qiniu.rs.PutPolicy(options)
-  return putPolicy.uploadToken(mac)
-}
-
-const qiniuUpload = async function (img, type, webContents) {
-  try {
-    webContents.send('uploadProgress', 0)
-    const imgList = await img2Base64[type](img)
-    webContents.send('uploadProgress', 30)
-    const length = imgList.length
-    for (let i in imgList) {
-      const options = postOptions(imgList[i].fileName, getToken(), imgList[i].base64Image)
-      const res = await request(options)
-      const body = JSON.parse(res)
-      if (body.key) {
-        delete imgList[i].base64Image
-        const baseUrl = db.get('picBed.qiniu.url').value()
-        const options = db.get('picBed.qiniu.options').value()
-        imgList[i]['imgUrl'] = `${baseUrl}/${body.key}${options}`
-        imgList[i]['type'] = 'qiniu'
-        if (i - length === -1) {
-          webContents.send('uploadProgress', 60)
-        }
-      } else {
-        webContents.send('uploadProgress', -1)
-        const notification = new Notification({
-          title: '上传失败！',
-          body: res.body.msg
-        })
-        notification.show()
-      }
-    }
-    webContents.send('uploadProgress', 100)
-    return imgList
-  } catch (err) {
-    webContents.send('uploadProgress', -1)
-    const error = JSON.parse(err.response.body)
-    const notification = new Notification({
-      title: '上传失败！',
-      body: error.error
-    })
-    notification.show()
-    throw new Error(err)
-  }
-}
-
-export default qiniuUpload

src/main/utils/tcYunUpload.js

@@ -1,90 +0,0 @@
-import request from 'request-promise'
-import * as img2Base64 from './img2base64'
-import db from '../../datastore/index'
-import { Notification, clipboard } from 'electron'
-import crypto from 'crypto'
-
-// generate COS signature string
-const generateSignature = () => {
-  const options = db.read().get('picBed.tcyun').value()
-  const secretId = options.secretId
-  const secretKey = options.secretKey
-  const appId = options.appId
-  const bucket = options.bucket
-  const random = Math.floor(Math.random() * 10000000000)
-  const current = parseInt(new Date().getTime() / 1000) - 1
-  const expired = current + 3600
-
-  const multiSignature = `a=${appId}&b=${bucket}&k=${secretId}&e=${expired}&t=${current}&r=${random}&f=`
-
-  const signHexKey = crypto.createHmac('sha1', secretKey).update(multiSignature).digest()
-  const tempString = Buffer.concat([signHexKey, Buffer.from(multiSignature)])
-  const signature = Buffer.from(tempString).toString('base64')
-  return {
-    signature,
-    appId,
-    bucket
-  }
-}
-
-const postOptions = (fileName, signature, imgBase64) => {
-  const area = db.read().get('picBed.tcyun.area').value()
-  const path = db.read().get('picBed.tcyun.path').value()
-  return {
-    method: 'POST',
-    url: `http://${area}.file.myqcloud.com/files/v2/${signature.appId}/${signature.bucket}/${path}${fileName}`,
-    headers: {
-      Host: `${area}.file.myqcloud.com`,
-      Authorization: signature.signature,
-      contentType: 'multipart/form-data'
-    },
-    formData: {
-      op: 'upload',
-      filecontent: Buffer.from(imgBase64, 'base64')
-    }
-  }
-}
-
-const tcYunUpload = async (img, type, webContents) => {
-  try {
-    webContents.send('uploadProgress', 0)
-    const imgList = await img2Base64[type](img)
-    webContents.send('uploadProgress', 30)
-    const singature = generateSignature()
-    const length = imgList.length
-    for (let i in imgList) {
-      const options = postOptions(imgList[i].fileName, singature, imgList[i].base64Image)
-      const res = await request(options)
-      const body = JSON.parse(res)
-      if (body.message === 'SUCCESS') {
-        delete imgList[i].base64Image
-        imgList[i]['imgUrl'] = body.data.source_url
-        imgList[i]['type'] = 'tcyun'
-        if (i - length === -1) {
-          webContents.send('uploadProgress', 60)
-        }
-      } else {
-        webContents.send('uploadProgress', -1)
-        const notification = new Notification({
-          title: '上传失败！',
-          body: res.body.msg
-        })
-        notification.show()
-      }
-    }
-    webContents.send('uploadProgress', 100)
-    return imgList
-  } catch (err) {
-    const body = JSON.parse(err.error)
-    webContents.send('uploadProgress', -1)
-    const notification = new Notification({
-      title: '上传失败！',
-      body: `错误码：${body.code}，请打开浏览器粘贴地址查看相关原因。`
-    })
-    notification.show()
-    clipboard.writeText('https://cloud.tencent.com/document/product/436/8432')
-    throw new Error(err)
-  }
-}
-
-export default tcYunUpload

src/main/utils/upYunUpload.js

@@ -1,80 +0,0 @@
-import request from 'request-promise'
-import * as img2Base64 from './img2base64'
-import db from '../../datastore/index'
-import { Notification, clipboard } from 'electron'
-import crypto from 'crypto'
-import MD5 from 'md5'
-
-// generate COS signature string
-const generateSignature = (fileName) => {
-  const options = db.read().get('picBed.upyun').value()
-  // const apiKey = options.apiKey
-  const operator = options.operator
-  const password = options.password
-  const md5Password = MD5(password)
-  const date = new Date().toGMTString()
-  const uri = `/${options.bucket}/${encodeURI(fileName)}`
-  const value = `PUT&${uri}&${date}`
-  const sign = crypto.createHmac('sha1', md5Password).update(value).digest('base64')
-  return `UPYUN ${operator}:${sign}`
-}
-
-const postOptions = (fileName, signature, imgBase64) => {
-  const options = db.read().get('picBed.upyun').value()
-  const bucket = options.bucket
-  return {
-    method: 'PUT',
-    url: `https://v0.api.upyun.com/${bucket}/${encodeURI(fileName)}`,
-    headers: {
-      Authorization: signature,
-      Date: new Date().toGMTString()
-    },
-    body: Buffer.from(imgBase64, 'base64'),
-    resolveWithFullResponse: true
-  }
-}
-
-const upYunUpload = async (img, type, webContents) => {
-  try {
-    webContents.send('uploadProgress', 0)
-    const imgList = await img2Base64[type](img)
-    webContents.send('uploadProgress', 30)
-    const length = imgList.length
-    const upyunOptions = db.read().get('picBed.upyun').value()
-    for (let i in imgList) {
-      const singature = generateSignature(imgList[i].fileName)
-      const options = postOptions(imgList[i].fileName, singature, imgList[i].base64Image)
-      const body = await request(options)
-      if (body.statusCode === 200) {
-        delete imgList[i].base64Image
-        imgList[i]['imgUrl'] = `${upyunOptions.url}/${imgList[i].fileName}${upyunOptions.options}`
-        imgList[i]['type'] = 'upyun'
-        if (i - length === -1) {
-          webContents.send('uploadProgress', 60)
-        }
-      } else {
-        webContents.send('uploadProgress', -1)
-        const notification = new Notification({
-          title: '上传失败！',
-          body: '服务端出错，请稍后再试'
-        })
-        notification.show()
-      }
-    }
-    webContents.send('uploadProgress', 100)
-    return imgList
-  } catch (err) {
-    console.log(err)
-    const body = JSON.parse(err.error)
-    webContents.send('uploadProgress', -1)
-    const notification = new Notification({
-      title: '上传失败！',
-      body: `错误码：${body.code}，请打开浏览器粘贴地址查看相关原因。`
-    })
-    notification.show()
-    clipboard.writeText('http://docs.upyun.com/api/errno/')
-    // throw new Error(err)
-  }
-}
-
-export default upYunUpload

src/main/utils/updateChecker.js

@@ -7,9 +7,9 @@ const release = 'https://api.github.com/repos/Molunerfinn/PicGo/releases/latest'
 const downloadUrl = 'https://github.com/Molunerfinn/PicGo/releases/latest'
 
 const checkVersion = async () => {
-  let showTip = db.read().get('picBed.showUpdateTip').value()
+  let showTip = db.read().get('settings.showUpdateTip').value()
   if (showTip === undefined) {
-    db.read().set('picBed.showUpdateTip', true).write()
+    db.read().set('settings.showUpdateTip', true).write()
     showTip = true
   }
   if (showTip) {
@@ -22,14 +22,14 @@ const checkVersion = async () => {
           type: 'info',
           title: '发现新版本',
           buttons: ['Yes', 'No'],
-          message: '发现新版本，是否去下载最新的版本？',
+          message: `发现新版本${latest}，更新了很多功能，是否去下载最新的版本？`,
           checkboxLabel: '以后不再提醒',
           checkboxChecked: false
         }, (res, checkboxChecked) => {
           if (res === 0) { // if selected yes
             shell.openExternal(downloadUrl)
           }
-          db.read().set('picBed.showUpdateTip', !checkboxChecked).write()
+          db.read().set('settings.showUpdateTip', !checkboxChecked).write()
         })
       }
     } else {
@@ -44,15 +44,16 @@ const checkVersion = async () => {
 const compareVersion2Update = (current, latest) => {
   const currentVersion = current.split('.').map(item => parseInt(item))
   const latestVersion = latest.split('.').map(item => parseInt(item))
-  let flag = false
 
   for (let i = 0; i < 3; i++) {
     if (currentVersion[i] < latestVersion[i]) {
-      flag = true
+      return true
+    }
+    if (currentVersion[i] > latestVersion[i]) {
+      return false
     }
   }
-
-  return flag
+  return false
 }
 
 export default checkVersion

src/main/utils/uploader.js

@@ -1,34 +1,156 @@
-import weiboUpload from './weiboUpload'
-import qiniuUpload from './qiniuUpload'
-import tcYunUpload from './tcYunUpload'
-import upYunUpload from './upYunUpload'
-import db from '../../datastore/index'
+import {
+  app,
+  Notification,
+  BrowserWindow,
+  ipcMain
+} from 'electron'
+import path from 'path'
+import dayjs from 'dayjs'
 
-const checkUploader = (type) => {
-  const currentUploader = db.read().get(`picBed.${type}`).value()
-  if (currentUploader) {
-    return true
-  } else {
-    return false
-  }
-}
+// eslint-disable-next-line
+const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
+const PicGo = requireFunc('picgo')
+const STORE_PATH = app.getPath('userData')
+const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
+const renameURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#rename-page` : `file://${__dirname}/index.html#rename-page`
 
-const uploader = (img, type, webContents) => {
-  const uploadType = db.read().get('picBed.current').value()
-  if (checkUploader(uploadType)) {
-    switch (uploadType) {
-      case 'weibo':
-        return weiboUpload(img, type, webContents)
-      case 'qiniu':
-        return qiniuUpload(img, type, webContents)
-      case 'tcyun':
-        return tcYunUpload(img, type, webContents)
-      case 'upyun':
-        return upYunUpload(img, type, webContents)
+const createRenameWindow = (win) => {
+  let options = {
+    height: 175,
+    width: 300,
+    show: true,
+    fullscreenable: false,
+    resizable: false,
+    vibrancy: 'ultra-dark',
+    webPreferences: {
+      backgroundThrottling: false
     }
-  } else {
-    return false
+  }
+
+  if (process.platform !== 'darwin') {
+    options.show = true
+    options.backgroundColor = '#3f3c37'
+    options.autoHideMenuBar = true
+    options.transparent = false
+  }
+
+  const window = new BrowserWindow(options)
+  window.loadURL(renameURL)
+  // check if this window is visible
+  if (win.isVisible()) {
+    // bounds: { x: 821, y: 75, width: 800, height: 450 }
+    const bounds = win.getBounds()
+    const positionX = bounds.x + bounds.width / 2 - 150
+    let positionY
+    // if is the settingWindow
+    if (bounds.height > 400) {
+      positionY = bounds.y + bounds.height / 2 - 88
+    } else { // if is the miniWindow
+      positionY = bounds.y + bounds.height / 2
+    }
+    window.setPosition(positionX, positionY, false)
+  }
+  return window
+}
+
+const waitForShow = (webcontent) => {
+  return new Promise((resolve, reject) => {
+    webcontent.on('dom-ready', () => {
+      resolve()
+    })
+  })
+}
+
+const waitForRename = (window, id) => {
+  return new Promise((resolve, reject) => {
+    ipcMain.once(`rename${id}`, (evt, newName) => {
+      resolve(newName)
+      window.hide()
+    })
+    window.on('close', () => {
+      resolve(null)
+      ipcMain.removeAllListeners(`rename${id}`)
+    })
+  })
+}
+
+class Uploader {
+  constructor (img, webContents, picgo = undefined) {
+    this.img = img
+    this.webContents = webContents
+    this.picgo = picgo
+  }
+
+  upload () {
+    const win = BrowserWindow.fromWebContents(this.webContents)
+    const picgo = this.picgo || new PicGo(CONFIG_PATH)
+    picgo.config.debug = true
+    // for picgo-core
+    picgo.config.PICGO_ENV = 'GUI'
+    let input = this.img
+
+    picgo.helper.beforeUploadPlugins.register('renameFn', {
+      handle: async ctx => {
+        const rename = picgo.getConfig('settings.rename')
+        const autoRename = picgo.getConfig('settings.autoRename')
+        await Promise.all(ctx.output.map(async (item, index) => {
+          let name
+          let fileName
+          if (autoRename) {
+            fileName = dayjs().add(index, 'second').format('YYYYMMDDHHmmss') + item.extname
+          } else {
+            fileName = item.fileName
+          }
+          if (rename) {
+            const window = createRenameWindow(win)
+            await waitForShow(window.webContents)
+            window.webContents.send('rename', fileName, window.webContents.id)
+            name = await waitForRename(window, window.webContents.id)
+          }
+          item.fileName = name || fileName
+        }))
+      }
+    })
+
+    picgo.on('beforeTransform', ctx => {
+      if (ctx.getConfig('settings.uploadNotification')) {
+        const notification = new Notification({
+          title: '上传进度',
+          body: '正在上传'
+        })
+        notification.show()
+      }
+    })
+
+    picgo.upload(input)
+
+    picgo.on('notification', message => {
+      const notification = new Notification(message)
+      notification.show()
+    })
+
+    picgo.on('uploadProgress', progress => {
+      this.webContents.send('uploadProgress', progress)
+    })
+
+    return new Promise((resolve) => {
+      picgo.on('finished', ctx => {
+        if (ctx.output.every(item => item.imgUrl)) {
+          resolve(ctx.output)
+        } else {
+          resolve(false)
+        }
+      })
+      picgo.on('failed', ctx => {
+        const notification = new Notification({
+          title: '上传失败',
+          body: '请检查配置和上传的文件是否符合要求'
+        })
+        notification.show()
+        resolve(false)
+      })
+    })
   }
 }
 
-export default uploader
+export default Uploader

src/main/utils/weiboUpload.js

@@ -1,73 +0,0 @@
-import request from 'request-promise'
-import * as img2Base64 from './img2base64'
-import db from '../../datastore/index'
-import { Notification } from 'electron'
-const j = request.jar()
-const rp = request.defaults({jar: j})
-const UPLOAD_URL = 'http://picupload.service.weibo.com/interface/pic_upload.php?ori=1&mime=image%2Fjpeg&data=base64&url=0&markpos=1&logo=&nick=0&marks=1&app=miniblog'
-
-const postOptions = (formData) => {
-  return {
-    method: 'POST',
-    url: 'https://passport.weibo.cn/sso/login',
-    headers: {
-      Referer: 'https://passport.weibo.cn/signin/login',
-      contentType: 'application/x-www-form-urlencoded'
-    },
-    formData,
-    json: true,
-    resolveWithFullResponse: true
-  }
-}
-
-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)
-      for (let i in imgList) {
-        let result = await rp.post(UPLOAD_URL, {
-          formData: {
-            b64_data: imgList[i].base64Image
-          }
-        })
-        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
-      })
-      notification.show()
-    }
-  } catch (err) {
-    webContents.send('uploadProgress', -1)
-    const notification = new Notification({
-      title: '上传失败！',
-      body: '服务端出错，请重试'
-    })
-    notification.show()
-    throw new Error(err)
-  }
-}
-
-export default weiboUpload

src/renderer/App.vue

@@ -18,6 +18,10 @@
     height 100%
     font-family "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
   #app
-    overflow-x hidden
     user-select none
+    overflow hidden
+  .el-button-group
+    width 100%
+    .el-button
+      width 50%
 </style>

src/renderer/assets/fonts/iconfont.css

@@ -1,10 +1,10 @@
 
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1513753554908'); /* IE9*/
-  src: url('iconfont.eot?t=1513753554908#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAmkAAsAAAAADaAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kg7Y21hcAAAAYAAAACAAAABzpdE03RnbHlmAAACAAAABYcAAAcM5PoEemhlYWQAAAeIAAAALwAAADYP352haGhlYQAAB7gAAAAcAAAAJAfeA4hobXR4AAAH1AAAABMAAAAcG+kAAGxvY2EAAAfoAAAAEAAAABAFmgdAbWF4cAAAB/gAAAAfAAAAIAEXAMxuYW1lAAAIGAAAAUUAAAJtPlT+fXBvc3QAAAlgAAAAQgAAAFQeKhOyeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/ss4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzzYW7438AQw9zA0AAUZgTJAQAqnwy9eJzFkdENhSAMRU9BzQsxLqAjvDHepwM4xvsyTNw1tKX8OIGXHNJeSkooMALZ+BoDyIng+psrzc+U5g/8LC98SLaqJt10vy7zqoquPQ6J1RVmlhaPTHY7eR+ZeE3yXuun5rYfPfMfqR17onZ8MpoCr9E18CnpFuDne0C+AcMNGRh4nG1UXYhkxRWuU3Wr6v7W7fvf/93TPXNv68x07/bP7V3XdCe7cRd/4miWNTsImTUrookKCuu+uDoSgiYqUYTVBAKTkCCGBIIP+rJECIG8DOTFN0M0ia+LKLgYxDbn9u6CQvoeTt869VXdqu985xBOyJf/YpdYmQSkRw6Sb5O7CAGxDh1FG7CSjft0HaIVHiWhYlk3W5HdTp99A5KOCONhPk4TIYULCpowWhnmWZ9mMBnP6BEYxg2ASq160l+r++wlMMtZ8yeL2+hvIGp16+5sc3HrxjwctgP9vO37Fd9/QRec65RqroJHktjghikWv+VuNbrUuoG2wK5k1Tu2nXbNv++58aONtcQA2N2FoNZWr8+9qof2ZDUO/IosOXq56nRXQzj/oVUO7Eb6H4I/gXf9G7vCtklM+uR28j1yljyMtw1FJ82m3T5kctKHcT7HyyQHZSedjKcYFN0iOB0VwSgUMk+aINXScHaa+9M8lkLOAOMcg4ibAS5kOIsvOFSQXaeLfapiBQD0pw/ohm0b+pO/YxctRbX5QOOWwsCJHeqeb6bjPmMPnb7p5a0/fC4g+eLEodMU2MaZ/nxl8Yun39C0N57eLfzesW1Kt48dLfypuNHYaDToiuW6lvbwzxl+RkWKgvbHHzddS/CDRxkFN1aU3n+7ZrnHNUMdz4/sHeoNgP1+t/QsVD05OGratbquzm7RJ05vn6P03PbpJxavwcnZ7CQs/V5rs4VGCC1IZZ/SD8ivyDvI45IT9+qfVHTpWRQmMRIzGubTmTZFPsZp1udZWiglHUB6De+yDOlCS8fTGRsN4xYgX3NAygZQhBE6wSzM2BxmqC3cEq0Fw2LLYb7ELA1xxQCaLIrFtTShQEU7KxKL4HxO8xjebZ2IpSZUbd2RutCCQ67ZFmHJ5sfWR/7Zf1x6VHir0qnZ2QYYGgNXWr6qKylWDWYlw0poNo1olnz3h5MVtyF7N1ka45XOMKkfrk00zYs8aekJT93qmi1sbpY7G1Ekg07gNDZDp2JY1BYVp2JKwXTKEqd0oJxQWaveApPaatsFyrilq17I7fLm4nJQC99hdZNL5YkOfY/XShrFPQ833UpSgrKhN0S9kXaCnWM3ujoDqhma8Mz290feQUPIhuH7dpkzzaGF7gyplWTpULL1wBhHICc9Z90Je3W/VhkwFfo6tWTIW1agOANt1fTbrbLgFMtSJp7dcD18BWG6umJ60/XXLItSQ9cWezJKe/WSa5Ziw69qFApcLXxbizhjnAMQomH97bEP2BlikzJZJTNC1jCNoxmMU2w4AmKS5GSakkyQ5HrlYI1NBab6CERhjF0ln04KLWHG046Ev0LJudnxPOdm21vcy8Hd3weX88XH+/uLj6f88ptvXuZLf0UxWrLuXQJh2ypRpl6w2/bjOAKv4qHHBfyrG1xfif4TL7bUxeIzF5UVe792HAJL7X9E3yIHUPm5kCi2TqHApF/U/lKdaNMYJQvZOL2qxAIQj1Zz9l5Q1uj7/936luo1+O45oLFz4WfCs8Otk/fsOE4IetyemurselhTKFuyT88NQFN/Ue6Bb4qdfJdr7h1vH737pebhJqWNA4d/6UjT77zoOZ7jX9iy7H8Xx8Mzfvl39md2nOzgIM3SZaPuXjsLliU+2L3xwHmW5stCwoIrcFL4xeSyYEZxMYOXSIsHmcfuJ67WVrcorAI3zSmDcsUMxeNGxTWt3q3VMKRglTkN/GjNVDpoSbV7ZhI5P+DcvHDl1EPrz1frRigfM6rKMhEfBYhPOAuCMDWU1OLaEn6fEMZTn516cED/6WFe9FctG2WbdmvzFYfb1aAleLQRmPaNd69uDsB7RvdZ9zs/ennxp8fC0tfgHfv/wj2te+cjr8AW0vU/1nQJqwB4nGNgZGBgAGINu5sC8fw2Xxm4WRhA4FqCziUE/X8BCwNzApDLwcAEEgUAB9YJeAB4nGNgZGBgbvjfwBDDwgACQJKRARWwAwBHDQJweJxjYWBgYH7JwMDCgIkBFrMBBQAAAAAAAHYBHgI2ApwC7gOGeJxjYGRgYGBnOMDAxgACTEDMBYQMDP/BfAYAHFEB5AB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICdkYmRmZGFkZWRjZGdkYOBsYK1PDUzKZ+1JLmyNI+ttCAnPzGFtTAzL7OUtbQAKMTAAADg/QwGAAA=') format('woff'),
-  url('iconfont.ttf?t=1513753554908') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('iconfont.svg?t=1513753554908#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1523001890286'); /* IE9*/
+  src: url('iconfont.eot?t=1523001890286#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAApcAAsAAAAADqAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kmaY21hcAAAAYAAAACMAAAB5Jz6bNVnbHlmAAACDAAABisAAAfkf7GmJ2hlYWQAAAg4AAAALwAAADYQ+dpBaGhlYQAACGgAAAAcAAAAJAfeA4lobXR4AAAIhAAAABQAAAAgH+kAAGxvY2EAAAiYAAAAEgAAABII+gbebWF4cAAACKwAAAAfAAAAIAEYAMxuYW1lAAAIzAAAAUUAAAJtPlT+fXBvc3QAAAoUAAAASAAAAF2Rted1eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/ss4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxfzdzwv4EhhrmBoQEozAiSAwAxwA0deJzFkdEJwzAMRE9ymoRiSv+TETpK6BQZwvSr+2QvZYz0ZLmFTpAzz/gOGRkLwAVAIg/SAfKGwPViKjVPuNa8w5M+Y4TyXExttmXfjoNpMbHp574SVmfccOdy12Ngv8TbStvjNMl5rf+V6742N5DS4BOtwX+DaeA1NgU+O5sDn6Etgc9x3wLoBwU0H794nG1VXYwcRxHu6p7unt+enf/9m9293buZde5u97w/M3Zs7xof2AoJPsLJ4JMR52AUEUgiJcLxQ2znEEIkEEQiJGOQIl0QCDlKpCgP5MXipAiJl5N44S0IAvjVQkGKBUIs9OzFEkjslGqner7pmar6vhpEEfr3n8htUkYe6qLD6JPoswgBW4a2wDEspKMeXoZggQaRL0jaSRd4p90jJyBqMz8cZKMkYpzZIKABw4VBlvZwCuPRBB+DQRgDVGrVTXep7pJXQC+njW/PPo1/CkGzU7cnq7OHVqb+oOWpV0zXrbjuyyqjVMVYsQU8FYUa1XQ2+xm1q8Ht5iHcBLOSVh/Zslo197EXR0/HS5EGsLMDXq0lfjF1qo60q9XQcyu8ZKnlqtVZ9OHKHaPsmXHyFyR/IHP9DXmP5GhdBgJ4A6IwS8csyXvAkyxqQNCAfAIyTEeZ9HkSRtkgmgAPmUQH83tiYOEBCKO9GcW3XirZ8MUJLrVwtaK0O62zgWLrG8+Tcki5A8dP5t/ITx4Hh9OwTK6eNV2wnRdvYTojOZ3t3bzTJ7a+KSY0rYOvAU3JGphhQ6UXri+diLRpn6iHbPuQSvpTLTqxdP0C1Q+1ntdt0r9zc29W5MXmed0jWyhEPfQw+gK6hJ6UGfqsnaR5RybDxz0YZVPZpOgwbyfjUZEh6xSL+bBYDHzGi/y5mJu8mmdunoWc8QnIdXpQrXnWRF6VJzIUkN6nAflIhAIA8EuPq5ppaurVn5MbhsDKtK9QQ8iFM9vYvtJIRj1Cnjj/4Ksbb/6TQfSvM0fOYyArF3vThdmPX7ilKLde2Cn87voWxlvrpwp/LozjlTjGC4ZtG8qTPyDyMSIQGJS3vtWwDUYPnyIY7FBg/JWHFcM+rWjidHZs90i3D+SNndJ3oOrw/indrNVVcWkDP3d+6zLGl7fOPze7CZuTySbM/W5ztSkNIVwUlXyEP0Cvob0DpgiwD/64wHNPAj8KZWGGgyyfKAUdRknao2lSKCDpQ/Ix3iapLJe0ZJRPyHAQNkHWawqyZH0oliV0LLswIVOYSM3ILaU1YVBsOcjmmLlJXBFAgwSSiwfvIoXHWmnRWAnOpjgL4XfNMyFXmKgtW1xlinfE1lvML5l0fXnoXvr97aeZs8itmpmugKYQsLnhirrgbFEjRjSo+HpDCybR5742XrBj3n3QUAittAdR/WhtrChO4HBDjWhiV5dMZlK93F4JAu61PSte9a2KZmCTVayKzhlRMYms0lo5wrxW/RSMa4stGzChhiq6PjXLq7O7Xs3fI3WdcuGwNn6f1koKlnsebdiVqARlTY1ZPU7a3vb6A7ZKACuawhy99aWhc1hjPNZc1yxToli44J3GlRIvHYk2Hh/JCPi4ay1bfrfu1ip9InxXxQb3adPwBCWgLOpuq1lmFMtxwyPHjG1HngLTbVUQtWG7S4aBsaYqs10eJN16ydZLoeZWFQwFrua/qwSUEEpBDhVF6m+XfEAuIhOV0SKaILQk2zicwCiRg5RBiKIM5QlKGYruK0dqLGey1ccg8EM5LbN8XHBJdjxpc/g1lKzjluNYx01ndoGCvb8PNqWzD/f3Zx/m9O4779ylc39PEFwyLsyBsGWUMBEvmy3zWRmBU3GklzfQ/97g/p3S/80JDXGjeMwNYYTO65ZVzEjJ/b/iX6I1yfyMFYOvXTAw6hXan7NTWh5KysohmRwwsQCEw8WMvO+VFfzHf2x8QnRjunMZcGhd+y5zTH9j8/PbluWDGrZyXVxa9mtC0hbt48t9UMR7wl47ybazHarYj7x76tFXGkcbGMdrR39icd1tf9+xHMu9tmGYf74/x39LfkVOo20ZJGky/wB1Pn4XKUt5yK+SfOEsTbK5kKTgChxnbnFxLpjhfIjLJJLikJWX048daKtTCKvA5RkmUK7oPntWq9i60X2o6vsYjDLFnhss6UIFJap2Lo4D68uU6tfunXti+XvVuubzZ7SqMHSJDzyJjyjxPD/RBFfC2hz+GGPa9b+f+2of/8GRfVF/ZJiStkmnNl2wqFn1mowGK55uPvDo4mofnG+qLul85uuvzt5+xi/9D7xt/l+4o3TOPvVD2JDl+g9+5y00AHicY2BkYGAA4vdhFhPj+W2+MnCzMIDAtbfeSgj6/wIWBuYEIJeDgQkkCgAriQovAHicY2BkYGBu+N/AEMPCAAJAkpEBFXAAAEcOAnF4nGNhYGBgfsnAwMKAHQMAGtcBCQAAAAAAdgDiAYoCogMIA1oD8gAAeJxjYGRgYOBgOMDAxgACTEDMBYQMDP/BfAYAHGwB5QB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxtyMEOQDAQBNCZslX+UhE2kbaSbvD3JK7e8cHhM+BfoGPDlkLPjoE9ePlV62ZRzkVjljrdlryVPY+zHJrUxMpbwANFHA6a') format('woff'),
+  url('iconfont.ttf?t=1523001890286') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1523001890286#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 [class*=" el-icon-ui"], [class^=el-icon-ui] {
@@ -15,6 +15,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.el-icon-ui-github:before { content: "\e7ab"; }
+
 .el-icon-ui-weibo:before { content: "\e61c"; }
 
 .el-icon-ui-tcyun:before { content: "\e64c"; }

src/renderer/assets/fonts/iconfont.svg

@@ -27,6 +27,9 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
     
 
     
+    <glyph glyph-name="github" unicode="&#59307;" d="M512 822.894c-248.508 0-450-201.456-450-450 0-198.828 128.934-367.506 307.728-426.996 22.482-4.158 30.762 9.756 30.762 21.654 0 10.728-0.414 46.188-0.612 83.772-125.19-27.216-151.614 53.1-151.614 53.1-20.466 52.002-49.968 65.844-49.968 65.844-40.824 27.936 3.078 27.36 3.078 27.36 45.18-3.168 68.976-46.368 68.976-46.368 40.14-68.796 105.264-48.906 130.968-37.404 4.032 29.088 15.696 48.942 28.566 60.174-99.954 11.376-205.02 49.968-205.02 222.39 0 49.122 17.586 89.28 46.368 120.78-4.68 11.34-20.088 57.096 4.356 119.088 0 0 37.8 12.078 123.786-46.134 35.892 9.972 74.394 14.976 112.644 15.156 38.232-0.18 76.752-5.166 112.716-15.156 85.896 58.23 123.624 46.134 123.624 46.134 24.498-61.992 9.09-107.748 4.428-119.088 28.854-31.518 46.314-71.658 46.314-120.78 0-172.836-105.282-210.888-205.488-222.03 16.146-13.968 30.528-41.346 30.528-83.322 0-60.21-0.522-108.666-0.522-123.498 0-11.97 8.1-26.01 30.906-21.6 178.704 59.562 307.476 228.186 307.476 426.942 0 248.544-201.474 450-450 450z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="weibo" unicode="&#58908;" d="M1013.46529415 545.47540804c0-14.8526376-11.46535652-26.88232091-25.58940469-26.8823209-14.12272255 0-25.56953354 12.03100762-25.56953352 26.8823209 0 1.34457994 0.18810806 2.64941756 0.37224319 3.94895792l-0.37224319 0c0 139.92901597-108.14394722 253.3466299-241.5222759 253.3466299-2.53151878 0-4.99680252-0.32587799-7.5296456-0.39211435l0 0.7842274c-12.33966437 1.93142522-21.81663342 13.00334437-21.81663343 26.49020656 0 13.48421356 9.47564343 24.53891019 21.81663343 26.4703354l0 0.02251979c0.06358643 0 0.14571841 0 0.20532929 0 1.16441905 0.17486105 2.34605934 0.36959327 3.56744197 0.36959325 0.39608859 0 0.79085155-0.08610622 1.18164029-0.10862599 0.79217586 0.04371526 1.57640327 0.10862599 2.38712599 0.10862599 161.74962231 0 292.86932347-137.4968504 292.86932348-307.08875061l-0.39608859 0C1013.25863924 548.1235012899999 1013.46529415 546.8199879900001 1013.46529415 545.47540804zM863.34794096 518.59176283c-14.12139824 0-25.56953354 12.03100762-25.56953354 26.8823209 0 3.56081781 0.68487418 6.96797006 1.88770995 10.0730871-2.98854387 64.2960783-52.1948614 115.73982917-113.60042345 118.60649873-2.81765575-1.13130087-5.84726626-1.80292934-9.0384895-1.80292935-14.11874832 0-25.58940468 12.02968331-25.5894047 26.86112543 0 13.50540903 9.47564343 24.55878134 21.81663342 26.49020656l0 0c0.06358643 0 0.12319732 0.0238454 0.18678375 0.0238454 1.18429021 0.17221243 2.3646062 0.36694464 3.58731185 0.36694464 0.39608859 0 0.79085155-0.10862599 1.18164028-0.12849716 0.79217586 0.06358643 1.57640327 0.12849716 2.38712598 0.12849716 92.9614561 0 168.34005063-79.10500064 168.34005064-176.6711449l-0.39078874 0c0.18810806-1.30086468 0.39078875-2.60437798 0.39078874-3.94895792C888.93602132 530.6227704400001 877.47066481 518.59176283 863.34794096 518.59176283zM754.87281718 449.10547541c20.4879504 2.58450683 43.02787472 1.45453025 68.32981684-5.21405452 70.0267688-18.47969046 98.02449494-65.7929995 94.95381909-137.84392388-3.10909257-73.41934842-80.46017767-204.8583047-196.12979627-275.14471646-77.16430135-51.85441078-177.86470788-87.75137581-282.42001895-87.7513758-221.16017403 0-429.07193204 134.69774021-429.07193204 300.83612299 0 2.19239377 0.20797922 4.40730732 0.30070958 6.60367404 0 0.0834563 0.01059709 0.17221243 0.01059709 0.23712316 0.15499118 3.17135339 0.35237202 6.34138245 0.70474535 9.51406017C25.08266092 424.84872796 281.96361331 686.07605117 358.85634901 693.93819893c71.77008594 7.33756332 148.28925417-16.54694094 142.21546312-106.1635069-0.4583494-6.73084688-1.94997206-13.94123735-3.85755316-21.34636133 57.46322827 34.46230593 125.08565114 58.5640622 185.94940747 46.83906271C766.77400333 597.1774775700001 787.13875511 513.92348823 754.87281718 449.10547541zM420.4857885 420.8110152c-165.81383039 0-300.19098985-93.13366851-300.19098984-208.04555373 0-114.89068974 134.37715946-208.02700817 300.19098984-208.02700818 165.77276377 0 300.16979438 93.13631843 300.16979438 208.02700818C720.6569072 327.67734540000004 586.25855228 420.8110152 420.4857885 420.8110152zM387.57869037 58.58919872000001c-86.91018613 0-157.33436782 65.55852496-157.33436783 146.3988943 0 80.84566786 70.4241817 146.39889428 157.33436783 146.39889429 86.90753621 0 157.35291338-65.5519021 157.35291337-146.39889429C544.93160374 124.1490493 474.48622658 58.58919872000001 387.57869037 58.58919872000001zM369.22484715 220.25404044000004c-28.36864372 0-51.34307333-24.08056079-51.34307335-53.76331621 0-29.68407973 22.97442832-53.74741927 51.34307335-53.74741926 28.36731941 0 51.36559312 24.06333954 51.36559313 53.74741926C420.59044028 196.17480396999997 397.59216656 220.25404044000004 369.22484715 220.25404044000004z"  horiz-adv-x="1024" />
 
     

src/renderer/components/ConfigForm.vue

@@ -0,0 +1,142 @@
+<template>
+  <div id="config-form">
+    <el-form
+      label-position="right"
+      label-width="120px"
+      :model="ruleForm"
+      ref="form"
+      size="mini"
+    >
+      <el-form-item
+        v-for="(item, index) in configList"
+        :label="item.name"
+        :required="item.required"
+        :prop="item.name"
+        :key="item.name + index"
+      >
+        <el-input
+          v-if="item.type === 'input' || item.type === 'password'"
+          :type="item.type === 'password' ? 'password' : 'input'"
+          v-model="ruleForm[item.name]"
+          :placeholder="item.message || item.name"
+        ></el-input>
+        <el-select
+          v-else-if="item.type === 'list'"
+          v-model="ruleForm[item.name]"
+          :placeholder="item.message || item.name"
+        >
+          <el-option
+            v-for="(choice, idx) in item.choices"
+            :label="choice.name || choice.value || choice"
+            :key="choice.name || choice.value || choice"
+            :value="choice.value || choice"
+          ></el-option>
+        </el-select>
+        <el-select
+          v-else-if="item.type === 'checkbox'"
+          v-model="ruleForm[item.name]"
+          :placeholder="item.message || item.name"
+          multiple
+          collapse-tags
+        >
+          <el-option
+            v-for="(choice, idx) in item.choices"
+            :label="choice.name || choice.value || choice"
+            :key="choice.value || choice"
+            :value="choice.value || choice"
+          ></el-option>
+        </el-select>
+        <el-switch
+          v-else-if="item.type === 'confirm'"
+          v-model="ruleForm[item.name]"
+          active-text="yes"
+          inactive-text="no"
+        >
+        </el-switch>
+      </el-form-item>
+      <slot></slot>
+    </el-form>
+  </div>
+</template>
+<script>
+import { cloneDeep, union } from 'lodash'
+export default {
+  name: 'config-form',
+  props: {
+    config: Array,
+    type: String,
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      configList: [],
+      ruleForm: {}
+    }
+  },
+  created () {
+  },
+  watch: {
+    config: {
+      deep: true,
+      handler (val) {
+        this.ruleForm = Object.assign({}, {})
+        const config = this.$db.read().get(`picBed.${this.id}`).value()
+        if (val.length > 0) {
+          this.configList = cloneDeep(val).map(item => {
+            let defaultValue = item.default !== undefined
+              ? item.default : item.type === 'checkbox'
+                ? [] : null
+            if (item.type === 'checkbox') {
+              const defaults = item.choices.filter(i => {
+                return i.checked
+              }).map(i => i.value)
+              defaultValue = union(defaultValue, defaults)
+            }
+            if (config && config[item.name] !== undefined) {
+              defaultValue = config[item.name]
+            }
+            this.$set(this.ruleForm, item.name, defaultValue)
+            return item
+          })
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    async validate () {
+      return new Promise((resolve, reject) => {
+        this.$refs.form.validate(valid => {
+          if (valid) {
+            resolve(this.ruleForm)
+          } else {
+            resolve(false)
+            return false
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+#config-form
+  .el-form
+    label
+      line-height 22px
+      padding-bottom 0
+    .el-button-group
+      width 100%
+      .el-button
+        width 50%
+    .el-input__inner
+      border-radius 19px
+    .el-radio-group
+      margin-left 25px
+    .el-switch__label
+      &.is-active
+        color #409EFF
+</style>

src/renderer/components/SettingPage.vue

@@ -1,168 +0,0 @@
-<template>
-  <div id="setting-page">
-    <div class="fake-title-bar">
-      PicGo - {{ version }}
-    </div>
-    <el-row style="padding-top: 22px;">
-      <el-col :span="5">
-        <el-menu
-          class="picgo-sidebar"
-          :default-active="defaultActive"
-          @select="handleSelect"
-          >
-          <el-menu-item index="upload">
-            <i class="el-icon-upload"></i>
-            <span slot="title">上传区</span>
-          </el-menu-item>
-          <el-menu-item index="gallery">
-            <i class="el-icon-picture"></i>
-            <span slot="title">相册</span>
-          </el-menu-item>
-          <el-menu-item index="weibo">
-            <i class="el-icon-ui-weibo"></i>
-            <span slot="title">微博设置</span>
-          </el-menu-item>
-          <el-menu-item index="qiniu">
-            <i class="el-icon-ui-qiniu"></i>
-            <span slot="title">七牛云设置</span>
-          </el-menu-item>
-          <el-menu-item index="tcyun">
-            <i class="el-icon-ui-tcyun"></i>
-            <span slot="title">腾讯COS设置</span>
-          </el-menu-item>
-          <el-menu-item index="upyun">
-            <i class="el-icon-ui-upyun"></i>
-            <span slot="title">又拍云设置</span>
-          </el-menu-item>
-          <i class="el-icon-setting" @click="openDialog"></i>
-        </el-menu>
-      </el-col>
-      <el-col :span="19" :offset="5">
-        <router-view></router-view>
-      </el-col>
-    </el-row> 
-    <el-dialog
-      title="赞助PicGo"
-      :visible.sync="visible"
-      width="70%"
-      top="10vh"
-    >
-      PicGo是免费开源的软件，如果你喜欢它，对你有帮助，不妨请我喝杯咖啡？
-      <el-row class="support">
-        <el-col :span="12">
-          <img src="https://user-images.githubusercontent.com/12621342/34188165-e7cdf372-e56f-11e7-8732-1338c88b9bb7.jpg" alt="支付宝">
-          <div class="support-title">支付宝</div>
-        </el-col>
-        <el-col :span="12">
-          <img src="https://user-images.githubusercontent.com/12621342/34188201-212cda84-e570-11e7-9b7a-abb298699d85.jpg" alt="支付宝">
-          <div class="support-title">微信</div>
-        </el-col>
-      </el-row>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import pkg from '../../../package.json'
-import { remote } from 'electron'
-const { Menu, dialog } = remote
-export default {
-  name: 'setting-page',
-  data () {
-    return {
-      version: pkg.version,
-      defaultActive: 'upload',
-      menu: null,
-      visible: false
-    }
-  },
-  created () {
-    this.buildMenu()
-  },
-  methods: {
-    handleSelect (index) {
-      this.$router.push({
-        name: index
-      })
-    },
-    buildMenu () {
-      const _this = this
-      const template = [
-        {
-          label: '关于',
-          click () {
-            dialog.showMessageBox({
-              title: 'PicGo',
-              message: 'PicGo',
-              detail: `Version: ${pkg.version}\nAuthor: Molunerfinn\nGithub: https://github.com/Molunerfinn/PicGo`
-            })
-          }
-        },
-        {
-          label: '赞助PicGo',
-          click () {
-            _this.visible = true
-          }
-        }
-      ]
-      this.menu = Menu.buildFromTemplate(template)
-    },
-    openDialog () {
-      this.menu.popup(remote.getCurrentWindow)
-    }
-  },
-  beforeRouteEnter: (to, from, next) => {
-    next(vm => {
-      vm.defaultActive = to.name
-    })
-  }
-}
-</script>
-<style lang='stylus'>
-#setting-page
-  .fake-title-bar
-    -webkit-app-region drag
-    height h = 22px
-    width 100%
-    text-align center
-    color #eee
-    font-size 12px
-    line-height h
-    position fixed
-  .picgo-sidebar
-    height calc(100vh - 22px)
-  .el-menu
-    border-right none
-    background transparent
-    position fixed
-    .el-icon-setting
-      position absolute
-      bottom 4px
-      left 4px
-      cursor pointer
-      color #878d99
-      transition .2s all ease-in-out
-      &:hover
-        color #409EFF
-    &-item
-      color #eee
-      position relative
-      &:focus,
-      &:hover
-        color #fff
-        background transparent
-      &.is-active
-        color active-color = #409EFF
-        &:before
-          content ''
-          position absolute
-          width 3px 
-          height 20px
-          right 0
-          top 18px
-          background active-color
-  .support
-    text-align center
-    &-title
-      text-align center
-      color #878d99
-</style>

src/renderer/components/SettingView/Gallery.vue

@@ -1,151 +0,0 @@
-<template>
-  <div id="gallery-view">
-    <div class="view-title">
-      相册
-    </div>
-    <el-row class="gallery-list">
-      <el-col :span="20" :offset="2">
-        <el-row :gutter="16">
-          <gallerys
-            :images="images"
-            :index="idx"
-            @close="handleClose"
-            :options="options"
-          ></gallerys>
-          <el-col :span="6" v-for="(item, index) in images" :key="item.id">
-            <div 
-              class="gallery-list__item"
-              :style="{ 'background-image': `url(${item.imgUrl})` }"
-              @click="zoomImage(index)"
-            >
-            </div>
-            <div class="gallery-list__tool-panel">
-              <i class="el-icon-document" @click="copy(item.imgUrl)"></i>
-              <i class="el-icon-delete" @click="remove(item.id)"></i>
-            </div> 
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script>
-import gallerys from 'vue-gallery'
-import pasteStyle from '../../../main/utils/pasteTemplate'
-export default {
-  name: 'gallery',
-  components: {
-    gallerys
-  },
-  data () {
-    return {
-      images: [],
-      idx: null,
-      options: {
-        titleProperty: 'fileName',
-        urlProperty: 'imgUrl',
-        closeOnSlideClick: true
-      }
-    }
-  },
-  created () {
-    this.getGallery()
-  },
-  methods: {
-    getGallery () {
-      this.images = this.$db.read().get('uploaded').slice().reverse().value()
-    },
-    zoomImage (index) {
-      this.idx = index
-    },
-    handleClose () {
-      this.idx = null
-    },
-    copy (url) {
-      const style = this.$db.read().get('picBed.pasteStyle').value()
-      const copyLink = pasteStyle(style, url)
-      const obj = {
-        title: '复制链接成功',
-        body: copyLink,
-        icon: url
-      }
-      const myNotification = new window.Notification(obj.title, obj)
-      this.$electron.clipboard.writeText(copyLink)
-      myNotification.onclick = () => {
-        return true
-      }
-    },
-    remove (id) {
-      this.$confirm('此操作将把该图片移出相册, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$db.read().get('uploaded').removeById(id).write()
-        const obj = {
-          title: '操作结果',
-          body: '删除成功'
-        }
-        const myNotification = new window.Notification(obj.title, obj)
-        myNotification.onclick = () => {
-          return true
-        }
-        this.getGallery()
-      }).catch(() => {
-        return true
-      })
-    }
-  }
-}
-</script>
-<style lang='stylus'>
-.view-title
-  color #eee
-  font-size 20px
-  text-align center
-  margin 20px auto
-#gallery-view
-  .gallery-list
-    height 360px
-    box-sizing border-box
-    padding 8px 0
-    overflow-y auto
-    overflow-x hidden
-    .el-col
-      height 150px
-      position relative
-      margin-bottom 16px
-    &__item
-      width 100%
-      height 120px
-      background-size cover
-      background-position 50% 50%
-      background-repeat no-repeat
-      transition all .2s ease-in-out
-      cursor pointer
-      margin-bottom 8px
-      &-fake
-        position absolute
-        top 0
-        left 0 
-        opacity 0
-        width 100%
-        z-index -1
-      &:hover
-        background-color #49B1F5
-        transform scale(1.1)
-    &__tool-panel
-      color #ddd
-      i
-        cursor pointer
-        transition all .2s ease-in-out
-        &.el-icon-document
-          &:hover
-            color #49B1F5
-        &.el-icon-delete
-          &:hover
-            color #F15140
-  .blueimp-gallery
-    .title
-      top 30px
-</style>

src/renderer/components/SettingView/Weibo.vue

@@ -1,109 +0,0 @@
-<template>
-  <div id="weibo-view">
-    <el-row :gutter="16">
-      <el-col :span="12" :offset="6">
-        <div class="view-title">
-          微博图床设置
-        </div>
-        <el-form 
-          ref="weiboForm"
-          label-position="top"
-          label-width="80px"
-          :model="form">
-          <el-form-item
-            label="设定用户名"
-            prop="username"
-            :rules="{
-              required: true, message: '用户名不能为空', trigger: 'blur'
-            }">
-            <el-input v-model="form.username" placeholder="用户名" @keyup.native.enter="confirm('weiboForm')"></el-input>
-          </el-form-item>
-          <el-form-item
-            label="设定密码"
-            prop="password"
-            :rules="{
-              required: true, message: '密码不能为空', trigger: 'blur'
-            }">
-            <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')" round>确定</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script>
-import mixin from '../mixin'
-export default {
-  name: 'weibo',
-  mixins: [mixin],
-  data () {
-    return {
-      form: {
-        username: '',
-        password: ''
-      },
-      quality: 'large'
-    }
-  },
-  created () {
-    const config = this.$db.read().get('picBed.weibo').value()
-    if (config) {
-      this.form.username = config.username
-      this.form.password = config.password
-      this.quality = config.quality || 'large'
-    }
-  },
-  methods: {
-    confirm (formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.$db.read().set('picBed.weibo', {
-            username: this.form.username,
-            password: this.form.password,
-            quality: this.quality
-          }).write()
-          const successNotification = new window.Notification('设置结果', {
-            body: '设置成功'
-          })
-          successNotification.onclick = () => {
-            return true
-          }
-        } else {
-          return false
-        }
-      })
-    }
-  }
-}
-</script>
-<style lang='stylus'>
-.el-message
-  left 60%
-.view-title
-  color #eee
-  font-size 20px
-  text-align center
-  margin 20px auto
-#weibo-view
-  .el-form
-    label  
-      line-height 22px
-      padding-bottom 0
-      color #eee
-    .el-button
-      width 100%
-    .el-input__inner
-      border-radius 19px
-    .el-radio-group
-      margin-left 25px
-</style>

src/renderer/layouts/SettingPage.vue

@@ -0,0 +1,425 @@
+<template>
+  <div id="setting-page">
+    <div class="fake-title-bar" :class="{ 'darwin': os === 'darwin' }">
+      <div class="fake-title-bar__title">
+        PicGo - {{ version }}
+      </div>
+      <div class="handle-bar" v-if="os !== 'darwin'">
+        <i class="el-icon-minus" @click="minimizeWindow"></i>
+        <i class="el-icon-circle-plus-outline" @click="openMiniWindow"></i>
+        <i class="el-icon-close" @click="closeWindow"></i>
+      </div>
+    </div>
+    <el-row style="padding-top: 22px;" class="main-content">
+      <el-col :span="5" class="side-bar-menu">
+        <el-menu
+          class="picgo-sidebar"
+          :default-active="defaultActive"
+          @select="handleSelect"
+          :unique-opened="true"
+          >
+          <el-menu-item index="upload">
+            <i class="el-icon-upload"></i>
+            <span slot="title">上传区</span>
+          </el-menu-item>
+          <el-menu-item index="gallery">
+            <i class="el-icon-picture"></i>
+            <span slot="title">相册</span>
+          </el-menu-item>
+          <el-submenu
+            index="sub-menu"
+          >
+            <template slot="title">
+              <i class="el-icon-menu"></i>
+              <span>图床设置</span>
+            </template>
+            <template
+              v-for="item in picBed"
+            >
+              <el-menu-item
+                v-if="item.visible"
+                :index="`picbeds-${item.type}`"
+                :key="item.type"
+              >
+                <!-- <i :class="`el-icon-ui-${item.type}`"></i> -->
+                <span slot="title">{{ item.name }}</span>
+              </el-menu-item>
+            </template>
+          </el-submenu>
+          <el-menu-item index="setting">
+            <i class="el-icon-setting"></i>
+            <span slot="title">PicGo设置</span>
+          </el-menu-item>
+          <el-menu-item index="plugin">
+            <i class="el-icon-share"></i>
+            <span slot="title">插件设置</span>
+          </el-menu-item>
+        </el-menu>
+        <i class="el-icon-info setting-window" @click="openDialog"></i>
+      </el-col>
+      <el-col
+        :span="19"
+        :offset="5"
+        style="height: 428px"
+        class="main-wrapper"
+        :class="{ 'darwin': os === 'darwin' }">
+        <transition name="picgo-fade" mode="out-in">
+          <keep-alive>
+            <router-view v-if="$route.meta.keepAlive"></router-view>
+          </keep-alive>
+        </transition>
+        <transition name="picgo-fade" mode="out-in">
+          <router-view :key="$route.path" v-if="!$route.meta.keepAlive"></router-view>
+        </transition>
+      </el-col>
+    </el-row>
+    <el-dialog
+      title="赞助PicGo"
+      :visible.sync="visible"
+      width="70%"
+      top="10vh"
+    >
+      PicGo是免费开源的软件，如果你喜欢它，对你有帮助，不妨请我喝杯咖啡？
+      <el-row class="support">
+        <el-col :span="12">
+          <img src="https://user-images.githubusercontent.com/12621342/34188165-e7cdf372-e56f-11e7-8732-1338c88b9bb7.jpg" alt="支付宝">
+          <div class="support-title">支付宝</div>
+        </el-col>
+        <el-col :span="12">
+          <img src="https://user-images.githubusercontent.com/12621342/34188201-212cda84-e570-11e7-9b7a-abb298699d85.jpg" alt="支付宝">
+          <div class="support-title">微信</div>
+        </el-col>
+      </el-row>
+    </el-dialog>
+    <el-dialog
+      title="修改快捷键"
+      :visible.sync="keyBindingVisible"
+    >
+      <el-form
+        label-width="80px"
+      >
+        <el-form-item
+          label="快捷上传"
+        >
+          <el-input 
+            class="align-center"
+            @keydown.native.prevent="keyDetect('upload', $event)"
+            v-model="shortKey.upload"
+            :autofocus="true"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="cancelKeyBinding">取消</el-button>
+        <el-button type="primary" @click="confirmKeyBinding">确定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="自定义链接格式"
+      :visible.sync="customLinkVisible"
+    >
+      <el-form
+        label-position="top"
+        :model="customLink"
+        ref="customLink"
+        :rules="rules"
+      >
+        <el-form-item
+          label="用占位符$url来表示url的位置"
+          prop="value"
+        >
+          <el-input 
+            class="align-center"
+            v-model="customLink.value"
+            :autofocus="true"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div>
+        如[]($url)
+      </div>
+      <span slot="footer">
+        <el-button @click="cancelCustomLink">取消</el-button>
+        <el-button type="primary" @click="confirmCustomLink">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import pkg from 'root/package.json'
+import keyDetect from 'utils/key-binding'
+import { remote } from 'electron'
+import db from '~/datastore'
+import mixin from '@/utils/mixin'
+const { Menu, dialog, BrowserWindow } = remote
+export default {
+  name: 'setting-page',
+  mixins: [mixin],
+  data () {
+    const customLinkRule = (rule, value, callback) => {
+      if (!/\$url/.test(value)) {
+        return callback(new Error('必须含有$url'))
+      } else {
+        return callback()
+      }
+    }
+    return {
+      version: process.env.NODE_ENV === 'production' ? pkg.version : 'Dev',
+      defaultActive: 'upload',
+      menu: null,
+      visible: false,
+      keyBindingVisible: false,
+      customLinkVisible: false,
+      customLink: {
+        value: db.read().get('customLink').value() || '$url'
+      },
+      rules: {
+        value: [
+          { validator: customLinkRule, trigger: 'blur' }
+        ]
+      },
+      os: '',
+      shortKey: {
+        upload: db.read().get('shortKey.upload').value()
+      },
+      picBed: []
+    }
+  },
+  created () {
+    this.os = process.platform
+    this.buildMenu()
+    this.$electron.ipcRenderer.send('getPicBeds')
+    this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
+  },
+  methods: {
+    handleSelect (index) {
+      const type = index.match(/picbeds-/)
+      if (type === null) {
+        this.$router.push({
+          name: index
+        })
+      } else {
+        const picBed = index.replace(/picbeds-/, '')
+        if (this.$builtInPicBed.includes(picBed)) {
+          this.$router.push({
+            name: picBed
+          })
+        } else {
+          this.$router.push({
+            name: 'others',
+            params: {
+              type: picBed
+            }
+          })
+        }
+      }
+    },
+    minimizeWindow () {
+      const window = BrowserWindow.getFocusedWindow()
+      window.minimize()
+    },
+    closeWindow () {
+      const window = BrowserWindow.getFocusedWindow()
+      window.close()
+    },
+    buildMenu () {
+      const _this = this
+      const template = [
+        {
+          label: '关于',
+          click () {
+            dialog.showMessageBox({
+              title: 'PicGo',
+              message: 'PicGo',
+              detail: `Version: ${pkg.version}\nAuthor: Molunerfinn\nGithub: https://github.com/Molunerfinn/PicGo`
+            })
+          }
+        },
+        {
+          label: '赞助PicGo',
+          click () {
+            _this.visible = true
+          }
+        }
+      ]
+      this.menu = Menu.buildFromTemplate(template)
+    },
+    openDialog () {
+      this.menu.popup(remote.getCurrentWindow())
+    },
+    keyDetect (type, event) {
+      this.shortKey[type] = keyDetect(event).join('+')
+    },
+    cancelKeyBinding () {
+      this.keyBindingVisible = false
+      this.shortKey = db.read().get('shortKey').value()
+    },
+    confirmKeyBinding () {
+      const oldKey = db.read().get('shortKey').value()
+      db.read().set('shortKey', this.shortKey).write()
+      this.keyBindingVisible = false
+      this.$electron.ipcRenderer.send('updateShortKey', oldKey)
+    },
+    cancelCustomLink () {
+      this.customLinkVisible = false
+      this.customLink.value = db.read().get('customLink').value() || '$url'
+    },
+    confirmCustomLink () {
+      this.$refs.customLink.validate((valid) => {
+        if (valid) {
+          db.read().set('customLink', this.customLink.value).write()
+          this.customLinkVisible = false
+          this.$electron.ipcRenderer.send('updateCustomLink')
+        } else {
+          return false
+        }
+      })
+    },
+    openMiniWindow () {
+      this.$electron.ipcRenderer.send('openMiniWindow')
+    },
+    getPicBeds (event, picBeds) {
+      this.picBed = picBeds
+    }
+  },
+  beforeRouteEnter: (to, from, next) => {
+    next(vm => {
+      vm.defaultActive = to.name
+    })
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
+  }
+}
+</script>
+<style lang='stylus'>
+$darwinBg = transparentify(#172426, #000, 0.7)
+.picgo-fade
+  &-enter,
+  &-leave,
+  &-leave-active
+    opacity 0
+  &-enter-active,
+  &-leave-active
+    transition all 100ms linear
+.view-title
+  color #eee
+  font-size 20px
+  text-align center
+  margin 10px auto
+#setting-page
+  .fake-title-bar
+    -webkit-app-region drag
+    height h = 22px
+    width 100%
+    text-align center
+    color #eee
+    font-size 12px
+    line-height h
+    position fixed
+    z-index 100
+    &.darwin
+      background transparent
+      background-image linear-gradient(
+        to right,
+        transparent 0%,
+        transparent 167px,
+        $darwinBg 167px,
+        $darwinBg 100%
+      )
+      .fake-title-bar__title
+        padding-left 167px
+    .handle-bar
+      position absolute
+      top 2px
+      right 4px
+      width 60px
+      z-index 10000
+      -webkit-app-region no-drag
+      i
+        cursor pointer
+        font-size 16px
+      .el-icon-minus
+        &:hover
+          color #409EFF
+      .el-icon-close
+        &:hover
+          color #F15140
+      .el-icon-circle-plus-outline
+        &:hover
+          color #69C282
+  .main-wrapper
+    &.darwin
+      background $darwinBg
+  .side-bar-menu
+    position fixed
+    height calc(100vh - 22px)
+    overflow-x hidden
+    overflow-y auto
+    width 170px
+    .el-icon-info.setting-window
+      position fixed 
+      bottom 4px
+      left 4px
+      cursor poiter
+      color #878d99
+      transition .2s all ease-in-out
+      &:hover
+        color #409EFF
+  .el-menu
+    border-right none
+    background transparent
+    width 170px
+    &-item
+      color #eee
+      position relative
+      &:focus,
+      &:hover
+        color #fff
+        background transparent
+      &.is-active
+        color active-color = #409EFF
+        &:before
+          content ''
+          position absolute
+          width 3px 
+          height 20px
+          right 0
+          top 18px
+          background active-color
+  .el-submenu__title
+    span
+      color #eee
+    &:hover
+      background transparent
+      span
+        color #fff
+  .el-submenu
+    .el-menu-item
+      min-width 166px
+      &.is-active
+        &:before
+          top 16px
+  .main-content
+    padding-top 22px
+    position relative
+    z-index 10
+  .el-dialog__body 
+    padding 20px
+  .support
+    text-align center
+    &-title
+      text-align center
+      color #878d99
+  .align-center
+    input
+      text-align center
+  *::-webkit-scrollbar
+    width 8px
+    height 8px
+  *::-webkit-scrollbar-thumb
+    border-radius 4px
+    background #6f6f6f
+  *::-webkit-scrollbar-track
+    background-color transparent
+</style>

src/renderer/main.js

@@ -8,7 +8,10 @@ import store from './store'
 import db from '../datastore/index'
 import { webFrame } from 'electron'
 import './assets/fonts/iconfont.css'
+import VueLazyLoad from 'vue-lazyload'
+
 Vue.use(ElementUI)
+Vue.use(VueLazyLoad)
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 webFrame.setLayoutZoomLevelLimits(0, 0)
@@ -16,6 +19,16 @@ webFrame.setLayoutZoomLevelLimits(0, 0)
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
 Vue.prototype.$db = db
+Vue.prototype.$builtInPicBed = [
+  'smms',
+  'weibo',
+  'imgur',
+  'qiniu',
+  'tcyun',
+  'upyun',
+  'aliyun',
+  'github'
+]
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

src/renderer/pages/Gallery.vue

@@ -0,0 +1,461 @@
+<template>
+  <div id="gallery-view">
+    <div class="view-title">
+      相册 - {{ filterList.length }} <i class="el-icon-caret-bottom" @click="toggleHandleBar" :class="{'active': handleBarActive}"></i>
+    </div>
+    <transition name="el-zoom-in-top">
+      <el-row v-show="handleBarActive">
+        <el-col :span="20" :offset="2">
+          <el-row class="handle-bar" :gutter="16">
+            <el-col :span="12">
+              <el-select
+                v-model="choosedPicBed"
+                multiple
+                collapse-tags
+                size="mini"
+                style="width: 100%"
+                placeholder="请选择显示的图床">
+                <el-option
+                  v-for="item in picBed"
+                  :key="item.type"
+                  :label="item.name"
+                  :value="item.type">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="12">
+              <el-select
+                v-model="pasteStyle"
+                size="mini"
+                style="width: 100%"
+                @change="handlePasteStyleChange"
+                placeholder="请选择粘贴的格式">
+                <el-option
+                  v-for="(value, key) in pasteStyleMap"
+                  :key="key"
+                  :label="key"
+                  :value="value">
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+          <el-row class="handle-bar" :gutter="16">
+            <el-col :span="12">
+              <el-input
+                placeholder="搜索"
+                size="mini"
+                v-model="searchText">
+                <i slot="suffix" class="el-input__icon el-icon-close" v-if="searchText" @click="cleanSearch" style="cursor: pointer"></i>
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <div class="item-base copy round" :class="{ active: isMultiple(choosedList)}" @click="multiCopy">
+                <i class="el-icon-document"></i> 批量复制
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="item-base delete round" :class="{ active: isMultiple(choosedList)}" @click="multiRemove">
+                <i class="el-icon-delete"></i> 批量删除
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </transition>
+    <el-row class="gallery-list" :class="{ small: handleBarActive }">
+      <el-col :span="20" :offset="2">
+        <el-row :gutter="16">
+          <gallerys
+            :images="images"
+            :index="idx"
+            @close="handleClose"
+            :options="options"
+          ></gallerys>
+          <el-col :span="6" v-for="(item, index) in images" :key="item.id" class="gallery-list__img">
+            <div 
+              class="gallery-list__item"
+              v-lazy:background-image="item.imgUrl"
+              @click="zoomImage(index)"
+            >
+            </div>
+            <div class="gallery-list__tool-panel">
+              <i class="el-icon-document" @click="copy(item)"></i>
+              <i class="el-icon-edit-outline" @click="openDialog(item)"></i>
+              <i class="el-icon-delete" @click="remove(item.id)"></i>
+              <el-checkbox v-model="choosedList[item.id]" class="pull-right" @change=" handleBarActive = true"></el-checkbox>
+            </div> 
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="修改图片URL"
+      width="500px"
+      :modal-append-to-body="false"
+    >
+      <el-input v-model="imgInfo.imgUrl"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmModify">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import gallerys from 'vue-gallery'
+import pasteStyle from '~/main/utils/pasteTemplate'
+export default {
+  name: 'gallery',
+  components: {
+    gallerys
+  },
+  data () {
+    return {
+      images: [],
+      idx: null,
+      options: {
+        titleProperty: 'fileName',
+        urlProperty: 'imgUrl',
+        closeOnSlideClick: true
+      },
+      dialogVisible: false,
+      imgInfo: {
+        id: null,
+        imgUrl: ''
+      },
+      choosedList: {},
+      choosedPicBed: [],
+      searchText: '',
+      handleBarActive: false,
+      pasteStyle: '',
+      pasteStyleMap: {
+        Markdown: 'markdown',
+        HTML: 'HTML',
+        URL: 'URL',
+        UBB: 'UBB',
+        Custom: 'Custom'
+      },
+      picBed: []
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.getGallery()
+      vm.getPasteStyle()
+      vm.getPicBeds()
+    })
+  },
+  created () {
+    this.$electron.ipcRenderer.on('updateGallery', (event) => {
+      this.$nextTick(() => {
+        this.filterList = this.getGallery()
+      })
+    })
+    this.$electron.ipcRenderer.send('getPicBeds')
+    this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
+  },
+  computed: {
+    filterList: {
+      get () {
+        return this.getGallery()
+      },
+      set (val) {
+        return this.val
+      }
+    }
+  },
+  methods: {
+    getPicBeds (event, picBeds) {
+      this.picBed = picBeds
+    },
+    getGallery () {
+      if (this.choosedPicBed.length > 0) {
+        let arr = []
+        this.choosedPicBed.forEach(item => {
+          let obj = {
+            type: item
+          }
+          if (this.searchText) {
+            obj.fileName = this.searchText
+          }
+          arr = arr.concat(this.$db.read().get('uploaded').filter(obj => {
+            return obj.fileName.indexOf(this.searchText) !== -1 && obj.type === item
+          }).reverse().value())
+        })
+        this.images = arr
+      } else {
+        if (this.searchText) {
+          let data = this.$db.read().get('uploaded')
+            .filter(item => {
+              return item.fileName.indexOf(this.searchText) !== -1
+            }).reverse().value()
+          this.images = data
+        } else {
+          this.images = this.$db.read().get('uploaded').slice().reverse().value()
+        }
+      }
+      return this.images
+    },
+    zoomImage (index) {
+      this.idx = index
+      this.changeZIndexForGallery(true)
+    },
+    changeZIndexForGallery (isOpen) {
+      if (isOpen) {
+        document.querySelector('.main-content.el-row').style.zIndex = 101
+      } else {
+        document.querySelector('.main-content.el-row').style.zIndex = 10
+      }
+    },
+    handleClose () {
+      this.idx = null
+      this.changeZIndexForGallery(false)
+    },
+    copy (item) {
+      const url = item.url || item.imgUrl
+      const style = this.$db.read().get('settings.pasteStyle').value() || 'markdown'
+      const copyLink = pasteStyle(style, url)
+      const obj = {
+        title: '复制链接成功',
+        body: copyLink,
+        icon: url
+      }
+      const myNotification = new window.Notification(obj.title, obj)
+      this.$electron.clipboard.writeText(copyLink)
+      myNotification.onclick = () => {
+        return true
+      }
+    },
+    remove (id) {
+      this.$confirm('此操作将把该图片移出相册, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const file = this.$db.read().get('uploaded').getById(id).value()
+        this.$db.read().get('uploaded').removeById(id).write()
+        this.$electron.ipcRenderer.send('removeFiles', [file])
+        const obj = {
+          title: '操作结果',
+          body: '删除成功'
+        }
+        const myNotification = new window.Notification(obj.title, obj)
+        myNotification.onclick = () => {
+          return true
+        }
+        this.getGallery()
+      }).catch(() => {
+        return true
+      })
+    },
+    openDialog (item) {
+      this.imgInfo.id = item.id
+      this.imgInfo.imgUrl = item.imgUrl
+      this.dialogVisible = true
+    },
+    confirmModify () {
+      this.$db.read().get('uploaded')
+        .getById(this.imgInfo.id)
+        .assign({imgUrl: this.imgInfo.imgUrl})
+        .write()
+      const obj = {
+        title: '修改图片URL成功',
+        body: this.imgInfo.imgUrl,
+        icon: this.imgInfo.imgUrl
+      }
+      const myNotification = new window.Notification(obj.title, obj)
+      myNotification.onclick = () => {
+        return true
+      }
+      this.dialogVisible = false
+      this.getGallery()
+    },
+    choosePicBed (type) {
+      let idx = this.choosedPicBed.indexOf(type)
+      if (idx !== -1) {
+        this.choosedPicBed.splice(idx, 1)
+      } else {
+        this.choosedPicBed.push(type)
+      }
+    },
+    cleanSearch () {
+      this.searchText = ''
+    },
+    isMultiple (obj) {
+      return Object.values(obj).some(item => item)
+    },
+    multiRemove () {
+      // choosedList -> { [id]: true or false }; true means choosed. false means not choosed.
+      if (Object.values(this.choosedList).some(item => item)) {
+        this.$confirm('将删除刚才选中的图片，是否继续？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let files = []
+          Object.keys(this.choosedList).forEach(key => {
+            if (this.choosedList[key]) {
+              const file = this.$db.read().get('uploaded').getById(key).value()
+              files.push(file)
+              this.$db.read().get('uploaded').removeById(key).write()
+            }
+          })
+          this.choosedList = {}
+          this.getGallery()
+          const obj = {
+            title: '操作结果',
+            body: '删除成功'
+          }
+          this.$electron.ipcRenderer.send('removeFiles', files)
+          const myNotification = new window.Notification(obj.title, obj)
+          myNotification.onclick = () => {
+            return true
+          }
+        }).catch(() => {
+          return true
+        })
+      }
+    },
+    multiCopy () {
+      if (Object.values(this.choosedList).some(item => item)) {
+        let copyString = ''
+        const style = this.$db.read().get('settings.pasteStyle').value() || 'markdown'
+        // choosedList -> { [id]: true or false }; true means choosed. false means not choosed.
+        Object.keys(this.choosedList).forEach(key => {
+          if (this.choosedList[key]) {
+            const item = this.$db.read().get('uploaded').getById(key).value()
+            const url = item.url || item.imgUrl
+            copyString += pasteStyle(style, url) + '\n'
+            this.choosedList[key] = false
+          }
+        })
+        const obj = {
+          title: '批量复制链接成功',
+          body: copyString
+        }
+        const myNotification = new window.Notification(obj.title, obj)
+        this.$electron.clipboard.writeText(copyString)
+        myNotification.onclick = () => {
+          return true
+        }
+      }
+    },
+    toggleHandleBar () {
+      this.handleBarActive = !this.handleBarActive
+    },
+    getPasteStyle () {
+      this.pasteStyle = this.$db.read().get('settings.pasteStyle').value() || 'markdown'
+    },
+    handlePasteStyleChange (val) {
+      this.$db.read().set('settings.pasteStyle', val)
+        .write()
+      this.pasteStyle = val
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('updateGallery')
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
+  }
+}
+</script>
+<style lang='stylus'>
+.view-title
+  color #eee
+  font-size 20px
+  text-align center
+  margin 10px auto
+  .sub-title
+    font-size 14px
+  .el-icon-caret-bottom
+    cursor: pointer
+    transition all .2s ease-in-out
+    &.active
+      transform: rotate(180deg)
+#gallery-view
+  height 100%
+.item-base
+  background #2E2E2E
+  text-align center
+  padding 5px 0
+  cursor pointer
+  font-size 13px
+  transition all .2s ease-in-out
+  height: 28px
+  box-sizing: border-box
+  &.copy
+    cursor not-allowed
+    background #49B1F5
+    &.active
+      cursor pointer
+      background #1B9EF3
+      color #fff
+  &.delete
+    cursor not-allowed
+    background #F47466
+    &.active
+      cursor pointer
+      background #F15140
+      color #fff
+#gallery-view
+  position relative
+  .round
+    border-radius 14px
+  .pull-right
+    float right
+  .gallery-list
+    height 360px
+    box-sizing border-box
+    padding 8px 0
+    overflow-y auto
+    overflow-x hidden
+    position absolute
+    top: 38px
+    transition all .2s ease-in-out .1s
+    width 100%
+    &.small
+      height: 287px
+      top: 113px
+    &__img
+      height 150px
+      position relative
+      margin-bottom 16px
+    &__item
+      width 100%
+      height 120px
+      background-size cover
+      background-position 50% 50%
+      background-repeat no-repeat
+      transition all .2s ease-in-out
+      cursor pointer
+      margin-bottom 8px
+      &-fake
+        position absolute
+        top 0
+        left 0 
+        opacity 0
+        width 100%
+        z-index -1
+      &:hover
+        background-color #49B1F5
+        transform scale(1.1)
+    &__tool-panel
+      color #ddd
+      i
+        cursor pointer
+        transition all .2s ease-in-out
+        &.el-icon-document
+          &:hover
+            color #49B1F5
+        &.el-icon-edit-outline
+          &:hover
+            color #69C282
+        &.el-icon-delete
+          &:hover
+            color #F15140
+  .handle-bar
+    color #ddd
+    margin-bottom 10px
+  .el-input__inner
+    border-radius 14px
+</style>

src/renderer/pages/MiniPage.vue

@@ -0,0 +1,228 @@
+<template>
+  <div id="mini-page"
+    :style="{ backgroundImage: 'url(' + logo + ')' }"
+    :class="{ linux: os === 'linux' }"
+  >
+    <!-- <i class="el-icon-upload2"></i> -->
+  <div
+    id="upload-area"
+    :class="{ 'is-dragover': dragover, uploading: showProgress, linux: os === 'linux' }" @drop.prevent="onDrop" @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
+    :style="{ backgroundPosition: '0 ' + progress + '%'}"
+  >
+    <div id="upload-dragger" @dblclick="openUploadWindow">
+      <input type="file" id="file-uploader" @change="onChange" multiple>
+    </div>
+  </div>
+  </div>
+</template>
+<script>
+import mixin from '@/utils/mixin'
+export default {
+  name: 'mini-page',
+  mixins: [mixin],
+  data () {
+    return {
+      logo: 'static/squareLogo.png',
+      dragover: false,
+      progress: 0,
+      showProgress: false,
+      showError: false,
+      dragging: false,
+      wX: '',
+      wY: '',
+      screenX: '',
+      screenY: '',
+      menu: null,
+      os: '',
+      picBed: []
+    }
+  },
+  created () {
+    this.os = process.platform
+    this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
+      if (progress !== -1) {
+        this.showProgress = true
+        this.progress = progress
+      } else {
+        this.progress = 100
+        this.showError = true
+      }
+    })
+    this.getPicBeds()
+  },
+  mounted () {
+    window.addEventListener('mousedown', this.handleMouseDown, false)
+    window.addEventListener('mousemove', this.handleMouseMove, false)
+    window.addEventListener('mouseup', this.handleMouseUp, false)
+  },
+  watch: {
+    progress (val) {
+      if (val === 100) {
+        setTimeout(() => {
+          this.showProgress = false
+          this.showError = false
+        }, 1000)
+        setTimeout(() => {
+          this.progress = 0
+        }, 1200)
+      }
+    }
+  },
+  methods: {
+    getPicBeds () {
+      this.picBed = this.$electron.ipcRenderer.sendSync('getPicBeds')
+      this.buildMenu()
+    },
+    onDrop (e) {
+      this.dragover = false
+      this.ipcSendFiles(e.dataTransfer.files)
+    },
+    openUploadWindow () {
+      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)
+    },
+    handleMouseDown (e) {
+      this.dragging = true
+      this.wX = e.pageX
+      this.wY = e.pageY
+      this.screenX = e.screenX
+      this.screenY = e.screenY
+    },
+    handleMouseMove (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      if (this.dragging) {
+        const xLoc = e.screenX - this.wX
+        const yLoc = e.screenY - this.wY
+        this.$electron.remote.BrowserWindow.getFocusedWindow().setBounds({
+          x: xLoc,
+          y: yLoc,
+          width: 64,
+          height: 64
+        })
+      }
+    },
+    handleMouseUp (e) {
+      this.dragging = false
+      if (this.screenX === e.screenX && this.screenY === e.screenY) {
+        if (e.button === 0) { // left mouse
+          this.openUploadWindow()
+        } else {
+          this.getPicBeds()
+          this.openContextMenu()
+        }
+      }
+    },
+    openContextMenu () {
+      this.menu.popup(this.$electron.remote.getCurrentWindow())
+    },
+    buildMenu () {
+      const _this = this
+      const submenu = this.picBed.map(item => {
+        return {
+          label: item.name,
+          type: 'radio',
+          checked: this.$db.read().get('picBed.current').value() === item.type,
+          click () {
+            _this.$db.read().set('picBed.current', item.type).write()
+            _this.$electron.ipcRenderer.send('syncPicBed')
+          }
+        }
+      })
+      const template = [
+        {
+          label: '打开详细窗口',
+          click () {
+            _this.$electron.ipcRenderer.send('openSettingWindow')
+          }
+        },
+        {
+          label: '选择默认图床',
+          type: 'submenu',
+          submenu
+        },
+        {
+          label: '剪贴板图片上传',
+          click () {
+            _this.$electron.ipcRenderer.send('uploadClipboardFilesFromUploadPage')
+          }
+        },
+        {
+          label: '最小化窗口',
+          role: 'minimize'
+        },
+        {
+          label: '重启应用',
+          click () {
+            _this.$electron.remote.app.relaunch()
+            _this.$electron.remote.app.exit(0)
+          }
+        },
+        {
+          role: 'quit',
+          label: '退出'
+        }
+      ]
+      this.menu = this.$electron.remote.Menu.buildFromTemplate(template)
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
+    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)
+  }
+}
+</script>
+<style lang='stylus'>
+  #mini-page
+    background #409EFF
+    color #FFF
+    height 100vh
+    width 100vw
+    border-radius 50%
+    text-align center
+    line-height 100vh
+    font-size 40px
+    background-size 90vh 90vw
+    background-position center center
+    background-repeat no-repeat
+    position relative
+    border 4px solid #fff
+    box-sizing border-box
+    cursor pointer
+    &.linux
+      border-radius 0
+      background-size 100vh 100vw
+    #upload-area
+      height 100%
+      width 100%
+      border-radius 50%
+      transition all .2s ease-in-out
+      &.linux
+        border-radius 0
+      &.uploading
+        background: linear-gradient(to top, #409EFF 50%, #fff 51%)
+        background-size 200%
+      #upload-dragger
+        height 100%
+      &.is-dragover
+        background rgba(0,0,0,0.3)
+    #file-uploader
+      display none
+</style>

src/renderer/pages/PicGoSetting.vue

@@ -0,0 +1,456 @@
+<template>
+  <div id="picgo-setting">
+    <div class="view-title">
+      PicGo设置
+    </div>
+    <el-row class="setting-list">
+      <el-col :span="15" :offset="4">
+        <el-row>
+        <el-form
+          label-width="120px"
+          label-position="right"
+          size="small"
+        >
+          <el-form-item
+            label="打开配置文件"
+          >
+            <el-button type="primary" round size="mini" @click="openConfigFile">点击打开</el-button>
+          </el-form-item>
+          <el-form-item
+            label="修改上传快捷键"
+          >
+            <el-button type="primary" round size="mini" @click="keyBindingVisible = true">点击设置</el-button>
+          </el-form-item>
+          <el-form-item
+            label="自定义链接格式"
+          >
+            <el-button type="primary" round size="mini" @click="customLinkVisible = true">点击设置</el-button>
+          </el-form-item>
+          <el-form-item
+            label="设置代理"
+          >
+            <el-button type="primary" round size="mini" @click="proxyVisible = true">点击设置</el-button>
+          </el-form-item>
+          <el-form-item
+            label="检查更新"
+          >
+            <el-button type="primary" round size="mini" @click="checkUpdate">点击检查</el-button>
+          </el-form-item>
+          <el-form-item
+            label="打开更新助手"
+          >
+            <el-switch
+              v-model="form.updateHelper"
+              active-text="开"
+              inactive-text="关"
+              @change="updateHelperChange"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            label="开机自启"
+          >
+            <el-switch
+              v-model="form.autoStart"
+              active-text="开"
+              inactive-text="关"
+              @change="handleAutoStartChange"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            label="上传前重命名"
+          >
+            <el-switch
+              v-model="form.rename"
+              active-text="开"
+              inactive-text="关"
+              @change="handleRename"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            label="时间戳重命名"
+          >
+            <el-switch
+              v-model="form.autoRename"
+              active-text="开"
+              inactive-text="关"
+              @change="handleAutoRename"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            label="开启上传提示"
+          >
+            <el-switch
+              v-model="form.uploadNotification"
+              active-text="开"
+              inactive-text="关"
+              @change="handleUploadNotification"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            v-if="os !== 'darwin'"
+            label="Mini窗口置顶"
+          >
+            <el-switch
+              v-model="form.miniWindowOntop"
+              active-text="开"
+              inactive-text="关"
+              @change="handleMiniWindowOntop"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            label="选择显示的图床"
+          >
+            <el-checkbox-group
+              v-model="form.showPicBedList"
+              @change="handleShowPicBedListChange"
+            >
+              <el-checkbox
+                v-for="item in picBed"
+                :label="item.name"
+                :key="item.name"
+              ></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-dialog
+      title="修改上传快捷键"
+      :visible.sync="keyBindingVisible"
+      :modal-append-to-body="false"
+    >
+      <el-form
+        label-width="80px"
+      >
+        <el-form-item
+          label="快捷上传"
+        >
+          <el-input 
+            class="align-center"
+            @keydown.native.prevent="keyDetect('upload', $event)"
+            v-model="shortKey.upload"
+            :autofocus="true"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="cancelKeyBinding" round>取消</el-button>
+        <el-button type="primary" @click="confirmKeyBinding" round>确定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="自定义链接格式"
+      :visible.sync="customLinkVisible"
+      :modal-append-to-body="false"
+    >
+      <el-form
+        label-position="top"
+        :model="customLink"
+        ref="customLink"
+        :rules="rules"
+      >
+        <el-form-item
+          label="用占位符$url来表示url的位置"
+          prop="value"
+        >
+          <el-input 
+            class="align-center"
+            v-model="customLink.value"
+            :autofocus="true"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div>
+        如[]($url)
+      </div>
+      <span slot="footer">
+        <el-button @click="cancelCustomLink" round>取消</el-button>
+        <el-button type="primary" @click="confirmCustomLink" round>确定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="设置代理"
+      :visible.sync="proxyVisible"
+      :modal-append-to-body="false"
+    >
+      <el-form
+        label-position="right"
+        :model="customLink"
+        ref="customLink"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item
+          label="代理地址"
+        >
+          <el-input 
+            v-model="proxy"
+            :autofocus="true"
+            placeholder="例如：http://127.0.0.1:1080"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="cancelProxy" round>取消</el-button>
+        <el-button type="primary" @click="confirmProxy" round>确定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="检查更新"
+      :visible.sync="checkUpdateVisible"
+      :modal-append-to-body="false"
+    >
+      <div>
+        当前版本：{{ version }}
+      </div>
+      <div>
+        最新版本：{{ latestVersion ? latestVersion : '正在获取中...' }}
+      </div>
+      <div v-if="needUpdate">
+        PicGo更新啦，请点击确定打开下载页面
+      </div>
+      <span slot="footer">
+        <el-button @click="cancelCheckVersion" round>取消</el-button>
+        <el-button type="primary" @click="confirmCheckVersion" round>确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import keyDetect from 'utils/key-binding'
+import pkg from 'root/package.json'
+import path from 'path'
+const release = 'https://api.github.com/repos/Molunerfinn/PicGo/releases/latest'
+const downloadUrl = 'https://github.com/Molunerfinn/PicGo/releases/latest'
+export default {
+  name: 'picgo-setting',
+  computed: {
+    needUpdate () {
+      if (this.latestVersion) {
+        return this.compareVersion2Update(this.version, this.latestVersion)
+      } else {
+        return false
+      }
+    }
+  },
+  data () {
+    const customLinkRule = (rule, value, callback) => {
+      if (!/\$url/.test(value)) {
+        return callback(new Error('必须含有$url'))
+      } else {
+        return callback()
+      }
+    }
+    return {
+      form: {
+        updateHelper: this.$db.read().get('settings.showUpdateTip').value(),
+        showPicBedList: [],
+        autoStart: this.$db.read().get('settings.autoStart').value() || false,
+        rename: this.$db.read().get('settings.rename').value() || false,
+        autoRename: this.$db.read().get('settings.autoRename').value() || false,
+        uploadNotification: this.$db.read().get('settings.uploadNotification').value() || false,
+        miniWindowOntop: this.$db.read().get('settings.miniWindowOntop').value() || false
+      },
+      picBed: [],
+      keyBindingVisible: false,
+      customLinkVisible: false,
+      checkUpdateVisible: false,
+      proxyVisible: false,
+      customLink: {
+        value: this.$db.read().get('settings.customLink').value() || '$url'
+      },
+      shortKey: {
+        upload: this.$db.read().get('settings.shortKey.upload').value()
+      },
+      proxy: this.$db.read().get('picBed.proxy').value() || undefined,
+      rules: {
+        value: [
+          { validator: customLinkRule, trigger: 'blur' }
+        ]
+      },
+      version: pkg.version,
+      latestVersion: '',
+      os: ''
+    }
+  },
+  created () {
+    this.os = process.platform
+    this.$electron.ipcRenderer.send('getPicBeds')
+    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
+        }
+      })
+    },
+    openConfigFile () {
+      const { app, shell } = this.$electron.remote
+      const STORE_PATH = app.getPath('userData')
+      const CONFIG_FILE = path.join(STORE_PATH, '/data.json')
+      shell.openItem(CONFIG_FILE)
+    },
+    keyDetect (type, event) {
+      this.shortKey[type] = keyDetect(event).join('+')
+    },
+    cancelKeyBinding () {
+      this.keyBindingVisible = false
+      this.shortKey = this.$db.read().get('settings.shortKey').value()
+    },
+    confirmKeyBinding () {
+      const oldKey = this.$db.read().get('settings.shortKey').value()
+      this.$db.read().set('settings.shortKey', this.shortKey).write()
+      this.keyBindingVisible = false
+      this.$electron.ipcRenderer.send('updateShortKey', oldKey)
+    },
+    cancelCustomLink () {
+      this.customLinkVisible = false
+      this.customLink.value = this.$db.read().get('settings.customLink').value() || '$url'
+    },
+    confirmCustomLink () {
+      this.$refs.customLink.validate((valid) => {
+        if (valid) {
+          this.$db.read().set('settings.customLink', this.customLink.value).write()
+          this.customLinkVisible = false
+          this.$electron.ipcRenderer.send('updateCustomLink')
+        } else {
+          return false
+        }
+      })
+    },
+    cancelProxy () {
+      this.proxyVisible = false
+      this.proxy = this.$db.read().get('picBed.proxy').value() || undefined
+    },
+    confirmProxy () {
+      this.proxyVisible = false
+      this.$db.read().set('picBed.proxy', this.proxy).write()
+      const successNotification = new window.Notification('设置代理', {
+        body: '设置成功'
+      })
+      successNotification.onclick = () => {
+        return true
+      }
+    },
+    updateHelperChange (val) {
+      this.$db.read().set('settings.showUpdateTip', val).write()
+    },
+    handleShowPicBedListChange (val) {
+      const list = this.picBed.map(item => {
+        if (!val.includes(item.name)) {
+          item.visible = false
+        } else {
+          item.visible = true
+        }
+        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()
+      this.$electron.ipcRenderer.send('autoStart', val)
+    },
+    handleRename (val) {
+      this.$db.read().set('settings.rename', val).write()
+    },
+    handleAutoRename (val) {
+      this.$db.read().set('settings.autoRename', val).write()
+    },
+    compareVersion2Update (current, latest) {
+      const currentVersion = current.split('.').map(item => parseInt(item))
+      const latestVersion = latest.split('.').map(item => parseInt(item))
+
+      for (let i = 0; i < 3; i++) {
+        if (currentVersion[i] < latestVersion[i]) {
+          return true
+        }
+        if (currentVersion[i] > latestVersion[i]) {
+          return false
+        }
+      }
+      return false
+    },
+    checkUpdate () {
+      this.checkUpdateVisible = true
+      this.$http.get(release)
+        .then(res => {
+          this.latestVersion = res.data.name
+        }).catch(err => {
+          console.log(err)
+        })
+    },
+    confirmCheckVersion () {
+      if (this.needUpdate) {
+        this.$electron.remote.shell.openExternal(downloadUrl)
+      }
+      this.checkUpdateVisible = false
+    },
+    cancelCheckVersion () {
+      this.checkUpdateVisible = false
+    },
+    handleUploadNotification (val) {
+      this.$db.read().set('settings.uploadNotification', val).write()
+    },
+    handleMiniWindowOntop (val) {
+      this.$db.read().set('settings.miniWindowOntop', val).write()
+      this.$message('需要重启生效')
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
+  }
+}
+</script>
+<style lang='stylus'>
+.el-message
+  left 60%
+#picgo-setting
+  .sub-title
+    font-size 14px
+  .setting-list
+    height 360px
+    box-sizing border-box
+    overflow-y auto
+    overflow-x hidden
+  .setting-list
+    .el-form
+      label  
+        line-height 32px
+        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
+      .el-icon-question
+        font-size 20px
+        float right
+        margin-top 9px
+        color #eee
+        cursor pointer
+        transition .2s color ease-in-out
+        &:hover
+          color #409EFF
+      .el-checkbox-group
+        label
+          margin-right 30px
+          width 100px
+      .el-checkbox+.el-checkbox
+        margin-right 30px
+        margin-left 0
+      .confirm-button
+        width 100%
+</style>

src/renderer/pages/Plugin.vue

@@ -0,0 +1,593 @@
+<template>
+  <div id="plugin-view">
+    <div class="view-title">
+      插件设置 - <i class="el-icon-goods" @click="goAwesomeList"></i>
+    </div>
+    <el-row class="handle-bar" :class="{ 'cut-width': pluginList.length > 6 }">
+      <el-input
+        v-model="searchText"
+        placeholder="搜索npm上的PicGo插件，或者点击上方按钮查看优秀插件列表"
+        size="small"
+      >
+        <i slot="suffix" class="el-input__icon el-icon-close" v-if="searchText" @click="cleanSearch" style="cursor: pointer"></i>
+      </el-input>
+    </el-row>
+    <el-row :gutter="10" class="plugin-list" v-loading="loading">
+      <el-col :span="12" v-for="item in pluginList" :key="item.name">
+        <div class="plugin-item" :class="{ 'darwin': os === 'darwin' }">
+          <div class="cli-only-badge" v-if="!item.gui" title="CLI only">CLI</div>
+          <img class="plugin-item__logo" :src="item.logo"
+          onerror="this.src='static/roundLogo.png'"
+          >
+          <div
+            class="plugin-item__content"
+            :class="{ disabled: !item.enabled }"
+          >
+            <div class="plugin-item__name" @click="openHomepage(item.homepage)">
+              {{ item.name }} <small>{{ ' ' + item.version }}</small>
+            </div>
+            <div class="plugin-item__desc" :title="item.description">
+              {{ item.description }}
+            </div>
+            <div class="plugin-item__info-bar">
+              <span class="plugin-item__author">
+                {{ item.author }}
+              </span>
+              <span class="plugin-item__config" >
+                <template v-if="searchText">
+                  <template v-if="!item.hasInstall">
+                    <span class="config-button install" v-if="!item.ing" @click="installPlugin(item)">
+                      安装
+                    </span>
+                    <span v-else-if="item.ing" class="config-button ing">
+                      安装中
+                    </span>
+                  </template>
+                  <span v-else class="config-button ing">
+                    已安装
+                  </span>
+                </template>
+                <template v-else>
+                  <span v-if="item.ing" class="config-button ing">
+                    进行中
+                  </span>
+                  <template v-else>
+                    <i
+                      v-if="item.enabled"
+                      class="el-icon-setting"
+                      @click="buildContextMenu(item)"
+                    ></i>
+                    <i
+                      v-else
+                      class="el-icon-remove-outline"
+                      @click="buildContextMenu(item)"
+                    ></i>
+                  </template>
+                </template>
+              </span>
+            </div>
+          </div>
+        </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"
+      :title="`配置${configName}`"
+      width="70%"
+    >
+      <config-form
+        :config="config"
+        :type="currentType"
+        :id="configName"
+        ref="configForm"
+      >
+      </config-form>
+      <span slot="footer">
+        <el-button @click="dialogVisible = false" round>取消</el-button>
+        <el-button type="primary" @click="handleConfirmConfig" round>确定</el-button>
+      </span>
+    </el-dialog>
+    <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>
+  </div>
+</template>
+<script>
+import ConfigForm from '@/components/ConfigForm'
+import { debounce } from 'lodash'
+export default {
+  name: 'plugin',
+  components: {
+    ConfigForm
+  },
+  data () {
+    return {
+      searchText: '',
+      pluginList: [],
+      menu: null,
+      config: [],
+      currentType: '',
+      configName: '',
+      dialogVisible: false,
+      pluginNameList: [],
+      loading: true,
+      needReload: false,
+      id: '',
+      os: '',
+      // for showInputBox
+      showInputBoxVisible: false,
+      inputBoxValue: '',
+      inputBoxOptions: {
+        title: '',
+        placeholder: ''
+      }
+    }
+  },
+  computed: {
+    npmSearchText () {
+      return this.searchText.match('picgo-plugin-')
+        ? this.searchText
+        : this.searchText !== ''
+          ? `picgo-plugin-${this.searchText}`
+          : this.searchText
+    }
+  },
+  watch: {
+    npmSearchText (val) {
+      if (val) {
+        this.loading = true
+        this.pluginList = []
+        this.getSearchResult(val)
+      } else {
+        this.getPluginList()
+      }
+    }
+  },
+  created () {
+    this.os = process.platform
+    this.$electron.ipcRenderer.on('pluginList', (evt, list) => {
+      this.pluginList = list
+      this.pluginNameList = list.map(item => item.name)
+      this.loading = false
+    })
+    this.$electron.ipcRenderer.on('installSuccess', (evt, plugin) => {
+      this.loading = false
+      this.pluginList.forEach(item => {
+        if (item.name === plugin) {
+          item.ing = false
+          item.hasInstall = true
+        }
+      })
+    })
+    this.$electron.ipcRenderer.on('updateSuccess', (evt, plugin) => {
+      this.loading = false
+      this.pluginList.forEach(item => {
+        if (item.name === plugin) {
+          item.ing = false
+          item.hasInstall = true
+        }
+        this.getPicBeds()
+      })
+      this.handleReload()
+      this.getPluginList()
+    })
+    this.$electron.ipcRenderer.on('uninstallSuccess', (evt, plugin) => {
+      this.loading = false
+      this.pluginList = this.pluginList.filter(item => {
+        if (item.name === plugin) { // restore Uploader & Transformer after uninstalling
+          if (item.config.transformer.name) {
+            this.handleRestoreState('transformer', item.config.transformer.name)
+          }
+          if (item.config.uploader.name) {
+            this.handleRestoreState('uploader', item.config.uploader.name)
+          }
+          this.getPicBeds()
+        }
+        return item.name !== plugin
+      })
+      this.pluginNameList = this.pluginNameList.filter(item => item !== plugin)
+    })
+    this.getPluginList()
+    this.getSearchResult = debounce(this.getSearchResult, 50)
+    this.needReload = this.$db.read().get('needReload').value()
+    this.$electron.ipcRenderer.on('showInputBox', (evt, options) => {
+      this.inputBoxValue = ''
+      this.inputBoxOptions.title = options.title || ''
+      this.inputBoxOptions.placeholder = options.placeholder || ''
+      this.showInputBoxVisible = true
+    })
+  },
+  methods: {
+    buildContextMenu (plugin) {
+      const _this = this
+      let menu = [{
+        label: '启用插件',
+        enabled: !plugin.enabled,
+        click () {
+          _this.$db.read().set(`picgoPlugins.picgo-plugin-${plugin.name}`, true).write()
+          plugin.enabled = true
+          _this.getPicBeds()
+        }
+      }, {
+        label: '禁用插件',
+        enabled: plugin.enabled,
+        click () {
+          _this.$db.read().set(`picgoPlugins.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: '卸载插件',
+        click () {
+          _this.uninstallPlugin(plugin.name)
+        }
+      }, {
+        label: '更新插件',
+        click () {
+          _this.updatePlugin(plugin.name)
+        }
+      }]
+      for (let i in plugin.config) {
+        if (plugin.config[i].config.length > 0) {
+          const obj = {
+            label: `配置${i} - ${plugin.config[i].name}`,
+            click () {
+              _this.currentType = i
+              _this.configName = plugin.config[i].name
+              _this.dialogVisible = true
+              _this.config = plugin.config[i].config
+            }
+          }
+          menu.push(obj)
+        }
+      }
+
+      // handle transformer
+      if (plugin.config.transformer.name) {
+        let currentTransformer = this.$db.read().get('picBed.transformer').value() || 'path'
+        let pluginTransformer = plugin.config.transformer.name
+        const obj = {
+          label: `${currentTransformer === pluginTransformer ? '禁用' : '启用'}transformer - ${plugin.config.transformer.name}`,
+          click () {
+            _this.toggleTransformer(plugin.config.transformer.name)
+          }
+        }
+        menu.push(obj)
+      }
+
+      // plugin custom menus
+      if (plugin.guiMenu) {
+        menu.push({
+          type: 'separator'
+        })
+        for (let i of plugin.guiMenu) {
+          menu.push({
+            label: i.label,
+            click () {
+              _this.$electron.ipcRenderer.send('pluginActions', plugin.name, i.label)
+            }
+          })
+        }
+      }
+
+      this.menu = this.$electron.remote.Menu.buildFromTemplate(menu)
+      this.menu.popup(this.$electron.remote.getCurrentWindow())
+    },
+    getPluginList () {
+      this.$electron.ipcRenderer.send('getPluginList')
+    },
+    getPicBeds () {
+      this.$electron.ipcRenderer.send('getPicBeds')
+    },
+    installPlugin (item) {
+      if (!item.gui) {
+        this.$confirm('该插件未对可视化界面进行优化, 是否继续安装?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          item.ing = true
+          this.$electron.ipcRenderer.send('installPlugin', item.name)
+        }).catch(() => {
+          console.log('Install canceled')
+        })
+      } else {
+        item.ing = true
+        this.$electron.ipcRenderer.send('installPlugin', item.name)
+      }
+    },
+    uninstallPlugin (val) {
+      this.pluginList.forEach(item => {
+        if (item.name === val) {
+          item.ing = true
+        }
+      })
+      this.$electron.ipcRenderer.send('uninstallPlugin', val)
+    },
+    updatePlugin (val) {
+      this.pluginList.forEach(item => {
+        if (item.name === val) {
+          item.ing = true
+        }
+      })
+      this.$electron.ipcRenderer.send('updatePlugin', val)
+    },
+    reloadApp () {
+      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 = ''
+    },
+    toggleTransformer (transformer) {
+      let currentTransformer = this.$db.read().get('picBed.transformer').value() || 'path'
+      if (currentTransformer === transformer) {
+        this.$db.read().set('picBed.transformer', 'path').write()
+      } else {
+        this.$db.read().set('picBed.transformer', transformer).write()
+      }
+    },
+    async handleConfirmConfig () {
+      const result = await this.$refs.configForm.validate()
+      if (result !== false) {
+        switch (this.currentType) {
+          case 'plugin':
+            this.$db.read().set(`picgo-plugin-${this.configName}`, result).write()
+            break
+          case 'uploader':
+            this.$db.read().set(`picBed.${this.configName}`, result).write()
+            break
+          case 'transformer':
+            this.$db.read().set(`transformer.${this.configName}`, result).write()
+            break
+        }
+        const successNotification = new window.Notification('设置结果', {
+          body: '设置成功'
+        })
+        successNotification.onclick = () => {
+          return true
+        }
+        this.dialogVisible = false
+        this.getPluginList()
+      }
+    },
+    getSearchResult: function (val) {
+      // this.$http.get(`https://api.npms.io/v2/search?q=${val}`)
+      this.$http.get(`https://registry.npmjs.com/-/v1/search?text=${val}`)
+        .then(res => {
+          this.pluginList = res.data.objects.map(item => {
+            return this.handleSearchResult(item)
+          })
+          this.loading = false
+        })
+        .catch(err => {
+          console.log(err)
+          this.loading = false
+        })
+    },
+    handleSearchResult (item) {
+      const name = item.package.name.replace(/picgo-plugin-/, '')
+      let gui = false
+      if (item.package.keywords && item.package.keywords.length > 0) {
+        if (item.package.keywords.includes('picgo-gui-plugin')) {
+          gui = true
+        }
+      }
+      return {
+        name: name,
+        author: item.package.author.name,
+        description: item.package.description,
+        logo: `https://cdn.jsdelivr.net/npm/${item.package.name}/logo.png`,
+        config: {},
+        homepage: item.package.links ? item.package.links.homepage : '',
+        hasInstall: this.pluginNameList.some(plugin => plugin === item.package.name.replace(/picgo-plugin-/, '')),
+        version: item.package.version,
+        gui,
+        ing: false // installing or uninstalling
+      }
+    },
+    // restore Uploader & Transformer
+    handleRestoreState (item, name) {
+      if (item === 'uploader') {
+        const current = this.$db.read().get('picBed.current').value()
+        if (current === name) {
+          this.$db.read().set('picBed.current', 'smms').write()
+        }
+      }
+      if (item === 'transformer') {
+        const current = this.$db.read().get('picBed.transformer').value()
+        if (current === name) {
+          this.$db.read().set('picBed.transformer', 'path').write()
+        }
+      }
+    },
+    openHomepage (url) {
+      if (url) {
+        this.$electron.remote.shell.openExternal(url)
+      }
+    },
+    handleInputBoxClose () {
+      this.$electron.ipcRenderer.send('showInputBox', this.inputBoxValue)
+    },
+    goAwesomeList () {
+      this.$electron.remote.shell.openExternal('https://github.com/PicGo/Awesome-PicGo')
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('pluginList')
+    this.$electron.ipcRenderer.removeAllListeners('installSuccess')
+    this.$electron.ipcRenderer.removeAllListeners('uninstallSuccess')
+    this.$electron.ipcRenderer.removeAllListeners('updateSuccess')
+    this.$electron.ipcRenderer.removeAllListeners('showInputBox')
+  }
+}
+</script>
+<style lang='stylus'>
+$darwinBg = #172426
+#plugin-view
+  position relative
+  padding 0 20px 0
+  .el-loading-mask
+    background-color rgba(0, 0, 0, 0.8)
+  .plugin-list
+    height: 339px;
+    box-sizing: border-box;
+    padding: 8px 15px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    top: 70px;
+    left: 5px;
+    transition: all 0.2s ease-in-out 0.1s;
+    width: 100%
+    .el-loading-mask
+      left: 20px
+      width: calc(100% - 40px)
+  .view-title
+    color #eee
+    font-size 20px
+    text-align center
+    margin 10px auto
+    i.el-icon-goods
+      font-size 20px
+      vertical-align middle
+      cursor pointer
+  .handle-bar
+    margin-bottom 20px
+    &.cut-width
+      padding-right: 8px
+  .el-input__inner
+    border-radius 0
+  .plugin-item
+    box-sizing border-box
+    height 80px
+    background #444
+    padding 8px
+    user-select text
+    transition all .2s ease-in-out
+    margin-bottom 10px
+    position relative
+    .cli-only-badge
+      position absolute
+      right 0px
+      top 0
+      font-size 12px
+      padding 3px 8px
+      background #49B1F5
+      color #eee
+    &.darwin
+      background transparentify($darwinBg, #000, 0.75)
+      &:hover
+        background transparentify($darwinBg, #000, 0.85)
+    &:hover
+      background #333
+    &__logo
+      width 64px
+      height 64px
+      float left
+    &__content
+      float left
+      width calc(100% - 72px)
+      height 64px
+      color #ddd
+      margin-left 8px
+      display flex
+      flex-direction column
+      justify-content space-between
+      &.disabled
+        color #aaa
+    &__name
+      font-size 16px
+      height 22px
+      line-height 22px
+      // font-weight 600
+      font-weight 600
+      cursor pointer
+      transition all .2s ease-in-out
+      &:hover
+        color: #1B9EF3
+    &__desc
+      font-size 14px
+      height 21px
+      line-height 21px
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+    &__info-bar
+      font-size 14px
+      height 21px
+      line-height 28px
+      position relative
+    &__author
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+    &__config
+      float right
+      font-size 16px
+      cursor pointer
+      transition all .2s ease-in-out
+      &:hover
+        color: #1B9EF3
+    .config-button
+      font-size 12px
+      color #ddd
+      background #222
+      padding 1px 8px
+      height 18px
+      line-height 18px
+      text-align center
+      position absolute
+      top 4px
+      right 20px
+      transition all .2s ease-in-out
+      &.reload
+        right 0px
+      &.ing
+        right 0px
+      &.install
+        right 0px
+        &: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/RenamePage.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="rename-page">
+    <el-form
+      @submit.native.prevent
+    >
+      <el-form-item
+        label="文件改名"
+      >
+        <el-input 
+          v-model="fileName"
+          size="small"
+          @keyup.enter.native="confirmName"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <div class="pull-right">
+        <el-button @click="cancel" round size="mini">取消</el-button>
+        <el-button type="primary" @click="confirmName" round size="mini">确定</el-button>
+      </div>
+    </el-row>
+  </div>
+</template>
+<script>
+import mixin from '@/utils/mixin'
+export default {
+  name: 'rename-page',
+  mixins: [mixin],
+  data () {
+    return {
+      fileName: '',
+      id: null
+    }
+  },
+  created () {
+    this.$electron.ipcRenderer.on('rename', (event, name, id) => {
+      this.fileName = name
+      this.id = id
+    })
+  },
+  methods: {
+    confirmName () {
+      this.$electron.ipcRenderer.send(`rename${this.id}`, this.fileName)
+    },
+    cancel () {
+      this.$electron.ipcRenderer.send(`rename${this.id}`, null)
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeAllListeners('rename')
+  }
+}
+</script>
+<style lang='stylus'>
+  #rename-page
+    padding 0 20px
+    .pull-right
+      float right
+    .el-form-item__label
+      color #ddd
+</style>

src/renderer/pages/TrayPage.vue

@@ -5,14 +5,17 @@
       <div class="wait-upload-img" v-if="clipboardFiles.length > 0">
         <div class="list-title">等待上传</div>
         <div v-for="(item, index) in clipboardFiles" :key="index" class="img-list" :style="{height: calcHeight(item.width, item.height) + 'px'}">
-          <div class="upload-img__container" @click="uploadClipboardFiles">
+          <div
+            class="upload-img__container"
+            :class="{ upload: uploadFlag }"
+            @click="uploadClipboardFiles">
             <img :src="item.imgUrl" class="upload-img">
           </div>
         </div>
       </div>
       <div class="uploaded-img">
         <div class="list-title">已上传</div>
-        <div v-for="(item, index) in files" :key="index" class="img-list" :style="{height: calcHeight(item.width, item.height) + 'px'}">
+        <div v-for="item in files" :key="item.imgUrl" class="img-list" :style="{height: calcHeight(item.width, item.height) + 'px'}">
           <div class="upload-img__container" @click="copyTheLink(item)">
             <img :src="item.imgUrl" class="upload-img">
           </div>
@@ -23,9 +26,11 @@
 </template>
 
 <script>
-  import pasteTemplate from '../../main/utils/pasteTemplate'
+  import mixin from '@/utils/mixin'
+  import pasteTemplate from '~/main/utils/pasteTemplate'
   export default {
     name: 'tray-page',
+    mixins: [mixin],
     data () {
       return {
         files: [],
@@ -34,7 +39,8 @@
           body: '',
           icon: ''
         },
-        clipboardFiles: []
+        clipboardFiles: [],
+        uploadFlag: false
       }
     },
     computed: {
@@ -54,11 +60,9 @@
       this.$electron.ipcRenderer.on('clipboardFiles', (event, files) => {
         this.clipboardFiles = files
       })
-      this.$electron.ipcRenderer.on('uploadFiles', (event, files) => {
-        files.forEach(item => {
-          this.$db.read().get('uploaded').insert(item).write()
-        })
+      this.$electron.ipcRenderer.on('uploadFiles', (event) => {
         this.files = this.$db.read().get('uploaded').slice().reverse().slice(0, 5).value()
+        this.uploadFlag = false
       })
       this.$electron.ipcRenderer.on('updateFiles', (event) => {
         this.getData()
@@ -78,7 +82,7 @@
         this.notification.body = item.imgUrl
         this.notification.icon = item.imgUrl
         const myNotification = new window.Notification(this.notification.title, this.notification)
-        const pasteStyle = this.$db.read().get('picBed.pasteStyle').value()
+        const pasteStyle = this.$db.read().get('settings.pasteStyle').value() || 'markdown'
         this.$electron.clipboard.writeText(pasteTemplate(pasteStyle, item.imgUrl))
         myNotification.onclick = () => {
           return true
@@ -98,14 +102,21 @@
         }, false)
       },
       uploadClipboardFiles () {
-        this.$electron.ipcRenderer.send('uploadClipboardFiles', this.clipboardFiles[0])
+        if (this.uploadFlag) {
+          return
+        }
+        this.uploadFlag = true
+        this.$electron.ipcRenderer.send('uploadClipboardFiles')
       }
     }
   }
 </script>
 
 <style lang="stylus">
+body::-webkit-scrollbar
+  width 0px
 #tray-page
+  background-color transparent
   .list-title
     text-align center
     color #858585
@@ -154,4 +165,6 @@
       width 100%
       padding 8px 10px
       height 100%
+      &.upload
+        cursor not-allowed
 </style>

src/renderer/pages/Upload.vue

@@ -1,13 +1,16 @@
 <template>
   <div id="upload-view">
     <el-row :gutter="16">
-      <el-col :span="16" :offset="4">
+      <el-col :span="20" :offset="2">
         <div class="view-title">
-          图片上传
+          图片上传 - {{ picBedName }} <i class="el-icon-caret-bottom" @click="handleChangePicBed"></i>
         </div>
         <div
           id="upload-area"
-          :class="{ 'is-dragover': dragover }" @drop.prevent="onDrop" @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
+          :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>
@@ -22,39 +25,49 @@
           :show-text="false" 
           class="upload-progress"
           :class="{ 'show': showProgress }"
-          :status="showError ? 'exception' : ''"
+          :status="showError ? 'exception' : 'text'" 
         ></el-progress>
         <div class="paste-style">
-          <div class="paste-style__text">
-            链接格式
+          <div class="el-col-16">
+            <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-button label="Custom" title="自定义"></el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="el-col-8">
+            <div class="paste-style__text">
+              快捷上传
+            </div>
+            <el-button type="primary" round size="mini" @click="uploadClipboardFiles" class="paste-upload">剪贴板图片上传</el-button>
           </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 {
       dragover: false,
       progress: 0,
       showProgress: false,
       showError: false,
-      pasteStyle: ''
+      pasteStyle: '',
+      picBed: [],
+      picBedName: '',
+      menu: null
     }
   },
   mounted () {
@@ -68,6 +81,12 @@ export default {
       }
     })
     this.getPasteStyle()
+    this.getDefaultPicBed()
+    this.$electron.ipcRenderer.on('syncPicBed', () => {
+      this.getDefaultPicBed()
+    })
+    this.$electron.ipcRenderer.send('getPicBeds')
+    this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
   },
   watch: {
     progress (val) {
@@ -84,6 +103,8 @@ export default {
   },
   beforeDestroy () {
     this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
+    this.$electron.ipcRenderer.removeAllListeners('syncPicBed')
+    this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
   },
   methods: {
     onDrop (e) {
@@ -109,11 +130,45 @@ export default {
       this.$electron.ipcRenderer.send('uploadChoosedFiles', sendFiles)
     },
     getPasteStyle () {
-      this.pasteStyle = this.$db.read().get('picBed.pasteStyle').value() || 'markdown'
+      this.pasteStyle = this.$db.read().get('settings.pasteStyle').value() || 'markdown'
     },
     handlePasteStyleChange (val) {
-      this.$db.read().set('picBed.pasteStyle', val)
+      this.$db.read().set('settings.pasteStyle', val)
         .write()
+    },
+    uploadClipboardFiles () {
+      this.$electron.ipcRenderer.send('uploadClipboardFilesFromUploadPage')
+    },
+    getDefaultPicBed () {
+      const current = this.$db.read().get('picBed.current').value()
+      this.picBed.forEach(item => {
+        if (item.type === current) {
+          this.picBedName = item.name
+        }
+      })
+    },
+    getPicBeds (event, picBeds) {
+      this.picBed = picBeds
+      this.getDefaultPicBed()
+    },
+    handleChangePicBed () {
+      this.buildMenu()
+      this.menu.popup(this.$electron.remote.getCurrentWindow())
+    },
+    buildMenu () {
+      const _this = this
+      const submenu = this.picBed.map(item => {
+        return {
+          label: item.name,
+          type: 'radio',
+          checked: this.$db.read().get('picBed.current').value() === item.type,
+          click () {
+            _this.$db.read().set('picBed.current', item.type).write()
+            _this.$electron.ipcRenderer.send('syncPicBed')
+          }
+        }
+      })
+      this.menu = this.$electron.remote.Menu.buildFromTemplate(submenu)
     }
   }
 }
@@ -123,13 +178,17 @@ export default {
   color #eee
   font-size 20px
   text-align center
-  margin 20px auto
+  margin 10px auto
 #upload-view
+  .view-title
+    margin 20px auto
   #upload-area
     height 220px
     border 2px dashed #dddddd
     border-radius 8px
     text-align center
+    width 450px
+    margin 0 auto
     color #dddddd
     cursor pointer
     transition all .2s ease-in-out
@@ -149,9 +208,10 @@ export default {
   #file-uploader
     display none
   .upload-progress
-    margin-top 20px
     opacity 0
     transition all .2s ease-in-out
+    width 450px
+    margin 20px auto 0
     &.show
       opacity 1
     .el-progress-bar__inner
@@ -174,4 +234,6 @@ export default {
     .el-radio-button__inner
       border-left none
       border-radius 0 14px 14px 0
+  .paste-upload
+    width 100%
 </style>

src/renderer/pages/picbeds/AliYun.vue

@@ -0,0 +1,149 @@
+<template>
+  <div id="aliyun-view">
+    <el-row :gutter="16">
+      <el-col :span="16" :offset="4">
+        <div class="view-title">
+          阿里云OSS设置
+        </div>
+        <el-form 
+          ref="aliyun"
+          label-position="right"
+          label-width="120px"
+          :model="form"
+          size="mini">
+          <el-form-item
+            label="设定KeyId"
+            prop="accessKeyId"
+            :rules="{
+              required: true, message: 'AccessKeyId不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.accessKeyId" placeholder="AccessKeyId" @keyup.native.enter="confirm"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="设定KeySecret"
+            prop="accessKeySecret"
+            :rules="{
+              required: true, message: 'AccessKeySecret不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.accessKeySecret" type="password" @keyup.native.enter="confirm" placeholder="AccessKeySecret"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="设定存储空间名"
+            prop="bucket"
+            :rules="{
+              required: true, message: 'Bucket不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.bucket" @keyup.native.enter="confirm" placeholder="Bucket"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="确认存储区域"
+            prop="area"
+            :rules="{
+              required: true, message: '区域代码不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.area" @keyup.native.enter="confirm" placeholder="例如oss-cn-beijing"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="指定存储路径"
+            >
+            <el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="设定自定义域名"
+            >
+            <el-input v-model="form.customUrl" @keyup.native.enter="confirm" placeholder="例如https://xxxx.com"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button-group>
+              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="success" @click="setDefaultPicBed('aliyun')" round :disabled="defaultPicBed === 'aliyun'">设为默认图床</el-button>
+            </el-button-group>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import mixin from '@/utils/ConfirmButtonMixin'
+export default {
+  mixins: [mixin],
+  name: 'aliyun',
+  data () {
+    return {
+      form: {
+        accessKeyId: '',
+        accessKeySecret: '',
+        bucket: '',
+        area: '',
+        path: '',
+        customUrl: ''
+      }
+    }
+  },
+  created () {
+    const config = this.$db.get('picBed.aliyun').value()
+    if (config) {
+      for (let i in config) {
+        this.form[i] = config[i]
+      }
+    }
+  },
+  methods: {
+    confirm () {
+      this.$refs.aliyun.validate((valid) => {
+        if (valid) {
+          this.$db.set('picBed.aliyun', this.form).write()
+          const successNotification = new window.Notification('设置结果', {
+            body: '设置成功'
+          })
+          successNotification.onclick = () => {
+            return true
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+#aliyun-view
+  .el-form
+    label  
+      line-height 22px
+      padding-bottom 0
+      color #eee
+    .el-input__inner
+      border-radius 19px
+    &-item
+      margin-bottom 10.5px
+  .el-radio-group
+    width 100%
+    label
+      width 25%  
+    .el-radio-button__inner
+      width 100%
+  .el-radio-button:first-child
+    .el-radio-button__inner
+      border-left none
+      border-radius 14px 0 0 14px
+  .el-radio-button:last-child
+    .el-radio-button__inner
+      border-left none
+      border-radius 0 14px 14px 0
+  .el-switch__label
+    color #eee
+    &.is-active
+      color #409EFF
+  .el-icon-question
+    font-size 20px
+    float right
+    margin-top 9px
+    color #eee
+    cursor pointer
+    transition .2s color ease-in-out
+    &:hover
+      color #409EFF
+</style>

src/renderer/pages/picbeds/GitHub.vue

@@ -0,0 +1,125 @@
+<template>
+  <div id="github-view">
+    <el-row :gutter="16">
+      <el-col :span="16" :offset="4">
+        <div class="view-title">
+          GitHub设置
+        </div>
+        <el-form 
+          ref="github"
+          label-position="right"
+          label-width="120px"
+          :model="form"
+          size="mini">
+          <el-form-item
+            label="设定仓库名"
+            prop="repo"
+            :rules="{
+              required: true, message: '仓库名不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.repo" @keyup.native.enter="confirm" placeholder="格式：username/repo"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="设定分支名"
+            prop="branch"
+            :rules="{
+              required: true, message: '分支名不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.branch" @keyup.native.enter="confirm" placeholder="例如：master"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="设定Token"
+            prop="token"
+            :rules="{
+              required: true, message: 'Token不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.token" @keyup.native.enter="confirm" placeholder="token"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="指定存储路径"
+            >
+            <el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="设定自定义域名"
+            >
+            <el-input v-model="form.customUrl" @keyup.native.enter="confirm" placeholder="例如https://xxxx.com"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button-group>
+              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="success" @click="setDefaultPicBed('github')" round :disabled="defaultPicBed === 'github'">设为默认图床</el-button>
+            </el-button-group>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import mixin from '@/utils/ConfirmButtonMixin'
+export default {
+  name: 'github',
+  mixins: [mixin],
+  data () {
+    return {
+      form: {
+        repo: '',
+        token: '',
+        path: '',
+        customUrl: '',
+        branch: ''
+      }
+    }
+  },
+  created () {
+    const config = this.$db.get('picBed.github').value()
+    if (config) {
+      for (let i in config) {
+        this.form[i] = config[i]
+      }
+    }
+  },
+  methods: {
+    confirm () {
+      this.$refs.github.validate((valid) => {
+        if (valid) {
+          this.$db.set('picBed.github', this.form).write()
+          const successNotification = new window.Notification('设置结果', {
+            body: '设置成功'
+          })
+          successNotification.onclick = () => {
+            return true
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+#github-view
+  .el-form
+    label  
+      line-height 22px
+      padding-bottom 0
+      color #eee
+    .el-input__inner
+      border-radius 19px
+  .el-radio-group
+    width 100%
+    label
+      width 25%  
+    .el-radio-button__inner
+      width 100%
+  .el-radio-button:first-child
+    .el-radio-button__inner
+      border-left none
+      border-radius 14px 0 0 14px
+  .el-radio-button:last-child
+    .el-radio-button__inner
+      border-left none
+      border-radius 0 14px 14px 0
+</style>

src/renderer/pages/picbeds/Imgur.vue

@@ -0,0 +1,117 @@
+<template>
+  <div id="imgur-view">
+    <el-row :gutter="16">
+      <el-col :span="16" :offset="4">
+        <div class="view-title">
+          Imgur图床设置
+        </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>
+          <el-form-item>
+            <el-button-group>
+              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="success" @click="setDefaultPicBed('imgur')" round :disabled="defaultPicBed === 'imgur'">设为默认图床</el-button>
+            </el-button-group>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import mixin from '@/utils/ConfirmButtonMixin'
+export default {
+  name: 'imgur',
+  mixins: [mixin],
+  data () {
+    return {
+      form: {
+        clientId: '',
+        proxy: ''
+      }
+    }
+  },
+  created () {
+    const config = this.$db.get('picBed.imgur').value()
+    if (config) {
+      for (let i in config) {
+        this.form[i] = config[i]
+      }
+    }
+  },
+  methods: {
+    confirm () {
+      this.$refs.imgur.validate((valid) => {
+        if (valid) {
+          this.$db.set('picBed.imgur', this.form).write()
+          const successNotification = new window.Notification('设置结果', {
+            body: '设置成功'
+          })
+          successNotification.onclick = () => {
+            return true
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+#imgur-view
+  .el-form
+    label  
+      line-height 22px
+      padding-bottom 0
+      color #eee
+    .el-input__inner
+      border-radius 19px
+    &-item
+      margin-bottom 10.5px
+  .el-radio-group
+    width 100%
+    label
+      width 25%  
+    .el-radio-button__inner
+      width 100%
+  .el-radio-button:first-child
+    .el-radio-button__inner
+      border-left none
+      border-radius 14px 0 0 14px
+  .el-radio-button:last-child
+    .el-radio-button__inner
+      border-left none
+      border-radius 0 14px 14px 0
+  .el-switch__label
+    color #eee
+    &.is-active
+      color #409EFF
+  .el-icon-question
+    font-size 20px
+    float right
+    margin-top 9px
+    color #eee
+    cursor pointer
+    transition .2s color ease-in-out
+    &:hover
+      color #409EFF
+</style>

src/renderer/pages/picbeds/Others.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="others-view">
+    <el-row :gutter="16">
+      <el-col :span="16" :offset="4">
+        <div class="view-title">
+          {{ picBedName }}设置
+        </div>
+        <config-form
+          v-if="config.length > 0"
+          :config="config"
+          type="uploader"
+          ref="configForm"
+          :id="type"
+        >
+          <el-form-item>
+            <el-button-group>
+              <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>
+        </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>
+</template>
+<script>
+import ConfigForm from '@/components/ConfigForm'
+import mixin from '@/utils/ConfirmButtonMixin'
+export default {
+  name: 'OtherPicBed',
+  mixins: [mixin],
+  components: {
+    ConfigForm
+  },
+  data () {
+    return {
+      type: '',
+      config: [],
+      picBedName: ''
+    }
+  },
+  created () {
+    this.type = this.$route.params.type
+    this.$electron.ipcRenderer.send('getPicBedConfig', this.$route.params.type)
+    this.$electron.ipcRenderer.on('getPicBedConfig', this.getPicBeds)
+  },
+  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
+      const successNotification = new window.Notification('设置默认图床', {
+        body: '设置成功'
+      })
+      successNotification.onclick = () => {
+        return true
+      }
+    },
+    getPicBeds (event, config, name) {
+      this.config = config
+      this.picBedName = name
+    }
+  },
+  beforeDestroy () {
+    this.$electron.ipcRenderer.removeListener('getPicBedConfig', this.getPicBeds)
+  }
+}
+</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
+  .notice
+    color #eee
+    text-align center
+    margin-bottom 10px
+  .single
+    text-align center
+</style>

src/renderer/pages/picbeds/Qiniu.vue

@@ -58,8 +58,16 @@
             >
             <el-input v-model="form.options" @keyup.native.enter="confirm" placeholder="例如?imageslim"></el-input>
           </el-form-item>
+          <el-form-item
+            label="指定存储路径"
+            >
+            <el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
+          </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="confirm">确定</el-button>
+            <el-button-group>
+              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="success" @click="setDefaultPicBed('qiniu')" round :disabled="defaultPicBed === 'qiniu'">设为默认图床</el-button>
+            </el-button-group>
           </el-form-item>
         </el-form>
       </el-col>
@@ -67,10 +75,10 @@
   </div>
 </template>
 <script>
-import mixin from '../mixin'
+import mixin from '@/utils/ConfirmButtonMixin'
 export default {
-  name: 'qiniu',
   mixins: [mixin],
+  name: 'qiniu',
   data () {
     return {
       form: {
@@ -79,7 +87,8 @@ export default {
         bucket: '',
         url: '',
         area: 'z0',
-        options: ''
+        options: '',
+        path: ''
       }
     }
   },
@@ -111,22 +120,16 @@ export default {
 }
 </script>
 <style lang='stylus'>
-.view-title
-  color #eee
-  font-size 20px
-  text-align center
-  margin 20px auto
 #qiniu-view
   .el-form
     label  
       line-height 22px
       padding-bottom 0
       color #eee
-    .el-button
-      width 100%
-      border-radius 19px
     .el-input__inner
       border-radius 19px
+    &-item
+      margin-bottom 10.5px
   .el-radio-group
     width 100%
     label

src/renderer/pages/picbeds/SMMS.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="smms-view">
+    <el-row :gutter="16">
+      <el-col :span="16" :offset="4">
+        <div class="view-title">
+          SM.MS设置
+        </div>
+        <div class="content">
+          感谢SM.MS提供的优质服务
+        </div>
+        <div style="text-align: center; margin-top: 20px;">
+          <el-button type="success" @click="confirm" round :disabled="defaultPicBed === 'smms'" size="mini">设为默认图床</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import mixin from '@/utils/ConfirmButtonMixin'
+export default {
+  mixins: [mixin],
+  name: 'upyun',
+  data () {
+    return {}
+  },
+  methods: {
+    confirm () {
+      this.$db.set('picBed.smms', true).write()
+      this.setDefaultPicBed('smms')
+      const successNotification = new window.Notification('设置结果', {
+        body: '设置成功'
+      })
+      successNotification.onclick = () => {
+        return true
+      }
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+#smms-view
+  .content
+    text-align center
+    font-size 14px
+    color #eee
+</style>

src/renderer/pages/picbeds/TcYun.vue

@@ -11,6 +11,19 @@
           label-width="120px"
           :model="form"
           size="mini">
+          <el-form-item
+            label="COS版本"
+          >
+            <el-switch
+              v-model="form.version"
+              active-text="v4"
+              inactive-text="v5"
+              active-value="v4"
+              inactive-value="v5"
+              inactive-color="#67C23A"
+            ></el-switch>
+            <i class="el-icon-question" @click="openWiki"></i>
+          </el-form-item>
           <el-form-item
             label="设定SecretId"
             prop="secretId"
@@ -56,8 +69,16 @@
             >
             <el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
           </el-form-item>
+          <el-form-item
+            label="设定自定义域名"
+            >
+            <el-input v-model="form.customUrl" @keyup.native.enter="confirm" placeholder="例如https://xxxx.com"></el-input>
+          </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="confirm">确定</el-button>
+            <el-button-group>
+              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="success" @click="setDefaultPicBed('tcyun')" round :disabled="defaultPicBed === 'tcyun'">设为默认图床</el-button>
+            </el-button-group>
           </el-form-item>
         </el-form>
       </el-col>
@@ -65,10 +86,10 @@
   </div>
 </template>
 <script>
-import mixin from '../mixin'
+import mixin from '@/utils/ConfirmButtonMixin'
 export default {
-  name: 'tcyun',
   mixins: [mixin],
+  name: 'tcyun',
   data () {
     return {
       form: {
@@ -77,7 +98,9 @@ export default {
         bucket: '',
         appId: '',
         area: '',
-        path: ''
+        path: '',
+        customUrl: '',
+        version: 'v4'
       }
     }
   },
@@ -104,27 +127,24 @@ export default {
           return false
         }
       })
+    },
+    openWiki () {
+      this.$electron.remote.shell.openExternal('https://github.com/Molunerfinn/PicGo/wiki/%E8%AF%A6%E7%BB%86%E7%AA%97%E5%8F%A3%E7%9A%84%E4%BD%BF%E7%94%A8#腾讯云cos')
     }
   }
 }
 </script>
 <style lang='stylus'>
-.view-title
-  color #eee
-  font-size 20px
-  text-align center
-  margin 20px auto
 #tcyun-view
   .el-form
     label  
       line-height 22px
       padding-bottom 0
       color #eee
-    .el-button
-      width 100%
-      border-radius 19px
     .el-input__inner
       border-radius 19px
+    &-item
+      margin-bottom 10.5px
   .el-radio-group
     width 100%
     label
@@ -139,4 +159,17 @@ export default {
     .el-radio-button__inner
       border-left none
       border-radius 0 14px 14px 0
+  .el-switch__label
+    color #eee
+    &.is-active
+      color #409EFF
+  .el-icon-question
+    font-size 20px
+    float right
+    margin-top 9px
+    color #eee
+    cursor pointer
+    transition .2s color ease-in-out
+    &:hover
+      color #409EFF
 </style>

src/renderer/pages/picbeds/UpYun.vue

@@ -48,8 +48,16 @@
             >
             <el-input v-model="form.options" @keyup.native.enter="confirm" placeholder="例如!imgslim"></el-input>
           </el-form-item>
+          <el-form-item
+            label="指定存储路径"
+            >
+            <el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
+          </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="confirm">确定</el-button>
+            <el-button-group>
+              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="success" @click="setDefaultPicBed('upyun')" round :disabled="defaultPicBed === 'upyun'">设为默认图床</el-button>
+            </el-button-group>
           </el-form-item>
         </el-form>
       </el-col>
@@ -57,7 +65,7 @@
   </div>
 </template>
 <script>
-import mixin from '../mixin'
+import mixin from '@/utils/ConfirmButtonMixin'
 export default {
   name: 'upyun',
   mixins: [mixin],
@@ -67,7 +75,8 @@ export default {
         bucket: '',
         operator: '',
         password: '',
-        options: ''
+        options: '',
+        path: ''
       }
     }
   },
@@ -99,20 +108,12 @@ export default {
 }
 </script>
 <style lang='stylus'>
-.view-title
-  color #eee
-  font-size 20px
-  text-align center
-  margin 20px auto
 #tcyun-view
   .el-form
     label  
       line-height 22px
       padding-bottom 0
       color #eee
-    .el-button
-      width 100%
-      border-radius 19px
     .el-input__inner
       border-radius 19px
   .el-radio-group

src/renderer/pages/picbeds/Weibo.vue

@@ -0,0 +1,151 @@
+<template>
+  <div id="weibo-view">
+    <el-row :gutter="16">
+      <el-col :span="16" :offset="4">
+        <div class="view-title">
+          微博图床设置
+        </div>
+        <el-form 
+          ref="weiboForm"
+          label-position="right"
+          label-width="120px"
+          size="small"
+          :model="form">
+          <el-form-item
+            label="设定用户名"
+            prop="username"
+            :rules="{
+              required: !chooseCookie, message: '用户名不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.username" placeholder="用户名" @keyup.native.enter="confirm('weiboForm')" :disabled="chooseCookie"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="设定密码"
+            prop="password"
+            :rules="{required: !chooseCookie,messsage: '密码不能为空',trigger: 'blur'}">
+            <el-input v-model="form.password" type="password" @keyup.native.enter="confirm('weiboForm')" placeholder="密码" :disabled="chooseCookie"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="使用Cookie上传"
+          >
+            <el-switch
+              v-model="chooseCookie"
+              active-text="cookie模式"
+              @change="handleSwitchChange"
+            ></el-switch>
+            <i class="el-icon-question" @click="openWiki"></i>
+          </el-form-item>
+          <el-form-item
+            label="设定Cookie"
+            prop="cookie"
+            :rules="{
+              required: chooseCookie, message: '密码不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.cookie" @keyup.native.enter="confirm('weiboForm')" placeholder="Cookie" :disabled="!chooseCookie"></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-group>
+              <el-button type="primary" @click="confirm('weiboForm')" round>确定</el-button>
+              <el-button type="success" @click="setDefaultPicBed('weibo')" round :disabled="defaultPicBed === 'weibo'">设为默认图床</el-button>
+            </el-button-group>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import mixin from '@/utils/ConfirmButtonMixin'
+export default {
+  name: 'weibo',
+  mixins: [mixin],
+  data () {
+    return {
+      form: {
+        username: '',
+        password: '',
+        cookie: ''
+      },
+      chooseCookie: false,
+      quality: 'large'
+    }
+  },
+  created () {
+    const config = this.$db.read().get('picBed.weibo').value()
+    if (config) {
+      this.form.username = config.username
+      this.form.password = config.password
+      this.quality = config.quality || 'large'
+      this.form.cookie = config.cookie
+      this.chooseCookie = config.chooseCookie
+    }
+  },
+  methods: {
+    confirm (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$db.read().set('picBed.weibo', {
+            username: this.form.username,
+            password: this.form.password,
+            quality: this.quality,
+            cookie: this.form.cookie,
+            chooseCookie: this.chooseCookie
+          }).write()
+          const successNotification = new window.Notification('设置结果', {
+            body: '设置成功'
+          })
+          successNotification.onclick = () => {
+            return true
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    handleSwitchChange () {
+      this.$refs['weiboForm'].resetFields()
+    },
+    openWiki () {
+      this.$electron.remote.shell.openExternal('https://picgo.github.io/PicGo-Doc/zh/guide/config.html#微博图床')
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+.el-message
+  left 60%
+#weibo-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
+    .el-icon-question
+      font-size 20px
+      float right
+      margin-top 9px
+      color #eee
+      cursor pointer
+      transition .2s color ease-in-out
+      &:hover
+        color #409EFF
+</style>

src/renderer/router/index.js

@@ -8,42 +8,90 @@ export default new Router({
     {
       path: '/',
       name: 'tray-page',
-      component: require('@/components/TrayPage').default
+      component: require('@/pages/TrayPage').default
+    },
+    {
+      path: '/rename-page',
+      name: 'rename-page',
+      component: require('@/pages/RenamePage').default
+    },
+    {
+      path: '/mini-page',
+      name: 'mini-page',
+      component: require('@/pages/MiniPage').default
     },
     {
       path: '/setting',
       name: 'setting-page',
-      component: require('@/components/SettingPage').default,
+      component: require('@/layouts/SettingPage').default,
       children: [
         {
           path: 'upload',
-          component: require('@/components/SettingView/Upload').default,
+          component: require('@/pages/Upload').default,
           name: 'upload'
         },
         {
           path: 'weibo',
-          component: require('@/components/SettingView/Weibo').default,
+          component: require('@/pages/picbeds/Weibo').default,
           name: 'weibo'
         },
         {
           path: 'qiniu',
-          component: require('@/components/SettingView/Qiniu').default,
+          component: require('@/pages/picbeds/Qiniu').default,
           name: 'qiniu'
         },
         {
           path: 'tcyun',
-          component: require('@/components/SettingView/TcYun').default,
+          component: require('@/pages/picbeds/TcYun').default,
           name: 'tcyun'
         },
         {
           path: 'upyun',
-          component: require('@/components/SettingView/UpYun').default,
+          component: require('@/pages/picbeds/UpYun').default,
           name: 'upyun'
         },
+        {
+          path: 'github',
+          component: require('@/pages/picbeds/GitHub').default,
+          name: 'github'
+        },
+        {
+          path: 'smms',
+          component: require('@/pages/picbeds/SMMS').default,
+          name: 'smms'
+        },
+        {
+          path: 'aliyun',
+          component: require('@/pages/picbeds/AliYun').default,
+          name: 'aliyun'
+        },
+        {
+          path: 'imgur',
+          component: require('@/pages/picbeds/Imgur').default,
+          name: 'imgur'
+        },
+        {
+          path: 'others/:type',
+          component: require('@/pages/picbeds/Others').default,
+          name: 'others'
+        },
         {
           path: 'gallery',
-          component: require('@/components/SettingView/Gallery').default,
-          name: 'gallery'
+          component: require('@/pages/Gallery').default,
+          name: 'gallery',
+          meta: {
+            keepAlive: true
+          }
+        },
+        {
+          path: 'setting',
+          component: require('@/pages/PicGoSetting').default,
+          name: 'setting'
+        },
+        {
+          path: 'plugin',
+          component: require('@/pages/Plugin').default,
+          name: 'plugin'
         }
       ]
     },

src/renderer/utils/ConfirmButtonMixin.js

@@ -0,0 +1,20 @@
+export default {
+  name: '',
+  data () {
+    return {
+      defaultPicBed: this.$db.read().get('picBed.current').value()
+    }
+  },
+  methods: {
+    setDefaultPicBed (type) {
+      this.$db.read().set('picBed.current', type).write()
+      this.defaultPicBed = type
+      const successNotification = new window.Notification('设置默认图床', {
+        body: '设置成功'
+      })
+      successNotification.onclick = () => {
+        return true
+      }
+    }
+  }
+}

src/renderer/utils/LS.js

@@ -0,0 +1,15 @@
+class LS {
+  get (name) {
+    if (localStorage.getItem(name)) {
+      return JSON.parse(localStorage.getItem(name))
+    } else {
+      return {}
+    }
+  }
+
+  set (name, value) {
+    return localStorage.setItem(name, JSON.stringify(value))
+  }
+}
+
+export default new LS()

src/renderer/utils/key-binding.js

@@ -0,0 +1,38 @@
+import keycode from 'keycode'
+
+const isSpecialKey = (keyCode) => {
+  const keyArr = [
+    16, // Shift
+    17, // Ctrl
+    18, // Alt
+    91, // Left Meta
+    93 // Right Meta
+  ]
+
+  return keyArr.includes(keyCode)
+}
+
+const keyDetect = (event) => {
+  const meta = process.platform === 'darwin' ? 'Cmd' : 'Super'
+  let specialKey = {
+    Ctrl: event.ctrlKey,
+    Shift: event.shiftKey,
+    Alt: event.altKey
+  }
+  specialKey[meta] = event.metaKey
+
+  let pressKey = []
+
+  for (let i in specialKey) {
+    if (specialKey[i]) {
+      pressKey.push(i)
+    }
+  }
+
+  if (!isSpecialKey(event.keyCode)) {
+    pressKey.push(keycode(event.keyCode).toUpperCase())
+  }
+  return pressKey
+}
+
+export default keyDetect

static/linux.sh

@@ -0,0 +1,18 @@
+#!/bin/sh
+# require xclip(see http://stackoverflow.com/questions/592620/check-if-a-program-exists-from-a-bash-script/677212#677212)
+command -v xclip >/dev/null 2>&1 || { echo >&1 "no xclip"; exit 1; }
+
+# write image in clipboard to file (see http://unix.stackexchange.com/questions/145131/copy-image-from-clipboard-to-file)
+filePath=`xclip -selection clipboard -o 2>/dev/null | grep ^file:// | cut -c8-`
+if [ ! -n "$filePath" ] ;then
+  if
+      xclip -selection clipboard -target image/png -o >/dev/null 2>&1
+  then
+      xclip -selection clipboard -target image/png -o >$1 2>/dev/null
+      echo $1
+  else
+      echo "no image"
+  fi
+else
+  echo $filePath
+fi

static/windows.ps1

@@ -0,0 +1,44 @@
+# Adapted from https://github.com/octan3/img-clipboard-dump/blob/master/dump-clipboard-png.ps1
+param($imagePath)
+
+# https://github.com/PowerShell/PowerShell/issues/7233
+# fix the output encoding bug
+[console]::InputEncoding = [console]::OutputEncoding = New-Object System.Text.UTF8Encoding
+
+Add-Type -Assembly PresentationCore
+function main {
+    $img = [Windows.Clipboard]::GetImage()
+
+    if ($img -eq $null) {
+        "no image"
+        Exit 1
+    }
+
+    if (-not $imagePath) {
+        "no image"
+        Exit 1
+    }
+
+    $fcb = new-object Windows.Media.Imaging.FormatConvertedBitmap($img, [Windows.Media.PixelFormats]::Rgb24, $null, 0)
+    $stream = [IO.File]::Open($imagePath, "OpenOrCreate")
+    $encoder = New-Object Windows.Media.Imaging.PngBitmapEncoder
+    $encoder.Frames.Add([Windows.Media.Imaging.BitmapFrame]::Create($fcb)) | out-null
+    $encoder.Save($stream) | out-null
+    $stream.Dispose() | out-null
+
+    $imagePath
+}
+
+try {
+    # For WIN10
+    $file = Get-Clipboard -Format FileDropList
+    if ($file -ne $null) {
+        Convert-Path $file
+        Exit 1
+    }
+} catch {
+    # For WIN7 WIN8 WIN10
+    main
+}
+
+main