实现修改密码和注销功能

static/js/main.js

@@ -231,5 +231,175 @@ function formatUptime(milliseconds) {
     }
 }
 
+// 账户功能 - 下拉菜单、注销和修改密码
+function setupAccountFeatures() {
+    // 下拉菜单功能
+    const accountDropdown = document.getElementById('account-dropdown');
+    const accountMenu = document.getElementById('account-menu');
+    const changePasswordBtn = document.getElementById('change-password-btn');
+    const logoutBtn = document.getElementById('logout-btn');
+    const changePasswordModal = document.getElementById('change-password-modal');
+    const closeModalBtn = document.getElementById('close-modal-btn');
+    const cancelChangePasswordBtn = document.getElementById('cancel-change-password');
+    const changePasswordForm = document.getElementById('change-password-form');
+    const passwordMismatch = document.getElementById('password-mismatch');
+    const newPassword = document.getElementById('new-password');
+    const confirmPassword = document.getElementById('confirm-password');
+    
+    // 点击外部关闭下拉菜单
+    document.addEventListener('click', (e) => {
+        if (accountDropdown && !accountDropdown.contains(e.target)) {
+            accountMenu.classList.add('hidden');
+        }
+    });
+    
+    // 点击账户区域切换下拉菜单
+    if (accountDropdown) {
+        accountDropdown.addEventListener('click', (e) => {
+            e.stopPropagation();
+            accountMenu.classList.toggle('hidden');
+        });
+    }
+    
+    // 打开修改密码模态框
+    if (changePasswordBtn) {
+        changePasswordBtn.addEventListener('click', () => {
+            accountMenu.classList.add('hidden');
+            changePasswordModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+    }
+    
+    // 关闭修改密码模态框
+    function closeModal() {
+        changePasswordModal.classList.add('hidden');
+        document.body.style.overflow = '';
+        changePasswordForm.reset();
+        passwordMismatch.classList.add('hidden');
+    }
+    
+    // 绑定关闭模态框事件
+    if (closeModalBtn) {
+        closeModalBtn.addEventListener('click', closeModal);
+    }
+    
+    if (cancelChangePasswordBtn) {
+        cancelChangePasswordBtn.addEventListener('click', closeModal);
+    }
+    
+    // 点击模态框外部关闭模态框
+    if (changePasswordModal) {
+        changePasswordModal.addEventListener('click', (e) => {
+            if (e.target === changePasswordModal) {
+                closeModal();
+            }
+        });
+    }
+    
+    // 按ESC键关闭模态框
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !changePasswordModal.classList.contains('hidden')) {
+            closeModal();
+        }
+    });
+    
+    // 密码匹配验证
+    if (newPassword && confirmPassword) {
+        confirmPassword.addEventListener('input', () => {
+            if (newPassword.value !== confirmPassword.value) {
+                passwordMismatch.classList.remove('hidden');
+            } else {
+                passwordMismatch.classList.add('hidden');
+            }
+        });
+        
+        newPassword.addEventListener('input', () => {
+            if (newPassword.value !== confirmPassword.value) {
+                passwordMismatch.classList.remove('hidden');
+            } else {
+                passwordMismatch.classList.add('hidden');
+            }
+        });
+    }
+    
+    // 修改密码表单提交
+    if (changePasswordForm) {
+        changePasswordForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            // 验证密码匹配
+            if (newPassword.value !== confirmPassword.value) {
+                passwordMismatch.classList.remove('hidden');
+                return;
+            }
+            
+            const formData = new FormData(changePasswordForm);
+            const data = {
+                currentPassword: formData.get('currentPassword'),
+                newPassword: formData.get('newPassword')
+            };
+            
+            try {
+                const response = await fetch('/api/change-password', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.status === 'success') {
+                    // 密码修改成功
+                    alert('密码修改成功');
+                    closeModal();
+                } else {
+                    // 密码修改失败
+                    alert(result.error || '密码修改失败');
+                }
+            } catch (error) {
+                console.error('修改密码失败:', error);
+                alert('修改密码失败，请稍后重试');
+            }
+        });
+    }
+    
+    // 注销功能
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', async () => {
+            try {
+                await fetch('/api/logout', {
+                    method: 'POST'
+                });
+                
+                // 重定向到登录页面
+                window.location.href = '/login';
+            } catch (error) {
+                console.error('注销失败:', error);
+                alert('注销失败，请稍后重试');
+            }
+        });
+    }
+}
+
+// 初始化函数
+function init() {
+    // 设置导航
+    setupNavigation();
+    
+    // 设置账户功能
+    setupAccountFeatures();
+    
+    // 初始化页面
+    initPageByHash();
+    
+    // 添加hashchange事件监听，处理浏览器前进/后退按钮
+    window.addEventListener('hashchange', initPageByHash);
+    
+    // 定期更新系统状态
+    setInterval(updateSystemStatus, 5000);
+}
+
 // 页面加载完成后执行初始化
 window.addEventListener('DOMContentLoaded', init);