Feat: terminal window

frontend/package-lock.json

@@ -24,7 +24,9 @@
         "uuid": "^9.0.0",
         "vue": "^3.3.4",
         "vue-i18n": "^9.3.0-beta.25",
-        "vue-router": "^4.2.4"
+        "vue-router": "^4.2.4",
+        "xterm": "^4.12.0",
+        "xterm-addon-fit": "^0.5.0"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.2",
@@ -9027,6 +9029,27 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/xterm": {
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.19.0.tgz",
+      "integrity": "sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ=="
+    },
+    "node_modules/xterm-addon-fit": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz",
+      "integrity": "sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==",
+      "peerDependencies": {
+        "xterm": "^4.0.0"
+      }
+    },
+    "node_modules/xterm-addon-web-links": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-web-links/-/xterm-addon-web-links-0.4.0.tgz",
+      "integrity": "sha512-xv8GeiINmx0zENO9hf5k+5bnkaE8mRzF+OBAr9WeFq2eLaQSudioQSiT34M1ofKbzcdjSsKiZm19Rw3i4eXamg==",
+      "peerDependencies": {
+        "xterm": "^4.0.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -15377,6 +15400,23 @@
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
+    "xterm": {
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.19.0.tgz",
+      "integrity": "sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ=="
+    },
+    "xterm-addon-fit": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz",
+      "integrity": "sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==",
+      "requires": {}
+    },
+    "xterm-addon-web-links": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-web-links/-/xterm-addon-web-links-0.4.0.tgz",
+      "integrity": "sha512-xv8GeiINmx0zENO9hf5k+5bnkaE8mRzF+OBAr9WeFq2eLaQSudioQSiT34M1ofKbzcdjSsKiZm19Rw3i4eXamg==",
+      "requires": {}
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

frontend/package.json

@@ -26,11 +26,13 @@
     "marked": "^7.0.3",
     "pinia": "^2.1.4",
     "sanitize-html": "^2.11.0",
+    "socket.io-client": "^4.7.2",
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.3.0-beta.25",
     "vue-router": "^4.2.4",
-    "socket.io-client": "^4.7.2"
+    "xterm": "^4.12.0",
+    "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",

frontend/src/assets/xterm.scss

@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+.xterm {
+  position: relative;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+  outline: none;
+}
+
+.xterm .xterm-helpers {
+  position: absolute;
+  top: 0;
+  /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+  z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+  position: absolute;
+  opacity: 0;
+  left: -9999em;
+  top: 0;
+  width: 0;
+  height: 0;
+  z-index: -5;
+  /** Prevent wrapping so the IME appears against the textarea at the correct position */
+  white-space: nowrap;
+  overflow: hidden;
+  resize: none;
+}
+
+.xterm .composition-view {
+  /* TODO: Composition position got messed up somewhere */
+  background: #000;
+  color: #fff;
+  display: none;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.xterm .composition-view.active {
+  display: block;
+}
+
+.xterm .xterm-viewport {
+  /* On OS X this is required in order for the scroll bar to appear fully opaque */
+  background-color: #000;
+  overflow-y: scroll;
+  cursor: default;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.xterm .xterm-screen {
+  position: relative;
+}
+
+.xterm .xterm-screen canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.xterm .xterm-scroll-area {
+  visibility: hidden;
+}
+
+.xterm-char-measure-element {
+  display: inline-block;
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: -9999em;
+  line-height: normal;
+}
+
+.xterm {
+  cursor: text;
+}
+
+.xterm.enable-mouse-events {
+  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+  cursor: default;
+}
+
+.xterm.xterm-cursor-pointer {
+  cursor: pointer;
+}
+
+.xterm.column-select.focus {
+  /* Column selection mode */
+  cursor: crosshair;
+}
+
+.xterm .xterm-accessibility,
+.xterm .xterm-message {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  color: transparent;
+}
+
+.xterm .live-region {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.xterm-dim {
+  opacity: 0.5;
+}
+
+.xterm-underline {
+  text-decoration: underline;
+}

frontend/src/hooks/useTerminal.ts

@@ -1,23 +1,59 @@
 import { setUpTerminalStreamChannel } from "@/services/apis/instance";
 import { parseForwardAddress } from "@/tools/protocol";
-import { onUnmounted, ref, unref } from "vue";
+import { onMounted, onUnmounted, ref, unref } from "vue";
 import { io } from "socket.io-client";
 import type { Socket } from "socket.io-client";
 import { t } from "@/lang/i18n";
 import EventEmitter from "eventemitter3";
 import type { DefaultEventsMap } from "@socket.io/component-emitter";
 import type { InstanceDetail } from "@/types";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import { useScreen } from "./useScreen";
 
+export const TERM_COLOR = {
+  TERM_RESET: "\x1B[0m",
+  TERM_TEXT_BLACK: "\x1B[0;30m", // Black §0
+  TERM_TEXT_DARK_BLUE: "\x1B[0;34m", // Dark Blue §1
+  TERM_TEXT_DARK_GREEN: "\x1B[0;32m", // Dark Green §2
+  TERM_TEXT_DARK_AQUA: "\x1B[0;36m", // Dark Aqua §3
+  TERM_TEXT_DARK_RED: "\x1B[0;31m", // Dark Red §4
+  TERM_TEXT_DARK_PURPLE: "\x1B[0;35m", // Dark Purple §5
+  TERM_TEXT_GOLD: "\x1B[0;33m", // Gold §6
+  TERM_TEXT_GRAY: "\x1B[0;37m", // Gray §7
+  TERM_TEXT_DARK_GRAY: "\x1B[0;30;1m", // Dark Gray §8
+  TERM_TEXT_BLUE: "\x1B[0;34;1m", // Blue §9
+  TERM_TEXT_GREEN: "\x1B[0;32;1m", // Green §a
+  TERM_TEXT_AQUA: "\x1B[0;36;1m", // Aqua §b
+  TERM_TEXT_RED: "\x1B[0;31;1m", // Red §c
+  TERM_TEXT_LIGHT_PURPLE: "\x1B[0;35;1m", // Light Purple §d
+  TERM_TEXT_YELLOW: "\x1B[0;33;1m", // Yellow §e
+  TERM_TEXT_WHITE: "\x1B[0;37;1m", // White §f
+  TERM_TEXT_OBFUSCATED: "\x1B[5m", // Obfuscated §k
+  TERM_TEXT_BOLD: "\x1B[21m", // Bold §l
+  TERM_TEXT_STRIKETHROUGH: "\x1B[9m", // Strikethrough §m
+  TERM_TEXT_UNDERLINE: "\x1B[4m", // Underline §n
+  TERM_TEXT_ITALIC: "\x1B[3m", // Italic §o
+  TERM_TEXT_B: "\x1B[1m"
+};
 export interface UseTerminalParams {
   instanceId: string;
   daemonId: string;
 }
 
+export interface StdoutData {
+  instanceUuid: string;
+  text: string;
+}
+
 export function useTerminal() {
   const events = new EventEmitter();
   let socket: Socket<DefaultEventsMap, DefaultEventsMap>;
   const state = ref<InstanceDetail>();
   const isReady = ref<boolean>(false);
+  const terminal = ref<Terminal>();
+  const { isPhone } = useScreen();
+  const termFitAddon = ref<FitAddon>();
 
   const execute = async (config: UseTerminalParams) => {
     isReady.value = false;
@@ -74,14 +110,64 @@ export function useTerminal() {
     return socket;
   };
 
+  const initTerminalWindow = (element: HTMLElement) => {
+    const term = new Terminal({
+      convertEol: true,
+      disableStdin: false,
+      cursorStyle: "underline",
+      cursorBlink: true,
+      fontSize: isPhone.value ? 10 : 13,
+      theme: {
+        background: "#1e1e1e"
+      },
+      allowProposedApi: true,
+      rendererType: "canvas"
+    });
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(element);
+    fitAddon.fit();
+    termFitAddon.value = fitAddon;
+
+    term.onData((data) => {
+      console.debug("Termin OnData:", data);
+      socket.emit("stream/stdin", { data });
+    });
+    term.writeln(
+      `${TERM_COLOR.TERM_TEXT_GREEN}[MCSManager] ${TERM_COLOR.TERM_TEXT_GRAY}Instance app terminal.${TERM_COLOR.TERM_RESET}`
+    );
+    term.writeln(
+      `${TERM_COLOR.TERM_TEXT_GREEN}[MCSManager] ${TERM_COLOR.TERM_TEXT_GRAY}Terminal is ready.${TERM_COLOR.TERM_RESET}\r\n`
+    );
+
+    terminal.value = term;
+    return term;
+  };
+
+  events.on("stdout", (v: StdoutData) => {
+    // console.debug("stdout:", v.text);
+    terminal.value?.write(v.text);
+  });
+
+  const handleTerminalSizeChange = () => {
+    termFitAddon.value?.fit();
+  };
+
+  onMounted(() => {
+    window.addEventListener("resize", handleTerminalSizeChange);
+  });
+
   onUnmounted(() => {
     events.removeAllListeners();
+    window.removeEventListener("resize", handleTerminalSizeChange);
     socket.close();
   });
 
   return {
     execute,
     events,
-    state
+    state,
+    terminal,
+    initTerminalWindow
   };
 }

frontend/src/widgets/instance/Terminal.vue

@@ -6,9 +6,10 @@ import { DownOutlined, PlaySquareOutlined } from "@ant-design/icons-vue";
 import { arrayFilter } from "../../tools/array";
 import { useRoute } from "vue-router";
 import { useTerminal } from "../../hooks/useTerminal";
-import { onMounted } from "vue";
+import { onMounted, computed } from "vue";
 import type { InstanceDetail } from "../../types/index";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
+import { getRandomId } from "../../tools/randId";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -18,6 +19,7 @@ const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 
 const instanceId = getMetaOrRouteValue<string>("instanceId");
 const daemonId = getMetaOrRouteValue<string>("daemonId");
+const terminalDomId = computed(() => `terminal-window-${getRandomId()}`);
 
 const quickOperations = arrayFilter([
   // {
@@ -57,11 +59,14 @@ const instanceOperations = arrayFilter([
   }
 ]);
 
-const { execute, events, state } = useTerminal();
+const { execute, initTerminalWindow } = useTerminal();
 
-events.on("stdout", (v: InstanceDetail) => {
+const initTerminal = () => {
-  console.debug("stdout:", v);
+  const dom = document.getElementById(terminalDomId.value);
-});
+  if (dom) {
+    initTerminalWindow(dom);
+  }
+};
 
 onMounted(async () => {
   if (instanceId && daemonId) {
@@ -70,6 +75,8 @@ onMounted(async () => {
       daemonId
     });
   }
+
+  initTerminal();
 });
 </script>
 
@@ -102,16 +109,37 @@ onMounted(async () => {
       </a-dropdown>
     </template>
     <template #body>
-      <p>控制台区域（TODO）</p>
+      <div class="terminal-wrapper">
+        <div class="terminal-container">
+          <div :id="terminalDomId"></div>
+        </div>
+      </div>
+      <!-- <p>控制台区域（TODO）</p>
 
       <p>实例ID: {{ instanceId }}</p>
       <p>守护进程ID: {{ daemonId }}</p>
 
       <p>
         {{ state }}
-      </p>
+      </p> -->
     </template>
   </CardPanel>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+@import "../../assets/xterm.scss";
+
+.terminal-wrapper {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  background-color: #1e1e1e;
+  padding: 4px;
+  border-radius: 4px;
+  overflow-x: auto !important;
+  overflow-y: hidden;
+  .terminal-container {
+    min-width: 680px;
+  }
+}
+</style>