556 lines
14 KiB
HTML
Executable File
556 lines
14 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="coming-apps-page">
|
|
<div class="header">
|
|
<a href="{{ url_for('more') }}" class="back-link" title="返回">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1>个人信息</h1>
|
|
</div>
|
|
|
|
<div id="toast" class="developing-tip">
|
|
<span id="toastMessage"></span>
|
|
</div>
|
|
|
|
<div class="profile-container">
|
|
<div class="profile-section">
|
|
<div class="profile-header">
|
|
<div class="profile-avatar-wrapper">
|
|
<div class="profile-avatar">
|
|
{% if session.huawei_user.avatar %}
|
|
<img src="{{ session.huawei_user.avatar }}" alt="{{ session.huawei_user.name }}" class="avatar-img">
|
|
{% else %}
|
|
<i class="fas fa-user"></i>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="profile-name">{{ session.huawei_user.name }}</div>
|
|
<div class="profile-subtitle">个人资料</div>
|
|
</div>
|
|
|
|
<div class="profile-info">
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="fas fa-user-tag"></i>
|
|
<span>昵称</span>
|
|
</div>
|
|
<div class="info-value">
|
|
<input type="text"
|
|
class="info-input"
|
|
value="{{ session.huawei_user.name }}"
|
|
data-field="name"
|
|
onchange="updateField(this)">
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="fas fa-envelope"></i>
|
|
<span>邮箱</span>
|
|
</div>
|
|
<div class="info-value">
|
|
<input type="email"
|
|
class="info-input"
|
|
value="{{ session.huawei_user.email or '' }}"
|
|
placeholder="未设置"
|
|
data-field="email"
|
|
onchange="updateField(this)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="profile-actions">
|
|
<button class="save-btn ripple" onclick="saveAllChanges()">
|
|
<i class="fas fa-save"></i> 保存更改
|
|
</button>
|
|
<button class="action-button ripple" onclick="logout()">
|
|
<i class="fas fa-sign-out-alt"></i> 退出登录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.coming-apps-page {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px 15px;
|
|
min-height: 100vh;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
[data-theme="dark"] .coming-apps-page {
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
background: white;
|
|
padding: 10px 15px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.back-link {
|
|
color: #666;
|
|
text-decoration: none;
|
|
padding: 10px;
|
|
border-radius: 50%;
|
|
background: #f5f5f7;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.back-link:hover {
|
|
background: #e5e5e7;
|
|
color: #333;
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
color: #333;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
}
|
|
|
|
.profile-container {
|
|
margin-top: 90px;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.profile-section {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.profile-section:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.profile-header {
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.profile-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.profile-avatar-wrapper {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border: 3px solid rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.profile-avatar i {
|
|
font-size: 40px;
|
|
color: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.profile-name {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.profile-subtitle {
|
|
font-size: 14px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.profile-info {
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.info-item {
|
|
padding: 12px;
|
|
border-bottom: 1px solid rgba(0,0,0,0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-item:hover {
|
|
background-color: rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.info-label {
|
|
width: 70px;
|
|
padding-right: 12px;
|
|
color: #666;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-label i {
|
|
width: 14px;
|
|
color: #6366f1;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.info-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
background: transparent;
|
|
color: inherit;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.info-input:hover {
|
|
border-color: #e5e7eb;
|
|
background: rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.profile-actions {
|
|
padding: 20px 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.save-btn, .action-button {
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.save-btn {
|
|
background: #6366f1;
|
|
color: white;
|
|
}
|
|
|
|
.save-btn:hover {
|
|
background: #4f46e5;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.action-button {
|
|
background: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
.action-button:hover {
|
|
background: #dc2626;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ripple {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ripple::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
transform: scale(10, 10);
|
|
opacity: 0;
|
|
transition: transform 0.5s, opacity 1s;
|
|
}
|
|
|
|
.ripple:active::after {
|
|
transform: scale(0, 0);
|
|
opacity: 0.3;
|
|
transition: 0s;
|
|
}
|
|
|
|
.developing-tip {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
pointer-events: none;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.developing-tip.show {
|
|
opacity: 1;
|
|
transform: translate(-50%, -10px);
|
|
}
|
|
|
|
/* Dark mode styles */
|
|
[data-theme="dark"] .header {
|
|
background: rgba(30,30,30,0.8);
|
|
}
|
|
|
|
[data-theme="dark"] .header h1 {
|
|
color: #fff;
|
|
}
|
|
|
|
[data-theme="dark"] .back-link {
|
|
color: #ccc;
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .back-link:hover {
|
|
background: rgba(255,255,255,0.15);
|
|
color: #fff;
|
|
}
|
|
|
|
[data-theme="dark"] .profile-section {
|
|
background: #242424;
|
|
}
|
|
|
|
[data-theme="dark"] .info-item {
|
|
border-color: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .info-item:hover {
|
|
background-color: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
[data-theme="dark"] .info-input {
|
|
color: #fff;
|
|
}
|
|
|
|
[data-theme="dark"] .info-input:hover {
|
|
border-color: rgba(255,255,255,0.2);
|
|
background: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
[data-theme="dark"] .info-input:focus {
|
|
border-color: #6366f1;
|
|
background: rgba(99,102,241,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .developing-tip {
|
|
background: rgba(255,255,255,0.9);
|
|
color: black;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let changedFields = new Set();
|
|
|
|
function updateField(element) {
|
|
const field = element.dataset.field;
|
|
const value = element.value;
|
|
|
|
if (!value.trim()) {
|
|
showToast('输入不能为空');
|
|
element.value = element.defaultValue;
|
|
return;
|
|
}
|
|
|
|
if (field === 'email' && value.trim() !== '') {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(value)) {
|
|
showToast('请输入有效的邮箱地址');
|
|
element.value = element.defaultValue;
|
|
return;
|
|
}
|
|
}
|
|
|
|
changedFields.add(field);
|
|
element.dataset.changed = 'true';
|
|
element.classList.add('modified');
|
|
}
|
|
|
|
function saveAllChanges() {
|
|
const changedInputs = document.querySelectorAll('[data-changed="true"]');
|
|
if (!changedInputs.length) {
|
|
showToast('没有需要保存的更改');
|
|
return;
|
|
}
|
|
|
|
const saveBtn = document.querySelector('.save-btn');
|
|
saveBtn.disabled = true;
|
|
saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
|
|
|
|
let promises = [];
|
|
changedInputs.forEach(input => {
|
|
const field = input.dataset.field;
|
|
const value = input.value.trim();
|
|
|
|
promises.push(
|
|
fetch('/user/update_profile', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
field: field,
|
|
value: value
|
|
})
|
|
}).then(response => response.json())
|
|
);
|
|
});
|
|
|
|
Promise.all(promises)
|
|
.then(results => {
|
|
const allSuccess = results.every(result => result.success);
|
|
if (allSuccess) {
|
|
showToast('保存成功');
|
|
changedInputs.forEach(input => {
|
|
input.removeAttribute('data-changed');
|
|
input.classList.remove('modified');
|
|
if (input.dataset.field === 'name') {
|
|
document.querySelector('.profile-name').textContent = input.value;
|
|
}
|
|
});
|
|
changedFields.clear();
|
|
} else {
|
|
showToast('部分更改保存失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Save failed:', error);
|
|
showToast('保存失败，请稍后重试');
|
|
})
|
|
.finally(() => {
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = '<i class="fas fa-save"></i> 保存更改';
|
|
});
|
|
}
|
|
|
|
function showToast(message) {
|
|
const toast = document.getElementById('toast');
|
|
const toastMessage = document.getElementById('toastMessage');
|
|
toastMessage.textContent = message;
|
|
toast.classList.add('show');
|
|
|
|
setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
}, 2000);
|
|
}
|
|
|
|
function logout() {
|
|
if (confirm('确定要退出登录吗？')) {
|
|
const logoutBtn = document.querySelector('.action-button');
|
|
logoutBtn.disabled = true;
|
|
logoutBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 退出中...';
|
|
|
|
showToast('正在退出...');
|
|
fetch('/user/logout', {
|
|
method: 'POST',
|
|
credentials: 'same-origin'
|
|
}).then(() => {
|
|
showToast('退出成功');
|
|
setTimeout(() => {
|
|
window.location.href = '{{ url_for("more") }}';
|
|
}, 500);
|
|
}).catch(error => {
|
|
console.error('Logout failed:', error);
|
|
showToast('退出失败，请重试');
|
|
logoutBtn.disabled = false;
|
|
logoutBtn.innerHTML = '<i class="fas fa-sign-out-alt"></i> 退出登录';
|
|
});
|
|
}
|
|
}
|
|
|
|
document.querySelector('.back-link').addEventListener('click', function(e) {
|
|
if (changedFields.size > 0) {
|
|
if (!confirm('有未保存的更改，确定要离开吗？')) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
|
|
// 添加输入动画效果
|
|
document.querySelectorAll('.info-input').forEach(input => {
|
|
input.addEventListener('focus', () => {
|
|
input.parentElement.parentElement.classList.add('focused');
|
|
});
|
|
|
|
input.addEventListener('blur', () => {
|
|
input.parentElement.parentElement.classList.remove('focused');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |