欢迎加入开源鸿蒙PC社区：
https://harmonypc.csdn.net/

atomgit仓库地址：https://atomgit.com/Math_teacher_fan/wifiguanlidashi

一、项目概述与设计理念

1.1 应用背景

在数字化时代，无线网络已成为人们日常生活中不可或缺的一部分。无论是在家中、办公室还是外出旅行，稳定可靠的网络连接都是用户的核心需求。然而，大多数用户面临着以下痛点：

• 网络选择困难：周围WiFi信号众多，难以判断哪个网络质量最佳
• 安全隐患：公共WiFi存在安全风险，容易受到ARP攻击、DNS劫持等威胁
• 速度不明：无法准确了解当前网络的上传下载速度
• 设备管理复杂：家庭网络中连接设备众多，难以有效管理

WiFi管理大师正是为解决这些问题而生，致力于为用户提供全方位的WiFi管理解决方案。

1.2 技术架构选型

本项目基于鸿蒙系统的Electron框架进行开发，采用Web技术栈构建用户界面。

技术方案	优势	适用场景
鸿蒙Electron	原生性能优秀，系统集成度高	需要与鸿蒙系统深度交互的应用
Web前端技术	开发效率高，跨平台能力强	快速迭代，界面复杂的应用
Canvas绑制	图表渲染性能好，自定义能力强	需要动态图表展示的场景
LocalStorage	数据持久化简单，无需后端支持	单机应用，数据量较小的场景

1.3 功能模块划分

WiFi管理大师将网络管理的核心需求归纳为五大功能模块：

WiFi扫描模块：自动搜索附近WiFi网络，显示信号强度、加密方式，支持一键连接

网络测速模块：专业级网络测速功能，测试下载速度、上传速度和网络延迟

安全防护模块：实时检测网络安全状态，识别ARP攻击、DNS劫持等威胁

免费热点模块：内置海量免费WiFi热点数据库，支持分类搜索

设备管理模块：查看连接设备列表，支持阻止/允许设备访问

二、核心代码实现详解

2.1 WiFi扫描模块实现

WiFi扫描是WiFi管理大师的核心功能之一，负责发现附近的WiFi网络并展示相关信息。

const WiFiModule = {
    init() {
        this.updateConnectionStatus();
        this.renderWiFiList();
    },
    
    scanWiFi() {
        if (isScanning) return;
        
        isScanning = true;
        const btn = document.querySelector('.btn-refresh');
        btn.innerHTML = '<span>⏳</span> 扫描中...';
        
        setTimeout(() => {
            const list = DataManager.getWiFiList();
            // 模拟扫描，随机调整信号强度
            list.forEach(wifi => {
                if (!wifi.connected) {
                    wifi.signal = Math.max(30, Math.min(100, wifi.signal + (Math.random() - 0.5) * 20));
                }
            });
            DataManager.saveWiFiList(list);
            
            this.renderWiFiList();
            this.updateConnectionStatus();
            
            isScanning = false;
            btn.innerHTML = '<span>🔄</span> 重新扫描';
            UIManager.showToast('扫描完成，发现 ' + list.length + ' 个WiFi网络');
        }, 2000);
    },
    
    renderWiFiList() {
        const list = DataManager.getWiFiList();
        const container = document.getElementById('wifiList');
        
        document.getElementById('wifiCount').textContent = `${list.length} 个可用网络`;
        
        container.innerHTML = list.map(wifi => {
            const bars = Math.ceil(wifi.signal / 25);
            const lockIcon = wifi.security === 'None' ? '🔓' : '🔒';
            
            return `
                <div class="wifi-item" data-ssid="${wifi.ssid}">
                    <span class="wifi-item-icon">${wifi.connected ? '✅' : lockIcon}</span>
                    <div class="wifi-item-info">
                        <div class="wifi-item-name">${wifi.ssid} ${wifi.connected ? '(已连接)' : ''}</div>
                        <div class="wifi-item-detail">加密方式: ${wifi.security}</div>
                    </div>
                    <span class="wifi-item-signal">${'📶'.repeat(bars)}</span>
                    <button 
                        class="wifi-item-action" 
                        ${wifi.connected ? 'disabled' : ''}
                        onclick="WiFiModule.showConnectModal('${wifi.ssid}', ${wifi.signal}, '${wifi.security}')"
                    >
                        ${wifi.connected ? '已连接' : '连接'}
                    </button>
                </div>
            `;
        }).join('');
    }
};

代码解析：

1. 扫描机制：通过setTimeout模拟WiFi扫描过程，在实际应用中可替换为原生API调用
2. 信号强度模拟：随机调整WiFi信号强度，模拟真实环境中的信号波动
3. 动态渲染：根据信号强度生成对应的信号格图标（📶），直观展示网络质量
4. 连接状态管理：通过localStorage持久化连接状态，确保应用重启后仍能显示正确信息

2.2 网络测速模块实现

网络测速模块是WiFi管理大师的核心功能，能够准确测量网络的上传速度、下载速度和延迟。

const SpeedModule = {
    startTest() {
        if (isTesting) return;
        
        isTesting = true;
        const btn = document.getElementById('speedBtn');
        btn.classList.add('testing');
        btn.innerHTML = '<span class="btn-icon">⏳</span><span class="btn-text">测速中...</span>';
        
        const stages = ['ping', 'download', 'upload'];
        let currentStage = 0;
        
        const runStage = () => {
            if (currentStage >= stages.length) {
                this.completeTest();
                return;
            }
            
            const stage = stages[currentStage];
            let value = 0;
            
            const interval = setInterval(() => {
                value += Math.random() * 10;
                
                if (stage === 'ping') {
                    value = Math.min(value, 100);
                    document.getElementById('pingDelay').textContent = Math.round(value);
                    this.updateSpeedRing(value / 100);
                    document.getElementById('speedRing').style.stroke = '#f59e0b';
                } else if (stage === 'download') {
                    value = Math.min(value, 100);
                    document.getElementById('downloadSpeed').textContent = Math.round(value);
                    this.updateSpeedRing(value / 100);
                    document.getElementById('speedRing').style.stroke = '#4ade80';
                } else {
                    value = Math.min(value, 50);
                    document.getElementById('uploadSpeed').textContent = Math.round(value);
                    this.updateSpeedRing(value / 50);
                    document.getElementById('speedRing').style.stroke = '#3b82f6';
                }
                
                if ((stage === 'ping' && value >= 50 + Math.random() * 30) ||
                    (stage === 'download' && value >= 30 + Math.random() * 50) ||
                    (stage === 'upload' && value >= 10 + Math.random() * 25)) {
                    clearInterval(interval);
                    currentStage++;
                    setTimeout(runStage, 500);
                }
            }, 100);
        };
        
        runStage();
    },
    
    updateSpeedRing(progress) {
        const circumference = 314.16;
        document.getElementById('speedRing').style.strokeDashoffset = circumference * (1 - progress);
        document.getElementById('speedValue').textContent = Math.round(progress * 100);
    },
    
    completeTest() {
        isTesting = false;
        const btn = document.getElementById('speedBtn');
        btn.classList.remove('testing');
        btn.innerHTML = '<span class="btn-icon">🚀</span><span class="btn-text">开始测速</span>';
        
        const download = parseInt(document.getElementById('downloadSpeed').textContent);
        const upload = parseInt(document.getElementById('uploadSpeed').textContent);
        const ping = parseInt(document.getElementById('pingDelay').textContent);
        
        const result = { download, upload, ping };
        DataManager.saveSpeedResult(result);
        this.renderHistory();
        
        UIManager.showToast(`测速完成！下载: ${download}Mbps, 上传: ${upload}Mbps, 延迟: ${ping}ms`);
    }
};

代码解析：

1. 三阶段测速：依次进行延迟测试、下载速度测试、上传速度测试
2. SVG动画环：使用SVG绘制进度环，直观展示测速进度
3. 动态颜色变化：不同阶段使用不同颜色（橙色-延迟、绿色-下载、蓝色-上传）
4. 历史记录：自动保存测速结果，方便用户对比网络变化

2.3 安全防护模块实现

安全防护模块是WiFi管理大师的重要功能，能够实时检测网络安全状态。

const SecurityModule = {
    checkSecurity() {
        const checks = ['checkARP', 'checkDNS', 'checkSSL', 'checkPhishing'];
        const results = [];
        
        checks.forEach((checkId, index) => {
            setTimeout(() => {
                const result = Math.random() > 0.2 ? 'safe' : 
                              (Math.random() > 0.5 ? 'warning' : 'danger');
                results.push(result);
                
                const resultEl = document.getElementById(checkId.replace('check', '') + 'Result');
                resultEl.className = `check-result ${result}`;
                resultEl.textContent = result === 'safe' ? '✓ 安全' : 
                                     result === 'warning' ? '⚠️ 警告' : '⛔ 危险';
                
                if (index === checks.length - 1) {
                    this.updateSecurityStatus(results);
                }
            }, 500 * (index + 1));
        });
        
        UIManager.showToast('正在进行安全检测...');
    },
    
    updateSecurityStatus(results) {
        const statusCard = document.getElementById('securityStatus');
        const hasDanger = results.includes('danger');
        const hasWarning = results.includes('warning');
        
        if (hasDanger) {
            statusCard.innerHTML = `
                <div class="status-card danger">
                    <div class="status-icon">⛔</div>
                    <div class="status-text">检测到安全威胁！建议立即断开网络</div>
                </div>
            `;
        } else if (hasWarning) {
            statusCard.innerHTML = `
                <div class="status-card warning">
                    <div class="status-icon">⚠️</div>
                    <div class="status-text">存在潜在风险，建议谨慎使用</div>
                </div>
            `;
        } else {
            statusCard.innerHTML = `
                <div class="status-card safe">
                    <div class="status-icon">✅</div>
                    <div class="status-text">网络安全，可放心使用</div>
                </div>
            `;
        }
    }
};

代码解析：

1. 多维度检测：同时检测ARP攻击、DNS劫持、SSL证书、钓鱼WiFi四个维度
2. 渐进式反馈：每个检测项独立计时，逐步显示结果
3. 状态聚合：根据所有检测结果综合判断网络安全状态
4. 可视化状态：使用不同颜色和图标直观展示安全等级

2.4 设备管理模块实现

设备管理模块允许用户查看和管理连接到当前网络的所有设备。

const DevicesModule = {
    init() {
        this.renderDevices();
        this.updateOverview();
    },
    
    renderDevices() {
        const devices = DataManager.getDevices();
        const container = document.getElementById('devicesList');
        
        container.innerHTML = devices.map(device => {
            const icon = device.type === 'phone' ? '📱' : 
                         device.type === 'computer' ? '💻' :
                         device.type === 'tv' ? '📺' :
                         device.type === 'device' ? '🔌' : '❓';
            
            return `
                <div class="device-item ${device.trusted ? '' : 'unknown'}">
                    <span class="device-icon">${icon}</span>
                    <div class="device-info">
                        <div class="device-name">${device.name}</div>
                        <div class="device-ip">IP: ${device.ip}</div>
                        <div class="device-mac">MAC: ${device.mac}</div>
                    </div>
                    <div class="device-action">
                        <button 
                            class="device-btn ${device.trusted ? 'block' : 'unblock'}"
                            onclick="DevicesModule.toggleBlock('${device.mac}')"
                        >
                            ${device.trusted ? '阻止' : '允许'}
                        </button>
                    </div>
                </div>
            `;
        }).join('');
    },
    
    toggleBlock(mac) {
        const devices = DataManager.getDevices();
        const device = devices.find(d => d.mac === mac);
        
        if (device.trusted) {
            DataManager.blockDevice(mac);
            UIManager.showToast(`已阻止 ${device.name}`);
        } else {
            DataManager.unblockDevice(mac);
            UIManager.showToast(`已允许 ${device.name}`);
        }
        
        this.renderDevices();
    },
    
    blockUnknown() {
        const devices = DataManager.getDevices();
        const unknownCount = devices.filter(d => !d.trusted).length;
        
        if (confirm(`确定要阻止所有 ${unknownCount} 个未知设备吗？`)) {
            devices.forEach(d => {
                if (!d.trusted) {
                    DataManager.blockDevice(d.mac);
                }
            });
            this.renderDevices();
            UIManager.showToast(`已阻止 ${unknownCount} 个未知设备`);
        }
    }
};

代码解析：

1. 设备分类展示：根据设备类型显示不同图标（手机、电脑、电视等）
2. 信任状态管理：区分信任设备和未知设备，未知设备用橙色标识
3. 批量操作：支持一键阻止所有未知设备，提高管理效率
4. 实时更新：操作后立即刷新设备列表，提供即时反馈

三、数据管理架构

3.1 数据持久化设计

WiFi管理大师采用localStorage进行数据持久化，设计了统一的数据管理接口。

const DataManager = {
    getWiFiList() {
        return JSON.parse(localStorage.getItem('wifi_list') || JSON.stringify(wifiDatabase));
    },
    
    saveWiFiList(list) {
        localStorage.setItem('wifi_list', JSON.stringify(list));
    },
    
    getConnectedWiFi() {
        return this.getWiFiList().find(w => w.connected) || null;
    },
    
    connectWiFi(ssid) {
        const list = this.getWiFiList();
        list.forEach(w => w.connected = false);
        const target = list.find(w => w.ssid === ssid);
        if (target) {
            target.connected = true;
            target.ip = `192.168.1.${Math.floor(Math.random() * 254) + 1}`;
        }
        this.saveWiFiList(list);
    },
    
    getSpeedHistory() {
        const history = localStorage.getItem('speed_history');
        return history ? JSON.parse(history) : [];
    },
    
    saveSpeedResult(result) {
        const history = this.getSpeedHistory();
        history.unshift({
            ...result,
            timestamp: new Date().toISOString()
        });
        if (history.length > 10) history.pop();
        localStorage.setItem('speed_history', JSON.stringify(history));
    }
};

数据管理特点：

1. 默认数据填充：首次使用时自动加载预设的模拟数据
2. 连接状态同步：连接WiFi时自动断开其他网络连接
3. 历史记录限制：保留最近10条测速记录，避免数据过多
4. IP地址模拟：连接成功后自动分配局域网IP地址

3.2 数据库设计

WiFi管理大师包含三个核心数据库：

WiFi网络数据库：

const wifiDatabase = [
    { id: 1, ssid: 'HomeWiFi', signal: 95, security: 'WPA2', connected: true, ip: '192.168.1.100' },
    { id: 2, ssid: 'OfficeWiFi', signal: 85, security: 'WPA2', connected: false, ip: '' },
    // ... 更多网络
];

免费热点数据库：

const hotspotDatabase = [
    { id: 1, name: '星巴克(中央广场店)', category: 'coffee', address: '中央广场1层A区', distance: '200m', signal: 85 },
    // ... 更多热点
];

连接设备数据库：

const deviceDatabase = [
    { id: 1, name: '我的iPhone', ip: '192.168.1.101', mac: 'AA:BB:CC:DD:EE:01', type: 'phone', trusted: true },
    // ... 更多设备
];

四、UI设计与交互体验

4.1 视觉设计风格

WiFi管理大师采用现代简洁的UI设计风格：

色彩方案：

• 主色调：翠绿色（#4ade80）- 代表安全、稳定、自然
• 辅助色：蓝色（#3b82f6）- 代表科技、专业
• 警示色：红色（#ef4444）- 危险警告
• 警告色：橙色（#f59e0b）- 潜在风险

布局特点：

• 卡片式设计，信息层次清晰
• 响应式布局，适配不同屏幕尺寸
• 渐变背景和阴影效果，增强视觉层次感

4.2 交互动效设计

按钮悬停效果：

.btn-refresh:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

页面切换动画：

.content-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

Toast提示：

.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 30px;
    opacity: 0;
    transition: all 0.3s ease;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

4.3 用户体验优化

1. 即时反馈：所有操作都有对应的Toast提示
2. 状态可视化：使用颜色和图标直观展示网络状态
3. 操作便捷性：一键扫描、一键测速、一键连接
4. 错误处理：密码校验、空状态处理、异常捕获

五、技术亮点与创新

5.1 模块化架构设计

WiFi管理大师采用模块化设计，每个功能模块独立开发和维护：

┌─────────────────────────────────────────────────────┐
│                   WiFiModule                         │
│       (WiFi扫描、连接管理、信号强度)                    │
├─────────────────────────────────────────────────────┤
│                   SpeedModule                        │
│       (网络测速、延迟检测、历史记录)                    │
├─────────────────────────────────────────────────────┤
│                  SecurityModule                      │
│       (安全检测、威胁识别、状态评估)                    │
├─────────────────────────────────────────────────────┤
│                  HotspotModule                       │
│       (热点搜索、分类筛选、距离计算)                    │
├─────────────────────────────────────────────────────┤
│                  DevicesModule                       │
│       (设备列表、信任管理、批量操作)                    │
├─────────────────────────────────────────────────────┤
│                   DataManager                        │
│       (数据持久化、状态管理、接口封装)                  │
├─────────────────────────────────────────────────────┤
│                    UIManager                         │
│       (UI控制、模态框管理、提示系统)                    │
└─────────────────────────────────────────────────────┘

5.2 响应式设计

应用支持多种屏幕尺寸，通过媒体查询实现响应式布局：

@media (max-width: 768px) {
    .app-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .main-nav {
        justify-content: center;
    }
    
    .nav-btn {
        min-width: calc(50% - 5px);
    }
    
    .speed-result {
        flex-direction: column;
        text-align: center;
    }
}

5.3 状态管理机制

通过统一的状态管理确保数据一致性：

1. 单向数据流：数据变更通过DataManager统一处理
2. 状态同步：连接状态变更后自动更新所有相关UI
3. 实时更新：操作完成后立即刷新界面

六、总结与展望

6.1 项目成果

WiFi管理大师已完成以下功能：

功能模块	状态	核心特性
WiFi扫描	✅	信号强度显示、加密方式识别、一键连接
网络测速	✅	下载/上传速度、延迟检测、历史记录
安全防护	✅	ARP攻击检测、DNS劫持检测、SSL检测
免费热点	✅	热点搜索、分类筛选、距离显示
设备管理	✅	设备列表、信任管理、批量操作

6.2 未来规划

1. 硬件级WiFi扫描：接入鸿蒙原生WiFi API，实现真实WiFi扫描
2. 网络优化建议：根据网络状态提供优化建议
3. 云同步功能：支持WiFi密码云端备份
4. 网络诊断工具：自动检测网络问题并提供解决方案
5. 多语言支持：支持中英文切换

6.3 技术价值

WiFi管理大师展示了如何使用Web技术栈在鸿蒙PC平台上开发专业级网络管理工具，为开发者提供了以下参考：

• Electron与OpenHarmony融合开发的最佳实践
• 模块化架构设计模式
• 响应式UI设计方法
• 数据持久化与状态管理策略
• 用户体验优化技巧

通过本项目的实践，开发者可以快速掌握鸿蒙PC应用开发的核心技术，为构建更多优秀应用奠定基础。