!333 文件列表增加图片的展示和预览

Merge pull request !333 from boide/file-preview

src/views/infra/file/index.vue

@@ -59,6 +59,21 @@
         :formatter="fileSizeFormatter"
         :formatter="fileSizeFormatter"
       />
       />
       <el-table-column label="文件类型" align="center" prop="type" width="180px" />
       <el-table-column label="文件类型" align="center" prop="type" width="180px" />
+      <el-table-column label="文件内容" align="center" prop="url" width="110px">
+        <template #default="{ row }">
+          <el-image
+            v-if="row.type.includes('image')"
+            class="h-80px w-80px"
+            lazy
+            :src="row.url"
+            :preview-src-list="[row.url]"
+            preview-teleported
+            fit="cover"
+          />
+          <el-link v-else-if="row.type.includes('pdf')" type="primary" :href="row.url" :underline="false" target="_blank">预览</el-link>
+          <el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank">下载</el-link>
+        </template>
+      </el-table-column>
       <el-table-column
       <el-table-column
         label="上传时间"
         label="上传时间"
         align="center"
         align="center"