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')

const chinesePattern = {
  className: 'chinese',
  begin: /[\u4e00-\u9fa5]+/
}

hljs.registerLanguage('naive-log', () => ({
  contains: [
    {
      className: 'info',
      begin: /^\[信息\]/,
      end: /$/,
      returnBegin: true,
      returnEnd: true,
      contains: [chinesePattern]
    },
    {
      className: 'error',
      begin: /^\[错误\]/,
      end: /$/,
      returnBegin: true,
      returnEnd: true,
      contains: [chinesePattern]
    },
    {
      className: 'execute_command',
      begin: /^\[执行命令\]/,
      end: /$/,
      returnBegin: true,
      returnEnd: true,
      contains: [chinesePattern]
    },
    {
      className: 'command_out',
      begin: /^\[命令输出\]/,
      end: /$/,
      returnBegin: true,
      returnEnd: true,
      contains: [chinesePattern]
    }
  ]
}))
</script>

<template>
  <n-config-provider :theme="darkTheme" class="provider" :hljs="hljs">
    <n-card class="full" content-style="height: 100%">
      <n-log :lines="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>