From 3de4c8245982668fcfc569658134711401557ea0 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Fri, 11 Feb 2022 19:54:18 +0800
Subject: [PATCH] feat: search

---
 docs/.vuepress/config.js                      |   4 +-
 docs/.vuepress/theme/components/Navbar.vue    |   7 +-
 .../theme/components/SearchBox/index.vue      | 330 ++++++++++++++++++
 .../theme/components/SearchBox/match-query.js |  51 +++
 .../theme/components/SearchBox/search.svg     |   1 +
 docs/.vuepress/theme/mixin/navProvider.js     |   2 +-
 docs/.vuepress/theme/styles/navbar.styl       |   6 +
 docs/worktile/CLI.md                          |   2 +-
 8 files changed, 398 insertions(+), 5 deletions(-)
 create mode 100644 docs/.vuepress/theme/components/SearchBox/index.vue
 create mode 100644 docs/.vuepress/theme/components/SearchBox/match-query.js
 create mode 100644 docs/.vuepress/theme/components/SearchBox/search.svg

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 49571b907..3fb637535 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -31,11 +31,11 @@ const config = {
     editLinks: true,
     editLinkText: '帮助我们改善此页面！',
     // smoothScroll: true,
-    algolia: {
+    /* algolia: {
       apiKey: 'ca67b01d14df58783e2f7dc45c79736e',
       indexName: 'en-uniapp-dcloud',
       appId: 'TZ0EGQ9J1Y'
-    }
+    } */
   },
   markdown: {
     slugify(str) {
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
index cbf06ea0f..bb9ea5370 100644
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ b/docs/.vuepress/theme/components/Navbar.vue
@@ -56,6 +56,7 @@
           'max-width': linksWrapMaxWidth + 'px'
         } : {}"
       >
+        <a class="switch-version" href="javascript:void(0)" @click="switchVersion">回到旧版</a>
         <AlgoliaSearchBox
           v-if="isAlgoliaSearch"
           :options="algolia"
@@ -77,7 +78,7 @@
 
 <script>
 import AlgoliaSearchBox from '@AlgoliaSearchBox'
-import SearchBox from '@SearchBox'
+import SearchBox from './SearchBox'
 import SidebarButton from '@theme/components/SidebarButton.vue'
 import NavLinks from '@theme/components/NavLinks.vue'
 import MainNavbarLink from './MainNavbarLink.vue';
@@ -186,6 +187,10 @@ export default {
     toggleMobilePanel () {
       this.showMobilePanel = !this.showMobilePanel
       forbidScroll(this.showMobilePanel)
+    },
+    switchVersion () {
+      document.cookie = '__new_version=;expires=-1'
+      location.reload()
     }
   },
 
diff --git a/docs/.vuepress/theme/components/SearchBox/index.vue b/docs/.vuepress/theme/components/SearchBox/index.vue
new file mode 100644
index 000000000..a43486113
--- /dev/null
+++ b/docs/.vuepress/theme/components/SearchBox/index.vue
@@ -0,0 +1,330 @@
+<template>
+	<div class="search-box">
+		<input
+			ref="input"
+			aria-label="Search"
+			:value="query"
+			:class="{ focused: focused }"
+			:placeholder="placeholder"
+			class="custom-search"
+			autocomplete="off"
+			spellcheck="false"
+			@input="query = $event.target.value"
+			@focus="focused = true"
+			@blur="focused = true"
+			@keyup.enter="go(focusIndex)"
+			@keyup.up="onUp"
+			@keyup.down="onDown"
+		/>
+		<ul
+			v-if="showSuggestions"
+			class="suggestions"
+			:class="{ 'align-right': alignRight }"
+			style="z-index: 1"
+			@mouseleave="unfocus"
+		>
+			<li
+				v-for="(s, i) in suggestions"
+				:key="i"
+				class="suggestion"
+				:class="{ focused: i === focusIndex }"
+				@mousedown="go(i)"
+				@mouseenter="focus(i)"
+			>
+				<a :href="s.path" @click.prevent>
+					<div class="suggestion-item">
+						<span class="page-title">{{ s.title || 'Document' }}</span>
+						<span v-if="s.header" class="header">{{ s.header.title }}</span>
+					</div>
+				</a>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+	import matchQuery from './match-query';
+	/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
+	export default {
+		name: 'SearchBox',
+
+		data() {
+			return {
+				query: '',
+				focused: false,
+				focusIndex: 0,
+				placeholder: undefined,
+				SEARCH_PATHS: null,
+				SEARCH_HOTKEYS: ['s', '/'],
+				SEARCH_MAX_SUGGESTIONS: 5,
+			};
+		},
+
+		computed: {
+			showSuggestions() {
+				return this.focused && this.suggestions && this.suggestions.length;
+			},
+
+			suggestions() {
+				const query = this.query.trim().toLowerCase();
+				if (!query) {
+					return;
+				}
+
+				const { pages } = this.$site;
+				const max = this.$site.themeConfig.searchMaxSuggestions || this.SEARCH_MAX_SUGGESTIONS;
+				const localePath = this.$localePath;
+				const res = [];
+				for (let i = 0; i < pages.length; i++) {
+					if (res.length >= max) break;
+					const p = pages[i];
+					// filter out results that do not match current locale
+					if (this.getPageLocalePath(p) !== localePath) {
+						continue;
+					}
+
+					// filter out results that do not match searchable paths
+					if (!this.isSearchable(p)) {
+						continue;
+					}
+
+					if (matchQuery(query, p)) {
+						res.push(p);
+					} else if (p.headers) {
+						for (let j = 0; j < p.headers.length; j++) {
+							if (res.length >= max) break;
+							const h = p.headers[j];
+							if (h.title && matchQuery(query, p, h.title)) {
+								res.push(
+									Object.assign({}, p, {
+										path: p.path + '#' + h.slug,
+										header: h,
+									})
+								);
+							}
+						}
+					}
+				}
+				return res;
+			},
+
+			// make suggestions align right when there are not enough items
+			alignRight() {
+				const navCount = (this.$site.themeConfig.nav || []).length;
+				const repo = this.$site.repo ? 1 : 0;
+				return navCount + repo <= 2;
+			},
+		},
+
+		mounted() {
+			this.placeholder = this.$site.themeConfig.searchPlaceholder || '';
+			document.addEventListener('keydown', this.onHotkey);
+		},
+
+		beforeDestroy() {
+			document.removeEventListener('keydown', this.onHotkey);
+		},
+
+		methods: {
+			getPageLocalePath(page) {
+				for (const localePath in this.$site.locales || {}) {
+					if (localePath !== '/' && page.path.indexOf(localePath) === 0) {
+						return localePath;
+					}
+				}
+				return '/';
+			},
+
+			isSearchable(page) {
+				let searchPaths = this.SEARCH_PATHS;
+
+				// all paths searchables
+				if (searchPaths === null) {
+					return true;
+				}
+
+				searchPaths = Array.isArray(searchPaths) ? searchPaths : new Array(searchPaths);
+
+				return (
+					searchPaths.filter(path => {
+						return page.path.match(path);
+					}).length > 0
+				);
+			},
+
+			onHotkey(event) {
+				if (event.srcElement === document.body && this.SEARCH_HOTKEYS.includes(event.key)) {
+					this.$refs.input.focus();
+					event.preventDefault();
+				}
+			},
+
+			onUp() {
+				if (this.showSuggestions) {
+					if (this.focusIndex > 0) {
+						this.focusIndex--;
+					} else {
+						this.focusIndex = this.suggestions.length - 1;
+					}
+				}
+			},
+
+			onDown() {
+				if (this.showSuggestions) {
+					if (this.focusIndex < this.suggestions.length - 1) {
+						this.focusIndex++;
+					} else {
+						this.focusIndex = 0;
+					}
+				}
+			},
+
+			go(i) {
+				if (!this.showSuggestions) {
+					return;
+				}
+				this.$router.push(this.suggestions[i].path);
+				this.query = '';
+				this.focusIndex = 0;
+			},
+
+			focus(i) {
+				this.focusIndex = i;
+			},
+
+			unfocus() {
+				this.focusIndex = -1;
+			},
+		},
+	};
+</script>
+
+<style lang="stylus">
+	.search-box
+	  display inline-block
+	  position relative
+	  margin-right 1rem
+	  input
+	    cursor text
+	    width 10rem
+	    height: 2rem
+	    color lighten($textColor, 25%)
+	    display inline-block
+	    border 1px solid darken($borderColor, 10%)
+	    border-radius 2rem
+	    font-size 0.9rem
+	    line-height 2rem
+	    padding 0 0.5rem 0 2rem
+	    outline none
+	    transition all .2s ease
+	    background #fff url(search.svg) 0.6rem 0.5rem no-repeat
+	    background-size 1rem
+	    &:focus
+	      cursor auto
+	      border-color $accentColor
+	  .suggestions
+	    background #fff
+	    width 20rem
+	    position absolute
+	    top 2 rem
+	    border 1px solid darken($borderColor, 10%)
+	    border-radius 6px
+	    padding 0.4rem
+	    list-style-type none
+	    &.align-right
+	      right 0
+	  .suggestion
+	    line-height 1.4
+	    padding 0.4rem 0.6rem
+	    border-radius 4px
+	    cursor pointer
+	    a
+	      white-space normal
+	      color lighten($textColor, 35%)
+	      .page-title
+	        font-weight 600
+	      .header
+	        font-size 0.9em
+	        margin-left 0.25em
+	    &.focused
+	      background-color #f3f4f5
+	      a
+	        color $accentColor
+
+	@media (max-width: $MQNarrow)
+	  .search-box
+	    input
+	      cursor pointer
+	      width 0
+	      border-color transparent
+	      position relative
+	      &:focus
+	        cursor text
+	        left 0
+	        width 10rem
+
+	// Match IE11
+	@media all and (-ms-high-contrast: none)
+	  .search-box input
+	    height 2rem
+
+	@media (max-width: $MQNarrow) and (min-width: $MQMobile)
+	  .search-box
+	    .suggestions
+	      left 0
+
+	@media (max-width: $MQMobile)
+	  .search-box
+	    margin-right 0
+	    input
+	      left 1rem
+	    .suggestions
+	      right 0
+
+	@media (max-width: $MQMobileNarrow)
+	  .search-box
+	    .suggestions
+	      width calc(100vw - 4rem)
+	    input:focus
+	      width 8rem
+	// by Lxh
+	.search-box
+		.suggestions
+			width 30rem
+		.suggestion
+			$li-border-color = #f0f0f0
+			border 1px solid $li-border-color
+			border-radius 0
+			padding 0
+			&:not(:last-child)
+				border-bottom none
+			&:first-child
+				border-top-left-radius 6px
+				border-top-right-radius 6px
+			&:last-child
+				border-bottom 1px solid $li-border-color
+				border-bottom-left-radius 6px
+				border-bottom-right-radius 6px
+			a
+				width 100%
+			.suggestion-item
+				width 100%
+				display flex
+				.page-title
+					flex 1
+					width 9rem
+					background-color #f7f7f7
+					padding 10px
+					display flex
+					flex-direction column
+					justify-content center
+					text-align center
+					word-break break-all
+				.header
+					flex 2
+					padding-left 20px
+					display flex
+					flex-direction column
+					justify-content center
+					text-align left
+</style>
diff --git a/docs/.vuepress/theme/components/SearchBox/match-query.js b/docs/.vuepress/theme/components/SearchBox/match-query.js
new file mode 100644
index 000000000..c1c41f3ba
--- /dev/null
+++ b/docs/.vuepress/theme/components/SearchBox/match-query.js
@@ -0,0 +1,51 @@
+
+import get from 'lodash/get'
+
+export default (query, page, additionalStr = null) => {
+  let domain = get(page, 'title', '')
+
+  if (get(page, 'frontmatter.tags')) {
+    domain += ` ${page.frontmatter.tags.join(' ')}`
+  }
+
+  if (additionalStr) {
+    domain += ` ${additionalStr}`
+  }
+
+  return matchTest(query, domain)
+}
+
+const matchTest = (query, domain) => {
+  const escapeRegExp = str => str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
+
+  // eslint-disable-next-line no-control-regex
+  const nonASCIIRegExp = new RegExp('[^\x00-\x7F]')
+
+  const words = query
+    .split(/\s+/g)
+    .map(str => str.trim())
+    .filter(str => !!str)
+
+  if (!nonASCIIRegExp.test(query)) {
+    // if the query only has ASCII chars, treat as English
+    const hasTrailingSpace = query.endsWith(' ')
+    const searchRegex = new RegExp(
+      words
+      .map((word, index) => {
+        if (words.length === index + 1 && !hasTrailingSpace) {
+          // The last word - ok with the word being "startswith"-like
+          return `(?=.*\\b${escapeRegExp(word)})`
+        } else {
+          // Not the last word - expect the whole word exactly
+          return `(?=.*\\b${escapeRegExp(word)}\\b)`
+        }
+      })
+      .join('') + '.+',
+      'gi'
+    )
+    return searchRegex.test(domain)
+  } else {
+    // if the query has non-ASCII chars, treat as other languages
+    return words.some(word => domain.toLowerCase().indexOf(word) > -1)
+  }
+}
diff --git a/docs/.vuepress/theme/components/SearchBox/search.svg b/docs/.vuepress/theme/components/SearchBox/search.svg
new file mode 100644
index 000000000..03d83913e
--- /dev/null
+++ b/docs/.vuepress/theme/components/SearchBox/search.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
diff --git a/docs/.vuepress/theme/mixin/navProvider.js b/docs/.vuepress/theme/mixin/navProvider.js
index 24db56990..54cebe6ae 100644
--- a/docs/.vuepress/theme/mixin/navProvider.js
+++ b/docs/.vuepress/theme/mixin/navProvider.js
@@ -49,7 +49,7 @@ export default {
   watch: {
     $route(after) {
       let navbarIndex = this.customNavBarKeys.indexOf((after.fullPath.match(/\/(\w+)+\/*/) || [])[1])
-      navbarIndex === -1 && after.fullPath === '/' && (navbarIndex = 0)
+      navbarIndex === -1 && (navbarIndex = 0)
       this.navConfig.userNavIndex !== navbarIndex && navbarIndex !== -1 && (this.navConfig.userNavIndex = navbarIndex)
     }
   }
diff --git a/docs/.vuepress/theme/styles/navbar.styl b/docs/.vuepress/theme/styles/navbar.styl
index 6606f06a0..4c14ad772 100644
--- a/docs/.vuepress/theme/styles/navbar.styl
+++ b/docs/.vuepress/theme/styles/navbar.styl
@@ -70,6 +70,12 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
             bottom 0
             opacity 0
             transform scaleX(0)
+  .switch-version
+    padding-right 20px
+    text-decoration underline
+    color inherit
+    &:hover
+      color $accentColor
 
 @media (max-width: $MQMobile)
   $navbar-a-color = #222;
diff --git a/docs/worktile/CLI.md b/docs/worktile/CLI.md
index a579291ca..02944106c 100644
--- a/docs/worktile/CLI.md
+++ b/docs/worktile/CLI.md
@@ -329,7 +329,7 @@ yarn build:mp-360
 yarn dev:mp-360
 
 # 监听文件变化且启用压缩
-yarn cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch
+yarn build:mp-360 --watch
 ```
 
 可以自定义更多条件编译平台，比如钉钉小程序，参考[package.json 文档](https://uniapp.dcloud.io/collocation/package)。
-- 
GitLab