11import type { CustomRenderArgs } from '@uozi-admin/curd'
2+ import type { PropType } from 'vue'
3+ import type { CosyError } from '@/lib/http/types'
4+ import { defineComponent , ref } from 'vue'
25import { NotificationTypeT } from '@/constants'
6+ import { translateError } from '@/lib/http/error'
37import notifications from './notifications'
48
9+ // Helper function to parse and translate error
10+ async function parseError ( response : string ) : Promise < string | null > {
11+ try {
12+ const errorData = JSON . parse ( response ) as CosyError
13+ if ( errorData . scope && errorData . code ) {
14+ return await translateError ( errorData )
15+ }
16+ }
17+ catch ( error ) {
18+ console . error ( 'Failed to parse error response:' , error )
19+ }
20+ return null
21+ }
22+
23+ // Create a component for error details to properly handle async translation
24+ const ErrorDetails = defineComponent ( {
25+ props : {
26+ response : {
27+ type : [ String , Object ] as PropType < string | object > ,
28+ required : true ,
29+ } ,
30+ } ,
31+ setup ( props ) {
32+ const translatedError = ref < string > ( '' )
33+ const isLoading = ref ( true )
34+
35+ // Convert response to string if it's an object
36+ const responseString = typeof props . response === 'string'
37+ ? props . response
38+ : JSON . stringify ( props . response )
39+
40+ // Immediately start translation
41+ parseError ( responseString ) . then ( result => {
42+ if ( result ) {
43+ translatedError . value = result
44+ }
45+ isLoading . value = false
46+ } )
47+
48+ return ( ) => {
49+ const parsedResponse = typeof props . response === 'string'
50+ ? JSON . parse ( props . response )
51+ : props . response
52+
53+ return (
54+ < div class = "mt-2" >
55+ { /* 显示翻译后的错误信息（如果有） */ }
56+ { translatedError . value && (
57+ < div class = "text-red-500 font-medium mb-2" >
58+ { translatedError . value }
59+ </ div >
60+ ) }
61+
62+ { /* 显示翻译状态 */ }
63+ { isLoading . value && (
64+ < div class = "text-gray-500 text-sm mb-2" >
65+ { $gettext ( 'Translating error...' ) }
66+ </ div >
67+ ) }
68+
69+ { /* 默认显示原始错误信息 */ }
70+ < details class = "mt-2" >
71+ < summary class = "cursor-pointer text-sm text-gray-600 hover:text-gray-800" >
72+ { $gettext ( 'Error details' ) }
73+ </ summary >
74+ < pre class = "mt-2 p-2 bg-gray-100 rounded text-xs overflow-hidden whitespace-pre-wrap break-words max-w-full" >
75+ { JSON . stringify ( parsedResponse , null , 2 ) }
76+ </ pre >
77+ </ details >
78+ </ div >
79+ )
80+ }
81+ } ,
82+ } )
83+
584export function detailRender ( args : Pick < CustomRenderArgs , 'record' | 'text' > ) {
685 try {
786 return (
@@ -14,7 +93,7 @@ export function detailRender(args: Pick<CustomRenderArgs, 'record' | 'text'>) {
1493 </ div >
1594 { args . record . details ?. response && args . record . type !== NotificationTypeT . Success && (
1695 < div >
17- { JSON . stringify ( args . record . details . response ) }
96+ < ErrorDetails response = { args . record . details . response } />
1897 </ div >
1998 ) }
2099 </ div >
0 commit comments