feat: 新增页面

src/electron/main/main.ts

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

src/electron/preload/preload.ts

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

src/renderer/browser/BrowserLayout.vue

@@ -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-red-500" style="-webkit-app-region: no-drag" @click="onCloseWindow">
-        <button class="w-3 h-3 rounded-full bg-yellow-400" style="-webkit-app-region: no-drag" @click="onMinimizeWindow"></button>
+          <RiCloseLine />
-        <button class="w-3 h-3 rounded-full bg-green-500" style="-webkit-app-region: no-drag" @click="onMaximizeWindow"></button>
+        </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="onBack" :disabled="!active?.canGoBack">
-      <button class="px-2 py-1 bg-gray-200 rounded" @click="onForward" :disabled="!active?.canGoForward">→</button>
+        <RiArrowLeftSLine />
-      <button class="px-2 py-1 bg-gray-200 rounded" @click="onReload">⟳</button>
+      </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="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) => {
+    ; (window as any).ipcAPI.tabs.on('tab-created', (info: TabInfo) => {
-    const i = tabs.findIndex(t => t.id === info.id)
+      const i = tabs.findIndex(t => t.id === info.id)
-    if (i === -1) tabs.push(info)
+      if (i === -1) tabs.push(info)
-    activeId.value = info.id
+      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 || ''
       refreshActiveAddress()
-    }
+    })
-  })
+    ; (window as any).ipcAPI.tabs.on('tab-updated', (info: TabInfo) => {
-  ;(window as any).ipcAPI.tabs.on('tab-switched', ({ tabId }: { tabId: string }) => {
+      const i = tabs.findIndex(t => t.id === info.id)
-    activeId.value = tabId
+      if (i >= 0) tabs[i] = info
-    refreshActiveAddress()
+      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 scoped></style>
-</style>

src/renderer/components/Menus/index.vue

@@ -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}]">
+                <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]']" />
+                    <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 currentId = ref(1)
-const handleClick = (item: any) => {
+const handleClick = async (item: any) => {
     currentId.value = item.id
+    await (window as any).ipcAPI.tabs.create(item.url)
 }
 </script>
 

src/renderer/constant/menus.ts

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

src/renderer/layout/index.vue

@@ -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="bg box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px] ">
-    <div class="flex-1 h-full">
+    <div class="flex-1 flex gap-[8px]">
-      <slot></slot>
+      <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>

src/renderer/router/index.ts

@@ -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") {
+  if (token && to.path !== "/home") {
-    next({ path: "/rate" });
+    next({ path: "/home" });
     return;
   }
   

src/renderer/views/dashboard/index.vue

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

src/renderer/views/more/index.vue

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

src/renderer/views/order/index.vue

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

src/renderer/views/settings/index.vue

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

src/renderer/views/stock/index.vue

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

src/shared/types/ipc.types.ts

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

tsconfig.json

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