StoryBook - 安装 Kuboard

.vuepress/components/StoryBook.vue

@@ -20,13 +20,15 @@
                 :disabled="activeIndex !== index"
                 :style="activeIndex === index ? '' : 'cursor: pointer; opacity: 0.5;'">
               <div class="slide"
-                @click.capture="clickNeighbour(index)"
+                @click.capture="clickNeighbour(index)">
-                :id="`dialog_${step.name}`">
+                <!-- <div>{{step.title}}</div> -->
-                <!-- <div :id="step.name">
+                <div :id="`dialog_${step.name}`">
-                  <slot :name="step.name">
+                  <!-- <div :id="step.name">
-                    {{step.title}}
+                    <slot :name="step.name">
-                  </slot>
+                      {{step.title}}
-                </div> -->
+                    </slot>
+                  </div> -->
+                </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>
@@ -38,7 +40,7 @@
         <div class="swiper-button-next" slot="button-next"></div> -->
       </div>
     </el-dialog>
-    <el-button @click="dialogVisible = true" type="text" style="position: fixed; right: 20px; top: 60px;">分步阅读</el-button>
+    <el-button @click="dialogVisible = true" type="text" style="position: fixed; right: 20px; top: 60px; z-index: 10;">分步阅读</el-button>
     <template v-for="(step, index) in slides">
       <div :key="step.name">
         <div :id="`full_${step.name}`">
@@ -65,15 +67,6 @@ export default {
       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) {
@@ -108,6 +101,7 @@ export default {
               slidesPerView: 'auto',
               centeredSlides: true,
               spaceBetween: 20,
+              effect: 'coverflow',
               on:{
                 slideChange: function(a){
                   console.log('slideChange')
@@ -116,7 +110,7 @@ export default {
                   })
                 },
               },
-              // observer:true,
+              observer:true,
               // navigation: {
               //   nextEl: '.swiper-button-next',
               //   prevEl: '.swiper-button-prev',
@@ -127,6 +121,9 @@ export default {
             // console.log(`dialog_${item.name}`, document.getElementById(`dialog_${item.name}`))
             document.getElementById(`dialog_${item.name}`).appendChild(document.getElementById(item.name))
           }
+          for (let item of this.slides) {
+            document.getElementById(`dialog_${item.name}`).scrollTop = 0
+          }
         }, 100)
       } else {
         setTimeout(_ => {
@@ -159,9 +156,11 @@ export default {
           } else {
             this.mySwiper.slideNext()
           }
+        } else {
+          this.mySwiper.slideNext()
         }
       } else if (index === this.activeIndex) {
-
+        // do nonething
       } else if (index < this.activeIndex) {
         event.stopPropagation()
         event.preventDefault()

install/install-dashboard.md

@@ -1,9 +1,27 @@
 ---
 description: Kuboard 的安装手册，包括安装 Kuboard 的前提条件、与 Kubernetes 的版本兼容性、安装步骤、以及完成安装后如何访问 Kuboard 界面。
+storyBook:
+  title: '安装 Kuboard'
+  initial: StoryBook
+  pages:
+    - name: overview
+      title: 前提条件
+    - name: install
+      title: 安装/卸载
+    - name: token
+      title: 获取 Token
+    - name: access
+      title: 访问 Kuboard
+    - name: next
+      title: 下一步
 ---
 
 # 安装 Kuboard
 
+<StoryBook>
+
+<div slot="overview">
+
 ## 前提
 
 安装 Kuboard 时，假设您已经有一个 Kubernetes 集群
@@ -24,13 +42,15 @@ description: Kuboard 的安装手册，包括安装 Kuboard 的前提条件、
 | v1.12           | v1.0.x | <span style="font-size: 24px;">😐</span>      | Kubernetes Api v1.12 尚不支持 dryRun，<br />忽略Kuboard在执行命令时的参数校验错误，可正常工作 |
 | v1.11           | v1.0.x | <span style="font-size: 24px;">😐</span>      | 同上                                                         |
 
+</div>
 
+<div slot="install">
 
 ## 安装
 
 :::: tabs 安装 type:border-card
 
-::: tab 安装 lazy
+::: tab 安装
 
 安装 Kuboard。
 
@@ -42,7 +62,7 @@ kubectl apply -f https://kuboard.cn/install-script/kuboard.yaml
 
 :::
 
-::: tab 卸载 lazy
+::: tab 卸载
 
 卸载 Kuboard
 
@@ -53,13 +73,17 @@ kubectl delete -f https://kuboard.cn/install-script/kuboard.yaml
 
 ::::
 
+</div>
+
+<div slot="token">
+
 ## 获取 Token
 
 您可以获得管理员用户、只读用户的Token
 
 :::: tabs type:border-card
 
-::: tab 管理员用户 lazy
+::: tab 管理员用户
 
 **拥有的权限**
 
@@ -93,7 +117,7 @@ token: eyJhbGciOiJSUzI1NiIsImtpZCI6IiJ9.eyJpc3MiOiJrdWJlcm5ldGVzL3NlcnZpY2VhY2Nv
 :::
 
 
-::: tab 只读用户 lazy
+::: tab 只读用户
 
 **拥有的权限**
 
@@ -116,7 +140,7 @@ kubectl -n kube-system describe secret $(kubectl -n kube-system get secret | gre
 **输出**
 
 取输出信息中 token 字段
-```{13}
+``` {13}
 Name: admin-user-token-g8hxb
 Namespace: kube-system
 Labels: <none>
@@ -133,8 +157,12 @@ token: eyJhbGciOiJSUzI1NiIsImtpZCI6IiJ9.eyJpc3MiOiJrdWJlcm5ldGVzL3NlcnZpY2VhY2Nv
 ```
 
 :::
+
 ::::
 
+</div>
+
+<div slot="access">
 
 ## 访问 Kuboard
 
@@ -179,6 +207,10 @@ kubectl port-forward service/kuboard 8080:80 -n kube-system
 
 ::::
 
+</div>
+
+<div slot="next">
+
 ::: warning
 * 如果不能访问 Kuboard，请参考 [常见问题](faq/timeout.html)
 
@@ -192,3 +224,7 @@ kubectl port-forward service/kuboard 8080:80 -n kube-system
 - 使用 Kuboard 工作负载编辑器 [创建 busybox](/guide/example/busybox.html) （10分钟）
 
 - 尝试 Kuboard 设计的其他 example [使用 Kuboard](/guide/index.html)
+
+</div>
+
+</StoryBook>