优化

postcss.config.js

@@ -10,7 +10,7 @@ module.exports = {
             mediaQuery: true,
             propList: ['*'],
             rootValue: 16,
-            unitPrecision: 3,
+            unitPrecision: 4,
         }
     }
 };

src/assets/css/global.less

@@ -142,6 +142,11 @@ body {
 }
 
 .el-input {
+    &.is-disabled .el-input__inner {
+        background-color: #FFF;
+        color: #888;
+    }
+
     input::-webkit-inner-spin-button,
     input::-webkit-outer-spin-button {
         -webkit-appearance: none;

src/assets/js/utils.js

@@ -10,11 +10,7 @@ class Utils {
      * @param {string} [value] 新的标题
      */
     changeTitle(value) {
-        if (value) {
-            document.title = config.siteName + ' - ' + value;
-        } else {
-            document.title = config.siteName;
-        }
+        document.title = (value ? (value + ' - ') : '') + config.siteName;
     }
 
     /**

src/components/tools/ConvertEncodeDecode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tool-elem">
+  <div class="tool-page">
 
     <div class="ctrl">
       <div class="title">控制</div>

src/components/tools/GenRandomStr.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="tool-elem">
+    <div class="tool-page">
 
         <div class="info">
             <div class="title">配置选项 &amp; 结果</div>

src/components/tools/OtherNewWindow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="tool-elem">
+    <div class="tool-page">
 
         <div class="info">
             <div class="title">信息</div>

src/components/tools/OtherRunJS.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="tool-elem">
+    <div class="tool-page">
 
         <!-- 输入 -->
         <div class="input">
@@ -137,7 +137,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tool-elem {
+.tool-page {
     @lineHeight: 1.25rem;
 
     padding-bottom: 5rem;

src/components/tools/OtherWebSocket.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tool-elem">
+  <div class="tool-page">
 
     <!-- 操作 -->
     <div class="ctrl">

src/views/Tools.vue

@@ -4,13 +4,19 @@
     <div class="wrapper">
 
       <!-- 工具分类 -->
-            <div v-for="(categoryItem, categoryKey) in toolList" :key="categoryKey" class="category">
+      <div
+        v-for="(categoryItem, categoryKey) in toolList"
+        :key="categoryKey"
+        class="category"
+      >
 
         <!-- 标题 -->
         <div class="title">{{ categoryItem.title }}</div>
 
         <!-- 工具项 -->
-                <div v-for="(toolItem, toolKey) in categoryItem.list" :key="toolKey"
+        <div
+          v-for="(toolItem, toolKey) in categoryItem.list"
+          :key="toolKey"
           :class="['tool-item', 'shadow-2', { disabled: !toolItem.enabled }]"
           @click="detailOpen(categoryKey, toolKey)"
         >
@@ -22,10 +28,16 @@
 
     </div>
 
-        <!-- 弹出 -->
-        <el-drawer custom-class="drawer-full" direction="btt" size="100%"
-            :append-to-body="true" :destroy-on-close="true" :title="detail.title"
-            :visible.sync="detail.show" :before-close="detailClose"
+    <!-- 弹出层 -->
+    <el-drawer
+      custom-class="drawer-full"
+      direction="btt"
+      size="100%"
+      :append-to-body="true"
+      :destroy-on-close="true"
+      :title="detail.title"
+      :visible.sync="detail.show"
+      :before-close="detailClose"
     >
 
       <!-- 标题区域 -->
@@ -61,14 +73,14 @@ export default {
   },
   beforeRouteEnter(to, from, next) {
     next(vm => {
-            var route = vm.$route;
+      const { name: rName, params: rParams } = vm.$route;
 
       // 判断进入的路由
-            if (route.name === 'ToolsDetail') {
-                // 进入：工具内容页面
-                vm.detailOpen(route.params.category, route.params.name);
+      if (rName === 'ToolsDetail') {
+        // [工具内容页面]
+        vm.detailOpen(rParams.category, rParams.name);
       } else {
-                // 进入：工具列表页面
+        // [工具列表页面]
         vm.utils.changeTitle('小工具');
       }
     });
@@ -82,12 +94,13 @@ export default {
       this.$confirm('是否关闭？').then(() => {
         // 关闭 drawer
         done();
-                // 路由跳转
+        // 返回工具页面
         this.$router.push({
           name: 'Tools'
-                });
-                // 更新页面标题
+        }).then(() => {
+          // 更新标题
           this.utils.changeTitle('小工具');
+        });
       }).catch(() => { });
     },
 
@@ -98,19 +111,11 @@ export default {
      * @param {string} toolName 工具名称
      */
     detailOpen(toolCatrgory, toolName) {
-            // 当前工具信息
-            var info = {
-                title: '',
-                update: '',
-                version: '',
-            };
-            // 错误提示
-            var errMsg = `无法打开该工具（分类：${toolCatrgory} 名称：${toolName}）`;
+      const errMsg = `无法打开该工具（分类：${toolCatrgory} 名称：${toolName}）`;
 
       try {
 
-                info = this.toolList[toolCatrgory]['list'][toolName];
-
+        var info = this.toolList[toolCatrgory]['list'][toolName];
         if (info === undefined) {
           throw new Error(errMsg);
         }
@@ -120,7 +125,7 @@ export default {
         console.warn('[打开工具]', err);
         this.$message({
           message: errMsg,
-                    type: 'warning'
+          type: 'error'
         });
         return;
 
@@ -135,12 +140,14 @@ export default {
         return;
       }
 
-            // 更新页面标题
-            this.utils.changeTitle(info.title);
-            // 更新 drawer 标题
-            this.detail.title = `${info.title} [${info.version || '未知'}][${info.update || '未知'}]`;
+      const {
+        title: iTitle,
+        version: iVersion,
+        update: iUpdate,
+      } = info;
+
       // 路由跳转
-            // 注：当前路由相同时也进行跳转，以更新 query
+      // 注：当前路由相同时也进行跳转
       this.$router.push({
         name: 'ToolsDetail',
         params: {
@@ -148,10 +155,14 @@ export default {
           name: toolName
         }
       }).catch((err) => {
-                console.log('[路由跳转]', err.name);
-            });
+        console.log('[打开工具]', err.name);
+      }).finally(() => {
+        // 更新标题
+        this.utils.changeTitle(iTitle);
+        this.detail.title = `${iTitle} [${iVersion || '未知'}][${iUpdate || '未知'}]`;
         // 显示 drawer
         this.detail.show = true;
+      });
     },
 
     /**
@@ -174,6 +185,7 @@ export default {
   padding: 2rem;
   background-color: @colorWhite;
   overflow-y: auto;
+}
 
 .wrapper {
   width: 100%;
@@ -233,7 +245,6 @@ export default {
     }
   }
 }
-}
 
 .drawer-full {
   .header {

src/views/ToolsDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tools-detail">
-        <component :is="toolElem" />
+    <component :is="toolPage" />
   </div>
 </template>
 
@@ -13,16 +13,18 @@ export default {
     return {
       utils: this.$root.utils,
       toolList: navTools,
-            toolElem: null,
+      toolPage: null,
     }
   },
   beforeRouteEnter(to, from, next) {
     next(vm => {
-            var params = vm.$route.params;
-            var toolComponent = vm.toolList[params.category]['list'][params.name].component;
+      const { params, query } = vm.$route;
+      const { category: cCategory, name: cName } = params;
+      const componentName = vm.toolList[cCategory]['list'][cName].component;
+
       var loading = null;
 
-            console.log('[打开工具] params', params);
+      console.log('[打开工具]', { params, query });
 
       // 异步，防止找不到 target
       setTimeout(() => {
@@ -35,18 +37,18 @@ export default {
         });
       }, 0);
 
-            vm.toolElem = (() => {
+      vm.toolPage = (() => {
         // 动态引入组件
-                var elem = import(`@/components/tools/${toolComponent}.vue`);
+        const component = import(`@/components/tools/${componentName}.vue`);
 
-                Promise.all([elem]).then(() => {
+        Promise.all([component]).then(() => {
           setTimeout(() => {
             // 关闭 Loading
             loading.close();
           }, 200);
         });
 
-                return elem;
+        return component;
       });
     });
   },
@@ -58,8 +60,9 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: center;
+}
 
-    /deep/ .tool-elem {
+/deep/ .tool-page {
   width: 100%;
   max-width: 60rem;
 
@@ -82,9 +85,9 @@ export default {
     }
 
     > .content {
+      line-height: 1.6em;
       font-size: 0.9rem;
     }
   }
 }
-}
 </style>