frost-craft/frost-navigation
1
0
Fork 0
Code Releases Activity

加入“搜索引擎” & 优化部分功能

Browse Source
This commit is contained in:
Frost-ZX
2021-02-08 00:46:51 +08:00
parent 877aee4119
commit 4a93d75f9e
1 changed files with 256 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/views/Home.vue
View File

@@ -3,17 +3,23 @@
<!-- 侧边栏 -->
<el-aside class="home-aside">
<el-menu class="side-nav" default-active="0" @select="changeCategory">
<el-menu class="side-nav" default-active="search" @select="changeCategory">
<!-- 全部 -->
<!-- 搜索引擎 -->
<el-menu-item index="search">
<i class="el-icon-search"></i>
<span slot="title">搜索</span>
</el-menu-item>
<!-- 全部链接 -->
<el-menu-item index="all">
<i class="el-icon-menu"></i>
<span slot="title">全部</span>
<span slot="title">全部链接</span>
</el-menu-item>
<!-- 分类 -->
<el-menu-item v-for="(item, itemIndex) in navLinks" :key="'list-' + itemIndex" :index="itemIndex.toString()">
<i class="el-icon-menu"></i>
<i class="el-icon-link"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
@@ -23,9 +29,52 @@
<!-- 内容 -->
<el-main class="home-content">
<!-- 搜索引擎 -->
<div v-show="show.searchEngine" class="search-engine">
<!-- 搜索栏 -->
<div class="search-bar shadow-2">
<!-- 输入 -->
<input v-model="searchEngine.keyword" class="input" type="text"
@keydown.enter.exact="searchEngineSubmit()"
/>
<!-- 清除 -->
<div v-show="searchEngine.keyword.length > 0" class="btn btn-clear"
@click="searchEngine.keyword = ''"
>
<i class="el-icon-close"></i>
</div>
<!-- 搜索 -->
<div class="btn btn-search" @click="searchEngineSubmit()">
<i class="el-icon-search"></i>
</div>
</div>
<!-- 选择搜索引擎 -->
<el-radio-group v-model="searchEngine.type" class="search-type" size="small">
<!-- 自动生成 -->
<el-radio v-for="item in searchEngine.types" :key="item.name"
:label="item.name" class="shadow-2"
>
<i class="name">{{ item.name }}</i>
<i class="desc">{{ item.desc }}</i>
</el-radio>
<!-- 占位 -->
<el-radio label="0"></el-radio>
</el-radio-group>
</div>
<!-- 链接搜索框 -->
<el-input v-model="linkSearch.keyword" class="link-search" placeholder="输入关键词以搜索链接"
prefix-icon="el-icon-search" clearable
<el-input v-show="show.linkSearch" v-model="linkSearch.keyword"
class="link-search shadow-2" placeholder="搜索链接" clearable
>
<el-select slot="prepend" v-model="linkSearch.type" placeholder="类型">
<el-option label="全部" value="all"></el-option>
@@ -33,14 +82,18 @@
<el-option label="链接" value="link"></el-option>
</el-select>
</el-input>
<!-- 链接列表树 -->
<el-tree ref="linkTree" class="link-tree" :data="currentLinks" :props="{ label: 'title', children: 'sub' }"
node-key="id" :default-expand-all="false" :expand-on-click-node="false" :filter-node-method="searchLink"
<el-tree v-show="show.linkTree" ref="linkTree" class="link-tree shadow-2"
:data="currentLinks" node-key="id" empty-text=""
:props="{ label: 'title', children: 'sub' }" :filter-node-method="searchLink"
:default-expand-all="false" :expand-on-click-node="false"
>
<div slot-scope="{ node, data }" class="link-item" @click="openLink(data.link)">
<span class="title">{{ node.label }}</span>
<span class="link">{{ data.link }}</span>
<div slot-scope="{ node, data }" class="link-item" :title="data.update"
@click="openLink(data.link, data.showOnly)"
>
<span class="title limit-line-1">{{ node.label }}</span>
<span class="link limit-line-1">{{ data.link }}</span>
</div>
</el-tree>
@@ -54,6 +107,18 @@ export default {
name: 'Home',
data() {
return {
// 显示的内容
show: {
searchEngine: true,
linkSearch: false,
linkTree: false,
},
// 搜索引擎
searchEngine: {
keyword: '',
type: this.$root.config.searchEngine.default,
types: this.$root.config.searchEngine.list
},
// 所有链接
navLinks: this.$root.navLinks,
// 当前显示的链接
@@ -84,29 +149,68 @@ export default {
}
},
methods: {
log(...datas) {
console.log(datas);
},
/**
* 更改当前显示的分类
*/
changeCategory(index) {
if (index == 'all') {
if (index == 'search') {
this.currentLinks = [];
this.show.searchEngine = true;
this.show.linkSearch = false;
this.show.linkTree = false;
} else if (index == 'all') {
this.currentLinks = this.navLinks;
this.show.searchEngine = false;
this.show.linkSearch = true;
this.show.linkTree = true;
} else {
this.currentLinks = this.navLinks[Number(index)].sub;
this.show.searchEngine = false;
this.show.linkSearch = true;
this.show.linkTree = true;
}
this.linkSearch.keyword = '';
},
/**
* 打开链接
*
* @param {string} link 需要打开的链接
* @param {boolean} showOnly 是否仅显示链接
*/
openLink(link) {
if (link != undefined) {
openLink(link, showOnly) {
if (link === undefined) {
return false;
}
if (showOnly) {
window.prompt('请复制后手动在新标签页中打开', link);
} else {
window.open(link, '_blank');
}
},
/**
* 搜索引擎
*/
searchEngineSubmit() {
var search = this.searchEngine;
var keyword = search.keyword;
var types = search.types;
var url = '';
if (keyword == '') {
return false;
}
for (let index in types) {
if (types[index].name == search.type) {
url = types[index].url.replace(/%keyword%/, keyword);
break;
}
}
window.open(url, '_blank');
},
/**
* 搜索链接
*/
@@ -136,19 +240,15 @@ export default {
return result;
}
},
beforeRouteEnter(from, to, next) {
next(vm => {
setTimeout(() => {
vm.changeCategory(0);
}, 1000);
});
}
// beforeRouteEnter(from, to, next) {
// },
}
</script>
<style lang="less" scoped>
.home-aside {
width: 18rem !important;
// width: 18rem !important;
width: auto !important;
overflow-x: hidden;
.side-nav {
@@ -158,14 +258,134 @@ export default {
.home-content {
position: relative;
padding: 1rem;
background-color: @colorWhite;
/deep/ .search-engine {
display: flex;
align-items: center;
flex-direction: column;
padding: 0.5rem;
.search-bar {
display: flex;
align-items: center;
position: sticky;
top: 0.5rem;
z-index: 100;
width: 100%;
max-width: 40rem;
height: 2.8rem;
border-radius: 0.25rem;
background-color: #FFF;
overflow: hidden;
.input {
flex-grow: 1;
padding-left: 1rem;
height: 100%;
outline: none;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.8rem;
height: 2.8rem;
background-color: transparent;
font-size: 1.2rem;
cursor: pointer;
}
.btn-clear {
width: 2rem;
opacity: 0.5;
transition: opacity 0.25s;
&:hover {
opacity: 1;
}
}
.btn-search {
color: @colorPrimary;
transition: background 0.25s, color 0.25s;
&:hover {
background-color: @colorPrimary;
color: #FFF;
}
}
}
.search-type {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
margin: 2rem 0;
font-size: 1rem;
> label {
margin: 3% 1.5%;
margin-top: 0;
padding: 1em;
width: 45%;
min-width: 16em;
border-radius: 0.25em;
background-color: #FFF;
text-align: left;
font-weight: normal;
// 隐藏占位元素
&:last-child {
visibility: hidden;
}
// 若占位元素为第奇数个，不显示
&:last-child:nth-child(odd) {
display: none;
}
}
.el-radio__input {
display: none;
}
.el-radio__label {
padding: 0;
i {
font-style: normal;
}
.desc {
margin-left: 0.5em;
font-size: 0.8em;
color: #CCC;
}
}
}
}
/deep/ .link-search {
@height: 2.8rem;
.link-search {
position: sticky;
z-index: 100;
top: 0;
margin-bottom: 1rem;
border-radius: 0.25rem;
line-height: @height;
overflow: hidden;
/deep/ .el-input-group__prepend {
> div, > input {
border: none;
}
.el-input-group__prepend {
background-color: #FFF;
.el-select .el-input {
@@ -176,9 +396,16 @@ export default {
}
}
}
.el-input__inner {
height: @height;
line-height: @height;
}
}
.link-tree {
padding: 0.5rem;
border-radius: 0.25rem;
font-size: 14px;
/deep/ .el-tree-node__content {
@@ -187,7 +414,7 @@ export default {
.link-item {
> span {
display: block;
display: -webkit-box;
}
.title {