使用在线图标，以及增加点击菜单后的图标切换效果

src/index.css

@@ -82,11 +82,23 @@ body {
   align-items: center;
   padding: 12px 20px;
   cursor: pointer;
-  transition: background-color 0.3s;
+  transition: all 0.3s ease;
+  border-left: 3px solid transparent;
 }
 
 .menu-item:hover {
   background-color: #f5f5f5;
+  border-left-color: #3498db;
+}
+
+.menu-item.active {
+  background-color: #e3f2fd;
+  border-left-color: #2196f3;
+  color: #1976d2;
+}
+
+.menu-item.active .menu-icon {
+  filter: brightness(0.8);
 }
 
 .menu-icon {

src/index.ts

@@ -1,13 +1,25 @@
 import { WebviewTag } from "electron";
 
-// 菜单项接口
+// 菜单项
 interface MenuItem {
     ShowName: string;
     Url: string;
-    Icon: string;
+    IconConfig: IconConfig;
     Children: MenuItem[] | null;
 }
 
+// 图标配置
+interface IconConfig {
+    _1x: {
+        Default: string;
+        Selected: string;
+    };
+    _2x: {
+        Default: string;
+        Selected: string;
+    };
+}
+
 // API响应接口
 interface ApiResponse<T> {
     status: number;
@@ -57,13 +69,12 @@ async function getMenuList(): Promise<MenuItem[]> {
 }
 
 // 创建菜单项
-function createMenuItem(item: MenuItem): HTMLLIElement {
+function createMenuItem(item: MenuItem, menuList: MenuItem[]): HTMLLIElement {
     const li = document.createElement('li');
     li.className = 'menu-item';
 
     const icon = document.createElement('img');
-    //icon.src = `./assets/${item.Icon}`;
+    icon.src = item.IconConfig._1x.Default;
-    icon.src = `./assets/list.png`;
     icon.alt = item.ShowName;
     icon.className = 'menu-icon';
 
@@ -75,17 +86,24 @@ function createMenuItem(item: MenuItem): HTMLLIElement {
 
     if (item.Url) {
         li.addEventListener('click', async () => {
-            //(document.querySelector("webview") as WebviewElement).src = "https://www.baidu.com";
+            // 移除其他菜单项的选中状态和图标
-            //(document.querySelector("webview") as WebviewTag).src = item.Url;
+            document.querySelectorAll('.menu-item').forEach(menuItem => {
+                menuItem.classList.remove('active');
+                const menuIcon = menuItem.querySelector('.menu-icon') as HTMLImageElement;
+                if (menuIcon) {
+                    const menuItemData = menuList.find((m: MenuItem) => m.ShowName === menuItem.querySelector('span')?.textContent);
+                    if (menuItemData) {
+                        menuIcon.src = menuItemData.IconConfig._1x.Default;
+                    }
+                }
+            });
+            
+            // 添加当前菜单项的选中状态和图标
+            li.classList.add('active');
+            icon.src = item.IconConfig._1x.Selected;
 
-            // 需要明确url是否指定http协议或https协议，如果没有指定，则默认使用http协议。因为没有指定协议会导致webview无法加载。
             const url: string = item.Url.startsWith("http") ? item.Url : `http://${item.Url}`;
             
-            /**
-             * 无法访问的错误有很多种，但总的来说可以分为两大类：
-             * 1. 网络错误：DNS解析错误、连接超时、SSL证书错误等。
-             * 2. 服务器错误：服务器拒绝连接、服务器无响应、404、500等。
-             */
             const result = await window.electronAPI.checkUrl(url);
             if (result.ok && result.status >= 200 && result.status < 400) {
                 console.log('✅ URL 可访问:', result.status);
@@ -106,14 +124,14 @@ function renderMenu(menuList: MenuItem[]) {
     if (!menuContainer) return;
 
     menuList.forEach(item => {
-        const menuItem = createMenuItem(item);
+        const menuItem = createMenuItem(item, menuList);
         menuContainer.appendChild(menuItem);
 
         if (item.Children) {
             const subMenu = document.createElement('ul');
             subMenu.className = 'submenu';
             item.Children.forEach(child => {
-                const childItem = createMenuItem(child);
+                const childItem = createMenuItem(child, menuList);
                 subMenu.appendChild(childItem);
             });
             menuContainer.appendChild(subMenu);