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

实现GetMenu接口调用

Browse Source
This commit is contained in:
Allen 2025-04-30 00:05:32 +08:00
parent f384590bb5
commit 0ad394850c
5 changed files with 166 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -3,15 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' http://1.12.73.211:8848; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>中国电信桌面应用</title> <title>中国电信-工作台</title>
<link rel="stylesheet" href="./src/index.css"> <link rel="stylesheet" href="./src/index.css">
</head> </head>
<body> <body>
<div class="app-container"> <div class="app-container">
<header class="app-header"> <header class="app-header">
<div class="header-left"> <div class="header-left">
<h1>中国电信桌面应用</h1> <img src="./assets/logo.png" alt="Logo" class="logo">
<h1>中国电信-工作台</h1>
</div> </div>
<div class="header-right"> <div class="header-right">
<span id="userInfo"></span> <span id="userInfo"></span>
@ -21,28 +22,13 @@
<main class="app-main"> <main class="app-main">
<nav class="sidebar"> <nav class="sidebar">
<ul class="menu-list"> <ul id="menuList" class="menu-list">
<li class="menu-item active" data-page="dashboard"> <!-- 菜单项将通过JavaScript动态加载 -->
<i class="icon">📊</i>
<span>仪表盘</span>
</li>
<li class="menu-item" data-page="tasks">
<i class="icon">📝</i>
<span>任务管理</span>
</li>
<li class="menu-item" data-page="reports">
<i class="icon">📈</i>
<span>报表统计</span>
</li>
<li class="menu-item" data-page="settings">
<i class="icon">⚙️</i>
<span>系统设置</span>
</li>
</ul> </ul>
</nav> </nav>
<div class="content-area"> <div class="content-area">
<webview id="pageContent" class="page-content" style="width: 100%; height: 100%;" src="https://www.baidu.com" allowpopups webpreferences="contextIsolation=yes, nodeIntegration=no"></webview> <webview id="webview" class="page-content" autosize="on" src="about:blank" webpreferences="contextIsolation=yes, nodeIntegration=no"></webview>
</div> </div>
</main> </main>
</div> </div>

1
login.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>登录</title> <title>登录</title>
<link rel="stylesheet" href="./src/login.css"> <link rel="stylesheet" href="./src/login.css">
</head> </head>

80
src/index.css
View File

@ -6,9 +6,8 @@
} }
body { body {
font-family: 'Microsoft YaHei', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f0f2f5; background-color: #f5f5f5;
color: #333;
} }
/* 应用容器 */ /* 应用容器 */
@ -20,19 +19,23 @@ body {
/* 头部样式 */ /* 头部样式 */
.app-header { .app-header {
background-color: #1890ff;
color: white;
padding: 0 20px;
height: 60px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 0 20px;
height: 60px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.header-left h1 { .header-left {
font-size: 20px; display: flex;
font-weight: 500; align-items: center;
}
.logo {
height: 40px;
margin-right: 10px;
} }
.header-right { .header-right {
@ -41,23 +44,17 @@ body {
gap: 20px; gap: 20px;
} }
#userInfo {
font-size: 14px;
}
.logout-btn { .logout-btn {
background-color: transparent; padding: 8px 16px;
border: 1px solid white; background-color: #f44336;
color: white; color: white;
padding: 6px 12px; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.3s;
} }
.logout-btn:hover { .logout-btn:hover {
background-color: white; background-color: #d32f2f;
color: #1890ff;
} }
/* 主内容区域 */ /* 主内容区域 */
@ -67,51 +64,50 @@ body {
overflow: hidden; overflow: hidden;
} }
/* 侧边栏样式 */ /* 侧边栏 */
.sidebar { .sidebar {
width: 200px; width: 240px;
background-color: white; background-color: #fff;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); border-right: 1px solid #e0e0e0;
padding: 20px 0; overflow-y: auto;
} }
.menu-list { .menu-list {
list-style: none; list-style: none;
padding: 20px 0;
} }
.menu-item { .menu-item {
padding: 12px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; padding: 12px 20px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: background-color 0.3s;
} }
.menu-item:hover { .menu-item:hover {
background-color: #e6f7ff; background-color: #f5f5f5;
} }
.menu-item.active { .menu-icon {
background-color: #e6f7ff; width: 24px;
color: #1890ff; height: 24px;
border-right: 3px solid #1890ff; margin-right: 12px;
} }
.menu-item .icon { .submenu {
font-size: 18px; list-style: none;
padding-left: 20px;
} }
/* 内容区域 */ /* 内容区域 */
.content-area { .content-area {
flex: 1; flex: 1;
padding: 20px; overflow: hidden;
overflow-y: auto;
} }
.page-content { .page-content {
background-color: white; width: 100%;
border-radius: 8px; height: 100%;
padding: 20px; border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }

147
src/index.ts
View File

@ -1,7 +1,24 @@
console.log('👋 This message is being logged by "index.ts", included via Vite'); // Webview元素接口
interface WebviewElement extends HTMLElement {
src: string;
addEventListener(event: string, listener: (event: any) => void): void;
}
// In this file you can include the rest of your app's specific main process // 菜单项接口
// code. You can also put them in separate files and import them here. interface MenuItem {
ShowName: string;
Url: string;
Icon: string;
Children: MenuItem[] | null;
}
// API响应接口
interface ApiResponse<T> {
status: number;
code: number;
msg: string;
data: T;
}
// 检查登录状态 // 检查登录状态
function checkLoginStatus() { function checkLoginStatus() {
@ -24,77 +41,91 @@ function handleLogout() {
window.location.href = 'login.html'; window.location.href = 'login.html';
} }
// 处理菜单切换 // 获取菜单列表
function handleMenuClick(event: Event) { async function getMenuList(): Promise<MenuItem[]> {
const target = event.target as HTMLElement; try {
const menuItem = target.closest('.menu-item'); const response = await fetch('http://1.12.73.211:8848/EIAC_Desktop_Api/api/Menu/GetMenu', {
method: 'POST'
if (menuItem) {
// 移除所有菜单项的active类
document.querySelectorAll('.menu-item').forEach(item => {
item.classList.remove('active');
}); });
// 添加active类到当前点击的菜单项 const result = await response.json() as ApiResponse<MenuItem[]>;
menuItem.classList.add('active'); if (result.status === 0) {
return result.data;
// 获取页面标识 } else {
const page = menuItem.getAttribute('data-page'); throw new Error(result.msg || '获取菜单失败');
if (page) {
loadPageContent(page);
} }
} catch (error) {
console.error('获取菜单失败:', error);
throw error;
} }
} }
// 加载页面内容 // 创建菜单项
async function loadPageContent(page: string) { function createMenuItem(item: MenuItem): HTMLLIElement {
const contentArea = document.getElementById('pageContent'); const li = document.createElement('li');
if (!contentArea) return; li.className = 'menu-item';
try { const icon = document.createElement('img');
// 这里可以根据不同的页面加载不同的内容 //icon.src = `./assets/${item.Icon}`;
switch (page) { icon.src = `./assets/list.png`;
case 'dashboard': icon.alt = item.ShowName;
contentArea.innerHTML = '<h2>仪表盘</h2><p>欢迎使用中国电信桌面应用</p>'; icon.className = 'menu-icon';
break;
case 'tasks': const span = document.createElement('span');
contentArea.innerHTML = '<h2>任务管理</h2><p>任务管理功能开发中...</p>'; span.textContent = item.ShowName;
break;
case 'reports': li.appendChild(icon);
contentArea.innerHTML = '<h2>报表统计</h2><p>报表统计功能开发中...</p>'; li.appendChild(span);
break;
case 'settings': if (item.Url) {
contentArea.innerHTML = '<h2>系统设置</h2><p>系统设置功能开发中...</p>'; li.addEventListener('click', () => {
break; (document.querySelector("webview") as WebviewElement).src = item.Url;
default: //(document.querySelector("webview") as WebviewElement).src = "https://www.baidu.com";
contentArea.innerHTML = '<h2>页面不存在</h2>'; });
}
} catch (error) {
console.error('加载页面内容失败:', error);
contentArea.innerHTML = '<h2>加载失败</h2><p>请稍后重试</p>';
} }
return li;
}
// 渲染菜单
function renderMenu(menuList: MenuItem[]) {
const menuContainer = document.getElementById('menuList');
if (!menuContainer) return;
menuList.forEach(item => {
const menuItem = createMenuItem(item);
menuContainer.appendChild(menuItem);
if (item.Children) {
const subMenu = document.createElement('ul');
subMenu.className = 'submenu';
item.Children.forEach(child => {
const childItem = createMenuItem(child);
subMenu.appendChild(childItem);
});
menuContainer.appendChild(subMenu);
}
});
} }
// 初始化 // 初始化
function initialize() { async function initialize() {
// 检查登录状态 // 检查登录状态
checkLoginStatus(); checkLoginStatus();
// 绑定退出登录事件 try {
const logoutBtn = document.getElementById('btnLogout'); const menuList = await getMenuList();
if (logoutBtn) { renderMenu(menuList);
logoutBtn.addEventListener('click', handleLogout);
}
// 绑定菜单点击事件 // 绑定退出登录事件
const menuList = document.querySelector('.menu-list'); const logoutBtn = document.getElementById('btnLogout');
if (menuList) { if (logoutBtn) {
menuList.addEventListener('click', handleMenuClick); logoutBtn.addEventListener('click', handleLogout);
}
} catch (error) {
console.error('初始化失败:', error);
} }
// 加载默认页面（仪表盘）
loadPageContent('dashboard');
} }
// 当DOM加载完成后初始化 // 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initialize); document.addEventListener('DOMContentLoaded', initialize);

38
src/main.ts
View File

@ -1,4 +1,4 @@
import { app, BrowserWindow, ipcMain } from 'electron'; import { app, BrowserWindow, globalShortcut, ipcMain } from 'electron';
import path from 'node:path'; import path from 'node:path';
import started from 'electron-squirrel-startup'; import started from 'electron-squirrel-startup';
@ -21,28 +21,35 @@ ipcMain.handle('set-cookie', async (event, cookie) => {
const createWindow = () => { const createWindow = () => {
// Create the browser window. // Create the browser window.
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 800, minWidth: 800,
height: 600, minHeight: 600,
autoHideMenuBar: true,
center: true,
//resizable: false,
//minimizable: false,
//maximizable: false,
//alwaysOnTop: true,
webPreferences: { webPreferences: {
contextIsolation: true, // 启用上下文隔离。 contextIsolation: true, // 启用上下文隔离。
nodeIntegration: false, // 禁用 Node.js 集成，提高安全性。 nodeIntegration: false, // 禁用 Node.js 集成，提高安全性。
preload: path.join(__dirname, 'preload.js'), // 预加载脚本 preload: path.join(__dirname, 'preload.js'), // 预加载脚本
webviewTag: true, // 启用webview标签 webviewTag: true, // 启用webview标签
webSecurity: false, //webSecurity: false, // 禁用web安全策略
allowRunningInsecureContent: true, //allowRunningInsecureContent: true, // 允许运行不安全的内容
sandbox: false //sandbox: false // 禁用沙箱
}, },
}); });
// 隐藏顶部菜单栏
win.setMenuBarVisibility(false);
win.setAutoHideMenuBar(true);
win.setMenu(null);
// 设置session // 设置session
win.webContents.session.setPermissionRequestHandler((webContents, permission, callback) => { win.webContents.session.setPermissionRequestHandler((webContents, permission, callback) => {
callback(true); callback(true);
}); });
win.setMenuBarVisibility(false); // 隐藏菜单栏
win.setAutoHideMenuBar(true); // 自动隐藏菜单栏
win.setMenu(null); // 隐藏菜单栏
// and load the index.html of the app. // and load the index.html of the app.
if (MAIN_WINDOW_VITE_DEV_SERVER_URL) { if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
win.loadURL(`${MAIN_WINDOW_VITE_DEV_SERVER_URL}/login.html`); win.loadURL(`${MAIN_WINDOW_VITE_DEV_SERVER_URL}/login.html`);
@ -50,8 +57,15 @@ const createWindow = () => {
win.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/login.html`)); win.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/login.html`));
} }
// Open the DevTools. // production a bad jabe
win.webContents.openDevTools(); const handleDevTools = () => {
if (win.webContents.isDevToolsOpened()) {
win.webContents.closeDevTools();
} else {
win.webContents.openDevTools();
}
};
globalShortcut.register("CommandOrControl+Shift+I", handleDevTools);
}; };
// This method will be called when Electron has finished // This method will be called when Electron has finished