feat: display file icon according to the file extesion

Sloaix · Dec 17, 2019 · 8bd70b4 · 8bd70b4
1 parent 8bb5803
commit 8bd70b4
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 9 deletions.
diff --git a/gofi-frontend/package.json b/gofi-frontend/package.json
@@ -130,9 +130,5 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 10"
-  ],
-  "collective": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/ant-design-pro-vue"
-  }
+  ]
 }
diff --git a/gofi-frontend/src/components/GofiIcon/GofiIcon.vue b/gofi-frontend/src/components/GofiIcon/GofiIcon.vue
@@ -0,0 +1,57 @@
+<template>
+  <a-icon :type="iconName" theme="outlined"/>
+</template>
+
+<script>
+const extIconMap = {
+  fileIcons: {
+    'default': 'file',
+    'mp3|wav|mid|ape|flac|aa|aac|m4a|ogg': 'customer-service',
+    'mp4|webm|mkv|flv|avi|mov|wmv|rmvb|3gp': 'video-camera',
+    'jpg|jpeg|png|bmp|gif|webp': 'picture',
+    'txt|text|config|conf|ini|yaml|properties|toml|plist|xml|json': 'file-text',
+    'ppt|pptx': 'file-ppt',
+    'doc|docx': 'file-word',
+    'xls|xlsx': 'file-excel',
+    'md|markdown': 'file-markdown',
+    'pdf': 'file-pdf'
+  },
+  folderIcons: {
+    'default': 'folder'
+  }
+}
+export default {
+  name: 'GofiIcon',
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'default'
+    },
+    isFolder: {
+      type: Boolean,
+      required: true,
+      default: true
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    iconName: function () {
+      const icons = this.isFolder ? extIconMap.folderIcons : extIconMap.fileIcons
+      for (const ext of Object.keys(icons)) {
+        if (ext && ext.toLocaleLowerCase().includes(this.type.toLocaleLowerCase())) {
+          return icons[ext]
+        }
+      }
+      return icons.default
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/gofi-frontend/src/views/disk/AllFile.vue b/gofi-frontend/src/views/disk/AllFile.vue
@@ -41,7 +41,7 @@
           <span slot="title">{{ $t('allFile.name') }}</span>
           <template slot-scope="text, record">
             <span>
-              <a-icon :type="record.isDirectory?'folder':'file'" style="margin-right: 8px"></a-icon>
+              <gofi-icon :is-folder="record.isDirectory" :type="record.extension" style="margin-right: 8px"/>
               <router-link
                 v-if="record.isDirectory"
                 :to="{path:'',query: { path:record.path}}">{{ record.name }}</router-link>
@@ -62,10 +62,10 @@
           </template>
         </a-table-column>
 
-        <!--大小-->
+        <!--最后修改时间-->
         <a-table-column
-          dataIndex="size"
-          key="size"
+          dataIndex="lastModified"
+          key="lastModified"
           width="20%"
         >
           <span slot="title">{{ $t('allFile.lastModified') }}</span>
@@ -96,10 +96,12 @@
 <script>
 import api, { getFileList } from '@/api/disk'
 import { PageView } from '@/layouts'
+import GofiIcon from '../../components/GofiIcon/GofiIcon'
 
 export default {
   name: 'AllFile',
   components: {
+    GofiIcon,
     PageView
   },
   data () {