193 lines
7.2 KiB
HTML
193 lines
7.2 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>
|
||
|
||
<ul class="nav-links">
|
||
<li><a href="/page/">首页</a></li>
|
||
<li><a href="/page/types">配置类型</a></li>
|
||
<li><a href="/page/configs">配置项</a></li>
|
||
</ul>
|
||
<div class="auth-links">
|
||
<span id="privilegeMode" class="badge badge-warning" style="display: none;">特权模式</span>
|
||
<span id="userInfo" style="display: none;">
|
||
欢迎，<span id="username"></span>
|
||
<button onclick="logout()" class="btn btn-sm">退出</button>
|
||
</span>
|
||
<a href="/page/login" id="loginLink">登录</a>
|
||
</div>
|
||
</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 checkLoginStatus() {
|
||
const token = localStorage.getItem('access_token');
|
||
const username = localStorage.getItem('username');
|
||
|
||
if (token && username) {
|
||
// 已登录
|
||
document.getElementById('userInfo').style.display = 'inline-block';
|
||
document.getElementById('username').textContent = username;
|
||
document.getElementById('loginLink').style.display = 'none';
|
||
|
||
// 添加令牌到所有API请求
|
||
addTokenToFetch();
|
||
} else {
|
||
// 未登录
|
||
document.getElementById('userInfo').style.display = 'none';
|
||
document.getElementById('loginLink').style.display = 'inline-block';
|
||
|
||
// 检查特权模式
|
||
checkPrivilegeMode();
|
||
}
|
||
}
|
||
|
||
// 检查特权模式
|
||
async function checkPrivilegeMode() {
|
||
try {
|
||
const response = await fetch('/api/auth/privilege-mode');
|
||
const data = await response.json();
|
||
|
||
if (data.privilege_mode) {
|
||
document.getElementById('privilegeMode').style.display = 'inline-block';
|
||
console.log('特权模式已启用');
|
||
} else {
|
||
document.getElementById('privilegeMode').style.display = 'none';
|
||
}
|
||
} catch (error) {
|
||
console.error('检查特权模式失败:', error);
|
||
}
|
||
}
|
||
|
||
// 添加令牌到所有fetch请求
|
||
function addTokenToFetch() {
|
||
const originalFetch = window.fetch;
|
||
window.fetch = function(url, options = {}) {
|
||
const token = localStorage.getItem('access_token');
|
||
|
||
if (token && url.startsWith('/api/')) {
|
||
options.headers = options.headers || {};
|
||
options.headers['Authorization'] = `Bearer ${token}`;
|
||
}
|
||
|
||
return originalFetch(url, options);
|
||
};
|
||
}
|
||
|
||
// 退出登录
|
||
function logout() {
|
||
localStorage.removeItem('access_token');
|
||
localStorage.removeItem('username');
|
||
localStorage.removeItem('role');
|
||
window.location.reload();
|
||
}
|
||
|
||
// 显示消息
|
||
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() {
|
||
checkLoginStatus();
|
||
|
||
// 处理表单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 %}
|
||
</body>
|
||
</html> |