53 changed files with 2504 additions and 495 deletions
@ -0,0 +1,12 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Document</title> |
|||
</head> |
|||
<body> |
|||
dsada |
|||
<a href="https://baidu.com" target="_blank">百度</a> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,165 @@ |
|||
import { inject, injectable } from "inversify" |
|||
// import Setting from "./modules/setting"
|
|||
// import DB from "./modules/db"
|
|||
import Api from "./modules/api" |
|||
import WindowManager from "./modules/window-manager" |
|||
import { app, nativeTheme, protocol, WebContentsView } from "electron" |
|||
import { electronApp } from "@electron-toolkit/utils" |
|||
import Tabs from "./modules/tabs/Tabs" |
|||
import { getFileUrl } from "./utils" |
|||
import BaseClass from "./base/base" |
|||
|
|||
protocol.registerSchemesAsPrivileged([ |
|||
// {
|
|||
// scheme: "http",
|
|||
// privileges: { standard: true, bypassCSP: true, allowServiceWorkers: true, supportFetchAPI: true, corsEnabled: true, stream: true },
|
|||
// },
|
|||
// {
|
|||
// scheme: "https",
|
|||
// privileges: { standard: true, bypassCSP: true, allowServiceWorkers: true, supportFetchAPI: true, corsEnabled: true, stream: true },
|
|||
// },
|
|||
// { scheme: "mailto", privileges: { standard: true } },
|
|||
{ |
|||
scheme: "api", |
|||
privileges: { |
|||
standard: true, |
|||
secure: true, |
|||
supportFetchAPI: true, |
|||
}, |
|||
}, |
|||
]) |
|||
|
|||
@injectable() |
|||
class App extends BaseClass { |
|||
destroy() { |
|||
// destroyAll()
|
|||
// 这里是应用正常退出
|
|||
} |
|||
// private _setting: Setting
|
|||
// private _db: DB
|
|||
private _Api: Api |
|||
private _windowManager: WindowManager |
|||
private _tabs: Tabs |
|||
|
|||
constructor( |
|||
// @inject(Setting) setting: Setting,
|
|||
// @inject(DB) db: DB,
|
|||
@inject(Api) Api: Api, |
|||
@inject(WindowManager) windowManager: WindowManager, |
|||
@inject(Tabs) tabs: Tabs, |
|||
) { |
|||
super() |
|||
// this._setting = setting
|
|||
// this._db = db
|
|||
this._Api = Api |
|||
this._windowManager = windowManager |
|||
this._tabs = tabs |
|||
} |
|||
|
|||
async init() { |
|||
this._windowManager.init() |
|||
app.whenReady().then(() => { |
|||
electronApp.setAppUserModelId("top.xieyaxin") |
|||
this.create() |
|||
this._Api.init() |
|||
}) |
|||
app.on("window-all-closed", () => { |
|||
if (process.platform !== "darwin") { |
|||
app.quit() |
|||
} |
|||
}) |
|||
app.on("will-quit", () => { |
|||
this.destroy() |
|||
}) |
|||
} |
|||
|
|||
create() { |
|||
this._windowManager.showMainWindow() |
|||
const mainWindow = this._windowManager.getMainWindow() |
|||
if (mainWindow) { |
|||
nativeTheme.themeSource = "light" |
|||
mainWindow.setTitleBarOverlay({ |
|||
height: 29, // the smallest size of the title bar on windows accounting for the border on windows 11
|
|||
color: "#F8F8F8", |
|||
symbolColor: "#000000", |
|||
}) |
|||
this._windowManager.showWindow("main-top") |
|||
const mainTopWindow = this._windowManager.get("main-top") |
|||
setTimeout(() => { |
|||
// console.log(mainWindow.getParentWindow());
|
|||
setTimeout(() => { |
|||
mainWindow.contentView.children.length = 0 |
|||
const view = new WebContentsView() |
|||
view.addChildView(mainTopWindow!.contentView) |
|||
view.webContents.loadURL(getFileUrl("about.html")) |
|||
// mainTopWindow!.contentView.setBounds({ x: 0, y: 0, width: 100, height: 30 })
|
|||
// view.setBounds({ x: 0, y: 0, width: 100, height: 30 })
|
|||
mainWindow.contentView.addChildView(view) |
|||
// mainWindow.contentView.children.sort()
|
|||
console.log(mainWindow.contentView.children) |
|||
}, 5000) |
|||
// mainWindow.webContents = mainTopWindow!.webContents
|
|||
mainWindow.reload() |
|||
console.log(mainWindow.webContents.getURL()) |
|||
|
|||
// mainTopWindow?.destroy()
|
|||
// mainWindow.contentView.addChildView(mainWindow.contentView)
|
|||
console.log(`child count: `, mainWindow.contentView.children.length) |
|||
}, 2000) |
|||
// if (mainTopWindow) {
|
|||
// mainTopWindow.setParentWindow(mainWindow)
|
|||
// mainTopWindow.setIgnoreMouseEvents(true, { forward: false })
|
|||
// const listenMove = () => {
|
|||
// if (mainWindow && mainTopWindow) {
|
|||
// const pos = mainWindow.getPosition()
|
|||
// mainTopWindow.setPosition(pos[0], pos[1])
|
|||
// }
|
|||
// }
|
|||
// mainWindow?.on("move", listenMove)
|
|||
// const listenResize = () => {
|
|||
// if (mainWindow && mainTopWindow) {
|
|||
// const size = mainWindow.getSize()
|
|||
// console.log(size)
|
|||
// mainTopWindow.setSize(size[0], size[1])
|
|||
// const pos = mainWindow.getPosition()
|
|||
// mainTopWindow.setPosition(pos[0], pos[1])
|
|||
// }
|
|||
// }
|
|||
// listenResize()
|
|||
// mainWindow?.on("resize", listenResize)
|
|||
// }
|
|||
} |
|||
// 考虑双browserwindow模式
|
|||
/** |
|||
* 因为browserwindow可以设置穿透，考虑将tab放在底层window上，其他组件放在上层window上。 |
|||
*/ |
|||
// const webContentsView = new WebContentsView({
|
|||
// webPreferences: {
|
|||
// preload: join(__dirname, "../preload/index.mjs"),
|
|||
// transparent: true,
|
|||
// nodeIntegration: true,
|
|||
// spellcheck: false,
|
|||
// contextIsolation: true,
|
|||
// },
|
|||
// })
|
|||
// // mainWindow!.contentView = webContentsView
|
|||
// // setTimeout(() => {
|
|||
// mainWindow!.contentView.addChildView(webContentsView)
|
|||
// // mainWindow?.setIgnoreMouseEvents(true, { forward: true })
|
|||
// // }, 2000);
|
|||
// webContentsView.webContents.loadURL(getFileUrl("index.html"))
|
|||
// const listenResize = () => {
|
|||
// const size = mainWindow!.getSize()
|
|||
// webContentsView.setBounds({ x: 0, y: 0, width: size[0], height: size[1] })
|
|||
// }
|
|||
// listenResize()
|
|||
// mainWindow!.addListener("resize", listenResize)
|
|||
|
|||
this._tabs.add("https://baidu.com", true) |
|||
this._tabs.add("https://zhihu.com") |
|||
return mainWindow |
|||
} |
|||
} |
|||
|
|||
export default App |
|||
export { App } |
|||
@ -0,0 +1,28 @@ |
|||
import IOC from "./_iocClass" |
|||
import { Container } from "inversify" |
|||
import iocModules, { destroyAllModules } from "./modules/_ioc" |
|||
import iocController, { destroyAllController } from "./controller/_ioc" |
|||
import iocCommand, { destroyAllCommand } from "./commands/_ioc" |
|||
import App from "./App" |
|||
|
|||
async function destroyAll() { |
|||
await destroyAllModules(_ioc) |
|||
await destroyAllController(_ioc) |
|||
await destroyAllCommand(_ioc) |
|||
} |
|||
|
|||
const _modulesIOC = new Container() |
|||
_modulesIOC.load(iocModules) |
|||
|
|||
const _commandIOC = _modulesIOC.createChild() |
|||
_commandIOC.load(iocCommand) |
|||
|
|||
const _controllerIOC = _commandIOC.createChild() |
|||
_controllerIOC.load(iocController) |
|||
|
|||
const _ioc = _controllerIOC.createChild() |
|||
_ioc.bind(IOC).toSelf().inSingletonScope() |
|||
_ioc.bind(App).toSelf().inSingletonScope() |
|||
|
|||
export { IOC, destroyAll, _ioc } |
|||
export default IOC |
|||
@ -0,0 +1,20 @@ |
|||
import { interfaces } from "inversify" |
|||
import BaseClass from "./base/base" |
|||
import { destroyAll, _ioc } from "./_ioc" |
|||
|
|||
class IOC extends BaseClass { |
|||
destroy() { |
|||
destroyAll() |
|||
} |
|||
|
|||
get<T = unknown>(serviceIdentifier: interfaces.ServiceIdentifier<T>) { |
|||
return _ioc.get<T>(serviceIdentifier) |
|||
} |
|||
|
|||
getAsync<T = unknown>(serviceIdentifier: interfaces.ServiceIdentifier<T>) { |
|||
return _ioc.getAsync<T>(serviceIdentifier) |
|||
} |
|||
} |
|||
|
|||
export { IOC } |
|||
export default IOC |
|||
@ -1,4 +1,10 @@ |
|||
abstract class Base {} |
|||
import EventEmitter from "node:events" |
|||
|
|||
export { Base } |
|||
export default Base |
|||
abstract class BaseClass { |
|||
public _events = new EventEmitter() |
|||
abstract init(...argus: any[]) |
|||
abstract destroy() |
|||
} |
|||
|
|||
export { BaseClass } |
|||
export default BaseClass |
|||
|
|||
@ -0,0 +1,4 @@ |
|||
abstract class BaseContainer {} |
|||
|
|||
export { BaseContainer } |
|||
export default BaseContainer |
|||
@ -0,0 +1,7 @@ |
|||
export default class BasicCommand { |
|||
static name: string = "BasicCommand" |
|||
|
|||
log() { |
|||
console.log("1231") |
|||
} |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
import { inject } from "inversify" |
|||
import Tabs from "vc/modules/tabs" |
|||
import WindowManager from "vc/modules/window-manager" |
|||
import { broadcast } from "vc/utils" |
|||
|
|||
class TabsCommand { |
|||
static name: string = "TabsCommand" |
|||
|
|||
constructor( |
|||
@inject(Tabs) private _Tabs: Tabs, |
|||
@inject(WindowManager) private _WindowManager: WindowManager, |
|||
) { |
|||
this.listenerTabActive = this.listenerTabActive.bind(this) |
|||
this._Tabs.events.addListener("tab-active", this.listenerTabActive) |
|||
} |
|||
|
|||
reload() { |
|||
this._WindowManager.getMainWindow()?.reload() |
|||
} |
|||
|
|||
sync() { |
|||
this.listenerTabActive() |
|||
} |
|||
|
|||
listenerTabActive() { |
|||
broadcast("TabsCommand.update", this.getAllTabs()) |
|||
} |
|||
|
|||
add(url) { |
|||
this._Tabs.add(url, true, this._WindowManager.getMainWindow()!) |
|||
} |
|||
|
|||
nagivate(index: number, url: string) { |
|||
console.log(`跳转${index}:${url}`) |
|||
|
|||
this._Tabs.navigate(+index, url) |
|||
} |
|||
|
|||
setActive(index) { |
|||
this._Tabs.changeActive(index) |
|||
} |
|||
|
|||
closeTab(e) { |
|||
this._Tabs.remove(e.body.active) |
|||
} |
|||
|
|||
getAllTabs() { |
|||
return this._Tabs._tabs.map(v => ({ |
|||
url: v.url, |
|||
showUrl: v.showUrl, |
|||
title: v.title, |
|||
favicons: v.favicons, |
|||
isActive: v.isActive, |
|||
})) |
|||
} |
|||
} |
|||
|
|||
export { TabsCommand } |
|||
export default TabsCommand |
|||
@ -0,0 +1,15 @@ |
|||
import { Container, ContainerModule } from "inversify" |
|||
import BasicCommand from "./BasicCommand" |
|||
import TabsCommand from "./TabsCommand" |
|||
|
|||
const modules = new ContainerModule(bind => { |
|||
bind(BasicCommand.name).to(BasicCommand).inSingletonScope() |
|||
bind(TabsCommand.name).to(TabsCommand).inSingletonScope() |
|||
}) |
|||
|
|||
async function destroyAllCommand(ioc: Container) { |
|||
await ioc.unloadAsync(modules) |
|||
} |
|||
|
|||
export { modules, destroyAllCommand } |
|||
export default modules |
|||
@ -0,0 +1,31 @@ |
|||
import { inject, injectable } from "inversify" |
|||
import BaseContainer from "vc/base/baseContainer" |
|||
import Tabs from "vc/modules/tabs" |
|||
import WindowManager from "vc/modules/window-manager" |
|||
|
|||
@injectable() |
|||
class BasicService extends BaseContainer { |
|||
static name: string = "BasicService" |
|||
|
|||
constructor( |
|||
@inject(WindowManager) private _WindowManager: WindowManager, |
|||
@inject(Tabs) private _Tabs: Tabs, |
|||
) { |
|||
super() |
|||
} |
|||
|
|||
showAbout() { |
|||
this._WindowManager.showWindow("about") |
|||
return { |
|||
a: "fuck", |
|||
} |
|||
} |
|||
|
|||
openTabDevtool() { |
|||
// this._Tabs.reload(0)
|
|||
this._Tabs.openDevtool(0) |
|||
} |
|||
} |
|||
|
|||
export { BasicService } |
|||
export default BasicService |
|||
@ -0,0 +1,45 @@ |
|||
import { inject, injectable } from "inversify" |
|||
import BaseContainer from "vc/base/baseContainer" |
|||
import Tabs from "vc/modules/tabs" |
|||
import WindowManager from "vc/modules/window-manager" |
|||
|
|||
@injectable() |
|||
class TabsService extends BaseContainer { |
|||
static name: string = "TabsService" |
|||
|
|||
constructor( |
|||
@inject(Tabs) private _Tabs: Tabs, |
|||
@inject(WindowManager) private _WindowManager: WindowManager, |
|||
) { |
|||
super() |
|||
} |
|||
|
|||
add(e) { |
|||
this._Tabs.add(e.body.url, true, this._WindowManager.getMainWindow()!) |
|||
} |
|||
|
|||
setActive(e) { |
|||
this._Tabs.changeActive(e.body.active) |
|||
} |
|||
|
|||
closeTab(e) { |
|||
this._Tabs.remove(e.body.active) |
|||
} |
|||
|
|||
closeTabAll(e) { |
|||
this._Tabs.removeAll(e.body.active) |
|||
} |
|||
|
|||
getAllTabs() { |
|||
return this._Tabs._tabs.map(v => ({ |
|||
url: v.url, |
|||
showUrl: v.showUrl, |
|||
title: v.title, |
|||
favicons: v.favicons, |
|||
isActive: v.isActive, |
|||
})) |
|||
} |
|||
} |
|||
|
|||
export { TabsService } |
|||
export default TabsService |
|||
@ -0,0 +1,15 @@ |
|||
import { Container, ContainerModule } from "inversify" |
|||
import BasicService from "./BasicService" |
|||
import TabsService from "./TabsService" |
|||
|
|||
const modules = new ContainerModule(bind => { |
|||
bind(BasicService.name).to(BasicService).inSingletonScope() |
|||
bind(TabsService.name).to(TabsService).inSingletonScope() |
|||
}) |
|||
|
|||
async function destroyAllController(ioc: Container) { |
|||
await ioc.unloadAsync(modules) |
|||
} |
|||
|
|||
export { modules, destroyAllController } |
|||
export default modules |
|||
@ -1,79 +1,6 @@ |
|||
import "reflect-metadata" |
|||
import { app, shell, BrowserWindow, ipcMain } from "electron" |
|||
import { join } from "path" |
|||
import { electronApp, optimizer, is } from "@electron-toolkit/utils" |
|||
import icon from "res/icon.png?asset" |
|||
import { container } from "vc/modules/ioc" |
|||
import { _ioc } from "vc/_ioc" |
|||
import { App } from "vc/App" |
|||
|
|||
container.get(App).init() |
|||
|
|||
function createWindow(): void { |
|||
// Create the browser window.
|
|||
const mainWindow = new BrowserWindow({ |
|||
width: 900, |
|||
height: 670, |
|||
show: false, |
|||
autoHideMenuBar: true, |
|||
...(process.platform === "linux" ? { icon } : {}), |
|||
webPreferences: { |
|||
preload: join(__dirname, "../preload/index.mjs"), |
|||
sandbox: false, |
|||
}, |
|||
}) |
|||
|
|||
mainWindow.on("ready-to-show", () => { |
|||
mainWindow.show() |
|||
}) |
|||
|
|||
mainWindow.webContents.setWindowOpenHandler(details => { |
|||
shell.openExternal(details.url) |
|||
return { action: "deny" } |
|||
}) |
|||
|
|||
// HMR for renderer base on electron-vite cli.
|
|||
// Load the remote URL for development or the local html file for production.
|
|||
if (is.dev && process.env["ELECTRON_RENDERER_URL"]) { |
|||
mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]) |
|||
} else { |
|||
mainWindow.loadFile(join(__dirname, "../renderer/index.html")) |
|||
} |
|||
} |
|||
|
|||
// This method will be called when Electron has finished
|
|||
// initialization and is ready to create browser windows.
|
|||
// Some APIs can only be used after this event occurs.
|
|||
app.whenReady().then(() => { |
|||
// Set app user model id for windows
|
|||
electronApp.setAppUserModelId("com.electron") |
|||
|
|||
// Default open or close DevTools by F12 in development
|
|||
// and ignore CommandOrControl + R in production.
|
|||
// see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
|
|||
app.on("browser-window-created", (_, window) => { |
|||
optimizer.watchWindowShortcuts(window) |
|||
}) |
|||
|
|||
// IPC test
|
|||
ipcMain.on("ping", () => console.log(icon)) |
|||
|
|||
createWindow() |
|||
|
|||
app.on("activate", function () { |
|||
// 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.
|
|||
if (BrowserWindow.getAllWindows().length === 0) createWindow() |
|||
}) |
|||
}) |
|||
|
|||
// 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
|
|||
// explicitly with Cmd + Q.
|
|||
app.on("window-all-closed", () => { |
|||
if (process.platform !== "darwin") { |
|||
app.quit() |
|||
} |
|||
}) |
|||
|
|||
// 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.
|
|||
const curApp = _ioc.get(App) |
|||
curApp.init() |
|||
|
|||
@ -0,0 +1,31 @@ |
|||
import { Container, ContainerModule } from "inversify" |
|||
import { Setting } from "./setting" |
|||
import { DB } from "./db" |
|||
import { Api } from "./api" |
|||
import { WindowManager } from "./window-manager" |
|||
import { Tabs } from "./tabs" |
|||
import Commands from "./commands" |
|||
|
|||
const modules = new ContainerModule(bind => { |
|||
bind(Setting).toConstantValue(new Setting()) |
|||
bind(Api).toSelf().inSingletonScope() |
|||
bind(WindowManager).toSelf().inSingletonScope() |
|||
bind(Commands).toSelf().inSingletonScope() |
|||
bind(Tabs).toSelf().inSingletonScope() |
|||
bind(DB).toSelf().inSingletonScope() |
|||
}) |
|||
|
|||
async function destroyAllModules(ioc: Container) { |
|||
await Promise.all([ |
|||
ioc.get(Setting).destroy(), |
|||
ioc.get(WindowManager).destroy(), |
|||
ioc.get(Commands).destroy(), |
|||
ioc.get(Tabs).destroy(), |
|||
ioc.get(Api).destroy(), |
|||
ioc.get(DB).destroy(), |
|||
]) |
|||
ioc.unloadAsync(modules) |
|||
} |
|||
|
|||
export default modules |
|||
export { modules, destroyAllModules } |
|||
@ -0,0 +1,90 @@ |
|||
import { session, net } from "electron" |
|||
import { inject, injectable } from "inversify" |
|||
import IOC from "vc/_ioc" |
|||
import BaseClass from "vc/base/base" |
|||
|
|||
@injectable() |
|||
class Api extends BaseClass { |
|||
constructor(@inject(IOC) private _IOC: IOC) { |
|||
super() |
|||
this.interceptHandler = this.interceptHandler.bind(this) |
|||
} |
|||
|
|||
destroy() { |
|||
// TODO
|
|||
} |
|||
init(partition?: string) { |
|||
// const ses = partition ? session.fromPartition(partition) : session.defaultSession
|
|||
const ses = partition ? session.fromPartition(partition) : session.defaultSession |
|||
ses.protocol.handle("api", this.interceptHandler) |
|||
} |
|||
async interceptHandler(request: Request) { |
|||
if (request.url.startsWith("api://fuck/")) { |
|||
let curUrl = request.url |
|||
const isScriteText = curUrl.endsWith("?script") |
|||
if (isScriteText) { |
|||
curUrl = curUrl.replace("?script", "") |
|||
} |
|||
const isPost = request.method.toLowerCase() === "post" |
|||
const file = curUrl.replace("api://fuck/", "") |
|||
const array = file.split("/") |
|||
const routePath = array.slice(0, -1).join("/") |
|||
const fnName = array[array.length - 1] |
|||
// https://vitejs.cn/vite5-cn/guide/features.html#dynamic-import
|
|||
const module = await this._IOC.getAsync(routePath) |
|||
// const module = await import(`vc/controller/${routePath}.ts`)
|
|||
const opts = { body: {}, query: {} } |
|||
if (isPost) { |
|||
opts.body = await request.json() |
|||
} |
|||
const headers: HeadersInit = {} |
|||
if (isScriteText) { |
|||
headers["content-type"] = "text/javascript" |
|||
} |
|||
if (isPost) { |
|||
headers["content-type"] = "application/json" |
|||
} |
|||
if (module && module[fnName]) { |
|||
if (typeof module[fnName] === "string") { |
|||
const result = module[fnName] |
|||
return new Response(result, { |
|||
status: 200, |
|||
headers: Object.keys(headers).length ? headers : undefined, |
|||
}) |
|||
} |
|||
if (typeof module[fnName] === "function") { |
|||
let result = await module[fnName](opts) |
|||
if (typeof result === "object") { |
|||
result = JSON.stringify(result) |
|||
} |
|||
return new Response(result, { |
|||
status: 200, |
|||
headers: Object.keys(headers).length ? headers : undefined, |
|||
}) |
|||
} |
|||
if (typeof module[fnName] === "object") { |
|||
let result = module[fnName] |
|||
if (typeof result === "object") { |
|||
result = JSON.stringify(result) |
|||
} |
|||
return new Response(result, { |
|||
status: 200, |
|||
headers: Object.keys(headers).length ? headers : undefined, |
|||
}) |
|||
} |
|||
} |
|||
return new Response("", { |
|||
status: 500, |
|||
headers: Object.keys(headers).length ? headers : undefined, |
|||
}) |
|||
} else if (request.url.startsWith("api://")) { |
|||
return new Response("error", { |
|||
status: 500, |
|||
}) |
|||
} |
|||
return net.fetch(request.url, request) |
|||
} |
|||
} |
|||
|
|||
export default Api |
|||
export { Api } |
|||
@ -0,0 +1,6 @@ |
|||
|
|||
## 资源 |
|||
|
|||
- https://juejin.cn/post/7311619723317657611#heading-6 |
|||
- https://juejin.cn/post/7208108117836873784 |
|||
- https://www.electronjs.org/zh/docs/latest/api/protocol#protocolregisterschemesasprivilegedcustomschemes |
|||
@ -0,0 +1,72 @@ |
|||
// import https from "node:https"
|
|||
|
|||
// const interceptRequestRemote = async (request, callback) => {
|
|||
// const client = https.request(request.url, {
|
|||
// method: request.method,
|
|||
// headers: { ...request.headers },
|
|||
// });
|
|||
// if (request.uploadData) {
|
|||
// for (const data of request.uploadData) {
|
|||
// if (data.type === "rawData") {
|
|||
// // 直接创建Buffer对象
|
|||
// client.write(data.bytes);
|
|||
// // buffers.push(Buffer.from(data.bytes));
|
|||
// } else if (data.type === "blob") {
|
|||
// // 通过blobUUID获取Buffer对象
|
|||
// const buffer = await sess.getBlobData(data.blobUUID);
|
|||
// client.write(buffer);
|
|||
// }
|
|||
// }
|
|||
// }
|
|||
// client.on("error", (err) => {
|
|||
// console.error(`sess request error: ${request.url}`, err);
|
|||
// });
|
|||
// client.on("response", (response) => {
|
|||
// let body = [];
|
|||
// response.on("error", (err) => {
|
|||
// console.error(`sess request response error: ${request.url}`, err);
|
|||
// });
|
|||
// response.on("data", (chunk) => {
|
|||
// body.push(chunk);
|
|||
// });
|
|||
// response.on("end", () => {
|
|||
// body = Buffer.concat(body);
|
|||
// callback({
|
|||
// statusCode: response.statusCode,
|
|||
// headers: response.headers,
|
|||
// data: body,
|
|||
// });
|
|||
// });
|
|||
// });
|
|||
// console.log(`sess request: ${request.url}`);
|
|||
// client.end();
|
|||
// };
|
|||
|
|||
// const interceptHandler = (request, callback) => {
|
|||
// const localPath = checkIsNeedLocal(request);
|
|||
// if (localPath) {
|
|||
// fs.readFile(localPath, (err, data) => {
|
|||
// if (err) {
|
|||
// console.error("readFile error", err);
|
|||
// interceptRequestRemote(request, callback);
|
|||
// return;
|
|||
// }
|
|||
// const ext = path.extname(localPath);
|
|||
// const mimeType =
|
|||
// ext === ".js"
|
|||
// ? "application/javascript"
|
|||
// : ext === ".css"
|
|||
// ? "text/css"
|
|||
// : "text/html";
|
|||
// callback({
|
|||
// data,
|
|||
// mimeType,
|
|||
// });
|
|||
// });
|
|||
// } else {
|
|||
// interceptRequestRemote(request, callback);
|
|||
// }
|
|||
// };
|
|||
|
|||
// ses.protocol.interceptBufferProtocol("https", interceptHandler);
|
|||
|
|||
@ -0,0 +1,93 @@ |
|||
import { IMenuItemOption, IPopupMenuOption } from "#" |
|||
import { ipcMain, Menu, MenuItem } from "electron" |
|||
import { inject } from "inversify" |
|||
import IOC from "vc/_ioc" |
|||
import BaseClass from "vc/base/base" |
|||
import { isPromise } from "vc/utils" |
|||
import WindowManager from "../window-manager" |
|||
|
|||
export default class Commands extends BaseClass { |
|||
destroy() { |
|||
// TODO
|
|||
} |
|||
|
|||
constructor( |
|||
@inject(IOC) private _IOC: IOC, |
|||
@inject(WindowManager) private _WindowManager: WindowManager, |
|||
) { |
|||
super() |
|||
} |
|||
|
|||
init() { |
|||
ipcMain.addListener("command", async (event, key, command: string, ...argus) => { |
|||
// console.log(event.sender);
|
|||
try { |
|||
const splitClass = command.split(".") |
|||
const run = await this._IOC.getAsync<any>(splitClass[0]) |
|||
if (run) { |
|||
const result: Promise<any> | any = run[splitClass[1]](...argus) |
|||
if (isPromise(result)) { |
|||
result |
|||
.then((res: any) => { |
|||
event.reply(key, null, res ?? null) |
|||
event.returnValue = res ?? null |
|||
}) |
|||
.catch((err: Error) => { |
|||
event.reply(key, err) |
|||
event.returnValue = null |
|||
}) |
|||
} else { |
|||
event.reply(key, null, result ?? null) |
|||
event.returnValue = result ?? null |
|||
} |
|||
} else { |
|||
event.reply(key, new Error(`不存在该命令:${command}`)) |
|||
event.returnValue = null |
|||
} |
|||
} catch (error) { |
|||
event.reply(key, error) |
|||
event.returnValue = null |
|||
} |
|||
}) |
|||
|
|||
ipcMain.on("x_popup_menu", (_, name: string, options: IPopupMenuOption) => { |
|||
const menu = new Menu() |
|||
const readMenu = (items: IMenuItemOption[]) => { |
|||
return items.map(opt => { |
|||
if (typeof opt._click_evt === "string") { |
|||
const evt: string = opt._click_evt |
|||
opt.click = () => { |
|||
// broadcast(evt)
|
|||
this.sendMessage(name, evt) |
|||
} |
|||
} |
|||
if (opt.submenu && Array.isArray(opt.submenu)) { |
|||
opt.submenu = readMenu(opt.submenu) |
|||
} |
|||
|
|||
return opt |
|||
}) |
|||
} |
|||
const arrays = readMenu(options.items) |
|||
|
|||
arrays.forEach(v => { |
|||
const item = new MenuItem(v) |
|||
menu.append(item) |
|||
}) |
|||
|
|||
menu.on("menu-will-close", () => { |
|||
this.sendMessage(name, `popup_menu_close:${options.menu_id}`) |
|||
// broadcast(`popup_menu_close:${options.menu_id}`)
|
|||
}) |
|||
|
|||
menu.popup() |
|||
}) |
|||
} |
|||
|
|||
sendMessage(name: string, evt: string, ...argu: any[]) { |
|||
const win = this._WindowManager.get(name) |
|||
if (win) { |
|||
win.webContents.send(evt, ...argu) |
|||
} |
|||
} |
|||
} |
|||
@ -1,18 +0,0 @@ |
|||
import { Container } from "inversify" |
|||
import { ContainerModule } from "inversify" |
|||
import { Setting } from "./setting" |
|||
import { DB } from "./db" |
|||
import App from "../App" |
|||
|
|||
const module = new ContainerModule(bind => { |
|||
bind(Setting).toConstantValue(new Setting()) |
|||
bind(DB).toSelf().inSingletonScope() |
|||
bind(App).toSelf().inSingletonScope() |
|||
}) |
|||
|
|||
const container = new Container() |
|||
|
|||
container.load(module) |
|||
|
|||
export default container |
|||
export { container } |
|||
@ -0,0 +1,6 @@ |
|||
export function Layout(width, height) { |
|||
// Tab布局位置
|
|||
const NavbarHeight = 30 |
|||
const OffsetHeight = NavbarHeight + 100 |
|||
return { x: 0, y: OffsetHeight, width: width, height: height - OffsetHeight } |
|||
} |
|||
@ -0,0 +1,261 @@ |
|||
import { BrowserWindow, WebContentsView, WebPreferences } from "electron" |
|||
import { join } from "node:path" |
|||
import BaseClass from "vc/base/base" |
|||
import _debug from "debug" |
|||
import { Layout } from "./Constant" |
|||
import FuckHTML from "res/fuck.html?asset" |
|||
import { fileURLToPath } from "node:url" |
|||
|
|||
const debug = _debug("app:tab") |
|||
|
|||
interface IOption { |
|||
url: string |
|||
active: boolean |
|||
} |
|||
|
|||
class Tab extends BaseClass { |
|||
init() { |
|||
// TODO
|
|||
} |
|||
public url: string = "" |
|||
public showUrl: string = "" |
|||
public title: string = "" |
|||
public favicons: string[] = [] |
|||
public active: boolean = false |
|||
public alive: boolean = false |
|||
public isDestory: boolean = false |
|||
public playing: boolean = false |
|||
public visible: boolean = false |
|||
private webContentsView: WebContentsView | null = null |
|||
private curWindow: BrowserWindow | null = null |
|||
|
|||
private defaultOptions: IOption = { |
|||
url: "", |
|||
active: false, |
|||
} |
|||
|
|||
private options: IOption |
|||
|
|||
get isActive() { |
|||
return this.active |
|||
} |
|||
|
|||
get events() { |
|||
return this._events |
|||
} |
|||
|
|||
constructor(options = {}, window: BrowserWindow) { |
|||
super() |
|||
this.listenResize = this.listenResize.bind(this) |
|||
this.options = { |
|||
...this.defaultOptions, |
|||
...options, |
|||
} |
|||
this.url = this.getUrl(this.options.url) |
|||
this.showUrl = this.options.url |
|||
this.curWindow = window |
|||
this.setActive(this.options.active) |
|||
} |
|||
destroyTimer: NodeJS.Timeout | null = null |
|||
stopDestroyTimer() { |
|||
if (this.destroyTimer !== null) { |
|||
clearTimeout(this.destroyTimer) |
|||
this.destroyTimer = null |
|||
} |
|||
} |
|||
startDestroyTimer() { |
|||
this.stopDestroyTimer() |
|||
if (this.visible) return |
|||
if (this.playing) return |
|||
this.destroyTimer = setTimeout(() => { |
|||
if (this.webContentsView && !this.webContentsView.webContents.isDestroyed()) { |
|||
this.curWindow?.contentView.removeChildView(this.webContentsView!) |
|||
// @ts-ignore 超过8s没有激活的tab就销毁
|
|||
this.webContentsView.webContents.destroy() |
|||
this.webContentsView = null |
|||
this.alive = false |
|||
} |
|||
}, 8000) |
|||
} |
|||
|
|||
setActive(active: boolean) { |
|||
if (!active) { |
|||
if (!this.webContentsView) return |
|||
this.curWindow!.removeListener("resize", this.listenResize) |
|||
this.webContentsView.setVisible(false) |
|||
this.visible = false |
|||
this.startDestroyTimer() |
|||
} else { |
|||
this.stopDestroyTimer() |
|||
this.visible = true |
|||
if (!this.webContentsView) { |
|||
this.create() |
|||
// , this.curWindow!.contentView.children.length - 1
|
|||
this.curWindow!.contentView.addChildView(this.webContentsView!) |
|||
this.alive = true |
|||
} |
|||
this.listenResize() |
|||
this.curWindow!.addListener("resize", this.listenResize) |
|||
this.webContentsView!.setVisible(true) |
|||
} |
|||
this.active = active |
|||
} |
|||
|
|||
openDevtool() { |
|||
if (!this.webContentsView) return |
|||
this.webContentsView.webContents.openDevTools({ |
|||
mode: "right", |
|||
}) |
|||
} |
|||
|
|||
reload() { |
|||
if (!this.webContentsView) return |
|||
this.webContentsView.webContents.reload() |
|||
} |
|||
|
|||
create() { |
|||
let securityAttr: Partial<WebPreferences> = {} |
|||
if (this.url.startsWith("file:")) { |
|||
// 预加载脚本
|
|||
securityAttr = { |
|||
preload: join(__dirname, "../preload/index.mjs"), |
|||
sandbox: false, |
|||
} |
|||
} |
|||
this.webContentsView = new WebContentsView({ |
|||
webPreferences: { |
|||
sandbox: true, |
|||
webSecurity: true, |
|||
allowRunningInsecureContent: false, |
|||
nodeIntegration: false, |
|||
spellcheck: false, |
|||
contextIsolation: true, |
|||
...securityAttr, |
|||
}, |
|||
}) |
|||
const webContents = this.webContentsView.webContents |
|||
this.webContentsView.webContents.loadURL(this.url) |
|||
// this.webContentsView.webContents.executeJavaScript(`
|
|||
// const click = (x,y)=>{
|
|||
// const ev = new MouseEvent("click", {
|
|||
// view: window,
|
|||
// bubbles: true,
|
|||
// cancelable: true,
|
|||
// screenX: x,
|
|||
// screenY: y
|
|||
// })
|
|||
|
|||
// const el = document.elementFromPoint(x,y);
|
|||
// console.log(el)
|
|||
// el.dispatchEvent(ev);
|
|||
// }
|
|||
// console.log("点击初始化完成")
|
|||
// `)
|
|||
this.webContentsView.webContents.setWindowOpenHandler(ev => { |
|||
debug(ev) |
|||
this.events.emit("window-open", ev) |
|||
return { action: "deny" } |
|||
}) |
|||
webContents.addListener("media-paused", () => { |
|||
this.playing = false |
|||
this.startDestroyTimer() |
|||
}) |
|||
webContents.addListener("media-started-playing", () => { |
|||
this.playing = true |
|||
this.stopDestroyTimer() |
|||
}) |
|||
webContents.addListener("did-finish-load", () => { |
|||
this.url = webContents.getURL() |
|||
this.showUrl = this.getShowUrl(this.url) |
|||
this.events.emit("update") |
|||
}) |
|||
webContents.addListener("did-navigate-in-page", () => { |
|||
this.url = webContents.getURL() |
|||
this.showUrl = this.getShowUrl(this.url) |
|||
this.events.emit("update") |
|||
}) |
|||
webContents.addListener("page-title-updated", (_, title) => { |
|||
this.title = title |
|||
debug(`tab页更新：`, title) |
|||
this.events.emit("update") |
|||
}) |
|||
webContents.addListener("page-favicon-updated", (_, favicons) => { |
|||
this.favicons = favicons |
|||
debug(favicons) |
|||
this.events.emit("update") |
|||
}) |
|||
// 待机的销毁，但不去除实例
|
|||
webContents.addListener("destroyed", () => { |
|||
this.#destoryWebContentsView() |
|||
}) |
|||
} |
|||
|
|||
print() { |
|||
return { |
|||
url: this.url, |
|||
showUrl: this.showUrl, |
|||
} |
|||
} |
|||
|
|||
private getUrl(url) { |
|||
if (url === "about:blank") { |
|||
debug(FuckHTML) |
|||
return FuckHTML |
|||
} |
|||
return url |
|||
} |
|||
|
|||
private getShowUrl(url) { |
|||
try { |
|||
if (fileURLToPath(url) === FuckHTML) { |
|||
debug(url) |
|||
debug(FuckHTML) |
|||
return "about:blank" |
|||
} |
|||
} catch (error) { |
|||
// ignore
|
|||
} |
|||
return url |
|||
} |
|||
|
|||
listenResize() { |
|||
if (!this.curWindow) { |
|||
return |
|||
} |
|||
if (!this.webContentsView) { |
|||
return |
|||
} |
|||
const size = this.curWindow.getContentSize() |
|||
this.webContentsView.setBounds(Layout(size[0], size[1])) |
|||
} |
|||
|
|||
navigate(url: string) { |
|||
if (!this.webContentsView) return |
|||
this.webContentsView.webContents.loadURL(this.getUrl(url)) |
|||
} |
|||
|
|||
#destoryWebContentsView() { |
|||
this.stopDestroyTimer() |
|||
if (this.webContentsView && this.curWindow && !this.curWindow.isDestroyed()) { |
|||
this.curWindow.contentView.removeChildView(this.webContentsView) |
|||
this.curWindow.removeListener("resize", this.listenResize) |
|||
} |
|||
if (this.webContentsView && !this.webContentsView.webContents.isDestroyed()) { |
|||
this.webContentsView.webContents.removeAllListeners() |
|||
this.webContentsView.removeAllListeners() |
|||
// @ts-ignore 超过8s没有激活的tab就销毁
|
|||
this.webContentsView.webContents.destroy() |
|||
} |
|||
this.webContentsView = null |
|||
} |
|||
|
|||
destroy() { |
|||
this.#destoryWebContentsView() |
|||
this.events.removeAllListeners() |
|||
this.isDestory = true |
|||
debug("Tab destroy") |
|||
} |
|||
} |
|||
|
|||
export { Tab } |
|||
export default Tab |
|||
@ -0,0 +1,95 @@ |
|||
import Tab from "./Tab" |
|||
import BaseClass from "vc/base/base" |
|||
import _debug from "debug" |
|||
import { BrowserWindow } from "electron" |
|||
import EventEmitter from "events" |
|||
|
|||
const debug = _debug("app:tabs") |
|||
|
|||
class Tabs extends BaseClass { |
|||
destroy() { |
|||
this._tabs.forEach(v => v.destroy()) |
|||
this._tabs = [] |
|||
} |
|||
|
|||
public events = new EventEmitter() |
|||
|
|||
constructor() { |
|||
super() |
|||
} |
|||
|
|||
_tabs: Tab[] = [] |
|||
|
|||
init(mainWindow) { |
|||
this.add("about:blank", true, mainWindow) |
|||
} |
|||
|
|||
add(url: string, active: boolean, win: BrowserWindow) { |
|||
const tab = new Tab({ url }, win) |
|||
tab.events.on("window-open", ev => { |
|||
debug(ev) |
|||
this.add(ev.url, true, win) |
|||
this.events.emit("tab-active") |
|||
// tab.navigate(ev.url)
|
|||
}) |
|||
tab.events.on("update", () => { |
|||
this.events.emit("tab-active") |
|||
}) |
|||
this._tabs.push(tab) |
|||
if (active) { |
|||
this.changeActive(this._tabs.length - 1) |
|||
} |
|||
this.events.emit("tab-active") |
|||
} |
|||
|
|||
changeActive(index: number) { |
|||
this._tabs.forEach((tab, i) => { |
|||
tab.setActive(i === index) |
|||
}) |
|||
this.events.emit("tab-active", index) |
|||
} |
|||
|
|||
openDevtool(index: number) { |
|||
if (this._tabs[index]) { |
|||
this._tabs[index].openDevtool() |
|||
} |
|||
} |
|||
|
|||
reload(index: number) { |
|||
if (this._tabs[index]) { |
|||
this._tabs[index].reload() |
|||
} |
|||
} |
|||
|
|||
navigate(index: number, url: string) { |
|||
if (this._tabs[index]) { |
|||
this._tabs[index].navigate(url) |
|||
} |
|||
} |
|||
|
|||
remove(index: number) { |
|||
this._tabs[index].destroy() |
|||
if (this._tabs[index].isActive && index - 1 >= 0) { |
|||
this.changeActive(index - 1) |
|||
} |
|||
this._tabs.splice(index, 1) |
|||
this.events.emit("tab-active") |
|||
} |
|||
|
|||
removeAll(index: number[]) { |
|||
index |
|||
.map(v => { |
|||
return this._tabs[+v] |
|||
}) |
|||
.forEach(tab => { |
|||
tab.destroy() |
|||
}) |
|||
this._tabs = this._tabs.filter(v => { |
|||
return !v.isDestory |
|||
}) |
|||
this.events.emit("tab-active") |
|||
} |
|||
} |
|||
|
|||
export { Tabs } |
|||
export default Tabs |
|||
@ -0,0 +1,346 @@ |
|||
import { BrowserWindow, app, dialog } from "electron" |
|||
import { cloneDeep, merge } from "lodash" |
|||
import { defaultConfig, defaultWindowConfig, getWindowsMap, IConfig, Param } from "./windowsMap" |
|||
import { optimizer } from "@electron-toolkit/utils" |
|||
import BaseClass from "vc/base/base" |
|||
import _debug from "debug" |
|||
|
|||
const debug = _debug("app:window-manager") |
|||
|
|||
declare module "electron" { |
|||
interface BrowserWindow { |
|||
$$forceClose?: boolean |
|||
$$lastChoice?: number |
|||
$$opts?: Param |
|||
} |
|||
} |
|||
export { WindowManager } |
|||
export default class WindowManager extends BaseClass { |
|||
constructor() { |
|||
super() |
|||
} |
|||
|
|||
destroy() { |
|||
// TODO
|
|||
} |
|||
globalChioce: number = -1 |
|||
#showWin(info: Param) { |
|||
if (this.#windows.length >= 6) { |
|||
dialog.showErrorBox("错误", "窗口数量超出限制") |
|||
return |
|||
} |
|||
if (!info.name) { |
|||
dialog.showErrorBox("错误", "窗口未指定唯一key") |
|||
return |
|||
} |
|||
const index = this.findIndex(info.name) |
|||
if (index === -1) { |
|||
this.#windows.push(this.#add(info)) |
|||
} else { |
|||
if (this.#windows[index].isDestroyed()) { |
|||
this.#windows[index] = this.#add(info) |
|||
} else { |
|||
if (info.url && info.loadURLInSameWin) { |
|||
this.#windows[index].loadURL(info.url) |
|||
} |
|||
this.#windows[index].show() |
|||
} |
|||
} |
|||
this.showCurrentWindow() |
|||
} |
|||
|
|||
showMainWindow() { |
|||
this.#showWin(this.mainInfo) |
|||
} |
|||
|
|||
showWindow(name: string, opts?: Partial<IConfig>) { |
|||
let have = false |
|||
for (const key in this.#urlMap) { |
|||
const info = this.#urlMap[key] |
|||
if (new RegExp(key).test(name)) { |
|||
opts && merge(info, opts) |
|||
info.name = name |
|||
if (!info.ignoreEmptyUrl && !info.url) { |
|||
dialog.showErrorBox("错误", name + "窗口未提供url") |
|||
return |
|||
} |
|||
this.#showWin(info as Param) |
|||
have = true |
|||
} |
|||
} |
|||
if (!have) { |
|||
dialog.showErrorBox("错误", name + "窗口未创建成功") |
|||
return |
|||
} |
|||
} |
|||
|
|||
init() { |
|||
/** |
|||
* 当应用被激活时触发 |
|||
*/ |
|||
app.on("activate", () => { |
|||
this.showMainWindow() |
|||
}) |
|||
// Default open or close DevTools by F12 in development
|
|||
// and ignore CommandOrControl + R in production.
|
|||
// see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
|
|||
app.on("browser-window-created", (_, window) => { |
|||
optimizer.watchWindowShortcuts(window) |
|||
}) |
|||
/** |
|||
* 应用程序开始关闭时回调，可以通过event.preventDefault()阻止，以下两点需要注意： |
|||
* 1. 如果是autoUpdater.quitAndInstall()关闭的，那么会所有窗口关闭，并且在close事件之后执行 |
|||
* 2. 关机，重启，用户退出时不会触发 |
|||
*/ |
|||
app.on("before-quit", (event: Electron.Event) => { |
|||
const mainWin = this.get(this.mainInfo.name) |
|||
if (!mainWin || (mainWin && mainWin?.$$forceClose)) { |
|||
// app.exit()
|
|||
} else { |
|||
event.preventDefault() |
|||
} |
|||
}) |
|||
|
|||
app.on("window-all-closed", () => { |
|||
if (process.platform !== "darwin") { |
|||
app.quit() |
|||
} |
|||
}) |
|||
} |
|||
|
|||
#urlMap = getWindowsMap() |
|||
|
|||
getWndows() { |
|||
return this.#windows |
|||
} |
|||
|
|||
length() { |
|||
return this.#windows.length |
|||
} |
|||
|
|||
public get mainInfo() { |
|||
return this.#urlMap["main"] as Param |
|||
} |
|||
|
|||
#windows: BrowserWindow[] = [] |
|||
|
|||
#defaultConfig: IConfig = defaultConfig |
|||
|
|||
#add(config: Param) { |
|||
const curConfig = cloneDeep(this.#defaultConfig ?? {}) |
|||
for (const key in config) { |
|||
if (Object.prototype.hasOwnProperty.call(config, key)) { |
|||
const value = config[key] |
|||
// if (Reflect.has(curConfig, key)) {
|
|||
curConfig[key] = value |
|||
// }
|
|||
} |
|||
} |
|||
const privateConfig = merge(curConfig.overideWindowOpts ? {} : cloneDeep(defaultWindowConfig), curConfig.windowOpts ?? {}) |
|||
let parentWindow |
|||
if (typeof privateConfig.parent === "string") { |
|||
parentWindow = this.get(privateConfig.parent) |
|||
} |
|||
if (parentWindow) { |
|||
privateConfig.parent = parentWindow |
|||
} |
|||
const browserWin = new BrowserWindow(privateConfig) |
|||
browserWin.webContents.setWindowOpenHandler(() => { |
|||
if (curConfig.denyWindowOpen) { |
|||
return { action: "deny" } |
|||
} |
|||
return { action: "allow" } |
|||
}) |
|||
// @ts-ignore 不需要解释为啥
|
|||
browserWin.webContents.$$senderName = curConfig.name |
|||
browserWin.$$forceClose = false |
|||
browserWin.$$lastChoice = -1 |
|||
browserWin.on("close", (event: any) => { |
|||
if (this.globalChioce === 1) { |
|||
this.#onClose(curConfig.name) |
|||
return |
|||
} |
|||
if (!curConfig.confrimWindowClose) { |
|||
this.#onClose(curConfig.name) |
|||
return |
|||
} |
|||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|||
const that = this |
|||
function justQuit() { |
|||
browserWin.$$lastChoice = 1 |
|||
// app.quit()
|
|||
// 不要用quit();试了会弹两次
|
|||
browserWin.$$forceClose = true |
|||
if (curConfig.name === that.mainInfo.name) { |
|||
that.globalChioce = 1 |
|||
app.quit() // exit()直接关闭客户端，不会执行quit();
|
|||
} else { |
|||
that.delete(curConfig.name) |
|||
that.showCurrentWindow() |
|||
} |
|||
} |
|||
if (browserWin.$$forceClose) { |
|||
that.delete(curConfig.name) |
|||
app.quit() |
|||
} else { |
|||
let choice = -1 |
|||
if (browserWin && browserWin!.$$lastChoice !== undefined && browserWin.$$lastChoice >= 0) { |
|||
choice = browserWin.$$lastChoice |
|||
} else { |
|||
choice = dialog.showMessageBoxSync(browserWin, { |
|||
type: "info", |
|||
title: curConfig.confrimWindowCloseText.title, |
|||
defaultId: curConfig.confrimWindowCloseText.defaultId, |
|||
cancelId: curConfig.confrimWindowCloseText.cancelId, |
|||
message: curConfig.confrimWindowCloseText.message, |
|||
buttons: curConfig.confrimWindowCloseText.buttons, |
|||
}) |
|||
} |
|||
if (choice === 1) { |
|||
justQuit() |
|||
} else { |
|||
event && event.preventDefault() |
|||
} |
|||
} |
|||
}) |
|||
browserWin.$$opts = curConfig |
|||
// 在此注册窗口
|
|||
browserWin.webContents.addListener("did-finish-load", () => { |
|||
browserWin.webContents.executeJavaScript(`window._global=${JSON.stringify({ name: curConfig.name })};`) |
|||
browserWin.webContents.send("bind-window-manager", curConfig.name) |
|||
}) |
|||
// https://www.electronjs.org/zh/docs/latest/tutorial/security#12-%E5%88%9B%E5%BB%BAwebview%E5%89%8D%E7%A1%AE%E8%AE%A4%E5%85%B6%E9%80%89%E9%A1%B9
|
|||
// browserWin.webContents.on("will-attach-webview", (_event, webPreferences) => {
|
|||
// if (webPreferences.preload !== path.resolve(app.getAppPath(), "webview.js")) {
|
|||
// // 如果未使用，则删除预加载脚本或验证其位置是否合法
|
|||
// delete webPreferences.preload
|
|||
// }
|
|||
|
|||
// // 禁用 Node.js 集成
|
|||
// webPreferences.nodeIntegration = false
|
|||
|
|||
// // 验证正在加载的 URL
|
|||
// // if (!params.src.startsWith('https://example.com/')) {
|
|||
// // event.preventDefault()
|
|||
// // }
|
|||
// })
|
|||
if (curConfig.type === "info") { |
|||
// 隐藏菜单
|
|||
browserWin.setMenuBarVisibility(false) |
|||
} |
|||
if (curConfig.url) { |
|||
browserWin.loadURL(curConfig.url) |
|||
// logger.debug(`当前窗口网址：${curConfig.url}`)
|
|||
} |
|||
if (curConfig.windowOpts?.show === false) { |
|||
if (curConfig.url) { |
|||
browserWin.once("ready-to-show", () => { |
|||
debug(`准备展示：`, curConfig.url) |
|||
browserWin?.show() |
|||
}) |
|||
} else { |
|||
browserWin?.show() |
|||
} |
|||
} |
|||
return browserWin |
|||
} |
|||
|
|||
showCurrentWindow() { |
|||
debug(`current open window: ${this.#windows.map(v => v.$$opts!.name).join(",")}`) |
|||
} |
|||
|
|||
#onClose(name: string) { |
|||
for (let i = this.#windows.length - 1; i >= 0; i--) { |
|||
const win = this.#windows[i] |
|||
if (name === win.$$opts!.name) { |
|||
win.destroy() |
|||
this.#windows.splice(i, 1) |
|||
} |
|||
} |
|||
this.showCurrentWindow() |
|||
} |
|||
|
|||
get(name: string) { |
|||
return this.#windows.find(v => { |
|||
return v.$$opts!.name === name |
|||
}) |
|||
} |
|||
|
|||
getFocusWindow() { |
|||
const mainWindow = this.getMainWindow() |
|||
if (mainWindow?.isFocused()) { |
|||
return mainWindow |
|||
} |
|||
for (let i = 0; i < this.#windows.length; i++) { |
|||
const win = this.#windows[i] |
|||
if (win.isFocused()) { |
|||
return win |
|||
} |
|||
} |
|||
return |
|||
} |
|||
|
|||
getMainWindow() { |
|||
return this.#windows.find(v => { |
|||
return v.$$opts!.name === this.mainInfo.name |
|||
}) |
|||
} |
|||
|
|||
close(name: string | RegExp) { |
|||
const indexList = this.findAllIndex(name) |
|||
for (let i = indexList.length - 1; i >= 0; i--) { |
|||
const index = indexList[i] |
|||
const win = this.#windows[index] |
|||
win.close() |
|||
} |
|||
} |
|||
|
|||
delete(name: string | RegExp) { |
|||
const indexList = this.findAllIndex(name) |
|||
for (let i = indexList.length - 1; i >= 0; i--) { |
|||
const index = indexList[i] |
|||
this.#windows.splice(index, 1) |
|||
} |
|||
} |
|||
|
|||
findIndex(name: string | RegExp) { |
|||
const index = this.#windows.findIndex(v => { |
|||
if (typeof name === "string") { |
|||
return v.$$opts!.name === name |
|||
} else { |
|||
return name.test(v.$$opts!.name) |
|||
} |
|||
}) |
|||
return index |
|||
} |
|||
|
|||
findAllIndex(name: string | RegExp) { |
|||
const result: number[] = [] |
|||
for (let i = 0; i < this.#windows.length; i++) { |
|||
const win = this.#windows[i] |
|||
if (typeof name === "string" && win.$$opts!.name === name) { |
|||
result.push(i) |
|||
} else if (typeof name !== "string" && name.test(win.$$opts!.name)) { |
|||
result.push(i) |
|||
} |
|||
} |
|||
return result |
|||
} |
|||
|
|||
// show(name: string | RegExp) {
|
|||
// let indexList = this.findAllIndex(name)
|
|||
// if (!!indexList.length) {
|
|||
// for (let i = 0; i < indexList.length; i++) {
|
|||
// const index = indexList[i];
|
|||
// const win = this.#windows[index]
|
|||
// if (win.isDestroyed()) {
|
|||
// this.#windows[index] = this.#add(win.$$opts)
|
|||
// } else {
|
|||
// win.show()
|
|||
// }
|
|||
// }
|
|||
// } else {
|
|||
// console.warn("该窗口不存在")
|
|||
// }
|
|||
// }
|
|||
} |
|||
@ -0,0 +1,129 @@ |
|||
import config from "config" |
|||
import { BrowserWindowConstructorOptions } from "electron" |
|||
import { getFileUrl } from "vc/utils" |
|||
import icon from "res/icon.png?asset" |
|||
import { join } from "path" |
|||
|
|||
export type Param = Partial<IConfig> & Required<Pick<IConfig, "name">> |
|||
|
|||
export interface IConfig { |
|||
name?: string |
|||
url?: string |
|||
loadURLInSameWin?: boolean |
|||
type?: "info" |
|||
windowOpts?: BrowserWindowConstructorOptions |
|||
overideWindowOpts?: boolean |
|||
ignoreEmptyUrl?: boolean |
|||
denyWindowOpen?: boolean |
|||
confrimWindowClose?: boolean |
|||
confrimWindowCloseText?: { |
|||
title: string |
|||
message: string |
|||
buttons: string[] |
|||
defaultId: number |
|||
cancelId: number |
|||
} |
|||
} |
|||
|
|||
export const defaultConfig: IConfig = { |
|||
denyWindowOpen: true, |
|||
} |
|||
|
|||
export const defaultWindowConfig = { |
|||
height: 600, |
|||
useContentSize: true, |
|||
width: 800, |
|||
show: true, |
|||
resizable: true, |
|||
minWidth: 900, |
|||
minHeight: 600, |
|||
frame: true, |
|||
transparent: false, |
|||
alwaysOnTop: false, |
|||
webPreferences: {}, |
|||
} |
|||
|
|||
export function getWindowsMap(): Record<string, IConfig> { |
|||
return { |
|||
main: { |
|||
name: "main", |
|||
url: getFileUrl("index.html"), |
|||
confrimWindowClose: true, |
|||
confrimWindowCloseText: { |
|||
title: config.app_title, |
|||
defaultId: 0, |
|||
cancelId: 0, |
|||
message: "确定要关闭吗？", |
|||
buttons: ["没事", "直接退出"], |
|||
}, |
|||
windowOpts: { |
|||
show: false, |
|||
titleBarStyle: "hidden", |
|||
titleBarOverlay: true, |
|||
...(process.platform === "linux" ? { icon } : {}), |
|||
webPreferences: { |
|||
webviewTag: false, |
|||
preload: join(__dirname, "../preload/index.mjs"), |
|||
nodeIntegration: true, |
|||
contextIsolation: true, |
|||
}, |
|||
}, |
|||
}, |
|||
_blank: { |
|||
overideWindowOpts: false, |
|||
confrimWindowClose: true, |
|||
confrimWindowCloseText: { |
|||
title: config.app_title, |
|||
defaultId: 0, |
|||
cancelId: 0, |
|||
message: "确定要关闭吗？", |
|||
buttons: ["没事", "直接退出"], |
|||
}, |
|||
type: "info", |
|||
windowOpts: { |
|||
height: 600, |
|||
useContentSize: true, |
|||
width: 800, |
|||
show: true, |
|||
resizable: true, |
|||
minWidth: 900, |
|||
minHeight: 600, |
|||
frame: true, |
|||
transparent: false, |
|||
alwaysOnTop: false, |
|||
// icon: appIconPath,
|
|||
title: config.app_title, |
|||
webPreferences: { |
|||
devTools: false, |
|||
sandbox: true, |
|||
nodeIntegration: false, |
|||
contextIsolation: true, |
|||
webviewTag: false, |
|||
preload: undefined, |
|||
}, |
|||
}, |
|||
}, |
|||
"^about": { |
|||
url: getFileUrl("about.html"), |
|||
overideWindowOpts: true, |
|||
confrimWindowClose: false, |
|||
type: "info", |
|||
windowOpts: { |
|||
width: 600, |
|||
height: 200, |
|||
minimizable: false, |
|||
darkTheme: true, |
|||
modal: true, |
|||
show: false, |
|||
resizable: false, |
|||
// icon: appIconPath,
|
|||
webPreferences: { |
|||
devTools: false, |
|||
sandbox: false, |
|||
nodeIntegration: false, |
|||
contextIsolation: true, |
|||
}, |
|||
}, |
|||
}, |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
import { is } from "@electron-toolkit/utils" |
|||
import { join } from "node:path" |
|||
import { webContents } from "electron" |
|||
|
|||
export function getFileUrl(app: string, route: string = "") { |
|||
let winURL = "" |
|||
if (is.dev && process.env["ELECTRON_RENDERER_URL"]) { |
|||
winURL = process.env["ELECTRON_RENDERER_URL"] + `/${app}#/${route}` |
|||
} else { |
|||
winURL = join(__dirname, `../renderer/${app}#/${route}`) |
|||
} |
|||
return winURL |
|||
} |
|||
|
|||
export function isPromise(value: () => any) { |
|||
return value && Object.prototype.toString.call(value) === "[object Promise]" |
|||
} |
|||
|
|||
export const broadcast = (event: string, ...args: any[]) => { |
|||
webContents.getAllWebContents().forEach(browser => browser.send(event, ...args)) |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
import { ipcRenderer } from "electron" |
|||
|
|||
let count = 0 |
|||
export function call(command: string, ...args: any[]): Promise<any> { |
|||
return new Promise((resolve, reject) => { |
|||
if (!command) { |
|||
console.warn("命令不能为空") |
|||
return |
|||
} |
|||
count++ |
|||
const timestamp = new Date().getTime() |
|||
const key = timestamp + "-" + count |
|||
let timeID: any = null |
|||
ipcRenderer.once(key, fn) |
|||
|
|||
function fn(_, err: any, res: any) { |
|||
clearTimeout(timeID) |
|||
if (err) { |
|||
reject(err) |
|||
return |
|||
} |
|||
resolve(res) |
|||
} |
|||
|
|||
ipcRenderer.send("command", key, command, ...args) |
|||
|
|||
// 超过5s就取消监听
|
|||
timeID = setTimeout(() => { |
|||
reject(new Error(`超过5s未响应: ${command}`)) |
|||
ipcRenderer.removeListener(key, fn) |
|||
}, 5000) |
|||
}) |
|||
} |
|||
|
|||
export function callLong(command: string, ...args: any[]): Promise<any> { |
|||
return new Promise((resolve, reject) => { |
|||
if (!command) { |
|||
console.warn("命令不能为空") |
|||
return |
|||
} |
|||
count++ |
|||
const timestamp = new Date().getTime() |
|||
const key = timestamp + "-" + count |
|||
ipcRenderer.once(key, fn) |
|||
|
|||
function fn(_, err: any, res: any) { |
|||
if (err) { |
|||
reject(err) |
|||
return |
|||
} |
|||
resolve(res) |
|||
} |
|||
|
|||
ipcRenderer.send("command", key, command, ...args) |
|||
}) |
|||
} |
|||
|
|||
export function callSync(command: string, ...args: any[]) { |
|||
if (!command) { |
|||
console.warn("命令不能为空") |
|||
return |
|||
} |
|||
count++ |
|||
const timestamp = new Date().getTime() |
|||
const key = timestamp + "-" + count |
|||
const result = ipcRenderer.sendSync("command", key, command, ...args) |
|||
if (!result) { |
|||
return |
|||
} |
|||
return result |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>关于我</title> |
|||
<style> |
|||
html, |
|||
body { |
|||
height: 100%; |
|||
width: 100%; |
|||
margin: 0; |
|||
padding: 0; |
|||
outline: none; |
|||
border: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<article> |
|||
<h1 id="demo" style="text-align: center">您好，亲爱的冒险者！</h1> |
|||
</article> |
|||
</body> |
|||
</html> |
|||
@ -1,30 +1,163 @@ |
|||
<script setup lang="ts"> |
|||
import Versions from "./components/Versions.vue" |
|||
import NavBar from "@renderer/components/NavBar.vue" |
|||
import { onBeforeMount, ref } from "vue" |
|||
import { PopupMenu } from "./bridge/PopupMenu" |
|||
|
|||
const ipcHandle = () => window.electron.ipcRenderer.send("ping") |
|||
const list = ref<any[]>([]) |
|||
const curUrl = ref<any>("") |
|||
const curIndex = ref<any>(-1) |
|||
const listener = (_, v) => { |
|||
list.value = v |
|||
const el = v.find(v => v.isActive) |
|||
console.log(el); |
|||
|
|||
curIndex.value = v.findIndex(v => v.isActive) |
|||
if (el) { |
|||
curUrl.value = el.showUrl |
|||
} else { |
|||
curUrl.value = "" |
|||
} |
|||
} |
|||
if (import.meta.hot) { |
|||
api.off("TabsCommand.update", listener) |
|||
} |
|||
api.on("TabsCommand.update", listener) |
|||
api.call("TabsCommand.sync") |
|||
|
|||
onBeforeMount(async () => { |
|||
list.value = await fetch("api://fuck/TabsService/getAllTabs").then(async res => await res.json()) |
|||
}) |
|||
|
|||
// const url = ref("") |
|||
|
|||
// async function addTab() { |
|||
// if (!url.value) url.value = "about:blank" |
|||
// await fetch("api://fuck/TabsService/add", { |
|||
// method: "POST", |
|||
// body: JSON.stringify({ url: url.value }), |
|||
// }) |
|||
// url.value = "" |
|||
// onClick() |
|||
// } |
|||
|
|||
function handleTabContextMenu(_, index) { |
|||
const menu = new PopupMenu([ |
|||
{ |
|||
label: "右侧关闭", |
|||
click() { |
|||
const all: number[] = [] |
|||
list.value.forEach((_, i) => { |
|||
if (i <= index) return |
|||
all.push(i) |
|||
}) |
|||
fetch("api://fuck/TabsService/closeTabAll", { |
|||
method: "POST", |
|||
body: JSON.stringify({ active: all }), |
|||
}) |
|||
}, |
|||
}, |
|||
{ |
|||
type: "separator", |
|||
}, |
|||
]) |
|||
menu.show() |
|||
} |
|||
|
|||
function changeTab(_, index) { |
|||
api.call("TabsCommand.setActive", index) |
|||
} |
|||
|
|||
function addTabInput() { |
|||
if (curUrl.value) { |
|||
if (curIndex.value !== undefined && curIndex.value >= 0) { |
|||
api.call("TabsCommand.nagivate", curIndex.value, curUrl.value) |
|||
} else { |
|||
api.call("TabsCommand.add", curUrl.value) |
|||
} |
|||
} |
|||
} |
|||
function addTab() { |
|||
api.call("TabsCommand.add", "about:blank") |
|||
} |
|||
|
|||
async function closeTab(_, index) { |
|||
await fetch("api://fuck/TabsService/closeTab", { |
|||
method: "POST", |
|||
body: JSON.stringify({ active: index }), |
|||
}) |
|||
onClick() |
|||
} |
|||
|
|||
const onClick = async () => { |
|||
list.value = await api.call("TabsCommand.getAllTabs") |
|||
// list.value = await fetch("api://fuck/TabsService/getAllTabs").then(async res => await res.json()) |
|||
// fetch("api://fuck/BasicService/showAbout").then(async res => console.log(await res.json())) |
|||
// fetch("api://index/openAbout", { |
|||
// method: "POST", |
|||
// body: JSON.stringify({ a: "234" }), |
|||
// }).then(async res => console.log(await res.json())) |
|||
} |
|||
|
|||
function onClickDevTool() { |
|||
fetch("api://fuck/BasicService/openTabDevtool") |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<img alt="logo" class="logo" src="./assets/electron.svg" /> |
|||
<div class="creator">Powered by electron-vite</div> |
|||
<div class="text"> |
|||
Build an Electron app with |
|||
<span class="vue">Vue</span> |
|||
and |
|||
<span class="ts">TypeScript</span> |
|||
</div> |
|||
<p class="tip"> |
|||
Please try pressing |
|||
<code>F12</code> |
|||
to open the devTool |
|||
</p> |
|||
<div class="actions"> |
|||
<div class="action"> |
|||
<a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a> |
|||
</div> |
|||
<div class="action"> |
|||
<a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a> |
|||
<div h-full flex flex-col> |
|||
<NavBar></NavBar> |
|||
<div flex-1 h-0 overflow-auto flex flex-col> |
|||
<div h="100px" flex flex-col b-b="1px solid #E5E5E5"> |
|||
<div flex gap-1 my-1 px-1 w-full> |
|||
<div |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
p-1 |
|||
b-b="1px solid gray" |
|||
b-l="1px solid gray" |
|||
b-r="1px solid gray" |
|||
:b-t="item.isActive ? '1px solid red' : '1px solid gray'" |
|||
flex |
|||
flex-1 |
|||
w-0 |
|||
items-center |
|||
cursor="pointer" |
|||
gap="5px" |
|||
max-w="200px" |
|||
@contextmenu="handleTabContextMenu(item, index)" |
|||
@click="changeTab(item, index)" |
|||
> |
|||
<div flex-1 w-0 line-1 text-normal>{{ item.title || "加载中..." }}</div> |
|||
<span p-1 rounded hover="bg-gray-2 text-hover" @click.stop="closeTab(item, index)">X</span> |
|||
</div> |
|||
<div |
|||
p-1 |
|||
b-b="1px solid gray" |
|||
b-l="1px solid gray" |
|||
b-r="1px solid gray" |
|||
b-t="1px solid gray" |
|||
flex |
|||
items-center |
|||
cursor="pointer" |
|||
gap="5px" |
|||
hover="bg-gray-2 text-hover" |
|||
> |
|||
<span p-1 rounded @click.stop="addTab()">+</span> |
|||
</div> |
|||
</div> |
|||
<div mx="5px" overflow="auto" flex-1 h-0 flex items-center gap-x="5px"> |
|||
<div flex-1 w-0 h="35px" px-3 rounded="35px" b="1px solid gray-4" flex items-center> |
|||
<input v-model="curUrl" placeholder="输入点什么" w-full text="16px" b-0 leading="25px" outline-0 type="text" /> |
|||
</div> |
|||
<div inline-block hover="bg-gray-2 text-hover" px-1 py-1 rounded cursor="pointer" @click="addTabInput()"> |
|||
<button text="14px" bg-transparent b-0 cursor="pointer">前往</button> |
|||
</div> |
|||
<div inline-block hover="bg-gray-2 text-hover" px-1 py-1 rounded cursor="pointer" @click="onClickDevTool()"> |
|||
<button text="14px" bg-transparent b-0 cursor="pointer">DevTool</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div flex-1 h-0 flex items-center justify-center>fuck</div> |
|||
</div> |
|||
</div> |
|||
<Versions /> |
|||
</template> |
|||
|
|||
@ -1,67 +0,0 @@ |
|||
:root { |
|||
--ev-c-white: #ffffff; |
|||
--ev-c-white-soft: #f8f8f8; |
|||
--ev-c-white-mute: #f2f2f2; |
|||
|
|||
--ev-c-black: #1b1b1f; |
|||
--ev-c-black-soft: #222222; |
|||
--ev-c-black-mute: #282828; |
|||
|
|||
--ev-c-gray-1: #515c67; |
|||
--ev-c-gray-2: #414853; |
|||
--ev-c-gray-3: #32363f; |
|||
|
|||
--ev-c-text-1: rgba(255, 255, 245, 0.86); |
|||
--ev-c-text-2: rgba(235, 235, 245, 0.6); |
|||
--ev-c-text-3: rgba(235, 235, 245, 0.38); |
|||
|
|||
--ev-button-alt-border: transparent; |
|||
--ev-button-alt-text: var(--ev-c-text-1); |
|||
--ev-button-alt-bg: var(--ev-c-gray-3); |
|||
--ev-button-alt-hover-border: transparent; |
|||
--ev-button-alt-hover-text: var(--ev-c-text-1); |
|||
--ev-button-alt-hover-bg: var(--ev-c-gray-2); |
|||
} |
|||
|
|||
:root { |
|||
--color-background: var(--ev-c-black); |
|||
--color-background-soft: var(--ev-c-black-soft); |
|||
--color-background-mute: var(--ev-c-black-mute); |
|||
|
|||
--color-text: var(--ev-c-text-1); |
|||
} |
|||
|
|||
*, |
|||
*::before, |
|||
*::after { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
ul { |
|||
list-style: none; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
color: var(--color-text); |
|||
background: var(--color-background); |
|||
line-height: 1.6; |
|||
font-family: |
|||
Inter, |
|||
-apple-system, |
|||
BlinkMacSystemFont, |
|||
"Segoe UI", |
|||
Roboto, |
|||
Oxygen, |
|||
Ubuntu, |
|||
Cantarell, |
|||
"Fira Sans", |
|||
"Droid Sans", |
|||
"Helvetica Neue", |
|||
sans-serif; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
Before Width: | Height: | Size: 5.7 KiB |
@ -1,171 +0,0 @@ |
|||
@import "./base.css"; |
|||
|
|||
body { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
background-image: url("./wavy-lines.svg"); |
|||
background-size: cover; |
|||
user-select: none; |
|||
} |
|||
|
|||
code { |
|||
font-weight: 600; |
|||
padding: 3px 5px; |
|||
border-radius: 2px; |
|||
background-color: var(--color-background-mute); |
|||
font-family: |
|||
ui-monospace, |
|||
SFMono-Regular, |
|||
SF Mono, |
|||
Menlo, |
|||
Consolas, |
|||
Liberation Mono, |
|||
monospace; |
|||
font-size: 85%; |
|||
} |
|||
|
|||
#app { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
margin-bottom: 80px; |
|||
} |
|||
|
|||
.logo { |
|||
margin-bottom: 20px; |
|||
-webkit-user-drag: none; |
|||
height: 128px; |
|||
width: 128px; |
|||
will-change: filter; |
|||
transition: filter 300ms; |
|||
} |
|||
|
|||
.logo:hover { |
|||
filter: drop-shadow(0 0 1.2em #6988e6aa); |
|||
} |
|||
|
|||
.creator { |
|||
font-size: 14px; |
|||
line-height: 16px; |
|||
color: var(--ev-c-text-2); |
|||
font-weight: 600; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 28px; |
|||
color: var(--ev-c-text-1); |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
text-align: center; |
|||
margin: 0 10px; |
|||
padding: 16px 0; |
|||
} |
|||
|
|||
.tip { |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
color: var(--ev-c-text-2); |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.vue { |
|||
background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.ts { |
|||
background: -webkit-linear-gradient(315deg, #3178c6 45%, #f0dc4e); |
|||
background-clip: text; |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.actions { |
|||
display: flex; |
|||
padding-top: 32px; |
|||
margin: -6px; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.action { |
|||
flex-shrink: 0; |
|||
padding: 6px; |
|||
} |
|||
|
|||
.action a { |
|||
cursor: pointer; |
|||
text-decoration: none; |
|||
display: inline-block; |
|||
border: 1px solid transparent; |
|||
text-align: center; |
|||
font-weight: 600; |
|||
white-space: nowrap; |
|||
border-radius: 20px; |
|||
padding: 0 20px; |
|||
line-height: 38px; |
|||
font-size: 14px; |
|||
border-color: var(--ev-button-alt-border); |
|||
color: var(--ev-button-alt-text); |
|||
background-color: var(--ev-button-alt-bg); |
|||
} |
|||
|
|||
.action a:hover { |
|||
border-color: var(--ev-button-alt-hover-border); |
|||
color: var(--ev-button-alt-hover-text); |
|||
background-color: var(--ev-button-alt-hover-bg); |
|||
} |
|||
|
|||
.versions { |
|||
position: absolute; |
|||
bottom: 30px; |
|||
margin: 0 auto; |
|||
padding: 15px 0; |
|||
font-family: "Menlo", "Lucida Console", monospace; |
|||
display: inline-flex; |
|||
overflow: hidden; |
|||
align-items: center; |
|||
border-radius: 22px; |
|||
background-color: #202127; |
|||
backdrop-filter: blur(24px); |
|||
} |
|||
|
|||
.versions li { |
|||
display: block; |
|||
float: left; |
|||
border-right: 1px solid var(--ev-c-gray-1); |
|||
padding: 0 20px; |
|||
font-size: 14px; |
|||
line-height: 14px; |
|||
opacity: 0.8; |
|||
&:last-child { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 720px) { |
|||
.text { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 620px) { |
|||
.versions { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 350px) { |
|||
.tip, |
|||
.actions { |
|||
display: none; |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
*, |
|||
*::before, |
|||
*::after { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
html { |
|||
--text-normal: #6b6b6b; |
|||
--text-hover: #000000; |
|||
height: 100%; |
|||
} |
|||
|
|||
body { |
|||
--at-apply: text-normal; |
|||
height: 100%; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
Before Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,66 @@ |
|||
/** |
|||
* ContextMenu |
|||
* @author: oldj |
|||
* @homepage: https://oldj.net
|
|||
*/ |
|||
|
|||
import { IMenuItemOption } from "#" |
|||
|
|||
let _idx: number = 0 |
|||
|
|||
type OffFunction = () => void |
|||
|
|||
export class PopupMenu { |
|||
private _id: string |
|||
private _items: IMenuItemOption[] |
|||
private _offs: any[] = [] |
|||
|
|||
constructor(menu_items: IMenuItemOption[]) { |
|||
this._id = `popup_menu_${Math.floor(Math.random() * 1e8)}` |
|||
this._items = menu_items |
|||
} |
|||
|
|||
show() { |
|||
// console.log('show')
|
|||
this.onHide() |
|||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|||
const that = this |
|||
function readMenu(_items: IMenuItemOption[]) { |
|||
return _items.map(i => { |
|||
const d = { ...i } |
|||
if (typeof d.click === "function") { |
|||
const r = Math.floor(Math.random() * 1e8) |
|||
const evt = `popup_menu_item_${_idx++}_${r}` |
|||
const off = api.once(evt, d.click as any) |
|||
that._offs.push(off) |
|||
d._click_evt = evt |
|||
delete d.click |
|||
} |
|||
if (d.submenu && Array.isArray(d.submenu)) { |
|||
d.submenu = readMenu(d.submenu) |
|||
} |
|||
return d |
|||
}) |
|||
} |
|||
const items = readMenu(this._items) |
|||
|
|||
api.popupMenu({ |
|||
menu_id: this._id, |
|||
items, |
|||
}) |
|||
;((offs: OffFunction[]) => { |
|||
api.once(`popup_menu_close:${this._id}`, () => { |
|||
// console.log(`on popup_menu_close:${this._id}`)
|
|||
setTimeout(() => { |
|||
offs.map(o => o()) |
|||
}, 100) |
|||
}) |
|||
})(this._offs) |
|||
} |
|||
|
|||
private onHide() { |
|||
// console.log('hide...')
|
|||
this._offs.map(o => o()) |
|||
this._offs = [] |
|||
} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
<template> |
|||
<div relative h="30px" leading="29px" pr="137px" select-none border-b="1px solid #E5E5E5" bg="#F8F8F8"> |
|||
<div absolute top-0 right-0 bottom-0 left-0 style="-webkit-app-region: drag"></div> |
|||
<div h-full px-2 flex items-center gap-1 justify-between> |
|||
<div flex items-center gap-1> |
|||
<img w="16px" h="16px" :src="icon" /> |
|||
<div relative h-full inline-flex items-center text-sm>{{ config.app_title }}</div> |
|||
</div> |
|||
<div float-right h-full flex items-center relative style="-webkit-app-region: no-drag"> |
|||
<div text-sm px-2 hover:rounded-md hover:bg-gray-2 hover:cursor-pointer text="hover:hover" @click="onClickAbout">关于</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import icon from "@res/icon.png" |
|||
import config from "config" |
|||
|
|||
const onClickAbout = () => { |
|||
fetch("api://fuck/BasicService/showAbout") |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1 @@ |
|||
declare const api |
|||
@ -0,0 +1,9 @@ |
|||
interface IMenuItemOption extends Electron.MenuItemConstructorOptions { |
|||
// 参见：https://www.electronjs.org/docs/api/menu-item
|
|||
_click_evt?: string |
|||
} |
|||
|
|||
export interface IPopupMenuOption { |
|||
menu_id: string |
|||
items: IMenuItemOption[] |
|||
} |
|||
@ -1,6 +1,76 @@ |
|||
import { defineConfig, presetAttributify, presetUno } from "unocss" |
|||
import { defineConfig, presetAttributify, presetUno, transformerDirectives } from "unocss" |
|||
import presetRemToPx from "@unocss/preset-rem-to-px" |
|||
|
|||
export default defineConfig({ |
|||
presets: [presetAttributify(), presetUno(), presetRemToPx()], |
|||
transformers: [transformerDirectives()], |
|||
shortcuts: [ |
|||
// 正方形 square-100px
|
|||
[ |
|||
/^square-\[?(.*?)\]?$/, |
|||
([, size]) => { |
|||
return `w-${size} h-${size}` |
|||
}, |
|||
], |
|||
// 圆形 circle-100px
|
|||
[ |
|||
/^circle-\[?(.*?)\]?$/, |
|||
([, size]) => { |
|||
return `square-${size} rounded-full` |
|||
}, |
|||
], |
|||
// 垂直水平居中
|
|||
["flex-center", "flex justify-center items-center"], |
|||
], |
|||
rules: [ |
|||
[ |
|||
/^text-(.*)$/, |
|||
([, c]) => { |
|||
if (c === "normal") return { color: "var(--text-normal)" } |
|||
if (c === "hover") return { color: "var(--text-hover)" } |
|||
}, |
|||
], |
|||
// 多行文本超出部分省略号 line-n (已内置 line-clamp-n)
|
|||
[ |
|||
/^line-(\d+)$/, |
|||
([, l]) => { |
|||
if (~~l === 1) { |
|||
return { |
|||
overflow: "hidden", |
|||
"text-overflow": "ellipsis", |
|||
"white-space": "nowrap", |
|||
width: "100%", |
|||
} |
|||
} |
|||
return { |
|||
overflow: "hidden", |
|||
display: "-webkit-box", |
|||
"-webkit-box-orient": "vertical", |
|||
"-webkit-line-clamp": l, |
|||
} |
|||
}, |
|||
], |
|||
// 一侧圆角 rounded-left-5px (已内置 rounded-l-n)
|
|||
[ |
|||
/^rounded-(left|right|top|bottom)-(.*?)$/, |
|||
([, position, m]) => { |
|||
let x1, x2, y1, y2 |
|||
if (["left", "right"].includes(position)) { |
|||
y1 = "top" |
|||
y2 = "bottom" |
|||
x1 = x2 = position |
|||
} else { |
|||
x1 = "left" |
|||
x2 = "right" |
|||
y1 = y2 = position |
|||
} |
|||
if (m === "full") m = "99999px" |
|||
|
|||
return { |
|||
[`border-${y1}-${x1}-radius`]: m, |
|||
[`border-${y2}-${x2}-radius`]: m, |
|||
} |
|||
}, |
|||
], |
|||
], |
|||
}) |
|||
|
|||
@ -0,0 +1,15 @@ |
|||
|
|||
插件化： |
|||
|
|||
https://rubickcenter.github.io/docs/core/index.html#%E5%9F%BA%E4%BA%8E-browserview-%E5%AE%9E%E7%8E%B0%E6%8F%92%E4%BB%B6%E5%8C%96%E8%83%BD%E5%8A%9B |
|||
|
|||
|
|||
electron+vue虚拟桌面开发遇坑之透明窗口鼠标穿透 |
|||
|
|||
|
|||
https://blog.csdn.net/weixin_42421494/article/details/102800491 |
|||
|
|||
|
|||
截图 |
|||
|
|||
https://zhuanlan.zhihu.com/p/46043613?from_voters_page=true |
|||
Loading…
Reference in new issue