edit-profile.html

---
layout: default
title: 编辑成员信息
permalink: /edit-profile
---

<!-- Edit Profile Section -->
<section class="page-section" id="edit-profile">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">编辑成员信息</h2>
                <h3 class="section-subheading text-muted">修改您的个人信息</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <form id="editProfileForm" name="editProfileForm" novalidate="novalidate">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input class="form-control" id="name" type="text" placeholder="姓名 *" required="required" 
                                    pattern="^[\u4e00-\u9fa5a-zA-Z\s]{2,20}$"
                                    data-validation-required-message="请输入您的姓名"
                                    data-validation-pattern-message="姓名长度应在2-20个字符之间，只能包含中文、英文和空格">
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="title" type="text" placeholder="职称 *" required="required"
                                    pattern="^[\u4e00-\u9fa5a-zA-Z\s]{2,50}$"
                                    data-validation-required-message="请输入您的职称"
                                    data-validation-pattern-message="职称长度应在2-50个字符之间，只能包含中文、英文和空格">
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="email" type="email" placeholder="邮箱 *" required="required"
                                    pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
                                    data-validation-required-message="请输入您的邮箱"
                                    data-validation-pattern-message="请输入有效的邮箱地址">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input class="form-control" id="research" type="text" placeholder="研究方向 *" required="required"
                                    pattern="^[\u4e00-\u9fa5a-zA-Z\s,，]{2,100}$"
                                    data-validation-required-message="请输入您的研究方向"
                                    data-validation-pattern-message="研究方向长度应在2-100个字符之间">
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="education" type="text" placeholder="教育背景 *" required="required"
                                    pattern="^[\u4e00-\u9fa5a-zA-Z\s,，]{2,200}$"
                                    data-validation-required-message="请输入您的教育背景"
                                    data-validation-pattern-message="教育背景长度应在2-200个字符之间">
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="publications" type="text" placeholder="发表论文"
                                    pattern="^[\u4e00-\u9fa5a-zA-Z\s,，.。]{0,500}$"
                                    data-validation-pattern-message="发表论文长度不能超过500个字符">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <textarea class="form-control" id="bio" placeholder="个人简介 *" required="required"
                                    pattern="^[\u4e00-\u9fa5a-zA-Z\s,，.。]{10,1000}$"
                                    data-validation-required-message="请输入您的个人简介"
                                    data-validation-pattern-message="个人简介长度应在10-1000个字符之间"></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-lg-12 text-center">
                            <div id="success"></div>
                            <button class="btn btn-primary btn-xl text-uppercase" id="submitButton" type="submit">保存修改</button>
                            <a href="/profile" class="btn btn-secondary btn-xl text-uppercase ml-2">返回</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<style>
#edit-profile {
    padding: 100px 0;
    background-color: #f8f9fa;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-control {
    height: auto;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 0.3rem;
}

textarea.form-control {
    min-height: 150px;
}

.btn-xl {
    padding: 1rem 2rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.ml-2 {
    margin-left: 0.5rem;
}
</style>

<script>
// 表单验证函数
function validateForm() {
    const form = document.getElementById('editProfileForm');
    const inputs = form.querySelectorAll('input, textarea');
    let isValid = true;

    inputs.forEach(input => {
        if (input.hasAttribute('required') && !input.value.trim()) {
            showError(input, input.getAttribute('data-validation-required-message'));
            isValid = false;
        } else if (input.hasAttribute('pattern')) {
            const pattern = new RegExp(input.getAttribute('pattern'));
            if (!pattern.test(input.value.trim())) {
                showError(input, input.getAttribute('data-validation-pattern-message'));
                isValid = false;
            } else {
                showSuccess(input);
            }
        }
    });

    return isValid;
}

// 显示错误信息
function showError(input, message) {
    const formGroup = input.closest('.form-group');
    const errorElement = formGroup.querySelector('.help-block');
    input.classList.remove('is-valid');
    input.classList.add('is-invalid');
    errorElement.textContent = message;
}

// 显示成功状态
function showSuccess(input) {
    const formGroup = input.closest('.form-group');
    const errorElement = formGroup.querySelector('.help-block');
    input.classList.remove('is-invalid');
    input.classList.add('is-valid');
    errorElement.textContent = '';
}

// 加载现有数据
async function loadProfileData() {
    try {
        const response = await fetch('/api/profile');
        if (response.ok) {
            const data = await response.json();
            if (data) {
                document.getElementById('name').value = data.name || '';
                document.getElementById('title').value = data.title || '';
                document.getElementById('email').value = data.email || '';
                document.getElementById('research').value = data.research || '';
                document.getElementById('education').value = data.education || '';
                document.getElementById('publications').value = data.publications || '';
                document.getElementById('bio').value = data.bio || '';
            }
        } else {
            throw new Error('获取数据失败');
        }
    } catch (error) {
        document.getElementById('success').innerHTML = '加载数据失败，请刷新页面重试';
        document.getElementById('success').style.color = 'red';
    }
}

// 页面加载时获取数据
document.addEventListener('DOMContentLoaded', loadProfileData);

// 实时验证
document.querySelectorAll('#editProfileForm input, #editProfileForm textarea').forEach(input => {
    input.addEventListener('input', function() {
        if (this.hasAttribute('required') && !this.value.trim()) {
            showError(this, this.getAttribute('data-validation-required-message'));
        } else if (this.hasAttribute('pattern')) {
            const pattern = new RegExp(this.getAttribute('pattern'));
            if (!pattern.test(this.value.trim())) {
                showError(this, this.getAttribute('data-validation-pattern-message'));
            } else {
                showSuccess(this);
            }
        }
    });
});

// 表单提交处理
document.getElementById('editProfileForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    if (!validateForm()) {
        return;
    }

    const formData = {
        name: document.getElementById('name').value.trim(),
        title: document.getElementById('title').value.trim(),
        email: document.getElementById('email').value.trim(),
        research: document.getElementById('research').value.trim(),
        education: document.getElementById('education').value.trim(),
        publications: document.getElementById('publications').value.trim(),
        bio: document.getElementById('bio').value.trim()
    };

    try {
        const response = await fetch('/api/profile', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });

        if (response.ok) {
            document.getElementById('success').innerHTML = '信息更新成功！';
            document.getElementById('success').style.color = 'green';
            // 3秒后跳转到个人资料页面
            setTimeout(() => {
                window.location.href = '/profile';
            }, 3000);
        } else {
            const data = await response.json();
            throw new Error(data.error || '更新失败');
        }
    } catch (error) {
        document.getElementById('success').innerHTML = error.message || '更新失败，请稍后重试';
        document.getElementById('success').style.color = 'red';
    }
});
</script>