From 28c40db5647fef199e2cf256d583f08dfa113f1f Mon Sep 17 00:00:00 2001
From: hermes <hermes@local>
Date: Mon, 29 Jun 2026 08:29:03 +0000
Subject: [PATCH] feat: refactor navbar with Bulma

---
 src/App.svelte                 | 26 ++++++++++++++++++--------
 src/pages/DevicePage.svelte    | 24 ++++++++++++------------
 src/pages/ElevatorPage.svelte  |  8 ++++----
 src/pages/LanPage.svelte       | 24 ++++++++++++------------
 src/pages/MainRelayPage.svelte | 16 ++++++++--------
 vite.config.js                 |  4 ++--
 6 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 69a96bc..f5f8103 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/pages/DevicePage.svelte b/src/pages/DevicePage.svelte
index f3bd369..a460f1d 100644
--- a/src/pages/DevicePage.svelte
+++ b/src/pages/DevicePage.svelte
@@ -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>
diff --git a/src/pages/ElevatorPage.svelte b/src/pages/ElevatorPage.svelte
index 5e62a93..568de9c 100644
--- a/src/pages/ElevatorPage.svelte
+++ b/src/pages/ElevatorPage.svelte
@@ -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>
diff --git a/src/pages/LanPage.svelte b/src/pages/LanPage.svelte
index 8982926..ad0dd82 100644
--- a/src/pages/LanPage.svelte
+++ b/src/pages/LanPage.svelte
@@ -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>
diff --git a/src/pages/MainRelayPage.svelte b/src/pages/MainRelayPage.svelte
index 7059ae4..6753928 100644
--- a/src/pages/MainRelayPage.svelte
+++ b/src/pages/MainRelayPage.svelte
@@ -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>
diff --git a/vite.config.js b/vite.config.js
index aa7c58e..5fb8d53 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -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': {