parent
e13486812c
commit
22065758d4
@ -0,0 +1,410 @@
|
|||||||
|
<template>
|
||||||
|
<div class="settings-view">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>设置</h1>
|
||||||
|
<p>管理你的账户偏好和应用设置</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings-content">
|
||||||
|
<!-- 通知设置 -->
|
||||||
|
<el-card class="settings-card" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<h3>通知设置</h3>
|
||||||
|
</template>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">邮件通知</div>
|
||||||
|
<div class="setting-desc">接收新评论和点赞的邮件通知</div>
|
||||||
|
</div>
|
||||||
|
<el-switch v-model="notificationSettings.email" />
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">浏览器通知</div>
|
||||||
|
<div class="setting-desc">在浏览器中显示实时通知</div>
|
||||||
|
</div>
|
||||||
|
<el-switch v-model="notificationSettings.browser" />
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">私信通知</div>
|
||||||
|
<div class="setting-desc">接收新私信的通知</div>
|
||||||
|
</div>
|
||||||
|
<el-switch v-model="notificationSettings.message" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 隐私设置 -->
|
||||||
|
<el-card class="settings-card" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<h3>隐私设置</h3>
|
||||||
|
</template>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">个人资料可见性</div>
|
||||||
|
<div class="setting-desc">其他用户是否可以查看你的个人资料</div>
|
||||||
|
</div>
|
||||||
|
<el-select v-model="privacySettings.profileVisibility" style="width: 140px;">
|
||||||
|
<el-option label="公开" value="public" />
|
||||||
|
<el-option label="仅好友" value="friends" />
|
||||||
|
<el-option label="私密" value="private" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">在线状态</div>
|
||||||
|
<div class="setting-desc">是否显示你的在线状态</div>
|
||||||
|
</div>
|
||||||
|
<el-switch v-model="privacySettings.showOnlineStatus" />
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">活动历史</div>
|
||||||
|
<div class="setting-desc">是否保存你的活动历史记录</div>
|
||||||
|
</div>
|
||||||
|
<el-switch v-model="privacySettings.saveActivityHistory" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 界面设置 -->
|
||||||
|
<el-card class="settings-card" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<h3>界面设置</h3>
|
||||||
|
</template>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">主题模式</div>
|
||||||
|
<div class="setting-desc">选择你喜欢的界面主题</div>
|
||||||
|
</div>
|
||||||
|
<el-select v-model="interfaceSettings.theme" style="width: 120px;">
|
||||||
|
<el-option label="自动" value="auto" />
|
||||||
|
<el-option label="浅色" value="light" />
|
||||||
|
<el-option label="深色" value="dark" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">语言</div>
|
||||||
|
<div class="setting-desc">选择界面显示语言</div>
|
||||||
|
</div>
|
||||||
|
<el-select v-model="interfaceSettings.language" style="width: 120px;">
|
||||||
|
<el-option label="中文" value="zh-CN" />
|
||||||
|
<el-option label="English" value="en-US" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">页面大小</div>
|
||||||
|
<div class="setting-desc">每页显示的内容数量</div>
|
||||||
|
</div>
|
||||||
|
<el-select v-model="interfaceSettings.pageSize" style="width: 100px;">
|
||||||
|
<el-option label="10" :value="10" />
|
||||||
|
<el-option label="20" :value="20" />
|
||||||
|
<el-option label="50" :value="50" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 账户安全 -->
|
||||||
|
<el-card class="settings-card" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<h3>账户安全</h3>
|
||||||
|
</template>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">两步验证</div>
|
||||||
|
<div class="setting-desc">为你的账户添加额外的安全保护</div>
|
||||||
|
</div>
|
||||||
|
<el-button size="small" @click="setupTwoFactor">
|
||||||
|
{{ securitySettings.twoFactorEnabled ? '已启用' : '启用' }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">登录通知</div>
|
||||||
|
<div class="setting-desc">新设备登录时发送通知</div>
|
||||||
|
</div>
|
||||||
|
<el-switch v-model="securitySettings.loginNotification" />
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">会话管理</div>
|
||||||
|
<div class="setting-desc">查看和管理你的登录会话</div>
|
||||||
|
</div>
|
||||||
|
<el-button size="small" @click="manageSessions">管理会话</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 数据管理 -->
|
||||||
|
<el-card class="settings-card" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<h3>数据管理</h3>
|
||||||
|
</template>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">数据导出</div>
|
||||||
|
<div class="setting-desc">下载你的所有数据</div>
|
||||||
|
</div>
|
||||||
|
<el-button size="small" @click="exportData">导出数据</el-button>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">清除缓存</div>
|
||||||
|
<div class="setting-desc">清除本地缓存数据</div>
|
||||||
|
</div>
|
||||||
|
<el-button size="small" @click="clearCache">清除缓存</el-button>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="setting-item danger">
|
||||||
|
<div class="setting-info">
|
||||||
|
<div class="setting-title">删除账户</div>
|
||||||
|
<div class="setting-desc">永久删除你的账户和所有数据</div>
|
||||||
|
</div>
|
||||||
|
<el-button size="small" type="danger" @click="deleteAccount">删除账户</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 保存按钮 -->
|
||||||
|
<div class="save-actions">
|
||||||
|
<el-button @click="resetSettings">重置</el-button>
|
||||||
|
<el-button type="primary" @click="saveSettings" :loading="saving">保存设置</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { ElMessage, ElMessageBox, ElCard, ElSwitch, ElSelect, ElOption, ElButton, ElDivider } from 'element-plus';
|
||||||
|
|
||||||
|
// 设置数据
|
||||||
|
const notificationSettings = ref({
|
||||||
|
email: true,
|
||||||
|
browser: false,
|
||||||
|
message: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const privacySettings = ref({
|
||||||
|
profileVisibility: 'public',
|
||||||
|
showOnlineStatus: true,
|
||||||
|
saveActivityHistory: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const interfaceSettings = ref({
|
||||||
|
theme: 'auto',
|
||||||
|
language: 'zh-CN',
|
||||||
|
pageSize: 20
|
||||||
|
});
|
||||||
|
|
||||||
|
const securitySettings = ref({
|
||||||
|
twoFactorEnabled: false,
|
||||||
|
loginNotification: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const saving = ref(false);
|
||||||
|
|
||||||
|
// 保存设置
|
||||||
|
const saveSettings = async () => {
|
||||||
|
saving.value = true;
|
||||||
|
try {
|
||||||
|
// 模拟API调用
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||||
|
|
||||||
|
// 这里应该调用真实的API来保存设置
|
||||||
|
// await settingsApi.saveSettings({
|
||||||
|
// notification: notificationSettings.value,
|
||||||
|
// privacy: privacySettings.value,
|
||||||
|
// interface: interfaceSettings.value,
|
||||||
|
// security: securitySettings.value
|
||||||
|
// });
|
||||||
|
|
||||||
|
ElMessage.success('设置保存成功');
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('设置保存失败');
|
||||||
|
} finally {
|
||||||
|
saving.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置设置
|
||||||
|
const resetSettings = () => {
|
||||||
|
notificationSettings.value = {
|
||||||
|
email: true,
|
||||||
|
browser: false,
|
||||||
|
message: true
|
||||||
|
};
|
||||||
|
|
||||||
|
privacySettings.value = {
|
||||||
|
profileVisibility: 'public',
|
||||||
|
showOnlineStatus: true,
|
||||||
|
saveActivityHistory: true
|
||||||
|
};
|
||||||
|
|
||||||
|
interfaceSettings.value = {
|
||||||
|
theme: 'auto',
|
||||||
|
language: 'zh-CN',
|
||||||
|
pageSize: 20
|
||||||
|
};
|
||||||
|
|
||||||
|
securitySettings.value = {
|
||||||
|
twoFactorEnabled: false,
|
||||||
|
loginNotification: true
|
||||||
|
};
|
||||||
|
|
||||||
|
ElMessage.success('设置已重置');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 启用两步验证
|
||||||
|
const setupTwoFactor = () => {
|
||||||
|
ElMessage.info('两步验证功能开发中');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 管理会话
|
||||||
|
const manageSessions = () => {
|
||||||
|
ElMessage.info('会话管理功能开发中');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出数据
|
||||||
|
const exportData = () => {
|
||||||
|
ElMessage.info('数据导出功能开发中');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 清除缓存
|
||||||
|
const clearCache = () => {
|
||||||
|
localStorage.clear();
|
||||||
|
sessionStorage.clear();
|
||||||
|
ElMessage.success('缓存已清除');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除账户
|
||||||
|
const deleteAccount = async () => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm(
|
||||||
|
'确定要删除账户吗？此操作不可逆，所有数据将永久丢失。',
|
||||||
|
'删除账户',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确定删除',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'error'
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ElMessage.info('账户删除功能开发中');
|
||||||
|
} catch {
|
||||||
|
// 用户取消
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 这里可以加载用户的设置数据
|
||||||
|
// loadUserSettings();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.settings-view {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header p {
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-card {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-card :deep(.el-card__header) {
|
||||||
|
padding: 18px 20px;
|
||||||
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-card h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item.danger {
|
||||||
|
border-left: 3px solid var(--el-color-danger);
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid var(--el-border-color-lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.settings-view {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue