90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<template>
|
|
<a-list :data-source="securityList" item-layout="horizontal">
|
|
<template #renderItem="{ item }">
|
|
<a-list-item>
|
|
<a-list-item-meta>
|
|
<template #title>
|
|
{{ item.title }}
|
|
</template>
|
|
<template #description>
|
|
{{ item.description }}
|
|
</template>
|
|
</a-list-item-meta>
|
|
<template #actions>
|
|
<a-button
|
|
type="primary"
|
|
size="small"
|
|
@click="handleAction(item.action)"
|
|
>
|
|
{{ item.buttonText }}
|
|
</a-button>
|
|
</template>
|
|
</a-list-item>
|
|
</template>
|
|
</a-list>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { message } from "ant-design-vue";
|
|
|
|
const emit = defineEmits(["change-password"]);
|
|
|
|
const securityList = ref([
|
|
{
|
|
title: "登录密码",
|
|
description: "用于登录系统的密码，建议定期更换",
|
|
buttonText: "修改",
|
|
action: "password",
|
|
},
|
|
{
|
|
title: "手机验证",
|
|
description: "用于接收重要通知和安全验证",
|
|
buttonText: "已绑定",
|
|
action: "phone",
|
|
},
|
|
{
|
|
title: "邮箱验证",
|
|
description: "用于接收重要通知和账号找回",
|
|
buttonText: "已绑定",
|
|
action: "email",
|
|
},
|
|
{
|
|
title: "登录设备",
|
|
description: "查看和管理已登录的设备",
|
|
buttonText: "查看",
|
|
action: "device",
|
|
},
|
|
]);
|
|
|
|
const handleAction = (action) => {
|
|
switch (action) {
|
|
case "password":
|
|
emit("change-password");
|
|
break;
|
|
case "phone":
|
|
message.info("手机绑定功能开发中");
|
|
break;
|
|
case "email":
|
|
message.info("邮箱绑定功能开发中");
|
|
break;
|
|
case "device":
|
|
message.info("登录设备管理功能开发中");
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.ant-list-item) {
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
:deep(.ant-list-item:last-child) {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|