Skip to content

U
unidocs-zh

Tc.小浩 / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 0
Fork 0
U
unidocs-zh

体验新版 GitCode，发现更多精彩内容 >>

提交 c769b6c1 编写于 作者: D DCloud_LXH
浏览文件
操作

update: 搜索 uni-app、uniCloud 分开

上级 90ac7eb6
隐藏空白更改
内联 并排
Showing with 318 addition and 125 deletion
docs/.vuepress/theme/components/DcloudSearchPage/components/Results.vue
浏览文件 @ c769b6c1
<template>
<section class="DocSearch-Hits">
<div class="DocSearch-Hit-source">{{ title }}</div>
<div class="DocSearch-Hit-source">
<span v-if="tag" class="DocSearch-Hit-source_tag">
{{ tag }}
</span>
{{ title }}
</div>
<ul id="docsearch-list">
<template v-for="(item, index) in results">
......@@ -26,13 +31,19 @@
default: [],
},
},
methods: {},
computed: {
tag() {
return this.results[0].tag !== 'uniCloud' ? this.results[0].tag : '';
},
},
};
</script>
<style lang="stylus">
#docsearch-list{
border-radius: 10px;
border-radius: 5px;
padding: 0;
border: 1px solid #dfe2e5;
overflow: hidden;
}
.DocSearch-Hits mark {
......@@ -43,5 +54,17 @@
.DocSearch-Hit-source {
background-color $search-container-color;
color: $accentColor;
font-size 1em;
padding 15px 4px 15px
}
.DocSearch-Hit-source_tag {
background-color: #f0f0f0;
font-size: 12px;
padding: 2px 4px;
color: #999;
border-radius: 3px;
margin-right: 5px;
font-weight: normal;
}
</style>
docs/.vuepress/theme/components/DcloudSearchPage/index.styl
浏览文件 @ c769b6c1
$svg-color = #b1b2b3
$svg-hover-color = #9b9b9b
@import './styles/ext.styl'
@import './styles/ask.styl'
#search-container
position relative
overflow auto
......@@ -109,6 +112,10 @@ $svg-hover-color = #9b9b9b
align-items center
padding-top 20px
font-size 20px
.uni-loading
width 27px
height 27px
.DocSearch-Logo
font-size 16px
......@@ -129,6 +136,16 @@ $svg-hover-color = #9b9b9b
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
......@@ -153,82 +170,4 @@ $svg-hover-color = #9b9b9b
padding 0 10px
.search-result-aside
display none
#search-container
.search-result-aside
height 100px
position absolute
top 80px
right 100px
.search-result-aside-link
display flex
flex-direction column
justify-content center
align-items flex-start
.markdown-section
margin-top 20px
background-color #fff
padding 10px
.matching-post
$padding-n = 25px
padding $padding-n $padding-n 10px $padding-n
&:not(:last-child)
border-bottom 1px solid #eee
&:first-child
margin-top 0 !important
a
text-decoration none
color inherit
font-weight 400
&:hover
color $accentColor
.post-wrapper
display flex
p.aw-text
font-weight normal
margin 0
display inline-flex
p
font-size 14px
overflow hidden
text-overflow ellipsis
display -webkit-box
-webkit-line-clamp 2
-webkit-box-orient vertical
.post-tag
background-color #f0f0f0
font-size 13px
padding 2px 4px
color #999
border-radius 3px
margin-right 5px
.matching-post h2
margin-top 0
padding-top 0
h2
color #2c3e50
font-size 17px
margin 0
padding 0
display inline-block
font-weight 600
border none
.search-keyword
font-style normal
font-weight 700
color $accentColor
\ No newline at end of file
display none
\ No newline at end of file
docs/.vuepress/theme/components/DcloudSearchPage/index.vue
浏览文件 @ c769b6c1
......@@ -16,11 +16,23 @@
class="search-input"
:placeholder="placeholder"
type="text"
@keydown.enter="resetSearchPage, search"
@keydown.enter="
() => {
resetSearchPage();
search();
}
"
v-model="searchValue"
/>
<span class="search-input-btn">
<button @click="resetSearchPage, search">
<button
@click="
() => {
resetSearchPage();
search();
}
"
>
<svg
width="16"
height="16"
......@@ -65,7 +77,8 @@
</div>
<div class="result-number">
<span>{{ resultText }}</span>
<span v-if="showLoading" class="uni-loading"></span>
<span v-else>{{ resultText }}</span>
</div>
<div class="search-result">
......@@ -112,6 +125,10 @@
:curPage="curPage"
:pageSize="pageSize"
/>
<a v-if="showMoreAsk" class="search-more" @click="moreAskResult">
<span v-if="showAskLoading" class="uni-loading"></span>
<span v-else>更多...</span>
</a>
</div>
</div>
</div>
......@@ -154,7 +171,11 @@
searchValue: '',
category: Object.freeze([
{
text: '文档规范',
text: 'uni-app',
type: 'algolia',
},
{
text: 'uniCloud',
type: 'algolia',
},
{
......@@ -182,6 +203,8 @@
resultList: [],
noResult: false,
serverHtml: '',
showLoading: false,
showAskLoading: false,
searchPage: 0, // 跳转页数
curHits: 0, // 当前搜索结果总条数
......@@ -198,13 +221,21 @@
isAlgolia() {
return this.currentCategory.type === 'algolia';
},
isAsk() {
return this.currentCategory.tag === 'ask';
},
showPagination() {
return !!(this.resultList.length && this.totalPage > 1 && this.isAlgolia);
},
showMoreAsk() {
return this.isAsk && this.serverHtml;
},
resultText() {
return this.noResult
? `没有找到${this.currentCategory.text}相关内容`
: `${this.curHits}个相关结果`;
: !this.isAsk
? `${this.curHits}个相关结果`
: `以下为${this.currentCategory.text}相关内容`;
},
},
......@@ -245,7 +276,9 @@
initResultWrapHeight() {
const pageHeight = this.$el.clientHeight;
const searchNavbarHeight = document.querySelector('.search-navbar').clientHeight;
const resultNumberHeight = document.querySelector('.result-number').clientHeight;
const resultNumberHeight = (
document.querySelector('.result-number') || { clientHeight: 47 }
).clientHeight;
const algoliaLogoHeight = (document.querySelector('.algolia-logo') || { clientHeight: 49 })
.clientHeight;
const searchPagination = 36;
......@@ -274,8 +307,9 @@
const { type } = this.currentCategory;
switch (type) {
case 'algolia':
this.searchByAlgolia(this.searchValue, this.searchPage).then(
({ hitsPerPage, nbHits, nbPages, page, hits }) => {
this.showLoading = true;
this.searchByAlgolia()
.then(({ hitsPerPage, nbHits, nbPages, page, hits }) => {
this.resultList = hits.map(item => {
const items = item.getItems();
return {
......@@ -289,25 +323,28 @@
this.pageSize = hitsPerPage;
this.totalPage = nbPages;
this.curPage = page + 1;
}
);
})
.finally(() => (this.showLoading = false));
break;
case 'server':
this.searchByServer(this.searchValue);
this.showLoading = true;
this.searchByServer().finally(() => (this.showLoading = false));
break;
}
},
searchByAlgolia(query = '', page = 0) {
searchByAlgolia() {
const { searchParameters = {} } = this.options;
return searchClient(
Object.assign({}, this.options, {
query,
page,
query: this.searchValue || '',
page: this.searchPage,
snippetLength: this.snippetLength,
searchParameters: {
...searchParameters,
facetFilters: [`lang:${this.$lang}`].concat(searchParameters.facetFilters || []),
facetFilters: [`lang:${this.$lang}`].concat(searchParameters.facetFilters || [], [
`category:${this.currentCategory.text}`,
]),
},
transformItems: items =>
items.map(item => {
......@@ -322,24 +359,38 @@
);
},
async searchByServer(query = '') {
searchByServer(append = false) {
const { tag } = this.currentCategory;
let postResult = Promise.resolve({ html: '', hits: 0 });
const query = this.searchValue || '';
switch (tag) {
case 'ext':
postResult = postExt(query);
break;
return postExt(query).then(({ html, hits }) => {
this.serverHtml = html;
this.curHits = hits;
this.noResult = !hits;
});
case 'ask':
postResult = postAsk(query);
break;
append && (this.showAskLoading = true);
this.searchPage === 0 && (this.searchPage = 1);
return postAsk(query, this.searchPage)
.then(res => {
if (res) {
const { html, hits } = res;
!append ? (this.serverHtml = html) : (this.serverHtml += html);
this.noResult = !this.serverHtml.length;
} else {
this.serverHtml = ''
this.noResult = true;
}
})
.finally(() => (this.showAskLoading = false));
}
},
const { html, hits } = await postResult;
this.serverHtml = html;
this.curHits = hits;
this.noResult = !hits;
moreAskResult() {
this.searchPage === 0 ? (this.searchPage = 2) : this.searchPage++;
this.searchByServer(true);
},
mainNavLinkClass(index) {
......
docs/.vuepress/theme/components/DcloudSearchPage/mock.js
浏览文件 @ c769b6c1
......@@ -288,5 +288,53 @@ export default {
}
],
"searchKeyword": "5Y2H57qn"
}
},
askHtml:`<div
class="aw-item active" >
<p class="aw-title">
<span class="tip-recommend">官方</span>
<a href="//ask.dcloud.net.cn/article/676" target="_blank"> 手机端监听<em>短信</em>验证码并自动提交表单 </a>
</p>
<p class="aw-search-body">
鉴定<em>短信</em>验证码仅能在App端实现，其他端无法使用。但在App端，更为合理的方式其实是使用一键登录。即无需<em>短信</em>验证码，一键登录获取真实的手机号。一键登陆的体验比<em>短信</em>验证码好很多，不需等待验证码、输入验证码，并且一键登陆的费用比<em>短信</em>便宜不少。所以*强烈推荐改用一键登陆*，uni一键登陆的文档另见：... </p>
<p class="aw-hide-text aw-text-color-666">
分类：
<a class="aw-search-result-tags"> 文章 </a>
77 个回复 •
32933 次查看 </p>
</div>
<div
class="aw-item active" >
<p class="aw-title">
<span class="tip-recommend">官方</span>
<a href="//ask.dcloud.net.cn/article/37534" target="_blank"> 发送<em>短信</em>教程（验证码、<em>短信</em>通知） </a>
</p>
<p class="aw-search-body">
添加模板完成后，如模板审核通过，则根据[https://uniapp.dcloud.io/uniCloud/send-<em>sms</em>](https://uniapp.dcloud.io/uniCloud/send-<em>sms</em>)进行<em>短信</em>接入。[attach]61670[/attach] 充值 <em>短信</em>验证码为预付费业务，使用<em>短信</em>验证码服务之前，需要先进行充值。点击页面上的“充值”按钮，可以选择预设金额进行充值，也可以选择自定义... </p>
<p class="aw-hide-text aw-text-color-666">
分类：
<a class="aw-search-result-tags"> 文章 </a>
60 个回复 •
16940 次查看 </p>
</div>
<div
class="aw-item active" >
<p class="aw-title">
<span class="tip-recommend">官方</span>
<a href="//ask.dcloud.net.cn/article/37746" target="_blank"> 公告：<em>短信</em>模板报备通知 </a>
</p>
<p class="aw-search-body">
由于近期有个别开发者利用<em>短信</em>服务发送违法信息，导致【uniID】、【uni验证】等<em>短信</em>服务模板被运营商停用。为了保证其他开发者可以正常使用，即日起，开发者使用<em>短信</em>服务需要进行<em>短信</em>模板...参考文档[https://uniapp.dcloud.net.cn/uniCloud/send-<em>sms</em>](https://uniapp.dcloud.net.cn/uniCloud/send-<em>sms</em>)更新发送<em>短信</em>相关代码。 </p>
<p class="aw-hide-text aw-text-color-666">
分类：
<a class="aw-search-result-tags"> 文章 </a>
43 个回复 •
3276 次查看 </p>
</div>
`
}
\ No newline at end of file
docs/.vuepress/theme/components/DcloudSearchPage/postDcloudServer.js
浏览文件 @ c769b6c1
......@@ -39,31 +39,22 @@ export async function postExt(query) {
}
}
export async function postAsk(query) {
export async function postAsk(query, page = 1) {
const base = isProduction ? '//ask.dcloud.net.cn' : '/ask'
let ret
let askHtml = '';
if (!isMock) {
const res = await ajax(base + '/search/ajax/search_result/search_type-doc__q-' + query + '__page-1')
if (!res) {
askHtml = await ajax(base + `/search/ajax/search_result/search_type-all__q-${query}__page-${page}`)
if (!askHtml) {
return;
}
ret = JSON.parse(res);
} else {
ret = mock.ask
}
if (ret.code !== 0) {
checkEmpty()
return;
askHtml = mock.askHtml
}
let data = ret.data;
let askHtml = '';
data.forEach(function (item) {
askHtml += _renderPost(item, query);
});
return {
html: askHtml,
hits: data.length
hits: 0
}
}
......
docs/.vuepress/theme/components/DcloudSearchPage/searchClient.js
浏览文件 @ c769b6c1
......@@ -28,6 +28,9 @@ export function search({ query, indexName, appId, apiKey, searchParameters = {},
'content',
'type',
'url',
'url_without_anchor',
'category',
'tag'
],
attributesToSnippet: [
`hierarchy.lvl1:${snippetLength}`,
......
docs/.vuepress/theme/components/DcloudSearchPage/styles/ask.styl 0 → 100644
浏览文件 @ c769b6c1
#search-container
.aw-item
$padding-n = 25px
padding $padding-n $padding-n ($padding-n - 10px) $padding-n
@media (max-width $MQMobile)
&
padding: $padding-n - 10px $padding-n - 10px 5px $padding-n - 10px
&:not(:last-child)
border-bottom 1px solid #eee
&:first-child
margin-top 0 !important
a
text-decoration none
color inherit
font-weight 400
p
margin 0 0 10px
.tip-recommend
background-color #22ac38
color #ffffff
padding 2px 5px
border-radius 3px
margin-right 10px
font-size 12px
.aw-title a
text-decoration underline
font-size 16px
.aw-hide-text
font-size 12px
color #828288
.aw-search-result-tags
background-color #ffffff
color #ef5656
margin-right 10px
.aw-search-body
font-size 14px
color #666
em
font-weight bold
font-style normal
color $accentColor
\ No newline at end of file
docs/.vuepress/theme/components/DcloudSearchPage/styles/ext.styl 0 → 100644
浏览文件 @ c769b6c1
#search-container
.markdown-section
margin-top 20px
background-color #fff
.matching-post
$padding-n = 25px
padding $padding-n $padding-n ($padding-n - 15px)$padding-n
@media (max-width $MQMobile)
&
padding: $padding-n - 10px $padding-n - 10px 0px $padding-n - 10px
&:not(:last-child)
border-bottom 1px solid #eee
&:first-child
margin-top 0 !important
a
text-decoration none
color inherit
font-weight 400
&:hover
color $accentColor
.post-wrapper
display flex
p.aw-text
font-weight normal
margin 0
display inline-flex
p
font-size 14px
overflow hidden
text-overflow ellipsis
display -webkit-box
-webkit-line-clamp 2
-webkit-box-orient vertical
.post-tag
background-color #f0f0f0
font-size 12px
padding 2px 4px
color #999
border-radius 3px
margin-right 5px
.matching-post h2
margin-top 0
padding-top 0
h2
color #2c3e50
font-size 16px
margin 0
padding 0
display inline-block
font-weight 600
border none
.search-keyword
font-style normal
font-weight 700
color $accentColor
\ No newline at end of file
docs/.vuepress/theme/styles/index.styl
浏览文件 @ c769b6c1
......@@ -113,3 +113,21 @@ h1, h2, h3, h4, h5, h6
.sidebar .sidebar-group.is-sub-group>.sidebar-heading:not(.clickable)
opacity 1
.uni-loading
width 20px
height 20px
display inline-block
vertical-align middle
animation uni-loading 1s steps(12, end) infinite
background-size 100%
background-color transparent
background-image url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=')
background-repeat no-repeat
@keyframes uni-loading
0%
transform rotate3d(0, 0, 1, 0deg)
100%
transform rotate3d(0, 0, 1, 360deg)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或