From 6e9646e28d36354402290a3c5d1d1e16245b7b99 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Fri, 8 Jul 2022 17:48:49 +0800
Subject: [PATCH] feat: Improve toc display

---
 docs/.vuepress/config.js                    |   3 +-
 docs/.vuepress/theme/components/Toc-top.vue |  45 ++++++
 docs/.vuepress/theme/components/Toc.vue     |  12 +-
 docs/.vuepress/theme/layouts/Layout.vue     |   5 +-
 docs/.vuepress/theme/styles/index.styl      | 146 +++++++++++---------
 docs/.vuepress/theme/styles/palette.styl    |   2 +-
 6 files changed, 136 insertions(+), 77 deletions(-)
 create mode 100644 docs/.vuepress/theme/components/Toc-top.vue

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index b86890e5b..820aeb3d0 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -24,7 +24,7 @@ const config = {
     logo: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/5a7f902b-21a7-4822-884f-925219eacc4b.png',
     // TODO use plugin/theme
     sidebar: createSidebar(tabs),
-    // sidebarDepth: 2,
+    sidebarDepth: 0,
     nextLinks: false,
     prevLinks: false,
     // TODO use theme
@@ -44,6 +44,7 @@ const config = {
     }
   },
   markdown: {
+    // toc: { includeLevel: [1, 2, 3, 4] },
     slugify(str) {
       if (typeof str !== 'string') return ''
 
diff --git a/docs/.vuepress/theme/components/Toc-top.vue b/docs/.vuepress/theme/components/Toc-top.vue
new file mode 100644
index 000000000..a5bd64116
--- /dev/null
+++ b/docs/.vuepress/theme/components/Toc-top.vue
@@ -0,0 +1,45 @@
+<template>
+	<div class="table-of-contents">
+		<div
+			v-for="item in $page.headers"
+			ref="chairTocItem"
+			:key="item.slug"
+			class="vuepress-toc-item-top"
+			:class="[`vuepress-toc-h${item.level}`]"
+		>
+			<a :href="`#${item.slug}`" :title="item.title">{{ item.title }}</a>
+		</div>
+	</div>
+</template>
+
+<style lang="stylus">
+  .table-of-contents
+    margin 0 auto
+    padding 2rem 2.5rem 0 2.5rem
+    @media (max-width: $MQNarrow)
+      padding 2rem 2rem 0 2rem
+    @media (max-width: $MQMobileNarrow)
+      padding 1.5rem 1.5rem 0 1.5rem
+    border-left: 2px solid #e6e6e6
+	.vuepress-toc-item-top
+	  position relative
+	  padding 0.1rem 0.6rem 0.1rem 1.5rem
+	  line-height 1.5rem
+	  border-left 2px solid rgba(0, 0, 0, 0.08)
+	  overflow hidden
+	  a
+	    display block
+	    // color $textColor
+	    width 100%
+	    box-sizing border-box
+	    font-size 16px
+	    font-weight 400
+	    text-decoration none
+	    transition color 0.3s
+	    overflow hidden
+	    text-overflow ellipsis
+	    white-space nowrap
+	for i in range(2, 6)
+	  .vuepress-toc-h{i} a
+	    padding-left 1rem * (i - 1)
+</style>
diff --git a/docs/.vuepress/theme/components/Toc.vue b/docs/.vuepress/theme/components/Toc.vue
index b2f14aefa..5db5de54b 100644
--- a/docs/.vuepress/theme/components/Toc.vue
+++ b/docs/.vuepress/theme/components/Toc.vue
@@ -1,14 +1,14 @@
 <template>
 	<Sticker
 		ref="sticker"
-		:class="['vuepress-toc', visible ? '' : 'table-of-contents']"
+		:class="['vuepress-toc', visible ? '' : 'table-of-contents-sticker']"
 		v-bind="$attrs"
 	>
-		<h5>ON THIS PAGE</h5>
+		<h5>文档结构</h5>
 		<div
 			v-for="(item, index) in $page.headers"
 			ref="chairTocItem"
-			:key="index"
+			:key="item.slug"
 			class="vuepress-toc-item"
 			:class="[`vuepress-toc-h${item.level}`, { active: activeIndex === index }]"
 		>
@@ -114,7 +114,7 @@
 </script>
 
 <style lang="stylus">
-	.table-of-contents
+	.table-of-contents-sticker
 	  display none !important
 	.vuepress-toc
 	  position fixed
@@ -157,7 +157,7 @@
 			.vuepress-toc-h1 a
 			.vuepress-toc-h2 a
 				font-weight bold
-	  for i in range(3, 6)
+	  for i in range(2, 6)
 	    .vuepress-toc-h{i} a
-	      padding-left 1rem * (i - 2)
+	      padding-left 1rem * (i - 1)
 </style>
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
index 0dac4137d..e225e1cf6 100644
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -38,6 +38,7 @@
     >
       <template #top>
         <slot name="page-top" />
+        <TocTop/>
       </template>
       <template #bottom>
         <slot name="page-bottom" />
@@ -57,6 +58,7 @@ import Sidebar from '@theme/components/Sidebar.vue'
 import Footer from '@theme/components/Footer.vue';
 import SiderBarBottom from '../components/SiderBarBottom.vue';
 import Toc from '../components/Toc';
+import TocTop from '../components/Toc-top';
 import { resolveSidebarItems, forbidScroll, BaiduStat } from '../util'
 import navProvider from '../mixin/navProvider';
 import toc from '../mixin/toc';
@@ -71,7 +73,8 @@ export default {
     Navbar,
     Footer,
     SiderBarBottom,
-    Toc
+    Toc,
+    TocTop
   },
   data () {
     return {
diff --git a/docs/.vuepress/theme/styles/index.styl b/docs/.vuepress/theme/styles/index.styl
index eac773720..ca74447c4 100644
--- a/docs/.vuepress/theme/styles/index.styl
+++ b/docs/.vuepress/theme/styles/index.styl
@@ -1,79 +1,74 @@
-.custom-page-class{
-	position: relative;
+.custom-page-class
+	position relative
+
 	/* 首页几个logo的排版 */
-	.flex-img-group-view {
-		display flex 
-		flex-direction row 
+	.flex-img-group-view
+		display flex
+		flex-direction row
 		margin 10px 0
-		.barcode-view {
+
+		.barcode-view
 			display flex
 			align-items center
 			flex-direction column
 			margin 0 5px
 			margin-bottom 20px
-			b {
+
+			b
 				text-align center
-			}
-		}
-	}
 
-	.uniapp-home-content {
+	.uniapp-home-content
 		display flex
 		flex-wrap wrap
 		width 100%
 		justify-content center
-		.uniapp-home-content-item {
+
+		.uniapp-home-content-item
 			margin-bottom 20px
-			.uniapp-home-content-item-image {
+
+			.uniapp-home-content-item-image
 				width 55px
 				height 55px
 				flex-shrink 0
-				img {
+
+				img
 					height 100%
-				}
-			}
-			p.uniapp-home-content-item-text {
-			  margin-bottom 0px 
-			  letter-spacing 0px 
-			  color #333 
-			}
-			.uniapp-home-content-item-title{
+
+			p.uniapp-home-content-item-text
+				margin-bottom 0px
+				letter-spacing 0px
+				color #333
+
+			.uniapp-home-content-item-title
 				font-size 16px
-			}
-		}
-	}
-	@media screen and (min-width: 768px) {
-		.flex-img-group-view {
+
+	@media screen and (min-width 768px)
+		.flex-img-group-view
 			justify-content space-around
-		}
-		.uniapp-home-content-item{
-			width 32% 
-		}
-	}
-	@media screen and (max-width: 600px) {
-		.uniapp-home-content-item{
-			width 100% 
+
+		.uniapp-home-content-item
+			width 32%
+
+	@media screen and (max-width 600px)
+		.uniapp-home-content-item
+			width 100%
 			display flex
 			flex-direction row
-		}
-		.uniapp-home-content-item-header {
-		  display flex 
-		  flex-direction column 
-		  padding-left 15px 
-		}
-		.uniapp-home-content-item-title{
+
+		.uniapp-home-content-item-header
+			display flex
+			flex-direction column
+			padding-left 15px
+
+		.uniapp-home-content-item-title
 			line-height 10px
-		}
-	}
-}
-
-img {
-  image-rendering: -moz-crisp-edges; /* Firefox*/
-	image-rendering: -o-crisp-edges; /* Opera */
-	image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
-	image-rendering: crisp-edges;
-	-ms-interpolation-mode: nearest-neighbor; /* I (non-standard property) */
-}
+
+img
+	image-rendering -moz-crisp-edges /* Firefox */
+	image-rendering -o-crisp-edges /* Opera */
+	image-rendering -webkit-optimize-contrast /* Webkit (non-standard naming) */
+	image-rendering crisp-edges
+	-ms-interpolation-mode nearest-neighbor /* I (non-standard property) */
 
 body.forbid_scroll
 	height 100%
@@ -82,23 +77,37 @@ body.forbid_scroll
 main.page
 	padding-bottom 0px
 	padding-right 0px
-	
-	@media (min-width: $vuepress-display-min-width)
-		&
-			padding-right $vuepress-toc-width
 
-@media (min-width: $vuepress-display-min-width)
+@media (min-width $vuepress-display-min-width)
+	main.page
+		padding-right $vuepress-toc-width
 	.vuepress-toc
 		display block !important
+	.table-of-contents
+		display none !important
+
+@media (max-width $vuepress-display-min-width)
+	.table-of-contents
+		display block !important
+
+@media (min-width 2000px)
+	$vuepress-toc-width = 20rem
+	.vuepress-toc
+		width: $vuepress-toc-width !important
+	main.page
+		padding-right $vuepress-toc-width
 
-{$contentClass}:not(.custom) 
+{$contentClass}:not(.custom)
 	> *:first-child
 		margin-top 0
-		@media (max-width: $MQMobile)
+
+		@media (max-width $MQMobile)
 			&
 				margin-top $navbarHeight
+
 	img
 		max-width 100% !important
+
 	table
 		position relative
 
@@ -106,18 +115,19 @@ main.page
 		word-break break-all
 
 h1, h2, h3, h4, h5, h6
-
 	{$contentClass}:not(.custom) > &
-		margin-top (5rem - $navbarHeight)
-		padding-top ($navbarHeight - 3rem)
+		margin-top 5rem - $navbarHeight
+		padding-top: ($navbarHeight - 3rem)
 
 		&:first-child
-			margin-top (3rem - $navbarHeight)
-			padding-top ($navbarHeight - 3rem)
-			@media (max-width: $MQMobile)
-				&	
+			margin-top 3rem - $navbarHeight
+			padding-top: ($navbarHeight - 3rem)
+
+			@media (max-width $MQMobile)
+				&
 					margin-top 3rem
-@media (min-width: $MQMobile)
+
+@media (min-width $MQMobile)
 	.nav-dropdown
 		z-index 1
 
diff --git a/docs/.vuepress/theme/styles/palette.styl b/docs/.vuepress/theme/styles/palette.styl
index f8427845a..9ffd7723d 100644
--- a/docs/.vuepress/theme/styles/palette.styl
+++ b/docs/.vuepress/theme/styles/palette.styl
@@ -5,5 +5,5 @@ $navbarHeight = 9rem
 $navbar-sub-navbar-height = 5rem
 $navbar-background-color = #f7f7f7
 $search-container-color = #f5f6f7
-$vuepress-toc-width = 220px
+$vuepress-toc-width = 14rem
 $vuepress-display-min-width = 1500px
\ No newline at end of file
-- 
GitLab