diff --git a/assets/help.png b/assets/help.png new file mode 100644 index 0000000..6f14273 Binary files /dev/null and b/assets/help.png differ diff --git a/index.html b/index.html index 3d21f41..d4348e1 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,9 @@ - + + + 帮助图标 diff --git a/package.json b/package.json index 7ad539d..c9db25f 100644 --- a/package.json +++ b/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", diff --git a/src/index.css b/src/index.css index 1e3bf40..535c544 100644 --- a/src/index.css +++ b/src/index.css @@ -126,68 +126,89 @@ body { /* 故障窗口样式 */ .modal { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1000; + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; } .modal-content { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: white; - padding: 20px; - border-radius: 5px; - min-width: 300px; - text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + padding: 20px; + border-radius: 5px; + min-width: 300px; + text-align: center; } .modal-content h2 { - color: #e74c3c; - margin-bottom: 15px; + color: #e74c3c; + margin-bottom: 15px; } .modal-content p { - margin-bottom: 20px; - color: #333; + margin-bottom: 20px; + color: #333; } .close-btn { - background-color: #ed7226; - color: white; - border: none; - padding: 8px 20px; - border-radius: 4px; - cursor: pointer; - font-size: 14px; + background-color: #ed7226; + color: white; + border: none; + padding: 8px 20px; + border-radius: 4px; + cursor: pointer; + font-size: 14px; } .close-btn:hover { - background-color: #ce6524; + background-color: #ce6524; } .fault-reporting-btn { - background-color: #3498db; - color: white; - border: none; - padding: 8px 20px; - border-radius: 4px; + background-color: #3498db; + color: white; + border: none; + padding: 8px 20px; + border-radius: 4px; } .fault-reporting-btn:hover { - background-color: #2980b9; + background-color: #2980b9; } /* Tabs styles */ .tabs-container { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; + display: flex; + flex-direction: column; + 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; } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index b39f707..935cc4e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -228,6 +228,32 @@ async function getFaviconUrl(webview: Electron.WebviewTag): Promise { 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 { // 显示请求结果 if (result.ok) { + lastInvalidUrlResult = null; faultReportingBtn.textContent = '上报成功'; faultReportingBtn.style.backgroundColor = '#4CAF50'; setTimeout(() => { @@ -364,6 +406,10 @@ async function initialize(): Promise { 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);