vuepress-theme-uniapp-official 1.4.11

package/README.md

@@ -0,0 +1,22 @@
+### uni-app official website theme for vuepress
+
+# vuepress-theme-uni-app-test
+
+[![NPM version](https://badgen.net/npm/v/vuepress-theme-uni-app-test)](https://www.npmjs.com/package/vuepress-theme-uni-app-test) [![NPM downloads](https://badgen.net/npm/dm/vuepress-theme-uni-app-test)](https://npmjs.com/package/vuepress-theme-uni-app-test)
+
+## Sites
+
+- clone this repo and run `yarn && yarn docs:dev`
+
+
+## Install
+
+```bash
+yarn add vuepress-theme-uni-app-test -D
+# OR npm install vuepress-theme-uni-app-test -D
+```
+
+
+## Usage
+
+[https://gitcode.net/dcloud/unidocs-uni-app-x-zh](https://gitcode.net/dcloud/unidocs-uni-app-x-zh)

package/components/AlgoliaSearchBox.vue

@@ -0,0 +1,130 @@
+<template>
+	<div id="docsearch">
+		<button
+			type="button"
+			class="DocSearch DocSearch-Button"
+			:aria-label="searchText"
+			@click="openSearch"
+		>
+			<span class="DocSearch-Button-Container">
+				<svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20">
+					<path
+						d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+						stroke="currentColor"
+						fill="none"
+						fill-rule="evenodd"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					></path>
+				</svg>
+				<span class="DocSearch-Button-Placeholder">{{ searchText }}</span>
+			</span>
+			<span class="DocSearch-Button-Keys">
+				<span class="DocSearch-Button-Key">
+					<svg width="15" height="15" class="DocSearch-Control-Key-Icon">
+						<path
+							d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953"
+							stroke-width="1.2"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="square"
+						></path>
+					</svg>
+				</span>
+				<span class="DocSearch-Button-Key">K</span>
+			</span>
+		</button>
+	</div>
+</template>
+
+<script>
+	import '@docsearch/css';
+	import { LOCALE_ZH_HANS } from '@theme-config/i18n';
+
+	export default {
+		name: 'AlgoliaSearchBox',
+
+		computed: {
+			searchText() {
+				return this.$lang === LOCALE_ZH_HANS ? '搜索文档' : 'Search';
+			},
+		},
+
+		methods: {
+			openSearch() {
+				this.$parent.$refs.dcloudSearchPage.onSearchOpen();
+			},
+		},
+	};
+</script>
+
+<style lang="stylus">
+	.DocSearch
+	   --docsearch-primary-color $accentColor
+	   --docsearch-highlight-color var(--docsearch-primary-color)
+	   --docsearch-searchbox-shadow inset 0 0 0 2px var(--docsearch-primary-color)
+
+	 #docsearch
+	   display flex
+	   flex-direction column
+	   justify-content center
+	 #docsearch span
+	   @media (min-width: 1200px)
+	    &
+	     display flex
+
+	 @media (max-width: 1200px)
+	   :root
+	     --docsearch-spacing 10px
+	     --docsearch-footer-height 40px
+	   .DocSearch-Button-Keys,.DocSearch-Button-Key,.DocSearch-Button-KeySeparator,.DocSearch-Button-Placeholder
+	     display none !important
+	   .DocSearch-Search-Icon
+	     vertical-align middle
+	   .DocSearch-Dropdown
+	     height 100%
+	   .DocSearch-Container
+	     height 100vh
+	     height -webkit-fill-available
+	     position absolute
+	   .DocSearch-Footer
+	     border-radius 0
+	     bottom 0
+	     position absolute
+	   .DocSearch-Hit-content-wrapper
+	     display flex
+	     position relative
+	     width 80%
+	   .DocSearch-Modal
+	     border-radius 0
+	     box-shadow none
+	     height 100vh
+	     height -webkit-fill-available
+	     margin 0
+	     max-width 100%
+	     width 100%
+	   .DocSearch-Cancel
+	     -webkit-appearance none
+	     -moz-appearance none
+	     appearance none
+	     background none
+	     border 0
+	     color var(--docsearch-highlight-color)
+	     cursor pointer
+	     display inline-block
+	     flex none
+	     font inherit
+	     font-size 1em
+	     font-weight 500
+	     margin-left var(--docsearch-spacing)
+	     outline none
+	     overflow hidden
+	     padding 0
+	     -webkit-user-select none
+	     -moz-user-select none
+	     -ms-user-select none
+	     user-select none
+	     white-space nowrap
+	   .DocSearch-Commands,.DocSearch-Hit-Tree
+	     display none
+</style>

package/components/DcloudSearchPage/components/Result.vue

@@ -0,0 +1,160 @@
+<template>
+	<li :class="li_class">
+		<a :href="handleUrl(item.url)">
+			<div class="DocSearch-Hit-Container">
+				<div
+					class="DocSearch-Hit-content-wrapper"
+					v-if="item.hierarchy[item.type] && item.type === 'lvl1'"
+				>
+					<span class="DocSearch-Hit-title" v-html="hierarchyLvl1Html" />
+					<span v-if="item.content" class="DocSearch-Hit-path" v-html="contentHtml" />
+				</div>
+
+				<div v-else-if="isContent" class="DocSearch-Hit-content-wrapper">
+					<span class="DocSearch-Hit-title" v-html="contentHtml" />
+					<span class="DocSearch-Hit-path" v-html="hierarchyLvl1Html || hierarchyLvl2Html" />
+				</div>
+
+				<div v-else class="DocSearch-Hit-content-wrapper">
+					<span
+						class="DocSearch-Hit-title"
+						v-html="snippetResultContent(`hierarchy.${item.type}`)"
+					/>
+					<span class="DocSearch-Hit-path" v-html="hierarchyLvl1Html" />
+				</div>
+
+				<span v-if="item.tag && item.tag !== 'uniCloud'" class="DocSearch-Hit-source_tag">
+					{{ item.tag }}
+				</span>
+			</div>
+		</a>
+	</li>
+</template>
+<script>
+	function getPropertyByPath(object, path) {
+		const parts = path.split('.');
+
+		return parts.reduce((prev, current) => {
+			if (prev && prev[current]) return prev[current];
+			return null;
+		}, object);
+	}
+
+	export default {
+		data() {
+			return {};
+		},
+		props: {
+			item: {
+				type: Object,
+				default: () => ({}),
+			},
+			index: {
+				type: Number,
+				default: 0,
+			},
+		},
+		computed: {
+			li_class() {
+				return ['DocSearch-Hit', this.item.__docsearch_parent && 'DocSearch-Hit--Child']
+					.filter(Boolean)
+					.join(' ');
+			},
+			isContent() {
+				return this.item.type === 'content';
+			},
+			contentHtml() {
+				return this.snippetResultContent('content');
+			},
+			hierarchyLvl1Html() {
+				return this.snippetResultContent('hierarchy.lvl1');
+			},
+			hierarchyLvl2Html() {
+				const lvl2 = this.snippetResultContent('hierarchy.lvl2');
+				return this.isContent ? this.contentHtml === lvl2 ? '' : lvl2 : '';
+			},
+		},
+		methods: {
+			snippetResultContent(attribute) {
+				return (
+					getPropertyByPath(this.item, `_snippetResult.${attribute}.value`) ||
+					getPropertyByPath(this.item, attribute)
+				);
+			},
+			handleUrl(url) {
+				const len = url.length
+				const lastIndex = url.lastIndexOf('/')
+				if (lastIndex === len - 1) {
+					return url
+				}
+				const front = url.substring(0, lastIndex + 1)
+				const end = url.substring(lastIndex + 1)
+				if (end.indexOf('.html') > -1) {
+					return url
+				}
+				if (end.indexOf('#') > -1) {
+					return front + end.replace(/([\s\S]+)#([\s\S]+)/, '$1.html#$2')
+				}
+				return `${url}.html`
+			}
+		},
+	};
+</script>
+<style lang="stylus">
+  .DocSearch-Hit-source_tag {
+    background-color: #f0f0f0;
+    font-size: 12px;
+    padding: 2px 4px;
+    color: #999;
+    border-radius: 3px;
+    margin-right: 5px;
+    font-weight: normal;
+  }
+	.DocSearch-Hit
+	  border-radius 0px
+	  display flex
+	  padding-bottom 0px
+	  position relative
+
+	  &:not(:first-child)
+	    border-top 1px solid #f5f6f7
+
+	  a
+	    background var(--docsearch-hit-background)
+	    border-radius 0px
+	    // box-shadow var(--docsearch-hit-shadow)
+	    box-shadow none
+	    display block
+	    padding-left var(--docsearch-spacing)
+	    width 100%
+
+	  .DocSearch-Hit-Container
+	    align-items center
+	    color #444950
+	    display flex
+	    flex-direction row
+	    height 56px
+	    padding 0 12px 0 0
+
+	  .DocSearch-Hit-content-wrapper
+	    overflow hidden
+	    display flex
+	    flex 1 1 auto
+	    flex-direction column
+	    font-weight 500
+	    justify-content center
+	    line-height 1.2em
+	    margin 0 8px
+	    overflow-x hidden
+	    position relative
+	    text-overflow ellipsis
+	    white-space nowrap
+	    width 80%
+
+	    .DocSearch-Hit-title
+	      font-size 0.9em
+
+	    .DocSearch-Hit-path
+	      // color $accentColor
+	      font-size 0.75em
+</style>

package/components/DcloudSearchPage/components/Results.vue

@@ -0,0 +1,66 @@
+<template>
+	<section class="DocSearch-Hits">
+		<div class="DocSearch-Hit-source">
+			{{ title }}
+		</div>
+
+		<ul id="docsearch-list">
+			<template v-for="(item, index) in results">
+				<Result
+					:key="[title, item.objectID].join(':')"
+					:item="item"
+					:index="index"
+					@click.native="event => onSelect({ item, event })"
+				/>
+			</template>
+		</ul>
+	</section>
+</template>
+<script>
+	import Result from './Result.vue';
+	export default {
+		components: { Result },
+		data() {
+			return {};
+		},
+		props: {
+			title: {
+				type: String,
+				default: '文档',
+			},
+			results: {
+				type: Array,
+				default: [],
+			},
+			onSelect: {
+				type: Function,
+				default: () => {},
+			},
+		},
+		computed: {
+			tag() {
+				return this.results[0].tag !== 'uniCloud' ? this.results[0].tag : '';
+			},
+		},
+	};
+</script>
+<style lang="stylus">
+	#docsearch-list{
+		border-radius: 5px;
+		padding: 0;
+		border: 1px solid #dfe2e5;
+		overflow: hidden;
+	}
+
+	.DocSearch-Hits mark {
+	  background: none;
+	  color: $accentColor;
+	}
+
+	.DocSearch-Hit-source {
+	  background-color $search-container-color;
+	  color: $accentColor;
+		font-size 1em;
+		padding 15px 4px 15px
+	}
+</style>

package/components/DcloudSearchPage/components/pagination.vue

@@ -0,0 +1,155 @@
+<template>
+	<!-- 分页结构 -->
+	<div class="page-bar">
+		<ul>
+			<li v-if="cur > 1"><a class="clearfix" v-on:click="cur--, pageClick()">上一页</a></li>
+			<li v-if="cur == 1"><a class="banclick clearfix">上一页</a></li>
+			<template v-for="index in indexs">
+				<li :key="index" :class="{ active: cur == index }">
+					<a class="clearfix" v-on:click="btnClick(index)">{{ index }}</a>
+				</li>
+			</template>
+			<li v-if="cur != all"><a class="clearfix" v-on:click="cur++, pageClick()">下一页</a></li>
+			<li v-if="cur == all"><a class="banclick clearfix">下一页</a></li>
+			<li>
+				<span>
+					共
+					<i>{{ all }}</i>
+					页
+				</span>
+			</li>
+		</ul>
+	</div>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				all: 10, //总页数
+				cur: 1, //当前页码
+				// totalPage: 0, //当前条数
+			};
+		},
+		props: {
+			curPage: {
+				type: Number,
+				default: 1,
+			},
+			totalPage: {
+				type: Number,
+				default: 0,
+			},
+		},
+		created() {
+			this.all = this.totalPage;
+			this.cur = this.curPage;
+		},
+		watch: {
+			curPage: {
+				immediate: true,
+				handler(val) {
+					this.cur = val;
+				},
+			},
+			totalPage: {
+				immediate: true,
+				handler(val) {
+					this.all = val;
+				},
+			},
+		},
+		methods: {
+			//请求数据
+			dataListFn: function (index) {
+				this.$emit('research', index);
+			},
+			//分页
+			btnClick: function (data) {
+				if (data != this.cur) {
+					this.cur = data;
+					this.dataListFn(this.cur);
+				}
+			},
+			pageClick: function () {
+				this.dataListFn(this.cur);
+			},
+		},
+		computed: {
+			//分页
+			indexs: function () {
+				var left = 1;
+				var right = this.all;
+				var ar = [];
+				if (this.all >= 5) {
+					if (this.cur > 3 && this.cur < this.all - 2) {
+						left = this.cur - 2;
+						right = this.cur + 2;
+					} else {
+						if (this.cur <= 3) {
+							left = 1;
+							right = 5;
+						} else {
+							right = this.all;
+							left = this.all - 4;
+						}
+					}
+				}
+				while (left <= right) {
+					ar.push(left);
+					left++;
+				}
+				return ar;
+			},
+		},
+	};
+</script>
+<style lang="stylus" scoped>
+	.page-bar
+	  display flex
+	  justify-content center
+	  margin 10px
+
+	ul, li
+	  margin 0px
+	  padding 0px
+	  user-select none
+
+	li
+	  display inline-block
+	  list-style none
+	  overflow hidden
+
+	.page-bar li:first-child > a
+	  margin-left 0px
+
+	.page-bar a
+	  border 1px solid #ddd
+	  text-decoration none
+	  position relative
+	  float left
+	  padding 2px 10px
+	  margin-left -1px
+	  line-height 1.42857143
+	  color #5d6062
+	  cursor pointer
+	  margin-right 20px
+	  background-color #fff
+
+	.page-bar a:hover
+	  background-color #eee
+
+	.page-bar a.banclick
+	  cursor not-allowed
+
+	.page-bar .active a
+	  color #fff
+	  cursor default
+	  background-color $accentColor
+	  border-color $accentColor
+
+	.page-bar i
+	  font-style normal
+	  color $accentColor
+	  margin 0px 4px
+	  font-size 12px
+</style>

package/components/DcloudSearchPage/index.styl

@@ -0,0 +1,183 @@
+$svg-color = #b1b2b3
+$svg-hover-color = #9b9b9b
+
+@import './styles/ext.styl'
+@import './styles/ask.styl'
+
+#search-container
+  position relative
+  overflow auto
+  position fixed
+  width 100%
+  height 100%
+  left 0
+  top 0
+  z-index 200
+  background-color $search-container-color
+
+  .sub-navbar, .result-wrap
+    margin 0 auto
+
+    .search-wrap
+      width 100%
+      vertical-align middle
+      position relative
+      display flex
+      flex-direction column
+      align-items center
+
+    .input-wrap
+      width 80%
+      max-width 960px
+      margin-top 24px
+      position relative
+      display flex
+      align-items center
+      box-sizing border-box
+
+      .search-input-btn
+        display flex
+        flex-direction column
+        justify-content center
+        padding 0
+        font-size 0
+        background-color #fff
+
+        button
+          width 40px
+          font-family inherit
+          font-size 100%
+          margin 0
+          outline 0
+          background-color transparent
+          padding 0
+          border-width 0
+          vertical-align middle
+          cursor pointer
+
+          svg
+            fill $svg-color
+
+            &:hover
+              fill $svg-hover-color
+
+      .search-input
+        width 100%
+        height 56px
+        font-size 16px
+        border none
+        box-sizing border-box
+        outline none
+        padding 1px 18px
+        border-radius 4px
+
+      .search-input-btn
+        height 56px
+
+      .search-back__btn
+        display block !important
+        font-size 17px
+        color #576b95
+        line-height 24px
+        padding 10px 16px
+        white-space nowrap
+        /* position absolute
+        right -65px */
+
+    .search-category
+      width 100%
+
+      .navbar
+        border none
+
+      .main-navbar
+        box-shadow none
+
+      .main-navbar-links
+        width 90%
+        padding 0
+        display flex
+        justify-content center
+        flex-wrap wrap
+
+        @media (max-width 630px)
+          &
+            white-space normal !important
+
+        .main-navbar-item
+          padding 0 2%
+
+          @media (max-width 900px)
+            &
+              padding 0 1%
+
+  .result-number
+    display flex
+    justify-content center
+    align-items center
+    padding-top 20px
+    font-size 20px
+
+    .uni-loading
+      width 27px
+      height 27px
+
+    .DocSearch-Logo
+      font-size 16px
+      vertical-align middle
+      display inline-block
+
+  .search-result
+    width 80%
+    max-width 960px
+    margin 0 auto
+    box-sizing border-box
+
+    .result-wrap
+      ul
+        list-style none
+        margin 0
+        padding 0
+
+  .algolia-logo
+    display flex
+    justify-content center
+    padding 10px 0 20px
+
+  .search-more
+    display block
+    text-align center
+    padding 10px 0
+    color inherit
+    cursor pointer
+
+    &:hover
+      color $accentColor
+
+@media (max-width $MQMobile)
+  #search-container
+    .search-navbar-header>.main-navbar
+      display none !important
+
+    .main-navbar
+      justify-content center
+
+    .search-navbar>.navbar, .search-category>.navbar
+      line-height 3rem
+      height auto
+      position static !important
+
+    .input-wrap
+      width 100% !important
+      padding-left 5px
+      margin-top 5px !important
+
+      .search-input, .search-input-btn
+        height 32px !important
+
+    .search-result
+      width 100% !important
+      padding 0 10px
+
+    .search-result-aside
+      display none