Added: gallery

package.json

@@ -67,6 +67,7 @@
     "request-promise": "^4.2.2",
     "vue": "^2.3.3",
     "vue-electron": "^1.0.6",
+    "vue-gallery": "^1.2.4",
     "vue-router": "^2.5.3",
     "vuex": "^2.3.1"
   },

src/main/utils/img2base64.js

@@ -21,7 +21,7 @@ const imgFromPath = async (imgPath) => {
 
 const imgFromClipboard = (file) => {
   let result = []
-  const today = new Date().toLocaleString()
+  const today = new Date().toLocaleString().replace(/[ ]+/g, '-')
   result.push({
     base64Image: file.imgUrl.replace(/^data\S+,/, ''),
     fileName: `${today}.png`,

src/renderer/components/SettingPage.vue

@@ -3,7 +3,7 @@
     <div class="fake-title-bar">
       PicGo
     </div>
-    <el-row>
+    <el-row style="padding-top: 22px;">
       <el-col :span="5">
         <el-menu
           class="picgo-sidebar"
@@ -14,6 +14,10 @@
             <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-setting"></i>
             <span slot="title">微博设置</span>
@@ -24,7 +28,7 @@
           </el-menu-item>
         </el-menu>
       </el-col>
-      <el-col :span="19">
+      <el-col :span="19" :offset="5">
         <router-view></router-view>
       </el-col>
     </el-row> 
@@ -62,11 +66,13 @@ export default {
     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
     &-item
       color #eee
       position relative

src/renderer/components/SettingView/Gallery.vue

@@ -0,0 +1,151 @@
+<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

@@ -34,7 +34,7 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="confirm('weiboForm')">确定</el-button>
+            <el-button type="primary" @click="confirm('weiboForm')" round>确定</el-button>
           </el-form-item>
         </el-form>
       </el-col>
@@ -102,7 +102,6 @@ export default {
       color #eee
     .el-button
       width 100%
-      border-radius 19px
     .el-input__inner
       border-radius 19px
     .el-radio-group

src/renderer/router/index.js

@@ -29,6 +29,11 @@ export default new Router({
           path: 'qiniu',
           component: require('@/components/SettingView/Qiniu').default,
           name: 'qiniu'
+        },
+        {
+          path: 'gallery',
+          component: require('@/components/SettingView/Gallery').default,
+          name: 'gallery'
         }
       ]
     },

yarn.lock

@@ -1445,6 +1445,10 @@ bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.7, bluebird@^3.5.0, bluebird@^3.
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
+blueimp-gallery@^2.27.0:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/blueimp-gallery/-/blueimp-gallery-2.29.0.tgz#04164eb34d7a5f502d32c518a096f988a3934e2d"
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
@@ -7891,6 +7895,12 @@ vue-electron@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/vue-electron/-/vue-electron-1.0.6.tgz#e798e03180b8933539defe31f92e53b9242b9406"
 
+vue-gallery@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/vue-gallery/-/vue-gallery-1.2.4.tgz#67799ccd9c82efbce57d7ed45d5021a57121cb3c"
+  dependencies:
+    blueimp-gallery "^2.27.0"
+
 vue-hot-reload-api@^2.2.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f"