style: 优化样式

napcat.webui/src/controllers/terminal_manager.ts

@@ -1,3 +1,5 @@
+import { serverRequest } from '@/utils/request'
+
 type TerminalCallback = (data: string) => void
 
 interface TerminalConnection {
@@ -7,10 +9,38 @@ interface TerminalConnection {
   buffer: string[] // 添加缓存数组
 }
 
+export interface TerminalSession {
+  id: string
+}
+
+export interface TerminalInfo {
+  id: string
+}
+
 class TerminalManager {
   private connections: Map<string, TerminalConnection> = new Map()
   private readonly MAX_BUFFER_SIZE = 1000 // 限制缓存大小
 
+  async createTerminal(cols: number, rows: number): Promise<TerminalSession> {
+    const { data } = await serverRequest.post<ServerResponse<TerminalSession>>(
+      '/Log/terminal/create',
+      { cols, rows }
+    )
+    return data.data
+  }
+
+  async closeTerminal(id: string): Promise<void> {
+    await serverRequest.post(`/Log/terminal/${id}/close`)
+  }
+
+  async getTerminalList(): Promise<TerminalInfo[]> {
+    const { data } =
+      await serverRequest.get<ServerResponse<TerminalInfo[]>>(
+        '/Log/terminal/list'
+      )
+    return data.data
+  }
+
   connectTerminal(id: string, callback: TerminalCallback): WebSocket {
     let conn = this.connections.get(id)
 

napcat.webui/src/controllers/webui_manager.ts

@@ -138,65 +138,4 @@ export default class WebUIManager {
 
     return eventSource
   }
-
-  public static async createTerminal(
-    cols: number,
-    rows: number
-  ): Promise<TerminalSession> {
-    const { data } = await serverRequest.post<ServerResponse<TerminalSession>>(
-      '/Log/terminal/create',
-      { cols, rows }
-    )
-    return data.data
-  }
-
-  public static async closeTerminal(id: string): Promise<void> {
-    await serverRequest.post(`/Log/terminal/${id}/close`)
-  }
-
-  public static async getTerminalList(): Promise<TerminalInfo[]> {
-    const { data } =
-      await serverRequest.get<ServerResponse<TerminalInfo[]>>(
-        '/Log/terminal/list'
-      )
-    return data.data
-  }
-
-  public static connectTerminal(
-    id: string,
-    onData: (data: string) => void
-  ): WebSocket {
-    const token = localStorage.getItem('token')
-    if (!token) throw new Error('未登录')
-
-    const _token = JSON.parse(token)
-
-    const url = new URL(window.location.origin)
-    url.protocol = "ws://"
-    url.pathname = "/api/ws/terminal"
-    url.searchParams.set('token', _token)
-    url.searchParams.set("id", id)
-      console.log(url.toString())
-
-    const ws = new WebSocket(url.toString())
-
-    ws.onmessage = (event) => {
-      try {
-        const { data } = JSON.parse(event.data)
-        onData(data)
-      } catch (error) {
-        console.error(error)
-      }
-    }
-
-    ws.onerror = (error) => {
-      console.error('WebSocket连接出错:', error)
-    }
-
-    ws.onclose = () => {
-      console.log('WebSocket连接关闭')
-    }
-
-    return ws
-  }
 }

napcat.webui/src/pages/dashboard/terminal.tsx

@@ -21,7 +21,6 @@ import { SortableTab } from '@/components/tabs/sortable_tab.tsx'
 import { TerminalInstance } from '@/components/terminal/terminal-instance'
 
 import terminalManager from '@/controllers/terminal_manager'
-import WebUIManager from '@/controllers/webui_manager'
 
 interface TerminalTab {
   id: string
@@ -34,7 +33,7 @@ export default function TerminalPage() {
 
   useEffect(() => {
     // 获取已存在的终端列表
-    WebUIManager.getTerminalList().then((terminals) => {
+    terminalManager.getTerminalList().then((terminals) => {
       if (terminals.length === 0) return
 
       const newTabs = terminals.map((terminal) => ({
@@ -49,7 +48,7 @@ export default function TerminalPage() {
 
   const createNewTerminal = async () => {
     try {
-      const { id } = await WebUIManager.createTerminal(80, 24)
+      const { id } = await terminalManager.createTerminal(80, 24)
       const newTab = {
         id,
         title: id
@@ -65,7 +64,7 @@ export default function TerminalPage() {
 
   const closeTerminal = async (id: string) => {
     try {
-      await WebUIManager.closeTerminal(id)
+      await terminalManager.closeTerminal(id)
       terminalManager.removeTerminal(id)
       if (selectedTab === id) {
         const previousIndex = tabs.findIndex((tab) => tab.id === id) - 1
@@ -153,6 +152,12 @@ export default function TerminalPage() {
             />
           </div>
           <div className="flex-grow overflow-hidden">
+            {tabs.length === 0 && (
+              <div className="flex flex-col gap-2 items-center justify-center h-full text-gray-500 py-5">
+                <IoAdd className="text-4xl" />
+                <div className="text-sm">点击右上角按钮创建终端</div>
+              </div>
+            )}
             {tabs.map((tab) => (
               <TabPanel key={tab.id} value={tab.id} className="h-full">
                 <TerminalInstance id={tab.id} />