实现修改密码和注销功能

static/index.html

@@ -149,9 +149,22 @@
                     <button class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
                         <i class="fa fa-bell text-lg"></i>
                     </button>
-                    <div class="flex items-center">
-                        <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
-                        <span class="ml-2 hidden md:block">管理员</span>
+                    <!-- 账户下拉菜单 -->
+                    <div class="relative group" id="account-dropdown">
+                        <button class="flex items-center p-2 rounded-full hover:bg-gray-100 transition-colors focus:outline-none">
+                            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
+                            <span class="ml-2 hidden md:block">管理员</span>
+                            <i class="fa fa-caret-down ml-1 text-xs hidden md:block"></i>
+                        </button>
+                        <!-- 下拉菜单 -->
+                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden group-hover:block" id="account-menu">
+                            <button id="change-password-btn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
+                                <i class="fa fa-key mr-2"></i>修改密码
+                            </button>
+                            <button id="logout-btn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
+                                <i class="fa fa-sign-out mr-2"></i>注销
+                            </button>
+                        </div>
                     </div>
                 </div>
             </header>
@@ -1047,6 +1060,41 @@
         </main>
     </div>
     
+    <!-- 修改密码模态框 -->
+    <div id="change-password-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
+            <div class="flex items-center justify-between mb-6">
+                <h3 class="text-xl font-semibold">修改密码</h3>
+                <button id="close-modal-btn" class="text-gray-500 hover:text-gray-700 focus:outline-none">
+                    <i class="fa fa-times text-xl"></i>
+                </button>
+            </div>
+            
+            <form id="change-password-form">
+                <div class="mb-4">
+                    <label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
+                    <input type="password" id="current-password" name="currentPassword" placeholder="请输入当前密码" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
+                </div>
+                
+                <div class="mb-4">
+                    <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
+                    <input type="password" id="new-password" name="newPassword" placeholder="请输入新密码" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
+                </div>
+                
+                <div class="mb-6">
+                    <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
+                    <input type="password" id="confirm-password" name="confirmPassword" placeholder="请再次输入新密码" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
+                    <div id="password-mismatch" class="text-danger text-sm mt-1 hidden">新密码和确认密码不匹配</div>
+                </div>
+                
+                <div class="flex items-center justify-end space-x-3">
+                    <button type="button" id="cancel-change-password" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">取消</button>
+                    <button type="submit" id="save-password-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">保存</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
     <!-- 脚本 -->
     <script src="js/main.js"></script>
     <script src="js/api.js"></script>

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);