From 17d0711f6787a3774df0a84f1498dcc531cc2a99 Mon Sep 17 00:00:00 2001 From: stswangzhiping <59632378+stswangzhiping@users.noreply.github.com> Date: Mon, 16 Mar 2026 13:11:23 +0800 Subject: [PATCH] ui: redesign WiFi list with signal bars and cleaner layout - Replace with scrollable list of clickable items +- Show signal strength as 4-bar icon instead of percentage text +- Remove security info from parentheses, show lock icon only +- Smaller font size for compact mobile display diff --git a/lib/captive-server.js b/lib/captive-server.js index 4348a25..4b5f8ac 100644 --- a/lib/captive-server.js +++ b/lib/captive-server.js @@ -162,9 +162,19 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;b .device-id{text-align:center;background:#f8f9fa;border-radius:8px;padding:8px;margin-bottom:20px;font-size:14px;color:#555} .device-id strong{color:#1a1a2e;font-size:16px} label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:#555} -select,input{width:100%;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:15px;outline:none;transition:border-color .2s} -select:focus,input:focus{border-color:#4a6cf7} +input{width:100%;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:15px;outline:none;transition:border-color .2s} +input:focus{border-color:#4a6cf7} .field{margin-bottom:16px} +.wifi-list{max-height:220px;overflow-y:auto;border:1.5px solid #ddd;border-radius:8px;margin-bottom:16px} +.wifi-item{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid #f0f0f0;cursor:pointer;font-size:13px;transition:background .15s} +.wifi-item:last-child{border-bottom:none} +.wifi-item:hover,.wifi-item.active{background:#e8f0fe} +.wifi-item.active{font-weight:600;color:#1a1a2e} +.wifi-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.wifi-signal{display:flex;align-items:flex-end;gap:1.5px;height:14px;margin-left:8px;flex-shrink:0} +.wifi-signal i{display:block;width:3px;background:#ccc;border-radius:1px} +.wifi-signal i.on{background:#4a6cf7} +.wifi-lock{margin-left:6px;font-size:11px;color:#888;flex-shrink:0} .btn{width:100%;padding:14px;background:linear-gradient(135deg,#4a6cf7,#3b5de7);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .2s} .btn:hover{opacity:.9} .btn:disabled{opacity:.5;cursor:not-allowed} @@ -188,11 +198,9 @@ select:focus,input:focus{border-color:#4a6cf7}
设备 ID: ${this._clawId}
- -
- - + +
加载中...
@@ -200,6 +208,7 @@ select:focus,input:focus{border-color:#4a6cf7}
+
@@ -214,35 +223,56 @@ select:focus,input:focus{border-color:#4a6cf7} function $(id){return document.getElementById(id)} function setStatus(msg,type){var s=$('status');s.textContent=msg;s.className='status '+type} +function signalBars(pct){ + var bars=[4,7,10,14]; + var on=pct>=80?4:pct>=60?3:pct>=40?2:1; + return bars.map(function(h,i){ + return ''; + }).join(''); +} + +function selectWifi(ssid){ + $('selectedSsid').value=ssid; + var items=document.querySelectorAll('.wifi-item'); + items.forEach(function(el){el.classList.toggle('active',el.dataset.ssid===ssid)}); +} + async function doScan(){ - $('connectBtn').disabled=true; - setStatus('正在扫描...','info'); + var list=$('wifiList'); + list.innerHTML='
加载中...
'; try{ var r=await fetch('/api/scan'); var d=await r.json(); - var sel=$('ssid'); - sel.innerHTML=''; - (d.wifi||[]).forEach(function(w){ - var o=document.createElement('option'); - o.value=w.ssid; - o.textContent=w.ssid+' ('+w.signal+'% '+w.security+')'; - sel.appendChild(o); + var arr=d.wifi||[]; + if(arr.length===0){ + list.innerHTML='
未发现网络，请手动输入
'; + return; + } + list.innerHTML=''; + arr.forEach(function(w){ + var div=document.createElement('div'); + div.className='wifi-item'; + div.dataset.ssid=w.ssid; + div.onclick=function(){selectWifi(w.ssid)}; + var lock=w.security&&w.security!=='Open'?'🔒':''; + div.innerHTML=''+w.ssid+'' + +''+signalBars(w.signal)+'' + +''+lock+''; + list.appendChild(div); }); - var msg='发现 '+d.wifi.length+' 个网络'; - if(d.wifi.length===0) msg='未发现网络，请手动输入 SSID'; - setStatus(msg,'ok'); - }catch(e){setStatus('扫描失败: '+e.message,'err')} - $('connectBtn').disabled=false; + }catch(e){ + list.innerHTML='
加载失败
'; + } } function toggleManual(){ var on=$('manualToggle').checked; $('manualSsid').style.display=on?'block':'none'; - $('ssid').style.display=on?'none':'block'; + $('wifiList').style.display=on?'none':'block'; } async function doConnect(){ - var ssid=$('manualToggle').checked?$('manualSsid').value:$('ssid').value; + var ssid=$('manualToggle').checked?$('manualSsid').value:$('selectedSsid').value; var pw=$('password').value; if(!ssid){setStatus('请选择或输入 WiFi','err');return} $('connectBtn').disabled=true; @@ -251,7 +281,7 @@ async function doConnect(){ var r=await fetch('/api/connect',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ssid:ssid,password:pw})}); var d=await r.json(); if(d.success){ - setStatus('✓ 设备正在连接 WiFi，热点将关闭。如连接失败，热点会自动恢复，请重新连接配网。','ok'); + setStatus('✓ 设备正在连接 WiFi，热点将关闭。如连接失败，热点会自动恢复。','ok'); }else{ setStatus('失败: '+(d.error||'未知错误'),'err'); $('connectBtn').disabled=false;