1.3.1

.gitignore

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

.npmrc

@@ -0,0 +1 @@
+electron_mirror="https://npm.taobao.org/mirrors/electron/"

README.md

@@ -24,7 +24,7 @@
 
 PicGo目前支持了`微博图床`，`七牛图床`，`腾讯云COS`，`又拍云`。未来将支持更多图床。
 
-暂时只支持macOS系统，未来将支持windows和linux。
+支持macOS、windows 64位（v1.3.0以上）系统，未来将支持linux。
 
 点击此处下载[应用](https://github.com/Molunerfinn/PicGo/releases)，macOS用户请下载最新版本的`dmg`文件。
 
@@ -34,7 +34,40 @@ PicGo目前支持了`微博图床`，`七牛图床`，`腾讯云COS`，`又拍
 
 ![picgo-menubar](https://user-images.githubusercontent.com/12621342/34242310-b5056510-e655-11e7-8568-60ffd4f71910.gif)
 
-### 赞助
+## 开发说明
+
+> 目前仅针对Mac、Windows。Linux平台并未测试。
+
+如果你想要学习、开发、修改或自行构建PicGo，可以依照下面的指示：
+
+1. 你需要有node、git环境。需要了解npm的相关知识。
+2. `git clone https://github.com/Molunerfinn/PicGo.git` 并进入项目
+3. `npm install` 下载依赖
+4. Mac需要有Xcode环境，Windows需要有VS环境。
+
+### 开发模式
+
+输入`npm run dev`进入开发模式，开发模式具有热重载特性。不过需要注意的是，开发模式不稳定，会有进程崩溃的情况。此时需要：
+
+```bash
+ctrl+c # 退出开发模式
+npm run dev # 重新进入开发模式
+```
+
+### 生产模式
+
+如果你需要自行构建，可以`npm run build`开始进行构建。构建成功后，会在`build`目录里出现构建成功的相应安装文件。
+
+**注意**：如果你的网络环境不太好，可能会出现`electron-builder`下载`electron`二进制文件失败的情况。这个时候需要在`npm run build`之前指定一下`electron`的源为国内源：
+
+```bash
+export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
+npm run build
+```
+
+只需第一次构建的时候指定一下国内源即可。后续构建不需要特地指定。二进制文件下载在`~/.electron/`目录下。如果想要更新`electron`构建版本，可以删除`~/.electron/`目录，然后重新运行上一步，让`electron-builder`去下载最新的`electron`二进制文件。
+
+## 赞助
 
 如果你喜欢PicGo并且它对你确实有帮助，欢迎给我打赏一杯咖啡的钱哈~
 

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

@@ -6,6 +6,7 @@
       h1.title PicGo
       h2.desc 图片上传+管理新体验
       button.download(@click="goLink('https://github.com/Molunerfinn/picgo/releases')") 免费下载Mac版
+      button.download(@click="goLink('https://github.com/Molunerfinn/picgo/releases')") 免费下载Windows版
       button.download(@click="goLink('https://github.com/Molunerfinn/picgo')") 在github上查看
       h3.desc
         | 基于#[a(href="https://github.com/SimulatedGREG/electron-vue" target="_blank") electron-vue]开发
@@ -32,7 +33,7 @@ export default {
         {
           url: 'https://ws1.sinaimg.cn/large/8700af19ly1fma907llb5j20m30ed46a',
           title: '精致设计',
-          desc: 'macOS系统下，支持拖拽至menubar图标实现上传。menubar app 窗口显示最新上传的5张图片以及剪贴板里的图片。点击图片自动将上传的链接复制到剪贴板。'
+          desc: 'macOS系统下，支持拖拽至menubar图标实现上传。menubar app 窗口显示最新上传的5张图片以及剪贴板里的图片。点击图片自动将上传的链接复制到剪贴板。（Windows平台不支持）'
         },
         {
           url: 'https://ws1.sinaimg.cn/large/8700af19ly1fmd56zm2nej218g0p0teb',
@@ -42,7 +43,7 @@ export default {
         {
           url: 'https://ws1.sinaimg.cn/large/8700af19ly1fmd5ck9m0wj20lr0cxmzs',
           title: '可选图床',
-          desc: '目前支持微博图床和七牛图床。未来将支持更多。方便不同图床的上传需求。'
+          desc: '目前支持微博图床、七牛图床、腾讯云COS、又拍云。未来将支持更多。方便不同图床的上传需求。'
         },
         {
           url: 'https://ws1.sinaimg.cn/large/8700af19gy1fmayjwttnbj218g0p0q4e',
@@ -172,6 +173,8 @@ h1
       text-decoration none
       color #fff
 @media (max-width: 768px)
+  #header
+    padding 10vh
   #container
     .display-list
       &__item

package.json

@@ -1,6 +1,6 @@
 {
   "name": "picgo",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "author": "Molunerfinn <marksz@teamsz.xyz>",
   "description": "Easy to upload your pic & copy to write",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "build": {
     "productName": "PicGo",
-    "appId": "org.simulatedgreg.electron-vue",
+    "appId": "com.molunerfinn.picgo",
     "directories": {
       "output": "build"
     },
@@ -58,7 +58,12 @@
       }
     },
     "win": {
-      "icon": "build/icons/icon.ico"
+      "icon": "build/icons/icon.ico",
+      "target": "nsis"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true
     },
     "linux": {
       "icon": "build/icons"

src/index.ejs

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="referrer" content="never">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>PicGo</title>
     <% if (htmlWebpackPlugin.options.nodeModules) { %>
       <!-- Add `node_modules/` to global paths so `require` works properly in development -->

src/main/index.js

@@ -1,10 +1,11 @@
 'use strict'
 
 import uploader from './utils/uploader.js'
-import { app, BrowserWindow, Tray, Menu, Notification, clipboard, ipcMain, globalShortcut } from 'electron'
+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 pkg from '../../package.json'
 /**
  * Set `__static` path to static files in production
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
@@ -33,8 +34,19 @@ const uploadFailed = () => {
 }
 
 function createTray () {
-  tray = new Tray(`${__static}/menubar.png`)
+  const menubarPic = process.platform === 'darwin' ? `${__static}/menubar.png` : `${__static}/menubar-nodarwin.png`
+  tray = new Tray(menubarPic)
   const contextMenu = Menu.buildFromTemplate([
+    {
+      label: '关于',
+      click () {
+        dialog.showMessageBox({
+          title: 'PicGo',
+          message: 'PicGo',
+          detail: `Version: ${pkg.version}\nAuthor: Molunerfinn\nGithub: https://github.com/Molunerfinn/PicGo`
+        })
+      }
+    },
     {
       label: '打开详细窗口',
       click () {
@@ -89,6 +101,15 @@ function createTray () {
         }
       ]
     },
+    {
+      label: '打开更新助手',
+      type: 'checkbox',
+      checked: db.get('picBed.showUpdateTip').value(),
+      click () {
+        const value = db.read().get('picBed.showUpdateTip').value()
+        db.read().set('picBed.showUpdateTip', !value).write()
+      }
+    },
     {
       role: 'quit',
       label: '退出'
@@ -99,21 +120,32 @@ function createTray () {
     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
-      })
+    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()
+      setTimeout(() => {
+        window.webContents.send('clipboardFiles', obj)
+      }, 0)
+    } else {
+      window.hide()
+      if (settingWindow === null) {
+        createSettingWindow()
+        settingWindow.show()
+      } else {
+        settingWindow.show()
+        settingWindow.focus()
+      }
     }
-    toggleWindow()
-    setTimeout(() => {
-      window.webContents.send('clipboardFiles', obj)
-    }, 0)
   })
 
   tray.on('drag-enter', () => {
@@ -173,10 +205,11 @@ const createWindow = () => {
   })
 
   createSettingWindow()
+  createMenu()
 }
 
 const createSettingWindow = () => {
-  settingWindow = new BrowserWindow({
+  const options = {
     height: 450,
     width: 800,
     show: false,
@@ -184,14 +217,20 @@ const createSettingWindow = () => {
     center: true,
     fullscreenable: false,
     resizable: false,
-    title: 'Pic',
+    title: 'PicGo',
     vibrancy: 'ultra-dark',
     transparent: true,
     titleBarStyle: 'hidden',
     webPreferences: {
       backgroundThrottling: false
     }
-  })
+  }
+  if (process.platform === 'win32') {
+    options.show = true
+    options.frame = false
+    options.backgroundColor = '#3f3c37'
+  }
+  settingWindow = new BrowserWindow(options)
 
   settingWindow.loadURL(settingWinURL)
 
@@ -201,27 +240,29 @@ const createSettingWindow = () => {
 }
 
 const createMenu = () => {
-  const template = [{
-    label: 'Edit',
-    submenu: [
-      { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
-      { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
-      { type: 'separator' },
-      { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
-      { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
-      { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
-      { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' },
-      {
-        label: 'Quit',
-        accelerator: 'CmdOrCtrl+Q',
-        click () {
-          app.quit()
+  if (process.env.NODE_ENV !== 'development') {
+    const template = [{
+      label: 'Edit',
+      submenu: [
+        { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
+        { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
+        { type: 'separator' },
+        { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
+        { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
+        { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
+        { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' },
+        {
+          label: 'Quit',
+          accelerator: 'CmdOrCtrl+Q',
+          click () {
+            app.quit()
+          }
         }
-      }
-    ]
-  }]
-  menu = Menu.buildFromTemplate(template)
-  Menu.setApplicationMenu(menu)
+      ]
+    }]
+    menu = Menu.buildFromTemplate(template)
+    Menu.setApplicationMenu(menu)
+  }
 }
 
 const getWindowPosition = () => {
@@ -323,14 +364,31 @@ ipcMain.on('uploadChoosedFiles', async (evt, files) => {
   }
 })
 
+const isSecondInstance = app.makeSingleInstance(() => {
+  if (settingWindow) {
+    if (settingWindow.isMinimized()) {
+      settingWindow.restore()
+    }
+    settingWindow.focus()
+  }
+})
+
+if (isSecondInstance) {
+  console.log('is 2')
+  app.quit()
+}
+
+if (process.platform === 'win32') {
+  console.log(pkg.build.appId)
+  app.setAppUserModelId(pkg.build.appId)
+}
+
 app.on('ready', () => {
   createWindow()
   createTray()
-  createMenu()
   updateChecker()
 
   globalShortcut.register('CommandOrControl+Shift+P', () => {
-    console.log(1)
     uploadClipboardFiles()
   })
 })
@@ -344,8 +402,6 @@ app.on('window-all-closed', () => {
 app.on('activate', () => {
   if (window === null || settingWindow === null) {
     createWindow()
-    createTray()
-    createMenu()
   }
 })
 

src/main/utils/qiniuUpload.js

@@ -6,7 +6,7 @@ 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).toString('base64')
+  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}`,

src/main/utils/upYunUpload.js

@@ -13,7 +13,7 @@ const generateSignature = (fileName) => {
   const password = options.password
   const md5Password = MD5(password)
   const date = new Date().toGMTString()
-  const uri = `/${options.bucket}/${fileName}`
+  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}`
@@ -24,7 +24,7 @@ const postOptions = (fileName, signature, imgBase64) => {
   const bucket = options.bucket
   return {
     method: 'PUT',
-    url: `https://v0.api.upyun.com/${bucket}/${fileName}`,
+    url: `https://v0.api.upyun.com/${bucket}/${encodeURI(fileName)}`,
     headers: {
       Authorization: signature,
       Date: new Date().toGMTString()

src/renderer/components/SettingPage.vue

@@ -2,8 +2,12 @@
   <div id="setting-page">
     <div class="fake-title-bar">
       PicGo - {{ version }}
+      <div class="handle-bar" v-if="os === 'win32'">
+        <i class="el-icon-minus" @click="minimizeWindow"></i>
+        <i class="el-icon-close" @click="closeWindow"></i>
+      </div>
     </div>
-    <el-row style="padding-top: 22px;">
+    <el-row style="padding-top: 22px;" class="main-content">
       <el-col :span="5">
         <el-menu
           class="picgo-sidebar"
@@ -34,29 +38,99 @@
             <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, BrowserWindow } = remote
 export default {
   name: 'setting-page',
   data () {
     return {
       version: pkg.version,
-      defaultActive: 'upload'
+      defaultActive: 'upload',
+      menu: null,
+      visible: false,
+      os: ''
     }
   },
+  created () {
+    this.os = process.platform
+    this.buildMenu()
+  },
   methods: {
     handleSelect (index) {
       this.$router.push({
         name: index
       })
+    },
+    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
+          }
+        },
+        {
+          label: '打开更新助手',
+          type: 'checkbox',
+          checked: _this.$db.get('picBed.showUpdateTip').value(),
+          click () {
+            const value = _this.$db.read().get('picBed.showUpdateTip').value()
+            _this.$db.read().set('picBed.showUpdateTip', !value).write()
+          }
+        }
+      ]
+      this.menu = Menu.buildFromTemplate(template)
+    },
+    openDialog () {
+      this.menu.popup(remote.getCurrentWindow)
     }
   },
   beforeRouteEnter: (to, from, next) => {
@@ -77,12 +151,38 @@ export default {
     font-size 12px
     line-height h
     position fixed
+    z-index 100
+    .handle-bar
+      position absolute
+      top 2px
+      right 4px
+      width 40px
+      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
   .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
@@ -100,4 +200,15 @@ export default {
           right 0
           top 18px
           background active-color
+  .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
 </style>

src/renderer/main.js

@@ -6,9 +6,13 @@ import App from './App'
 import router from './router'
 import store from './store'
 import db from '../datastore/index'
+import { webFrame } from 'electron'
 import './assets/fonts/iconfont.css'
 Vue.use(ElementUI)
 
+webFrame.setVisualZoomLevelLimits(1, 1)
+webFrame.setLayoutZoomLevelLimits(0, 0)
+
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
 Vue.prototype.$db = db