webhook接口调试，密码加密

package-lock.json

@@ -2222,6 +2222,11 @@
         }
       }
     },
+    "crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+    },
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^1.1.3",
     "clipboard": "^2.0.11",
+    "crypto-js": "^4.1.1",
     "echarts": "^5.4.0",
     "element-ui": "^2.15.12",
     "pinia": "^2.0.24",

src/assets/scss/element-variables.scss

@@ -225,7 +225,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     }
   }
 }
-// 表格 - API Keys
+// 表格 - API Keys页
 .el-table {
   .el-table__body-wrapper {
     overflow: visible;
@@ -276,7 +276,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   background-color: #fff;
   border-color: #fff;
 }
-// 标签 - Webhooks
+// 标签 - Webhooks页
 .el-tag {
   border: none;
   margin-right: 12px;
@@ -294,7 +294,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   text-align: left;
   line-height: 16px;
 }
-// Plan - pagination分页器
+// pagination分页器 - Plan页
 .el-pagination {
   padding: 0;
   color: #43474D;
@@ -328,4 +328,21 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   .el-pager .more::before {
     line-height: 24px;
   }
+}
+// DatePicker日期选择器 - dashboard页
+.el-date-range-picker {
+  width: 319px;
+  .el-picker-panel__body {
+    min-width: unset;
+    .el-picker-panel__content.is-right {
+      display: none;
+    }
+    .el-picker-panel__content.is-left {
+      width: 100%;
+    }
+  }
+  .el-picker-panel__icon-btn.el-icon-d-arrow-left,
+  .el-picker-panel__icon-btn.el-icon-d-arrow-right {
+    display: none;
+  }
 }

src/components/common/Header.vue

@@ -29,9 +29,12 @@ import { apiLoginOut } from '@/request/api'
 export default {
   data () {
     return {
-      userName: loginStore().user.name
+      userName: ''
     }
   },
+  mounted () {
+    this.userName = loginStore().user.name
+  },
   methods: {
     loginOut () {
       apiLoginOut({}, {}).then(res => {

src/components/webhooks/addAndEdit.vue

@@ -191,7 +191,7 @@ export default {
     submitBtnState (formName) {
       if (this.$refs[formName]) {
         const validateStateArr = []
-        this.$refs[formName]?.fields.foreach(item => {
+        this.$refs[formName]?.fields.map(item => {
           validateStateArr.push(item.validateState)
         })
         if (this.pageType === 'create') {

src/crypto/crypto.js

@@ -0,0 +1,29 @@
+// crypto.js文件内容
+import CryptoJS from 'crypto-js'
+export default { // 加密
+  /**
+   * @description: 加密
+   * @param {*} word
+   * @param {*} keyStr
+   */
+  set (word, keyStr) {
+    keyStr = keyStr || 'abcdef0123456789' // 16位的密钥，自己定义，和下面的密钥要相同
+    var srcs = CryptoJS.enc.Utf8.parse(word) // 字符串到数组转换，解析明文
+    var key = CryptoJS.enc.Utf8.parse(keyStr) // 字符串到数组转换，解析秘钥
+    // mode:加密方式；padding:填充方式；iv便宜向量（可选）
+    var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
+    return encrypted.toString() // 加密后的结果是对象，要转换为文本
+  },
+
+  /**
+   * @description: 解密
+   * @param {*} word
+   * @param {*} keyStr
+   */
+  get (word, keyStr) {
+    keyStr = keyStr || 'abcdef0123456789'
+    var key = CryptoJS.enc.Utf8.parse(keyStr) // 字符串到数组转换
+    var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
+    return CryptoJS.enc.Utf8.stringify(decrypt).toString() // 数组到字符串转换
+  }
+}

src/views/accountSettings/security.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script>
-import { loginStore } from '@/store/loginStore'
 import { apiChangePassword } from '@/request/api'
+import crypto from '@/crypto/crypto'
 
 export default {
   data () {
@@ -48,7 +48,7 @@ export default {
       }
     }
     return {
-      password: localStorage.getItem('password'),
+      password: crypto.get(localStorage.getItem('password')),
       ruleForm: {
         oldPassword: '',
         newPassword: '',
@@ -100,7 +100,7 @@ export default {
     submitBtnState (formName) {
       if (this.$refs[formName]) {
         const validateStateArr = []
-        this.$refs[formName]?.fields.foreach(item => {
+        this.$refs[formName]?.fields.map(item => {
           validateStateArr.push(item.validateState)
         })
         if (validateStateArr.includes('error') || validateStateArr.includes('')) {

src/views/login.vue

@@ -29,6 +29,7 @@
 import { loginStore } from '@/store/loginStore'
 import { store } from '@/store/store'
 import { apiLogin } from '@/request/api'
+import crypto from '@/crypto/crypto'
 
 export default {
   data () {
@@ -56,11 +57,12 @@ export default {
     const isRemenber = localStorage.getItem('isRemenber')
     if (isRemenber) {
       this.ruleForm.email = localStorage.getItem('username') || ''
-      this.ruleForm.password = localStorage.getItem('password') || ''
+      this.ruleForm.password = crypto.get(localStorage.getItem('password')) || ''
       this.ruleForm.isRemenber = true
     }
   },
   methods: {
+    // 登录
     submitForm (formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
@@ -76,7 +78,8 @@ export default {
                 token: res.data.token
               })
               localStorage.setItem('username', this.ruleForm.email)
-              localStorage.setItem('password', this.ruleForm.password)
+              const SECRET_PWD = crypto.set(this.ruleForm.password) // 加密
+              localStorage.setItem('password', SECRET_PWD)
               if (this.ruleForm.isRemenber) {
                 localStorage.setItem('isRemenber', 'true')
               } else {
@@ -99,6 +102,7 @@ export default {
         }
       })
     },
+    // 阻止粘贴
     handlePaste () {
       return false
     }

src/views/projects/dashboard.vue

@@ -16,9 +16,10 @@
               type="daterange"
               :editable="false"
               :clearable="false"
-              unlink-panels
+              :unlink-panels="true"
               :range-separator="timeSelected !== 4 || datePickerValue.length === 0 ? 'Custom' : '-'"
-              :class="{'picked' : datePickerValue.length !== 0}">
+              :class="{'picked' : datePickerValue.length !== 0}"
+              ref="date-picker">
             </el-date-picker>
           </li>
         </ul>
@@ -157,6 +158,7 @@ export default {
   },
   mounted () {
     this.drawLine()
+    // console.log(this.$refs['date-picker'])
   },
   watch: {
     datePickerValue (newVal, oldVal) {