feat: 图片预览单独，修复空文件在 text 类型下显示 undefined

Author: fxss5201

src/components/CodeRender.tsx

@@ -27,26 +27,27 @@ type CodeRenderProps = ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement
 }
 function CodeRender({ children, className, theme = 'light', codeBoxClassName, codeClassName, enableCopy = true, ...rest }: CodeRenderProps) {
   const match = /language-(\w+)/.exec(className || '')
+  const content = children === undefined ? '' : String(children).replace(/\n$/, '')
   return match ? (
     <div className={cn('relative', codeBoxClassName)}>
       <div className='absolute top-[-24px] left-[0] leading-6 z-10 text-gray-400 dark:text-gray-500'>{match[1]}</div>
       {enableCopy && (
         <div className='absolute top-[-24px] right-[-16px] z-10'>
-          <CopyToClipboard text={String(children).replace(/\n$/, '')}></CopyToClipboard>
+          <CopyToClipboard text={content}></CopyToClipboard>
         </div>
       )}
       <SyntaxHighlighter
         PreTag='div'
         className={cn('code-block', codeClassName)}
-        children={String(children).replace(/\n$/, '')}
+        children={content}
         language={match[1]}
         showLineNumbers={true}
         style={theme === 'dark' ? dark : undefined}
       />
     </div>
   ) : (
     <code {...rest} className={cn(className, codeBoxClassName)}>
-      {children}
+      {content}
     </code>
   )
 }

src/components/PreviewFile.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
-import { Image, Modal } from 'antd'
+import { Modal } from 'antd'
 import { getTextFromBlob } from '@/utils'
 import MdRender from '@/components/MdRender'
 import { imgTypes, textTypes } from '@/FileTypes'
+import PreviewImg from './PreviewImg'
 
 export type PreviewFileProps = {
   blob: Blob
@@ -12,7 +13,6 @@ export type PreviewFileProps = {
 
 function PreviewFile({ blob, name, onClose }: PreviewFileProps) {
   const [previewFileSrc, setPreviewFileSrc] = useState('')
-  const [imageOpen, setImageOpen] = useState(false)
   const [modalInfo, setModalInfo] = useState<{
     open: boolean
     title: string
@@ -22,14 +22,16 @@ function PreviewFile({ blob, name, onClose }: PreviewFileProps) {
     title: '',
     content: null,
   })
+
   const fileType = name.split('.').pop()?.toLowerCase() || ''
+  const isImg = imgTypes.includes(fileType)
+  const isText = textTypes.includes(fileType)
 
   useEffect(() => {
     async function initFn() {
-      if (imgTypes.includes(fileType)) {
+      if (isImg) {
         setPreviewFileSrc(URL.createObjectURL(blob))
-        setImageOpen(true)
-      } else if (textTypes.includes(fileType)) {
+      } else if (isText) {
         const fileContent = await getTextFromBlob(blob)
         setModalInfo({
           open: true,
@@ -47,44 +49,34 @@ function PreviewFile({ blob, name, onClose }: PreviewFileProps) {
         content: null,
       })
     }
-  }, [fileType, name, blob])
+  }, [isImg, isText, fileType, name, blob])
 
   return (
     <>
-      {previewFileSrc && (
-        <Image
-          width={200}
-          style={{ display: 'none' }}
-          alt='img'
-          src={previewFileSrc}
-          preview={{
-            open: imageOpen,
-            src: previewFileSrc,
-            onOpenChange: (value) => {
-              setImageOpen(value)
-              URL.revokeObjectURL(previewFileSrc)
-              onClose()
-            },
-          }}
-        />)}
-      {modalInfo?.open && <Modal
-          open={modalInfo?.open}
-          title={modalInfo?.title}
-          width='68vw'
-          closable={true}
-          footer={null}
-          onCancel={() => {
-            setModalInfo({
-              open: false,
-              title: '',
-              content: null,
-            })
-            onClose()
-          }}
-        >
-          {modalInfo?.content}
-        </Modal>
-      }
+      {isImg && previewFileSrc && (
+        <PreviewImg url={previewFileSrc} onClose={() => {
+          URL.revokeObjectURL(previewFileSrc)
+          setPreviewFileSrc('')
+          onClose()
+        }} />
+      )}
+      <Modal
+        open={modalInfo?.open}
+        title={modalInfo?.title}
+        width='68vw'
+        closable={true}
+        footer={null}
+        onCancel={() => {
+          setModalInfo({
+            open: false,
+            title: '',
+            content: null,
+          })
+          onClose()
+        }}
+      >
+        {modalInfo?.content}
+      </Modal>
     </>
   )
 }

src/components/PreviewImg.tsx

@@ -0,0 +1,26 @@
+import { Image } from 'antd'
+
+export type PreviewImgProps = {
+  url: string
+  onClose: () => void
+}
+
+function PreviewImg({ url, onClose }: PreviewImgProps) {
+  return (
+    <Image
+      width={200}
+      style={{ display: 'none' }}
+      alt='img'
+      src={url}
+      preview={{
+        open: true,
+        src: url,
+        onOpenChange: () => {
+          onClose()
+        },
+      }}
+    />
+  )
+}
+
+export default PreviewImg