StoryBook

thinkmap · Sep 1, 2019 · deaa55d · deaa55d
1 parent a05068d
commit deaa55d
Show file tree

Hide file tree

Showing 9 changed files with 780 additions and 32 deletions.
diff --git a/.vuepress/components/StoryBook.vue b/.vuepress/components/StoryBook.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <el-dialog
+      :title="$page.frontmatter.storyBook.title"
+      :visible.sync="dialogVisible"
+      custom-class="storybook-dialog"
+      :fullscreen="true">
+      <div slot="title" class="storybook-title">
+        {{$page.frontmatter.storyBook.title}} - 
+        <el-tag type="danger">
+          <span style="font-size: 14px;">{{slides[activeIndex] ? slides[activeIndex].title : ''}}</span>
+        </el-tag>
+        <el-button style="float: right; margin-right: 20px; virtical-align: top;" size="mini" type="text" @click="dialogVisible = false">全文阅读</el-button>
+      </div>
+      <swiper :options="swiperOption" ref="mySwiper" class="swiper-no-swiping">
+        <swiper-slide v-for="(step, index) in slides" :key="step.name" class="swipe-slide-width swiper-no-swiping" :data-hash="step.name">
+          <div :class="activeIndex === index ? 'slide-wrapper' : 'slide-wrapper noselect'"
+              :disabled="activeIndex !== index"
+              :style="activeIndex === index ? '' : 'cursor: pointer; opacity: 0.5;'">
+            <div class="slide"
+              @click.capture="clickNeighbour(index)"
+              :id="`dialog_${step.name}`">
+              <!-- <div :id="step.name">
+                <slot :name="step.name">
+                  {{step.title}}
+                </slot>
+              </div> -->
+            </div>
+            <el-button v-if="activeIndex === index" style="float: left; z-index: 100; margin-top: 5px;" size="mini" type="primary" @click="clickNeighbour(index - 1)">上一步</el-button>
+            <el-button v-if="activeIndex === index" style="float: right; z-index: 100; margin-top: 5px;" size="mini" type="primary" @click="clickNeighbour(index + 1)">下一步</el-button>
+          </div>
+        </swiper-slide>
+        <div class="swiper-pagination swiper-pagination-bullets swiper-pagination-custom swiper-no-swiping noselect" slot="pagination"></div>
+        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
+        <div class="swiper-button-next" slot="button-next"></div> -->
+      </swiper>
+    </el-dialog>
+    <el-button @click="dialogVisible = true" type="text" style="position: fixed; right: 20px; top: 60px;">分步阅读</el-button>
+    <template v-for="(step, index) in slides">
+      <div :key="step.name">
+        <div :id="`full_${step.name}`">
+          <div :id="step.name">
+            <slot :name="step.name">
+              {{step.title}}
+            </slot>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import 'swiper/dist/css/swiper.css'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+
+export default {
+  data () {
+    let _this = this
+    return {
+      dialogVisible: false,
+      activeIndex: 0,
+      swiperOption: {
+        hashNavigation: {
+          watchState: true,
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          // type: 'progressbar'
+          renderBullet(index, className) {
+              return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
+            }
+        },
+        speed: 300,
+        freeMode: false,
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        spaceBetween: 20,
+        on:{
+          slideChange: function(a){
+            console.log('slideChange')
+            _this.$nextTick(_ => {
+              _this.activeIndex = _this.$refs.mySwiper.swiper.activeIndex
+            })
+          },
+        },
+        // observer:true,
+        // navigation: {
+        //   nextEl: '.swiper-button-next',
+        //   prevEl: '.swiper-button-prev',
+        // }
+      },
+      canSlideNext: true,
+      slides: []
+    }
+  },
+  computed: {
+    // swiper() {
+    //   // if (this.$refs.mySwiper) {
+    //   return this.$refs.mySwiper.swiper
+    //   // } else {
+    //   //   return { activeIndex: 0 }
+    //   // }
+    // }
+  },
+  mounted () {
+    this.$nextTick(_ => {
+      for (let item of this.$page.frontmatter.storyBook.pages) {
+        this.slides.push(item)
+      }
+      setTimeout(_ => {
+        this.dialogVisible = this.$page.frontmatter.storyBook.initial === 'StoryBook'
+      }, 100)
+    })
+  },
+  components: {
+    swiper, swiperSlide
+  },
+  watch: {
+    dialogVisible () {
+      if (this.dialogVisible) {
+        setTimeout(_ => {
+          for (let item of this.slides) {
+            // console.log(`dialog_${item.name}`, document.getElementById(`dialog_${item.name}`))
+            document.getElementById(`dialog_${item.name}`).appendChild(document.getElementById(item.name))
+          }
+        }, 100)
+      } else {
+        setTimeout(_ => {
+          for (let item of this.slides) {
+            // console.log(`full_${item.name}`, document.getElementById(`full_${item.name}`))
+            document.getElementById(`full_${item.name}`).appendChild(document.getElementById(item.name))
+          }
+        }, 100)
+      }
+    }
+  },
+  methods: {
+    activeLinkStyle(href) {
+      if (this.$page.path.indexOf(href) === 0) {
+        return 'border-bottom: 2px solid #0b85ff;'
+      } else {
+        return ''
+      }
+    },
+    clickNeighbour (index) {
+      if (index > this.activeIndex) {
+        event.stopPropagation()
+        event.preventDefault()
+        if (this.$parent.canSlideNext) {
+          let result = this.$parent.canSlideNext.apply(this.$parent, [this.slides[this.activeIndex].name])
+          console.log(result)
+          if (!result.flag) {
+            this.$message.error(result.message)
+            return
+          } else {
+            this.$refs.mySwiper.swiper.slideNext()
+          }
+        }
+      } else if (index === this.activeIndex) {
+
+      } else if (index < this.activeIndex) {
+        event.stopPropagation()
+        event.preventDefault()
+        this.$refs.mySwiper.swiper.slidePrev()
+      }
+    },
+    next() {
+      if (this.active++ >= this.$page.frontmatter.storyBook.pages.length) this.active = 0;
+    }
+  }
+}
+</script>
+
+<style>
+
+.storybook-dialog {
+  background-color: #555;
+}
+
+.storybook-title {
+  color: #fff !important;
+  font-weight: 500;
+}
+
+.storybook-dialog .el-dialog__body {
+  padding: 0 0px;
+  
+}
+.swiper-pagination-custom {
+  bottom: 10px !important;
+  left: 300px !important;
+  width: calc(100% - 600px) !important;
+}
+
+.swiper-pagination-bullet-custom {
+  width: 20px !important;
+  height: 20px !important;
+  text-align: center;
+  line-height: 20px;
+  font-size: 12px;
+  color: #ffffff !important;
+  opacity: 1 !important;
+  background: rgba(0,0,0,0.3) !important;
+}
+.swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
+  color: #fff !important;
+  background: #007af5 !important;
+}
+
+.swipe-slide-width {
+  width: calc(100vw - 200px);
+}
+
+.slide-wrapper {
+  height: calc(100vh - 55px);
+  margin: 0 0px;
+}
+
+.slide {
+  background-color: #ffffff;
+  /* border: 1px solid #d7dae2; */
+  padding: 0 20px;
+  height: calc(100vh - 95px);
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+</style>
diff --git a/.vuepress/config.js b/.vuepress/config.js
@@ -14,7 +14,7 @@ module.exports = {
       s.parentNode.insertBefore(hm, s);
     })();
     `],
-    ['script', {type: 'text/javascript', src: 'https://tajs.qq.com/stats?sId=66467492', charset: 'UTF-8'}]
+    // ['script', {type: 'text/javascript', src: 'https://tajs.qq.com/stats?sId=66467492', charset: 'UTF-8'}]
   ],
   markdown: {
     toc: { includeLevel: [2, 3] },

diff --git a/.vuepress/enhanceApp.js b/.vuepress/enhanceApp.js
@@ -0,0 +1,12 @@
+import 'element-ui/lib/theme-chalk/index.css'
+
+import Element from 'element-ui'
+
+export default ({
+  Vue, // VuePress 正在使用的 Vue 构造函数
+  options, // 附加到根实例的一些选项
+  router, // 当前应用的路由实例
+  siteData // 站点元数据
+}) => {
+  Vue.use(Element)
+}
diff --git a/.vuepress/styles/index.styl b/.vuepress/styles/index.styl
@@ -3,4 +3,31 @@
 }
 p img {
   border: 1px solid #d7dae2;
-}
+}
+
+.noselect {
+  -moz-user-select: -moz-none;
+  -moz-user-select: none;
+  -o-user-select:none;
+  -khtml-user-select:none;
+  -webkit-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+}
+
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.42);
+  background-color: rgba(0, 0, 0, 0.25);
+} 
diff --git a/install/install-dashboard-upgrade.md b/install/install-dashboard-upgrade.md
@@ -9,8 +9,8 @@ description: 详细介绍如何将 Kuboard 升级到最新版本。
 稳定版： latest, v1.0.1
 发布日期： 2019-08-20
 
-测试版： v1.0.2-beta.2
-发布日期： 2019-08-24
+测试版： v1.0.2-beta.5
+发布日期： 2019-08-29
 
 [查看更新日志](/overview/change-log.html)