新增功能：界面输出分类并使用不同颜色显示

ui/package-lock.json

@@ -8,6 +8,7 @@
       "name": "ui",
       "version": "0.0.0",
       "dependencies": {
+        "highlight.js": "^11.11.1",
         "pinia": "^2.2.8",
         "vue": "^3.5.11"
       },
@@ -2075,11 +2076,9 @@
       }
     },
     "node_modules/highlight.js": {
-      "version": "11.10.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
-      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
-      "dev": true,
-      "license": "BSD-3-Clause",
+      "version": "11.11.1",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
       "engines": {
         "node": ">=12.0.0"
       }

ui/package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "highlight.js": "^11.11.1",
     "pinia": "^2.2.8",
     "vue": "^3.5.11"
   },

ui/src/components/LogComponent.vue

@@ -1,14 +1,40 @@
 <script setup>
 import { darkTheme } from 'naive-ui'
+import hljs from 'highlight.js/lib/core'
 
 const log = inject('log')
 const log_ele = inject('log_ele')
+
+hljs.registerLanguage('naive-log', () => ({
+  contains: [
+    {
+      className: 'info',
+      begin: /\[信息\]/,
+      end: /$/
+    },
+    {
+      className: 'error',
+      begin: /\[错误\]/,
+      end: /$/
+    },
+    {
+      className: 'execute_command',
+      begin: /\[执行命令\]/,
+      end: /$/
+    },
+    {
+      className: 'command_out',
+      begin: /\[命令输出\]/,
+      end: /$/
+    }
+  ]
+}))
 </script>
 
 <template>
-  <n-config-provider :theme="darkTheme" class="provider">
+  <n-config-provider :theme="darkTheme" class="provider" :hljs="hljs">
     <n-card class="full" content-style="height: 100%">
-      <n-log :log="log" class="full" ref="log_ele" />
+      <n-log :log="log" class="full selectable-log" ref="log_ele" language="naive-log" />
     </n-card>
   </n-config-provider>
 </template>
@@ -23,10 +49,27 @@ const log_ele = inject('log_ele')
   height: 100% !important;
   box-sizing: border-box;
 }
+
+.selectable-log {
+  user-select: text;
+}
 </style>
 
 <style>
 pre {
   word-break: break-all !important;
 }
+
+.n-code pre .hljs-info {
+  color: #33ff33;
+}
+.n-code pre .hljs-error {
+  color: #ff0000;
+}
+.n-code pre .hljs-execute_command {
+  color: #edaf1f;
+}
+.n-code pre .hljs-command_out {
+  color: #ffffff;
+}
 </style>