56 lines
2.1 KiB
Svelte
56 lines
2.1 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import LanPage from './pages/LanPage.svelte';
|
|
import MainRelayPage from './pages/MainRelayPage.svelte';
|
|
import ElevatorPage from './pages/ElevatorPage.svelte';
|
|
import DevicePage from './pages/DevicePage.svelte';
|
|
|
|
let currentPage = $state('lan');
|
|
let mobileMenuOpen = $state(false);
|
|
</script>
|
|
|
|
<nav class="navbar is-light" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item has-text-weight-bold" href="#" onclick="event.preventDefault()">⚙️ 配置管理面板</a>
|
|
<a role="button" class="navbar-burger" onclick={() => mobileMenuOpen = !mobileMenuOpen} aria-label="menu" data-target="mainNav">
|
|
<span /><span /><span />
|
|
</a>
|
|
</div>
|
|
<div id="mainNav" class="navbar-menu" class:is-active={$mobileMenuOpen}>
|
|
<div class="navbar-start">
|
|
{#each ['lan', 'main_relay', 'elevator', 'device'] as page}
|
|
<a class="navbar-item" href="#" onclick="{() => { $currentPage = page; $mobileMenuOpen = false; }}"
|
|
class:list={[ 'is-active', $currentPage === page ]}>
|
|
{#if page === 'lan'}🌐 LAN
|
|
{:else if page === 'main_relay'}🔌 主继电器
|
|
{:else if page === 'elevator'}🛗 电梯
|
|
{:else}📟 设备{/if}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="section">
|
|
<div class="container">
|
|
{@switch $currentPage}
|
|
{@case 'lan'} <LanPage /> {@/case}
|
|
{@case 'main_relay'}<MainRelayPage />{@/case}
|
|
{@case 'elevator'} <ElevatorPage /> {@/case}
|
|
{@case 'device'} <DevicePage /> {@/case}
|
|
{/switch}
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="content has-text-centered"><p style="color:#999;font-size:0.8rem;">© 2025 Config Panel — Mock Backend Active</p></div>
|
|
</footer>
|
|
|
|
<style>
|
|
.is-active { color: #00d1b2 !important; font-weight: bold !important; }
|
|
.navbar-burger span { display: block; width: 35px; height: 3px; background: #3273dc; margin: auto; }
|
|
main section { padding-top: 30px; }
|
|
</style>
|