[vue3] fix pushMessage接口传入数组时无法解析ansi格式 #112

Author: tzfun

src/Terminal.vue

@@ -1097,7 +1097,7 @@ const _endExecCallBack = () => {
 }
 
 const _filterMessageType = (message: Message) => {
-  const valid = message.type && /^(normal|html|code|table|json)$/.test(message.type)
+  const valid = message.type && /^(normal|html|code|table|json|ansi)$/.test(message.type)
   if (!valid) {
     console.debug(`Invalid terminal message type: ${message.type}, the default type normal will be used`)
     message.type = 'normal'
@@ -1134,18 +1134,6 @@ const _pushMessage = (message: Message | Array<Message> | string) => {
     return;
   }
 
-  if (typeof message === 'string') {
-    message = {
-      type: 'normal',
-      content: message as string
-    }
-  }
-
-  if (message.type === 'ansi') {
-    message.type = 'html'
-    message.content = _parseANSI(message.content as string)
-  }
-
   _pushMessage0(message)
   _jumpToBottom()
 
@@ -1156,10 +1144,22 @@ const _pushMessage = (message: Message | Array<Message> | string) => {
   }
 }
 
-const _pushMessage0 = (message: Message, checkSize: boolean = false) => {
-  _filterMessageType(message)
-  if (message.type !== 'cmdLine' && props.pushMessageBefore) {
-    props.pushMessageBefore(message, getName())
+const _pushMessage0 = (message: Message | string, checkSize: boolean = false) => {
+  if (typeof message === 'string') {
+    message = {
+      type: 'normal',
+      content: message as string
+    }
+  } else {
+    _filterMessageType(message)
+    if (message.type === 'ansi') {
+      message.type = 'html'
+      message.content = _parseANSI(message.content as string)
+    }
+
+    if (message.type !== 'cmdLine' && props.pushMessageBefore) {
+      props.pushMessageBefore(message, getName())
+    }
   }
 
   let terminalLogLength = terminalLog.value.length

src/index.ts

@@ -4,8 +4,7 @@ import './css/style.css'
 import 'vue-json-viewer/style.css'
 import type {App} from 'vue'
 import TerminalStore from "./common/store"
-import TerminalApi, {setOptions} from "./common/api"
-import {configHighlight, configCodemirror, configTheme} from "./common/api"
+import TerminalApi, {configCodemirror, configHighlight, configTheme, setOptions} from "./common/api"
 import Terminal from "./Terminal.vue"
 import {Options, TerminalAsk, TerminalFlash} from "./types"
 

test/App.vue

@@ -8,6 +8,7 @@
 import {Terminal, TerminalApi, TerminalAsk, TerminalElementInfo} from '~/index'
 import {Command, FailedFunc, Message, SuccessFunc} from "~/types";
 import {reactive, ref} from "vue";
+
 const commandStore: Array<Command> = [
   {
     key: "COMMAND CONFIG"
@@ -28,16 +29,24 @@ const commandStore: Array<Command> = [
     key: "Test CONFIG",
   }
 ]
-const initLog = reactive([{
-  type: 'normal',
-  content: "Terminal Initializing ..."
-}, {
-  type: 'normal',
-  content: "Current login time: " + new Date().toLocaleString()
-}, {
-  type: 'normal',
-  content: "Welcome to vue web terminal! If you are using for the first time, you can use the <span class='t-cmd-key'>help</span> command to learn. Thanks for your star support: <a class='t-a' target='_blank' href='https://github.com/tzfun/vue-web-terminal'>https://github.com/tzfun/vue-web-terminal</a>"
-}])
+const initLog = reactive([
+  {
+    type: 'normal',
+    content: "Terminal Initializing ..."
+  },
+  {
+    type: 'normal',
+    content: "Current login time: " + new Date().toLocaleString()
+  },
+  {
+    type: 'ansi',
+    content: '\x1B[1;34mThis are some blue text.\x1B[0m\n\x1B[30;43mThis is a line of text with a background color.\x1B[0m\n\x1B[92;5mThis is blink text.\x1B[0m'
+  },
+  {
+    type: 'normal',
+    content: "Welcome to vue web terminal! If you are using for the first time, you can use the <span class='t-cmd-key'>help</span> command to learn. Thanks for your star support: <a class='t-a' target='_blank' href='https://github.com/tzfun/vue-web-terminal'>https://github.com/tzfun/vue-web-terminal</a>"
+  }
+])
 const testInputValue = ref("")
 
 const terminals = ref<Array<any>>([