unicode 工具优化 #57

dfccb6e4 · baiy · ninecents · ed7d4ed2 · dfccb6e4 · dfccb6e4
21 changed file
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@

 使用过程中的任何问题或者需要新的工具欢迎提交`Issue`,新工具如果可以提供实现代码就完美了O(∩_∩)O

+## 先睹为快
+
+![](https://cdn.jsdelivr.net/gh/baiy/Ctool@master/images/v2_1.png)
+
 ## chrome 安装

 - 方法1: 在 [Chrome 应用商店](https://chrome.google.com/webstore/detail/ipfcebkfhpkjeikaammlkcnalknjahmh) 安装
@@ -45,9 +49,9 @@ npm run build -adapter=[chrome|edge|utools|web]
 |时间戳|双向转换|√|
 |二维码|`生成`,`解析`|√|
 |汉字转拼音|`声调`,`首字母`,`分隔符`|√|
-|IP地址查询|`运营商`,`城市`|`×`|
+|IP地址查询|`运营商`,`城市`|×|
 |代码格式化|`js`, `html`, `css`, `xml`, `sql`, `压缩`|√|
-|Unicode|双向转换|√|
+|Unicode|`双向转换`,`emoji`,`html 实体`,`css 实体`|√|
 |进制转换|2-64进制互转|√|
 |正则表达式|字符匹配|√|
 |随机字符生成器|`批量`,`特殊字符`|√|
@@ -70,7 +74,6 @@ npm run build -adapter=[chrome|edge|utools|web]

 项目诞生离不开这些优秀的开源程序

- [ajax-request](https://www.npmjs.com/package/ajax-request)
 - [code-formatter](https://www.npmjs.com/package/code-formatter)
 - [crypto-js](https://www.npmjs.com/package/crypto-js)
 - [ipinyinjs](https://www.npmjs.com/package/ipinyinjs)
@@ -102,9 +105,6 @@ npm run build -adapter=[chrome|edge|utools|web]
 - [camelcaseplugin](https://github.com/netnexus/camelcaseplugin)
 - [jwt-decode](https://www.npmjs.com/package/jwt-decode)
 - [jian_fan](https://www.npmjs.com/package/jian_fan)
+- [axios](https://www.npmjs.com/package/axios)

 > 当然项目中还使用很多不知道姓名的大神的代码, 在这里就不一一感谢
\ No newline at end of file
-
-## 先睹为快
-
-![](https://cdn.jsdelivr.net/gh/baiy/Ctool@master/images/v2_1.png)
--- a/package-lock.json
+++ b/package-lock.json
 {
    "name": "c-tool",
-    "version": "1.6.5",
+    "version": "1.6.8",
    "lockfileVersion": 1,
    "requires": true,
    "dependencies": {
@@ -1846,15 +1846,6 @@
            "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
            "dev": true
        },
-        "ajax-request": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npm.taobao.org/ajax-request/download/ajax-request-1.2.3.tgz",
-            "integrity": "sha1-mfy+wdbSeS+F+pSVNTMr0U9fN5A=",
-            "requires": {
-                "file-system": "^2.1.1",
-                "utils-extend": "^1.0.7"
-            }
-        },
        "ajv": {
            "version": "6.12.6",
            "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2144,6 +2135,14 @@
            "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
            "dev": true
        },
+        "axios": {
+            "version": "0.21.1",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+            "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+            "requires": {
+                "follow-redirects": "^1.10.0"
+            }
+        },
        "babel-code-frame": {
            "version": "6.26.0",
            "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -5222,23 +5221,6 @@
                }
            }
        },
-        "file-match": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npm.taobao.org/file-match/download/file-match-1.0.2.tgz",
-            "integrity": "sha1-ycrSZdLIrfOoFHWw30dYWQafrvc=",
-            "requires": {
-                "utils-extend": "^1.0.6"
-            }
-        },
-        "file-system": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npm.taobao.org/file-system/download/file-system-2.2.2.tgz",
-            "integrity": "sha1-fWWDPjojR9zZVqgTxncVPtPt2Yc=",
-            "requires": {
-                "file-match": "^1.0.1",
-                "utils-extend": "^1.0.4"
-            }
-        },
        "file-uri-to-path": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -5406,8 +5388,7 @@
        "follow-redirects": {
            "version": "1.13.3",
            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
-            "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==",
-            "dev": true
+            "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
        },
        "for-in": {
            "version": "1.0.2",
@@ -11833,11 +11814,6 @@
            "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
            "dev": true
        },
-        "utils-extend": {
-            "version": "1.0.8",
-            "resolved": "https://registry.npm.taobao.org/utils-extend/download/utils-extend-1.0.8.tgz",
-            "integrity": "sha1-zP17ZFQPjpDuIe7Fd2nQZRyril8="
-        },
        "utils-merge": {
            "version": "1.0.1",
            "resolved": "http://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",

--- a/package.json
+++ b/package.json
 {
    "name": "c-tool",
-    "version": "1.6.7",
+    "version": "1.6.8",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve --port 8081",
@@ -8,7 +8,7 @@
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
-        "ajax-request": "^1.2.3",
+        "axios": "^0.21.1",
        "babel-runtime": "^6.26.0",
        "code-formatter": "0.0.1",
        "cron-parser": "^2.16.3",

--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
    </style>
 </head>
 <body>
-<div id="page" style="width: 800px;height: 550px;margin: 0 auto;">
+<div id="page" style="width: 800px;height: 580px;margin: 0 auto;">
    <div style="text-align: center;padding-top: 200px;font-size: 16px;color: #666">加载中...</div>
 </div>
 <script src=/index.js></script>

--- a/public/tool.html
+++ b/public/tool.html
@@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Ctool 程序开发常用工具</title>
 </head>
-<body>
+<body style="padding-bottom: 30px">
 <div id="page" style="width: 800px;height: 550px;margin: 0 auto;padding: 0 10px;overflow-y:auto;">
    <div id="app"></div>
 </div>

--- a/src/adapter/chromium/helper.js
+++ b/src/adapter/chromium/helper.js
 export const openUrl = (url) => {
    // return chrome.tabs.create();
    // return chrome.windows.create();
-    if (url.indexOf('chrome://') === 0) {
-        return chrome.tabs.create({url: url});
-    }
    return window.open(url);
 }
\ No newline at end of file
-export const getMessage = (messageName, values = {}, placeholders = [], options = {}) => {
-    let substitutions = []
-    placeholders.forEach((key) => {
-        substitutions.push((key in values) ? values[key] : "")
-    })
-    return chrome.i18n.getMessage(messageName, substitutions, options);
-}
-
-
--- a/src/background.js
+++ b/src/background.js
@@ -6,10 +6,10 @@ const panel = {
        chrome.windows.create({
            url: chrome.runtime.getURL("tool.html"),
            type: "popup",
-            width: 850,
+            width: 810,
            left: 200,
            top: 200,
-            height: 580,
+            height: 610,
        }, (w) => {
            cache.set(this.cacheName, w.id)
        })

--- a/src/bottom.vue
+++ b/src/bottom.vue
@@ -29,7 +29,7 @@ export default {
 .ctool-bottom {
    width: 100%;
    position: fixed;
-    z-index: 999;
+    z-index: 9999;
    bottom: 0;
    left: 0;
    height: 30px;

--- a/src/components/notice.vue
+++ b/src/components/notice.vue
@@ -55,7 +55,7 @@ const handleNoticeItems = ({code, data, info}) => {
 }

 const logError = (e) => {
-    console.log(e)
+    // console.log(e)
 }

 export default {

--- a/src/helper.js
+++ b/src/helper.js
-import {stringify as queryStringify} from "query-string"
+import {v4 as uuidV4} from 'uuid';
+import {openUrl as chromiumOpenUrl} from './adapter/chromium/helper';
+import {openUrl as utoolsOpenUrl} from './adapter/utools/helper';

-export const env = function (key) {
+export const env = (key) => {
    return process['ctool'][key] ? process['ctool'][key] : "";
 };

@@ -10,52 +12,16 @@ export const isChromium = !!env('isChromium')
 export const isWeb = !!env('isWeb')
 export const isUtools = !!env('isUtools')

-export const trim = function (str, char, type) {
-    if (char) {
-        if (type === 'left') {
-            return str.replace(new RegExp('^\\' + char + '+', 'g'), '');
-        } else if (type === 'right') {
-            return str.replace(new RegExp('\\' + char + '+$', 'g'), '');
-        }
-        return str.replace(new RegExp('^\\' + char + '+|\\' + char + '+$', 'g'), '');
-    }
-    return str.replace(/^\s+|\s+$/g, '');
-};
-
-export const inArray = function (value, arr) {
-    return arr.findIndex((v) => {
-        return value === v
-    }) !== -1
-};
+export const uuid = () => {
+    return uuidV4().toLowerCase();
+}

-export const openTab = function (url) {
-    if (isChromium && chrome.tabs) {
-        return chrome.tabs.create({url: url, selected: true});
+export const openUrl = (url) => {
+    if (isChromium) {
+        return chromiumOpenUrl(url)
    }
-    if (isUtools && window.utools) {
-        return window.utools.shellOpenExternal(url)
+    if (isUtools) {
+        return utoolsOpenUrl(url)
    }
    return window.open(url);
 };
\ No newline at end of file
-
-export const stat = function (action, data = {}) {
-    setTimeout(function () {
-        try {
-            let img = new Image(1, 1);
-            img.src = 'https://www.baiy.org/chrome_tool/stat/?' + queryStringify(
-                Object.assign(
-                    {
-                        v: env('version'),
-                        a: action,
-                        p: env('platform'),
-                        r: Math.random()
-                    },
-                    data
-                )
-            );
-        } catch (e) {
-            // todo
-        }
-    }, 3000)
-};
-
--- a/src/tool.js
+++ b/src/tool.js
@@ -13,7 +13,7 @@ import {isUtools} from './helper'
        const page = document.getElementById('page')
        page.style.width = 'auto'
        page.style.height = 'auto'
-        page.style.minHeight = '500px'
+        page.style.minHeight = '550px'
    }
 })()


--- a/src/tool.router.js
+++ b/src/tool.router.js
 import Vue from 'vue'
 import Router from 'vue-router'
-import { stat } from './helper'
+import {env} from './helper'
+import {stringify as queryStringify} from "query-string";
+import user from "./tool/user";

 Vue.use(Router)

+export const stat = (action, data = {}) => {
+    setTimeout(() => {
+        try {
+            let img = new Image(1, 1);
+            img.src = 'https://www.baiy.org/chrome_tool/stat/?' + queryStringify({
+                v: env('version'),
+                a: action,
+                u: user.uid(),
+                p: env('platform'),
+                r: Math.random(),
+                ...data
+            });
+        } catch (e) {
+            // todo
+        }
+    }, 3000)
+};
+
 // 路由配置
 const routes = [
    {
@@ -116,12 +136,12 @@ const routes = [
    }
 ]

-const router = new Router({ routes })
+const router = new Router({routes})

 stat('index')

 router.afterEach(to => {
-    stat('tool', { tool: to.path })
+    stat('tool', {tool: to.path})
 })

 export default router
\ No newline at end of file
--- a/src/tool.vue
+++ b/src/tool.vue
@@ -61,79 +61,82 @@
        <Drawer title="设置" v-model="settingShow" :width="400">
            <setting-block v-if="settingShow"></setting-block>
        </Drawer>
+        <bottom-block/>
    </div>
 </template>

 <script>
 import config from './tool/config'
+import instance from './tool/instance'
+import BottomBlock from './bottom'
 import settingBlock from "./views/setting/block"
 import model from './tool/model'
-import historyFactory from './tool/history'
-import {setLoadHistoryIndex} from './tool/history'
-import { openTab,isUtools } from './helper'
+import historyFactory, {setLoadHistoryIndex} from './tool/history'
+import {isUtools, openUrl} from './helper'

 export default {
    components: {
-        "setting-block": settingBlock
+        "setting-block": settingBlock,
+        "bottom-block": BottomBlock
    },
-    data () {
+    data() {
        return {
-            isRouterAlive:true,
-            isUtools:isUtools,
+            isRouterAlive: true,
+            isUtools: isUtools,
            category: config.category,
            currentCategory: '',
            currentTool: '',
            historyData: [],
-            settingShow:false,
+            settingShow: false,
            historyShow: false,
            historyColumns: [
                {
                    title: '操作时间',
                    key: 'time',
-                    width:180
+                    width: 180
                },
                {
                    title: '数据',
                    slot: '_value',
-                    ellipsis:true,
+                    ellipsis: true,
                },
                {
                    title: '操作',
                    slot: '_op',
-                    width:150
+                    width: 150
                }
            ],
        }
    },
    computed: {
-        tools () {
+        tools() {
            return config.getToolByCategory(this.currentCategory)
        },
-        historyLength(){
+        historyLength() {
            return historyFactory(this.currentTool).length()
        },
        historyTableHeight() {
            // 设置表格高度
            return window.innerHeight - 140
        },
-        currentToolTitle(){
+        currentToolTitle() {
            return config.getToolTitle(this.currentTool)
        }
    },
    watch: {
-        currentTool (name) {
+        currentTool(name) {
            model.setCurrentTool(name)
            this.$router.push('/tool/' + name)
        },
    },
-    created () {
-        if (this.isUtools){
-            window.utools.onPluginEnter(({code,payload,type}) => {
+    created() {
+        if (this.isUtools) {
+            window.utools.onPluginEnter(({code, payload, type}) => {
                let tool = "";
                let feature = "";
                if (code.indexOf('ctool-') !== -1) {
                    tool = code.replace(/ctool-/g, "")
-                    if (tool.indexOf('-') !== -1){
+                    if (tool.indexOf('-') !== -1) {
                        let temp = tool.split('-');
                        tool = temp[0]
                        feature = temp[1]
@@ -141,11 +144,11 @@ export default {
                }

                // 写入正则匹配数据到固定数据数据
-                if (type === "regex" && payload){
+                if (type === "regex" && payload) {
                    model.setFixeInputData(payload)

                }
-                if(feature){
+                if (feature) {
                    // 设置工具内功能
                    model.setToolCurrentFeature(feature)
                }
@@ -169,25 +172,27 @@ export default {
            top: 150,
        })
    },
-    mounted () {},
+    mounted() {
+        instance.set(this)
+    },
    methods: {
-        reload () {
+        reload() {
            this.isRouterAlive = false
            this.$nextTick(() => (this.isRouterAlive = true))
        },
-        categorySelect (name) {
+        categorySelect(name) {
            switch (name) {
                case '_feedback':
-                    openTab('https://github.com/baiy/Ctool/issues')
+                    openUrl('https://github.com/baiy/Ctool/issues')
                    break
                case '_about':
-                    openTab('https://github.com/baiy/Ctool')
+                    openUrl('https://github.com/baiy/Ctool')
                    break
                case '_setting':
                    this.settingShow = true;
                    break
                case '_new':
-                   openTab(window.location.href)
+                    openUrl(window.location.href)
                    break
                case '_history':
                    this.history()
@@ -199,7 +204,7 @@ export default {
                    break
            }
        },
-        history () {
+        history() {
            let history = historyFactory(this.currentTool)
            if (history.length() < 1) {
                return this.$Message.error('暂无历史记录')
@@ -207,53 +212,53 @@ export default {
            this.historyData = history.all()
            this.historyShow = true
        },
-        historyValue (value) {
+        historyValue(value) {
            return JSON.stringify(value)
        },
-        historyView(index){
+        historyView(index) {
            this.$Modal.info({
                render: (h) => {
                    return h('Input', {
                        props: {
-                            type:"textarea",
-                            rows:10,
+                            type: "textarea",
+                            rows: 10,
                            value: JSON.stringify(historyFactory(this.currentTool).get(index), null, "\t"),
                        }
                    })
                },
-                width:700,
-                okText:"关闭"
+                width: 700,
+                okText: "关闭"
            })
        },
-        historyClear(){
+        historyClear() {
            historyFactory(this.currentTool).clear()
            this.historyShow = false;
        },
-        historyLoad(index){
+        historyLoad(index) {
            setLoadHistoryIndex(index)
            this.historyShow = false;
            this.$router.push({
-                path:this.$router.currentRoute.fullPath,
-                query:{
-                    t:Date.now(),
+                path: this.$router.currentRoute.fullPath,
+                query: {
+                    t: Date.now(),
                },
            });
        },
-        toolSelect (name) {
+        toolSelect(name) {
            model.setToolHistory(this.currentCategory, name)
            this.currentTool = name
        },
-        badgeToolIsShow (tool) {
+        badgeToolIsShow(tool) {
            return config.badgeToolIsShow(tool)
        },
-        badgeCategoryIsShow (cat) {
+        badgeCategoryIsShow(cat) {
            return config.badgeCategoryIsShow(cat)
        },
    },
 }
 </script>
 <style scoped>
-.drawer-footer{
+.drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;

--- a/src/tool/config.js
+++ b/src/tool/config.js
-import {env, inArray} from '../helper'
+import {env} from '../helper'
 import cache from './cache'

 const toolConfig = require('../config')
@@ -84,16 +84,16 @@ export default {
    getToolByCategory(cat) {
        return tool.filter((t) => {
            if (cat === 'common') {
-                return inArray(t.name, getUserCommon())
+                return getUserCommon().includes(t.name)
            }
-            return inArray(cat, t.cat)
+            return t.cat.includes(cat);
        })
    },
    getToolDefaultCategory,
    badgeToolIsShow(tool) {
-        return badgeIsShow() && inArray(tool, BADGE_TOOL)
+        return badgeIsShow() && BADGE_TOOL.includes(tool)
    },
    badgeCategoryIsShow(cat) {
-        return badgeIsShow() && inArray(cat, BADGE_CATEGORY)
+        return badgeIsShow() && BADGE_CATEGORY.includes(cat)
    },
 }
\ No newline at end of file
--- a/src/views/setting/block.vue
+++ b/src/views/setting/block.vue
@@ -24,7 +24,7 @@
 </template>

 <script>
-import {isChromium, isUtools, openTab} from '../../helper'
+import {isChromium, isUtools, openUrl} from '../../helper'
 import setting from '../../tool/setting'
 import settingBlock from './setting'

@@ -56,7 +56,7 @@ export default {
        open(name) {
            switch (name) {
                case 'shortcuts':
-                    openTab('chrome://extensions/shortcuts')
+                    openUrl('chrome://extensions/shortcuts')
                    break
                case 'setting':
                    this.settingShow = true

--- a/src/views/tool/ip.vue
+++ b/src/views/tool/ip.vue
@@ -20,7 +20,7 @@
    </div>
 </template>
 <script>
-    import request from "ajax-request"
+    import axios from "axios"
    import { codemirror } from 'vue-codemirror'
    import 'codemirror/lib/codemirror.css'
    import 'codemirror/mode/javascript/javascript.js'
@@ -48,13 +48,17 @@
        methods: {
            handle() {
                if (this.current.input) {
-                    request({
-                        url:"https://ifconfig.co/json",
-                        data:this.current.input !== "localhost" ? {ip:this.current.input} : null,
-                    },(err, res, result)=>{
-                        if (err) return this.$Message.error("ip地址信息查询错误:"+err);
-                        this.current.output = JSON.stringify(JSON.parse(result),null, 4);
-                        this.$saveToolData(this.current);
+                    axios({
+                        url: 'https://ifconfig.co/json',
+                        responseType: 'json',
+                        params: this.current.input !== "localhost" ? {ip:this.current.input} : {}
+                    }).then((response)=>{
+                        console.log(response)
+                        // if (err) return this.$Message.error("ip地址信息查询错误:"+err);
+                        // this.current.output = JSON.stringify(JSON.parse(result),null, 4);
+                        // this.$saveToolData(this.current);
+                    }).catch((error)=>{
+                        console.log(error)
                    });
                }
            },

--- a/src/views/tool/json.vue
+++ b/src/views/tool/json.vue
@@ -30,7 +30,9 @@
            this.current = Object.assign(this.current, this.$getToolData('content'))
        },
        mounted(){
-            this.codemirror.setSize(null, window.innerHeight - 200)
+            setTimeout(()=>{
+                this.codemirror.setSize(null, window.innerHeight - 220)
+            },100)
        },
        computed: {
            codemirror() {

--- a/src/views/tool/library/unicode.js
+++ b/src/views/tool/library/unicode.js
@@ -16,12 +16,12 @@ export default {
        html_entity_16,
        css_entitie
    },
-    decode(str, type = unicode_point_default) {
+    decode(str, type) {
        const errorListener = (item, callback) => {
            try {
                return callback && callback()
            } catch (e) {
-                throw new Error(`${item} decode error:${e.message}`)
+                throw new Error(`${item} 解码异常:${e.message}`)
            }
        }

@@ -55,7 +55,7 @@ export default {
                    return errorListener(item, () => String.fromCodePoint(parseInt(`0x${item.replace("\\", "").toLowerCase()}`)))
                });
        }
-        throw new Error("decode type error")
+        throw new Error("解码类型异常")
    },
    encode(string, type = unicode_point_default, ignore_ascii = false) {
        let code = []
@@ -97,7 +97,7 @@ export default {
                    code.push(`\\${hexRepairStr}`);
                    break;
                default:
-                    throw new Error("encode type error")
+                    throw new Error("编码类型异常")
            }
        }
        return code.join("");

--- a/src/views/tool/qrCode.vue
+++ b/src/views/tool/qrCode.vue
@@ -41,7 +41,6 @@
 <script>
    import generator from 'qrcode'
    import qrcodeParser from 'qrcode-parser'
-    import { trim } from '../../helper'
    import model from '../../tool/model'

    export default {
@@ -102,7 +101,7 @@
                return false
            },
            substr (str) {
-                str = trim(str.replace(/[\r\n]/g, ''))
+                str = str.replace(/[\r\n]/g, '').trim()
                const strLength = 100
                return str.length > strLength ? str.substr(0, strLength) + '...' : str
            },

--- a/src/views/tool/timestamp.vue
+++ b/src/views/tool/timestamp.vue
 <template>
-    <heightResize class="tool-timestamp-page">
-        <div class="tool-timestamp-block">
+  <div>
+    <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容(标准时间(YYYY-MM-DD HH:mm:ss[.SSS])/时间戳(秒/毫秒))"></Input>
    <option-block>
-                <input-block bottom="8px" right="8px">
-                    <Input size="large" v-model="current.input">
-                        <span slot="prepend">{{ $t('timestamp_input') }}</span>
-                    </Input>
-                    <template slot="extra">
-                        <Dropdown @on-click="currentTime" transfer>
-                            <Button size="small" type="primary">
-                                {{ $t('timestamp_get') }}
+      <FormItem>
+          <Button type="primary" @click="handle()">转换</Button>
+          <Dropdown style="margin-left: 10px" @on-click="currentTime">
+            <Button type="primary">
+              当前时间
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
-                                <DropdownItem name="normalSecond">{{ $t('timestamp_normal_second') }}</DropdownItem>
-                                <DropdownItem name="normalMillisecond">{{
-                                        $t('timestamp_normal_millisecond')
-                                    }}
-                                </DropdownItem>
-                                <DropdownItem name="unixSecond">{{ $t('timestamp_unix_second') }}</DropdownItem>
-                                <DropdownItem name="unixMillisecond">{{
-                                        $t('timestamp_unix_millisecond')
-                                    }}
-                                </DropdownItem>
+              <DropdownItem name="normalSecond">标准时间(秒)</DropdownItem>
+              <DropdownItem name="normalMillisecond">标准时间(毫秒)</DropdownItem>
+              <DropdownItem name="unixSecond">UNIX时间戳(秒)</DropdownItem>
+              <DropdownItem name="unixMillisecond">UNIX时间戳(毫秒)</DropdownItem>
            </DropdownMenu>
          </Dropdown>
-                    </template>
-                </input-block>
+      </FormItem>
    </option-block>
-            <option-block>
-                <input-block bottom="8px" right="8px">
-                    <Input size="large" :value="output">
-                        <span slot="prepend">{{ $t('timestamp_output') }}</span>
-                    </Input>
-                    <template slot="extra">
-                        <Button size="small" type="primary" @click="()=>copy(output)">{{
-                                $t('timestamp_copy')
-                            }}
-                        </Button>
-                    </template>
-                </input-block>
-            </option-block>
-            <Table :columns="exampleColumns" stripe border size="small" :data="example">
-                <template slot-scope="{ row }" slot="_value">
-                    <Button size="small" type="text" @click="()=>copy(row.value)">{{ row.value }}</Button>
-                </template>
-            </Table>
+    <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
  </div>
-    </heightResize>
 </template>
 <script>
-import moment from 'moment'
-import heightResize from "./components/heightResize";
+    import moment from 'moment'

-let inputType = {
+    let inputType = {
        'normalSecond': 1,
        'normalMillisecond': 2,
        'unixSecond': 3,
        'unixMillisecond': 4,
        'error': 0,
-}
+    }

-export default {
-    components: {
-        heightResize
-    },
-    created() {
-        this.$initToolData('input', (data) => {
-            return (
-                (new RegExp(/^\d+-\d+-\d+ \d+:\d+:\d+$/)).test(data)
-                || (new RegExp(/^\d+-\d+-\d+ \d+:\d+:\d+\.\d+$/)).test(data)
-                || (new RegExp(/^\d{10}$/)).test(data)
-                || (new RegExp(/^\d{13}$/)).test(data)
-            )
-        })
-    },
-    mounted() {
-        this.timer = setInterval(() => {
-            this.timestamp = moment().format('x')
-        }, 100);
+    export default {
+        created () {
+            this.current = Object.assign(this.current, this.$getToolData('input'))
        },
-    beforeDestroy() {
-        clearInterval(this.timer);
-    },
-    computed: {
-        example() {
-            let time = moment(parseInt(this.timestamp))
-            return [
-                {format: this.$t('timestamp_normal_second'), value: time.format('YYYY-MM-DD HH:mm:ss')},
-                {format: this.$t('timestamp_unix_second'), value: time.format('X')},
-                {format: this.$t('timestamp_normal_millisecond'), value: time.format('YYYY-MM-DD HH:mm:ss.SSS')},
-                {format: this.$t('timestamp_unix_millisecond'), value: time.format('x')},
-            ]
-        },
-        output() {
-            let result = "";
-            if (!this.current.input) {
-                return result;
-            }
-            try {
+        methods: {
+            handle () {
                let type = function (input) {
                    if ((new RegExp(/^\d+-\d+-\d+ \d+:\d+:\d+$/)).test(input)) {
                        return inputType.normalSecond
@@ -115,78 +54,48 @@ export default {
                    return inputType.error
                }(this.current.input.trim())
                if (type === inputType.error) {
-                    throw new Error(this.$t('timestamp_error_format').toString())
+                    return this.$Message.error('输入时间格式错误')
                }
                switch (type) {
                    case inputType.normalSecond:
-                        result = moment(this.current.input).format('X')
+                        this.current.output = moment(this.current.input).format('X')
                        break
                    case inputType.normalMillisecond:
-                        result = moment(this.current.input).format('x')
+                        this.current.output = moment(this.current.input).format('x')
                        break
                    case inputType.unixSecond:
-                        result = moment(parseInt(this.current.input) * 1000).format('YYYY-MM-DD HH:mm:ss')
+                        this.current.output = moment(parseInt(this.current.input)*1000).format('YYYY-MM-DD HH:mm:ss')
                        break
                    case inputType.unixMillisecond:
-                        result = moment(parseInt(this.current.input)).format('YYYY-MM-DD HH:mm:ss.SSS')
+                        this.current.output = moment(parseInt(this.current.input)).format('YYYY-MM-DD HH:mm:ss.SSS')
                        break
                }
+                this.$clipboardCopy(this.current.output)
                this.$saveToolData(this.current)
-            } catch (e) {
-                result = this.$t('timestamp_error', [e.message])
-            }
-            return result;
-        }
-    },
-    methods: {
-        copy(data) {
-            if (data) {
-                this.$clipboardCopy(data, true)
-            }
            },
-        currentTime(type) {
-            if (type === "normalSecond") {
+            currentTime (type) {
+                if(type === "normalSecond"){
                    this.current.input = moment().format('YYYY-MM-DD HH:mm:ss')
-            } else if (type === "normalMillisecond") {
+                }
+                else if(type === "normalMillisecond"){
                    this.current.input = moment().format('YYYY-MM-DD HH:mm:ss.SSS')
-            } else if (type === "unixSecond") {
+                }
+                else if(type === "unixSecond"){
                    this.current.input = moment().format('X')
-            } else {
+                }
+                else{
                    this.current.input = moment().format('x')
                }
+                this.handle();
            },
        },
-    data() {
+        data () {
            return {
                current: {
-                input: moment().format('YYYY-MM-DD HH:mm:ss')
-            },
-            timer: null,
-            timestamp: 0,
-            exampleColumns: [
-                {
-                    title: this.$t('timestamp_format'),
-                    key: 'format',
-                    width: 200
+                    input: '',
+                    output: '',
                },
-                {
-                    title: this.$t('timestamp_value'),
-                    slot: '_value',
-                }
-            ]
            }
        },
-}
+    }
 </script>
\ No newline at end of file
-<style>
-.tool-timestamp-page {
-    display: flex;
-    display: -webkit-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.tool-timestamp-block {
-    width: 600px;
-}
-</style>
--- a/src/views/tool/unicode.vue
+++ b/src/views/tool/unicode.vue
 <template>
-    <heightResize :append="['.page-option-block']" ignore @resize="resize">
-        <autoHeightTextarea :height="inputHeight" v-model="current.input" :placeholder="$t('unicode_input')" />
-        <option-block class="page-option-block">
+    <div>
+        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
+        <option-block>
            <FormItem>
                <ButtonGroup>
-                    <Button type="primary" @click="handle('encode')">{{ $t('unicode_encode') }}</Button>
-                    <Button type="primary" @click="handle('decode')">{{ $t('unicode_decode') }}</Button>
+                    <Button type="primary" @click="handle('encode')">字符转Unicode(编码)</Button>
+                    <Button type="primary" @click="handle('decode')">Unicode转字符(解码)</Button>
                </ButtonGroup>
            </FormItem>
            <FormItem>
                <Select v-model="current.type" style="width:250px">
-                    <Option value="unicode_point_default">{{ $t('unicode_mode_default') }} \u[0-9a-f]{4}</Option>
-                    <Option value="unicode_point_wide">{{ $t('unicode_mode_wide') }} \u[0-9a-f]{4,6}</Option>
-                    <Option value="unicode_point_wide_brace">{{ $t('unicode_mode_wide_bracket') }} \u{[0-9a-f]{4,6}}</Option>
-                    <Option value="unicode_number">{{ $t('unicode_mode_number') }} U+[0-9A-F]{4,6}</Option>
-                    <Option value="html_entity_10">{{ $t('unicode_mode_html_10') }} &amp;#[0-9]+;</Option>
-                    <Option value="html_entity_16">{{ $t('unicode_mode_html_16') }} &amp;#x[0-9a-f]{1,6};</Option>
-                    <Option value="css_entitie">{{ $t('unicode_mode_css_16') }} \[0-9a-f]{4,6}</Option>
+                    <Option value="unicode_point_default">Unicode 默认模式 \u[0-9a-f]{4}</Option>
+                    <Option value="unicode_point_wide">Unicode 宽字符模式 \u[0-9a-f]{4,6}</Option>
+                    <Option value="unicode_point_wide_brace">Unicode 宽字符模式(带大括号) \u{[0-9a-f]{4,6}}</Option>
+                    <Option value="unicode_number">Unicode 编码模式 U+[0-9A-F]{4,6}</Option>
+                    <Option value="html_entity_10">html 实体(10进制) &amp;#[0-9]+;</Option>
+                    <Option value="html_entity_16">html 实体(16进制) &amp;#x[0-9a-f]{1,6};</Option>
+                    <Option value="css_entitie">css 实体(16进制) \[0-9a-f]{4,6}</Option>
                </Select>
            </FormItem>
            <FormItem v-if="!disable_ignore_ascii_select.includes(current.type)">
-                <Checkbox v-model="current.ignore_ascii">{{ $t('unicode_ignore_ascii') }}</Checkbox>
+                <Checkbox v-model="current.ignore_ascii">禁止 ASCII 字符编码</Checkbox>
            </FormItem>
        </option-block>
-        <autoHeightTextarea :height="outputHeight" :value="current.output" :placeholder="$t('unicode_output')" />
-    </heightResize>
+        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
+    </div>
 </template>
 <script>
 import Unicode from "./library/unicode"
-import heightResize from "./components/heightResize";
-import autoHeightTextarea from "./components/autoHeightTextarea";
+
 export default {
-    components:{
-        heightResize,
-        autoHeightTextarea
-    },
    created() {
-        this.$initToolData('input')
+        this.current = Object.assign(this.current, this.$getToolData("input"))
    },
    methods: {
        handle(operation) {
@@ -52,16 +47,12 @@ export default {
                        this.current.output = Unicode.decode(this.current.input, this.current.type);
                    }
                } catch (e) {
-                    return this.$Message.error(this.$t('unicode_error',[e.message]).toString())
+                    return this.$Message.error(e.message)
                }
                this.current.operation = operation;
                this.$clipboardCopy(this.current.output);
                this.$saveToolData(this.current);
            }
-        },
-        resize(height){
-            this.inputHeight = Math.ceil(height/2);
-            this.outputHeight = height - this.inputHeight;
        }
    },
    data() {
@@ -73,8 +64,6 @@ export default {
                type: "unicode_point_default",
                ignore_ascii: true,
            },
-            inputHeight:100,
-            outputHeight:100,
            disable_ignore_ascii_select: ['unicode_point_wide', 'unicode_number', 'css_entitie']
        }
    },