87 lines
2.7 KiB
HTML
87 lines
2.7 KiB
HTML
{# 基础模板 #}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}智队中枢{% endblock %}</title>
|
|
|
|
{# Tailwind CSS #}
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#f0f9ff',
|
|
100: '#e0f2fe',
|
|
200: '#bae6fd',
|
|
300: '#7dd3fc',
|
|
400: '#38bdf8',
|
|
500: '#0ea5e9',
|
|
600: '#0284c7',
|
|
700: '#0369a1',
|
|
800: '#075985',
|
|
900: '#0c4a6e',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{# 自定义样式 #}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
|
|
{# HTMX #}
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
|
|
{% block extra_head %}{% endblock %}
|
|
</head>
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
|
|
|
|
{# 导航栏 #}
|
|
{% include 'components/navbar.html' %}
|
|
|
|
<div class="flex h-[calc(100vh-64px)]">
|
|
{# 侧边栏 #}
|
|
{% include 'components/sidebar.html' %}
|
|
|
|
{# 主内容区 #}
|
|
<main class="flex-1 overflow-auto p-6">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
|
|
{# Toast 提示 #}
|
|
{% include 'components/toast.html' %}
|
|
|
|
{# 主题切换脚本 #}
|
|
<script>
|
|
// 初始化主题
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
|
|
// 主题切换函数
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const current = html.getAttribute('data-theme');
|
|
const next = current === 'light' ? 'dark' : 'light';
|
|
|
|
html.setAttribute('data-theme', next);
|
|
localStorage.setItem('theme', next);
|
|
}
|
|
|
|
// 页面加载后执行
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 监听主题切换按钮
|
|
document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
|
|
});
|
|
</script>
|
|
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|