调整小工具集的整合方式，多工具支持按需自动载入

apps/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "WEB前端助手(FeHelper)",
-  "version": "2019.04.2919",
+  "version": "2019.04.3015",
   "manifest_version": 2,
   "default_locale": "zh_CN",
   "description": "FE助手：JSON格式化、JSON比对、二维码生成与解码、信息编解码、代码压缩&美化、页面取色、Markdown与HTML、网页截屏、编码设置、正则、时间转换、网页性能检测、Ajax调试、密码生成器、便签笔记、chrome插件下载等",

apps/toolkit/color/index.css

@@ -0,0 +1,17 @@
+#tab-color .col-input {
+    display: inline-block;
+    width: 220px;
+}
+#tab-color label {
+    margin-right: 0;
+}
+#tab-color .demo-color {
+    display: inline-block;
+    width: 60px;
+    height: 24px;
+    border: 1px solid #000;
+    margin-left: 5px;
+}
+#tab-color .x-xlabel {
+    margin-left: 80px;
+}

apps/toolkit/color/index.html

@@ -0,0 +1 @@
+<!-- 颜色色值转换工具 -->
<div id="containerColor">
    <div class="row x-tips ui-mt-10">
        // 支持颜色值的RGB（RGBA）与十六进制（HEX）色值之间的互转，eg：<br>
        1、#43ad7f7f  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  =>  &nbsp;&nbsp;&nbsp;  rgba(67, 173, 127, 0.50) <br>
        2、rgb(190,20,128)  &nbsp;&nbsp;  =>  &nbsp;&nbsp;&nbsp;  #be1480
    </div>

    <div class="row">
        <label for="fromHEX">HEX</label>
        <input type="text" class="form-control col-input ui-mr-10" id="fromHEX" placeholder="如:#F2C685"
               maxlength="9" v-model="fromHEX" @input="colorHexToRgb">
        <label>预览</label><div class="demo-color" :style="{background:fromHEX}">&nbsp;</div>

        <label for="toRGB" class="x-xlabel">RGB</label>
        <input type="text" class="form-control col-input" id="toRGB" readonly v-model="toRGB">
        <label>预览</label><div class="demo-color" :style="{background:toRGB}">&nbsp;</div>
    </div>

    <div class="row ui-mt-20">
        <label for="fromRGB">RGB</label>
        <input type="text" class="form-control col-input ui-mr-10" id="fromRGB" placeholder="如:rgb(200,100,255)"
               maxlength="25" v-model="fromRGB" @input="colorRgbToHex">
        <label>预览</label><div class="demo-color" :style="{background:fromRGB}">&nbsp;</div>

        <label for="toHEX" class="x-xlabel">HEX</label>
        <input type="text" class="form-control col-input" id="toHEX" readonly v-model="toHEX">
        <label>预览</label><div class="demo-color" :style="{background:toHEX}">&nbsp;</div>
    </div>
</div>

apps/toolkit/color/index.js

@@ -0,0 +1,67 @@
+/**
+ * FeHelper 颜色转换工具
+ */
+new Vue({
+    el: '#containerColor',
+    data: {
+        fromHEX: '#43ad7f7f',
+        toRGB: '',
+        fromRGB: 'rgba(190,20,128,0.5)',
+        toHEX: ''
+    },
+
+    mounted: function () {
+        // 初始化颜色转换
+        this.colorHexToRgb();
+        this.colorRgbToHex();
+    },
+
+    methods: {
+
+        colorHexToRgb: function () {
+            let hex = this.fromHEX.trim().replace(/^#/, '');
+            let rgb = [];
+            switch (hex.length) {
+                case 3:
+                case 4:
+                    rgb.push(parseInt(hex[0] + '' + hex[0], 16).toString(10));                       // r
+                    rgb.push(parseInt(hex[1] + '' + hex[1], 16).toString(10));                       // g
+                    rgb.push(parseInt(hex[2] + '' + hex[2], 16).toString(10));                       // b
+                    hex.length === 4 && rgb.push((parseInt(parseInt(hex[3] + '' + hex[3], 16).toString(10)) / 256).toFixed(2));   // a
+                    break;
+                case 6:
+                case 8:
+                    rgb.push(parseInt(hex[0] + '' + hex[1], 16).toString(10));                       // r
+                    rgb.push(parseInt(hex[2] + '' + hex[3], 16).toString(10));                       // g
+                    rgb.push(parseInt(hex[4] + '' + hex[5], 16).toString(10));                       // b
+                    hex.length === 8 && rgb.push((parseInt(parseInt(hex[6] + '' + hex[7], 16).toString(10)) / 256).toFixed(2));   // a
+                    break;
+            }
+            if (rgb.length === 3) {
+                this.toRGB = 'rgb(' + rgb.join(', ') + ')';
+            } else if (rgb.length === 4) {
+                this.toRGB = 'rgba(' + rgb.join(', ') + ')';
+            } else {
+                this.toRGB = '';
+            }
+        },
+
+        colorRgbToHex: function () {
+            let rgb = this.fromRGB.trim().replace(/\s+/g, '').replace(/[^\d,\.]/g, '').split(',').filter(n => {
+                return n.length && parseInt(n, 10) <= 255;
+            });
+            let hex = [];
+            if (rgb.length === 3 || rgb.length === 4) {
+                hex.push(parseInt(rgb[0], 10).toString(16).padStart(2, '0'));                       // r
+                hex.push(parseInt(rgb[1], 10).toString(16).padStart(2, '0'));                       // g
+                hex.push(parseInt(rgb[2], 10).toString(16).padStart(2, '0'));                       // b
+                rgb.length === 4 && hex.push(Math.floor(parseFloat(rgb[3], 10) * 255).toString(16).padStart(2, '0'));   // a
+            }
+            if (hex.length) {
+                this.toHEX = '#' + hex.join('');
+            } else {
+                this.toHEX = '';
+            }
+        }
+    }
+});

apps/toolkit/index.css

@@ -26,60 +26,20 @@
     color: #48b;
 }
 
-
 .mod-tab {
     display: none;
 }
 .ui-tabs {
     padding-bottom: 5em;
 }
-.mod-radios {
-    font-size: 14px;
-}
-.mod-tab label {
-    margin-right: 20px;
-    font-weight: normal;
-    font-size: 14px;
-}
-.mod-value label{
-    margin-right: 0;
-    font-size: 16px;
-}
-.mod-value .x-input {
-    display: inline-block;
-    width: 400px;
-}
-select.x-select {
-    display: inline-block;
-    width: 114px;
-}
-.radix-tips {
-    margin-left: 160px;
-    font-size: 12px;
-    color: #bbb;
-    font-style: italic;
-}
 .row.x-tips {
     font-size: 14px;
     color: #aaa;
     font-style: italic;
     margin-bottom: 40px;
 }
-
-.mod-color .col-input {
-    display: inline-block;
-    width: 220px;
-}
-.mod-color label {
-    margin-right: 0;
-}
-.mod-color .demo-color {
-    display: inline-block;
-    width: 60px;
-    height: 24px;
-    border: 1px solid #000;
-    margin-left: 5px;
-}
-.mod-color .x-xlabel {
-    margin-left: 80px;
+.mod-tab label {
+    margin-right: 20px;
+    font-weight: normal;
+    font-size: 14px;
 }

apps/toolkit/index.js

@@ -4,96 +4,45 @@
 new Vue({
     el: '#pageContainer',
     data: {
-        radix: {
-            fromArray: [2, 4, 8, 10, 16],
-            fromSelected: 10,
-            toArray: [2, 4, 8, 10, 16],
-            toSelected: 16,
-            srcValue: 100,
-            rstValue: 0
-        },
-
-        color: {
-            fromHEX: '#43ad7f7f',
-            toRGB: '',
-            fromRGB: 'rgba(190,20,128,0.5)',
-            toHEX: ''
+        loadManager: {
+            radix: 0,
+            color: 0
         }
     },
 
     mounted: function () {
-        jQuery('#tabs').tabs();
-
-        // 进制转换的初始化
-        this.radixConvert();
 
-        // 初始化颜色转换
-        this.colorHexToRgb();
-        this.colorRgbToHex();
+        // 通过Tab的切换，来动态加载小工具
+        jQuery('#tabs').tabs({
+            show: (event, ui) => {
+                window.location.hash = ui.panel.id;
+                let widget = ui.panel.id.replace('tab-', '');
+                if (this.loadManager[widget]) {
+                    return;
+                }
+                fetch(widget + '/index.html').then(resp => {
+                    resp.text().then(html => {
+                        this.loadManager[widget] = true;
+                        // 插入html
+                        ui.panel.innerHTML = html;
+
+                        // 插入css
+                        let link = document.createElement('link');
+                        link.setAttribute('rel', 'stylesheet');
+                        link.setAttribute('href', widget + '/index.css');
+                        document.head.appendChild(link);
+
+                        // 插入js
+                        let script = document.createElement('script');
+                        script.src = widget + '/index.js';
+                        document.body.appendChild(script);
+                    });
+                });
+            }
+        });
     },
 
     methods: {
-        getId: (type, id) => [type, id].join('_'),
-
-        radixRadioClicked: function (type, n) {
-            if (type === 1) {
-                this.radix.fromSelected = n;
-            } else {
-                this.radix.toSelected = n;
-            }
-            this.radixConvert();
-        },
-
-        radixConvert: function () {
-            this.$nextTick(() => {
-                this.radix.rstValue = parseInt(this.radix.srcValue, this.radix.fromSelected).toString(this.radix.toSelected);
-            });
-        },
 
-        colorHexToRgb: function () {
-            let hex = this.color.fromHEX.trim().replace(/^#/, '');
-            let rgb = [];
-            switch (hex.length) {
-                case 3:
-                case 4:
-                    rgb.push(parseInt(hex[0] + '' + hex[0], 16).toString(10));                       // r
-                    rgb.push(parseInt(hex[1] + '' + hex[1], 16).toString(10));                       // g
-                    rgb.push(parseInt(hex[2] + '' + hex[2], 16).toString(10));                       // b
-                    hex.length === 4 && rgb.push((parseInt(parseInt(hex[3] + '' + hex[3], 16).toString(10)) / 256).toFixed(2));   // a
-                    break;
-                case 6:
-                case 8:
-                    rgb.push(parseInt(hex[0] + '' + hex[1], 16).toString(10));                       // r
-                    rgb.push(parseInt(hex[2] + '' + hex[3], 16).toString(10));                       // g
-                    rgb.push(parseInt(hex[4] + '' + hex[5], 16).toString(10));                       // b
-                    hex.length === 8 && rgb.push((parseInt(parseInt(hex[6] + '' + hex[7], 16).toString(10)) / 256).toFixed(2));   // a
-                    break;
-            }
-            if (rgb.length === 3) {
-                this.color.toRGB = 'rgb(' + rgb.join(', ') + ')';
-            } else if (rgb.length === 4) {
-                this.color.toRGB = 'rgba(' + rgb.join(', ') + ')';
-            } else {
-                this.color.toRGB = '';
-            }
-        },
-
-        colorRgbToHex: function () {
-            let rgb = this.color.fromRGB.trim().replace(/\s+/g, '').replace(/[^\d,\.]/g, '').split(',').filter(n => {
-                return n.length && parseInt(n, 10) <= 255;
-            });
-            let hex = [];
-            if (rgb.length === 3 || rgb.length === 4) {
-                hex.push(parseInt(rgb[0], 10).toString(16).padStart(2, '0'));                       // r
-                hex.push(parseInt(rgb[1], 10).toString(16).padStart(2, '0'));                       // g
-                hex.push(parseInt(rgb[2], 10).toString(16).padStart(2, '0'));                       // b
-                rgb.length === 4 && hex.push(Math.floor(parseFloat(rgb[3], 10) * 256).toString(16).padStart(2, '0'));   // a
-            }
-            if (hex.length) {
-                this.color.toHEX = '#' + hex.join('');
-            } else {
-                this.color.toHEX = '';
-            }
-        }
     }
 });

apps/toolkit/radix/index.css

@@ -0,0 +1,21 @@
+.mod-radios {
+    font-size: 14px;
+}
+.mod-value label{
+    margin-right: 0;
+    font-size: 16px;
+}
+.mod-value .x-input {
+    display: inline-block;
+    width: 400px;
+}
+select.x-select {
+    display: inline-block;
+    width: 114px;
+}
+.radix-tips {
+    margin-left: 160px;
+    font-size: 12px;
+    color: #bbb;
+    font-style: italic;
+}

apps/toolkit/radix/index.html

@@ -0,0 +1 @@
+<!-- 进制转换工具 -->
<div id="containerRadix">

    <div class="row x-tips ui-mt-10">
        // 这里的进制转换的原理比较简单，其实就一行代码 <br/>
        let radixConvert = (num, fromRadix, toRadix) => parseInt(num, fromRadix).toString(toRadix);
    </div>

    <div class="row mod-radios">
        <template v-for="item in fromArray">
            <input type="radio" name="from" :id="getId('from',item)" :value="item"
                   :checked="item===fromSelected" @click="radixRadioClicked(1,item)">
            <label :for="getId('from',item)">{{item}}进制</label>
        </template>

        <select class="form-control x-select" v-model="fromSelected" @change="radixConvert">
            <option v-for="n in 36" v-if="n>1" :value="n" >{{n}}进制</option>
        </select>
    </div>

    <div class="row ui-mt-10 mod-value">
        <label for="srcValue">原始数字：</label>
        <input type="text" id="srcValue" class="form-control x-input" maxlength="32" v-model="srcValue"
               @input="radixConvert" placeholder="number here...">
    </div>

    <div class="ui-mt-20">
        <span class="radix-tips">// 转换结果就在下面了</span>
    </div>

    <div class="row mod-radios ui-mt-20">
        <template v-for="item in toArray">
            <input type="radio" name="to" :id="getId('to',item)" :value="item"
                   :checked="item==toSelected" @click="radixRadioClicked(2,item)">
            <label :for="getId('to',item)">{{item}}进制</label>
        </template>

        <select class="form-control x-select" v-model="toSelected" @change="radixConvert">
            <option v-for="n in 36" v-if="n>1" :value="n">{{n}}进制</option>
        </select>
    </div>

    <div class="row ui-mt-10 mod-value">
        <label for="rstValue">结果数字：</label>
        <input type="text" id="rstValue" class="form-control x-input" v-model="rstValue" readonly>
    </div>
</div>

apps/toolkit/radix/index.js

@@ -0,0 +1,38 @@
+/**
+ * FeHelper 进制转换工具
+ */
+new Vue({
+    el: '#containerRadix',
+    data: {
+        fromArray: [2, 4, 8, 10, 16],
+        fromSelected: 10,
+        toArray: [2, 4, 8, 10, 16],
+        toSelected: 16,
+        srcValue: 100,
+        rstValue: 0
+    },
+
+    mounted: function () {
+        // 进制转换的初始化
+        this.radixConvert();
+    },
+
+    methods: {
+        getId: (type, id) => [type, id].join('_'),
+
+        radixRadioClicked: function (type, n) {
+            if (type === 1) {
+                this.fromSelected = n;
+            } else {
+                this.toSelected = n;
+            }
+            this.radixConvert();
+        },
+
+        radixConvert: function () {
+            this.$nextTick(() => {
+                this.rstValue = parseInt(this.srcValue, this.fromSelected).toString(this.toSelected);
+            });
+        }
+    }
+});