Added: docs page

Yafeiml · Dec 11, 2017 · ad98668 · ad98668
1 parent cfa360b
commit ad98668
Show file tree

Hide file tree

Showing 8 changed files with 497 additions and 17 deletions.
diff --git a/.electron-vue/webpack.docs.config.js b/.electron-vue/webpack.docs.config.js
@@ -0,0 +1,92 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const path = require('path')
+
+module.exports = {
+  context: path.resolve(__dirname, '../docs'),
+  entry: './main.js',
+  output: {
+    path: path.resolve(__dirname, '../docs/dist'),
+    filename: "index.js"
+  },
+  resolve: {
+    alias: {
+      'icons': path.resolve(__dirname, '../build/icons')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-friendly-formatter')
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader'
+        })
+      },
+      {
+        test: /\.html$/,
+        use: 'vue-html-loader'
+      },
+      {
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.node$/,
+        use: 'node-loader'
+      },
+      {
+        test: /\.vue$/,
+        use: {
+          loader: 'vue-loader',
+        }
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          query: {
+            limit: 10000,
+            name: 'imgs/[name]--[folder].[ext]'
+          }
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'media/[name]--[folder].[ext]'
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          query: {
+            limit: 10000,
+            name: 'fonts/[name]--[folder].[ext]'
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, '../docs/template.html')
+    }),
+    new ExtractTextPlugin("styles.css")
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ npm-debug.log.*
 thumbs.db
 !.gitkeep
 yarn-error.log
+docs/dist/
diff --git a/docs/APP.vue b/docs/APP.vue
@@ -0,0 +1,185 @@
+<template lang='pug'>
+  #app(v-cloak)
+    #header
+      .mask
+      img.logo(src="~icons/256x256.png", alt="PicGo")
+      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')") 在github上查看
+      h3.desc
+        | 基于#[a(href="https://github.com/SimulatedGREG/electron-vue" target="_blank") electron-vue]开发
+    #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")
+      .row.ex-width.display-list
+        .display-list__item(v-for="(item, index) in itemList" :key="index" :class="{ 'o-item': index % 2 !== 0 }")
+          .col-xs-10.col-xs-offset-1.col-md-7.col-md-offset-0
+            img(:src="item.url")
+          .col-xs-10.col-xs-offset-1.col-md-5.col-md-offset-0.display-list__content
+            .display-list__title {{ item.title }} 
+            .display-list__desc {{ item.desc }}
+      .row.ex-width.info
+        .col-xs-10.col-xs-offset-1
+          | &copy;2017 #[a(href="https://github.com/Molunerfinn" target="_blank") Molunerfinn]
+</template>
+<script>
+export default {
+  name: '',
+  data () {
+    return {
+      itemList: [
+        {
+          url: 'https://ws1.sinaimg.cn/large/8700af19ly1fma907llb5j20m30ed46a',
+          title: '精致设计',
+          desc: 'macOS系统下，支持拖拽至menubar图标实现上传。menubar app 窗口显示最新上传的5张图片以及剪贴板里的图片。点击图片自动将上传的链接复制到剪贴板。'
+        },
+        {
+          url: 'https://ws1.sinaimg.cn/large/8700af19ly1fmd56zm2nej218g0p0teb',
+          title: '便捷管理',
+          desc: '查看你的上传记录，重复使用更方便。支持点击图片大图查看。支持删除图片（仅本地记录），让界面更加干净。'
+        },
+        {
+          url: 'https://ws1.sinaimg.cn/large/8700af19ly1fmd5ck9m0wj20lr0cxmzs',
+          title: '可选图床',
+          desc: '目前支持微博图床和七牛图床。未来将支持更多。方便不同图床的上传需求。'
+        },
+        {
+          url: 'https://ws1.sinaimg.cn/large/8700af19gy1fmayjwttnbj218g0p0q4e',
+          title: '多样链接',
+          desc: '支持4种剪贴板链接格式，让你的文本编辑游刃有余。'
+        }
+      ]
+    }
+  },
+  methods: {
+    goLink (link) {
+      window.open(link, '_blank')
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+[v-cloak]
+  display none
+*
+  box-sizing border-box
+body,
+html,
+h1
+  margin 0
+  padding 0
+  font-family "Source Sans Pro","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif  
+#app
+  position relative
+.mask
+  position absolute
+  width 100vw
+  height 100vh
+  top 0
+  left 0
+  background rgba(0,0,0, 0.7)
+  z-index -1
+#header
+  height 100vh
+  width 100vw
+  background-image url("https://ws1.sinaimg.cn/large/8700af19ly1fm9ru6fqvjj22p81stdta")
+  background-attachment fixed
+  background-size cover
+  background-position center
+  text-align center
+  padding 15vh
+  position relative
+  z-index 2
+  .logo
+    width 120px
+  .title
+    color #4BA2E2
+    font-size 36px
+    font-weight 300
+    margin 10px auto
+  .desc
+    font-weight 400
+    margin 20px auto 10px
+    color #ddd
+    a
+      text-decoration none
+      color #4BA2E2
+  .download
+    display inline-block
+    line-height 1
+    white-space nowrap
+    cursor pointer
+    background transparent
+    border 1px solid #d8dce5
+    color #ddd
+    -webkit-appearance none
+    text-align center
+    box-sizing border-box
+    outline none
+    margin 20px 12px
+    transition .1s
+    font-weight 500
+    user-select none
+    padding 12px 20px
+    font-size 14px
+    border-radius 20px
+    padding 12px 23px
+    transition .2s all ease-in-out
+    &:hover
+      background #ddd
+      color rgba(0,0,0, 0.7)
+#container
+  position relative
+  text-align center
+  margin-top -10vh
+  z-index 3
+  .gallery
+    margin-bottom 60px
+    cursor pointer
+    transition all .2s ease-in-out
+    &:hover
+      transform scale(1.05)
+  .display-list
+    &__item
+      padding 48px
+      text-align left
+      background #2E2E2E
+      overflow hidden
+      &.o-item
+        background #fff
+        .display-list__desc
+          color #2E2E2E
+      img
+        width 100%
+        cursor pointer
+        transition all .2s ease-in-out
+        &:hover
+          transform scale(1.05)
+    &__content
+      padding-top 120px
+    &__title
+      color #4BA2E2
+      font-size 50px
+    &__desc
+      color #fff
+      margin-top 20px
+  .info
+    padding 48px 0
+    background #2E2E2E
+    color #fff
+    a
+      text-decoration none
+      color #fff
+@media (max-width: 768px)
+  #container
+    .display-list
+      &__item
+        padding 24px 12px
+      &__content
+        padding-top 30px
+      &__title
+        font-size 25px
+      &__desc
+        margin-top 12px
+</style>
diff --git a/docs/main.js b/docs/main.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './APP.vue'
+import 'melody.css'
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
diff --git a/docs/template.html b/docs/template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>PicGo</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -19,10 +19,12 @@
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
     "test": "npm run unit && npm run e2e",
     "unit": "karma start test/unit/karma.conf.js",
-    "postinstall": "npm run lint:fix"
+    "postinstall": "npm run lint:fix",
+    "build:docs": "webpack -p --config .electron-vue/webpack.docs.config.js",
+    "docs": "webpack-dev-server --content-base docs/dist --config .electron-vue/webpack.docs.config.js --hot --inline"
   },
   "build": {
-    "productName": "picgo",
+    "productName": "PicGo",
     "appId": "org.simulatedgreg.electron-vue",
     "directories": {
       "output": "build"
@@ -46,7 +48,10 @@
       ]
     },
     "mac": {
-      "icon": "build/icons/icon.icns"
+      "icon": "build/icons/icon.icns",
+      "extendInfo": {
+        "LSUIElement": 1
+      }
     },
     "win": {
       "icon": "build/icons/icon.ico"
@@ -62,6 +67,7 @@
     "image-size": "^0.6.1",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
+    "melody.css": "^1.0.2",
     "qiniu": "^7.1.1",
     "request": "^2.83.0",
     "request-promise": "^4.2.2",
@@ -118,6 +124,8 @@
     "mocha": "^3.0.2",
     "multispinner": "^0.2.1",
     "node-loader": "^0.6.0",
+    "pug": "^2.0.0-rc.4",
+    "pug-loader": "^2.3.0",
     "require-dir": "^0.3.0",
     "spectron": "^3.7.1",
     "style-loader": "^0.18.2",

diff --git a/src/main/index.js b/src/main/index.js
@@ -25,15 +25,12 @@ const settingWinURL = process.env.NODE_ENV === 'development'
 function createTray () {
   tray = new Tray(`${__static}/menubar.png`)
   const contextMenu = Menu.buildFromTemplate([
-    {
-      role: 'quit',
-      label: 'Quit'
-    },
     {
       label: '打开详细窗口',
       click () {
         if (settingWindow === null) {
           createSettingWindow()
+          settingWindow.show()
         } else {
           settingWindow.show()
           settingWindow.focus()
@@ -63,6 +60,10 @@ function createTray () {
           }
         }
       ]
+    },
+    {
+      role: 'quit',
+      label: '退出'
     }
   ])
   tray.on('right-click', () => {
@@ -92,7 +93,7 @@ function createTray () {
   })
 
   tray.on('drag-end', () => {
-    tray.setImage(`${__static}/menubarDefaultTemplate.png`)
+    tray.setImage(`${__static}/menubar.png`)
   })
 
   tray.on('drop-files', async (event, files) => {