launcher/ui/src/components/LogComponent.vue

<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" :hljs="hljs">
    <n-card class="full" content-style="height: 100%">
      <n-log :log="log" class="full selectable-log" ref="log_ele" language="naive-log" />
    </n-card>
  </n-config-provider>
</template>

<style scoped>
.provider {
  flex-grow: 1;
  overflow: hidden;
}

.full {
  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>