eiac/CSAPP
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Allen 2025-05-18 19:31:39 +08:00
parent d1f0d2e719
commit 032f3eefd0
5 changed files with 111 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/help.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

2
index.html
View File

@ -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>

2
package.json
View File

@ -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",

99
src/index.css
View File

@ -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;
}

48
src/index.ts
View File

@ -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);