main

分支 (1)

管理

管理

main

MobaXtermKeygen
/
index.html

<!DOCTYPE html>
<html lang="en">

<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>MobaXterm Keygen</title>

    <script src="./js/vue.min-2.6.12.js"></script>
    <script src="./js/FileSaver.js"></script>
    <script src="./js/jszip.js"></script>

    <link href="./css/pure-min.css" rel="stylesheet" />
    <link href="./css/style.css" rel="stylesheet" />

</head>

<body>
    <div class="box-main">

        <div id="app">
            <div class="content">
                <div class="pure-form pure-form-aligned auto-center">
                    <fieldset>
                        <legend>
                            <h1 class="text-center">MobaXterm Keygen</h1>
                        </legend>

                        <div class="pure-g">

                            <div class="pure-control-group pure-u-1">
                                <label for="licenseType">版 本：</label>
                                <select name="licenseType" id="licenseType" v-model="licenseType">
                                    <!-- <option value="">请选择</option> -->
                                    <option v-for="(val, key) in LICENSE_TYPES" :value="val">{{key}}</option>
                                </select>
                            </div>

                            <div class="pure-control-group pure-u-1">
                                <label for="userName">用户名：</label>
                                <my-input :idattr="'userName'" :validation="'^[a-zA-Z]+$'" :valueattr="userName"
                                    :validationtips="'只能使用字母'" :placeholderattr="'示例 defaultUser'"
                                    @set-data="setUserName">
                                </my-input>
                            </div>

                            <div class="pure-control-group pure-u-1">
                                <label for="versionName">版本号：</label>
                                <my-input :idattr="'versionName'" :validation="'^[1-9][0-9]*\\.?\\d{0,1}$'"
                                    :validationtips="'小数且小数点后只能有1位'" :valueattr="versionName"
                                    :placeholderattr="'示例 21.0'" @set-data="setVersionName"></my-input>
                            </div>

                            <div class="pure-control-group pure-u-1">
                                <label for="userNum">用户数：</label>
                                <my-input :idattr="'userNum'" :validation="'^[1-9]+\\d*$'" :valueattr="userNum"
                                    :placeholderattr="'示例 1'" :validationtips="'数字且最小值为1'" @set-data="setUserNum">
                                </my-input>
                            </div>

                            <div class="pure-controls pure-u-1">
                                <button type="submit" class="pure-button pure-button-primary"
                                    @click.stop="generate">生成</button>
                            </div>

                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>


    <script type="module">
        import { LicenseType, generateLicense } from './js/mobaXtermGenerater.js'

        var app = new Vue({
            el: '#app',
            data() {
                return {
                    LICENSE_TYPES: LicenseType,

                    licenseType: 1,
                    userName: 'defaultUser',
                    versionName: '21.5',
                    userNum: 1,
                }
            },
            methods: {
                setUserName(newVal) {
                    this.userName = newVal;
                },
                setVersionName(newVal) {
                    this.versionName = newVal;
                },
                setUserNum(newVal) {
                    this.userNum = newVal;
                },
                generate() {
                    if (!this.userName) {
                        alert('请填写用户名');
                        return;
                    }
                    if (!this.versionName) {
                        alert('请填写版本号');
                        return;
                    }
                    if (!this.userNum) this.userNum = 1;
                    // 版本号拆分
                    let versionNameArr = this.versionName.split('.');
                    const majorVersion = parseInt(versionNameArr[0]);
                    const minorVersion = versionNameArr.length === 2 ? (parseInt(versionNameArr[1]) || 0) : 0;
                    // 生成license字符串
                    let licenseStr = generateLicense(this.licenseType, this.userName, this.userNum, majorVersion, minorVersion);
                    this.generateLicenseFile(licenseStr);
                },
                generateLicenseFile(licenseStr) {
                    let zip = new JSZip();
                    zip.file("Pro.key", licenseStr);
                    //var img = zip.folder("images");
                    //img.file("smile.gif", imgData, { base64: true });
                    zip.generateAsync({ type: "blob" })
                        .then(function (content) {
                            // see FileSaver.js
                            saveAs(content, "Custom.mxtpro");
                        });
                }
            },
            components: {
                'my-input': {
                    template: `<div class="my-input">
                                    <input :id="idattr" :placeholder="placeholderattr" v-model="value" required/>
                                    <div :class="validationTipsDiplay" class="my-input-tips-wrap">
                                        <span class="my-input-tips">{{validationtips}}</span>
                                        <div class="my-input-arrow"></div>
                                    </div>
                                </div>`,
                    data() {
                        // 将组件外传入的 props 的 valueattr 赋值到当前的 data.value 值
                        // 同时本组件的 value 值是和当前变量双向绑定的
                        return {
                            value: this.valueattr,
                            validationTipsDiplay: 'hide',
                            tipsDisplayTimeout: undefined
                        }
                    },
                    props: {
                        // 接收父组件使用本组件时绑定的 idattr 属性值绑定到当前值
                        idattr: { type: String, default: '' },
                        placeholderattr: { type: String, default: '' },
                        valueattr: '',
                        validation: { type: String, default: '' }, // 校验正则
                        validationtips: ''
                    },
                    watch: {
                        valueattr(newVal, oldVal) {
                            // 监视 父组件传入的 valueattr 值的变化绑定到当前组件的 data.value 值
                            this.value = newVal
                        },
                        value(newVal, oldVal) {
                            if (newVal && this.validation) {
                                let reg = new RegExp(this.validation);
                                if (!reg.test(newVal)) {
                                    this.validationTipsDiplay = '';
                                    this.value = oldVal;
                                    if (this.tipsDisplayTimeout) clearTimeout(this.tipsDisplayTimeout);
                                    var _this = this;
                                    this.tipsDisplayTimeout = setTimeout(function () {
                                        _this.tipsDisplayTimeout = undefined;
                                        _this.validationTipsDiplay = 'hide';
                                    }, 1000);
                                    return;
                                }
                            }
                            // 监视当前组件的 data.value 值触发父组件绑定的 set-data 事件改变父组件的值
                            this.$emit('set-data', newVal);
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>