CN-1663 fix: 1、用户--新建/编辑，添加密码强度提示；2、修复&符号在界面显示异常的问题。

src/assets/css/common/right-box-common.scss

@@ -145,6 +145,20 @@ $border-radius-small: 2px;
         width: calc(50% - 10px);
       }
     }
+
+    .my-progress {
+      margin-bottom: 6px;
+
+      .el-progress-bar__innerText {
+        color: rgba(0,0,0,0) !important;
+      }
+    }
+
+    .password-hint {
+      color: var(--el-color-info);
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
   }
 
   .right-box__footer {

src/components/rightBox/settings/UserBox.vue

@@ -23,12 +23,20 @@
           </el-form-item>
           <!--password-->
           <el-form-item :label="$t('config.user.pin')" prop="pin">
-            <el-input id="account-input-password" v-model="editObject.pin"  maxlength="64" placeholder=""
-                      show-word-limit type="password" @blur="pinBlur" autocomplete="new-password"></el-input>
+            <el-input id="account-input-password" v-model="editObject.pin"  maxlength="16" placeholder=""
+                      show-word-limit type="password" show-password @blur="pinBlur" @input="pinInput" autocomplete="new-password"></el-input>
           </el-form-item>
+          <!--密码强度-->
+          <el-progress
+              :text-inside="true"
+              class="my-progress"
+              :percentage="percentage"
+              :color="customColors" />
+          <!--密码提示-->
+          <div class="password-hint">{{ handleSpecialCode($t('validate.passwordHint')) }}</div>
           <!--pinChange-->
           <el-form-item :label="$t('config.user.confirmPin')" label-width="200px" prop="pinChange">
-            <el-input id="account-input-pinChange" v-model="editObject.pinChange"  maxlength="64" placeholder=""
+            <el-input id="account-input-pinChange" v-model="editObject.pinChange"  maxlength="16" placeholder=""
                       show-word-limit type="password"></el-input>
           </el-form-item>
           <!--email-->
@@ -104,6 +112,7 @@ import axios from 'axios'
 import _ from 'lodash'
 import { themeData, langData, storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
+import { handleSpecialCode } from '@/utils/tools'
 
 export default {
   name: 'UserBox',
@@ -114,8 +123,8 @@ export default {
       const isValid = value.match(reg) // 返回匹配到的值
       if (value && value.length < 8) {
         callback(new Error(this.$t('validate.atLeastEight')))
-      } else if (!isValid) {
-        callback(new Error(this.$t('validate.passwordError')))
+      } else if (!isValid || this.passwordLevel(this.editObject.pin) === 1) {
+        callback(new Error(handleSpecialCode(this.$t('validate.passwordError'))))
       } else {
         callback()
       }
@@ -197,7 +206,14 @@ export default {
       },
       roleData: [],
       themeData,
-      langData
+      langData,
+      percentage: 0, // 密码强度
+      customColors: [ // 密码强度颜色指标
+        { color: '#d32423', percentage: 26 },
+        { color: '#fdbf12', percentage: 51 },
+        { color: '#99c708', percentage: 76 },
+        { color: '#099407', percentage: 100 }
+      ]
     }
   },
   setup () {
@@ -206,6 +222,7 @@ export default {
     this.getRoleData()
   },
   methods: {
+    handleSpecialCode,
     isCurrentUser (username) {
       return localStorage.getItem(storageKey.username) === username
     },
@@ -284,6 +301,47 @@ export default {
           this.roleData = _.get(response, 'data.data.list', [])
         }
       })
+    },
+    pinInput () {
+      if (this.editObject?.pin.length < 8) {
+        this.percentage = 25
+      } else if (this.editObject?.pin.length < 10) {
+        this.percentage = this.passwordLevel(this.editObject.pin) > 1 ? 2 * 25 : this.passwordLevel(this.editObject.pin) * 25
+      } else if (this.editObject?.pin.length < 12) {
+        this.percentage = this.passwordLevel(this.editObject.pin) === 4 ? 3 * 25 : this.passwordLevel(this.editObject.pin) * 25
+      } else {
+        this.percentage = this.passwordLevel(this.editObject.pin) * 25
+      }
+    },
+    passwordLevel (I) {
+      let H = 0
+      for (let a = 0; a < I.length; a++) {
+        H |= this.CharMode(I.charCodeAt(a))
+      }
+      return this.bitTotal(H)
+    },
+    CharMode (H) {
+      if (H >= 48 && H <= 57) { // 数字
+        return 1
+      }
+      if (H >= 65 && H <= 90) { // 大写
+        return 2
+      }
+      if (H >= 97 && H <= 122) { // 小写
+        return 4
+      } else {
+        return 8
+      }
+    },
+    bitTotal (H) {
+      let I = 0
+      for (let j = 0; j < 4; j++) {
+        if (H & 1) {
+          I++
+        }
+        H >>>= 1
+      }
+      return I
     }
   },
   watch: {

src/components/table/administration/I18nTable.vue

@@ -32,7 +32,8 @@
         <div class="col-resize-area"></div>
       </template>
       <template #default="scope" :column="item">
-        <span>{{scope.row[item.prop] || '-'}}</span>
+        <span v-if="item.prop === 'value'">{{handleSpecialCode(scope.row[item.prop]) || '-'}}</span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
       </template>
     </el-table-column><template v-slot:empty >
     <div class="table-no-data" v-if="isNoData">
@@ -45,6 +46,7 @@
 <script>
 import table from '@/mixins/table'
 import { api } from '@/utils/api'
+import { handleSpecialCode } from '@/utils/tools'
 
 export default {
   name: 'I18nTable',
@@ -91,6 +93,9 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    handleSpecialCode
   }
 }
 </script>

src/mixins/data-list.js

@@ -1,4 +1,4 @@
-import { tableSort } from '@/utils/tools'
+import { handleSpecialCode, tableSort } from '@/utils/tools'
 import { defaultPageSize, fromRoute, position, storageKey, dbTableColumnCustomizeConfigPre, dbTableColumnCustomizeConfig } from '@/utils/constants'
 import _ from 'lodash'
 import { ref } from 'vue'
@@ -242,6 +242,9 @@ export default {
         axios.get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
           if (response.status === 200) {
             this.object = response.data.data
+            if (this.url === '/sys/i18n') {
+              this.object.value = handleSpecialCode(this.object.value)
+            }
             this.rightBox.show = true
           }
         })

src/utils/tools.js

@@ -1584,3 +1584,10 @@ const tagValueHandler = (value) => {
 export const headerCellClass = (row) => {
   return 'my-header-cell-class'
 }
+
+/**
+ * & 被转译为& 将转义后的值转为 &
+ */
+export const handleSpecialCode = (str) => {
+  return str.indexOf('&') > -1 ? str.replaceAll('&', '&') : str
+}