From 308cafe91105466cd90a77946b18c81bb10b9b76 Mon Sep 17 00:00:00 2001
From: zhangzherui <jerry_@whut.edu.cn>
Date: Fri, 24 Jul 2026 15:40:40 +0800
Subject: [PATCH] fix(report): render ECharts fence aliases in HTML

---
 .../app/utils/report-html-template.test.ts    | 27 +++++++++++++++++++
 .../app/utils/report-html-template.ts         |  5 ++--
 .../ai/dataagent/util/ReportTemplateUtil.java |  5 ++--
 .../util/ReportTemplateUtilTest.java          |  9 +++++++
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 data-agent-frontend-nuxt/app/utils/report-html-template.test.ts

diff --git a/data-agent-frontend-nuxt/app/utils/report-html-template.test.ts b/data-agent-frontend-nuxt/app/utils/report-html-template.test.ts
new file mode 100644
index 000000000..1c3af0d85
--- /dev/null
+++ b/data-agent-frontend-nuxt/app/utils/report-html-template.test.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { buildReportHtml } from './report-html-template';
+
+describe('buildReportHtml', () => {
+	it('recognizes common ECharts fence language aliases', () => {
+		const html = buildReportHtml('```javascript\n{"series":[]}\n```');
+
+		expect(html).toContain("'echarts', 'json', 'javascript', 'js'");
+		expect(html).toContain('toLowerCase()');
+	});
+});
diff --git a/data-agent-frontend-nuxt/app/utils/report-html-template.ts b/data-agent-frontend-nuxt/app/utils/report-html-template.ts
index c3eeb4a3f..af9dbf1a7 100644
--- a/data-agent-frontend-nuxt/app/utils/report-html-template.ts
+++ b/data-agent-frontend-nuxt/app/utils/report-html-template.ts
@@ -73,11 +73,12 @@ window.onload = function() {
   var rawText = rawDiv.innerText;
   var renderer = new marked.Renderer();
   renderer.code = function(code, language) {
-    if (language === 'echarts' || language === 'json') {
+    var normalizedLanguage = (language || '').trim().toLowerCase();
+    if (['echarts', 'json', 'javascript', 'js'].includes(normalizedLanguage)) {
       var id = 'chart_' + Math.random().toString(36).substr(2, 9);
       return '<div id="' + id + '" class="chart-box" data-option="' + encodeURIComponent(code) + '"></div>';
     }
-    return '<pre><code class="language-' + language + '">' + code.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</code></pre>';
+    return '<pre><code class="language-' + normalizedLanguage + '">' + code.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</code></pre>';
   };
   document.getElementById('render-target').innerHTML = marked.parse(rawText, { renderer: renderer });
   if (typeof echarts !== 'undefined') {
diff --git a/data-agent-management/src/main/java/com/alibaba/cloud/ai/dataagent/util/ReportTemplateUtil.java b/data-agent-management/src/main/java/com/alibaba/cloud/ai/dataagent/util/ReportTemplateUtil.java
index a921f35bf..73ad5481d 100644
--- a/data-agent-management/src/main/java/com/alibaba/cloud/ai/dataagent/util/ReportTemplateUtil.java
+++ b/data-agent-management/src/main/java/com/alibaba/cloud/ai/dataagent/util/ReportTemplateUtil.java
@@ -185,12 +185,13 @@ public ReportTemplateUtil(DataAgentProperties dataAgentProperties) {
 			      const renderer = new marked.Renderer();
 
 			      renderer.code = function(code, language) {
-			          if (language === 'echarts' || language === 'json') {
+			          const normalizedLanguage = (language || '').trim().toLowerCase();
+			          if (['echarts', 'json', 'javascript', 'js'].includes(normalizedLanguage)) {
 			              const id = 'chart_' + Math.random().toString(36).substr(2, 9);
 			              // 使用 encodeURIComponent 保存原始代码串
 			              return '<div id="' + id + '" class="chart-box" data-option="' + encodeURIComponent(code) + '"></div>';
 			          }
-			          return '<pre><code class="language-' + language + '">' + code + '</code></pre>';
+			          return '<pre><code class="language-' + normalizedLanguage + '">' + code + '</code></pre>';
 			      };
 
 			      document.getElementById('render-target').innerHTML = marked.parse(rawText, { renderer: renderer });
diff --git a/data-agent-management/src/test/java/com/alibaba/cloud/ai/dataagent/util/ReportTemplateUtilTest.java b/data-agent-management/src/test/java/com/alibaba/cloud/ai/dataagent/util/ReportTemplateUtilTest.java
index 6f447e1bf..6bfc6dd96 100644
--- a/data-agent-management/src/test/java/com/alibaba/cloud/ai/dataagent/util/ReportTemplateUtilTest.java
+++ b/data-agent-management/src/test/java/com/alibaba/cloud/ai/dataagent/util/ReportTemplateUtilTest.java
@@ -68,6 +68,15 @@ void testGetFooter_containsScript() {
 		assertTrue(footer.contains("echarts"));
 	}
 
+	@Test
+	void testGetFooter_recognizesCommonEchartsFenceLanguages() {
+		ReportTemplateUtil footerUtil = new ReportTemplateUtil(dataAgentProperties);
+		String footer = footerUtil.getFooter();
+		assertTrue(footer.contains("'javascript'"));
+		assertTrue(footer.contains("'js'"));
+		assertTrue(footer.contains("toLowerCase()"));
+	}
+
 	@Test
 	void testCleanJsonExample_notNull() {
 		assertNotNull(ReportTemplateUtil.cleanJsonExample);