From 0ad394850cec3608c8807370c8308e7c544b4245 Mon Sep 17 00:00:00 2001 From: Allen Date: Wed, 30 Apr 2025 00:05:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0GetMenu=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E8=B0=83=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 28 +++------ login.html | 1 + src/index.css | 82 +++++++++++++------------- src/index.ts | 155 ++++++++++++++++++++++++++++++-------------------- src/main.ts | 38 +++++++++---- 5 files changed, 166 insertions(+), 138 deletions(-) diff --git a/index.html b/index.html index 94e8cdf..2694071 100644 --- a/index.html +++ b/index.html @@ -3,15 +3,16 @@ - - 中国电信桌面应用 + + 中国电信-工作台
-

中国电信桌面应用

+ +

中国电信-工作台

@@ -21,28 +22,13 @@
- +
diff --git a/login.html b/login.html index 8127acc..bcba3b0 100644 --- a/login.html +++ b/login.html @@ -3,6 +3,7 @@ + 登录 diff --git a/src/index.css b/src/index.css index 77f969e..7e667b8 100644 --- a/src/index.css +++ b/src/index.css @@ -6,9 +6,8 @@ } body { - font-family: 'Microsoft YaHei', sans-serif; - background-color: #f0f2f5; - color: #333; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background-color: #f5f5f5; } /* 应用容器 */ @@ -20,19 +19,23 @@ body { /* 头部样式 */ .app-header { - background-color: #1890ff; - color: white; - padding: 0 20px; - height: 60px; display: flex; justify-content: space-between; 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 { - font-size: 20px; - font-weight: 500; +.header-left { + display: flex; + align-items: center; +} + +.logo { + height: 40px; + margin-right: 10px; } .header-right { @@ -41,23 +44,17 @@ body { gap: 20px; } -#userInfo { - font-size: 14px; -} - .logout-btn { - background-color: transparent; - border: 1px solid white; + padding: 8px 16px; + background-color: #f44336; color: white; - padding: 6px 12px; + border: none; border-radius: 4px; cursor: pointer; - transition: all 0.3s; } .logout-btn:hover { - background-color: white; - color: #1890ff; + background-color: #d32f2f; } /* 主内容区域 */ @@ -67,51 +64,50 @@ body { overflow: hidden; } -/* 侧边栏样式 */ +/* 侧边栏 */ .sidebar { - width: 200px; - background-color: white; - box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); - padding: 20px 0; + width: 240px; + background-color: #fff; + border-right: 1px solid #e0e0e0; + overflow-y: auto; } .menu-list { list-style: none; + padding: 20px 0; } .menu-item { - padding: 12px 20px; display: flex; align-items: center; - gap: 10px; + padding: 12px 20px; cursor: pointer; - transition: all 0.3s; + transition: background-color 0.3s; } .menu-item:hover { - background-color: #e6f7ff; + background-color: #f5f5f5; } -.menu-item.active { - background-color: #e6f7ff; - color: #1890ff; - border-right: 3px solid #1890ff; +.menu-icon { + width: 24px; + height: 24px; + margin-right: 12px; } -.menu-item .icon { - font-size: 18px; +.submenu { + list-style: none; + padding-left: 20px; } /* 内容区域 */ .content-area { flex: 1; - padding: 20px; - overflow-y: auto; + overflow: hidden; } .page-content { - background-color: white; - border-radius: 8px; - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} \ No newline at end of file + width: 100%; + height: 100%; + border: none; +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 367b4bb..91bf252 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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 { + status: number; + code: number; + msg: string; + data: T; +} // 检查登录状态 function checkLoginStatus() { @@ -10,7 +27,7 @@ function checkLoginStatus() { window.location.href = 'login.html'; return; } - + // 显示用户信息 const userInfo = document.getElementById('userInfo'); if (userInfo) { @@ -24,77 +41,91 @@ function handleLogout() { window.location.href = 'login.html'; } -// 处理菜单切换 -function handleMenuClick(event: Event) { - const target = event.target as HTMLElement; - const menuItem = target.closest('.menu-item'); - - if (menuItem) { - // 移除所有菜单项的active类 - document.querySelectorAll('.menu-item').forEach(item => { - item.classList.remove('active'); +// 获取菜单列表 +async function getMenuList(): Promise { + try { + const response = await fetch('http://1.12.73.211:8848/EIAC_Desktop_Api/api/Menu/GetMenu', { + method: 'POST' }); - - // 添加active类到当前点击的菜单项 - menuItem.classList.add('active'); - - // 获取页面标识 - const page = menuItem.getAttribute('data-page'); - if (page) { - loadPageContent(page); + + const result = await response.json() as ApiResponse; + if (result.status === 0) { + return result.data; + } else { + throw new Error(result.msg || '获取菜单失败'); } + } catch (error) { + console.error('获取菜单失败:', error); + throw error; } } -// 加载页面内容 -async function loadPageContent(page: string) { - const contentArea = document.getElementById('pageContent'); - if (!contentArea) return; +// 创建菜单项 +function createMenuItem(item: MenuItem): HTMLLIElement { + const li = document.createElement('li'); + li.className = 'menu-item'; - try { - // 这里可以根据不同的页面加载不同的内容 - switch (page) { - case 'dashboard': - contentArea.innerHTML = '

仪表盘

欢迎使用中国电信桌面应用

'; - break; - case 'tasks': - contentArea.innerHTML = '

任务管理

任务管理功能开发中...

'; - break; - case 'reports': - contentArea.innerHTML = '

报表统计

报表统计功能开发中...

'; - break; - case 'settings': - contentArea.innerHTML = '

系统设置

系统设置功能开发中...

'; - break; - default: - contentArea.innerHTML = '

页面不存在

'; - } - } catch (error) { - console.error('加载页面内容失败:', error); - contentArea.innerHTML = '

加载失败

请稍后重试

'; + const icon = document.createElement('img'); + //icon.src = `./assets/${item.Icon}`; + icon.src = `./assets/list.png`; + icon.alt = item.ShowName; + icon.className = 'menu-icon'; + + const span = document.createElement('span'); + span.textContent = item.ShowName; + + li.appendChild(icon); + li.appendChild(span); + + if (item.Url) { + li.addEventListener('click', () => { + (document.querySelector("webview") as WebviewElement).src = item.Url; + //(document.querySelector("webview") as WebviewElement).src = "https://www.baidu.com"; + }); } + + 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(); - - // 绑定退出登录事件 - const logoutBtn = document.getElementById('btnLogout'); - if (logoutBtn) { - logoutBtn.addEventListener('click', handleLogout); + + try { + const menuList = await getMenuList(); + renderMenu(menuList); + + // 绑定退出登录事件 + const logoutBtn = document.getElementById('btnLogout'); + if (logoutBtn) { + logoutBtn.addEventListener('click', handleLogout); + } + } catch (error) { + console.error('初始化失败:', error); } - - // 绑定菜单点击事件 - const menuList = document.querySelector('.menu-list'); - if (menuList) { - menuList.addEventListener('click', handleMenuClick); - } - - // 加载默认页面（仪表盘） - loadPageContent('dashboard'); } -// 当DOM加载完成后初始化 +// 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', initialize); diff --git a/src/main.ts b/src/main.ts index 8c0fa7a..5bd0910 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import { app, BrowserWindow, ipcMain } from 'electron'; +import { app, BrowserWindow, globalShortcut, ipcMain } from 'electron'; import path from 'node:path'; import started from 'electron-squirrel-startup'; @@ -21,28 +21,35 @@ ipcMain.handle('set-cookie', async (event, cookie) => { const createWindow = () => { // Create the browser window. const win = new BrowserWindow({ - width: 800, - height: 600, + minWidth: 800, + minHeight: 600, + autoHideMenuBar: true, + center: true, + //resizable: false, + //minimizable: false, + //maximizable: false, + //alwaysOnTop: true, webPreferences: { contextIsolation: true, // 启用上下文隔离。 nodeIntegration: false, // 禁用 Node.js 集成，提高安全性。 preload: path.join(__dirname, 'preload.js'), // 预加载脚本 webviewTag: true, // 启用webview标签 - webSecurity: false, - allowRunningInsecureContent: true, - sandbox: false + //webSecurity: false, // 禁用web安全策略 + //allowRunningInsecureContent: true, // 允许运行不安全的内容 + //sandbox: false // 禁用沙箱 }, }); + // 隐藏顶部菜单栏 + win.setMenuBarVisibility(false); + win.setAutoHideMenuBar(true); + win.setMenu(null); + // 设置session win.webContents.session.setPermissionRequestHandler((webContents, permission, callback) => { callback(true); }); - win.setMenuBarVisibility(false); // 隐藏菜单栏 - win.setAutoHideMenuBar(true); // 自动隐藏菜单栏 - win.setMenu(null); // 隐藏菜单栏 - // and load the index.html of the app. if (MAIN_WINDOW_VITE_DEV_SERVER_URL) { 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`)); } - // Open the DevTools. - win.webContents.openDevTools(); + // production a bad jabe + 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