Merge pull request #11 from zhuowenli/dev

✨ 支持折叠书签栏

.env.example

@@ -20,3 +20,9 @@ QINIU_ACCESS_KEY=123
 QINIU_SECRET_KEY=123
 QINIU_BUCKET=baidu
 QINIU_HOST=http://www.baidu.com
+
+
+# GITHUB
+CLIENT_ID=XXX
+CLIENT_SERECT=XXX
+

app/routes/github.js

@@ -0,0 +1,53 @@
+/*
+ * @Author: 卓文理
+ * @Email: [email protected]
+ * @Date: 2018-05-06 13:21:58
+ */
+
+'use strict';
+
+
+import Router from 'koa-router';
+import axios from 'axios';
+
+const router = new Router();
+const id = process.env.CLIENT_ID;
+const sercet = process.env.CLIENT_SERECT;
+
+router.get('/github/login', async (ctx, next) => {
+    // 去到github授权页
+    const dataStr = (new Date()).valueOf();
+    const path = `https://github.com/login/oauth/authorize?client_id=${id}&scope=['user']&state=${dataStr}`;
+
+    ctx.redirect(path); // 送到授权的中间页
+});
+
+// 添加
+router.get('/github/callback', async (ctx, next) => {
+    const code = ctx.query.code;
+    const data = await axios({ // 没有fetch,需要装node-fetch
+        url: 'https://github.com/login/oauth/access_token',
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        data: {
+            client_id: id,
+            client_secret: sercet,
+            code
+        },
+    }).then(res => res.data);
+
+    const args = data.split('&');
+    const arg = args[0].split('=');
+    const access_token = arg[1];
+
+    const url = `https://api.github.com/user?access_token=${access_token}`; // token就是oauth令牌环
+
+    await axios.get(url)
+        .then(res => {
+            ctx.body = res.data;
+        });
+});
+
+export default router;

app/routes/index.js

@@ -12,6 +12,7 @@ import qiniuToken from './qiniu';
 import admin from './admin';
 import login from './login';
 import metadata from './metadata';
+import github from './github';
 
 const router = new Router();
 
@@ -23,6 +24,7 @@ router.use('/api', qiniuToken.routes(), qiniuToken.allowedMethods());
 router.use('/api', admin.routes(), admin.allowedMethods());
 router.use('/api', login.routes(), login.allowedMethods());
 router.use('/api', metadata.routes(), metadata.allowedMethods());
+router.use('/api', github.routes(), github.allowedMethods());
 
 export default function routes() {
     return compose([

package.json

@@ -1,14 +1,14 @@
 {
   "name": "githuber",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "main": "index.js",
   "repository": "[email protected]:zhuowenli/githuber.git",
   "author": "卓文理 <[email protected]>",
   "license": "Mozilla Public License Version 2.0",
   "scripts": {
     "dev": "poi --dev",
     "watch": "poi watch",
-    "build": "cross-env NODE_ENV=production poi build",
+    "build": "rm -rf dist && cross-env NODE_ENV=production poi build",
     "start": "pm2 start ./app/index.js --name 'githuber-server'",
     "restart": "pm2 restart githuber-server",
     "nodemon": "nodemon --watch app ./app/index.js",

src/lang/en.js

@@ -38,7 +38,10 @@ export default {
     // 视图
     View: 'View',
     showBookmark: 'Show Bookmark',
+    collapseBookmark: 'Collapse Bookmark',
     Language: 'Language',
+    importTopSites: 'Import top sites',
+    import: 'Import',
 
     // 数据备份
     DataBackup: 'Data Backup',

src/lang/zh.js

@@ -38,7 +38,10 @@ export default {
     // 视图
     View: '视图',
     showBookmark: '显示书签栏',
+    collapseBookmark: '折叠书签栏',
     Language: '语言',
+    importTopSites: '导入最常访问',
+    import: '导入',
 
     // 数据备份
     DataBackup: '数据备份',

src/services/config.js

@@ -13,6 +13,7 @@ export default {
     lang: '',
     locale: 'en',
     showBookmark: true,
+    collapseBookmark: false,
     openSearchInNewTab: false,
     openLinkInNewTab: false,
     openBookmarkInNewTab: false,

src/views/components/bookmark.sass

@@ -28,8 +28,10 @@
             display: flex
             align-items: center
             justify-content: center
+            flex-shrink: 0;
             width: 40px
             height: 40px
+            outline: 0
             img
                 display: inline-block
                 width: 32px
@@ -38,20 +40,22 @@
             display: flex
             align-items: center
             justify-content: center
+            flex-shrink: 0;
             width: 40px
             height: 40px
             background: $gray
             border-radius: 50%
             color: #ffffff
             font-size: 20px
             user-select: none
+            outline: 0
 
         .name
             flex: 1
             display: flex
             height: 40px
-            padding-left: 10px
             font-size: 12px
+            padding-left: 10px
             span
                 @include max-text(2)
                 width: 100%
@@ -92,3 +96,6 @@
                 @extend %running
                 animation-play-state: running;
                 display: flex
+
+.main-aside--collapse .bookmark__item .name
+    width: 0

src/views/components/bookmark.vue

@@ -9,19 +9,31 @@
             :options="dragOptions"
         )
             .bookmark__item(
-                @contextmenu="toggleEditAction"
                 v-for="(item, inx) in bookmarks"
                 :key="inx"
+                :class="{edit: edit}"
+                @contextmenu="toggleEditAction"
                 @click="onLinkTapAction(item)"
                 @dblclick="onEditAction(item, inx)"
-                :class="{edit: edit}"
             )
                 .el-icon-close(@click.stop="onRemoveAction(item)")
-                .logo.shake-constant(v-if="item.logo")
-                    img(:src="item.logo")
-                .text.shake-constant(v-else) {{item.name[0]}}
+
+                //- 折叠状态下、hover提示
+                el-tooltip(
+                    class="item"
+                    effect="dark"
+                    placement="right"
+                    :content="item.name"
+                    :disabled="!collapseBookmark"
+                )
+                    .logo.shake-constant(v-if="item.logo")
+                        img(:src="item.logo")
+                    .text.shake-constant(v-else) {{item.name[0]}}
+
                 .name
                     span {{item.name}}
+
+        //- 新增、保存按钮
         .bookmark__item(@click="toggleEditAction" v-if="edit")
             .el-icon-check
         .bookmark__item(@click="onAddAction" v-else)
@@ -34,6 +46,9 @@ import draggable from 'vuedraggable';
 
 export default {
     name: 'bookmark',
+    props: {
+        collapseBookmark: Boolean
+    },
     data() {
         return {
             edit: false,

src/views/components/github-trending.sass

@@ -80,7 +80,6 @@
         box-shadow: none
         padding: 10px
         width: 100%
-        max-width: 400px
         .el-card__body
             padding: 16px 20px
         &__title
@@ -137,19 +136,35 @@
 @media only screen and (min-width: 960px)
     .github-trending .trending
         width: 50%
+    .main-aside:not(.main-aside--show), .main-aside--collapse
+        & ~ .main-content .github-trending .trending
+            width: 33.3%
 
 @media only screen and (min-width: 1280px)
     .github-trending .trending
         width: 33.3%
+    .main-aside:not(.main-aside--show), .main-aside--collapse
+        & ~ .main-content .github-trending .trending
+            width: 25%
 
 @media only screen and (min-width: 1600px)
     .github-trending .trending
         width: 25%
+    .main-aside:not(.main-aside--show), .main-aside--collapse
+        & ~ .main-content .github-trending .trending
+            width: 20%
 
 @media only screen and (min-width: 1920px)
     .github-trending .trending
         width: 20%
+    .main-aside:not(.main-aside--show), .main-aside--collapse
+        & ~ .main-content .github-trending .trending
+            width: 16.66%
 
 @media only screen and (min-width: 2560px)
     .github-trending .trending
         width: 16.66%
+    .main-aside:not(.main-aside--show), .main-aside--collapse
+        & ~ .main-content .github-trending .trending
+            width: 14.285%
+

src/views/components/setting.vue

@@ -26,6 +26,11 @@
                             el-option(label="English" value="en")
                     el-form-item(:label="$t('showBookmark')")
                         el-switch(v-model="config.showBookmark")
+                    el-form-item(:label="$t('collapseBookmark')")
+                        el-switch(v-model="config.collapseBookmark")
+
+                    el-form-item(:label="$t('importTopSites')")
+                        el-button(type="info" size="medium" round @click="onImportTopSites") {{$t('import')}}
 
             el-card
                 div(slot="header") {{$t('DataBackup')}}
@@ -93,6 +98,12 @@ export default {
                 }
             };
             reader.readAsText(file);
+        },
+
+        onImportTopSites() {
+            chrome.topSites.get(sites => {
+                this.$emit('import', sites);
+            });
         }
     },
     watch: {

src/views/main.sass

@@ -8,19 +8,27 @@
     display: flex
     height: 100vh
     overflow: hidden
+
+    // 左侧悬浮栏
     &-aside
+        position: relative
         background: #ffffff
         box-shadow: 0 0 3px 0 #ddd
         transform: translateX(-100%)
         transition: all 0.2s ease
         width: 0
         overflow: hidden
-        &.show
+        &--show
             width: 300px
             transform: translate3d(0, 0, 0)
+            &.main-aside--collapse
+                width: 60px
+
     &-content
         flex: 1
         background: #eceff1
+
+    // 头部
     &__header
         width: 100%
         background: #ffffff
@@ -57,6 +65,8 @@
         .oction-x
             width: 12px
             height: 16px
+
+    // trending
     &__trending
         position: relative
         width: 100%

src/views/main.vue

@@ -1,7 +1,10 @@
 <template lang="pug">
     .main
-        .main-aside(:class="{show: config.showBookmark}")
+        .main-aside(
+            :class="{'main-aside--show': config.showBookmark, 'main-aside--collapse': config.collapseBookmark}"
+        )
             bookmark(
+                :collapseBookmark="config.collapseBookmark"
                 @tap="onBookmarkTapAction"
                 @add="onBookmarkAddAction"
                 @edit="onBookmarkEditAction"
@@ -29,13 +32,14 @@
                     @update="onConfigUpdateAction"
                 )
 
-        main-setting(v-model="config" @upload="onUploadAction")
+        main-setting(v-model="config" @upload="onUploadAction" @import="onImportBookmarks")
         dialog-bookmark-edit(v-model="dialog")
 </template>
 
 <script>
 import { mapActions } from 'vuex';
 import octicons from 'octicons';
+import Promise from 'bluebird';
 import searchBox from './components/search.vue';
 import githubTrending from './components/github-trending.vue';
 import bookmark from './components/bookmark.vue';
@@ -62,7 +66,7 @@ export default {
         document.title = this.$t('NewTabs');
     },
     methods: {
-        ...mapActions('bookmark', ['removeBookmark', 'restoreBackupBookmarks']),
+        ...mapActions('bookmark', ['removeBookmark', 'restoreBackupBookmarks', 'saveBookmark']),
 
         // 搜索事件
         onSearchAction(url) {
@@ -115,7 +119,6 @@ export default {
 
         // 编辑书签
         onBookmarkEditAction(item, index) {
-            console.log(item);
             this.dialog = {
                 index,
                 show: true,
@@ -131,10 +134,20 @@ export default {
         // 删除书签
         async onBookmarkRemoveAction(item) {
             await this.removeBookmark(item);
-            // this.$message({
-            //     message: this.$t('DeleteSuccess'),
-            //     type: 'success'
-            // });
+        },
+
+        // 导入书签
+        onImportBookmarks(sites) {
+            Promise.map(sites, item => {
+                this.saveBookmark({ form: {
+                    name: item.title,
+                    url: item.url,
+                    logo: `chrome://favicon/${item.url}`,
+                } });
+            }).then(() => {
+                console.log(111);
+            });
+            console.log(sites);
         },
 
         onLocaleChange() {