diff --git a/frontend/src/assets/tools.scss b/frontend/src/assets/tools.scss index 3387d024..3c3965c6 100644 --- a/frontend/src/assets/tools.scss +++ b/frontend/src/assets/tools.scss @@ -30,6 +30,34 @@ justify-content: center; } +.position-relative { + position: relative; +} + +.position-absolute { + position: absolute; +} + +.position-absolute-right { + position: absolute; + right: 0; +} + +.position-absolute-left { + position: absolute; + left: 0; +} + +.position-absolute-top { + position: absolute; + top: 0; +} + +.position-absolute-bottom { + position: absolute; + bottom: 0; +} + .direction-column { flex-direction: column; } diff --git a/frontend/src/widgets/instance/Terminal.vue b/frontend/src/widgets/instance/Terminal.vue index 9c9541f0..be9d276f 100644 --- a/frontend/src/widgets/instance/Terminal.vue +++ b/frontend/src/widgets/instance/Terminal.vue @@ -9,7 +9,8 @@ import { DownOutlined, PauseCircleOutlined, PlayCircleOutlined, - RedoOutlined + RedoOutlined, + DeleteOutlined } from "@ant-design/icons-vue"; import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue"; import { arrayFilter } from "../../tools/array"; @@ -32,6 +33,8 @@ import { INSTANCE_STATUS_TEXT } from "../../hooks/useInstance"; import { message } from "ant-design-vue"; import connectErrorImage from "@/assets/daemon_connection_error.png"; import { useLayoutContainerStore } from "@/stores/useLayoutContainerStore"; +import { Terminal } from "xterm"; +import { group } from "console"; const props = defineProps<{ card: LayoutCard; @@ -156,7 +159,7 @@ const initTerminal = async () => { const dom = document.getElementById(terminalDomId.value); if (dom) { const term = initTerminalWindow(dom); - term.writeln( + term.write( (await getInstanceOutputLog() .execute({ params: { uuid: instanceId || "", daemonId: daemonId || "" } @@ -188,6 +191,14 @@ events.on("error", (error: Error) => { socketError.value = error; }); +let term: Terminal | null = null; + +const clearTerminal = () => { + if (term) { + term.clear(); + } +}; + onMounted(async () => { try { if (instanceId && daemonId) { @@ -196,7 +207,7 @@ onMounted(async () => { daemonId }); } - initTerminal(); + term = await initTerminal(); } catch (error) { throw new Error(t("TXT_CODE_9885543f")); } @@ -283,7 +294,19 @@ const innerTerminalType = viewType === "inner";
-
+
+
    +
  • + + + + +
  • +
+
+
@@ -391,6 +414,39 @@ const innerTerminalType = viewType === "inner"; .console-wrapper { position: relative; + .terminal-button-group { + z-index: 11; + padding-bottom: 50px; + padding-left: 50px; + border-radius: 6px; + color: #fff; + + &:hover { + ul { + transition: all 1s; + opacity: 0.8; + } + } + + ul { + display: flex; + opacity: 0; + + li { + cursor: pointer; + list-style: none; + padding: 5px; + margin-left: 5px; + border-radius: 6px; + // background-color: #111111; + font-size: 20px; + &:hover { + background-color: #3e3e3e; + } + } + } + } + .terminal-wrapper { position: relative; overflow: hidden;