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

src/views/Home.vue

@@ -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="输入关键词以搜索链接"
+            <el-input v-show="show.linkSearch" v-model="linkSearch.keyword"
-                prefix-icon="el-icon-search" clearable
+                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' }"
+            <el-tree v-show="show.linkTree" ref="linkTree" class="link-tree shadow-2"
-                node-key="id" :default-expand-all="false" :expand-on-click-node="false" :filter-node-method="searchLink"
+                :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)">
+                <div slot-scope="{ node, data }" class="link-item" :title="data.update"
-                    <span class="title">{{ node.label }}</span>
+                    @click="openLink(data.link, data.showOnly)"
-                    <span class="link">{{ data.link }}</span>
+                >
+                    <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) {
+        openLink(link, showOnly) {
-            if (link != undefined) {
+            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) {
+    // beforeRouteEnter(from, to, next) {
-        next(vm => {
+    // },
-            setTimeout(() => {
-                vm.changeCategory(0);
-            }, 1000);
-        });
-    }
 }
 </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 {