0017
/
calibration-pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(页面布局): 调整头部菜单的路由控制，删除dist目录

This commit is contained in:
fhysy 2024-07-22 15:51:51 +08:00
parent 57d766fab0
commit 206de9e618
9 changed files with 1412 additions and 1522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

302
src/main/index.js
View File

@ -1,182 +1,182 @@
import { app, shell, BrowserWindow, ipcMain, globalShortcut, dialog } from 'electron' import { app, shell, BrowserWindow, ipcMain, globalShortcut, dialog } from 'electron';
import { join } from 'path' import { join } from 'path';
import { electronApp, optimizer, is } from '@electron-toolkit/utils' import { electronApp, optimizer, is } from '@electron-toolkit/utils';
import icon from '../../resources/icon.png?asset' import icon from '../../resources/icon.png?asset';
//关闭exe命令 //关闭exe命令
function killProcessByName(processName) { function killProcessByName(processName) {
const command = `taskkill /IM ${processName} /F` const command = `taskkill /IM ${processName} /F`;
const { exec } = require('child_process') const { exec } = require('child_process');
exec(command, (error, stdout, stderr) => { exec(command, (error, stdout, stderr) => {
if (error) { if (error) {
console.error(`执行的错误: ${error}`) console.error(`执行的错误: ${error}`);
return return;
} }
console.log(`stdout: ${stdout}`) console.log(`stdout: ${stdout}`);
console.error(`stderr: ${stderr}`) console.error(`stderr: ${stderr}`);
}) });
} }
app.commandLine.appendSwitch('disable-web-security') app.commandLine.appendSwitch('disable-web-security');
function createWindow() { function createWindow() {
// Create the browser window. // Create the browser window.
const mainWindow = new BrowserWindow({ const mainWindow = new BrowserWindow({
width: 1100, width: 1100,
height: 700, height: 700,
show: false, show: false,
autoHideMenuBar: true, autoHideMenuBar: true,
icon, icon,
webPreferences: { webPreferences: {
preload: join(__dirname, '../preload/index.js'), preload: join(__dirname, '../preload/index.js'),
sandbox: false, sandbox: false,
nodeIntegration: true, nodeIntegration: true,
// 禁用同源策略，允许跨域请求 // 禁用同源策略，允许跨域请求
webSecurity: false, webSecurity: false,
contextIsolation: false, contextIsolation: false,
csp: "default-src 'self'; connect-src 'self' *", csp: "default-src 'self'; connect-src 'self' *",
// 禁止build环境使用DevTool // 禁止build环境使用DevTool
// devTools: is.dev ? true : false // devTools: is.dev ? true : false
devTools: true devTools: true
} }
}) });
//开启调试 //开启调试
// mainWindow.webContents.openDevTools() // mainWindow.webContents.openDevTools()
mainWindow.on('ready-to-show', () => { mainWindow.on('ready-to-show', () => {
mainWindow.show() mainWindow.show();
}) });
mainWindow.webContents.setWindowOpenHandler((details) => { mainWindow.webContents.setWindowOpenHandler(details => {
shell.openExternal(details.url) shell.openExternal(details.url);
return { action: 'deny' } return { action: 'deny' };
}) });
// HMR for renderer base on electron-vite cli. // HMR for renderer base on electron-vite cli.
// Load the remote URL for development or the local html file for production. // Load the remote URL for development or the local html file for production.
if (is.dev && process.env['ELECTRON_RENDERER_URL']) { if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']);
} else { } else {
mainWindow.loadFile(join(__dirname, '../renderer/index.html')) mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
} }
// 设置DevTools快捷键 // 设置DevTools快捷键
// 设置DevTools快捷键 // 设置DevTools快捷键
globalShortcut.register('CommandOrControl+Shift+i', function () { globalShortcut.register('CommandOrControl+Shift+i', function () {
mainWindow.webContents.openDevTools() mainWindow.webContents.openDevTools();
}) });
return mainWindow return mainWindow;
} }
// 程序单例模式 // 程序单例模式
let myWindow = null let myWindow = null;
const gotTheLock = app.requestSingleInstanceLock() const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) { if (!gotTheLock) {
// 如果已经有同样的该程序正在运行，则不启动 // 如果已经有同样的该程序正在运行，则不启动
app.quit() app.quit();
} else { } else {
// 如果检测到有同样的该程序正在试图启动... // 如果检测到有同样的该程序正在试图启动...
app.on('second-instance', () => { app.on('second-instance', () => {
if (myWindow) { if (myWindow) {
// 弹出系统提示对话框 // 弹出系统提示对话框
dialog.showMessageBox({ dialog.showMessageBox({
message: '此程序已经正在运行' message: '此程序已经正在运行'
}) });
// 如果该程序窗口处于最小化状态，则恢复窗口 // 如果该程序窗口处于最小化状态，则恢复窗口
if (myWindow.isMinimized()) myWindow.restore() if (myWindow.isMinimized()) myWindow.restore();
// 将该程序窗口置为当前聚焦态 // 将该程序窗口置为当前聚焦态
myWindow.focus() myWindow.focus();
} }
}) });
// This method will be called when Electron has finished // This method will be called when Electron has finished
// initialization and is ready to create browser windows. // initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. // Some APIs can only be used after this event occurs.
const { spawn } = require('child_process') const { spawn } = require('child_process');
let child = null let child = null;
let exePluginsExeList = [] let exePluginsExeList = [];
app.whenReady().then(() => { app.whenReady().then(() => {
const fs = require('fs') const fs = require('fs');
const path = require('path') const path = require('path');
const logStream = fs.createWriteStream('app.log', { flags: 'a' }) // 日志文件 const logStream = fs.createWriteStream('app.log', { flags: 'a' }); // 日志文件
let exePath = path.resolve('./resources/app.asar.unpacked/resources/service') let exePath = path.resolve('./resources/app.asar.unpacked/resources/service');
let exePluginsPath = path.resolve('./resources/app.asar.unpacked/resources/service/plugins') let exePluginsPath = path.resolve('./resources/app.asar.unpacked/resources/service/plugins');
//单独配置测试环境 //单独配置测试环境
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
exePath = path.resolve('./resources/service') exePath = path.resolve('./resources/service');
exePluginsPath = path.resolve('./resources/service/plugins') exePluginsPath = path.resolve('./resources/service/plugins');
} }
//查询所有插件目录下的exe文件 //查询所有插件目录下的exe文件
fs.readdir(exePluginsPath, (err, files) => { fs.readdir(exePluginsPath, (err, files) => {
if (err) { if (err) {
return console.log('Unable to scan directory: ' + err) return console.log('Unable to scan directory: ' + err);
} }
// 筛选出以.exe结尾的文件 // 筛选出以.exe结尾的文件
exePluginsExeList = files.filter((file) => path.extname(file).toLowerCase() === '.exe') exePluginsExeList = files.filter(file => path.extname(file).toLowerCase() === '.exe');
}) });
child = spawn('./main.exe', [], { cwd: exePath, stdio: ['ignore', 'pipe', 'pipe'] }) child = spawn('./main.exe', [], { cwd: exePath, stdio: ['ignore', 'pipe', 'pipe'] });
//监听进程的输出 //监听进程的输出
child.stdout.on('data', (data) => { child.stdout.on('data', data => {
console.log('stdout:', data.toString()) console.log('stdout:', data.toString());
logStream.write(data) logStream.write(data);
}) });
child.stderr.on('data', (data) => { child.stderr.on('data', data => {
console.error('stderr:', data.toString()) console.error('stderr:', data.toString());
logStream.write(data) logStream.write(data);
}) });
child.on('close', (code) => { child.on('close', code => {
console.log(`子进程已退出，退出码 ${code}`) console.log(`子进程已退出，退出码 ${code}`);
logStream.end() logStream.end();
}) });
child.on('exit', (code, signal) => { child.on('exit', (code, signal) => {
console.log(`子进程已退出，退出码 ${code}，信号： ${signal}`) console.log(`子进程已退出，退出码 ${code}，信号： ${signal}`);
logStream.write(`子进程已退出，退出码 ${code}，信号： ${signal}`) logStream.write(`子进程已退出，退出码 ${code}，信号： ${signal}`);
logStream.end() logStream.end();
}) });
// Set app user model id for windows // Set app user model id for windows
electronApp.setAppUserModelId('com.electron') electronApp.setAppUserModelId('com.electron');
// Default open or close DevTools by F12 in development // Default open or close DevTools by F12 in development
// and ignore CommandOrControl + R in production. // and ignore CommandOrControl + R in production.
// see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
app.on('browser-window-created', (_, window) => { app.on('browser-window-created', (_, window) => {
optimizer.watchWindowShortcuts(window) optimizer.watchWindowShortcuts(window);
}) });
// IPC test // IPC test
ipcMain.on('ping', () => console.log('pong')) ipcMain.on('ping', () => console.log('pong'));
myWindow = createWindow() myWindow = createWindow();
app.on('activate', function () { app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the // On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open. // dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow() if (BrowserWindow.getAllWindows().length === 0) createWindow();
}) });
}) });
// Quit when all windows are closed, except on macOS. There, it's common // Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits // for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q. // explicitly with Cmd + Q.
app.on('window-all-closed', () => { app.on('window-all-closed', () => {
if (process.platform !== 'darwin') { if (process.platform !== 'darwin') {
// 循环关闭插件 EXE 列表 // 循环关闭插件 EXE 列表
exePluginsExeList.forEach((exe) => { exePluginsExeList.forEach(exe => {
killProcessByName(exe) killProcessByName(exe);
}) });
// child.kill('SIGTERM'); // 或者使用 'SIGKILL' 来强制关闭 // child.kill('SIGTERM'); // 或者使用 'SIGKILL' 来强制关闭
// killProcessByName('gateway.exe'); // killProcessByName('gateway.exe');
// 循环关闭后端服务 // 循环关闭后端服务
killProcessByName('main.exe') killProcessByName('main.exe');
app.quit() app.quit();
} }
}) });
} }
// In this file you can include the rest of your app"s specific main process // 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 require them here. // code. You can also put them in separate files and require them here.

94
src/renderer/src/layout/Aside.vue
View File

@ -1,71 +1,63 @@
<script setup> <script setup>
import { ref } from 'vue'
const settings = defineProps({ const settings = defineProps({
collapse: Boolean, collapse: Boolean,
width: String width: String
}) });
</script> </script>
<template> <template>
<el-aside :width="settings.width"> <el-aside :width="settings.width">
<el-scrollbar> <el-scrollbar>
<el-menu <el-menu default-active="/system/switch" :collapse="settings.collapse" :router="true">
default-active="/system/switch" <el-menu-item index="/system/switch"> <span class="iconfont icon-icon_duanluqi"></span> 断路器调试</el-menu-item>
:collapse="settings.collapse" <!-- <el-menu-item index="/system/about"><span class="iconfont icon-icon_jiankong"></span> 视频监控</el-menu-item>-->
:router="true" <!-- <el-menu-item index="/system/test"><el-icon> <Menu /> </el-icon>测试</el-menu-item>-->
> </el-menu>
<el-menu-item index="/system/switch"> <span class="iconfont icon-icon_duanluqi"></span> 断路器调试</el-menu-item> </el-scrollbar>
<!-- <el-menu-item index="/system/about"><span class="iconfont icon-icon_jiankong"></span> 视频监控</el-menu-item>--> </el-aside>
<!-- <el-menu-item index="/test"><el-icon> <Menu /> </el-icon>测试</el-menu-item>-->
</el-menu>
</el-scrollbar>
</el-aside>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.el-aside { .el-aside {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
.el-menu{ .el-menu {
padding: 0 10px; padding: 0 10px;
background: #fff; background: #fff;
} }
.el-menu-item{ .el-menu-item {
border-radius: 10px; border-radius: 10px;
background: #f2f2f2; background: #f2f2f2;
margin-bottom: 12px; margin-bottom: 12px;
align-items: center; align-items: center;
padding: 0; padding: 0;
padding-left: 26px !important; padding-left: 26px !important;
color: #333; color: #333;
font-size: 16px; font-size: 16px;
.iconfont{ .iconfont {
margin-right: 10px; margin-right: 10px;
color: #999; color: #999;
font-size: 22px; font-size: 22px;
} }
} }
.el-menu-item.is-active{ .el-menu-item.is-active {
background: #4c94db; background: #4c94db;
border-radius: 10px; border-radius: 10px;
/*margin: 0 10px;*/ /*margin: 0 10px;*/
color: #fff; color: #fff;
.iconfont{ .iconfont {
color: #fff; color: #fff;
} }
} }
.el-scrollbar { .el-scrollbar {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
/*background-color: #1a1c1e;*/ /*background-color: #1a1c1e;*/
} }
.el-menu { .el-menu {
border-right: none; border-right: none;
} }
</style> </style>

1
src/renderer/src/layout/Header.vue
View File

@ -11,6 +11,7 @@
router="true" router="true"
> >
<el-menu-item index="/system">系统模板</el-menu-item> <el-menu-item index="/system">系统模板</el-menu-item>
<!-- <el-menu-item index="/test">测试</el-menu-item>-->
</el-menu> </el-menu>
</div> </div>
<div class="haeder-right"> <div class="haeder-right">

58
src/renderer/src/layout/index.vue
View File

@ -1,41 +1,35 @@
<template> <template>
<el-container direction="vertical" style="min-height: 100vh;min-width: 100vw;overflow: hidden;"> <el-container direction="vertical" style="min-height: 100vh; min-width: 100vw; overflow: hidden">
<Header></Header> <Header></Header>
<el-container style="padding: 10px 0"> <el-main>
<Aside width="180px"></Aside> <router-view v-slot="{ Component }">
<el-main> <keep-alive>
<router-view v-slot="{ Component }"> <component :is="Component" />
<keep-alive> </keep-alive>
<component :is="Component" /> </router-view>
</keep-alive> </el-main>
</router-view> </el-container>
</el-main>
</el-container>
</el-container>
</template> </template>
<script setup> <script setup>
// 组件注册 // 组件注册
import Header from '@renderer/layout/Header.vue' import Header from '@renderer/layout/Header.vue';
import Aside from '@renderer/layout/Aside.vue'
</script> </script>
<style scoped> <style scoped>
body {
body{ background-color: #eee;
background-color: #eee; max-width: 100vw;
max-width: 100vw; }
} .el-container {
.el-container{ /*padding: 10px 0;*/
/*padding: 10px 0;*/ }
} .el-main {
.el-main { width: 100%;
width: 100%; padding: 0;
padding: 0; height: 100vh;
height: 100vh; overflow-x: hidden;
overflow-x: hidden; background: #fff;
background: #fff; padding-right: 10px;
padding-right: 10px; }
}
</style> </style>

104
src/renderer/src/router/index.js
View File

@ -1,51 +1,59 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router';
import Layout from '@renderer/layout/index.vue' import Layout from '@renderer/layout/index.vue';
import systenLayout from '@renderer/views/system/index.vue';
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: [ routes: [
{ {
path: '/system', path: '/',
name: 'system', component: Layout,
component: Layout, meta: { title: '整体页面布局' },
redirect: {name: 'switch'}, redirect: '/system',
children:[ children: [
{ {
path: 'switch', path: '/system',
name: 'switch', name: 'system',
component: () => import("@renderer/views/switch/index.vue"), component: systenLayout,
meta: { redirect: { name: 'switch' },
menu: 'switch', children: [
keepAlive: true, {
} path: 'switch',
}, name: 'switch',
{ component: () => import('@renderer/views/system/switch/index.vue'),
path: 'about', meta: {
name: 'about', menu: 'switch',
component: () => import("@renderer/views/AboutView.vue"), keepAlive: true
meta: { }
menu: 'about', },
keepAlive: true, {
} path: 'about',
}, name: 'about',
{ component: () => import('@renderer/views/AboutView.vue'),
path: 'test', meta: {
name: 'test', menu: 'about',
component: () => import("@renderer/views/test.vue"), keepAlive: true
meta: { }
menu: 'test', },
keepAlive: true, {
} path: 'test',
}, name: 'test',
component: () => import('@renderer/views/test.vue'),
meta: {
menu: 'test',
keepAlive: true
}
}
]
}
]
},
{
path: '/', // 这个是根路由，现在我们让它重定向到 /system
redirect: '/system'
},
{ path: '/:pathMatch(.*)', redirect: '/' }
]
});
] export default router;
},
{
path: '/', // 这个是根路由，现在我们让它重定向到 /system
redirect: '/system',
},
{ path: '/:pathMatch(.*)', redirect: '/' },
]
})
export default router

35
src/renderer/src/views/HomeView.vue
View File

@ -1,35 +0,0 @@
<script setup>
// 组件注册
import Header from '@renderer/components/Header.vue'
import Aside from '@renderer/components/Aside.vue'
</script>
<template>
<el-container direction="vertical" style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
<Header></Header>
<el-container >
<Aside width="160px"></Aside>
<el-main>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</el-main>
</el-container>
</el-container>
</template>
<style scoped>
body{
background-color: #eee;
max-width: 100vw;
}
.el-main {
width: 100%;
padding: 0;
height: 100vh;
overflow-x: hidden;
background: #f6f6f6;
}
</style>

1205
src/renderer/src/views/switch/index.vue
View File

File diff suppressed because it is too large Load Diff

35
src/renderer/src/views/system/index.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<el-container style="padding: 10px 0">
<Aside width="180px"></Aside>
<el-main>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</el-main>
</el-container>
</template>
<script setup>
// 组件注册
import Aside from '@renderer/layout/Aside.vue';
</script>
<style scoped>
body {
background-color: #eee;
max-width: 100vw;
}
.el-container {
/*padding: 10px 0;*/
}
.el-main {
width: 100%;
padding: 0;
height: 100vh;
overflow-x: hidden;
background: #fff;
padding-right: 10px;
}
</style>

1100
src/renderer/src/views/system/switch/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff