用户系统
This commit is contained in:
@@ -35,6 +35,9 @@
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header:before {
|
||||
@@ -62,6 +65,51 @@
|
||||
text-shadow: 0 0 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.user-info .username {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.user-info .permission-badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-info .permission-badge.admin {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.user-info .permission-badge.user {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
height: calc(100vh - 60px);
|
||||
@@ -152,6 +200,15 @@
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1><span>紫金</span> 稷下薪火·云枢智海师生成果共创系统</h1>
|
||||
<div class="user-info">
|
||||
<span class="username">{{ session.username }}</span>
|
||||
{% if session.permission == 0 %}
|
||||
<span class="permission-badge admin">管理员</span>
|
||||
{% elif session.permission == 1 %}
|
||||
<span class="permission-badge user">普通用户</span>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('logout') }}" class="logout-btn">登出</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
@@ -161,12 +218,53 @@
|
||||
<a href="{{ url_for('results_page') }}" {% if request.endpoint == 'results_page' %}class="active"{% endif %}>
|
||||
<i>📈</i> 查询统计
|
||||
</a>
|
||||
<a href="{{ url_for('my_data') }}" {% if request.endpoint == 'my_data' or request.endpoint == 'edit_entry' %}class="active"{% endif %}>
|
||||
<i>📋</i> 我的数据
|
||||
</a>
|
||||
{% if session.permission == 0 %}
|
||||
<a href="{{ url_for('show_all') }}" {% if request.endpoint == 'show_all' %}class="active"{% endif %}>
|
||||
<i>📁</i> 数据操作
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('profile') }}" {% if request.endpoint == 'profile' %}class="active"{% endif %}>
|
||||
<i>⚙️</i> 个人设置
|
||||
</a>
|
||||
{% if session.permission == 0 %}
|
||||
<a href="{{ url_for('user_management') }}" {% if request.endpoint == 'user_management' or request.endpoint == 'register' %}class="active"{% endif %}>
|
||||
<i>👥</i> 用户管理
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<!-- Flash消息显示 -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="flash-messages" style="margin-bottom: 20px;">
|
||||
{% for category, message in messages %}
|
||||
<div class="flash-message {{ category }}" style="padding: 10px; border-radius: 5px; margin-bottom: 10px;">{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<style>
|
||||
.flash-message.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
.flash-message.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
.flash-message.info {
|
||||
background-color: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
316
templates/edit.html
Normal file
316
templates/edit.html
Normal file
@@ -0,0 +1,316 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}编辑数据{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="edit-container">
|
||||
<div class="edit-header">
|
||||
<h1>编辑数据</h1>
|
||||
<p>修改您的数据信息</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" class="edit-form" id="editForm">
|
||||
<!-- 隐藏字段 -->
|
||||
<input type="hidden" name="_id" value="{{ data._id }}">
|
||||
<input type="hidden" name="image" value="{{ data.image }}">
|
||||
|
||||
<!-- 图片显示 -->
|
||||
{% if data.image %}
|
||||
<div class="image-preview">
|
||||
<h3>关联图片</h3>
|
||||
<img src="{{ url_for('serve_image', filename=data.image) }}" alt="数据图片" onclick="openImageModal('{{ url_for('serve_image', filename=data.image) }}')">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- 数据字段编辑 -->
|
||||
<div class="fields-container">
|
||||
<h3>数据字段</h3>
|
||||
{% for key, value in data.items() %}
|
||||
{% if key not in ['_id', 'image', 'user_id'] %}
|
||||
<div class="form-group">
|
||||
<label for="{{ key }}">{{ key }}:</label>
|
||||
<input type="text" id="{{ key }}" name="{{ key }}" value="{{ value }}" class="form-input">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="icon">💾</i>
|
||||
保存修改
|
||||
</button>
|
||||
<a href="{{ url_for('my_data') }}" class="btn btn-secondary">
|
||||
<i class="icon">↩️</i>
|
||||
取消
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 图片预览模态框 -->
|
||||
<div id="imageModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeImageModal()">×</span>
|
||||
<img id="modalImage" src="" alt="图片预览">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.edit-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.edit-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 30px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.edit-header h1 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.edit-header p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-preview h3 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.image-preview img {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.image-preview img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.fields-container {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fields-container h3 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 25px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#modalImage {
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.edit-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 图片预览功能
|
||||
function openImageModal(imageSrc) {
|
||||
document.getElementById('modalImage').src = imageSrc;
|
||||
document.getElementById('imageModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeImageModal() {
|
||||
document.getElementById('imageModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// 点击模态框外部关闭
|
||||
window.onclick = function(event) {
|
||||
const imageModal = document.getElementById('imageModal');
|
||||
if (event.target === imageModal) {
|
||||
closeImageModal();
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
document.getElementById('editForm').addEventListener('submit', function(e) {
|
||||
const inputs = this.querySelectorAll('.form-input');
|
||||
let hasEmptyFields = false;
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (!input.value.trim()) {
|
||||
hasEmptyFields = true;
|
||||
input.style.borderColor = '#dc3545';
|
||||
} else {
|
||||
input.style.borderColor = '#e9ecef';
|
||||
}
|
||||
});
|
||||
|
||||
if (hasEmptyFields) {
|
||||
e.preventDefault();
|
||||
alert('请填写所有字段！');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// 输入时清除错误状态
|
||||
document.querySelectorAll('.form-input').forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
if (this.value.trim()) {
|
||||
this.style.borderColor = '#e9ecef';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -20,72 +20,255 @@
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="result" class="mt-4"></div>
|
||||
<!-- 编辑确认区域 -->
|
||||
<div id="edit-section" class="mt-4" style="display: none;">
|
||||
<div class="card">
|
||||
<h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
|
||||
<i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
|
||||
</h3>
|
||||
<p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
|
||||
|
||||
<form id="edit-form">
|
||||
<div id="edit-fields"></div>
|
||||
<div class="mt-4 text-center">
|
||||
<button type="button" id="confirm-btn" class="btn btn-success btn-lg">
|
||||
<i class="fas fa-check"></i> 确认录入
|
||||
</button>
|
||||
<button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
|
||||
<i class="fas fa-times"></i> 取消
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentData = null;
|
||||
let currentImage = null;
|
||||
|
||||
document.getElementById("upload-form").addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
let formData = new FormData(this);
|
||||
const resultDiv = document.getElementById("result");
|
||||
const editSection = document.getElementById("edit-section");
|
||||
|
||||
// 显示上传进度动画
|
||||
resultDiv.innerHTML = `
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar"></div>
|
||||
<p class="progress-text">正在处理图片，请稍候...</p>
|
||||
editSection.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar"></div>
|
||||
<p class="progress-text">正在处理图片，请稍候...</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
editSection.style.display = "block";
|
||||
|
||||
fetch("/upload", { method: "POST", body: formData })
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.error) {
|
||||
resultDiv.innerHTML = `
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
|
||||
editSection.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
const resultHtml = `
|
||||
<div class="result-card">
|
||||
<div class="result-header">
|
||||
<h3><i class="fas fa-check-circle"></i> 识别成功</h3>
|
||||
<p class="timestamp">${new Date().toLocaleString()}</p>
|
||||
</div>
|
||||
<div class="result-content">
|
||||
${Object.entries(data.data).map(([key, value]) => `
|
||||
<div class="result-item">
|
||||
<span class="result-label">${key.replace(/_/g, ' ')}</span>
|
||||
<span class="result-value">${value}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
<div class="result-footer">
|
||||
<p class="success-message">${data.message}</p>
|
||||
<button class="btn btn-outline-primary copy-btn" data-clipboard-text="${JSON.stringify(data.data)}">
|
||||
<i class="fas fa-copy"></i> 复制结果
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
resultDiv.innerHTML = resultHtml;
|
||||
|
||||
// 添加复制按钮功能
|
||||
document.querySelector('.copy-btn').addEventListener('click', function() {
|
||||
navigator.clipboard.writeText(this.getAttribute('data-clipboard-text'));
|
||||
alert('结果已复制到剪贴板！');
|
||||
});
|
||||
// 存储当前数据
|
||||
currentData = data.data;
|
||||
currentImage = data.image;
|
||||
|
||||
// 生成编辑表单
|
||||
generateEditForm(data.data);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
resultDiv.innerHTML = `
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
|
||||
editSection.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
});
|
||||
|
||||
function generateEditForm(data) {
|
||||
const editSection = document.getElementById("edit-section");
|
||||
let fieldsHtml = "";
|
||||
|
||||
Object.entries(data).forEach(([key, value], index) => {
|
||||
fieldsHtml += `
|
||||
<div class="field-row mb-3">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">字段名</label>
|
||||
<input type="text" class="form-control field-name" value="${key}" data-original-key="${key}">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">数据值</label>
|
||||
<input type="text" class="form-control field-value" value="${value}">
|
||||
</div>
|
||||
<div class="col-md-2 d-flex align-items-end">
|
||||
<button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
editSection.innerHTML = `
|
||||
<div class="card">
|
||||
<h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
|
||||
<i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
|
||||
</h3>
|
||||
<p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
|
||||
|
||||
<form id="edit-form">
|
||||
<div id="edit-fields">
|
||||
${fieldsHtml}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<button type="button" id="add-field-btn" class="btn btn-outline-primary">
|
||||
<i class="fas fa-plus"></i> 添加字段
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<button type="button" id="confirm-btn" class="btn btn-success btn-lg">
|
||||
<i class="fas fa-check"></i> 确认录入
|
||||
</button>
|
||||
<button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
|
||||
<i class="fas fa-times"></i> 取消
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 绑定删除按钮事件
|
||||
document.querySelectorAll('.delete-field').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
this.closest('.field-row').remove();
|
||||
});
|
||||
});
|
||||
|
||||
// 绑定添加字段按钮事件
|
||||
document.getElementById('add-field-btn').addEventListener('click', function() {
|
||||
const editFields = document.getElementById('edit-fields');
|
||||
const newFieldHtml = `
|
||||
<div class="field-row mb-3">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">字段名</label>
|
||||
<input type="text" class="form-control field-name" value="" data-original-key="">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">数据值</label>
|
||||
<input type="text" class="form-control field-value" value="">
|
||||
</div>
|
||||
<div class="col-md-2 d-flex align-items-end">
|
||||
<button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
editFields.insertAdjacentHTML('beforeend', newFieldHtml);
|
||||
|
||||
// 为新添加的删除按钮绑定事件
|
||||
const newDeleteBtn = editFields.lastElementChild.querySelector('.delete-field');
|
||||
newDeleteBtn.addEventListener('click', function() {
|
||||
this.closest('.field-row').remove();
|
||||
});
|
||||
});
|
||||
|
||||
// 绑定确认和取消按钮事件
|
||||
bindConfirmCancelEvents();
|
||||
}
|
||||
|
||||
function bindConfirmCancelEvents() {
|
||||
// 确认录入按钮事件
|
||||
document.getElementById("confirm-btn").addEventListener("click", function() {
|
||||
const fieldRows = document.querySelectorAll('.field-row');
|
||||
const editedData = {};
|
||||
|
||||
// 收集编辑后的数据
|
||||
fieldRows.forEach(row => {
|
||||
const fieldName = row.querySelector('.field-name').value.trim();
|
||||
const fieldValue = row.querySelector('.field-value').value.trim();
|
||||
if (fieldName && fieldValue) {
|
||||
editedData[fieldName] = fieldValue;
|
||||
}
|
||||
});
|
||||
|
||||
if (Object.keys(editedData).length === 0) {
|
||||
alert('请至少保留一个有效的字段！');
|
||||
return;
|
||||
}
|
||||
|
||||
// 发送确认请求
|
||||
fetch("/confirm", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
data: editedData,
|
||||
image: currentImage
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const editSection = document.getElementById("edit-section");
|
||||
|
||||
if(data.error) {
|
||||
editSection.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-circle"></i> 录入失败: ${data.error}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
editSection.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="alert alert-success">
|
||||
<i class="fas fa-check-circle"></i> ${data.message}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
// 重置表单
|
||||
document.getElementById("upload-form").reset();
|
||||
// 3秒后隐藏成功消息
|
||||
setTimeout(() => {
|
||||
editSection.style.display = "none";
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
const editSection = document.getElementById("edit-section");
|
||||
editSection.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-circle"></i> 录入失败: ${error}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
});
|
||||
|
||||
// 取消按钮事件
|
||||
document.getElementById("cancel-btn").addEventListener("click", function() {
|
||||
const editSection = document.getElementById("edit-section");
|
||||
editSection.style.display = "none";
|
||||
currentData = null;
|
||||
currentImage = null;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -222,6 +405,12 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info-message {
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 1px solid var(--primary);
|
||||
color: var(--primary);
|
||||
@@ -234,5 +423,195 @@
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, #28a745, #20c997);
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
padding: 12px 24px;
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: linear-gradient(135deg, #20c997, #28a745);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, #6c757d, #495057);
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
padding: 12px 24px;
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: linear-gradient(135deg, #495057, #6c757d);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #c82333;
|
||||
border-color: #bd2130;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
background-color: transparent;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #721c24;
|
||||
background-color: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border-left: 4px solid #28a745;
|
||||
}
|
||||
|
||||
#edit-section .card {
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e0e0e0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.field-row:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.col-md-4, .col-md-6, .col-md-2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.col-md-2 {
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%;
|
||||
}
|
||||
|
||||
.col-md-4 {
|
||||
flex: 0 0 33.333333%;
|
||||
max-width: 33.333333%;
|
||||
}
|
||||
|
||||
.col-md-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.align-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.col-md-2, .col-md-4, .col-md-6 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.field-row .row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
162
templates/login.html
Normal file
162
templates/login.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>用户登录 - 成果录入系统</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.flash-messages {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.flash-message.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.flash-message.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.flash-message.info {
|
||||
background-color: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<h1>用户登录</h1>
|
||||
<p>成果录入系统</p>
|
||||
</div>
|
||||
|
||||
<!-- Flash消息显示 -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="flash-messages">
|
||||
{% for category, message in messages %}
|
||||
<div class="flash-message {{ category }}">{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<form method="POST">
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn">登录</button>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">
|
||||
<p>默认管理员账号：admin / admin</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
486
templates/my_data.html
Normal file
486
templates/my_data.html
Normal file
@@ -0,0 +1,486 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}我的数据{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content-header">
|
||||
<h1>我的数据</h1>
|
||||
<p>查看和管理您录入的所有数据</p>
|
||||
</div>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-container">
|
||||
<form method="GET" action="{{ url_for('my_data') }}" class="search-form">
|
||||
<div class="search-input-group">
|
||||
<input type="text" name="keyword" value="{{ keyword }}" placeholder="搜索我的数据..." class="search-input">
|
||||
<button type="submit" class="search-btn">
|
||||
<i class="search-icon">🔍</i>
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% if keyword %}
|
||||
<div class="search-info">
|
||||
<span>搜索关键词: "{{ keyword }}"</span>
|
||||
<a href="{{ url_for('my_data') }}" class="clear-search">清除搜索</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 数据统计 -->
|
||||
<div class="data-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">{{ data|length }}</span>
|
||||
<span class="stat-label">条记录</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据列表 -->
|
||||
<div class="data-container">
|
||||
{% if data %}
|
||||
<div class="data-grid">
|
||||
{% for item in data %}
|
||||
<div class="data-card">
|
||||
<!-- 图片显示 -->
|
||||
{% if item.image %}
|
||||
<div class="card-image">
|
||||
<img src="{{ url_for('serve_image', filename=item.image) }}" alt="数据图片" onclick="openImageModal('{{ url_for('serve_image', filename=item.image) }}')">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- 数据内容 -->
|
||||
<div class="card-content">
|
||||
{% for key, value in item.items() %}
|
||||
{% if key not in ['_id', 'image', 'user_id'] %}
|
||||
<div class="data-field">
|
||||
<span class="field-label">{{ key }}:</span>
|
||||
<span class="field-value">{{ value }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="card-actions">
|
||||
<a href="{{ url_for('edit_entry', doc_id=item._id) }}" class="btn btn-edit">
|
||||
<i class="icon">✏️</i>
|
||||
编辑
|
||||
</a>
|
||||
<button onclick="confirmDelete('{{ item._id }}')" class="btn btn-delete">
|
||||
<i class="icon">🗑️</i>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📝</div>
|
||||
<h3>暂无数据</h3>
|
||||
<p>{% if keyword %}没有找到匹配 "{{ keyword }}" 的数据{% else %}您还没有录入任何数据{% endif %}</p>
|
||||
<a href="{{ url_for('index') }}" class="btn btn-primary">开始录入数据</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 图片预览模态框 -->
|
||||
<div id="imageModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeImageModal()">×</span>
|
||||
<img id="modalImage" src="" alt="图片预览">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除确认模态框 -->
|
||||
<div id="deleteModal" class="modal">
|
||||
<div class="modal-content modal-small">
|
||||
<h3>确认删除</h3>
|
||||
<p>您确定要删除这条数据吗？此操作不可撤销。</p>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeDeleteModal()" class="btn btn-secondary">取消</button>
|
||||
<form id="deleteForm" method="POST" style="display: inline;">
|
||||
<button type="submit" class="btn btn-danger">确认删除</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content-header {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-header h1 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content-header p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 12px 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.search-info {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.clear-search:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.data-stats {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.data-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.data-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.data-card:hover {
|
||||
border-color: #667eea;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card-image img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-top: 1px solid #e9ecef;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background: #218838;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #c82333;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 16px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-small {
|
||||
max-width: 400px;
|
||||
margin: 15% auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 25px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#modalImage {
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.data-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 图片预览功能
|
||||
function openImageModal(imageSrc) {
|
||||
document.getElementById('modalImage').src = imageSrc;
|
||||
document.getElementById('imageModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeImageModal() {
|
||||
document.getElementById('imageModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// 删除确认功能
|
||||
function confirmDelete(docId) {
|
||||
document.getElementById('deleteForm').action = '/delete/' + docId;
|
||||
document.getElementById('deleteModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
document.getElementById('deleteModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// 点击模态框外部关闭
|
||||
window.onclick = function(event) {
|
||||
const imageModal = document.getElementById('imageModal');
|
||||
const deleteModal = document.getElementById('deleteModal');
|
||||
|
||||
if (event.target === imageModal) {
|
||||
closeImageModal();
|
||||
}
|
||||
if (event.target === deleteModal) {
|
||||
closeDeleteModal();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
538
templates/profile.html
Normal file
538
templates/profile.html
Normal file
@@ -0,0 +1,538 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}个人设置{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content-header">
|
||||
<h1>个人设置</h1>
|
||||
<p>管理您的个人信息和账户设置</p>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息卡片 -->
|
||||
<div class="card">
|
||||
<h3 style="margin-bottom: 20px; color: var(--primary); font-size: 18px;">
|
||||
<i style="margin-right: 8px;">👤</i>
|
||||
用户信息
|
||||
</h3>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">用户名:</span>
|
||||
<span class="info-value">{{ session.username }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">权限级别:</span>
|
||||
<span class="permission-badge {{ 'admin' if session.permission == 0 else 'user' }}">
|
||||
{{ '管理员' if session.permission == 0 else '普通用户' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码卡片 -->
|
||||
<div class="card">
|
||||
<h3 style="margin-bottom: 20px; color: var(--primary); font-size: 18px;">
|
||||
<i style="margin-right: 8px;">🔒</i>
|
||||
修改密码
|
||||
</h3>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ 'success' if category == 'success' else 'error' }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<form method="POST" action="{{ url_for('change_own_password') }}" class="password-form" id="passwordForm">
|
||||
<div class="form-group">
|
||||
<label for="old_password">当前密码:</label>
|
||||
<input type="password" id="old_password" name="old_password" required class="form-input">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="new_password">新密码:</label>
|
||||
<input type="password" id="new_password" name="new_password" required class="form-input" minlength="6">
|
||||
<small class="form-help">密码长度至少6位</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">确认新密码:</label>
|
||||
<input type="password" id="confirm_password" name="confirm_password" required class="form-input">
|
||||
<small class="form-help" id="password-match-msg"></small>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" id="submitBtn">
|
||||
<i style="margin-right: 5px;">💾</i>
|
||||
修改密码
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.content-header h1 {
|
||||
color: var(--primary);
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-header p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.permission-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.permission-badge.admin {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.permission-badge.user {
|
||||
background: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
|
||||
}
|
||||
|
||||
.form-help {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--secondary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.password-form {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const newPassword = document.getElementById('new_password');
|
||||
const confirmPassword = document.getElementById('confirm_password');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const matchMsg = document.getElementById('password-match-msg');
|
||||
|
||||
function checkPasswordMatch() {
|
||||
if (confirmPassword.value === '') {
|
||||
matchMsg.textContent = '';
|
||||
matchMsg.style.color = '#666';
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.value === confirmPassword.value) {
|
||||
matchMsg.textContent = '✓ 密码匹配';
|
||||
matchMsg.style.color = '#28a745';
|
||||
submitBtn.disabled = false;
|
||||
} else {
|
||||
matchMsg.textContent = '✗ 密码不匹配';
|
||||
matchMsg.style.color = '#dc3545';
|
||||
submitBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
newPassword.addEventListener('input', checkPasswordMatch);
|
||||
confirmPassword.addEventListener('input', checkPasswordMatch);
|
||||
|
||||
// 表单验证
|
||||
document.getElementById('passwordForm').addEventListener('submit', function(e) {
|
||||
if (newPassword.value !== confirmPassword.value) {
|
||||
e.preventDefault();
|
||||
alert('新密码和确认密码不匹配！');
|
||||
}
|
||||
|
||||
if (newPassword.value.length < 6) {
|
||||
e.preventDefault();
|
||||
alert('密码长度至少6位！');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
.permission-admin {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.permission-user {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
background: white;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.password-form h3 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.flash-messages {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.flash-success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.flash-info {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
}
|
||||
|
||||
.navigation-links {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
margin: 0 15px;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #764ba2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.profile-container {
|
||||
padding: 30px 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.profile-header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="profile-container">
|
||||
<!-- Flash Messages -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="flash-messages">
|
||||
{% for category, message in messages %}
|
||||
<div class="flash-message flash-{{ category }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="profile-header">
|
||||
<h1>个人设置</h1>
|
||||
<p>管理您的账户信息和密码</p>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息显示 -->
|
||||
<div class="user-info">
|
||||
<h3>账户信息</h3>
|
||||
<div class="info-item">
|
||||
<span class="info-label">用户名:</span>
|
||||
<span class="info-value">{{ session.user_id }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">权限级别:</span>
|
||||
<span class="permission-badge {{ 'permission-admin' if session.permission == 0 else 'permission-user' }}">
|
||||
{{ '管理员' if session.permission == 0 else '普通用户' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码表单 -->
|
||||
<form method="POST" action="{{ url_for('change_own_password') }}" class="password-form" id="passwordForm">
|
||||
<h3>修改密码</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="old_password">当前密码:</label>
|
||||
<input type="password" id="old_password" name="old_password" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="new_password">新密码:</label>
|
||||
<input type="password" id="new_password" name="new_password" required minlength="6">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">确认新密码:</label>
|
||||
<input type="password" id="confirm_password" name="confirm_password" required minlength="6">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">更新密码</button>
|
||||
</form>
|
||||
|
||||
<!-- 导航链接 -->
|
||||
<div class="navigation-links">
|
||||
<a href="{{ url_for('index') }}" class="nav-link">返回首页</a>
|
||||
<a href="{{ url_for('my_data') }}" class="nav-link">我的数据</a>
|
||||
{% if session.permission == 0 %}
|
||||
<a href="{{ url_for('user_management') }}" class="nav-link">用户管理</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 密码确认验证
|
||||
document.getElementById('passwordForm').addEventListener('submit', function(e) {
|
||||
const newPassword = document.getElementById('new_password').value;
|
||||
const confirmPassword = document.getElementById('confirm_password').value;
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
e.preventDefault();
|
||||
alert('新密码和确认密码不一致，请重新输入！');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
e.preventDefault();
|
||||
alert('新密码长度至少6位！');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// 输入实时验证
|
||||
document.getElementById('confirm_password').addEventListener('input', function() {
|
||||
const newPassword = document.getElementById('new_password').value;
|
||||
const confirmPassword = this.value;
|
||||
|
||||
if (confirmPassword && newPassword !== confirmPassword) {
|
||||
this.style.borderColor = '#dc3545';
|
||||
this.style.background = '#fff5f5';
|
||||
} else {
|
||||
this.style.borderColor = '#e9ecef';
|
||||
this.style.background = '#f8f9fa';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
440
templates/register.html
Normal file
440
templates/register.html
Normal file
@@ -0,0 +1,440 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}注册新用户{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="register-container">
|
||||
<div class="register-card">
|
||||
<div class="register-header">
|
||||
<h1>注册新用户</h1>
|
||||
<p>创建新的系统用户账户</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" class="register-form">
|
||||
<div class="form-group">
|
||||
<label for="username">
|
||||
<i class="fas fa-user"></i>
|
||||
用户名
|
||||
</label>
|
||||
<input type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
minlength="3"
|
||||
maxlength="20"
|
||||
placeholder="请输入用户名（3-20个字符）">
|
||||
<small class="form-text">用户名长度为3-20个字符，只能包含字母、数字和下划线</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">
|
||||
<i class="fas fa-lock"></i>
|
||||
密码
|
||||
</label>
|
||||
<input type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
minlength="6"
|
||||
placeholder="请输入密码（至少6位）">
|
||||
<small class="form-text">密码长度至少6位，建议包含字母和数字</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">
|
||||
<i class="fas fa-lock"></i>
|
||||
确认密码
|
||||
</label>
|
||||
<input type="password"
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
required
|
||||
minlength="6"
|
||||
placeholder="请再次输入密码">
|
||||
<small class="form-text">请再次输入相同的密码进行确认</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="permission">
|
||||
<i class="fas fa-user-cog"></i>
|
||||
权限级别
|
||||
</label>
|
||||
<select id="permission" name="permission" required>
|
||||
<option value="">请选择权限级别</option>
|
||||
<option value="1">普通用户 - 可以录入和查询数据</option>
|
||||
<option value="0">管理员 - 拥有所有权限</option>
|
||||
</select>
|
||||
<small class="form-text">
|
||||
<strong>普通用户：</strong>可以上传图片、录入数据、查询数据<br>
|
||||
<strong>管理员：</strong>拥有所有权限，包括用户管理和数据管理
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-user-plus"></i>
|
||||
创建用户
|
||||
</button>
|
||||
<a href="{{ url_for('user_management') }}" class="btn btn-secondary">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
返回用户管理
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.register-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 200px);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.register-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.register-header h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.register-header p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group label i {
|
||||
margin-right: 8px;
|
||||
color: #007bff;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
|
||||
}
|
||||
|
||||
.form-group input:invalid {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.form-group input:valid {
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,123,255,0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #545b62;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(108,117,125,0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.register-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 密码强度指示器 */
|
||||
.password-strength {
|
||||
margin-top: 5px;
|
||||
height: 4px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.password-strength-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.strength-weak {
|
||||
background-color: #dc3545;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.strength-medium {
|
||||
background-color: #ffc107;
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
.strength-strong {
|
||||
background-color: #28a745;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 表单验证样式 */
|
||||
.form-group.error input,
|
||||
.form-group.error select {
|
||||
border-color: #dc3545;
|
||||
box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
|
||||
}
|
||||
|
||||
.form-group.success input,
|
||||
.form-group.success select {
|
||||
border-color: #28a745;
|
||||
box-shadow: 0 0 0 3px rgba(40,167,69,0.1);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #dc3545;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
color: #28a745;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 表单验证
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.querySelector('.register-form');
|
||||
const username = document.getElementById('username');
|
||||
const password = document.getElementById('password');
|
||||
const confirmPassword = document.getElementById('confirm_password');
|
||||
const permission = document.getElementById('permission');
|
||||
|
||||
// 用户名验证
|
||||
username.addEventListener('input', function() {
|
||||
const value = this.value;
|
||||
const formGroup = this.closest('.form-group');
|
||||
|
||||
if (value.length < 3) {
|
||||
setFieldError(formGroup, '用户名至少需要3个字符');
|
||||
} else if (value.length > 20) {
|
||||
setFieldError(formGroup, '用户名不能超过20个字符');
|
||||
} else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
|
||||
setFieldError(formGroup, '用户名只能包含字母、数字和下划线');
|
||||
} else {
|
||||
setFieldSuccess(formGroup, '用户名格式正确');
|
||||
}
|
||||
});
|
||||
|
||||
// 密码验证
|
||||
password.addEventListener('input', function() {
|
||||
const value = this.value;
|
||||
const formGroup = this.closest('.form-group');
|
||||
|
||||
if (value.length < 6) {
|
||||
setFieldError(formGroup, '密码至少需要6个字符');
|
||||
} else {
|
||||
setFieldSuccess(formGroup, '密码长度符合要求');
|
||||
}
|
||||
|
||||
// 检查确认密码
|
||||
if (confirmPassword.value) {
|
||||
validateConfirmPassword();
|
||||
}
|
||||
});
|
||||
|
||||
// 确认密码验证
|
||||
confirmPassword.addEventListener('input', validateConfirmPassword);
|
||||
|
||||
function validateConfirmPassword() {
|
||||
const formGroup = confirmPassword.closest('.form-group');
|
||||
|
||||
if (confirmPassword.value !== password.value) {
|
||||
setFieldError(formGroup, '两次输入的密码不一致');
|
||||
} else if (confirmPassword.value.length >= 6) {
|
||||
setFieldSuccess(formGroup, '密码确认正确');
|
||||
}
|
||||
}
|
||||
|
||||
// 权限选择验证
|
||||
permission.addEventListener('change', function() {
|
||||
const formGroup = this.closest('.form-group');
|
||||
|
||||
if (this.value === '') {
|
||||
setFieldError(formGroup, '请选择权限级别');
|
||||
} else {
|
||||
setFieldSuccess(formGroup, '权限级别已选择');
|
||||
}
|
||||
});
|
||||
|
||||
// 表单提交验证
|
||||
form.addEventListener('submit', function(e) {
|
||||
let isValid = true;
|
||||
|
||||
// 验证用户名
|
||||
if (username.value.length < 3 || username.value.length > 20 || !/^[a-zA-Z0-9_]+$/.test(username.value)) {
|
||||
isValid = false;
|
||||
setFieldError(username.closest('.form-group'), '用户名格式不正确');
|
||||
}
|
||||
|
||||
// 验证密码
|
||||
if (password.value.length < 6) {
|
||||
isValid = false;
|
||||
setFieldError(password.closest('.form-group'), '密码长度至少6位');
|
||||
}
|
||||
|
||||
// 验证确认密码
|
||||
if (password.value !== confirmPassword.value) {
|
||||
isValid = false;
|
||||
setFieldError(confirmPassword.closest('.form-group'), '两次输入的密码不一致');
|
||||
}
|
||||
|
||||
// 验证权限选择
|
||||
if (permission.value === '') {
|
||||
isValid = false;
|
||||
setFieldError(permission.closest('.form-group'), '请选择权限级别');
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
function setFieldError(formGroup, message) {
|
||||
formGroup.classList.remove('success');
|
||||
formGroup.classList.add('error');
|
||||
|
||||
let errorMsg = formGroup.querySelector('.error-message');
|
||||
if (!errorMsg) {
|
||||
errorMsg = document.createElement('div');
|
||||
errorMsg.className = 'error-message';
|
||||
formGroup.appendChild(errorMsg);
|
||||
}
|
||||
errorMsg.textContent = message;
|
||||
errorMsg.style.display = 'block';
|
||||
|
||||
const successMsg = formGroup.querySelector('.success-message');
|
||||
if (successMsg) {
|
||||
successMsg.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function setFieldSuccess(formGroup, message) {
|
||||
formGroup.classList.remove('error');
|
||||
formGroup.classList.add('success');
|
||||
|
||||
let successMsg = formGroup.querySelector('.success-message');
|
||||
if (!successMsg) {
|
||||
successMsg = document.createElement('div');
|
||||
successMsg.className = 'success-message';
|
||||
formGroup.appendChild(successMsg);
|
||||
}
|
||||
successMsg.textContent = message;
|
||||
successMsg.style.display = 'block';
|
||||
|
||||
const errorMsg = formGroup.querySelector('.error-message');
|
||||
if (errorMsg) {
|
||||
errorMsg.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -82,6 +82,7 @@
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
border-left: 4px solid #3498db;
|
||||
transition: transform 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.result-item:hover {
|
||||
@@ -89,14 +90,119 @@
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.result-item p {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.6;
|
||||
.result-preview {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.result-preview .field-item {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 8px;
|
||||
padding: 5px 10px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.result-preview .field-label {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.result-preview .field-value {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.result-item strong {
|
||||
.result-details {
|
||||
display: none;
|
||||
border-top: 1px solid #e9ecef;
|
||||
padding-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.result-details.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.result-details .field-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #3498db;
|
||||
}
|
||||
|
||||
.result-details .field-label {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.result-details .field-value {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.expand-indicator {
|
||||
float: right;
|
||||
color: #3498db;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.result-item.expanded .expand-indicator {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-image {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.result-image:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.image-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-modal img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
@@ -152,22 +258,47 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const html = realData.map(item => {
|
||||
const html = realData.map((item, index) => {
|
||||
const source = item._source || {};
|
||||
const students = Array.isArray(source.students)
|
||||
? source.students.join(', ')
|
||||
: (source.students || '无');
|
||||
const allFields = Object.entries(source).filter(([key, value]) => key !== 'image' && value);
|
||||
|
||||
const teacher = Array.isArray(source.teacher)
|
||||
? source.teacher.join(', ')
|
||||
: (source.teacher || '无');
|
||||
// 获取前3个字段作为预览
|
||||
const previewFields = allFields.slice(0, 3);
|
||||
const hasMoreFields = allFields.length > 3;
|
||||
|
||||
// 生成预览字段HTML
|
||||
const previewHtml = previewFields.map(([key, value]) => `
|
||||
<div class="field-item">
|
||||
<span class="field-label">${key}:</span>
|
||||
<span class="field-value">${Array.isArray(value) ? value.join(', ') : value}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// 生成详细字段HTML
|
||||
const detailsHtml = allFields.map(([key, value]) => `
|
||||
<div class="field-item">
|
||||
<span class="field-label">${key}:</span>
|
||||
<span class="field-value">${Array.isArray(value) ? value.join(', ') : value}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// 图片HTML
|
||||
const imageHtml = source.image ? `
|
||||
<div class="image-container">
|
||||
<img src="/image/${source.image}" alt="相关图片" class="result-image" onclick="openImageModal('/image/${source.image}')">
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
return `
|
||||
<div class="result-item">
|
||||
<p><strong>比赛/论文名称：</strong>${source.id || '无'}</p>
|
||||
<p><strong>项目名称：</strong>${source.name || '无'}</p>
|
||||
<p><strong>学生：</strong>${students}</p>
|
||||
<p><strong>指导老师：</strong>${teacher}</p>
|
||||
<div class="result-item" onclick="toggleDetails(${index})" data-index="${index}">
|
||||
<div class="result-preview">
|
||||
${previewHtml}
|
||||
${hasMoreFields ? '<span class="expand-indicator">▼ 点击查看更多</span>' : ''}
|
||||
</div>
|
||||
<div class="result-details" id="details-${index}">
|
||||
${detailsHtml}
|
||||
${imageHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
@@ -178,5 +309,54 @@
|
||||
resultsContainer.innerHTML = '<div class="error">搜索过程中发生错误</div>';
|
||||
});
|
||||
});
|
||||
|
||||
function toggleDetails(index) {
|
||||
const resultItem = document.querySelector(`[data-index="${index}"]`);
|
||||
const detailsDiv = document.getElementById(`details-${index}`);
|
||||
|
||||
if (detailsDiv.classList.contains('expanded')) {
|
||||
detailsDiv.classList.remove('expanded');
|
||||
resultItem.classList.remove('expanded');
|
||||
} else {
|
||||
detailsDiv.classList.add('expanded');
|
||||
resultItem.classList.add('expanded');
|
||||
}
|
||||
}
|
||||
|
||||
function openImageModal(imageSrc) {
|
||||
event.stopPropagation(); // 阻止事件冒泡
|
||||
|
||||
// 创建模态框
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'image-modal';
|
||||
modal.innerHTML = `
|
||||
<span class="close-modal" onclick="closeImageModal()">×</span>
|
||||
<img src="${imageSrc}" alt="图片预览">
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
modal.style.display = 'block';
|
||||
|
||||
// 点击模态框背景关闭
|
||||
modal.addEventListener('click', function(e) {
|
||||
if (e.target === modal) {
|
||||
closeImageModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeImageModal() {
|
||||
const modal = document.querySelector('.image-modal');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// ESC键关闭模态框
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeImageModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
356
templates/user_management.html
Normal file
356
templates/user_management.html
Normal file
@@ -0,0 +1,356 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}用户管理{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1>用户管理</h1>
|
||||
<a href="{{ url_for('register') }}" class="btn btn-primary">
|
||||
<i class="fas fa-user-plus"></i> 注册新用户
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="users-table">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户ID</th>
|
||||
<th>用户名</th>
|
||||
<th>权限级别</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr>
|
||||
<td>{{ user.user_id }}</td>
|
||||
<td>{{ user.username }}</td>
|
||||
<td>
|
||||
<span class="permission-badge {% if user.premission == 0 %}admin{% else %}user{% endif %}">
|
||||
{% if user.premission == 0 %}管理员{% else %}普通用户{% endif %}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actions">
|
||||
{% if user.username != 'admin' %}
|
||||
<!-- 修改密码按钮 -->
|
||||
<button class="btn btn-sm btn-warning" onclick="showPasswordModal('{{ user.username }}')">
|
||||
<i class="fas fa-key"></i> 修改密码
|
||||
</button>
|
||||
|
||||
<!-- 修改权限按钮 -->
|
||||
<button class="btn btn-sm btn-info" onclick="showPermissionModal('{{ user.username }}', {{ user.premission }})">
|
||||
<i class="fas fa-user-cog"></i> 修改权限
|
||||
</button>
|
||||
|
||||
<!-- 删除用户按钮 -->
|
||||
<button class="btn btn-sm btn-danger" onclick="confirmDelete('{{ user.username }}')">
|
||||
<i class="fas fa-trash"></i> 删除
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="text-muted">系统管理员</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码模态框 -->
|
||||
<div id="passwordModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeModal('passwordModal')">×</span>
|
||||
<h2>修改用户密码</h2>
|
||||
<form id="passwordForm" method="POST">
|
||||
<div class="form-group">
|
||||
<label for="new_password">新密码:</label>
|
||||
<input type="password" id="new_password" name="new_password" required minlength="6">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">确认密码:</label>
|
||||
<input type="password" id="confirm_password" name="confirm_password" required minlength="6">
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">确认修改</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('passwordModal')">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改权限模态框 -->
|
||||
<div id="permissionModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeModal('permissionModal')">×</span>
|
||||
<h2>修改用户权限</h2>
|
||||
<form id="permissionForm" method="POST">
|
||||
<div class="form-group">
|
||||
<label for="permission">权限级别:</label>
|
||||
<select id="permission" name="permission" required>
|
||||
<option value="0">管理员</option>
|
||||
<option value="1">普通用户</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">确认修改</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('permissionModal')">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除确认模态框 -->
|
||||
<div id="deleteModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeModal('deleteModal')">×</span>
|
||||
<h2>确认删除</h2>
|
||||
<p>确定要删除用户 <strong id="deleteUsername"></strong> 吗？此操作不可撤销。</p>
|
||||
<div class="form-actions">
|
||||
<form id="deleteForm" method="POST">
|
||||
<button type="submit" class="btn btn-danger">确认删除</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('deleteModal')">取消</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.header-section h1 {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.users-table {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.permission-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.permission-badge.admin {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.permission-badge.user {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.actions {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #17a2b8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
margin: 10% auto;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function showPasswordModal(username) {
|
||||
document.getElementById('passwordForm').action = `/change_password/${username}`;
|
||||
document.getElementById('passwordModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function showPermissionModal(username, currentPermission) {
|
||||
document.getElementById('permissionForm').action = `/change_permission/${username}`;
|
||||
document.getElementById('permission').value = currentPermission;
|
||||
document.getElementById('permissionModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function confirmDelete(username) {
|
||||
document.getElementById('deleteUsername').textContent = username;
|
||||
document.getElementById('deleteForm').action = `/delete_user/${username}`;
|
||||
document.getElementById('deleteModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeModal(modalId) {
|
||||
document.getElementById(modalId).style.display = 'none';
|
||||
// 清空表单
|
||||
const forms = document.querySelectorAll(`#${modalId} form`);
|
||||
forms.forEach(form => form.reset());
|
||||
}
|
||||
|
||||
// 点击模态框外部关闭
|
||||
window.onclick = function(event) {
|
||||
const modals = document.querySelectorAll('.modal');
|
||||
modals.forEach(modal => {
|
||||
if (event.target === modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 密码确认验证
|
||||
document.getElementById('passwordForm').addEventListener('submit', function(e) {
|
||||
const password = document.getElementById('new_password').value;
|
||||
const confirmPassword = document.getElementById('confirm_password').value;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
e.preventDefault();
|
||||
alert('两次输入的密码不一致！');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (password.length < 6) {
|
||||
e.preventDefault();
|
||||
alert('密码长度至少6位！');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user