ts

static/app.js

@@ -46,7 +46,36 @@ const elements = {
     logSearch: null,
     screenshotPanel: null,
     screenshotImage: null,
-    closeScreenshot: null
+    closeScreenshot: null,
+    // 账号管理相关
+    addAccountBtn: null,
+    refreshAccountsBtn: null,
+    accountStatus: null,
+    loginStatusIndicator: null,
+    loginStatusText: null,
+    // 模态框相关
+    accountModal: null,
+    closeAccountModal: null,
+    loginBtn: null,
+    logoutBtn: null,
+    loginInfo: null,
+    modalLoginStatus: null,
+    loginTime: null,
+    modalUserList: null,
+    modalUserCount: null,
+    clearAllUsersBtn: null,
+    newUserIdInput: null,
+    addUserIdBtn: null,
+    importFromTxtBtn: null,
+    exportToTxtBtn: null,
+    // 登录二维码模态框
+    loginQrModal: null,
+    closeLoginQrModal: null,
+    qrcodeContainer: null,
+    qrLoginStatus: null,
+    qrExpireTime: null,
+    // Toast
+    toast: null
 };
 
 // ========== 初始化 ==========
@@ -79,6 +108,39 @@ function init() {
     elements.screenshotImage = document.getElementById('screenshotImage');
     elements.closeScreenshot = document.getElementById('closeScreenshot');
 
+    // 账号管理相关
+    elements.addAccountBtn = document.getElementById('addAccountBtn');
+    elements.refreshAccountsBtn = document.getElementById('refreshAccountsBtn');
+    elements.accountStatus = document.getElementById('accountStatus');
+    elements.loginStatusIndicator = document.getElementById('loginStatusIndicator');
+    elements.loginStatusText = document.getElementById('loginStatusText');
+
+    // 模态框相关
+    elements.accountModal = document.getElementById('accountModal');
+    elements.closeAccountModal = document.getElementById('closeAccountModal');
+    elements.loginBtn = document.getElementById('loginBtn');
+    elements.logoutBtn = document.getElementById('logoutBtn');
+    elements.loginInfo = document.getElementById('loginInfo');
+    elements.modalLoginStatus = document.getElementById('modalLoginStatus');
+    elements.loginTime = document.getElementById('loginTime');
+    elements.modalUserList = document.getElementById('modalUserList');
+    elements.modalUserCount = document.getElementById('modalUserCount');
+    elements.clearAllUsersBtn = document.getElementById('clearAllUsersBtn');
+    elements.newUserIdInput = document.getElementById('newUserIdInput');
+    elements.addUserIdBtn = document.getElementById('addUserIdBtn');
+    elements.importFromTxtBtn = document.getElementById('importFromTxtBtn');
+    elements.exportToTxtBtn = document.getElementById('exportToTxtBtn');
+
+    // 登录二维码模态框
+    elements.loginQrModal = document.getElementById('loginQrModal');
+    elements.closeLoginQrModal = document.getElementById('closeLoginQrModal');
+    elements.qrcodeContainer = document.getElementById('qrcodeContainer');
+    elements.qrLoginStatus = document.getElementById('qrLoginStatus');
+    elements.qrExpireTime = document.getElementById('qrExpireTime');
+
+    // Toast
+    elements.toast = document.getElementById('toast');
+
     // 加载主题
     loadTheme();
 
@@ -143,6 +205,37 @@ function bindEvents() {
         const { scrollTop, scrollHeight, clientHeight } = elements.logContainer;
         state.autoScrollLogs = scrollTop + clientHeight >= scrollHeight - 10;
     });
+
+    // 账号管理事件
+    elements.addAccountBtn.addEventListener('click', openAccountModal);
+    elements.refreshAccountsBtn.addEventListener('click', refreshAccounts);
+    elements.closeAccountModal.addEventListener('click', closeAccountModal);
+    elements.loginBtn.addEventListener('click', openLoginQrModal);
+    elements.logoutBtn.addEventListener('click', logout);
+    elements.clearAllUsersBtn.addEventListener('click', clearAllUsers);
+    elements.addUserIdBtn.addEventListener('click', addUserId);
+    elements.importFromTxtBtn.addEventListener('click', importFromTxt);
+    elements.exportToTxtBtn.addEventListener('click', exportToTxt);
+
+    // 新用户输入框回车事件
+    elements.newUserIdInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            addUserId();
+        }
+    });
+
+    // 登录二维码模态框关闭
+    elements.closeLoginQrModal.addEventListener('click', closeLoginQrModal);
+
+    // 点击模态框外部关闭
+    window.addEventListener('click', (e) => {
+        if (e.target === elements.accountModal) {
+            closeAccountModal();
+        }
+        if (e.target === elements.loginQrModal) {
+            closeLoginQrModal();
+        }
+    });
 }
 
 // ========== 加载初始数据 ==========
@@ -582,5 +675,309 @@ function debounce(func, wait) {
     };
 }
 
+// ========== 账号管理功能 ==========
+
+// 打开账号管理模态框
+function openAccountModal() {
+    elements.accountModal.classList.add('show');
+    loadAccountStatus();
+    renderModalUserList();
+}
+
+// 关闭账号管理模态框
+function closeAccountModal() {
+    elements.accountModal.classList.remove('show');
+}
+
+// 打开登录二维码模态框
+async function openLoginQrModal() {
+    elements.loginQrModal.classList.add('show');
+    elements.qrLoginStatus.textContent = '正在生成二维码...';
+
+    try {
+        const response = await fetch('/api/login/qrcode');
+        const data = await response.json();
+
+        if (response.ok) {
+            // 显示二维码
+            if (data.qr_url) {
+                // 使用简单的二维码显示（实际项目中可以使用QRCode.js等库）
+                elements.qrcodeContainer.innerHTML = `
+                    <div style="text-align: center;">
+                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(data.qr_url)}" alt="登录二维码" style="max-width: 100%;">
+                    </div>
+                `;
+                elements.qrLoginStatus.textContent = '请扫码登录';
+
+                // 开始检查登录状态
+                checkLoginStatus();
+
+                // 设置二维码过期倒计时
+                let countdown = 120;
+                const countdownInterval = setInterval(() => {
+                    countdown--;
+                    elements.qrExpireTime.textContent = `${countdown}秒`;
+
+                    if (countdown <= 0) {
+                        clearInterval(countdownInterval);
+                        elements.qrLoginStatus.textContent = '二维码已过期，请重新生成';
+                        elements.qrcodeContainer.innerHTML = '<p style="color: var(--error-color);">二维码已过期</p>';
+                    }
+                }, 1000);
+            }
+        } else {
+            elements.qrcodeContainer.innerHTML = '<p style="color: var(--error-color);">生成二维码失败</p>';
+            elements.qrLoginStatus.textContent = '生成失败';
+        }
+    } catch (error) {
+        elements.qrcodeContainer.innerHTML = '<p style="color: var(--error-color);">网络错误</p>';
+        elements.qrLoginStatus.textContent = '网络错误';
+    }
+}
+
+// 关闭登录二维码模态框
+function closeLoginQrModal() {
+    elements.loginQrModal.classList.remove('show');
+}
+
+// 检查登录状态
+async function checkLoginStatus() {
+    try {
+        const response = await fetch('/api/login/status');
+        const data = await response.json();
+
+        if (data.logged_in) {
+            elements.qrLoginStatus.textContent = '登录成功！';
+            setTimeout(() => {
+                closeLoginQrModal();
+                closeAccountModal();
+                updateLoginStatus(true, data.login_time);
+                showToast('登录成功', 'success');
+            }, 1000);
+        } else {
+            // 继续检查
+            setTimeout(checkLoginStatus, 2000);
+        }
+    } catch (error) {
+        // 网络错误，继续检查
+        setTimeout(checkLoginStatus, 2000);
+    }
+}
+
+// 退出登录
+async function logout() {
+    try {
+        const response = await fetch('/api/logout', { method: 'POST' });
+        const data = await response.json();
+
+        if (response.ok) {
+            updateLoginStatus(false);
+            showToast('已退出登录', 'success');
+            closeAccountModal();
+        } else {
+            showToast('退出失败', 'error');
+        }
+    } catch (error) {
+        showToast('退出失败', 'error');
+    }
+}
+
+// 更新登录状态显示
+function updateLoginStatus(isLoggedIn, loginTime = null) {
+    const indicator = elements.loginStatusIndicator;
+    const statusText = elements.loginStatusText;
+    const modalStatus = elements.modalLoginStatus;
+
+    if (isLoggedIn) {
+        indicator.className = 'status-indicator online';
+        statusText.textContent = '已登录';
+        modalStatus.textContent = '已登录';
+        modalStatus.style.color = 'var(--success-color)';
+
+        if (loginTime) {
+            elements.loginTime.textContent = new Date(loginTime).toLocaleString('zh-CN');
+        }
+    } else {
+        indicator.className = 'status-indicator offline';
+        statusText.textContent = '未登录';
+        modalStatus.textContent = '未登录';
+        modalStatus.style.color = 'var(--error-color)';
+        elements.loginTime.textContent = '-';
+    }
+}
+
+// 加载账号状态
+async function loadAccountStatus() {
+    try {
+        const response = await fetch('/api/login/status');
+        const data = await response.json();
+        updateLoginStatus(data.logged_in, data.login_time);
+    } catch (error) {
+        updateLoginStatus(false);
+    }
+}
+
+// 刷新账号列表
+async function refreshAccounts() {
+    try {
+        const response = await fetch('/api/users');
+        const data = await response.json();
+        renderUserList(data.users);
+        renderModalUserList();
+        showToast('账号列表已刷新', 'success');
+    } catch (error) {
+        showToast('刷新失败', 'error');
+    }
+}
+
+// 渲染模态框中的用户列表
+function renderModalUserList() {
+    // 先从主用户列表获取数据
+    const userItems = elements.userList.querySelectorAll('.user-item');
+    const users = Array.from(userItems).map(item => ({
+        id: item.dataset.userId,
+        note_count: item.querySelector('.user-meta')?.textContent.match(/已采集 (\d+) 条笔记/)?.[1] || 0
+    }));
+
+    elements.modalUserCount.textContent = users.length;
+
+    if (users.length === 0) {
+        elements.modalUserList.innerHTML = `
+            <div class="empty-state" style="padding: 20px;">
+                <p>暂无用户数据</p>
+                <p class="hint">请在 data/users.txt 中添加用户 ID</p>
+            </div>
+        `;
+        return;
+    }
+
+    elements.modalUserList.innerHTML = users.map(user => `
+        <div class="modal-user-item">
+            <span class="modal-user-id">${user.id}</span>
+            <button class="modal-user-remove" onclick="removeUser('${user.id}')">
+                <span>×</span>
+            </button>
+        </div>
+    `).join('');
+}
+
+// 添加用户ID
+async function addUserId() {
+    const input = elements.newUserIdInput;
+    const userId = input.value.trim();
+
+    if (!userId) {
+        showToast('请输入用户ID', 'warning');
+        return;
+    }
+
+    // 验证用户ID格式（简单验证）
+    if (!/^[a-f0-9]{24}$/i.test(userId)) {
+        showToast('用户ID格式不正确', 'warning');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/users', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ user_id: userId })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            input.value = '';
+            renderModalUserList();
+            showToast('用户添加成功', 'success');
+        } else {
+            showToast(data.detail || '添加失败', 'error');
+        }
+    } catch (error) {
+        showToast('添加失败', 'error');
+    }
+}
+
+// 删除单个用户
+async function removeUser(userId) {
+    try {
+        const response = await fetch(`/api/users/${userId}`, { method: 'DELETE' });
+        const data = await response.json();
+
+        if (response.ok) {
+            renderModalUserList();
+            showToast('用户已删除', 'success');
+        } else {
+            showToast(data.detail || '删除失败', 'error');
+        }
+    } catch (error) {
+        showToast('删除失败', 'error');
+    }
+}
+
+// 清空所有用户
+async function clearAllUsers() {
+    if (!confirm('确定要清空所有用户吗？此操作不可恢复！')) {
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/users', { method: 'DELETE' });
+        const data = await response.json();
+
+        if (response.ok) {
+            renderUserList([]);
+            renderModalUserList();
+            showToast('所有用户已清空', 'success');
+        } else {
+            showToast(data.detail || '清空失败', 'error');
+        }
+    } catch (error) {
+        showToast('清空失败', 'error');
+    }
+}
+
+// 从txt文件导入用户
+async function importFromTxt() {
+    try {
+        // 在实际应用中，这里可以添加文件上传功能
+        // 这里先模拟从users.txt读取
+        const response = await fetch('/api/users/import/txt');
+        const data = await response.json();
+
+        if (response.ok) {
+            renderUserList(data.users);
+            renderModalUserList();
+            showToast(`成功导入 ${data.count} 个用户`, 'success');
+        } else {
+            showToast(data.detail || '导入失败', 'error');
+        }
+    } catch (error) {
+        showToast('导入失败', 'error');
+    }
+}
+
+// 导出到txt文件
+async function exportToTxt() {
+    try {
+        window.location.href = '/api/users/export/txt';
+        showToast('正在导出用户列表...', 'success');
+    } catch (error) {
+        showToast('导出失败', 'error');
+    }
+}
+
+// 显示Toast提示
+function showToast(message, type = 'info') {
+    const toast = elements.toast;
+    toast.textContent = message;
+    toast.className = `toast ${type}`;
+    toast.classList.add('show');
+
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 3000);
+}
+
 // ========== 启动 ==========
 document.addEventListener('DOMContentLoaded', init);