账号问题新增

This commit is contained in:
杨志
2026-01-21 11:44:35 +08:00
parent bc622c6c34
commit 05d383e010
6 changed files with 368 additions and 33 deletions

View File

@@ -181,24 +181,12 @@
<button class="btn" onclick="saveBaseUrl()">保存配置</button>
</div>
<!-- 添加账号 -->
<div class="form-section">
<h2>添加账号</h2>
<div id="add-message"></div>
<div class="form-group">
<label for="new-username">用户名:</label>
<input type="text" id="new-username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="new-password">密码:</label>
<input type="password" id="new-password" placeholder="请输入密码">
</div>
<button class="btn" onclick="addUser()">添加账号</button>
</div>
<!-- 账号列表 -->
<div class="form-section">
<h2>账号列表</h2>
<div style="display: flex; justify-content: space-between; align-items: center;">
<h2 style="margin: 0;">账号列表</h2>
<button class="btn" style="background:#2196F3;" onclick="openAddUserModal()">添加账号</button>
</div>
<div id="list-message"></div>
<table id="users-table">
<thead>
@@ -326,6 +314,7 @@
<td>${user.username || ''}</td>
<td>${user.created_at || '-'}</td>
<td>
<button class="btn" style="background:#2196F3; margin-right:8px;" onclick="openUserModal('${user.username}')">修改</button>
<button class="btn btn-danger" onclick="deleteUser('${user.username}')">删除</button>
</td>
`;
@@ -334,13 +323,22 @@
}
}
// 添加账号
function addUser() {
const username = document.getElementById('new-username').value.trim();
const password = document.getElementById('new-password').value.trim();
// 打开添加账号弹窗
function openAddUserModal() {
document.getElementById('add-modal-username').value = '';
document.getElementById('add-modal-password').value = '';
document.getElementById('add-modal-message').innerHTML = '';
document.getElementById('add-user-modal').style.display = 'flex';
}
function closeAddUserModal() {
document.getElementById('add-user-modal').style.display = 'none';
}
function submitAddUserModal() {
const username = document.getElementById('add-modal-username').value.trim();
const password = document.getElementById('add-modal-password').value.trim();
if (!username || !password) {
showMessage('add-message', '请输入用户名和密码', 'error');
showMessage('add-modal-message', '请输入用户名和密码', 'error');
return;
}
@@ -355,19 +353,67 @@
.then(response => response.json())
.then(data => {
if (data.code === 1) {
showMessage('add-message', data.msg || '添加成功', 'success');
document.getElementById('new-username').value = '';
document.getElementById('new-password').value = '';
loadUsers();
showMessage('add-modal-message', data.msg || '添加成功', 'success');
setTimeout(() => {
closeAddUserModal();
loadUsers();
}, 600);
} else {
showMessage('add-message', data.msg || '添加失败', 'error');
showMessage('add-modal-message', data.msg || '添加失败', 'error');
}
})
.catch(error => {
showMessage('add-message', '请求失败: ' + error.message, 'error');
showMessage('add-modal-message', '请求失败: ' + error.message, 'error');
});
}
// 打开用户编辑弹窗(用户名+密码)
function openUserModal(username) {
document.getElementById('user-modal-username').value = username || '';
document.getElementById('user-modal-password').value = '';
document.getElementById('user-modal-message').innerHTML = '';
document.getElementById('user-modal').style.display = 'flex';
}
function closeUserModal() {
document.getElementById('user-modal').style.display = 'none';
}
function submitUserModal() {
const username = document.getElementById('user-modal-username').value.trim();
const password = document.getElementById('user-modal-password').value.trim();
if (!username || !password) {
showMessage('user-modal-message', '请输入用户名和新密码', 'error');
return;
}
fetch(API_BASE_URL + '/admin/resetUserPassword', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest',
},
body: `username=${encodeURIComponent(username)}&new_password=${encodeURIComponent(password)}`
})
.then(response => response.json())
.then(data => {
if (data.code === 1) {
showMessage('user-modal-message', data.msg || '修改成功', 'success');
setTimeout(() => {
closeUserModal();
loadUsers();
}, 600);
} else {
showMessage('user-modal-message', data.msg || '修改失败', 'error');
}
})
.catch(error => {
showMessage('user-modal-message', '请求失败: ' + error.message, 'error');
});
}
// 删除账号
function deleteUser(username) {
if (!confirm('确定要删除账号 "' + username + '" 吗?')) {
@@ -402,5 +448,46 @@
container.innerHTML = `<div class="message ${type}">${message}</div>`;
}
</script>
<!-- 添加账号弹窗 -->
<div class="modal-overlay" id="add-user-modal" style="display:none; align-items:center; justify-content:center; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.45); z-index:999;">
<div class="modal" style="background:#fff; padding:20px; border-radius:8px; width:360px; max-width:90%; box-shadow:0 4px 12px rgba(0,0,0,0.2);">
<h3>添加账号</h3>
<div id="add-modal-message"></div>
<div class="form-group">
<label for="add-modal-username">用户名:</label>
<input type="text" id="add-modal-username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="add-modal-password">密码:</label>
<input type="password" id="add-modal-password" placeholder="请输入密码">
</div>
<div class="modal-actions">
<button class="btn btn-secondary" style="background:#9e9e9e;" onclick="closeAddUserModal()">取消</button>
<button class="btn" onclick="submitAddUserModal()">保存</button>
</div>
</div>
</div>
<!-- 用户编辑弹窗(用户名+密码) -->
<div class="modal-overlay" id="user-modal" style="display:none; align-items:center; justify-content:center; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.45); z-index:999;">
<div class="modal" style="background:#fff; padding:20px; border-radius:8px; width:360px; max-width:90%; box-shadow:0 4px 12px rgba(0,0,0,0.2);">
<h3>修改用户</h3>
<div id="user-modal-message"></div>
<div class="form-group">
<label for="user-modal-username">用户名:</label>
<input type="text" id="user-modal-username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="user-modal-password">新密码:</label>
<input type="password" id="user-modal-password" placeholder="请输入新密码">
</div>
<div class="modal-actions">
<button class="btn btn-secondary" style="background:#9e9e9e;" onclick="closeUserModal()">取消</button>
<button class="btn" onclick="submitUserModal()">保存</button>
</div>
</div>
</div>
</body>
</html>

View File

@@ -29,6 +29,42 @@
padding: 30px;
}
/* 弹窗样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.45);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
}
.modal {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
width: 360px;
max-width: 90%;
}
.modal h3 {
margin-bottom: 12px;
font-size: 18px;
color: #333;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 15px;
}
h1 {
color: #333;
margin-bottom: 30px;
@@ -269,8 +305,9 @@
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h1 style="margin: 0;">职位信息爬虫工具</h1>
<div style="display: flex; gap: 15px;">
<a href="/auth/logout" style="color: #f44336; text-decoration: none; padding: 8px 15px; border-radius: 4px; background: #ffebee;">退出登录</a>
<div style="display: flex; gap: 10px;">
<button class="btn btn-secondary" style="background:#2196F3;" onclick="openPwdModal()">修改密码</button>
<a href="/auth/logout" style="color: #f44336; text-decoration: none; padding: 8px 15px; border-radius: 4px; background: #ffebee;">退出登录</a>
</div>
</div>
@@ -454,7 +491,7 @@
showMessage('config-message', '请求失败: ' + error.message, 'error');
});
}
// 获取地区选项
function getDsdmOptions() {
const examid = document.getElementById('examid').value.trim();
@@ -934,6 +971,81 @@
const container = document.getElementById(containerId);
container.innerHTML = `<div class="message ${type}">${message}</div>`;
}
// 弹窗:打开、关闭
function openPwdModal() {
document.getElementById('pwd-modal').style.display = 'flex';
}
function closePwdModal() {
document.getElementById('pwd-modal').style.display = 'none';
document.getElementById('modal-old-password').value = '';
document.getElementById('modal-new-password').value = '';
document.getElementById('modal-new-password-confirm').value = '';
document.getElementById('modal-pwd-message').innerHTML = '';
}
// 弹窗内修改密码
function changePasswordModal() {
const oldPassword = document.getElementById('modal-old-password').value.trim();
const newPassword = document.getElementById('modal-new-password').value.trim();
const newPasswordConfirm = document.getElementById('modal-new-password-confirm').value.trim();
if (!oldPassword || !newPassword || !newPasswordConfirm) {
showMessage('modal-pwd-message', '请填写完整的旧密码和新密码', 'error');
return;
}
if (newPassword !== newPasswordConfirm) {
showMessage('modal-pwd-message', '两次输入的新密码不一致', 'error');
return;
}
showMessage('modal-pwd-message', '正在修改密码...', 'info');
fetch(API_BASE_URL + '/crawler/changePassword', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest',
},
body: `old_password=${encodeURIComponent(oldPassword)}&new_password=${encodeURIComponent(newPassword)}`
})
.then(response => response.json())
.then(data => {
if (data.code === 1) {
showMessage('modal-pwd-message', data.msg || '密码修改成功', 'success');
setTimeout(() => {
closePwdModal();
}, 600);
} else {
showMessage('modal-pwd-message', data.msg || '密码修改失败', 'error');
}
})
.catch(error => {
showMessage('modal-pwd-message', '请求失败: ' + error.message, 'error');
});
}
</script>
</body>
</html>
<!-- 密码修改弹窗 -->
<div class="modal-overlay" id="pwd-modal">
<div class="modal">
<h3>修改密码</h3>
<div id="modal-pwd-message"></div>
<div class="form-group">
<label for="modal-old-password">旧密码:</label>
<input type="password" id="modal-old-password" placeholder="请输入旧密码">
</div>
<div class="form-group">
<label for="modal-new-password">新密码:</label>
<input type="password" id="modal-new-password" placeholder="请输入新密码">
</div>
<div class="form-group">
<label for="modal-new-password-confirm">确认新密码:</label>
<input type="password" id="modal-new-password-confirm" placeholder="请再次输入新密码">
</div>
<div class="modal-actions">
<button class="btn btn-secondary" style="background:#9e9e9e;" onclick="closePwdModal()">取消</button>
<button class="btn" onclick="changePasswordModal()">确定修改</button>
</div>
</div>
</div>