优化代码

src/App.vue

@@ -19,17 +19,25 @@
         <el-menu class="menu" :default-active="headerDefaultActive" mode="horizontal" router>
 
           <!-- 标题 -->
-                    <el-menu-item v-show="config.storage.showSiteTitle"
+          <el-menu-item
-                        index="title" class="title" disabled
+            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"
+          <el-menu-item
-                        class="item-normal" :index="item.id" :route="{ name: item.routeName }"
+            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 }]"
+          <el-menu-item
+            :class="['item-dropdown', { active: showHeaderDropdown }]"
             @click="showHeaderDropdown = !showHeaderDropdown"
           >
             <i class="fa fa-bars"></i>
@@ -40,13 +48,19 @@
       </el-header>
 
       <!-- 下拉菜单 -->
-            <el-menu :class="['header-dropdown', 'shadow-2', { show: showHeaderDropdown }]"
+      <el-menu
-                :default-active="headerDefaultActive" router
+        :class="['header-dropdown', 'shadow-2', { show: showHeaderDropdown }]"
+        :default-active="headerDefaultActive"
+        router
       >
 
         <!-- 菜单项 -->
-                <el-menu-item v-for="item in headerMenuItems" :key="item.id"
+        <el-menu-item
-                    class="item-normal" :index="item.id" :route="{ name: item.routeName }"
+          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>

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': {

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) {

src/components/Tools/GenRandomStr.vue

@@ -7,29 +7,48 @@
         <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-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"
+            <el-checkbox
-                            name="option" label="hasNum"
+              v-model="info.option.hasNum"
+              name="option"
+              label="hasNum"
             >数字</el-checkbox>
-                        <el-checkbox v-model="info.option.hasChar"
+            <el-checkbox
-                            name="option" label="hasChar"
+              v-model="info.option.hasChar"
+              name="option"
+              label="hasChar"
             >字母</el-checkbox>
-                        <el-checkbox v-model="info.option.hasSymbol"
+            <el-checkbox
-                            name="option" label="hasSymbol"
+              v-model="info.option.hasSymbol"
+              name="option"
+              label="hasSymbol"
             >其他符号</el-checkbox>
-                        <el-checkbox v-model="info.option.caseSensitive"
+            <el-checkbox
-                            name="option" label="caseSensitive"
+              v-model="info.option.caseSensitive"
+              name="option"
+              label="caseSensitive"
             >大小写</el-checkbox>
-                        <el-checkbox v-model="info.option.lowerCase"
+            <el-checkbox
-                            name="option" label="lowerCase"
+              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-input
+              v-model="info.result"
+              type="text"
+              readonly
+            ></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -38,14 +57,21 @@
     <div class="action">
       <div class="title">操作</div>
       <div class="content">
-                <el-button type="primary" @click="btnGenerate()">生成</el-button>
+        <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>
+        <el-link
+          href="https://www.cnblogs.com/hankuksui/p/9892729.html"
+          target="_blank"
+          type="primary"
+        >博客园 - hankuksui</el-link>
       </div>
     </div>
 

src/components/Tools/OtherRunJS.vue

@@ -22,7 +22,9 @@
     <div class="output">
       <div class="title">输出</div>
       <div class="text">
-                <p v-for="line in output.lines" :key="line.id"
+        <p
+          v-for="line in output.lines"
+          :key="line.id"
           :class="['line', line.type]"
         >{{ line.message }}</p>
       </div>

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