bwadmin/QueryCarInfo2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20250922

Browse Source
This commit is contained in:
bwadmin
2025-09-22 07:33:37 +08:00
parent b34e97b93b
commit 0cae9749a8
19 changed files with 2557 additions and 1225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/change_password.html
+178 -149
View File
@@ -4,175 +4,204 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改密码 - 车主信息查询系统</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<!-- 引入自定义CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#f3f4f6',
'primary-light': '#dbeafe',
'primary-dark': '#1d4ed8',
'table-header': '#f9fafb',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
layui.use(['layer', 'form', 'element'], function(){
var layer = layui.layer;
var form = layui.form;
var element = layui.element;
});
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="bg-secondary min-h-screen font-sans">
<body>
<!-- 引入统一的顶部导航栏 -->
{% include 'header.html' %}
<!-- 主要内容区域 -->
<main class="container mx-auto px-4 pt-24 pb-12">
<!-- 返回按钮 -->
<div class="mb-6 flex justify-end">
<a href="{{ url_for('query') }}" class="inline-flex items-center text-primary hover:text-primary-dark transition-colors">
<i class="fa fa-arrow-left mr-2"></i> 返回主页面
</a>
</div>
<!-- 修改密码表单 -->
<div class="max-w-md mx-auto bg-white rounded-lg shadow-xl p-8 animate-fade-in">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-key text-primary text-2xl"></i>
<div class="content-container">
<div class="content-wrapper">
<div class="card">
<div class="card-header">
<i class="fa fa-key"></i> 修改密码
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
<i class="fa fa-arrow-left"></i> 返回主页面
</a>
</div>
<div class="card-body">
<!-- 消息提示区域 -->
{% if error %}
<div class="layui-bg-red message-box">
<i class="fa fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
{% if success %}
<div class="layui-bg-green message-box">
<i class="fa fa-check-circle"></i> {{ success }}
</div>
{% endif %}
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<i class="fa fa-key" style="font-size: 40px; color: #009688;"></i>
</div>
<p style="color: #666;">请填写以下信息以修改您的密码</p>
</div>
<!-- 表单 - 使用Layui样式 -->
<form class="layui-form" id="changePasswordForm" action="/change_password_page" method="POST" style="max-width: 500px; margin: 0 auto;">
<div class="layui-form-item">
<label class="layui-form-label">旧密码</label>
<div class="layui-input-block">
<input type="password" id="old_password" name="old_password" class="layui-input" placeholder="请输入旧密码" required>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-block">
<input type="password" id="new_password" name="new_password" class="layui-input" placeholder="请输入新密码" required>
</div>
<div class="layui-form-mid layui-word-aux">密码长度至少8位，包含字母和数字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认新密码</label>
<div class="layui-input-block">
<input type="password" id="confirm_password" name="confirm_password" class="layui-input" placeholder="请再次输入新密码" required>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit>
<i class="fa fa-save mr-1"></i> 确认修改
</button>
<button type="button" onclick="window.location.href='{{ url_for('query') }}'" class="layui-btn layui-btn-primary">
<i class="fa fa-times mr-1"></i> 取消
</button>
</div>
</div>
</form>
</div>
<h2 class="text-2xl font-bold text-gray-800">修改密码</h2>
<p class="text-gray-500 mt-2">请填写以下信息以修改您的密码</p>
</div>
<!-- 错误信息显示区域 -->
{% if error %}
<div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
<span>{{ error }}</span>
</div>
{% endif %}
<!-- 表单 -->
<form id="changePasswordForm" method="POST" class="space-y-4">
<div class="mb-4">
<label for="old_password" class="block text-gray-700 text-sm font-medium mb-2">旧密码</label>
<div class="relative">
<input type="password" id="old_password" name="old_password" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入旧密码" required>
<button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 transition-colors" onclick="togglePasswordVisibility('old_password', this)">
<i class="fa fa-eye"></i>
</button>
</div>
</div>
<div class="mb-4">
<label for="new_password" class="block text-gray-700 text-sm font-medium mb-2">新密码</label>
<div class="relative">
<input type="password" id="new_password" name="new_password" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入新密码" required>
<button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 transition-colors" onclick="togglePasswordVisibility('new_password', this)">
<i class="fa fa-eye"></i>
</button>
</div>
<p class="text-xs text-gray-500 mt-1">密码长度至少8位，包含字母和数字</p>
</div>
<div class="mb-6">
<label for="confirm_password" class="block text-gray-700 text-sm font-medium mb-2">确认新密码</label>
<div class="relative">
<input type="password" id="confirm_password" name="confirm_password" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请再次输入新密码" required>
<button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 transition-colors" onclick="togglePasswordVisibility('confirm_password', this)">
<i class="fa fa-eye"></i>
</button>
</div>
</div>
<div class="flex space-x-3">
<button type="submit" class="flex-1 bg-primary hover:bg-primary-dark text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
确认修改
</button>
<button type="button" onclick="window.location.href='{{ url_for('query') }}'" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
取消
</button>
</div>
</form>
</div>
</main>
</div>
<!-- 页脚 -->
{% include 'footer.html' %}
<!-- JavaScript -->
<script>
// 密码可见性切换
function togglePasswordVisibility(inputId, button) {
const input = document.getElementById(inputId);
const icon = button.querySelector('i');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
input.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
}
// 表单提交处理
document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交
layui.use(['form', 'layer'], function() {
var form = layui.form;
var layer = layui.layer;
const newPassword = document.getElementById('new_password').value;
const confirmPassword = document.getElementById('confirm_password').value;
const oldPassword = document.getElementById('old_password').value;
// 前端验证
if (!oldPassword) {
alert('请输入旧密码');
return;
// 密码可见性切换功能
function togglePasswordVisibility(inputId) {
var input = document.getElementById(inputId);
var icon = document.getElementById(inputId + '_icon');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
input.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
}
if (newPassword.length < 8 || !/[a-zA-Z]/.test(newPassword) || !/[0-9]/.test(newPassword)) {
alert('新密码长度至少8位，且必须包含字母和数字');
return;
// 为输入框添加密码可见性切换图标
function addPasswordToggleIcons() {
var passwordInputs = document.querySelectorAll('input[type="password"]');
passwordInputs.forEach(function(input) {
var parent = input.parentElement;
var toggleBtn = document.createElement('i');
toggleBtn.id = input.id + '_icon';
toggleBtn.className = 'fa fa-eye layui-icon layui-input-icon-right password-toggle-icon';
toggleBtn.style.position = 'absolute';
toggleBtn.style.right = '10px';
toggleBtn.style.top = '50%';
toggleBtn.style.transform = 'translateY(-50%)';
toggleBtn.style.cursor = 'pointer';
toggleBtn.style.color = '#999';
// 为容器添加相对定位
parent.style.position = 'relative';
// 添加点击事件
toggleBtn.addEventListener('click', function() {
togglePasswordVisibility(input.id);
});
// 检查是否已存在图标
if (!document.getElementById(input.id + '_icon')) {
parent.appendChild(toggleBtn);
// 为输入框添加右侧内边距，防止文字被图标遮挡
input.style.paddingRight = '30px';
}
});
}
if (newPassword !== confirmPassword) {
alert('两次输入的新密码不一致');
return;
}
// 表单验证
form.verify({
password: [
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
'密码长度至少8位，且必须包含字母和数字'
]
});
// 提交表单
this.submit();
// 表单提交处理
form.on('submit(changePasswordForm)', function(data) {
const newPassword = document.getElementById('new_password').value;
const confirmPassword = document.getElementById('confirm_password').value;
const oldPassword = document.getElementById('old_password').value;
// 前端验证
if (!oldPassword) {
layer.msg('请输入旧密码', {icon: 5});
return false;
}
if (newPassword.length < 8 || !/[a-zA-Z]/.test(newPassword) || !/[0-9]/.test(newPassword)) {
layer.msg('新密码长度至少8位，且必须包含字母和数字', {icon: 5});
return false;
}
if (newPassword !== confirmPassword) {
layer.msg('两次输入的新密码不一致', {icon: 5});
return false;
}
// 提交表单前的视觉反馈
const submitButton = document.querySelector('button[type="submit"]');
const originalText = submitButton.innerHTML;
submitButton.disabled = true;
submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 提交中...';
// 延迟提交以显示加载状态
setTimeout(() => {
document.getElementById('changePasswordForm').submit();
}, 500);
return false;
});
// 页面加载完成后执行
window.onload = function() {
// 添加密码可见性切换图标
addPasswordToggleIcons();
// 重新渲染表单
form.render();
};
});
</script>
</body>
templates/config.html
+184
View File
@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>参数配置 - 车主信息查询系统</title>
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 引入自定义CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
<script>
layui.use(['layer', 'form', 'element', 'table'], function(){
var layer = layui.layer;
var form = layui.form;
var element = layui.element;
var table = layui.table;
});
</script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<!-- 引入统一的顶部导航栏 -->
{% include 'header.html' %}
<!-- 为了保持原有布局，添加一个占位div -->
<div class="layui-header" style="height: 60px; background-color: #f2f2f2;"></div>
<!-- 主要内容区域 -->
<div class="layui-body">
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
<i class="fa fa-cog"></i> 系统参数配置
</div>
<div class="layui-card-body">
<!-- 消息提示区域 -->
{% if error %}
<div class="layui-bg-red message-box">
<i class="fa fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
{% if success %}
<div class="layui-bg-green message-box">
<i class="fa fa-check-circle"></i> {{ success }}
</div>
{% endif %}
<!-- 参数配置表单 -->
<form class="layui-form" method="POST">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">基本设置</li>
<li>查询设置</li>
<li>安全设置</li>
</ul>
<div class="layui-tab-content">
<!-- 基本设置 -->
<div class="layui-tab-item layui-show">
<div class="layui-form-item">
<label class="layui-form-label">系统名称</label>
<div class="layui-input-block">
<input type="text" name="system_name" value="{{ config.system_name if config else '车主信息查询系统' }}" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">系统版本</label>
<div class="layui-input-block">
<input type="text" name="system_version" value="{{ config.system_version if config else '1.0.0' }}" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">管理员邮箱</label>
<div class="layui-input-block">
<input type="email" name="admin_email" value="{{ config.admin_email if config else '' }}" class="layui-input" lay-verify="email">
</div>
</div>
</div>
<!-- 查询设置 -->
<div class="layui-tab-item">
<div class="layui-form-item">
<label class="layui-form-label">每页记录数</label>
<div class="layui-input-block">
<input type="number" name="page_size" value="{{ config.page_size if config else 10 }}" class="layui-input" lay-verify="required|number">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">查询超时(秒)</label>
<div class="layui-input-block">
<input type="number" name="query_timeout" value="{{ config.query_timeout if config else 30 }}" class="layui-input" lay-verify="required|number">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">最大查询结果</label>
<div class="layui-input-block">
<input type="number" name="max_results" value="{{ config.max_results if config else 1000 }}" class="layui-input" lay-verify="required|number">
</div>
</div>
</div>
<!-- 安全设置 -->
<div class="layui-tab-item">
<div class="layui-form-item">
<label class="layui-form-label">密码最小长度</label>
<div class="layui-input-block">
<input type="number" name="min_password_length" value="{{ config.min_password_length if config else 8 }}" class="layui-input" lay-verify="required|number">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">会话超时(分钟)</label>
<div class="layui-input-block">
<input type="number" name="session_timeout" value="{{ config.session_timeout if config else 30 }}" class="layui-input" lay-verify="required|number">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">登录失败锁定</label>
<div class="layui-input-block">
<input type="checkbox" name="enable_login_lock" value="1" title="启用" lay-skin="switch" {% if config and config.enable_login_lock %}checked{% endif %}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">失败次数限制</label>
<div class="layui-input-block">
<input type="number" name="login_fail_limit" value="{{ config.login_fail_limit if config else 5 }}" class="layui-input" lay-verify="required|number">
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit>保存配置</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 引入统一的页脚 -->
{% include 'footer.html' %}
</div>
<script>
layui.use(['form', 'element', 'layer'], function(){
var form = layui.form;
var element = layui.element;
var layer = layui.layer;
// 表单验证
form.verify({
number: function(value) {
if(!/^\d+$/.test(value)) {
return '必须为数字';
}
},
email: function(value) {
if(value && !/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
return '邮箱格式不正确';
}
}
});
// 表单提交
form.on('submit', function(data){
// 表单数据会自动提交，这里可以添加额外的验证逻辑
return true;
});
});
</script>
</body>
</html>
templates/footer.html
+2 -2
View File
@@ -1,6 +1,6 @@
<!-- 页脚 -->
<footer class="bg-white py-4 border-t border-gray-200">
<div class="container mx-auto px-4 text-center text-gray-500 text-sm">
<footer class="footer">
<div class="container text-center">
<p>© {{ current_year }} 车主信息查询系统 - 版权所有</p>
<p>免责声明：本系统为内部测试使用，仅供学习和研究。</p>
</div>
templates/header.html
+84 -24
View File
@@ -1,42 +1,102 @@
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-car text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-gray-800">车主信息查询系统</h1>
<header class="header-navbar">
<div class="header-container">
<div class="header-logo">
<i class="fa fa-car header-icon"></i>
<h1 class="header-title">车主信息查询系统</h1>
</div>
<div class="flex items-center space-x-4">
<div class="header-user">
<!-- 用户下拉菜单 -->
<div class="relative group">
<div class="flex items-center cursor-pointer hover:text-primary transition-colors">
<span class="text-gray-600">欢迎 <strong>{{ session.department }}</strong> <strong>{{ session.name }}</strong></span>
<i class="fa fa-chevron-down ml-2 text-xs transition-transform duration-300 group-hover:rotate-180"></i>
<div class="user-dropdown-container">
<div class="user-dropdown-toggle">
<span class="user-welcome">欢迎 <strong>{{ session.department }}</strong> <strong>{{ session.name }}</strong></span>
<i class="fa fa-chevron-down dropdown-icon" id="dropdown-icon"></i>
</div>
<!-- 下拉菜单 -->
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-right scale-95 group-hover:scale-100 z-20">
<div class="py-1">
<a href="{{ url_for('user.user_profile_page') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-user mr-2"></i> 个人信息
<div class="user-dropdown" id="user-dropdown">
<div class="dropdown-content">
<a href="{{ url_for('user.user_profile_page') }}" class="dropdown-item">
<i class="fa fa-user dropdown-icon-item"></i> 个人信息
</a>
<a href="{{ url_for('user.change_password_page') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-lock mr-2"></i> 修改密码
<a href="{{ url_for('user.change_password_page') }}" class="dropdown-item">
<i class="fa fa-lock dropdown-icon-item"></i> 修改密码
</a>
<a href="{{ url_for('user.parameter_config_page') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-cog mr-2"></i> 参数配置
<a href="{{ url_for('user.parameter_config_page') }}" class="dropdown-item">
<i class="fa fa-cog dropdown-icon-item"></i> 参数配置
</a>
{% if session.username == 'admin' %}
<a href="{{ url_for('user.users_management') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-users mr-2"></i> 用户管理
<a href="{{ url_for('user.users_management') }}" class="dropdown-item">
<i class="fa fa-users dropdown-icon-item"></i> 用户管理
</a>
{% endif %}
<div class="border-t border-gray-200 my-1"></div>
<a href="{{ url_for('user.logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-sign-out mr-2"></i> 退出
<div class="dropdown-divider"></div>
<a href="{{ url_for('user.logout') }}" class="dropdown-item">
<i class="fa fa-sign-out dropdown-icon-item"></i> 退出
</a>
</div>
</div>
</div>
</div>
</div>
</header>
</header>
<script>
document.addEventListener('DOMContentLoaded', function() {
const dropdownContainer = document.querySelector('.user-dropdown-container');
const dropdownToggle = document.querySelector('.user-dropdown-toggle');
const dropdown = document.getElementById('user-dropdown');
const dropdownIcon = document.getElementById('dropdown-icon');
let timeout;
// 点击切换下拉菜单
dropdownToggle.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止冒泡，避免立即关闭
toggleDropdown();
});
// 点击页面其他地方关闭下拉菜单
document.addEventListener('click', function() {
closeDropdown();
});
// 鼠标悬停显示下拉菜单
dropdownContainer.addEventListener('mouseenter', function() {
clearTimeout(timeout);
openDropdown();
});
// 鼠标离开延迟关闭下拉菜单
dropdownContainer.addEventListener('mouseleave', function() {
timeout = setTimeout(closeDropdown, 300);
});
// 下拉菜单内鼠标进入取消关闭计时器
dropdown.addEventListener('mouseenter', function() {
clearTimeout(timeout);
});
// 下拉菜单内鼠标离开延迟关闭
dropdown.addEventListener('mouseleave', function() {
timeout = setTimeout(closeDropdown, 300);
});
function toggleDropdown() {
if (dropdown.classList.contains('show')) {
closeDropdown();
} else {
openDropdown();
}
}
function openDropdown() {
dropdown.classList.add('show');
dropdownIcon.classList.add('rotate');
}
function closeDropdown() {
dropdown.classList.remove('show');
dropdownIcon.classList.remove('rotate');
}
});
</script>
templates/login.html
+42 -55
View File
@@ -4,78 +4,65 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车主信息查询系统 - 登录</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 引入自定义CSS -->
<link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
<!-- 配置Tailwind CSS -->
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
secondary: '#f5f7fa',
success: '#52c41a',
warning: '#faad14',
error: '#f5222d',
info: '#8c8c8c'
},
fontFamily: {
sans: ['Microsoft YaHei', 'Arial', 'sans-serif']
}
}
}
}
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
});
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
}
</style>
</head>
<body class="bg-secondary min-h-screen font-sans flex justify-center items-center">
<div class="bg-white rounded-lg shadow-md p-8 w-full max-w-md">
<div class="text-center mb-8">
<h1 class="text-2xl font-bold text-gray-800">车主信息查询系统</h1>
<body>
<div class="login-container card">
<div class="login-title">
<h1><i class="fa fa-car"></i> 车主信息查询系统</h1>
</div>
<form method="POST">
<div class="mb-6">
<label for="username" class="block text-gray-700 font-medium mb-2">用户名</label>
<input type="text" id="username" name="username" required
class="w-full px-4 py-3 border border-gray-300 rounded-md input-focus">
<form class="layui-form" method="POST">
<div class="layui-form-item">
<label class="layui-form-label"><i class="fa fa-user"></i> 用户名</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 font-medium mb-2">密码</label>
<input type="password" id="password" name="password" required
class="w-full px-4 py-3 border border-gray-300 rounded-md input-focus">
<div class="layui-form-item">
<label class="layui-form-label"><i class="fa fa-lock"></i> 密码</label>
<div class="layui-input-block">
<input type="password" id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
{% if error %}
<div class="text-error text-center mb-4">
{{ error }}
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-bg-red" style="padding: 10px; border-radius: 4px;">{{ error }}</div>
</div>
</div>
{% endif %}
{% if success %}
<div class="text-success text-center mb-4">
{{ success }}
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-bg-green" style="padding: 10px; border-radius: 4px;">{{ success }}</div>
</div>
</div>
{% endif %}
<button type="submit"
class="w-full py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-300 font-medium">
登录
</button>
<div class="mt-4 text-center">
<a href="/register" class="text-primary hover:text-primary/80 transition-colors">注册账号</a>
<div class="layui-form-item">
<div style="text-align: center;">
<button type="submit" class="layui-btn layui-btn-normal"><i class="fa fa-sign-in"></i> 登录</button>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<a href="/register" class="layui-link">没有账号？点击注册</a>
</div>
</form>
</div>
<!-- 引入统一的页脚 -->
{% include 'footer.html' %}
</body>
</html>
templates/parameter_config.html
+179 -201
View File
@@ -4,176 +4,136 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>参数配置 - 车主信息查询系统</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#f3f4f6',
'primary-light': '#dbeafe',
'primary-dark': '#1d4ed8',
'table-header': '#f9fafb',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<!-- 引入自定义CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
</head>
<body class="bg-secondary min-h-screen font-sans">
<body>
{% include 'header.html' %}
<!-- 主要内容区域 -->
<main class="container mx-auto px-4 pt-24 pb-12">
<!-- 返回按钮 -->
<div class="mb-6 flex justify-end">
<a href="{{ url_for('query') }}" class="inline-flex items-center text-primary hover:text-primary-dark transition-colors">
<i class="fa fa-arrow-left mr-2"></i> 返回主页面
</a>
<div class="content-container">
<div class="content-wrapper">
<!-- 参数配置卡片 -->
<div class="card">
<div class="card-header">
<i class="fa fa-cog"></i> 参数配置
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
<i class="fa fa-arrow-left"></i> 返回主页面
</a>
</div>
<div class="card-body">
<!-- 消息提示区域 -->
{% if error %}
<div class="layui-bg-red message-box">
<i class="fa fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
{% if success %}
<div class="layui-bg-green message-box">
<i class="fa fa-check-circle"></i> {{ success }}
</div>
{% endif %}
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<i class="fa fa-cogs" style="font-size: 40px; color: #009688;"></i>
</div>
<p style="color: #666;">请设置和管理系统参数配置</p>
</div>
<!-- 表单区域 -->
<div class="layui-form" id="parameterForm" style="max-width: 600px; margin: 0 auto;">
<div class="message-box" id="updateTimeAlert" style="display: none; justify-content: center; margin-bottom: 15px;">
<i class="fa fa-info-circle"></i>
<span id="updateTimeContent"></span>
</div>
<div class="layui-form-item">
<label class="layui-form-label">参数1 <span class="layui-form-must">*</span></label>
<div class="layui-input-block">
<input type="text" id="param1" name="param1" required lay-verify="required" placeholder="请输入参数1的值" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">参数2</label>
<div class="layui-input-block">
<input type="text" id="param2" name="param2" placeholder="请输入参数2的值" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">参数3</label>
<div class="layui-input-block">
<input type="text" id="param3" name="param3" placeholder="请输入参数3的值" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">参数4</label>
<div class="layui-input-block">
<input type="text" id="param4" name="param4" placeholder="请输入参数4的值" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">参数5</label>
<div class="layui-input-block">
<input type="text" id="param5" name="param5" placeholder="请输入参数5的值" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-primary" id="reloadButton">
<i class="fa fa-refresh mr-1"></i> 重新加载
</button>
<button class="layui-btn layui-btn-normal" id="saveButton" lay-submit lay-filter="saveConfig">
<i class="fa fa-save mr-1"></i> 保存配置
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 个人信息表单 -->
<div class="max-w-md mx-auto bg-white rounded-lg shadow-xl p-8 animate-fade-in">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-cog text-primary text-2xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">参数配置</h2>
<p class="text-gray-500 mt-2">请配置系统参数</p>
</div>
<!-- 消息提示区域 -->
{% if error %}
<div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
<span>{{ error }}</span>
</div>
{% endif %}
{% if success %}
<div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
<i class="fa fa-check-circle mt-1 mr-3"></i>
<span>{{ success }}</span>
</div>
{% endif %}
<div class="mb-6 bg-blue-50 border border-blue-100 text-blue-700 px-4 py-3 rounded-md flex items-center" id="updateTimeAlert" style="display: none;">
<i class="fa fa-info-circle mr-2"></i>
<span id="updateTimeContent"></span>
</div>
<div class="space-y-4">
<div class="mb-4">
<label for="param1" class="block text-gray-700 text-sm font-medium mb-2">参数1 <span class="text-red-500">*</span></label>
<input type="text" id="param1" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数1的值">
</div>
<div class="mb-4">
<label for="param2" class="block text-gray-700 text-sm font-medium mb-2">参数2</label>
<input type="text" id="param2" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数2的值">
</div>
<div class="mb-4">
<label for="param3" class="block text-gray-700 text-sm font-medium mb-2">参数3</label>
<input type="text" id="param3" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数3的值">
</div>
<div class="mb-4">
<label for="param4" class="block text-gray-700 text-sm font-medium mb-2">参数4</label>
<input type="text" id="param4" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数4的值">
</div>
<div class="mb-6">
<label for="param5" class="block text-gray-700 text-sm font-medium mb-2">参数5</label>
<input type="text" id="param5" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数5的值">
</div>
<div class="flex space-x-3">
<button onclick="loadParameterConfig()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors flex items-center justify-center">
<i class="fa fa-refresh mr-2"></i> 重新加载
</button>
<button onclick="saveParameterConfig()" class="flex-1 bg-primary hover:bg-primary-dark text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow flex items-center justify-center">
<i class="fa fa-save mr-2"></i> 保存配置
</button>
</div>
</div>
</main>
</div>
<script>
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
// 页面加载时获取参数配置
document.addEventListener('DOMContentLoaded', function() {
loadParameterConfig();
// 重新加载按钮点击事件
document.getElementById('reloadButton').addEventListener('click', function() {
loadParameterConfig();
});
// 加载参数配置
function loadParameterConfig() {
fetch('/get_parameter_config')
.then(response => response.json())
.then(data => {
if (data.success && data.parameters) {
const parameters = data.parameters;
document.getElementById('param1').value = parameters.param1 || '';
document.getElementById('param2').value = parameters.param2 || '';
document.getElementById('param3').value = parameters.param3 || '';
document.getElementById('param4').value = parameters.param4 || '';
document.getElementById('param5').value = parameters.param5 || '';
// 显示更新时间
if (parameters.update_time) {
document.getElementById('updateTimeContent').textContent = '最后更新时间：' + parameters.update_time;
document.getElementById('updateTimeAlert').style.display = 'flex';
}
} else {
showErrorMessage('获取参数配置失败：' + (data.error || ''));
}
})
.catch(error => {
showErrorMessage('获取参数配置失败，请稍后重试');
console.error('获取参数配置失败', error);
});
}
// 保存参数配置
function saveParameterConfig() {
// 表单提交
form.on('submit(saveConfig)', function() {
// 添加加载状态
var saveButton = document.getElementById('saveButton');
var originalText = saveButton.innerHTML;
saveButton.disabled = true;
saveButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 保存中...';
// 表单验证
if (!document.getElementById('param1').value.trim()) {
showErrorMessage('参数1不能为空');
return;
saveButton.disabled = false;
saveButton.innerHTML = originalText;
return false;
}
const formData = {
@@ -193,6 +153,10 @@
})
.then(response => response.json())
.then(data => {
// 恢复按钮状态
saveButton.disabled = false;
saveButton.innerHTML = originalText;
if (data.success) {
showSuccessMessage('参数配置保存成功');
// 重新加载参数配置
@@ -202,6 +166,10 @@
}
})
.catch(error => {
// 恢复按钮状态
saveButton.disabled = false;
saveButton.innerHTML = originalText;
let errorMessage = '保存参数配置失败，请稍后重试';
if (error.responseJSON && error.responseJSON.error) {
errorMessage = error.responseJSON.error;
@@ -209,61 +177,71 @@
showErrorMessage(errorMessage);
console.error('保存参数配置失败', error);
});
return false; // 阻止表单默认提交
});
// 加载参数配置
function loadParameterConfig() {
// 添加加载状态
var reloadButton = document.getElementById('reloadButton');
var originalText = reloadButton.innerHTML;
reloadButton.disabled = true;
reloadButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 加载中...';
fetch('/get_parameter_config')
.then(response => response.json())
.then(data => {
// 恢复按钮状态
reloadButton.disabled = false;
reloadButton.innerHTML = originalText;
if (data.success && data.parameters) {
const parameters = data.parameters;
document.getElementById('param1').value = parameters.param1 || '';
document.getElementById('param2').value = parameters.param2 || '';
document.getElementById('param3').value = parameters.param3 || '';
document.getElementById('param4').value = parameters.param4 || '';
document.getElementById('param5').value = parameters.param5 || '';
// 显示更新时间
if (parameters.update_time) {
document.getElementById('updateTimeContent').textContent = '最后更新时间：' + parameters.update_time;
document.getElementById('updateTimeAlert').style.display = 'flex';
} else {
document.getElementById('updateTimeAlert').style.display = 'none';
}
} else {
showErrorMessage('获取参数配置失败：' + (data.error || ''));
}
})
.catch(error => {
// 恢复按钮状态
reloadButton.disabled = false;
reloadButton.innerHTML = originalText;
showErrorMessage('获取参数配置失败，请稍后重试');
console.error('获取参数配置失败', error);
});
}
// 显示错误消息
function showErrorMessage(message) {
// 创建错误消息元素
const errorDiv = document.createElement('div');
errorDiv.className = 'mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in';
errorDiv.innerHTML = `
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
<span>${message}</span>
`;
// 插入到表单前
const container = document.querySelector('.space-y-4');
container.insertBefore(errorDiv, container.firstChild);
// 3秒后自动移除
setTimeout(() => {
errorDiv.style.opacity = '0';
errorDiv.style.transform = 'translateY(-10px)';
errorDiv.style.transition = 'opacity 0.3s, transform 0.3s';
setTimeout(() => {
if (errorDiv.parentNode) {
errorDiv.parentNode.removeChild(errorDiv);
}
}, 300);
}, 3000);
layer.msg(message, {
icon: 5,
time: 3000
});
}
// 显示成功消息
function showSuccessMessage(message) {
// 创建成功消息元素
const successDiv = document.createElement('div');
successDiv.className = 'mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start animate-fade-in';
successDiv.innerHTML = `
<i class="fa fa-check-circle mt-1 mr-3"></i>
<span>${message}</span>
`;
// 插入到表单前
const container = document.querySelector('.space-y-4');
container.insertBefore(successDiv, container.firstChild);
// 3秒后自动移除
setTimeout(() => {
successDiv.style.opacity = '0';
successDiv.style.transform = 'translateY(-10px)';
successDiv.style.transition = 'opacity 0.3s, transform 0.3s';
setTimeout(() => {
if (successDiv.parentNode) {
successDiv.parentNode.removeChild(successDiv);
}
}, 300);
}, 3000);
layer.msg(message, {
icon: 1,
time: 3000
});
}
});
</script>
{% include 'footer.html' %}
templates/query.html
+323 -283
View File
@@ -4,56 +4,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车主信息查询系统 - 查询</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 引入自定义CSS -->
<link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
<!-- 配置Tailwind CSS -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
secondary: '#f0f2f5',
success: '#52c41a',
warning: '#faad14',
error: '#f5222d',
info: '#8c8c8c',
'primary-light': '#e6f7ff',
'table-header': '#fafafa'
},
fontFamily: {
sans: ['Microsoft YaHei', 'Arial', 'sans-serif']
}
}
}
}
layui.use(['layer', 'form', 'table'], function(){
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
});
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.table-hover {
@apply hover:bg-primary-light/30 transition-colors duration-150;
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
}
<style>
@keyframes fadeIn {
from {
opacity: 0;
@@ -66,148 +35,111 @@
}
</style>
</head>
<body class="bg-secondary min-h-screen font-sans">
<body>
<!-- 引入统一的顶部导航栏 -->
{% include 'header.html' %}
<!-- 主要内容区域 -->
<main class="container mx-auto px-4 pt-24 pb-12">
<!-- 消息提示区域 -->
{% if error %}
<div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
<span>{{ error }}</span>
</div>
{% endif %}
{% if success %}
<div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
<i class="fa fa-check-circle mt-1 mr-3"></i>
<span>{{ success }}</span>
</div>
{% endif %}
<!-- 最近查询记录 -->
{% if recent_queries %}
<div class="bg-white rounded-lg card-shadow p-6 transform hover:translate-y-[-2px] transition-all duration-300">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-gray-800 flex items-center">
<i class="fa fa-history text-primary mr-2"></i> 最近查询记录
</h2>
<button id="addQueryBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md flex items-center transition-all duration-200 shadow-sm hover:shadow">
<i class="fa fa-plus mr-1"></i> 增加
</button>
</div>
</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-table-header">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">查询日期</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">车牌号</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">手机号</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登录部门</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登录IP</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{% for query in recent_queries %}
<tr class="table-hover cursor-pointer transition-all duration-200 hover:bg-primary-light/40" data-history-id="{{ query.id }}">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ loop.index }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ query.query_date }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ query.plate_number }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ query.phone }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
{% if query.results_count == -1 %}
bg-warning/10 text-warning
{% elif query.results_count > 0 %}
bg-success/10 text-success
{% else %}
bg-error/10 text-error
{% endif %}">
{% if query.results_count == -1 %}
待查询
{% else %}
{{ query.results_count }} 条记录
{% endif %}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ query.department }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ query.query_ip }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
</main>
<!-- 增加查询模态框 -->
<div id="addQueryModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
<div class="flex justify-between items-center p-6 border-b">
<h3 class="text-xl font-semibold text-gray-800">增加查询记录</h3>
<button id="closeAddModal" class="text-gray-500 hover:text-gray-700 transition-colors">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<div class="p-6">
<form id="addQueryForm">
<div class="mb-4">
<label for="add_plate_number" class="block text-sm font-medium text-gray-700 mb-1">车牌号</label>
<input type="text" id="add_plate_number" name="plate_number"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-all duration-200"
placeholder="请输入车牌号（如：京A123456）">
</div>
<div class="mb-6">
<label for="add_phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
<input type="tel" id="add_phone" name="phone"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-all duration-200"
placeholder="请输入手机号（如：13800138001）">
<p class="mt-1 text-sm text-gray-500">提示：请至少输入车牌号或手机号其中一项</p>
</div>
<div class="flex space-x-4">
<button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-all duration-200">
保存
</button>
<button type="button" id="cancelAddBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md transition-all duration-200">
取消
</button>
</div>
</form>
<!-- 加载状态 -->
<div id="addQueryLoading" class="py-10 flex flex-col items-center justify-center hidden">
<i class="fa fa-spinner fa-spin text-primary text-3xl mb-4"></i>
<p class="text-gray-600">正在处理...</p>
</div>
<div class="content-container">
<div class="content-wrapper">
<div class="card">
<div class="card-body">
<!-- 表单已清除 -->
<!-- 消息提示区域 -->
{% if error %}
<div class="error-message">
<i class="fa fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
{% if success %}
<div class="success-message">
<i class="fa fa-check-circle"></i> {{ success }}
</div>
{% endif %}
<!-- 最近查询记录 -->
{% if recent_queries %}
<div class="card">
<div class="card-header">
<i class="fa fa-history"></i> 最近查询记录
<button id="addQueryBtn" class="layui-btn layui-btn-normal" style="
float: right;
padding: 6px 16px;
border-radius: 6px;
background-color: #009688;
border-color: #009688;
font-size: 14px;
font-weight: 500;
color: white;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
">
<i class="fa fa-plus-circle"></i> 新增查询记录
</button>
</div>
<div class="card-body">
<table class="layui-table">
<thead>
<tr>
<th>序号</th>
<th>查询日期</th>
<th>车牌号</th>
<th>手机号</th>
<th>状态</th>
<th>登录部门</th>
<th>登录IP</th>
</tr>
</thead>
<tbody>
{% for query in recent_queries %}
<tr class="table-hover" data-history-id="{{ query.id }}">
<td>{{ loop.index }}</td>
<td>{{ query.query_date }}</td>
<td>{{ query.plate_number }}</td>
<td>{{ query.phone }}</td>
<td>
<span class="layui-badge
{% if query.results_count == -1 %}
layui-bg-orange
{% elif query.results_count > 0 %}
layui-bg-green
{% else %}
layui-bg-red
{% endif %}">
{% if query.results_count == -1 %}
待查询
{% else %}
{{ query.results_count }} 条记录
{% endif %}
</span>
</td>
<td>{{ query.department }}</td>
<td>{{ query.query_ip }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- 用于layui增加查询弹窗的隐藏字段 -->
<input type="hidden" id="add_plate_number">
<input type="hidden" id="add_phone">
<!-- 详情模态框 -->
<div id="detailModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center p-6 border-b">
<h3 class="text-xl font-semibold text-gray-800">查询结果详情</h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700 transition-colors">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<div class="p-6" id="modalContent">
<!-- 加载状态 -->
<div id="loadingState" class="py-10 flex flex-col items-center justify-center">
<i class="fa fa-spinner fa-spin text-primary text-3xl mb-4"></i>
<p class="text-gray-600">正在加载详情...</p>
</div>
<!-- 无结果状态 -->
<div id="noResultState" class="py-10 flex flex-col items-center justify-center hidden">
<i class="fa fa-search text-gray-300 text-5xl mb-4"></i>
<p class="text-gray-600">未找到相关车辆信息</p>
</div>
<!-- 结果列表 -->
<div id="resultList" class="hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="carOwnerCards">
@@ -249,56 +181,222 @@
// 增加查询按钮点击事件
addQueryBtn.addEventListener('click', function() {
// 兼容classList API
if (addQueryModal.classList) {
addQueryModal.classList.remove('hidden');
} else {
addQueryModal.className = addQueryModal.className.replace('hidden', '');
}
addQueryForm.reset();
});
// 关闭增加查询模态框
closeAddModal.addEventListener('click', function() {
// 兼容classList API
if (addQueryModal.classList) {
addQueryModal.classList.add('hidden');
} else {
addQueryModal.className += ' hidden';
}
});
// 取消增加查询
cancelAddBtn.addEventListener('click', function() {
// 兼容classList API
if (addQueryModal.classList) {
addQueryModal.classList.add('hidden');
} else {
addQueryModal.className += ' hidden';
}
});
// 点击增加查询模态框背景关闭
addQueryModal.addEventListener('click', function(e) {
if (e.target === addQueryModal) {
// 兼容classList API
if (addQueryModal.classList) {
addQueryModal.classList.add('hidden');
} else {
addQueryModal.className += ' hidden';
// 使用layui创建增加查询记录弹窗，并美化设计
layer.open({
type: 1,
title: '<i class="fa fa-plus-circle"></i> 增加查询记录',
area: ['520px', '380px'],
offset: '10%',
shade: 0.3,
shadeClose: false,
anim: 2,
content: `
<div class="form-container" style="padding: 24px;">
<!-- 表单主体 -->
<form class="layui-form">
<!-- 车牌号输入框 -->
<div class="form-group" style="margin-bottom: 20px;">
<label for="layui_add_plate_number" style="display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 500;">
<i class="fa fa-id-card-o" style="color: #009688; margin-right: 6px;"></i>车牌号
</label>
<div class="input-wrapper" style="position: relative;">
<input type="text" id="layui_add_plate_number"
style="
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
box-sizing: border-box;
"
placeholder="请输入车牌号（如：京A123456）"
onfocus="this.style.borderColor='#009688'; this.style.boxShadow='0 0 0 2px rgba(0,150,136,0.2)';"
onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none';">
</div>
</div>
<!-- 手机号输入框 -->
<div class="form-group" style="margin-bottom: 24px;">
<label for="layui_add_phone" style="display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 500;">
<i class="fa fa-mobile" style="color: #009688; margin-right: 6px;"></i>手机号
</label>
<div class="input-wrapper" style="position: relative;">
<input type="tel" id="layui_add_phone"
style="
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
box-sizing: border-box;
"
placeholder="请输入手机号（如：13800138001）"
onfocus="this.style.borderColor='#009688'; this.style.boxShadow='0 0 0 2px rgba(0,150,136,0.2)';"
onblur="this.style.borderColor='#dcdfe6'; this.style.boxShadow='none';">
</div>
<div class="form-tip" style="margin-top: 6px;">
<i class="fa fa-info-circle" style="color: #909399; font-size: 12px;"></i>
<span style="color: #909399; font-size: 12px; margin-left: 4px;">提示：请至少输入车牌号或手机号其中一项</span>
</div>
</div>
<!-- 加载状态 -->
<div id="layui_addQueryLoading" class="loading-state" style="display: none; flex-direction: column; align-items: center; justify-content: center; padding: 30px 0;">
<div class="spinner" style="width: 40px; height: 40px; border: 3px solid #f0f0f0; border-top: 3px solid #009688; border-radius: 50%; animation: spin 1s linear infinite;"></div>
<p style="margin-top: 12px; color: #606266; font-size: 14px;">正在处理...</p>
</div>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</form>
<style>
.btn-success {
background-color: #009688;
border-color: #009688;
color: white;
padding: 8px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 150, 136, 0.2);
outline: none;
cursor: pointer;
}
.btn-success:hover {
background-color: #26a69a;
border-color: #26a69a;
box-shadow: 0 4px 8px rgba(0, 150, 136, 0.3);
}
.btn-success:active {
transform: translateY(1px);
}
.btn-secondary {
background-color: #f0f2f5;
border-color: #dcdfe6;
color: #606266;
padding: 8px 20px;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
outline: none;
cursor: pointer;
}
.btn-secondary:hover {
background-color: #e6eaf0;
border-color: #c0c4cc;
}
</style>
</div>
`,
btn: ['保存', '取消'],
btnAlign: 'c',
btnClass: ['btn-success', 'btn-secondary'],
btn1: function(index, layero) {
const plateNumber = document.getElementById('layui_add_plate_number').value;
const phone = document.getElementById('layui_add_phone').value;
// 验证输入
if (!plateNumber && !phone) {
layer.msg('请至少输入车牌号或手机号其中一项', {
icon: 5,
anim: 6,
time: 2000
});
return false;
}
// 手机号格式验证
if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
layer.msg('请输入正确的手机号码', {
icon: 5,
anim: 6,
time: 2000
});
return false;
}
// 车牌号格式简单验证（可根据实际需求调整）
if (plateNumber && plateNumber.length < 5) {
layer.msg('请输入正确的车牌号', {
icon: 5,
anim: 6,
time: 2000
});
return false;
}
// 显示加载状态
document.getElementById('layui_addQueryLoading').style.display = 'flex';
// 模拟提交数据
setTimeout(function() {
// 创建表单用于提交数据
var form = document.createElement('form');
form.method = 'POST';
form.action = '/query';
// 添加车牌号字段
var plateInput = document.createElement('input');
plateInput.type = 'hidden';
plateInput.name = 'plate_number';
plateInput.value = plateNumber;
form.appendChild(plateInput);
// 添加手机号字段
var phoneInput = document.createElement('input');
phoneInput.type = 'hidden';
phoneInput.name = 'phone';
phoneInput.value = phone;
form.appendChild(phoneInput);
// 添加标识字段，表示这是从"增加"按钮提交的请求
var isAddInput = document.createElement('input');
isAddInput.type = 'hidden';
isAddInput.name = 'is_add_query';
isAddInput.value = 'true';
form.appendChild(isAddInput);
// 隐藏加载状态
document.getElementById('layui_addQueryLoading').style.display = 'none';
// 关闭弹窗
layer.close(index);
// 显示成功消息
layer.msg('查询记录添加成功', {
icon: 1,
time: 2000,
end: function() {
// 提交表单，将数据发送到服务器
document.body.appendChild(form);
form.submit();
}
});
}, 800);
},
btn2: function(index, layero) {
layer.close(index);
return false;
}
}
});
});
// 关闭详情模态框
closeModal.addEventListener('click', function() {
// 兼容classList API
if (detailModal.classList) {
detailModal.classList.add('hidden');
} else {
detailModal.className += ' hidden';
}
});
// 移除对已删除元素的引用
// 点击详情模态框背景关闭
detailModal.addEventListener('click', function(e) {
@@ -312,66 +410,8 @@
}
});
// 处理增加查询表单提交
addQueryForm.addEventListener('submit', function(e) {
e.preventDefault();
var plateNumber = document.getElementById('add_plate_number').value.trim();
var phone = document.getElementById('add_phone').value.trim();
if (!plateNumber && !phone) {
alert('请至少输入车牌号或手机号');
return;
}
// 显示加载状态
// 兼容classList API
if (addQueryForm.classList) {
addQueryForm.classList.add('hidden');
} else {
addQueryForm.className += ' hidden';
}
if (addQueryLoading.classList) {
addQueryLoading.classList.remove('hidden');
} else {
addQueryLoading.className = addQueryLoading.className.replace('hidden', '');
}
// 构建表单数据
var formData = new FormData();
formData.append('plate_number', plateNumber);
formData.append('phone', phone);
formData.append('is_add_query', 'true');
// 发送请求到查询路由
fetch('/query', {
method: 'POST',
body: formData
})
.then(function(response) {
if (!response.ok) {
throw new Error('网络错误');
}
// 重新加载页面以显示新的查询记录
window.location.reload();
})
.catch(function(error) {
console.error('Error submitting query:', error);
alert('提交失败，请重试');
// 恢复表单显示
// 兼容classList API
if (addQueryForm.classList) {
addQueryForm.classList.remove('hidden');
} else {
addQueryForm.className = addQueryForm.className.replace('hidden', '');
}
if (addQueryLoading.classList) {
addQueryLoading.classList.add('hidden');
} else {
addQueryLoading.className += ' hidden';
}
});
});
// 表单提交逻辑已整合到layui弹窗中，不需要单独的表单提交事件
// 加载查询历史详情
function loadHistoryDetail(historyId) {
templates/register.html
+192 -90
View File
@@ -4,103 +4,205 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车主信息查询系统 - 注册</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 引入自定义CSS -->
<link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
<!-- 配置Tailwind CSS -->
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
</head>
<body>
<!-- 引入统一的顶部导航栏 -->
{% include 'header.html' %}
<!-- 主要内容区域 -->
<div class="content-container">
<div class="content-wrapper">
<div class="card">
<div class="card-header">
<i class="fa fa-user-plus"></i> 用户注册
</div>
<div class="card-body">
<!-- 消息提示区域 -->
{% if error %}
<div class="layui-bg-red message-box">
<i class="fa fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
{% if success %}
<div class="layui-bg-green message-box">
<i class="fa fa-check-circle"></i> {{ success }}
</div>
{% endif %}
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<i class="fa fa-user-plus" style="font-size: 40px; color: #009688;"></i>
</div>
<p style="color: #666;">请填写以下信息完成注册</p>
</div>
<!-- 表单 -->
<form class="layui-form" id="registerForm" method="POST" style="max-width: 500px; margin: 0 auto;">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系电话</label>
<div class="layui-input-block">
<input type="tel" id="phone" name="phone" required lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门名称</label>
<div class="layui-input-block">
<input type="text" id="department" name="department" required lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" id="password" name="password" required lay-verify="required|password" placeholder="请设置密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" id="confirm_password" name="confirm_password" required lay-verify="required|confirmPassword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="registerForm"><i class="fa fa-check"></i> 注册</button>
<button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<a href="{{ url_for('user.login') }}" class="layui-link">已有账号？返回登录</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
{% include 'footer.html' %}
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
secondary: '#f5f7fa',
success: '#52c41a',
warning: '#faad14',
error: '#f5222d',
info: '#8c8c8c'
},
fontFamily: {
sans: ['Microsoft YaHei', 'Arial', 'sans-serif']
}
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
// 表单验证
form.verify({
username: function(value){
if(value.length < 3){
return '用户名至少3个字符';
}
},
phone: [
/^1\d{10}$/,
'请输入正确的手机号'
],
password: [
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
'密码长度至少8位，且必须包含字母和数字'
],
confirmPassword: function(value){
var password = document.getElementById('password').value;
if(value !== password){
return '两次输入的密码不一致';
}
}
});
// 表单提交
form.on('submit(registerForm)', function(data){
// 添加加载状态
var submitButton = document.querySelector('button[type="submit"]');
var originalText = submitButton.innerHTML;
submitButton.disabled = true;
submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 提交中...';
// 延迟提交以显示加载状态
setTimeout(function(){
document.getElementById('registerForm').submit();
}, 500);
return false;
});
// 密码可见性切换功能
function togglePasswordVisibility(inputId) {
var input = document.getElementById(inputId);
var icon = document.getElementById(inputId + '_icon');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
input.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
}
// 为输入框添加密码可见性切换图标
function addPasswordToggleIcons() {
var passwordInputs = document.querySelectorAll('input[type="password"]');
passwordInputs.forEach(function(input) {
var parent = input.parentElement;
var toggleBtn = document.createElement('i');
toggleBtn.id = input.id + '_icon';
toggleBtn.className = 'fa fa-eye layui-icon layui-input-icon-right password-toggle-icon';
toggleBtn.style.position = 'absolute';
toggleBtn.style.right = '10px';
toggleBtn.style.top = '50%';
toggleBtn.style.transform = 'translateY(-50%)';
toggleBtn.style.cursor = 'pointer';
toggleBtn.style.color = '#999';
// 为容器添加相对定位
parent.style.position = 'relative';
// 添加点击事件
toggleBtn.addEventListener('click', function() {
togglePasswordVisibility(input.id);
});
// 检查是否已存在图标
if (!document.getElementById(input.id + '_icon')) {
parent.appendChild(toggleBtn);
// 为输入框添加右侧内边距，防止文字被图标遮挡
input.style.paddingRight = '30px';
}
});
}
// 页面加载完成后执行
window.onload = function() {
// 添加密码可见性切换图标
addPasswordToggleIcons();
// 重新渲染表单
form.render();
};
});
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
}
</style>
</head>
<body class="bg-secondary min-h-screen font-sans flex justify-center items-center">
<div class="bg-white rounded-lg shadow-md p-8 w-full max-w-md">
<div class="text-center mb-8">
<h1 class="text-2xl font-bold text-gray-800">车主信息查询系统</h1>
<p class="text-gray-600 mt-2">用户注册</p>
</div>
<form method="POST">
<div class="flex gap-4 mb-6">
<div class="flex-1">
<label for="username" class="block text-gray-700 font-medium mb-2">用户名</label>
<input type="text" id="username" name="username" required placeholder="请输入用户名"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
<div class="flex-1">
<label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
<input type="text" id="name" name="name" required placeholder="请输入真实姓名"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
</div>
<div class="flex gap-4 mb-6">
<div class="flex-1">
<label for="phone" class="block text-gray-700 font-medium mb-2">联系电话</label>
<input type="tel" id="phone" name="phone" required placeholder="请输入联系电话"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
<div class="flex-1">
<label for="department" class="block text-gray-700 font-medium mb-2">部门名称</label>
<input type="text" id="department" name="department" required placeholder="请输入部门名称"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 font-medium mb-2">密码</label>
<input type="password" id="password" name="password" required placeholder="请设置密码"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
<div class="mb-6">
<label for="confirm_password" class="block text-gray-700 font-medium mb-2">确认密码</label>
<input type="password" id="confirm_password" name="confirm_password" required placeholder="请再次输入密码"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
{% if error %}
<div class="text-error text-center mb-4">
{{ error }}
</div>
{% endif %}
{% if success %}
<div class="text-success text-center mb-4">
{{ success }}
</div>
{% endif %}
<button type="submit"
class="w-full py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-300 font-medium">
注册
</button>
<div class="mt-4 text-center">
<a href="/" class="text-primary hover:text-primary/80 transition-colors hover:underline">已有账号？返回登录</a>
</div>
</form>
</div>
</body>
</html>
templates/user_profile.html
+103 -111
View File
@@ -4,124 +4,116 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人信息 - 车主信息查询系统</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<!-- 引入自定义CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#f3f4f6',
'primary-light': '#dbeafe',
'primary-dark': '#1d4ed8',
'table-header': '#f9fafb',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
layui.use(['layer', 'form', 'element'], function(){
var layer = layui.layer;
var form = layui.form;
var element = layui.element;
});
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="bg-secondary min-h-screen font-sans">
<body>
<!-- 引入统一的顶部导航栏 -->
{% include 'header.html' %}
<!-- 主要内容区域 -->
<main class="container mx-auto px-4 pt-24 pb-12">
<!-- 返回按钮 -->
<div class="mb-6 flex justify-end">
<a href="{{ url_for('query') }}" class="inline-flex items-center text-primary hover:text-primary-dark transition-colors">
<i class="fa fa-arrow-left mr-2"></i> 返回主页面
</a>
<div class="content-container">
<div class="content-wrapper">
<div class="card">
<div class="card-header">
<i class="fa fa-user"></i> 个人信息
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
<i class="fa fa-arrow-left"></i> 返回主页面
</a>
</div>
<div class="card-body">
<!-- 消息提示区域 -->
{% if error %}
<div class="layui-bg-red message-box">
<i class="fa fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
{% if success %}
<div class="layui-bg-green message-box">
<i class="fa fa-check-circle"></i> {{ success }}
</div>
{% endif %}
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<i class="fa fa-user" style="font-size: 40px; color: #009688;"></i>
</div>
<p style="color: #666;">请查看并更新您的个人信息</p>
</div>
<!-- 表单 -->
<form class="layui-form" id="userProfileForm" method="POST" style="max-width: 500px; margin: 0 auto;">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" id="profile_username" value="{{ user.username }}" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" id="profile_name" name="name" value="{{ user.name }}" class="layui-input" placeholder="请输入姓名" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系电话</label>
<div class="layui-input-block">
<input type="tel" id="profile_phone" name="phone" value="{{ user.phone }}" class="layui-input" placeholder="请输入联系电话" lay-verify="required|phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门名称</label>
<div class="layui-input-block">
<input type="text" id="profile_department" name="department" value="{{ user.department }}" class="layui-input" placeholder="请输入部门名称" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit>保存修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<!-- 个人信息表单 -->
<div class="max-w-md mx-auto bg-white rounded-lg shadow-xl p-8 animate-fade-in">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-user text-primary text-2xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">个人信息</h2>
<p class="text-gray-500 mt-2">请查看并更新您的个人信息</p>
</div>
<!-- 消息提示区域 -->
{% if error %}
<div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
<span>{{ error }}</span>
</div>
{% endif %}
{% if success %}
<div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
<i class="fa fa-check-circle mt-1 mr-3"></i>
<span>{{ success }}</span>
</div>
{% endif %}
<!-- 表单 -->
<form id="userProfileForm" method="POST" class="space-y-4">
<div class="mb-4">
<label for="profile_username" class="block text-gray-700 text-sm font-medium mb-2">用户名</label>
<input type="text" id="profile_username" value="{{ user.username }}" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors bg-gray-50 cursor-not-allowed" disabled>
</div>
<div class="mb-4">
<label for="profile_name" class="block text-gray-700 text-sm font-medium mb-2">姓名 <span class="text-red-500">*</span></label>
<input type="text" id="profile_name" name="name" value="{{ user.name }}" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入姓名" required>
</div>
<div class="mb-4">
<label for="profile_phone" class="block text-gray-700 text-sm font-medium mb-2">联系电话 <span class="text-red-500">*</span></label>
<input type="tel" id="profile_phone" name="phone" value="{{ user.phone }}" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入联系电话" required>
</div>
<div class="mb-6">
<label for="profile_department" class="block text-gray-700 text-sm font-medium mb-2">部门名称 <span class="text-red-500">*</span></label>
<input type="text" id="profile_department" name="department" value="{{ user.department }}" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入部门名称" required>
</div>
<div class="flex space-x-3">
<button type="submit" class="flex-1 bg-primary hover:bg-primary-dark text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
保存修改
</button>
<button type="button" onclick="window.location.href='{{ url_for('query') }}'" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
取消
</button>
</div>
</form>
</div>
</main>
</div>
<!-- 页脚 -->
{% include 'footer.html' %}
<script>
layui.use(['form', 'element'], function(){
var form = layui.form;
var element = layui.element;
// 表单验证
form.verify({
phone: [
/^1\d{10}$/,
'请输入正确的手机号'
]
});
// 表单提交
form.on('submit(userProfileForm)', function(data){
// 表单数据会自动提交，这里可以添加额外的验证逻辑
return true;
});
});
</script>
</body>
</html>
templates/users_management.html
+372 -310
View File
@@ -4,247 +4,155 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车主信息查询系统 - 用户管理</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 引入自定义CSS -->
<link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
<!-- 配置Tailwind CSS -->
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
<!-- 初始化Layui组件 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
secondary: '#f0f2f5',
success: '#52c41a',
warning: '#faad14',
error: '#f5222d',
info: '#8c8c8c',
'primary-light': '#e6f7ff',
'table-header': '#fafafa'
},
fontFamily: {
sans: ['Microsoft YaHei', 'Arial', 'sans-serif']
}
}
}
}
layui.use(['layer', 'form', 'table'], function(){
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
// 渲染所有表单元素
form.render();
});
</script>
<!-- 引入通用工具函数 -->
<script src="{{ url_for('static', filename='js/utils.js') }}"></script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.table-hover {
@apply hover:bg-primary-light/30 transition-colors duration-150;
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="bg-secondary min-h-screen font-sans">
<body>
<!-- 引入统一的顶部导航栏 -->
{% include 'header.html' %}
<!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-12">
<!-- 返回按钮 -->
<div class="mb-6 flex justify-end">
<a href="{{ url_for('query') }}" class="inline-flex items-center text-primary hover:text-primary-dark transition-colors">
<i class="fa fa-arrow-left mr-2"></i> 返回主页面
</a>
</div>
<!-- 页面标题 -->
<div class="mb-6">
<h2 class="text-2xl font-bold text-gray-800">用户管理</h2>
<p class="text-gray-500 mt-1">管理系统用户、审核登录权限、修改部门信息和初始化密码</p>
</div>
<!-- 搜索框 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1">
<div class="relative">
<input type="text" id="searchUsername" placeholder="输入用户名搜索"
class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md input-focus">
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<!-- 主要内容区域 -->
<div class="content-container">
<div class="content-wrapper">
<div class="card">
<div class="card-header">
<i class="fa fa-users"></i> 用户管理
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
<i class="fa fa-arrow-left"></i> 返回主页面
</a>
</div>
<div class="flex flex-col md:flex-row gap-2">
<select id="filterDepartment" class="w-full md:w-auto px-4 py-2 border border-gray-300 rounded-md input-focus">
<option value="">所有部门</option>
{% for dept in departments %}
<option value="{{ dept }}">{{ dept }}</option>
{% endfor %}
</select>
<select id="filterStatus" class="w-full md:w-auto px-4 py-2 border border-gray-300 rounded-md input-focus">
<option value="">所有状态</option>
<option value="active">已启用</option>
<option value="inactive">已禁用</option>
</select>
<button onclick="searchUsers()" class="w-full md:w-auto bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
<i class="fa fa-search mr-1"></i> 搜索
</button>
</div>
</div>
</div>
<div class="card-body">
<!-- 消息提示区域 -->
<div id="messageContainer" class="mb-6 hidden">
<!-- 消息提示区域 -->
<div id="messageContainer" class="mb-6 hidden">
<div id="successMessage" class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-center hidden">
<i class="fa fa-check-circle mr-2"></i>
<span></span>
</div>
<div id="errorMessage" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-center hidden">
<i class="fa fa-exclamation-circle mr-2"></i>
<span></span>
</div>
</div>
<!-- 用户列表表格 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-table-header">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody id="usersTableBody" class="bg-white divide-y divide-gray-200">
<!-- 用户数据将通过JavaScript动态加载 -->
</tbody>
</table>
</div>
<!-- 分页控制 -->
<div class="px-6 py-3 flex items-center justify-between border-t border-gray-200">
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
显示 <span id="startItem">1</span> 至 <span id="endItem">10</span> 条，共 <span id="totalItems">0</span> 条记录
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<button id="prevPage" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
<span class="sr-only">上一页</span>
<i class="fa fa-chevron-left"></i>
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<i class="fa fa-users" style="font-size: 40px; color: #009688;"></i>
</div>
<p style="color: #666;">管理系统用户、审核登录权限、修改部门信息和初始化密码</p>
</div>
<!-- 搜索框 -->
<div class="mb-6">
<div class="layui-form" style="margin-bottom: 15px;">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline" style="width: 180px;">
<input type="text" id="searchUsername" placeholder="输入用户名搜索" class="layui-input">
</div>
<label class="layui-form-label">部门</label>
<div class="layui-input-inline" style="width: 120px;">
<select id="filterDepartment" class="layui-select" lay-search>
<option value="">所有部门</option>
{% for dept in departments %}
<option value="{{ dept }}">{{ dept }}</option>
{% endfor %}
</select>
</div>
<label class="layui-form-label">状态</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="filterStatus" class="layui-select">
<option value="">所有状态</option>
<option value="active">已启用</option>
<option value="inactive">已禁用</option>
</select>
</div>
<div class="layui-input-inline">
<button id="searchButton" onclick="searchUsers()" class="layui-btn layui-btn-normal">
<i class="fa fa-search mr-1"></i> 搜索
</button>
</div>
</div>
</div>
</div>
<!-- 用户列表表格 -->
<div class="overflow-x-auto">
<table class="layui-table">
<thead>
<tr>
<th>用户名</th>
<th>姓名</th>
<th>部门</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="usersTableBody">
<!-- 用户数据将通过JavaScript动态加载 -->
</tbody>
</table>
</div>
<!-- 分页控制 -->
<div class="layui-form-item" style="text-align: center; margin-top: 20px;">
<div class="layui-input-block">
<span id="paginationInfo" class="layui-btn layui-btn-primary layui-btn-radius" style="margin-right: 20px;">
显示 <span id="startItem" style="color: #1E9FFF;">1</span> 至 <span id="endItem" style="color: #1E9FFF;">10</span> 条，共 <span id="totalItems" style="color: #1E9FFF;">0</span> 条记录
</span>
<button id="prevPage" class="layui-btn layui-btn-radius" disabled>
<i class="fa fa-chevron-left"></i> 上一页
</button>
<button id="nextPage" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
<span class="sr-only">下一页</span>
<i class="fa fa-chevron-right"></i>
<button id="nextPage" class="layui-btn layui-btn-radius">
下一页 <i class="fa fa-chevron-right"></i>
</button>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 页脚 -->
{% include 'footer.html' %}
<!-- 修改部门信息弹窗 -->
<div id="editDepartmentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
<div class="bg-primary text-white p-4 flex justify-between items-center">
<h3 class="text-lg font-medium">修改部门信息</h3>
<button onclick="closeEditDepartmentModal()" class="text-white hover:text-gray-200 transition-colors">
<i class="fa fa-times"></i>
</button>
</div>
<div class="p-6">
<input type="hidden" id="editUserId">
<input type="hidden" id="editUsername">
<div class="mb-4">
<label for="editUserName" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
<input type="text" id="editUserName" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 cursor-not-allowed">
</div>
<div class="mb-4">
<label for="editUserRealName" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
<input type="text" id="editUserRealName" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 cursor-not-allowed">
</div>
<div class="mb-6">
<label for="editUserDepartment" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
<select id="editUserDepartment" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
{% for dept in departments %}
<option value="{{ dept }}">{{ dept }}</option>
{% endfor %}
</select>
</div>
<div class="flex space-x-4">
<button onclick="saveDepartmentChanges()" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
保存修改
</button>
<button onclick="closeEditDepartmentModal()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
取消
</button>
</div>
</div>
</div>
</div>
<!-- 初始化密码弹窗 -->
<div id="resetPasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
<div class="bg-primary text-white p-4 flex justify-between items-center">
<h3 class="text-lg font-medium">初始化密码</h3>
<button onclick="closeResetPasswordModal()" class="text-white hover:text-gray-200 transition-colors">
<i class="fa fa-times"></i>
</button>
</div>
<div class="p-6">
<input type="hidden" id="resetUserId">
<input type="hidden" id="resetUsername">
<div class="mb-6">
<p class="text-gray-700 mb-2">确定要初始化用户 <span id="resetUserNameDisplay" class="font-medium"></span> 的密码吗？</p>
<p class="text-gray-500 text-sm">初始化后，密码将重置为默认值：<code class="bg-gray-100 px-1 py-0.5 rounded">default123</code></p>
</div>
<div class="flex space-x-4">
<button onclick="confirmResetPassword()" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
确定初始化
</button>
<button onclick="closeResetPasswordModal()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
取消
</button>
</div>
</div>
</div>
</div>
<!-- 用于存储弹窗数据的隐藏字段 -->
<input type="hidden" id="editUserId">
<input type="hidden" id="editUsername">
<input type="hidden" id="resetUserId">
<input type="hidden" id="resetUsername">
<!-- 部门选项数据 -->
<script id="departmentOptions" type="application/json">
[{% for dept in departments %}{{ dept | tojson }}{% if not loop.last %},{% endif %}{% endfor %}]
</script>
<!-- 安全转义函数 -->
<script>
// HTML转义函数，防止XSS攻击
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
</script>
<!-- 用户管理相关JavaScript -->
<script>
// 当前页码和每页显示数量
@@ -252,6 +160,7 @@
const pageSize = 10;
let totalUsers = 0;
let usersData = [];
let isLoading = false; // 添加加载状态标志
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
@@ -279,13 +188,32 @@
}
});
// 绑定模态框点击外部关闭事件
bindModalOutsideClick('editDepartmentModal');
bindModalOutsideClick('resetPasswordModal');
// 使用layui弹窗，不再需要绑定模态框点击外部关闭事件
});
// 加载用户列表
function loadUsers() {
if (isLoading) return;
isLoading = true;
// 显示加载状态
const loadingRow = document.getElementById('loadingRow');
if (loadingRow) {
loadingRow.classList.remove('hidden');
}
// 清空表格内容
const tableBody = document.getElementById('usersTableBody');
if (tableBody) {
// 只保留loadingRow元素
const children = Array.from(tableBody.children);
children.forEach(child => {
if (child.id !== 'loadingRow') {
tableBody.removeChild(child);
}
});
}
apiRequest('/api/users')
.then(data => {
if (data.success) {
@@ -299,13 +227,28 @@
.catch(error => {
console.error('加载用户列表时发生错误:', error);
showMessage('网络错误，请稍后重试', false);
})
.finally(() => {
isLoading = false;
// 隐藏加载状态
if (loadingRow) {
loadingRow.classList.add('hidden');
}
});
}
// 渲染用户表格
function renderUsersTable() {
const tableBody = document.getElementById('usersTableBody');
tableBody.innerHTML = '';
if (!tableBody) return;
// 清空表格内容，但保留loadingRow
const children = Array.from(tableBody.children);
children.forEach(child => {
if (child.id !== 'loadingRow') {
tableBody.removeChild(child);
}
});
// 计算当前页的用户数据
const startIndex = (currentPage - 1) * pageSize;
@@ -313,43 +256,56 @@
const currentUsers = usersData.slice(startIndex, endIndex);
// 更新分页信息
document.getElementById('startItem').textContent = startIndex + 1;
document.getElementById('endItem').textContent = endIndex;
document.getElementById('totalItems').textContent = totalUsers;
const startItemEl = document.getElementById('startItem');
const endItemEl = document.getElementById('endItem');
const totalItemsEl = document.getElementById('totalItems');
if (startItemEl) startItemEl.textContent = startIndex + 1;
if (endItemEl) endItemEl.textContent = endIndex;
if (totalItemsEl) totalItemsEl.textContent = totalUsers;
// 更新分页按钮状态
document.getElementById('prevPage').disabled = currentPage === 1;
document.getElementById('nextPage').disabled = currentPage === Math.ceil(totalUsers / pageSize);
const prevPageBtn = document.getElementById('prevPage');
const nextPageBtn = document.getElementById('nextPage');
if (prevPageBtn) prevPageBtn.disabled = currentPage === 1;
if (nextPageBtn) nextPageBtn.disabled = currentPage === Math.ceil(totalUsers / pageSize);
// 渲染用户行
currentUsers.forEach(user => {
currentUsers.forEach((user) => {
const row = document.createElement('tr');
row.className = 'table-hover';
// 状态样式
const statusClass = user.status === 'active' ? 'bg-success/10 text-success' : 'bg-error/10 text-error';
// 状态样式 - 使用layui风格
const statusClass = user.status === 'active' ? 'layui-bg-green' : 'layui-bg-red';
const statusText = user.status === 'active' ? '已启用' : '已禁用';
// 转义用户输入以防止XSS
const safeUsername = escapeHtml(user.username);
const safeName = escapeHtml(user.name);
const safeDepartment = escapeHtml(user.department);
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.username}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.name}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.department}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
<td>${safeUsername}</td>
<td>${safeName}</td>
<td>${safeDepartment}</td>
<td>
<span class="layui-badge ${statusClass}" style="padding: 0 10px;">
<i class="fa ${user.status === 'active' ? 'fa-check-circle mr-1' : 'fa-times-circle mr-1'}"></i>
${statusText}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button onclick="toggleUserStatus(${user.id}, '${user.username}', '${user.status}')"
class="text-primary hover:text-primary/80 mr-3">
<td>
<button onclick="toggleUserStatus(${user.id}, '${safeUsername}', '${user.status}')"
class="layui-btn layui-btn-xs layui-btn-primary">
<i class="fa ${user.status === 'active' ? 'fa-lock mr-1' : 'fa-unlock mr-1'}"></i>
${user.status === 'active' ? '禁用' : '启用'}
</button>
<button onclick="showEditDepartmentModal(${user.id}, '${user.username}', '${user.name}', '${user.department}')"
class="text-primary hover:text-primary/80 mr-3">
<button onclick="showEditDepartmentModal(${user.id}, '${safeUsername}', '${safeName}', '${safeDepartment}')"
class="layui-btn layui-btn-xs layui-btn-normal">
<i class="fa fa-building mr-1"></i>
修改部门
</button>
<button onclick="showResetPasswordModal(${user.id}, '${user.username}')"
class="text-primary hover:text-primary/80">
<button onclick="showResetPasswordModal(${user.id}, '${safeUsername}')"
class="layui-btn layui-btn-xs layui-btn-warm">
<i class="fa fa-key mr-1"></i>
初始化密码
</button>
</td>
@@ -358,13 +314,16 @@
tableBody.appendChild(row);
});
// 如果没有数据，显示空状态
// 如果没有数据，显示空状态 - 使用layUI风格
if (totalUsers === 0) {
const emptyRow = document.createElement('tr');
emptyRow.innerHTML = `
<td colspan="5" class="px-6 py-10 text-center text-gray-500">
<i class="fa fa-user-circle-o text-4xl mb-2 opacity-30"></i>
<p>暂无用户数据</p>
<td colspan="5" style="text-align: center; padding: 40px 0; color: #999;">
<div class="layui-none">
<i class="fa fa-user-circle-o text-5xl mb-4" style="opacity: 0.3;"></i>
<p class="layui-text" style="font-size: 16px;">暂无用户数据</p>
<p style="color: #ccc; margin-top: 10px;">请添加新用户或等待其他用户注册</p>
</div>
</td>
`;
tableBody.appendChild(emptyRow);
@@ -373,6 +332,15 @@
// 搜索用户
function searchUsers() {
if (isLoading) return;
const searchButton = document.getElementById('searchButton');
const originalText = searchButton.innerHTML;
isLoading = true;
searchButton.disabled = true;
searchButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 搜索中...';
const searchUsername = document.getElementById('searchUsername').value.toLowerCase().trim();
const filterDepartment = document.getElementById('filterDepartment').value;
const filterStatus = document.getElementById('filterStatus').value;
@@ -388,7 +356,7 @@
return matchesUsername && matchesDepartment && matchesStatus;
});
totalUsers = data.total;
totalUsers = usersData.length;
currentPage = 1; // 重置到第一页
renderUsersTable();
} else {
@@ -398,15 +366,24 @@
.catch(error => {
console.error('搜索用户时发生错误:', error);
showMessage('网络错误，请稍后重试', false);
})
.finally(() => {
isLoading = false;
searchButton.disabled = false;
searchButton.innerHTML = originalText;
});
}
// 切换用户状态
function toggleUserStatus(userId, username, currentStatus) {
if (isLoading) return;
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
const confirmMessage = `确定要${newStatus === 'active' ? '启用' : '禁用'}用户 ${username} 吗？`;
if (confirm(confirmMessage)) {
isLoading = true;
apiRequest('{{ url_for('user.update_user_status') }}', 'POST', {
user_id: userId,
status: newStatus
@@ -426,40 +403,102 @@
.catch(error => {
console.error('更新用户状态时发生错误:', error);
showMessage('网络错误，请稍后重试', false);
})
.finally(() => {
isLoading = false;
});
}
}
// 显示修改部门弹窗
// 显示修改部门弹窗（使用layui）
function showEditDepartmentModal(userId, username, name, department) {
// 存储用户数据
document.getElementById('editUserId').value = userId;
document.getElementById('editUsername').value = username;
document.getElementById('editUserName').value = username;
document.getElementById('editUserRealName').value = name;
// 设置当前部门
const departmentSelect = document.getElementById('editUserDepartment');
for (let i = 0; i < departmentSelect.options.length; i++) {
if (departmentSelect.options[i].value === department) {
departmentSelect.selectedIndex = i;
break;
// 获取部门选项
const departments = JSON.parse(document.getElementById('departmentOptions').textContent);
let departmentOptionsHtml = '';
departments.forEach(dept => {
const selected = dept === department ? 'selected' : '';
departmentOptionsHtml += `<option value="${dept}" ${selected}>${dept}</option>`;
});
// 创建美化后的弹窗内容 - 参照初始化密码弹窗样式
const content = `
<div class="layui-text">
<!-- 表单主体 - 使用layUI风格 -->
<form class="layui-form" style="padding: 20px;">
<!-- 用户名列 -->
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block" style="max-width: 300px;">
<input type="text" value="${username}" readonly class="layui-input layui-disabled">
</div>
</div>
<!-- 姓名列 -->
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block" style="max-width: 300px;">
<input type="text" id="layuiEditName" value="${name}" class="layui-input" lay-affix="clear">
</div>
</div>
<!-- 部门选择 -->
<div class="layui-form-item">
<label class="layui-form-label">部门</label>
<div class="layui-input-block" style="max-width: 300px;">
<input type="text" id="layuiEditDepartment" value="${department}" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux" style="color: #666; margin-top: 5px;">输入新的部门名称后点击保存</div>
</div>
</form>
</div>
`;
// 打开美化后的layui弹窗 - 参照初始化密码弹窗样式
layer.open({
type: 1,
title: '<i class="fa fa-building-o"></i> 修改部门信息',
area: ['500px', '380px'],
offset: '10%',
shade: 0.3,
shadeClose: false,
anim: 2,
content: content,
btn: ['保存修改', '取消'],
btnAlign: 'c',
btnClass: ['layui-btn layui-btn-normal', 'layui-btn layui-btn-primary'],
skin: 'layui-layer-molv',
success: function(layero, index) {
// 确保部门输入框在弹窗中可以正常交互
const inputElement = layero.find('#layuiEditDepartment')[0];
if (inputElement) {
// 移除可能阻止交互的属性
inputElement.removeAttribute('disabled');
inputElement.style.pointerEvents = 'auto';
// 聚焦到输入框
inputElement.focus();
}
},
btn1: function(index, layero) {
const newDepartment = document.getElementById('layuiEditDepartment').value;
// 获取修改后的姓名值
const newName = layero.find('input[type="text"]')[1].value;
saveDepartmentChanges(userId, username, newName, newDepartment, index);
},
btn2: function(index, layero) {
layer.close(index);
return false;
}
}
});
showModal('editDepartmentModal');
}
// 关闭修改部门弹窗
function closeEditDepartmentModal() {
document.getElementById('editDepartmentModal').classList.add('hidden');
}
// 保存部门修改
function saveDepartmentChanges() {
const userId = document.getElementById('editUserId').value;
const username = document.getElementById('editUsername').value;
const newDepartment = document.getElementById('editUserDepartment').value;
// 保存部门和姓名修改
function saveDepartmentChanges(userId, username, newName, newDepartment, layerIndex) {
fetch('{{ url_for('user.update_user_department') }}', {
method: 'POST',
headers: {
@@ -467,44 +506,73 @@
},
body: JSON.stringify({
user_id: userId,
name: newName,
department: newDepartment
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showMessage(data.message || '部门信息更新成功', true);
closeModal('editDepartmentModal');
loadUsers(); // 重新加载用户列表
} else {
showMessage(data.error || '部门信息更新失败', false);
}
})
.catch(error => {
console.error('更新部门信息时发生错误:', error);
showMessage('网络错误，请稍后重试', false);
if (data.success) {
// 关闭弹窗
layer.close(layerIndex);
// 显示成功消息，带图标和动画效果
layer.msg(data.message || '部门信息更新成功', {
icon: 1,
anim: 0,
time: 2000,
end: function() {
// 重新加载用户列表
loadUsers();
}
});
} else {
// 显示错误消息，带图标和动画效果
layer.msg(data.error || '部门信息更新失败', {
icon: 5,
anim: 6,
time: 2000
});
}
})
.catch(error => {
console.error('更新部门信息时发生错误:', error);
// 显示网络错误消息，带图标和动画效果
layer.msg('网络错误，请稍后重试', {
icon: 5,
anim: 6,
time: 2000
});
});
}
// 显示初始化密码弹窗
// 显示初始化密码弹窗（使用layui）
function showResetPasswordModal(userId, username) {
// 存储用户数据
document.getElementById('resetUserId').value = userId;
document.getElementById('resetUsername').value = username;
document.getElementById('resetUserNameDisplay').textContent = username;
document.getElementById('resetPasswordModal').classList.remove('hidden');
}
// 关闭初始化密码弹窗
function closeResetPasswordModal() {
document.getElementById('resetPasswordModal').classList.add('hidden');
// 打开layui确认弹窗
layer.confirm(
`<div class="layui-text">
<p>确定要初始化用户 <span style="font-weight: 500;">${username}</span> 的密码吗？</p>
<p style="color: #666; margin-top: 10px;">初始化后，密码将重置为默认值：<code class="layui-code">default123</code></p>
</div>`,
{
title: '初始化密码',
btn: ['确定初始化', '取消'],
area: ['450px', '200px'],
btn1: function(index) {
confirmResetPassword(userId, username, index);
},
skin: 'layui-layer-molv'
}
);
}
// 确认初始化密码
function confirmResetPassword() {
const userId = document.getElementById('resetUserId').value;
const username = document.getElementById('resetUsername').value;
function confirmResetPassword(userId, username, layerIndex) {
fetch('{{ url_for('user.reset_user_password') }}', {
method: 'POST',
headers: {
@@ -517,24 +585,18 @@
})
.then(response => response.json())
.then(data => {
if (data.success) {
showMessage(data.message || '密码初始化成功', true);
closeModal('resetPasswordModal');
} else {
showMessage(data.error || '密码初始化失败', false);
}
})
.catch(error => {
console.error('初始化密码时发生错误:', error);
showMessage('网络错误，请稍后重试', false);
});
if (data.success) {
showMessage(data.message || '密码初始化成功', true);
layer.close(layerIndex); // 关闭弹窗
} else {
showMessage(data.error || '密码初始化失败', false);
}
})
.catch(error => {
console.error('初始化密码时发生错误:', error);
showMessage('网络错误，请稍后重试', false);
});
}
</script>
</body>
</html>