feat: add file icons

packages/app/src/components/form.fields/upload/index.tsx

@@ -10,6 +10,91 @@ import {
 } from '@ant-design/icons'
 const { Dragger: UploadDragger } = AntdUpload
 
+const exts = [
+  {
+    ext: /\.docx?$/i,
+    icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png'
+  },
+  {
+    ext: /\.pptx?$/i,
+    icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png'
+  },
+  {
+    ext: /\.jpe?g$/i,
+    icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
+  },
+  {
+    ext: /\.pdf$/i,
+    icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png'
+  },
+  {
+    ext: /\.png$/i,
+    icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
+  },
+  {
+    ext: /\.eps$/i,
+    icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png'
+  },
+  {
+    ext: /\.ai$/i,
+    icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png'
+  },
+  {
+    ext: /\.gif$/i,
+    icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png'
+  },
+  {
+    ext: /\.svg$/i,
+    icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png'
+  },
+  {
+    ext: /\.xlsx?$/i,
+    icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png'
+  },
+  {
+    ext: /\.psd?$/i,
+    icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png'
+  },
+  {
+    ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)$/i,
+    icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png'
+  },
+  {
+    ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)$/i,
+    icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
+  },
+  {
+    ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)$/i,
+    icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png'
+  },
+  {
+    ext: /\.[^.]+$/i,
+    icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png'
+  }
+]
+
+const testOpts = (ext, options) => {
+  if (options && isArr(options.include)) {
+    return options.include.some(url => ext.test(url))
+  }
+
+  if (options && isArr(options.exclude)) {
+    return !options.exclude.some(url => ext.test(url))
+  }
+
+  return true
+}
+
+export const getImageByUrl = (url, options) => {
+  for (let i = 0; i < exts.length; i++) {
+    if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) {
+      return exts[i].icon || url
+    }
+  }
+
+  return url
+}
+
 function toFileObject(item) {
   if (item.id && item.uid && item.url) {
     return item;
@@ -45,7 +130,7 @@ export const Upload = connect({
     name: 'file',
     action: `${process.env.API}/attachments:upload`,
     onChange({ file, fileList }) {
-      if (file.status === 'done') {
+      if (['done', 'removed'].indexOf(file.status) !== -1) {
         const values = toFileList(fileList);
         console.log(values);
         setFileList(values);

packages/app/src/components/views/Field/index.tsx

@@ -8,6 +8,7 @@ import isEmpty from 'lodash/isEmpty';
 import { fields2columns } from '../SortableTable';
 import ViewFactory from '..';
 import './style.less';
+import { getImageByUrl } from '@/components/form.fields';
 
 const InterfaceTypes = new Map<string, any>();
 
@@ -238,8 +239,13 @@ export function AttachmentField(props: any) {
 
 export function AttachmentFieldItem(props: any) {
   const { title, url } = props.data || {};
+  const img = getImageByUrl(url, {
+    exclude: ['.png', '.jpg', '.jpeg', '.gif']
+  })
   return (
-    <a className={'attachment-field-item'} target={'_blank'} href={url}>{title}</a>
+    <a className={'attachment-field-item'} target={'_blank'} href={url}>
+      <img style={{marginRight: 5}} height={20} alt={title} title={title} src={img}/>
+    </a>
   );
 }