perf: image

client/src/components/Markdown/Image.tsx

@@ -3,17 +3,37 @@ import { Image, Skeleton } from '@chakra-ui/react';
 
 const MdImage = ({ src }: { src: string }) => {
   const [isLoading, setIsLoading] = useState(true);
+  const [succeed, setSucceed] = useState(false);
   return (
-    <Skeleton minH="60px" isLoaded={!isLoading} fadeDuration={2}>
+    <Skeleton
+      minH="100px"
+      isLoaded={!isLoading}
+      fadeDuration={2}
+      display={'flex'}
+      justifyContent={'center'}
+      my={1}
+    >
       <Image
+        display={'inline-block'}
+        borderRadius={'md'}
         src={src}
         alt={''}
         fallbackSrc={'/imgs/errImg.png'}
-        onLoad={() => setIsLoading(false)}
+        fallbackStrategy={'onError'}
+        cursor={succeed ? 'pointer' : 'default'}
+        loading="eager"
+        onLoad={() => {
+          setIsLoading(false);
+          setSucceed(true);
+        }}
         onError={() => setIsLoading(false)}
+        onClick={() => {
+          if (!succeed) return;
+          window.open(src, '_blank');
+        }}
       />
     </Skeleton>
   );
 };
 
-export default MdImage;
+export default React.memo(MdImage);

client/src/components/Markdown/Loading.tsx

@@ -1,17 +1,24 @@
 import React, { memo } from 'react';
 import { Box } from '@chakra-ui/react';
 
-const Loading = () => {
+const Loading = ({ text }: { text?: string }) => {
   return (
-    <Box
-      minW={'100px'}
-      w={'100%'}
-      h={'80px'}
-      backgroundImage={'url("/imgs/loading.gif")'}
-      backgroundSize={'contain'}
-      backgroundRepeat={'no-repeat'}
-      backgroundPosition={'center'}
-    />
+    <Box>
+      <Box
+        minW={'100px'}
+        w={'100%'}
+        h={'80px'}
+        backgroundImage={'url("/imgs/loading.gif")'}
+        backgroundSize={'contain'}
+        backgroundRepeat={'no-repeat'}
+        backgroundPosition={'center'}
+      />
+      {text && (
+        <Box mt={1} textAlign={'center'} fontSize={'sm'} color={'myGray.600'}>
+          {text}
+        </Box>
+      )}
+    </Box>
   );
 };
 

client/src/components/Markdown/index.tsx

@@ -35,13 +35,17 @@ const Markdown = ({
       components={{
         pre: 'div',
         img({ src = '' }) {
-          return <MdImage src={src} />;
+          return isChatting ? <Loading text="图片加载中..." /> : <MdImage src={src} />;
         },
         code({ node, inline, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || '');
 
           if (match?.[1] === 'mermaid') {
-            return isChatting ? <Loading /> : <MermaidCodeBlock code={String(children)} />;
+            return isChatting ? (
+              <Loading text="导图加载中..." />
+            ) : (
+              <MermaidCodeBlock code={String(children)} />
+            );
           }
 
           return (