feat: add logs ansi render

web/src/views/history/History.vue

@@ -56,10 +56,16 @@ const isWsLoading = ref(false)
 let logSocket: WebSocket | null = null
 
 
+import { ansiToHtml } from '@/utils/ansi'
+
 const decompressedOutput = computed(() => {
   return wsContent.value || '无输出'
 })
 
+const renderedOutput = computed(() => {
+  return ansiToHtml(decompressedOutput.value)
+})
+
 async function loadLogs() {
   try {
     const params: { page: number; page_size: number; task_id?: string; task_name?: string; status?: string } = {
@@ -566,7 +572,7 @@ watch(() => route.query, (newQuery) => {
           </div>
           <div class="flex-1 overflow-auto bg-muted/5 min-h-[160px]">
             <pre
-              class="p-4 text-xs font-mono whitespace-pre-wrap break-all log-pre leading-relaxed">{{ decompressedOutput }}</pre>
+              class="p-4 text-xs font-mono whitespace-pre-wrap break-all log-pre leading-relaxed" v-html="renderedOutput"></pre>
             <div v-if="isWsLoading" class="p-4 text-sm text-muted-foreground italic">连接中...</div>
           </div>
         </div>

web/src/views/history/LogViewer.vue

@@ -17,14 +17,12 @@ const emit = defineEmits<{
 
 const searchKeyword = ref('')
 
-// 高亮搜索结果
-const highlightedContent = computed(() => {
-  if (!searchKeyword.value.trim()) return props.content
+import { ansiToHtml, highlightHtml } from '@/utils/ansi'
 
-  const keyword = searchKeyword.value.trim()
-  const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-  const regex = new RegExp(`(${escaped})`, 'gi')
-  return props.content.replace(regex, '<mark class="bg-yellow-300 text-black">$1</mark>')
+// 高亮搜索结果并处理 ANSI 颜色
+const highlightedContent = computed(() => {
+  const html = ansiToHtml(props.content)
+  return highlightHtml(html, searchKeyword.value)
 })
 
 function close() {