98 lines
5.2 KiB
HTML
98 lines
5.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 %}AI 视界{% endblock %}</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||
|
|
{% block head %}{% endblock %}
|
||
|
|
</head>
|
||
|
|
<body class="text-slate-700 antialiased bg-slate-50 overflow-hidden">
|
||
|
|
<div class="bg-mesh"></div>
|
||
|
|
<div id="toastContainer" class="toast-container"></div>
|
||
|
|
|
||
|
|
<div class="flex h-screen w-screen overflow-hidden">
|
||
|
|
<!-- 全局系统菜单栏 (默认隐藏，仅在 initGlobalNav 成功后显示) -->
|
||
|
|
<nav id="globalNav" class="hidden w-20 flex-shrink-0 bg-slate-900 flex flex-col items-center py-8 z-40 shadow-2xl transition-all duration-500">
|
||
|
|
<div class="w-12 h-12 btn-primary logo-box rounded-2xl flex items-center justify-center mb-12 rotate-3">
|
||
|
|
<i data-lucide="scan-eye" class="w-7 h-7"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="dynamicMenuList" class="flex-1 w-full px-2 space-y-4"></div>
|
||
|
|
|
||
|
|
<div id="globalUserProfile" class="flex flex-col items-center gap-4 mb-4">
|
||
|
|
<div class="w-10 h-10 bg-slate-800 rounded-xl flex items-center justify-center text-slate-400 border border-slate-700">
|
||
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
||
|
|
</div>
|
||
|
|
<button id="globalLogoutBtn" class="text-slate-500 hover:text-rose-400 transition-colors">
|
||
|
|
<i data-lucide="log-out" class="w-5 h-5"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- 主内容区域 (全屏) -->
|
||
|
|
<main class="flex-1 flex overflow-hidden relative w-full h-full">
|
||
|
|
{% block content %}{% endblock %}
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
lucide.createIcons();
|
||
|
|
|
||
|
|
// 自动加载菜单
|
||
|
|
async function initGlobalNav() {
|
||
|
|
try {
|
||
|
|
const r = await fetch('/api/auth/menu');
|
||
|
|
const d = await r.json();
|
||
|
|
if(d.menu && d.menu.length > 0) {
|
||
|
|
document.getElementById('globalNav').classList.remove('hidden');
|
||
|
|
const list = document.getElementById('dynamicMenuList');
|
||
|
|
list.innerHTML = d.menu.map(item => {
|
||
|
|
const isActive = window.location.pathname === item.url;
|
||
|
|
return `
|
||
|
|
<div class="relative group flex justify-center">
|
||
|
|
<a href="${item.url}"
|
||
|
|
class="w-12 h-12 flex items-center justify-center rounded-2xl transition-all duration-300 ${
|
||
|
|
isActive
|
||
|
|
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/40'
|
||
|
|
: 'text-slate-500 hover:bg-slate-800 hover:text-white'
|
||
|
|
}">
|
||
|
|
<i data-lucide="${item.icon}" class="w-5 h-5"></i>
|
||
|
|
</a>
|
||
|
|
<div class="absolute left-full ml-4 px-3 py-2 bg-slate-800 text-white text-[10px] font-black rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl">
|
||
|
|
${item.name}
|
||
|
|
<div class="absolute right-full top-1/2 -translate-y-1/2 border-8 border-transparent border-r-slate-800"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}).join('');
|
||
|
|
lucide.createIcons();
|
||
|
|
}
|
||
|
|
} catch(e) { console.error('菜单加载失败', e); }
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('globalLogoutBtn').onclick = async () => {
|
||
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
||
|
|
window.location.href = '/login';
|
||
|
|
};
|
||
|
|
|
||
|
|
initGlobalNav();
|
||
|
|
|
||
|
|
function showToast(message, type = 'info') {
|
||
|
|
const container = document.getElementById('toastContainer');
|
||
|
|
const toast = document.createElement('div');
|
||
|
|
toast.className = `toast ${type}`;
|
||
|
|
const colors = { success: 'text-emerald-500', error: 'text-rose-500', warning: 'text-amber-500', info: 'text-indigo-500' };
|
||
|
|
const icons = { success: 'check-circle', error: 'x-circle', warning: 'alert-triangle', info: 'info' };
|
||
|
|
toast.innerHTML = `<i data-lucide="${icons[type]}" class="w-5 h-5 ${colors[type]} flex-shrink-0"></i><span class="text-sm font-medium text-slate-700">${message}</span>`;
|
||
|
|
container.appendChild(toast);
|
||
|
|
lucide.createIcons();
|
||
|
|
setTimeout(() => { toast.style.animation = 'slideOutRight 0.3s ease-in'; setTimeout(() => toast.remove(), 300); }, 3000);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{% block scripts %}{% endblock %}
|
||
|
|
</body>
|
||
|
|
</html>
|