加解密 TripleDES 优化

src/views/tool/encrypt.vue

 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
+    <heightResize ignore :append="['.page-option-block']" @resize="resize">
+        <autoHeightTextarea v-model="current.input" :height="inputHeight" :placeholder="$t('encrypt_input')"/>
+        <option-block class="page-option-block">
             <FormItem>
                 <Select v-model="current.type" style="width:200px">
                     <Option v-for="v in type" :value="v" :key="v">{{ v }}</Option>
                 </Select>
             </FormItem>
             <FormItem>
-                <Input v-model="current.password" placeholder="密码/秘钥"></Input>
+                <Input v-model="current.password" :placeholder="$t('encrypt_password')"></Input>
             </FormItem>
             <FormItem v-if="current.type === 'SM2'">
                 <Select v-model="current.sm2CipherMode" style="width:100px">
@@ -18,39 +18,49 @@
             </FormItem>
             <FormItem>
                 <ButtonGroup>
-                    <Button type="primary" @click="handle('encrypt')">加密</Button>
-                    <Button type="primary" @click="handle('decrypt')">解密</Button>
-                    <Button type="primary" @click="sm2Generate()" v-if="current.type === 'SM2'">生成密钥对</Button>
+                    <Button type="primary" @click="handle('encrypt')">{{ $t('encrypt_encrypt') }}</Button>
+                    <Button type="primary" @click="handle('decrypt')">{{ $t('encrypt_decrypt') }}</Button>
+                    <Button type="primary" @click="sm2Generate()" v-if="current.type === 'SM2'">
+                        {{ $t('encrypt_generate_secret_key') }}
+                    </Button>
                 </ButtonGroup>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+        <autoHeightTextarea :value="current.output" :height="outputHeight" :placeholder="$t('encrypt_output')"/>
+    </heightResize>
 </template>
 <script>
-    import crypto from "crypto-js"
-    export default {
+import crypto from "crypto-js"
+import heightResize from "./components/heightResize";
+import autoHeightTextarea from "./components/autoHeightTextarea";
+
+export default {
+    components: {
+        heightResize,
+        autoHeightTextarea
+    },
     created() {
-            this.current = Object.assign(this.current,this.$getToolData("input"))
+        this.$initToolData('input')
     },
     methods: {
         handle(v) {
             const sm2 = require('sm-crypto').sm2
             if (this.current.input) {
+                try {
+                    let output = ""
                     switch (this.current.type) {
                         case "AES":
                         case "DES":
                         case "RC4":
                         case "Rabbit":
-                        case "TripleDes":
+                        case "TripleDES":
                             if (v === "encrypt") {
-                                this.current.output = crypto[this.current.type].encrypt(
+                                output = crypto[this.current.type].encrypt(
                                     this.current.input,
                                     this.current.password
                                 ).toString();
-                            }
-                            else{
-                                this.current.output = crypto[this.current.type].decrypt(
+                            } else {
+                                output = crypto[this.current.type].decrypt(
                                     this.current.input,
                                     this.current.password
                                 ).toString(crypto.enc.Utf8);
@@ -58,60 +68,77 @@
                             break;
                         case "SM2":
                             if (v === "encrypt") {
-                                this.current.output =sm2.doEncrypt(
+                                output = sm2.doEncrypt(
                                     this.current.input,
                                     this.current.password,
                                     this.current.sm2CipherMode
                                 );
-                            }
-                            else{
-                                this.current.output =sm2.doDecrypt(
+                            } else {
+                                output = sm2.doDecrypt(
                                     this.current.input,
                                     this.current.password,
                                     this.current.sm2CipherMode
                                 );
                             }
                             break;
-                        default:
-                            return;
+                    }
+                    if (!output) {
+                        throw new Error("output null")
+                    }
+                    this.current.output = output
+                } catch (e) {
+                    return this.$Message.error(
+                        this.$t('encrypt_failed', [e.message]).toString()
+                    )
                 }
                 this.current.operation = v;
                 this.$clipboardCopy(this.current.output);
                 this.$saveToolData(this.current);
             }
         },
-            sm2Generate(){
+        sm2Generate() {
             const sm2 = require('sm-crypto').sm2
             let keypair = sm2.generateKeyPairHex()
-                let string = "公钥:\n"+keypair.publicKey+"\n"+"私钥:\n"+keypair.privateKey+"\n\n"+
-                    "请及时保存秘钥对, 关闭对话框后无法恢复当前秘钥数据"
+            let string = [
+                this.$t('encrypt_public_key'),
+                keypair.publicKey,
+                this.$t('encrypt_private_key'),
+                keypair.privateKey, '',
+                this.$t('encrypt_secret_key_prompt')
+            ].join("\n");
             this.$Modal.info({
                 render: (h) => {
                     return h('Input', {
                         props: {
                             value: string,
-                                type:"textarea",
-                                rows:9
+                            type: "textarea",
+                            rows: 9
                         }
                     })
                 },
-                    okText:"关闭",
-                    width:600
+                okText: this.$t('encrypt_close'),
+                width: 600
             })
         },
+        resize(height) {
+            this.inputHeight = Math.min(160, Math.ceil(height / 2))
+            this.outputHeight = height - this.inputHeight
+        }
     },
     data() {
         return {
-                current:{
+            current: {
                 input: "",
-                    password:"",
-                    sm2CipherMode:"C1C3C2",
+                password: "",
+                sm2CipherMode: "C1C3C2",
                 output: "",
-                    type:"AES",
-                    operation:""
+                type: "AES",
+                operation: ""
             },
-                type: ["AES","DES","RC4","Rabbit","TripleDes","SM2"],
+            type: ["AES", "DES", "RC4", "Rabbit", "TripleDES", "SM2"],
+            inputHeight: 100,
+            outputHeight: 100
         }
     },
-    }
+}
 </script>