567 lines
14 KiB
Vue
567 lines
14 KiB
Vue
<template>
|
||
<div class="security-page">
|
||
<el-row :gutter="20">
|
||
<!-- 安全状态概览 -->
|
||
<el-col :span="16">
|
||
<el-card class="security-overview">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>安全状态</span>
|
||
<el-button-group>
|
||
<el-button type="primary" @click="refreshStatus">
|
||
<el-icon><Refresh /></el-icon>刷新
|
||
</el-button>
|
||
<el-button type="success" @click="startScan">
|
||
<el-icon><Monitor /></el-icon>安全检测
|
||
</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
</template>
|
||
<div class="security-grid">
|
||
<div
|
||
v-for="item in securityStatus"
|
||
:key="item.id"
|
||
class="security-item"
|
||
>
|
||
<el-icon :size="40" :color="item.color">
|
||
<component :is="item.icon" />
|
||
</el-icon>
|
||
<div class="item-info">
|
||
<h3>{{ item.name }}</h3>
|
||
<p>{{ item.description }}</p>
|
||
<el-tag :type="item.status === 'safe' ? 'success' : 'danger'">
|
||
{{ item.status === 'safe' ? '安全' : '风险' }}
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 安全日志 -->
|
||
<el-card class="security-logs mt-20">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>安全日志</span>
|
||
<el-button type="primary" text @click="exportLogs">
|
||
导出日志
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
<el-table :data="securityLogs" style="width: 100%">
|
||
<el-table-column prop="time" label="时间" width="180" />
|
||
<el-table-column prop="type" label="类型" width="120">
|
||
<template #default="{ row }">
|
||
<el-tag :type="getLogType(row.type)">{{ row.type }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="description" label="描述" />
|
||
<el-table-column prop="ip" label="IP地址" width="140" />
|
||
<el-table-column prop="status" label="状态" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.status === 'success' ? 'success' : 'danger'">
|
||
{{ row.status === 'success' ? '成功' : '失败' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 安全设置 -->
|
||
<el-col :span="8">
|
||
<!-- 身份认证 -->
|
||
<el-card class="auth-settings">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>身份认证</span>
|
||
<el-switch
|
||
v-model="securitySettings.twoFactorAuth"
|
||
active-text="双因素认证"
|
||
@change="toggleTwoFactor"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<div class="settings-list">
|
||
<div class="setting-item">
|
||
<span>登录密码</span>
|
||
<el-button link type="primary" @click="changePassword">
|
||
修改密码
|
||
</el-button>
|
||
</div>
|
||
<div class="setting-item">
|
||
<span>安全手机</span>
|
||
<el-tag type="success" v-if="securitySettings.phone">
|
||
{{ maskPhone(securitySettings.phone) }}
|
||
</el-tag>
|
||
<el-button v-else link type="warning" @click="bindPhone">
|
||
绑定手机
|
||
</el-button>
|
||
</div>
|
||
<div class="setting-item">
|
||
<span>人脸识别</span>
|
||
<el-button
|
||
link
|
||
:type="securitySettings.faceId ? 'success' : 'primary'"
|
||
@click="manageFaceId"
|
||
>
|
||
{{ securitySettings.faceId ? '已开启' : '去开启' }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 隐私设置 -->
|
||
<el-card class="privacy-settings mt-20">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>隐私设置</span>
|
||
</div>
|
||
</template>
|
||
<el-form :model="privacySettings" label-width="120px">
|
||
<el-form-item label="个人信息可见">
|
||
<el-select v-model="privacySettings.infoVisibility">
|
||
<el-option label="所有人可见" value="public" />
|
||
<el-option label="仅家人可见" value="family" />
|
||
<el-option label="仅自己可见" value="private" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="位置信息">
|
||
<el-switch v-model="privacySettings.locationSharing" />
|
||
</el-form-item>
|
||
<el-form-item label="健康数据">
|
||
<el-switch v-model="privacySettings.healthDataSharing" />
|
||
</el-form-item>
|
||
<el-form-item label="活动记录">
|
||
<el-switch v-model="privacySettings.activitySharing" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<!-- 应急处理 -->
|
||
<el-card class="emergency-settings mt-20">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>应急处理</span>
|
||
<el-button type="danger" @click="showEmergencyPanel">
|
||
应急面板
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
<div class="emergency-contacts">
|
||
<h4>紧急联系人</h4>
|
||
<div
|
||
v-for="contact in emergencyContacts"
|
||
:key="contact.id"
|
||
class="contact-item"
|
||
>
|
||
<div class="contact-info">
|
||
<span>{{ contact.name }}</span>
|
||
<span>{{ contact.phone }}</span>
|
||
</div>
|
||
<el-button type="danger" circle @click="callEmergency(contact)">
|
||
<el-icon><Phone /></el-icon>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 修改密码对话框 -->
|
||
<el-dialog v-model="passwordDialogVisible" title="修改密码" width="30%">
|
||
<el-form :model="passwordForm" label-width="100px">
|
||
<el-form-item label="当前密码">
|
||
<el-input v-model="passwordForm.oldPassword" type="password" show-password />
|
||
</el-form-item>
|
||
<el-form-item label="新密码">
|
||
<el-input v-model="passwordForm.newPassword" type="password" show-password />
|
||
</el-form-item>
|
||
<el-form-item label="确认新密码">
|
||
<el-input v-model="passwordForm.confirmPassword" type="password" show-password />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="passwordDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="submitPasswordChange">确定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 应急面板对话框 -->
|
||
<el-dialog v-model="emergencyDialogVisible" title="应急处理面板" width="50%">
|
||
<div class="emergency-panel">
|
||
<div class="emergency-actions">
|
||
<el-button type="danger" size="large" @click="lockAccount">
|
||
<el-icon><Lock /></el-icon>
|
||
紧急锁定账号
|
||
</el-button>
|
||
<el-button type="warning" size="large" @click="resetDevice">
|
||
<el-icon><Delete /></el-icon>
|
||
远程重置设备
|
||
</el-button>
|
||
<el-button type="info" size="large" @click="backupData">
|
||
<el-icon><Download /></el-icon>
|
||
紧急数据备份
|
||
</el-button>
|
||
</div>
|
||
<el-alert
|
||
title="注意：应急操作不可撤销，请谨慎操作！"
|
||
type="warning"
|
||
:closable="false"
|
||
show-icon
|
||
/>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import {
|
||
Refresh,
|
||
Monitor,
|
||
Lock,
|
||
Unlock,
|
||
Phone,
|
||
Delete,
|
||
Download,
|
||
Warning,
|
||
Key,
|
||
Message,
|
||
Connection
|
||
} from '@element-plus/icons-vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
||
// 安全状态
|
||
const securityStatus = ref([
|
||
{
|
||
id: 1,
|
||
name: '账号安全',
|
||
description: '密码强度良好，双因素认证已开启',
|
||
icon: 'Lock',
|
||
color: '#67C23A',
|
||
status: 'safe'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '设备安全',
|
||
description: '当前设备已认证，无异常登录',
|
||
icon: 'Monitor',
|
||
color: '#409EFF',
|
||
status: 'safe'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '数据安全',
|
||
description: '数据加密存储，已开启自动备份',
|
||
icon: 'Connection',
|
||
color: '#E6A23C',
|
||
status: 'safe'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '支付安全',
|
||
description: '支付密码已设置，交易验证正常',
|
||
icon: 'Key',
|
||
color: '#F56C6C',
|
||
status: 'safe'
|
||
}
|
||
])
|
||
|
||
// 安全日志
|
||
const securityLogs = ref([
|
||
{
|
||
time: '2024-03-20 10:30:00',
|
||
type: '登录',
|
||
description: '账号登录成功',
|
||
ip: '192.168.1.100',
|
||
status: 'success'
|
||
},
|
||
{
|
||
time: '2024-03-20 09:15:00',
|
||
type: '修改密码',
|
||
description: '密码修改成功',
|
||
ip: '192.168.1.100',
|
||
status: 'success'
|
||
},
|
||
{
|
||
time: '2024-03-19 15:20:00',
|
||
type: '异常登录',
|
||
description: '检测到异地登录尝试',
|
||
ip: '10.0.0.1',
|
||
status: 'failed'
|
||
}
|
||
])
|
||
|
||
// 安全设置
|
||
const securitySettings = ref({
|
||
twoFactorAuth: true,
|
||
phone: '13800138000',
|
||
faceId: true
|
||
})
|
||
|
||
// 隐私设置
|
||
const privacySettings = ref({
|
||
infoVisibility: 'family',
|
||
locationSharing: true,
|
||
healthDataSharing: false,
|
||
activitySharing: true
|
||
})
|
||
|
||
// 紧急联系人
|
||
const emergencyContacts = ref([
|
||
{ id: 1, name: '张小明', phone: '13800138001' },
|
||
{ id: 2, name: '李医生', phone: '13900139000' }
|
||
])
|
||
|
||
// 对话框控制
|
||
const passwordDialogVisible = ref(false)
|
||
const emergencyDialogVisible = ref(false)
|
||
const passwordForm = ref({
|
||
oldPassword: '',
|
||
newPassword: '',
|
||
confirmPassword: ''
|
||
})
|
||
|
||
// 方法
|
||
const refreshStatus = () => {
|
||
ElMessage.success('安全状态已更新')
|
||
}
|
||
|
||
const startScan = () => {
|
||
ElMessage.info('正在进行安全扫描...')
|
||
}
|
||
|
||
const exportLogs = () => {
|
||
ElMessage.success('日志导出成功')
|
||
}
|
||
|
||
const getLogType = (type: string) => {
|
||
const types: Record<string, string> = {
|
||
'登录': 'primary',
|
||
'修改密码': 'success',
|
||
'异常登录': 'danger'
|
||
}
|
||
return types[type] || 'info'
|
||
}
|
||
|
||
const toggleTwoFactor = (value: boolean) => {
|
||
if (value) {
|
||
ElMessage.success('双因素认证已开启')
|
||
} else {
|
||
ElMessage.warning('双因素认证已关闭')
|
||
}
|
||
}
|
||
|
||
const changePassword = () => {
|
||
passwordDialogVisible.value = true
|
||
}
|
||
|
||
const submitPasswordChange = () => {
|
||
if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
|
||
ElMessage.error('两次输入的密码不一致')
|
||
return
|
||
}
|
||
ElMessage.success('密码修改成功')
|
||
passwordDialogVisible.value = false
|
||
passwordForm.value = {
|
||
oldPassword: '',
|
||
newPassword: '',
|
||
confirmPassword: ''
|
||
}
|
||
}
|
||
|
||
const bindPhone = () => {
|
||
ElMessage.info('请完成手机号绑定')
|
||
}
|
||
|
||
const manageFaceId = () => {
|
||
if (securitySettings.value.faceId) {
|
||
ElMessage.info('人脸识别已开启')
|
||
} else {
|
||
ElMessage.info('请完成人脸识别设置')
|
||
}
|
||
}
|
||
|
||
const maskPhone = (phone: string) => {
|
||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||
}
|
||
|
||
const showEmergencyPanel = () => {
|
||
emergencyDialogVisible.value = true
|
||
}
|
||
|
||
const callEmergency = (contact: any) => {
|
||
ElMessageBox.confirm(
|
||
`确定要拨打紧急联系人 ${contact.name} 的电话吗？`,
|
||
'提示',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}
|
||
)
|
||
}
|
||
|
||
const lockAccount = () => {
|
||
ElMessageBox.confirm(
|
||
'确定要锁定账号吗？此操作将导致所有设备退出登录。',
|
||
'警告',
|
||
{
|
||
confirmButtonText: '确定锁定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}
|
||
).then(() => {
|
||
ElMessage.success('账号已锁定')
|
||
emergencyDialogVisible.value = false
|
||
})
|
||
}
|
||
|
||
const resetDevice = () => {
|
||
ElMessageBox.confirm(
|
||
'确定要远程重置设备吗？此操作将清除设备上的所有数据。',
|
||
'警告',
|
||
{
|
||
confirmButtonText: '确定重置',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}
|
||
).then(() => {
|
||
ElMessage.success('设备重置指令已发送')
|
||
emergencyDialogVisible.value = false
|
||
})
|
||
}
|
||
|
||
const backupData = () => {
|
||
ElMessage.success('正在执行紧急数据备份...')
|
||
emergencyDialogVisible.value = false
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.security-page {
|
||
padding: 20px;
|
||
}
|
||
|
||
.mt-20 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 安全状态网格 */
|
||
.security-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.security-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 20px;
|
||
background: #f5f7fa;
|
||
border-radius: 8px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.security-item:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.item-info {
|
||
margin-left: 15px;
|
||
flex: 1;
|
||
}
|
||
|
||
.item-info h3 {
|
||
margin: 0 0 10px 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.item-info p {
|
||
margin: 0 0 10px 0;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 设置列表样式 */
|
||
.settings-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.setting-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
/* 紧急联系人样式 */
|
||
.emergency-contacts h4 {
|
||
margin: 0 0 15px 0;
|
||
color: #606266;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px;
|
||
background: #f5f7fa;
|
||
border-radius: 4px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.contact-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.contact-info span:last-child {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 应急面板样式 */
|
||
.emergency-panel {
|
||
padding: 20px;
|
||
}
|
||
|
||
.emergency-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.emergency-actions .el-button {
|
||
height: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.emergency-actions .el-icon {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
</style> |