feat: 调整项目结构
This commit is contained in:
36
global.d.ts
vendored
36
global.d.ts
vendored
@@ -42,6 +42,16 @@ declare global {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type TabId = string
|
||||||
|
interface TabInfo {
|
||||||
|
id: TabId
|
||||||
|
url: string
|
||||||
|
title: string
|
||||||
|
isLoading: boolean
|
||||||
|
canGoBack: boolean
|
||||||
|
canGoForward: boolean
|
||||||
|
}
|
||||||
|
|
||||||
// 定义IPC API 接口
|
// 定义IPC API 接口
|
||||||
interface WindowApi {
|
interface WindowApi {
|
||||||
invoke<T extends keyof IPCTypings>(channel: T, ...args: IPCTypings[T]['params']): IPCTypings[T]['return'],
|
invoke<T extends keyof IPCTypings>(channel: T, ...args: IPCTypings[T]['params']): IPCTypings[T]['return'],
|
||||||
@@ -51,7 +61,7 @@ declare global {
|
|||||||
getCurrentWindowId(): number,
|
getCurrentWindowId(): number,
|
||||||
versions: NodeJS.ProcessVersions,
|
versions: NodeJS.ProcessVersions,
|
||||||
external: {
|
external: {
|
||||||
open: (url: string) => void
|
open: (url: string) => Promise<void>
|
||||||
},
|
},
|
||||||
minimizeWindow: () => void,
|
minimizeWindow: () => void,
|
||||||
maximizeWindow: () => void,
|
maximizeWindow: () => void,
|
||||||
@@ -60,19 +70,19 @@ declare global {
|
|||||||
isWindowMaximized: () => Promise<boolean>,
|
isWindowMaximized: () => Promise<boolean>,
|
||||||
viewIsReady: () => void
|
viewIsReady: () => void
|
||||||
app: {
|
app: {
|
||||||
setFrameless: (route?: string) => void,
|
setFrameless: (route?: string) => Promise<void>,
|
||||||
loadPage: (page: string) => void
|
loadPage: (page: string) => Promise<void>
|
||||||
},
|
},
|
||||||
tabs: {
|
tabs: {
|
||||||
create: (url?: string) => void,
|
create: (url?: string) => Promise<TabInfo>,
|
||||||
list: () => void,
|
list: () => Promise<TabInfo[]>,
|
||||||
navigate: (tabId: string, url: string) => void,
|
navigate: (tabId: string, url: string) => Promise<void>,
|
||||||
reload: (tabId: string) => void,
|
reload: (tabId: string) => Promise<void>,
|
||||||
back: (tabId: string) => void,
|
back: (tabId: string) => Promise<void>,
|
||||||
forward: (tabId: string) => void,
|
forward: (tabId: string) => Promise<void>,
|
||||||
switch: (tabId: string) => void,
|
switch: (tabId: string) => Promise<void>,
|
||||||
close: (tabId: string) => void,
|
close: (tabId: string) => Promise<void>,
|
||||||
on: (event: 'tab-updated' | 'tab-created' | 'tab-closed' | 'tab-switched', handler: (payload: any) => void) => void
|
on: (event: 'tab-updated' | 'tab-created' | 'tab-closed' | 'tab-switched', handler: (payload: any) => void) => () => void
|
||||||
},
|
},
|
||||||
readFile: (filePath: string) => Promise<{success: boolean, data?: string, error?: string}>,
|
readFile: (filePath: string) => Promise<{success: boolean, data?: string, error?: string}>,
|
||||||
logger: {
|
logger: {
|
||||||
@@ -83,7 +93,7 @@ declare global {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
declare interface Window {
|
interface Window {
|
||||||
api: WindowApi;
|
api: WindowApi;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
16
html/home.html
Normal file
16
html/home.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>NIANXX</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
http-equiv="Content-Security-Policy"
|
||||||
|
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' http://8.138.234.141; connect-src 'self' http://8.138.234.141 https://api.iconify.design"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="../src/renderer/views/home/index.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
import { BrowserView, BrowserWindow } from 'electron'
|
import { BrowserView, BrowserWindow, ipcMain, IpcMainInvokeEvent } from 'electron'
|
||||||
import { randomUUID } from 'crypto'
|
import { randomUUID } from 'crypto'
|
||||||
|
import { IPC_EVENTS } from '@common/constants'
|
||||||
|
import path from 'node:path'
|
||||||
|
|
||||||
type TabId = string
|
type TabId = string
|
||||||
type TabInfo = { id: TabId; url: string; title: string; isLoading: boolean; canGoBack: boolean; canGoForward: boolean }
|
type TabInfo = { id: TabId; url: string; title: string; isLoading: boolean; canGoBack: boolean; canGoForward: boolean }
|
||||||
@@ -16,6 +18,42 @@ export class TabManager {
|
|||||||
constructor(win: BrowserWindow) {
|
constructor(win: BrowserWindow) {
|
||||||
this.win = win
|
this.win = win
|
||||||
this.win.on('resize', () => this.updateActiveBounds())
|
this.win.on('resize', () => this.updateActiveBounds())
|
||||||
|
this._setupIpcEvents()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _setupIpcEvents() {
|
||||||
|
ipcMain.handle(IPC_EVENTS.TAB_CREATE, (_e, url?: string) => {
|
||||||
|
const info = this.create(url)
|
||||||
|
return info
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle(IPC_EVENTS.TAB_LIST, () => {
|
||||||
|
return this.list()
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle(IPC_EVENTS.TAB_NAVIGATE, (_e, { tabId, url }: { tabId: TabId; url: string }) => {
|
||||||
|
this.navigate(tabId, url)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle(IPC_EVENTS.TAB_RELOAD, (_e, tabId: TabId) => {
|
||||||
|
this.reload(tabId)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle(IPC_EVENTS.TAB_BACK, (_e, tabId: TabId) => {
|
||||||
|
this.goBack(tabId)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle(IPC_EVENTS.TAB_FORWARD, (_e, tabId: TabId) => {
|
||||||
|
this.goForward(tabId)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle(IPC_EVENTS.TAB_SWITCH, (_e, tabId: TabId) => {
|
||||||
|
this.switch(tabId)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle(IPC_EVENTS.TAB_CLOSE, (_e, tabId: TabId) => {
|
||||||
|
this.close(tabId)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
enable() {
|
enable() {
|
||||||
@@ -30,15 +68,40 @@ export class TabManager {
|
|||||||
if (view) this.win.removeBrowserView(view)
|
if (view) this.win.removeBrowserView(view)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.disable()
|
||||||
|
this.views.forEach(view => {
|
||||||
|
// @ts-ignore
|
||||||
|
view.webContents.destroy()
|
||||||
|
})
|
||||||
|
this.views.clear()
|
||||||
|
|
||||||
|
ipcMain.removeHandler(IPC_EVENTS.TAB_CREATE)
|
||||||
|
ipcMain.removeHandler(IPC_EVENTS.TAB_LIST)
|
||||||
|
ipcMain.removeHandler(IPC_EVENTS.TAB_NAVIGATE)
|
||||||
|
ipcMain.removeHandler(IPC_EVENTS.TAB_RELOAD)
|
||||||
|
ipcMain.removeHandler(IPC_EVENTS.TAB_BACK)
|
||||||
|
ipcMain.removeHandler(IPC_EVENTS.TAB_FORWARD)
|
||||||
|
ipcMain.removeHandler(IPC_EVENTS.TAB_SWITCH)
|
||||||
|
ipcMain.removeHandler(IPC_EVENTS.TAB_CLOSE)
|
||||||
|
}
|
||||||
|
|
||||||
list(): TabInfo[] {
|
list(): TabInfo[] {
|
||||||
return Array.from(this.views.entries()).map(([id, view]) => this.info(id, view))
|
return Array.from(this.views.entries()).map(([id, view]) => this.info(id, view))
|
||||||
}
|
}
|
||||||
|
|
||||||
create(url?: string): TabInfo {
|
create(url?: string, active = true): TabInfo {
|
||||||
const id = randomUUID()
|
const id = randomUUID()
|
||||||
const view = new BrowserView({ webPreferences: { sandbox: true } })
|
const view = new BrowserView({
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: false,
|
||||||
|
contextIsolation: true,
|
||||||
|
sandbox: true,
|
||||||
|
preload: path.join(__dirname, 'preload.js'),
|
||||||
|
},
|
||||||
|
})
|
||||||
this.views.set(id, view)
|
this.views.set(id, view)
|
||||||
if (this.enabled) this.attach(id)
|
if (this.enabled && active) this.attach(id)
|
||||||
const target = url && url.length > 0 ? url : 'about:blank'
|
const target = url && url.length > 0 ? url : 'about:blank'
|
||||||
view.webContents.loadURL(target)
|
view.webContents.loadURL(target)
|
||||||
this.bindEvents(id, view)
|
this.bindEvents(id, view)
|
||||||
@@ -110,8 +173,23 @@ export class TabManager {
|
|||||||
if (!this.enabled || !this.activeId) return
|
if (!this.enabled || !this.activeId) return
|
||||||
const view = this.views.get(this.activeId)
|
const view = this.views.get(this.activeId)
|
||||||
if (!view) return
|
if (!view) return
|
||||||
const [width, height] = this.win.getContentSize()
|
const [winWidth, winHeight] = this.win.getContentSize()
|
||||||
view.setBounds({ x: 0, y: UI_HEIGHT, width, height: Math.max(0, height - UI_HEIGHT) })
|
|
||||||
|
const HEADER_HEIGHT = 88
|
||||||
|
const PADDING = 8
|
||||||
|
const RIGHT_PANEL_WIDTH = 392 + 80 + 8 // TaskList + SideMenu + Gap
|
||||||
|
|
||||||
|
const x = PADDING
|
||||||
|
const y = HEADER_HEIGHT + PADDING
|
||||||
|
const width = winWidth - RIGHT_PANEL_WIDTH - PADDING
|
||||||
|
const height = winHeight - HEADER_HEIGHT - (PADDING * 2)
|
||||||
|
|
||||||
|
view.setBounds({
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
width: Math.max(0, width),
|
||||||
|
height: Math.max(0, height)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
private bindEvents(id: TabId, view: BrowserView): void {
|
private bindEvents(id: TabId, view: BrowserView): void {
|
||||||
|
|||||||
@@ -7,6 +7,8 @@ import { menuManager } from '@main/service/menu-service'
|
|||||||
import { logManager } from '@main/service/logger'
|
import { logManager } from '@main/service/logger'
|
||||||
import { configManager } from '@main/service/config-service'
|
import { configManager } from '@main/service/config-service'
|
||||||
import { trayManager } from '@main/service/tray-service'
|
import { trayManager } from '@main/service/tray-service'
|
||||||
|
import { TabManager } from '@service/tab-manager'
|
||||||
|
import path from 'node:path'
|
||||||
|
|
||||||
const handleTray = (minimizeToTray: boolean) => {
|
const handleTray = (minimizeToTray: boolean) => {
|
||||||
if (minimizeToTray) {
|
if (minimizeToTray) {
|
||||||
@@ -107,6 +109,37 @@ export function setupMainWindow() {
|
|||||||
});
|
});
|
||||||
handleTray(minimizeToTray);
|
handleTray(minimizeToTray);
|
||||||
registerMenus(mainWindow);
|
registerMenus(mainWindow);
|
||||||
|
|
||||||
|
const tabManager = new TabManager(mainWindow)
|
||||||
|
tabManager.enable()
|
||||||
|
let tabsInitialized = false
|
||||||
|
|
||||||
|
mainWindow.on('closed', () => {
|
||||||
|
tabManager.destroy()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getPageUrl = (page: string) => {
|
||||||
|
if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
|
||||||
|
return `${MAIN_WINDOW_VITE_DEV_SERVER_URL}/html/${page}.html`
|
||||||
|
}
|
||||||
|
return `file://${path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/html/${page}.html`)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const initTabs = () => {
|
||||||
|
if (tabsInitialized) return
|
||||||
|
tabsInitialized = true
|
||||||
|
tabManager.create(getPageUrl('home'), true)
|
||||||
|
tabManager.create(getPageUrl('knowledge'), false)
|
||||||
|
tabManager.create(getPageUrl('task'), false)
|
||||||
|
tabManager.create(getPageUrl('setting'), false)
|
||||||
|
}
|
||||||
|
|
||||||
|
mainWindow.webContents.on('did-finish-load', () => {
|
||||||
|
const url = mainWindow.webContents.getURL()
|
||||||
|
if (url.includes('/html/index.html') || url.endsWith('index.html')) {
|
||||||
|
initTabs()
|
||||||
|
}
|
||||||
|
})
|
||||||
});
|
});
|
||||||
windowManager.create(WINDOW_NAMES.MAIN, MAIN_WIN_SIZE);
|
windowManager.create(WINDOW_NAMES.MAIN, MAIN_WIN_SIZE);
|
||||||
|
|
||||||
|
|||||||
@@ -21,17 +21,80 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
import { menus } from '@constant/menus'
|
import { menus, type MenuItem } from '@constant/menus'
|
||||||
import { useRouter } from "vue-router"
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const currentId = ref(1)
|
const currentId = ref(1)
|
||||||
|
const tabMap = new Map<number, string>()
|
||||||
|
let cleanupListener: (() => void) | undefined
|
||||||
|
|
||||||
const handleClick = async (item: any) => {
|
const getHtmlPath = (menuUrl: string) => {
|
||||||
|
const cleanUrl = menuUrl.startsWith('/') ? menuUrl.slice(1) : menuUrl
|
||||||
|
switch (cleanUrl) {
|
||||||
|
case 'home': return 'home.html'
|
||||||
|
case 'knowledge': return 'knowledge.html'
|
||||||
|
case 'task': return 'task.html'
|
||||||
|
case 'setting': return 'setting.html'
|
||||||
|
default: return 'home.html'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
if (window.api && window.api.tabs) {
|
||||||
|
cleanupListener = window.api.tabs.on('tab-closed', (payload: any) => {
|
||||||
|
const { tabId } = payload
|
||||||
|
for (const [menuId, id] of tabMap.entries()) {
|
||||||
|
if (id === tabId) {
|
||||||
|
tabMap.delete(menuId)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
const tabs = await window.api.tabs.list()
|
||||||
|
if (tabs && tabs.length > 0) {
|
||||||
|
for (const tab of tabs) {
|
||||||
|
for (const menu of menus) {
|
||||||
|
const targetHtml = getHtmlPath(menu.url)
|
||||||
|
if (tab.url.includes(targetHtml)) {
|
||||||
|
tabMap.set(menu.id, tab.id)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to sync tabs', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (cleanupListener) cleanupListener()
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleClick = async (item: MenuItem) => {
|
||||||
console.log("🚀 ~ handleClick ~ item:", item)
|
console.log("🚀 ~ handleClick ~ item:", item)
|
||||||
currentId.value = item.id
|
currentId.value = item.id
|
||||||
router.push(item.url);
|
|
||||||
|
const existingTabId = tabMap.get(item.id)
|
||||||
|
if (existingTabId) {
|
||||||
|
await window.api.tabs.switch(existingTabId)
|
||||||
|
} else {
|
||||||
|
const htmlFile = getHtmlPath(item.url)
|
||||||
|
const targetUrl = new URL(htmlFile, window.location.href).href
|
||||||
|
|
||||||
|
try {
|
||||||
|
const tabInfo = await window.api.tabs.create(targetUrl)
|
||||||
|
if (tabInfo && tabInfo.id) {
|
||||||
|
tabMap.set(item.id, tabInfo.id)
|
||||||
|
await window.api.tabs.switch(tabInfo.id)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to create tab', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export const menus: MenuItem[] = [
|
|||||||
icon: RiApps2AiLine,
|
icon: RiApps2AiLine,
|
||||||
color: '#525866',
|
color: '#525866',
|
||||||
activeColor: '#2B7FFF',
|
activeColor: '#2B7FFF',
|
||||||
url: '/stock',
|
url: '/task',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
|
|||||||
8
src/renderer/views/home/HomeTab.vue
Normal file
8
src/renderer/views/home/HomeTab.vue
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bg-white h-full w-full p-[20px]">
|
||||||
|
<h1>首页 Dashboard</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
@@ -1,12 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="bg-gray-100 h-screen flex flex-col">
|
<div class="bg-gray-100 h-full flex flex-col p-[20px]">
|
||||||
<header-bar>
|
|
||||||
<drag-region class="w-full" />
|
|
||||||
</header-bar>
|
|
||||||
|
|
||||||
<layout>
|
|
||||||
任务中心
|
任务中心
|
||||||
</layout>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -26,6 +26,7 @@ export default defineConfig(async () => {
|
|||||||
resolve(__dirname, 'html/dialog.html'),
|
resolve(__dirname, 'html/dialog.html'),
|
||||||
resolve(__dirname, 'html/setting.html'),
|
resolve(__dirname, 'html/setting.html'),
|
||||||
resolve(__dirname, 'html/login.html'),
|
resolve(__dirname, 'html/login.html'),
|
||||||
|
resolve(__dirname, 'html/home.html'),
|
||||||
resolve(__dirname, 'html/task.html'),
|
resolve(__dirname, 'html/task.html'),
|
||||||
resolve(__dirname, 'html/knowledge.html'),
|
resolve(__dirname, 'html/knowledge.html'),
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user