From 58a8c1ea7aedd0d16702abcbc84f6e706cab9686 Mon Sep 17 00:00:00 2001
From: Frost-ZX <30585462+Frost-ZX@users.noreply.github.com>
Date: Tue, 4 May 2021 22:03:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E2=80=9CGenRandomStr?=
 =?UTF-8?q?=E2=80=9D=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/navTools.js             |   2 +-
 src/components/tools/GenRandomStr.vue | 166 ++++++++++++++++++++++++++
 2 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 src/components/tools/GenRandomStr.vue

diff --git a/src/assets/js/navTools.js b/src/assets/js/navTools.js
index f9d5abe..019fef3 100644
--- a/src/assets/js/navTools.js
+++ b/src/assets/js/navTools.js
@@ -43,7 +43,7 @@ let navTools = {
                 title: '生成随机字符串',
                 desc: '生成随机组合的字符串，可用于密码',
                 component: 'GenRandomStr',
-                enabled: false
+                enabled: true
             }
         }
     },
diff --git a/src/components/tools/GenRandomStr.vue b/src/components/tools/GenRandomStr.vue
new file mode 100644
index 0000000..dddd188
--- /dev/null
+++ b/src/components/tools/GenRandomStr.vue
@@ -0,0 +1,166 @@
+<template>
+    <div class="tool-elem">
+
+        <div class="info">
+            <div class="title">配置选项 &amp; 结果</div>
+            <div class="content">
+                <el-form label-width="6rem">
+                    <!-- 字符串长度 -->
+                    <el-form-item label="字符串长度">
+                        <el-input v-model.number="info.strLength" type="number" min="1" max="1024"></el-input>
+                    </el-form-item>
+                    <!-- 字符串格式 -->
+                    <el-form-item label="字符串格式">
+                        <el-checkbox v-model="info.option.hasNum"
+                            name="option" label="hasNum"
+                        >数字</el-checkbox>
+                        <el-checkbox v-model="info.option.hasChar"
+                            name="option" label="hasChar"
+                        >字母</el-checkbox>
+                        <el-checkbox v-model="info.option.hasSymbol"
+                            name="option" label="hasSymbol"
+                        >其他符号</el-checkbox>
+                        <el-checkbox v-model="info.option.caseSensitive"
+                            name="option" label="caseSensitive"
+                        >大小写</el-checkbox>
+                        <el-checkbox v-model="info.option.lowerCase"
+                            name="option" label="lowerCase"
+                        >全小写（需要选择“字母”且不选择“大小写”）</el-checkbox>
+                    </el-form-item>
+                    <!-- 生成结果 -->
+                    <el-form-item label="生成结果">
+                        <el-input v-model="info.result" type="text" readonly></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+
+        <div class="action">
+            <div class="title">操作</div>
+            <div class="content">
+                <el-button type="primary" @click="btnGenerate()">生成</el-button>
+            </div>
+        </div>
+
+        <div class="reference">
+            <div class="title">参考资料</div>
+            <div class="content">
+                <el-link href="https://www.cnblogs.com/hankuksui/p/9892729.html" target="_blank" type="primary">博客园 - hankuksui</el-link>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'GenRandomStr',
+    data() {
+        return {
+            info: {
+                strLength: 8,
+                option: {
+                    caseSensitive: false,
+                    hasNum: false,
+                    hasChar: false,
+                    hasSymbol: false,
+                    lowerCase: false
+                },
+                result: ''
+            }
+        }
+    },
+    methods: {
+
+        /**
+         * 生成
+         */
+        btnGenerate() {
+            var len = this.info.strLength;
+            var op = this.info.option;
+            var r = this.genRandomStr(len, op.hasNum, op.hasChar, op.hasSymbol, op.caseSensitive, op.lowerCase);
+
+            this.info.result = r;
+        },
+
+        /**
+         * 生成随机字符串
+         * 
+         * @param {number} strLength 长度
+         * @param {boolean} hasNum 是否包含数字
+         * @param {boolean} hasChar 是否包含字母
+         * @param {boolean} hasSymbol 是否包含其他符号
+         * @param {boolean} caseSensitive 是否包含大小写
+         * @param {boolean} lowerCase 是否全小写（当 caseSensitive 为 false 时起作用）
+         * 
+         * @returns {string} 生成的字符串
+         */
+        genRandomStr(strLength, hasNum, hasChar, hasSymbol, caseSensitive, lowerCase) {
+            var result = '请选中数字、字母或其他符号的其中一项！';
+
+            if (hasNum == false && hasChar == false && hasSymbol == false) {
+                return result;
+            }
+
+            result = '';
+
+            for (var i = strLength; i > 0; i--) {
+                let num = Math.floor((Math.random() * 94) + 33);
+                let flag = ((
+                    (hasNum == false) && ((num >= 48) && (num <= 57))
+                ) || (
+                    (hasChar == false) && ((
+                        (num >= 65) && (num <= 90)
+                    ) || (
+                        (num >= 97) && (num <= 122)
+                    ))
+                ) || (
+                    (hasSymbol == false) && ((
+                        (num >= 33) && (num <= 47)
+                    ) || (
+                        (num >= 58) && (num <= 64)
+                    ) || (
+                        (num >= 91) && (num <= 96)
+                    ) || (
+                        (num >= 123) && (num <= 127)
+                    )
+                )));
+
+                if (flag) {
+                    i++;
+                    continue;
+                }
+
+                /**
+                 * | CharCode   | 符号   |
+                 * | :--------- | :----- |
+                 * | 033 -> 047 | ! -> / |
+                 * | 048 -> 057 | 0 -> 9 |
+                 * | 058 -> 064 | : -> @ |
+                 * | 065 -> 090 | A -> Z |
+                 * | 091 -> 096 | [ -> ` |
+                 * | 097 -> 122 | a -> z |
+                 * | 123 -> 127 | { ->   |
+                 */
+
+                result += String.fromCharCode(num);
+            }
+
+            if (caseSensitive == false) {
+                result = (lowerCase ? result.toLocaleLowerCase() : result.toUpperCase());
+            }
+
+            return result;
+        }
+
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.tool-elem {
+    .content {
+        max-width: 30rem;
+    }
+}
+</style>