feat 配置WiFi模块

src/components/settings/wifiNetwork.vue

@@ -2,12 +2,16 @@
 import wifi from '@/utils/wifi'
 
 const wifiEnabled = ref(true)
+const scanning = ref(false)
 
-const networks = ref([
-  { name: 'TP_LINK_5G', signal: '信号强度：强', ip: 'IP地址：192.168.1.100', connected: true },
-  { name: 'TP_LINK_5G', signal: '信号强度：强', ip: 'IP地址：192.168.1.100', connected: false },
-  { name: 'TP_LINK_5G', signal: '信号强度：强', ip: 'IP地址：192.168.1.100', connected: false },
-])
+interface NetworkItem {
+  name: string
+  signal: string
+  ip: string
+  connected: boolean
+}
+
+const networks = ref<NetworkItem[]>([])
 
 function handleDisconnect(name: string) {
   console.log('断开', name)
@@ -18,9 +22,35 @@ function handleConnect(name: string) {
 }
 
 async function handleRefreshWifi() {
+  if (scanning.value)
+    return
+
+  scanning.value = true
   console.log('点击了搜索WiFi')
-  const result = await wifi.scanWifi()
-  console.log('扫描到的WiFi:', result)
+  try {
+    const result = await wifi.scanWifi()
+    console.log('扫描到的WiFi:', result)
+    const connected = await wifi.getConnectedWifi().catch(() => null)
+
+    networks.value = result.map(item => ({
+      name: item.SSID,
+      signal: `信号强度：${wifi.getSignalDescription(item.signalStrength)}`,
+      ip: connected?.SSID === item.SSID ? '已连接' : (wifi.is5GHz(item.frequency || 0) ? '5GHz' : '2.4GHz'),
+      connected: connected?.SSID === item.SSID,
+    }))
+
+    if (!result.length) {
+      uni.showToast({ title: '未发现可用网络', icon: 'none' })
+    }
+  }
+  catch (err) {
+    const message = err instanceof Error ? err.message : '扫描失败'
+    console.error('WiFi 扫描失败:', err)
+    uni.showToast({ title: message, icon: 'none', duration: 3000 })
+  }
+  finally {
+    scanning.value = false
+  }
 }
 </script>
 
@@ -50,7 +80,16 @@ async function handleRefreshWifi() {
         <text class="card-title">
           可用网络
         </text>
-        <wd-icon name="refresh" size="20px" class="refresh-icon" @click="handleRefreshWifi" />
+        <wd-icon
+          name="refresh"
+          size="20px"
+          class="refresh-icon"
+          :class="{ spinning: scanning }"
+          @click="handleRefreshWifi"
+        />
+      </view>
+      <view v-if="!networks.length && !scanning" class="empty-tip">
+        点击右上角刷新扫描附近 WiFi
       </view>
       <view class="network-list">
         <view v-for="(network, index) in networks" :key="index" class="network-item">
@@ -119,6 +158,22 @@ async function handleRefreshWifi() {
   color: #999;
 }
 
+.refresh-icon.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.empty-tip {
+  font-size: 14px;
+  color: #999;
+  padding: 12px 0;
+  text-align: center;
+}
+
 .wifi-toggle {
   display: flex;
   justify-content: space-between;