fix(错误处理): 修复错误块中显示错误信息的问题

修正错误块组件中错误信息的显示问题：
1. 修复BuiltinError组件中错误名称显示为消息的问题
2. 修复AiSdkError组件中原因显示为消息的问题
3. 修复AiApiCallError组件中各种字段显示为消息的问题
4. 使用CodeViewer组件正确显示JSON格式数据
5. 移除CodeViewer组件中不必要的children属性
6. 设置serialize默认pretty为true

src/renderer/src/components/CodeViewer.tsx

@@ -19,7 +19,6 @@ interface CodeViewerProps {
    * - Supports shiki aliases: c#/csharp, objective-c++/obj-c++/objc++, etc.
    */
   language: string
-  children: React.ReactNode
   onHeightChange?: (scrollHeight: number) => void
   /**
    * Height of the scroll container.

src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx

@@ -258,7 +258,7 @@ const BuiltinError = ({ error }: { error: SerializedError }) => {
       {error.name && (
         <ErrorDetailItem>
           <ErrorDetailLabel>{t('error.name')}:</ErrorDetailLabel>
-          <ErrorDetailValue>{error.message}</ErrorDetailValue>
+          <ErrorDetailValue>{error.name}</ErrorDetailValue>
         </ErrorDetailItem>
       )}
       {error.message && (
@@ -282,14 +282,14 @@ const BuiltinError = ({ error }: { error: SerializedError }) => {
 // 作为 base，渲染公共字段，应当在 ErrorDetailList 中渲染
 const AiSdkError = ({ error }: { error: SerializedAiSdkError }) => {
   const { t } = useTranslation()
-  const cause = safeToString(error.cause)
+  const cause = error.cause
   return (
     <>
       <BuiltinError error={error} />
       {cause && (
         <ErrorDetailItem>
           <ErrorDetailLabel>{t('error.cause')}:</ErrorDetailLabel>
-          <ErrorDetailValue>{error.message}</ErrorDetailValue>
+          <ErrorDetailValue>{error.cause}</ErrorDetailValue>
         </ErrorDetailItem>
       )}
     </>
@@ -317,38 +317,39 @@ const AiApiCallError = ({ error }: { error: SerializedAiSdkAPICallError }) => {
       {requestBodyValues && (
         <ErrorDetailItem>
           <ErrorDetailLabel>{t('error.requestBodyValues')}:</ErrorDetailLabel>
-          <ErrorDetailValue>{error.message}</ErrorDetailValue>
+          <CodeViewer value={safeToString(error.requestBodyValues)} className="source-view" language="json" expanded />
         </ErrorDetailItem>
       )}
 
       {error.statusCode && (
         <ErrorDetailItem>
           <ErrorDetailLabel>{t('error.statusCode')}:</ErrorDetailLabel>
-          <ErrorDetailValue>{error.message}</ErrorDetailValue>
+          <ErrorDetailValue>{error.statusCode}</ErrorDetailValue>
         </ErrorDetailItem>
       )}
       {error.responseHeaders && (
         <ErrorDetailItem>
           <ErrorDetailLabel>{t('error.responseHeaders')}:</ErrorDetailLabel>
-          <ErrorDetailValue>{error.message}</ErrorDetailValue>
+          <CodeViewer
+            value={JSON.stringify(error.responseHeaders, null, 2)}
+            className="source-view"
+            language="json"
+            expanded
+          />
         </ErrorDetailItem>
       )}
 
       {error.responseBody && (
         <ErrorDetailItem>
           <ErrorDetailLabel>{t('error.responseBody')}:</ErrorDetailLabel>
-          <CodeViewer className="source-view" language="json" expanded>
+          <CodeViewer value={error.responseBody} className="source-view" language="json" expanded />
-            {JSON.stringify(error.responseBody, null, 2)}
-          </CodeViewer>
         </ErrorDetailItem>
       )}
 
       {data && (
         <ErrorDetailItem>
           <ErrorDetailLabel>{t('error.data')}:</ErrorDetailLabel>
-          <StackTrace>
+          <CodeViewer value={safeToString(error.data)} className="source-view" language="json" expanded />
-            <pre>{error.stack}</pre>
-          </StackTrace>
         </ErrorDetailItem>
       )}
     </ErrorDetailList>

src/renderer/src/utils/serialize.ts

@@ -21,11 +21,12 @@ export function safeSerialize(
 
     /**
      * 是否美化输出
+     * @default true
      */
     pretty?: boolean
   } = {}
 ): string | null {
-  const { onError = 'serialize', pretty = false } = options
+  const { onError = 'serialize', pretty = true } = options
   const space = pretty ? 2 : undefined
 
   // 1. 如果本身就是合法的 Serializable 值，直接序列化