增加悬停在最右侧垂直居中的Help图标

index.html

@@ -48,6 +48,8 @@
         </div>
     </div>
 
+    <!-- 帮助图标 -->
+    <img id="helpIcon" src="./assets/help.png" alt="帮助图标" class="help-icon">
     <script src="node_modules/electron-tabs/dist/electron-tabs.js"></script>
     <script type="module" src="./src/index.ts"></script>
 </body>

package.json

@@ -2,7 +2,7 @@
   "name": "china-telecom-app",
   "productName": "china-telecom-app",
   "version": "1.0.0",
-  "description": "My Electron application description",
+  "description": "China Telecom App",
   "main": ".vite/build/main.js",
   "scripts": {
     "start": "cross-env NODE_ENV=development electron-forge start",

src/index.css

@@ -191,3 +191,24 @@ body {
   height: 100%;
   width: 100%;
 }
+
+/* Help icon */
+.help-icon {
+  min-width: 32px;
+  min-height: 32px;
+  max-width: 64px;
+  max-height: 64px;
+  position: fixed;
+  top: 50%;
+  right: 20px;
+  transform: translateY(-50%);
+  z-index: 9999;
+  transition: transform 0.6s ease;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.help-icon:hover {
+  transform: translateY(-50%) scale(1.2) rotate(360deg);
+  opacity: 1;
+}

src/index.ts

@@ -228,6 +228,32 @@ async function getFaviconUrl(webview: Electron.WebviewTag): Promise<string> {
   return defaultFaviconUrl;
 }
 
+/**
+ * 绑定Help图标点击事件
+ */
+function bindHelpIconClickEvent(menuItem: MenuItem): void {
+  const helpIcon: HTMLImageElement = document.getElementById('helpIcon') as HTMLImageElement;
+  helpIcon.src = menuItem.IconConfig._1x.Default;
+  helpIcon.addEventListener('mouseenter', (event) => helpIcon.src = menuItem.IconConfig._1x.Selected);
+  helpIcon.addEventListener('mouseleave', () => helpIcon.src = menuItem.IconConfig._1x.Default);
+  helpIcon.addEventListener('click', async (event) => {
+    if (lastInvalidUrlResult) {
+      const helpDescrip: string = await window.electronAPI.getHelperDescripAsync(lastInvalidUrlResult.status.toString()) ?? `无法访问{URL}\r\n异常原因：${lastInvalidUrlResult.message ?? `status ${lastInvalidUrlResult.status}`}\r\n请联系技术支持。`;
+      showErrorModal(helpDescrip.replace('{URL}', lastInvalidUrlResult.url));
+    } else {
+      const tab: Tab | null = tabGroup.tabs.find(tab => (tab.webview as Electron.WebviewTag).getURL() === menuItem.Url);
+      if (tab) {
+        tab.activate();
+      } else {
+        const newTab: Tab | null = await addTabAsync(tabGroup, menuItem);
+        if (newTab) {
+          newTab.setPosition(0);
+        }
+      }
+    }
+  });
+}
+
 /**
  * 绑定logo点击事件
  */
@@ -262,6 +288,7 @@ function bindLogoutEvent(): void {
   }
 }
 
+let closeCount: number = 0;
 /**
  * 绑定错误弹窗事件
  */
@@ -270,17 +297,31 @@ function bindErrorModalEvent(): void {
   const closeErrorModal: HTMLButtonElement = document.getElementById('closeErrorModal') as HTMLButtonElement;
   const faultReporting: HTMLButtonElement = document.getElementById('faultReporting') as HTMLButtonElement;
 
-  faultReporting.addEventListener('click', () => faultReportingAsync());
+  faultReporting.addEventListener('click', async () => await faultReportingAsync());
 
   // Close button click event
   closeErrorModal.addEventListener('click', () => {
     errorModal.style.display = 'none';
+    closeCount++;
+
+    // 如果关闭次数大于等于2，则重置计数并且清空lastInvalidUrlResult
+    if (closeCount >= 2) {
+      closeCount = 0;
+      lastInvalidUrlResult = null;
+    }
   });
 
   // Click outside to close
   window.addEventListener('click', (event: Event) => {
     if (event.target === errorModal) {
       errorModal.style.display = 'none';
+      closeCount++;
+
+      // 如果关闭次数大于等于2，则重置计数并且清空lastInvalidUrlResult
+      if (closeCount >= 2) {
+        closeCount = 0;
+        lastInvalidUrlResult = null;
+      }
     }
   });
 }
@@ -317,6 +358,7 @@ async function faultReportingAsync(): Promise<void> {
 
       // 显示请求结果
       if (result.ok) {
+        lastInvalidUrlResult = null;
         faultReportingBtn.textContent = '上报成功';
         faultReportingBtn.style.backgroundColor = '#4CAF50';
         setTimeout(() => {
@@ -364,6 +406,10 @@ async function initialize(): Promise<void> {
     const firstMenuItem: MenuItem = menuList[0];
     await addTabAsync(tabGroup, firstMenuItem);
 
+    // Bind help icon click event
+    const helpMenuItem: MenuItem = menuList[menuList.length - 2];
+    bindHelpIconClickEvent(helpMenuItem);
+
     // Bind logo click event
     const logoMenuItem: MenuItem = menuList[menuList.length - 1];
     bindLogoClickEvent(tabGroup, logoMenuItem);