hermes/config-panel2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor navbar with Bulma

Browse Source
This commit is contained in:
hermes
2026-06-29 08:29:03 +00:00
parent 078ea0fb4b
commit 28c40db564
6 changed files with 56 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.svelte
View File

@@ -1,4 +1,4 @@
<script setup>
<script>
import LanPage from './pages/LanPage.svelte';
import MainRelayPage from './pages/MainRelayPage.svelte';
import ElevatorPage from './pages/ElevatorPage.svelte';
@@ -8,20 +8,30 @@ let currentPage = $state('lan');
let mobileMenuOpen = $state(false);
</script>
<nav class="navbar is-light" role="navigation">
<nav class="navbar is-light">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item has-text-weight-bold" href="/" tabindex="-1" aria-disabled>⚙️ 配置管理面板</a>
<a role="button" class="navbar-burger" onclick={() => mobileMenuOpen = !mobileMenuOpen} aria-label="menu" data-target="mainNav">
<a class="navbar-item has-text-weight-bold" href="/" >⚙️ 配置管理面板</a>
<button type="button" class="navbar-burger"
onclick={() => mobileMenuOpen = !mobileMenuOpen}
aria-label="menu"
aria-controls="mainNav"
aria-expanded={mobileMenuOpen}
data-target="mainNav">
<span></span>
<span></span>
<span></span>
</a>
</button>
</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={currentPage === page ? 'navbar-item is-active' : ''} href="/" onclick={(e) => { e.preventDefault(); currentPage = page; mobileMenuOpen = false; }}>
<a
class={currentPage === page ? 'navbar-item is-active' : ''}
aria-current={currentPage === page ? "page" : undefined}
href="/"
onclick={(e) => { e.preventDefault(); currentPage = page; mobileMenuOpen = false; }}
>
{#if page === 'lan'}🌐 LAN
{:else if page === 'main_relay'}🔌 主继电器
{:else if page === 'elevator'}🛗 电梯
@@ -52,6 +62,6 @@ let mobileMenuOpen = $state(false);
</footer>
<style>
.is-active { color: #00d1b2 !important; font-weight: bold !important; }
.is-active { color: #00d1b2 !important; font-weight : bold !important; }
.navbar-burger span { display: block; width: 35px; height: 3px; background: #3273dc; margin: auto; }
</style>
</style>

24
src/pages/DevicePage.svelte
View File

@@ -1,4 +1,4 @@
<script setup>
<script>
import { onMount } from 'svelte';
import { getDevice, putDevice } from '../lib/api.js';
@@ -55,9 +55,9 @@ async function handleSave() {
<header class="card-header"><p class="card-header-title">485通信参数</p></header>
<div class="card-content">
<div class="field">
<label class="label">协议类型 (type)</label>
<label class="label" for="协议类型_(type)">协议类型 (type)</label>
<div class="control">
<input type="number" class="input" bind:value={config.type} placeholder="0" />
<input type="number" class="input" bind:value={config.type} placeholder="0" id="协议类型_(type)" />
</div>
</div>
</div>
@@ -67,15 +67,15 @@ async function handleSave() {
<header class="card-header"><p class="card-header-title">设备信息</p></header>
<div class="card-content">
<div class="field">
<label class="label">序列号 (sn)</label>
<label class="label" for="序列号_(sn)">序列号 (sn)</label>
<div class="control">
<input type="number" class="input" bind:value={config.sn} placeholder="1" />
<input type="number" class="input" bind:value={config.sn} placeholder="1" id="序列号_(sn)" />
</div>
</div>
<div class="field">
<label class="label">设备名称</label>
<label class="label" for="设备名称">设备名称</label>
<div class="control">
<input type="text" class="input" bind:value={config.name} placeholder="设备名称" />
<input type="text" class="input" bind:value={config.name} placeholder="设备名称" id="设备名称" />
</div>
</div>
</div>
@@ -87,15 +87,15 @@ async function handleSave() {
<header class="card-header"><p class="card-header-title">配置选项</p></header>
<div class="card-content">
<div class="field">
<label class="label">单元号 (unit)</label>
<label class="label" for="单元号_(unit)">单元号 (unit)</label>
<div class="control">
<input type="number" class="input" bind:value={config.unit} placeholder="1" />
<input type="number" class="input" bind:value={config.unit} placeholder="1" id="单元号_(unit)" />
</div>
</div>
<div class="field">
<label class="label">房间号 (room)</label>
<label class="label" for="房间号_(room)">房间号 (room)</label>
<div class="control">
<input type="number" class="input" bind:value={config.room} placeholder="101" />
<input type="number" class="input" bind:value={config.room} placeholder="101" id="房间号_(room)" />
</div>
</div>
</div>
@@ -113,7 +113,7 @@ async function handleSave() {
</div>
<footer class="card-content mt-4">
<button class="button is-primary" on:click={handleSave}>💾 保存配置</button>
<button class="button is-primary" onclick={handleSave}>💾 保存配置</button>
</footer>
</div>
</div>

8
src/pages/ElevatorPage.svelte
View File

@@ -1,4 +1,4 @@
<script setup>
<script>
import { onMount } from 'svelte';
import { getElevator, putElevator } from '../lib/api.js';
@@ -62,9 +62,9 @@ async function handleSave() {
</div>
<br>
<div class="field">
<label class="label">超时时间 (ms)</label>
<label class="label" for="超时时间_(ms)">超时时间 (ms)</label>
<div class="control">
<input type="number" class="input" bind:value={config.timeoutMs} placeholder="8000" />
<input type="number" class="input" bind:value={config.timeoutMs} placeholder="8000" id="超时时间_(ms)" />
</div>
</div>
</div>
@@ -92,7 +92,7 @@ async function handleSave() {
</div>
<footer class="card-content has-text-right mt-4">
<button class="button is-primary" on:click={handleSave}>💾 保存配置</button>
<button class="button is-primary" onclick={handleSave}>💾 保存配置</button>
</footer>
</div>
</div>

24
src/pages/LanPage.svelte
View File

@@ -1,4 +1,4 @@
<script setup>
<script>
import { onMount } from 'svelte';
import { getLan, putLan } from '../lib/api.js';
@@ -57,32 +57,32 @@ async function handleSave() {
</header>
<div class="card-content">
<div class="field">
<label class="label">IP地址</label>
<label class="label" for="ip地址">IP地址</label>
<div class="control">
<input type="text" class="input" bind:value={config.ip} placeholder="192.168.1.100" />
<input type="text" class="input" bind:value={config.ip} placeholder="192.168.1.100" id="ip地址" />
</div>
</div>
<div class="field">
<label class="label">子网掩码</label>
<label class="label" for="子网掩码">子网掩码</label>
<div class="control">
<input type="text" class="input" bind:value={config.mask} placeholder="255.255.255.0" />
<input type="text" class="input" bind:value={config.mask} placeholder="255.255.255.0" id="子网掩码" />
</div>
</div>
<div class="field">
<label class="label">网关</label>
<label class="label" for="网关">网关</label>
<div class="control">
<input type="text" class="input" bind:value={config.gateway} placeholder="192.168.1.1" />
<input type="text" class="input" bind:value={config.gateway} placeholder="192.168.1.1" id="网关" />
</div>
</div>
<div class="field">
<label class="label">DNS</label>
<label class="label" for="dns">DNS</label>
<div class="control">
<input type="text" class="input" bind:value={config.dns} placeholder="8.8.8.8" />
<input type="text" class="input" bind:value={config.dns} placeholder="8.8.8.8" id="dns" />
</div>
</div>
</div>
<footer class="card-content has-text-right">
<button class="button is-primary" on:click={handleSave}>💾 保存配置</button>
<button class="button is-primary" onclick={handleSave}>💾 保存配置</button>
</footer>
</div>
</div>
@@ -99,9 +99,9 @@ async function handleSave() {
</div>
<br>
<div class="field">
<label class="label">DHCP地址池</label>
<label class="label" for="dhcp地址池">DHCP地址池</label>
<div class="control">
<input type="text" class="input" bind:value={config.dhcp_pool} placeholder="192.168.1.50-200" />
<input type="text" class="input" bind:value={config.dhcp_pool} placeholder="192.168.1.50-200" id="dhcp地址池" />
</div>
</div>
</div>

16
src/pages/MainRelayPage.svelte
View File

@@ -1,4 +1,4 @@
<script setup>
<script>
import { onMount } from 'svelte';
import { getMainRelay, putMainRelay } from '../lib/api.js';
@@ -62,8 +62,8 @@ async function handleSave() {
</div>
<div class="level-right">
<div class="buttons">
<button class="button is-warning" on:click={() => config.state = true}>闭合</button>
<button class="button is-danger" on:click={() => config.state = false}>断开</button>
<button class="button is-warning" onclick={() => config.state = true}>闭合</button>
<button class="button is-danger" onclick={() => config.state = false}>断开</button>
</div>
</div>
</div>
@@ -74,15 +74,15 @@ async function handleSave() {
<header class="card-header"><p class="card-header-title">延迟参数 (ms)</p></header>
<div class="card-content">
<div class="field">
<label class="label">关闭延迟</label>
<label class="label" for="关闭延迟">关闭延迟</label>
<div class="control">
<input type="number" class="input" bind:value={config.lockDelayMs} placeholder="5000" />
<input type="number" class="input" bind:value={config.lockDelayMs} placeholder="5000" id="关闭延迟" />
</div>
</div>
<div class="field">
<label class="label">开启延迟</label>
<label class="label" for="开启延迟">开启延迟</label>
<div class="control">
<input type="number" class="input" bind:value={config.unlockDelayMs} placeholder="2000" />
<input type="number" class="input" bind:value={config.unlockDelayMs} placeholder="2000" id="开启延迟" />
</div>
</div>
</div>
@@ -102,7 +102,7 @@ async function handleSave() {
</div>
<footer class="card-content has-text-right mt-4">
<button class="button is-primary" on:click={handleSave}>💾 保存配置</button>
<button class="button is-primary" onclick={handleSave}>💾 保存配置</button>
</footer>
</div>
</div>

4
vite.config.js
View File

@@ -1,8 +1,8 @@
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({
plugins: [svelte()],
plugins: [svelte({ preprocess: vitePreprocess() })],
server: {
proxy: {
'/config': {