mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
7.3 KiB
HTML
265 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="系统设置" details="管理系统配置、安全设置和个人偏好">
|
|
<title>系统设置</title>
|
|
</head>
|
|
<style>
|
|
body {
|
|
background-color: var(--bg-color-secondary);
|
|
color: var(--text-color);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.settings-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
color: var(--text-color);
|
|
margin: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.settings-section {
|
|
background: var(--bg-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: var(--spacing-lg);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-sm);
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.section-title i {
|
|
margin-right: 10px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
.theme-options {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.theme-option {
|
|
flex: 1;
|
|
padding: var(--spacing-md);
|
|
border: 2px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.theme-option.active {
|
|
border-color: var(--color-primary);
|
|
background-color: color-mix(in srgb, var(--color-primary), transparent 95%);
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.theme-option:hover {
|
|
border-color: color-mix(in srgb, var(--color-primary), transparent 50%);
|
|
}
|
|
|
|
</style>
|
|
|
|
<body>
|
|
<div class="settings-container">
|
|
<div class="header">
|
|
<h1>系统设置</h1>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<div class="section-title">
|
|
<i class="fa-solid fa-user-shield"></i> 安全设置
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">修改密码</label>
|
|
<div style="margin-bottom: 10px;">
|
|
<v-input type="password" placeholder="当前密码" v:value="security.currentPassword"></v-input>
|
|
</div>
|
|
<div style="margin-bottom: 10px;">
|
|
<v-input type="password" placeholder="新密码" v:value="security.newPassword"></v-input>
|
|
</div>
|
|
<div>
|
|
<v-input type="password" placeholder="确认新密码" v:value="security.confirmPassword"></v-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<v-btn :click="updatePassword" :loading="loading.password">更新密码</v-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<div class="section-title">
|
|
<i class="fa-solid fa-palette"></i> 外观设置
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">主题颜色</label>
|
|
<div class="theme-options">
|
|
<div class="theme-option" :class="{active: preferences.theme === 'light'}" @click="setTheme('light')">
|
|
<i class="fa-solid fa-sun"></i> 浅色
|
|
</div>
|
|
<div class="theme-option" :class="{active: preferences.theme === 'dark'}" @click="setTheme('dark')">
|
|
<i class="fa-solid fa-moon"></i> 深色
|
|
</div>
|
|
<div class="theme-option" :class="{active: preferences.theme === 'auto'}" @click="setTheme('auto')">
|
|
<i class="fa-solid fa-desktop"></i> 跟随系统
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 20px;">
|
|
<label class="form-label">紧凑模式</label>
|
|
<!-- toggle switch implementation using standard checkbox for now, could use v-switch if available -->
|
|
<label style="display: flex; align-items: center; cursor: pointer;">
|
|
<input type="checkbox" v:checked="preferences.compactMode" style="margin-right: 10px;">
|
|
<span>启用紧凑视图</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<v-btn variant="outline" :click="savePreferences" :loading="loading.preferences">保存偏好</v-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<div class="section-title">
|
|
<i class="fa-solid fa-bell"></i> 通知设置
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label style="display: flex; align-items: center; cursor: pointer; margin-bottom: 10px;">
|
|
<input type="checkbox" v:checked="notifications.email" style="margin-right: 10px;">
|
|
<span>接收邮件通知</span>
|
|
</label>
|
|
|
|
<label style="display: flex; align-items: center; cursor: pointer; margin-bottom: 10px;">
|
|
<input type="checkbox" v:checked="notifications.browser" style="margin-right: 10px;">
|
|
<span>接收浏览器推送</span>
|
|
</label>
|
|
|
|
<label style="display: flex; align-items: center; cursor: pointer;">
|
|
<input type="checkbox" v:checked="notifications.marketing" style="margin-right: 10px;">
|
|
<span>接收产品更新和营销信息</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<v-btn variant="outline" :click="saveNotifications" :loading="loading.notifications">保存设置</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script setup>
|
|
security = {
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
}
|
|
|
|
preferences = {
|
|
theme: 'light',
|
|
compactMode: false
|
|
}
|
|
|
|
notifications = {
|
|
email: true,
|
|
browser: true,
|
|
marketing: false
|
|
}
|
|
|
|
loading = {
|
|
password: false,
|
|
preferences: false,
|
|
notifications: false
|
|
}
|
|
|
|
updatePassword = () => {
|
|
if (!security.currentPassword || !security.newPassword) {
|
|
$message.error('请填写完整密码信息');
|
|
return;
|
|
}
|
|
|
|
if (security.newPassword !== security.confirmPassword) {
|
|
$message.error('两次输入的新密码不一致');
|
|
return;
|
|
}
|
|
|
|
loading.password = true;
|
|
// 模拟API调用
|
|
setTimeout(() => {
|
|
loading.password = false;
|
|
$message.success('密码更新成功');
|
|
security.currentPassword = '';
|
|
security.newPassword = '';
|
|
security.confirmPassword = '';
|
|
}, 1000);
|
|
}
|
|
|
|
setTheme = (theme) => {
|
|
preferences.theme = theme;
|
|
// 这里可以添加实际切换主题的逻辑，比如 document.documentElement.setAttribute('data-theme', theme)
|
|
$message.info(`已切换到 ${theme === 'light' ? '浅色' : theme === 'dark' ? '深色' : '自动'} 主题`);
|
|
}
|
|
|
|
savePreferences = () => {
|
|
loading.preferences = true;
|
|
setTimeout(() => {
|
|
loading.preferences = false;
|
|
$message.success('偏好设置已保存');
|
|
}, 800);
|
|
}
|
|
|
|
saveNotifications = () => {
|
|
loading.notifications = true;
|
|
setTimeout(() => {
|
|
loading.notifications = false;
|
|
$message.success('通知设置已保存');
|
|
}, 800);
|
|
}
|
|
</script>
|
|
|
|
</html> |