From 58386fd28cf3272e5c764b72b09a6023d14fb06b Mon Sep 17 00:00:00 2001
From: Frost-ZX <30585462+Frost-ZX@users.noreply.github.com>
Date: Thu, 17 Mar 2022 13:09:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |  522 +++----
 src/assets/js/navTools.js               |   30 +-
 src/assets/js/utils.js                  |   10 +-
 src/components/FloatingBtn.vue          |  350 ++---
 src/components/IconElement.vue          |  106 +-
 src/components/Tools/GenRandomStr.vue   |  306 +++--
 src/components/Tools/OtherNewWindow.vue |  138 +-
 src/components/Tools/OtherRunJS.vue     |  298 ++--
 src/views/AboutView.vue                 |  154 +--
 src/views/HomeView.vue                  | 1646 +++++++++++------------
 src/views/SettingsView.vue              |  224 +--
 src/views/ToolsDetail.vue               |   14 +-
 src/views/ToolsView.vue                 |   20 +-
 13 files changed, 1931 insertions(+), 1887 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 35a5bc5..6fe69a6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,307 +1,321 @@
 <template>
-    <div id="app">
-
-        <!-- 加载动画 -->
-        <div v-show="config.loading.subPage" class="loading-bar">
-            <div class="bar-content"></div>
-        </div>
-
-        <!-- 内容区域 -->
-        <el-container>
-
-            <!-- Header -->
-            <el-header class="main-header shadow-1">
-
-                <!-- LOGO -->
-                <div class="logo"></div>
-
-                <!-- 菜单 -->
-                <el-menu class="menu" :default-active="headerDefaultActive" mode="horizontal" router>
-
-                    <!-- 标题 -->
-                    <el-menu-item v-show="config.storage.showSiteTitle"
-                        index="title" class="title" disabled
-                    >Frost 网址导航</el-menu-item>
-
-                    <!-- 菜单项 -->
-                    <el-menu-item v-for="item in headerMenuItems" :key="item.id"
-                        class="item-normal" :index="item.id" :route="{ name: item.routeName }"
-                    >{{ item.label }}</el-menu-item>
-
-                    <!-- 切换下拉菜单 -->
-                    <el-menu-item :class="['item-dropdown', { active: showHeaderDropdown }]"
-                        @click="showHeaderDropdown = !showHeaderDropdown"
-                    >
-                        <i class="fa fa-bars"></i>
-                    </el-menu-item>
-
-                </el-menu>
-
-            </el-header>
-
-            <!-- 下拉菜单 -->
-            <el-menu :class="['header-dropdown', 'shadow-2', { show: showHeaderDropdown }]"
-                :default-active="headerDefaultActive" router
-            >
-
-                <!-- 菜单项 -->
-                <el-menu-item v-for="item in headerMenuItems" :key="item.id"
-                    class="item-normal" :index="item.id" :route="{ name: item.routeName }"
-                >{{ item.label }}</el-menu-item>
-
-            </el-menu>
-
-            <!-- Container -->
-            <keep-alive>
-                <router-view class="main-container" />
-            </keep-alive>
-
-        </el-container>
-
-        <!-- 悬浮按钮 -->
-        <FloatingBtn />
+  <div id="app">
 
+    <!-- 加载动画 -->
+    <div v-show="config.loading.subPage" class="loading-bar">
+      <div class="bar-content"></div>
     </div>
+
+    <!-- 内容区域 -->
+    <el-container>
+
+      <!-- Header -->
+      <el-header class="main-header shadow-1">
+
+        <!-- LOGO -->
+        <div class="logo"></div>
+
+        <!-- 菜单 -->
+        <el-menu class="menu" :default-active="headerDefaultActive" mode="horizontal" router>
+
+          <!-- 标题 -->
+          <el-menu-item
+            v-show="config.storage.showSiteTitle"
+            index="title"
+            class="title"
+            disabled
+          >Frost 网址导航</el-menu-item>
+
+          <!-- 菜单项 -->
+          <el-menu-item
+            v-for="item in headerMenuItems"
+            :key="item.id"
+            class="item-normal"
+            :index="item.id"
+            :route="{ name: item.routeName }"
+          >{{ item.label }}</el-menu-item>
+
+          <!-- 切换下拉菜单 -->
+          <el-menu-item
+            :class="['item-dropdown', { active: showHeaderDropdown }]"
+            @click="showHeaderDropdown = !showHeaderDropdown"
+          >
+            <i class="fa fa-bars"></i>
+          </el-menu-item>
+
+        </el-menu>
+
+      </el-header>
+
+      <!-- 下拉菜单 -->
+      <el-menu
+        :class="['header-dropdown', 'shadow-2', { show: showHeaderDropdown }]"
+        :default-active="headerDefaultActive"
+        router
+      >
+
+        <!-- 菜单项 -->
+        <el-menu-item
+          v-for="item in headerMenuItems"
+          :key="item.id"
+          class="item-normal"
+          :index="item.id"
+          :route="{ name: item.routeName }"
+        >{{ item.label }}</el-menu-item>
+
+      </el-menu>
+
+      <!-- Container -->
+      <keep-alive>
+        <router-view class="main-container" />
+      </keep-alive>
+
+    </el-container>
+
+    <!-- 悬浮按钮 -->
+    <FloatingBtn />
+
+  </div>
 </template>
 
 <script>
 import FloatingBtn from '@/components/FloatingBtn.vue';
 
 export default {
-    name: 'App',
-    components: {
-        FloatingBtn,
-    },
-    data() {
-        return {
-            config: this.$root.config,
-            debounce: {
-                saveConfig: null,
-                updateConfig: null
-            },
-            // Header 菜单项
-            headerMenuItems: [
-                {
-                    id: 'home',
-                    label: '主页',
-                    routeName: 'Home'
-                },
-                {
-                    id: 'tools',
-                    label: '小工具',
-                    routeName: 'Tools'
-                },
-                {
-                    id: 'settings',
-                    label: '设置',
-                    routeName: 'Settings'
-                },
-                {
-                    id: 'about',
-                    label: '关于',
-                    routeName: 'About'
-                }
-            ],
-            // 显示下拉菜单
-            showHeaderDropdown: false
-        }
-    },
-    computed: {
-        // Header 默认激活的菜单项
-        headerDefaultActive() {
-            var routeName = this.$route.name;
-            var item = '';
-
-            if (routeName) {
-                item = routeName.toLowerCase();
-            }
-
-            return item;
-        }
-    },
-    watch: {
-
-        // 路由名称
-        '$route.name': {
-            handler() {
-                // 切换路由时隐藏下拉菜单
-                this.showHeaderDropdown = false;
-            }
+  name: 'App',
+  components: {
+    FloatingBtn,
+  },
+  data() {
+    return {
+      config: this.$root.config,
+      debounce: {
+        saveConfig: null,
+        updateConfig: null
+      },
+      // Header 菜单项
+      headerMenuItems: [
+        {
+          id: 'home',
+          label: '主页',
+          routeName: 'Home'
         },
-
-        // 更新储存的设置
-        'config.storage': {
-            handler(obj) {
-                clearTimeout(this.debounce.saveConfig);
-
-                this.debounce.saveConfig = setTimeout(() => {
-                    localStorage.setItem('navConfig', JSON.stringify(obj));
-                }, 2000);
-            },
-            deep: true
+        {
+          id: 'tools',
+          label: '小工具',
+          routeName: 'Tools'
         },
-
-        // 改变字体大小
-        'config.storage.fontSize': {
-            handler(value) {
-                clearTimeout(this.debounce.updateConfig);
-
-                this.debounce.updateConfig = setTimeout(() => {
-                    // 改变字体大小
-                    document.documentElement.style.fontSize = value + 'px';
-                }, 1000);
-            }
-        }
-
-    },
-    mounted() {
-        var configStr = localStorage.getItem('navConfig');
-        var configObj = {};
-
-        if (configStr != null) {
-            configObj = JSON.parse(configStr);
-            Object.assign(this.config.storage, configObj);
+        {
+          id: 'settings',
+          label: '设置',
+          routeName: 'Settings'
+        },
+        {
+          id: 'about',
+          label: '关于',
+          routeName: 'About'
         }
+      ],
+      // 显示下拉菜单
+      showHeaderDropdown: false
     }
+  },
+  computed: {
+    // Header 默认激活的菜单项
+    headerDefaultActive() {
+      var routeName = this.$route.name;
+      var item = '';
+
+      if (routeName) {
+        item = routeName.toLowerCase();
+      }
+
+      return item;
+    }
+  },
+  watch: {
+
+    // 路由名称
+    '$route.name': {
+      handler() {
+        // 切换路由时隐藏下拉菜单
+        this.showHeaderDropdown = false;
+      }
+    },
+
+    // 更新储存的设置
+    'config.storage': {
+      handler(obj) {
+        clearTimeout(this.debounce.saveConfig);
+
+        this.debounce.saveConfig = setTimeout(() => {
+          localStorage.setItem('navConfig', JSON.stringify(obj));
+        }, 2000);
+      },
+      deep: true
+    },
+
+    // 改变字体大小
+    'config.storage.fontSize': {
+      handler(value) {
+        clearTimeout(this.debounce.updateConfig);
+
+        this.debounce.updateConfig = setTimeout(() => {
+          // 改变字体大小
+          document.documentElement.style.fontSize = value + 'px';
+        }, 1000);
+      }
+    }
+
+  },
+  mounted() {
+    var configStr = localStorage.getItem('navConfig');
+    var configObj = {};
+
+    if (configStr != null) {
+      configObj = JSON.parse(configStr);
+      Object.assign(this.config.storage, configObj);
+    }
+  }
 }
 </script>
 
 <style lang="less">
 .loading-bar {
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0.2rem;
+
+  .bar-content {
     position: absolute;
-    z-index: 1000;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 0.2rem;
+    width: 0;
+    height: 100%;
+    background-color: @colorPrimary;
+    animation: loadingBar 4s ease-in-out infinite;
+  }
 
-    .bar-content {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 0;
-        height: 100%;
-        background-color: @colorPrimary;
-        animation: loadingBar 4s ease-in-out infinite;
+  @keyframes loadingBar {
+    0% {
+      left: 0;
+      width: 0;
     }
-
-    @keyframes loadingBar {
-        0% {
-            left: 0;
-            width: 0;
-        }
-        50% {
-            left: 0;
-            width: 100%;
-        }
-        100% {
-            left: 100%;
-            width: 0;
-        }
+    50% {
+      left: 0;
+      width: 100%;
     }
+    100% {
+      left: 100%;
+      width: 0;
+    }
+  }
 }
 
 .main-header {
-    display: flex;
-    align-items: center;
-    z-index: 200;
-    height: @headerHeight !important;
-    background-color: #FFF;
+  display: flex;
+  align-items: center;
+  z-index: 200;
+  height: @headerHeight !important;
+  background-color: #FFF;
 
-    @media screen and (min-width: 30rem) {
-        .menu .item-dropdown {
-            display: none;
-        }
-    }
-
-    @media screen and (max-width: 30rem) {
-        .logo {
-            display: none;
-        }
-
-        .menu {
-            .item-normal {
-                display: none;
-            }
-
-            .item-dropdown {
-                position: absolute;
-                right: 0;
-                margin: 0;
-                padding: 0;
-
-                i {
-                    font-size: 1.75em;
-                }
-            }
-        }
+  @media screen and (min-width: 30rem) {
+    .menu .item-dropdown {
+      display: none;
     }
+  }
 
+  @media screen and (max-width: 30rem) {
     .logo {
-        flex-shrink: 0;
-        margin-right: 1rem;
-        width: 2rem;
-        height: 2rem;
-        background-image: url("./assets/icon/favicon.svg");
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
+      display: none;
     }
 
     .menu {
-        flex-grow: 1;
-        height: 2.5rem;
-        border: none !important;
+      .item-normal {
+        display: none;
+      }
 
-        > li {
-            padding: 0 1rem;
-            height: 100%;
-            line-height: 2.5rem;
+      .item-dropdown {
+        position: absolute;
+        right: 0;
+        margin: 0;
+        padding: 0;
 
-            &.is-active {
-                border-bottom-color: transparent;
-                color: @colorPrimary !important;
-            }
-        }
-
-        .title {
-            padding-left: 0;
-            font-size: 1.2rem;
-            color: @colorPrimary;
-            opacity: 1;
-            cursor: default;
+        i {
+          font-size: 1.75em;
         }
+      }
     }
+  }
+
+  .logo {
+    flex-shrink: 0;
+    margin-right: 1rem;
+    width: 2rem;
+    height: 2rem;
+    background-image: url("./assets/icon/favicon.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  .menu {
+    flex-grow: 1;
+    height: 2.5rem;
+    border: none !important;
+
+    > li {
+      padding: 0 1rem;
+      height: 100%;
+      line-height: 2.5rem;
+
+      &.is-active {
+        border-bottom-color: transparent;
+        color: @colorPrimary !important;
+      }
+    }
+
+    .title {
+      padding-left: 0;
+      font-size: 1.2rem;
+      color: @colorPrimary;
+      opacity: 1;
+      cursor: default;
+    }
+  }
 }
 
 .main-container {
-    height: calc(100vh - @headerHeight);
+  height: calc(100vh - @headerHeight);
 }
 </style>
 
 <style lang="less" scoped>
 .header-dropdown {
-    position: absolute !important;
-    z-index: 150;
-    top: @headerHeight;
-    left: 0;
-    width: 100%;
-    overflow: hidden;
-    transform: translateY(-100%);
-    transition: transform @transitionTime;
+  position: absolute !important;
+  z-index: 150;
+  top: @headerHeight;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  transform: translateY(-100%);
+  transition: transform @transitionTime;
 
-    &.show {
-        transform: translateY(0);
-    }
+  &.show {
+    transform: translateY(0);
+  }
 }
 
 .menu .item-dropdown {
-    i {
-        transition: color @transitionTime;
-    }
+  i {
+    transition: color @transitionTime;
+  }
 
-    &.active i {
-        color: @colorPrimary;
-    }
+  &.active i {
+    color: @colorPrimary;
+  }
 }
 </style>
diff --git a/src/assets/js/navTools.js b/src/assets/js/navTools.js
index aa23021..3fa4266 100644
--- a/src/assets/js/navTools.js
+++ b/src/assets/js/navTools.js
@@ -1,24 +1,30 @@
-// 工具信息列表
-let navTools = {
-    // 分类
+/**
+ * @typedef {object} ToolItem
+ * @property {string}  title     工具标题
+ * @property {string}  [desc]    工具简介
+ * @property {string}  component 组件名称
+ * @property {string}  [update]  更新日期
+ * @property {string}  [version] 版本号
+ * @property {boolean} enabled   启用状态
+ */
+
+/**
+ * @typedef {object} ToolCategory
+ * @property {string} title 分类标题
+ * @property {Object.<string, ToolItem>} list 工具列表
+ */
+
+/** @type {Object.<string, ToolCategory>} */
+const navTools = {
     calculation: {
-        // 分类标题
         title: '计算',
-        // 分类列表
         list: {
-            // 工具
             'download-time': {
-                // 工具标题
                 title: '下载用时计算',
-                // 工具简介
                 desc: '根据设定的文件大小和下载速度简单计算大约下载完成所需的时间。',
-                // 组件名称
                 component: 'CalcDownloadTime',
-                // 更新时间
                 update: '2021-12-06',
-                // 版本
                 version: '1',
-                // 启用状态
                 enabled: true
             },
             'ratio': {
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index 1a73e7e..b842c25 100644
--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
@@ -5,8 +5,7 @@ class Utils {
     constructor() { }
 
     /**
-     * 改变网页标题
-     * 
+     * @description 改变网页标题
      * @param {string} [value] 新的标题
      */
     changeTitle(value) {
@@ -14,8 +13,7 @@ class Utils {
     }
 
     /**
-     * JSONP
-     * 
+     * @description JSONP
      * @param {object} options 配置选项
      */
     jsonp(options) {
@@ -40,11 +38,9 @@ class Utils {
     }
 
     /**
-     * 以文本方式读取文件（异步）
-     * 
+     * @description 以文本方式读取文件（异步）
      * @param {Event} ev 输入框 change 事件对象
      * @param {boolean} resetValue 是否自动重置输入框 value 属性
-     * 
      * @returns {Promise<string[]>} `{ name: 文件名, content: 文件内容 }`
      */
     readFileAsText(ev, resetValue) {
diff --git a/src/components/FloatingBtn.vue b/src/components/FloatingBtn.vue
index 8bc6c61..b2e9b65 100644
--- a/src/components/FloatingBtn.vue
+++ b/src/components/FloatingBtn.vue
@@ -1,214 +1,214 @@
 <template>
-    <div ref="floatingBtn" class="floating-btn">
-        <div :class="['btns-inner', { show: showInner }]">
-            <button class="btn" type="button" title="折叠侧边菜单" @click="toggleSideCollapse()">
-                <i class="el-icon-menu" aria-hidden="true"></i>
-            </button>
-            <button class="btn" type="button" title="刷新" @click="refreshPage()">
-                <i class="el-icon-refresh-right" aria-hidden="true"></i>
-            </button>
-            <button class="btn" type="button" title="返回主页" @click="backToHome()">
-                <i class="el-icon-s-home" aria-hidden="true"></i>
-            </button>
-        </div>
-        <div class="btns-outer">
-            <button class="btn" type="button" title="菜单">
-                <i class="fa fa-bars" aria-hidden="true"></i>
-            </button>
-        </div>
+  <div ref="floatingBtn" class="floating-btn">
+    <div :class="['btns-inner', { show: showInner }]">
+      <button class="btn" type="button" title="折叠侧边菜单" @click="toggleSideCollapse()">
+        <i class="el-icon-menu" aria-hidden="true"></i>
+      </button>
+      <button class="btn" type="button" title="刷新" @click="refreshPage()">
+        <i class="el-icon-refresh-right" aria-hidden="true"></i>
+      </button>
+      <button class="btn" type="button" title="返回主页" @click="backToHome()">
+        <i class="el-icon-s-home" aria-hidden="true"></i>
+      </button>
     </div>
+    <div class="btns-outer">
+      <button class="btn" type="button" title="菜单">
+        <i class="fa fa-bars" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'FloatingBtn',
-    data() {
-        return {
-            config: this.$root.config.storage,
-            showInner: false
-        }
+  name: 'FloatingBtn',
+  data() {
+    return {
+      config: this.$root.config.storage,
+      showInner: false
+    }
+  },
+  mounted () {
+    this.initAnimation();
+  },
+  methods: {
+
+    /**
+     * 设置动画
+     */
+    initAnimation() {
+      var vm = this;
+      var el = vm.$refs['floatingBtn'];
+      var btns = el.querySelectorAll('.btn');
+      var className = 'animate';
+
+      btns.forEach((elem) => {
+        elem.addEventListener('click', function () {
+          this.classList.remove(className);
+          setTimeout(() => {
+            this.classList.add(className);
+            vm.toggleInnerBtns();
+          }, 20);
+        });
+      });
     },
-    mounted () {
-        this.initAnimation();
+
+    /**
+     * 切换按钮显示
+     */
+    toggleInnerBtns() {
+      this.showInner = !this.showInner;
     },
-    methods: {
 
-        /**
-         * 设置动画
-         */
-        initAnimation() {
-            var vm = this;
-            var el = vm.$refs['floatingBtn'];
-            var btns = el.querySelectorAll('.btn');
-            var className = 'animate';
-
-            btns.forEach((elem) => {
-                elem.addEventListener('click', function () {
-                    this.classList.remove(className);
-                    setTimeout(() => {
-                        this.classList.add(className);
-                        vm.toggleInnerBtns();
-                    }, 20);
-                });
-            });
-        },
-
-        /**
-         * 切换按钮显示
-         */
-        toggleInnerBtns() {
-            this.showInner = !this.showInner;
-        },
-
-        /**
-         * 返回主页
-         */
-        backToHome() {
-            var routeName = 'Home';
-
-            if (this.$route.name != routeName) {
-                this.$router.push({
-                    name: routeName
-                }).then(() => {
-                    window.location.reload();
-                });
-            } else {
-                this.$message({
-                    duration: 2000,
-                    message: '已经在主页啦~',
-                    type: 'warning'
-                });
-            }
-        },
-
-        /**
-         * 刷新
-         */
-        refreshPage() {
-            window.location.reload();
-        },
-
-        /**
-         * 切换侧边菜单折叠状态
-         */
-        toggleSideCollapse() {
-            var cfg = this.config;
-            cfg.sideMenuCollapse = !cfg.sideMenuCollapse;
-        },
+    /**
+     * 返回主页
+     */
+    backToHome() {
+      var routeName = 'Home';
 
+      if (this.$route.name != routeName) {
+        this.$router.push({
+          name: routeName
+        }).then(() => {
+          window.location.reload();
+        });
+      } else {
+        this.$message({
+          duration: 2000,
+          message: '已经在主页啦~',
+          type: 'warning'
+        });
+      }
     },
+
+    /**
+     * 刷新
+     */
+    refreshPage() {
+      window.location.reload();
+    },
+
+    /**
+     * 切换侧边菜单折叠状态
+     */
+    toggleSideCollapse() {
+      var cfg = this.config;
+      cfg.sideMenuCollapse = !cfg.sideMenuCollapse;
+    },
+
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .floating-btn {
-    position: fixed;
-    z-index: 5000;
-    right: 2rem;
-    bottom: 2rem;
-    text-align: center;
+  position: fixed;
+  z-index: 5000;
+  right: 2rem;
+  bottom: 2rem;
+  text-align: center;
 
-    .btns-inner.show .btn {
-        width: 2.6rem;
-        height: 2.6rem;
-        font-size: 1rem;
-        color: #FFF;
-    }
+  .btns-inner.show .btn {
+    width: 2.6rem;
+    height: 2.6rem;
+    font-size: 1rem;
+    color: #FFF;
+  }
 
-    @media screen and (max-width: 400px) {
-        right: 1.5rem;
-        bottom: 1.5rem;
-    }
+  @media screen and (max-width: 400px) {
+    right: 1.5rem;
+    bottom: 1.5rem;
+  }
 }
 
 .btns-inner {
-    display: inline-block;
+  display: inline-block;
 
-    .btn {
-        width: 0;
-        height: 0;
-        background-color: @colorSecondary;
-        font-size: 0;
-        color: transparent;
-        transition: all @transitionTime;
+  .btn {
+    width: 0;
+    height: 0;
+    background-color: @colorSecondary;
+    font-size: 0;
+    color: transparent;
+    transition: all @transitionTime;
 
-        &:not(:first-child) {
-            margin-top: 0.75rem;
-        }
+    &:not(:first-child) {
+      margin-top: 0.75rem;
     }
+  }
 }
 
 .btns-outer {
-    display: block;
+  display: block;
 
-    .btn {
-        margin-top: 1rem;
-        width: 3.2rem;
-        height: 3.2rem;
-        background-color: @colorPrimary;
-    }
+  .btn {
+    margin-top: 1rem;
+    width: 3.2rem;
+    height: 3.2rem;
+    background-color: @colorPrimary;
+  }
 }
 
 .btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    right: 0;
-    bottom: 0;
-    box-shadow: 0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.14),
-        0 0.2rem 0.1rem -0.15rem rgba(0, 0, 0, 0.12),
-        0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.20);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  right: 0;
+  bottom: 0;
+  box-shadow: 0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.14),
+    0 0.2rem 0.1rem -0.15rem rgba(0, 0, 0, 0.12),
+    0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.20);
+  border-radius: 50%;
+  font-size: 1rem;
+  color: #FFF;
+  overflow: hidden;
+  cursor: pointer;
+
+  &::before, &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
     border-radius: 50%;
-    font-size: 1rem;
-    color: #FFF;
-    overflow: hidden;
-    cursor: pointer;
+    background-color: #FFF;
+    opacity: 0;
+    transition: opacity @transitionTime;
+    transform: translate(-50%, -50%);
+  }
 
-    &::before, &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        background-color: #FFF;
-        opacity: 0;
-        transition: opacity @transitionTime;
-        transform: translate(-50%, -50%);
-    }
+  &:hover::before {
+    opacity: 0.1;
+  }
 
-    &:hover::before {
-        opacity: 0.1;
-    }
-
-    &.animate::after {
-        animation: floatingBtnClick calc(@transitionTime * 2) linear;
-    }
+  &.animate::after {
+    animation: floatingBtnClick calc(@transitionTime * 2) linear;
+  }
 }
 
 @keyframes floatingBtnClick {
-    0% {
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-    25% {
-        opacity: 0.2;
-    }
-    50% {
-        width: 100%;
-        height: 100%;
-    }
-    75% {
-        opacity: 0.2;
-    }
-    100% {
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-    }
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  25% {
+    opacity: 0.2;
+  }
+  50% {
+    width: 100%;
+    height: 100%;
+  }
+  75% {
+    opacity: 0.2;
+  }
+  100% {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
 }
 </style>
diff --git a/src/components/IconElement.vue b/src/components/IconElement.vue
index aeda200..e3226c3 100644
--- a/src/components/IconElement.vue
+++ b/src/components/IconElement.vue
@@ -1,67 +1,67 @@
 <template>
-    <i class="icon-element bg-center-contain" :style="iconStyle"></i>
+  <i class="icon-element bg-center-contain" :style="iconStyle"></i>
 </template>
 
 <script>
 export default {
-    name: 'IconElement',
-    props: {
-        // 来源（inner、outer）
-        from: {
-            type: String,
-            default: 'inner'
-        },
-        // 路径
-        // 若为 inner，自动添加 @/assets/icon/
-        path: {
-            type: String,
-            default: 'unknown.svg'
-        },
-        // 尺寸
-        size: {
-            type: String,
-            default: '1em'
-        },
-        // 显示图标
-        showIcon: {
-            type: Boolean,
-            default: true
-        }
+  name: 'IconElement',
+  props: {
+    // 来源（inner、outer）
+    from: {
+      type: String,
+      default: 'inner'
     },
-    computed: {
-        // 图标样式
-        iconStyle() {
-            var style = {
-                width: this.size,
-                height: this.size
-            };
-            var iconPath = '';
-
-            // 不显示图标内容
-            if (!this.showIcon) {
-                return style;
-            }
-
-            if (this.from === 'inner') {
-                // 内部
-                iconPath = require(`@/assets/icon/${this.path}`);
-            } else if (this.from === 'outer') {
-                // 外部
-                iconPath = this.path;
-            }
-
-            style.backgroundImage = `url('${iconPath}')`;
-
-            return style;
-        }
+    // 路径
+    // 若为 inner，自动添加 @/assets/icon/
+    path: {
+      type: String,
+      default: 'unknown.svg'
+    },
+    // 尺寸
+    size: {
+      type: String,
+      default: '1em'
+    },
+    // 显示图标
+    showIcon: {
+      type: Boolean,
+      default: true
     }
+  },
+  computed: {
+    // 图标样式
+    iconStyle() {
+      var style = {
+        width: this.size,
+        height: this.size
+      };
+      var iconPath = '';
+
+      // 不显示图标内容
+      if (!this.showIcon) {
+        return style;
+      }
+
+      if (this.from === 'inner') {
+        // 内部
+        iconPath = require(`@/assets/icon/${this.path}`);
+      } else if (this.from === 'outer') {
+        // 外部
+        iconPath = this.path;
+      }
+
+      style.backgroundImage = `url('${iconPath}')`;
+
+      return style;
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
 .icon-element {
-    display: inline-block;
-    vertical-align: middle;
-    font-style: normal;
+  display: inline-block;
+  vertical-align: middle;
+  font-style: normal;
 }
 </style>
diff --git a/src/components/Tools/GenRandomStr.vue b/src/components/Tools/GenRandomStr.vue
index 12c4479..c591d48 100644
--- a/src/components/Tools/GenRandomStr.vue
+++ b/src/components/Tools/GenRandomStr.vue
@@ -1,164 +1,190 @@
 <template>
-    <div class="tool-page">
-
-        <div class="info">
-            <div class="title">配置选项 &amp; 结果</div>
-            <div class="content">
-                <el-form label-width="6rem">
-                    <!-- 字符串长度 -->
-                    <el-form-item label="字符串长度">
-                        <el-input v-model.number="info.strLength" type="number" min="1" max="1024"></el-input>
-                    </el-form-item>
-                    <!-- 字符串格式 -->
-                    <el-form-item label="字符串格式">
-                        <el-checkbox v-model="info.option.hasNum"
-                            name="option" label="hasNum"
-                        >数字</el-checkbox>
-                        <el-checkbox v-model="info.option.hasChar"
-                            name="option" label="hasChar"
-                        >字母</el-checkbox>
-                        <el-checkbox v-model="info.option.hasSymbol"
-                            name="option" label="hasSymbol"
-                        >其他符号</el-checkbox>
-                        <el-checkbox v-model="info.option.caseSensitive"
-                            name="option" label="caseSensitive"
-                        >大小写</el-checkbox>
-                        <el-checkbox v-model="info.option.lowerCase"
-                            name="option" label="lowerCase"
-                        >全小写（需关闭“大小写”）</el-checkbox>
-                    </el-form-item>
-                    <!-- 生成结果 -->
-                    <el-form-item label="生成结果">
-                        <el-input v-model="info.result" type="text" readonly></el-input>
-                    </el-form-item>
-                </el-form>
-            </div>
-        </div>
-
-        <div class="action">
-            <div class="title">操作</div>
-            <div class="content">
-                <el-button type="primary" @click="btnGenerate()">生成</el-button>
-            </div>
-        </div>
-
-        <div class="reference">
-            <div class="title">参考资料</div>
-            <div class="content">
-                <el-link href="https://www.cnblogs.com/hankuksui/p/9892729.html" target="_blank" type="primary">博客园 - hankuksui</el-link>
-            </div>
-        </div>
+  <div class="tool-page">
 
+    <div class="info">
+      <div class="title">配置选项 &amp; 结果</div>
+      <div class="content">
+        <el-form label-width="6rem">
+          <!-- 字符串长度 -->
+          <el-form-item label="字符串长度">
+            <el-input
+              v-model.number="info.strLength"
+              type="number"
+              min="1"
+              max="1024"
+            ></el-input>
+          </el-form-item>
+          <!-- 字符串格式 -->
+          <el-form-item label="字符串格式">
+            <el-checkbox
+              v-model="info.option.hasNum"
+              name="option"
+              label="hasNum"
+            >数字</el-checkbox>
+            <el-checkbox
+              v-model="info.option.hasChar"
+              name="option"
+              label="hasChar"
+            >字母</el-checkbox>
+            <el-checkbox
+              v-model="info.option.hasSymbol"
+              name="option"
+              label="hasSymbol"
+            >其他符号</el-checkbox>
+            <el-checkbox
+              v-model="info.option.caseSensitive"
+              name="option"
+              label="caseSensitive"
+            >大小写</el-checkbox>
+            <el-checkbox
+              v-model="info.option.lowerCase"
+              name="option"
+              label="lowerCase"
+            >全小写（需关闭“大小写”）</el-checkbox>
+          </el-form-item>
+          <!-- 生成结果 -->
+          <el-form-item label="生成结果">
+            <el-input
+              v-model="info.result"
+              type="text"
+              readonly
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
+
+    <div class="action">
+      <div class="title">操作</div>
+      <div class="content">
+        <el-button
+          type="primary"
+          @click="btnGenerate()"
+        >生成</el-button>
+      </div>
+    </div>
+
+    <div class="reference">
+      <div class="title">参考资料</div>
+      <div class="content">
+        <el-link
+          href="https://www.cnblogs.com/hankuksui/p/9892729.html"
+          target="_blank"
+          type="primary"
+        >博客园 - hankuksui</el-link>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'GenRandomStr',
-    data() {
-        return {
-            info: {
-                strLength: 8,
-                option: {
-                    caseSensitive: true,
-                    hasNum: true,
-                    hasChar: true,
-                    hasSymbol: false,
-                    lowerCase: false
-                },
-                result: ''
-            }
-        }
-    },
-    methods: {
-
-        /**
-         * 生成
-         */
-        btnGenerate() {
-            var len = this.info.strLength;
-            var op = this.info.option;
-            var r = this.genRandomStr(len, op.hasNum, op.hasChar, op.hasSymbol, op.caseSensitive, op.lowerCase);
-
-            this.info.result = r;
+  name: 'GenRandomStr',
+  data() {
+    return {
+      info: {
+        strLength: 8,
+        option: {
+          caseSensitive: true,
+          hasNum: true,
+          hasChar: true,
+          hasSymbol: false,
+          lowerCase: false
         },
+        result: ''
+      }
+    }
+  },
+  methods: {
 
-        /**
-         * 生成随机字符串
-         * 
-         * @param {number} strLength 长度
-         * @param {boolean} hasNum 是否包含数字
-         * @param {boolean} hasChar 是否包含字母
-         * @param {boolean} hasSymbol 是否包含其他符号
-         * @param {boolean} caseSensitive 是否包含大小写
-         * @param {boolean} lowerCase 是否全小写（当 caseSensitive 为 false 时起作用）
-         * 
-         * @returns {string} 生成的字符串
-         */
-        genRandomStr(strLength, hasNum, hasChar, hasSymbol, caseSensitive, lowerCase) {
-            var result = '请选中数字、字母或其他符号的其中一项！';
+    /**
+     * 生成
+     */
+    btnGenerate() {
+      var len = this.info.strLength;
+      var op = this.info.option;
+      var r = this.genRandomStr(len, op.hasNum, op.hasChar, op.hasSymbol, op.caseSensitive, op.lowerCase);
 
-            if (hasNum === false && hasChar === false && hasSymbol === false) {
-                return result;
-            }
+      this.info.result = r;
+    },
 
-            result = '';
+    /**
+     * 生成随机字符串
+     * 
+     * @param {number} strLength 长度
+     * @param {boolean} hasNum 是否包含数字
+     * @param {boolean} hasChar 是否包含字母
+     * @param {boolean} hasSymbol 是否包含其他符号
+     * @param {boolean} caseSensitive 是否包含大小写
+     * @param {boolean} lowerCase 是否全小写（当 caseSensitive 为 false 时起作用）
+     * 
+     * @returns {string} 生成的字符串
+     */
+    genRandomStr(strLength, hasNum, hasChar, hasSymbol, caseSensitive, lowerCase) {
+      var result = '请选中数字、字母或其他符号的其中一项！';
 
-            for (var i = strLength; i > 0; i--) {
-                let num = Math.floor((Math.random() * 94) + 33);
-                let flag = ((
-                    (hasNum === false) && ((num >= 48) && (num <= 57))
-                ) || (
-                    (hasChar === false) && ((
-                        (num >= 65) && (num <= 90)
-                    ) || (
-                        (num >= 97) && (num <= 122)
-                    ))
-                ) || (
-                    (hasSymbol === false) && ((
-                        (num >= 33) && (num <= 47)
-                    ) || (
-                        (num >= 58) && (num <= 64)
-                    ) || (
-                        (num >= 91) && (num <= 96)
-                    ) || (
-                        (num >= 123) && (num <= 127)
-                    )
-                )));
+      if (hasNum === false && hasChar === false && hasSymbol === false) {
+        return result;
+      }
 
-                if (flag) {
-                    i++;
-                    continue;
-                }
+      result = '';
 
-                /**
-                 * | CharCode   | 符号   |
-                 * | :--------- | :----- |
-                 * | 033 -> 047 | ! -> / |
-                 * | 048 -> 057 | 0 -> 9 |
-                 * | 058 -> 064 | : -> @ |
-                 * | 065 -> 090 | A -> Z |
-                 * | 091 -> 096 | [ -> ` |
-                 * | 097 -> 122 | a -> z |
-                 * | 123 -> 127 | { ->   |
-                 */
+      for (var i = strLength; i > 0; i--) {
+        let num = Math.floor((Math.random() * 94) + 33);
+        let flag = ((
+          (hasNum === false) && ((num >= 48) && (num <= 57))
+        ) || (
+          (hasChar === false) && ((
+            (num >= 65) && (num <= 90)
+          ) || (
+            (num >= 97) && (num <= 122)
+          ))
+        ) || (
+          (hasSymbol === false) && ((
+            (num >= 33) && (num <= 47)
+          ) || (
+            (num >= 58) && (num <= 64)
+          ) || (
+            (num >= 91) && (num <= 96)
+          ) || (
+            (num >= 123) && (num <= 127)
+          )
+        )));
 
-                result += String.fromCharCode(num);
-            }
-
-            if (caseSensitive === false) {
-                result = (lowerCase ? result.toLocaleLowerCase() : result.toUpperCase());
-            }
-
-            return result;
+        if (flag) {
+          i++;
+          continue;
         }
 
-    },
+        /**
+         * | CharCode   | 符号   |
+         * | :--------- | :----- |
+         * | 033 -> 047 | ! -> / |
+         * | 048 -> 057 | 0 -> 9 |
+         * | 058 -> 064 | : -> @ |
+         * | 065 -> 090 | A -> Z |
+         * | 091 -> 096 | [ -> ` |
+         * | 097 -> 122 | a -> z |
+         * | 123 -> 127 | { ->   |
+         */
+
+        result += String.fromCharCode(num);
+      }
+
+      if (caseSensitive === false) {
+        result = (lowerCase ? result.toLocaleLowerCase() : result.toUpperCase());
+      }
+
+      return result;
+    }
+
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .content {
-    max-width: 30rem;
+  max-width: 30rem;
 }
 </style>
diff --git a/src/components/Tools/OtherNewWindow.vue b/src/components/Tools/OtherNewWindow.vue
index c060009..1adc59f 100644
--- a/src/components/Tools/OtherNewWindow.vue
+++ b/src/components/Tools/OtherNewWindow.vue
@@ -1,93 +1,93 @@
 <template>
-    <div class="tool-page">
+  <div class="tool-page">
 
-        <div class="info">
-            <div class="title">信息</div>
-            <div class="content">
-                <div class="link">
-                    <span class="label">目标链接：</span>
-                    <el-input v-model="info.link" type="text" placeholder="需要包含协议（例如 https://）" />
-                </div>
-                <div class="size">
-                    <span class="label">窗口大小：</span>
-                    <el-input v-model="info.size.width" type="number" min="1" placeholder="宽度（默认 400）" />
-                    <el-input v-model="info.size.height" type="number" min="1" placeholder="高度（默认 300）" />
-                </div>
-            </div>
+    <div class="info">
+      <div class="title">信息</div>
+      <div class="content">
+        <div class="link">
+          <span class="label">目标链接：</span>
+          <el-input v-model="info.link" type="text" placeholder="需要包含协议（例如 https://）" />
         </div>
-
-        <div class="action">
-            <div class="title">操作</div>
-            <div class="content">
-                <el-button type="primary" @click="btnOpen()">打开</el-button>
-                <el-button type="danger" @click="btnClear()">清空</el-button>
-            </div>
+        <div class="size">
+          <span class="label">窗口大小：</span>
+          <el-input v-model="info.size.width" type="number" min="1" placeholder="宽度（默认 400）" />
+          <el-input v-model="info.size.height" type="number" min="1" placeholder="高度（默认 300）" />
         </div>
-
+      </div>
     </div>
+
+    <div class="action">
+      <div class="title">操作</div>
+      <div class="content">
+        <el-button type="primary" @click="btnOpen()">打开</el-button>
+        <el-button type="danger" @click="btnClear()">清空</el-button>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'OtherNewWindow',
-    data() {
-        return {
-            info: {
-                link: '',
-                size: {
-                    width: '',
-                    height: ''
-                }
-            }
+  name: 'OtherNewWindow',
+  data() {
+    return {
+      info: {
+        link: '',
+        size: {
+          width: '',
+          height: ''
         }
+      }
+    }
+  },
+  methods: {
+
+    // 打开
+    btnOpen() {
+      var link = this.info.link || 'https://github.com/Frost-ZX';
+      var width = this.info.size.width || '400';
+      var height = this.info.size.height || '300';
+      var features = `height=${height}, width=${width}, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=yes, status=yes`;
+
+      window.open(link, '_blank', features);
     },
-    methods: {
 
-        // 打开
-        btnOpen() {
-            var link = this.info.link || 'https://github.com/Frost-ZX';
-            var width = this.info.size.width || '400';
-            var height = this.info.size.height || '300';
-            var features = `height=${height}, width=${width}, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=yes, status=yes`;
-
-            window.open(link, '_blank', features);
-        },
-
-        // 清空
-        btnClear() {
-            // 重置 info
-            this.info = {
-                link: '',
-                size: {
-                    width: '',
-                    height: ''
-                }
-            };
+    // 清空
+    btnClear() {
+      // 重置 info
+      this.info = {
+        link: '',
+        size: {
+          width: '',
+          height: ''
         }
+      };
+    }
 
-    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .content {
-    max-width: 40rem;
+  max-width: 40rem;
 
-    > div {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        margin: 0.5rem 0;
-    }
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0.5rem 0;
+  }
 
-    .label {
-        display: inline-block;
-        flex-shrink: 0;
-        width: 5rem;
-    }
+  .label {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 5rem;
+  }
 
-    .el-input {
-        margin: 0 0.5rem;
-    }
+  .el-input {
+    margin: 0 0.5rem;
+  }
 }
 </style>
diff --git a/src/components/Tools/OtherRunJS.vue b/src/components/Tools/OtherRunJS.vue
index 53f1be4..1f2a17d 100644
--- a/src/components/Tools/OtherRunJS.vue
+++ b/src/components/Tools/OtherRunJS.vue
@@ -1,34 +1,36 @@
 <template>
-    <div class="tool-page">
-
-        <!-- 输入 -->
-        <div class="input">
-            <div class="title">代码</div>
-            <div class="text">
-                <textarea ref="jsInput" placeholder="代码"></textarea>
-            </div>
-        </div>
-
-        <!-- 操作 -->
-        <div class="action">
-            <div class="title">操作</div>
-            <div class="btns">
-                <el-button type="primary" @click="btnRun()">执行</el-button>
-                <el-button type="danger" @click="btnClear()">清空</el-button>
-            </div>
-        </div>
-
-        <!-- 输出 -->
-        <div class="output">
-            <div class="title">输出</div>
-            <div class="text">
-                <p v-for="line in output.lines" :key="line.id"
-                    :class="['line', line.type]"
-                >{{ line.message }}</p>
-            </div>
-        </div>
+  <div class="tool-page">
 
+    <!-- 输入 -->
+    <div class="input">
+      <div class="title">代码</div>
+      <div class="text">
+        <textarea ref="jsInput" placeholder="代码"></textarea>
+      </div>
     </div>
+
+    <!-- 操作 -->
+    <div class="action">
+      <div class="title">操作</div>
+      <div class="btns">
+        <el-button type="primary" @click="btnRun()">执行</el-button>
+        <el-button type="danger" @click="btnClear()">清空</el-button>
+      </div>
+    </div>
+
+    <!-- 输出 -->
+    <div class="output">
+      <div class="title">输出</div>
+      <div class="text">
+        <p
+          v-for="line in output.lines"
+          :key="line.id"
+          :class="['line', line.type]"
+        >{{ line.message }}</p>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -37,144 +39,144 @@ import 'codemirror/mode/javascript/javascript';
 import 'codemirror/lib/codemirror.css';
 
 export default {
-    name: 'OtherRunJS',
-    data() {
-        return {
-            input: {
-                editor: null,
-                value: ''
-            },
-            output: {
-                id: 0,
-                lines: []
-            }
+  name: 'OtherRunJS',
+  data() {
+    return {
+      input: {
+        editor: null,
+        value: ''
+      },
+      output: {
+        id: 0,
+        lines: []
+      }
+    }
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+
+    // 初始化
+    init() {
+      var jsInput = this.$refs['jsInput'];
+      var datas = this.input;
+
+      datas.editor = CodeMirror.fromTextArea(jsInput, {
+        indentWithTabs: false,
+        indentUnit: 4,
+        lineNumbers: true,
+        mode: 'javascript',
+        theme: 'default'
+      });
+
+      datas.editor.setOption('extraKeys', {
+        // Tab 转空格
+        Tab: function(cm) {
+          var spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
+          cm.replaceSelection(spaces);
         }
+      });
+
+      datas.editor.on('change', function (instance) {
+        // 同步 value
+        datas.value = instance.doc.getValue();
+      });
     },
-    mounted () {
-        this.init();
+
+    // 运行
+    btnRun() {
+      var output = this.output;
+
+      output.lines = [];
+
+      try {
+
+        window.eval(this.input.value);
+
+      } catch (err) {
+
+        let time = new Date();
+
+        output.id += 1;
+        output.lines.push({
+          id: output.id + '_' + time.getTime(),
+          message: err.message,
+          stack: err.stack,
+          type: 'error'
+        });
+
+      }
     },
-    methods: {
 
-        // 初始化
-        init() {
-            var jsInput = this.$refs['jsInput'];
-            var datas = this.input;
+    // 清空
+    btnClear() {
+      this.$confirm('确定要清空输入和输出的内容吗？', '', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
 
-            datas.editor = CodeMirror.fromTextArea(jsInput, {
-                indentWithTabs: false,
-                indentUnit: 4,
-                lineNumbers: true,
-                mode: 'javascript',
-                theme: 'default'
-            });
+        this.input.editor.doc.setValue('');
+        this.output.lines = [];
+        this.$message({
+          message: '已清除',
+          type: 'success'
+        });
 
-            datas.editor.setOption('extraKeys', {
-                // Tab 转空格
-                Tab: function(cm) {
-                    var spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
-                    cm.replaceSelection(spaces);
-                }
-            });
+      }).catch(() => {
 
-            datas.editor.on('change', function (instance) {
-                // 同步 value
-                datas.value = instance.doc.getValue();
-            });
-        },
+        this.$message({
+          message: '取消清除',
+          type: 'info'
+        });
 
-        // 运行
-        btnRun() {
-            var output = this.output;
+      });
+    }
 
-            output.lines = [];
-
-            try {
-
-                window.eval(this.input.value);
-
-            } catch (err) {
-
-                let time = new Date();
-
-                output.id += 1;
-                output.lines.push({
-                    id: output.id + '_' + time.getTime(),
-                    message: err.message,
-                    stack: err.stack,
-                    type: 'error'
-                });
-
-            }
-        },
-
-        // 清空
-        btnClear() {
-            this.$confirm('确定要清空输入和输出的内容吗？', '', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-
-                this.input.editor.doc.setValue('');
-                this.output.lines = [];
-                this.$message({
-                    message: '已清除',
-                    type: 'success'
-                });
-
-            }).catch(() => {
-
-                this.$message({
-                    message: '取消清除',
-                    type: 'info'
-                });
-
-            });
-        }
-
-    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .tool-page {
-    @lineHeight: 1.25rem;
+  @lineHeight: 1.25rem;
 
-    padding-bottom: 5rem;
+  padding-bottom: 5rem;
 
-    > div {
-        .text {
-            line-height: @lineHeight;
-            font-family: monospace;
-            font-size: 0.8rem;
-        }
+  > div {
+    .text {
+      line-height: @lineHeight;
+      font-family: monospace;
+      font-size: 0.8rem;
+    }
+  }
+
+  .input {
+    /deep/ .CodeMirror {
+      width: 100%;
+      height: calc(@lineHeight * 20 + 0.5rem);
+      box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
+      line-height: @lineHeight;
+    }
+  }
+
+  .output {
+    .text {
+      padding: 1rem;
+      height: calc(@lineHeight * 10);
+      border: 0.1rem solid #EEE;
+      border-radius: 0.32rem;
+      overflow: auto;
+      user-select: text;
+      resize: vertical;
     }
 
-    .input {
-        /deep/ .CodeMirror {
-            width: 100%;
-            height: calc(@lineHeight * 20 + 0.5rem);
-            box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
-            line-height: @lineHeight;
-        }
-    }
-
-    .output {
-        .text {
-            padding: 1rem;
-            height: calc(@lineHeight * 10);
-            border: 0.1rem solid #EEE;
-            border-radius: 0.32rem;
-            overflow: auto;
-            user-select: text;
-            resize: vertical;
-        }
-
-        .line {
-            &.error {
-                color: @colorRed;
-            }
-        }
+    .line {
+      &.error {
+        color: @colorRed;
+      }
     }
+  }
 }
 </style>
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index f4b1b5e..c44142a 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,95 +1,95 @@
 <template>
-    <el-container class="about">
-        <div class="wrapper shadow-2">
-
-            <div class="text">
-                <div class="title">简介</div>
-                <div class="content">
-                    <p>一个多功能的网址导航，绿色无广告。</p>
-                    <p>右键点击（PC端）或长按（移动端）链接项可查看链接详情。</p>
-                    <p>当前版本：2.0.0</p>
-                    <p>链接版本：{{ navLinks.version }}</p>
-                </div>
-            </div>
-
-            <div class="text">
-                <div class="title">开发人员</div>
-                <div class="content">
-                    <p>Frost-ZX</p>
-                </div>
-            </div>
-
-            <div class="text">
-                <div class="title">注意事项</div>
-                <div class="content">
-                    <p>部分链接由于不能及时更新，可能已过期（不存在、指向了错误的网站等），访问时请注意。</p>
-                    <p>若您在使用时发现相关情况，欢迎进行反馈。</p>
-                </div>
-            </div>
-
-            <div class="text">
-                <div class="title">GitHub</div>
-                <div class="content">
-                    <p>
-                        <el-link :href="info.github" target="_blank" type="primary">{{ info.github }}</el-link>
-                    </p>
-                </div>
-            </div>
+  <el-container class="about">
+    <div class="wrapper shadow-2">
 
+      <div class="text">
+        <div class="title">简介</div>
+        <div class="content">
+          <p>一个多功能的网址导航，绿色无广告。</p>
+          <p>右键点击（PC端）或长按（移动端）链接项可查看链接详情。</p>
+          <p>当前版本：2.0.0</p>
+          <p>链接版本：{{ navLinks.version }}</p>
         </div>
-    </el-container>
+      </div>
+
+      <div class="text">
+        <div class="title">开发人员</div>
+        <div class="content">
+          <p>Frost-ZX</p>
+        </div>
+      </div>
+
+      <div class="text">
+        <div class="title">注意事项</div>
+        <div class="content">
+          <p>部分链接由于不能及时更新，可能已过期（不存在、指向了错误的网站等），访问时请注意。</p>
+          <p>若您在使用时发现相关情况，欢迎进行反馈。</p>
+        </div>
+      </div>
+
+      <div class="text">
+        <div class="title">GitHub</div>
+        <div class="content">
+          <p>
+            <el-link :href="info.github" target="_blank" type="primary">{{ info.github }}</el-link>
+          </p>
+        </div>
+      </div>
+
+    </div>
+  </el-container>
 </template>
 
 <script>
 export default {
-    name: 'AboutView',
-    beforeRouteEnter(to, from, next) {
-        next(vm => {
-            vm.utils.changeTitle('关于');
-        });
-    },
-    data() {
-        return {
-            navLinks: this.$root.navLinks,
-            utils: this.$root.utils,
-            info: {
-                github: 'https://github.com/Frost-ZX/frost-navigation'
-            }
-        }
-    },
+  name: 'AboutView',
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.utils.changeTitle('关于');
+    });
+  },
+  data() {
+    return {
+      navLinks: this.$root.navLinks,
+      utils: this.$root.utils,
+      info: {
+        github: 'https://github.com/Frost-ZX/frost-navigation'
+      }
+    }
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .about {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2rem;
-    background-color: @colorWhite;
-    overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  background-color: @colorWhite;
+  overflow-y: auto;
 
-    .wrapper {
-        padding: 1.5rem 2rem;
-        width: 100%;
-        max-width: 50rem;
-        background-color: #FFF;
+  .wrapper {
+    padding: 1.5rem 2rem;
+    width: 100%;
+    max-width: 50rem;
+    background-color: #FFF;
+  }
+
+  .text {
+    padding: 0.5rem 0;
+
+    .title {
+      line-height: 2.5rem;
+      font-size: 1rem;
+      color: @textPrimary;
     }
 
-    .text {
-        padding: 0.5rem 0;
-
-        .title {
-            line-height: 2.5rem;
-            font-size: 1rem;
-            color: @textPrimary;
-        }
-
-        .content {
-            line-height: 1.8rem;
-            font-size: 0.85rem;
-            color: @textSecondary;
-        }
+    .content {
+      line-height: 1.8rem;
+      font-size: 0.85rem;
+      color: @textSecondary;
     }
+  }
 }
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 86aad73..00ba25a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,906 +1,906 @@
 <template>
-    <el-container class="home">
+  <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-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.suggest.list"
+                  :key="item.id"
+                  @click="searchEngine.keyword = item.label"
+                >
+                  <!-- 文本 -->
+                  <span class="label">{{ item.label }}</span>
+                  <!-- 来源 -->
+                  <el-tag
+                    class="tag"
+                    effect="plain"
+                    size="mini"
+                    type="success"
+                  >{{ searchEngine.suggest.name }}</el-tag>
+                </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"
             >
 
-                <!-- 搜索引擎 -->
-                <el-menu-item index="search">
-                    <i class="el-icon-search"></i>
-                    <span slot="title">搜索</span>
-                </el-menu-item>
+              <!-- 标题 -->
+              <div class="title">{{ category.title }}</div>
 
-                <!-- 全部链接 -->
-                <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.suggest.list"
-                                    :key="item.id"
-                                    @click="searchEngine.keyword = item.label"
-                                >
-                                    <!-- 文本 -->
-                                    <span class="label">{{ item.label }}</span>
-                                    <!-- 来源 -->
-                                    <el-tag
-                                        class="tag"
-                                        effect="plain"
-                                        size="mini"
-                                        type="success"
-                                    >{{ searchEngine.suggest.name }}</el-tag>
-                                </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"
-                            >
-                                <IconElement :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)"
-                    >
-                        <div class="row title">
-                            <span>{{ node.label }}</span>
-                            <span v-if="data.desc"> - {{ data.desc }}</span>
-                        </div>
-                        <div class="row link">
-                            <span>{{ data.link }}</span>
-                        </div>
-                    </div>
-                </el-tree>
+              <!-- 项 -->
+              <el-radio
+                v-for="item in category.list"
+                :key="item.name"
+                :label="item.name"
+                class="shadow-2"
+              >
+                <IconElement :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-main>
+          </el-radio-group>
 
-        <!-- 链接详情 -->
-        <el-dialog
-            :append-to-body="true"
-            custom-class="link-detail"
-            title="详情"
-            :visible="linkDetail.show"
-            @close="linkDetail.show = false"
+        </div>
+
+        <!-- 链接搜索框 -->
+        <el-input
+          v-show="show.searchLink"
+          v-model="searchLink.keyword"
+          class="link-search shadow-2"
+          placeholder="搜索链接"
+          clearable
         >
-            <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-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-container>
+        <!-- 链接列表树 -->
+        <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)"
+          >
+            <div class="row title">
+              <span>{{ node.label }}</span>
+              <span v-if="data.desc"> - {{ data.desc }}</span>
+            </div>
+            <div class="row link">
+              <span>{{ data.link }}</span>
+            </div>
+          </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 IconElement from '@/components/IconElement.vue';
 
 export default {
-    name: 'HomeView',
-    components: {
-        IconElement
+  name: 'HomeView',
+  components: {
+    IconElement
+  },
+  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,
+        suggest: {
+          list: [],
+          name: '',
+        },
+      },
+      // 导航链接
+      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.suggest.list.length > 0)
+      );
+
+      return isShow;
     },
-    beforeRouteEnter(to, from, next) {
-        next(vm => {
-            vm.utils.changeTitle();
+
+  },
+  watch: {
+    'searchEngine.keyword': {
+      handler(value) {
+        if (!this.config.searchSuggestion) {
+          return;
+        }
+        clearInterval(this.searchEngine.debounce);
+        this.searchEngine.debounce = setTimeout(() => {
+          value = window.encodeURIComponent(value);
+          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');
+      }
     },
-    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,
-                suggest: {
-                    list: [],
-                    name: '',
-                },
-            },
-            // 导航链接
-            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.suggest.list.length > 0)
-            );
-
-            return isShow;
+    /**
+     * 搜索引擎（获取关键词建议）
+     * 
+     * @param {string} keyword 当前输入的关键词
+     */
+    searchEngineGS(keyword) {
+      var suggest = this.searchEngine.suggest;
+      // 设置的搜索引擎名称
+      var configSE = this.config.searchEngine;
+      // 关键词建议来源信息（默认使用百度）
+      var reqURLs = [
+        {
+          name: '百度',
+          url: `https://www.baidu.com/sugrec?json=1&prod=pc&wd=${keyword}&cb=cbSES`
         },
-
-    },
-    watch: {
-        'searchEngine.keyword': {
-            handler(value) {
-                if (!this.config.searchSuggestion) {
-                    return;
-                }
-                clearInterval(this.searchEngine.debounce);
-                this.searchEngine.debounce = setTimeout(() => {
-                    value = window.encodeURIComponent(value);
-                    this.searchEngineGS(value);
-                }, 500);
-            }
+        {
+          name: 'bilibili',
+          url: `https://s.search.bilibili.com/main/suggest?func=suggest&main_ver=v1&term=${keyword}&jsonp=jsonp&callback=cbSES`
         },
-        '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: {
+      ];
+      var reqURL = reqURLs[0].url;
 
-        /** 
-         * 更改当前显示的分类
-         */
-        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;
-            }
+      suggest.list = [];
+      suggest.name = reqURLs[0].name;
 
-            this.searchLink.keyword = '';
-        },
+      if (keyword === '') {
+        return;
+      }
 
-        /**
-         * 查看详情
-         * 
-         * @param {object} datas 当前链接的数据
-         */
-        openDetail(datas) {
-            // 非链接 / 仅显示
-            if (datas.link === undefined) {
-                return;
-            }
+      // 根据当前搜索引擎选择请求地址
+      for (let i = 0; i < reqURLs.length; i++) {
+        let item = reqURLs[i];
+        if (item.name === configSE) {
+          reqURL = item.url;
+          suggest.name = item.name;
+          break;
+        }
+      }
 
-            var detail = this.linkDetail;
+      // 处理数据
+      var cbFunc = (data) => {
 
-            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;
-        },
+        var id = 0;                  // 结果 ID 
+        var reqName = suggest.name;  // 来源名称
+        
+        if (reqName === '百度') {
+          // [百度]
+          let result = (data.g || []);
 
-        /**
-         * 打开链接
-         * 
-         * @param {string} link 需要打开的链接
-         * @param {boolean} showOnly 是否仅显示链接
-         */
-        openLink(link, showOnly) {
-            if (link === undefined) {
-                return false;
-            }
+          if (result.length === 0) {
+            return;
+          }
 
-            if (showOnly) {
-                this.$message({
-                    duration: 5000,
-                    message: '请在链接详情中复制后手动打开',
-                    type: 'warning'
-                });
-            } else {
-                window.open(link, '_blank');
-            }
-        },
-
-        /**
-         * 搜索引擎（获取关键词建议）
-         * 
-         * @param {string} keyword 当前输入的关键词
-         */
-        searchEngineGS(keyword) {
-            var suggest = this.searchEngine.suggest;
-            // 设置的搜索引擎名称
-            var configSE = this.config.searchEngine;
-            // 关键词建议来源信息（默认使用百度）
-            var reqURLs = [
-                {
-                    name: '百度',
-                    url: `https://www.baidu.com/sugrec?json=1&prod=pc&wd=${keyword}&cb=cbSES`
-                },
-                {
-                    name: 'bilibili',
-                    url: `https://s.search.bilibili.com/main/suggest?func=suggest&main_ver=v1&term=${keyword}&jsonp=jsonp&callback=cbSES`
-                },
-            ];
-            var reqURL = reqURLs[0].url;
-
-            suggest.list = [];
-            suggest.name = reqURLs[0].name;
-
-            if (keyword === '') {
-                return;
-            }
-
-            // 根据当前搜索引擎选择请求地址
-            for (let i = 0; i < reqURLs.length; i++) {
-                let item = reqURLs[i];
-                if (item.name === configSE) {
-                    reqURL = item.url;
-                    suggest.name = item.name;
-                    break;
-                }
-            }
-
-            // 处理数据
-            var cbFunc = (data) => {
-
-                var id = 0;                  // 结果 ID 
-                var reqName = suggest.name;  // 来源名称
-                
-                if (reqName === '百度') {
-                    // [百度]
-                    let result = (data.g || []);
-
-                    if (result.length === 0) {
-                        return;
-                    }
-
-                    result.forEach((item) => {
-                        id += 1;
-                        suggest.list.push({
-                            id,
-                            label: item.q,
-                            highlight: keyword
-                        });
-                    });
-                } else if (reqName === 'bilibili') {
-                    // [bilibili]
-                    let result = (data.result ? (data.result.tag || []) : []);
-
-                    if (result.length === 0) {
-                        return;
-                    }
-
-                    result.forEach((item) => {
-                        id += 1;
-                        suggest.list.push({
-                            id,
-                            label: item.value,
-                            highlight: keyword
-                        });
-                    });
-                }
-
-            };
-
-            // 使用 JSONP 获取
-            this.utils.jsonp({
-                url: reqURL,
-                cbName: 'cbSES',
-                cbFunc
+          result.forEach((item) => {
+            id += 1;
+            suggest.list.push({
+              id,
+              label: item.q,
+              highlight: keyword
             });
-        },
+          });
+        } else if (reqName === 'bilibili') {
+          // [bilibili]
+          let result = (data.result ? (data.result.tag || []) : []);
 
-        /**
-         * 搜索引擎（搜索）
-         */
-        searchEngineSubmit() {
-            var vm = this;
-            var se = this.searchEngine;
-            var selectedSE = this.config.searchEngine;
-            var keyword = se.keyword;
-            var url = '';
+          if (result.length === 0) {
+            return;
+          }
 
-            if (keyword === '') {
-                return false;
-            } else {
-                keyword = window.encodeURIComponent(keyword);
-            }
+          result.forEach((item) => {
+            id += 1;
+            suggest.list.push({
+              id,
+              label: item.value,
+              highlight: 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;
-        },
+      };
 
+      // 使用 JSONP 获取
+      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;
+  position: relative;
+  z-index: 110;
+  width: auto !important;
+  overflow-x: hidden;
 
-    .side-nav {
-        min-height: 100%;
-        border: none;
-    }
+  .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;
+  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;
-    }
+  .wrapper {
+    width: 100%;
+    min-width: 16rem;
+    max-width: 64rem;
+  }
 }
 
 .search-engine {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
 .search-bar {
-    @barHeight: 2.8rem;
-    @barRadius: 0.3rem;
+  @barHeight: 2.8rem;
+  @barRadius: 0.3rem;
 
-    display: flex;
+  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;
-    position: sticky;
-    top: 2.5rem;
-    z-index: 100;
-    width: 100%;
-    max-width: 40rem;
-    height: @barHeight;
-    border-radius: @barRadius;
-    background-color: #FFF;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 2.8rem;
+    height: 2.8rem;
+    background-color: transparent;
+    font-size: 1.2rem;
+    cursor: pointer;
+  }
 
-    &.suggest {
-        border-radius: @barRadius @barRadius 0 0;
+  .btn-clear {
+    width: 2rem;
+    opacity: 0.5;
+    transition: opacity @transitionTime;
+
+    &:hover {
+      opacity: 1;
     }
+  }
 
-    .input {
-        flex-grow: 1;
-        padding-left: 1rem;
-        width: 0;
-        height: 100%;
-        outline: none;
+  .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;
+  }
 
-    .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 {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0.5rem 1rem;
-            cursor: pointer;
-
-            &:hover {
-                background-color: @colorWhite;
-            }
-        }
-
-        .label {
-            flex-grow: 1;
-            padding-right: 0.5em;
-        }
-
-        .tag {
-            flex-shrink: 0;
-        }
-    }
-    &.suggest .suggestion {
-        visibility: visible;
-    }
-}
-
-.search-type {
+  .suggestion {
     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;
+    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;
 
-    > div,
-    > input {
-        border: none;
+    ul {
+      padding: 0.5rem 0;
+      list-style: none;
+      line-height: 1.5rem;
+      font-size: 0.9rem;
+      color: #000;
     }
 
-    .el-input-group__prepend {
-        background-color: #FFF;
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.5rem 1rem;
+      cursor: pointer;
 
-        .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;
-
-        > div {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .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;
+      &:hover {
+        background-color: @colorWhite;
+      }
     }
 
     .label {
-        flex-shrink: 0;
-        width: 3.5em;
-        text-align: right;
+      flex-grow: 1;
+      padding-right: 0.5em;
     }
 
-    .text {
-        flex-grow: 1;
+    .tag {
+      flex-shrink: 0;
+    }
+  }
+  &.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;
     }
 
-    input[type="text"] {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        border: none;
-        border-radius: 0;
-        line-height: 1em;
-        font-size: inherit;
+    .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;
+
+    > div {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .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;
+  .home-content {
+    padding: 1rem;
+  }
+
+  .search-engine {
+    .search-bar {
+      top: 1rem;
     }
 
-    .search-engine {
-        .search-bar {
-            top: 1rem;
-        }
-
-        .search-type {
-            margin: 2rem 0;
-        }
-
-        .category {
-            text-align: center;
-
-            .el-radio {
-                width: 90% !important;
-            }
-        }
+    .search-type {
+      margin: 2rem 0;
     }
+
+    .category {
+      text-align: center;
+
+      .el-radio {
+        width: 90% !important;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 35a183a..eb17d64 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1,141 +1,141 @@
 <template>
-    <el-container class="settings">
-        <div class="wrapper shadow-2">
+  <el-container class="settings">
+    <div class="wrapper shadow-2">
 
-            <el-form label-position="left" label-width="12rem">
+      <el-form label-position="left" label-width="12rem">
 
-                <el-form-item label="字体大小" class="set-font">
-                    <el-input-number
-                        v-model="config.fontSize"
-                        :min="12"
-                        :max="32"
-                        controls-position="right"
-                        label="字体大小"
-                        size="small"
-                    ></el-input-number>
-                </el-form-item>
+        <el-form-item label="字体大小" class="set-font">
+          <el-input-number
+            v-model="config.fontSize"
+            :min="12"
+            :max="32"
+            controls-position="right"
+            label="字体大小"
+            size="small"
+          ></el-input-number>
+        </el-form-item>
 
-                <el-form-item label="显示网站标题">
-                    <el-switch v-model="config.showSiteTitle"></el-switch>
-                </el-form-item>
+        <el-form-item label="显示网站标题">
+          <el-switch v-model="config.showSiteTitle"></el-switch>
+        </el-form-item>
 
-                <el-form-item label="折叠主页侧边菜单">
-                    <el-switch v-model="config.sideMenuCollapse"></el-switch>
-                </el-form-item>
+        <el-form-item label="折叠主页侧边菜单">
+          <el-switch v-model="config.sideMenuCollapse"></el-switch>
+        </el-form-item>
 
-                <el-form-item label="获取搜索引擎关键词建议">
-                    <el-switch v-model="config.searchSuggestion"></el-switch>
-                </el-form-item>
+        <el-form-item label="获取搜索引擎关键词建议">
+          <el-switch v-model="config.searchSuggestion"></el-switch>
+        </el-form-item>
 
-                <el-form-item label="清除数据">
-                    <el-button
-                        type="danger"
-                        size="medium"
-                        @click="resetDatas('settings')"
-                    >清除设置</el-button>
-                    <el-button
-                        type="danger"
-                        size="medium"
-                        @click="resetDatas('cache')"
-                    >清除缓存</el-button>
-                </el-form-item>
+        <el-form-item label="清除数据">
+          <el-button
+            type="danger"
+            size="medium"
+            @click="resetDatas('settings')"
+          >清除设置</el-button>
+          <el-button
+            type="danger"
+            size="medium"
+            @click="resetDatas('cache')"
+          >清除缓存</el-button>
+        </el-form-item>
 
-            </el-form>
+      </el-form>
 
-        </div>
-    </el-container>
+    </div>
+  </el-container>
 </template>
 
 <script>
 export default {
-    name: 'SettingsView',
-    beforeRouteEnter(to, from, next) {
-        next(vm => {
-            vm.utils.changeTitle('设置');
-        });
-    },
-    data() {
-        return {
-            config: this.$root.config.storage,
-            utils: this.$root.utils
-        }
-    },
-    methods: {
-
-        /**
-         * 清除数据
-         * 
-         * @param {string} type 清除类型（cache、settings）
-         */
-        resetDatas(type) {
-            this.$confirm('确定要清除吗？', '', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-
-                if (type === 'cache') {
-                    localStorage.removeItem('navLinksCache');
-                } else if (type === 'settings') {
-                    localStorage.removeItem('navConfig');
-                } else {
-                    return
-                }
-
-                this.$message({
-                    message: '已清除，2s 后自动刷新',
-                    type: 'success'
-                });
-
-                setTimeout(() => {
-                    location.reload();
-                }, 2000);
-
-            }).catch(() => {
-
-                this.$message({
-                    message: '取消清除',
-                    type: 'info'
-                });
-
-            });
-        }
-
+  name: 'SettingsView',
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.utils.changeTitle('设置');
+    });
+  },
+  data() {
+    return {
+      config: this.$root.config.storage,
+      utils: this.$root.utils
     }
+  },
+  methods: {
+
+    /**
+     * 清除数据
+     * 
+     * @param {string} type 清除类型（cache、settings）
+     */
+    resetDatas(type) {
+      this.$confirm('确定要清除吗？', '', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+
+        if (type === 'cache') {
+          localStorage.removeItem('navLinksCache');
+        } else if (type === 'settings') {
+          localStorage.removeItem('navConfig');
+        } else {
+          return
+        }
+
+        this.$message({
+          message: '已清除，2s 后自动刷新',
+          type: 'success'
+        });
+
+        setTimeout(() => {
+          location.reload();
+        }, 2000);
+
+      }).catch(() => {
+
+        this.$message({
+          message: '取消清除',
+          type: 'info'
+        });
+
+      });
+    }
+
+  }
 }
 </script>
 
 <style lang="less" scoped>
 .settings {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2rem;
-    background-color: @colorWhite;
-    overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  background-color: @colorWhite;
+  overflow-y: auto;
 
-    .wrapper {
-        padding: 1.5rem 2rem;
-        width: 100%;
-        max-width: 50rem;
-        background-color: #FFF;
-    }
+  .wrapper {
+    padding: 1.5rem 2rem;
+    width: 100%;
+    max-width: 50rem;
+    background-color: #FFF;
+  }
 }
 
 .set-font {
-    /deep/ .el-input-number {
-        width: 7rem;
-    }
+  /deep/ .el-input-number {
+    width: 7rem;
+  }
 }
 
 /deep/ .el-form-item {
-    @media screen and (max-width: 520px) {
-        .el-form-item__label {
-            float: unset !important;
-        }
-        .el-form-item__content {
-            margin-left: 0 !important;
-        }
+  @media screen and (max-width: 520px) {
+    .el-form-item__label {
+      float: unset !important;
     }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
 }
 </style>
diff --git a/src/views/ToolsDetail.vue b/src/views/ToolsDetail.vue
index 75e5def..43219e2 100644
--- a/src/views/ToolsDetail.vue
+++ b/src/views/ToolsDetail.vue
@@ -9,13 +9,6 @@ import navTools from '@/assets/js/navTools.js';
 
 export default {
   name: 'ToolsDetail',
-  data() {
-    return {
-      utils: this.$root.utils,
-      toolList: navTools,
-      toolPage: null,
-    }
-  },
   beforeRouteEnter(to, from, next) {
     next(vm => {
       const { params, query } = vm.$route;
@@ -52,6 +45,13 @@ export default {
       });
     });
   },
+  data() {
+    return {
+      utils: this.$root.utils,
+      toolList: navTools,
+      toolPage: null,
+    }
+  },
 }
 </script>
 
diff --git a/src/views/ToolsView.vue b/src/views/ToolsView.vue
index bfb5ac7..76c1bac 100644
--- a/src/views/ToolsView.vue
+++ b/src/views/ToolsView.vue
@@ -61,16 +61,6 @@ import navTools from '@/assets/js/navTools.js';
 
 export default {
   name: 'ToolsView',
-  data() {
-    return {
-      utils: this.$root.utils,
-      toolList: navTools,
-      detail: {
-        show: false,
-        title: ''
-      },
-    }
-  },
   beforeRouteEnter(to, from, next) {
     next(vm => {
       const { name: rName, params: rParams } = vm.$route;
@@ -85,6 +75,16 @@ export default {
       }
     });
   },
+  data() {
+    return {
+      utils: this.$root.utils,
+      toolList: navTools,
+      detail: {
+        show: false,
+        title: ''
+      },
+    }
+  },
   methods: {
 
     /**