From 3e8e8870d60cb6015322dc7bd9e905adfbf158f2 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 24 Jul 2021 20:49:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20AlertErrorView=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AlertErrorView.tsx | 30 ++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/web/src/components/AlertErrorView.tsx b/web/src/components/AlertErrorView.tsx
index 06184ac1..7448b6c4 100644
--- a/web/src/components/AlertErrorView.tsx
+++ b/web/src/components/AlertErrorView.tsx
@@ -1,17 +1,37 @@
-import React from 'react';
-import { Alert } from 'antd';
+import React, { useState } from 'react';
+import { Alert, Button } from 'antd';
+import clsx from 'clsx';
 
 /**
  * 用于接口错误显示的组件
  */
 export const AlertErrorView: React.FC<{
   error: Error;
-}> = React.memo((props) => {
+}> = React.memo(({ error }) => {
+  const [show, setShow] = useState(false);
+
+  const description = (
+    <div>
+      <span>{String(error.message)}</span>
+      <Button
+        className={clsx({
+          'opacity-0': show,
+        })}
+        type="link"
+        onClick={() => setShow(true)}
+      >
+        显示详情
+      </Button>
+      {show && <pre>{String(error.stack)}</pre>}
+    </div>
+  );
+
   return (
     <Alert
+      className="w-full h-full select-text"
       type="error"
-      message={String(props.error.name)}
-      description={String(props.error.message)}
+      message={String(error.name)}
+      description={description}
     />
   );
 });