From 345be496336ca89d3e41840f627efc2ac3dbc27d Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 9 Nov 2020 17:59:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E7=BD=91=E7=AB=99?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                |  2 +-
 src/components/backtop/AlBackTop.vue       | 29 +++++-----
 src/layout/components/AppMain.vue          |  5 +-
 src/router/index.js                        | 14 +++--
 src/styles/article.scss                    | 14 ++---
 src/styles/markdown.scss                   | 29 ++++++----
 src/views/markdown/index.vue               |  2 +-
 src/views/public/article/ArticleTop.vue    |  9 +++-
 src/views/public/article/SidebarNav.vue    | 17 +++---
 src/views/public/article/index.vue         | 46 +++++++++++++---
 src/views/public/articles/index.vue        | 63 ++++++++++++++++++----
 src/views/setting/articles/blogManager.vue | 12 +++--
 12 files changed, 179 insertions(+), 63 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 30dc7fb..5f746a8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view></router-view>
   </div>
 </template>
 
diff --git a/src/components/backtop/AlBackTop.vue b/src/components/backtop/AlBackTop.vue
index 7a3e819..20c7ee4 100644
--- a/src/components/backtop/AlBackTop.vue
+++ b/src/components/backtop/AlBackTop.vue
@@ -64,19 +64,19 @@
       this.throttledScrollHandler = throttle(300, this.onScroll);
       this.container.addEventListener('scroll', this.throttledScrollHandler);
 
-      window.onbeforeunload = function () {
-        let scrollPos;
-        if (typeof window.pageYOffset != 'undefined') {
-          scrollPos = window.pageYOffset;
-        }
-        else if (typeof document.compatMode != 'undefined' && document.compatMode !== 'BackCompat') {
-          scrollPos = document.documentElement.scrollTop;
-        }
-        else if (typeof document.body != 'undefined') {
-          scrollPos = document.body.scrollTop;
-        }
-        document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
-      }
+      // window.onbeforeunload = function () {
+      //   let scrollPos;
+      //   if (typeof window.pageYOffset != 'undefined') {
+      //     scrollPos = window.pageYOffset;
+      //   }
+      //   else if (typeof document.compatMode != 'undefined' && document.compatMode !== 'BackCompat') {
+      //     scrollPos = document.documentElement.scrollTop;
+      //   }
+      //   else if (typeof document.body != 'undefined') {
+      //     scrollPos = document.body.scrollTop;
+      //   }
+      //   document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
+      // }
 
     },
 
@@ -103,6 +103,9 @@
         this.scrollToTop();
         this.$emit('click', e);
       },
+      nextPageScrollTop() {
+        this.el.scrollTop = document.body.clientHeight * 0.7 - 150
+      },
       scrollToTop() {
         const el = this.el;
         const beginTime = Date.now();
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index f6a3286..019c1e0 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,7 +1,10 @@
 <template>
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
-      <router-view :key="key" />
+      <keep-alive v-if="$route.meta.keepAlive">
+        <router-view :key="key" />
+      </keep-alive>
+      <router-view v-else :key="key" />
     </transition>
   </section>
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index edcc715..058e2c1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -200,6 +200,8 @@ export const constantRoutes = [
         path: '',
         name: 'article',
         component: () => import('@/views/public/article/index'),
+        hidden: true,
+        meta: { keepAlive: true }
       }
     ]
   },
@@ -209,7 +211,7 @@ export const constantRoutes = [
     children: [
       {
         path: `${document.location.protocol}//${window.location.host}/articles`,
-        meta: { title: '关联博客', icon: 'link' }
+        meta: { title: '关联博客', icon: 'link', keepAlive: true }
       }
     ]
   },
@@ -261,7 +263,7 @@ export const constantRoutes = [
         path: '',
         name: 'articles',
         component: () => import('@/views/public/articles/index'),
-        meta: { title: '文档列表', icon: 'md-list' }
+        meta: { title: '文档列表', icon: 'md-list', keepAlive: true }
       }
     ]
   },
@@ -330,7 +332,13 @@ export const dynamicRouters = [
 
 const createRouter = () => new Router({
   mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
+  // scrollBehavior (to, from, savedPosition) {
+  //   if (savedPosition) {
+  //     return savedPosition
+  //   } else {
+  //     return { x: 0, y: 0 }
+  //   }
+  // },
   routes: constantRoutes
 })
 
diff --git a/src/styles/article.scss b/src/styles/article.scss
index 1537d29..90d36e9 100644
--- a/src/styles/article.scss
+++ b/src/styles/article.scss
@@ -59,7 +59,7 @@
 @media not all, screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all {
   .blog-description.font-mono {
     font-family: Consolas,Menlo,Monaco,"lucida console","Liberation Mono","Courier New","andale mono",monospaceX,monospace,sans-serif;
-    font-size: 1.1125rem;
+    font-size: 1rem;
   }
 }
 
@@ -76,9 +76,7 @@
 }
 
 @media (min-width: 576px) {
-  .navbar>.container-fluid {
-    max-width: 540px;
-  }
+
 }
 
 @media screen and (max-width: 768px) {
@@ -88,6 +86,10 @@
     margin-bottom: .5rem;
   }
 
+  //.blog-description {
+  //  font-size: .8125rem;
+  //}
+
   .cover-wrapper .cover .cover-body {
     padding-bottom: 68px;
     .title {
@@ -102,9 +104,7 @@
 }
 
 @media (min-width: 768px){
-  .navbar>.container-fluid {
-    max-width: 720px;
-  }
+
 }
 
 @media (min-width: 992px) {
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index 8e3cea2..369b88e 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -218,6 +218,12 @@
   transform: translateY(-100%);
 }
 
+.animateLeft {
+  transform: translateX(-10rem);
+}
+.animateRight {
+  transform: translateX(0rem);
+}
 
 .body-wrapper {
   position: relative;
@@ -500,19 +506,19 @@
 /deep/ .right-menu > div.titleList {
   .h-1 {
     padding-left: 10px;
-    font-size: 1.3rem;
+    font-size: 1.125rem;
   }
   .h-2 {
     padding-left: 20px;
-    font-size: 1.25rem;
+    font-size: 1.1rem;
   }
   .h-3 {
     padding-left: 30px;
-    font-size: 1.125rem;
+    font-size: 1rem;
   }
   .h-4 {
     padding-left: 40px;
-    font-size: 0.95rem;
+    font-size: 0.925rem;
   }
   .h-5 {
     padding-left: 50px;
@@ -663,10 +669,11 @@
 
 #toggle-nav {
   display: none;
-  position: fixed;
   top: .625rem;
   left: .625rem;
-  z-index: 891;
+  font-size: .75rem;
+  position: fixed;
+  z-index: 899;
   -webkit-transition: 0.5s ease all;
   -moz-transition: 0.5s ease all;
   -ms-transition: 0.5s ease all;
@@ -675,10 +682,10 @@
 }
 
 #sidebar-nav {
-  width: 20rem;
+  width: 17.5rem;
   height: 100%;
-  position: absolute;
-  left: -20rem;
+  position: fixed;
+  left: -17.5rem;
   top: 0;
   bottom: 0;
   overflow-y: auto;
@@ -748,5 +755,9 @@
   }
   #toggle-nav {
     display: block;
+    .nav-button {
+      backdrop-filter: saturate(180%) blur(20px);
+      background-color: #ffffffb3;
+    }
   }
 }
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index a6d4e65..f30dde3 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-wechat-title="'编辑'+filename">
     <dir-tree ref="dirTree">
         <el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
     </dir-tree>
diff --git a/src/views/public/article/ArticleTop.vue b/src/views/public/article/ArticleTop.vue
index f59e0be..fe3b85d 100644
--- a/src/views/public/article/ArticleTop.vue
+++ b/src/views/public/article/ArticleTop.vue
@@ -53,9 +53,14 @@ export default {
         setting.operatingButtons.split(/[\n]/).forEach(button => {
           let operatingButton = {}
           const splitIndex = button.indexOf(":")
-          operatingButton.fontHtml = button.substring(0, splitIndex)
+          const ihtml = button.substring(0, splitIndex)
+          // 获取标签里的内容
+          let regLabel = /[^><]+(?=<\/i>)/img
+          const title = ihtml.match(regLabel)
+          operatingButton.title = title ? title[0] : ''
+          // 去掉标签里的内容
+          operatingButton.fontHtml = ihtml.replace(regLabel, '')
           operatingButton.url = button.substring(splitIndex + 1, button.length)
-          operatingButton.title = button.match(/fa-(\S*?)"/)[1]
           this.operatingButtons.push(operatingButton)
         })
       }
diff --git a/src/views/public/article/SidebarNav.vue b/src/views/public/article/SidebarNav.vue
index 84a356e..85967a8 100644
--- a/src/views/public/article/SidebarNav.vue
+++ b/src/views/public/article/SidebarNav.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div id="toggle-nav">
-      <el-button round @click="toggle">MENU</el-button>
+      <el-button class="nav-button" round size="small" @click="toggle">MENU</el-button>
     </div>
     <div id="sidebar-nav">
       <div class="author navbar-header">
@@ -59,9 +59,14 @@ export default {
         setting.operatingButtons.split(/[\n]/).forEach(button => {
           let operatingButton = {}
           const splitIndex = button.indexOf(":")
-          operatingButton.fontHtml = button.substring(0, splitIndex)
+          const ihtml = button.substring(0, splitIndex)
+          // 获取标签里的内容
+          let regLabel = /[^><]+(?=<\/i>)/img
+          const title = ihtml.match(regLabel)
+          operatingButton.title = title ? title[0] : ''
+          // 去掉标签里的内容
+          operatingButton.fontHtml = ihtml.replace(regLabel, '')
           operatingButton.url = button.substring(splitIndex + 1, button.length)
-          operatingButton.title = button.match(/fa-(\S*?)"/)[1]
           this.operatingButtons.push(operatingButton)
         })
       }
@@ -77,9 +82,9 @@ export default {
         toggleNav.style.transform = ''
         sidebarNav.style.transform = ''
       } else {
-        body.style.transform = 'translateX(20rem)'
-        toggleNav.style.transform = 'translateX(17.5rem)'
-        sidebarNav.style.transform = 'translateX(20rem)'
+        body.style.transform = 'translateX(17.5rem)'
+        toggleNav.style.transform = 'translateX(14.5rem)'
+        sidebarNav.style.transform = 'translateX(17.5rem)'
       }
     },
   }
diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue
index 250d385..55f7515 100644
--- a/src/views/public/article/index.vue
+++ b/src/views/public/article/index.vue
@@ -6,7 +6,7 @@
     <al-back-top></al-back-top>
 
     <!--SideBar menu-->
-    <SidebarNav/>
+    <SidebarNav  :setting="userSetting"/>
 
     <div id="body">
       <div id="top" class="animateIn">
@@ -20,6 +20,9 @@
           <div class="blog-description font-mono">
             <a itemprop="name" href="https://www.jmal.top/author/1/" rel="author">{{file.username}}</a>
             · {{file.uploadDate}}
+            <span v-if="isEditor">
+              · <a :href="'/markdown/editor?id='+file.id" target="_blank">编辑</a>
+            </span>
           </div>
         </div>
       </div>
@@ -85,7 +88,8 @@ export default {
         tocMaxHeight: 500,
         befterScrollTop: 0,
         maxMenuHeight: document.documentElement.clientHeight - 155,
-        top: 70
+        top: 70,
+        isEditor : false,
       }
     },
     mounted() {
@@ -99,6 +103,17 @@ export default {
         that.maxMenuHeight= document.documentElement.clientHeight - 155
       }
     },
+    // beforeRouteLeave(to, from, next) {
+    //   to.meta.keepAlive = true;
+    //   next();
+    // },
+    activated() {
+      console.log('activated', 'article')
+    },
+    deactivated() {
+      console.log('deactivated')
+      // this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    },
     methods: {
       getSetting() {
         getSetting({userId: this.$store.state.user.userId}).then((res) => {
@@ -130,6 +145,9 @@ export default {
           mark: this.$route.query.mark
         }).then((res) => {
           this.file = res.data
+          if(this.file.userId === this.$store.state.user.userId) {
+            this.isEditor = true
+          }
           const filename = res.data.name
           this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
           this.content = res.data.contentText
@@ -156,6 +174,8 @@ export default {
                 a[i] = a[i].replace(/id="/g, 'href="#')
                 if (i ===0 && a[i].indexOf('h1') !== -1) {
                   a[i] = '<li first class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
+                }else if (a[i].indexOf('h1') !== -1) {
+                  a[i] = '<li first class="pl h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
                 }else if (a[i].indexOf('h2') !== -1) {
                   a[i] = '<li class="pl h-2">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
                 }else if (a[i].indexOf('h3') !== -1) {
@@ -181,13 +201,27 @@ export default {
               let beforeScrollTop = document.documentElement.scrollTop;
               let fn = fn || function (direction) {
                 // 判断是上滑显示,下滑隐藏
+                const top = $('#top')
+                const toogleNav = $('#toggle-nav')
+
+                const body = document.getElementById("body")
+
                 if(direction === 'down'){
-                  $('#top').removeClass('animateIn')
-                  $('#top').addClass('animateOut')
+                  top.removeClass('animateIn')
+                  top.addClass('animateOut')
+                  toogleNav.removeClass('animateRight')
+                  toogleNav.addClass('animateLeft')
+                  if(body.style.transform.length > 0) {
+                    document.getElementById("sidebar-nav").style.transform = ''
+                    body.style.transform = ''
+                    document.getElementById("toggle-nav").style.transform = ''
+                  }
                 }
                 if(direction === 'up'){
-                  $('#top').removeClass('animateOut')
-                  $('#top').addClass('animateIn')
+                  top.removeClass('animateOut')
+                  top.addClass('animateIn')
+                  toogleNav.removeClass('animateLeft')
+                  toogleNav.addClass('animateRight')
                 }
               };
 
diff --git a/src/views/public/articles/index.vue b/src/views/public/articles/index.vue
index 163ca07..180eae9 100644
--- a/src/views/public/articles/index.vue
+++ b/src/views/public/articles/index.vue
@@ -3,7 +3,7 @@
     <transition name="fade">
       <al-loading v-if="isLoading"></al-loading>
     </transition>
-    <al-back-top></al-back-top>
+    <al-back-top ref="alBackTop"></al-back-top>
 
     <SidebarNav  :setting="userSetting"/>
 
@@ -34,7 +34,7 @@
                   <section class="meta">
                     <div class="meta" id="header-meta">
                       <h2 class="title">
-                        <a :href="$route.path+'/article?mark='+article.id">{{article.name}}</a>
+                        <router-link :to="$route.path+'/article?mark='+article.id">{{article.name}}</router-link>
                       </h2>
                       <div class="new-meta-box">
                         <div class="new-meta-item author">
@@ -46,7 +46,7 @@
                         <div class="new-meta-item date">
                           <a class="notlink">
                             <svg-icon icon-class="release"></svg-icon>
-                            <p>发布于 {{article.uploadTime}}</p>
+                            <p>发布于 {{article.uploadDate}}</p>
                           </a>
                         </div>
                       </div>
@@ -54,15 +54,25 @@
                     </div>
                   </section>
                   <section class="article typo">
-                    <a :href="$route.path+'/article?mark='+article.id">
+                    <router-link :to="$route.path+'/article?mark='+article.id">
                       <div class="article-entry" itemprop="articleBody">
-                        <p><img class="blog-background articles-list" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
+                        <p><img v-if="article.cover" class="blog-background articles-list" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
                       </div>
-                    </a>
+                    </router-link>
                   </section>
                 </article>
               </div>
             </section>
+            <el-pagination
+              style="text-align: center"
+              :hide-on-single-page="true"
+              :current-page.sync="pagination.pageIndex"
+              :page-sizes="pagination.pageSizes"
+              :page-size="pagination.pageSize"
+              :total="pagination.total"
+              @current-change="currentChange"
+              layout="prev, pager, next">
+            </el-pagination>
           </el-main>
         </div>
       </div>
@@ -92,14 +102,40 @@ import { getSetting } from '@/api/user'
         articleList: [],
         backImageSrc: "~@/assets/img/widget-img1.jpg",
         userSetting: {},
+        pagination: {
+          pageIndex: this.$route.query.page ? parseInt(decodeURI(this.$route.query.page)) : 1,
+          pageSize: 10,
+          total: 0,
+        },
+        scrollTop: 0
       }
     },
     mounted() {
       this.getSetting()
       this.getMarkDown()
-      const that = this
-      window.onresize = function() {
-      }
+      console.log('mounted')
+    },
+    // beforeRouteEnter (to, from, next) {
+    //   console.log('beforeRouteEnter')
+    //   next(vm => {
+    //     console.log(vm.scrollTop)
+    //     document.body.scrollTop = vm.scrollTop
+    //   })
+    // },
+    // // beforeRouteUpdate (to, from, next) {
+    // //   console.log('beforeRouteUpdate')
+    // //   next()
+    // // },
+    // beforeRouteLeave(to, from, next) {
+    //   to.meta.keepAlive = false;
+    //   next();
+    // },
+    activated() {
+      console.log('activated',this.scrollTop)
+    },
+    deactivated() {
+      console.log('deactivated')
+      // this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
     },
     methods: {
       getSetting() {
@@ -131,13 +167,18 @@ import { getSetting } from '@/api/user'
         else
           return null;
       },
-      onScroll() {
+      currentChange() {
+        this.$router.push(`?page=${this.pagination.pageIndex}`)
+        this.getMarkDown()
+        this.$refs.alBackTop.nextPageScrollTop()
       },
       getMarkDown() {
-        markdownApi.getMarkdown().then((res) => {
+        markdownApi.getMarkdown({pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize}).then((res) => {
           this.articleList = res.data
+          this.pagination.total = res.count
           this.$nextTick(() => {
             this.isLoading = false
+            this.pagination.pageIndex = parseInt(decodeURI(this.$route.query.page))
           })
         })
       },
diff --git a/src/views/setting/articles/blogManager.vue b/src/views/setting/articles/blogManager.vue
index 6dbb250..8b27076 100644
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@@ -27,8 +27,14 @@
           <span class="instruction">配置网站的 Logo，该选项仅作用于顶部导航条</span>
 
           <div class="config-itme-label">导航栏操作按钮：</div>
-          <el-input  :autosize="{ minRows: 4, maxRows: 6}" type="textarea" width="100%" v-model="form.operatingButtons"></el-input>
-          <span class="instruction">一个操作按钮包含两个部分：<a href="https://fontawesome.com/icons?d=gallery" target="_blank">Font-awesome</a>图标标签和链接，使用'：'隔开。列如：{{example}}:https://github.com/jamebal</span>
+          <el-input type="textarea" width="100%" v-model="form.operatingButtons" :autosize="{ minRows: 4, maxRows: 6 }" ></el-input>
+          <span class="instruction">
+            一个操作按钮包含两个部分：
+            <a href="https://fontawesome.com/icons?d=gallery" target="_blank">Font-awesome</a>
+            图标标签和链接，使用'：'隔开(标签里的内容为该图标的简述)。
+            <br>
+            列如：{{example}}:https://github.com/jamebal (建议不超过5项)
+          </span>
         </el-collapse-item>
       </el-collapse>
     </el-card>
@@ -46,7 +52,7 @@ export default {
   data() {
     return {
       activeNames: ['1'],
-      example: '<i class="fab fa-github"></i>',
+      example: '<i class="fab fa-github">github</i>',
       form: {
         backgroundSite: '',
         backgroundTextSite: '',