LoongPanel-Asp/web/components/Term.vue

85 lines
1.9 KiB
Vue
Raw Normal View History

2024-06-22 10:54:02 +08:00
<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
2024-06-29 18:16:29 +08:00
import {HubConnectionBuilder} from "@microsoft/signalr";
import {FitAddon} from 'xterm-addon-fit'
//导入xtrem
import {Terminal} from "@xterm/xterm";
import "@xterm/xterm/css/xterm.css";
var term: Terminal;
onMounted(()=>{
term = new Terminal({rows:40,cols:100,smoothScrollDuration:100,scrollback:1000});
term.open(document.getElementById("terminal") as HTMLElement);
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
// fitAddon.fit();
term.focus();
//绑定输入事件
term.onData((data) => {
console.log(data)
connection.invoke("SendMessage", data)
.catch(err => {
console.log("Error while sending message: " + err);
});
})
})
2024-06-22 10:54:02 +08:00
const mainLayoutStore = useMainLayoutStore()
2024-06-29 18:16:29 +08:00
const connection = new HubConnectionBuilder()
2024-06-29 19:22:47 +08:00
.withUrl(`${useRuntimeConfig().public.baseUrl}/TerminalHub`,{
accessTokenFactory:()=> `${useCookie('token').value}`
})
2024-06-29 18:16:29 +08:00
.withAutomaticReconnect()
.build();
onMounted(async () => {
connection.on("ReceiveMessage", (message) => {
term.write(message)
})
await connection.start()
.then(() => {
console.log("Connection started");
})
.catch(err => {
console.log("Error while starting connection: " + err);
});
await connection.invoke("CreateTerminal", mainLayoutStore.SelectServer.id)
.then(() => {
console.log("Terminal created")
})
setTimeout(()=>{
connection.invoke("SendMessage","neofetch\n")
},200)
2024-06-22 10:54:02 +08:00
})
</script>
<template>
2024-06-29 18:16:29 +08:00
<div class="terminal-box">
<div id="terminal">
</div>
2024-06-22 10:54:02 +08:00
</div>
2024-06-29 18:16:29 +08:00
2024-06-22 10:54:02 +08:00
</template>
<style lang="scss" scoped>
@import "base";
2024-06-29 18:16:29 +08:00
.terminal-box {
width: 100%;
2024-06-22 10:54:02 +08:00
padding: $padding;
background: #000;
border-radius: $radius*2;
2024-06-29 18:16:29 +08:00
}
2024-06-22 10:54:02 +08:00
2024-06-29 18:16:29 +08:00
#terminal {
&::-webkit-scrollbar{
width:0;
2024-06-22 10:54:02 +08:00
}
}
2024-06-29 18:16:29 +08:00
:deep(.xterm-viewport::-webkit-scrollbar){
width: 0;
}
2024-06-22 10:54:02 +08:00
</style>