From 65207ea853684bea74116d0b183be3e2e8951088 Mon Sep 17 00:00:00 2001
From: n0099 <n@n0099.net>
Date: Sat, 24 Feb 2024 21:38:14 +0800
Subject: [PATCH] * now will not show `error` when it's null * now will split
 the array of `errorInfo` into `<p>` tags @ `<PlaceholderError>`

* replace field `response` to its `.body.text()` @ `api/index.ts.FetchResponseError`
* rename class name from camelCase to kebab-case @ `<SelectUser>` & `<PlaceholderError>`
@ fe
---
 fe/src/api/index.ts                           |  9 ++++----
 .../placeholders/PlaceholderError.vue         | 22 +++++++++----------
 fe/src/components/widgets/SelectUser.vue      |  8 +++----
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/fe/src/api/index.ts b/fe/src/api/index.ts
index 40a40396..636fc782 100644
--- a/fe/src/api/index.ts
+++ b/fe/src/api/index.ts
@@ -15,8 +15,8 @@ export class ApiResponseError extends Error {
     }
 }
 export class FetchResponseError extends Error {
-    public constructor(public readonly response: Response) {
-        super(JSON.stringify(response));
+    public constructor(public readonly bodyText: string) {
+        super(bodyText);
     }
 }
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
@@ -40,10 +40,11 @@ export const queryFunction = <TResponse, TQueryParam>(endpoint: string, queryPar
                 { headers: { Accept: 'application/json' }, signal: queryContext.signal }
             );
             const json = await response.json() as TResponse;
-            if (!response.ok)
-                throw new FetchResponseError(response);
             if (isApiError(json))
                 throw new ApiResponseError(json.errorCode, json.errorInfo);
+            const response2 = response.clone();
+            if (!response.ok)
+                throw new FetchResponseError(await response2.text());
 
             return json;
         } finally {
diff --git a/fe/src/components/placeholders/PlaceholderError.vue b/fe/src/components/placeholders/PlaceholderError.vue
index 6235cce0..ec051d6b 100644
--- a/fe/src/components/placeholders/PlaceholderError.vue
+++ b/fe/src/components/placeholders/PlaceholderError.vue
@@ -1,23 +1,23 @@
 <template>
     <div class="text-center">
-        <template v-if="error === null">
-            <span class="errorCode text-muted">error</span>
-        </template>
-        <template v-else-if="error instanceof FetchResponseError">
-            <p class="errorCode text-muted">{{ error.response }}</p>
+        <template v-if="error instanceof FetchResponseError">
+            <p class="error-code text-muted">{{ error.bodyText }}</p>
         </template>
         <template v-else-if="error instanceof ApiResponseError">
-            <p class="errorCode text-muted">{{ error.errorCode }}</p>
+            <p class="error-code text-muted">{{ error.errorCode }}</p>
             <template v-if="_.isString(error.errorInfo)">
                 <p v-for="(info, _k) in error.errorInfo.split('\n')" :key="_k">{{ info }}</p>
             </template>
             <template v-else-if="_.isObject(error.errorInfo)">
-                <p v-for="(lines, paramName) in error.errorInfo" :key="paramName">
+                <p v-for="(paramError, paramName) in error.errorInfo" :key="paramName">
                     参数 {{ paramName }}：
-                    <template v-if="_.isString(lines)">
-                        <p v-for="(info, _k) in lines.split('\n')" :key="_k">{{ info }}</p>
+                    <template v-if="_.isString(paramError)">
+                        <p v-for="(line, _k) in paramError.split('\n')" :key="_k">{{ line }}</p>
+                    </template>
+                    <template v-else-if="_.isArray(paramError) && paramError.length > 1">
+                        <p v-for="(item, _k) in paramError" :key="_k">{{ item }}</p>
                     </template>
-                    <template v-else>{{ lines }}</template>
+                    <template v-else>{{ paramError }}</template>
                 </p>
             </template>
         </template>
@@ -33,7 +33,7 @@ defineProps<{ error: ApiErrorClass | null }>();
 </script>
 
 <style scoped>
-.errorCode {
+.error-code {
     font-size: 6rem;
 }
 </style>
diff --git a/fe/src/components/widgets/SelectUser.vue b/fe/src/components/widgets/SelectUser.vue
index 31229132..41d14802 100644
--- a/fe/src/components/widgets/SelectUser.vue
+++ b/fe/src/components/widgets/SelectUser.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="col-5">
         <div class="input-group">
-            <select v-model="selectBy" class="selectUserBy form-select">
+            <select v-model="selectBy" class="select-user-by form-select">
                 <option value="">未选择</option>
                 <option value="uid">百度UID</option>
                 <option value="name">用户名</option>
@@ -10,7 +10,7 @@
                 <option value="displayNameNULL">NULL覆盖名</option>
             </select>
             <template v-if="selectBy === 'uid'">
-                <select v-model="params.uidCompareBy" class="uidCompareBy form-select">
+                <select v-model="params.uidCompareBy" class="uid-compare-by form-select">
                     <option>&lt;</option>
                     <option>=</option>
                     <option>&gt;</option>
@@ -107,10 +107,10 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.selectUserBy {
+.select-user-by {
     flex-grow: .3;
 }
-.uidCompareBy {
+.uid-compare-by {
     flex-grow: .1;
 }
 </style>