fix: 终端远程连接组件添加消息监听和发送句柄

src/components/TerminalSSH/index.vue

@@ -6,7 +6,7 @@ import 'xterm/css/xterm.css';
 import { RESULT_CODE_ERROR } from '@/constants/result-constants';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 const ws = new WS();
-const emit = defineEmits(['connect', 'close']);
+const emit = defineEmits(['connect', 'close', 'message']);
 const props = defineProps({
   /**终端ID，必传 */
   id: {
@@ -28,6 +28,16 @@ const props = defineProps({
     type: Number,
     default: 40,
   },
+  /**禁止输入 */
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  /**初始发送命令 */
+  initCmd: {
+    type: [String, Boolean],
+    default: false,
+  },
 });
 
 /**终端输入DOM节点实例对象 */
@@ -53,6 +63,7 @@ function handleRanderXterm(container: HTMLElement | undefined) {
     scrollback: 1000,
     scrollSensitivity: 15,
     tabStopWidth: 4,
+    disableStdin: props.disable, // 禁止输入
   });
   // 挂载
   xterm.open(container);
@@ -143,6 +154,14 @@ function wsOpen(ev: any) {
       hostId: props.hostId,
       id: props.id,
     });
+    // 初始发送命令
+    if (typeof props.initCmd === 'string') {
+      ws.send({
+        requestId: `ssh_${props.hostId}`,
+        type: 'ssh',
+        data: `${props.initCmd}\n`,
+      });
+    }
   });
 }
 
@@ -177,6 +196,7 @@ function wsClose(code: number) {
 
 /**接收消息后回调 */
 function wsMessage(res: Record<string, any>) {
+  emit('message', res);
   // console.log('wsMessage', res);
   const { code, requestId, data } = res;
   if (code === RESULT_CODE_ERROR) {
@@ -211,6 +231,19 @@ onMounted(() => {
 onBeforeUnmount(() => {
   ws.close();
 });
+
+// 给组件设置属性 ref="xxxTerminal"
+// setup内使用 const xxxTerminal = ref();
+defineExpose({
+  /**发送方法 */
+  send: (data: string) => {
+    ws.send({
+      requestId: `ssh_${props.hostId}`,
+      type: 'ssh',
+      data: `${data}\n`,
+    });
+  },
+});
 </script>
 
 <template>

src/components/TerminalTelnet/index.vue

@@ -7,7 +7,7 @@ import 'xterm/css/xterm.css';
 import { RESULT_CODE_ERROR } from '@/constants/result-constants';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 const ws = new WS();
-const emit = defineEmits(['connect', 'close']);
+const emit = defineEmits(['connect', 'close', 'message']);
 const props = defineProps({
   /**终端ID，必传 */
   id: {
@@ -19,6 +19,11 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  /**禁止输入 */
+  disable: {
+    type: Boolean,
+    default: false,
+  },
   /**初始发送命令 */
   initCmd: {
     type: [String, Boolean],
@@ -133,7 +138,7 @@ function handleRanderXterm(container: HTMLElement | undefined) {
     scrollback: 1000,
     scrollSensitivity: 15,
     tabStopWidth: 4,
-    disableStdin: true, // 禁止输入
+    disableStdin: props.disable, // 禁止输入
   });
   // 挂载
   xterm.open(container);
@@ -207,6 +212,7 @@ function wsClose(code: number) {
 
 /**接收消息后回调 */
 function wsMessage(res: Record<string, any>) {
+  emit('message', res);
   // console.log('wsMessage', res);
   const { code, requestId, data } = res;
   if (code === RESULT_CODE_ERROR) {
@@ -245,6 +251,19 @@ onMounted(() => {
 onBeforeUnmount(() => {
   ws.close();
 });
+
+// 给组件设置属性 ref="xxxTerminal"
+// setup内使用 const xxxTerminal = ref();
+defineExpose({
+  /**发送方法 */
+  send: (data: string) => {
+    ws.send({
+      requestId: `telnet_${props.hostId}`,
+      type: 'telnet',
+      data: `${data}\r\n`,
+    });
+  },
+});
 </script>
 
 <template>

src/views/tool/terminal/index.vue

@@ -266,6 +266,7 @@ function fnTabClose(id: string) {
               :id="pane.id"
               :hostId="pane.host.hostId"
               init-cmd="help"
+              :disable="true"
               @connect="fnTerminalConnect"
               @close="fnTerminalClose"
             >