新的版本

src/App.vue

@@ -0,0 +1,58 @@
+<template>
+    <div id="app">
+        <el-container>
+
+            <!-- Header -->
+            <el-header class="main-header shadow-1">
+                <!-- LOGO -->
+                <el-avatar class="logo" shape="square" size="medium" src="./favicon.ico"></el-avatar>
+
+                <!-- 菜单 -->
+                <el-menu class="menu" default-active="home" mode="horizontal">
+                    <el-menu-item index="title" class="title" disabled>Frost 网址导航</el-menu-item>
+                    <el-menu-item index="home">主页</el-menu-item>
+                    <el-menu-item index="tools" disabled>小工具</el-menu-item>
+                </el-menu>
+            </el-header>
+
+            <!-- Container -->
+            <router-view class="main-container" />
+
+        </el-container>
+    </div>
+</template>
+
+<style lang="less">
+.main-header {
+    display: flex;
+    align-items: center;
+    z-index: 200;
+    height: @headerHeight !important;
+    background-color: #FFF;
+
+    .menu {
+        height: 2.5rem;
+        border: none !important;
+
+        > li {
+            height: 100%;
+            line-height: 2.5rem;
+
+            &.is-active {
+                color: @colorPrimary !important;
+            }
+        }
+
+        .title {
+            font-size: 1.2rem;
+            color: @colorPrimary;
+            opacity: 1;
+            cursor: default;
+        }
+    }
+}
+
+.main-container {
+    height: calc(100vh - @headerHeight);
+}
+</style>

src/assets/css/global.less

@@ -0,0 +1,60 @@
+/* -- 全局样式 -- */
+
+// 变量
+
+@headerHeight: 4rem;
+
+@colorPrimary: #409EFF;
+@colorSecondary: #67C23A;
+@colorWhite: #F5F5F5;
+
+// 滚动条
+
+::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 1rem;
+    background-color: #F5F5F5;
+
+    &:hover {
+        background-color: @colorPrimary;
+    }
+}
+
+// 标签
+
+html {
+    font-size: 16px;
+}
+
+body {
+    user-select: none;
+}
+
+// 阴影
+
+.shadow-1 {
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+}
+
+// 加载中（链接列表）
+
+.loading-link {
+    background-color: rgba(255, 255, 255, 0.5) !important;
+    backdrop-filter: blur(0.2rem);
+
+    .el-icon-loading {
+        font-size: 2rem !important;
+    }
+
+    .el-loading-text {
+        font-size: 1.5rem !important;
+    }
+}

src/assets/js/utils.js

@@ -0,0 +1,68 @@
+import { Loading } from 'element-ui';
+
+class Utils {
+
+    constructor() { }
+
+    /**
+     * 初始化链接列表，设置唯一ID
+     */
+    initNavLinkID() {
+        // 加载中提示
+        var loading = Loading.service({
+            customClass: 'loading-link',
+            lock: true,
+            spinner: 'el-icon-loading',
+            text: '载入中，请稍候'
+        });
+
+        var currentIndex = 0;
+        var currentIndexCpy = 0;
+
+        var fn = (obj) => {
+            currentIndex += 1;
+            obj.id = currentIndex;
+
+            // 有链接，无子路径
+            if (obj.links != undefined && obj.sub === undefined) {
+                obj.sub = [];
+            }
+
+            // 递归
+            if (obj.links != undefined) {
+                obj.links.forEach(item => {
+                    // 添加到子路径（适配 Element UI - Tree）
+                    obj.sub.push(item);
+                });
+            }
+
+            // 递归
+            if (obj.sub != undefined) {
+                obj.sub.forEach(item => {
+                    setTimeout(() => {
+                        fn(item);
+                    }, 0);
+                });
+            }
+        };
+
+        // 检测 currentIndex 是否已停止变化
+        var timer = setInterval(() => {
+            if (currentIndex == currentIndexCpy) {
+                clearInterval(timer);
+                // 加载中提示
+                loading.close();
+            }
+
+            // 同步
+            currentIndexCpy = currentIndex;
+        }, 1000);
+
+        return fn;
+    }
+
+}
+
+const utils = new Utils;
+
+export default utils;

src/main.js

@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import App from './App.vue';
+import router from './router';
+
+import navLinks from '../public/static/js/navLinks'
+import utils from './assets/js/utils'
+
+import 'ress/ress.css';
+import 'element-ui/lib/theme-chalk/index.css';
+
+(function () {
+    var init = utils.initNavLinkID();
+
+    navLinks.forEach(item => {
+        init(item);
+    });
+})();
+
+Vue.use(ElementUI);
+
+Vue.config.productionTip = false;
+
+new Vue({
+    router,
+    data: function () {
+        return {
+            navLinks,
+            utils
+        }
+    },
+    render: h => h(App)
+}).$mount('#app');

src/router/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import routes from './routes';
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+    routes
+});
+
+export default router;

src/router/routes.js

@@ -0,0 +1,16 @@
+import Home from '@/views/Home.vue';
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: Home
+    },
+    // {
+    //     path: '/about',
+    //     name: 'About',
+    //     component: () => import('@/views/About.vue')
+    // }
+];
+
+export default routes;

src/views/Home.vue

@@ -0,0 +1,160 @@
+<template>
+    <el-container class="home">
+
+        <!-- 侧边栏 -->
+        <el-aside class="home-aside">
+            <el-menu class="side-nav" default-active="0" @select="changeCategory">
+
+                <!-- 全部 -->
+                <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" :key="'list-' + itemIndex" :index="itemIndex.toString()">
+                    <i class="el-icon-menu"></i>
+                    <span slot="title">{{ item.title }}</span>
+                </el-menu-item>
+
+            </el-menu>
+        </el-aside>
+
+        <!-- 内容 -->
+        <el-main class="home-content">
+
+            <!-- 链接搜索框 -->
+            <el-input v-model="linkSearchText" class="link-search" placeholder="输入关键词以搜索链接"></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"
+            >
+                <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>
+            </el-tree>
+
+        </el-main>
+
+    </el-container>
+</template>
+
+<script>
+export default {
+    name: 'Home',
+    data() {
+        return {
+            // 所有链接
+            navLinks: this.$root.navLinks,
+            // 当前显示的链接
+            currentLinks: [],
+            // 搜索关键词
+            linkSearchText: '',
+            linkSearchDebounce: null
+        };
+    },
+    watch: {
+        'linkSearchText': {
+            handler(value) {
+                clearTimeout(this.linkSearchDebounce);
+
+                this.linkSearchDebounce = setTimeout(() => {
+                    this.$refs.linkTree.filter(value);
+                }, 500);
+            }
+        }
+    },
+    methods: {
+        log(...datas) {
+            console.log(datas);
+        },
+        /** 
+         * 更改当前显示的分类
+        */
+        changeCategory(index) {
+            if (index == 'all') {
+                this.currentLinks = this.navLinks;
+            } else {
+                this.currentLinks = this.navLinks[Number(index)].sub;
+            }
+        },
+        /**
+         * 打开链接
+         * 
+         * @param {string} link 需要打开的链接
+         */
+        openLink(link) {
+            if (link != undefined) {
+                window.open(link, '_blank');
+            }
+        },
+        /**
+         * 搜索链接
+         */
+        searchLink(value, data) {
+            // 关键词为空，显示全部
+            if (value == '') {
+                return true
+            }
+
+            // 过滤后
+            var result = (data.title.indexOf(value) !== -1) || (data.link && (data.link.indexOf(value) !== -1));
+            return result;
+        }
+    },
+    beforeRouteEnter(from, to, next) {
+        next(vm => {
+            setTimeout(() => {
+                vm.changeCategory(0);
+            }, 1000);
+        });
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.home-aside {
+    width: 18rem !important;
+    overflow-x: hidden;
+
+    .side-nav {
+        min-height: 100%;
+    }
+}
+
+.home-content {
+    position: relative;
+
+    .link-search {
+        position: sticky;
+        z-index: 100;
+        top: 0;
+        margin-bottom: 1rem;
+    }
+
+    .link-tree {
+        font-size: 14px;
+
+        /deep/ .el-tree-node__content {
+            height: 3.6em;
+        }
+
+        .link-item {
+            > span {
+                display: block;
+            }
+
+            .title {
+                font-weight: bold;
+            }
+
+            .link {
+                margin-top: 0.2rem;
+                opacity: 0.5;
+            }
+        }
+    }
+}
+</style>