Feat: terminal button group & clear terminal log

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;
 }

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";
     </div>
     <a-spin :spinning="!isConnect" :tip="t('TXT_CODE_686c9ca9')">
       <div v-if="!containerState.isDesignMode" class="console-wrapper">
-        <div class="terminal-wrapper global-card-container-shadow">
+        <div class="terminal-button-group position-absolute-right position-absolute-top">
+          <ul>
+            <li>
+              <a-tooltip placement="top" @click="clearTerminal()">
+                <template #title>
+                  <span>{{ t("清空终端输出内容") }}</span>
+                </template>
+                <delete-outlined />
+              </a-tooltip>
+            </li>
+          </ul>
+        </div>
+        <div class="terminal-wrapper global-card-container-shadow position-relative">
           <div class="terminal-container">
             <div :id="terminalDomId"></div>
           </div>
@@ -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;