From bd1b3a96128cad66a2d87b96513fc4fae9252411 Mon Sep 17 00:00:00 2001
From: Allen <caizz520@gmail.com>
Date: Wed, 30 Apr 2025 18:42:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=9C=A8=E7=BA=BF=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=EF=BC=8C=E4=BB=A5=E5=8F=8A=E5=A2=9E=E5=8A=A0=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E8=8F=9C=E5=8D=95=E5=90=8E=E7=9A=84=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.css | 14 +++++++++++++-
 src/index.ts  | 48 +++++++++++++++++++++++++++++++++---------------
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/index.css b/src/index.css
index 301a03f..957ff21 100644
--- a/src/index.css
+++ b/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 {
diff --git a/src/index.ts b/src/index.ts
index 06c6c3d..d3e3ea7 100644
--- a/src/index.ts
+++ b/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 = `./assets/list.png`;
+    icon.src = item.IconConfig._1x.Default;
     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);