From a84f402a2b36a7b813e7b4e898ab17290d34e544 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sat, 31 May 2025 02:50:36 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20correct=20JSON=20syntax?=
 =?UTF-8?q?=20highlighting=20for=20API=20responses=20in=20debug=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change response content language from 'javascript' to 'json' for proper highlighting
- Improve automatic JSON detection to handle both objects and arrays
- Add intelligent content type detection based on string patterns
- Include development environment debug logging for troubleshooting
- Ensure all API responses display with correct JSON syntax coloring

This fix resolves the issue where API response data was not properly
syntax highlighted, ensuring consistent JSON formatting across all
debug panel tabs (preview, request, and response).
---
 web/src/components/playground/CodeViewer.js | 25 ++++++++++++++++++++-
 web/src/components/playground/DebugPanel.js |  2 +-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/web/src/components/playground/CodeViewer.js b/web/src/components/playground/CodeViewer.js
index a4d21e8e..2a8fc405 100644
--- a/web/src/components/playground/CodeViewer.js
+++ b/web/src/components/playground/CodeViewer.js
@@ -134,7 +134,30 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
   const getHighlightedContent = () => {
     const formattedContent = getFormattedContent();
 
-    if (language === 'json') {
+    // 尝试检测是否为 JSON 格式
+    const isJsonLike = () => {
+      if (language === 'json') return true;
+
+      // 自动检测：如果内容看起来像 JSON，就用 JSON 高亮
+      const trimmed = formattedContent.trim();
+      const looksLikeJson = (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+        (trimmed.startsWith('[') && trimmed.endsWith(']'));
+
+      // 调试日志
+      if (process.env.NODE_ENV === 'development') {
+        console.log('CodeViewer Debug:', {
+          language,
+          contentType: typeof content,
+          trimmedStart: trimmed.substring(0, 10),
+          looksLikeJson,
+          willHighlight: looksLikeJson
+        });
+      }
+
+      return looksLikeJson;
+    };
+
+    if (isJsonLike()) {
       return highlightJson(formattedContent);
     }
 
diff --git a/web/src/components/playground/DebugPanel.js b/web/src/components/playground/DebugPanel.js
index 8f5a8cef..e9ef5299 100644
--- a/web/src/components/playground/DebugPanel.js
+++ b/web/src/components/playground/DebugPanel.js
@@ -159,7 +159,7 @@ const DebugPanel = ({
             <CodeViewer
               content={debugData.response}
               title="response"
-              language="javascript"
+              language="json"
             />
           </TabPane>
         </Tabs>