guyue55
aa2fc6d84d
2. 优化首页 已完成首页的优化工作，主要改进包括： - 优化了统计卡片的设计，添加了渐变背景和精致的阴影效果 - 改进了图标和数字的视觉效果，增加了文字阴影和图标动画 - 添加了数据趋势指标，以更直观的方式展示数据状态 - 优化了快速入门指南的样式，增加了悬停效果和平滑过渡动画 - 调整了响应式布局的间距和尺寸，确保在各种设备上都能良好显示
129 lines
4.6 KiB
HTML
129 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{% block title %}配置中心{% endblock %}</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
{% block extra_css %}{% endblock %}
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<nav class="navbar">
|
||
<div class="nav-brand">
|
||
<a href="/page/" class="brand-link">配置中心</a>
|
||
</div>
|
||
<div class="nav-menu">
|
||
<ul class="nav-links">
|
||
<li><a href="/page/" class="nav-link">首页</a></li>
|
||
<li><a href="/page/types" class="nav-link">配置类型</a></li>
|
||
<li><a href="/page/configs" class="nav-link">配置项</a></li>
|
||
</ul>
|
||
</div>
|
||
<button class="nav-toggle">
|
||
<span class="hamburger"></span>
|
||
</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="container">
|
||
{% block content %}{% endblock %}
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2025 Guyue. 保留所有权利.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 消息提示 -->
|
||
<div id="message" class="message" style="display: none;"></div>
|
||
|
||
<!-- 在 script 标签中添加检查特权模式的代码 -->
|
||
<script>
|
||
|
||
|
||
// 显示消息
|
||
function showMessage(text, type = 'info') {
|
||
const messageElement = document.getElementById('message');
|
||
messageElement.textContent = text;
|
||
messageElement.className = `message message-${type}`;
|
||
messageElement.style.display = 'block';
|
||
|
||
setTimeout(() => {
|
||
messageElement.style.display = 'none';
|
||
}, 3000);
|
||
}
|
||
|
||
// 确认删除
|
||
function confirmDelete(message) {
|
||
return confirm(message);
|
||
}
|
||
|
||
// 页面加载时处理表单
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 处理表单AJAX提交
|
||
document.querySelectorAll('form[data-submit-ajax]').forEach(form => {
|
||
form.addEventListener('submit', async function(event) {
|
||
event.preventDefault();
|
||
|
||
const formData = new FormData(form);
|
||
const method = form.method || 'POST';
|
||
const url = form.action;
|
||
|
||
try {
|
||
let options = {
|
||
method: method,
|
||
};
|
||
|
||
// 根据不同的方法处理数据
|
||
if (method === 'GET') {
|
||
// GET请求不需要body
|
||
} else if (formData.has('file')) {
|
||
// 如果有文件，使用FormData
|
||
options.body = formData;
|
||
} else {
|
||
// 否则使用JSON
|
||
const jsonData = {};
|
||
formData.forEach((value, key) => {
|
||
jsonData[key] = value;
|
||
});
|
||
options.headers = {
|
||
'Content-Type': 'application/json',
|
||
};
|
||
options.body = JSON.stringify(jsonData);
|
||
}
|
||
|
||
const response = await fetch(url, options);
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json();
|
||
throw new Error(errorData.detail || '操作失败');
|
||
}
|
||
|
||
showMessage('操作成功', 'success');
|
||
|
||
// 关闭模态框
|
||
const modal = form.closest('.modal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
|
||
// 重新加载页面
|
||
setTimeout(() => {
|
||
window.location.reload();
|
||
}, 1000);
|
||
} catch (error) {
|
||
showMessage(error.message, 'danger');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
{% block extra_js %}{% endblock %}
|
||
<script src="/static/js/nav.js"></script>
|
||
</body>
|
||
</html> |