添加crontab工具

优化打开速度  异步加载页面组件 首页js加载大小减小35%

package-lock.json

 {
-    "name": "Ctool",
-    "version": "0.0.9",
+    "name": "c-tool",
+    "version": "0.0.11",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -3294,6 +3294,20 @@
                 "sha.js": "^2.4.8"
             }
         },
+        "cron-parser": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npm.taobao.org/cron-parser/download/cron-parser-2.12.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcron-parser%2Fdownload%2Fcron-parser-2.12.0.tgz",
+            "integrity": "sha1-Ba6MAIAlzs3Yd4dGYmoYMknKMAs=",
+            "requires": {
+                "is-nan": "^1.2.1",
+                "moment-timezone": "^0.5.25"
+            }
+        },
+        "cronstrue": {
+            "version": "1.72.0",
+            "resolved": "https://registry.npm.taobao.org/cronstrue/download/cronstrue-1.72.0.tgz",
+            "integrity": "sha1-/YiZskTMCBJsx9C+5PdolzyWxRM="
+        },
         "cross-spawn": {
             "version": "6.0.5",
             "resolved": "http://registry.npm.taobao.org/cross-spawn/download/cross-spawn-6.0.5.tgz",
@@ -3678,7 +3692,6 @@
             "version": "1.1.3",
             "resolved": "http://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz",
             "integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=",
-            "dev": true,
             "requires": {
                 "object-keys": "^1.0.12"
             }
@@ -6560,6 +6573,14 @@
                 "is-extglob": "^2.1.1"
             }
         },
+        "is-nan": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npm.taobao.org/is-nan/download/is-nan-1.2.1.tgz",
+            "integrity": "sha1-n69ltvttskt/XAYoR16nH5iEAeI=",
+            "requires": {
+                "define-properties": "^1.1.1"
+            }
+        },
         "is-number": {
             "version": "3.0.0",
             "resolved": "http://registry.npm.taobao.org/is-number/download/is-number-3.0.0.tgz",
@@ -7445,6 +7466,19 @@
                 }
             }
         },
+        "moment": {
+            "version": "2.24.0",
+            "resolved": "http://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz",
+            "integrity": "sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s="
+        },
+        "moment-timezone": {
+            "version": "0.5.25",
+            "resolved": "https://registry.npm.taobao.org/moment-timezone/download/moment-timezone-0.5.25.tgz",
+            "integrity": "sha1-oRv6L3TgiDJ/LNTAiz5731WVeBA=",
+            "requires": {
+                "moment": ">= 2.9.0"
+            }
+        },
         "move-concurrently": {
             "version": "1.0.1",
             "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -7731,8 +7765,7 @@
         "object-keys": {
             "version": "1.1.1",
             "resolved": "https://registry.npm.taobao.org/object-keys/download/object-keys-1.1.1.tgz",
-            "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=",
-            "dev": true
+            "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4="
         },
         "object-visit": {
             "version": "1.0.1",

package.json

 {
     "name": "c-tool",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",
@@ -10,6 +10,8 @@
     "dependencies": {
         "ajax-request": "^1.2.3",
         "code-formatter": "0.0.1",
+        "cron-parser": "^2.12.0",
+        "cronstrue": "^1.72.0",
         "crypto-js": "^3.1.9-1",
         "diff": "^4.0.1",
         "ipinyinjs": "^1.0.0",

src/App.vue

@@ -2,20 +2,25 @@
     <div>
         <Menu mode="horizontal" theme="light" :active-name="currentCategory" @on-select="categorySelect" style="height: 45px;line-height: 45px;">
             <MenuItem :name="cat.name" v-for="(cat) in category" :key="cat.name">
+                <Badge v-if="badgeCategoryIsShow(cat.name)" dot :offset="[15,-10]">
+                    {{cat.title}}
+                </Badge>
+                <template v-else>
                     {{cat.title}}
-            </MenuItem>
-            <Submenu name="_options" style="float: right">
-                <template slot="title">
-                    选项
                 </template>
-                <MenuItem name="_about">关于</MenuItem>
-                <MenuItem name="_new">新窗口</MenuItem>
-            </Submenu>
-            <MenuItem name="_feedback" style="float: right">问题反馈</MenuItem>
+            </MenuItem>
+            <MenuItem style="padding: 0 10px;float: right" name="_new">新窗口</MenuItem>
+            <MenuItem style="padding: 0 10px;float: right" name="_feedback">反馈</MenuItem>
+            <MenuItem style="padding: 0 10px;float: right" name="_about"><Icon type="logo-github" :size="24" /></MenuItem>
         </Menu>
         <RadioGroup size="large" :value="currentTool" @on-change="toolSelect" style="margin: 10px 0 10px 20px;line-height: 30px;">
             <Radio :label="tool.name" v-for="(tool) in tools" :key="tool.name">
+                <Badge v-if="badgeToolIsShow(tool.name)" dot :offset="[5,-5]">
+                    {{tool.title}}
+                </Badge>
+                <template v-else>
                     {{tool.title}}
+                </template>
             </Radio>
         </RadioGroup>
         <div>
@@ -78,6 +83,12 @@
             toolSelect(name) {
                 model.setToolHistory(this.currentCategory, name)
                 this.currentTool = name
+            },
+            badgeToolIsShow(tool) {
+                return config.badgeToolIsShow(tool);
+            },
+            badgeCategoryIsShow(cat) {
+                return config.badgeCategoryIsShow(cat);
             }
         },
     }

src/helper.js

@@ -25,13 +25,38 @@ export const openTab = function (url) {
     chrome.tabs.create({url: url, selected: true});
 };
 
+export const formatDate = function (date, fmt = "yyyy-MM-dd hh:mm:ss") {
+    let o = {
+        "M+": date.getMonth() + 1,
+        "d+": date.getDate(),
+        "h+": date.getHours(),
+        "m+": date.getMinutes(),
+        "s+": date.getSeconds(),
+        "q+": Math.floor((date.getMonth() + 3) / 3),
+        "S": date.getMilliseconds()
+    };
+    if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+    }
+    for (let k in o) {
+        if (new RegExp("(" + k + ")").test(fmt)) {
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+        }
+    }
+    return fmt;
+};
+
+export const env = function (key) {
+    return process['ctool'][key] ? process['ctool'][key] : "";
+};
+
 export const stat = function (action, data = {}) {
     try {
         let img = new Image(1, 1);
         img.src = 'https://www.baiy.org/chrome_tool/stat/?' + queryStringify(
             Object.assign(
                 {
-                    v: process['chromeTool']['version'],
+                    v: env('version'),
                     a: action,
                     r: Math.random()
                 },
@@ -42,3 +67,4 @@ export const stat = function (action, data = {}) {
         // todo
     }
 };
+

src/router.js

@@ -66,6 +66,10 @@ const routes = [
         path: "/tool/url",
         component: r => require(['./views/tool/url.vue'], r)
     },
+    {
+        path: "/tool/crontab",
+        component: r => require(['./views/tool/crontab.vue'], r)
+    },
 ];
 
 const router = new Router({routes});

src/tool/config.js

-import {inArray} from "../helper";
+import {env, inArray} from "../helper";
+
+// 工具缓存数据过期时间(秒)
+export const TOOL_DATA_EXPIRY = 1800;
+// 徽章过期时间(天)
+export const BADGE_EXPIRY = 10;
+// 分类徽章
+export const BADGE_CATEGORY = ["other"];
+// 工具徽章
+export const BADGE_TOOL = ["crontab"];
 
 const category = [
     {"name": "common", "title": "常用工具"},
@@ -20,12 +29,16 @@ const tool = [
     {"name": "unicode", "title": "Unicode", cat: ["common", "conversion"]},
     {"name": "decimalConvert", "title": "进制转换", cat: ["common", "other"]},
     {"name": "regex", "title": "正则表达式", cat: ["common", "other"]},
-    {"name": "randomString", "title": "随机字符生成", cat: ["common","other"]},
-    {"name": "phpArraySerialize", "title": "PHP数组/序列化", cat: ["common","conversion"]},
-    {"name": "diffs", "title": "文本差异化对比", cat: ["common","other"]},
+    {"name": "randomString", "title": "随机字符生成", cat: ["common", "other"]},
+    {"name": "phpArraySerialize", "title": "PHP数组/序列化", cat: ["common", "conversion"]},
+    {"name": "diffs", "title": "文本差异化对比", cat: ["common", "other"]},
+    {"name": "crontab", "title": "Crontab校验工具", cat: ["other"]},
 ];
 
-export const TOOL_DATA_EXPIRY = 1800;
+// 徽章是否显示
+const badgeIsShow = function () {
+    return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') < BADGE_EXPIRY * 86400
+};
 
 export default {
     tool,
@@ -40,5 +53,11 @@ export default {
             });
         }
         return list;
+    },
+    badgeToolIsShow(tool) {
+        return badgeIsShow() && inArray(tool, BADGE_TOOL);
+    },
+    badgeCategoryIsShow(cat) {
+        return badgeIsShow() && inArray(cat, BADGE_CATEGORY);
     }
 }
\ No newline at end of file

src/views/tool/crontab.vue

+<template>
+    <div>
+        <Row :gutter="16">
+            <Col span="12">
+                <Input v-model="current.input" style="margin-bottom: 16px">
+                    <span slot="prepend">表达式</span>
+                </Input>
+                <Input :value="output" :rows="14" type="textarea" placeholder="最近执行时间"></Input>
+            </Col>
+            <Col span="12">
+                <Tabs value="example">
+                    <TabPane label="例子" name="example">
+                        <Table stripe size="small" height="300" :columns="example.columns" :data="example.data"></Table>
+                    </TabPane>
+                    <TabPane label="格式" name="format" style="text-align: center">
+                        <img src="../../statics/crontab.png" style="height: 300px" alt="">
+                    </TabPane>
+                    <TabPane label="特殊字符" name="special">
+                        <Table stripe size="small" height="300" :columns="special.columns" :data="special.data"></Table>
+                    </TabPane>
+                </Tabs>
+            </Col>
+        </Row>
+    </div>
+</template>
+<script>
+    import cronstrue from 'cronstrue/i18n';
+    import parser from 'cron-parser';
+    import {formatDate} from "../../helper";
+
+    export default {
+        computed: {
+            output() {
+                if (!this.current.input) return "";
+                let list = [];
+                try {
+                    list.push(cronstrue.toString(this.current.input, {locale: "zh_CN"}));
+                    list.push("\n最近10次执行时间");
+                    let interval = parser.parseExpression(this.current.input);
+                    for (let i = 1; i <= 10; i++) {
+                        list.push(`第${i}次: ` + formatDate(new Date(interval.next().toString())))
+                    }
+                    this.$saveToolData(this.current);
+                } catch (err) {
+                    list.push(err)
+                }
+
+                return list.join("\n");
+            },
+        },
+        created() {
+            this.current = Object.assign(this.current, this.$getToolData())
+        },
+        data() {
+            return {
+                current: {
+                    input: "2 */5 * * 2-5",
+                    operation: "check"
+                },
+                special: {
+                    columns: [
+                        {title: '特殊字符', key: 'name', width: 100},
+                        {title: '代表意义', key: 'text'},
+                    ],
+                    data: [
+                        {
+                            name: "*(星号)",
+                            text: "代表任何时刻都接受的意思。举例来说，范例一内那个日、月、周都是*，就代表着不论何月、何日的礼拜几的12：00都执行后续命令的意思。"
+                        },
+                        {
+                            name: ",(逗号)",
+                            text: "代表分隔时段的意思。举例来说，如果要执行的工作是3：00与6：00时，就会是：0 3,6 * * * command时间还是有五列，不过第二列是 3,6 ，代表3与6都适用"
+                        },
+                        {
+                            name: "-(减号)",
+                            text: "代表一段时间范围内，举例来说，8点到12点之间的每小时的20分都进行一项工作：20 8-12 * * * command仔细看到第二列变成8-12.代表 8,9,10,11,12 都适用的意思"
+                        },
+                        {
+                            name: "/n(斜线)",
+                            text: "那个n代表数字，即是每隔n单位间隔的意思，例如每五分钟进行一次，则：*/5 * * * * command用*与/5来搭配，也可以写成0-59/5，意思相同"
+                        }
+                    ]
+                },
+                example: {
+                    columns: [
+                        {title: '例子', key: 'example', width: 120},
+                        {title: '说明', key: 'text'},
+                    ],
+                    data: [
+                        {example: "*/1 * * * *", text: "每1分钟执行"},
+                        {example: "* * * * *", text: "每1分钟执行"},
+                        {example: "*/5 * * * *", text: "每5分钟执行"},
+                        {example: "0 * * * *", text: "每小时执行"},
+                        {example: "0 */1 * * *", text: "每小时执行"},
+                        {example: "0 7 * * *", text: "每天上午7点执行"},
+                        {example: "10 7 * * *", text: "每天上午7点10分执行"},
+                        {example: "0 0 * * *", text: "每天定时执行一次"},
+                        {example: "0 0 * * 0", text: "每周定时执行一次"},
+                        {example: "0 0 1 * *", text: "每月定时执行一次"},
+                        {example: "0 0 1 1 *", text: "每年定时执行一次"},
+                        {example: "5 * * * *", text: "指定每小时的第5分钟执行一次命令"},
+                        {example: "30 5 * * *", text: "指定每天的 5:30 执行命令"},
+                        {example: "30 7 8 * *", text: "指定每月8号的7：30分执行命令"},
+                        {example: "30 5 8 6 *", text: "指定每年的6月8日5：30执行命令"},
+                        {example: "30 6 * * 0", text: "指定每星期日的6:30执行命令"},
+                        {example: "30 3 10,20 * *", text: "每月10号及20号的3：30执行命令[注：“，”用来连接多个不连续的时段]"},
+                        {example: "25 8-11 * * *", text: "每天8-11点的第25分钟执行命令[注：“-”用来连接连续的时段"},
+                        {example: "*/15 * * * *", text: "每15分钟执行一次命令 [即每个小时的第0 15 30 45 60分钟执行命令]"},
+                        {example: "30 6 */10 * *", text: "每个月中，每隔10天6:30执行一次命令[即每月的1、11、21、31日是的6：30执行一次命令。]"}
+                    ]
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file

src/views/tool/timestamp.vue

@@ -5,7 +5,7 @@
             <FormItem>
                 <ButtonGroup>
                     <Button type="primary" @click="handle()">转换</Button>
-                    <Button type="primary" @click="current.input = formatDate(new Date())">当前时间</Button>
+                    <Button type="primary" @click="currentTime">当前时间</Button>
                 </ButtonGroup>
             </FormItem>
         </option-block>
@@ -13,6 +13,7 @@
     </div>
 </template>
 <script>
+    import {formatDate} from "../../helper";
     export default {
         created() {
             this.current = Object.assign(this.current, this.$getToolData("input"))
@@ -29,25 +30,8 @@
                 this.$clipboardCopy(this.current.output);
                 this.$saveToolData(this.current);
             },
-            formatDate(date, fmt = "yyyy-MM-dd hh:mm:ss") {
-                let o = {
-                    "M+": date.getMonth() + 1,
-                    "d+": date.getDate(),
-                    "h+": date.getHours(),
-                    "m+": date.getMinutes(),
-                    "s+": date.getSeconds(),
-                    "q+": Math.floor((date.getMonth() + 3) / 3),
-                    "S": date.getMilliseconds()
-                };
-                if (/(y+)/.test(fmt)) {
-                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-                }
-                for (let k in o) {
-                    if (new RegExp("(" + k + ")").test(fmt)) {
-                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
-                    }
-                }
-                return fmt;
+            currentTime() {
+                this.current.input = formatDate(new Date())
             }
         },
         data() {

vue.config.js

@@ -8,8 +8,9 @@ const config = {
     },
     chainWebpack: config => {
         config.plugin('define').tap(args => {
-            args[0]['process.chromeTool'] = JSON.stringify({
+            args[0]['process.ctool'] = JSON.stringify({
                 version: process.env.npm_package_version,
+                updateTime: Date.parse((new Date()).toString())/1000,
             });
             return args
         })