🐛 fix: correct JSON syntax highlighting for API responses in debug panel

- 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

@@ -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);
     }
 

web/src/components/playground/DebugPanel.js

@@ -159,7 +159,7 @@ const DebugPanel = ({
             <CodeViewer
               content={debugData.response}
               title="response"
-              language="javascript"
+              language="json"
             />
           </TabPane>
         </Tabs>