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

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>