duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 新增页面

Browse Source
This commit is contained in:
duanshuwen
2025-12-07 14:54:52 +08:00
parent da7024747a
commit 14d916187c
15 changed files with 201 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/electron/main/main.ts
View File

@@ -1,7 +1,6 @@
import { app, BrowserWindow, ipcMain, shell } from "electron";
import { app, BrowserWindow, ipcMain } from "electron";
import path from "node:path";
import started from "electron-squirrel-startup";
import { TabManager } from '@modules/tab-manager'
import { logger } from '@modules/logger'
import "@modules/window-size";
@@ -11,12 +10,10 @@ if (started) {
class AppMain {
private mainWindow: BrowserWindow | null = null
private tabs: TabManager | null = null
private readonly isDev = !!MAIN_WINDOW_VITE_DEV_SERVER_URL
init() {
this.registerLifecycle()
this.registerCommonIPC()
this.registerAppIPC()
this.registerLogIPC()
}
@@ -45,7 +42,6 @@ class AppMain {
this.loadEntry(win, options?.route)
if (this.isDev) win.webContents.openDevTools()
this.mainWindow = win
this.initTabsIfNeeded(options)
return win
}
@@ -65,17 +61,6 @@ class AppMain {
});
}
private initTabsIfNeeded(options?: { frameless?: boolean; route?: string }) {
if (!this.mainWindow) return
const route = options?.route || ''
const shouldInit = !!options?.frameless || route.startsWith('/browser')
if (!shouldInit) return
this.tabs = new TabManager(this.mainWindow)
this.registerTabIPC()
this.tabs.enable?.()
this.tabs.create('about:blank')
}
private registerLifecycle() {
app.on("ready", () => {
this.createWindow({ frameless: false, route: '/login' })
@@ -88,23 +73,6 @@ class AppMain {
})
}
private registerCommonIPC() {
ipcMain.handle('open-baidu', () => {
this.mainWindow?.loadURL("https://www.baidu.com")
})
ipcMain.handle("external-open", (_event, url: string) => {
try {
const allowed = /^https:\/\/(www\.)?(baidu\.com|\w+[\.-]?\w+\.[a-z]{2,})(\/.*)?$/i;
if (typeof url === "string" && allowed.test(url)) {
return shell.openExternal(url);
}
throw new Error("URL not allowed");
} catch (e) {
return Promise.reject(e);
}
})
}
private registerAppIPC() {
ipcMain.handle('app:set-frameless', async (event, route?: string) => {
const old = BrowserWindow.fromWebContents(event.sender)
@@ -114,19 +82,6 @@ class AppMain {
})
}
private registerTabIPC() {
if (!this.tabs) return
const tabs = this.tabs
ipcMain.handle('tab:create', (_e, url?: string) => tabs.create(url))
ipcMain.handle('tab:list', () => tabs.list())
ipcMain.handle('tab:navigate', (_e, payload: { tabId: string; url: string }) => tabs.navigate(payload.tabId, payload.url))
ipcMain.handle('tab:reload', (_e, tabId: string) => tabs.reload(tabId))
ipcMain.handle('tab:back', (_e, tabId: string) => tabs.goBack(tabId))
ipcMain.handle('tab:forward', (_e, tabId: string) => tabs.goForward(tabId))
ipcMain.handle('tab:switch', (_e, tabId: string) => tabs.switch(tabId))
ipcMain.handle('tab:close', (_e, tabId: string) => tabs.close(tabId))
}
private registerLogIPC() {
ipcMain.handle('log-to-main', (_e, logLevel: string, message: string) => {
switch(logLevel) {

2
src/electron/preload/preload.ts
View File

@@ -2,8 +2,6 @@ import { contextBridge, ipcRenderer } from 'electron'
import { IPCChannel, IPCAPI } from '@/shared/types/ipc.types'
const api: IPCAPI = {
openBaidu: () => ipcRenderer.invoke('open-baidu'),
versions: process.versions,
external: {

88
src/renderer/views/browser/BrowserLayout.vue → src/renderer/browser/BrowserLayout.vue
View File

@@ -2,21 +2,39 @@
<div class="h-screen w-screen bg-gray-100">
<div class="flex items-center gap-1 px-3 h-10 border-b bg-white" style="-webkit-app-region: drag">
<div class="flex items-center gap-2 mr-2">
<button class="w-3 h-3 rounded-full bg-red-500" style="-webkit-app-region: no-drag" @click="onCloseWindow"></button>
<button class="w-3 h-3 rounded-full bg-yellow-400" style="-webkit-app-region: no-drag" @click="onMinimizeWindow"></button>
<button class="w-3 h-3 rounded-full bg-green-500" style="-webkit-app-region: no-drag" @click="onMaximizeWindow"></button>
<button class="w-3 h-3 rounded-full bg-red-500" style="-webkit-app-region: no-drag" @click="onCloseWindow">
<RiCloseLine />
</button>
<button class="w-3 h-3 rounded-full bg-yellow-400" style="-webkit-app-region: no-drag"
@click="onMinimizeWindow">
<RiSubtractLine />
</button>
<button class="w-3 h-3 rounded-full bg-green-500" style="-webkit-app-region: no-drag" @click="onMaximizeWindow">
<RiSquareLine />
</button>
</div>
<div v-for="t in tabs" :key="t.id" class="flex items-center px-2 py-1 rounded cursor-pointer" :class="t.id===activeId?'bg-blue-100':'hover:bg-gray-200'" @click="onSwitch(t.id)" style="-webkit-app-region: no-drag">
<div v-for="t in tabs" :key="t.id" class="flex items-center px-2 py-1 rounded cursor-pointer"
:class="t.id === activeId ? 'bg-blue-100' : 'hover:bg-gray-200'" @click="onSwitch(t.id)"
style="-webkit-app-region: no-drag">
<span class="text-sm mr-2 truncate max-w-[160px]">{{ t.title || t.url || '新标签页' }}</span>
<button class="text-gray-600 hover:text-black" style="-webkit-app-region: no-drag" @click.stop="onCloseTabId(t.id)">✕</button>
<button class="text-gray-600 hover:text-black" style="-webkit-app-region: no-drag"
@click.stop="onCloseTabId(t.id)">✕</button>
</div>
<button class="ml-2 px-2 py-1 rounded bg-gray-200 hover:bg-gray-300" style="-webkit-app-region: no-drag" @click="onNewTab">＋</button>
<button class="ml-2 px-2 py-1 rounded bg-gray-200 hover:bg-gray-300" style="-webkit-app-region: no-drag"
@click="onNewTab">＋</button>
</div>
<div class="flex items-center gap-2 px-3 h-12 border-b bg-gray-50">
<button class="px-2 py-1 bg-gray-200 rounded" @click="onBack" :disabled="!active?.canGoBack">←</button>
<button class="px-2 py-1 bg-gray-200 rounded" @click="onForward" :disabled="!active?.canGoForward">→</button>
<button class="px-2 py-1 bg-gray-200 rounded" @click="onReload">⟳</button>
<input class="flex-1 px-3 py-1 border rounded-full" v-model="address" @keyup.enter="onNavigate" placeholder="输入地址后回车" />
<button class="px-2 py-1 bg-gray-200 rounded" @click="onBack" :disabled="!active?.canGoBack">
<RiArrowLeftSLine />
</button>
<button class="px-2 py-1 bg-gray-200 rounded" @click="onForward" :disabled="!active?.canGoForward">
<RiArrowRightSLine />
</button>
<button class="px-2 py-1 bg-gray-200 rounded" @click="onReload">
<RiResetLeftLine />
</button>
<input class="flex-1 px-3 py-1 border rounded-full" v-model="address" @keyup.enter="onNavigate"
placeholder="输入地址后回车" />
</div>
<div class="h-[calc(100vh-5.5rem)]"></div>
</div>
@@ -24,6 +42,7 @@
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { RiArrowRightSLine, RiArrowLeftSLine, RiResetLeftLine, RiCloseLine, RiSubtractLine, RiSquareLine } from '@remixicon/vue'
type TabInfo = { id: string; url: string; title: string; isLoading: boolean; canGoBack: boolean; canGoForward: boolean }
@@ -99,32 +118,31 @@ const onMaximizeWindow = () => (window as any).ipcAPI.window.maximize()
onMounted(async () => {
await syncList()
;(window as any).ipcAPI.tabs.on('tab-created', (info: TabInfo) => {
const i = tabs.findIndex(t => t.id === info.id)
if (i === -1) tabs.push(info)
activeId.value = info.id
refreshActiveAddress()
})
;(window as any).ipcAPI.tabs.on('tab-updated', (info: TabInfo) => {
const i = tabs.findIndex(t => t.id === info.id)
if (i >= 0) tabs[i] = info
if (activeId.value === info.id) refreshActiveAddress()
})
;(window as any).ipcAPI.tabs.on('tab-closed', ({ tabId }: { tabId: string }) => {
const i = tabs.findIndex(t => t.id === tabId)
if (i >= 0) tabs.splice(i, 1)
if (activeId.value === tabId) {
const next = tabs[0]
activeId.value = next?.id || ''
; (window as any).ipcAPI.tabs.on('tab-created', (info: TabInfo) => {
const i = tabs.findIndex(t => t.id === info.id)
if (i === -1) tabs.push(info)
activeId.value = info.id
refreshActiveAddress()
}
})
;(window as any).ipcAPI.tabs.on('tab-switched', ({ tabId }: { tabId: string }) => {
activeId.value = tabId
refreshActiveAddress()
})
})
; (window as any).ipcAPI.tabs.on('tab-updated', (info: TabInfo) => {
const i = tabs.findIndex(t => t.id === info.id)
if (i >= 0) tabs[i] = info
if (activeId.value === info.id) refreshActiveAddress()
})
; (window as any).ipcAPI.tabs.on('tab-closed', ({ tabId }: { tabId: string }) => {
const i = tabs.findIndex(t => t.id === tabId)
if (i >= 0) tabs.splice(i, 1)
if (activeId.value === tabId) {
const next = tabs[0]
activeId.value = next?.id || ''
refreshActiveAddress()
}
})
; (window as any).ipcAPI.tabs.on('tab-switched', ({ tabId }: { tabId: string }) => {
activeId.value = tabId
refreshActiveAddress()
})
})
</script>
<style scoped>
</style>
<style scoped></style>

0
src/renderer/views/browser/README.md → src/renderer/browser/README.md
View File

18
src/renderer/components/Menus/index.vue
View File

@@ -1,12 +1,15 @@
<template>
<div class="w-[80px] h-full box-border pt-[12px] pb-[12px] flex flex-col items-center justify-center">
<div :class="['flex flex-col gap-[16px]', {'mt-auto mb-[8px] shrink-1': item.id === 7}]" v-for="(item) in menus" :key="item.id">
<div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 7 }]"
v-for="(item) in menus" :key="item.id">
<div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
<div :class="['box-border rounded-[16px] p-[8px]', {'bg-white': item.id === currentId}]">
<component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color" :class="['w-[32px] h-[32px]']" />
<div :class="['box-border rounded-[16px] p-[8px]', { 'bg-white': item.id === currentId }]">
<component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
:class="['w-[32px] h-[32px]']" />
</div>
<div :class="['text-[14px] mt-[4px] mb-[8px]', item.id === currentId ? `text-[${item.activeColor}]` : item.color]">
<div
:class="['text-[14px] mt-[4px] mb-[8px]', item.id === currentId ? `text-[${item.activeColor}]` : item.color]">
{{ item.name }}
</div>
</div>
@@ -21,9 +24,10 @@
import { ref } from 'vue'
import { menus } from '@constant/menus'
const currentId = ref(null)
const handleClick = (item: any) => {
const currentId = ref(1)
const handleClick = async (item: any) => {
currentId.value = item.id
await (window as any).ipcAPI.tabs.create(item.url)
}
</script>

8
src/renderer/constant/menus.ts
View File

@@ -7,6 +7,7 @@ export interface MenuItem {
icon: any
color: string
activeColor: string
url: string
}
export const menus: MenuItem[] = [
@@ -16,6 +17,7 @@ export const menus: MenuItem[] = [
icon: RiHomeLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/home',
},
{
id: 2,
@@ -23,6 +25,7 @@ export const menus: MenuItem[] = [
icon: RiFileListLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/order',
},
{
id: 3,
@@ -30,6 +33,7 @@ export const menus: MenuItem[] = [
icon: RiHotelLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/stock',
},
{
id: 4,
@@ -37,6 +41,7 @@ export const menus: MenuItem[] = [
icon: RiChatQuoteLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/rate',
},
{
id: 5,
@@ -44,6 +49,7 @@ export const menus: MenuItem[] = [
icon: RiBarChartBoxAiLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/dashboard',
},
{
id: 6,
@@ -51,6 +57,7 @@ export const menus: MenuItem[] = [
icon: RiMoreLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/more',
},
{
id: 7,
@@ -58,5 +65,6 @@ export const menus: MenuItem[] = [
icon: RiSettingsLine,
color: '#525866',
activeColor: '#2B7FFF',
url: '/settings',
},
]

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

@@ -1,13 +1,14 @@
<template>
<div class="bg box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px] gap-[8px]">
<div class="flex-1 h-full">
<slot></slot>
<div class="bg box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px] ">
<div class="flex-1 flex gap-[8px]">
<div class="flex-1 h-full">
<slot></slot>
</div>
<TaskList>
<slot name="task"></slot>
</TaskList>
</div>
<TaskList>
<slot name="task"></slot>
</TaskList>
<Menus />
</div>
</template>

6
src/renderer/router/index.ts
View File

@@ -9,7 +9,7 @@ const routes = [
{
path: "/browser",
name: "Browser",
component: () => import("@/views/browser/BrowserLayout.vue"),
component: () => import("@/browser/BrowserLayout.vue"),
meta: { requiresAuth: true },
},
{
@@ -43,8 +43,8 @@ router.beforeEach((to: any, from: any, next: any) => {
return;
}
if (token && to.path !== "/rate") {
next({ path: "/rate" });
if (token && to.path !== "/home") {
next({ path: "/home" });
return;
}

18
src/renderer/views/dashboard/index.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<Layout>
<template #task>
<Task />
</template>
</Layout>
</template>
<script setup lang="ts">
import Task from '../components/Task/index.vue'
const openBaidu = () => {
(window as any).ipcAPI?.openBaidu()
// 发送日志
(window as any).ipcAPI?.logToMain('info', '打开百度')
}
</script>

18
src/renderer/views/more/index.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<Layout>
<template #task>
<Task />
</template>
</Layout>
</template>
<script setup lang="ts">
import Task from '../components/Task/index.vue'
const openBaidu = () => {
(window as any).ipcAPI?.openBaidu()
// 发送日志
(window as any).ipcAPI?.logToMain('info', '打开百度')
}
</script>

18
src/renderer/views/order/index.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<Layout>
<template #task>
<Task />
</template>
</Layout>
</template>
<script setup lang="ts">
import Task from '../components/Task/index.vue'
const openBaidu = () => {
(window as any).ipcAPI?.openBaidu()
// 发送日志
(window as any).ipcAPI?.logToMain('info', '打开百度')
}
</script>

18
src/renderer/views/settings/index.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<Layout>
<template #task>
<Task />
</template>
</Layout>
</template>
<script setup lang="ts">
import Task from '../components/Task/index.vue'
const openBaidu = () => {
(window as any).ipcAPI?.openBaidu()
// 发送日志
(window as any).ipcAPI?.logToMain('info', '打开百度')
}
</script>

18
src/renderer/views/stock/index.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<Layout>
<template #task>
<Task />
</template>
</Layout>
</template>
<script setup lang="ts">
import Task from '../components/Task/index.vue'
const openBaidu = () => {
(window as any).ipcAPI?.openBaidu()
// 发送日志
(window as any).ipcAPI?.logToMain('info', '打开百度')
}
</script>

27
src/shared/types/ipc.types.ts
View File

@@ -52,5 +52,30 @@ export interface IPCAPI {
invokeAsync<T extends keyof IPCTypings>(channel: T, ...args: IPCTypings[T]['params']): IPCTypings[T]['return'],
on<T extends keyof IPCTypings>(channel: T, callback: (...args: IPCTypings[T]['params']) => void): () => void
send<T extends keyof IPCTypings>(channel: T, ...args: IPCTypings[T]['params']): void,
getCurrentWindowId(): number
getCurrentWindowId(): number,
versions: NodeJS.ProcessVersions,
external: {
open: (url: string) => void
},
window: {
minimize: () => void,
maximize: () => void,
close: () => void
},
app: {
setFrameless: (route?: string) => void
},
tabs: {
create: (url?: string) => void,
list: () => void,
navigate: (tabId: string, url: string) => void,
reload: (tabId: string) => void,
back: (tabId: string) => void,
forward: (tabId: string) => void,
switch: (tabId: string) => void,
close: (tabId: string) => 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}>,
logToMain: (logLevel: string, message: string) => void,
}

1
tsconfig.json
View File

@@ -23,6 +23,7 @@
"@api/*": ["src/renderer/api/*"],
"@/types": ["src/renderer/types/index.ts"],
"@modules/*": ["src/electron/main/modules/*"],
"@/shared/*": ["src/shared/*"],
},
"outDir": "dist",
"moduleResolution": "bundler",