fix: account settings

src/views/account/Custom.vue

@@ -1,7 +1,23 @@
 <template>
-  <div>
-    主题色：{{ theme | themeFilter }} <a-switch defaultChecked @change='onChange'/>
-  </div>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="data"
+  >
+    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+      <a-list-item-meta>
+        <a slot="title" href="https://vuecomponent.github.io/ant-design-vue/">{{ item.title }}</a>
+        <span slot="description">
+          <span class="security-list-description">{{ item.description }}</span>
+          <span v-if="item.value"> : </span>
+          <span class="security-list-value">{{ item.value }}</span>
+        </span>
+      </a-list-item-meta>
+      <template v-if="item.actions">
+        <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
+      </template>
+
+    </a-list-item>
+  </a-list>
 </template>
 
 <script>
@@ -9,7 +25,11 @@
     name: "Security",
     data () {
       return {
-        theme: 'dark'
+        theme: 'dark',
+
+        data: [
+          { title: '主题色' , description: '设置全局主题色', value: this.theme, actions: { title: '修改', callback: () => { this.$message.info('This is a normal message'); } } },
+        ]
       }
     },
     filters: {

src/views/account/Index.vue

@@ -10,28 +10,23 @@
         >
           <a-menu-item key="1">
             <router-link :to="{ name: 'BaseSettings' }">
-              <a-icon type="mail" />
               基本设置
             </router-link>
           </a-menu-item>
           <a-menu-item key="2">
             <router-link :to="{ name: 'SecuritySettings' }">
-              <a-icon type="mail" />
               安全设置
             </router-link>
           </a-menu-item>
           <a-menu-item key="3">
             <router-link :to="{ name: 'CustomSettings' }">
-              <a-icon type="mail" />
               个性化
             </router-link>
           </a-menu-item>
           <a-menu-item key="4">
-            <a-icon type="mail" />
             账户绑定
           </a-menu-item>
           <a-menu-item key="5">
-            <a-icon type="mail" />
             新消息通知
           </a-menu-item>
         </a-menu>

src/views/account/Security.vue

@@ -1,12 +1,38 @@
 <template>
-  <div>
-    222
-  </div>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="data"
+  >
+    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+      <a-list-item-meta>
+        <a slot="title" href="https://vuecomponent.github.io/ant-design-vue/">{{ item.title }}</a>
+        <span slot="description">
+          <span class="security-list-description">{{ item.description }}</span>
+          <span v-if="item.value"> : </span>
+          <span class="security-list-value">{{ item.value }}</span>
+        </span>
+      </a-list-item-meta>
+      <template v-if="item.actions">
+        <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
+      </template>
+
+    </a-list-item>
+  </a-list>
 </template>
 
 <script>
   export default {
-    name: "Security"
+    data () {
+      return {
+        data: [
+          { title: '账户密码' , description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$message.info('This is a normal message'); } } },
+          { title: '密保手机' , description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success'); } }  },
+          { title: '密保问题' , description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error'); } }  },
+          { title: '备用邮箱' , description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning'); } }  },
+          { title: 'MFA 设备' , description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message'); } }  },
+        ]
+      }
+    }
   }
 </script>