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

Author: tzfun

src/Terminal.js

@@ -940,7 +940,7 @@ export default {
             this._closeTips(true)
         },
         _filterMessageType(message) {
-            let valid = message.type && /^(normal|html|code|table|json)$/.test(message.type)
+            let 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 = MESSAGE_TYPE.NORMAL
@@ -995,18 +995,6 @@ export default {
                 return;
             }
 
-            if (typeof message === 'string') {
-                message = {
-                    type: MESSAGE_TYPE.NORMAL,
-                    content: message
-                }
-            }
-
-            if (message.type === MESSAGE_TYPE.ANSI) {
-                message.type = MESSAGE_TYPE.HTML
-                message.content = _parseANSI(message.content)
-            }
-
             this._pushMessage0(message)
             this._jumpToBottom()
 
@@ -1017,10 +1005,22 @@ export default {
             }
         },
         _pushMessage0(message, checkSize = true) {
-            this._filterMessageType(message)
-            if (message.type !== MESSAGE_TYPE.CMD_LINE && this.pushMessageBefore) {
-                this.pushMessageBefore(message, this.getName())
+            if (typeof message === 'string') {
+                message = {
+                    type: MESSAGE_TYPE.NORMAL,
+                    content: message
+                }
+            } else {
+                this._filterMessageType(message)
+                if (message.type === MESSAGE_TYPE.ANSI) {
+                    message.type = MESSAGE_TYPE.HTML
+                    message.content = _parseANSI(message.content)
+                }
+                if (message.type !== MESSAGE_TYPE.CMD_LINE && this.pushMessageBefore) {
+                    this.pushMessageBefore(message, this.getName())
+                }
             }
+
             let terminalLogLength = this.terminalLog.length;
             if (terminalLogLength === 0) {
                 this._newTerminalLogGroup()

src/css/ansi.css

@@ -18,7 +18,7 @@
     text-decoration: underline;
 }
 
-@-webkit-keyframes t-blink {
+@keyframes t-blink {
     0% {
         opacity: 1;
     }

test/App.vue

@@ -83,16 +83,24 @@ export default {
         }
       ],
       commandStore: commandStore,
-      initLog: [{
-        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>"
-      }]
+      initLog: [
+        {
+          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>"
+        }
+      ]
     }
   },
   methods: {