From efed15091039d688c7b1d4b88ab495c62edb1b81 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>