提交 bed466ee authored 作者: caicai's avatar caicai

加载app列表优化

上级 99044d15
......@@ -6,7 +6,7 @@
"homepage": "/",
"author": "Guangzhou Menu Technology Co., Ltd. <service@sei-tpo.com> (https://www.zei-dao.com/)",
"scripts": {
"serve": "vue-cli-service serve --mode web",
"serve": "vue-cli-service serve --mode web --enable-transparent-visuals --disable-gpu",
"build": "vue-cli-service build",
"build:web": "vue-cli-service build --mode web",
"test:unit": "vue-cli-service test:unit",
......
// Colour definitions
// --------------------------------------------------
@blue: #36CDE8;
@blueDark: #263944;
@grey: #9096A0;
@greyDark: #4D4D4D;
@white:#fff;
@black: #000;
// These variables are used to change the colour of text
// Primary use is for altering the text colour over a background image
// See ../project/theme-extras.less for block mixin
// --------------------------------------------------
@transparent-light: transparent;
@transparent-dark: transparent;
// Note: If customising a theme for the Authoring Tool please update the
// corresponding default value for that variable in the properties.schema file.
// This is to stop any amended variables below being overwritten by
// the Theme Picker in the Authoring Tool.
// Body, link, and heading colour
// --------------------------------------------------
@font-color: @greyDark;
@font-color-inverted: @white;
@link: @font-color;
@link-inverted: @font-color-inverted;
@link-hover: @link;
@link-inverted-hover: @link-inverted;
@heading-color: @blue;
@heading-color-inverted: @white;
// Items - components
// --------------------------------------------------
@item-color: @blue;
@item-color-inverted: @white;
@item-color-hover: darken(@item-color, 10%);
@item-color-inverted-hover: @item-color-inverted;
@item-color-selected: darken(@item-color, 20%);
@item-color-inverted-selected: @item-color-inverted;
// Visited - presentation components
// --------------------------------------------------
@visited: #727272;
@visited-inverted: @white;
// Buttons
// --------------------------------------------------
@btn-color: @greyDark;
@btn-color-inverted: @white;
@btn-color-hover: darken(@btn-color, 10%);
@btn-color-inverted-hover: @btn-color-inverted;
// Button icon
// --------------------------------------------------
@btn-icon-color: @nav-icon;
@btn-icon-color-inverted: @nav-icon-inverted;
@btn-icon-color-hover: @nav-icon-hover;
@btn-icon-color-inverted-hover: @nav-icon-inverted-hover;
// Disabled - question components
// --------------------------------------------------
@disabled: #DDDDDD;
@disabled-inverted: @black;
// Validation states - question marking
// --------------------------------------------------
@validation-success: #065f28;
@validation-success-inverted: @white;
@validation-error: #ff0000;
@validation-error-inverted: @white;
// Progress
// --------------------------------------------------
@progress: @grey;
@progress-inverted: @white;
@progress-border: @grey;
// Menu
// --------------------------------------------------
@menu-item: @white;
@menu-item-inverted: @font-color;
@menu-item-border-color: @item-color;
@menu-item-progress: @progress;
@menu-item-progress-inverted: @progress-inverted;
@menu-item-progress-border: @progress-border;
@menu-item-btn-color: @btn-color;
@menu-item-btn-color-inverted: @btn-color-inverted;
@menu-item-btn-color-hover: @btn-color-hover;
@menu-item-btn-color-inverted-hover: @btn-color-inverted-hover;
// Navigation
// --------------------------------------------------
@nav: @white;
@nav-inverted: @grey;
@nav-icon: @nav-inverted;
@nav-icon-inverted: @nav;
@nav-icon-hover: darken(@nav-icon, 10%);
@nav-icon-inverted-hover: @nav-icon-inverted;
@nav-progress: @nav-icon-inverted;
@nav-progress-inverted: @nav-icon;
@nav-progress-border: @nav-icon-inverted;
@nav-progress-hover: @nav-icon-inverted-hover;
@nav-progress-inverted-hover: @nav-progress-inverted;
@nav-progress-border-hover: @nav-progress-border;
// Notify
// --------------------------------------------------
@notify: @blue;
@notify-inverted: @white;
@notify-link: @notify-inverted;
@notify-link-hover: @notify-link;
@notify-btn: @btn-color-inverted;
@notify-btn-inverted: @btn-color;
@notify-btn-hover: darken(@notify-btn, 10%);
@notify-btn-inverted-hover: @notify-btn-inverted;
@notify-icon: @notify;
@notify-icon-inverted: @notify-inverted;
@notify-icon-hover: darken(@notify-icon, 10%);
@notify-icon-inverted-hover: @notify-icon-inverted;
// Drawer
// --------------------------------------------------
@drawer: @blueDark;
@drawer-inverted: @white;
@drawer-link: @drawer-inverted;
@drawer-link-hover: @drawer-link;
@drawer-icon: @drawer;
@drawer-icon-inverted: @drawer-inverted;
@drawer-icon-hover: darken(@drawer-icon, 10%);
@drawer-icon-inverted-hover: @drawer-icon-inverted;
@drawer-item: @drawer;
@drawer-item-inverted: @drawer-inverted;
@drawer-item-hover: darken(@drawer-item, 10%);
@drawer-item-inverted-hover: @drawer-item-inverted;
@drawer-item-selected: darken(@drawer-item, 20%);
@drawer-item-inverted-selected: @drawer-item-inverted;
@drawer-progress: @drawer-item-inverted;
@drawer-progress-inverted: @drawer-item;
@drawer-progress-border: @drawer-item-inverted;
@drawer-progress-hover: @drawer-item-inverted-hover;
@drawer-progress-inverted-hover: @drawer-item-hover;
@drawer-progress-border-hover: @drawer-progress-border;
// Background
// --------------------------------------------------
@background: @black;
@background-inverted: @white;
// Shadow
// --------------------------------------------------
@shadow: @black;
@shadow-inverted: @white;
差异被折叠。
.component-container {
box-sizing: border-box;
padding: 8px 16px 16px;
min-height: 24px;
}
// 标题左侧-进度条
.component-progress {
position: absolute;
left: 0;
z-index: 0;
padding-top: 2px;
line-height: 1.3;
display: inline-block;
vertical-align: middle;
.progress-text {
width: 0;
overflow: hidden;
visibility: hidden;
display: inline;
vertical-align: middle;
/deep/p {
width: 0;
overflow: hidden;
display: inline;
&:not(:first-child) {
display: none;
}
}
}
}
//由于内部弹出窗口
.drawer-right {
/deep/ &.el-drawer {
overflow: visible;
.el-drawer__body {
overflow: visible;
}
}
}
// 右侧弹窗
// 右侧弹窗头部高度
@drawHeaderHeight: 54px;
.drawer-right-inner {
width: 100%;
height: 100%;
background-color: #fff;
.header {
box-sizing: border-box;
height: @drawHeaderHeight;
}
.header-close-btn {
position: absolute;
top: 0;
right: 0;
padding: 19px 16px;
}
.drawer-right-inner-form {
box-sizing: border-box;
padding-top: 16px;
height: calc(100% - @drawHeaderHeight);
}
}
\ No newline at end of file
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
\ No newline at end of file
@import 'coloursBase.less';
:root {
--quaternary-color: @blue;
}
/* 标题颜色 */
.title-color {
color: @heading-color;
}
.is_title {
// color: @heading-color;
// 设计稿#222
color: var(--heading-color, #262626);
}
// --------------------------------------------------
// 富文本编辑框-字体颜色
// 除了标题之外的文字颜色
.richEditor-container.inline:not(.is_title) .ck-editor__editable_inline {
p {
color: var(--font-color, #222);
}
}
// 行内输入框 - 说明
.richEditor-container.ckeditor_inline_instruction .ck-editor__editable_inline {
p {
color: var(--font-color, #8C8C8C);
}
}
// 行内输入框-链接
.richEditor-container.inline .ck-editor__editable_inline {
a {
cursor: pointer;
&.ck-link_selected {background-color: transparent!important;}
color: var(--link);
&:hover {
color: var(--link-hover);
}
}
}
// --------------------------------------------------
#app {
// 主体区域
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: 180px;
}
// 侧边栏
.sidebar-container {
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
transition: width .28s;
width: 180px !important;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
a {
display: inline-block;
width: 100%;
}
.svg-icon {
margin-right: 16px;
}
.el-menu {
border: none;
width: 100% !important;
}
}
.hideSidebar {
.sidebar-container {
// width: 36px !important;
width: 0 !important;
}
.main-container {
// margin-left: 36px;
margin-left: 0;
}
.submenu-title-noDropdown {
padding-left: 10px !important;
position: relative;
.el-tooltip {
padding: 0 10px !important;
}
}
.el-submenu {
&>.el-submenu__title {
padding-left: 10px !important;
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
}
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
.sidebar-container .el-submenu .el-menu-item {
min-width: 180px !important;
background-color: #1f2d3d !important;
&:hover {
background-color: #001528 !important;
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: 180px !important;
}
//适配移动端
// .mobile {
// .main-container {
// margin-left: 0px;
// }
// .sidebar-container {
// top: 50px;
// transition: transform .28s;
// width: 180px !important;
// }
// &.hideSidebar {
// .sidebar-container {
// transition-duration: 0.3s;
// transform: translate3d(-180px, 0, 0);
// }
// }
// }
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
//globl transition css
/*fade*/
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
/*fade*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
}
.breadcrumb-move {
transition: all .5s;
}
.breadcrumb-leave-active {
position: absolute;
}
import { app } from 'electron'
import { app, screen } from 'electron'
class AppEvents {
create (appManager) {
......@@ -33,9 +33,14 @@ class AppEvents {
Before electron app is ready, we should initial */
app.on('ready', async () => {
try {
appManager.initApp()
console.log('getPrimaryDisplay')
console.log(screen.getPrimaryDisplay())
setTimeout(()=>{
appManager.initApp()
},100);
} catch (error) {
console.log(error)
console.log(990)
console.error(error)
}
})
......@@ -61,15 +66,6 @@ class AppEvents {
// noSound: true
// })
})
// Quit when all windows are closed.
// app.on("window-all-closed", () => {
// this.windowManager.mainWindow.win = null
// // On macOS it is common for applications and their menu bar
// // to stay active until the user quits explicitly with Cmd + Q
// if (process.platform !== "darwin") {
// app.quit();
// }
// });
}
}
......
......@@ -62,7 +62,8 @@ class IpcEvents {
event.sender.send('context-menu-command', 'modeJianYue');
this.store.set("currentMode", "modeJianYue");
this.windowManager.mainWindow.win.setBounds({
x: (displayWH.width - Number(process.env.VUE_APP_mainW))/2,
// x: (displayWH.width - Number(process.env.VUE_APP_mainW))/2,
x: 0,
y: (displayWH.height - Number(process.env.VUE_APP_mainH)),
width: Number(process.env.VUE_APP_mainW),
height: Number(process.env.VUE_APP_mainH)
......@@ -78,6 +79,7 @@ class IpcEvents {
this.store.set("currentMode", "modeJiJian");
this.windowManager.mainWindow.win.setBounds({
// x: ( Number(displayWH.width) - 419)/2,
x:0,
// y: ( Number(displayWH.height) - 60),
width: 419,
height: 60
......
......@@ -11,7 +11,7 @@ import { protocol } from 'electron'
//热加载
try {
// require('electron-reloader')(module);
require('electron-reloader')(module);
} catch {}
// Scheme must be registered before the app is ready
......
import { app, screen } from 'electron'
import MainWindow from '../windows/mainWindow'
class WindowManager {
......@@ -8,10 +9,11 @@ class WindowManager {
/* Create all windows
创建所有窗口 */
createAllWindows () {
const displayDetail = screen.getPrimaryDisplay();
this.mainWindow.listen()
this.mainWindow.createWindow({
isMainWin: true,
width:Number(process.env.VUE_APP_mainW),
width:Number(displayDetail.size.width || process.env.VUE_APP_mainW),
height: Number(process.env.VUE_APP_mainH),
// minWidth:Number(process.env.VUE_APP_mainW),
// minHeight: Number(process.env.VUE_APP_mainH),
......
......@@ -21,7 +21,6 @@ export const windowsCfg = {
route: '', // 页面路由URL '/manage?id=123'
resizable: true, //是否支持调整窗口大小
maximize: false, //是否最大化
// backgroundColor:'#eee', //窗口背景色
data: null, //数据
isMultiWindow: false, //是否支持多开窗口 (如果为false,当窗体存在,再次创建不会新建一个窗体 只focus显示即可,,如果为true,即使窗体存在,也可以新建一个)
isMainWin: false, //是否主窗口(当为true时会替代当前主窗口)
......@@ -45,25 +44,29 @@ class MainWindow {
initBrowserPage (args, win) {
// Dev or not
let winURL = '';
if (process.env.WEBPACK_DEV_SERVER_URL) {
win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
/* 开发环境下自启动开发者工具
start developer tools in the development environment */
winURL = args.route ? `http://localhost:8080#${args.route}` : `http://localhost:8080`
try {
if (process.env.WEBPACK_DEV_SERVER_URL) {
win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
/* 开发环境下自启动开发者工具
start developer tools in the development environment */
winURL = args.route ? `http://localhost:8080#${args.route}` : `http://localhost:8080`
win.loadURL(winURL)
// if(args.isMainWin) win.webContents.openDevTools({ mode: 'detach' })
win.webContents.openDevTools({ mode: 'detach' })
} else {
createProtocol('app')
winURL = args.route ? `app://./index.html#${args.route}` : `app://./index.html`
win.loadURL(winURL)
// if(args.isMainWin) win.webContents.openDevTools({ mode: 'detach' })
win.webContents.openDevTools({ mode: 'detach' })
} else {
createProtocol('app')
winURL = args.route ? `app://./index.html#${args.route}` : `app://./index.html`
win.loadURL(winURL)
// win.webContents.openDevTools({ mode: 'detach' })
// win.webContents.openDevTools({ mode: 'detach' })
}
} catch (error) {
console.error( error )
}
// this.win.on('closed', () => {
// this.win = null
// console.log('windows closed')
// })
this.win.on('closed', () => {
this.win = null
console.log('windows closed')
})
}
// 窗口配置
......@@ -71,7 +74,6 @@ class MainWindow {
return {
width: wh[0],
height: wh[1],
// backgroundColor: '#f00',
// autoHideMenuBar: true,
// titleBarStyle: "hidden",
resizable: true,
......@@ -81,8 +83,6 @@ class MainWindow {
show: false,
fullscreen:false,
fullscreenable:false,
// backgroundColor: '#00000000', //透明颜色
transparent:true, //透明开启
webPreferences: {
contextIsolation: false, //上下文隔离
nodeIntegration: true, //启用Node集成(是否完整的支持 node)
......@@ -129,11 +129,14 @@ class MainWindow {
if(typeof args.modal === 'boolean') opt.modal = args.modal
if(typeof args.resizable === 'boolean') opt.resizable = args.resizable
if(args.backgroundColor) opt.backgroundColor = args.backgroundColor
if(args.minWidth) opt.minWidth = args.minWidth;
if(args.minHeight) opt.minHeight = args.minHeight;
if(args.x) opt.x = args.x;
if(args.y) opt.y = args.y;
if(args.x != undefined) opt.x = args.x;
if(args.y != undefined) opt.y = args.y;
if(args.isMainWin) {
// opt.transparent = true;
// opt.backgroundColor = '#10000000'
}
console.log(opt)
let win = new BrowserWindow(opt)
......@@ -197,7 +200,10 @@ class MainWindow {
// // resizable:false,
// })
win.on('close', () => win.setOpacity(0))
// win.on('close', (event) => {
// event.preventDefault();
// // win.hide();
// })
// 等待加载完成再去显示,不显示白屏加载过程
win.once('ready-to-show', () => {
if(args.visible!='hide') win.show();
......@@ -229,7 +235,7 @@ class MainWindow {
this.setAboutPanel()
// 读取Linux系统中已经安装的软件
this.softList.getList();
if(args.isMainWin) this.softList.getList();
}
// 关闭所有窗口
......@@ -371,6 +377,7 @@ class MainWindow {
onlyOneShowMain() {
// 只显示一个主窗口
const gotTheLock = app.requestSingleInstanceLock()
console.log('gotTheLock', gotTheLock)
if (!gotTheLock) {
app.quit()
} else {
......
import { app, BrowserWindow, ipcMain, Menu, Tray } from "electron";
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import path from 'path'
export const windowsCfg = {
id: '', //唯一id
title: '', //窗口标题
width: '', //宽度
height: '', //高度
minWidth: '', //最小宽度
minHeight: '', //最小高度
route: '', // 页面路由URL '/manage?id=123'
resizable: true, //是否支持调整窗口大小
maximize: false, //是否最大化
backgroundColor:'#eee', //窗口背景色
data: null, //数据
isMultiWindow: false, //是否支持多开窗口 (如果为false,当窗体存在,再次创建不会新建一个窗体 只focus显示即可,,如果为true,即使窗体存在,也可以新建一个)
isMainWin: false, //是否主窗口(当为true时会替代当前主窗口)
parentId: '', //父窗口id 创建父子窗口 -- 子窗口永远显示在父窗口顶部 【父窗口可以操作】
modal: false, //模态窗口 -- 模态窗口是禁用父窗口的子窗口,创建模态窗口必须设置 parent 和 modal 选项 【父窗口不能操作】
}
/**
* 窗口配置
*/
export class Window {
constructor() {
this.main = null; //当前页
this.group = {}; //窗口组
this.tray = null; //托盘
}
// 窗口配置
winOpts(wh=[]) {
return {
width: wh[0],
height: wh[1],
backgroundColor: '#f00',
autoHideMenuBar: true,
titleBarStyle: "hidden",
resizable: true,
minimizable: true,
maximizable: true,
frame: false,
show: false,
webPreferences: {
contextIsolation: false, //上下文隔离
// nodeIntegration: true, //启用Node集成(是否完整的支持 node)
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
// devTools: false,
webSecurity: false,
enableRemoteModule: true, //是否启用远程模块(即在渲染进程页面使用remote)
}
}
}
// 获取窗口
getWindow(id) {
return BrowserWindow.fromId(id)
}
// 获取全部窗口
getAllWindows() {
return BrowserWindow.getAllWindows()
}
// 创建窗口
createWindows(options) {
console.log('------------开始创建窗口...')
console.log(options)
let args = Object.assign({}, windowsCfg, options)
console.log(args)
// 判断窗口是否存在
for(let i in this.group) {
if(this.getWindow(Number(i)) && this.group[i].route === args.route && !this.group[i].isMultiWindow) {
this.getWindow(Number(i)).focus()
return
}
}
let opt = this.winOpts([args.width || 800, args.height || 600])
if(args.parentId) {
console.log('parentId:' + args.parentId)
opt.parent = this.getWindow(args.parentId)
} else if(this.main) {
console.log(666)
}
if(typeof args.modal === 'boolean') opt.modal = args.modal
if(typeof args.resizable === 'boolean') opt.resizable = args.resizable
if(args.backgroundColor) opt.backgroundColor = args.backgroundColor
if(args.minWidth) opt.minWidth = args.minWidth
if(args.minHeight) opt.minHeight = args.minHeight
console.log(opt)
let win = new BrowserWindow(opt)
console.log('窗口id:' + win.id)
this.group[win.id] = {
route: args.route,
isMultiWindow: args.isMultiWindow,
}
// 是否最大化
if(args.maximize && args.resizable) {
win.maximize()
}
// 是否主窗口
if(args.isMainWin) {
if(this.main) {
console.log('主窗口存在')
delete this.group[this.main.id]
this.main.close()
}
this.main = win
}
args.id = win.id
win.on('close', () => win.setOpacity(0))
// 打开网址(加载页面)
/**
* 开发环境: http://localhost:8080
* 正式环境: app://./index.html
*/
let winURL
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
// win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
winURL = args.route ? `http://localhost:8080${args.route}` : `http://localhost:8080`
// 打开开发者调试工具
// if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
// win.loadURL('app://./index.html')
winURL = args.route ? `app://./index.html${args.route}` : `app://./index.html`
}
win.loadURL(winURL)
win.once('ready-to-show', () => {
win.show()
})
// 屏蔽窗口菜单(-webkit-app-region: drag)
win.hookWindowMessage(278, function(e){
win.setEnabled(false)
setTimeout(() => {
win.setEnabled(true)
}, 100)
return true
})
}
// 关闭所有窗口
closeAllWindow() {
for(let i in this.group) {
if(this.group[i]) {
if(this.getWindow(Number(i))) {
this.getWindow(Number(i)).close()
} else {
console.log('---------------------------')
app.quit()
}
}
}
}
// 创建托盘
createTray() {
console.log('创建托盘')
const contextMenu = Menu.buildFromTemplate([
{
label: '显示',
click: () => {
for(let i in this.group) {
if(this.group[i]) {
// this.getWindow(Number(i)).show()
let win = this.getWindow(Number(i))
if(!win) return
if(win.isMinimized()) win.restore()
win.show()
}
}
}
}, {
label: '退出',
click: () => {
app.quit()
}
}
])
console.log(__dirname)
const trayIco = path.join(__dirname, '../static/logo.png')
console.log(trayIco)
this.tray = new Tray(trayIco)
this.tray.setContextMenu(contextMenu)
this.tray.setToolTip(app.name)
}
// 开启监听
listen() {
// 关闭
ipcMain.on('window-closed', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).close()
if(this.group[Number(winId)]) delete this.group[Number(winId)]
} else {
this.closeAllWindow()
}
})
// 隐藏
ipcMain.on('window-hide', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).hide()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).hide()
}
})
// 显示
ipcMain.on('window-show', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).show()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).show()
}
})
// 最小化
ipcMain.on('window-mini', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).minimize()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).minimize()
}
})
// 最大化
ipcMain.on('window-max', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).maximize()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).maximize()
}
})
// 最大化/最小化
ipcMain.on('window-max-min-size', (event, winId) => {
if(winId) {
if(this.getWindow(winId).isMaximized()) {
this.getWindow(winId).unmaximize()
}else {
this.getWindow(winId).maximize()
}
}
})
// 还原
ipcMain.on('window-restore', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).restore()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).restore()
}
})
// 重新加载
ipcMain.on('window-reload', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).reload()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).reload()
}
})
// 创建窗口
ipcMain.on('window-new', (event, args) => this.createWindows(args))
}
}
\ No newline at end of file
......@@ -2,255 +2,18 @@
<div>
<router-view></router-view>
</div>
<!-- <div id="app" ref="appcontainer" class="container">
<div class="left_main">
<img src="~@/assets/WechatIMG17.jpeg" alt="" class="left_img">
<span class="left_name" @click="getFrontApp">许昌市第十六中学</span>
</div>
<div v-if="mode=='modeJianYue'" class="group1_wrap first">
<div v-for="(appItem, appIndex) in group1"
:data-appname="appItem.name"
class="app_item"
@click="tapApp(appItem)">
<img :src="appItem.icon" alt="" class="img" v-if="appItem.icon && appItem.icon.indexOf('.png') == -1">
<span class="app_name">{{ appItem.name }}</span>
</div>
</div>
<div v-if="mode=='modeJianYue'" class="group1_wrap">
<div v-for="(appItem, appIndex) in group2"
:data-appname="appItem.name"
class="app_item"
@click="tapApp(appItem)">
<img :src="appItem.icon" alt="" class="img">
<span class="app_name">{{ appItem.name }}</span>
</div>
</div>
<div v-if="mode=='modeJianYue'" class="group1_wrap">
<div v-for="(appItem, appIndex) in group3"
:data-appname="appItem.name"
class="app_item"
@click="tapApp(appItem)">
<img :src="appItem.icon" alt="" class="img">
<span class="app_name">{{ appItem.name }}</span>
</div>
</div>
<div v-if="mode=='modeJianYue'" class="group1_wrap">
<div v-for="(appItem, appIndex) in group4"
:data-appname="appItem.name"
class="app_item"
@click="tapApp(appItem)">
<img :src="appItem.icon" alt="" class="img">
<span class="app_name">{{ appItem.name }}</span>
</div>
</div>
</div> -->
</template>
<script>
import one from './components/Dockmode/one.vue';
export default {
components: {
one
},
data() {
return {
appList:[],
mode:'modeJianYue',
};
},
computed: {
group1() {
return this.appList.length > 8 && this.appList.slice(0,9) || [];
},
group2() {
return this.appList.length > 10 && this.appList.slice(9,11) || [];
},
group3() {
return this.appList.length > 12 && this.appList.slice(11,13) || [];
},
group4() {
return this.appList.length > 14 && this.appList.slice(13,15) || [];
},
ipcRenderer() {
return this.$electron && this.$electron.ipcRenderer || {};
}
},
created() {
},
mounted() {
// this.listener();
// // 通知主进程
// this.ipcSend();
// // 接收主进程消息
// this.ipcOn();
},
methods: {
listener() {
// 监听右键菜单
window.addEventListener('contextmenu', (e) => {
e.preventDefault();
if(e.target.parentElement && e.target.parentElement.classList.contains("app_item")
|| e.target.classList.contains("app_item")) {
return;
}
// if(e.target.parentElement && e.target.parentElement.classList.contains("left_main")
// || e.target.classList.contains("left_main")) {
// return;
// }
let ipcRenderer = this.$electron && this.$electron.ipcRenderer || {};
ipcRenderer.send("show-context-menu");
});
// 监听 `dragover` 事件,防止默认行为
window.addEventListener('dragover', (e) => {
e.preventDefault();
});
// 监听 `drop` 事件,获取拖拽的文件路径
window.addEventListener('drop', (e) => {
e.preventDefault();
let appFiles = [];
console.log(e)
let ele = this.findParentOf({className:'app_item',element:e.target});
console.dir(ele)
if(!ele || !ele.dataset ||!ele.dataset.appname) {
// 无法放置
return;
}
let filesArr = new Array(e.dataTransfer.files.length).fill(1);
filesArr.forEach((v,index) => {
// mac-应用程序文件
let file = e.dataTransfer.files[index];
if(file.path.lastIndexOf('.app') == file.path.length-4) {
appFiles.push({
path:file.path,
name: file.name,
shortName: file.name.split('.')[0] || file.name
});
}
// let linux-快捷键
if(file.path.lastIndexOf('.desktop') == file.path.length-8) {
appFiles.push({
path:file.path,
name: file.name,
shortName: file.name.split('.')[0] || file.name
});
}
});
if(appFiles.length==0) {
// 无可用应用程序文件
return;
}
let targetIndex = this.appList.findIndex(v => v.name == ele.dataset.appname);
if(targetIndex>=0) {
// 移动软件
this.ipcRenderer.send('moveSoft', { appname:ele.dataset.appname, addFiles: appFiles });
}
});
},
ipcOn() {
// 接收主进程消息
// 获取到base64
this.ipcRenderer.on("base64Info", (event, {url,index}) => {
url = url.replace(/[\r\n]/g, '');
this.appList[index].icon = url;
});
// 获取到app列表
this.ipcRenderer.on("appsList", (event, list) => {
console.log('获取到app列表', list)
this.appList = list;
this.appList.forEach((item, index) => {
console.log(item.icon)
if(item.icon && item.icon.indexOf('data:image/png') == -1) {
this.ipcRenderer.send("getBase64", {'imagePath':item.icon,index});
}
});
});
this.ipcRenderer.on("appsList_update", (event, list) => {
console.log('刷新app列表', list)
this.appList = list;
});
// 获取到app消息
this.ipcRenderer.on("getMsg", (event, msgStr) => {
console.log('获取到app消息', msgStr)
});
// 右键菜单点击-切换模式
this.ipcRenderer.on("context-menu-command",(event, mode) => {
console.log('context-menu-command', mode)
let modeObj = {
modeJianYue:'modeJianYue',
modeJiJian:'modeJiJian',
modeUXue:'modeUXue',
};
this.mode = modeObj[mode];
});
},
ipcSend() {
// 通知主进程
const screen = this.$electron.remote.screen;
const {width,height} = screen.getPrimaryDisplay().workAreaSize;//获取到屏幕的宽度和高度
console.log('宽高',width,height);
// 设置程序位置
this.ipcRenderer.send("setMainWindow0",{width,height});
//获取app列表
this.ipcRenderer.send("getApps");
},
tapApp(item) {
console.log(item)
this.ipcRenderer.send("openApp",item);
},
getFrontApp() {
this.ipcRenderer.send("getfrontApp");
},
findParentOf({className,id, element}) {
// 查找当前点击元素是否包含某个类名,或者祖先元素中包含
// tag: .class / #id
if(className) {
if( element.classList.contains(className) ) return element;
else if(element.parentElement) return this.findParentOf({className,id, element:element.parentElement});
else return null;
}
if(id) {
if( element.id = id ) return element;
else if(element.parentElement) return this.findParentOf({className,id, element:element.parentElement});
else return null;
}
}
},
}
</script>
<style lang="less">
html {
background-color: transparent;
// background-color: transparent;
font-size: 16px;
}
body {
margin: 0;
font-size: 14px !important;
background-color: rgba(0,0,0,0.25);
}
.container {
font-size: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
height: 100%;
border-radius: 20px;
overflow: hidden;
// background-color: hsl(0, 0%, 25%);
// background-color: #fff;
background-color: transparent;
// background-color: rgba(0,0,0,0.25);
}
</style>
......@@ -90,7 +90,7 @@ export default {
.one_container {
font-size: 20px;
display: flex;
justify-content: space-evenly;
// justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
height: 100%;
......@@ -132,26 +132,27 @@ export default {
color: #fff;
}
.group1_wrap {
margin-left: 8px;
border-radius: 6px;
margin-left: 4px;
// background-color: hsl(0, 0%, 25%);
margin-left: 8px;
background: rgba(0, 0, 0, .1);
// border: 1px solid rgba(255,255,255,0.48);
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 40px;
// flex: 1;
height: 56px;
padding: 0 6px;
&.first {
padding-left: 10px;
margin-left: 2px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
// margin-left: 2px;
}
}
.app_item {
position: relative;
margin: 0 4px;
flex-shrink: 0;
// padding: 2px;
width: 36px;
height: 36px;
border-radius: 10px;
......@@ -164,19 +165,26 @@ export default {
text-align: left;
cursor: pointer;
flex-wrap: wrap;
transition: all 0.2s;
&:hover {
background-color: rgba(255, 255, 255, .1);
width: 50px;
height: 50px;
.app_name {
display: block;
// display: block;
opacity: 1;
}
}
}
.img {
flex-shrink: 0;
height: 36px;
// height: 36px;
height: 100%;
// width: 36px;
}
.app_name {
display: none;
// display: none;
opacity: 0;
position: absolute;
top: -10px;
left: -20px;
......@@ -188,6 +196,7 @@ export default {
font-size: 14px;
color: #fff;
z-index: 99;
transition: opacity .3s;
}
.yun_img {
width: 58px;
......
......@@ -2,7 +2,9 @@
<div>
<box v-for="(sItem, sInd) in schoolList" :key="sInd" >
<div class="resource_head">
<img src="" alt="" class="resource_icon">
<img v-if="sItem.icon === 'guojiazhihui'" src="~@/assets/school/zhihuipingtai.png" alt="" class="resource_icon">
<img v-else-if="sItem.icon === 'dianzi'" src="~@/assets/school/dianzikebenwang.png" alt="" class="resource_icon">
<img v-else-if="sItem.icon === 'xiaoxue'" src="~@/assets/school/xiaoxueziyuanwang.png" alt="" class="resource_icon">
<div @click="tapLink(sItem)" class="resource_name">{{sItem.name}}</div>
</div>
<div class="resource_item">
......@@ -26,7 +28,7 @@ export default {
default: [
{
name: "国家智慧教育公共服务平台",
icon: "",
icon: "guojiazhihui",
showNum:3,
weburl: "https://1s1k.eduyun.cn/portal/html/1s1k/index/1.html",
list: [
......@@ -51,7 +53,7 @@ export default {
},
{
name: "小学资源网",
icon: "",
icon: "xiaoxue",
showNum:4,
weburl: "https://www.xj5u.com/",
list: [
......@@ -79,7 +81,7 @@ export default {
},
{
name: "电子课本网",
icon: "",
icon: "dianzi",
showNum:6,
weburl: "http://www.dzkbw.com/",
list: [
......
import Layout from '../views/layout/Layout';
// RouterTab 内置路由
import { RouterTabRoutes } from 'vue-router-tab'
......
body::-webkit-scrollbar {
width: 0;
height: 0;
}
body::-webkit-scrollbar-button {
width: 0;
height: 0;
}
body::-webkit-scrollbar-track {
background: 0 0;
}
body::-webkit-scrollbar-thumb {
background: #dadadb;
-webkit-transition: 0.3s;
transition: 0.3s;
}
body::-webkit-scrollbar-thumb:hover {
background-color: #b0b2b3;
}
body::-webkit-scrollbar-thumb:active {
background-color: #b0b2b3;
}
#app {
overflow: hidden;
}
.drawer-right.rtl {
top: 40px;
}
......@@ -2,186 +2,10 @@
.electron_app {
// 隐藏body滚动条
&::-webkit-scrollbar{width:0;height:0}
&::-webkit-scrollbar-button{width:0;height:0}
&::-webkit-scrollbar-track{background:0 0}
&::-webkit-scrollbar-thumb{background:#dadadb;-webkit-transition:.3s;transition:.3s}
&::-webkit-scrollbar-thumb:hover{background-color:#b0b2b3}
&::-webkit-scrollbar-thumb:active{background-color:#b0b2b3}
#app {
overflow: hidden;
}
@barHeight: 0px; //#app-bar 32px
@courseNavbar: 50px; //.course-navbar
// app-bar
#app-bar {
background-color: #e7eaed;
color: #57646c;
display: flex;
align-items: center;
justify-content: space-between;
// 如果你想让某区域可以拖动,将其设为drag
// 但是设为drag的区域无法被点击,请注意
// 可以设置为no-drag来恢复点击
// If you want to make a region draggable, set it to drag
// But the area set as drag cannot be clicked, please note
// can be set to no-drag to resume clicks
-webkit-app-region: drag;
height: @barHeight;
#app-action {
padding: 0;
font-size: 16px;
display: flex;
-webkit-app-region: no-drag;
text-align: center;
align-items: center;
}
.app-action-button {
box-sizing: border-box;
padding: 0 8px;
transition: .2s ease;
opacity: 0.7;
width: 52px;
height: @barHeight;
line-height: @barHeight;
display: flex;
align-items: center;
justify-content: center;
}
.app-action-button:hover {
background-color: #cfd2d5;
opacity: 1;
}
// 关闭按钮
.close-app-button:hover {
background-color: #e81123;
span {
color: #fff;
}
i {
color: #fff;
}
}
#app-title {
img {
-webkit-app-region: no-drag;
margin: 0 8px;
width: 20px;
}
span {
font-size: 14px;
}
}
.togglefullscreen {
display: block;
box-sizing: border-box;
width: 10px;
height: 10px;
border: 1px solid #000;
// 全屏下
&.full {
position: relative;
top: -2px;
width: 9px;
height: 9px;
&::after {
position: absolute;
top: 2px;
left: calc( 50% - 2px );
transform: translateX(-50%);
content: "";
box-sizing: border-box;
border: 1px solid #000;
width: 9px;
height: 9px;
background-color: #e7eaed;
}
}
}
}
.drawer-right {
&.rtl{
// top: 50px;
}
.el-tabs__content {
height: calc(100% - 40px) !important; //el-tabs__header 40px
}
// 无头部
&.not-header {
.el-tabs {
height: 100%;
}
.right-sub-modal-body {
height: calc(100% - 55px) !important;
}
}
}
.el-drawer__wrapper {
top: calc(@barHeight + @courseNavbar) !important;
// height: calc(100% - 40px) !important;
}
.drawer-right-inner {
// height: calc(100% - 10px) !important;
}
.right-sub-modal-body {
height: calc(100% - 95px) !important;
}
.list-container.grid_type .el-scrollbar__bar.is-horizontal {
display: none;
}
.el-popup-parent--hidden {
padding-right: 0 !important; //electron端重置
}
// 弹出层遮罩 -el
@headerTitleHeight: 54px;
@tabHeight: 40px;
&.hide-modal {
.v-modal {
top: calc(32px + 50px) !important;
}
// 右侧滑动编辑区,遮罩层不可见
.drawer-right.rtl {
top: 0;
.el-tabs {
height: 100%;
}
.el-tabs__content {
height: calc(100% - @tabHeight) !important;
}
}
}
// 模板弹框
.el-dialog__wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.create-temp-dialog {
margin: 0 auto !important;
max-width: 90%;
}
// 课程列表弹窗
.course-dialog {
top: 0;
transform: translateY(0);
}
.hotgraphic-dialog {
top: 0;
}
// &::-webkit-scrollbar{width:0;height:0}
// &::-webkit-scrollbar-button{width:0;height:0}
// &::-webkit-scrollbar-track{background:0 0}
// &::-webkit-scrollbar-thumb{background:#dadadb;-webkit-transition:.3s;transition:.3s}
// &::-webkit-scrollbar-thumb:hover{background-color:#b0b2b3}
// &::-webkit-scrollbar-thumb:active{background-color:#b0b2b3}
}
\ No newline at end of file
......@@ -70,16 +70,18 @@ export default {
const { width, height } = screen.getPrimaryDisplay().workAreaSize; //获取到屏幕的宽度和高度
const main_win = this.$electron.remote.getCurrentWindow();
const [mainX, mainY] = main_win.getPosition();
console.log(mainX, mainY)
this.ipcRenderer.send("window-new", {
title: "管理页面",
route: "/manage",
// width: width * 0.6,
width: 1200,
height: height * 0.7,
backgroundColor: "#f9f9f9",
// backgroundColor: "#f9f9f9",
resizable: true,
modal: false,
x: mainX,
// x: mainX,
x: 0,
y: mainY - height * 0.7,
webType:'appManage',
visible: arg.visible
......@@ -167,7 +169,7 @@ export default {
})
// 获取到base64
this.ipcRenderer.on("base64Info", (event, { url, index }) => {
this.ipcRenderer.on("base64Info", (event, { url, index, time }) => {
url = url.replace(/[\r\n]/g, "");
this.appList[index].icon = url;
});
......@@ -178,7 +180,9 @@ export default {
this.appList = list;
this.appList.forEach((item, index) => {
// console.log(item.icon)
if (item.icon && item.icon.indexOf("data:image/png") == -1) {
if (item.icon
&& (item.icon.indexOf('data:image/png') == -1 && item.icon.indexOf('data:image/svg') == -1)
&& item.searchIcon === true) {
// console.log('getBase64', index)
this.ipcRenderer.send("getBase64", { imagePath: item.icon, index });
}
......
<template>
<div class="application-list-container">
<div @click="newWin">打开新窗口</div>
<div v-for="(appItem,index) in appList" :key="index" class="application-item" @click="tapApp(appItem)">
<div>名字:{{ appItem.name }}</div>
<img :src="appItem.icon" alt="" class="img">
<div>中文名字:{{ appItem.nameOfZh }}</div>
<div>文件路径:{{ appItem.desktop }}</div>
</div>
</div>
</template>
<script>
/* import pinyin from 'pinyin'; */
export default {
data() {
return {
appList:[],
mode:'modeJianYue',
};
},
computed: {
group1() {
return this.appList.length > 8 && this.appList.slice(0,9) || [];
},
group2() {
return this.appList.length > 10 && this.appList.slice(9,11) || [];
},
group3() {
return this.appList.length > 12 && this.appList.slice(11,13) || [];
},
group4() {
return this.appList.length > 14 && this.appList.slice(13,15) || [];
},
ipcRenderer() {
return this.$electron && this.$electron.ipcRenderer || {};
}
},
created() {
<div></div>
</template>
},
mounted() {
this.listener();
<script>
export default {
// 通知主进程
this.ipcSend();
// 接收主进程消息
this.ipcOn();
},
methods: {
newWin() {
const main_win = this.$electron.remote.getCurrentWindow();
const [mainX, mainY] = main_win.getPosition();
this.ipcRenderer.send('window-new', {
title: '首页',
route: '/404',
width: 500,
height: 250,
backgroundColor: '#f9f9f9',
resizable: true,
modal: false,
x:mainX,
y:mainY-250
})
},
listener() {
// 监听右键菜单
window.addEventListener('contextmenu', (e) => {
e.preventDefault();
if(e.target.parentElement && e.target.parentElement.classList.contains("app_item")
|| e.target.classList.contains("app_item")) {
return;
}
// if(e.target.parentElement && e.target.parentElement.classList.contains("left_main")
// || e.target.classList.contains("left_main")) {
// return;
// }
let ipcRenderer = this.$electron && this.$electron.ipcRenderer || {};
ipcRenderer.send("show-context-menu");
});
// 监听 `dragover` 事件,防止默认行为
window.addEventListener('dragover', (e) => {
e.preventDefault();
});
// 监听 `drop` 事件,获取拖拽的文件路径
window.addEventListener('drop', (e) => {
e.preventDefault();
let appFiles = [];
console.log(e)
let ele = this.findParentOf({className:'app_item',element:e.target});
console.dir(ele)
if(!ele || !ele.dataset ||!ele.dataset.appname) {
// 无法放置
return;
}
let filesArr = new Array(e.dataTransfer.files.length).fill(1);
filesArr.forEach((v,index) => {
// mac-应用程序文件
let file = e.dataTransfer.files[index];
if(file.path.lastIndexOf('.app') == file.path.length-4) {
appFiles.push({
path:file.path,
name: file.name,
shortName: file.name.split('.')[0] || file.name
});
}
// let linux-快捷键
if(file.path.lastIndexOf('.desktop') == file.path.length-8) {
appFiles.push({
path:file.path,
name: file.name,
shortName: file.name.split('.')[0] || file.name
});
}
});
if(appFiles.length==0) {
// 无可用应用程序文件
return;
}
let targetIndex = this.appList.findIndex(v => v.name == ele.dataset.appname);
if(targetIndex>=0) {
// 移动软件
this.ipcRenderer.send('moveSoft', { appname:ele.dataset.appname, addFiles: appFiles });
}
});
},
ipcOn() {
// 接收主进程消息
}
</script>
// 获取到base64
this.ipcRenderer.on("base64Info", (event, {url,index}) => {
url = url.replace(/[\r\n]/g, '');
this.appList[index].icon = url;
});
<style>
// 获取到app列表
this.ipcRenderer.on("appsList", (event, list) => {
console.log('获取到app列表', list)
// this.appList = list;
this.appList.forEach((item, index) => {
// console.log(item.icon)
if(item.icon && item.icon.indexOf('data:image/png') == -1) {
this.ipcRenderer.send("getBase64", {'imagePath':item.icon,index});
}
});
// this.getPinyin();
});
this.ipcRenderer.on("appsList_update", (event, list) => {
console.log('刷新app列表', list)
// this.appList = list;
// this.getPinyin();
});
// 获取到app消息
this.ipcRenderer.on("getMsg", (event, msgStr) => {
console.log('获取到app消息', msgStr)
});
// 右键菜单点击-切换模式
this.ipcRenderer.on("context-menu-command",(event, mode) => {
console.log('context-menu-command', mode)
let modeObj = {
modeJianYue:'modeJianYue',
modeJiJian:'modeJiJian',
modeUXue:'modeUXue',
};
this.mode = modeObj[mode];
});
},
ipcSend() {
// 通知主进程
const screen = this.$electron.remote.screen;
const {width,height} = screen.getPrimaryDisplay().workAreaSize;//获取到屏幕的宽度和高度
console.log('宽高',width,height);
// 设置程序位置
this.ipcRenderer.send("setMainWindow0",{width,height});
//获取app列表
this.ipcRenderer.send("getApps");
},
tapApp(item) {
console.log(item)
this.ipcRenderer.send("openApp",item);
},
getFrontApp() {
this.ipcRenderer.send("getfrontApp");
},
findParentOf({className,id, element}) {
// 查找当前点击元素是否包含某个类名,或者祖先元素中包含
// tag: .class / #id
if(className) {
if( element.classList.contains(className) ) return element;
else if(element.parentElement) return this.findParentOf({className,id, element:element.parentElement});
else return null;
}
if(id) {
if( element.id = id ) return element;
else if(element.parentElement) return this.findParentOf({className,id, element:element.parentElement});
else return null;
}
},
// 排序
getPinyin() {
return;
// 将每个应用程序名字转换为拼音,并组成一个新的数组
const appNamesInPinyin = this.appList.map(appItem => {
return {
icon:appItem.icon,
nameOfZh:appItem.nameOfZh,
desktop:appItem.desktop,
name: (appItem.nameOfZh || appItem.name),
pinyin: pinyin((appItem.nameOfZh || appItem.name), {
style: pinyin.STYLE_NORMAL
}).join('')
};
});
// 根据拼音进行排序
appNamesInPinyin.sort((a, b) => {
return a.pinyin.localeCompare(b.pinyin);
});
// 输出排序后的应用程序名字
appNamesInPinyin.forEach(app => {
console.log(app.nameOfZh || app.name);
});
},
},
}
</script>
<style lang="less" scoped>
.application-list-container {
width: 100%;
height: 100px;
font-size: 24px;
background: #fff;
img {
width: 50px;
height: 50px;
}
.application-item {
display: flex;
}
}
</style>
\ No newline at end of file
</style>
\ No newline at end of file
<template>
<div></div>
</template>
<script>
export default {
name: 'layout',
}
</script>
<style lang="less" scoped>
</style>
<template>
<section class="app-main">
<transition name="fade" mode="out-in">
<!-- <router-view :key="key"></router-view> -->
<router-view></router-view>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
// key() {
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
// }
}
}
</script>
<template>
<div>12222</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
methods: {
}
}
</script>
<style lang="less" scoped>
.navbar {
height: 50px;
line-height: 50px;
border-radius: 0px !important;
.hamburger-container {
line-height: 58px;
height: 50px;
float: left;
padding: 0 10px;
}
.screenfull {
position: absolute;
right: 90px;
top: 16px;
color: red;
}
.avatar-container {
height: 50px;
display: inline-block;
position: absolute;
right: 35px;
.avatar-wrapper {
cursor: pointer;
margin-top: 5px;
position: relative;
.user-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
</style>
<template>
<div class="menu-wrapper">
<template v-for="item in routes" v-if="!item.hidden&&item.children">
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
:key="item.children[0].name">
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
<!-- <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon> -->
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{item.children[0].meta.title}}</span>
</el-menu-item>
</router-link>
<el-submenu v-else :index="item.name||item.path" :key="item.name">
<template slot="title">
<!-- <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon> -->
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
<el-menu-item :index="item.path+'/'+child.path">
<!-- <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon> -->
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
},
isNest: {
type: Boolean,
default: false
}
},
methods: {
hasOneShowingChildren(children) {
const showingChildren = children.filter(item => {
return !item.hidden
})
if (showingChildren.length === 1) {
return true
}
return false
}
}
}
</script>
<template>
<div>11111111111</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
export default {
computed: {
...mapState({
sidebar: state => state.app.sidebar,
}),
routes() {
return this.$router.options.routes
},
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
// import store from '@/renderer/store'
const { body } = document
const WIDTH = 1024
const RATIO = 3
export default {
watch: {
$route(route) {
// if (this.device === 'mobile' && this.sidebar.opened) {
// store.dispatch('CloseSideBar', { withoutAnimation: false })
// }
}
},
// beforeMount() {
// window.addEventListener('resize', this.resizeHandler)
// },
// mounted() {
// const isMobile = this.isMobile()
// if (isMobile) {
// store.dispatch('ToggleDevice', 'mobile')
// store.dispatch('CloseSideBar', { withoutAnimation: true })
// }
// },
// methods: {
// isMobile() {
// const rect = body.getBoundingClientRect()
// return rect.width - RATIO < WIDTH
// },
// resizeHandler() {
// if (!document.hidden) {
// const isMobile = this.isMobile()
// store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
// if (isMobile) {
// store.dispatch('CloseSideBar', { withoutAnimation: true })
// }
// }
// }
// }
}
......@@ -88,12 +88,12 @@ export default {
ipcOn() {
// 获取到app列表
this.ipcRenderer.on("appsList", (event, list) => {
// console.log("获取到app列表 2", list);
console.log("获取到app列表 2", list);
this.listObj.lastest = list;
this.appList = list;
// this.appList.forEach((item, index) => {
// // console.log(item.icon)
// if (item.icon && item.icon.indexOf("data:image/png") == -1) {
// if (item.icon && (item.icon.indexOf('data:image/png') == -1 && item.icon.indexOf('data:image/svg') == -1) && item.searchIcon === true) {
// this.ipcRenderer.send("getBase64", { imagePath: item.icon, index });
// }
// });
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论