通過標準WiFi AT指令控制WiFi模塊,實現網絡連接、數據通信和設備管理功能。支持ESP8266/ESP32等常見WiFi模塊,適用於物聯網設備調試和網絡通信測試。

  1. 核心功能 AT指令控制:支持發送標準WiFi AT指令

WiFi網絡管理:掃描、連接、斷開WiFi網絡

TCP通信:建立TCP連接,發送接收數據

狀態監控:實時顯示WiFi連接狀態、信號強度、IP地址

響應記錄:完整記錄AT指令發送和響應

  1. 支持的AT指令 基礎指令:AT、AT+RST、AT+GMR等

WiFi模式:STA模式、AP模式、混合模式設置

網絡連接:掃描AP、連接WiFi、斷開連接、查看連接狀態

TCP/IP功能:單連接/多連接模式、建立TCP連接、發送數據、透傳模式

AP配置:設置AP參數、查看連接設備

  1. 界面設計 三選項卡布局(指令控制、網絡管理、TCP通信)

實時狀態顯示欄

響應數據顏色編碼區分

網絡列表可視化展示

統計信息卡片展示

  1. 模擬特性 模擬WiFi網絡掃描和連接過程

模擬信號強度變化

模擬TCP數據通信

模擬AT指令響應生成

5.適用場景

ESP8266/ESP32開發調試

物聯網設備WiFi配置

網絡通信測試

遠程設備監控

智能家居設備配置

// WiFiATController.ets
import { wifi } from '@kit.ConnectivityKit';
import { common } from '@kit.ArkTS';
 
// WiFi連接狀態枚舉
enum WiFiState {
  DISCONNECTED = 'disconnected',
  SCANNING = 'scanning',
  CONNECTING = 'connecting',
  CONNECTED = 'connected',
  ERROR = 'error'
}
 
// WiFi網絡信息
interface WiFiNetwork {
  ssid: string;
  bssid: string;
  securityType: number;
  signalLevel: number;
  frequency: number;
  timestamp: number;
}
 
// AT指令響應
interface ATResponse {
  timestamp: number;
  command: string;
  response: string;
  status: 'success' | 'error' | 'timeout';
}
 
@Entry
@Component
struct WiFiATController {
  // WiFi狀態
  @State wifiState: WiFiState = WiFiState.DISCONNECTED;
  @State currentSSID: string = '';
  @State ipAddress: string = '';
  @State macAddress: string = '';
  @State signalStrength: number = 0;
  
  // AT指令相關
  @State currentCommand: string = '';
  @State commandHistory: string[] = [];
  @State atResponses: ATResponse[] = [];
  
  // 網絡列表
  @State wifiNetworks: WiFiNetwork[] = [];
  @State selectedNetworkIndex: number = -1;
  
  // 連接參數
  @State ssid: string = 'MyWiFi';
  @State password: string = 'password123';
  @State serverIP: string = '192.168.1.100';
  @State serverPort: number = 8080;
  @State connectionMode: 'STA' | 'AP' = 'STA';
  
  // TCP/UDP連接
  @State tcpConnected: boolean = false;
  @State connectionId: number = 0;
  @State receivedData: string = '';
  
  // UI狀態
  @State currentView: string = 'control';
  @State showPassword: boolean = false;
  @State showServerConfig: boolean = false;
  @State autoReconnect: boolean = true;
  
  // 統計信息
  @State stats = {
    totalCommands: 0,
    bytesSent: 0,
    bytesReceived: 0,
    connectionDuration: 0,
    lastConnectedTime: 0
  };
  
  // WiFi常用AT指令
  private wifiCommands = [
    // 基礎指令
    { name: 'AT測試', cmd: 'AT', desc: '測試模塊響應' },
    { name: '重啓模塊', cmd: 'AT+RST', desc: '重啓WiFi模塊' },
    { name: '查看版本', cmd: 'AT+GMR', desc: '查看固件版本' },
    
    // WiFi模式設置
    { name: '設置STA模式', cmd: 'AT+CWMODE=1', desc: '設置為Station模式' },
    { name: '設置AP模式', cmd: 'AT+CWMODE=2', desc: '設置為Access Point模式' },
    { name: '設置混合模式', cmd: 'AT+CWMODE=3', desc: '設置為Station+AP模式' },
    
    // 網絡連接
    { name: '掃描網絡', cmd: 'AT+CWLAP', desc: '掃描可用WiFi網絡' },
    { name: '連接AP', cmd: `AT+CWJAP="${this.ssid}","${this.password}"`, desc: '連接到指定WiFi' },
    { name: '斷開連接', cmd: 'AT+CWQAP', desc: '斷開WiFi連接' },
    { name: '查看連接', cmd: 'AT+CWJAP?', desc: '查看當前連接狀態' },
    
    // TCP/IP功能
    { name: '設置單連接', cmd: 'AT+CIPMUX=0', desc: '設置為單連接模式' },
    { name: '設置多連接', cmd: 'AT+CIPMUX=1', desc: '設置為多連接模式' },
    { name: '建立TCP連接', cmd: `AT+CIPSTART="TCP","${this.serverIP}",${this.serverPort}`, desc: '建立TCP連接' },
    { name: '關閉連接', cmd: 'AT+CIPCLOSE', desc: '關閉TCP連接' },
    { name: '發送數據', cmd: 'AT+CIPSEND=10', desc: '發送指定長度數據' },
    { name: '啓用透傳', cmd: 'AT+CIPMODE=1', desc: '啓用透明傳輸模式' },
    
    // AP模式設置
    { name: '設置AP參數', cmd: 'AT+CWSAP="ESP8266","password",1,3', desc: '配置AP參數' },
    { name: '查看連接設備', cmd: 'AT+CWLIF', desc: '查看連接到AP的設備' },
    
    // 其他功能
    { name: '查看IP地址', cmd: 'AT+CIFSR', desc: '查看IP地址' },
    { name: '設置串口波特率', cmd: 'AT+CIOBAUD=115200', desc: '設置串口波特率' },
    { name: '深度睡眠', cmd: 'AT+GSLP=3600000', desc: '進入深度睡眠模式' }
  ];
  
  aboutToAppear() {
    // 初始化模擬數據
    this.initializeMockNetworks();
    
    // 獲取設備信息
    this.getDeviceInfo();
    
    // 啓動狀態更新
    this.startStatusMonitor();
  }
  
  // 初始化模擬網絡列表
  initializeMockNetworks() {
    const networks: WiFiNetwork[] = [
      { ssid: 'HomeWiFi_5G', bssid: '00:11:22:33:44:55', securityType: 3, signalLevel: 90, frequency: 5745, timestamp: Date.now() },
      { ssid: 'Office_NET', bssid: 'AA:BB:CC:DD:EE:FF', securityType: 2, signalLevel: 75, frequency: 2412, timestamp: Date.now() },
      { ssid: 'Guest_WiFi', bssid: '11:22:33:44:55:66', securityType: 1, signalLevel: 60, frequency: 2437, timestamp: Date.now() },
      { ssid: 'TP-Link_1234', bssid: '22:33:44:55:66:77', securityType: 3, signalLevel: 45, frequency: 2462, timestamp: Date.now() },
      { ssid: 'Huawei_AP', bssid: '33:44:55:66:77:88', securityType: 2, signalLevel: 30, frequency: 2484, timestamp: Date.now() }
    ];
    
    this.wifiNetworks = networks;
  }
  
  // 獲取設備信息
  getDeviceInfo() {
    // 模擬獲取設備信息
    this.macAddress = 'AA:BB:CC:DD:EE:FF';
    this.ipAddress = '192.168.1.' + Math.floor(Math.random() * 100 + 100);
  }
  
  // 啓動狀態監控
  startStatusMonitor() {
    setInterval(() => {
      this.updateWiFiStatus();
      this.updateStatistics();
    }, 3000);
  }
  
  // 更新WiFi狀態
  updateWiFiStatus() {
    // 模擬狀態變化
    if (this.wifiState === WiFiState.CONNECTED) {
      this.signalStrength = Math.floor(Math.random() * 30) + 70;
    } else if (this.wifiState === WiFiState.SCANNING) {
      this.wifiState = Math.random() > 0.3 ? WiFiState.CONNECTING : WiFiState.DISCONNECTED;
    }
    
    // 更新連接時長
    if (this.wifiState === WiFiState.CONNECTED && this.stats.lastConnectedTime > 0) {
      this.stats.connectionDuration = Math.floor((Date.now() - this.stats.lastConnectedTime) / 1000);
    }
  }
  
  // 更新統計數據
  updateStatistics() {
    // 模擬數據增長
    if (this.tcpConnected) {
      this.stats.bytesReceived += Math.floor(Math.random() * 100);
      this.stats.bytesSent += Math.floor(Math.random() * 50);
    }
  }
  
  // 掃描WiFi網絡
  scanNetworks() {
    this.wifiState = WiFiState.SCANNING;
    this.addResponse('AT+CWLAP', '掃描WiFi網絡中...', 'success');
    
    // 模擬掃描過程
    setTimeout(() => {
      this.wifiState = WiFiState.DISCONNECTED;
      this.addResponse('AT+CWLAP', this.formatScanResults(), 'success');
    }, 2000);
  }
  
  // 格式化掃描結果
  formatScanResults(): string {
    let result = '+CWLAP:(3,"HomeWiFi_5G",-45,"00:11:22:33:44:55",1,5745)\n';
    result += '+CWLAP:(2,"Office_NET",-55,"AA:BB:CC:DD:EE:FF",1,2412)\n';
    result += '+CWLAP:(1,"Guest_WiFi",-65,"11:22:33:44:55:66",1,2437)\n';
    result += 'OK';
    return result;
  }
  
  // 連接WiFi網絡
  connectToWiFi() {
    if (!this.ssid.trim()) {
      this.showToast('請輸入SSID');
      return;
    }
    
    this.wifiState = WiFiState.CONNECTING;
    this.addResponse(`AT+CWJAP="${this.ssid}","${this.password}"`, '連接中...', 'success');
    
    // 模擬連接過程
    setTimeout(() => {
      if (Math.random() > 0.1) { // 90%成功率
        this.wifiState = WiFiState.CONNECTED;
        this.currentSSID = this.ssid;
        this.signalStrength = 85;
        this.stats.lastConnectedTime = Date.now();
        this.addResponse(`AT+CWJAP="${this.ssid}","${this.password}"`, 'WIFI CONNECTED\nWIFI GOT IP\nOK', 'success');
        
        // 獲取IP地址
        setTimeout(() => {
          this.getIPAddress();
        }, 500);
      } else {
        this.wifiState = WiFiState.ERROR;
        this.addResponse(`AT+CWJAP="${this.ssid}","${this.password}"`, 'ERROR\nFAIL', 'error');
      }
    }, 3000);
  }
  
  // 斷開WiFi連接
  disconnectWiFi() {
    this.wifiState = WiFiState.DISCONNECTED;
    this.currentSSID = '';
    this.ipAddress = '';
    this.tcpConnected = false;
    this.addResponse('AT+CWQAP', 'OK', 'success');
  }
  
  // 獲取IP地址
  getIPAddress() {
    this.addResponse('AT+CIFSR', '查詢IP地址...', 'success');
    
    setTimeout(() => {
      const response = `+CIFSR:STAIP,"${this.ipAddress}"\n+CIFSR:STAMAC,"${this.macAddress}"\nOK`;
      this.addResponse('AT+CIFSR', response, 'success');
    }, 500);
  }
  
  // 建立TCP連接
  establishTCPConnection() {
    if (!this.serverIP.trim() || !this.serverPort) {
      this.showToast('請配置服務器地址和端口');
      return;
    }
    
    this.addResponse(`AT+CIPSTART="TCP","${this.serverIP}",${this.serverPort}`, '連接中...', 'success');
    
    setTimeout(() => {
      if (Math.random() > 0.15) { // 85%成功率
        this.tcpConnected = true;
        this.connectionId = 0;
        this.addResponse(`AT+CIPSTART="TCP","${this.serverIP}",${this.serverPort}`, 'CONNECT\nOK', 'success');
      } else {
        this.addResponse(`AT+CIPSTART="TCP","${this.serverIP}",${this.serverPort}`, 'ERROR\nCLOSED', 'error');
      }
    }, 2000);
  }
  
  // 關閉TCP連接
  closeTCPConnection() {
    this.tcpConnected = false;
    this.addResponse('AT+CIPCLOSE', '0,CLOSED\nOK', 'success');
  }
  
  // 發送數據
  sendData() {
    if (!this.tcpConnected) {
      this.showToast('請先建立TCP連接');
      return;
    }
    
    const testData = 'Hello,WiFi! ' + Date.now();
    const length = testData.length;
    
    this.addResponse(`AT+CIPSEND=${length}`, '>', 'success');
    
    setTimeout(() => {
      // 發送數據
      this.addResponse(testData, 'SEND OK', 'success');
      this.stats.bytesSent += length;
      
      // 模擬接收響應
      setTimeout(() => {
        const response = `+IPD,${length}:${testData}`;
        this.receivedData = response;
        this.stats.bytesReceived += length;
        this.addResponse('', response, 'success');
      }, 500);
    }, 1000);
  }
  
  // 發送AT指令
  sendATCommand() {
    const cmd = this.currentCommand.trim();
    if (!cmd) {
      this.showToast('請輸入AT指令');
      return;
    }
    
    // 保存到歷史記錄
    this.commandHistory.unshift(cmd);
    if (this.commandHistory.length > 20) {
      this.commandHistory.pop();
    }
    
    // 發送指令
    this.addResponse(cmd, '處理中...', 'success');
    this.stats.totalCommands++;
    
    // 模擬響應
    setTimeout(() => {
      this.simulateATResponse(cmd);
    }, 500 + Math.random() * 1000);
    
    this.currentCommand = '';
  }
  
  // 模擬AT響應
  simulateATResponse(command: string) {
    let response = '';
    let status: 'success' | 'error' | 'timeout' = 'success';
    
    if (command === 'AT') {
      response = 'OK';
    } else if (command === 'AT+RST') {
      response = 'OK';
      setTimeout(() => {
        this.wifiState = WiFiState.DISCONNECTED;
        this.tcpConnected = false;
      }, 1000);
    } else if (command === 'AT+GMR') {
      response = 'AT version:1.7.0.0\nSDK version:3.0.0\ncompile time:Jan 10 2023\nOK';
    } else if (command.startsWith('AT+CWMODE=')) {
      const mode = command.charAt(10);
      response = 'OK';
      this.connectionMode = mode === '2' ? 'AP' : 'STA';
    } else if (command === 'AT+CWLAP') {
      response = this.formatScanResults();
    } else if (command.startsWith('AT+CWJAP')) {
      response = 'WIFI CONNECTED\nWIFI GOT IP\nOK';
      this.wifiState = WiFiState.CONNECTED;
    } else if (command === 'AT+CWQAP') {
      response = 'OK';
      this.wifiState = WiFiState.DISCONNECTED;
    } else if (command === 'AT+CWJAP?') {
      if (this.wifiState === WiFiState.CONNECTED) {
        response = `+CWJAP:"${this.currentSSID}","${this.macAddress}",1,${this.signalStrength},0,0\nOK`;
      } else {
        response = 'No AP\nOK';
      }
    } else if (command.startsWith('AT+CIPSTART')) {
      response = 'CONNECT\nOK';
      this.tcpConnected = true;
    } else if (command === 'AT+CIPCLOSE') {
      response = '0,CLOSED\nOK';
      this.tcpConnected = false;
    } else if (command.startsWith('AT+CIPSEND=')) {
      response = '>\nSEND OK';
    } else if (command === 'AT+CIFSR') {
      response = `+CIFSR:STAIP,"${this.ipAddress}"\n+CIFSR:STAMAC,"${this.macAddress}"\nOK`;
    } else {
      // 默認響應
      response = Math.random() > 0.2 ? 'OK' : 'ERROR';
      status = response === 'OK' ? 'success' : 'error';
    }
    
    // 更新響應
    const lastIndex = this.atResponses.length - 1;
    if (lastIndex >= 0) {
      this.atResponses[lastIndex] = {
        ...this.atResponses[lastIndex],
        response: response,
        status: status
      };
    }
  }
  
  // 添加響應記錄
  addResponse(command: string, response: string, status: 'success' | 'error' | 'timeout') {
    this.atResponses.unshift({
      timestamp: Date.now(),
      command: command,
      response: response,
      status: status
    });
    
    if (this.atResponses.length > 50) {
      this.atResponses.pop();
    }
  }
  
  // 清空響應記錄
  clearResponses() {
    this.atResponses = [];
  }
  
  // 選擇網絡
  selectNetwork(index: number) {
    this.selectedNetworkIndex = index;
    const network = this.wifiNetworks[index];
    if (network) {
      this.ssid = network.ssid;
    }
  }
  
  // 獲取WiFi狀態顏色
  getWiFiColor(): string {
    switch (this.wifiState) {
      case WiFiState.CONNECTED: return '#4CAF50';
      case WiFiState.CONNECTING: return '#FFC107';
      case WiFiState.SCANNING: return '#2196F3';
      case WiFiState.ERROR: return '#F44336';
      default: return '#757575';
    }
  }
  
  // 獲取WiFi狀態文本
  getWiFiText(): string {
    switch (this.wifiState) {
      case WiFiState.CONNECTED: return '已連接';
      case WiFiState.CONNECTING: return '連接中';
      case WiFiState.SCANNING: return '掃描中';
      case WiFiState.ERROR: return '連接錯誤';
      default: return '未連接';
    }
  }
  
  // 獲取信號強度圖標
  getSignalIcon(level: number): string {
    if (level >= 80) return '📶';
    if (level >= 60) return '📶';
    if (level >= 40) return '📶';
    if (level >= 20) return '📶';
    return '📶';
  }
  
  // 獲取安全類型文本
  getSecurityText(type: number): string {
    switch (type) {
      case 1: return 'WEP';
      case 2: return 'WPA-PSK';
      case 3: return 'WPA2-PSK';
      case 4: return 'WPA/WPA2';
      default: return '開放';
    }
  }
  
  // 顯示提示
  showToast(message: string) {
    console.log('Toast:', message);
  }
  
  build() {
    Column({ space: 0 }) {
      // 頂部狀態欄
      Row({ space: 12 }) {
        // WiFi狀態
        Row({ space: 8 }) {
          Circle({ width: 12, height: 12 })
            .fill(this.getWiFiColor())
          
          Column({ space: 2 }) {
            Text(this.getWiFiText())
              .fontSize(14)
              .fontColor(this.getWiFiColor())
            
            if (this.wifiState === WiFiState.CONNECTED) {
              Text(this.currentSSID)
                .fontSize(10)
                .fontColor('#666666')
            }
          }
        }
        .layoutWeight(1)
        
        // 連接信息
        if (this.wifiState === WiFiState.CONNECTED) {
          Row({ space: 12 }) {
            Column({ space: 2 }) {
              Text(this.ipAddress)
                .fontSize(12)
                .fontColor('#2196F3')
              
              Text('IP地址')
                .fontSize(10)
                .fontColor('#666666')
            }
            
            Column({ space: 2 }) {
              Text(this.signalStrength + '%')
                .fontSize(12)
                .fontColor('#FF9800')
              
              Text('信號強度')
                .fontSize(10)
                .fontColor('#666666')
            }
            
            if (this.tcpConnected) {
              Badge({
                count: 'TCP已連接',
                position: BadgePosition.Right,
                color: '#4CAF50'
              })
            }
          }
        }
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
      .border({ bottom: { width: 1, color: '#E0E0E0' } })
      
      // 選項卡
      Row({ space: 0 }) {
        Button('指令控制')
          .fontSize(14)
          .fontColor(this.currentView === 'control' ? '#2196F3' : '#666666')
          .backgroundColor(this.currentView === 'control' ? '#E3F2FD' : 'transparent')
          .layoutWeight(1)
          .height(48)
          .borderRadius(0)
          .onClick(() => { this.currentView = 'control'; })
        
        Button('網絡管理')
          .fontSize(14)
          .fontColor(this.currentView === 'network' ? '#2196F3' : '#666666')
          .backgroundColor(this.currentView === 'network' ? '#E3F2FD' : 'transparent')
          .layoutWeight(1)
          .height(48)
          .borderRadius(0)
          .onClick(() => { this.currentView = 'network'; })
        
        Button('TCP通信')
          .fontSize(14)
          .fontColor(this.currentView === 'tcp' ? '#2196F3' : '#666666')
          .backgroundColor(this.currentView === 'tcp' ? '#E3F2FD' : 'transparent')
          .layoutWeight(1)
          .height(48)
          .borderRadius(0)
          .onClick(() => { this.currentView = 'tcp'; })
      }
      .width('100%')
      .border({ bottom: { width: 1, color: '#E0E0E0' } })
      
      // 內容區域
      Scroll() {
        Column({ space: 16 }) {
          // 指令控制視圖
          if (this.currentView === 'control') {
            // AT指令輸入
            Column({ space: 8 }) {
              Row({ space: 8 }) {
                Text('📟')
                  .fontSize(20)
                
                Text('AT指令控制枱')
                  .fontSize(16)
                  .fontWeight(FontWeight.Medium)
                  .fontColor('#333333')
              }
              
              Row({ space: 8 }) {
                TextInput({ text: this.currentCommand })
                  .layoutWeight(1)
                  .fontSize(14)
                  .backgroundColor('#F5F5F5')
                  .onChange((value: string) => {
                    this.currentCommand = value;
                  })
                
                Button('發送')
                  .fontSize(14)
                  .fontColor('#FFFFFF')
                  .backgroundColor('#2196F3')
                  .padding({ left: 16, right: 16 })
                  .height(40)
                  .borderRadius(20)
                  .onClick(() => {
                    this.sendATCommand();
                  })
              }
              
              // 常用指令快捷按鈕
              Scroll(.horizontal) {
                Row({ space: 8 }) {
                  ForEach(this.wifiCommands.slice(0, 10), (cmd: any) => {
                    Button(cmd.name)
                      .fontSize(12)
                      .fontColor('#2196F3')
                      .backgroundColor('#E3F2FD')
                      .padding({ left: 12, right: 12, top: 6, bottom: 6 })
                      .borderRadius(16)
                      .onClick(() => {
                        this.currentCommand = cmd.cmd;
                      })
                  })
                }
                .padding({ top: 8, bottom: 8 })
              }
              .scrollable(ScrollDirection.Horizontal)
            }
            .padding(16)
            .backgroundColor('#FFFFFF')
            .borderRadius(12)
            .margin({ top: 12, left: 16, right: 16 })
            
            // 響應記錄
            Column({ space: 8 }) {
              Row({ space: 8 }) {
                Text('📥')
                  .fontSize(20)
                
                Text('響應記錄')
                  .fontSize(16)
                  .fontWeight(FontWeight.Medium)
                  .fontColor('#333333')
                
                Text(`(${this.atResponses.length})`)
                  .fontSize(12)
                  .fontColor('#666666')
                
                Row({ space: 8 })
                  .layoutWeight(1)
                
                Button('清空')
                  .fontSize(12)
                  .fontColor('#F44336')
                  .backgroundColor(Color.Transparent)
                  .onClick(() => {
                    this.clearResponses();
                  })
              }
              
              // 響應列表
              Column({ space: 4 }) {
                ForEach(this.atResponses.slice(0, 10), (response: ATResponse, index: number) => {
                  this.buildResponseItem(response, index);
                })
              }
              .height(300)
              .border({ width: 1, color: '#E0E0E0' })
              .borderRadius(8)
              .padding(8)
            }
            .padding(16)
            .backgroundColor('#FFFFFF')
            .borderRadius(12)
            .margin({ left: 16, right: 16 })
          }
          
          // 網絡管理視圖
          if (this.currentView === 'network') {
            Column({ space: 16 }) {
              // WiFi連接設置
              Column({ space: 12 }) {
                Row({ space: 8 }) {
                  Text('📡')
                    .fontSize(20)
                  
                  Text('WiFi連接')
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                    .fontColor('#333333')
                }
                
                Column({ space: 8 }) {
                  Text('WiFi名稱 (SSID)')
                    .fontSize(14)
                    .fontColor('#666666')
                  
                  TextInput({ text: this.ssid })
                    .width('100%')
                    .fontSize(14)
                    .backgroundColor('#F5F5F5')
                    .onChange((value: string) => {
                      this.ssid = value;
                    })
                }
                
                Column({ space: 8 }) {
                  Row({ space: 8 }) {
                    Text('WiFi密碼')
                      .fontSize(14)
                      .fontColor('#666666')
                      .layoutWeight(1)
                    
                    Button(this.showPassword ? '隱藏' : '顯示')
                      .fontSize(12)
                      .fontColor('#2196F3')
                      .backgroundColor(Color.Transparent)
                      .onClick(() => {
                        this.showPassword = !this.showPassword;
                      })
                  }
                  
                  TextInput({ text: this.password })
                    .width('100%')
                    .fontSize(14)
                    .backgroundColor('#F5F5F5')
                    .type(this.showPassword ? InputType.Normal : InputType.Password)
                    .onChange((value: string) => {
                      this.password = value;
                    })
                }
                
                Row({ space: 12 }) {
                  Button('掃描網絡')
                    .fontSize(14)
                    .fontColor('#2196F3')
                    .backgroundColor('#E3F2FD')
                    .layoutWeight(1)
                    .height(48)
                    .borderRadius(24)
                    .onClick(() => {
                      this.scanNetworks();
                    })
                  
                  if (this.wifiState === WiFiState.CONNECTED) {
                    Button('斷開連接')
                      .fontSize(14)
                      .fontColor('#F44336')
                      .backgroundColor('#FFEBEE')
                      .layoutWeight(1)
                      .height(48)
                      .borderRadius(24)
                      .onClick(() => {
                        this.disconnectWiFi();
                      })
                  } else {
                    Button('連接WiFi')
                      .fontSize(14)
                      .fontColor('#FFFFFF')
                      .backgroundColor('#4CAF50')
                      .layoutWeight(1)
                      .height(48)
                      .borderRadius(24)
                      .onClick(() => {
                        this.connectToWiFi();
                      })
                  }
                }
              }
              .padding(16)
              .backgroundColor('#FFFFFF')
              .borderRadius(12)
              
              // 可用網絡列表
              Column({ space: 8 }) {
                Row({ space: 8 }) {
                  Text('📶')
                    .fontSize(20)
                  
                  Text('可用網絡')
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                    .fontColor('#333333')
                  
                  Text(`(${this.wifiNetworks.length})`)
                    .fontSize(12)
                    .fontColor('#666666')
                }
                
                Column({ space: 8 }) {
                  ForEach(this.wifiNetworks, (network: WiFiNetwork, index: number) => {
                    this.buildNetworkItem(network, index);
                  })
                }
              }
              .padding(16)
              .backgroundColor('#FFFFFF')
              .borderRadius(12)
            }
            .padding(16)
          }
          
          // TCP通信視圖
          if (this.currentView === 'tcp') {
            Column({ space: 16 }) {
              // 服務器設置
              Column({ space: 12 }) {
                Row({ space: 8 }) {
                  Text('🌐')
                    .fontSize(20)
                  
                  Text('服務器設置')
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                    .fontColor('#333333')
                }
                
                Row({ space: 12 }) {
                  Column({ space: 8 }) {
                    Text('服務器IP')
                      .fontSize(14)
                      .fontColor('#666666')
                    
                    TextInput({ text: this.serverIP })
                      .width('100%')
                      .fontSize(14)
                      .backgroundColor('#F5F5F5')
                      .onChange((value: string) => {
                        this.serverIP = value;
                      })
                  }
                  
                  Column({ space: 8 }) {
                    Text('端口')
                      .fontSize(14)
                      .fontColor('#666666')
                    
                    TextInput({ text: this.serverPort.toString() })
                      .width(100)
                      .fontSize(14)
                      .backgroundColor('#F5F5F5')
                      .onChange((value: string) => {
                        this.serverPort = parseInt(value) || 8080;
                      })
                  }
                }
                
                Row({ space: 12 }) {
                  if (this.tcpConnected) {
                    Button('斷開TCP')
                      .fontSize(14)
                      .fontColor('#F44336')
                      .backgroundColor('#FFEBEE')
                      .layoutWeight(1)
                      .height(48)
                      .borderRadius(24)
                      .onClick(() => {
                        this.closeTCPConnection();
                      })
                  } else {
                    Button('連接TCP')
                      .fontSize(14)
                      .fontColor('#FFFFFF')
                      .backgroundColor('#2196F3')
                      .layoutWeight(1)
                      .height(48)
                      .borderRadius(24)
                      .onClick(() => {
                        this.establishTCPConnection();
                      })
                      .enabled(this.wifiState === WiFiState.CONNECTED)
                  }
                  
                  Button('發送測試數據')
                    .fontSize(14)
                    .fontColor('#FFFFFF')
                    .backgroundColor('#4CAF50')
                    .layoutWeight(1)
                    .height(48)
                    .borderRadius(24)
                    .onClick(() => {
                      this.sendData();
                    })
                    .enabled(this.tcpConnected)
                }
              }
              .padding(16)
              .backgroundColor('#FFFFFF')
              .borderRadius(12)
              
              // 數據通信
              Column({ space: 8 }) {
                Row({ space: 8 }) {
                  Text('📨')
                    .fontSize(20)
                  
                  Text('數據通信')
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                    .fontColor('#333333')
                }
                
                Column({ space: 8 }) {
                  Text('接收到的數據')
                    .fontSize(14)
                    .fontColor('#666666')
                  
                  Text(this.receivedData || '暫無數據')
                    .fontSize(12)
                    .fontColor('#333333')
                    .width('100%')
                    .padding(12)
                    .backgroundColor('#F5F5F5')
                    .borderRadius(8)
                    .height(100)
                }
                
                // 統計信息
                Grid() {
                  GridItem() {
                    this.buildStatCard('發送字節', this.stats.bytesSent.toString(), '#2196F3');
                  }
                  
                  GridItem() {
                    this.buildStatCard('接收字節', this.stats.bytesReceived.toString(), '#4CAF50');
                  }
                  
                  GridItem() {
                    this.buildStatCard('指令數', this.stats.totalCommands.toString(), '#FF9800');
                  }
                  
                  GridItem() {
                    this.buildStatCard('連接時長', this.stats.connectionDuration + '秒', '#9C27B0');
                  }
                }
                .columnsTemplate('1fr 1fr')
                .rowsTemplate('1fr 1fr')
                .columnsGap(12)
                .rowsGap(12)
              }
              .padding(16)
              .backgroundColor('#FFFFFF')
              .borderRadius(12)
            }
            .padding(16)
          }
        }
      }
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Auto)
      .margin({ bottom: 60 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
  
  // 構建響應項
  @Builder
  buildResponseItem(response: ATResponse, index: number) {
    Column({ space: 4 }) {
      Row({ space: 8 }) {
        Text(new Date(response.timestamp).toLocaleTimeString())
          .fontSize(10)
          .fontColor('#999999')
        
        Circle({ width: 6, height: 6 })
          .fill(response.status === 'success' ? '#4CAF50' : 
                response.status === 'error' ? '#F44336' : '#FF9800')
      }
      
      Text('> ' + response.command)
        .fontSize(12)
        .fontColor('#2196F3')
        .fontFamily('monospace')
      
      if (response.response) {
        Text(response.response.split('\n').map(line => '< ' + line).join('\n'))
          .fontSize(12)
          .fontColor('#4CAF50')
          .fontFamily('monospace')
          .margin({ top: 4 })
      }
    }
    .width('100%')
    .padding(8)
    .backgroundColor(index % 2 === 0 ? '#F9F9F9' : '#FFFFFF')
    .borderRadius(4)
  }
  
  // 構建網絡項
  @Builder
  buildNetworkItem(network: WiFiNetwork, index: number) {
    Row({ space: 12 }) {
      Column({ space: 4 }) {
        Text(this.getSignalIcon(network.signalLevel))
          .fontSize(16)
        
        Text(network.signalLevel + '%')
          .fontSize(10)
          .fontColor('#666666')
      }
      
      Column({ space: 4 }) {
        Row({ space: 8 }) {
          Text(network.ssid)
            .fontSize(14)
            .fontWeight(FontWeight.Medium)
            .fontColor('#333333')
          
          Badge({
            count: this.getSecurityText(network.securityType),
            position: BadgePosition.Right,
            color: '#2196F3',
            style: { fontSize: 10 }
          })
        }
        
        Text(network.bssid)
          .fontSize(11)
          .fontColor('#666666')
      }
      .layoutWeight(1)
      
      if (this.selectedNetworkIndex === index) {
        Icon({ src: $r('app.media.ic_check'), size: { width: 20, height: 20 } })
          .fill('#4CAF50')
      }
    }
    .width('100%')
    .padding(12)
    .backgroundColor(this.selectedNetworkIndex === index ? '#E8F5E9' : '#F5F5F5')
    .borderRadius(8)
    .onClick(() => {
      this.selectNetwork(index);
    })
  }
  
  // 構建統計卡片
  @Builder
  buildStatCard(title: string, value: string, color: string) {
    Column({ space: 6 }) {
      Text(value)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(color)
      
      Text(title)
        .fontSize(10)
        .fontColor('#666666')
    }
    .width('100%')
    .padding(12)
    .backgroundColor('#FFFFFF')
    .borderRadius(8)
    .border({ width: 1, color: '#E0E0E0' })
  }
}

想入門鴻蒙開發又怕花冤枉錢?別錯過!現在能免費系統學 -- 從 ArkTS 面向對象核心的類和對象、繼承多態,到吃透鴻蒙開發關鍵技能,還能衝刺鴻蒙基礎 +高級開發者證書,更驚喜的是考證成功還送好禮!快加入我的鴻蒙班,一起從入門到精通,班級鏈接:點擊https://developer.huawei.com/consumer/cn/training/classDetail/b7365031334e4353a9a0fd6785bb0791?type=1?ha_source=hmosclass&ha_sourceId=89000248免費進入