From ac84a0ca0aa94df73c623df8f674b6a087b163f4 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sun, 7 Apr 2024 19:52:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=88=E7=AB=AF?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E6=98=BE=E7=A4=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TerminalText/index.vue | 97 +++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 src/components/TerminalText/index.vue

diff --git a/src/components/TerminalText/index.vue b/src/components/TerminalText/index.vue
new file mode 100644
index 00000000..0497c507
--- /dev/null
+++ b/src/components/TerminalText/index.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { FitAddon } from 'xterm-addon-fit';
+import { Terminal } from 'xterm';
+import 'xterm/css/xterm.css';
+const emit = defineEmits(['update:value']);
+const props = defineProps({
+  /**终端ID，必传 */
+  id: {
+    type: String,
+    required: true,
+  },
+  /**窗口单行字符数 */
+  cols: {
+    type: Number,
+    default: 80,
+  },
+  /**窗口行数 */
+  rows: {
+    type: Number,
+    default: 40,
+  },
+  /**信息 */
+  value: {
+    type: String,
+    default: '',
+  },
+});
+
+/**终端输入DOM节点实例对象 */
+const terminalDom = ref<HTMLElement | undefined>(undefined);
+
+/**终端输入实例对象 */
+const terminal = ref<any>(null);
+
+/**终端输入渲染 */
+function handleRanderXterm(container: HTMLElement | undefined) {
+  if (!container) return;
+  const xterm = new Terminal({
+    cols: props.cols,
+    rows: props.rows,
+    lineHeight: 1.2,
+    fontSize: 12,
+    fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
+    theme: {
+      background: '#000000',
+    },
+    cursorBlink: false, // 光标闪烁
+    cursorStyle: 'block',
+    scrollback: 1000,
+    scrollSensitivity: 15,
+    tabStopWidth: 4,
+    disableStdin: true, // 禁止输入
+  });
+  // 挂载
+  xterm.open(container);
+  // 自适应尺寸
+  const fitAddon = new FitAddon();
+  xterm.loadAddon(fitAddon);
+
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    fitAddon.fit();
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
+  terminal.value = xterm;
+}
+
+onMounted(() => {
+  nextTick(() => {
+    handleRanderXterm(terminalDom.value);
+    // 初始发送命令
+    if (typeof props.value === 'string') {
+      terminal.value.write(props.value);
+    }
+  });
+});
+
+onBeforeUnmount(() => {
+  if (terminal.value != null) {
+    terminal.value.dispose();
+  }
+});
+</script>
+
+<template>
+  <div ref="terminalDom" :id="id" class="terminal"></div>
+</template>
+
+<style lang="css" scoped>
+.terminal {
+  width: 100%;
+  height: 100%;
+}
+</style>