feat: 调整项目结构

This commit is contained in:
DEV_DSW
2025-12-25 08:47:59 +08:00
parent 63592b2c3b
commit 50c7282ff2
9 changed files with 236 additions and 33 deletions

36
global.d.ts vendored
View File

@@ -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
View 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>

View File

@@ -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 {

View File

@@ -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);

View File

@@ -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>

View File

@@ -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,

View 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>

View File

@@ -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>

View File

@@ -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'),
] ]