From 032f3eefd0e79276f0c13aa6b6c20b34b5722eed Mon Sep 17 00:00:00 2001 From: Allen Date: Sun, 18 May 2025 19:31:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=82=AC=E5=81=9C=E5=9C=A8?= =?UTF-8?q?=E6=9C=80=E5=8F=B3=E4=BE=A7=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD?= =?UTF-8?q?=E7=9A=84Help=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/help.png | Bin 0 -> 2460 bytes index.html | 4 +- package.json | 2 +- src/index.css | 99 +++++++++++++++++++++++++++++------------------- src/index.ts | 48 ++++++++++++++++++++++- 5 files changed, 111 insertions(+), 42 deletions(-) create mode 100644 assets/help.png diff --git a/assets/help.png b/assets/help.png new file mode 100644 index 0000000000000000000000000000000000000000..6f14273c590bac887e8a6f3d3dd6a800eb1b7599 GIT binary patch literal 2460 zcmaJ@c|25WA0G*&l-`8UZJH?F%)XB-V`eaz!62l?F>{PDX3m&7GS)_Qwb)9F7Txv@ z6;j&BRgooI<)#w%s+5#c>Z;UxRC?b(dhhvs&Uv2a_x!%U?{EEl&PIQsr-`wZF$#q; z;d^mK$m%%uPBKKkzpPuThb*&UUML(0MZpPx8bq-rP$Y=vD*!1d0s%>4Ts^oLh0>SF zfC6IBDT8bw!nM^!^geQ@(hz3@ZsDuG6R;igkZh;GG#A=xe zmO)DNm_;BGiie#sh^OB|P^bigABL5h?}gKebv^$BJjU%{8U>L zl&AvnB2WXxtHnq?qUMi-k=*?=(U>CQ4a-k0Ly7{#av^cN0#w3$t}_O?!AWEi7M&;| zN@$S)HVOo(SPF$iz%l>|6H6hBBgIq#6$An1xSgNjJ=_^oCWp+W@px<^k;i3INo zjY+3d$rKvTV;sv@YG6Pq2FJN&2={j^=O3{wjv54DNF4-0vEyCf9}U5fCK^(qIUKZo zh)gMg5;P8D75Wx17gWnuff5fjq(Fa7F-!IndUtmw#e+;>a@br3;yQ)FbN65n*+d3~ zLPx|5%y+EhCu#eRW&d9+9&rXg)*t`VFXJMl3CFfSx*s|Gm>*Dy42>F@4p*CPWE9Gv zp3h|mY40_KCHrm%Ex)|3=b28NdO`*IWJURh1-6%T94#ZnJcFm`bFMnnn}@e8i|{eY zJo!Oil!aT9@9H?0);})a-HFJuaz=$kRTnC!964mnAkPgrX>R7<`0FcO+orjbC)Z>Yos1^L6wRi3 zHF89m1`C}Hc4XH*VSXAdX;)Ma6cu&zlz#Yk?Jf1ME(?xcc()nq!=^qHO|D-4 zXJJ=<-CKo4;0nLF=A%X>REL55Q!%TIRR^ct9XXjYO(oEDm1x;`QMu&6wM(;VUZ z`DIk`?{-6hPTWp2`T)aevDr>rrlIMQ><^yasFhck>g;N`Hm&h>$zVzE>H@3*iINwF zX*xbnzP75WZ3YdtZC|bnjK8vcano-O##IDE8_Dg$5mrwhnWf7um~b=$rDyhJ;d7f_ z$!nXdFWCo|X+D4;IFJVS=(hT4U+hV(eMa1N!6Nyigbn`CM)adruZKbS$;Y`84!s7S+>Nh&3j!(ku z8Io_<%UPPGe<^JKAF@1O(WkY&gBD)vUb;xul7 zhu4KipSc_6mb_4Pgy+FOWse(8&D-UqYasXEE4`KR*ZC#ALtAEhm*w^+PPbRgJ8YX@ zOJA%gJa~S$t4Vy^_S&(h)rEZWgy&DSxM!!sSl<$C(OK_R# zhp)YBr#;H1ht~Ei3$Z?zw99gR_HCf3t&TF|!EwvQgX`dgi8%T3OS)W924? zZ97KV6gC#jV(PR$&x(*?&kFdRt=^l!x0T16Lo?*(h)pgRM?-XasQO{_XxD)tm$CmP MK2OL!取消 - + + + 帮助图标 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);