vuepress-theme-uniapp-official 1.4.23 → 1.4.25

package/components/Toc-top.vue

@@ -1,20 +1,13 @@
 <template>
   <div class="table-of-contents">
-    <div
-      v-for="item in showHeaders"
-      ref="chairTocItem"
-      class="vuepress-toc-item-top"
-      :class="[`vuepress-toc-h${item.level}`]"
-    >
-      <RouterLink
-        :style="{ paddingLeft: createPaddingLeft(item.level) }"
-        :to="`#${item.slug}`"
-        :title="item.title.replace(/\\/g, '')"
-      >
-        {{ item.title.replace(/\\/g, '') }}
+    <div v-for="item in showHeaders" ref="chairTocItem" class="vuepress-toc-item-top"
+      :class="[`vuepress-toc-h${item.level}`]">
+      <RouterLink :style="{ paddingLeft: createPaddingLeft(item.level) }" :to="`#${item.slug}`"
+        :title="item.title">
+        <span v-html="item.title"></span>
       </RouterLink>
     </div>
-    <span v-if="pageHeaders && pageHeaders.length > expandHeaderLength" class="expand-button" @click="expandClick">
+    <span v-if="formatTitlePageHeaders && formatTitlePageHeaders.length > expandHeaderLength" class="expand-button" @click="expandClick">
       {{ !expand ? collapseText : expandText }}
       <uni-icon :type="!expand ? 'bottom' : 'top'"></uni-icon>
     </span>
@@ -37,7 +30,7 @@ export default {
   }),
   computed: {
     showHeaders() {
-      return this.expand ? this.pageHeaders : this.pageHeaders.slice(0, this.expandHeaderLength)
+      return this.expand ? this.formatTitlePageHeaders : this.formatTitlePageHeaders.slice(0, this.expandHeaderLength)
     },
   },
   methods: {

package/components/Toc.vue

@@ -1,19 +1,11 @@
 <template>
   <Sticker ref="sticker" :class="['vuepress-toc', visible ? '' : 'table-of-contents-sticker']" v-bind="$attrs">
     <h5>{{ onThisPage }}</h5>
-    <!-- :key="item.slug" -->
-    <div
-      v-for="(item, index) in pageHeaders"
-      ref="chairTocItem"
-      class="vuepress-toc-item"
-      :class="[`vuepress-toc-h${item.level}`, { active: activeIndex === index }]"
-    >
-      <RouterLink
-        :style="{ paddingLeft: createPaddingLeft(item.level) }"
-        :to="`#${item.slug}`"
-        :title="item.title.replace(/\\/g, '')"
-      >
-        {{ item.title.replace(/\\/g, '') }}
+    <div v-for="(item, index) in formatTitlePageHeaders" ref="chairTocItem" class="vuepress-toc-item"
+      :class="[`vuepress-toc-h${item.level}`, { active: activeIndex === index }]">
+      <RouterLink :style="{ paddingLeft: createPaddingLeft(item.level) }" :to="`#${item.slug}`"
+        :title="item.title">
+        <span v-html="item.title"></span>
       </RouterLink>
     </div>
   </Sticker>
@@ -58,8 +50,7 @@ export default {
       } else if (top + rect.height > wrapperRect.height) {
         this.$el.scrollTop += rect.top - (wrapperRect.height - rect.height)
       }
-    },
-    $route() {},
+    }
   },
   mounted() {
     // sync visible to parent component

package/global-components/CodeSimulator.vue

@@ -34,66 +34,71 @@ export default {
 		},
 		createdDom(h,node){
 			let headerDom = []
-			node.forEach((v,index)=>{
-				headerDom.push(h('p',{class:`pages-tabs-header-text ${this.activeIndex === index?'pages-tabs--active':''}`,on:{click:(e)=>{
-						this.onClick(index)
-				}}},v.title),)
+			node.forEach((v, index) => {
+				headerDom.push(h('p', {
+					class: `pages-tabs-header-text ${this.activeIndex === index ? 'pages-tabs--active' : ''}`, on: {
+						click: (e) => {
+							this.onClick(index)
+						}
+					}
+				}, v.title),)
 			})
-			return this.renderDom(h,h('div',{class:'page-tabs'},[
-				h('div',{class:'pages-tabs-header'},headerDom),
-				h('div',{class:'page-snippet-code',key:this.activeIndex},[node[this.activeIndex].node]),
+			return this.renderDom(h, h('div', { class: 'page-tabs' }, [
+				h('div', { class: 'pages-tabs-header' }, headerDom),
+				h('div', { class: 'page-snippet-code', key: this.activeIndex }, [node[this.activeIndex].node]),
 			]))
 		},
 		renderDom(h,node){
-			return h('div',{class:'page-runtime'},
-				[
-					h('div',{class:'page-snippet'},[node]),
-					h('div',{class:'code-content',style:{display:this.src?'block':'none'}},[
-						h('iframe',{class:'code-iframe',attrs:{
-							src:this.src,
-							frameborder:'0',
-							allow:'geolocation https://hellouniappx.dcloud.net.cn'
-						},ref:'codeIframe'})
-					]),
-
-				]
-			)
+      return h('div', { class: 'page-runtime' }, [
+        h('div', { class: 'page-snippet' , style: { height: this.src ? '667px' : 'auto' }}, [node]),
+        h('div', { class: 'code-content', style: { display: this.src ? 'block' : 'none' } }, [
+          h('iframe', {
+            class: 'code-iframe',
+            attrs: {
+              src: this.src,
+              frameborder: '0',
+              allow: 'geolocation https://hellouniappx.dcloud.net.cn',
+            },
+            ref: 'codeIframe',
+          }),
+        ]),
+      ])
 		}
 	},
 	render(h){
 		const columns = this.$slots.default || []
 		let boxObj = []
 		let realDom = []
-		columns.forEach((v,i)=>{
-			if(v.tag && v.children){
+		columns.forEach((v, i) => {
+			if (v.tag && v.children) {
 				realDom.push(v)
 			}
 		})
-		realDom.forEach((vnode,index)=>{
+		realDom.forEach((vnode, index) => {
 			let code = vnode.children[0]
-			if(vnode.tag === 'div' && code.tag === 'pre'){
+			if (vnode.tag === 'div' && code.tag === 'pre') {
 				let i = index - 1
-				if(i >= 0){
+				if (i >= 0) {
 					let textDom = realDom[i]
-					if(textDom.tag === 'blockquote'){
+					if (textDom.tag === 'blockquote') {
 						let text = textDom.children[0]
 						let p = text.children[0]
 						boxObj.push({
-							title:p.text,
-							node:vnode
+							title: p.text ? p.text : 'title',
+							node: vnode
 						})
 					}
 
 				}
 			}
 		})
-		if(boxObj.length > 0){
-			return h('div',null,[this.createdDom(h,boxObj)])
-		}else{
-			if(this.src){
-				return this.renderDom(h,this.$slots.default)
-			}else{
-				return h('div',null,this.$slots.default)
+		if (boxObj.length > 0) {
+			return h('div', null, [this.createdDom(h, boxObj)])
+		} else {
+			if (this.src) {
+				return this.renderDom(h, this.$slots.default)
+			} else {
+				return h('div', null, this.$slots.default)
 			}
 		}
 	}
@@ -123,17 +128,12 @@ export default {
 	display: flex;
 	height: 44px;
 	background-color: #222;
+	align-items: center;
 }
 .pages-tabs-header-text {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	margin: 5px;
-	margin-bottom: 0px;
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-	padding: 0 45px;
-	text-align: center;
+	margin: 0 0 0 8px;
+	padding: 4px 8px;
+	border-radius: 5px;
 	font-size: 16px;
 	color: #eee;
 	background:transparent;
@@ -144,11 +144,14 @@ export default {
 	-khtml-user-select:none; /*早期浏览器*/
 	user-select:none;
 }
+.pages-tabs-header-text:hover {
+	background: #454545;
+}
 .pages-tabs--active {
 	// background:#282c34;
-	background-color: #292d3e;
+	background-color: #3b3b3b;
 	color: #fff;
-	font-weight: bold;
+	// font-weight: bold;
 }
 
 .page-snippet div[class*="language-"]{

package/mixin/toc.js

@@ -13,8 +13,24 @@ export default {
         !!(this.$page && this.$page.headers && this.$page.headers.length)
       );
     },
+    formatTitlePageHeaders() {
+      return (this.pageHeaders || []).map(item => {
+        return {
+          ...item,
+          title: this.simpleMd2html(item.title)
+        }
+      })
+    }
   },
   methods: {
+    simpleMd2html(md) {
+      md = md
+        .replace(/\\/g, '')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/([\s\S]*)~~([\S\s]+)~~([\s\S]*)/g, '$1<del>$2</del>$3')
+      return md
+    },
     createPaddingLeft(level) {
       return level - this.paddingLeftOffset + 'rem';
     },
@@ -33,4 +49,4 @@ export default {
       }
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-uniapp-official",
-  "version": "1.4.23",
+  "version": "1.4.25",
   "description": "uni-app official website theme for vuepress",
   "main": "index.js",
   "repository": {