添加设置界面

f05fc467 · baiy · ninecents · 1871e20d · f05fc467 · f05fc467
9 changed file
--- a/public/setting.html
+++ b/public/setting.html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>设置</title>
+</head>
+<body>
+<div style="width: 1000px;margin: 0 auto;padding: 0 20px">
+    <div id="app"></div>
+</div>
+</body>
+</html>
--- a/src/setting.js
+++ b/src/setting.js
+import Vue from 'vue'
+import iView from 'iview'
+import 'iview/dist/styles/iview.css'
+import App from './setting.vue'
+
+Vue.config.productionTip = false;
+
+Vue.use(iView);
+
+new Vue({
+    render: h => h(App)
+}).$mount('#app');
--- a/src/setting.vue
+++ b/src/setting.vue
+<template>
+    <Card style="margin-top: 50px;min-height: 300px">
+        <Tabs value="common">
+            <TabPane label="常用工具设置" name="common">
+                <setting-common></setting-common>
+            </TabPane>
+        </Tabs>
+    </Card>
+</template>
+<script>
+    import common from "./views/setting/common"
+    export default {
+        components: {
+            "setting-common": common
+        }
+    }
+</script>
\ No newline at end of file
--- a/src/tool.js
+++ b/src/tool.js
 import Vue from 'vue'
 import iView from 'iview'
 import 'iview/dist/styles/iview.css'
-import router from './router'
+import router from './tool.router'
 import optionBlock from './components/optionBlock'
 import codeHighlight from './components/codeHighlight'
 import {plugin as modelPlugin} from './tool/model'
-import App from './Tool.vue'
+import App from './tool.vue'

 Vue.config.productionTip = false;


--- a/src/tool.router.js
+++ b/src/tool.router.js
+import Vue from 'vue'
+import Router from 'vue-router'
+import {stat} from "./helper";
+
+Vue.use(Router);
+
+// 路由配置
+const routes = [
+    {
+        path: "/tool/base64",
+        component: r => require(['./views/tool/base64.vue'], r)
+    },
+    {
+        path: "/tool/code",
+        component: r => require(['./views/tool/code.vue'], r)
+    },
+    {
+        path: "/tool/decimalConvert",
+        component: r => require(['./views/tool/decimalConvert.vue'], r)
+    },
+    {
+        path: "/tool/diffs",
+        component: r => require(['./views/tool/diffs.vue'], r)
+    },
+    {
+        path: "/tool/encrypt",
+        component: r => require(['./views/tool/encrypt.vue'], r)
+    },
+    {
+        path: "/tool/hash",
+        component: r => require(['./views/tool/hash.vue'], r)
+    },
+    {
+        path: "/tool/ip",
+        component: r => require(['./views/tool/ip.vue'], r)
+    },
+    {
+        path: "/tool/phpArraySerialize",
+        component: r => require(['./views/tool/phpArraySerialize.vue'], r)
+    },
+    {
+        path: "/tool/pinyin",
+        component: r => require(['./views/tool/pinyin.vue'], r)
+    },
+    {
+        path: "/tool/qrCode",
+        component: r => require(['./views/tool/qrCode.vue'], r)
+    },
+    {
+        path: "/tool/randomString",
+        component: r => require(['./views/tool/randomString.vue'], r)
+    },
+    {
+        path: "/tool/regex",
+        component: r => require(['./views/tool/regex.vue'], r)
+    },
+    {
+        path: "/tool/timestamp",
+        component: r => require(['./views/tool/timestamp.vue'], r)
+    },
+    {
+        path: "/tool/unicode",
+        component: r => require(['./views/tool/unicode.vue'], r)
+    },
+    {
+        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});
+
+stat('index');
+
+router.afterEach(to => {
+    stat('tool', {tool: to.path})
+});
+
+export default router
\ No newline at end of file
--- a/src/tool/cache.js
+++ b/src/tool/cache.js
@@ -14,5 +14,12 @@ export default {
    get(name, defaultValue = null) {
        let data = lsCache.get(cacheNameConvert(name));
        return data ? data : defaultValue
+    },
+    setnNoVersion(name, value, expiry = 0) {
+        return lsCache.set('nv_' + name, value, expiry / 60);
+    },
+    getNoVersion(name, defaultValue = null) {
+        let data = lsCache.get('nv_' + name);
+        return data ? data : defaultValue
    }
 }
\ No newline at end of file
--- a/src/tool/config.js
+++ b/src/tool/config.js
 import {env, inArray} from "../helper";
+import cache from "./cache"

 // 工具缓存数据过期时间(秒)
 export const TOOL_DATA_EXPIRY = 1800;
@@ -8,6 +9,13 @@ export const BADGE_EXPIRY = 10;
 export const BADGE_CATEGORY = ["other"];
 // 工具徽章
 export const BADGE_TOOL = ["crontab"];
+// 默认常用工具
+export const DEFAULT_COMMON_TOOL = [
+    "hash", "encrypt", "base64", "url", "timestamp",
+    "qrCode", "pinyin", "ip", "code", "unicode",
+    "decimalConvert", "regex", "randomString", "phpArraySerialize",
+    "diffs"
+];

 const category = [
    {"name": "common", "title": "常用工具"},
@@ -17,21 +25,21 @@ const category = [
 ];

 const tool = [
-    {"name": "hash", "title": "哈希(hash)", cat: ["common", "encryption"]},
-    {"name": "encrypt", "title": "加密/解密", cat: ["common", "encryption"]},
-    {"name": "base64", "title": "BASE64编码", cat: ["common", "encryption"]},
-    {"name": "url", "title": "URL编码", cat: ["common", "conversion"]},
-    {"name": "timestamp", "title": "时间戳", cat: ["common", "conversion"]},
-    {"name": "qrCode", "title": "二维码", cat: ["common", "conversion"]},
-    {"name": "pinyin", "title": "汉字转拼音", cat: ["common", "other"]},
-    {"name": "ip", "title": "IP地址查询", cat: ["common", "other"]},
-    {"name": "code", "title": "代码格式化", cat: ["common", "other"]},
-    {"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": "hash", "title": "哈希(hash)", cat: ["encryption"]},
+    {"name": "encrypt", "title": "加密/解密", cat: ["encryption"]},
+    {"name": "base64", "title": "BASE64编码", cat: ["encryption"]},
+    {"name": "url", "title": "URL编码", cat: ["conversion"]},
+    {"name": "timestamp", "title": "时间戳", cat: ["conversion"]},
+    {"name": "qrCode", "title": "二维码", cat: ["conversion"]},
+    {"name": "pinyin", "title": "汉字转拼音", cat: ["other"]},
+    {"name": "ip", "title": "IP地址查询", cat: ["other"]},
+    {"name": "code", "title": "代码格式化", cat: ["other"]},
+    {"name": "unicode", "title": "Unicode", cat: ["conversion"]},
+    {"name": "decimalConvert", "title": "进制转换", cat: ["other"]},
+    {"name": "regex", "title": "正则表达式", cat: ["other"]},
+    {"name": "randomString", "title": "随机字符生成", cat: ["other"]},
+    {"name": "phpArraySerialize", "title": "PHP数组/序列化", cat: ["conversion"]},
+    {"name": "diffs", "title": "文本差异化对比", cat: ["other"]},
    {"name": "crontab", "title": "Crontab校验工具", cat: ["other"]},
 ];

@@ -40,19 +48,27 @@ const badgeIsShow = function () {
    return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') < BADGE_EXPIRY * 86400
 };

+const getUserCommon = function () {
+    let tools = cache.getNoVersion('user_common');
+    return tools ? tools : DEFAULT_COMMON_TOOL;
+};
+
+const setUserCommon = function (tools) {
+    cache.setnNoVersion('user_common', tools);
+};
+
 export default {
    tool,
    category,
+    setUserCommon,
+    getUserCommon,
    getToolByCategory(cat) {
-        let list = [];
-        if (cat) {
-            tool.forEach((t) => {
-                if (inArray(cat, t.cat)) {
-                    list.push(t)
-                }
-            });
-        }
-        return list;
+        return tool.filter((t) => {
+            if (cat === "common") {
+                return inArray(t.name, getUserCommon())
+            }
+            return inArray(cat, t.cat)
+        });
    },
    badgeToolIsShow(tool) {
        return badgeIsShow() && inArray(tool, BADGE_TOOL);

--- a/src/views/setting/common.vue
+++ b/src/views/setting/common.vue
+<template>
+    <div>
+        <CheckboxGroup v-model="tools" @on-change="toolUpdate" style="line-height: 30px;">
+            <Checkbox size="large" v-for="(t,k) in all" :key="k" :label="t.name">{{t.title}}</Checkbox>
+        </CheckboxGroup>
+    </div>
+</template>
+
+<script>
+    import config from "../../tool/config"
+
+    export default {
+        data() {
+            return {
+                tools: [],
+                all: config.tool
+            }
+        },
+        created() {
+            this.tools = config.getToolByCategory('common').map(function (item) {
+                return item.name;
+            });
+        },
+        methods: {
+            toolUpdate(tools) {
+                console.log(tools)
+                config.setUserCommon(tools);
+            },
+        },
+    }
+</script>
\ No newline at end of file
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,6 +4,10 @@ const config = {
        tool: {
            entry: 'src/tool.js',
            template: 'public/tool.html',
+        },
+        setting: {
+            entry: 'src/setting.js',
+            template: 'public/setting.html',
        }
    },
    chainWebpack: config => {