优化代码

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>

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>

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>
 

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: {
 
     /**