EncryptionTool

package.json

@@ -12,6 +12,7 @@
     "beautify": "^0.0.8",
     "clipboard": "^2.0.11",
     "core-js": "^3.6.5",
+    "crypto-js": "^4.2.0",
     "cssbeautify": "^0.3.1",
     "echarts": "^5.3.2",
     "element-ui": "^2.15.8",

src/assets/icon/encryption.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699342923644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1483" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.383 434.5h-68.688V274.688C754.695 140.875 645.883 32 512.07 32c-133.89 0-242.765 108.875-242.765 242.688V434.5h-68.688c-33.125 0-59.938 26.813-59.938 59.938V932c0 33.188 26.813 60 59.938 60h622.828c33.125 0 59.875-26.813 59.875-60V494.438c0-33.125-26.812-59.938-59.937-59.938M545.695 724.625v95.563c0 4.25-3.5 7.875-7.875 7.875h-51.578c-4.313 0-7.875-3.625-7.875-7.875v-95.563c-24.188-12.375-40.938-37.188-40.938-66.25 0-41.188 33.375-74.625 74.563-74.625 41.203 0 74.578 33.438 74.578 74.625 0.125 29.063-16.625 53.875-40.875 66.25M661.57 434.5H362.492V278.625c0-82.438 67.188-149.563 149.641-149.563 82.375 0 149.438 67.125 149.438 149.563V434.5z" p-id="1484" fill="#1296db"></path></svg>

src/page/EncryptionTool.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="container">
+    <!--工具简介-->
+    <div
+      class="tools-intro"
+      :style="{
+        backgroundImage: 'url(' + require('../assets/banner-tools.png') + ')',
+      }"
+      style="background-size: 100% 100%"
+    >
+      <div style="width: 1600px; align-items: center; margin: 0 auto">
+        <el-image
+          style="width: 100px; height: 100px; float: left"
+          :src="require('@/assets/icon/encryption.svg')"
+        ></el-image>
+        <div style="position: relative; left: 40px">
+          <p style="font-size: 25px; font-weight: 600">加密/解密工具</p>
+          <p>加密/解密功能采用crypto-js插件实现</p>
+        </div>
+      </div>
+    </div>
+
+    <div style="width: 1600px; margin: 40px auto">
+      <h3>操作区</h3>
+      <el-button @click="encryption" type="primary">加密 &gt;</el-button>
+      <el-button @click="decrypt" type="success" style="margin-right: 30px;">解密 &lt;</el-button>
+      密钥：<el-input class="keyInput" v-model="secretKey" placeholder="请输入密钥" style="width: 160px;">  </el-input>
+    </div>
+
+    <!--代码框-->
+    <div style="width: 1600px; display: flex; justify-content: space-between">
+      <div style="width: 49%">
+        <h3>明文</h3>
+        <el-input
+          v-model="encryptionText"
+          type="textarea"
+          :rows="20"
+        ></el-input>
+      </div>
+
+      <div style="width: 49%">
+        <h3>密文</h3>
+        <el-input v-model="decryptText" type="textarea" :rows="20"></el-input>
+      </div>
+    </div>
+
+    <div style="position: absolute; bottom: 0">
+      <p>工具库 由 OSREDM.COM 所有</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import CryptoJS from "crypto-js";
+
+export default {
+  name: "EncryptionTool",
+  data() {
+    return {
+      encryptionText: "", // 加密文本
+      decryptText: "", // 解密文本
+      secretKey: "", // 自己定义密钥
+    };
+  },
+  methods: {
+    // 加密
+    encryption() {
+      if(!this.secretKey){
+        this.$message({
+          showClose: true,
+          message: '密钥不能为空！',
+          type: 'warning'
+        });
+      } else {
+        this.decryptText = CryptoJS.AES.encrypt(
+        this.encryptionText,
+        this.secretKey
+      ).toString();
+      }
+    },
+    // 解密
+    decrypt() {
+      if(!this.secretKey){
+        this.$message({
+          showClose: true,
+          message: '密钥不能为空！',
+          type: 'warning'
+        });
+      } else {
+        const bytes = CryptoJS.AES.decrypt(this.decryptText, this.secretKey);
+        this.encryptionText = bytes.toString(CryptoJS.enc.Utf8);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.container {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fafcff;
+  height: 100%;
+}
+
+.tools-intro {
+  width: 100%;
+  height: 200px;
+  box-shadow: 0px 0px 40px 0px rgb(217, 224, 234);
+}
+
+::shadow .el-textarea__inner {
+  font-family: sans-serif !important;
+}
+
+::shadow .el-button.el-button--primary {
+  background: #4154f1;
+}
+
+::shadow .el-button.el-button--success {
+  background: #28bd6c;
+}
+
+
+/* .keyInputDiv {
+  width: 200px;
+  height: 40px;
+  display: flex;
+}
+
+.keyInputDiv .keyName {
+  width: 100px;
+  height: 100%;
+}
+
+.keyInputDiv .keyInput {
+  width: 160px;
+} */
+
+
+
+</style>

src/page/ToolsHome.vue

@@ -58,9 +58,9 @@
           <p class="tools-text">CSS代码格式化工具</p>
         </div>
 
-        <div class="tools-card" @mouseover="changeImg(8)" @mouseout="resetImg(8)">
+        <div class="tools-card" @mouseover="changeImg(8)" @mouseout="resetImg(8)" @click="openUtilsPage('/encryptionTool')">
           <img class="tools-img" :src="buttonImgList[8]" >
-          <p class="tools-text">CSS代码格式化工具</p>
+          <p class="tools-text">加密/解密工具</p>
         </div>
       </div>
     </div>

src/router/index.js

@@ -21,6 +21,13 @@ let routes = [
     component: () => import("@/page/JsonTools"),
     name: 'JsonTools',
   },
+
+  {
+    path: '/encryptionTool',
+    component: () => import("@/page/EncryptionTool"),
+    name: 'encryptionTool',
+  },
+
   // {
   //   path: '/404',
   //   component:() => import("@/components/404"),