update 实现密码强度的显示

Web/src/pages/system/account/setting/safety/index.vue

@@ -3,11 +3,8 @@
     <div class="yo-form">
       <h4 class="h4">安全设置</h4>
       <a-progress
-        :percent="15"
-        :stroke-color="{
-            from: '#108ee9',
-            to: '#87d068',
-        }"
+        :percent="[33.33, 66.67, 100][popSecurityLevel - 1]"
+        :stroke-color="strokeColor"
         :stroke-width="15"
         class="mb-md"
         status="active"
@@ -15,11 +12,13 @@
       >
         <span slot="format">
           帐号安全级别:
-          <span v-html="safetyLevel"></span>
+          <span class="text-success" v-if="popSecurityLevel === 3">强</span>
+          <span class="text-warning" v-else-if="popSecurityLevel === 2">中</span>
+          <span class="text-error" v-else>弱</span>
         </span>
       </a-progress>
       <a-list :data-source="data" bordered item-layout="vertical">
-        <a-list-item slot="renderItem" slot-scope="item">
+        <a-list-item :extra="item.extra" slot="renderItem" slot-scope="item">
           <template v-if="item.done">
             <span class="text-success" slot="actions">
               <a-icon class="mr-xxs" type="check-circle" />已设置
@@ -33,7 +32,6 @@
             <a @click="item.action" slot="actions">设置</a>
           </template>
           <a-list-item-meta :description="item.description" :title="item.title" />
-          <span>{{ item.content }}</span>
         </a-list-item>
       </a-list>
     </div>
@@ -78,9 +76,28 @@ export default {
   },
 
   computed: {
-    safetyLevel() {
+    popSecurityLevel() {
       // 计算帐号安全级别
-      return '<span class="text-error">弱</span>';
+      return (
+        Math.floor(((this.data.filter((p) => p.done).length - 1) * 3 + this.$root.global.info.securityLevel * 3) / 5) ||
+        1
+      );
+    },
+    strokeColor() {
+      return [
+        {
+          from: '#e280bf',
+          to: '#e91010',
+        },
+        {
+          from: '#e9ce10',
+          to: '#ff974d',
+        },
+        {
+          from: '#108ee9',
+          to: '#87d068',
+        },
+      ][this.popSecurityLevel - 1];
     },
   },
 
@@ -92,7 +109,18 @@ export default {
       title: '登录密码',
       description:
         '安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。',
-      content: '当前密码强度：弱(不保存密码明文,需要在数据库以字段形式存储)',
+      extra: (
+        <div>
+          当前密码强度：
+          {
+            [
+              <span class="text-error">弱</span>,
+              <span class="text-warning">中</span>,
+              <span class="text-success">强</span>,
+            ][info.securityLevel - 1]
+          }
+        </div>
+      ),
       done: true,
       action: () => {
         this.$refs['password-form'].onOpen({});