✨ feat: enhance debug panel with VS Code dark theme and syntax highlighting

- Create new CodeViewer component with VS Code dark theme styling
- Implement custom JSON syntax highlighting with proper color coding
- Add improved copy functionality with hover effects and user feedback
- Refactor DebugPanel to use the new CodeViewer component
- Apply dark background (#1e1e1e) with syntax colors matching VS Code
- Enhance UX with floating copy button and responsive design
- Support automatic JSON formatting and parsing
- Maintain compatibility with existing Semi Design components

The debug panel now displays preview requests, actual requests, and
responses in a professional code editor style, improving readability
and developer experience in the playground interface.

web/src/components/playground/DebugPanel.js

@@ -16,6 +16,7 @@ import {
   Send,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import CodeViewer from './CodeViewer';
 
 const DebugPanel = ({
   debugData,
@@ -129,17 +130,11 @@ const DebugPanel = ({
               {t('预览请求体')}
             </div>
           } itemKey="preview">
-            <div className="h-full overflow-y-auto bg-gray-50 rounded-lg p-4 model-settings-scroll">
-              {debugData.previewRequest ? (
-                <pre className="debug-code text-gray-700 whitespace-pre-wrap break-words">
-                  {JSON.stringify(debugData.previewRequest, null, 2)}
-                </pre>
-              ) : (
-                <Typography.Text type="secondary" className="text-sm">
-                  {t('正在构造请求体预览...')}
-                </Typography.Text>
-              )}
-            </div>
+            <CodeViewer
+              content={debugData.previewRequest}
+              title="preview"
+              language="json"
+            />
           </TabPane>
 
           <TabPane tab={
@@ -148,19 +143,11 @@ const DebugPanel = ({
               {t('实际请求体')}
             </div>
           } itemKey="request">
-            <div className="h-full overflow-y-auto bg-gray-50 rounded-lg p-4 model-settings-scroll">
-              {debugData.request ? (
-                <>
-                  <pre className="debug-code text-gray-700 whitespace-pre-wrap break-words">
-                    {JSON.stringify(debugData.request, null, 2)}
-                  </pre>
-                </>
-              ) : (
-                <Typography.Text type="secondary" className="text-sm">
-                  {t('暂无请求数据')}
-                </Typography.Text>
-              )}
-            </div>
+            <CodeViewer
+              content={debugData.request}
+              title="request"
+              language="json"
+            />
           </TabPane>
 
           <TabPane tab={
@@ -169,17 +156,11 @@ const DebugPanel = ({
               {t('响应内容')}
             </div>
           } itemKey="response">
-            <div className="h-full overflow-y-auto bg-gray-50 rounded-lg p-4 model-settings-scroll">
-              {debugData.response ? (
-                <pre className="debug-code text-gray-700 whitespace-pre-wrap break-words">
-                  {debugData.response}
-                </pre>
-              ) : (
-                <Typography.Text type="secondary" className="text-sm">
-                  {t('暂无响应数据')}
-                </Typography.Text>
-              )}
-            </div>
+            <CodeViewer
+              content={debugData.response}
+              title="response"
+              language="javascript"
+            />
           </TabPane>
         </Tabs>
       </div>