文件图标增加对图片的本地读取支持;tooltip的文件名称显示追加扩展名

src/components/FileIcon/FileIcon.tsx

@@ -7,16 +7,18 @@ import { memoize } from 'lodash';
 
 interface FileIconProps extends ImageProps {
   extension: string;
+  absolutePath?: string;
 }
 
 export default memo(function FileIcon(props: FileIconProps) {
-  const { className, extension, ...restProps } = props;
+  const { className, extension, absolutePath, ...restProps } = props;
+  const isImg = isImgFile(extension) && !!absolutePath;
   return (
     <div className={classNames(styles.fileIcon, className)}>
       <Image
         preview={false}
         {...restProps}
-        src={fileIconSrc(extension)}
+        src={isImg ? absolutePath : fileIconSrc(extension)}
         fallback={fileIconSrc('default')}
       />
     </div>
@@ -28,6 +30,12 @@ const fileIconSrc = memoize((extension: string) => {
   return `assets/file_icon/${fixedExtension}.svg`;
 });
 
+const imgList: string[] = ['jpg', 'png', 'bmp', 'gif', 'jpeg'];
+
+function isImgFile(extension: string) {
+  return imgList.includes(extension);
+}
+
 export function matchFileImage(extension: string) {
   switch (extension) {
     case 'ppt':

src/components/FileStatus/FileStatus.tsx

@@ -50,9 +50,13 @@ export default function FileStatus(props: FileStatusProps) {
   return (
     <div className={classNames(styles.fileStatus, className)} style={style}>
       <div className={styles.left}>
-        <FileIcon className={styles.icon} extension={data.extension} />
+        <FileIcon
+          className={styles.icon}
+          extension={data.extension}
+          absolutePath={data.absolutePath}
+        />
         <div className={styles.content}>
-          <ATooltip placement="top" title={data.archName}>
+          <ATooltip placement="top" title={fileFullName(data)}>
             <div className={styles.fileName}>{data.archName}</div>
           </ATooltip>
           <div className={styles.subContent}>
@@ -134,6 +138,11 @@ interface LoadDescProps {
   progress?: number;
 }
 
+function fileFullName(data: DATA.SocketFileMsg) {
+  const extension = data.extension;
+  return `${data.archName}${extension ? '.' + extension : ''}`;
+}
+
 function LoadDesc(props: LoadDescProps) {
   const { result, type, loadingState, progress } = props;
   const keywords = type === 'UPLOAD' ? '上传' : '下载';