mjz update

2023-05-28 18:15:33 +08:00
parent 9b75e60571
commit ed6e2d81fb
243 changed files with 11730 additions and 6 deletions
@@ -0,0 +1,237 @@
+<template>
+  <div class="page-nav-wapper">
+    <!-- 页面中间左右翻页 -->
+    <div
+      class="page-nav-centre-wrap"
+      v-if="$themeConfig.pageButton !== false && (prev || next)"
+    >
+      <router-link
+        class="page-nav-centre page-nav-centre-prev"
+        v-if="prev"
+        :to="prev.path"
+        @mouseenter.native="showTooltip($event)"
+        @mousemove.native="showTooltip($event)"
+      >
+        <div class="tooltip">{{ prev.title || prev.path }}</div>
+      </router-link>
+
+      <router-link
+        class="page-nav-centre page-nav-centre-next"
+        v-if="next"
+        :to="next.path"
+        @mouseenter.native="showTooltip($event)"
+        @mousemove.native="showTooltip($event)"
+      >
+        <div class="tooltip">{{ next.title || next.path }}</div>
+      </router-link>
+    </div>
+
+    <!-- 底部翻页按钮 -->
+    <div
+      class="page-nav"
+      v-if="prev || next"
+    >
+      <p class="inner">
+        <span
+          v-if="prev"
+          class="prev"
+        >
+          ←
+          <router-link
+            v-if="prev"
+            class="prev"
+            :to="prev.path"
+          >{{ prev.title || prev.path }}</router-link>
+        </span>
+
+        <span
+          v-if="next"
+          class="next"
+        >
+          <router-link
+            v-if="next"
+            :to="next.path"
+          >{{ next.title || next.path }}</router-link>→
+        </span>
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+import { resolvePage } from '../util'
+import isString from 'lodash/isString'
+import isNil from 'lodash/isNil'
+
+export default {
+  name: 'PageNav',
+  props: ['sidebarItems'],
+  computed: {
+    prev () {
+      return resolvePageLink(LINK_TYPES.PREV, this)
+    },
+
+    next () {
+      return resolvePageLink(LINK_TYPES.NEXT, this)
+    }
+  },
+  methods: {
+    showTooltip (e) {
+
+      const clientW = document.body.clientWidth
+      const X = e.clientX
+      const tooltipEle = e.target.querySelector('.tooltip')
+      if (!tooltipEle) {
+        return
+      }
+
+      const tooltipEleStyle = tooltipEle.style
+      if (X < clientW / 2) {
+        tooltipEleStyle.right = null
+        tooltipEleStyle.left = X + 10 + 'px'
+      } else {
+        tooltipEleStyle.left = null
+        tooltipEleStyle.right = clientW - X + 10 + 'px'
+      }
+      tooltipEleStyle.top = e.clientY + 10 + 'px'
+    }
+  }
+}
+
+function resolvePrev (page, items) {
+  return find(page, items, -1)
+}
+
+function resolveNext (page, items) {
+  return find(page, items, 1)
+}
+
+const LINK_TYPES = {
+  NEXT: {
+    resolveLink: resolveNext,
+    getThemeLinkConfig: ({ nextLinks }) => nextLinks,
+    getPageLinkConfig: ({ frontmatter }) => frontmatter.next
+  },
+  PREV: {
+    resolveLink: resolvePrev,
+    getThemeLinkConfig: ({ prevLinks }) => prevLinks,
+    getPageLinkConfig: ({ frontmatter }) => frontmatter.prev
+  }
+}
+
+function resolvePageLink (
+  linkType,
+  { $themeConfig, $page, $route, $site, sidebarItems }
+) {
+  const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType
+
+  // Get link config from theme
+  const themeLinkConfig = getThemeLinkConfig($themeConfig)
+
+  // Get link config from current page
+  const pageLinkConfig = getPageLinkConfig($page)
+
+  // Page link config will overwrite global theme link config if defined
+  const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig
+
+  if (link === false) {
+    return
+  } else if (isString(link)) {
+    return resolvePage($site.pages, link, $route.path)
+  } else {
+    return resolveLink($page, sidebarItems)
+  }
+}
+
+function find (page, items, offset) {
+  const res = []
+  flatten(items, res)
+  for (let i = 0; i < res.length; i++) {
+    const cur = res[i]
+    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
+      return res[i + offset]
+    }
+  }
+}
+
+function flatten (items, res) {
+  for (let i = 0, l = items.length; i < l; i++) {
+    if (items[i].type === 'group') {
+      flatten(items[i].children || [], res)
+    } else {
+      res.push(items[i])
+    }
+  }
+}
+</script>
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.page-nav
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 0
+  .inner
+    min-height 2rem
+    margin-top 0
+    border-top 1px solid var(--borderColor)
+    padding-top 1rem
+    overflow auto // clear float
+  .next
+    float right
+.page-nav-centre-wrap
+  .page-nav-centre
+    position fixed
+    top 50%
+    width 80px
+    height 70px
+    margin-top -35px
+    outline 0
+    transition all 0.2s
+    border-radius 3px
+    opacity 0.55
+    z-index 99
+    @media (max-width 1340px)
+      width 50px
+    @media (max-width 960px)
+      display none
+    &:hover
+      background rgba(153, 153, 153, 0.15)
+      opacity 1
+      .tooltip
+        display block
+    &:before
+      content ''
+      display block
+      width 10px
+      height 10px
+      border-top 2px solid #999
+      border-right 2px solid #999
+      position absolute
+      top 0
+      right 0
+      bottom 0
+      left 0
+      margin auto
+    .tooltip
+      display none
+      background rgba(0, 0, 0, 0.5)
+      color #fff
+      padding 4px 8px
+      font-size 13px
+      border-radius 3px
+      position fixed
+      max-width 200px
+      z-index 99
+  .page-nav-centre-prev
+    left 0
+    &:before
+      transform rotate(-135deg)
+  .page-nav-centre-next
+    right 0
+    &:before
+      transform rotate(45deg)
+.sidebar-open .page-nav-centre-wrap .page-nav-centre-prev
+  left $sidebarWidth
+.no-sidebar .page-nav-centre-wrap .page-nav-centre-prev
+  left 0
+</style>