From db95697c0044a7d00c961d5cfb01b91f6195be79 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Thu, 26 Mar 2026 05:44:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E6=94=AF=E6=8C=81=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=AF=AD=E8=A8=80=E6=98=A0=E5=B0=84=E5=92=8C?=
 =?UTF-8?q?=20HTML=20=E9=A2=84=E8=A7=88=E7=B1=BB=E5=9E=8B=E5=88=A4?=
 =?UTF-8?q?=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/code-highlight.less |   7 ++
 web/src/assets/css/main.css            |   1 +
 web/src/components/AgentPanel.vue      | 139 ++++++++++++++++++++++++-
 web/src/utils/file_preview.js          |  49 +++++++++
 4 files changed, 194 insertions(+), 2 deletions(-)
 create mode 100644 web/src/assets/css/code-highlight.less

diff --git a/web/src/assets/css/code-highlight.less b/web/src/assets/css/code-highlight.less
new file mode 100644
index 00000000..3401bf84
--- /dev/null
+++ b/web/src/assets/css/code-highlight.less
@@ -0,0 +1,7 @@
+.hljs-theme-light {
+  @import (less) '../../../node_modules/highlight.js/styles/github.css';
+}
+
+.hljs-theme-dark {
+  @import (less) '../../../node_modules/highlight.js/styles/github-dark.css';
+}
diff --git a/web/src/assets/css/main.css b/web/src/assets/css/main.css
index e05e3d9c..f76890b7 100644
--- a/web/src/assets/css/main.css
+++ b/web/src/assets/css/main.css
@@ -4,6 +4,7 @@
 @import './shorts.css';
 @import './dashboard.css';
 @import './markdown-preview.less';
+@import './code-highlight.less';
 
 :root {
   --header-height: 45px;
diff --git a/web/src/components/AgentPanel.vue b/web/src/components/AgentPanel.vue
index 214f1771..9ec73f03 100644
--- a/web/src/components/AgentPanel.vue
+++ b/web/src/components/AgentPanel.vue
@@ -123,6 +123,24 @@
             <span class="file-path-title">{{ currentFilePath }}</span>
           </div>
           <div class="modal-actions">
+            <div v-if="isHtmlFile" class="preview-mode-switch">
+              <button
+                class="preview-mode-btn"
+                :class="{ active: htmlPreviewMode === 'render' }"
+                @click="htmlPreviewMode = 'render'"
+                title="预览"
+              >
+                <Globe :size="16" />
+              </button>
+              <button
+                class="preview-mode-btn"
+                :class="{ active: htmlPreviewMode === 'source' }"
+                @click="htmlPreviewMode = 'source'"
+                title="源码"
+              >
+                <Code2 :size="16" />
+              </button>
+            </div>
             <button
               class="modal-action-btn"
               @click="downloadFile(currentFile)"
@@ -146,6 +164,14 @@
         <template v-else-if="currentFile?.previewType === 'pdf' && currentFile?.previewUrl">
           <iframe :src="currentFile.previewUrl" class="pdf-preview" :title="currentFilePath" />
         </template>
+        <template v-else-if="isHtmlFile && htmlPreviewMode === 'render'">
+          <iframe
+            class="html-preview"
+            :srcdoc="formatContent(currentFile?.content)"
+            :title="currentFilePath"
+            sandbox=""
+          />
+        </template>
         <template v-else-if="isMarkdown">
           <MdPreview
             :modelValue="formatContent(currentFile?.content)"
@@ -162,6 +188,10 @@
           <pre v-if="Array.isArray(currentFile?.content)">{{
             formatContent(currentFile.content)
           }}</pre>
+          <pre
+            v-else-if="isCodePreview && typeof currentFile?.content === 'string'"
+            :class="['file-content-pre', 'code-highlight', codeThemeClass]"
+          ><code class="hljs" v-html="highlightedCodeContent"></code></pre>
           <pre v-else-if="typeof currentFile?.content === 'string'" class="file-content-pre">{{
             currentFile.content
           }}</pre>
@@ -174,7 +204,16 @@
 
 <script setup>
 import { computed, ref, onMounted, onUpdated, nextTick, watch } from 'vue'
-import { ChevronsDownUp, ChevronsUpDown, Download, FolderCode, RefreshCw, X } from 'lucide-vue-next'
+import {
+  ChevronsDownUp,
+  ChevronsUpDown,
+  Code2,
+  Download,
+  FolderCode,
+  Globe,
+  RefreshCw,
+  X
+} from 'lucide-vue-next'
 import {
   CheckCircleOutlined,
   SyncOutlined,
@@ -183,10 +222,11 @@ import {
   QuestionCircleOutlined
 } from '@ant-design/icons-vue'
 import { MdPreview } from 'md-editor-v3'
+import hljs from 'highlight.js/lib/common'
 import 'md-editor-v3/lib/preview.css'
 import { useThemeStore } from '@/stores/theme'
 import { getFileIcon, getFileIconColor } from '@/utils/file_utils'
-import { isMarkdownPreview } from '@/utils/file_preview'
+import { getCodeLanguageByPath, isHtmlPreview, isMarkdownPreview } from '@/utils/file_preview'
 import FileTreeComponent from '@/components/FileTreeComponent.vue'
 import {
   downloadViewerFile,
@@ -235,6 +275,7 @@ const activeTab = ref('files')
 const modalVisible = ref(false)
 const currentFile = ref(null)
 const currentFilePath = ref('')
+const htmlPreviewMode = ref('render')
 const loadingFiles = ref(false)
 const filesystemError = ref('')
 
@@ -248,6 +289,46 @@ const theme = computed(() => (themeStore.isDark ? 'dark' : 'light'))
 const isMarkdown = computed(() =>
   isMarkdownPreview(currentFilePath.value, currentFile.value?.previewType)
 )
+const isHtmlFile = computed(
+  () =>
+    currentFile.value?.previewType === 'text' &&
+    typeof currentFile.value?.content === 'string' &&
+    isHtmlPreview(currentFilePath.value)
+)
+const codeThemeClass = computed(() => (themeStore.isDark ? 'hljs-theme-dark' : 'hljs-theme-light'))
+const codeLanguage = computed(() => getCodeLanguageByPath(currentFilePath.value))
+const isCodePreview = computed(
+  () =>
+    currentFile.value?.previewType === 'text' &&
+    typeof currentFile.value?.content === 'string' &&
+    !isHtmlFile.value &&
+    Boolean(codeLanguage.value)
+)
+
+const escapeHtml = (content) =>
+  String(content)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+
+const highlightedCodeContent = computed(() => {
+  const content = currentFile.value?.content
+  if (!isCodePreview.value || typeof content !== 'string') {
+    return ''
+  }
+
+  try {
+    if (codeLanguage.value) {
+      return hljs.highlight(content, { language: codeLanguage.value }).value
+    }
+    return hljs.highlightAuto(content).value
+  } catch (error) {
+    console.warn('代码高亮失败:', error)
+    return escapeHtml(content)
+  }
+})
 
 const todos = computed(() => props.agentState?.todos || [])
 const completedCount = computed(() => todos.value.filter((t) => t.status === 'completed').length)
@@ -472,6 +553,7 @@ const onFileSelect = async (nextSelectedKeys, { node }) => {
 
   revokeCurrentPreviewUrl()
   currentFilePath.value = node.key
+  htmlPreviewMode.value = 'render'
   currentFile.value = {
     ...node.fileData,
     content: 'Loading...',
@@ -528,6 +610,7 @@ const closeModal = () => {
   modalVisible.value = false
   currentFile.value = null
   currentFilePath.value = ''
+  htmlPreviewMode.value = 'render'
 }
 
 const downloadFile = async (fileItem) => {
@@ -952,6 +1035,22 @@ watch([() => props.threadId, () => props.agentId, () => props.agentConfigId], ([
   }
 }
 
+.file-content-pre.code-highlight {
+  border-radius: 8px;
+  background: var(--gray-25);
+  border: 1px solid var(--gray-150);
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.file-content-pre.code-highlight code {
+  padding: 14px 16px;
+  display: block;
+  white-space: pre;
+  color: inherit;
+  min-height: calc(80vh - 40px);
+}
+
 .image-preview-wrapper {
   display: flex;
   justify-content: center;
@@ -974,6 +1073,14 @@ watch([() => props.threadId, () => props.agentId, () => props.agentConfigId], ([
   background: var(--gray-25);
 }
 
+.html-preview {
+  width: 100%;
+  min-height: calc(80vh - 40px);
+  border: 1px solid var(--gray-150);
+  border-radius: 6px;
+  background: #fff;
+}
+
 .unsupported-preview {
   min-height: 260px;
   display: flex;
@@ -1006,6 +1113,34 @@ watch([() => props.threadId, () => props.agentId, () => props.agentConfigId], ([
   gap: 8px;
 }
 
+.preview-mode-switch {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  border-radius: 8px;
+  background: var(--gray-100);
+}
+
+.preview-mode-btn {
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--gray-600);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &.active {
+    background: var(--gray-0);
+    color: var(--gray-900);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  }
+}
+
 .modal-action-btn {
   display: flex;
   align-items: center;
diff --git a/web/src/utils/file_preview.js b/web/src/utils/file_preview.js
index aca4ceb6..1621ab66 100644
--- a/web/src/utils/file_preview.js
+++ b/web/src/utils/file_preview.js
@@ -1,6 +1,50 @@
 const MARKDOWN_EXTENSIONS = new Set(['.md', '.markdown', '.mdx'])
 const IMAGE_EXTENSIONS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp', '.svg'])
 const PDF_EXTENSIONS = new Set(['.pdf'])
+const HTML_EXTENSIONS = new Set(['.html', '.htm'])
+const CODE_LANGUAGE_MAP = {
+  '.py': 'python',
+  '.js': 'javascript',
+  '.mjs': 'javascript',
+  '.cjs': 'javascript',
+  '.ts': 'typescript',
+  '.tsx': 'tsx',
+  '.jsx': 'jsx',
+  '.vue': 'xml',
+  '.html': 'xml',
+  '.htm': 'xml',
+  '.xml': 'xml',
+  '.css': 'css',
+  '.less': 'less',
+  '.scss': 'scss',
+  '.json': 'json',
+  '.yaml': 'yaml',
+  '.yml': 'yaml',
+  '.toml': 'ini',
+  '.ini': 'ini',
+  '.cfg': 'ini',
+  '.conf': 'ini',
+  '.sh': 'bash',
+  '.bash': 'bash',
+  '.zsh': 'bash',
+  '.fish': 'bash',
+  '.sql': 'sql',
+  '.java': 'java',
+  '.kt': 'kotlin',
+  '.go': 'go',
+  '.rs': 'rust',
+  '.php': 'php',
+  '.rb': 'ruby',
+  '.c': 'c',
+  '.h': 'c',
+  '.cpp': 'cpp',
+  '.cc': 'cpp',
+  '.cxx': 'cpp',
+  '.hpp': 'cpp',
+  '.cs': 'csharp',
+  '.swift': 'swift',
+  '.dockerfile': 'dockerfile'
+}
 
 export const getPreviewFileExtension = (path) => {
   const normalizedPath = String(path || '')
@@ -26,3 +70,8 @@ export const getPreviewTypeByPath = (path) => {
   if (MARKDOWN_EXTENSIONS.has(extension)) return 'markdown'
   return 'text'
 }
+
+export const getCodeLanguageByPath = (path) =>
+  CODE_LANGUAGE_MAP[getPreviewFileExtension(path)] || ''
+
+export const isHtmlPreview = (path) => HTML_EXTENSIONS.has(getPreviewFileExtension(path))