优化代码

2022-03-17 13:09:58 +08:00
parent fcd91876ce
commit 58386fd28c
13 changed files with 1931 additions and 1887 deletions
--- a/src/App.vue
+++ b/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"
-                        index="title" class="title" disabled
+          <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 }"
+          <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 }]"
+          <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 }]"
-                :default-active="headerDefaultActive" router
+      <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 }"
+        <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>
--- 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': {
--- 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) {
--- a/src/components/Tools/GenRandomStr.vue
+++ b/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"
-                            name="option" label="hasNum"
+            <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
+              v-model="info.option.hasChar"
+              name="option"
+              label="hasChar"
            >字母</el-checkbox>
-                        <el-checkbox v-model="info.option.hasSymbol"
-                            name="option" label="hasSymbol"
+            <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
+              v-model="info.option.caseSensitive"
+              name="option"
+              label="caseSensitive"
            >大小写</el-checkbox>
-                        <el-checkbox v-model="info.option.lowerCase"
-                            name="option" label="lowerCase"
+            <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-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>

--- a/src/components/Tools/OtherRunJS.vue
+++ b/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>
--- 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>

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

    /**