优化剪贴板操作和部分输入逻辑

public/tool.html

@@ -10,6 +10,5 @@
 <div id="page" style="width: 800px;height: 550px;margin: 0 auto;padding: 0 10px;overflow-y:auto;">
     <div id="app"></div>
 </div>
-<div id="clipboard"></div>
 </body>
 </html>

src/tool/clipboard.js

-import {isUtools} from '../helper'
+import {Base64} from "js-base64";
+
 // 剪贴板操作
-export const copy = (data,successCallback)=>{
-    document.querySelector(
-        '#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
-    document.querySelector('#clipboard-text').value = data
-    document.querySelector('#clipboard-text').select()
-    if (document.execCommand('copy')) {
+export const copy = (data, successCallback) => {
+    try {
+        navigator.clipboard.writeText(data).then(function () {
             successCallback && successCallback()
+        }, function (e) {
+            console.log('copy failed', e)
+        });
+    } catch (e) {
+        console.log('copy error', e)
     }
-    document.querySelector('#clipboard').innerHTML = ''
 }
 
-export const paste = ()=>{
-    document.querySelector('#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
-    document.querySelector('#clipboard-text').select()
-    document.execCommand('paste')
-    let r = document.querySelector('#clipboard-text').value || document.querySelector('#clipboard-text').innerHTML
-    document.querySelector('#clipboard').innerHTML = ''
-    return r ? r : ''
+export const paste = async () => {
+    return new Promise((resolve) => {
+        try {
+            navigator.clipboard.readText().then((text) => {
+                return resolve(text ? text : "")
+            }).catch((e) => {
+                console.error(e)
+                return resolve("")
+            })
+        } catch {
+            resolve("")
+        }
+    });
 }
 
-export const copyImage = (imageBase64,successCallback = "")=>{
-    if (isUtools && imageBase64){
-        window.utools.copyImage(imageBase64)
+export const copyImage = (imageBase64, successCallback = "") => {
+    if (imageBase64) {
+        try {
+            let arr = imageBase64.split(',')
+            let mime = arr[0].match(/:(.*?);/)[1];
+            let data = [new window.ClipboardItem({
+                [mime]: new Blob([Base64.toUint8Array(arr[1])], {type: mime})
+            })];
+            navigator.clipboard.write(data).then(function () {
                 successCallback && successCallback()
+            }, function (e) {
+                console.log('copy image failed', e)
+            });
+        } catch (e) {
+            console.log('copy image error', e)
+        }
     }
 }
 

src/tool/model.js

@@ -51,38 +51,74 @@ const debounceSaveToolDataMethod = _.debounce(function () {
     return history(debounceSaveToolData['tool']).push(debounceSaveToolData['data'])
 }, 1000)
 
-export const plugin = {
-    install: function (Vue) {
-        Vue.prototype.$getToolData = function (clipboardField = '',clipboardFieldRegex = "") {
-            let data = history(model.getCurrentTool()).current()
-            if (clipboardField) {
-                let inputData = "";
-                if (fixeInputData) { // 使用固定输入数据
-                    inputData = fixeInputData
-                    fixeInputData = ""
-                } else if (setting.autoReadCopy()) {
-                    let paste = clipboard.paste()
-                    if (!data[clipboardField] && paste) {
-                        if (setting.autoReadCopyFilter()) {
-                            paste = paste.trim()
-                        }
-                        inputData = paste
-                    }
-                }
-                if (inputData){
+
+const appendData = async function (field = "", check = "") {
+    const result = (data = "") => {
+        if (data){
             if (
-                        !(clipboardFieldRegex instanceof RegExp)
-                        ||
-                        (
-                            clipboardFieldRegex instanceof RegExp
-                            && clipboardFieldRegex.test(inputData)
-                        )
+                !check
+                || (_.isFunction(check) && check(data)) // 函数校验
             ){
-                        data[clipboardField] = inputData
+                return field ? {[field]: data} : data
+            }
+        }
+        return field ? {} : ""
+    }
+    return new Promise(async (resolve) => {
+        try {
+            // 使用固定输入数据
+            if (fixeInputData) {
+                return resolve(result(fixeInputData))
+            }
+            if (setting.autoReadCopy()) {
+                let paste = (await clipboard.paste()).trim()
+                if (paste) {
+                    resolve(result(paste))
+                }
+            }
+            resolve(result())
+        } catch {
+            resolve(result())
+        }
+    });
+}
+
+export const plugin = {
+    install: function (Vue) {
+        Vue.prototype.$initToolData = function (input = "", inputCheck = "", field = "current", isLoadHistory = true) {
+            let current = _.cloneDeep(this[field])
+            if (isLoadHistory) {
+                Object.assign(current, this.$getToolData())
             }
+            if (!input) {
+                this[field] = current
+                return;
             }
+
+            // 初始化默认值
+            if (!(input in current)){
+                current[input] = "";
+            }
+
+            // 保存默认值
+            let inputDefault = current[input]
+            current[input] = "";
+
+            appendData(input, inputCheck).then((append) => {
+                for (let key of Object.keys(append)) {
+                    if ((key in current) && !current[key]) {
+                        current[key] = append[key]
+                    }
+                }
+                if (!current[input]){
+                    // 使用默认值
+                    current[input] = inputDefault
+                }
+                this[field] = current
+            })
         }
-            return data
+        Vue.prototype.$getToolData = function () {
+            return _.cloneDeep(history(model.getCurrentTool()).current())
         }
         Vue.prototype.$saveToolData = function (data, ignoreDebounce = false) {
             if (ignoreDebounce) {

src/views/tool/ascii.vue

@@ -67,7 +67,7 @@ export default {
         },
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData()
     },
     methods: {
         handle() {

src/views/tool/barcode.vue

@@ -2,7 +2,7 @@
     <div>
         <div style="height: 250px;line-height: 250px;text-align: center;vertical-align: middle;">
             <canvas @click="saveImage" :style="`border: ${canvasBorder};vertical-align: middle;`" ref="barcode"
-                    class="barcode" v-show="!validStr"></canvas>
+                    class="barcode" v-show="!validStr" style="cursor:pointer"></canvas>
             <p style="color: red" v-show="validStr">{{ validStr }}</p>
         </div>
         <div id="barcode-setting">
@@ -146,7 +146,7 @@ import JsBarcode from 'jsbarcode'
 
 export default {
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("text"))
+        this.$initToolData('text')
     },
     computed: {
         showText() {

src/views/tool/base64.vue

@@ -38,7 +38,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData('input'))
+        this.$initToolData('input')
     },
     methods: {
         handle(v) {
@@ -52,10 +52,10 @@ export default {
                     }
                     else{
                         this.current.output = Base64.decode(this.current.input)
+                        this.$clipboardCopy(this.current.output)
                     }
                 }
                 this.current.operation = v
-                this.$clipboardCopy(this.current.output)
                 this.$saveToolData(this.current)
             }
         },
@@ -69,9 +69,9 @@ export default {
         },
         exportFile() {
             let arr = this.current.input.split(','), mime = arr[0].match(/:(.*?);/)[1];
-            let objectUrl = window.URL.createObjectURL(new Blob([new Blob([Base64.toUint8Array(arr[1])], {type: mime})], {type: mime}));
+            let objectUrl = window.URL.createObjectURL(new Blob([Base64.toUint8Array(arr[1])], {type: mime}));
             let aEle = document.createElement("a");
-            aEle.download = `ctools-base64-decode-${moment().unix()}` + (mimeType.extension(mime) ? `.${mimeType.extension(mime)}` : "");
+            aEle.download = `ctool-base64-decode-${moment().unix()}` + (mimeType.extension(mime) ? `.${mimeType.extension(mime)}` : "");
             aEle.href = objectUrl;
             aEle.click();
             aEle.remove();

src/views/tool/code.vue

@@ -53,7 +53,7 @@ export default {
         }
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("content"))
+        this.$initToolData('content')
     },
     methods: {
         handle(language) {

src/views/tool/crontab.vue

@@ -6,14 +6,15 @@
                     <span slot="prepend">{{ $t('crontab_expression') }}</span>
                 </Input>
                 <heightResize :append="['.page-option-input']">
-                    <autoHeightTextarea :value="output" :placeholder="$t('crontab_execute_time')" />
+                    <autoHeightTextarea :value="output" :placeholder="$t('crontab_execute_time')"/>
                 </heightResize>
             </Col>
             <Col span="12" class="page-option-reference">
                 <Tabs value="example">
                     <TabPane :label="$t('crontab_example')" name="example">
                         <heightResize :reduce="52" @resize="resize">
-                            <Table stripe size="small" :height="referenceHeight" border :columns="example.columns" :data="example.data"></Table>
+                            <Table stripe size="small" :height="referenceHeight" border :columns="example.columns"
+                                   :data="example.data"></Table>
                         </heightResize>
                     </TabPane>
                     <TabPane :label="$t('crontab_format')" name="format" style="text-align: center">
@@ -35,6 +36,7 @@ import moment from "moment"
 import {getCurrentLocale} from "../../i18n";
 import heightResize from "./components/heightResize";
 import autoHeightTextarea from "./components/autoHeightTextarea";
+
 export default {
     components: {
         heightResize,
@@ -63,7 +65,14 @@ export default {
         },
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData('input', (data) => {
+            try {
+                cronstrue.toString(data)
+            } catch {
+                return false
+            }
+            return true
+        })
         this.example.data = this.example.data.map((item) => {
             return {
                 example: item,
@@ -75,16 +84,15 @@ export default {
         conversion(input) {
             return cronstrue.toString(input, {locale: this.locale})
         },
-        resize(height){
+        resize(height) {
             this.referenceHeight = height
         }
     },
     data() {
         return {
-            referenceHeight:101,
+            referenceHeight: 101,
             current: {
-                input: "2 */5 * * 2-5",
-                operation: "check"
+                input: "2 */5 * * 2-5"
             },
             special: {
                 columns: [

src/views/tool/decimalConvert.vue

@@ -42,7 +42,7 @@ import Radix from './library/radix.js'
 const alphabet = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_@";
 export default {
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     watch: {
         convert: function (val) {

src/views/tool/diffs.vue

@@ -63,7 +63,7 @@ export default {
         }
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData()
     },
     methods: {
         setLanguage(lang) {

src/views/tool/encrypt.vue

@@ -40,7 +40,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     methods: {
         handle(v) {

src/views/tool/hash.vue

@@ -21,7 +21,7 @@ import crypto from "crypto-js"
 const sm = require('sm-crypto');
 export default {
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     computed: {
         md5() {

src/views/tool/hexString.vue

@@ -25,7 +25,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     methods: {
         handle(type) {

src/views/tool/html.vue

@@ -22,7 +22,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     methods: {
         handle(v) {

src/views/tool/ip.vue

@@ -32,7 +32,12 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input',(input)=>{
+            return (
+                /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(input)
+                || input === "localhost"
+            )
+        })
     },
     methods: {
         handle() {

src/views/tool/json.vue

@@ -23,7 +23,7 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData('content'))
+        this.$initToolData('content')
     },
     methods: {
         handle(v) {

src/views/tool/jsonToObject.vue

@@ -13,7 +13,8 @@
                     </Input>
                 </option-block>
             </div>
-            <input-block top="10px" right="10px" :text="$t('jsonToObject_format')" @on-default-right-bottom-click="format">
+            <input-block top="10px" right="10px" :text="$t('jsonToObject_format')"
+                         @on-default-right-bottom-click="format">
                 <heightResize :append="['.page-option-block']">
                     <code-editor v-model="current.input" :placeholder="$t('jsonToObject_input')" language="json"/>
                 </heightResize>
@@ -22,7 +23,8 @@
         <Col span="14">
             <input-block top="10px" right="10px">
                 <heightResize>
-                    <code-editor :placeholder="$t('jsonToObject_output')" :value="output" :language="languages[current.type]"/>
+                    <code-editor :placeholder="$t('jsonToObject_output')" :value="output"
+                                 :language="languages[current.type]"/>
                 </heightResize>
                 <template slot="extra">
                     <RadioGroup v-model="current.type" type="button" button-style="solid">
@@ -50,7 +52,14 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData('input', (input) => {
+            try {
+                require('jsonlint').parse(input)
+            } catch (e) {
+                return false
+            }
+            return true
+        })
     },
     computed: {
         output() {
@@ -82,13 +91,13 @@ export default {
                 return this.$t('jsonToObject_error', [error.message]).toString()
             }
         },
-        types(){
+        types() {
             return Object.keys(this.languages)
         }
     },
-    methods:{
-        format(){
-            if (this.current.input.trim()){
+    methods: {
+        format() {
+            if (this.current.input.trim()) {
                 this.current.input = jsonFormatter.beautify(this.current.input)
             }
         }

src/views/tool/jwt.vue

@@ -28,7 +28,7 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     computed: {
         output() {

src/views/tool/pinyin.vue

@@ -49,7 +49,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign({}, this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     computed: {
         output() {

src/views/tool/qrCode.vue

@@ -6,8 +6,8 @@
                     <Col span="14">
                         <Input v-model="current.generateInput" :rows="14" type="textarea" :placeholder="$t('qrCode_generate_input')"></Input>
                     </Col>
-                    <Col span="10">
-                        <div style="text-align: center" v-html="generateOutput"></div>
+                    <Col span="10" style="text-align: center;">
+                        <img v-if="generateOutput" @click="()=>$clipboardCopyImages(generateOutput)" style="width:300px;cursor:pointer" :src="generateOutput" />
                     </Col>
                 </Row>
             </TabPane>
@@ -24,7 +24,7 @@
                         </input-block>
                         <Input v-model="readerOutput" :rows="8" type="textarea" :placeholder="$t('qrCode_reader_output')"></Input>
                     </Col>
-                    <Col span="10" style="text-align: center" v-html="readerInputImg"></Col>
+                    <Col span="10" style="text-align: center" v-html="readerInputImg" />
                 </Row>
             </TabPane>
         </Tabs>
@@ -61,13 +61,13 @@ export default {
     created() {
         let feature = model.getToolCurrentFeature('generate')
         if (feature === 'generate') {
-            this.current = Object.assign(this.current, this.$getToolData('generateInput'))
             this.current.operation = feature;
+            this.$initToolData('generateInput')
         } else if (feature === 'reader') {
-            this.current = Object.assign(this.current, this.$getToolData('readerInput'))
             this.current.operation = feature;
+            this.$initToolData('readerInput')
         } else {
-            this.current = Object.assign(this.current, this.$getToolData())
+            this.$initToolData()
         }
     },
     methods: {
@@ -81,8 +81,8 @@ export default {
                     this.generateOutput = this.$t("qrCode_generate_error", [error]);
                     return;
                 }
-                this.$clipboardCopyImages(url)
-                this.generateOutput = `<img style="width:300px" src="${url}" />`
+                this.generateOutput = url
+
                 this.$saveToolData(this.current)
             })
         },

src/views/tool/randomString.vue

@@ -56,7 +56,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData()
     },
     mounted() {
         if (!this.current.output){

src/views/tool/regex.vue

@@ -54,7 +54,7 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     computed: {
         replaceContent(){

src/views/tool/serializeConversion.vue

@@ -38,7 +38,7 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     computed: {
         output() {

src/views/tool/sign.vue

@@ -78,7 +78,7 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData()
     },
     methods: {
         sign() {

src/views/tool/text.vue

@@ -147,7 +147,7 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("content"))
+        this.$initToolData('content')
     },
     computed: {
         stat(){

src/views/tool/time.vue

@@ -61,7 +61,7 @@ import moment from 'moment'
 
 export default {
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData()
     },
     computed: {
         poor() {

src/views/tool/timestamp.vue

@@ -14,9 +14,15 @@
                             </Button>
                             <DropdownMenu slot="list">
                                 <DropdownItem name="normalSecond">{{ $t('timestamp_normal_second') }}</DropdownItem>
-                                <DropdownItem name="normalMillisecond">{{ $t('timestamp_normal_millisecond') }}</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="unixMillisecond">{{
+                                        $t('timestamp_unix_millisecond')
+                                    }}
+                                </DropdownItem>
                             </DropdownMenu>
                         </Dropdown>
                     </template>
@@ -28,7 +34,10 @@
                         <span slot="prepend">{{ $t('timestamp_output') }}</span>
                     </Input>
                     <template slot="extra">
-                        <Button size="small" type="primary" @click="()=>copy(output)">{{ $t('timestamp_copy') }}</Button>
+                        <Button size="small" type="primary" @click="()=>copy(output)">{{
+                                $t('timestamp_copy')
+                            }}
+                        </Button>
                     </template>
                 </input-block>
             </option-block>
@@ -57,10 +66,14 @@ export default {
         heightResize
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData('input'))
-        if (!this.current.input) {
-            this.current.input = moment().format('YYYY-MM-DD HH:mm:ss')
-        }
+        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(() => {
@@ -127,7 +140,7 @@ export default {
     },
     methods: {
         copy(data) {
-            if (data){
+            if (data) {
                 this.$clipboardCopy(data, true)
             }
         },
@@ -147,7 +160,7 @@ export default {
     data() {
         return {
             current: {
-                input: ''
+                input: moment().format('YYYY-MM-DD HH:mm:ss')
             },
             timer: null,
             timestamp: 0,

src/views/tool/unicode.vue

@@ -36,7 +36,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     methods: {
         handle(operation) {

src/views/tool/url.vue

@@ -21,7 +21,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     methods: {
         handle(v) {

src/views/tool/uuid.vue

@@ -40,7 +40,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData()
     },
     mounted() {
         if (this.current.result.length < 1){

src/views/tool/variableConversion.vue

@@ -40,7 +40,7 @@ export default {
         }
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
     methods: {
         copy(type) {

src/views/tool/websocket.vue

@@ -70,7 +70,7 @@ export default {
         autoHeightTextarea
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData()
     },
     methods: {
         handle() {