feat(notification): add error handling component

Author: 0xJacky

app/src/components/Notification/detailRender.tsx

@@ -1,7 +1,86 @@
 import type { CustomRenderArgs } from '@uozi-admin/curd'
+import type { PropType } from 'vue'
+import type { CosyError } from '@/lib/http/types'
+import { defineComponent, ref } from 'vue'
 import { NotificationTypeT } from '@/constants'
+import { translateError } from '@/lib/http/error'
 import notifications from './notifications'
 
+// Helper function to parse and translate error
+async function parseError(response: string): Promise<string | null> {
+  try {
+    const errorData = JSON.parse(response) as CosyError
+    if (errorData.scope && errorData.code) {
+      return await translateError(errorData)
+    }
+  }
+  catch (error) {
+    console.error('Failed to parse error response:', error)
+  }
+  return null
+}
+
+// Create a component for error details to properly handle async translation
+const ErrorDetails = defineComponent({
+  props: {
+    response: {
+      type: [String, Object] as PropType<string | object>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const translatedError = ref<string>('')
+    const isLoading = ref(true)
+
+    // Convert response to string if it's an object
+    const responseString = typeof props.response === 'string'
+      ? props.response
+      : JSON.stringify(props.response)
+
+    // Immediately start translation
+    parseError(responseString).then(result => {
+      if (result) {
+        translatedError.value = result
+      }
+      isLoading.value = false
+    })
+
+    return () => {
+      const parsedResponse = typeof props.response === 'string'
+        ? JSON.parse(props.response)
+        : props.response
+
+      return (
+        <div class="mt-2">
+          {/* 显示翻译后的错误信息（如果有） */}
+          {translatedError.value && (
+            <div class="text-red-500 font-medium mb-2">
+              {translatedError.value}
+            </div>
+          )}
+
+          {/* 显示翻译状态 */}
+          {isLoading.value && (
+            <div class="text-gray-500 text-sm mb-2">
+              {$gettext('Translating error...')}
+            </div>
+          )}
+
+          {/* 默认显示原始错误信息 */}
+          <details class="mt-2">
+            <summary class="cursor-pointer text-sm text-gray-600 hover:text-gray-800">
+              {$gettext('Error details')}
+            </summary>
+            <pre class="mt-2 p-2 bg-gray-100 rounded text-xs overflow-hidden whitespace-pre-wrap break-words max-w-full">
+              {JSON.stringify(parsedResponse, null, 2)}
+            </pre>
+          </details>
+        </div>
+      )
+    }
+  },
+})
+
 export function detailRender(args: Pick<CustomRenderArgs, 'record' | 'text'>) {
   try {
     return (
@@ -14,7 +93,7 @@ export function detailRender(args: Pick<CustomRenderArgs, 'record' | 'text'>) {
         </div>
         {args.record.details?.response && args.record.type !== NotificationTypeT.Success && (
           <div>
-            { JSON.stringify(args.record.details.response) }
+            <ErrorDetails response={args.record.details.response} />
           </div>
         )}
       </div>

app/src/language/ar/app.po

@@ -1891,6 +1891,10 @@ msgstr "البيئات"
 msgid "Error"
 msgstr "خطأ"
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr "تفاصيل الخطأ"
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr "خطأ في تهيئة عارض الاختلافات"
@@ -5707,6 +5711,10 @@ msgstr ""
 "TOTP هو طريقة مصادقة ثنائية تستخدم خوارزمية كلمة مرور لمرة واحدة تعتمد على "
 "الوقت."
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr "جاري ترجمة الخطأ..."
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr "مهملات"

app/src/language/de_DE/app.po

@@ -1915,6 +1915,10 @@ msgstr "Umgebungen"
 msgid "Error"
 msgstr "Fehler"
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr "Fehlerdetails"
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr "Fehler beim Initialisieren des Diff-Viewers"
@@ -5801,6 +5805,10 @@ msgstr ""
 "TOTP ist eine Zwei-Faktor-Authentifizierungsmethode, die einen "
 "zeitbasierten Einmalpasswortalgorithmus verwendet."
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr "Fehler wird übersetzt..."
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr "Mülleimer"

app/src/language/en/app.po

@@ -1824,6 +1824,10 @@ msgstr ""
 msgid "Error"
 msgstr ""
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr ""
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr ""
@@ -5534,6 +5538,10 @@ msgid ""
 "password algorithm."
 msgstr ""
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr ""
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr ""

app/src/language/es/app.po

@@ -1926,6 +1926,10 @@ msgstr "Entornos"
 msgid "Error"
 msgstr "Error"
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr "Detalles del error"
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr "Error al inicializar el visor de diferencias"
@@ -5809,6 +5813,10 @@ msgstr ""
 "TOTP es un método de autenticación de dos factores que utiliza un algoritmo "
 "de contraseña de un solo uso basado en el tiempo."
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr "Traduciendo error..."
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr "Basura"

app/src/language/fr_FR/app.po

@@ -1922,6 +1922,10 @@ msgstr "Environnements"
 msgid "Error"
 msgstr "Erreur"
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr "Détails de l'erreur"
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr "Erreur lors de l'initialisation du visualiseur de différences"
@@ -5818,6 +5822,10 @@ msgstr ""
 "TOTP est une méthode d'authentification à deux facteurs qui utilise un "
 "algorithme de mot de passe à usage unique basé sur le temps."
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr "Traduction de l'erreur..."
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr "Corbeille"

app/src/language/ja_JP/app.po

@@ -1858,6 +1858,10 @@ msgstr "環境"
 msgid "Error"
 msgstr "エラー"
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr "エラーの詳細"
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr "差分ビューアの初期化エラー"
@@ -5602,6 +5606,10 @@ msgid ""
 "password algorithm."
 msgstr "TOTP は、時間ベースのワンタイムパスワードアルゴリズムを使用する二要素認証方法です。"
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr "エラーを翻訳中..."
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr "ゴミ箱"

app/src/language/ko_KR/app.po

@@ -1857,6 +1857,10 @@ msgstr "환경"
 msgid "Error"
 msgstr "오류"
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr "오류 세부 정보"
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr "차이점 뷰어 초기화 오류"
@@ -5138,7 +5142,7 @@ msgstr "인증서 동기화"
 
 #: src/components/Notification/notifications.ts:62
 msgid "Sync Certificate %{cert_name} to %{env_name} failed"
-msgstr "인증서 %{cert_name}을(를) %{env_name}(으)로 동기화하지 못했습니다"
+msgstr "인증서 %{cert_name}을(를) %{env_name}에 동기화하지 못했습니다"
 
 #: src/components/Notification/notifications.ts:66
 msgid "Sync Certificate %{cert_name} to %{env_name} successfully"
@@ -5595,6 +5599,10 @@ msgid ""
 "password algorithm."
 msgstr "TOTP는 시간 기반의 일회용 비밀번호 알고리즘을 사용하는 이중 인증 방법입니다."
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr "오류 번역 중..."
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr "휴지통"

app/src/language/messages.pot

@@ -1802,6 +1802,10 @@ msgstr ""
 msgid "Error"
 msgstr ""
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr ""
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr ""
@@ -5421,6 +5425,10 @@ msgstr ""
 msgid "TOTP is a two-factor authentication method that uses a time-based one-time password algorithm."
 msgstr ""
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr ""
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr ""

app/src/language/pt_PT/app.po

@@ -1903,6 +1903,10 @@ msgstr "Ambientes"
 msgid "Error"
 msgstr "Erro"
 
+#: src/components/Notification/detailRender.tsx:72
+msgid "Error details"
+msgstr "Detalhes do erro"
+
 #: src/components/ConfigHistory/DiffViewer.vue:138
 msgid "Error initializing diff viewer"
 msgstr "Erro ao inicializar o visualizador de diferenças"
@@ -5776,6 +5780,10 @@ msgstr ""
 "O TOTP é um método de autenticação de dois fatores que utiliza um algoritmo "
 "de palavra-passe única baseado no tempo."
 
+#: src/components/Notification/detailRender.tsx:65
+msgid "Translating error..."
+msgstr "A traduzir erro..."
+
 #: src/language/curd.ts:20
 msgid "Trash"
 msgstr "Lixo"