mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2025-07-19 12:03:37 +00:00
style: 优化样式
This commit is contained in:
@@ -1,3 +1,5 @@
|
|||||||
|
import { serverRequest } from '@/utils/request'
|
||||||
|
|
||||||
type TerminalCallback = (data: string) => void
|
type TerminalCallback = (data: string) => void
|
||||||
|
|
||||||
interface TerminalConnection {
|
interface TerminalConnection {
|
||||||
@@ -7,10 +9,38 @@ interface TerminalConnection {
|
|||||||
buffer: string[] // 添加缓存数组
|
buffer: string[] // 添加缓存数组
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface TerminalSession {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TerminalInfo {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
|
||||||
class TerminalManager {
|
class TerminalManager {
|
||||||
private connections: Map<string, TerminalConnection> = new Map()
|
private connections: Map<string, TerminalConnection> = new Map()
|
||||||
private readonly MAX_BUFFER_SIZE = 1000 // 限制缓存大小
|
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 {
|
connectTerminal(id: string, callback: TerminalCallback): WebSocket {
|
||||||
let conn = this.connections.get(id)
|
let conn = this.connections.get(id)
|
||||||
|
|
||||||
|
@@ -138,65 +138,4 @@ export default class WebUIManager {
|
|||||||
|
|
||||||
return eventSource
|
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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@@ -21,7 +21,6 @@ import { SortableTab } from '@/components/tabs/sortable_tab.tsx'
|
|||||||
import { TerminalInstance } from '@/components/terminal/terminal-instance'
|
import { TerminalInstance } from '@/components/terminal/terminal-instance'
|
||||||
|
|
||||||
import terminalManager from '@/controllers/terminal_manager'
|
import terminalManager from '@/controllers/terminal_manager'
|
||||||
import WebUIManager from '@/controllers/webui_manager'
|
|
||||||
|
|
||||||
interface TerminalTab {
|
interface TerminalTab {
|
||||||
id: string
|
id: string
|
||||||
@@ -34,7 +33,7 @@ export default function TerminalPage() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 获取已存在的终端列表
|
// 获取已存在的终端列表
|
||||||
WebUIManager.getTerminalList().then((terminals) => {
|
terminalManager.getTerminalList().then((terminals) => {
|
||||||
if (terminals.length === 0) return
|
if (terminals.length === 0) return
|
||||||
|
|
||||||
const newTabs = terminals.map((terminal) => ({
|
const newTabs = terminals.map((terminal) => ({
|
||||||
@@ -49,7 +48,7 @@ export default function TerminalPage() {
|
|||||||
|
|
||||||
const createNewTerminal = async () => {
|
const createNewTerminal = async () => {
|
||||||
try {
|
try {
|
||||||
const { id } = await WebUIManager.createTerminal(80, 24)
|
const { id } = await terminalManager.createTerminal(80, 24)
|
||||||
const newTab = {
|
const newTab = {
|
||||||
id,
|
id,
|
||||||
title: id
|
title: id
|
||||||
@@ -65,7 +64,7 @@ export default function TerminalPage() {
|
|||||||
|
|
||||||
const closeTerminal = async (id: string) => {
|
const closeTerminal = async (id: string) => {
|
||||||
try {
|
try {
|
||||||
await WebUIManager.closeTerminal(id)
|
await terminalManager.closeTerminal(id)
|
||||||
terminalManager.removeTerminal(id)
|
terminalManager.removeTerminal(id)
|
||||||
if (selectedTab === id) {
|
if (selectedTab === id) {
|
||||||
const previousIndex = tabs.findIndex((tab) => tab.id === id) - 1
|
const previousIndex = tabs.findIndex((tab) => tab.id === id) - 1
|
||||||
@@ -153,6 +152,12 @@ export default function TerminalPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-grow overflow-hidden">
|
<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) => (
|
{tabs.map((tab) => (
|
||||||
<TabPanel key={tab.id} value={tab.id} className="h-full">
|
<TabPanel key={tab.id} value={tab.id} className="h-full">
|
||||||
<TerminalInstance id={tab.id} />
|
<TerminalInstance id={tab.id} />
|
||||||
|
Reference in New Issue
Block a user