ishenwei
4aba6dfa77
Set up the required directory layout, app scaffolding, core settings, templates, static assets, and Docker/Tailwind tooling to establish a standardized development baseline.
70 lines
2.9 KiB
HTML
70 lines
2.9 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block body_class %}bg-neutral-50 text-neutral-900{% endblock %}
|
||
|
||
{% block content %}
|
||
<div x-data="{ sidebarOpen: $persist(true).as('fonrey.sidebar.open') }" class="min-h-screen">
|
||
<header class="sticky top-0 z-20 h-14 bg-primary-800 text-white flex items-center px-4 gap-4">
|
||
<div class="w-[150px] font-semibold">Fonrey</div>
|
||
<nav class="flex-1 flex items-center gap-2 overflow-x-auto">
|
||
<a href="#" class="px-3 py-2 rounded bg-primary-700">主页</a>
|
||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">房源</a>
|
||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">客源</a>
|
||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">营销</a>
|
||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">交易</a>
|
||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">数据</a>
|
||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">人事</a>
|
||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">系统</a>
|
||
<input class="ml-2 h-9 rounded px-3 text-neutral-900 w-64" placeholder="全局搜索">
|
||
</nav>
|
||
<div class="flex items-center gap-3">
|
||
<button type="button" class="p-2 rounded hover:bg-primary-700">🔔</button>
|
||
<button type="button" class="p-2 rounded hover:bg-primary-700">⚙️</button>
|
||
<button type="button" class="h-8 w-8 rounded-full bg-primary-600">U</button>
|
||
</div>
|
||
</header>
|
||
|
||
<aside :class="sidebarOpen ? 'w-60' : 'w-16'" class="fixed top-14 left-0 bottom-0 z-20 bg-white border-r border-neutral-200 transition-all">
|
||
<div class="p-3">
|
||
<button type="button" class="text-sm text-primary-600" @click="sidebarOpen = !sidebarOpen">切换侧栏</button>
|
||
</div>
|
||
{% include "components/sidebar.html" %}
|
||
</aside>
|
||
|
||
<main :class="sidebarOpen ? 'ml-60' : 'ml-16'" class="px-6 py-4 transition-all">
|
||
{% include "components/topbar.html" %}
|
||
<section hx-get="/property/" hx-trigger="load" hx-target="#page-async" hx-swap="innerHTML">
|
||
<div id="page-async">
|
||
{% block app_content %}{% endblock %}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="toast-container" class="fixed bottom-4 right-4 z-70 space-y-2"></div>
|
||
</div>
|
||
|
||
<div id="desktop-only-gate" class="hidden fixed inset-0 z-70 bg-neutral-900/80 text-white items-center justify-center p-6">
|
||
<div class="max-w-lg text-center text-lg font-medium">Fonrey 当前仅支持桌面端（≥1280px），请在电脑上访问</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script>
|
||
(function () {
|
||
function toggleGate() {
|
||
var gate = document.getElementById('desktop-only-gate');
|
||
if (!gate) return;
|
||
if (window.innerWidth < 1280) {
|
||
gate.classList.remove('hidden');
|
||
gate.classList.add('flex');
|
||
} else {
|
||
gate.classList.add('hidden');
|
||
gate.classList.remove('flex');
|
||
}
|
||
}
|
||
toggleGate();
|
||
window.addEventListener('resize', toggleGate);
|
||
})();
|
||
</script>
|
||
{% endblock %}
|