frost-navigation/src/views/Home.vue

<template>
    <el-container class="home">

        <!-- 侧边栏 -->
        <el-aside class="home-aside shadow-1">
            <el-menu
                class="side-nav"
                default-active="search"
                :collapse="config.sideMenuCollapse"
                :collapse-transition="false"
                @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>
                </el-menu-item>

                <!-- 分类 -->
                <el-menu-item
                    v-for="(item, itemIndex) in navLinks.list"
                    :key="'list-' + itemIndex"
                    :index="itemIndex.toString()"
                >
                    <i :class="item.icon || 'el-icon-link'"></i>
                    <span slot="title">{{ item.title }}</span>
                </el-menu-item>

            </el-menu>
        </el-aside>

        <!-- 内容 -->
        <el-main class="home-content">
            <div class="wrapper">

                <!-- 搜索引擎 -->
                <div v-show="show.searchEngine" class="search-engine">

                    <!-- 搜索栏 -->
                    <div :class="['search-bar', 'shadow-3', { suggest: showSES }]">

                        <!-- 输入 -->
                        <input
                            v-model="searchEngine.keyword"
                            class="input"
                            type="text"
                            @blur="searchEngine.isFocus = false"
                            @focus="searchEngine.isFocus = true"
                            @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 class="suggestion shadow-3">
                            <ul>
                                <li
                                    v-for="item in searchEngine.suggestions"
                                    :key="item.id"
                                    @click="searchEngine.keyword = item.label"
                                >{{ item.label }}</li>
                            </ul>
                        </div>

                    </div>

                    <!-- 选择搜索引擎 -->
                    <el-radio-group
                        v-model="config.searchEngine"
                        size="small"
                        :class="['search-type', { fade: searchEngine.isFocus }]"
                    >
                        <!-- 分类 -->
                        <div
                            v-for="(category, cIndex) in searchEngine.list"
                            :key="cIndex"
                            class="category"
                        >

                            <!-- 标题 -->
                            <div class="title">{{ category.title }}</div>

                            <!-- 项 -->
                            <el-radio
                                v-for="item in category.list"
                                :key="item.name"
                                :label="item.name"
                                class="shadow-2"
                            >
                                <Icon :path="item.icon || 'website/default.svg'" size="1.2em" />
                                <i class="name">{{ item.name }}</i>
                                <i class="desc limit-line-1">{{ item.desc }}</i>
                            </el-radio>

                        </div>
                    </el-radio-group>

                </div>

                <!-- 链接搜索框 -->
                <el-input
                    v-show="show.searchLink"
                    v-model="searchLink.keyword"
                    class="link-search shadow-2"
                    placeholder="搜索链接"
                    clearable
                >
                    <el-select slot="prepend" v-model="searchLink.type" placeholder="类型">
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="标题" value="title"></el-option>
                        <el-option label="链接" value="link"></el-option>
                        <el-option label="简介" value="desc"></el-option>
                    </el-select>
                </el-input>

                <!-- 链接列表树 -->
                <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="searchLinkSubmit"
                    :default-expand-all="false"
                    :expand-on-click-node="true"
                >
                    <div
                        slot-scope="{ node, data }"
                        class="link-item"
                        :title="data.update"
                        @click="openLink(data.link, data.showOnly)"
                        @contextmenu.prevent="openDetail(data)"
                    >
                        <span class="title">{{ node.label }}</span>
                        <span class="link">{{ data.link }}</span>
                    </div>
                </el-tree>

            </div>
        </el-main>

        <!-- 链接详情 -->
        <el-dialog
            :append-to-body="true"
            custom-class="link-detail"
            title="详情"
            :visible="linkDetail.show"
            @close="linkDetail.show = false"
        >
            <div class="content">
                <div class="row">
                    <div class="label">ID：</div>
                    <div class="text">{{ linkDetail.id }}</div>
                </div>
                <div class="row">
                    <div class="label">标题：</div>
                    <div class="text">{{ linkDetail.title }}</div>
                </div>
                <div class="row">
                    <div class="label">链接：</div>
                    <div class="text">
                        <el-link
                            v-show="!linkDetail.linkCopy"
                            type="primary"
                            :href="linkDetail.link"
                            target="_blank"
                        >{{ linkDetail.link }}</el-link>
                        <input
                            v-show="linkDetail.linkCopy"
                            type="text"
                            :value="linkDetail.link"
                        />
                    </div>
                </div>
                <div v-show="linkDetail.desc != ''" class="row">
                    <div class="label">简介：</div>
                    <div class="text">{{ linkDetail.desc }}</div>
                </div>
                <div v-show="linkDetail.update != ''" class="row">
                    <div class="label">更新：</div>
                    <div class="text">{{ linkDetail.update }}</div>
                </div>
            </div>
        </el-dialog>

    </el-container>
</template>

<script>
import Icon from '@/components/Icon.vue';

export default {
    name: 'Home',
    components: {
        Icon
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.utils.changeTitle();
        });
    },
    data() {
        return {
            config: this.$root.config.storage,
            utils: this.$root.utils,
            // 显示的内容
            show: {
                searchEngine: true,
                searchLink: false,
                linkTree: false,
            },
            // 搜索引擎
            searchEngine: {
                isFocus: false,
                keyword: '',
                list: this.$root.config.searchEngines,
                url: '',
                debounce: null,
                suggestions: [],
            },
            // 导航链接
            navLinks: this.$root.navLinks,
            // 当前显示的链接
            currentLinks: [],
            // 搜索链接
            searchLink: {
                debounce: null,
                keyword: '',
                type: 'all'
            },
            // 链接详情
            linkDetail: {
                show: false,
                id: '',
                title: '',
                link: '',
                linkCopy: false,
                desc: '',
                update: '',
            },
        };
    },
    computed: {

        /**
         * 显示搜索引擎关键词建议
         */
        showSES() {
            var se = this.searchEngine;
            var isShow = (
                (se.isFocus) &&
                (se.keyword !== '') &&
                (se.suggestions.length > 0)
            );

            return isShow;
        },

    },
    watch: {
        'searchEngine.keyword': {
            handler(value) {
                if (!this.config.searchSuggestion) {
                    return;
                }
                clearInterval(this.searchEngine.debounce);
                this.searchEngine.debounce = setTimeout(() => {
                    this.searchEngineGS(value);
                }, 500);
            }
        },
        'searchLink.keyword': {
            handler(value) {
                clearTimeout(this.searchLink.debounce);
                this.searchLink.debounce = setTimeout(() => {
                    this.$refs.linkTree.filter(value);
                }, 500);
            }
        },
        'searchLink.type': {
            handler() {
                // 更改搜索类型时自动重新搜索
                this.$refs.linkTree.filter(this.searchLink.keyword);
            }
        },
    },
    methods: {

        /** 
         * 更改当前显示的分类
         */
        changeCategory(index) {
            if (index === 'search') {
                this.currentLinks = [];
                this.show.searchEngine = true;
                this.show.searchLink = false;
                this.show.linkTree = false;
            } else if (index === 'all') {
                this.currentLinks = this.navLinks.list;
                this.show.searchEngine = false;
                this.show.searchLink = true;
                this.show.linkTree = true;
            } else {
                this.currentLinks = this.navLinks.list[Number(index)].sub;
                this.show.searchEngine = false;
                this.show.searchLink = true;
                this.show.linkTree = true;
            }

            this.searchLink.keyword = '';
        },

        /**
         * 查看详情
         * 
         * @param {object} datas 当前链接的数据
         */
        openDetail(datas) {
            // 非链接 / 仅显示
            if (datas.link === undefined) {
                return;
            }

            var detail = this.linkDetail;

            detail.id = datas.id;
            detail.title = datas.title;
            detail.link = datas.link;
            detail.linkCopy = datas.showOnly || false;
            detail.desc = datas.desc || '';
            detail.update = datas.update || '';
            detail.show = true;
        },

        /**
         * 打开链接
         * 
         * @param {string} link 需要打开的链接
         * @param {boolean} showOnly 是否仅显示链接
         */
        openLink(link, showOnly) {
            if (link === undefined) {
                return false;
            }

            if (showOnly) {
                this.$message({
                    duration: 5000,
                    message: '请在链接详情中复制后手动打开',
                    type: 'warning'
                });
            } else {
                window.open(link, '_blank');
            }
        },

        /**
         * 搜索引擎（获取关键词建议）
         * 
         * @param {string} keyword 当前输入的关键词
         */
        searchEngineGS(keyword) {
            var se = this.searchEngine;
            var reqURL = `https://www.baidu.com/sugrec?json=1&prod=pc&wd=${keyword}&cb=cbSES`;

            se.suggestions = [];

            if (keyword === '') {
                return;
            }

            var cbFunc = (data) => {
                var word = (data.q || '');   // 当前关键词
                var result = (data.g || []); // 建议
                var id = 0;                  // ID 

                if (result.length === 0) {
                    return;
                }

                result.forEach((item) => {
                    id += 1;
                    se.suggestions.push({
                        id,
                        label: item.q,
                        highlight: word
                    });
                });
            };

            this.utils.jsonp({
                url: reqURL,
                cbName: 'cbSES',
                cbFunc
            });
        },

        /**
         * 搜索引擎（搜索）
         */
        searchEngineSubmit() {
            var vm = this;
            var se = this.searchEngine;
            var selectedSE = this.config.searchEngine;
            var keyword = se.keyword;
            var url = '';

            if (keyword === '') {
                return false;
            } else {
                keyword = window.encodeURIComponent(keyword);
            }

            for (let category in se.list) {
                let list = se.list[category].list;

                for (let index in list) {
                    if (list[index].name === selectedSE) {
                        url = list[index].url.replace(/%keyword%/, keyword);
                        break;
                    }
                }
            }

            vm.openLink(url);
        },

        /**
         * 搜索链接（搜索）
         * 
         * @param {string} value 关键词
         * @param {object} data 每一项链接的信息
         */
        searchLinkSubmit(value, data) {
            // 关键词为空，显示全部
            if (value === '') {
                return true;
            }

            // 小写
            value = value.toLowerCase();

            var searchType = this.searchLink.type;
            var title = data.title.toLowerCase();
            var link = (data.link || '');
            var desc = (data.desc || '');
            var result = false;

            if (searchType === 'all') {
                // 全部
                let checks = [
                    (title.indexOf(value) !== -1),
                    (link.indexOf(value) !== -1),
                    (desc.indexOf(value) !== -1),
                ];
                result = (checks[0] || checks[1] || checks[2]);
            } else if (searchType === 'title') {
                // 标题
                result = (title.indexOf(value) !== -1);
            } else if (searchType === 'link') {
                // 链接
                result = (link.indexOf(value) !== -1);
            } else if (searchType === 'desc') {
                // 简介
                result = (desc.indexOf(value) !== -1);
            }

            return result;
        },

    },
}
</script>

<style lang="less" scoped>
.home-aside {
    position: relative;
    z-index: 110;
    width: auto !important;
    overflow-x: hidden;

    .side-nav {
        min-height: 100%;
        border: none;
    }
}

.home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 2rem;
    background-color: @colorWhite;
    overflow-x: hidden;
    overflow-y: scroll;

    .wrapper {
        width: 100%;
        min-width: 16rem;
        max-width: 64rem;
    }
}

.search-engine {
    display: flex;
    align-items: center;
    flex-direction: column;

    .search-bar {
        @barHeight: 2.8rem;
        @barRadius: 0.3rem;

        display: flex;
        align-items: center;
        position: sticky;
        top: 2.5rem;
        z-index: 100;
        width: 100%;
        max-width: 40rem;
        height: @barHeight;
        border-radius: @barRadius;
        background-color: #FFF;

        &.suggest {
            border-radius: @barRadius @barRadius 0 0;
        }

        .input {
            flex-grow: 1;
            padding-left: 1rem;
            width: 0;
            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 @transitionTime;

            &:hover {
                opacity: 1;
            }
        }

        .btn-search {
            border-radius: 0 @barRadius @barRadius 0;
            color: @colorPrimary;
            transition: background @transitionTime, color @transitionTime;

            &:hover {
                background-color: @colorPrimary;
                color: #FFF;
            }
        }
        &.suggest .btn-search {
            border-bottom-right-radius: 0;
        }

        .suggestion {
            display: block;
            visibility: hidden;
            position: absolute;
            top: @barHeight;
            width: 100%;
            border-top: 0.1rem solid #EEE;
            border-radius: 0 0 @barRadius @barRadius;
            background-color: #FFF;
            overflow: hidden;
            // 延迟隐藏
            transition: visibility 0.2s;

            ul {
                padding: 0.5rem 0;
                list-style: none;
                line-height: 1.5rem;
                font-size: 0.9rem;
                color: #000;
            }

            li {
                padding: 0.5rem 1rem;
                cursor: pointer;

                &:hover {
                    background-color: @colorWhite;
                }
            }
        }
        &.suggest .suggestion {
            visibility: visible;
        }
    }

    .search-type {
        display: block;
        margin: 4.5rem 0;
        font-size: 1rem;
        transition: opacity calc(@transitionTime * 4);

        &.fade {
            opacity: 0.5;
        }

        /deep/ .category {
            padding: 0.5rem 0;

            .title {
                margin: 0.5rem 0;
                text-align: left;
            }

            .el-radio {
                margin: 0.5rem;
                padding: 0.8rem 1rem;
                width: 15rem;
                border-radius: 0.25rem;
                border-left: solid 0.2rem transparent;
                background-color: #FFF;
                text-align: left;
                font-weight: normal;
                transition: border @transitionTime;

                &:hover {
                    border-left-color: @colorSecondary;
                    color: @colorSecondary;
                }

                &.is-checked {
                    border-left-color: @colorPrimary;
                    color: @colorPrimary;
                }
            }

            .el-radio__input {
                display: none;
            }

            .el-radio__label {
                display: flex;
                align-items: center;
                padding: 0;
                transition: color @transitionTime;

                i {
                    display: inline-block;
                    padding: 0.125rem 0;
                    font-style: normal;
                }

                .fn-icon {
                    flex-shrink: 0;
                    margin-right: 0.4rem;
                }

                .name {
                    flex-shrink: 0;
                }

                .desc {
                    flex-grow: 1;
                    margin-left: 0.5rem;
                    font-size: 0.8rem;
                    color: #CCC;
                }
            }
        }
    }
}

/deep/ .link-search {
    @height: 2.8rem;

    position: sticky;
    z-index: 100;
    top: 0;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    line-height: @height;
    overflow: hidden;

    > div,
    > input {
        border: none;
    }

    .el-input-group__prepend {
        background-color: #FFF;

        .el-select .el-input {
            width: 4.5rem;

            input {
                padding: 0 0.75rem;
            }
        }
    }

    .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 {
        height: 3.6em;
    }

    .link-item {
        flex-grow: 1;
        width: 0;

        > span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .title {
            opacity: 1;
        }

        .link {
            margin-top: 0.2rem;
            opacity: 0.5;
        }
    }
}

/deep/ .link-detail {
    width: 80%;
    max-width: 32rem;

    .row {
        display: flex;
        align-items: flex-start;
        line-height: 1.5rem;
    }

    .label {
        flex-shrink: 0;
        width: 3.5em;
        text-align: right;
    }

    .text {
        flex-grow: 1;
    }

    input[type="text"] {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        border-radius: 0;
        line-height: 1em;
        font-size: inherit;
        color: @colorSecondary;
    }
}
</style>

<style lang="less" scoped>
@media screen and (max-width: 400px) {
    .home-content {
        padding: 1rem;
    }

    .search-engine {
        .search-bar {
            top: 1rem;
        }

        .search-type {
            margin: 2rem 0;
        }

        .category {
            text-align: center;

            .el-radio {
                width: 90% !important;
            }
        }
    }
}
</style>